@adea-ai/ui 0.140.0 → 0.142.0

package/dist/components/ui/code-block/code-block.js

@@ -2,16 +2,23 @@ import { cn } from "../../../lib/utils.js";
 import { Button } from "../button/button.js";
 import { className, createComponent, effect, insert, memo, mergeProps, setAttribute, setStyleProperty, spread, style, template, use } from "solid-js/web";
 import { Check, Copy } from "lucide-solid";
-import { For, Show, createMemo, createSignal, splitProps } from "solid-js";
+import { For, Show, createEffect, createMemo, createSignal, on, onCleanup, onMount, splitProps } from "solid-js";
 //#region src/components/ui/code-block/code-block.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div class="flex items-center gap-1 opacity-0 transition-opacity group-focus-within/code:opacity-100 group-hover/code:opacity-100">`);
-var _tmpl$2 = /*#__PURE__*/ template(`<p class="px-3 pb-2 text-xs text-muted-foreground italic">Generating…`);
-var _tmpl$3 = /*#__PURE__*/ template(`<div data-code-block-footer class="flex items-center justify-end border-t border-transparent px-3 py-1 transition-colors group-focus-within/code:border-border group-hover/code:border-border">`);
-var _tmpl$4 = /*#__PURE__*/ template(`<div><div class="flex items-center justify-between gap-2 px-3 py-1"><span class="truncate font-code text-code text-muted-foreground"></span></div><div data-slot=code-block-body tabindex=0 role=region>`);
-var _tmpl$5 = /*#__PURE__*/ template(`<pre class="m-0 px-3 py-2"><code class="font-code text-code">`);
-var _tmpl$6 = /*#__PURE__*/ template(`<span class="grid grid-cols-[3ch_1fr] gap-3"><span class="text-right text-muted-foreground select-none"aria-hidden=true></span><span>`);
-var _tmpl$7 = /*#__PURE__*/ template(`<div class="px-3 py-2">`);
-var _tmpl$8 = /*#__PURE__*/ template(`<code>`);
+var _tmpl$ = /*#__PURE__*/ template(`<div class="flex items-center gap-1 opacity-0 transition-opacity group-focus-within/code:opacity-100 group-hover/code:opacity-100 [@media(hover:none)]:opacity-100">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div class="flex items-center gap-2 border-t border-border px-3 py-1 text-xs text-muted-foreground"><span>Showing the first <!> of <!> lines.`);
+var _tmpl$3 = /*#__PURE__*/ template(`<p class="px-3 pb-2 text-xs text-muted-foreground italic">Generating…`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div data-code-block-footer class="flex items-center justify-end border-t border-transparent px-3 py-1 transition-colors group-focus-within/code:border-border group-hover/code:border-border">`);
+var _tmpl$5 = /*#__PURE__*/ template(`<div data-slot=code-block><div><span class="truncate font-code text-code text-muted-foreground"></span></div><div data-slot=code-block-body tabindex=0 role=group>`);
+var _tmpl$6 = /*#__PURE__*/ template(`<pre><code class="font-code text-code">`);
+var _tmpl$7 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$8 = /*#__PURE__*/ template(`<span class="text-right text-muted-foreground select-none"aria-hidden=true>`);
+var _tmpl$9 = /*#__PURE__*/ template(`<span class="w-[1ch] text-center text-muted-foreground select-none"aria-hidden=true data-slot=code-line-mark>`);
+var _tmpl$0 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$1 = /*#__PURE__*/ template(`<ins data-mark=add>`);
+var _tmpl$10 = /*#__PURE__*/ template(`<del data-mark=remove>`);
+var _tmpl$11 = /*#__PURE__*/ template(`<code>`);
+/** Lines the per-line renderer shows before it offers the rest. */
+var CODE_BLOCK_LINE_LIMIT = 2e3;
 /** The height a block must exceed before its actions are repeated. */
 var TALL_CODE_BLOCK_PX = 480;
 /**
@@ -44,20 +51,50 @@ function CodeBlock(props) {
 		"tallThreshold",
 		"maxHeight",
 		"wrap",
+		"size",
+		"lineMarks",
+		"loadHighlight",
+		"lineLimit",
+		"onCopy",
 		"class",
 		"ref"
 	]);
 	const [copied, setCopied] = createSignal(false);
 	const [failed, setFailed] = createSignal(false);
 	const [tall, setTall] = createSignal(false);
-	const label = () => local.title ?? local.language ?? "code";
-	const regionLabel = () => local.language ? `${local.language} code` : "code";
+	const [loaded, setLoaded] = createSignal();
+	const [showAll, setShowAll] = createSignal(false);
+	let bodyElement;
+	const language = () => local.language?.trim().slice(0, 40) || void 0;
+	const label = () => local.title ?? language() ?? "code";
+	const groupLabel = () => language() ? `${language()} code` : "code";
+	const small = () => local.size === "sm";
 	const lines = createMemo(() => local.code.replace(/\n$/, "").split("\n"));
+	const lineLimit = () => local.lineLimit ?? 2e3;
+	const visibleLines = createMemo(() => showAll() ? lines() : lines().slice(0, lineLimit()));
+	const hiddenLines = () => lines().length - visibleLines().length;
+	createEffect(on(() => [
+		local.complete,
+		language(),
+		local.loadHighlight
+	], ([complete, lang, load]) => {
+		setLoaded(void 0);
+		if (!complete || !load || local.highlight) return;
+		let current = true;
+		onCleanup(() => current = false);
+		new Promise((resolve) => resolve(load(lang))).then((highlighter) => {
+			if (current && highlighter) setLoaded(() => highlighter);
+		}, () => void 0);
+	}));
+	const highlighter = () => local.highlight ?? loaded();
+	const perLine = () => highlighter() === void 0 && (local.showLineNumbers === true || local.lineMarks !== void 0);
+	const truncated = () => hiddenLines() > 0 && (highlighter() !== void 0 || perLine());
 	const maxHeight = () => typeof local.maxHeight === "number" ? `${local.maxHeight}px` : local.maxHeight;
 	const copy = async () => {
 		const ok = await copyText(local.code);
 		setCopied(ok);
 		setFailed(!ok);
+		local.onCopy?.(ok);
 		if (ok) setTimeout(() => setCopied(false), 1500);
 	};
 	const Actions = () => (() => {
@@ -66,6 +103,7 @@ function CodeBlock(props) {
 		insert(_el$, createComponent(Button, {
 			variant: "ghost",
 			size: "icon-2xs",
+			touchTarget: "comfortable",
 			get ["aria-label"]() {
 				return memo(() => !!copied())() ? local.copiedLabel ?? "Copied" : local.copyLabel ?? "Copy code";
 			},
@@ -90,29 +128,40 @@ function CodeBlock(props) {
 		return _el$;
 	})();
 	return (() => {
-		var _el$2 = _tmpl$4(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$3.nextSibling;
+		var _el$2 = _tmpl$5(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$3.nextSibling;
 		use((element) => {
 			if (typeof local.ref === "function") local.ref(element);
 			else if (local.ref) local.ref = element;
-			new ResizeObserver(() => {
-				setTall(element.offsetHeight > (local.tallThreshold ?? 480));
-			}).observe(element);
+			const observer = new ResizeObserver(() => {
+				const footer = element.querySelector("[data-code-block-footer]");
+				setTall(element.offsetHeight - (footer?.offsetHeight ?? 0) > (local.tallThreshold ?? 480));
+			});
+			onMount(() => {
+				if (bodyElement) observer.observe(bodyElement);
+			});
+			onCleanup(() => observer.disconnect());
 		}, _el$2);
-		spread(_el$2, mergeProps({ get ["class"]() {
-			return cn("group/code overflow-hidden rounded-xl border border-border bg-card", local.class);
-		} }, rest), false, true);
+		spread(_el$2, mergeProps({
+			get ["data-size"]() {
+				return local.size ?? "default";
+			},
+			get ["class"]() {
+				return cn("group/code overflow-hidden border border-border bg-card", small() ? "rounded-lg" : "rounded-xl", local.class);
+			}
+		}, rest), false, true);
 		insert(_el$4, label);
 		insert(_el$3, createComponent(Actions, {}), null);
+		use((element) => bodyElement = element, _el$5);
 		insert(_el$5, createComponent(Show, {
 			get when() {
-				return local.highlight;
+				return highlighter();
 			},
 			get fallback() {
 				return (() => {
-					var _el$8 = _tmpl$5(), _el$9 = _el$8.firstChild;
-					insert(_el$9, createComponent(Show, {
+					var _el$14 = _tmpl$6(), _el$15 = _el$14.firstChild;
+					insert(_el$15, createComponent(Show, {
 						get when() {
-							return local.showLineNumbers;
+							return perLine();
 						},
 						get fallback() {
 							return local.code.replace(/\n$/, "");
@@ -120,34 +169,78 @@ function CodeBlock(props) {
 						get children() {
 							return createComponent(For, {
 								get each() {
-									return lines();
+									return visibleLines();
 								},
-								children: (line, index) => (() => {
-									var _el$0 = _tmpl$6(), _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling;
-									insert(_el$1, () => index() + 1);
-									insert(_el$10, line || " ");
-									effect(() => className(_el$10, cn({ "min-w-0": local.wrap })));
-									return _el$0;
-								})()
+								children: (line, index) => createComponent(CodeLine, {
+									line,
+									get number() {
+										return index() + 1;
+									},
+									get numbered() {
+										return local.showLineNumbers === true;
+									},
+									get mark() {
+										return local.lineMarks?.[index() + 1];
+									},
+									get wrap() {
+										return local.wrap === true;
+									}
+								})
 							});
 						}
 					}));
-					effect((_$p) => setStyleProperty(_el$8, "line-height", local.lineHeight ?? "1.5"));
-					return _el$8;
+					effect((_p$) => {
+						var _v$6 = cn("m-0", small() ? "px-2 py-1.5" : "px-3 py-2"), _v$7 = local.lineHeight ?? "1.5";
+						_v$6 !== _p$.e && className(_el$14, _p$.e = _v$6);
+						_v$7 !== _p$.t && setStyleProperty(_el$14, "line-height", _p$.t = _v$7);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0
+					});
+					return _el$14;
 				})();
 			},
 			children: (highlight) => (() => {
-				var _el$11 = _tmpl$7();
-				insert(_el$11, () => highlight()(local.code));
-				return _el$11;
+				var _el$16 = _tmpl$7();
+				insert(_el$16, () => highlight()(hiddenLines() > 0 ? visibleLines().join("\n") : local.code));
+				effect(() => className(_el$16, small() ? "px-2 py-1.5" : "px-3 py-2"));
+				return _el$16;
 			})()
 		}), null);
+		insert(_el$5, createComponent(Show, {
+			get when() {
+				return truncated();
+			},
+			get children() {
+				var _el$6 = _tmpl$2(), _el$7 = _el$6.firstChild, _el$10 = _el$7.firstChild.nextSibling, _el$11 = _el$10.nextSibling.nextSibling;
+				_el$11.nextSibling;
+				insert(_el$7, () => visibleLines().length.toLocaleString(), _el$10);
+				insert(_el$7, () => lines().length.toLocaleString(), _el$11);
+				insert(_el$6, createComponent(Button, {
+					variant: "ghost",
+					size: "2xs",
+					onClick: () => {
+						setShowAll(true);
+						bodyElement?.focus({ preventScroll: true });
+					},
+					get children() {
+						return [
+							"Show all ",
+							memo(() => lines().length.toLocaleString()),
+							" lines"
+						];
+					}
+				}), null);
+				return _el$6;
+			}
+		}), null);
 		insert(_el$5, createComponent(Show, {
 			get when() {
 				return !local.complete;
 			},
 			get children() {
-				return _tmpl$2();
+				return _tmpl$3();
 			}
 		}), null);
 		insert(_el$2, createComponent(Show, {
@@ -155,30 +248,118 @@ function CodeBlock(props) {
 				return tall();
 			},
 			get children() {
-				var _el$7 = _tmpl$3();
-				insert(_el$7, createComponent(Actions, {}));
-				return _el$7;
+				var _el$13 = _tmpl$4();
+				insert(_el$13, createComponent(Actions, {}));
+				return _el$13;
 			}
 		}), null);
 		effect((_p$) => {
-			var _v$ = local.wrap ? "" : void 0, _v$2 = cn("scroll-fade overflow-x-auto", {
+			var _v$ = cn("flex items-center justify-between gap-2", small() ? "px-2 py-0.5" : "px-3 py-1"), _v$2 = local.wrap ? "" : void 0, _v$3 = cn("scroll-fade overflow-x-auto", {
 				"overflow-y-auto": local.maxHeight !== void 0,
 				"[&_pre]:whitespace-pre-wrap [&_pre]:[overflow-wrap:anywhere]": local.wrap
-			}), _v$3 = maxHeight() === void 0 ? void 0 : { "max-height": maxHeight() }, _v$4 = regionLabel();
-			_v$ !== _p$.e && setAttribute(_el$5, "data-wrap", _p$.e = _v$);
-			_v$2 !== _p$.t && className(_el$5, _p$.t = _v$2);
-			_p$.a = style(_el$5, _v$3, _p$.a);
-			_v$4 !== _p$.o && setAttribute(_el$5, "aria-label", _p$.o = _v$4);
+			}), _v$4 = maxHeight() === void 0 ? void 0 : { "max-height": maxHeight() }, _v$5 = groupLabel();
+			_v$ !== _p$.e && className(_el$3, _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$5, "data-wrap", _p$.t = _v$2);
+			_v$3 !== _p$.a && className(_el$5, _p$.a = _v$3);
+			_p$.o = style(_el$5, _v$4, _p$.o);
+			_v$5 !== _p$.i && setAttribute(_el$5, "aria-label", _p$.i = _v$5);
 			return _p$;
 		}, {
 			e: void 0,
 			t: void 0,
 			a: void 0,
-			o: void 0
+			o: void 0,
+			i: void 0
 		});
 		return _el$2;
 	})();
 }
+var MARK_GLYPH = {
+	add: "+",
+	remove: "−",
+	highlight: "",
+	error: "!"
+};
+/**
+* One rendered line. The gutter glyph and the element (`ins`/`del`) carry what a
+* mark means so it survives greyscale and a screen reader; both gutters are
+* unselectable so dragging across the block and copying yields only source.
+*/
+function CodeLine(props) {
+	const content = () => [
+		createComponent(Show, {
+			get when() {
+				return props.numbered;
+			},
+			get children() {
+				var _el$17 = _tmpl$8();
+				insert(_el$17, () => props.number);
+				return _el$17;
+			}
+		}),
+		(() => {
+			var _el$18 = _tmpl$9();
+			insert(_el$18, (() => {
+				var _c$ = memo(() => !!props.mark);
+				return () => _c$() ? MARK_GLYPH[props.mark] : "";
+			})());
+			return _el$18;
+		})(),
+		(() => {
+			var _el$19 = _tmpl$0();
+			insert(_el$19, () => props.line || " ");
+			effect(() => className(_el$19, cn({ "min-w-0": props.wrap })));
+			return _el$19;
+		})()
+	];
+	const rowClass = () => cn("grid gap-3 no-underline", props.numbered ? "grid-cols-[3ch_1ch_1fr]" : "grid-cols-[1ch_1fr]", {
+		"bg-success-subtle": props.mark === "add",
+		"bg-destructive-subtle": props.mark === "remove" || props.mark === "error",
+		"bg-primary-subtle": props.mark === "highlight"
+	});
+	return createComponent(Show, {
+		get when() {
+			return props.mark === "add" || props.mark === "remove";
+		},
+		get fallback() {
+			return (() => {
+				var _el$21 = _tmpl$0();
+				insert(_el$21, content);
+				effect((_p$) => {
+					var _v$8 = props.mark, _v$9 = rowClass();
+					_v$8 !== _p$.e && setAttribute(_el$21, "data-mark", _p$.e = _v$8);
+					_v$9 !== _p$.t && className(_el$21, _p$.t = _v$9);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$21;
+			})();
+		},
+		get children() {
+			return createComponent(Show, {
+				get when() {
+					return props.mark === "add";
+				},
+				get fallback() {
+					return (() => {
+						var _el$22 = _tmpl$10();
+						insert(_el$22, content);
+						effect(() => className(_el$22, rowClass()));
+						return _el$22;
+					})();
+				},
+				get children() {
+					var _el$20 = _tmpl$1();
+					insert(_el$20, content);
+					effect(() => className(_el$20, rowClass()));
+					return _el$20;
+				}
+			});
+		}
+	});
+}
 /**
 * InlineCode.
 *
@@ -192,14 +373,14 @@ function CodeBlock(props) {
 function InlineCode(props) {
 	const [local, rest] = splitProps(props, ["class"]);
 	return (() => {
-		var _el$12 = _tmpl$8();
-		spread(_el$12, mergeProps({ get ["class"]() {
+		var _el$23 = _tmpl$11();
+		spread(_el$23, mergeProps({ get ["class"]() {
 			return cn("rounded-sm bg-muted px-[0.4em] py-[0.15em] font-code text-code text-foreground [overflow-wrap:anywhere]", local.class);
 		} }, rest), false, false);
-		return _el$12;
+		return _el$23;
 	})();
 }
 //#endregion
-export { CodeBlock, InlineCode, TALL_CODE_BLOCK_PX };
+export { CODE_BLOCK_LINE_LIMIT, CodeBlock, InlineCode, TALL_CODE_BLOCK_PX };
 
 //# sourceMappingURL=code-block.js.map

package/dist/components/ui/code-block/code-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-block.js","names":["createMemo","createSignal","For","Show","splitProps","ComponentProps","JSX","Check","Copy","Button","cn","CodeBlockProps","Omit","code","language","highlight","Element","complete","title","actions","copyLabel","copiedLabel","lineHeight","showLineNumbers","tallThreshold","maxHeight","wrap","TALL_CODE_BLOCK_PX","copyText","text","Promise","navigator","clipboard","writeText","CodeBlock","props","local","rest","copied","setCopied","failed","setFailed","tall","setTall","label","regionLabel","lines","replace","split","copy","ok","setTimeout","Actions","_el$","_tmpl$","_$insert","_$createComponent","variant","size","aria-label","_$memo","undefined","onClick","children","when","fallback","_el$2","_tmpl$4","_el$3","firstChild","_el$4","_el$5","nextSibling","_$use","element","ref","observer","ResizeObserver","offsetHeight","observe","_$spread","_$mergeProps","class","_el$8","_tmpl$5","_el$9","each","line","index","_el$0","_tmpl$6","_el$1","_el$10","_$effect","_$className","_$p","_$setStyleProperty","_el$11","_tmpl$7","_tmpl$2","_el$7","_tmpl$3","_p$","_v$","_v$2","_v$3","_v$4","e","_$setAttribute","t","a","_$style","o","InlineCode","_el$12","_tmpl$8","_$createComponent","_$memo","_$mergeProps","_$className","_$setStyleProperty","_$setAttribute","_$style"],"sources":["../../../../src/components/ui/code-block/code-block.tsx"],"sourcesContent":["import {\n  createMemo,\n  createSignal,\n  For,\n  Show,\n  splitProps,\n  type ComponentProps,\n  type JSX,\n} from 'solid-js'\nimport { Check, Copy } from 'lucide-solid'\nimport { Button } from '../button'\nimport { cn } from '#lib/utils'\n\n/**\n * CodeBlock.\n *\n * A fenced block, rendered as a surface. The library ships no highlighter —\n * syntax colouring is a large dependency with its own theme format, and a\n * component that bundled one would force every consumer to pay for it. This\n * renders the block, its chrome, and its behaviour; a caller that wants\n * highlighting passes the result through `highlight`, which is the seam a\n * Shiki/Pierre/Prism integration plugs into.\n *\n * Four details are the reason this exists rather than a styled `<pre>`:\n *\n * **Copy confirms only on success.** `navigator.clipboard.writeText` rejects\n * outside a secure context, in a sandboxed frame, and when the document is not\n * focused. Flipping to a tick unconditionally confirms a copy that did not\n * happen, and the reader pastes something stale and does not know why. The\n * rejection is caught and the button reports the failure instead.\n *\n * **A tall block repeats its action row at the bottom.** Copying from a block\n * that is taller than the viewport otherwise costs a scroll back to the top and\n * another scroll down to where you were. The threshold is a fixed 480px rather\n * than viewport-relative so the behaviour does not change when the window is\n * resized.\n *\n * **The scroller is focusable and named.** A horizontally scrollable region has\n * to be reachable by keyboard — this is axe's `scrollable-region-focusable`, and\n * a region that scrolls but cannot be focused is a WCAG 2.1.1 failure. It is a\n * `region` with a label rather than a bare `tabindex`, so the tab stop announces\n * what it is.\n *\n * **Resolving a streaming block must not move the reader.** When `complete` is\n * false the block shows the code it has plus a generating indicator; the\n * indicator is inside the scroller's own box and does not add a line, because a\n * block that grows the moment its content resolves shifts everything below it.\n * If a caller's `highlight` changes the line box, that is the caller's height to\n * hold — `lineHeight` is a prop for exactly that reason.\n */\nexport type CodeBlockProps = Omit<ComponentProps<'div'>, 'children'> & {\n  code: string\n  /** The language, shown in the header and used as the region's label. */\n  language?: string\n  /** The code, transformed — highlighted HTML or a component. Omit for plain text. */\n  highlight?: (code: string) => JSX.Element\n  /** False while the block is still streaming. Adds a generating indicator. */\n  complete?: boolean\n  /** A filename or title, shown instead of the language. */\n  title?: string\n  /** Extra header controls, before the copy button. */\n  actions?: JSX.Element\n  /** Copy label. Override for a non-English application. */\n  copyLabel?: string\n  copiedLabel?: string\n  /** Line height of the rendered code. Set it when `highlight` changes the box. */\n  lineHeight?: string\n  /** A line-number gutter. Off by default; a short snippet rarely needs one. */\n  showLineNumbers?: boolean\n  /** The height above which the action row is repeated below the block. */\n  tallThreshold?: number\n  /**\n   * Cap the code body's height and scroll it vertically past that. A number is\n   * pixels; a string is any CSS length (`'20rem'`, `'50vh'`). Unset, the block\n   * grows with its content.\n   */\n  maxHeight?: number | string\n  /**\n   * Soft-wrap long lines inside the block instead of scrolling sideways. Off by\n   * default: wrapped code loses its column alignment, so it is for prose-like\n   * output (logs, long commands) in a narrow column. Wraps the plain renderer and\n   * any `pre` inside `highlight` output; line numbers stay on the first visual line.\n   */\n  wrap?: boolean\n}\n\n/** The height a block must exceed before its actions are repeated. */\nexport const TALL_CODE_BLOCK_PX = 480\n\n/**\n * Copy, reporting whether it worked. `navigator.clipboard` is absent in an\n * insecure context, and `writeText` rejects when the document is not focused —\n * both are normal in an embedded or iframed application, and neither should\n * silently look like success.\n */\nasync function copyText(text: string): Promise<boolean> {\n  try {\n    if (!navigator.clipboard) return false\n    await navigator.clipboard.writeText(text)\n    return true\n  } catch {\n    return false\n  }\n}\n\nexport function CodeBlock(props: CodeBlockProps) {\n  const [local, rest] = splitProps(props, [\n    'code',\n    'language',\n    'highlight',\n    'complete',\n    'title',\n    'actions',\n    'copyLabel',\n    'copiedLabel',\n    'lineHeight',\n    'showLineNumbers',\n    'tallThreshold',\n    'maxHeight',\n    'wrap',\n    'class',\n    'ref',\n  ])\n\n  const [copied, setCopied] = createSignal(false)\n  const [failed, setFailed] = createSignal(false)\n  const [tall, setTall] = createSignal(false)\n\n  const label = () => local.title ?? local.language ?? 'code'\n  const regionLabel = () => (local.language ? `${local.language} code` : 'code')\n  const lines = createMemo(() => local.code.replace(/\\n$/, '').split('\\n'))\n  const maxHeight = () =>\n    typeof local.maxHeight === 'number' ? `${local.maxHeight}px` : local.maxHeight\n\n  const copy = async () => {\n    const ok = await copyText(local.code)\n    setCopied(ok)\n    setFailed(!ok)\n    if (ok) setTimeout(() => setCopied(false), 1500)\n  }\n\n  const Actions = () => (\n    <div class=\"flex items-center gap-1 opacity-0 transition-opacity group-focus-within/code:opacity-100 group-hover/code:opacity-100\">\n      {local.actions}\n      <Button\n        variant=\"ghost\"\n        size=\"icon-2xs\"\n        aria-label={copied() ? (local.copiedLabel ?? 'Copied') : (local.copyLabel ?? 'Copy code')}\n        title={failed() ? 'Copying is unavailable in this context' : undefined}\n        onClick={() => void copy()}\n      >\n        <Show when={copied()} fallback={<Copy aria-hidden=\"true\" />}>\n          <Check aria-hidden=\"true\" />\n        </Show>\n      </Button>\n    </div>\n  )\n\n  return (\n    <div\n      class={cn('group/code overflow-hidden rounded-xl border border-border bg-card', local.class)}\n      {...rest}\n      ref={(element) => {\n        // Composed rather than replaced: a caller's ref must survive.\n        if (typeof local.ref === 'function') local.ref(element)\n        else if (local.ref) local.ref = element\n        // Measured rather than assumed: the caller controls the content, so only\n        // the rendered box can say whether the action row has scrolled away.\n        const observer = new ResizeObserver(() => {\n          setTall(element.offsetHeight > (local.tallThreshold ?? TALL_CODE_BLOCK_PX))\n        })\n        observer.observe(element)\n      }}\n    >\n      <div class=\"flex items-center justify-between gap-2 px-3 py-1\">\n        <span class=\"truncate font-code text-code text-muted-foreground\">{label()}</span>\n        <Actions />\n      </div>\n      <div\n        data-slot=\"code-block-body\"\n        data-wrap={local.wrap ? '' : undefined}\n        class={cn('scroll-fade overflow-x-auto', {\n          // A capped body scrolls on both axes; the region is already a tab stop,\n          // so the keyboard reaches the vertical overflow the same way.\n          'overflow-y-auto': local.maxHeight !== undefined,\n          '[&_pre]:whitespace-pre-wrap [&_pre]:[overflow-wrap:anywhere]': local.wrap,\n        })}\n        style={maxHeight() === undefined ? undefined : { 'max-height': maxHeight() }}\n        // A region that scrolls must be focusable, and a tab stop needs a name.\n        tabindex=\"0\"\n        role=\"region\"\n        aria-label={regionLabel()}\n      >\n        <Show\n          when={local.highlight}\n          fallback={\n            <pre class=\"m-0 px-3 py-2\" style={{ 'line-height': local.lineHeight ?? '1.5' }}>\n              <code class=\"font-code text-code\">\n                <Show when={local.showLineNumbers} fallback={local.code.replace(/\\n$/, '')}>\n                  <For each={lines()}>\n                    {(line, index) => (\n                      <span class=\"grid grid-cols-[3ch_1fr] gap-3\">\n                        <span\n                          class=\"text-right text-muted-foreground select-none\"\n                          aria-hidden=\"true\"\n                        >\n                          {index() + 1}\n                        </span>\n                        <span class={cn({ 'min-w-0': local.wrap })}>{line || ' '}</span>\n                      </span>\n                    )}\n                  </For>\n                </Show>\n              </code>\n            </pre>\n          }\n        >\n          {(highlight) => <div class=\"px-3 py-2\">{highlight()(local.code)}</div>}\n        </Show>\n        {/*\n          In the scroller's box, and a single line: the indicator must not add\n          height when it disappears, or a streaming block shifts everything below\n          it as it resolves.\n        */}\n        <Show when={!local.complete}>\n          <p class=\"px-3 pb-2 text-xs text-muted-foreground italic\">Generating…</p>\n        </Show>\n      </div>\n      <Show when={tall()}>\n        <div\n          data-code-block-footer=\"\"\n          class=\"flex items-center justify-end border-t border-transparent px-3 py-1 transition-colors group-focus-within/code:border-border group-hover/code:border-border\"\n        >\n          <Actions />\n        </div>\n      </Show>\n    </div>\n  )\n}\n\n/**\n * InlineCode.\n *\n * The `code` inside a sentence. It is a component rather than a class because it\n * has to hold three properties at once: it uses the shared code family and size\n * preference, and it wraps rather than overflows a narrow column\n * (`overflow-wrap: anywhere` — an identifier with\n * no spaces is one long token), and it must be legible against whatever surface\n * it lands on, which is why the fill is a token and not a fixed grey.\n */\nexport function InlineCode(props: ComponentProps<'code'>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <code\n      class={cn(\n        'rounded-sm bg-muted px-[0.4em] py-[0.15em] font-code text-code text-foreground [overflow-wrap:anywhere]',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"code-block.js","names":["createEffect","createMemo","createSignal","For","on","onCleanup","onMount","Show","splitProps","ComponentProps","JSX","Check","Copy","Button","cn","CodeBlockProps","Omit","code","language","highlight","Element","complete","title","actions","copyLabel","copiedLabel","lineHeight","showLineNumbers","tallThreshold","maxHeight","wrap","size","lineMarks","Readonly","Record","CodeLineMark","loadHighlight","Promise","CodeHighlighter","lineLimit","onCopy","ok","CODE_BLOCK_LINE_LIMIT","TALL_CODE_BLOCK_PX","copyText","text","navigator","clipboard","writeText","CodeBlock","props","local","rest","copied","setCopied","failed","setFailed","tall","setTall","loaded","setLoaded","showAll","setShowAll","bodyElement","HTMLDivElement","trim","slice","undefined","label","groupLabel","small","lines","replace","split","visibleLines","hiddenLines","length","const","lang","load","current","resolve","then","highlighter","perLine","truncated","copy","setTimeout","Actions","_el$","_tmpl$","_$insert","_$createComponent","variant","touchTarget","aria-label","_$memo","onClick","children","when","fallback","_el$2","_tmpl$5","_el$3","firstChild","_el$4","_el$5","nextSibling","_$use","element","ref","observer","ResizeObserver","footer","querySelector","HTMLElement","offsetHeight","observe","disconnect","_$spread","_$mergeProps","data-size","class","_el$14","_tmpl$6","_el$15","each","line","index","CodeLine","number","numbered","mark","_$effect","_p$","_v$6","_v$7","e","_$className","t","_$setStyleProperty","_el$16","_tmpl$7","join","_el$6","_tmpl$2","_el$7","_el$8","_el$10","_el$9","_el$11","_el$1","toLocaleString","focus","preventScroll","_tmpl$3","_el$13","_tmpl$4","_v$","_v$2","_v$3","_v$4","_v$5","_$setAttribute","a","o","_$style","i","MARK_GLYPH","add","remove","error","content","_el$17","_tmpl$8","_el$18","_tmpl$9","_c$","_el$19","_tmpl$0","rowClass","_el$21","_v$8","_v$9","_el$22","_tmpl$10","_el$20","_tmpl$1","InlineCode","_el$23","_tmpl$11","_$createComponent","_$memo","_$mergeProps","_$className","_$setStyleProperty","_$setAttribute","_$style"],"sources":["../../../../src/components/ui/code-block/code-block.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  For,\n  on,\n  onCleanup,\n  onMount,\n  Show,\n  splitProps,\n  type ComponentProps,\n  type JSX,\n} from 'solid-js'\nimport { Check, Copy } from 'lucide-solid'\nimport { Button } from '../button'\nimport { cn } from '#lib/utils'\n\n/**\n * CodeBlock.\n *\n * A fenced block, rendered as a surface. The library ships no highlighter —\n * syntax colouring is a large dependency with its own theme format, and a\n * component that bundled one would force every consumer to pay for it. This\n * renders the block, its chrome, and its behaviour; a caller that wants\n * highlighting passes the result through `highlight`, which is the seam a\n * Shiki/Pierre/Prism integration plugs into.\n *\n * Four details are the reason this exists rather than a styled `<pre>`:\n *\n * **Copy confirms only on success.** `navigator.clipboard.writeText` rejects\n * outside a secure context, in a sandboxed frame, and when the document is not\n * focused. Flipping to a tick unconditionally confirms a copy that did not\n * happen, and the reader pastes something stale and does not know why. The\n * rejection is caught and the button reports the failure instead.\n *\n * **A tall block repeats its action row at the bottom.** Copying from a block\n * that is taller than the viewport otherwise costs a scroll back to the top and\n * another scroll down to where you were. The threshold is a fixed 480px rather\n * than viewport-relative so the behaviour does not change when the window is\n * resized.\n *\n * **The scroller is focusable and named.** A horizontally scrollable region has\n * to be reachable by keyboard — this is axe's `scrollable-region-focusable`, and\n * a region that scrolls but cannot be focused is a WCAG 2.1.1 failure. It is a\n * labelled `group` rather than a bare `tabindex`, so the tab stop announces what\n * it is. It is deliberately not a `region` landmark: a transcript holds many\n * blocks, often in one language, and repeated landmarks of one name are noise.\n *\n * **Resolving a streaming block must not move the reader.** When `complete` is\n * false the block shows the code it has plus a generating indicator; the\n * indicator is inside the scroller's own box and does not add a line, because a\n * block that grows the moment its content resolves shifts everything below it.\n * If a caller's `highlight` changes the line box, that is the caller's height to\n * hold — `lineHeight` is a prop for exactly that reason.\n *\n * ## Output, not only source\n *\n * The same surface carries terminal output, logs and diffs inside an agent's\n * activity, so it also:\n *\n * - **loads its highlighter lazily** (`loadHighlight`). The grammar is fetched\n *   only for a block that is complete and has a language, the block renders plain\n *   until it arrives, and a loader that returns nothing — an unknown language, a\n *   failed fetch — leaves the plain text in place without an error. Highlighting\n *   a block on every streamed delta would re-tokenise the whole thing per token,\n *   so a streaming block stays plain until `complete`.\n * - **marks lines** (`lineMarks`) as added, removed, highlighted or failed. A mark\n *   is carried by a gutter glyph and by `<ins>`/`<del>` for the two that change\n *   text, never by colour alone, and the glyph is not selectable so a copied\n *   selection stays the source.\n * - **copies the source exactly.** The copy button writes `code` as given: no\n *   trailing-newline trimming, no line numbers, no gutter glyphs, and the whole\n *   block even when only part of it is rendered (`lineLimit`).\n * - **bounds a large render.** Past `lineLimit` lines the per-line renderer and a\n *   highlighted render show the first lines and a control to show the rest,\n *   because tens of thousands of row elements, or a tokenizer run over all of\n *   them, are a freeze, not a transcript. Which renderer is in use is decided\n *   at the time, so a highlighter that loads late takes over the bound from the\n *   per-line rows and the note below the block always describes what is drawn.\n *   The plain renderer is a single text node and needs no limit.\n * - **comes in a small size** (`size=\"sm\"`) for tool output inside a Trace line.\n */\nexport type CodeBlockProps = Omit<ComponentProps<'div'>, 'children' | 'onCopy'> & {\n  code: string\n  /** The language, shown in the header and used as the region's label. */\n  language?: string\n  /** The code, transformed — highlighted HTML or a component. Omit for plain text. */\n  highlight?: (code: string) => JSX.Element\n  /** False while the block is still streaming. Adds a generating indicator. */\n  complete?: boolean\n  /** A filename or title, shown instead of the language. */\n  title?: string\n  /** Extra header controls, before the copy button. */\n  actions?: JSX.Element\n  /** Copy label. Override for a non-English application. */\n  copyLabel?: string\n  copiedLabel?: string\n  /** Line height of the rendered code. Set it when `highlight` changes the box. */\n  lineHeight?: string\n  /** A line-number gutter. Off by default; a short snippet rarely needs one. */\n  showLineNumbers?: boolean\n  /** The height above which the action row is repeated below the block. */\n  tallThreshold?: number\n  /**\n   * Cap the code body's height and scroll it vertically past that. A number is\n   * pixels; a string is any CSS length (`'20rem'`, `'50vh'`). Unset, the block\n   * grows with its content.\n   */\n  maxHeight?: number | string\n  /**\n   * Soft-wrap long lines inside the block instead of scrolling sideways. Off by\n   * default: wrapped code loses its column alignment, so it is for prose-like\n   * output (logs, long commands) in a narrow column. Wraps the plain renderer and\n   * any `pre` inside `highlight` output; line numbers stay on the first visual line.\n   */\n  wrap?: boolean\n  /** `sm` is the compact chrome for output nested inside a Trace line. */\n  size?: 'default' | 'sm'\n  /**\n   * Marks on 1-based line numbers. Applies to the per-line renderer, which is\n   * used whenever marks or line numbers are present and no highlighter is in use,\n   * given as `highlight` or loaded by `loadHighlight`: a highlighter replaces the\n   * rows, so the marks and the gutter go with them.\n   */\n  lineMarks?: Readonly<Record<number, CodeLineMark>>\n  /**\n   * Resolve a highlighter for the block's language. Called once the block is\n   * complete; resolving to `undefined` (or rejecting) keeps the plain rendering.\n   */\n  loadHighlight?: (language: string | undefined) => Promise<CodeHighlighter | undefined>\n  /**\n   * Lines the per-line and the highlighted renderer show before offering the\n   * rest. Default 2000. The plain renderer is one text node and is not limited.\n   */\n  lineLimit?: number\n  /** Called after each copy attempt with whether the clipboard accepted it. */\n  onCopy?: (ok: boolean) => void\n}\n\nexport type CodeLineMark = 'add' | 'remove' | 'highlight' | 'error'\nexport type CodeHighlighter = (code: string) => JSX.Element\n\n/** Lines the per-line renderer shows before it offers the rest. */\nexport const CODE_BLOCK_LINE_LIMIT = 2_000\n\n/** The height a block must exceed before its actions are repeated. */\nexport const TALL_CODE_BLOCK_PX = 480\n\n/**\n * Copy, reporting whether it worked. `navigator.clipboard` is absent in an\n * insecure context, and `writeText` rejects when the document is not focused —\n * both are normal in an embedded or iframed application, and neither should\n * silently look like success.\n */\nasync function copyText(text: string): Promise<boolean> {\n  try {\n    if (!navigator.clipboard) return false\n    await navigator.clipboard.writeText(text)\n    return true\n  } catch {\n    return false\n  }\n}\n\nexport function CodeBlock(props: CodeBlockProps) {\n  const [local, rest] = splitProps(props, [\n    'code',\n    'language',\n    'highlight',\n    'complete',\n    'title',\n    'actions',\n    'copyLabel',\n    'copiedLabel',\n    'lineHeight',\n    'showLineNumbers',\n    'tallThreshold',\n    'maxHeight',\n    'wrap',\n    'size',\n    'lineMarks',\n    'loadHighlight',\n    'lineLimit',\n    'onCopy',\n    'class',\n    'ref',\n  ])\n\n  const [copied, setCopied] = createSignal(false)\n  const [failed, setFailed] = createSignal(false)\n  const [tall, setTall] = createSignal(false)\n\n  const [loaded, setLoaded] = createSignal<CodeHighlighter>()\n  const [showAll, setShowAll] = createSignal(false)\n  let bodyElement: HTMLDivElement | undefined\n\n  // A language string can come from untrusted model output. It is rendered as\n  // text, so it cannot inject markup; the cap keeps a pathological one from\n  // swallowing the header.\n  const language = () => local.language?.trim().slice(0, 40) || undefined\n  const label = () => local.title ?? language() ?? 'code'\n  const groupLabel = () => (language() ? `${language()} code` : 'code')\n  const small = () => local.size === 'sm'\n  const lines = createMemo(() => local.code.replace(/\\n$/, '').split('\\n'))\n  const lineLimit = () => local.lineLimit ?? CODE_BLOCK_LINE_LIMIT\n  const visibleLines = createMemo(() => (showAll() ? lines() : lines().slice(0, lineLimit())))\n  const hiddenLines = () => lines().length - visibleLines().length\n\n  // Load once the block has stopped changing. `on` keys the effect to the\n  // language and completion, not to every streamed character, and a stale\n  // resolution (the language changed while the grammar was in flight) is dropped.\n  createEffect(\n    on(\n      () => [local.complete, language(), local.loadHighlight] as const,\n      ([complete, lang, load]) => {\n        setLoaded(undefined)\n        if (!complete || !load || local.highlight) return\n        let current = true\n        onCleanup(() => (current = false))\n        // Wrapped, not called bare: a loader that throws before it returns a promise\n        // (a bad import path, a missing grammar table) must degrade to plain text\n        // like one that rejects, not tear down the tree from inside this effect.\n        new Promise<CodeHighlighter | undefined>((resolve) => resolve(load(lang))).then(\n          (highlighter) => {\n            if (current && highlighter) setLoaded(() => highlighter)\n          },\n          () => undefined\n        )\n      }\n    )\n  )\n  const highlighter = (): CodeHighlighter | undefined => local.highlight ?? loaded()\n  // The renderer in use decides everything about the limit, not the props alone:\n  // a highlighter that has loaded since the first render replaces the per-line\n  // rows, so what is drawn, and what the footer may say, follows `highlighter()`.\n  const perLine = () =>\n    highlighter() === undefined && (local.showLineNumbers === true || local.lineMarks !== undefined)\n  const truncated = () => hiddenLines() > 0 && (highlighter() !== undefined || perLine())\n  const maxHeight = () =>\n    typeof local.maxHeight === 'number' ? `${local.maxHeight}px` : local.maxHeight\n\n  const copy = async () => {\n    const ok = await copyText(local.code)\n    setCopied(ok)\n    setFailed(!ok)\n    local.onCopy?.(ok)\n    if (ok) setTimeout(() => setCopied(false), 1500)\n  }\n\n  const Actions = () => (\n    <div class=\"flex items-center gap-1 opacity-0 transition-opacity group-focus-within/code:opacity-100 group-hover/code:opacity-100 [@media(hover:none)]:opacity-100\">\n      {local.actions}\n      <Button\n        variant=\"ghost\"\n        size=\"icon-2xs\"\n        touchTarget=\"comfortable\"\n        aria-label={copied() ? (local.copiedLabel ?? 'Copied') : (local.copyLabel ?? 'Copy code')}\n        title={failed() ? 'Copying is unavailable in this context' : undefined}\n        onClick={() => void copy()}\n      >\n        <Show when={copied()} fallback={<Copy aria-hidden=\"true\" />}>\n          <Check aria-hidden=\"true\" />\n        </Show>\n      </Button>\n    </div>\n  )\n\n  return (\n    <div\n      data-slot=\"code-block\"\n      data-size={local.size ?? 'default'}\n      class={cn(\n        'group/code overflow-hidden border border-border bg-card',\n        small() ? 'rounded-lg' : 'rounded-xl',\n        local.class\n      )}\n      {...rest}\n      ref={(element) => {\n        // Composed rather than replaced: a caller's ref must survive.\n        if (typeof local.ref === 'function') local.ref(element)\n        else if (local.ref) local.ref = element\n        // Measured rather than assumed: the caller controls the content, so only\n        // the rendered box can say whether the action row has scrolled away.\n        // The body is what is watched, not the block: the repeated action row is\n        // added to the block, so watching the block made this callback resize the\n        // very element it observes, which is a ResizeObserver loop (WebKit reports\n        // it as an uncaught \"loop completed with undelivered notifications\" error).\n        // The footer's own height is left out of the measure for the same reason: a\n        // block is tall by its content, not by the row that tallness adds.\n        const observer = new ResizeObserver(() => {\n          const footer = element.querySelector<HTMLElement>('[data-code-block-footer]')\n          setTall(\n            element.offsetHeight - (footer?.offsetHeight ?? 0) >\n              (local.tallThreshold ?? TALL_CODE_BLOCK_PX)\n          )\n        })\n        onMount(() => {\n          if (bodyElement) observer.observe(bodyElement)\n        })\n        onCleanup(() => observer.disconnect())\n      }}\n    >\n      <div\n        class={cn('flex items-center justify-between gap-2', small() ? 'px-2 py-0.5' : 'px-3 py-1')}\n      >\n        <span class=\"truncate font-code text-code text-muted-foreground\">{label()}</span>\n        <Actions />\n      </div>\n      <div\n        ref={(element) => (bodyElement = element)}\n        data-slot=\"code-block-body\"\n        data-wrap={local.wrap ? '' : undefined}\n        class={cn('scroll-fade overflow-x-auto', {\n          // A capped body scrolls on both axes; the region is already a tab stop,\n          // so the keyboard reaches the vertical overflow the same way.\n          'overflow-y-auto': local.maxHeight !== undefined,\n          '[&_pre]:whitespace-pre-wrap [&_pre]:[overflow-wrap:anywhere]': local.wrap,\n        })}\n        style={maxHeight() === undefined ? undefined : { 'max-height': maxHeight() }}\n        // A region that scrolls must be focusable, and a tab stop needs a name.\n        // A `group`, not a `region`: a landmark with the same role and name as the\n        // next block's (\"ts code\" twice) is a duplicate in the screen reader's\n        // landmark list, and a long answer would fill that list with code blocks.\n        tabindex=\"0\"\n        role=\"group\"\n        aria-label={groupLabel()}\n      >\n        <Show\n          when={highlighter()}\n          fallback={\n            <pre\n              class={cn('m-0', small() ? 'px-2 py-1.5' : 'px-3 py-2')}\n              style={{ 'line-height': local.lineHeight ?? '1.5' }}\n            >\n              <code class=\"font-code text-code\">\n                <Show when={perLine()} fallback={local.code.replace(/\\n$/, '')}>\n                  <For each={visibleLines()}>\n                    {(line, index) => (\n                      <CodeLine\n                        line={line}\n                        number={index() + 1}\n                        numbered={local.showLineNumbers === true}\n                        mark={local.lineMarks?.[index() + 1]}\n                        wrap={local.wrap === true}\n                      />\n                    )}\n                  </For>\n                </Show>\n              </code>\n            </pre>\n          }\n        >\n          {(highlight) => (\n            <div class={small() ? 'px-2 py-1.5' : 'px-3 py-2'}>\n              {highlight()(hiddenLines() > 0 ? visibleLines().join('\\n') : local.code)}\n            </div>\n          )}\n        </Show>\n        <Show when={truncated()}>\n          <div class=\"flex items-center gap-2 border-t border-border px-3 py-1 text-xs text-muted-foreground\">\n            <span>\n              Showing the first {visibleLines().length.toLocaleString()} of{' '}\n              {lines().length.toLocaleString()} lines.\n            </span>\n            <Button\n              variant=\"ghost\"\n              size=\"2xs\"\n              onClick={() => {\n                setShowAll(true)\n                // This button leaves the document with the click; the scroller\n                // is the nearest place focus can stay, so a keyboard user keeps their place.\n                bodyElement?.focus({ preventScroll: true })\n              }}\n            >\n              Show all {lines().length.toLocaleString()} lines\n            </Button>\n          </div>\n        </Show>\n        {/*\n          In the scroller's box, and a single line: the indicator must not add\n          height when it disappears, or a streaming block shifts everything below\n          it as it resolves.\n        */}\n        <Show when={!local.complete}>\n          <p class=\"px-3 pb-2 text-xs text-muted-foreground italic\">Generating…</p>\n        </Show>\n      </div>\n      <Show when={tall()}>\n        <div\n          data-code-block-footer=\"\"\n          class=\"flex items-center justify-end border-t border-transparent px-3 py-1 transition-colors group-focus-within/code:border-border group-hover/code:border-border\"\n        >\n          <Actions />\n        </div>\n      </Show>\n    </div>\n  )\n}\n\nconst MARK_GLYPH: Readonly<Record<CodeLineMark, string>> = {\n  add: '+',\n  remove: '−',\n  highlight: '',\n  error: '!',\n}\n\n/**\n * One rendered line. The gutter glyph and the element (`ins`/`del`) carry what a\n * mark means so it survives greyscale and a screen reader; both gutters are\n * unselectable so dragging across the block and copying yields only source.\n */\nfunction CodeLine(props: {\n  line: string\n  number: number\n  numbered: boolean\n  mark?: CodeLineMark\n  wrap: boolean\n}) {\n  const content = () => (\n    <>\n      <Show when={props.numbered}>\n        <span class=\"text-right text-muted-foreground select-none\" aria-hidden=\"true\">\n          {props.number}\n        </span>\n      </Show>\n      <span\n        class=\"w-[1ch] text-center text-muted-foreground select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"code-line-mark\"\n      >\n        {props.mark ? MARK_GLYPH[props.mark] : ''}\n      </span>\n      <span class={cn({ 'min-w-0': props.wrap })}>{props.line || ' '}</span>\n    </>\n  )\n  const rowClass = () =>\n    cn(\n      'grid gap-3 no-underline',\n      props.numbered ? 'grid-cols-[3ch_1ch_1fr]' : 'grid-cols-[1ch_1fr]',\n      {\n        'bg-success-subtle': props.mark === 'add',\n        'bg-destructive-subtle': props.mark === 'remove' || props.mark === 'error',\n        'bg-primary-subtle': props.mark === 'highlight',\n      }\n    )\n  return (\n    <Show\n      when={props.mark === 'add' || props.mark === 'remove'}\n      fallback={\n        <span data-mark={props.mark} class={rowClass()}>\n          {content()}\n        </span>\n      }\n    >\n      <Show\n        when={props.mark === 'add'}\n        fallback={\n          <del data-mark=\"remove\" class={rowClass()}>\n            {content()}\n          </del>\n        }\n      >\n        <ins data-mark=\"add\" class={rowClass()}>\n          {content()}\n        </ins>\n      </Show>\n    </Show>\n  )\n}\n\n/**\n * InlineCode.\n *\n * The `code` inside a sentence. It is a component rather than a class because it\n * has to hold three properties at once: it uses the shared code family and size\n * preference, and it wraps rather than overflows a narrow column\n * (`overflow-wrap: anywhere` — an identifier with\n * no spaces is one long token), and it must be legible against whatever surface\n * it lands on, which is why the fill is a token and not a fixed grey.\n */\nexport function InlineCode(props: ComponentProps<'code'>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <code\n      class={cn(\n        'rounded-sm bg-muted px-[0.4em] py-[0.15em] font-code text-code text-foreground [overflow-wrap:anywhere]',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA+IA,IAAa0C,wBAAwB;;AAGrC,IAAaC,qBAAqB;;;;;;;AAQlC,eAAeC,SAASC,MAAgC;CACtD,IAAI;EACF,IAAI,CAACC,UAAUC,WAAW,OAAO;EACjC,MAAMD,UAAUC,UAAUC,UAAUH,IAAI;EACxC,OAAO;CACT,QAAQ;EACN,OAAO;CACT;AACF;AAEA,SAAgBI,UAAUC,OAAuB;CAC/C,MAAM,CAACC,OAAOC,QAAQ5C,WAAW0C,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAK,CACN;CAED,MAAM,CAACG,QAAQC,aAAapD,aAAa,KAAK;CAC9C,MAAM,CAACqD,QAAQC,aAAatD,aAAa,KAAK;CAC9C,MAAM,CAACuD,MAAMC,WAAWxD,aAAa,KAAK;CAE1C,MAAM,CAACyD,QAAQC,aAAa1D,aAA8B;CAC1D,MAAM,CAAC2D,SAASC,cAAc5D,aAAa,KAAK;CAChD,IAAI6D;CAKJ,MAAM7C,iBAAiBiC,MAAMjC,UAAU+C,KAAK,CAAC,CAACC,MAAM,GAAG,EAAE,KAAKC,KAAAA;CAC9D,MAAMC,cAAcjB,MAAM7B,SAASJ,SAAS,KAAK;CACjD,MAAMmD,mBAAoBnD,SAAS,IAAI,GAAGA,SAAS,EAAC,SAAU;CAC9D,MAAMoD,cAAcnB,MAAMpB,SAAS;CACnC,MAAMwC,QAAQtE,iBAAiBkD,MAAMlC,KAAKuD,QAAQ,OAAO,EAAE,CAAC,CAACC,MAAM,IAAI,CAAC;CACxE,MAAMlC,kBAAkBY,MAAMZ,aAAAA;CAC9B,MAAMmC,eAAezE,iBAAkB4D,QAAQ,IAAIU,MAAM,IAAIA,MAAM,CAAC,CAACL,MAAM,GAAG3B,UAAU,CAAC,CAAE;CAC3F,MAAMoC,oBAAoBJ,MAAM,CAAC,CAACK,SAASF,aAAa,CAAC,CAACE;CAK1D5E,aACEI,SACQ;EAAC+C,MAAM9B;EAAUH,SAAS;EAAGiC,MAAMf;CAAa,IACrD,CAACf,UAAUyD,MAAMC,UAAU;EAC1BnB,UAAUO,KAAAA,CAAS;EACnB,IAAI,CAAC9C,YAAY,CAAC0D,QAAQ5B,MAAMhC,WAAW;EAC3C,IAAI6D,UAAU;EACd3E,gBAAiB2E,UAAU,KAAM;EAIjC,IAAI3C,SAAsC4C,YAAYA,QAAQF,KAAKD,IAAI,CAAC,CAAC,CAAC,CAACI,MACxEC,gBAAgB;GACf,IAAIH,WAAWG,aAAavB,gBAAgBuB,WAAW;EACzD,SACMhB,KAAAA,CACR;CACF,CACF,CACF;CACA,MAAMgB,oBAAiDhC,MAAMhC,aAAawC,OAAO;CAIjF,MAAMyB,gBACJD,YAAY,MAAMhB,KAAAA,MAAchB,MAAMxB,oBAAoB,QAAQwB,MAAMnB,cAAcmC,KAAAA;CACxF,MAAMkB,kBAAkBV,YAAY,IAAI,MAAMQ,YAAY,MAAMhB,KAAAA,KAAaiB,QAAQ;CACrF,MAAMvD,kBACJ,OAAOsB,MAAMtB,cAAc,WAAW,GAAGsB,MAAMtB,UAAS,MAAOsB,MAAMtB;CAEvE,MAAMyD,OAAO,YAAY;EACvB,MAAM7C,KAAK,MAAMG,SAASO,MAAMlC,IAAI;EACpCqC,UAAUb,EAAE;EACZe,UAAU,CAACf,EAAE;EACbU,MAAMX,SAASC,EAAE;EACjB,IAAIA,IAAI8C,iBAAiBjC,UAAU,KAAK,GAAG,IAAI;CACjD;CAEA,MAAMkC,uBAAU;EAAA,IAAAC,OAAAC,OAAA;EAAAC,OAAAF,YAEXtC,MAAM5B,SAAO,IAAA;EAAAoE,OAAAF,MAAAG,gBACb/E,QAAM;GACLgF,SAAO;GACP9D,MAAI;GACJ+D,aAAW;GAAA,KAAA,gBAAA;IAAA,OACCE,WAAA,CAAA,CAAA3C,OAAO,CAAC,CAAA,CAAA,IAAIF,MAAM1B,eAAe,WAAa0B,MAAM3B,aAAa;GAAY;GAAA,IACzFF,QAAK;IAAA,OAAEiC,OAAO,IAAI,2CAA2CY,KAAAA;GAAS;GACtE8B,eAAe,KAAKX,KAAK;GAAC,IAAAY,WAAA;IAAA,OAAAN,gBAEzBrF,MAAI;KAAA,IAAC4F,OAAI;MAAA,OAAE9C,OAAO;KAAC;KAAA,IAAE+C,WAAQ;MAAA,OAAAR,gBAAGhF,MAAI,EAAA,eAAA,OAAA,CAAA;KAAA;KAAA,IAAAsF,WAAA;MAAA,OAAAN,gBAClCjF,OAAK,EAAA,eAAA,OAAA,CAAA;KAAA;IAAA,CAAA;GAAA;EAAA,CAAA,GAAA,IAAA;EAAA,OAAA8E;CAAA,EAAA,CAAA;CAMd,cAAA;EAAA,IAAAY,QAAAC,QAAA,GAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAH,MAAAI;EAAAC,KAUUC,YAAY;GAEhB,IAAI,OAAO1D,MAAM2D,QAAQ,YAAY3D,MAAM2D,IAAID,OAAO;QACjD,IAAI1D,MAAM2D,KAAK3D,MAAM2D,MAAMD;GAShC,MAAME,WAAW,IAAIC,qBAAqB;IACxC,MAAMC,SAASJ,QAAQK,cAA2B,0BAA0B;IAC5ExD,QACEmD,QAAQO,gBAAgBH,QAAQG,gBAAgB,MAC7CjE,MAAMvB,iBAAAA,IACX;GACF,CAAC;GACDtB,cAAc;IACZ,IAAIyD,aAAagD,SAASM,QAAQtD,WAAW;GAC/C,CAAC;GACD1D,gBAAgB0G,SAASO,WAAW,CAAC;EACvC,GAACjB,KAAA;EAAAkB,OAAAlB,OAAAmB,WAAA;GAAA,KAAA,eAAA;IAAA,OA9BUrE,MAAMpB,QAAQ;GAAS;GAAA,KAAA,WAAA;IAAA,OAC3BjB,GACL,2DACAwD,MAAM,IAAI,eAAe,cACzBnB,MAAMuE,KACR;GAAC;EAAA,GACGtE,IAAI,GAAA,OAAA,IAAA;EAAAuC,OAAAc,OA6B4DrC,KAAK;EAAAuB,OAAAY,OAAAX,gBACtEJ,SAAO,CAAA,CAAA,GAAA,IAAA;EAAAoB,KAGFC,YAAa9C,cAAc8C,SAAQH,KAAA;EAAAf,OAAAe,OAAAd,gBAkBxCrF,MAAI;GAAA,IACH4F,OAAI;IAAA,OAAEhB,YAAY;GAAC;GAAA,IACnBiB,WAAQ;IAAA,cAAA;KAAA,IAAAuB,SAAAC,QAAA,GAAAC,SAAAF,OAAAnB;KAAAb,OAAAkC,QAAAjC,gBAMDrF,MAAI;MAAA,IAAC4F,OAAI;OAAA,OAAEf,QAAQ;MAAC;MAAA,IAAEgB,WAAQ;OAAA,OAAEjD,MAAMlC,KAAKuD,QAAQ,OAAO,EAAE;MAAC;MAAA,IAAA0B,WAAA;OAAA,OAAAN,gBAC3DzF,KAAG;QAAA,IAAC2H,OAAI;SAAA,OAAEpD,aAAa;QAAC;QAAAwB,WACrB6B,MAAMC,UAAKpC,gBACVqC,UAAQ;SACDF;SAAI,IACVG,SAAM;UAAA,OAAEF,MAAM,IAAI;SAAC;SAAA,IACnBG,WAAQ;UAAA,OAAEhF,MAAMxB,oBAAoB;SAAI;SAAA,IACxCyG,OAAI;UAAA,OAAEjF,MAAMnB,YAAYgG,MAAM,IAAI;SAAE;SAAA,IACpClG,OAAI;UAAA,OAAEqB,MAAMrB,SAAS;SAAI;QAAA,CAAA;OAE5B,CAAA;MAAA;KAAA,CAAA,CAAA;KAAAuG,QAAAC,QAAA;MAAA,IAAAC,OAdAzH,GAAG,OAAOwD,MAAM,IAAI,gBAAgB,WAAW,GAACkE,OAC/BrF,MAAMzB,cAAc;MAAK6G,SAAAD,IAAAG,KAAAC,UAAAf,QAAAW,IAAAG,IAAAF,IAAA;MAAAC,SAAAF,IAAAK,KAAAC,iBAAAjB,QAAA,eAAAW,IAAAK,IAAAH,IAAA;MAAA,OAAAF;KAAA,GAAA;MAAAG,GAAAtE,KAAAA;MAAAwE,GAAAxE,KAAAA;KAAA,CAAA;KAAA,OAAAwD;IAAA,EAAA,CAAA;GAAA;GAAAzB,WAoBnD/E,qBAAS;IAAA,IAAA0H,SAAAC,QAAA;IAAAnD,OAAAkD,cAEN1H,UAAU,CAAC,CAACwD,YAAY,IAAI,IAAID,aAAa,CAAC,CAACqE,KAAK,IAAI,IAAI5F,MAAMlC,IAAI,CAAC;IAAAoH,aAAAK,UAAAG,QAD9DvE,MAAM,IAAI,gBAAgB,WAAW,CAAA;IAAA,OAAAuE;GAAA,EAAA,CAAA;EAGlD,CAAA,GAAA,IAAA;EAAAlD,OAAAe,OAAAd,gBAEFrF,MAAI;GAAA,IAAC4F,OAAI;IAAA,OAAEd,UAAU;GAAC;GAAA,IAAAa,WAAA;IAAA,IAAA8C,QAAAC,QAAA,GAAAC,QAAAF,MAAAxC,YAAA4C,SAAAF,MAAA1C,WAAAG,aAAA2C,SAAAF,OAAAzC,YAAAA;IAAA2C,OAAA3C;IAAAhB,OAAAuD,aAGExE,aAAa,CAAC,CAACE,OAAO4E,eAAe,GAACJ,MAAA;IAAAzD,OAAAuD,aACxD3E,MAAM,CAAC,CAACK,OAAO4E,eAAe,GAACF,MAAA;IAAA3D,OAAAqD,OAAApD,gBAEjC/E,QAAM;KACLgF,SAAO;KACP9D,MAAI;KACJkE,eAAe;MACbnC,WAAW,IAAI;MAGfC,aAAa0F,MAAM,EAAEC,eAAe,KAAK,CAAC;KAC5C;KAAC,IAAAxD,WAAA;MAAA,OAAA;OAAA;OAAAF,WAESzB,MAAM,CAAC,CAACK,OAAO4E,eAAe,CAAC;OAAA;MAAA;KAAA;IAAA,CAAA,GAAA,IAAA;IAAA,OAAAR;GAAA;EAAA,CAAA,GAAA,IAAA;EAAArD,OAAAe,OAAAd,gBAS9CrF,MAAI;GAAA,IAAC4F,OAAI;IAAA,OAAE,CAAChD,MAAM9B;GAAQ;GAAA,IAAA6E,WAAA;IAAA,OAAAyD,QAAA;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAhE,OAAAU,OAAAT,gBAI5BrF,MAAI;GAAA,IAAC4F,OAAI;IAAA,OAAE1C,KAAK;GAAC;GAAA,IAAAyC,WAAA;IAAA,IAAA0D,SAAAC,QAAA;IAAAlE,OAAAiE,QAAAhE,gBAKbJ,SAAO,CAAA,CAAA,CAAA;IAAA,OAAAoE;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAvB,QAAAC,QAAA;GAAA,IAAAwB,MAzFHhJ,GAAG,2CAA2CwD,MAAM,IAAI,gBAAgB,WAAW,GAACyF,OAQhF5G,MAAMrB,OAAO,KAAKqC,KAAAA,GAAS6F,OAC/BlJ,GAAG,+BAA+B;IAGvC,mBAAmBqC,MAAMtB,cAAcsC,KAAAA;IACvC,gEAAgEhB,MAAMrB;GACxE,CAAC,GAACmI,OACKpI,UAAU,MAAMsC,KAAAA,IAAYA,KAAAA,IAAY,EAAE,cAActC,UAAU,EAAE,GAACqI,OAOhE7F,WAAW;GAACyF,QAAAxB,IAAAG,KAAAC,UAAAnC,OAAA+B,IAAAG,IAAAqB,GAAA;GAAAC,SAAAzB,IAAAK,KAAAwB,aAAAzD,OAAA,aAAA4B,IAAAK,IAAAoB,IAAA;GAAAC,SAAA1B,IAAA8B,KAAA1B,UAAAhC,OAAA4B,IAAA8B,IAAAJ,IAAA;GAAA1B,IAAA+B,IAAAC,MAAA5D,OAAAuD,MAAA3B,IAAA+B,CAAA;GAAAH,SAAA5B,IAAAiC,KAAAJ,aAAAzD,OAAA,cAAA4B,IAAAiC,IAAAL,IAAA;GAAA,OAAA5B;EAAA,GAAA;GAAAG,GAAAtE,KAAAA;GAAAwE,GAAAxE,KAAAA;GAAAiG,GAAAjG,KAAAA;GAAAkG,GAAAlG,KAAAA;GAAAoG,GAAApG,KAAAA;EAAA,CAAA;EAAA,OAAAkC;CAAA,EAAA,CAAA;AAwEhC;AAEA,IAAMmE,aAAqD;CACzDC,KAAK;CACLC,QAAQ;CACRvJ,WAAW;CACXwJ,OAAO;AACT;;;;;;AAOA,SAAS1C,SAAS/E,OAMf;CACD,MAAM0H,gBAAU;EAAAhF,gBAEXrF,MAAI;GAAA,IAAC4F,OAAI;IAAA,OAAEjD,MAAMiF;GAAQ;GAAA,IAAAjC,WAAA;IAAA,IAAA2E,SAAAC,QAAA;IAAAnF,OAAAkF,cAErB3H,MAAMgF,MAAM;IAAA,OAAA2C;GAAA;EAAA,CAAA;SAAA;GAAA,IAAAE,SAAAC,QAAA;GAAArF,OAAAoF,eAAA;IAAA,IAAAE,MAAAjF,WAAA,CAAA,CAQd9C,MAAMkF,IAAI;IAAA,aAAV6C,IAAA,IAAaT,WAAWtH,MAAMkF,QAAQ;GAAE,EAAA,CAAA,CAAA;GAAA,OAAA2C;EAAA,EAAA,CAAA;SAAA;GAAA,IAAAG,SAAAC,QAAA;GAAAxF,OAAAuF,cAEEhI,MAAM6E,QAAQ,GAAG;GAAAM,aAAAK,UAAAwC,QAAjDpK,GAAG,EAAE,WAAWoC,MAAMpB,KAAK,CAAC,CAAC,CAAA;GAAA,OAAAoJ;EAAA,EAAA,CAAA;CAAA;CAG9C,MAAME,iBACJtK,GACE,2BACAoC,MAAMiF,WAAW,4BAA4B,uBAC7C;EACE,qBAAqBjF,MAAMkF,SAAS;EACpC,yBAAyBlF,MAAMkF,SAAS,YAAYlF,MAAMkF,SAAS;EACnE,qBAAqBlF,MAAMkF,SAAS;CACtC,CACF;CACF,OAAAxC,gBACGrF,MAAI;EAAA,IACH4F,OAAI;GAAA,OAAEjD,MAAMkF,SAAS,SAASlF,MAAMkF,SAAS;EAAQ;EAAA,IACrDhC,WAAQ;GAAA,cAAA;IAAA,IAAAiF,SAAAF,QAAA;IAAAxF,OAAA0F,QAEHT,OAAO;IAAAvC,QAAAC,QAAA;KAAA,IAAAgD,OADOpI,MAAMkF,MAAImD,OAASH,SAAS;KAACE,SAAAhD,IAAAG,KAAA0B,aAAAkB,QAAA,aAAA/C,IAAAG,IAAA6C,IAAA;KAAAC,SAAAjD,IAAAK,KAAAD,UAAA2C,QAAA/C,IAAAK,IAAA4C,IAAA;KAAA,OAAAjD;IAAA,GAAA;KAAAG,GAAAtE,KAAAA;KAAAwE,GAAAxE,KAAAA;IAAA,CAAA;IAAA,OAAAkH;GAAA,EAAA,CAAA;EAAA;EAAA,IAAAnF,WAAA;GAAA,OAAAN,gBAK/CrF,MAAI;IAAA,IACH4F,OAAI;KAAA,OAAEjD,MAAMkF,SAAS;IAAK;IAAA,IAC1BhC,WAAQ;KAAA,cAAA;MAAA,IAAAoF,SAAAC,SAAA;MAAA9F,OAAA6F,QAEHZ,OAAO;MAAAvC,aAAAK,UAAA8C,QADqBJ,SAAS,CAAC,CAAA;MAAA,OAAAI;KAAA,EAAA,CAAA;IAAA;IAAA,IAAAtF,WAAA;KAAA,IAAAwF,SAAAC,QAAA;KAAAhG,OAAA+F,QAMxCd,OAAO;KAAAvC,aAAAK,UAAAgD,QADkBN,SAAS,CAAC,CAAA;KAAA,OAAAM;IAAA;GAAA,CAAA;EAAA;CAAA,CAAA;AAM9C;;;;;;;;;;;AAYA,SAAgBE,WAAW1I,OAA+B;CACxD,MAAM,CAACC,OAAOC,QAAQ5C,WAAW0C,OAAO,CAAC,OAAO,CAAC;CAEjD,cAAA;EAAA,IAAA2I,SAAAC,SAAA;EAAAvE,OAAAsE,QAAArE,WAAA,EAAA,KAAA,WAAA;GAAA,OAEW1G,GACL,2GACAqC,MAAMuE,KACR;EAAC,EAAA,GACGtE,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAyI;CAAA,EAAA,CAAA;AAGd"}

package/dist/components/ui/code-block/index.d.ts

@@ -1,2 +1,2 @@
-export { CodeBlock, InlineCode, TALL_CODE_BLOCK_PX, type CodeBlockProps } from './code-block';
+export { CODE_BLOCK_LINE_LIMIT, CodeBlock, InlineCode, TALL_CODE_BLOCK_PX, type CodeBlockProps, type CodeHighlighter, type CodeLineMark, } from './code-block';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ui/code-block/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/code-block/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,kBAAkB,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/code-block/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,SAAS,EACT,UAAU,EACV,kBAAkB,EAClB,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,YAAY,GAClB,MAAM,cAAc,CAAA"}

package/dist/components/ui/code-block/index.js

@@ -1,2 +1,2 @@
-import { CodeBlock, InlineCode, TALL_CODE_BLOCK_PX } from "./code-block.js";
-export { CodeBlock, InlineCode, TALL_CODE_BLOCK_PX };
+import { CODE_BLOCK_LINE_LIMIT, CodeBlock, InlineCode, TALL_CODE_BLOCK_PX } from "./code-block.js";
+export { CODE_BLOCK_LINE_LIMIT, CodeBlock, InlineCode, TALL_CODE_BLOCK_PX };

package/dist/components/ui/field/number-field.d.ts

@@ -1,8 +1,7 @@
 import { type JSX } from 'solid-js';
-export type NumberFieldProps = {
+type NumberFieldBaseProps = {
     label: string;
     hint?: string;
-    value: number;
     min: number;
     max: number;
     /**
@@ -20,16 +19,34 @@ export type NumberFieldProps = {
      * `integer={false}`, and `min={0.5} step={1}` accepts 0.5, 1.5, 2.5.
      */
     integer?: boolean;
-    onChange: (value: number) => void;
+    /** Locks the input; a locked field keeps its value and reports nothing. */
+    disabled?: boolean;
     class?: string;
     onBlur?: JSX.EventHandler<HTMLInputElement, FocusEvent>;
 };
+export type NumberFieldProps = NumberFieldBaseProps & ({
+    optional?: false;
+    value: number;
+    onChange: (value: number) => void;
+} | {
+    /**
+     * Lets the field be left blank: a blank field is valid and reports `null`,
+     * and a `null` value shows a blank field. Use it for a limit that falls
+     * back to a default when unset, so a caller never maps `''` to
+     * `undefined` of its own.
+     */
+    optional: true;
+    value: number | null;
+    onChange: (value: number | null) => void;
+});
 /**
  * A controlled numeric field that keeps an editable draft while validating
  * range, integer and step constraints. Invalid drafts are announced and restored
  * to the latest controlled value when focus leaves the input, so `onChange`
  * only ever receives a value the field accepts — a caller never needs a
- * `Number(value) || fallback` of its own.
+ * `Number(value) || fallback` of its own. With `optional`, blank is accepted and
+ * reported as `null`.
  */
 export declare function NumberField(props: NumberFieldProps): JSX.Element;
+export {};
 //# sourceMappingURL=number-field.d.ts.map

package/dist/components/ui/field/number-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-field.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/field/number-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AAI/D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAA;CACxD,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eAgElD"}
+{"version":3,"file":"number-field.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/field/number-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AAI/D,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAA;CACxD,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,CACI;IACE,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,GACD;IACE;;;;;OAKG;IACH,QAAQ,EAAE,IAAI,CAAA;IACd,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;CACzC,CACJ,CAAA;AAIH;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eA8ElD"}

package/dist/components/ui/field/number-field.js

@@ -3,22 +3,25 @@ import { Input } from "../input/input.js";
 import { createComponent } from "solid-js/web";
 import { createEffect, createSignal } from "solid-js";
 //#region src/components/ui/field/number-field.tsx
+var text = (value) => value === null ? "" : String(value);
 /**
 * A controlled numeric field that keeps an editable draft while validating
 * range, integer and step constraints. Invalid drafts are announced and restored
 * to the latest controlled value when focus leaves the input, so `onChange`
 * only ever receives a value the field accepts — a caller never needs a
-* `Number(value) || fallback` of its own.
+* `Number(value) || fallback` of its own. With `optional`, blank is accepted and
+* reported as `null`.
 */
 function NumberField(props) {
-	const [draft, setDraft] = createSignal(String(props.value));
+	const [draft, setDraft] = createSignal(text(props.value));
 	const [error, setError] = createSignal("");
 	const integer = () => props.integer ?? (props.step === void 0 || Number.isInteger(props.step) && Number.isInteger(props.min));
 	createEffect(() => {
-		setDraft(String(props.value));
+		setDraft(text(props.value));
 	});
-	const validate = (raw) => {
-		if (!raw) return `${props.label} is required.`;
+	const validate = (raw, badInput) => {
+		if (badInput) return `${props.label} must be a valid number.`;
+		if (!raw) return props.optional ? "" : `${props.label} is required.`;
 		const next = Number(raw);
 		if (!Number.isFinite(next)) return `${props.label} must be a valid number.`;
 		if (integer() && !Number.isInteger(next)) return `${props.label} must be a whole number.`;
@@ -57,18 +60,26 @@ function NumberField(props) {
 				get step() {
 					return props.step ?? (integer() ? 1 : "any");
 				},
-				required: true,
+				get required() {
+					return !props.optional;
+				},
+				get disabled() {
+					return props.disabled;
+				},
 				onInput: (event) => {
 					const raw = event.currentTarget.value;
-					setDraft(raw);
-					const nextError = validate(raw);
+					const badInput = event.currentTarget.validity.badInput;
+					if (!badInput) setDraft(raw);
+					const nextError = validate(raw, badInput);
 					setError(nextError);
-					if (!nextError) props.onChange(Number(raw));
+					if (nextError) return;
+					props.onChange(raw ? Number(raw) : null);
 				},
 				onBlur: (event) => {
-					if (validate(draft())) {
-						setDraft(String(props.value));
+					if (validate(draft(), event.currentTarget.validity.badInput)) {
+						setDraft(text(props.value));
 						setError("");
+						event.currentTarget.value = text(props.value);
 					}
 					props.onBlur?.(event);
 				}