@delightstack/components 0.1.0 → 0.2.0

package/SKILL.md

@@ -92,7 +92,7 @@ have the exact types. Do not guess prop names.
 - `AvatarGroup` — Stacked overlapping avatars with overflow indicator (docs: /components/display/avatar-group.md)
 - `Calendar` — Date display/selection with single, range, and multiple modes (docs: /components/display/calendar.md)
 - `Chart` — Data visualization: line, area, bar, horizontal bar, pie, donut (docs: /components/display/chart.md)
-- `Code` — Syntax-highlighted code block with line numbers, copy, diff display (docs: /components/display/code.md)
+- `Code` — Syntax-highlighted code block with line numbers, copy, diff display; its line tokenizer is exported as `tokenizeLine`/`CodeToken` from `@delightstack/components/display` for external highlighters (docs: /components/display/code.md)
 - `Comparison` — Before/after image slider using CSS clip-path reveal (docs: /components/display/comparison.md)
 - `Counter` — Animated count-up/down number with scroll-into-view trigger (docs: /components/display/counter.md)
 - `Expand` — Animated expand/collapse container (docs: /components/display/expand.md)

package/dist/display/Code.svelte

@@ -1,10 +1,6 @@
 <script lang="ts">
 	import { scrollbar } from '../actions/scrollbar';
-
-	interface Token {
-		type: string;
-		content: string;
-	}
+	import { tokenizeLine } from './code-tokens.js';
 
 	const propId = $props.id();
 	let {
@@ -85,246 +81,6 @@
 		};
 	});
 
-	/* ------------------------------------------------------------------ */
-	/*  Built-in tokenizers                                                */
-	/* ------------------------------------------------------------------ */
-
-	function tokenizePlain(line: string): Token[] {
-		return line ? [{ type: 'plain', content: line }] : [{ type: 'plain', content: '' }];
-	}
-
-	function tokenizeByPatterns(line: string, patterns: [RegExp, string][]): Token[] {
-		const tokens: Token[] = [];
-		let remaining = line;
-
-		while (remaining.length > 0) {
-			let earliest_match: {
-				index: number;
-				length: number;
-				type: string;
-				text: string;
-			} | null = null;
-
-			for (const [regex, type] of patterns) {
-				regex.lastIndex = 0;
-				const m = regex.exec(remaining);
-				if (m && (earliest_match === null || m.index < earliest_match.index)) {
-					earliest_match = { index: m.index, length: m[0].length, type, text: m[0] };
-				}
-			}
-
-			if (earliest_match === null) {
-				tokens.push({ type: 'plain', content: remaining });
-				break;
-			}
-
-			if (earliest_match.index > 0) {
-				tokens.push({ type: 'plain', content: remaining.slice(0, earliest_match.index) });
-			}
-
-			tokens.push({ type: earliest_match.type, content: earliest_match.text });
-			remaining = remaining.slice(earliest_match.index + earliest_match.length);
-		}
-
-		return tokens.length ? tokens : [{ type: 'plain', content: '' }];
-	}
-
-	const js_keywords =
-		/\b(abstract|arguments|async|await|boolean|break|byte|case|catch|char|class|const|continue|debugger|default|delete|do|double|else|enum|export|extends|final|finally|float|for|from|function|goto|if|implements|import|in|instanceof|int|interface|let|long|native|new|null|of|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|try|typeof|undefined|var|void|volatile|while|with|yield|true|false)\b/g;
-
-	const ts_keywords =
-		/\b(abstract|arguments|as|async|await|boolean|break|byte|case|catch|char|class|const|continue|debugger|declare|default|delete|do|double|else|enum|export|extends|final|finally|float|for|from|function|goto|if|implements|import|in|infer|instanceof|int|interface|is|keyof|let|long|module|namespace|native|never|new|null|of|package|private|protected|public|readonly|return|short|static|string|number|super|switch|synchronized|this|throw|throws|transient|try|type|typeof|undefined|unknown|var|void|volatile|while|with|yield|true|false)\b/g;
-
-	function tokenizeJS(line: string): Token[] {
-		return tokenizeByPatterns(line, [
-			[/\/\/.*$/g, 'comment'],
-			[/\/\*.*?\*\//g, 'comment'],
-			[/`(?:[^`\\]|\\.)*`/g, 'string'],
-			[/"(?:[^"\\]|\\.)*"/g, 'string'],
-			[/'(?:[^'\\]|\\.)*'/g, 'string'],
-			[/\b\d+\.?\d*(?:e[+-]?\d+)?\b/gi, 'number'],
-			[/\b[A-Za-z_$][\w$]*(?=\s*\()/g, 'function'],
-			[js_keywords, 'keyword'],
-			[/[+\-*/%=!<>&|^~?:]+/g, 'operator'],
-		]);
-	}
-
-	function tokenizeTS(line: string): Token[] {
-		return tokenizeByPatterns(line, [
-			[/\/\/.*$/g, 'comment'],
-			[/\/\*.*?\*\//g, 'comment'],
-			[/`(?:[^`\\]|\\.)*`/g, 'string'],
-			[/"(?:[^"\\]|\\.)*"/g, 'string'],
-			[/'(?:[^'\\]|\\.)*'/g, 'string'],
-			[/\b\d+\.?\d*(?:e[+-]?\d+)?\b/gi, 'number'],
-			[/\b[A-Za-z_$][\w$]*(?=\s*\()/g, 'function'],
-			[ts_keywords, 'keyword'],
-			[/[+\-*/%=!<>&|^~?:]+/g, 'operator'],
-		]);
-	}
-
-	function tokenizeHTML(line: string): Token[] {
-		return tokenizeByPatterns(line, [
-			[/<!--.*?-->/g, 'comment'],
-			[/"[^"]*"/g, 'string'],
-			[/'[^']*'/g, 'string'],
-			[/<\/?[\w-]+/g, 'tag'],
-			[/\/?>/g, 'tag'],
-			[/\b[\w-]+(?==)/g, 'attribute'],
-		]);
-	}
-
-	function tokenizeCSS(line: string): Token[] {
-		return tokenizeByPatterns(line, [
-			[/\/\*.*?\*\//g, 'comment'],
-			[/\/\/.*$/g, 'comment'],
-			[/"(?:[^"\\]|\\.)*"/g, 'string'],
-			[/'(?:[^'\\]|\\.)*'/g, 'string'],
-			[/\b\d+\.?\d*(?:px|em|rem|%|vh|vw|vmin|vmax|deg|s|ms|fr|ch|ex)?\b/g, 'number'],
-			[/@[\w-]+/g, 'keyword'],
-			[/[.#][\w-]+/g, 'variable'],
-			[/[\w-]+(?=\s*:)/g, 'property'],
-			[/:\s*[^;{}]+/g, 'value'],
-		]);
-	}
-
-	function tokenizeJSON(line: string): Token[] {
-		return tokenizeByPatterns(line, [
-			[/"(?:[^"\\]|\\.)*"(?=\s*:)/g, 'property'],
-			[/"(?:[^"\\]|\\.)*"/g, 'string'],
-			[/\b\d+\.?\d*(?:e[+-]?\d+)?\b/gi, 'number'],
-			[/\b(true|false)\b/g, 'keyword'],
-			[/\bnull\b/g, 'keyword'],
-		]);
-	}
-
-	const python_keywords =
-		/\b(False|None|True|and|as|assert|async|await|break|class|continue|def|del|elif|else|except|finally|for|from|global|if|import|in|is|lambda|nonlocal|not|or|pass|raise|return|try|while|with|yield)\b/g;
-
-	function tokenizePython(line: string): Token[] {
-		return tokenizeByPatterns(line, [
-			[/#.*$/g, 'comment'],
-			[/""".*?"""/g, 'string'],
-			[/'''.*?'''/g, 'string'],
-			[/f"(?:[^"\\]|\\.)*"/g, 'string'],
-			[/f'(?:[^'\\]|\\.)*'/g, 'string'],
-			[/"(?:[^"\\]|\\.)*"/g, 'string'],
-			[/'(?:[^'\\]|\\.)*'/g, 'string'],
-			[/@[\w.]+/g, 'decorator'],
-			[/\b\d+\.?\d*(?:e[+-]?\d+)?j?\b/gi, 'number'],
-			[/\b[A-Za-z_]\w*(?=\s*\()/g, 'function'],
-			[python_keywords, 'keyword'],
-			[/[+\-*/%=!<>&|^~@:]+/g, 'operator'],
-		]);
-	}
-
-	function tokenizeBash(line: string): Token[] {
-		return tokenizeByPatterns(line, [
-			[/#.*$/g, 'comment'],
-			[/"(?:[^"\\]|\\.)*"/g, 'string'],
-			[/'[^']*'/g, 'string'],
-			[/\$\{[^}]*\}/g, 'variable'],
-			[/\$[\w]+/g, 'variable'],
-			[/\b\d+\.?\d*\b/g, 'number'],
-			[
-				/\b(alias|bg|bind|break|builtin|caller|case|cd|command|compgen|complete|continue|declare|dirs|disown|do|done|echo|elif|else|enable|esac|eval|exec|exit|export|false|fc|fg|fi|for|function|getopts|hash|help|history|if|in|jobs|kill|let|local|logout|popd|printf|pushd|pwd|read|readonly|return|select|set|shift|shopt|source|suspend|test|then|time|times|trap|true|type|typeset|ulimit|umask|unalias|unset|until|wait|while)\b/g,
-				'keyword',
-			],
-			[/\b[\w./-]+(?=\s|$)/g, 'function'],
-			[/[|&;<>]+/g, 'operator'],
-		]);
-	}
-
-	const sql_keywords =
-		/\b(ADD|ALL|ALTER|AND|ANY|AS|ASC|BACKUP|BETWEEN|BY|CASE|CHECK|COLUMN|CONSTRAINT|CREATE|DATABASE|DEFAULT|DELETE|DESC|DISTINCT|DROP|EACH|ELSE|END|EXEC|EXISTS|FOREIGN|FROM|FULL|GROUP|HAVING|IF|IN|INDEX|INNER|INSERT|INTO|IS|JOIN|KEY|LEFT|LIKE|LIMIT|NOT|NULL|OFFSET|ON|OR|ORDER|OUTER|PRIMARY|PROCEDURE|REFERENCES|REPLACE|RIGHT|ROWNUM|SELECT|SET|TABLE|THEN|TOP|TRUNCATE|UNION|UNIQUE|UPDATE|VALUES|VIEW|WHEN|WHERE|WITH)\b/gi;
-
-	function tokenizeSQL(line: string): Token[] {
-		return tokenizeByPatterns(line, [
-			[/--.*$/g, 'comment'],
-			[/\/\*.*?\*\//g, 'comment'],
-			[/'(?:[^'\\]|\\.)*'/g, 'string'],
-			[/"(?:[^"\\]|\\.)*"/g, 'string'],
-			[/\b\d+\.?\d*\b/g, 'number'],
-			[/\b[A-Za-z_]\w*(?=\s*\()/g, 'function'],
-			[sql_keywords, 'keyword'],
-			[/[+\-*/%=!<>&|^~]+/g, 'operator'],
-		]);
-	}
-
-	function tokenizeSvelte(line: string): Token[] {
-		return tokenizeByPatterns(line, [
-			[/<!--.*?-->/g, 'comment'],
-			[/\/\/.*$/g, 'comment'],
-			[/\{#[\w]+/g, 'keyword'],
-			[/\{\/[\w]+\}/g, 'keyword'],
-			[/\{:[\w]+/g, 'keyword'],
-			[/`(?:[^`\\]|\\.)*`/g, 'string'],
-			[/"(?:[^"\\]|\\.)*"/g, 'string'],
-			[/'(?:[^'\\]|\\.)*'/g, 'string'],
-			[/\b\d+\.?\d*\b/g, 'number'],
-			[/<\/?[\w-]+/g, 'tag'],
-			[/\/?>/g, 'tag'],
-			[/\b[\w-]+(?==)/g, 'attribute'],
-			[/\b[A-Za-z_$][\w$]*(?=\s*\()/g, 'function'],
-			[js_keywords, 'keyword'],
-			[/[+\-*/%=!<>&|^~?:]+/g, 'operator'],
-		]);
-	}
-
-	function tokenizeMarkdown(line: string): Token[] {
-		return tokenizeByPatterns(line, [
-			[/^#{1,6}\s+.*/g, 'heading'],
-			[/`[^`]+`/g, 'code'],
-			[/\*\*[^*]+\*\*/g, 'bold'],
-			[/\*[^*]+\*/g, 'italic'],
-			[/__[^_]+__/g, 'bold'],
-			[/_[^_]+_/g, 'italic'],
-			[/\[([^\]]+)\]\([^)]+\)/g, 'link'],
-			[/!\[([^\]]*)\]\([^)]+\)/g, 'link'],
-		]);
-	}
-
-	function tokenizeLine(line: string, lang: string): Token[] {
-		switch (lang) {
-			case 'javascript':
-			case 'js':
-			case 'jsx':
-				return tokenizeJS(line);
-			case 'typescript':
-			case 'ts':
-			case 'tsx':
-				return tokenizeTS(line);
-			case 'html':
-			case 'xml':
-				return tokenizeHTML(line);
-			case 'css':
-			case 'scss':
-			case 'sass':
-			case 'less':
-				return tokenizeCSS(line);
-			case 'json':
-			case 'jsonc':
-				return tokenizeJSON(line);
-			case 'python':
-			case 'py':
-				return tokenizePython(line);
-			case 'bash':
-			case 'sh':
-			case 'shell':
-			case 'zsh':
-				return tokenizeBash(line);
-			case 'sql':
-				return tokenizeSQL(line);
-			case 'svelte':
-				return tokenizeSvelte(line);
-			case 'markdown':
-			case 'md':
-				return tokenizeMarkdown(line);
-			default:
-				return tokenizePlain(line);
-		}
-	}
-
 	/* ------------------------------------------------------------------ */
 	/*  Derived state                                                      */
 	/* ------------------------------------------------------------------ */

package/dist/display/Code.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Code.svelte.d.ts","sourceRoot":"","sources":["../../src/display/Code.svelte.ts"],"names":[],"mappings":"AAUC,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAmYH,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Code.svelte.d.ts","sourceRoot":"","sources":["../../src/display/Code.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAmJH,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/display/code-tokens.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Shared line tokenizer for syntax highlighting: used by the `Code`
+ * display component and by `@delightstack/editor`'s editable code-block
+ * decorations, so both render identical tokens (`token-<type>` classes).
+ */
+export interface Token {
+    type: string;
+    content: string;
+}
+export declare function tokenizeLine(line: string, lang: string): Token[];
+//# sourceMappingURL=code-tokens.d.ts.map

package/dist/display/code-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-tokens.d.ts","sourceRoot":"","sources":["../../src/display/code-tokens.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,KAAK;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CAChB;AAyMD,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,KAAK,EAAE,CAuChE"}

package/dist/display/code-tokens.js

@@ -0,0 +1,212 @@
+/**
+ * Shared line tokenizer for syntax highlighting: used by the `Code`
+ * display component and by `@delightstack/editor`'s editable code-block
+ * decorations, so both render identical tokens (`token-<type>` classes).
+ */
+/* ------------------------------------------------------------------ */
+/*  Built-in tokenizers                                                */
+/* ------------------------------------------------------------------ */
+function tokenizePlain(line) {
+    return line ? [{ type: 'plain', content: line }] : [{ type: 'plain', content: '' }];
+}
+function tokenizeByPatterns(line, patterns) {
+    const tokens = [];
+    let remaining = line;
+    while (remaining.length > 0) {
+        let earliest_match = null;
+        for (const [regex, type] of patterns) {
+            regex.lastIndex = 0;
+            const m = regex.exec(remaining);
+            if (m && (earliest_match === null || m.index < earliest_match.index)) {
+                earliest_match = { index: m.index, length: m[0].length, type, text: m[0] };
+            }
+        }
+        if (earliest_match === null) {
+            tokens.push({ type: 'plain', content: remaining });
+            break;
+        }
+        if (earliest_match.index > 0) {
+            tokens.push({ type: 'plain', content: remaining.slice(0, earliest_match.index) });
+        }
+        tokens.push({ type: earliest_match.type, content: earliest_match.text });
+        remaining = remaining.slice(earliest_match.index + earliest_match.length);
+    }
+    return tokens.length ? tokens : [{ type: 'plain', content: '' }];
+}
+const js_keywords = /\b(abstract|arguments|async|await|boolean|break|byte|case|catch|char|class|const|continue|debugger|default|delete|do|double|else|enum|export|extends|final|finally|float|for|from|function|goto|if|implements|import|in|instanceof|int|interface|let|long|native|new|null|of|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|try|typeof|undefined|var|void|volatile|while|with|yield|true|false)\b/g;
+const ts_keywords = /\b(abstract|arguments|as|async|await|boolean|break|byte|case|catch|char|class|const|continue|debugger|declare|default|delete|do|double|else|enum|export|extends|final|finally|float|for|from|function|goto|if|implements|import|in|infer|instanceof|int|interface|is|keyof|let|long|module|namespace|native|never|new|null|of|package|private|protected|public|readonly|return|short|static|string|number|super|switch|synchronized|this|throw|throws|transient|try|type|typeof|undefined|unknown|var|void|volatile|while|with|yield|true|false)\b/g;
+function tokenizeJS(line) {
+    return tokenizeByPatterns(line, [
+        [/\/\/.*$/g, 'comment'],
+        [/\/\*.*?\*\//g, 'comment'],
+        [/`(?:[^`\\]|\\.)*`/g, 'string'],
+        [/"(?:[^"\\]|\\.)*"/g, 'string'],
+        [/'(?:[^'\\]|\\.)*'/g, 'string'],
+        [/\b\d+\.?\d*(?:e[+-]?\d+)?\b/gi, 'number'],
+        [/\b[A-Za-z_$][\w$]*(?=\s*\()/g, 'function'],
+        [js_keywords, 'keyword'],
+        [/[+\-*/%=!<>&|^~?:]+/g, 'operator'],
+    ]);
+}
+function tokenizeTS(line) {
+    return tokenizeByPatterns(line, [
+        [/\/\/.*$/g, 'comment'],
+        [/\/\*.*?\*\//g, 'comment'],
+        [/`(?:[^`\\]|\\.)*`/g, 'string'],
+        [/"(?:[^"\\]|\\.)*"/g, 'string'],
+        [/'(?:[^'\\]|\\.)*'/g, 'string'],
+        [/\b\d+\.?\d*(?:e[+-]?\d+)?\b/gi, 'number'],
+        [/\b[A-Za-z_$][\w$]*(?=\s*\()/g, 'function'],
+        [ts_keywords, 'keyword'],
+        [/[+\-*/%=!<>&|^~?:]+/g, 'operator'],
+    ]);
+}
+function tokenizeHTML(line) {
+    return tokenizeByPatterns(line, [
+        [/<!--.*?-->/g, 'comment'],
+        [/"[^"]*"/g, 'string'],
+        [/'[^']*'/g, 'string'],
+        [/<\/?[\w-]+/g, 'tag'],
+        [/\/?>/g, 'tag'],
+        [/\b[\w-]+(?==)/g, 'attribute'],
+    ]);
+}
+function tokenizeCSS(line) {
+    return tokenizeByPatterns(line, [
+        [/\/\*.*?\*\//g, 'comment'],
+        [/\/\/.*$/g, 'comment'],
+        [/"(?:[^"\\]|\\.)*"/g, 'string'],
+        [/'(?:[^'\\]|\\.)*'/g, 'string'],
+        [/\b\d+\.?\d*(?:px|em|rem|%|vh|vw|vmin|vmax|deg|s|ms|fr|ch|ex)?\b/g, 'number'],
+        [/@[\w-]+/g, 'keyword'],
+        [/[.#][\w-]+/g, 'variable'],
+        [/[\w-]+(?=\s*:)/g, 'property'],
+        [/:\s*[^;{}]+/g, 'value'],
+    ]);
+}
+function tokenizeJSON(line) {
+    return tokenizeByPatterns(line, [
+        [/"(?:[^"\\]|\\.)*"(?=\s*:)/g, 'property'],
+        [/"(?:[^"\\]|\\.)*"/g, 'string'],
+        [/\b\d+\.?\d*(?:e[+-]?\d+)?\b/gi, 'number'],
+        [/\b(true|false)\b/g, 'keyword'],
+        [/\bnull\b/g, 'keyword'],
+    ]);
+}
+const python_keywords = /\b(False|None|True|and|as|assert|async|await|break|class|continue|def|del|elif|else|except|finally|for|from|global|if|import|in|is|lambda|nonlocal|not|or|pass|raise|return|try|while|with|yield)\b/g;
+function tokenizePython(line) {
+    return tokenizeByPatterns(line, [
+        [/#.*$/g, 'comment'],
+        [/""".*?"""/g, 'string'],
+        [/'''.*?'''/g, 'string'],
+        [/f"(?:[^"\\]|\\.)*"/g, 'string'],
+        [/f'(?:[^'\\]|\\.)*'/g, 'string'],
+        [/"(?:[^"\\]|\\.)*"/g, 'string'],
+        [/'(?:[^'\\]|\\.)*'/g, 'string'],
+        [/@[\w.]+/g, 'decorator'],
+        [/\b\d+\.?\d*(?:e[+-]?\d+)?j?\b/gi, 'number'],
+        [/\b[A-Za-z_]\w*(?=\s*\()/g, 'function'],
+        [python_keywords, 'keyword'],
+        [/[+\-*/%=!<>&|^~@:]+/g, 'operator'],
+    ]);
+}
+function tokenizeBash(line) {
+    return tokenizeByPatterns(line, [
+        [/#.*$/g, 'comment'],
+        [/"(?:[^"\\]|\\.)*"/g, 'string'],
+        [/'[^']*'/g, 'string'],
+        [/\$\{[^}]*\}/g, 'variable'],
+        [/\$[\w]+/g, 'variable'],
+        [/\b\d+\.?\d*\b/g, 'number'],
+        [
+            /\b(alias|bg|bind|break|builtin|caller|case|cd|command|compgen|complete|continue|declare|dirs|disown|do|done|echo|elif|else|enable|esac|eval|exec|exit|export|false|fc|fg|fi|for|function|getopts|hash|help|history|if|in|jobs|kill|let|local|logout|popd|printf|pushd|pwd|read|readonly|return|select|set|shift|shopt|source|suspend|test|then|time|times|trap|true|type|typeset|ulimit|umask|unalias|unset|until|wait|while)\b/g,
+            'keyword',
+        ],
+        [/\b[\w./-]+(?=\s|$)/g, 'function'],
+        [/[|&;<>]+/g, 'operator'],
+    ]);
+}
+const sql_keywords = /\b(ADD|ALL|ALTER|AND|ANY|AS|ASC|BACKUP|BETWEEN|BY|CASE|CHECK|COLUMN|CONSTRAINT|CREATE|DATABASE|DEFAULT|DELETE|DESC|DISTINCT|DROP|EACH|ELSE|END|EXEC|EXISTS|FOREIGN|FROM|FULL|GROUP|HAVING|IF|IN|INDEX|INNER|INSERT|INTO|IS|JOIN|KEY|LEFT|LIKE|LIMIT|NOT|NULL|OFFSET|ON|OR|ORDER|OUTER|PRIMARY|PROCEDURE|REFERENCES|REPLACE|RIGHT|ROWNUM|SELECT|SET|TABLE|THEN|TOP|TRUNCATE|UNION|UNIQUE|UPDATE|VALUES|VIEW|WHEN|WHERE|WITH)\b/gi;
+function tokenizeSQL(line) {
+    return tokenizeByPatterns(line, [
+        [/--.*$/g, 'comment'],
+        [/\/\*.*?\*\//g, 'comment'],
+        [/'(?:[^'\\]|\\.)*'/g, 'string'],
+        [/"(?:[^"\\]|\\.)*"/g, 'string'],
+        [/\b\d+\.?\d*\b/g, 'number'],
+        [/\b[A-Za-z_]\w*(?=\s*\()/g, 'function'],
+        [sql_keywords, 'keyword'],
+        [/[+\-*/%=!<>&|^~]+/g, 'operator'],
+    ]);
+}
+function tokenizeSvelte(line) {
+    return tokenizeByPatterns(line, [
+        [/<!--.*?-->/g, 'comment'],
+        [/\/\/.*$/g, 'comment'],
+        [/\{#[\w]+/g, 'keyword'],
+        [/\{\/[\w]+\}/g, 'keyword'],
+        [/\{:[\w]+/g, 'keyword'],
+        [/`(?:[^`\\]|\\.)*`/g, 'string'],
+        [/"(?:[^"\\]|\\.)*"/g, 'string'],
+        [/'(?:[^'\\]|\\.)*'/g, 'string'],
+        [/\b\d+\.?\d*\b/g, 'number'],
+        [/<\/?[\w-]+/g, 'tag'],
+        [/\/?>/g, 'tag'],
+        [/\b[\w-]+(?==)/g, 'attribute'],
+        [/\b[A-Za-z_$][\w$]*(?=\s*\()/g, 'function'],
+        [js_keywords, 'keyword'],
+        [/[+\-*/%=!<>&|^~?:]+/g, 'operator'],
+    ]);
+}
+function tokenizeMarkdown(line) {
+    return tokenizeByPatterns(line, [
+        [/^#{1,6}\s+.*/g, 'heading'],
+        [/`[^`]+`/g, 'code'],
+        [/\*\*[^*]+\*\*/g, 'bold'],
+        [/\*[^*]+\*/g, 'italic'],
+        [/__[^_]+__/g, 'bold'],
+        [/_[^_]+_/g, 'italic'],
+        [/\[([^\]]+)\]\([^)]+\)/g, 'link'],
+        [/!\[([^\]]*)\]\([^)]+\)/g, 'link'],
+    ]);
+}
+export function tokenizeLine(line, lang) {
+    switch (lang) {
+        case 'javascript':
+        case 'js':
+        case 'jsx':
+            return tokenizeJS(line);
+        case 'typescript':
+        case 'ts':
+        case 'tsx':
+            return tokenizeTS(line);
+        case 'html':
+        case 'xml':
+            return tokenizeHTML(line);
+        case 'css':
+        case 'scss':
+        case 'sass':
+        case 'less':
+            return tokenizeCSS(line);
+        case 'json':
+        case 'jsonc':
+            return tokenizeJSON(line);
+        case 'python':
+        case 'py':
+            return tokenizePython(line);
+        case 'bash':
+        case 'sh':
+        case 'shell':
+        case 'zsh':
+            return tokenizeBash(line);
+        case 'sql':
+            return tokenizeSQL(line);
+        case 'svelte':
+            return tokenizeSvelte(line);
+        case 'markdown':
+        case 'md':
+            return tokenizeMarkdown(line);
+        default:
+            return tokenizePlain(line);
+    }
+}

package/dist/display/index.d.ts

@@ -7,6 +7,7 @@ export { default as Chart } from './Chart.svelte';
 export type { ChartData, Dataset as ChartDataset } from './Chart.svelte';
 export type { CalendarEvent, MarkedDate } from './Calendar.svelte';
 export { default as Code } from './Code.svelte';
+export { tokenizeLine, type Token as CodeToken } from './code-tokens.js';
 export { default as Comparison } from './Comparison.svelte';
 export { default as Counter } from './Counter.svelte';
 export { default as Expand } from './Expand.svelte';

package/dist/display/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/display/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EAAE,SAAS,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,EAAE,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EACX,MAAM,IAAI,WAAW,EACrB,gBAAgB,IAAI,qBAAqB,EACzC,aAAa,EACb,oBAAoB,EACpB,eAAe,EACf,UAAU,IAAI,eAAe,EAC7B,eAAe,IAAI,oBAAoB,EACvC,iBAAiB,IAAI,sBAAsB,EAC3C,uBAAuB,IAAI,4BAA4B,EACvD,cAAc,IAAI,mBAAmB,GACrC,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/display/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EAAE,SAAS,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,KAAK,KAAK,IAAI,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,EAAE,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EACX,MAAM,IAAI,WAAW,EACrB,gBAAgB,IAAI,qBAAqB,EACzC,aAAa,EACb,oBAAoB,EACpB,eAAe,EACf,UAAU,IAAI,eAAe,EAC7B,eAAe,IAAI,oBAAoB,EACvC,iBAAiB,IAAI,sBAAsB,EAC3C,uBAAuB,IAAI,4BAA4B,EACvD,cAAc,IAAI,mBAAmB,GACrC,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/display/index.js

@@ -4,6 +4,7 @@ export { default as AvatarGroup } from './AvatarGroup.svelte';
 export { default as Calendar } from './Calendar.svelte';
 export { default as Chart } from './Chart.svelte';
 export { default as Code } from './Code.svelte';
+export { tokenizeLine } from './code-tokens.js';
 export { default as Comparison } from './Comparison.svelte';
 export { default as Counter } from './Counter.svelte';
 export { default as Expand } from './Expand.svelte';

package/dist/form/Input.svelte

@@ -2362,15 +2362,26 @@
 	/*  NUMBER STEPPERS                                                    */
 	/* ================================================================== */
 
-	/* The stepper pair sits after the suffix. */
+	/* The stepper pair sits after the suffix. The buttons keep their full-size
+	   (4em, ~field-height) touch targets but pull together and into the field's
+	   end padding with negative margins, so the pair's visual footprint stays
+	   compact. */
 	.steppers {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
-		gap: 0.1em;
+		gap: 0;
 		flex-shrink: 0;
 		order: 2;
-		margin-right: -0.35em;
+		margin-right: -0.45em;
+	}
+	.steppers :global(.button.input-icon-btn) {
+		margin-inline: -0.5em;
+	}
+	/* The leading edge backs off only slightly — a strong pull there would
+	   drag the hit target over the field's text/clear button. */
+	.steppers :global(.button.input-icon-btn:first-child) {
+		margin-inline-start: -0.2em;
 	}
 
 	/* A thin divider sets the steppers off from the suffix — only needed when
@@ -2380,7 +2391,9 @@
 		align-self: center;
 		width: 1px;
 		height: 1.5em;
-		margin-right: 0.35em;
+		/* Clears the first stepper's negative leading margin (-0.2em at half
+		   font = 0.1em here) plus the original 0.35em breathing room */
+		margin-right: 0.45em;
 		background: var(--_border);
 	}
 

package/dist/form/Select.svelte

@@ -794,8 +794,15 @@
 						</span>
 					</span>
 				{/each}
-			{:else if !multiple && selectedOptions && !Array.isArray(selectedOptions)}
+			{:else if !multiple && hasValue && selectedOptions && !Array.isArray(selectedOptions)}
 				<span class="single-value">{selectedOptions.label}</span>
+			{:else if !multiple && !hasValue && selectedOptions && !Array.isArray(selectedOptions) && labelFloated}
+				<!-- An "empty" option (value '', null, undefined) is selected: the
+				     field reads as empty at rest (the resting label covers it), but
+				     while the label is floated (focus/open/distinct placeholder) the
+				     chosen option's own label shows placeholder-styled — so picking
+				     "None" gives visible feedback instead of looking like a no-op. -->
+				<span class="placeholder">{selectedOptions.label}</span>
 			{:else if showPlaceholder}
 				<span class="placeholder">{placeholder}</span>
 			{/if}

package/dist/form/Select.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../src/form/Select.svelte.ts"],"names":[],"mappings":"AAGC,MAAM,WAAW,YAAY;IAC5B,qDAAqD;IACrD,KAAK,EAAE,OAAO,CAAC;IACf,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAIF,OAAO,EAAc,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AA45BlD,QAAA,MAAM,MAAM;YA94BqE,OAAO;cAAY,YAAY,EAAE;eAAa,OAAO;iBAAe,OAAO;gBAAc,OAAO;gBAAc,OAAO;cAAY,OAAO;eAAa,OAAO;kBAAgB,MAAM,GAAG,SAAS;YAAU,MAAM,GAAG,SAAS;YAAU,MAAM,GAAG,SAAS;YAAU,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,SAAS;kBAAgB,MAAM,GAAG,SAAS;eAAa,OAAO;WAAS,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;eAAa,OAAO;cAAY,MAAM,GAAG,SAAS;YAAU,OAAO;kBAAgB,OAAO;aAAW,OAAO;;WAA6B,MAAM,GAAG,SAAS;YAAU,MAAM;eAAa,CAAC,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC,GAAG,SAAS;eAAa,CAAC,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC,GAAG,SAAS;eAAe,CAAC,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,GAAG,IAAI,GAAG,YAAY,CAAC,GAC9zB,SAAS;aAAW,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;cAAY,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;mBAAiB,OAAO,CAAC,CAAC,YAAY,GAAG,YAAY,EAAE,CAAC,CAAC,GAAG,SAAS;aAAW,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,GAAG,SAAS;eA64BpJ,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../src/form/Select.svelte.ts"],"names":[],"mappings":"AAGC,MAAM,WAAW,YAAY;IAC5B,qDAAqD;IACrD,KAAK,EAAE,OAAO,CAAC;IACf,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAIF,OAAO,EAAc,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AA+5BlD,QAAA,MAAM,MAAM;YAj5BqE,OAAO;cAAY,YAAY,EAAE;eAAa,OAAO;iBAAe,OAAO;gBAAc,OAAO;gBAAc,OAAO;cAAY,OAAO;eAAa,OAAO;kBAAgB,MAAM,GAAG,SAAS;YAAU,MAAM,GAAG,SAAS;YAAU,MAAM,GAAG,SAAS;YAAU,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,SAAS;kBAAgB,MAAM,GAAG,SAAS;eAAa,OAAO;WAAS,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;eAAa,OAAO;cAAY,MAAM,GAAG,SAAS;YAAU,OAAO;kBAAgB,OAAO;aAAW,OAAO;;WAA6B,MAAM,GAAG,SAAS;YAAU,MAAM;eAAa,CAAC,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC,GAAG,SAAS;eAAa,CAAC,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC,GAAG,SAAS;eAAe,CAAC,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,GAAG,IAAI,GAAG,YAAY,CAAC,GAC9zB,SAAS;aAAW,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;cAAY,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;mBAAiB,OAAO,CAAC,CAAC,YAAY,GAAG,YAAY,EAAE,CAAC,CAAC,GAAG,SAAS;aAAW,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,GAAG,SAAS;eAg5BpJ,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@delightstack/components",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "license": "MIT",
   "description": "Delightstack Svelte 5 component library — accessible actions, forms, media, navigation, feedback, and display components.",