@bysages/solid 0.0.1 → 0.1.1

package/dist/index.mjs

@@ -1,40 +1,49 @@
 import { injectComponentStyle } from "@bysages/core";
 import { Accordion as Accordion$1 } from "@ark-ui/solid/accordion";
-import { addEventListener, createComponent, delegateEvents, effect, insert, memo, mergeProps, setAttribute, setStyleProperty, spread, style, template, use } from "solid-js/web";
-import { renderHtml } from "@tanstack/markdown/html";
-import { For, Show, createContext, createMemo, createSignal, mergeProps as mergeProps$1, onCleanup, onMount, splitProps as splitProps$1, useContext } from "solid-js";
+import { Portal, addEventListener, createComponent, delegateEvents, effect, insert, memo, mergeProps, setAttribute, setStyleProperty, spread, style, template, use } from "solid-js/web";
+import { For, Index, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, mergeProps as mergeProps$1, on, onCleanup, onMount, splitProps, useContext } from "solid-js";
+import { Field as Field$1, useFieldContext } from "@ark-ui/solid/field";
 import { Collapsible as Collapsible$1 } from "@ark-ui/solid/collapsible";
-import { Field as Field$1 } from "@ark-ui/solid/field";
+import { renderHtml } from "@tanstack/markdown/html";
 import { AngleSlider as AngleSlider$1 } from "@ark-ui/solid/angle-slider";
+import { createFileTreeCollection, createGridCollection, createTreeCollection, useAsyncList, useListCollection, useListCollection as useListCollection$1, useListSelection } from "@ark-ui/solid/collection";
+import { Combobox as Combobox$1 } from "@ark-ui/solid/combobox";
 import { Avatar as Avatar$1 } from "@ark-ui/solid/avatar";
 import { DatePicker as DatePicker$1 } from "@ark-ui/solid/date-picker";
 import { Carousel as Carousel$1 } from "@ark-ui/solid/carousel";
+import { useEnvironmentContext } from "@ark-ui/solid/environment";
+import { useLocaleContext } from "@ark-ui/solid/locale";
+import * as cascade from "@zag-js/cascade-select";
+import { normalizeProps, useMachine } from "@zag-js/solid";
 import { Checkbox as Checkbox$1 } from "@ark-ui/solid/checkbox";
+import { ClientOnly } from "@ark-ui/solid/client-only";
 import { Clipboard as Clipboard$1 } from "@ark-ui/solid/clipboard";
 import { ColorPicker as ColorPicker$1 } from "@ark-ui/solid/color-picker";
-import { Combobox as Combobox$1 } from "@ark-ui/solid/combobox";
-import { DateInput as DateInput$1 } from "@ark-ui/solid/date-input";
 import { Dialog as Dialog$1 } from "@ark-ui/solid/dialog";
+import { DateInput as DateInput$1 } from "@ark-ui/solid/date-input";
+import { DownloadTrigger, useDownload } from "@ark-ui/solid/download-trigger";
 import { Drawer as Drawer$1 } from "@ark-ui/solid/drawer";
 import { Editable as Editable$1 } from "@ark-ui/solid/editable";
 import { Fieldset as Fieldset$1 } from "@ark-ui/solid/fieldset";
 import { FileUpload as FileUpload$1 } from "@ark-ui/solid/file-upload";
 import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/solid/floating-panel";
+import { FocusTrap } from "@ark-ui/solid/focus-trap";
 import { Format as Format$1 } from "@ark-ui/solid/format";
 import { Frame as Frame$1 } from "@ark-ui/solid/frame";
 import { Highlight as Highlight$1 } from "@ark-ui/solid/highlight";
 import { HoverCard as HoverCard$1 } from "@ark-ui/solid/hover-card";
 import { ImageCropper as ImageCropper$1 } from "@ark-ui/solid/image-cropper";
 import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/solid/json-tree-view";
-import { Listbox as Listbox$1, createListCollection } from "@ark-ui/solid/listbox";
+import { Listbox as Listbox$1 } from "@ark-ui/solid/listbox";
 import { Marquee as Marquee$1 } from "@ark-ui/solid/marquee";
 import { Menu as Menu$1 } from "@ark-ui/solid/menu";
+import { Popover as Popover$1 } from "@ark-ui/solid/popover";
 import { NavigationMenu as NavigationMenu$1 } from "@ark-ui/solid/navigation-menu";
 import { NumberInput as NumberInput$1 } from "@ark-ui/solid/number-input";
 import { Pagination as Pagination$1 } from "@ark-ui/solid/pagination";
 import { PasswordInput as PasswordInput$1 } from "@ark-ui/solid/password-input";
 import { PinInput as PinInput$1 } from "@ark-ui/solid/pin-input";
-import { Popover as Popover$1 } from "@ark-ui/solid/popover";
+import { Presence, PresenceProvider, usePresence, usePresenceContext } from "@ark-ui/solid/presence";
 import { Progress as Progress$1 } from "@ark-ui/solid/progress";
 import { QrCode as QrCode$1 } from "@ark-ui/solid/qr-code";
 import { RadioGroup as RadioGroup$1 } from "@ark-ui/solid/radio-group";
@@ -59,7 +68,7 @@ import { Toggle as Toggle$1 } from "@ark-ui/solid/toggle";
 import { ToggleGroup as ToggleGroup$1 } from "@ark-ui/solid/toggle-group";
 import { Tooltip as Tooltip$1 } from "@ark-ui/solid/tooltip";
 import { Tour as Tour$1, useTour } from "@ark-ui/solid/tour";
-import { TreeView as TreeView$1 } from "@ark-ui/solid/tree-view";
+import { TreeView as TreeView$1, createTreeCollection as createTreeCollection$1 } from "@ark-ui/solid/tree-view";
 export * from "@bysages/core";
 //#region src/components/accordion/index.ts
 /** Ark's Accordion, dressed in the paper-and-ink system: a ruled sheet
@@ -68,10 +77,41 @@ export * from "@bysages/core";
 const Accordion = Accordion$1;
 injectComponentStyle("accordion");
 //#endregion
+//#region src/components/affix/index.tsx
+var _tmpl$$58 = /*#__PURE__*/ template(`<div>`);
+/**
+* A nail: the wrapped content travels with the page until it reaches its
+* offset, then stays put while the page moves on. The semantics are
+* plain `position: sticky` — pinning is relative to the nearest
+* *scrolling* ancestor, so the element works inside a scrollable panel
+* exactly as it does on the page itself, and a parent with
+* `overflow: hidden` clips the pin. Both offsets may be given: the
+* content then holds its place inside that band.
+*/
+function Affix(props) {
+	const [own, rest] = splitProps(props, ["offsetTop", "offsetBottom"]);
+	return (() => {
+		var _el$ = _tmpl$$58();
+		spread(_el$, mergeProps(rest, {
+			get style() {
+				return {
+					...rest.style,
+					top: own.offsetTop ?? "0px",
+					bottom: own.offsetBottom ?? "0px"
+				};
+			},
+			"data-scope": "affix",
+			"data-part": "root"
+		}), false, false);
+		return _el$;
+	})();
+}
+injectComponentStyle("affix");
+//#endregion
 //#region src/components/button/index.tsx
-var _tmpl$$18 = /*#__PURE__*/ template(`<button>`);
+var _tmpl$$57 = /*#__PURE__*/ template(`<button>`);
 function Button(props) {
-	const [own, rest] = splitProps$1(props, [
+	const [own, rest] = splitProps(props, [
 		"variant",
 		"tone",
 		"size",
@@ -80,7 +120,7 @@ function Button(props) {
 		"disabled"
 	]);
 	return (() => {
-		var _el$ = _tmpl$$18();
+		var _el$ = _tmpl$$57();
 		spread(_el$, mergeProps(rest, {
 			get type() {
 				return own.type ?? "button";
@@ -109,193 +149,12 @@ function Button(props) {
 }
 injectComponentStyle("button");
 //#endregion
-//#region src/components/collapsible/index.ts
-/** Ark's Collapsible, dressed in the paper-and-ink system: one control on
-* the paper, its panel dissolving open to the machine's measured height.
-* The API is Ark's own — Root, Trigger, Content, Indicator. */
-const Collapsible = Collapsible$1;
-injectComponentStyle("collapsible");
-//#endregion
-//#region src/components/field/index.ts
-/** Ark's Field, dressed in the paper-and-ink system: a tracked label, a
-* border-and-halo control, and quiet help text. The API is Ark's own —
-* Root, Label, Input, Textarea, Select, HelperText, ErrorText,
-* RequiredIndicator. */
-const Field = Field$1;
-injectComponentStyle("field");
-//#endregion
-//#region src/components/ai/index.tsx
-var _tmpl$$17 = /*#__PURE__*/ template(`<div>`);
-var _tmpl$2$6 = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"fill=none aria-hidden=true><path d="M6 4l4 4-4 4"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>`);
-var _tmpl$3$5 = /*#__PURE__*/ template(`<article>`);
-var _tmpl$4$2 = /*#__PURE__*/ template(`<span>`);
-var _tmpl$5$1 = /*#__PURE__*/ template(`<div data-scope=ai data-part=reasoning-content>`);
-var _tmpl$6$1 = /*#__PURE__*/ template(`<div data-scope=ai data-part=tool-body>`);
-var _tmpl$7$1 = /*#__PURE__*/ template(`<span data-scope=ai data-part=tool-status>`);
-var _tmpl$8$1 = /*#__PURE__*/ template(`<span data-scope=ai data-part=tool-label>Input`);
-var _tmpl$9$1 = /*#__PURE__*/ template(`<pre>`);
-var _tmpl$0$1 = /*#__PURE__*/ template(`<span data-scope=ai data-part=tool-label>Output`);
-var _tmpl$1$1 = /*#__PURE__*/ template(`<li data-scope=ai data-part=source><a>`);
-var _tmpl$10$1 = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"width=14 height=14 aria-hidden=true fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=square><path d="M8 13V3M3.5 7.5 8 3l4.5 4.5">`);
-var _tmpl$11$1 = /*#__PURE__*/ template(`<form><div data-scope=ai data-part=prompt-footer>`);
-/** A conversation column: Root is the log, Message carries a role, and
-* the speaking parts — Response, Reasoning, Tool, Sources — part the
-* stream. The interactive folds are the shared Collapsible wearing a
-* `data-ai` marker, so the machine work is never ours. Parts stay
-* agnostic of any client; consumers map their message format (e.g. the
-* `UIMessage` parts re-exported below) onto these primitives. */
-function part$9(name, tag, extra = {}) {
-	function Component(props) {
-		return (() => {
-			var _el$ = _tmpl$$17();
-			spread(_el$, mergeProps(extra, props, {
-				"data-scope": "ai",
-				get ["data-part"]() {
-					return name.toLowerCase();
-				}
-			}), false, false);
-			return _el$;
-		})();
-	}
-	return Component;
-}
-const Conversation = part$9("Conversation", "div", {
-	role: "log",
-	"aria-label": "Conversation"
-});
-const Content$2 = part$9("Content", "div");
-const Sources = part$9("Sources", "ol");
-const Actions$3 = part$9("Actions", "div");
-const Loader = part$9("Loader", "span", {
-	role: "status",
-	"aria-label": "Loading"
-});
-/** The folding chevron the shared indicator turns. */
-const chevron$1 = _tmpl$2$6();
-/** Whose stroke this is — the user's words sit in a recessed bubble,
-* the assistant speaks flat on the paper. */
-function Message(props) {
-	const [own, rest] = splitProps$1(props, ["role"]);
-	return (() => {
-		var _el$3 = _tmpl$3$5();
-		spread(_el$3, mergeProps(rest, {
-			"data-scope": "ai",
-			"data-part": "message",
-			get ["data-role"]() {
-				return own.role ?? "assistant";
-			}
-		}), false, false);
-		return _el$3;
-	})();
-}
-/** Markdown set on the paper. Rendering goes through
-* `@tanstack/markdown`, whose defaults leave raw HTML and executable
-* links inert — streaming-safe by construction. */
-function Response(props) {
-	const [own, rest] = splitProps$1(props, ["content"]);
-	const html = createMemo(() => renderHtml(own.content));
-	return (() => {
-		var _el$4 = _tmpl$$17();
-		spread(_el$4, mergeProps(rest, {
-			"data-scope": "ai",
-			"data-part": "response",
-			get innerHTML() {
-				return html();
-			}
-		}), false, false);
-		return _el$4;
-	})();
-}
-/** The model's thought, folded by the shared collapsible in its quiet
-* register: bare ink for a trigger, the thought on one hairline. */
-function Reasoning(props) {
-	const [own, rest] = splitProps$1(props, ["label", "children"]);
-	return createComponent(Collapsible.Root, mergeProps(rest, {
-		"data-ai": "reasoning",
-		get children() {
-			return [createComponent(Collapsible.Trigger, { get children() {
-				return [(() => {
-					var _el$5 = _tmpl$4$2();
-					insert(_el$5, () => own.label ?? "Thinking");
-					return _el$5;
-				})(), createComponent(Collapsible.Indicator, { children: chevron$1 })];
-			} }), createComponent(Collapsible.Content, { get children() {
-				var _el$6 = _tmpl$5$1();
-				insert(_el$6, () => own.children);
-				return _el$6;
-			} })];
-		}
-	}));
-}
-/** A tool call: the shared collapsible as the vessel — the name it was
-* reached by and the state it reached in on the trigger, its input and
-* output folded inside. */
-function Tool(props) {
-	const [own, rest] = splitProps$1(props, [
-		"name",
-		"label",
-		"status",
-		"input",
-		"output"
-	]);
-	return createComponent(Collapsible.Root, mergeProps(rest, { "data-ai": "tool" }, () => own.status ? { "data-status": own.status } : {}, { get children() {
-		return [createComponent(Collapsible.Trigger, { get children() {
-			return [
-				(() => {
-					var _el$7 = _tmpl$4$2();
-					insert(_el$7, () => own.label ?? own.name);
-					return _el$7;
-				})(),
-				memo(() => memo(() => !!own.status)() ? (() => {
-					var _el$9 = _tmpl$7$1();
-					insert(_el$9, () => own.status.charAt(0).toUpperCase() + own.status.slice(1));
-					return _el$9;
-				})() : null),
-				createComponent(Collapsible.Indicator, { children: chevron$1 })
-			];
-		} }), createComponent(Collapsible.Content, { get children() {
-			var _el$8 = _tmpl$6$1();
-			insert(_el$8, (() => {
-				var _c$ = memo(() => own.input !== void 0);
-				return () => _c$() ? [_tmpl$8$1(), (() => {
-					var _el$1 = _tmpl$9$1();
-					insert(_el$1, () => own.input);
-					return _el$1;
-				})()] : null;
-			})(), null);
-			insert(_el$8, (() => {
-				var _c$2 = memo(() => own.output !== void 0);
-				return () => _c$2() ? [_tmpl$0$1(), (() => {
-					var _el$11 = _tmpl$9$1();
-					insert(_el$11, () => own.output);
-					return _el$11;
-				})()] : null;
-			})(), null);
-			return _el$8;
-		} })];
-	} }));
-}
-/** One place the ink came from; href and the rest ride the anchor. */
-function Source(props) {
-	const [own, rest] = splitProps$1(props, ["href", "children"]);
-	return (() => {
-		var _el$12 = _tmpl$1$1(), _el$13 = _el$12.firstChild;
-		spread(_el$13, mergeProps(rest, {
-			get href() {
-				return own.href;
-			},
-			"target": "_blank",
-			"rel": "noreferrer"
-		}), false, true);
-		insert(_el$13, () => own.children ?? own.href);
-		return _el$12;
-	})();
-}
+//#region src/components/ai-action/index.tsx
 /** A quiet icon button — copy, retry, thumbs. The label names it to
 * assistive tech and as the hover title. The control itself is the
 * shared Button in its ghost register. */
 function Action(props) {
-	const [own, rest] = splitProps$1(props, ["label", "children"]);
+	const [own, rest] = splitProps(props, ["label", "children"]);
 	return createComponent(Button, mergeProps({
 		variant: "ghost",
 		size: "sm",
@@ -310,41 +169,117 @@ function Action(props) {
 		return own.children;
 	} }));
 }
-/** A seal-cut button proposing the next stroke; selection hands back
-* the prompt. The shared Button in its outline register. */
-function Suggestion(props) {
-	const [own, rest] = splitProps$1(props, ["prompt", "onSelect"]);
-	return createComponent(Button, mergeProps({
-		variant: "outline",
-		size: "sm"
-	}, rest, {
-		onClick: () => own.onSelect?.(own.prompt),
-		get children() {
-			return own.prompt;
-		}
-	}));
+injectComponentStyle("ai");
+//#endregion
+//#region src/components/ai-message/index.tsx
+var _tmpl$$56 = /*#__PURE__*/ template(`<article>`);
+/** Whose stroke this is — the user's words sit in a recessed bubble,
+* the assistant speaks flat on the paper. */
+function Message(props) {
+	const [own, rest] = splitProps(props, ["role"]);
+	return (() => {
+		var _el$ = _tmpl$$56();
+		spread(_el$, mergeProps(rest, {
+			"data-scope": "ai",
+			"data-part": "message",
+			get ["data-role"]() {
+				return own.role ?? "assistant";
+			}
+		}), false, false);
+		return _el$;
+	})();
+}
+injectComponentStyle("ai");
+//#endregion
+//#region src/components/field/index.ts
+/** Ark's Field, dressed in the paper-and-ink system: a tracked label, a
+* border-and-halo control, and quiet help text. The API is Ark's own —
+* Root, Label, Input, Textarea, Select, HelperText, ErrorText,
+* RequiredIndicator. */
+const Field = Field$1;
+injectComponentStyle("field");
+//#endregion
+//#region src/components/ai-prompt-input/index.tsx
+var _tmpl$$55 = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"width=14 height=14 aria-hidden=true fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=square><path d="M8 13V3M3.5 7.5 8 3l4.5 4.5">`);
+var _tmpl$2$28 = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"width=14 height=14 aria-hidden=true><rect x=4.5 y=4.5 width=7 height=7 fill=currentColor>`);
+var _tmpl$3$18 = /*#__PURE__*/ template(`<div data-scope=ai>`);
+var _tmpl$4$13 = /*#__PURE__*/ template(`<div data-scope=ai data-part=prompt-footer><div data-scope=ai data-part=prompt-end>`);
+var _tmpl$5$10 = /*#__PURE__*/ template(`<form><div data-scope=ai data-part=prompt-main>`);
+function arrowUpGlyph() {
+	return _tmpl$$55();
+}
+function stopGlyph() {
+	return _tmpl$2$28();
 }
 /** The prompt vessel: the shared field textarea — self-growing on the
-* machine's autoresize — over a footer row carrying the submit seal.
-* Controlled — bind `value` and take the text on `onSubmit`. Enter
-* sends; Shift+Enter breaks the line. */
+* machine's autoresize — with the submit seal riding its last line.
+* Around the body, the slot props answer the composer's anatomy:
+* `header` for attachments riding above, `leading` for the tools at
+* the text's left, `trailing` for the seal itself, `footer` for the
+* tools beneath, and `footerEnd` for the controls that close the
+* footer row — the seal falls there by default, so a model picker
+* dropped in rides the send's shoulder. An empty slot renders no part,
+* so the bare vessel stays one quiet line. Controlled — bind `value`
+* and take the text on `onSubmit`. Enter sends; Shift+Enter breaks the
+* line. While `busy` the seal becomes a stop seal and Enter holds its
+* breath. */
 function PromptInput(props) {
-	const [own, rest] = splitProps$1(props, [
+	const [own, rest] = splitProps(props, [
 		"value",
 		"onValueChange",
 		"onSubmit",
+		"onStop",
 		"placeholder",
-		"disabled"
+		"disabled",
+		"busy",
+		"header",
+		"leading",
+		"trailing",
+		"footer",
+		"footerEnd"
 	]);
 	const send = () => {
-		const text = own.value.trim();
-		if (!text || own.disabled) return;
-		own.onSubmit?.(text);
+		const value = (own.value ?? "").trim();
+		if (!value || own.disabled || own.busy) return;
+		own.onSubmit?.(value);
 		own.onValueChange?.("");
 	};
+	const row = (part, content) => content != null ? (() => {
+		var _el$3 = _tmpl$3$18();
+		setAttribute(_el$3, "data-part", part);
+		insert(_el$3, content);
+		return _el$3;
+	})() : null;
+	const seal = () => own.busy ? createComponent(Button, {
+		variant: "solid",
+		size: "sm",
+		square: true,
+		type: "button",
+		"aria-label": "Stop",
+		get disabled() {
+			return own.disabled;
+		},
+		onClick: () => own.onStop?.(),
+		get children() {
+			return stopGlyph();
+		}
+	}) : createComponent(Button, {
+		variant: "solid",
+		size: "sm",
+		square: true,
+		type: "submit",
+		"aria-label": "Send",
+		get disabled() {
+			return own.disabled || !(own.value ?? "").trim();
+		},
+		get children() {
+			return arrowUpGlyph();
+		}
+	});
+	const trailing = () => own.footer != null ? own.trailing : own.trailing ?? seal();
 	return (() => {
-		var _el$14 = _tmpl$11$1(), _el$15 = _el$14.firstChild;
-		spread(_el$14, mergeProps(rest, {
+		var _el$4 = _tmpl$5$10(), _el$5 = _el$4.firstChild;
+		spread(_el$4, mergeProps(rest, {
 			"data-scope": "ai",
 			"data-part": "prompt",
 			"onSubmit": (event) => {
@@ -352,12 +287,14 @@ function PromptInput(props) {
 				send();
 			}
 		}), false, true);
-		insert(_el$14, createComponent(Field.Root, { get children() {
+		insert(_el$4, () => row("prompt-header", own.header), _el$5);
+		insert(_el$5, () => row("prompt-leading", own.leading), null);
+		insert(_el$5, createComponent(Field.Root, { get children() {
 			return createComponent(Field.Textarea, {
 				autoresize: true,
 				rows: 1,
 				get value() {
-					return own.value;
+					return own.value ?? "";
 				},
 				get placeholder() {
 					return own.placeholder ?? "Send a message";
@@ -365,7 +302,7 @@ function PromptInput(props) {
 				get disabled() {
 					return own.disabled;
 				},
-				onValueChange: (details) => own.onValueChange?.(details.value),
+				onInput: (event) => own.onValueChange?.(event.currentTarget.value),
 				onKeyDown: (event) => {
 					if (event.key === "Enter" && !event.shiftKey) {
 						event.preventDefault();
@@ -373,92 +310,414 @@ function PromptInput(props) {
 					}
 				}
 			});
-		} }), _el$15);
-		insert(_el$15, createComponent(Button, {
-			variant: "solid",
-			size: "sm",
-			square: true,
-			type: "submit",
-			"aria-label": "Send",
-			get disabled() {
-				return own.disabled || !own.value.trim();
+		} }), null);
+		insert(_el$5, () => row("prompt-trailing", trailing()), null);
+		insert(_el$4, createComponent(Show, {
+			get when() {
+				return own.footer != null;
 			},
 			get children() {
-				return _tmpl$10$1();
+				var _el$6 = _tmpl$4$13(), _el$7 = _el$6.firstChild;
+				insert(_el$6, () => own.footer, _el$7);
+				insert(_el$7, () => own.footerEnd, null);
+				insert(_el$7, seal, null);
+				return _el$6;
 			}
-		}));
-		return _el$14;
+		}), null);
+		return _el$4;
 	})();
 }
-const Ai = Object.assign(Conversation, {
-	Conversation,
-	Message,
-	Content: Content$2,
-	Response,
-	Reasoning,
-	Tool,
-	Sources,
-	Source,
-	Actions: Actions$3,
-	Action,
-	Suggestion,
-	PromptInput,
-	Loader
-});
 injectComponentStyle("ai");
 //#endregion
-//#region src/components/alert/index.tsx
-var _tmpl$$16 = /*#__PURE__*/ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path>`);
-var _tmpl$2$5 = /*#__PURE__*/ template(`<div>`);
-var _tmpl$3$4 = /*#__PURE__*/ template(`<span data-scope=alert data-part=icon>`);
-var _tmpl$4$1 = /*#__PURE__*/ template(`<p>`);
-const StatusContext = createContext(() => "ink");
-function glyph(status) {
-	const paths = {
-		info: "M12 8v5m0 3v.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z",
-		success: "m4 12.5 5 5L20 6.5",
-		warning: "M12 4 2.5 20h19L12 4Zm0 6v4m0 3v.01",
-		danger: "M6 6l12 12M18 6 6 18",
-		ink: "M12 8v5m0 3v.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z"
-	};
-	return (() => {
-		var _el$ = _tmpl$$16(), _el$2 = _el$.firstChild;
-		effect(() => setAttribute(_el$2, "d", paths[status]));
-		return _el$;
-	})();
+//#region src/components/ai/chevron.tsx
+var _tmpl$$54 = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"fill=none aria-hidden=true><path d="M6 4l4 4-4 4"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>`);
+/** The folding chevron the shared indicator turns. */
+function chevron$2() {
+	return _tmpl$$54();
 }
-function AlertRoot(props) {
-	const [own, rest] = splitProps$1(props, ["status"]);
-	const status = () => own.status ?? "ink";
-	return createComponent(StatusContext.Provider, {
-		value: status,
+//#endregion
+//#region src/components/collapsible/index.ts
+/** Ark's Collapsible, dressed in the paper-and-ink system: one control on
+* the paper, its panel dissolving open to the machine's measured height.
+* The API is Ark's own — Root, Trigger, Content, Indicator. */
+const Collapsible = Collapsible$1;
+injectComponentStyle("collapsible");
+//#endregion
+//#region src/components/ai-reasoning/index.tsx
+var _tmpl$$53 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$2$27 = /*#__PURE__*/ template(`<div data-scope=ai data-part=reasoning-content>`);
+/** The model's thought, folded by the shared collapsible in its quiet
+* register: bare ink for a trigger, the thought on one hairline. */
+function Reasoning(props) {
+	const [own, rest] = splitProps(props, ["label", "children"]);
+	return createComponent(Collapsible.Root, mergeProps(rest, {
+		"data-ai": "reasoning",
 		get children() {
-			var _el$3 = _tmpl$2$5();
-			spread(_el$3, mergeProps(rest, {
-				get role() {
-					return status() === "ink" || status() === "info" ? "status" : "alert";
-				},
-				"data-scope": "alert",
-				"data-part": "root",
-				get ["data-status"]() {
-					return status();
+			return [createComponent(Collapsible.Trigger, { get children() {
+				return [(() => {
+					var _el$ = _tmpl$$53();
+					insert(_el$, () => own.label ?? "Thinking");
+					return _el$;
+				})(), createComponent(Collapsible.Indicator, { get children() {
+					return chevron$2();
+				} })];
+			} }), createComponent(Collapsible.Content, { get children() {
+				var _el$2 = _tmpl$2$27();
+				insert(_el$2, () => own.children);
+				return _el$2;
+			} })];
+		}
+	}));
+}
+injectComponentStyle("ai");
+//#endregion
+//#region src/components/ai-response/index.tsx
+var _tmpl$$52 = /*#__PURE__*/ template(`<div>`);
+/** Markdown set on the paper. Rendering goes through
+* `@tanstack/markdown`, whose defaults leave raw HTML and executable
+* links inert — streaming-safe by construction. */
+function Response(props) {
+	const [own, rest] = splitProps(props, ["content", "highlighter"]);
+	const html = createMemo(() => renderHtml(own.content, own.highlighter ? { highlighter: own.highlighter } : void 0));
+	return (() => {
+		var _el$ = _tmpl$$52();
+		spread(_el$, mergeProps(rest, {
+			"data-scope": "ai",
+			"data-part": "response",
+			get innerHTML() {
+				return html();
+			}
+		}), false, false);
+		return _el$;
+	})();
+}
+injectComponentStyle("ai");
+//#endregion
+//#region src/components/ai-source/index.tsx
+var _tmpl$$51 = /*#__PURE__*/ template(`<li data-scope=ai data-part=source><a>`);
+var _tmpl$2$26 = /*#__PURE__*/ template(`<ol>`);
+/** One place the ink came from; href and the rest ride the anchor. */
+function Source(props) {
+	const [own, rest] = splitProps(props, ["href", "children"]);
+	return (() => {
+		var _el$ = _tmpl$$51(), _el$2 = _el$.firstChild;
+		spread(_el$2, mergeProps(rest, {
+			get href() {
+				return own.href;
+			},
+			"target": "_blank",
+			"rel": "noreferrer"
+		}), false, true);
+		insert(_el$2, () => own.children ?? own.href);
+		return _el$;
+	})();
+}
+/** The reading list under a response: where this ink came from. */
+function Sources(props) {
+	return (() => {
+		var _el$3 = _tmpl$2$26();
+		spread(_el$3, mergeProps(props, {
+			"data-scope": "ai",
+			"data-part": "sources"
+		}), false, false);
+		return _el$3;
+	})();
+}
+injectComponentStyle("ai");
+//#endregion
+//#region src/components/ai-suggestion/index.tsx
+/** A seal-cut button proposing the next stroke; selection hands back
+* the prompt. The shared Button in its outline register. */
+function Suggestion(props) {
+	const [own, rest] = splitProps(props, ["prompt", "onSelect"]);
+	return createComponent(Button, mergeProps({
+		variant: "outline",
+		size: "sm"
+	}, rest, {
+		onClick: () => own.onSelect?.(own.prompt),
+		get children() {
+			return own.prompt;
+		}
+	}));
+}
+injectComponentStyle("ai");
+//#endregion
+//#region src/components/ai-tool/index.tsx
+var _tmpl$$50 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$2$25 = /*#__PURE__*/ template(`<span data-scope=ai data-part=tool-status>`);
+var _tmpl$3$17 = /*#__PURE__*/ template(`<span data-scope=ai data-part=tool-label>Input`);
+var _tmpl$4$12 = /*#__PURE__*/ template(`<pre>`);
+var _tmpl$5$9 = /*#__PURE__*/ template(`<span data-scope=ai data-part=tool-label>Output`);
+var _tmpl$6$6 = /*#__PURE__*/ template(`<div data-scope=ai data-part=tool-body>`);
+/** A tool call: the shared collapsible as the vessel — the name it was
+* reached by and the state it reached in on the trigger, its input and
+* output folded inside. */
+function Tool(props) {
+	const [own, rest] = splitProps(props, [
+		"name",
+		"label",
+		"status",
+		"input",
+		"output"
+	]);
+	return createComponent(Collapsible.Root, mergeProps(rest, { "data-ai": "tool" }, () => own.status ? { "data-status": own.status } : {}, { get children() {
+		return [createComponent(Collapsible.Trigger, { get children() {
+			return [
+				(() => {
+					var _el$ = _tmpl$$50();
+					insert(_el$, () => own.label ?? own.name);
+					return _el$;
+				})(),
+				createComponent(Show, {
+					get when() {
+						return own.status;
+					},
+					get children() {
+						var _el$2 = _tmpl$2$25();
+						insert(_el$2, () => own.status.charAt(0).toUpperCase() + own.status.slice(1));
+						return _el$2;
+					}
+				}),
+				createComponent(Collapsible.Indicator, { get children() {
+					return chevron$2();
+				} })
+			];
+		} }), createComponent(Collapsible.Content, { get children() {
+			var _el$3 = _tmpl$6$6();
+			insert(_el$3, createComponent(Show, {
+				get when() {
+					return own.input !== void 0;
+				},
+				get children() {
+					return [_tmpl$3$17(), (() => {
+						var _el$5 = _tmpl$4$12();
+						insert(_el$5, () => own.input);
+						return _el$5;
+					})()];
+				}
+			}), null);
+			insert(_el$3, createComponent(Show, {
+				get when() {
+					return own.output !== void 0;
+				},
+				get children() {
+					return [_tmpl$5$9(), (() => {
+						var _el$7 = _tmpl$4$12();
+						insert(_el$7, () => own.output);
+						return _el$7;
+					})()];
+				}
+			}), null);
+			return _el$3;
+		} })];
+	} }));
+}
+injectComponentStyle("ai");
+//#endregion
+//#region src/components/ai/index.tsx
+var _tmpl$$49 = /*#__PURE__*/ template(`<div>`);
+/** A conversation column: Root is the log, Message carries a role, and
+* the speaking parts — Response, Reasoning, Tool, Sources — part the
+* stream. The interactive folds are the shared Collapsible wearing a
+* `data-ai` marker, so the machine work is never ours. Parts stay
+* agnostic of any client; consumers map their message format (e.g. the
+* `UIMessage` parts re-exported here) onto these primitives. */
+function part$11(name, extra = {}) {
+	function Component(props) {
+		return (() => {
+			var _el$ = _tmpl$$49();
+			spread(_el$, mergeProps(extra, props, {
+				"data-scope": "ai",
+				get ["data-part"]() {
+					return name.toLowerCase();
+				}
+			}), false, false);
+			return _el$;
+		})();
+	}
+	return Component;
+}
+/** The log itself: the column every stroke lands in, a landmark to
+* screen readers. */
+const AiConversation = part$11("Conversation", {
+	role: "log",
+	"aria-label": "Conversation"
+});
+/** The bubble's inner measure — content that belongs to neither side
+* specifically. */
+const AiContent = part$11("Content");
+/** The quiet row under a message — copy, retry, feedback. */
+const AiActions = part$11("Actions");
+/** The while-it-works whisper for the in-flight turns. */
+const AiLoader = part$11("Loader", {
+	role: "status",
+	"aria-label": "Loading"
+});
+/** The whole family under one handle — `Ai.Conversation`,
+* `Ai.MessageContent`, and the rest. */
+const Ai = Object.assign(AiConversation, {
+	Conversation: AiConversation,
+	MessageContent: AiContent,
+	Actions: AiActions,
+	Loader: AiLoader,
+	Message,
+	Response,
+	Reasoning,
+	Tool,
+	Sources,
+	Source,
+	Action,
+	Suggestion,
+	PromptInput
+});
+injectComponentStyle("ai");
+//#endregion
+//#region src/components/ai-attachments/index.tsx
+var _tmpl$$48 = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"aria-hidden=true fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=square><rect x=2.5 y=3.5 width=11 height=9></rect><path d="M2.5 10.5 6 7l3 3 2-1.5 2.5 2"></path><circle cx=6 cy=6 r=0.75 fill=currentColor stroke=none>`);
+var _tmpl$2$24 = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"aria-hidden=true fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=square><path d="M4 2.5h5l3 3V13.5H4z"></path><path d="M9 2.5v3h3">`);
+var _tmpl$3$16 = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"width=12 height=12 aria-hidden=true fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=square><path d="M4 4l8 8M12 4l-8 8">`);
+var _tmpl$4$11 = /*#__PURE__*/ template(`<span><span></span><button type=button data-remove>`);
+var _tmpl$5$8 = /*#__PURE__*/ template(`<span>`);
+function imageGlyph() {
+	return _tmpl$$48();
+}
+function fileGlyph() {
+	return _tmpl$2$24();
+}
+function removeGlyph() {
+	return _tmpl$3$16();
+}
+const IMAGE_EXTS = [
+	"png",
+	"jpg",
+	"jpeg",
+	"gif",
+	"webp",
+	"svg",
+	"avif",
+	"bmp",
+	"ico"
+];
+const isImage = (name) => IMAGE_EXTS.includes(name.split(".").pop()?.toLowerCase() ?? "");
+const humanSize = (bytes) => {
+	if (bytes < 1024) return `${bytes} B`;
+	const units = [
+		"KB",
+		"MB",
+		"GB"
+	];
+	let value = bytes;
+	let unit = -1;
+	do {
+		value /= 1024;
+		unit += 1;
+	} while (value >= 1024 && unit < units.length - 1);
+	return `${value.toFixed(1)} ${units[unit]}`;
+};
+/** One file riding the prompt: its glyph by extension, its name and
+* human size, and a quiet way to take it back off. Uploading reads as
+* a dashed ghost, error as danger ink. */
+function Attachment(props) {
+	const [own, rest] = splitProps(props, [
+		"name",
+		"size",
+		"status",
+		"onRemove"
+	]);
+	return (() => {
+		var _el$4 = _tmpl$4$11(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
+		spread(_el$4, mergeProps(rest, {
+			"data-scope": "ai",
+			"data-part": "attachment",
+			get ["data-status"]() {
+				return own.status ?? "ready";
+			}
+		}), false, true);
+		insert(_el$4, (() => {
+			var _c$ = memo(() => !!isImage(own.name));
+			return () => _c$() ? imageGlyph() : fileGlyph();
+		})(), _el$5);
+		insert(_el$5, () => own.name);
+		insert(_el$4, (() => {
+			var _c$2 = memo(() => own.size !== void 0);
+			return () => _c$2() ? (() => {
+				var _el$7 = _tmpl$5$8();
+				insert(_el$7, () => humanSize(own.size));
+				return _el$7;
+			})() : null;
+		})(), _el$6);
+		_el$6.$$click = () => own.onRemove?.();
+		insert(_el$6, removeGlyph);
+		effect(() => setAttribute(_el$6, "aria-label", `Remove ${own.name}`));
+		return _el$4;
+	})();
+}
+/** The row the files ride in — a wrapping line of chips. */
+function Attachments(props) {
+	return (() => {
+		var _el$8 = _tmpl$5$8();
+		spread(_el$8, mergeProps(props, {
+			"data-scope": "ai",
+			"data-part": "attachments"
+		}), false, false);
+		return _el$8;
+	})();
+}
+injectComponentStyle("ai");
+delegateEvents(["click"]);
+//#endregion
+//#region src/components/alert/index.tsx
+var _tmpl$$47 = /*#__PURE__*/ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path>`);
+var _tmpl$2$23 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$3$15 = /*#__PURE__*/ template(`<span data-scope=alert data-part=icon>`);
+var _tmpl$4$10 = /*#__PURE__*/ template(`<p>`);
+const StatusContext = createContext(() => "ink");
+function glyph(status) {
+	const paths = {
+		info: "M12 8v5m0 3v.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z",
+		success: "m4 12.5 5 5L20 6.5",
+		warning: "M12 4 2.5 20h19L12 4Zm0 6v4m0 3v.01",
+		danger: "M6 6l12 12M18 6 6 18",
+		ink: "M12 8v5m0 3v.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z"
+	};
+	return (() => {
+		var _el$ = _tmpl$$47(), _el$2 = _el$.firstChild;
+		effect(() => setAttribute(_el$2, "d", paths[status]));
+		return _el$;
+	})();
+}
+function AlertRoot(props) {
+	const [own, rest] = splitProps(props, ["status"]);
+	const status = () => own.status ?? "ink";
+	return createComponent(StatusContext.Provider, {
+		value: status,
+		get children() {
+			var _el$3 = _tmpl$2$23();
+			spread(_el$3, mergeProps(rest, {
+				get role() {
+					return status() === "ink" || status() === "info" ? "status" : "alert";
+				},
+				"data-scope": "alert",
+				"data-part": "root",
+				get ["data-status"]() {
+					return status();
 				}
 			}), false, false);
 			return _el$3;
 		}
 	});
 }
-function Icon$1() {
+function Icon$2() {
 	const status = useContext(StatusContext);
 	return (() => {
-		var _el$4 = _tmpl$3$4();
+		var _el$4 = _tmpl$3$15();
 		insert(_el$4, () => glyph(status()));
 		return _el$4;
 	})();
 }
 function Body$2(props) {
 	return (() => {
-		var _el$5 = _tmpl$2$5();
+		var _el$5 = _tmpl$2$23();
 		spread(_el$5, mergeProps(props, {
 			"data-scope": "alert",
 			"data-part": "body"
@@ -468,7 +727,7 @@ function Body$2(props) {
 }
 function Title$4(props) {
 	return (() => {
-		var _el$6 = _tmpl$4$1();
+		var _el$6 = _tmpl$4$10();
 		spread(_el$6, mergeProps(props, {
 			"data-scope": "alert",
 			"data-part": "title"
@@ -478,7 +737,7 @@ function Title$4(props) {
 }
 function Description$5(props) {
 	return (() => {
-		var _el$7 = _tmpl$4$1();
+		var _el$7 = _tmpl$4$10();
 		spread(_el$7, mergeProps(props, {
 			"data-scope": "alert",
 			"data-part": "description"
@@ -488,7 +747,7 @@ function Description$5(props) {
 }
 const Alert = Object.assign(AlertRoot, {
 	Root: AlertRoot,
-	Icon: Icon$1,
+	Icon: Icon$2,
 	Body: Body$2,
 	Title: Title$4,
 	Description: Description$5
@@ -503,6 +762,92 @@ injectComponentStyle("alert");
 const AngleSlider = AngleSlider$1;
 injectComponentStyle("angle-slider");
 //#endregion
+//#region src/components/aspect-ratio/index.tsx
+var _tmpl$$46 = /*#__PURE__*/ template(`<div>`);
+function AspectRatio(props) {
+	const [own, rest] = splitProps(props, ["ratio"]);
+	return (() => {
+		var _el$ = _tmpl$$46();
+		spread(_el$, mergeProps(rest, {
+			get style() {
+				return {
+					...rest.style,
+					"--bs-aspect-ratio": own.ratio ?? "1 / 1"
+				};
+			},
+			"data-scope": "aspect-ratio",
+			"data-part": "root"
+		}), false, false);
+		return _el$;
+	})();
+}
+injectComponentStyle("aspect-ratio");
+//#endregion
+//#region src/components/autocomplete/index.tsx
+/**
+* Free text with suggestions: the reader types anything, the list
+* narrows to help, and both a pick and a custom value end up in the
+* same `value`. A preset of the combobox machinery — same parts,
+* same styling, one job. `items` seeds the suggestion list once;
+* matching is a case-insensitive substring unless `filter` says
+* otherwise.
+*/
+function AutoComplete(props) {
+	const [own, rest] = splitProps(props, [
+		"value",
+		"items",
+		"placeholder",
+		"filter",
+		"onValueChange"
+	]);
+	const { collection, filter } = useListCollection$1({
+		initialItems: own.items ?? [],
+		filter: (item, input) => own.filter ? own.filter(item, input) : item.toLowerCase().includes(input.toLowerCase())
+	});
+	return createComponent(Combobox$1.Root, mergeProps(rest, {
+		get collection() {
+			return collection();
+		},
+		get inputValue() {
+			return own.value;
+		},
+		allowCustomValue: true,
+		onValueChange: (details) => {
+			const [first] = details.value;
+			if (first != null) own.onValueChange?.(first);
+		},
+		onInputValueChange: (details) => {
+			filter(details.inputValue);
+			own.onValueChange?.(details.inputValue);
+		},
+		positioning: { sameWidth: true },
+		get children() {
+			return [createComponent(Combobox$1.Control, { get children() {
+				return createComponent(Combobox$1.Input, { get placeholder() {
+					return own.placeholder;
+				} });
+			} }), createComponent(Portal, { get children() {
+				return createComponent(Combobox$1.Positioner, { get children() {
+					return createComponent(Combobox$1.Content, { get children() {
+						return [createComponent(Combobox$1.Empty, { children: "No matches" }), createComponent(For, {
+							get each() {
+								return collection().items;
+							},
+							children: (item) => createComponent(Combobox$1.Item, {
+								item,
+								get children() {
+									return createComponent(Combobox$1.ItemText, { children: item });
+								}
+							})
+						})];
+					} });
+				} });
+			} })];
+		}
+	}));
+}
+injectComponentStyle("combobox");
+//#endregion
 //#region src/components/avatar/index.ts
 /** Ark's Avatar, dressed in the paper-and-ink system: a circular seal on
 * inset paper that holds initials until the image loads over them. The
@@ -511,10 +856,10 @@ const Avatar = Avatar$1;
 injectComponentStyle("avatar");
 //#endregion
 //#region src/components/avatar-group/index.tsx
-var _tmpl$$15 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$$45 = /*#__PURE__*/ template(`<div>`);
 function AvatarGroup(props) {
 	return (() => {
-		var _el$ = _tmpl$$15();
+		var _el$ = _tmpl$$45();
 		spread(_el$, mergeProps(props, {
 			"data-scope": "avatar-group",
 			"data-part": "root"
@@ -524,12 +869,68 @@ function AvatarGroup(props) {
 }
 injectComponentStyle("avatar-group");
 //#endregion
+//#region src/components/back-top/index.tsx
+var _tmpl$$44 = /*#__PURE__*/ template(`<div data-scope=back-top data-part=root>`);
+var _tmpl$2$22 = /*#__PURE__*/ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m6 14 6-6 6 6">`);
+/**
+* A way home: after the page has scrolled past `threshold`, a small
+* floating control rises at the page's corner and returns the reader to
+* the top. The scroll itself stays native — `window.scrollTo` defers to
+* the stylesheet's `scroll-behavior: smooth`, which reduced motion turns
+* back into an instant jump. The button stays mounted either way so the
+* entrance is a transition, never a pop.
+*
+* The control itself is the shared `Button` (outline, square) — the
+* paper, hairline and halo are its; this family owns only the floating
+* and the entrance.
+*/
+function BackTop(props) {
+	const [own, rest] = splitProps(props, ["threshold", "label"]);
+	const [visible, setVisible] = createSignal(false);
+	const onScroll = () => {
+		setVisible(window.scrollY > (own.threshold ?? 400));
+	};
+	onMount(() => {
+		onScroll();
+		window.addEventListener("scroll", onScroll, { passive: true });
+	});
+	onCleanup(() => window.removeEventListener("scroll", onScroll));
+	return (() => {
+		var _el$ = _tmpl$$44();
+		insert(_el$, createComponent(Button, mergeProps(rest, {
+			variant: "outline",
+			square: true,
+			size: "lg",
+			get ["aria-label"]() {
+				return own.label ?? "Back to top";
+			},
+			get ["aria-hidden"]() {
+				return visible() ? void 0 : "true";
+			},
+			get tabindex() {
+				return visible() ? 0 : -1;
+			},
+			onClick: () => window.scrollTo({ top: 0 }),
+			get children() {
+				return rest.children ?? chevronUp();
+			}
+		})));
+		effect(() => setAttribute(_el$, "data-state", visible() ? "shown" : "hidden"));
+		return _el$;
+	})();
+}
+/** The single glyph a way-home control needs: one stroke pointing up. */
+function chevronUp() {
+	return _tmpl$2$22();
+}
+injectComponentStyle("back-top");
+//#endregion
 //#region src/components/badge/index.tsx
-var _tmpl$$14 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$$43 = /*#__PURE__*/ template(`<span>`);
 function Badge(props) {
-	const [own, rest] = splitProps$1(props, ["tone", "variant"]);
+	const [own, rest] = splitProps(props, ["tone", "variant"]);
 	return (() => {
-		var _el$ = _tmpl$$14();
+		var _el$ = _tmpl$$43();
 		spread(_el$, mergeProps(rest, {
 			"data-scope": "badge",
 			"data-part": "root",
@@ -546,18 +947,17 @@ function Badge(props) {
 injectComponentStyle("badge");
 //#endregion
 //#region src/components/banner/index.tsx
-var _tmpl$$13 = /*#__PURE__*/ template(`<div>`);
-var _tmpl$2$4 = /*#__PURE__*/ template(`<tag>`);
-var _tmpl$3$3 = /*#__PURE__*/ template(`<button><svg viewBox="0 0 16 16"fill=none aria-hidden=true><path d="M4 4l8 8M12 4l-8 8"stroke=currentColor stroke-width=1.5 stroke-linecap=round>`);
+var _tmpl$$42 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2$21 = /*#__PURE__*/ template(`<button><svg viewBox="0 0 16 16"fill=none aria-hidden=true><path d="M4 4l8 8M12 4l-8 8"stroke=currentColor stroke-width=1.5 stroke-linecap=round>`);
 /** A page-level notice, spoken across the full measure: a wash of the
 * status pigment, one heavier hairline on the leading edge, and room
 * for actions and a quiet close. Ink is the neutral register; the four
 * semantic pigments are fixed. */
-function Root$7(props) {
-	const [own, rest] = splitProps$1(props, ["status"]);
+function Root$9(props) {
+	const [own, rest] = splitProps(props, ["status"]);
 	const status = own.status ?? "ink";
 	return (() => {
-		var _el$ = _tmpl$$13();
+		var _el$ = _tmpl$$42();
 		spread(_el$, mergeProps(rest, {
 			"role": status === "ink" ? void 0 : "status",
 			"data-scope": "banner",
@@ -567,33 +967,29 @@ function Root$7(props) {
 		return _el$;
 	})();
 }
-function part$8(name, tag) {
+function part$10(name, tag) {
 	function Component(props) {
-		return (() => {
-			var _el$2 = _tmpl$2$4();
-			spread(_el$2, mergeProps(props, {
-				"data-scope": "banner",
-				get ["data-part"]() {
-					return name.toLowerCase();
-				}
-			}), false, false);
-			return _el$2;
-		})();
+		return createComponent(tag, mergeProps(props, {
+			"data-scope": "banner",
+			get ["data-part"]() {
+				return name.toLowerCase();
+			}
+		}));
 	}
 	return Component;
 }
-const Icon = part$8("Icon", "span");
-const Body$1 = part$8("Body", "div");
-const Title$3 = part$8("Title", "p");
-const Description$4 = part$8("Description", "p");
-const Actions$2 = part$8("Actions", "div");
+const Icon$1 = part$10("Icon", "span");
+const Body$1 = part$10("Body", "div");
+const Title$3 = part$10("Title", "p");
+const Description$4 = part$10("Description", "p");
+const Actions$3 = part$10("Actions", "div");
 /** The quiet close: a plain square-cut button; dismissal stays the
 * consumer's state. */
 function Close(props) {
-	const [own, rest] = splitProps$1(props, ["type"]);
+	const [own, rest] = splitProps(props, ["type"]);
 	return (() => {
-		var _el$3 = _tmpl$3$3();
-		spread(_el$3, mergeProps(rest, {
+		var _el$2 = _tmpl$2$21();
+		spread(_el$2, mergeProps(rest, {
 			get type() {
 				return own.type ?? "button";
 			},
@@ -603,26 +999,26 @@ function Close(props) {
 			"data-scope": "banner",
 			"data-part": "close"
 		}), false, true);
-		return _el$3;
+		return _el$2;
 	})();
 }
-const Banner = Object.assign(Root$7, {
-	Root: Root$7,
-	Icon,
+const Banner = Object.assign(Root$9, {
+	Root: Root$9,
+	Icon: Icon$1,
 	Body: Body$1,
 	Title: Title$3,
 	Description: Description$4,
-	Actions: Actions$2,
+	Actions: Actions$3,
 	Close
 });
 injectComponentStyle("banner");
 //#endregion
 //#region src/components/breadcrumb/index.tsx
-var _tmpl$$12 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$$41 = /*#__PURE__*/ template(`<span>`);
 /** A trail of waymarks: Root wraps the nav, List the ordered trail, and
 * each Item carries a Link — or the Current page — parted by a quiet
 * Separator. Links take href and the rest through attributes. */
-function part$7(name, tag, extra = {}) {
+function part$9(name, tag, extra = {}) {
 	return ((props) => {
 		return createComponent(tag, mergeProps(extra, props, {
 			"data-scope": "breadcrumb",
@@ -632,13 +1028,13 @@ function part$7(name, tag, extra = {}) {
 		}));
 	});
 }
-const Root$6 = part$7("Root", "nav", { "aria-label": "Breadcrumb" });
-const List = part$7("List", "ol");
-const Item$1 = part$7("Item", "li");
-const Link$1 = part$7("Link", "a");
-const Current = part$7("Current", "span", { "aria-current": "page" });
+const Root$8 = part$9("Root", "nav", { "aria-label": "Breadcrumb" });
+const List$1 = part$9("List", "ol");
+const Item$3 = part$9("Item", "li");
+const Link$1 = part$9("Link", "a");
+const Current = part$9("Current", "span", { "aria-current": "page" });
 const Separator$1 = (props) => (() => {
-	var _el$ = _tmpl$$12();
+	var _el$ = _tmpl$$41();
 	spread(_el$, mergeProps(() => mergeProps$1({ children: "/" }, props), {
 		"aria-hidden": "true",
 		"data-scope": "breadcrumb",
@@ -646,23 +1042,59 @@ const Separator$1 = (props) => (() => {
 	}), false, false);
 	return _el$;
 })();
-const Breadcrumb = Object.assign(Root$6, {
-	Root: Root$6,
-	List,
-	Item: Item$1,
+const Breadcrumb = Object.assign(Root$8, {
+	Root: Root$8,
+	List: List$1,
+	Item: Item$3,
 	Link: Link$1,
 	Current,
 	Separator: Separator$1
 });
 injectComponentStyle("breadcrumb");
 //#endregion
+//#region src/components/button-group/index.tsx
+var _tmpl$$40 = /*#__PURE__*/ template(`<div>`);
+/**
+* Buttons fused into one control: the group owns only the joinery, so
+* members keep every variant they were given — a solid action can sit
+* beside an outline one and the seam still reads. Selection belongs to
+* the toggle group; this is layout alone.
+*/
+function ButtonGroupRoot(props) {
+	const [own, rest] = splitProps(props, [
+		"orientation",
+		"size",
+		"radius"
+	]);
+	return (() => {
+		var _el$ = _tmpl$$40();
+		spread(_el$, mergeProps(rest, {
+			"role": "group",
+			"data-scope": "button-group",
+			"data-part": "root",
+			get ["data-orientation"]() {
+				return own.orientation ?? "horizontal";
+			},
+			get ["data-size"]() {
+				return own.size;
+			},
+			get ["data-radius"]() {
+				return own.radius;
+			}
+		}), false, false);
+		return _el$;
+	})();
+}
+const ButtonGroup = Object.assign(ButtonGroupRoot, { Root: ButtonGroupRoot });
+injectComponentStyle("button-group");
+//#endregion
 //#region src/components/calendar/index.tsx
-var _tmpl$$11 = /*#__PURE__*/ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 aria-hidden=true><path d="m9 5 7 7-7 7">`);
-var _tmpl$2$3 = /*#__PURE__*/ template(`<div data-scope=calendar data-part=header>`);
-var _tmpl$3$2 = /*#__PURE__*/ template(`<div>`);
-function chevron(dir) {
+var _tmpl$$39 = /*#__PURE__*/ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 aria-hidden=true><path d="m9 5 7 7-7 7">`);
+var _tmpl$2$20 = /*#__PURE__*/ template(`<div data-scope=calendar data-part=header>`);
+var _tmpl$3$14 = /*#__PURE__*/ template(`<div>`);
+function chevron$1(dir) {
 	return (() => {
-		var _el$ = _tmpl$$11();
+		var _el$ = _tmpl$$39();
 		effect((_$p) => style(_el$, dir === "left" ? { transform: "rotate(180deg)" } : void 0, _$p));
 		return _el$;
 	})();
@@ -680,35 +1112,36 @@ function Calendar(props) {
 		"onValueChange"
 	]);
 	const title = (dp) => {
-		const d = dp.focusedValue;
+		const api = dp();
+		const d = api.focusedValue;
 		if (!d) return "";
-		if (dp.view === "day") return dp.format(d, {
+		if (api.view === "day") return api.format(d, {
 			month: "long",
 			year: "numeric"
 		});
-		if (dp.view === "month") return dp.format(d, { year: "numeric" });
+		if (api.view === "month") return api.format(d, { year: "numeric" });
 		const decade = Math.floor(d.year / 10) * 10;
 		return `${decade} - ${decade + 9}`;
 	};
 	const header = () => (() => {
-		var _el$2 = _tmpl$2$3();
+		var _el$2 = _tmpl$2$20();
 		insert(_el$2, createComponent(DatePicker$1.ViewControl, { get children() {
 			return [
 				createComponent(DatePicker$1.PrevTrigger, { get children() {
-					return chevron("left");
+					return chevron$1("left");
 				} }),
 				createComponent(DatePicker$1.Context, { children: (dp) => createComponent(DatePicker$1.ViewTrigger, { get children() {
 					return title(dp);
 				} }) }),
 				createComponent(DatePicker$1.NextTrigger, { get children() {
-					return chevron("right");
+					return chevron$1("right");
 				} })
 			];
 		} }));
 		return _el$2;
 	})();
 	return (() => {
-		var _el$3 = _tmpl$3$2();
+		var _el$3 = _tmpl$3$14();
 		spread(_el$3, mergeProps(rest, {
 			"data-scope": "calendar",
 			"data-part": "root"
@@ -729,9 +1162,9 @@ function Calendar(props) {
 									return createComponent(DatePicker$1.TableRow, { get children() {
 										return createComponent(DatePicker$1.Context, { children: (dp) => createComponent(For, {
 											get each() {
-												return dp.weekDays;
+												return dp().weekDays;
 											},
-											children: (day, id) => createComponent(DatePicker$1.TableHeader, {
+											children: (day) => createComponent(DatePicker$1.TableHeader, {
 												get ["aria-label"]() {
 													return day.long;
 												},
@@ -744,12 +1177,12 @@ function Calendar(props) {
 								} }), createComponent(DatePicker$1.TableBody, { get children() {
 									return createComponent(DatePicker$1.Context, { children: (dp) => createComponent(For, {
 										get each() {
-											return dp.weeks;
+											return dp().weeks;
 										},
-										children: (week, id) => createComponent(DatePicker$1.TableRow, { get children() {
+										children: (week) => createComponent(DatePicker$1.TableRow, { get children() {
 											return createComponent(For, {
 												each: week,
-												children: (day, id2) => createComponent(DatePicker$1.TableCell, {
+												children: (day) => createComponent(DatePicker$1.TableCell, {
 													value: day,
 													get children() {
 														return createComponent(DatePicker$1.TableCellTrigger, { get children() {
@@ -773,12 +1206,12 @@ function Calendar(props) {
 									return createComponent(DatePicker$1.TableBody, { get children() {
 										return createComponent(DatePicker$1.Context, { children: (dp) => createComponent(For, {
 											get each() {
-												return dp.getMonthsGrid({ columns: 3 });
+												return dp().getMonthsGrid({ columns: 3 });
 											},
-											children: (months, id) => createComponent(DatePicker$1.TableRow, { get children() {
+											children: (months) => createComponent(DatePicker$1.TableRow, { get children() {
 												return createComponent(For, {
 													each: months,
-													children: (month, id2) => createComponent(DatePicker$1.TableCell, {
+													children: (month) => createComponent(DatePicker$1.TableCell, {
 														get value() {
 															return month.value;
 														},
@@ -806,12 +1239,12 @@ function Calendar(props) {
 									return createComponent(DatePicker$1.TableBody, { get children() {
 										return createComponent(DatePicker$1.Context, { children: (dp) => createComponent(For, {
 											get each() {
-												return dp.getYearsGrid({ columns: 3 });
+												return dp().getYearsGrid({ columns: 3 });
 											},
-											children: (years, id) => createComponent(DatePicker$1.TableRow, { get children() {
+											children: (years) => createComponent(DatePicker$1.TableRow, { get children() {
 												return createComponent(For, {
 													each: years,
-													children: (year, id2) => createComponent(DatePicker$1.TableCell, {
+													children: (year) => createComponent(DatePicker$1.TableCell, {
 														get value() {
 															return year.value;
 														},
@@ -845,12 +1278,13 @@ function Calendar(props) {
 	})();
 }
 injectComponentStyle("calendar");
+injectComponentStyle("date-picker");
 //#endregion
 //#region src/components/card/index.tsx
 /** A vessel: round, resting at the first elevation, one hairline for its
 * edge. Root, Header, Title, Description, Content, Footer — sections
 * carry their own whitespace, so any subset composes. */
-function part$6(name, tag) {
+function part$8(name, tag) {
 	return ((props) => {
 		return createComponent(tag, mergeProps(props, {
 			"data-scope": "card",
@@ -860,18 +1294,18 @@ function part$6(name, tag) {
 		}));
 	});
 }
-const Root$5 = part$6("Root", "section");
-const Header = part$6("Header", "header");
-const Title$2 = part$6("Title", "h3");
-const Description$3 = part$6("Description", "p");
-const Content$1 = part$6("Content", "div");
-const Footer = part$6("Footer", "footer");
-const Card = Object.assign(Root$5, {
-	Root: Root$5,
+const Root$7 = part$8("Root", "section");
+const Header = part$8("Header", "header");
+const Title$2 = part$8("Title", "h3");
+const Description$3 = part$8("Description", "p");
+const Content$2 = part$8("Content", "div");
+const Footer = part$8("Footer", "footer");
+const Card = Object.assign(Root$7, {
+	Root: Root$7,
 	Header,
 	Title: Title$2,
 	Description: Description$3,
-	Content: Content$1,
+	Content: Content$2,
 	Footer
 });
 injectComponentStyle("card");
@@ -885,6 +1319,158 @@ injectComponentStyle("card");
 const Carousel = Carousel$1;
 injectComponentStyle("carousel");
 //#endregion
+//#region src/components/cascade-select/index.tsx
+var _tmpl$$38 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m6 9 6 6 6-6">`);
+var _tmpl$2$19 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m9 18 6-6-6-6">`);
+var _tmpl$3$13 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m5 12.5 5 5L19 7">`);
+var _tmpl$4$9 = /*#__PURE__*/ template(`<ul>`);
+var _tmpl$5$7 = /*#__PURE__*/ template(`<span data-part=branch-indicator aria-hidden=true>`);
+var _tmpl$6$5 = /*#__PURE__*/ template(`<li><span></span><span>`);
+var _tmpl$7$2 = /*#__PURE__*/ template(`<div><div>`);
+var _tmpl$8$2 = /*#__PURE__*/ template(`<div><div><button><span></span><span>`);
+function chevronDown$1() {
+	return _tmpl$$38();
+}
+function chevronRight() {
+	return _tmpl$2$19();
+}
+function checkGlyph$2() {
+	return _tmpl$3$13();
+}
+/**
+* A corridor of linked columns: pick a branch and the next column
+* dissolves open beside it, until a leaf click settles the whole path.
+* `value` is the selected path (or paths, when `multiple`) — the
+* joined labels ride the trigger. `highlightTrigger: "hover"` turns the
+* classic cascading menu: pointing is enough to unfold.
+*/
+function CascadeSelect(props) {
+	const [own, rest] = splitProps(props, [
+		"value",
+		"data",
+		"placeholder",
+		"highlightTrigger",
+		"multiple",
+		"disabled",
+		"onValueChange"
+	]);
+	const id = createUniqueId();
+	const locale = useLocaleContext();
+	const env = useEnvironmentContext();
+	const collection = createMemo(() => cascade.collection({
+		nodeToValue: (node) => node.value,
+		nodeToString: (node) => node.label,
+		nodeToChildren: (node) => node.children ?? [],
+		rootNode: {
+			value: "ROOT",
+			label: "",
+			children: own.data
+		}
+	}));
+	const service = useMachine(cascade.machine, () => ({
+		id,
+		collection: collection(),
+		dir: locale().dir,
+		getRootNode: env().getRootNode.bind(env()),
+		disabled: own.disabled || void 0,
+		multiple: own.multiple || void 0,
+		...own.value !== void 0 ? { value: own.value } : {},
+		...own.highlightTrigger != null ? { highlightTrigger: own.highlightTrigger } : {},
+		onValueChange(details) {
+			own.onValueChange?.(details.value);
+		}
+	}));
+	const api = createMemo(() => cascade.connect(service, normalizeProps));
+	/** The machine's `valueAsString` only updates through its select
+	* event, so an externally-set `value` would render the
+	* placeholder forever — resolve the labels from the data instead. */
+	function labelsFor(path) {
+		const out = [];
+		let nodes = own.data;
+		for (const value of path) {
+			const node = nodes?.find((n) => n.value === value);
+			if (!node) return null;
+			out.push(node.label);
+			nodes = node.children;
+		}
+		return out;
+	}
+	const display = () => {
+		const parts = (own.value ?? []).map((path) => labelsFor(path)?.join(" / ")).filter((label) => label != null);
+		return parts.length > 0 ? parts.join(", ") : null;
+	};
+	/** One column per walk of the highlighted path — the list binds to
+	* the node, the next column hangs off its highlighted child. */
+	function renderColumn(node, indexPath, valuePath) {
+		const nodeProps = {
+			item: node,
+			indexPath,
+			value: valuePath
+		};
+		const nodeState = () => api().getItemState(nodeProps);
+		const children = collection().getNodeChildren(node);
+		const list = (() => {
+			var _el$4 = _tmpl$4$9();
+			spread(_el$4, mergeProps(() => mergeProps$1(() => api().getListProps(nodeProps))), false, true);
+			insert(_el$4, createComponent(For, {
+				each: children,
+				children: (item, index) => {
+					const itemValue = collection().getNodeValue(item);
+					const itemProps = {
+						item,
+						indexPath: [...indexPath, index()],
+						value: [...valuePath, itemValue]
+					};
+					const itemState = () => api().getItemState(itemProps);
+					return (() => {
+						var _el$5 = _tmpl$6$5(), _el$6 = _el$5.firstChild, _el$8 = _el$6.nextSibling;
+						spread(_el$5, mergeProps(() => mergeProps$1(() => api().getItemProps(itemProps))), false, true);
+						spread(_el$6, mergeProps(() => mergeProps$1(() => api().getItemTextProps(itemProps))), false, true);
+						insert(_el$6, () => item.label);
+						insert(_el$5, createComponent(Show, {
+							get when() {
+								return itemState().hasChildren;
+							},
+							get children() {
+								var _el$7 = _tmpl$5$7();
+								insert(_el$7, chevronRight);
+								return _el$7;
+							}
+						}), _el$8);
+						spread(_el$8, mergeProps(() => mergeProps$1(() => api().getItemIndicatorProps(itemProps))), false, true);
+						insert(_el$8, checkGlyph$2);
+						return _el$5;
+					})();
+				}
+			}));
+			return _el$4;
+		})();
+		const next = nodeState().highlightedChild;
+		return [list, next != null && collection().isBranchNode(next) ? renderColumn(next, [...indexPath, nodeState().highlightedIndex], [...valuePath, collection().getNodeValue(next)]) : null];
+	}
+	return (() => {
+		var _el$9 = _tmpl$8$2(), _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling;
+		spread(_el$9, mergeProps(rest, () => mergeProps$1(() => api().getRootProps())), false, true);
+		spread(_el$0, mergeProps(() => mergeProps$1(() => api().getControlProps())), false, true);
+		spread(_el$1, mergeProps(() => mergeProps$1(() => api().getTriggerProps(), { get disabled() {
+			return own.disabled || void 0;
+		} })), false, true);
+		spread(_el$10, mergeProps(() => mergeProps$1(() => api().getValueTextProps())), false, true);
+		insert(_el$10, () => display() ?? own.placeholder ?? "Select…");
+		spread(_el$11, mergeProps(() => mergeProps$1(() => api().getIndicatorProps())), false, true);
+		insert(_el$11, chevronDown$1);
+		insert(_el$9, createComponent(Portal, { get children() {
+			var _el$12 = _tmpl$7$2(), _el$13 = _el$12.firstChild;
+			spread(_el$12, mergeProps(() => mergeProps$1(() => api().getPositionerProps())), false, true);
+			spread(_el$13, mergeProps(() => mergeProps$1(() => api().getContentProps())), false, true);
+			insert(_el$13, () => renderColumn(collection().rootNode, [], []));
+			return _el$12;
+		} }), null);
+		return _el$9;
+	})();
+}
+injectComponentStyle("cascade-select");
+//#endregion
 //#region src/components/checkbox/index.ts
 /** Ark's Checkbox, dressed in the paper-and-ink system: a square-cut seal
 * that fills flat with primary ink when ticked, the mark springing into
@@ -893,17 +1479,87 @@ injectComponentStyle("carousel");
 const Checkbox = Checkbox$1;
 injectComponentStyle("checkbox");
 //#endregion
+//#region src/components/checkbox-group/index.tsx
+var _tmpl$$37 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m5 12.5 5 5L19 7">`);
+var _tmpl$2$18 = /*#__PURE__*/ template(`<div>`);
+function checkGlyph$1() {
+	return _tmpl$$37();
+}
+/**
+* One question, many answers: a labelled stack (or row) of the seal-cut
+* checkboxes bound to a single array. Toggling a box adds or removes its
+* value; the group itself is semantics (`role="group"`), the boxes stay
+* the machine-driven originals.
+*/
+function CheckboxGroup(props) {
+	const [own, rest] = splitProps(props, [
+		"value",
+		"options",
+		"layout",
+		"disabled",
+		"onValueChange"
+	]);
+	const selected = () => new Set(own.value ?? []);
+	function toggle(value) {
+		const next = new Set(selected());
+		if (next.has(value)) next.delete(value);
+		else next.add(value);
+		own.onValueChange?.([...next]);
+	}
+	return (() => {
+		var _el$2 = _tmpl$2$18();
+		spread(_el$2, mergeProps(rest, {
+			"role": "group",
+			"data-scope": "checkbox-group",
+			"data-part": "root",
+			get ["data-layout"]() {
+				return own.layout ?? "vertical";
+			}
+		}), false, true);
+		insert(_el$2, createComponent(For, {
+			get each() {
+				return own.options;
+			},
+			children: (option) => createComponent(Checkbox$1.Root, {
+				get checked() {
+					return selected().has(option.value);
+				},
+				get disabled() {
+					return own.disabled || option.disabled === true;
+				},
+				onCheckedChange: () => toggle(option.value),
+				get children() {
+					return [
+						createComponent(Checkbox$1.Control, { get children() {
+							return createComponent(Checkbox$1.Indicator, { get children() {
+								return checkGlyph$1();
+							} });
+						} }),
+						createComponent(Checkbox$1.Label, { get children() {
+							return option.label;
+						} }),
+						createComponent(Checkbox$1.HiddenInput, {})
+					];
+				}
+			})
+		}));
+		return _el$2;
+	})();
+}
+injectComponentStyle("checkbox-group");
+injectComponentStyle("checkbox");
+//#endregion
 //#region src/components/chip/index.tsx
-var _tmpl$$10 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$$36 = /*#__PURE__*/ template(`<span>`);
 function Chip(props) {
-	const [own, rest] = splitProps$1(props, [
+	const [own, rest] = splitProps(props, [
 		"value",
 		"max",
 		"tone",
 		"variant"
 	]);
 	return (() => {
-		var _el$ = _tmpl$$10();
+		var _el$ = _tmpl$$36();
 		spread(_el$, mergeProps(rest, {
 			"data-scope": "chip",
 			"data-part": "root",
@@ -952,6 +1608,396 @@ injectComponentStyle("color-picker");
 const Combobox = Combobox$1;
 injectComponentStyle("combobox");
 //#endregion
+//#region src/components/command/index.tsx
+var _tmpl$$35 = /*#__PURE__*/ template(`<span data-scope=command data-part=item-hint>`);
+var _tmpl$2$17 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$3$12 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$4$8 = /*#__PURE__*/ template(`<input>`);
+var _tmpl$5$6 = /*#__PURE__*/ template(`<div data-scope=command data-part=empty>`);
+/** A command row: the machine's item grafted onto a vessel of our own,
+* the label riding the machine's item text. */
+function Row(props) {
+	return createComponent(Combobox$1.Item, {
+		get item() {
+			return props.entry.value;
+		},
+		asChild: (itemProps) => (() => {
+			var _el$ = _tmpl$2$17();
+			spread(_el$, mergeProps(itemProps, {
+				"data-scope": "command",
+				"data-part": "item"
+			}), false, true);
+			insert(_el$, createComponent(Combobox$1.ItemText, { asChild: (textProps) => (() => {
+				var _el$3 = _tmpl$3$12();
+				spread(_el$3, mergeProps(textProps, {
+					"data-scope": "command",
+					"data-part": "item-label"
+				}), false, true);
+				insert(_el$3, () => props.entry.label);
+				return _el$3;
+			})() }), null);
+			insert(_el$, createComponent(Show, {
+				get when() {
+					return props.entry.hint;
+				},
+				get children() {
+					var _el$2 = _tmpl$$35();
+					insert(_el$2, () => props.entry.hint);
+					return _el$2;
+				}
+			}), null);
+			return _el$;
+		})()
+	});
+}
+/**
+* The command palette: a modal sheet at the top of the page carrying a
+* search field over the caller's commands, grouped as a ledger with a
+* keycap hint at each row. The shell is the dialog machinery — scrim,
+* focus trap, Escape — and the searching is the combobox machinery
+* driving our own list: the vessel and the list live inside the sheet,
+* so the combobox renders no separate popup and the machine's content
+* grafts onto the sheet's list.
+*/
+function Command(props) {
+	const [own, rest] = splitProps(props, [
+		"items",
+		"placeholder",
+		"open",
+		"autoFilter",
+		"inputValue",
+		"emptyText",
+		"onSelect",
+		"onOpenChange",
+		"onInputValueChange"
+	]);
+	const [internalOpen, setInternalOpen] = createSignal(false);
+	const [listOpen, setListOpen] = createSignal(true);
+	let fieldText = "";
+	const { collection, set, filter } = useListCollection$1({
+		initialItems: (own.items ?? []).map((entry) => entry.value),
+		filter: (value, input) => {
+			const entry = (own.items ?? []).find((candidate) => candidate.value === value);
+			if (!entry) return false;
+			const query = input.toLowerCase();
+			return entry.label.toLowerCase().includes(query) || value.toLowerCase().includes(query);
+		}
+	});
+	createEffect(() => {
+		set((own.items ?? []).map((entry) => entry.value));
+		if (own.autoFilter ?? true) filter(fieldText);
+	});
+	const open = () => own.open ?? internalOpen();
+	const setOpen = (value) => {
+		if (own.open === void 0) setInternalOpen(value);
+		own.onOpenChange?.(value);
+	};
+	createEffect(() => {
+		if (open()) setListOpen(true);
+	});
+	const sections = () => {
+		const available = new Set(collection().items);
+		const groups = /* @__PURE__ */ new Map();
+		for (const entry of own.items ?? []) {
+			if (!available.has(entry.value)) continue;
+			const key = entry.group ?? "";
+			if (!groups.has(key)) groups.set(key, []);
+			groups.get(key).push(entry);
+		}
+		return Array.from(groups, ([group, entries]) => ({
+			group,
+			entries
+		}));
+	};
+	return createComponent(Dialog$1.Root, mergeProps(rest, {
+		get open() {
+			return open();
+		},
+		onOpenChange: (details) => setOpen(details.open),
+		get children() {
+			return createComponent(Portal, { get children() {
+				return [createComponent(Dialog$1.Backdrop, {}), createComponent(Dialog$1.Positioner, { asChild: (positionerProps) => (() => {
+					var _el$4 = _tmpl$2$17();
+					spread(_el$4, mergeProps(positionerProps, {
+						"data-scope": "command",
+						"data-part": "positioner"
+					}), false, true);
+					insert(_el$4, createComponent(Dialog$1.Content, { asChild: (contentProps) => (() => {
+						var _el$5 = _tmpl$2$17();
+						spread(_el$5, mergeProps(contentProps, {
+							"data-scope": "command",
+							"data-part": "content"
+						}), false, true);
+						insert(_el$5, createComponent(Combobox$1.Root, {
+							get collection() {
+								return collection();
+							},
+							get inputValue() {
+								return own.inputValue;
+							},
+							get open() {
+								return listOpen();
+							},
+							onOpenChange: (details) => setListOpen(details.open),
+							inputBehavior: "autohighlight",
+							loopFocus: true,
+							onInputValueChange: (details) => {
+								fieldText = details.inputValue;
+								if (own.autoFilter ?? true) filter(details.inputValue);
+								own.onInputValueChange?.(details.inputValue);
+							},
+							onValueChange: (details) => {
+								const [first] = details.value;
+								if (first == null) return;
+								own.onSelect?.(first);
+								setOpen(false);
+							},
+							get children() {
+								return [createComponent(Combobox$1.Input, { asChild: (inputProps) => (() => {
+									var _el$6 = _tmpl$4$8();
+									spread(_el$6, mergeProps(inputProps, {
+										"type": "text",
+										get placeholder() {
+											return own.placeholder;
+										},
+										"data-scope": "command",
+										"data-part": "input"
+									}), false, false);
+									return _el$6;
+								})() }), createComponent(Combobox$1.Content, { asChild: (listProps) => (() => {
+									var _el$7 = _tmpl$2$17();
+									spread(_el$7, mergeProps(listProps, {
+										"data-scope": "command",
+										"data-part": "list"
+									}), false, true);
+									insert(_el$7, createComponent(For, {
+										get each() {
+											return sections();
+										},
+										children: (section) => createComponent(Show, {
+											get when() {
+												return section.group !== "";
+											},
+											get fallback() {
+												return createComponent(For, {
+													get each() {
+														return section.entries;
+													},
+													children: (entry) => createComponent(Row, { entry })
+												});
+											},
+											get children() {
+												return createComponent(Combobox$1.ItemGroup, { asChild: (groupProps) => (() => {
+													var _el$9 = _tmpl$2$17();
+													spread(_el$9, mergeProps(groupProps, {
+														"data-scope": "command",
+														"data-part": "group"
+													}), false, true);
+													insert(_el$9, createComponent(Combobox$1.ItemGroupLabel, { asChild: (labelProps) => (() => {
+														var _el$0 = _tmpl$2$17();
+														spread(_el$0, mergeProps(labelProps, {
+															"data-scope": "command",
+															"data-part": "group-label"
+														}), false, true);
+														insert(_el$0, () => section.group);
+														return _el$0;
+													})() }), null);
+													insert(_el$9, createComponent(For, {
+														get each() {
+															return section.entries;
+														},
+														children: (entry) => createComponent(Row, { entry })
+													}), null);
+													return _el$9;
+												})() });
+											}
+										})
+									}), null);
+									insert(_el$7, createComponent(Show, {
+										get when() {
+											return sections().length === 0;
+										},
+										get children() {
+											var _el$8 = _tmpl$5$6();
+											insert(_el$8, () => own.emptyText ?? "No matching commands");
+											return _el$8;
+										}
+									}), null);
+									return _el$7;
+								})() })];
+							}
+						}));
+						return _el$5;
+					})() }));
+					return _el$4;
+				})() })];
+			} });
+		}
+	}));
+}
+injectComponentStyle("command");
+injectComponentStyle("dialog");
+//#endregion
+//#region src/components/comment/index.tsx
+var _tmpl$$34 = /*#__PURE__*/ template(`<div data-scope=comment data-part=avatar>`);
+var _tmpl$2$16 = /*#__PURE__*/ template(`<span data-scope=comment data-part=author>`);
+var _tmpl$3$11 = /*#__PURE__*/ template(`<time data-scope=comment data-part=datetime>`);
+var _tmpl$4$7 = /*#__PURE__*/ template(`<header data-scope=comment data-part=header>`);
+var _tmpl$5$5 = /*#__PURE__*/ template(`<div data-scope=comment data-part=actions>`);
+var _tmpl$6$4 = /*#__PURE__*/ template(`<article><div data-scope=comment data-part=body><div data-scope=comment data-part=content>`);
+/**
+* A voice on the record: the portrait hangs left (the `avatar` prop),
+* the body carries the byline from `author` and `datetime`, the ink is
+* the children, and `actions` is the row of answers.
+*/
+function Comment(props) {
+	const [own, rest] = splitProps(props, [
+		"author",
+		"datetime",
+		"avatar",
+		"actions",
+		"children"
+	]);
+	return (() => {
+		var _el$ = _tmpl$6$4(), _el$3 = _el$.firstChild, _el$7 = _el$3.firstChild;
+		spread(_el$, mergeProps(rest, {
+			"data-scope": "comment",
+			"data-part": "root"
+		}), false, true);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return own.avatar;
+			},
+			get children() {
+				var _el$2 = _tmpl$$34();
+				insert(_el$2, () => own.avatar);
+				return _el$2;
+			}
+		}), _el$3);
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return own.author || own.datetime;
+			},
+			get children() {
+				var _el$4 = _tmpl$4$7();
+				insert(_el$4, createComponent(Show, {
+					get when() {
+						return own.author;
+					},
+					get children() {
+						var _el$5 = _tmpl$2$16();
+						insert(_el$5, () => own.author);
+						return _el$5;
+					}
+				}), null);
+				insert(_el$4, createComponent(Show, {
+					get when() {
+						return own.datetime;
+					},
+					get children() {
+						var _el$6 = _tmpl$3$11();
+						insert(_el$6, () => own.datetime);
+						effect(() => setAttribute(_el$6, "datetime", own.datetime));
+						return _el$6;
+					}
+				}), null);
+				return _el$4;
+			}
+		}), _el$7);
+		insert(_el$7, () => own.children);
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return own.actions;
+			},
+			get children() {
+				var _el$8 = _tmpl$5$5();
+				insert(_el$8, () => own.actions);
+				return _el$8;
+			}
+		}), null);
+		return _el$;
+	})();
+}
+injectComponentStyle("comment");
+//#endregion
+//#region src/components/config-provider/index.tsx
+var _tmpl$$33 = /*#__PURE__*/ template(`<div>`);
+/** Solid context for the provider's snapshot — a custom part reads it
+* with `useContext(ConfigContextKey)`. */
+const ConfigContextKey = createContext(() => ({}));
+/** The nearest provider's snapshot, or an empty one when no provider
+* wraps the caller — the hook the date and format families will consume
+* to localize their output. */
+function useConfig() {
+	return useContext(ConfigContextKey);
+}
+/**
+* The declarative host for global configuration: one element that both
+* carries the token layer's attributes — `[data-density]` and
+* `[data-accent]` fire on any element — and provides the same values to
+* descendants through `useConfig`, so interactive behavior (formatting,
+* messages) and visual theming stay one decision.
+*/
+function ConfigProvider(props) {
+	const [own, rest] = splitProps(props, [
+		"density",
+		"accent",
+		"dir",
+		"locale",
+		"children"
+	]);
+	return createComponent(ConfigContextKey.Provider, {
+		value: () => ({
+			density: own.density,
+			accent: own.accent,
+			dir: own.dir,
+			locale: own.locale
+		}),
+		get children() {
+			var _el$ = _tmpl$$33();
+			spread(_el$, mergeProps(rest, {
+				"data-scope": "config-provider",
+				"data-part": "root",
+				get ["data-density"]() {
+					return own.density;
+				},
+				get ["data-accent"]() {
+					return own.accent;
+				},
+				get dir() {
+					return own.dir;
+				},
+				get lang() {
+					return own.locale;
+				}
+			}), false, true);
+			insert(_el$, () => own.children);
+			return _el$;
+		}
+	});
+}
+//#endregion
+//#region src/components/container/index.tsx
+var _tmpl$$32 = /*#__PURE__*/ template(`<div>`);
+function Container(props) {
+	const [own, rest] = splitProps(props, ["size", "padding"]);
+	return (() => {
+		var _el$ = _tmpl$$32();
+		spread(_el$, mergeProps(rest, {
+			"data-scope": "container",
+			"data-part": "root",
+			get ["data-size"]() {
+				return own.size ?? "readable";
+			},
+			get ["data-padding"]() {
+				return own.padding === false ? void 0 : "";
+			}
+		}), false, false);
+		return _el$;
+	})();
+}
+injectComponentStyle("container");
+//#endregion
 //#region src/components/date-input/index.ts
 /** Ark's DateInput, dressed in the paper-and-ink system: a segmented
 * field where the focused segment takes the flat ink fill. The API is
@@ -970,6 +2016,44 @@ injectComponentStyle("date-input");
 const DatePicker = DatePicker$1;
 injectComponentStyle("date-picker");
 //#endregion
+//#region src/components/descriptions/index.tsx
+var _tmpl$$31 = /*#__PURE__*/ template(`<dl>`);
+function Root$6(props) {
+	const [own, rest] = splitProps(props, ["layout"]);
+	return (() => {
+		var _el$ = _tmpl$$31();
+		spread(_el$, mergeProps(rest, {
+			"data-scope": "descriptions",
+			"data-part": "root",
+			get ["data-layout"]() {
+				return own.layout ?? "horizontal";
+			}
+		}), false, false);
+		return _el$;
+	})();
+}
+function part$7(name, tag) {
+	function Component(props) {
+		return createComponent(tag, mergeProps(props, {
+			"data-scope": "descriptions",
+			get ["data-part"]() {
+				return name.toLowerCase();
+			}
+		}));
+	}
+	return Component;
+}
+const Item$2 = part$7("Item", "div");
+const Term = part$7("Term", "dt");
+const Detail = part$7("Detail", "dd");
+const Descriptions = Object.assign(Root$6, {
+	Root: Root$6,
+	Item: Item$2,
+	Term,
+	Detail
+});
+injectComponentStyle("descriptions");
+//#endregion
 //#region src/components/dialog/index.ts
 /** Ark's Dialog, dressed in the paper-and-ink system: the sheet dissolves
 * in on elevation, the backdrop fades, and nested overlays stack through
@@ -987,43 +2071,205 @@ injectComponentStyle("dialog");
 const Drawer = Drawer$1;
 injectComponentStyle("drawer");
 //#endregion
-//#region src/components/editable/index.ts
-/** Ark's Editable, dressed in the paper-and-ink system: bare ink while
-* reading, the full field recipe while editing. The API is Ark's own —
-* Root, Area, Label, Preview, Input, EditTrigger, SubmitTrigger,
-* CancelTrigger, Control. */
-const Editable = Editable$1;
-injectComponentStyle("editable");
-//#endregion
-//#region src/components/empty/index.tsx
-/** An empty state: the page holds its breath. Root centers the column,
-* Visual carries the mark, Title and Description carry the ink, Actions
-* the way out. Any subset composes. */
-function part$5(name, tag) {
-	return ((props) => {
-		return createComponent(tag, mergeProps(props, {
-			"data-scope": "empty",
-			get ["data-part"]() {
-				return name.toLowerCase();
-			}
-		}));
-	});
+//#region src/components/input/index.tsx
+var _tmpl$$30 = /*#__PURE__*/ template(`<input>`);
+/** The bare text input: the field recipe — border, surface, focus halo —
+* on a native control. Standing alone it styles itself from the `invalid`
+* prop; inside a `Field.Root` it consumes the field context, picking up
+* the label id, the described-by wiring and the invalid state for free,
+* which is also the seam the Form validation layer will drive. Disabled
+* rides the native attribute. */
+function Input(props) {
+	const field = useFieldContext();
+	const [own, rest] = splitProps(props, [
+		"value",
+		"size",
+		"invalid",
+		"onValueChange"
+	]);
+	return (() => {
+		var _el$ = _tmpl$$30();
+		spread(_el$, mergeProps(() => mergeProps$1(() => field?.().getInputProps() ?? {}, rest, {
+			get value() {
+				return own.value;
+			},
+			"data-scope": "input",
+			"data-part": "root",
+			get "data-size"() {
+				return own.size ?? "md";
+			},
+			get "data-invalid"() {
+				return own.invalid || field?.().getInputProps()["data-invalid"] != null ? "" : void 0;
+			},
+			onInput: (event) => own.onValueChange?.(event.currentTarget.value)
+		})), false, false);
+		return _el$;
+	})();
 }
-const Root$4 = part$5("Root", "div");
-const Visual = part$5("Visual", "div");
-const Title$1 = part$5("Title", "h3");
-const Description$2 = part$5("Description", "p");
-const Actions$1 = part$5("Actions", "div");
-const Empty = Object.assign(Root$4, {
-	Root: Root$4,
-	Visual,
-	Title: Title$1,
-	Description: Description$2,
-	Actions: Actions$1
-});
-injectComponentStyle("empty");
+injectComponentStyle("input");
 //#endregion
-//#region src/components/fieldset/index.ts
+//#region src/components/dynamic-input/index.tsx
+var _tmpl$$29 = /*#__PURE__*/ template(`<div><div data-scope=dynamic-input data-part=add>`);
+var _tmpl$2$15 = /*#__PURE__*/ template(`<div data-scope=dynamic-input data-part=row>`);
+var _tmpl$3$10 = /*#__PURE__*/ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="M18 6 6 18M6 6l12 12">`);
+/**
+* A column of entry rows: one Input per line, each with a quiet remove
+* seal, and an add row at the tail. The list is controlled — every edit
+* calls `onValueChange` with a fresh array and the caller's array stays
+* the only truth. Deleting never drops below `min`, adding never grows
+* past `max`, and the group always keeps one row: an entry list that
+* emptied itself would leave the reader no place to type.
+*/
+function DynamicInput(props) {
+	const [own, rest] = splitProps(props, [
+		"value",
+		"min",
+		"max",
+		"placeholder",
+		"addLabel",
+		"disabled",
+		"invalid",
+		"onValueChange",
+		"children"
+	]);
+	const values = () => own.value ?? [""];
+	const update = (index, value) => {
+		const next = values().slice();
+		next[index] = value;
+		own.onValueChange?.(next);
+	};
+	const remove = (index) => {
+		const next = values().filter((_, i) => i !== index);
+		own.onValueChange?.(next.length > 0 ? next : [""]);
+	};
+	const add = () => {
+		own.onValueChange?.([...values(), ""]);
+	};
+	const canRemove = () => values().length > Math.max(own.min ?? 0, 1);
+	const canAdd = () => own.max === void 0 || values().length < own.max;
+	return (() => {
+		var _el$ = _tmpl$$29(), _el$2 = _el$.firstChild;
+		spread(_el$, mergeProps(rest, {
+			"data-scope": "dynamic-input",
+			"data-part": "root"
+		}), false, true);
+		insert(_el$, createComponent(Index, {
+			get each() {
+				return values();
+			},
+			children: (value, index) => (() => {
+				var _el$3 = _tmpl$2$15();
+				insert(_el$3, createComponent(Input, {
+					get value() {
+						return value();
+					},
+					get placeholder() {
+						return own.placeholder;
+					},
+					get disabled() {
+						return own.disabled;
+					},
+					get invalid() {
+						return own.invalid;
+					},
+					onValueChange: (next) => update(index, next)
+				}), null);
+				insert(_el$3, createComponent(Button, {
+					variant: "ghost",
+					square: true,
+					get disabled() {
+						return own.disabled || !canRemove();
+					},
+					"aria-label": `Remove entry ${index + 1}`,
+					onClick: () => remove(index),
+					get children() {
+						return crossIcon();
+					}
+				}), null);
+				return _el$3;
+			})()
+		}), _el$2);
+		insert(_el$2, createComponent(Button, {
+			variant: "ghost",
+			get disabled() {
+				return own.disabled || !canAdd();
+			},
+			onClick: () => add(),
+			get children() {
+				return ["+", memo(() => own.addLabel ?? "Add entry")];
+			}
+		}));
+		return _el$;
+	})();
+}
+/** The one glyph a remove seal needs: a single crossing stroke. */
+function crossIcon() {
+	return _tmpl$3$10();
+}
+injectComponentStyle("dynamic-input");
+//#endregion
+//#region src/components/editable/index.ts
+/** Ark's Editable, dressed in the paper-and-ink system: bare ink while
+* reading, the full field recipe while editing. The API is Ark's own —
+* Root, Area, Label, Preview, Input, EditTrigger, SubmitTrigger,
+* CancelTrigger, Control. */
+const Editable = Editable$1;
+injectComponentStyle("editable");
+//#endregion
+//#region src/components/ellipsis/index.tsx
+var _tmpl$$28 = /*#__PURE__*/ template(`<span>`);
+function Ellipsis(props) {
+	const [own, rest] = splitProps(props, ["lines"]);
+	const multiline = () => (own.lines ?? 1) > 1;
+	return (() => {
+		var _el$ = _tmpl$$28();
+		spread(_el$, mergeProps(rest, {
+			get style() {
+				return {
+					...rest.style,
+					...multiline() ? { "--bs-ellipsis-lines": String(own.lines) } : {}
+				};
+			},
+			"data-scope": "ellipsis",
+			"data-part": "root",
+			get ["data-multiline"]() {
+				return multiline() ? "" : void 0;
+			}
+		}), false, false);
+		return _el$;
+	})();
+}
+injectComponentStyle("ellipsis");
+//#endregion
+//#region src/components/empty/index.tsx
+/** An empty state: the page holds its breath. Root centers the column,
+* Visual carries the mark, Title and Description carry the ink, Actions
+* the way out. Any subset composes. */
+function part$6(name, tag) {
+	return ((props) => {
+		return createComponent(tag, mergeProps(props, {
+			"data-scope": "empty",
+			get ["data-part"]() {
+				return name.toLowerCase();
+			}
+		}));
+	});
+}
+const Root$5 = part$6("Root", "div");
+const Visual = part$6("Visual", "div");
+const Title$1 = part$6("Title", "h3");
+const Description$2 = part$6("Description", "p");
+const Actions$2 = part$6("Actions", "div");
+const Empty = Object.assign(Root$5, {
+	Root: Root$5,
+	Visual,
+	Title: Title$1,
+	Description: Description$2,
+	Actions: Actions$2
+});
+injectComponentStyle("empty");
+//#endregion
+//#region src/components/fieldset/index.ts
 /** Ark's Fieldset, dressed in the paper-and-ink system: a song-serif
 * legend heading a column of fields. The API is Ark's own — Root, Legend,
 * HelperText, ErrorText. */
@@ -1040,6 +2286,118 @@ injectComponentStyle("fieldset");
 const FileUpload = FileUpload$1;
 injectComponentStyle("file-upload");
 //#endregion
+//#region src/components/float-button/index.tsx
+var _tmpl$$27 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2$14 = /*#__PURE__*/ template(`<div><span data-scope=float-button data-part=item-label aria-hidden=true>`);
+/** Solid context for {@link FloatButtonContext}, exported so a custom
+* part can read the group's state with `useContext`. */
+const FloatButtonContextKey = createContext();
+/**
+* A floating action and its fanned-out alternatives — FAB and speed
+* dial in one family. The Root moors the group at a page corner and
+* holds the openness (mirrored from `open` when controlled); the
+* Trigger flips it; each Item is a round action with its name surfacing
+* beside it while the group is open. The buttons are the shared recipe
+* (vessels here: round); this family owns only the mooring, the fan
+* and the fold.
+*/
+function FloatButtonRoot(props) {
+	const [own, rest] = splitProps(props, [
+		"open",
+		"placement",
+		"onOpenChange"
+	]);
+	const [inner, setInner] = createSignal(false);
+	const open = () => own.open ?? inner();
+	const setOpen = (value) => {
+		setInner(value);
+		own.onOpenChange?.(value);
+	};
+	const context = {
+		open,
+		toggle: () => setOpen(!open()),
+		close: () => setOpen(false)
+	};
+	return createComponent(FloatButtonContextKey.Provider, {
+		value: context,
+		get children() {
+			var _el$ = _tmpl$$27();
+			spread(_el$, mergeProps(rest, {
+				"data-scope": "float-button",
+				"data-part": "root",
+				get ["data-placement"]() {
+					return own.placement ?? "bottom-end";
+				},
+				get ["data-state"]() {
+					return open() ? "open" : "closed";
+				}
+			}), false, false);
+			return _el$;
+		}
+	});
+}
+function FloatButtonTrigger(props) {
+	const [own, rest] = splitProps(props, ["label", "children"]);
+	const context = useContext(FloatButtonContextKey);
+	return createComponent(Button, mergeProps(rest, {
+		variant: "solid",
+		square: true,
+		size: "lg",
+		onClick: () => context?.toggle(),
+		get ["aria-label"]() {
+			return own.label || "Actions";
+		},
+		get ["aria-expanded"]() {
+			return context?.open() ?? false;
+		},
+		get children() {
+			return own.children;
+		}
+	}));
+}
+function FloatButtonItem(props) {
+	const [own, rest] = splitProps(props, [
+		"label",
+		"disabled",
+		"onClick",
+		"children"
+	]);
+	const context = useContext(FloatButtonContextKey);
+	return (() => {
+		var _el$2 = _tmpl$2$14(), _el$3 = _el$2.firstChild;
+		spread(_el$2, mergeProps(rest, {
+			"data-scope": "float-button",
+			"data-part": "item"
+		}), false, true);
+		insert(_el$2, createComponent(Button, {
+			variant: "outline",
+			square: true,
+			size: "md",
+			get disabled() {
+				return own.disabled;
+			},
+			get ["aria-label"]() {
+				return own.label;
+			},
+			onClick: (event) => {
+				own.onClick?.(event);
+				context?.close();
+			},
+			get children() {
+				return own.children;
+			}
+		}), _el$3);
+		insert(_el$3, () => own.label);
+		return _el$2;
+	})();
+}
+const FloatButton = Object.assign(FloatButtonRoot, {
+	Root: FloatButtonRoot,
+	Trigger: FloatButtonTrigger,
+	Item: FloatButtonItem
+});
+injectComponentStyle("float-button");
+//#endregion
 //#region src/components/floating-panel/index.ts
 /** Ark's FloatingPanel, dressed in the paper-and-ink system: the shared
 * popup vessel let loose — a draggable, resizable sheet whose header is the
@@ -1057,6 +2415,187 @@ injectComponentStyle("floating-panel");
 * Byte, Time, RelativeTime. */
 const Format = Format$1;
 //#endregion
+//#region src/components/form/index.tsx
+var _tmpl$$26 = /*#__PURE__*/ template(`<form>`);
+var _tmpl$2$13 = /*#__PURE__*/ template(`<div>`);
+const FormContext = createContext();
+/** Walk a Standard Schema issue's path back to the dotted name the
+* matching FormField declared. */
+function issueName(issue) {
+	return (issue.path ?? []).map((segment) => typeof segment === "object" ? segment.key : segment).join(".");
+}
+/**
+* The validation scheduler: one reactive error map, a submit that
+* validates before it emits, live re-validation on the events the
+* `validateOn` prop names, and the imperative handle. The schema is any
+* Standard Schema (valibot, zod, arktype, …) — none are bundled; a
+* `validate` function composes with it for the cases schemas can't
+* express. Errors reach their field by name, through FormField.
+*/
+function Form(props) {
+	const [own, rest] = splitProps(props, [
+		"state",
+		"schema",
+		"validate",
+		"validateOn",
+		"disabled",
+		"onSubmit",
+		"onError",
+		"ref"
+	]);
+	const [errors, setErrorsMap] = createSignal(/* @__PURE__ */ new Map());
+	const provide = {
+		errors,
+		disabled: own.disabled ?? false
+	};
+	let run = 0;
+	async function runValidate() {
+		const seq = ++run;
+		const next = /* @__PURE__ */ new Map();
+		if (own.validate) for (const error of await own.validate(own.state)) next.set(error.name, error.message);
+		if (own.schema) {
+			const result = await own.schema["~standard"].validate(own.state);
+			for (const issue of result.issues ?? []) {
+				const name = issueName(issue);
+				if (!next.has(name)) next.set(name, issue.message);
+			}
+		}
+		if (seq === run) setErrorsMap(next);
+		return next;
+	}
+	function clear(name) {
+		if (!name) {
+			setErrorsMap(/* @__PURE__ */ new Map());
+			return;
+		}
+		const next = new Map(errors());
+		for (const key of next.keys()) if (typeof name === "string" ? key === name : name.test(key)) next.delete(key);
+		setErrorsMap(next);
+	}
+	function setErrors(list) {
+		setErrorsMap(new Map(list.map((error) => [error.name, error.message])));
+	}
+	function getErrors(name) {
+		const all = [...errors()].map(([entry, message]) => ({
+			name: entry,
+			message
+		}));
+		if (!name) return all;
+		return all.filter((error) => typeof name === "string" ? error.name === name : name.test(error.name));
+	}
+	const api = {
+		validate: runValidate,
+		clear,
+		setErrors,
+		getErrors,
+		errors
+	};
+	onMount(() => own.ref?.(api));
+	function handleSubmit(event) {
+		event.preventDefault();
+		runValidate().then((map) => {
+			if (map.size === 0) {
+				own.onSubmit?.(own.state);
+				return;
+			}
+			own.onError?.([...map].map(([name, message]) => ({
+				name,
+				message
+			})));
+		});
+	}
+	let timer;
+	function onDelegated(event) {
+		if (!(own.validateOn ?? [
+			"input",
+			"change",
+			"blur"
+		]).includes(event.type)) return;
+		const target = event.target;
+		if (!target || !("value" in target)) return;
+		clearTimeout(timer);
+		timer = setTimeout(() => void runValidate(), event.type === "input" ? 300 : 0);
+	}
+	const [formEl, setFormEl] = createSignal(null);
+	onMount(() => {
+		formEl()?.addEventListener("blur", onDelegated, true);
+		onCleanup(() => formEl()?.removeEventListener("blur", onDelegated, true));
+	});
+	return createComponent(FormContext.Provider, {
+		value: provide,
+		get children() {
+			var _el$ = _tmpl$$26();
+			use(setFormEl, _el$);
+			spread(_el$, mergeProps(rest, {
+				"data-scope": "form",
+				"data-part": "root",
+				"novalidate": true,
+				"onSubmit": handleSubmit,
+				"onInput": onDelegated,
+				"onChange": onDelegated
+			}), false, false);
+			return _el$;
+		}
+	});
+}
+/**
+* The named slot in the grid: label, control, hint — and the error the
+* Form routed to this name, shown through the same parts the standalone
+* Field family styles. The Ark field context runs underneath, so our
+* Input and Textarea pick up the label wiring and the invalid state
+* without knowing the Form exists. Without a Form above it degrades to
+* a plain labelled field.
+*/
+function FormField(props) {
+	const [own, rest] = splitProps(props, [
+		"name",
+		"label",
+		"hint",
+		"required",
+		"invalid",
+		"disabled",
+		"children"
+	]);
+	const form = useContext(FormContext);
+	const error = () => own.name ? form?.errors().get(own.name) : void 0;
+	const invalid = () => own.invalid || error() != null;
+	const disabled = () => own.disabled || (form?.disabled ?? false);
+	return (() => {
+		var _el$2 = _tmpl$2$13();
+		spread(_el$2, mergeProps(rest, { get ["data-form-field"]() {
+			return own.name;
+		} }), false, true);
+		insert(_el$2, createComponent(Field$1.Root, {
+			get invalid() {
+				return invalid();
+			},
+			get required() {
+				return own.required;
+			},
+			get disabled() {
+				return disabled();
+			},
+			get children() {
+				return [
+					memo(() => memo(() => !!own.label)() ? createComponent(Field$1.Label, { get children() {
+						return own.label;
+					} }) : null),
+					memo(() => own.children),
+					memo(() => memo(() => !!(own.hint && error() == null))() ? createComponent(Field$1.HelperText, { get children() {
+						return own.hint;
+					} }) : null),
+					memo(() => memo(() => error() != null)() ? createComponent(Field$1.ErrorText, { get children() {
+						return error();
+					} }) : null)
+				];
+			}
+		}));
+		return _el$2;
+	})();
+}
+injectComponentStyle("form");
+injectComponentStyle("field");
+//#endregion
 //#region src/components/frame/index.ts
 /** Ark's Frame, dressed in the paper-and-ink system: a sandboxed
 * iframe whose body mounts the children and whose `head` prop
@@ -1067,6 +2606,46 @@ const Format = Format$1;
 * core stylesheet to hook. The API is Ark's own. */
 const Frame = Frame$1;
 //#endregion
+//#region src/components/grid/index.tsx
+var _tmpl$$25 = /*#__PURE__*/ template(`<div>`);
+/** The same named steps of the space ramp the stack uses — one
+* vocabulary of distance across the layout primitives. */
+const gapVars$2 = {
+	none: "0",
+	xs: "var(--bs-gap-xs)",
+	sm: "var(--bs-gap-sm)",
+	md: "var(--bs-gap-md)",
+	lg: "var(--bs-gap-lg)",
+	xl: "var(--bs-gap-xl)"
+};
+function Grid(props) {
+	const [own, rest] = splitProps(props, [
+		"columns",
+		"gap",
+		"minChildWidth"
+	]);
+	return (() => {
+		var _el$ = _tmpl$$25();
+		spread(_el$, mergeProps(rest, {
+			get style() {
+				return {
+					...rest.style,
+					"--bs-grid-columns": String(own.columns ?? 12),
+					"--bs-grid-gap": gapVars$2[own.gap ?? "md"] ?? gapVars$2.md,
+					...own.minChildWidth != null ? { "--bs-grid-min-child-width": own.minChildWidth } : {}
+				};
+			},
+			"data-scope": "grid",
+			"data-part": "root",
+			get ["data-autofill"]() {
+				return own.minChildWidth != null ? "" : void 0;
+			}
+		}), false, false);
+		return _el$;
+	})();
+}
+injectComponentStyle("grid");
+//#endregion
 //#region src/components/highlight/index.ts
 /** Ark's Highlight, dressed in the paper-and-ink system: query hits are
 * strokes of pigment on the page — a quiet tint of the accent behind the
@@ -1082,6 +2661,98 @@ injectComponentStyle("highlight");
 const HoverCard = HoverCard$1;
 injectComponentStyle("hover-card");
 //#endregion
+//#region src/components/icon/index.tsx
+var _tmpl$$24 = /*#__PURE__*/ template(`<span>`);
+function Icon(props) {
+	const [own, rest] = splitProps(props, ["size", "label"]);
+	return (() => {
+		var _el$ = _tmpl$$24();
+		spread(_el$, mergeProps(rest, {
+			get role() {
+				return own.label != null ? "img" : void 0;
+			},
+			get ["aria-label"]() {
+				return own.label;
+			},
+			get ["aria-hidden"]() {
+				return own.label != null ? void 0 : "true";
+			},
+			"data-scope": "icon",
+			"data-part": "root",
+			get ["data-size"]() {
+				return own.size ?? "inherit";
+			}
+		}), false, false);
+		return _el$;
+	})();
+}
+injectComponentStyle("icon");
+//#endregion
+//#region src/components/image/index.tsx
+var _tmpl$$23 = /*#__PURE__*/ template(`<svg><rect x=3 y=4 width=18 height=16 rx=1.5></svg>`, false, true, false);
+var _tmpl$2$12 = /*#__PURE__*/ template(`<svg><circle cx=9 cy=10 r=1.5></svg>`, false, true, false);
+var _tmpl$3$9 = /*#__PURE__*/ template(`<svg><path d="m5.5 17.5 4.5-5 3 3.5 2.5-3 3 4.5"></svg>`, false, true, false);
+var _tmpl$4$6 = /*#__PURE__*/ template(`<div data-scope=image data-part=fallback>`);
+var _tmpl$5$4 = /*#__PURE__*/ template(`<figure><img data-scope=image data-part=img decoding=async>`, true, false, false);
+/** The mark for a source that never arrived: a quiet mountain-and-sun,
+* drawn in the stylesheet's stroke and hidden from the reader. */
+function placeholderGlyph() {
+	return [
+		_tmpl$$23(),
+		_tmpl$2$12(),
+		_tmpl$3$9()
+	];
+}
+function Image(props) {
+	const [own, rest] = splitProps(props, [
+		"src",
+		"alt",
+		"fit",
+		"loading",
+		"fallback"
+	]);
+	const [state, setState] = createSignal("loading");
+	createEffect(on(() => own.src, () => setState("loading")));
+	return (() => {
+		var _el$4 = _tmpl$5$4(), _el$5 = _el$4.firstChild;
+		spread(_el$4, mergeProps(rest, {
+			"data-scope": "image",
+			"data-part": "root",
+			get ["data-state"]() {
+				return state();
+			},
+			get ["data-fit"]() {
+				return own.fit ?? "cover";
+			}
+		}), false, true);
+		_el$5.addEventListener("error", () => setState("error"));
+		_el$5.addEventListener("load", () => setState("loaded"));
+		insert(_el$4, createComponent(Show, {
+			get when() {
+				return state() === "error";
+			},
+			get children() {
+				var _el$6 = _tmpl$4$6();
+				insert(_el$6, () => own.fallback ?? placeholderGlyph());
+				return _el$6;
+			}
+		}), null);
+		effect((_p$) => {
+			var _v$ = own.src, _v$2 = own.alt ?? "", _v$3 = own.loading ?? "lazy";
+			_v$ !== _p$.e && setAttribute(_el$5, "src", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$5, "alt", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$5, "loading", _p$.a = _v$3);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$4;
+	})();
+}
+injectComponentStyle("image");
+//#endregion
 //#region src/components/image-cropper/index.ts
 /** Ark's ImageCropper, dressed in the paper-and-ink system: a rounded vessel
 * holding the photograph, one lit selection window framed by light hairlines.
@@ -1090,6 +2761,179 @@ injectComponentStyle("hover-card");
 const ImageCropper = ImageCropper$1;
 injectComponentStyle("image-cropper");
 //#endregion
+//#region src/components/image-viewer/index.tsx
+var _tmpl$$22 = /*#__PURE__*/ template(`<svg><circle cx=11 cy=11 r=7></svg>`, false, true, false);
+var _tmpl$2$11 = /*#__PURE__*/ template(`<svg><path d="m16.2 16.2 4.8 4.8"></svg>`, false, true, false);
+var _tmpl$3$8 = /*#__PURE__*/ template(`<svg><path d="M8 11h6"></svg>`, false, true, false);
+var _tmpl$4$5 = /*#__PURE__*/ template(`<svg><path d="M11 8v6"></svg>`, false, true, false);
+var _tmpl$5$3 = /*#__PURE__*/ template(`<svg><path d="M20.49 12A8.5 8.5 0 1 1 18 6.06"></svg>`, false, true, false);
+var _tmpl$6$3 = /*#__PURE__*/ template(`<svg><path d="M20.5 3.5v4h-4"></svg>`, false, true, false);
+var _tmpl$7$1 = /*#__PURE__*/ template(`<svg><path d="m6 6 12 12"></svg>`, false, true, false);
+var _tmpl$8$1 = /*#__PURE__*/ template(`<svg><path d="M18 6 6 18"></svg>`, false, true, false);
+var _tmpl$9$1 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true>`);
+var _tmpl$0$1 = /*#__PURE__*/ template(`<img data-scope=image-viewer data-part=viewport>`);
+var _tmpl$1$1 = /*#__PURE__*/ template(`<div data-scope=image-viewer data-part=toolbar>`);
+const MIN_SCALE = .5;
+const MAX_SCALE = 3;
+const SCALE_STEP = .25;
+/** The toolbar's line-drawn glyphs, fresh per render. */
+const TOOL_GLYPHS = {
+	zoomIn: () => [
+		_tmpl$$22(),
+		_tmpl$2$11(),
+		_tmpl$3$8(),
+		_tmpl$4$5()
+	],
+	zoomOut: () => [
+		_tmpl$$22(),
+		_tmpl$2$11(),
+		_tmpl$3$8()
+	],
+	rotate: () => [_tmpl$5$3(), _tmpl$6$3()],
+	close: () => [_tmpl$7$1(), _tmpl$8$1()]
+};
+function ImageViewer(props) {
+	const [own] = splitProps(props, [
+		"src",
+		"alt",
+		"open",
+		"zoomable",
+		"onOpenChange"
+	]);
+	const [localOpen, setLocalOpen] = createSignal(false);
+	const [scale, setScale] = createSignal(1);
+	const [rotation, setRotation] = createSignal(0);
+	const isOpen = () => own.open ?? localOpen();
+	const setOpen = (value) => {
+		if (own.open === void 0) setLocalOpen(value);
+		own.onOpenChange?.(value);
+	};
+	createEffect(() => {
+		if (isOpen()) {
+			setScale(1);
+			setRotation(0);
+		}
+	});
+	function zoom(step) {
+		setScale(Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale() + step)));
+	}
+	function rotate() {
+		setRotation((rotation() + 90) % 360);
+	}
+	function toolButton(label, glyph, onClick) {
+		return createComponent(Button, {
+			variant: "ghost",
+			square: true,
+			size: "lg",
+			"aria-label": label,
+			onClick,
+			get children() {
+				var _el$10 = _tmpl$9$1();
+				insert(_el$10, glyph);
+				return _el$10;
+			}
+		});
+	}
+	return createComponent(Dialog$1.Root, {
+		get open() {
+			return isOpen();
+		},
+		onOpenChange: (details) => setOpen(details.open),
+		lazyMount: true,
+		unmountOnExit: true,
+		get children() {
+			return createComponent(Portal, { get children() {
+				return [createComponent(Dialog$1.Backdrop, { "class": "bs-image-viewer-backdrop" }), createComponent(Dialog$1.Positioner, {
+					"class": "bs-image-viewer-positioner",
+					get children() {
+						return createComponent(Dialog$1.Content, {
+							"class": "bs-image-viewer-content",
+							get ["aria-label"]() {
+								return own.alt || "Image preview";
+							},
+							onClick: (event) => {
+								if (event.target === event.currentTarget) setOpen(false);
+							},
+							get children() {
+								return [(() => {
+									var _el$11 = _tmpl$0$1();
+									effect((_p$) => {
+										var _v$ = own.src, _v$2 = own.alt ?? "", _v$3 = `scale(${scale()}) rotate(${rotation()}deg)`;
+										_v$ !== _p$.e && setAttribute(_el$11, "src", _p$.e = _v$);
+										_v$2 !== _p$.t && setAttribute(_el$11, "alt", _p$.t = _v$2);
+										_v$3 !== _p$.a && setStyleProperty(_el$11, "transform", _p$.a = _v$3);
+										return _p$;
+									}, {
+										e: void 0,
+										t: void 0,
+										a: void 0
+									});
+									return _el$11;
+								})(), (() => {
+									var _el$12 = _tmpl$1$1();
+									insert(_el$12, createComponent(ButtonGroup, { get children() {
+										return [
+											createComponent(Show, {
+												get when() {
+													return own.zoomable ?? true;
+												},
+												get children() {
+													return [memo(() => toolButton("Zoom in", TOOL_GLYPHS.zoomIn, () => zoom(SCALE_STEP))), memo(() => toolButton("Zoom out", TOOL_GLYPHS.zoomOut, () => zoom(-.25)))];
+												}
+											}),
+											memo(() => toolButton("Rotate 90 degrees", TOOL_GLYPHS.rotate, rotate)),
+											memo(() => toolButton("Close", TOOL_GLYPHS.close, () => setOpen(false)))
+										];
+									} }));
+									return _el$12;
+								})()];
+							}
+						});
+					}
+				})];
+			} });
+		}
+	});
+}
+injectComponentStyle("image-viewer");
+//#endregion
+//#region src/components/input-group/index.tsx
+var _tmpl$$21 = /*#__PURE__*/ template(`<div>`);
+/**
+* Merged controls: attachments and the entry fused into one seal. The
+* Root draws the single hairline and carries the group's focus halo;
+* the Addon is a recessed cell for the reader's fixed words — a scheme,
+* a unit, a quiet button — placed before or after the entry. Put our
+* Input (or Textarea) inside and its own border and halo step aside in
+* favor of the group's; the stylesheet does the merging, the wrapper
+* adds no visuals of its own.
+*/
+function InputGroupRoot(props) {
+	return (() => {
+		var _el$ = _tmpl$$21();
+		spread(_el$, mergeProps(props, {
+			"data-scope": "input-group",
+			"data-part": "root"
+		}), false, false);
+		return _el$;
+	})();
+}
+function InputGroupAddon(props) {
+	return (() => {
+		var _el$2 = _tmpl$$21();
+		spread(_el$2, mergeProps(props, {
+			"data-scope": "input-group",
+			"data-part": "addon"
+		}), false, false);
+		return _el$2;
+	})();
+}
+const InputGroup = Object.assign(InputGroupRoot, {
+	Root: InputGroupRoot,
+	Addon: InputGroupAddon
+});
+injectComponentStyle("input-group");
+//#endregion
 //#region src/components/json-tree-view/index.ts
 /** Ark's JsonTreeView, dressed in the paper-and-ink system: the tree-view
 * recipes re-scoped, with value nodes reading as tabular data. The API is
@@ -1098,10 +2942,10 @@ const JsonTreeView = JsonTreeView$1;
 injectComponentStyle("json-tree-view");
 //#endregion
 //#region src/components/kbd/index.tsx
-var _tmpl$$9 = /*#__PURE__*/ template(`<kbd>`);
+var _tmpl$$20 = /*#__PURE__*/ template(`<kbd>`);
 function Kbd(props) {
 	return (() => {
-		var _el$ = _tmpl$$9();
+		var _el$ = _tmpl$$20();
 		spread(_el$, mergeProps(props, {
 			"data-scope": "kbd",
 			"data-part": "root"
@@ -1111,15 +2955,204 @@ function Kbd(props) {
 }
 injectComponentStyle("kbd");
 //#endregion
+//#region src/components/layout/index.tsx
+var _tmpl$$19 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2$10 = /*#__PURE__*/ template(`<header>`);
+var _tmpl$3$7 = /*#__PURE__*/ template(`<main>`);
+var _tmpl$4$4 = /*#__PURE__*/ template(`<footer>`);
+var _tmpl$5$2 = /*#__PURE__*/ template(`<div data-scope=layout data-part=sider-resize role=separator aria-orientation=vertical tabindex=0 aria-label="Resize sidebar">`);
+var _tmpl$6$2 = /*#__PURE__*/ template(`<aside>`);
+const LayoutContext = createContext();
+/**
+* The application skeleton: Root, Header, Sider, Content, Footer —
+* the admin arrangement (Element Plus / AntD keep the same anatomy)
+* dressed in the paper-and-ink surfaces. The root is a full-height
+* grid; a declared `sider` turns the columns around to meet whichever
+* edge the rail stands on.
+*/
+function LayoutRoot(props) {
+	const [own, rest] = splitProps(props, ["sider"]);
+	return createComponent(LayoutContext.Provider, {
+		value: { siderPlacement: () => own.sider },
+		get children() {
+			var _el$ = _tmpl$$19();
+			spread(_el$, mergeProps(rest, {
+				"data-scope": "layout",
+				"data-part": "root",
+				get ["data-sider"]() {
+					return own.sider;
+				}
+			}), false, false);
+			return _el$;
+		}
+	});
+}
+function LayoutHeader(props) {
+	return (() => {
+		var _el$2 = _tmpl$2$10();
+		spread(_el$2, mergeProps(props, {
+			"data-scope": "layout",
+			"data-part": "header"
+		}), false, false);
+		return _el$2;
+	})();
+}
+function LayoutContent(props) {
+	return (() => {
+		var _el$3 = _tmpl$3$7();
+		spread(_el$3, mergeProps(props, {
+			"data-scope": "layout",
+			"data-part": "content"
+		}), false, false);
+		return _el$3;
+	})();
+}
+function LayoutFooter(props) {
+	return (() => {
+		var _el$4 = _tmpl$4$4();
+		spread(_el$4, mergeProps(props, {
+			"data-scope": "layout",
+			"data-part": "footer"
+		}), false, false);
+		return _el$4;
+	})();
+}
+/** One step of the arrow-key resize, in px. */
+const RESIZE_STEP = 16;
+function LayoutSider(props) {
+	const [own, rest] = splitProps(props, [
+		"collapsed",
+		"width",
+		"collapsedWidth",
+		"resizable",
+		"minWidth",
+		"maxWidth",
+		"onCollapsedChange",
+		"onWidthChange",
+		"style",
+		"children"
+	]);
+	const collapsed = () => own.collapsed ?? false;
+	const [innerWidth, setInnerWidth] = createSignal(own.width ?? "16rem");
+	const width = () => own.width ?? innerWidth();
+	createEffect(() => {
+		const next = own.width;
+		if (next === void 0 || next === innerWidth()) return;
+		setInnerWidth(next);
+		own.onWidthChange?.(next);
+	});
+	let prevCollapsed = collapsed();
+	createEffect(() => {
+		const next = collapsed();
+		if (next === prevCollapsed) return;
+		prevCollapsed = next;
+		own.onCollapsedChange?.(next);
+	});
+	const layout = useContext(LayoutContext);
+	const [dragging, setDragging] = createSignal(false);
+	let rail;
+	let startPointerX = 0;
+	let startWidth = 0;
+	const railWidth = () => rail ? Math.round(rail.getBoundingClientRect().width) : 0;
+	const onPointerDown = (event) => {
+		setDragging(true);
+		startPointerX = event.clientX;
+		startWidth = railWidth();
+		event.currentTarget.setPointerCapture(event.pointerId);
+	};
+	const onPointerMove = (event) => {
+		if (!dragging()) return;
+		const towardFlow = (layout?.siderPlacement() ?? "start") === "end" ? -1 : 1;
+		const next = Math.round(startWidth + towardFlow * (event.clientX - startPointerX));
+		setInnerWidth(`${next}px`);
+		own.onWidthChange?.(`${next}px`);
+	};
+	const onPointerUp = (event) => {
+		setDragging(false);
+		event.currentTarget.releasePointerCapture(event.pointerId);
+	};
+	const onKeyDown = (event) => {
+		if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+		event.preventDefault();
+		const widen = (layout?.siderPlacement() ?? "start") === "end" ? event.key === "ArrowLeft" : event.key === "ArrowRight";
+		const next = railWidth() + (widen ? RESIZE_STEP : -16);
+		setInnerWidth(`${next}px`);
+		own.onWidthChange?.(`${next}px`);
+	};
+	const handle = () => own.resizable && !collapsed() ? (() => {
+		var _el$5 = _tmpl$5$2();
+		_el$5.$$keydown = onKeyDown;
+		_el$5.$$pointerup = onPointerUp;
+		_el$5.$$pointermove = onPointerMove;
+		_el$5.$$pointerdown = onPointerDown;
+		effect((_p$) => {
+			var _v$ = dragging() ? "" : void 0, _v$2 = railWidth();
+			_v$ !== _p$.e && setAttribute(_el$5, "data-dragging", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$5, "aria-valuenow", _p$.t = _v$2);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$5;
+	})() : null;
+	const foldedWidth = () => own.collapsedWidth ?? "3.5rem";
+	return (() => {
+		var _el$6 = _tmpl$6$2();
+		use((el) => rail = el, _el$6);
+		spread(_el$6, mergeProps(rest, {
+			get style() {
+				return {
+					...typeof own.style === "object" ? own.style : {},
+					"--bs-layout-sider-width": collapsed() ? foldedWidth() : width(),
+					"--bs-layout-sider-min": collapsed() ? foldedWidth() : own.minWidth ?? "12rem",
+					"--bs-layout-sider-max": collapsed() ? foldedWidth() : own.maxWidth ?? "24rem"
+				};
+			},
+			"data-scope": "layout",
+			"data-part": "sider",
+			get ["data-collapsed"]() {
+				return collapsed() ? "" : void 0;
+			},
+			get ["data-dragging"]() {
+				return dragging() ? "" : void 0;
+			},
+			get ["data-resizable"]() {
+				return own.resizable ? "" : void 0;
+			}
+		}), false, true);
+		insert(_el$6, (() => {
+			var _c$ = memo(() => typeof own.children === "function");
+			return () => _c$() ? own.children({ collapsed: collapsed() }) : own.children;
+		})(), null);
+		insert(_el$6, handle, null);
+		return _el$6;
+	})();
+}
+const Layout = Object.assign(LayoutRoot, {
+	Root: LayoutRoot,
+	Header: LayoutHeader,
+	Sider: LayoutSider,
+	Content: LayoutContent,
+	Footer: LayoutFooter
+});
+injectComponentStyle("layout");
+delegateEvents([
+	"pointerdown",
+	"pointermove",
+	"pointerup",
+	"keydown"
+]);
+//#endregion
 //#region src/components/link/index.tsx
-var _tmpl$$8 = /*#__PURE__*/ template(`<a>`);
+var _tmpl$$18 = /*#__PURE__*/ template(`<a>`);
 /** A link is ink in the accent's voice: quiet at rest, deepening under
 * the hand, the halo at focus. The underline follows the prose —
 * always, on hover, or never. */
 function Link(props) {
-	const [own, rest] = splitProps$1(props, ["underline"]);
+	const [own, rest] = splitProps(props, ["underline"]);
 	return (() => {
-		var _el$ = _tmpl$$8();
+		var _el$ = _tmpl$$18();
 		spread(_el$, mergeProps(rest, {
 			"data-scope": "link",
 			"data-part": "root",
@@ -1132,6 +3165,94 @@ function Link(props) {
 }
 injectComponentStyle("link");
 //#endregion
+//#region src/components/list/index.tsx
+var _tmpl$$17 = /*#__PURE__*/ template(`<ul>`);
+var _tmpl$2$9 = /*#__PURE__*/ template(`<div data-scope=list data-part=title>`);
+var _tmpl$3$6 = /*#__PURE__*/ template(`<div data-scope=list data-part=description>`);
+var _tmpl$4$3 = /*#__PURE__*/ template(`<div>`);
+/** A ledger of rows: Root is the list, Item one row, Leading the mark
+* before the words, Content the title and its quiet echo, Actions the
+* way out. The bordered variant draws the hairlines; the hoverable
+* variant gives every row the wash — and any row the caller makes
+* clickable (role="button") answers the pointer on its own. */
+function part$5(name, tag) {
+	function Component(props) {
+		return createComponent(tag, mergeProps(props, {
+			"data-scope": "list",
+			get ["data-part"]() {
+				return name.toLowerCase();
+			}
+		}));
+	}
+	return Component;
+}
+const Item$1 = part$5("Item", "li");
+const Leading = part$5("Leading", "div");
+const Actions$1 = part$5("Actions", "div");
+function Root$4(props) {
+	const [own, rest] = splitProps(props, ["bordered", "hoverable"]);
+	return (() => {
+		var _el$ = _tmpl$$17();
+		spread(_el$, mergeProps(rest, {
+			"data-scope": "list",
+			"data-part": "root",
+			get ["data-bordered"]() {
+				return own.bordered || void 0;
+			},
+			get ["data-hoverable"]() {
+				return own.hoverable || void 0;
+			}
+		}), false, false);
+		return _el$;
+	})();
+}
+/** The row's words: `title` and `description` ride their own named
+* parts, the children follow them for anything else. */
+function Content$1(props) {
+	const [own, rest] = splitProps(props, [
+		"title",
+		"description",
+		"children"
+	]);
+	return (() => {
+		var _el$2 = _tmpl$4$3();
+		spread(_el$2, mergeProps(rest, {
+			"data-scope": "list",
+			"data-part": "content"
+		}), false, true);
+		insert(_el$2, createComponent(Show, {
+			get when() {
+				return own.title;
+			},
+			get children() {
+				var _el$3 = _tmpl$2$9();
+				insert(_el$3, () => own.title);
+				return _el$3;
+			}
+		}), null);
+		insert(_el$2, createComponent(Show, {
+			get when() {
+				return own.description;
+			},
+			get children() {
+				var _el$4 = _tmpl$3$6();
+				insert(_el$4, () => own.description);
+				return _el$4;
+			}
+		}), null);
+		insert(_el$2, () => own.children, null);
+		return _el$2;
+	})();
+}
+const List = Object.assign(Root$4, {
+	Root: Root$4,
+	Item: Item$1,
+	Leading,
+	Content: Content$1,
+	Actions: Actions$1
+});
+injectComponentStyle("list");
+//#endregion
 //#region src/components/listbox/index.ts
 /** Ark's Listbox, dressed in the paper-and-ink system: quiet rows of ink
 * where the checked row alone takes the flat primary fill. The API is
@@ -1148,6 +3269,38 @@ injectComponentStyle("listbox");
 const Marquee = Marquee$1;
 injectComponentStyle("marquee");
 //#endregion
+//#region src/components/masonry/index.tsx
+var _tmpl$$16 = /*#__PURE__*/ template(`<div>`);
+/** The same named steps of the space ramp the stack uses — one
+* vocabulary of distance across the layout primitives. */
+const gapVars$1 = {
+	none: "0",
+	xs: "var(--bs-gap-xs)",
+	sm: "var(--bs-gap-sm)",
+	md: "var(--bs-gap-md)",
+	lg: "var(--bs-gap-lg)",
+	xl: "var(--bs-gap-xl)"
+};
+function Masonry(props) {
+	const [own, rest] = splitProps(props, ["columns", "gap"]);
+	return (() => {
+		var _el$ = _tmpl$$16();
+		spread(_el$, mergeProps(rest, {
+			get style() {
+				return {
+					...rest.style,
+					"--bs-masonry-columns": String(own.columns ?? 3),
+					"--bs-masonry-gap": gapVars$1[own.gap ?? "md"] ?? gapVars$1.md
+				};
+			},
+			"data-scope": "masonry",
+			"data-part": "root"
+		}), false, false);
+		return _el$;
+	})();
+}
+injectComponentStyle("masonry");
+//#endregion
 //#region src/components/menu/index.ts
 /** Ark's Menu, dressed in the paper-and-ink system: a quiet paper vessel on
 * elevation, hover as light on the row, checked items as the flat ink fill.
@@ -1157,37 +3310,382 @@ injectComponentStyle("marquee");
 const Menu = Menu$1;
 injectComponentStyle("menu");
 //#endregion
+//#region src/components/menubar/index.tsx
+var _tmpl$$15 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2$8 = /*#__PURE__*/ template(`<button>`);
+/**
+* A desktop-style menu bar: a row of quiet ghost triggers, each opening
+* the same paper vessel as the menu family. The triggers are our own
+* buttons grafted onto the menu machine's trigger via `asChild` — the
+* machine keeps the trigger element (positioning, focus restore,
+* `data-state`) while the element wears the menubar scope. The popups
+* keep the menu parts untouched, so the menu stylesheet dresses them.
+*
+* Keyboard note: the triggers move between each other with Tab, not
+* arrow keys — cross-menu arrow traversal is out of scope for this
+* version. Inside an open menu the machine handles arrows and Escape.
+*/
+function Menubar(props) {
+	const [own, rest] = splitProps(props, ["items", "onSelect"]);
+	return (() => {
+		var _el$ = _tmpl$$15();
+		spread(_el$, mergeProps(rest, {
+			"data-scope": "menubar",
+			"data-part": "root",
+			"role": "menubar"
+		}), false, true);
+		insert(_el$, createComponent(For, {
+			get each() {
+				return own.items ?? [];
+			},
+			children: (group) => createComponent(Menu$1.Root, {
+				positioning: { placement: "bottom-start" },
+				get children() {
+					return [createComponent(Menu$1.Trigger, { asChild: (triggerProps) => (() => {
+						var _el$2 = _tmpl$2$8();
+						spread(_el$2, mergeProps(triggerProps, {
+							"type": "button",
+							"data-scope": "menubar",
+							"data-part": "trigger"
+						}), false, true);
+						insert(_el$2, () => group.label);
+						return _el$2;
+					})() }), createComponent(Portal, { get children() {
+						return createComponent(Menu$1.Positioner, { get children() {
+							return createComponent(Menu$1.Content, { get children() {
+								return createComponent(For, {
+									get each() {
+										return group.items;
+									},
+									children: (entry) => createComponent(Menu$1.Item, {
+										get value() {
+											return entry.value;
+										},
+										get disabled() {
+											return entry.disabled;
+										},
+										get ["data-danger"]() {
+											return entry.danger ? "" : void 0;
+										},
+										onSelect: () => own.onSelect?.(entry.value),
+										get children() {
+											return createComponent(Menu$1.ItemText, { get children() {
+												return entry.label;
+											} });
+										}
+									})
+								});
+							} });
+						} });
+					} })];
+				}
+			})
+		}));
+		return _el$;
+	})();
+}
+injectComponentStyle("menubar");
+injectComponentStyle("menu");
+//#endregion
+//#region src/components/textarea/index.tsx
+var _tmpl$$14 = /*#__PURE__*/ template(`<textarea>`);
+/** The bare multi-line input: the field recipe on a `<textarea>`, sized
+* by rows and resizable in the block direction. Standing alone it styles
+* itself from the `invalid` prop; inside a `Field.Root` it consumes the
+* field context, picking up the label id, the described-by wiring and
+* the invalid state for free. Disabled rides the native attribute. */
+function Textarea(props) {
+	const field = useFieldContext();
+	const [own, rest] = splitProps(props, [
+		"value",
+		"invalid",
+		"onValueChange"
+	]);
+	return (() => {
+		var _el$ = _tmpl$$14();
+		spread(_el$, mergeProps(() => mergeProps$1(() => field?.().getTextareaProps() ?? {}, rest, {
+			get value() {
+				return own.value;
+			},
+			"data-scope": "textarea",
+			"data-part": "root",
+			get "data-invalid"() {
+				return own.invalid || field?.().getTextareaProps()["data-invalid"] != null ? "" : void 0;
+			},
+			onInput: (event) => own.onValueChange?.(event.currentTarget.value)
+		})), false, false);
+		return _el$;
+	})();
+}
+injectComponentStyle("textarea");
+//#endregion
+//#region src/components/mentions/use-mentions.ts
+/** The @-detection machinery behind a mention field: watch the caret,
+* offer the matching candidates, and answer for the keys that drive
+* them. The field element arrives as an accessor because hosts wrap it
+* differently (a bare textarea, a field's own part).
+*
+* `onKeydown` answers whether the vessel consumed the key, so a host
+* with its own Enter semantics — a composer that sends — can yield to
+* the candidates first and act only when the vessel stands down. */
+function useMentions(options, textarea, handlers) {
+	const [popupOpen, setPopupOpen] = createSignal(false);
+	const [matches, setMatches] = createSignal([]);
+	const [active, setActive] = createSignal(0);
+	const [anchorIndex, setAnchorIndex] = createSignal(0);
+	const [caretIndex, setCaretIndex] = createSignal(0);
+	const closePopup = () => {
+		setPopupOpen(false);
+		setMatches([]);
+	};
+	const detect = () => {
+		const text = handlers.getText();
+		const caret = textarea()?.selectionStart ?? text.length;
+		setCaretIndex(caret);
+		const head = text.slice(0, caret);
+		const char = options().trigger ?? "@";
+		const anchor = head.lastIndexOf(char);
+		const token = anchor === -1 ? "" : head.slice(anchor + char.length);
+		if (anchor === -1 || /\s/.test(token)) {
+			closePopup();
+			return;
+		}
+		const found = options().items.filter((entry) => entry.label.toLowerCase().startsWith(token.toLowerCase()));
+		setMatches(found);
+		setActive(0);
+		setAnchorIndex(anchor);
+		setPopupOpen(found.length > 0);
+	};
+	const insert = (entry) => {
+		const text = handlers.getText();
+		const char = options().trigger ?? "@";
+		const next = text.slice(0, anchorIndex()) + char + entry.label + " " + text.slice(caretIndex());
+		handlers.setText(next);
+		closePopup();
+		queueMicrotask(() => {
+			const el = textarea();
+			if (!el) return;
+			const caret = anchorIndex() + char.length + entry.label.length + 1;
+			el.focus();
+			el.setSelectionRange(caret, caret);
+		});
+	};
+	/** Feed the field's input events through here — the vessel watches
+	* the text as it lands, from the element itself. */
+	const onInput = () => detect();
+	/** Arrows move, Enter inserts, Escape dismisses. Answers `true` when
+	* the vessel consumed the key. */
+	const onKeydown = (event) => {
+		if (!popupOpen() || matches().length === 0) return false;
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			setActive((active() + 1) % matches().length);
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			setActive((active() - 1 + matches().length) % matches().length);
+		} else if (event.key === "Enter") {
+			event.preventDefault();
+			insert(matches()[active()]);
+		} else if (event.key === "Escape") closePopup();
+		else return false;
+		return true;
+	};
+	return {
+		open: popupOpen,
+		matches,
+		active,
+		setActive,
+		insert,
+		close: closePopup,
+		onInput,
+		onKeydown
+	};
+}
+//#endregion
+//#region src/components/mentions/index.tsx
+var _tmpl$$13 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2$7 = /*#__PURE__*/ template(`<div data-scope=mentions data-part=option>`);
+/** The vessel: the candidates themselves as a floating card. The anchor
+* is virtual — a live rectangle off the host's field — so a host keeps
+* its own anatomy (the textarea rides where the host puts it) and the
+* vessel still points at the right place. Shares the detection state
+* with the host through `useMentions`. */
+function MentionsVessel(props) {
+	return createComponent(Popover$1.Root, {
+		get open() {
+			return props.open ?? false;
+		},
+		onOpenChange: (details) => props.onOpenChange?.(details.open),
+		positioning: {
+			placement: "bottom-start",
+			getAnchorRect: () => props.anchor?.getBoundingClientRect() ?? null
+		},
+		get children() {
+			return createComponent(Portal, { get children() {
+				return createComponent(Popover$1.Positioner, { get children() {
+					return createComponent(Popover$1.Content, { asChild: (contentProps) => (() => {
+						var _el$ = _tmpl$$13();
+						spread(_el$, mergeProps(contentProps, {
+							"data-scope": "mentions",
+							"data-part": "popup"
+						}), false, true);
+						insert(_el$, createComponent(For, {
+							get each() {
+								return props.matches ?? [];
+							},
+							children: (entry, index) => (() => {
+								var _el$2 = _tmpl$2$7();
+								_el$2.$$click = () => props.onInsert?.(entry);
+								_el$2.$$mousedown = (event) => event.preventDefault();
+								_el$2.addEventListener("mouseenter", () => props.onActiveChange?.(index()));
+								insert(_el$2, () => entry.label);
+								effect(() => setAttribute(_el$2, "data-active", index() === (props.active ?? 0) ? "" : void 0));
+								return _el$2;
+							})()
+						}));
+						return _el$;
+					})() });
+				} });
+			} });
+		}
+	});
+}
+/**
+* @-mentions: a plain textarea that, when the text before the caret ends
+* with the trigger character followed by a token, offers the matching
+* candidates in a small anchored vessel; choosing one replaces the token
+* with `trigger + label` and hands the whole text back through
+* `onValueChange`. Arrows move, Enter inserts, Escape dismisses.
+*
+* The field is the shared `Textarea` — field wiring (label ids, the
+* invalid state) rides on it for free — and the vessel anchors to the
+* field as a whole (popover machinery), not to the caret coordinates;
+* caret-precise positioning would need a second positioning system for
+* no practical gain at typical field sizes. Composers that keep their
+* own field anatomy (the AI prompt input) skip this shell and wire
+* `useMentions` plus `MentionsVessel` themselves.
+*/
+function Mentions(props) {
+	const [own, rest] = splitProps(props, [
+		"items",
+		"value",
+		"trigger",
+		"placeholder",
+		"autoresize",
+		"invalid",
+		"onValueChange"
+	]);
+	const [internal, setInternal] = createSignal("");
+	const [fieldEl, setFieldEl] = createSignal(null);
+	const value = () => own.value ?? internal();
+	const mentions = useMentions(() => ({
+		items: own.items ?? [],
+		trigger: own.trigger
+	}), fieldEl, {
+		getText: () => fieldEl()?.value ?? value(),
+		setText: (next) => {
+			setInternal(next);
+			own.onValueChange?.(next);
+		}
+	});
+	createEffect(() => {
+		value();
+		const node = fieldEl();
+		if (!node || !(own.autoresize ?? false)) return;
+		node.style.height = "auto";
+		node.style.height = `${node.scrollHeight}px`;
+	});
+	const onInput = () => {
+		const node = fieldEl();
+		if (!node) return;
+		setInternal(node.value);
+		own.onValueChange?.(node.value);
+		mentions.onInput();
+	};
+	return (() => {
+		var _el$3 = _tmpl$$13();
+		spread(_el$3, mergeProps(rest, {
+			"data-scope": "mentions",
+			"data-part": "root"
+		}), false, true);
+		insert(_el$3, createComponent(Textarea, {
+			ref: (node) => setFieldEl(node),
+			get invalid() {
+				return own.invalid;
+			},
+			rows: 3,
+			get placeholder() {
+				return own.placeholder;
+			},
+			get value() {
+				return value();
+			},
+			onValueChange: (next) => {
+				setInternal(next);
+				own.onValueChange?.(next);
+			},
+			onInput,
+			onKeyDown: (event) => {
+				mentions.onKeydown(event);
+			},
+			"data-scope": "mentions",
+			"data-part": "textarea"
+		}), null);
+		insert(_el$3, createComponent(MentionsVessel, {
+			get open() {
+				return mentions.open();
+			},
+			get matches() {
+				return mentions.matches();
+			},
+			get active() {
+				return mentions.active();
+			},
+			get anchor() {
+				return fieldEl();
+			},
+			get onInsert() {
+				return mentions.insert;
+			},
+			get onActiveChange() {
+				return mentions.setActive;
+			},
+			onOpenChange: (open) => {
+				if (!open) mentions.close();
+			}
+		}), null);
+		return _el$3;
+	})();
+}
+injectComponentStyle("mentions");
+delegateEvents(["mousedown", "click"]);
+//#endregion
 //#region src/components/meter/index.tsx
-var _tmpl$$7 = /*#__PURE__*/ template(`<tag>`);
-var _tmpl$2$2 = /*#__PURE__*/ template(`<span><span data-scope=meter data-part=range>`);
-var _tmpl$3$1 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$$12 = /*#__PURE__*/ template(`<span><span data-scope=meter data-part=range>`);
+var _tmpl$2$6 = /*#__PURE__*/ template(`<div>`);
 function part$4(name, tag) {
 	function Component(props) {
-		return (() => {
-			var _el$ = _tmpl$$7();
-			spread(_el$, mergeProps(props, {
-				"data-scope": "meter",
-				get ["data-part"]() {
-					return name.toLowerCase();
-				}
-			}), false, false);
-			return _el$;
-		})();
+		return createComponent(tag, mergeProps(props, {
+			"data-scope": "meter",
+			get ["data-part"]() {
+				return name.toLowerCase();
+			}
+		}));
 	}
 	return Component;
 }
 const Label$2 = part$4("Label", "span");
 const ValueText = part$4("ValueText", "span");
 const Track = (props) => (() => {
-	var _el$2 = _tmpl$2$2();
-	spread(_el$2, mergeProps(props, {
+	var _el$ = _tmpl$$12();
+	spread(_el$, mergeProps(props, {
 		"data-scope": "meter",
 		"data-part": "track"
 	}), false, true);
-	return _el$2;
+	return _el$;
 })();
 function Root$3(props) {
-	const [own, rest] = splitProps$1(props, [
+	const [own, rest] = splitProps(props, [
 		"value",
 		"min",
 		"max",
@@ -1202,8 +3700,8 @@ function Root$3(props) {
 	};
 	const level = () => own.level ?? "normal";
 	return (() => {
-		var _el$3 = _tmpl$3$1();
-		spread(_el$3, mergeProps(rest, {
+		var _el$2 = _tmpl$2$6();
+		spread(_el$2, mergeProps(rest, {
 			"role": "meter",
 			get ["aria-valuemin"]() {
 				return min();
@@ -1229,7 +3727,7 @@ function Root$3(props) {
 				};
 			}
 		}), false, true);
-		insert(_el$3, () => rest.children ?? [
+		insert(_el$2, () => rest.children ?? [
 			createComponent(Label$2, { get children() {
 				return own.label;
 			} }),
@@ -1238,7 +3736,7 @@ function Root$3(props) {
 			} }),
 			createComponent(Track, {})
 		]);
-		return _el$3;
+		return _el$2;
 	})();
 }
 const Meter = Object.assign(Root$3, {
@@ -1266,22 +3764,17 @@ const NumberInput = NumberInput$1;
 injectComponentStyle("number-input");
 //#endregion
 //#region src/components/page-header/index.tsx
-var _tmpl$$6 = /*#__PURE__*/ template(`<tag>`);
 /** The page's face: an eyebrow whisper, a serif title, one line of
 * description, and the actions resting beside the title on the same
 * baseline. Heading groups title and actions; the rest compose below. */
 function part$3(name, tag, extra = {}) {
 	function Component(props) {
-		return (() => {
-			var _el$ = _tmpl$$6();
-			spread(_el$, mergeProps(extra, props, {
-				"data-scope": "page-header",
-				get ["data-part"]() {
-					return name.toLowerCase();
-				}
-			}), false, false);
-			return _el$;
-		})();
+		return createComponent(tag, mergeProps(extra, props, {
+			"data-scope": "page-header",
+			get ["data-part"]() {
+				return name.toLowerCase();
+			}
+		}));
 	}
 	return Component;
 }
@@ -1326,6 +3819,78 @@ injectComponentStyle("password-input");
 const PinInput = PinInput$1;
 injectComponentStyle("pin-input");
 //#endregion
+//#region src/components/popconfirm/index.tsx
+var _tmpl$$11 = /*#__PURE__*/ template(`<p data-part=message>`);
+var _tmpl$2$5 = /*#__PURE__*/ template(`<div data-part=actions>`);
+var _tmpl$3$5 = /*#__PURE__*/ template(`<button>`);
+/** A question at the point of no return: the trigger opens a small
+* anchored vessel carrying the message and two answers. Confirmation
+* and cancellation are the caller's to act on — the panel closes
+* either way. The children are the trigger's content, riding the
+* machine-driven trigger button. */
+function Popconfirm(props) {
+	const [own, rest] = splitProps(props, [
+		"message",
+		"confirmText",
+		"cancelText",
+		"onConfirm",
+		"onCancel",
+		"children"
+	]);
+	const [open, setOpen] = createSignal(false);
+	function settle(confirmed) {
+		setOpen(false);
+		(confirmed ? own.onConfirm : own.onCancel)?.();
+	}
+	return createComponent(Popover$1.Root, {
+		get open() {
+			return open();
+		},
+		onOpenChange: (details) => setOpen(details.open),
+		positioning: { placement: "top" },
+		get children() {
+			return [createComponent(Popover$1.Trigger, { asChild: (propsFn) => (() => {
+				var _el$3 = _tmpl$3$5();
+				spread(_el$3, mergeProps(propsFn, rest), false, true);
+				insert(_el$3, () => own.children);
+				return _el$3;
+			})() }), createComponent(Portal, { get children() {
+				return createComponent(Popover$1.Positioner, { get children() {
+					return createComponent(Popover$1.Content, {
+						"class": "bs-popconfirm",
+						get children() {
+							return [(() => {
+								var _el$ = _tmpl$$11();
+								insert(_el$, () => own.message);
+								return _el$;
+							})(), (() => {
+								var _el$2 = _tmpl$2$5();
+								insert(_el$2, createComponent(Button, {
+									variant: "ghost",
+									size: "sm",
+									onClick: () => settle(false),
+									get children() {
+										return own.cancelText ?? "Cancel";
+									}
+								}), null);
+								insert(_el$2, createComponent(Button, {
+									size: "sm",
+									onClick: () => settle(true),
+									get children() {
+										return own.confirmText ?? "Confirm";
+									}
+								}), null);
+								return _el$2;
+							})()];
+						}
+					});
+				} });
+			} })];
+		}
+	});
+}
+injectComponentStyle("popconfirm");
+//#endregion
 //#region src/components/popover/index.ts
 /** Ark's Popover, dressed in the paper-and-ink system: a paper vessel that
 * dissolves in on elevation, anchored to its trigger by a whisker arrow. The
@@ -1342,6 +3907,79 @@ injectComponentStyle("popover");
 const Progress = Progress$1;
 injectComponentStyle("progress");
 //#endregion
+//#region src/components/progress-group/index.tsx
+var _tmpl$$10 = /*#__PURE__*/ template(`<div data-scope=progress-group data-part=legend>`);
+var _tmpl$2$4 = /*#__PURE__*/ template(`<div><div data-scope=progress-group data-part=track>`);
+var _tmpl$3$4 = /*#__PURE__*/ template(`<div data-scope=progress-group data-part=segment role=progressbar aria-valuemin=0>`);
+var _tmpl$4$2 = /*#__PURE__*/ template(`<div data-scope=progress-group data-part=legend-item><span data-scope=progress-group data-part=swatch aria-hidden=true></span><span data-scope=progress-group data-part=legend-label></span><span data-scope=progress-group data-part=legend-value>`);
+function ProgressGroup(props) {
+	const [own, rest] = splitProps(props, [
+		"segments",
+		"max",
+		"showLegend"
+	]);
+	const total = () => own.max ?? own.segments.reduce((sum, segment) => sum + segment.value, 0);
+	const share = (value) => {
+		const whole = total();
+		return whole > 0 ? `${value / whole * 100}%` : "0%";
+	};
+	const nameOf = (segment, index) => segment.label ?? segment.pigment ?? `Segment ${index + 1}`;
+	return (() => {
+		var _el$ = _tmpl$2$4(), _el$2 = _el$.firstChild;
+		spread(_el$, mergeProps(rest, {
+			"data-scope": "progress-group",
+			"data-part": "root"
+		}), false, true);
+		insert(_el$2, createComponent(For, {
+			get each() {
+				return own.segments;
+			},
+			children: (segment, index) => (() => {
+				var _el$4 = _tmpl$3$4();
+				effect((_p$) => {
+					var _v$ = segment.pigment, _v$2 = segment.value, _v$3 = total(), _v$4 = nameOf(segment, index()), _v$5 = share(segment.value);
+					_v$ !== _p$.e && setAttribute(_el$4, "data-pigment", _p$.e = _v$);
+					_v$2 !== _p$.t && setAttribute(_el$4, "aria-valuenow", _p$.t = _v$2);
+					_v$3 !== _p$.a && setAttribute(_el$4, "aria-valuemax", _p$.a = _v$3);
+					_v$4 !== _p$.o && setAttribute(_el$4, "aria-label", _p$.o = _v$4);
+					_v$5 !== _p$.i && setStyleProperty(_el$4, "inline-size", _p$.i = _v$5);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0,
+					o: void 0,
+					i: void 0
+				});
+				return _el$4;
+			})()
+		}));
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return own.showLegend ?? true;
+			},
+			get children() {
+				var _el$3 = _tmpl$$10();
+				insert(_el$3, createComponent(For, {
+					get each() {
+						return own.segments;
+					},
+					children: (segment, index) => (() => {
+						var _el$5 = _tmpl$4$2(), _el$7 = _el$5.firstChild.nextSibling, _el$8 = _el$7.nextSibling;
+						insert(_el$7, () => nameOf(segment, index()));
+						insert(_el$8, () => String(segment.value));
+						effect(() => setAttribute(_el$5, "data-pigment", segment.pigment));
+						return _el$5;
+					})()
+				}));
+				return _el$3;
+			}
+		}), null);
+		return _el$;
+	})();
+}
+injectComponentStyle("progress-group");
+//#endregion
 //#region src/components/qr-code/index.ts
 /** Ark's QrCode, dressed in the paper-and-ink system: the pattern prints in
 * ink on the page, with an optional paper badge and a seal-cut download
@@ -1391,12 +4029,12 @@ const Select = Select$1;
 injectComponentStyle("select");
 //#endregion
 //#region src/components/separator/index.tsx
-var _tmpl$$5 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$$9 = /*#__PURE__*/ template(`<div>`);
 function Separator(props) {
-	const [own, rest] = splitProps$1(props, ["orientation", "decorative"]);
+	const [own, rest] = splitProps(props, ["orientation", "decorative"]);
 	const orientation = () => own.orientation ?? "horizontal";
 	return (() => {
-		var _el$ = _tmpl$$5();
+		var _el$ = _tmpl$$9();
 		spread(_el$, mergeProps(rest, {
 			get role() {
 				return own.decorative ? "none" : "separator";
@@ -1424,10 +4062,10 @@ const SignaturePad = SignaturePad$1;
 injectComponentStyle("signature-pad");
 //#endregion
 //#region src/components/skeleton/index.tsx
-var _tmpl$$4 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$$8 = /*#__PURE__*/ template(`<div>`);
 function Skeleton(props) {
 	return (() => {
-		var _el$ = _tmpl$$4();
+		var _el$ = _tmpl$$8();
 		spread(_el$, mergeProps(props, {
 			"data-scope": "skeleton",
 			"data-part": "root"
@@ -1446,13 +4084,13 @@ const Slider = Slider$1;
 injectComponentStyle("slider");
 //#endregion
 //#region src/components/spinner/index.tsx
-var _tmpl$$3 = /*#__PURE__*/ template(`<span><svg viewBox="0 0 24 24"fill=none aria-hidden=true><circle cx=12 cy=12 r=9 stroke=currentColor stroke-opacity=0.2 stroke-width=2.5></circle><path d="M21 12a9 9 0 0 0-9-9"stroke=currentColor stroke-width=2.5 stroke-linecap=round>`);
+var _tmpl$$7 = /*#__PURE__*/ template(`<span><svg viewBox="0 0 24 24"fill=none aria-hidden=true><circle cx=12 cy=12 r=9 stroke=currentColor stroke-opacity=0.2 stroke-width=2.5></circle><path d="M21 12a9 9 0 0 0-9-9"stroke=currentColor stroke-width=2.5 stroke-linecap=round>`);
 /** A wheel of waiting: one arc of ink turning about its center. Quiet by
 * default — it reports progress without claiming attention. */
 function Spinner(props) {
-	const [own, rest] = splitProps$1(props, ["size"]);
+	const [own, rest] = splitProps(props, ["size"]);
 	return (() => {
-		var _el$ = _tmpl$$3();
+		var _el$ = _tmpl$$7();
 		spread(_el$, mergeProps(rest, {
 			"role": "status",
 			get ["aria-label"]() {
@@ -1469,6 +4107,123 @@ function Spinner(props) {
 }
 injectComponentStyle("spinner");
 //#endregion
+//#region src/components/split-button/index.tsx
+var _tmpl$$6 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2$3 = /*#__PURE__*/ template(`<button>`);
+var _tmpl$3$3 = /*#__PURE__*/ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m6 9 6 6 6-6">`);
+/**
+* A primary action with its alternatives one seam away: the main button
+* fires `onClick`, the fitted arrow opens a paper vessel of the same
+* register whose entries call `onSelect` with their value. The arrow is
+* the menu machine's trigger with the button recipe riding over it —
+* the machine keeps the element (positioning, focus, `data-state`), the
+* button stylesheet's trigger register dresses it. The popup keeps the
+* menu parts untouched.
+*/
+function SplitButton(props) {
+	const [own, rest] = splitProps(props, [
+		"label",
+		"items",
+		"variant",
+		"tone",
+		"size",
+		"disabled",
+		"onClick",
+		"onSelect",
+		"children"
+	]);
+	const variant = () => own.variant ?? "solid";
+	const tone = () => own.tone ?? "ink";
+	const size = () => own.size ?? "md";
+	return (() => {
+		var _el$ = _tmpl$$6();
+		spread(_el$, mergeProps(rest, {
+			"data-scope": "split-button",
+			"data-part": "root"
+		}), false, true);
+		insert(_el$, createComponent(Button, {
+			get variant() {
+				return variant();
+			},
+			get tone() {
+				return tone();
+			},
+			get size() {
+				return size();
+			},
+			get disabled() {
+				return own.disabled;
+			},
+			onClick: (event) => own.onClick?.(event),
+			get children() {
+				return own.label;
+			}
+		}), null);
+		insert(_el$, createComponent(Menu$1.Root, {
+			positioning: { placement: "bottom-end" },
+			get children() {
+				return [createComponent(Menu$1.Trigger, { asChild: (propsFn) => (() => {
+					var _el$2 = _tmpl$2$3();
+					spread(_el$2, mergeProps(propsFn, {
+						"type": "button",
+						get disabled() {
+							return own.disabled;
+						},
+						"aria-label": "More actions",
+						get ["data-variant"]() {
+							return variant();
+						},
+						get ["data-tone"]() {
+							return tone();
+						},
+						get ["data-size"]() {
+							return size();
+						},
+						"data-square": "true",
+						"data-motion": "ink-ripple lit"
+					}), false, true);
+					insert(_el$2, chevronDown);
+					return _el$2;
+				})() }), createComponent(Portal, { get children() {
+					return createComponent(Menu$1.Positioner, { get children() {
+						return createComponent(Menu$1.Content, { get children() {
+							return createComponent(For, {
+								get each() {
+									return own.items ?? [];
+								},
+								children: (entry) => createComponent(Menu$1.Item, {
+									get value() {
+										return entry.value;
+									},
+									get disabled() {
+										return entry.disabled;
+									},
+									get ["data-danger"]() {
+										return entry.danger ? "" : void 0;
+									},
+									onSelect: () => own.onSelect?.(entry.value),
+									get children() {
+										return createComponent(Menu$1.ItemText, { get children() {
+											return entry.label;
+										} });
+									}
+								})
+							});
+						} });
+					} });
+				} })];
+			}
+		}), null);
+		return _el$;
+	})();
+}
+/** One stroke pointing down: all a fitted dropdown arrow needs. */
+function chevronDown() {
+	return _tmpl$3$3();
+}
+injectComponentStyle("split-button");
+injectComponentStyle("menu");
+//#endregion
 //#region src/components/splitter/index.ts
 /** Ark's Splitter, dressed in the paper-and-ink system: panels divide on
 * a hairline and a small paper-seal thumb answers the hand. The API is
@@ -1476,21 +4231,59 @@ injectComponentStyle("spinner");
 const Splitter = Splitter$1;
 injectComponentStyle("splitter");
 //#endregion
+//#region src/components/stack/index.tsx
+var _tmpl$$5 = /*#__PURE__*/ template(`<div>`);
+/** Whitespace chosen by name: the named steps point at the space ramp so
+* siblings are held apart by one token, never by ad-hoc margins. */
+const gapVars = {
+	none: "0",
+	xs: "var(--bs-gap-xs)",
+	sm: "var(--bs-gap-sm)",
+	md: "var(--bs-gap-md)",
+	lg: "var(--bs-gap-lg)",
+	xl: "var(--bs-gap-xl)"
+};
+function Stack(props) {
+	const [own, rest] = splitProps(props, [
+		"direction",
+		"gap",
+		"wrap",
+		"align",
+		"justify"
+	]);
+	return (() => {
+		var _el$ = _tmpl$$5();
+		spread(_el$, mergeProps(rest, {
+			get style() {
+				return {
+					...rest.style,
+					"--bs-stack-gap": gapVars[own.gap ?? "md"] ?? gapVars.md,
+					"align-items": own.align,
+					"justify-content": own.justify,
+					"flex-wrap": own.wrap ? "wrap" : void 0
+				};
+			},
+			"data-scope": "stack",
+			"data-part": "root",
+			get ["data-direction"]() {
+				return own.direction ?? "column";
+			}
+		}), false, false);
+		return _el$;
+	})();
+}
+injectComponentStyle("stack");
+//#endregion
 //#region src/components/stat/index.tsx
-var _tmpl$$2 = /*#__PURE__*/ template(`<tag>`);
-var _tmpl$2$1 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$$4 = /*#__PURE__*/ template(`<span>`);
 function part$2(name, tag) {
 	function Component(props) {
-		return (() => {
-			var _el$ = _tmpl$$2();
-			spread(_el$, mergeProps(props, {
-				"data-scope": "stat",
-				get ["data-part"]() {
-					return name.toLowerCase();
-				}
-			}), false, false);
-			return _el$;
-		})();
+		return createComponent(tag, mergeProps(props, {
+			"data-scope": "stat",
+			get ["data-part"]() {
+				return name.toLowerCase();
+			}
+		}));
 	}
 	return Component;
 }
@@ -1501,17 +4294,17 @@ const Description = part$2("Description", "p");
 /** The delta reads the direction in the fixed semantic pigments; an
 * explicit `data-direction` attribute on the consumer side still wins. */
 function Delta(props) {
-	const [own, rest] = splitProps$1(props, ["direction"]);
+	const [own, rest] = splitProps(props, ["direction"]);
 	return (() => {
-		var _el$2 = _tmpl$2$1();
-		spread(_el$2, mergeProps(rest, {
+		var _el$ = _tmpl$$4();
+		spread(_el$, mergeProps(rest, {
 			"data-scope": "stat",
 			"data-part": "delta",
 			get ["data-direction"]() {
 				return rest["data-direction"] ?? own.direction ?? "flat";
 			}
 		}), false, false);
-		return _el$2;
+		return _el$;
 	})();
 }
 const Stat = Object.assign(Root$1, {
@@ -1551,16 +4344,16 @@ const Switch = Switch$1;
 injectComponentStyle("switch");
 //#endregion
 //#region src/components/table/index.tsx
-var _tmpl$$1 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m9 6 6 6-6 6">`);
-var _tmpl$2 = /*#__PURE__*/ template(`<input type=checkbox aria-label="Select row">`);
-var _tmpl$3 = /*#__PURE__*/ template(`<div data-scope=table data-part=cell-main><button type=button data-scope=table data-part=expander>`);
-var _tmpl$4 = /*#__PURE__*/ template(`<div role=cell data-scope=table data-part=cell>`);
-var _tmpl$5 = /*#__PURE__*/ template(`<div role=row data-scope=table data-part=row>`);
-var _tmpl$6 = /*#__PURE__*/ template(`<div role=columnheader data-scope=table data-part=header-cell>`);
+var _tmpl$$3 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m9 6 6 6-6 6">`);
+var _tmpl$2$2 = /*#__PURE__*/ template(`<input type=checkbox>`);
+var _tmpl$3$2 = /*#__PURE__*/ template(`<div data-scope=table data-part=cell-main><button type=button data-scope=table data-part=expander>`);
+var _tmpl$4$1 = /*#__PURE__*/ template(`<div role=cell data-scope=table data-part=cell>`);
+var _tmpl$5$1 = /*#__PURE__*/ template(`<div role=row data-scope=table data-part=row>`);
+var _tmpl$6$1 = /*#__PURE__*/ template(`<div role=columnheader data-scope=table data-part=header-cell>`);
 var _tmpl$7 = /*#__PURE__*/ template(`<input type=text data-scope=table data-part=header-filter placeholder=Filter>`);
 var _tmpl$8 = /*#__PURE__*/ template(`<div data-scope=table data-part=root><div data-scope=table data-part=viewport><div role=table data-scope=table data-part=table><div role=rowgroup data-scope=table data-part=header></div><div role=rowgroup data-scope=table data-part=body>`);
 var _tmpl$9 = /*#__PURE__*/ template(`<div data-scope=table data-part=toolbar><input type=search data-scope=table data-part=global-filter aria-label="Filter all columns">`);
-var _tmpl$0 = /*#__PURE__*/ template(`<div role=columnheader data-scope=table data-part=header-cell><input type=checkbox aria-label="Select all rows">`);
+var _tmpl$0 = /*#__PURE__*/ template(`<div role=columnheader data-scope=table data-part=header-cell><input type=checkbox>`);
 var _tmpl$1 = /*#__PURE__*/ template(`<div data-scope=table data-part=empty>`);
 var _tmpl$10 = /*#__PURE__*/ template(`<div role=rowgroup data-scope=table data-part=footer>`);
 var _tmpl$11 = /*#__PURE__*/ template(`<div role=columnheader data-scope=table data-part=footer-cell>`);
@@ -1616,7 +4409,7 @@ function mark(el, attr, on) {
 	if (on) el.setAttribute(attr, "");
 	else el.removeAttribute(attr);
 }
-const chevronGlyph = _tmpl$$1();
+const chevronGlyph = _tmpl$$3();
 function DataTable(props) {
 	if (props.virtual && props.merge) console.warn("[DataTable] `virtual` and `merge` are mutually exclusive; merge wins.");
 	/** Features follow the construction-time switches: sorting, selection,
@@ -1741,17 +4534,18 @@ function DataTable(props) {
 	* stylesheet reads. */
 	function pinAttrs(column) {
 		const pinned = column.getIsPinned();
-		const attrs = { "data-pinned": pinned || void 0 };
-		if (!pinned) return attrs;
+		if (!pinned) return { "data-pinned": void 0 };
 		const offset = pinned === "start" ? column.getStart("start") : column.getAfter("end");
 		const siblings = leafIds();
 		const index = siblings.indexOf(column.id);
 		const prev = index > 0 ? table.getColumn(siblings[index - 1]) : void 0;
 		const next = index < siblings.length - 1 ? table.getColumn(siblings[index + 1]) : void 0;
-		attrs["data-last-pinned"] = pinned === "start" && next?.getIsPinned() !== "start" ? "" : void 0;
-		attrs["data-first-pinned"] = pinned === "end" && prev?.getIsPinned() !== "end" ? "" : void 0;
-		attrs.style = { "--pin-offset": `${offset}px` };
-		return attrs;
+		return {
+			"data-pinned": pinned,
+			"data-last-pinned": pinned === "start" && next?.getIsPinned() !== "start" ? "" : void 0,
+			"data-first-pinned": pinned === "end" && prev?.getIsPinned() !== "end" ? "" : void 0,
+			style: { "--pin-offset": `${offset}px` }
+		};
 	}
 	let dragColId = null;
 	let dragRowId = null;
@@ -1923,14 +4717,17 @@ function DataTable(props) {
 		};
 		let content;
 		if (column.id === SELECT_COL_ID) content = (() => {
-			var _el$2 = _tmpl$2();
-			_el$2.addEventListener("change", () => row.toggleSelected(!row.getIsSelected()));
-			_el$2.indeterminate = false;
-			effect(() => _el$2.checked = row.getIsSelected());
+			var _el$2 = _tmpl$2$2();
+			spread(_el$2, mergeProps({ get checked() {
+				return row.getIsSelected();
+			} }, { indeterminate: false }, {
+				"aria-label": "Select row",
+				"onchange": () => row.toggleSelected(!row.getIsSelected())
+			}), false, false);
 			return _el$2;
 		})();
 		else if (isExpandHost) content = (() => {
-			var _el$3 = _tmpl$3(), _el$4 = _el$3.firstChild;
+			var _el$3 = _tmpl$3$2(), _el$4 = _el$3.firstChild;
 			_el$4.$$click = () => row.toggleExpanded();
 			insert(_el$4, chevronGlyph);
 			insert(_el$3, createComponent(FlexRender, { cell }), null);
@@ -1951,7 +4748,7 @@ function DataTable(props) {
 		})();
 		else content = createComponent(FlexRender, { cell });
 		return (() => {
-			var _el$5 = _tmpl$4();
+			var _el$5 = _tmpl$4$1();
 			setAttribute(_el$5, "data-spanned", rowSpan > 1 ? "" : void 0);
 			spread(_el$5, mergeProps({ get ["data-numeric"]() {
 				return column.columnDef.meta?.numeric ? "" : void 0;
@@ -1970,7 +4767,7 @@ function DataTable(props) {
 		} : {};
 		const draggable = rowDraggable();
 		return (() => {
-			var _el$6 = _tmpl$5();
+			var _el$6 = _tmpl$5$1();
 			addEventListener(_el$6, "dragend", draggable ? onRowDragEnd : void 0);
 			addEventListener(_el$6, "drop", draggable ? (e) => onRowDrop(row, e) : void 0);
 			addEventListener(_el$6, "dragleave", draggable ? onRowDragLeave : void 0);
@@ -2002,7 +4799,7 @@ function DataTable(props) {
 		const canFilter = props.filterable && column.getCanFilter();
 		const canDrag = !!props.reorderable && column.id !== SELECT_COL_ID && !column.getIsPinned();
 		return (() => {
-			var _el$7 = _tmpl$6();
+			var _el$7 = _tmpl$6$1();
 			setAttribute(_el$7, "data-sortable", canSort || void 0);
 			setAttribute(_el$7, "data-sort", sorted || void 0);
 			setAttribute(_el$7, "data-draggable", canDrag || void 0);
@@ -2058,7 +4855,7 @@ function DataTable(props) {
 				return table.getHeaderGroups();
 			},
 			children: (group) => (() => {
-				var _el$14 = _tmpl$5();
+				var _el$14 = _tmpl$5$1();
 				insert(_el$14, createComponent(For, {
 					get each() {
 						return group.headers;
@@ -2070,9 +4867,11 @@ function DataTable(props) {
 						return (() => {
 							var _el$15 = _tmpl$0(), _el$16 = _el$15.firstChild;
 							spread(_el$15, mergeProps(() => pinAttrs(column)), false, true);
-							_el$16.addEventListener("change", () => table.toggleAllRowsSelected(!all));
 							_el$16.checked = all;
-							effect(() => _el$16.indeterminate = table.getIsSomeRowsSelected() && !all);
+							spread(_el$16, mergeProps(() => ({ indeterminate: table.getIsSomeRowsSelected() && !all }), {
+								"aria-label": "Select all rows",
+								"onchange": () => table.toggleAllRowsSelected(!all)
+							}), false, false);
 							return _el$15;
 						})();
 					}
@@ -2111,7 +4910,7 @@ function DataTable(props) {
 						return table.getFooterGroups();
 					},
 					children: (group) => (() => {
-						var _el$19 = _tmpl$5();
+						var _el$19 = _tmpl$5$1();
 						insert(_el$19, createComponent(For, {
 							get each() {
 								return group.headers;
@@ -2272,22 +5071,17 @@ const Toggle = Toggle$1;
 injectComponentStyle("toggle");
 //#endregion
 //#region src/components/typography/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<tag>`);
 /** The typographic voices, named so prose can ask for one: display and
 * heading ride the song-serif, the rest ride the hei. Nothing here is
 * decorative — hierarchy is size, weight, and space. */
 function part(name, tag) {
 	function Component(props) {
-		return (() => {
-			var _el$ = _tmpl$();
-			spread(_el$, mergeProps(props, {
-				"data-scope": "typography",
-				get ["data-part"]() {
-					return name.toLowerCase();
-				}
-			}), false, false);
-			return _el$;
-		})();
+		return createComponent(tag, mergeProps(props, {
+			"data-scope": "typography",
+			get ["data-part"]() {
+				return name.toLowerCase();
+			}
+		}));
 	}
 	return Component;
 }
@@ -2314,6 +5108,165 @@ injectComponentStyle("typography");
 const ToggleGroup = ToggleGroup$1;
 injectComponentStyle("toggle-group");
 //#endregion
+//#region src/components/transfer/index.tsx
+var _tmpl$$2 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m5 12.5 5 5L19 7">`);
+var _tmpl$2$1 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path>`);
+var _tmpl$3$1 = /*#__PURE__*/ template(`<div data-scope=transfer data-part=search>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div data-scope=transfer data-part=panel><div data-scope=transfer data-part=head><span data-scope=transfer data-part=title></span><span data-scope=transfer data-part=count></span></div><div data-scope=transfer data-part=list>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<p data-scope=transfer data-part=empty>Nothing here`);
+var _tmpl$6 = /*#__PURE__*/ template(`<div><div data-scope=transfer data-part=operations>`);
+function checkGlyph() {
+	return _tmpl$$2();
+}
+function arrowGlyph(direction) {
+	return (() => {
+		var _el$2 = _tmpl$2$1(), _el$3 = _el$2.firstChild;
+		setAttribute(_el$3, "d", direction === "right" ? "M5 12h14m-6-6 6 6-6 6" : "M19 12H5m6-6-6 6 6 6");
+		return _el$2;
+	})();
+}
+/**
+* Two ledgers and a crossing: items sit in the source column until the
+* reader checks them and walks them across — and back, the same way.
+* `value` is the target column's value list; everything else in
+* `data` stays on the left. `searchable` adds a filter line to each
+* panel.
+*/
+function Transfer(props) {
+	const [own, rest] = splitProps(props, [
+		"value",
+		"data",
+		"titles",
+		"searchable",
+		"disabled",
+		"onValueChange"
+	]);
+	const [checkedSource, setCheckedSource] = createSignal(/* @__PURE__ */ new Set());
+	const [checkedTarget, setCheckedTarget] = createSignal(/* @__PURE__ */ new Set());
+	const [sourceQuery, setSourceQuery] = createSignal("");
+	const [targetQuery, setTargetQuery] = createSignal("");
+	const target = () => new Set(own.value ?? []);
+	function panelItems(values, inTarget, query) {
+		return values.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()) && target().has(item.value) === inTarget);
+	}
+	function toggle(set, value, setChecked) {
+		const next = new Set(set);
+		if (next.has(value)) next.delete(value);
+		else next.add(value);
+		setChecked(next);
+	}
+	function move(toTarget) {
+		const moving = toTarget ? checkedSource() : checkedTarget();
+		if (moving.size === 0) return;
+		const next = toTarget ? [...own.value ?? [], ...moving].filter((value, index, all) => all.indexOf(value) === index) : (own.value ?? []).filter((value) => !moving.has(value));
+		(toTarget ? setCheckedSource : setCheckedTarget)(/* @__PURE__ */ new Set());
+		own.onValueChange?.(next);
+	}
+	function panel(side, title, query, setQuery, checked, setChecked, items) {
+		return (() => {
+			var _el$4 = _tmpl$4(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$9 = _el$5.nextSibling;
+			setAttribute(_el$4, "data-side", side);
+			insert(_el$6, title);
+			insert(_el$7, () => String(items.length));
+			insert(_el$4, createComponent(Show, {
+				get when() {
+					return own.searchable;
+				},
+				get children() {
+					var _el$8 = _tmpl$3$1();
+					insert(_el$8, createComponent(Input, {
+						size: "sm",
+						get value() {
+							return query();
+						},
+						onValueChange: setQuery,
+						placeholder: "Filter…",
+						"aria-label": `Filter ${title}`
+					}));
+					return _el$8;
+				}
+			}), _el$9);
+			insert(_el$9, createComponent(Show, {
+				get when() {
+					return items.length > 0;
+				},
+				get fallback() {
+					return _tmpl$5();
+				},
+				get children() {
+					return createComponent(For, {
+						each: items,
+						children: (item) => createComponent(Checkbox$1.Root, {
+							get checked() {
+								return checked().has(item.value);
+							},
+							get disabled() {
+								return own.disabled || item.disabled === true;
+							},
+							onCheckedChange: () => toggle(checked(), item.value, setChecked),
+							get children() {
+								return [
+									createComponent(Checkbox$1.Control, { get children() {
+										return createComponent(Checkbox$1.Indicator, { get children() {
+											return checkGlyph();
+										} });
+									} }),
+									createComponent(Checkbox$1.Label, {
+										"data-part": "label",
+										get children() {
+											return item.label;
+										}
+									}),
+									createComponent(Checkbox$1.HiddenInput, {})
+								];
+							}
+						})
+					});
+				}
+			}));
+			return _el$4;
+		})();
+	}
+	return (() => {
+		var _el$1 = _tmpl$6(), _el$10 = _el$1.firstChild;
+		spread(_el$1, mergeProps(rest, {
+			"data-scope": "transfer",
+			"data-part": "root"
+		}), false, true);
+		insert(_el$1, () => panel("source", own.titles?.[0] ?? "Source", sourceQuery, setSourceQuery, checkedSource, setCheckedSource, panelItems(own.data, false, sourceQuery())), _el$10);
+		insert(_el$10, createComponent(Button, {
+			variant: "outline",
+			size: "sm",
+			square: true,
+			get disabled() {
+				return checkedSource().size === 0 || own.disabled;
+			},
+			"aria-label": "Move right",
+			onClick: () => move(true),
+			get children() {
+				return arrowGlyph("right");
+			}
+		}), null);
+		insert(_el$10, createComponent(Button, {
+			variant: "outline",
+			size: "sm",
+			square: true,
+			get disabled() {
+				return checkedTarget().size === 0 || own.disabled;
+			},
+			"aria-label": "Move left",
+			onClick: () => move(false),
+			get children() {
+				return arrowGlyph("left");
+			}
+		}), null);
+		insert(_el$1, () => panel("target", own.titles?.[1] ?? "Target", targetQuery, setTargetQuery, checkedTarget, setCheckedTarget, panelItems(own.data, true, targetQuery())), null);
+		return _el$1;
+	})();
+}
+injectComponentStyle("transfer");
+injectComponentStyle("checkbox");
+//#endregion
 //#region src/components/tooltip/index.ts
 /** Ark's Tooltip, dressed in the paper-and-ink system: the smallest
 * vessel — a tight chip of ink that dissolves in over its anchor. The
@@ -2331,6 +5284,181 @@ injectComponentStyle("tooltip");
 const Tour = Tour$1;
 injectComponentStyle("tour");
 //#endregion
+//#region src/components/tree-select/index.tsx
+var _tmpl$$1 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m9 18 6-6-6-6">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<button><span data-part=chevron aria-hidden=true>`);
+function chevron() {
+	return _tmpl$$1();
+}
+/**
+* A tree behind a field: the control reads like an input, the vessel
+* below walks the hierarchy, and one leaf click closes the deal. Single
+* selection — the chosen label rides on the control, its value rides in
+* `value`.
+*/
+function TreeSelect(props) {
+	const [own, rest] = splitProps(props, [
+		"value",
+		"data",
+		"placeholder",
+		"disabled",
+		"onValueChange"
+	]);
+	const [open, setOpen] = createSignal(false);
+	const collection = createMemo(() => createTreeCollection$1({
+		nodeToValue: (node) => node.value,
+		nodeToString: (node) => node.label,
+		rootNode: {
+			value: "ROOT",
+			label: "",
+			children: own.data
+		}
+	}));
+	const firstLevel = () => (own.data ?? []).map((node) => node.value);
+	const label = () => {
+		let found;
+		const walk = (nodes) => {
+			for (const node of nodes ?? []) {
+				if (node.value === own.value) found = node.label;
+				walk(node.children);
+			}
+		};
+		walk(own.data);
+		return found;
+	};
+	function pick(details) {
+		const [value] = details.selectedValue;
+		if (value == null) return;
+		own.onValueChange?.(value);
+		setOpen(false);
+	}
+	function Row(rowProps) {
+		return createComponent(TreeView$1.NodeProvider, {
+			get node() {
+				return rowProps.node;
+			},
+			get indexPath() {
+				return rowProps.indexPath;
+			},
+			get children() {
+				return createComponent(Show, {
+					get when() {
+						return rowProps.node.children;
+					},
+					get fallback() {
+						return createComponent(TreeView$1.Item, { asChild: (propsFn) => (() => {
+							var _el$2 = _tmpl$2();
+							spread(_el$2, mergeProps(propsFn, { "style": {
+								display: "flex",
+								"inline-size": "100%"
+							} }), false, true);
+							insert(_el$2, createComponent(TreeView$1.ItemText, { get children() {
+								return rowProps.node.label;
+							} }));
+							return _el$2;
+						})() });
+					},
+					get children() {
+						return createComponent(TreeView$1.Branch, { get children() {
+							return [createComponent(TreeView$1.BranchControl, { get children() {
+								return [createComponent(TreeView$1.BranchIndicator, { get children() {
+									return chevron();
+								} }), createComponent(TreeView$1.BranchText, { get children() {
+									return rowProps.node.label;
+								} })];
+							} }), createComponent(TreeView$1.BranchContent, { get children() {
+								return [createComponent(TreeView$1.BranchIndentGuide, {}), createComponent(For, {
+									get each() {
+										return rowProps.node.children;
+									},
+									children: (child, index) => createComponent(Row, {
+										node: child,
+										get indexPath() {
+											return [...rowProps.indexPath, index()];
+										}
+									})
+								})];
+							} })];
+						} });
+					}
+				});
+			}
+		});
+	}
+	return createComponent(Popover$1.Root, mergeProps(rest, {
+		get open() {
+			return open();
+		},
+		onOpenChange: (details) => setOpen(details.open),
+		positioning: {
+			sameWidth: true,
+			placement: "bottom-start"
+		},
+		get children() {
+			return [createComponent(Popover$1.Trigger, { asChild: (propsFn) => (() => {
+				var _el$3 = _tmpl$3(), _el$4 = _el$3.firstChild;
+				spread(_el$3, mergeProps(propsFn, {
+					"type": "button",
+					"data-scope": "tree-select",
+					"data-part": "control",
+					get ["data-open"]() {
+						return open() ? "" : void 0;
+					},
+					get ["data-placeholder"]() {
+						return label() == null ? "" : void 0;
+					},
+					get disabled() {
+						return own.disabled;
+					}
+				}), false, true);
+				insert(_el$3, () => label() ?? own.placeholder ?? "Select…", _el$4);
+				insert(_el$4, chevron);
+				return _el$3;
+			})() }), createComponent(Portal, { get children() {
+				return createComponent(Popover$1.Positioner, { get children() {
+					return createComponent(Popover$1.Content, {
+						"data-scope": "tree-select",
+						"data-part": "content",
+						get children() {
+							return createComponent(TreeView$1.Root, {
+								get collection() {
+									return collection();
+								},
+								selectionMode: "single",
+								get selectedValue() {
+									return memo(() => !!own.value)() ? [own.value] : [];
+								},
+								get defaultExpandedValue() {
+									return firstLevel();
+								},
+								onSelectionChange: pick,
+								get children() {
+									return createComponent(TreeView$1.Tree, { get children() {
+										return createComponent(For, {
+											get each() {
+												return collection().rootNode.children;
+											},
+											children: (node, index) => createComponent(Row, {
+												node,
+												get indexPath() {
+													return [index()];
+												}
+											})
+										});
+									} });
+								}
+							});
+						}
+					});
+				} });
+			} })];
+		}
+	}));
+}
+injectComponentStyle("tree-select");
+injectComponentStyle("tree-view");
+//#endregion
 //#region src/components/tree-view/index.ts
 /** Ark's TreeView, dressed in the paper-and-ink system: quiet rows where
 * selection is pure light on the paper, one hairline plumb line per depth,
@@ -2342,4 +5470,71 @@ injectComponentStyle("tour");
 const TreeView = TreeView$1;
 injectComponentStyle("tree-view");
 //#endregion
-export { Accordion, Action, Ai, Alert, AngleSlider, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, Button, Calendar, Card, Carousel, Checkbox, Chip, Clipboard, Collapsible, ColorPicker, Combobox, DataTable, DateInput, DatePicker, Dialog, Drawer, Editable, Empty, Field, Fieldset, FileUpload, FlexRender, FloatingPanel, Format, Frame, Highlight, HoverCard, ImageCropper, JsonTreeView, Kbd, Link, Listbox, Marquee, Menu, Message, Meter, NavigationMenu, NumberInput, PageHeader, Pagination, PasswordInput, PinInput, Popover, Progress, PromptInput, QrCode, RadioGroup, RatingGroup, Reasoning, Response, ScrollArea, SegmentGroup, Select, Separator, SignaturePad, Skeleton, Slider, Source, Spinner, Splitter, Stat, Steps, Suggestion, Swap, Switch, Tabs, TagsInput, Timeline, Timer, Toast, Toaster, Toc, Toggle, ToggleGroup, Tool, Tooltip, Tour, TreeView, Typography, createColumnHelper, createListCollection, createToaster, useTour };
+//#region src/components/watermark/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div><div data-scope=watermark data-part=content></div><div data-scope=watermark data-part=marks aria-hidden=true>`);
+/** Font-relative measures ride the root's own measure; absolute units
+* pass through untouched — the canvas needs a number, the prop may
+* speak in CSS. */
+function toPx(size) {
+	const root = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+	const value = Number.parseFloat(size) || 0;
+	if (size.includes("em")) return value * root;
+	return value;
+}
+function Watermark(props) {
+	const [own, rest] = splitProps(props, [
+		"content",
+		"opacity",
+		"rotate",
+		"fontSize"
+	]);
+	const [host, setHost] = createSignal();
+	const [tile, setTile] = createSignal("");
+	createEffect(() => {
+		const el = host();
+		if (!el) return;
+		const canvas = document.createElement("canvas");
+		const paint = canvas.getContext("2d");
+		if (!paint) return;
+		const styles = getComputedStyle(el);
+		const fontSizePx = toPx(own.fontSize ?? "0.875rem");
+		const font = `${styles.fontWeight} ${fontSizePx}px ${styles.fontFamily}`;
+		paint.font = font;
+		const textWidth = paint.measureText(own.content).width;
+		const margin = fontSizePx;
+		const boxWidth = Math.ceil(textWidth + margin * 2);
+		const boxHeight = Math.ceil(fontSizePx + margin * 2);
+		const radian = (own.rotate ?? -20) * Math.PI / 180;
+		const cos = Math.cos(radian);
+		const sin = Math.sin(radian);
+		const width = Math.ceil(Math.abs(boxWidth * cos) + Math.abs(boxHeight * sin));
+		const height = Math.ceil(Math.abs(boxWidth * sin) + Math.abs(boxHeight * cos));
+		const dpr = window.devicePixelRatio || 1;
+		canvas.width = width * dpr;
+		canvas.height = height * dpr;
+		paint.scale(dpr, dpr);
+		paint.translate(width / 2, height / 2);
+		paint.rotate(radian);
+		paint.globalAlpha = own.opacity ?? .06;
+		paint.font = font;
+		paint.textAlign = "center";
+		paint.textBaseline = "middle";
+		paint.fillStyle = styles.getPropertyValue("--bs-color-text-tertiary").trim() || styles.color;
+		paint.fillText(own.content, 0, 0);
+		setTile(`url(${canvas.toDataURL()})`);
+	});
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+		use(setHost, _el$);
+		spread(_el$, mergeProps(rest, {
+			"data-scope": "watermark",
+			"data-part": "root"
+		}), false, true);
+		insert(_el$2, () => rest.children);
+		effect((_$p) => setStyleProperty(_el$3, "background-image", tile()));
+		return _el$;
+	})();
+}
+injectComponentStyle("watermark");
+//#endregion
+export { Accordion, Action, Action as AiAction, Affix, Ai, AiActions, Attachment as AiAttachment, Attachment, Attachments as AiAttachments, Attachments, AiContent, AiConversation, AiLoader, Message as AiMessage, Message, PromptInput as AiPromptInput, PromptInput, Reasoning as AiReasoning, Reasoning, Response as AiResponse, Response, Source as AiSource, Source, Sources as AiSources, Sources, Suggestion as AiSuggestion, Suggestion, Tool as AiTool, Tool, Alert, AngleSlider, AspectRatio, AutoComplete, Avatar, AvatarGroup, BackTop, Badge, Banner, Breadcrumb, Button, ButtonGroup, ButtonGroupRoot, Calendar, Card, Carousel, CascadeSelect, Checkbox, CheckboxGroup, Chip, ClientOnly, Clipboard, Collapsible, ColorPicker, Combobox, Command, Comment, ConfigContextKey, ConfigProvider, Container, DataTable, DateInput, DatePicker, Descriptions, Dialog, DownloadTrigger, Drawer, DynamicInput, Editable, Ellipsis, Empty, Field, Fieldset, FileUpload, FlexRender, FloatButton, FloatButtonContextKey, FloatingPanel, FocusTrap, Form, FormField, Format, Frame, Grid, Highlight, HoverCard, Icon, Image, ImageCropper, ImageViewer, Input, InputGroup, JsonTreeView, Kbd, Layout, Link, List, Listbox, Marquee, Masonry, Mentions, MentionsVessel, Menu, Menubar, Meter, NavigationMenu, NumberInput, PageHeader, Pagination, PasswordInput, PinInput, Popconfirm, Popover, Presence, PresenceProvider, Progress, ProgressGroup, QrCode, RadioGroup, RatingGroup, ScrollArea, SegmentGroup, Select, Separator, SignaturePad, Skeleton, Slider, Spinner, SplitButton, Splitter, Stack, Stat, Steps, Swap, Switch, Tabs, TagsInput, Textarea, Timeline, Timer, Toast, Toaster, Toc, Toggle, ToggleGroup, Tooltip, Tour, Transfer, TreeSelect, TreeView, Typography, Watermark, createColumnHelper, createFileTreeCollection, createGridCollection, createToaster, createTreeCollection, useAsyncList, useConfig, useDownload, useListCollection, useListSelection, useMentions, usePresence, usePresenceContext, useTour };