From e867e216d8e80622755634ad7cb27f13ab49d1c3 Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Sat, 9 May 2026 09:55:32 -0400
Subject: [PATCH] Auto-notes

- example code is a tough mix of recommended best practices and having to support how layers support things differently. Examples (class: fill-primary/50 vs fill: var(--color-primary) fillOpacity={.5} or even worse, using color-mix(...)).
- AutoNotes.svelte has been added to Example.svelte
- It checks auto-notes.ts dictionary and filters based on regex search of source and/or displayed layer to display conditional notifications below example.
- AutoNotes uses upgraded Blockquote.svelte supporting 'basic', 'note', 'tip', 'warning', 'caution' mirroring markdown equivilents.
- no included auto-notes currently, but you uncomment auto-notes.ts and check `Chart` to see.
---
 docs/src/lib/auto-notes.ts                | 20 ++++++++
 docs/src/lib/components/AutoNotes.svelte  | 33 +++++++++++++
 docs/src/lib/components/Blockquote.svelte | 58 +++++++++++++++++++++--
 docs/src/lib/components/Example.svelte    |  2 +
 4 files changed, 108 insertions(+), 5 deletions(-)
 create mode 100644 docs/src/lib/auto-notes.ts
 create mode 100644 docs/src/lib/components/AutoNotes.svelte

diff --git a/docs/src/lib/auto-notes.ts b/docs/src/lib/auto-notes.ts
new file mode 100644
index 000000000..4a539a79a
--- /dev/null
+++ b/docs/src/lib/auto-notes.ts
@@ -0,0 +1,20 @@
+export type Note = {
+	text: string; /* the text of the note */
+	search?: string | RegExp; /* default '' - diplays for any source */
+	layers?: ('svg' | 'canvas' | 'html')[]; /* default [] = shows for all layers */
+	type?: 'basic' | 'note' | 'tip' | 'warning' | 'caution'; /* default 'warning' */
+};
+
+export const autoNotes: Note[] = [
+	// {
+	// 	text: 'your source include the word "createDateSeries" and your layer is "canvas"',
+	// 	search: '/createDateSeries/',
+	// 	layers: ['canvas'],
+	// 	type: 'caution'
+	// },
+	// {
+	// 	text: 'your source include the word "integer" and your layer is "canvas"',
+	// 	search: '/integer/',
+	// 	layers: ['canvas']
+	// }
+];
diff --git a/docs/src/lib/components/AutoNotes.svelte b/docs/src/lib/components/AutoNotes.svelte
new file mode 100644
index 000000000..5b5a9ffbf
--- /dev/null
+++ b/docs/src/lib/components/AutoNotes.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { getSettings } from 'layerchart';
+	import Blockquote from './Blockquote.svelte';
+	import { autoNotes, type Note } from '$lib/auto-notes';
+	import { fly } from 'svelte/transition';
+
+	let { source }: { source: string } = $props();
+
+	const settings = getSettings();
+	let layer = $derived(settings.layer);
+
+	function matchesSource(search: string | RegExp, src: string): boolean {
+		if (search instanceof RegExp) return search.test(src);
+		const slashPattern = search.match(/^\/(.+)\/$/);
+		return slashPattern ? new RegExp(slashPattern[1]).test(src) : false;
+	}
+
+	const notes = $derived(
+		autoNotes.filter(
+			(note: Note) =>
+				(!note.layers || note.layers.length === 0 || note.layers?.includes(layer)) &&
+				(!note.search || matchesSource(note?.search ?? '', source))
+		)
+	);
+</script>
+
+{#each notes as { text, type }, i (i)}
+	<div in:fly={{ x: 300, delay: i * 300 }}>
+		<Blockquote type={type ?? 'warning'}>
+			<p>{text}</p>
+		</Blockquote>
+	</div>
+{/each}
diff --git a/docs/src/lib/components/Blockquote.svelte b/docs/src/lib/components/Blockquote.svelte
index 76852e623..e089b082e 100644
--- a/docs/src/lib/components/Blockquote.svelte
+++ b/docs/src/lib/components/Blockquote.svelte
@@ -1,17 +1,65 @@
 <script lang="ts">
 	import { cls } from '@layerstack/tailwind';
+	import InfoIcon from '~icons/lucide/info';
+	import LightbulbIcon from '~icons/lucide/lightbulb';
+	import WarningIcon from '~icons/lucide/triangle-alert';
+	import CautionIcon from '~icons/lucide/octagon-alert';
 
-	import LucideInfo from '~icons/lucide/info';
+	const { children, type = 'basic' } = $props();
 
-	const { children } = $props();
+	const typeClasses = new Map([
+		[
+			'basic',
+			{
+				container: 'bg-primary/10 border-primary/30 border-l-primary text-primary',
+				icon: 'text-primary'
+			}
+		],
+		[
+			'note',
+			{
+				container: 'bg-blue-500/10 border-blue-500/30 border-l-blue-500 text-blue-500',
+				icon: 'text-blue-500'
+			}
+		],
+		[
+			'tip',
+			{
+				container: 'bg-success/10 border-success/30 border-l-success text-success',
+				icon: 'text-success'
+			}
+		],
+		[
+			'warning',
+			{
+				container: 'bg-warning/10 border-warning/30 border-l-warning text-warning',
+				icon: 'text-warning'
+			}
+		],
+		[
+			'caution',
+			{
+				container: 'bg-danger/10 border-danger/30 border-l-danger text-danger',
+				icon: 'text-danger'
+			}
+		]
+	]);
+
+	const classes = $derived(typeClasses.get(type) ?? typeClasses.get('basic')!);
 </script>
 
 <div
 	class={cls(
-		'bg-primary/10 border border-l-[6px] border-primary/30 border-l-primary text-primary px-4 py-2 my-4 rounded-sm flex items-center gap-2 text-sm',
-		'[&>a]:font-medium [&>a]:underline [&>a]:decoration-dashed [&>a]:decoration-primary/50 [&>a]:underline-offset-2'
+		'border border-l-[6px] px-4 py-2 my-4 rounded-sm flex items-center gap-2 text-sm',
+		'[&>a]:font-medium [&>a]:underline [&>a]:decoration-dashed [&>a]:underline-offset-2',
+		classes.container
 	)}
 >
-	<LucideInfo class="text-primary" />
+	{#if type === 'note'}<InfoIcon class={classes.icon} />
+	{:else if type === 'tip'}<LightbulbIcon class={classes.icon} />
+	{:else if type === 'warning'}<WarningIcon class={classes.icon} />
+	{:else if type === 'caution'}<CautionIcon class={classes.icon} />
+	{:else}<InfoIcon class={classes.icon} />
+	{/if}
 	{@render children()}
 </div>
diff --git a/docs/src/lib/components/Example.svelte b/docs/src/lib/components/Example.svelte
index 62ae649af..faf5e07bf 100644
--- a/docs/src/lib/components/Example.svelte
+++ b/docs/src/lib/components/Example.svelte
@@ -38,6 +38,7 @@
 		getChartSvgString,
 		getSettings
 	} from 'layerchart';
+	import AutoNotes from './AutoNotes.svelte';
 
 	const settings = getSettings();
 	import { movable } from '$lib/actions/movable';
@@ -439,6 +440,7 @@
 		/>
 	</div>
 {/if}
+<AutoNotes source={example?.source ?? ''} />
 
 <Dialog bind:open={pngDialogOpen} on:close={() => (pngDialogOpen = false)} class="max-w-md">
 	<div slot="title">{pngAction === 'copy' ? 'Copy as PNG' : 'Export as PNG'}</div>