@bysages/react 0.0.1 → 0.2.0

package/dist/index.mjs

@@ -1,32 +1,42 @@
 import { injectComponentStyle } from "@bysages/core";
 import { Accordion as Accordion$1 } from "@ark-ui/react/accordion";
-import { renderHtml } from "@tanstack/markdown/html";
-import { Children, cloneElement, createContext, isValidElement, useContext, useEffect, useLayoutEffect, useMemo, useReducer, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, createContext, isValidElement, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import { Field as Field$1, useFieldContext } from "@ark-ui/react/field";
+import { Popover as Popover$1 } from "@ark-ui/react/popover";
+import { Portal } from "@ark-ui/react/portal";
 import { Collapsible as Collapsible$1 } from "@ark-ui/react/collapsible";
-import { Field as Field$1 } from "@ark-ui/react/field";
+import { renderHtml } from "@tanstack/markdown/html";
 import { AngleSlider as AngleSlider$1 } from "@ark-ui/react/angle-slider";
+import { createFileTreeCollection, createGridCollection, createTreeCollection, useAsyncList, useListCollection, useListCollection as useListCollection$1, useListSelection } from "@ark-ui/react/collection";
+import { Combobox as Combobox$1 } from "@ark-ui/react/combobox";
 import { Avatar as Avatar$1 } from "@ark-ui/react/avatar";
 import { DatePicker as DatePicker$1 } from "@ark-ui/react/date-picker";
+import { useEnvironmentContext } from "@ark-ui/react/environment";
+import { useFilter, useLocaleContext } from "@ark-ui/react/locale";
+import * as cascade from "@zag-js/cascade-select";
+import { normalizeProps, useMachine } from "@zag-js/react";
 import { Carousel as Carousel$1 } from "@ark-ui/react/carousel";
 import { Checkbox as Checkbox$1 } from "@ark-ui/react/checkbox";
 import { Clipboard as Clipboard$1 } from "@ark-ui/react/clipboard";
+import { ClientOnly } from "@ark-ui/react/client-only";
 import { ColorPicker as ColorPicker$1 } from "@ark-ui/react/color-picker";
-import { Combobox as Combobox$1 } from "@ark-ui/react/combobox";
-import { DateInput as DateInput$1 } from "@ark-ui/react/date-input";
 import { Dialog as Dialog$1 } from "@ark-ui/react/dialog";
+import { DateInput as DateInput$1 } from "@ark-ui/react/date-input";
+import { DownloadTrigger, useDownload } from "@ark-ui/react/download-trigger";
 import { Drawer as Drawer$1 } from "@ark-ui/react/drawer";
 import { Editable as Editable$1 } from "@ark-ui/react/editable";
 import { Fieldset as Fieldset$1 } from "@ark-ui/react/fieldset";
 import { FileUpload as FileUpload$1 } from "@ark-ui/react/file-upload";
 import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/react/floating-panel";
+import { FocusTrap } from "@ark-ui/react/focus-trap";
 import { Format as Format$1 } from "@ark-ui/react/format";
 import { Frame as Frame$1 } from "@ark-ui/react/frame";
 import { Highlight as Highlight$1 } from "@ark-ui/react/highlight";
 import { HoverCard as HoverCard$1 } from "@ark-ui/react/hover-card";
 import { ImageCropper as ImageCropper$1 } from "@ark-ui/react/image-cropper";
 import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/react/json-tree-view";
-import { Listbox as Listbox$1, createListCollection } from "@ark-ui/react/listbox";
+import { Listbox as Listbox$1 } from "@ark-ui/react/listbox";
 import { Marquee as Marquee$1 } from "@ark-ui/react/marquee";
 import { Menu as Menu$1 } from "@ark-ui/react/menu";
 import { NavigationMenu as NavigationMenu$1 } from "@ark-ui/react/navigation-menu";
@@ -34,14 +44,14 @@ import { NumberInput as NumberInput$1 } from "@ark-ui/react/number-input";
 import { Pagination as Pagination$1 } from "@ark-ui/react/pagination";
 import { PasswordInput as PasswordInput$1 } from "@ark-ui/react/password-input";
 import { PinInput as PinInput$1 } from "@ark-ui/react/pin-input";
-import { Popover as Popover$1 } from "@ark-ui/react/popover";
+import { Presence, PresenceProvider, usePresence, usePresenceContext } from "@ark-ui/react/presence";
 import { Progress as Progress$1 } from "@ark-ui/react/progress";
 import { QrCode as QrCode$1 } from "@ark-ui/react/qr-code";
 import { RadioGroup as RadioGroup$1 } from "@ark-ui/react/radio-group";
 import { RatingGroup as RatingGroup$1 } from "@ark-ui/react/rating-group";
 import { ScrollArea as ScrollArea$1 } from "@ark-ui/react/scroll-area";
 import { SegmentGroup as SegmentGroup$1 } from "@ark-ui/react/segment-group";
-import { Select as Select$1 } from "@ark-ui/react/select";
+import { Select as Select$1, createListCollection } from "@ark-ui/react/select";
 import { SignaturePad as SignaturePad$1 } from "@ark-ui/react/signature-pad";
 import { Slider as Slider$1 } from "@ark-ui/react/slider";
 import { Splitter as Splitter$1 } from "@ark-ui/react/splitter";
@@ -59,7 +69,7 @@ import { Toggle as Toggle$1 } from "@ark-ui/react/toggle";
 import { ToggleGroup as ToggleGroup$1 } from "@ark-ui/react/toggle-group";
 import { Tooltip as Tooltip$1 } from "@ark-ui/react/tooltip";
 import { Tour as Tour$1, useTour } from "@ark-ui/react/tour";
-import { TreeView as TreeView$1 } from "@ark-ui/react/tree-view";
+import { TreeView as TreeView$1, createTreeCollection as createTreeCollection$1 } from "@ark-ui/react/tree-view";
 export * from "@bysages/core";
 //#region src/components/accordion/index.tsx
 /** Ark's Accordion, dressed in the paper-and-ink system: a ruled sheet
@@ -68,6 +78,21 @@ export * from "@bysages/core";
 const Accordion = Accordion$1;
 injectComponentStyle("accordion");
 //#endregion
+//#region src/components/affix/index.tsx
+function Affix({ offsetTop = "0px", offsetBottom = "0px", ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		style: {
+			...rest.style,
+			top: offsetTop,
+			bottom: offsetBottom
+		},
+		"data-scope": "affix",
+		"data-part": "root"
+	});
+}
+injectComponentStyle("affix");
+//#endregion
 //#region src/components/button/index.tsx
 function Button({ variant = "solid", tone = "ink", size = "md", square = false, asChild = false, disabled = false, type = "button", children, ...rest }) {
 	const partProps = {
@@ -93,12 +118,31 @@ function Button({ variant = "solid", tone = "ink", size = "md", square = false,
 }
 injectComponentStyle("button");
 //#endregion
-//#region src/components/collapsible/index.tsx
-/** 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");
+//#region src/components/ai-action/index.tsx
+function Action({ label, children, ...rest }) {
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "sm",
+		square: true,
+		"aria-label": label,
+		title: label,
+		...rest,
+		children
+	});
+}
+injectComponentStyle("ai");
+//#endregion
+//#region src/components/ai-message/index.tsx
+function Message({ role = "assistant", children, ...rest }) {
+	return /* @__PURE__ */ jsx("article", {
+		...rest,
+		"data-scope": "ai",
+		"data-part": "message",
+		"data-role": role,
+		children
+	});
+}
+injectComponentStyle("ai");
 //#endregion
 //#region src/components/field/index.tsx
 /** Ark's Field, dressed in the paper-and-ink system: a tracked label, a
@@ -108,38 +152,308 @@ injectComponentStyle("collapsible");
 const Field = Field$1;
 injectComponentStyle("field");
 //#endregion
-//#region src/components/ai/index.tsx
-/** 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 = {}) {
-	const Tag = tag;
-	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
-		...extra,
+//#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 a getter because hosts wrap it
+* differently (a bare textarea, a field part's ref).
+*
+* `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] = useState(false);
+	const [matches, setMatches] = useState([]);
+	const [active, setActive] = useState(0);
+	const anchorIndex = useRef(0);
+	const caretIndex = useRef(0);
+	const resolve = () => typeof options === "function" ? options() : options;
+	const closePopup = () => {
+		setPopupOpen(false);
+		setMatches([]);
+	};
+	const detect = () => {
+		const text = handlers.getText();
+		const caret = textarea()?.selectionStart ?? text.length;
+		caretIndex.current = caret;
+		const head = text.slice(0, caret);
+		const char = resolve().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 = resolve().items.filter((entry) => entry.label.toLowerCase().startsWith(token.toLowerCase()));
+		setMatches(found);
+		setActive(0);
+		anchorIndex.current = anchor;
+		setPopupOpen(found.length > 0);
+	};
+	const insert = (entry) => {
+		const text = handlers.getText();
+		const char = resolve().trigger ?? "@";
+		const next = text.slice(0, anchorIndex.current) + char + entry.label + " " + text.slice(caretIndex.current);
+		handlers.setText(next);
+		closePopup();
+		setTimeout(() => {
+			const el = textarea();
+			if (!el) return;
+			const caret = anchorIndex.current + char.length + entry.label.length + 1;
+			el.focus();
+			el.setSelectionRange(caret, caret);
+		}, 0);
+	};
+	/** 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((current) => (current + 1) % matches.length);
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			setActive((current) => (current - 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
+/** 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({ open = false, matches = [], active = 0, anchor = null, onInsert, onActiveChange, onOpenChange }) {
+	return /* @__PURE__ */ jsx(Popover$1.Root, {
+		open,
+		onOpenChange: (details) => onOpenChange?.(details.open),
+		positioning: {
+			placement: "bottom-start",
+			getAnchorRect: () => anchor?.getBoundingClientRect() ?? null
+		},
+		children: /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { children: /* @__PURE__ */ jsx(Popover$1.Content, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-scope": "mentions",
+				"data-part": "popup",
+				children: matches.map((entry, index) => /* @__PURE__ */ jsx("div", {
+					"data-scope": "mentions",
+					"data-part": "option",
+					"data-active": index === active ? "" : void 0,
+					onMouseEnter: () => onActiveChange?.(index),
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => onInsert?.(entry),
+					children: entry.label
+				}, entry.value))
+			})
+		}) }) })
+	});
+}
+function Mentions({ items = [], value, trigger = "@", placeholder, autoresize = false, invalid = false, onValueChange, children, ...rest }) {
+	const [internal, setInternal] = useState("");
+	const fieldRef = useRef(null);
+	const el = () => fieldRef.current;
+	const current = value ?? internal;
+	const mentions = useMentions({
+		items,
+		trigger
+	}, el, {
+		getText: () => el()?.value ?? current,
+		setText: (next) => {
+			setInternal(next);
+			onValueChange?.(next);
+		}
+	});
+	const handleChange = (event) => {
+		const node = event.currentTarget;
+		setInternal(node.value);
+		onValueChange?.(node.value);
+		mentions.onInput();
+	};
+	return /* @__PURE__ */ jsxs("div", {
 		...rest,
-		"data-scope": "ai",
-		"data-part": name.toLowerCase(),
-		children
+		"data-scope": "mentions",
+		"data-part": "root",
+		children: [
+			/* @__PURE__ */ jsx(Field.Textarea, {
+				ref: fieldRef,
+				autoresize,
+				rows: 3,
+				placeholder,
+				value: current,
+				onChange: handleChange,
+				onKeyDown: (event) => mentions.onKeydown(event),
+				"data-invalid": invalid || void 0,
+				"data-scope": "mentions",
+				"data-part": "textarea"
+			}),
+			/* @__PURE__ */ jsx(MentionsVessel, {
+				open: mentions.open,
+				matches: mentions.matches,
+				active: mentions.active,
+				anchor: el(),
+				onInsert: mentions.insert,
+				onActiveChange: mentions.setActive,
+				onOpenChange: (open) => {
+					if (!open) mentions.close();
+				}
+			}),
+			children
+		]
 	});
-	Component.displayName = "Ai" + name;
-	return Component;
 }
-const Conversation = part$9("Conversation", "div", {
-	role: "log",
-	"aria-label": "Conversation"
+injectComponentStyle("mentions");
+//#endregion
+//#region src/components/ai-prompt-input/index.tsx
+const arrowUpGlyph = /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 16 16",
+	width: 14,
+	height: 14,
+	"aria-hidden": "true",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 1.5,
+	strokeLinecap: "square",
+	children: /* @__PURE__ */ jsx("path", { d: "M8 13V3M3.5 7.5 8 3l4.5 4.5" })
 });
-const MessageContent = 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"
+const stopGlyph = /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 16 16",
+	width: 14,
+	height: 14,
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("rect", {
+		x: 4.5,
+		y: 4.5,
+		width: 7,
+		height: 7,
+		fill: "currentColor"
+	})
 });
+/** An empty slot leaves no part in the anatomy — the bare vessel keeps
+* its single-line posture. */
+function row(part, content) {
+	if (content == null || Array.isArray(content) && content.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-scope": "ai",
+		"data-part": part,
+		children: content
+	});
+}
+function PromptInput({ value, onValueChange, onSubmit, onStop, placeholder = "Send a message", disabled = false, busy = false, mentions, header, leading, trailing, footer, footerEnd, ...rest }) {
+	const fieldRef = useRef(null);
+	const mentionState = useMentions(() => ({
+		items: mentions?.items ?? [],
+		trigger: mentions?.trigger
+	}), () => fieldRef.current, {
+		getText: () => fieldRef.current?.value ?? value,
+		setText: (next) => onValueChange?.(next)
+	});
+	const mentionsActive = mentions != null;
+	const submit = () => {
+		const text = value.trim();
+		if (!text || disabled || busy) return;
+		onSubmit?.(text);
+		onValueChange?.("");
+	};
+	const seal = busy ? /* @__PURE__ */ jsx(Button, {
+		variant: "solid",
+		size: "sm",
+		square: true,
+		type: "button",
+		"aria-label": "Stop",
+		disabled,
+		onClick: () => onStop?.(),
+		children: stopGlyph
+	}) : /* @__PURE__ */ jsx(Button, {
+		variant: "solid",
+		size: "sm",
+		square: true,
+		type: "submit",
+		"aria-label": "Send",
+		disabled: disabled || !value.trim(),
+		children: arrowUpGlyph
+	});
+	const hasFooter = footer != null && (!Array.isArray(footer) || footer.length > 0);
+	return /* @__PURE__ */ jsxs("form", {
+		...rest,
+		"data-scope": "ai",
+		"data-part": "prompt",
+		onSubmit: (event) => {
+			event.preventDefault();
+			submit();
+		},
+		children: [
+			row("prompt-header", header),
+			/* @__PURE__ */ jsxs("div", {
+				"data-scope": "ai",
+				"data-part": "prompt-main",
+				children: [
+					row("prompt-leading", leading),
+					/* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsx(Field.Textarea, {
+						ref: fieldRef,
+						autoresize: true,
+						rows: 1,
+						value,
+						placeholder,
+						disabled,
+						onChange: (event) => {
+							onValueChange?.(event.target.value);
+							mentionState.onInput();
+						},
+						onKeyDown: (event) => {
+							if (mentionState.onKeydown(event)) return;
+							if (event.key === "Enter" && !event.shiftKey) {
+								event.preventDefault();
+								submit();
+							}
+						}
+					}) }),
+					mentionsActive ? /* @__PURE__ */ jsx(MentionsVessel, {
+						open: mentionState.open,
+						matches: mentionState.matches,
+						active: mentionState.active,
+						anchor: fieldRef.current,
+						onInsert: mentionState.insert,
+						onActiveChange: mentionState.setActive,
+						onOpenChange: (open) => {
+							if (!open) mentionState.close();
+						}
+					}) : null,
+					row("prompt-trailing", hasFooter ? trailing : trailing ?? seal)
+				]
+			}),
+			hasFooter ? /* @__PURE__ */ jsxs("div", {
+				"data-scope": "ai",
+				"data-part": "prompt-footer",
+				children: [footer, row("prompt-end", footerEnd == null ? seal : /* @__PURE__ */ jsxs(Fragment, { children: [footerEnd, seal] }))]
+			}) : null
+		]
+	});
+}
+injectComponentStyle("ai");
+//#endregion
+//#region src/components/ai/chevron.tsx
 /** The folding chevron the shared indicator turns. */
-const chevron$1 = /* @__PURE__ */ jsx("svg", {
+const chevron$2 = /* @__PURE__ */ jsx("svg", {
 	viewBox: "0 0 16 16",
 	fill: "none",
 	"aria-hidden": "true",
@@ -151,62 +465,111 @@ const chevron$1 = /* @__PURE__ */ jsx("svg", {
 		strokeLinejoin: "round"
 	})
 });
-function Message({ role = "assistant", children, ...rest }) {
-	return /* @__PURE__ */ jsx("article", {
-		...rest,
-		"data-scope": "ai",
-		"data-part": "message",
-		"data-role": role,
-		children
-	});
-}
-function Response({ content, ...rest }) {
-	return /* @__PURE__ */ jsx("div", {
-		...rest,
-		"data-scope": "ai",
-		"data-part": "response",
-		dangerouslySetInnerHTML: { __html: renderHtml(content) }
-	});
-}
+//#endregion
+//#region src/components/collapsible/index.tsx
+/** 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
 function Reasoning({ label = "Thinking", children, ...rest }) {
 	return /* @__PURE__ */ jsxs(Collapsible.Root, {
 		...rest,
 		"data-ai": "reasoning",
-		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, { children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx(Collapsible.Indicator, { children: chevron$1 })] }), /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsx("div", {
+		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, { children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx(Collapsible.Indicator, { children: chevron$2 })] }), /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsx("div", {
 			"data-scope": "ai",
 			"data-part": "reasoning-content",
 			children
 		}) })]
 	});
 }
-function Tool({ name, label, status, input, output, ...rest }) {
-	return /* @__PURE__ */ jsxs(Collapsible.Root, {
+injectComponentStyle("ai");
+//#endregion
+//#region src/components/ai-response/code-copy.ts
+/** The two glyphs a copy affordance needs: the stamp and its
+* confirmation. Inline SVG keeps the enhancement framework-agnostic —
+* it lives beside the renderer's generated code HTML. */
+const COPY_CODE_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
+const COPIED_CODE_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>`;
+/** How long the confirmation stays before the stamp returns. */
+const REVERT_MS = 1500;
+/** Make sure every fenced block under `host` carries its copy stamp.
+* The stamp anchors to a wrapper outside the scrolling `pre` — inside,
+* it would fix to the overflow area and travel out of view with the
+* code. The renderer rebuilds the markdown as one HTML string on every
+* stream tick, so this stays idempotent and cheap enough to re-run
+* after each patch. */
+function decorateCodeCopy(host, copyLabel) {
+	for (const pre of host.querySelectorAll("pre")) {
+		let body = pre.parentElement;
+		if (!body || body.getAttribute("data-part") !== "code-body") {
+			body = document.createElement("div");
+			body.setAttribute("data-scope", "ai");
+			body.setAttribute("data-part", "code-body");
+			pre.replaceWith(body);
+			body.appendChild(pre);
+		}
+		let button = body.querySelector("[data-part=\"code-copy\"]");
+		if (!button) {
+			button = document.createElement("button");
+			button.type = "button";
+			button.setAttribute("data-scope", "ai");
+			button.setAttribute("data-part", "code-copy");
+			button.innerHTML = COPY_CODE_ICON;
+			body.appendChild(button);
+		}
+		button.title = copyLabel;
+		button.setAttribute("aria-label", copyLabel);
+	}
+}
+/** The one delegated click for the whole response: copy the block's
+* text and confirm in place, then return the stamp after a beat. */
+async function clickCodeCopy(event, copyLabel, copiedLabel) {
+	const button = event.target?.closest("[data-part=\"code-copy\"]");
+	const pre = button?.closest("[data-part=\"code-body\"]")?.querySelector("pre");
+	if (!button || !pre) return;
+	await navigator.clipboard.writeText(pre.textContent ?? "");
+	button.innerHTML = COPIED_CODE_ICON;
+	button.setAttribute("data-state", "copied");
+	button.title = copiedLabel;
+	button.setAttribute("aria-label", copiedLabel);
+	setTimeout(() => {
+		if (!button.isConnected) return;
+		button.innerHTML = COPY_CODE_ICON;
+		button.removeAttribute("data-state");
+		button.title = copyLabel;
+		button.setAttribute("aria-label", copyLabel);
+	}, REVERT_MS);
+}
+//#endregion
+//#region src/components/ai-response/index.tsx
+function Response({ content, highlighter, copyLabel = "Copy code", copiedLabel = "Copied", ...rest }) {
+	const root = useRef(null);
+	useEffect(() => {
+		const host = root.current;
+		if (host) decorateCodeCopy(host, copyLabel);
+	}, [
+		content,
+		highlighter,
+		copyLabel
+	]);
+	const onClick = (event) => {
+		clickCodeCopy(event.nativeEvent, copyLabel, copiedLabel);
+	};
+	return /* @__PURE__ */ jsx("div", {
 		...rest,
-		"data-ai": "tool",
-		"data-status": status,
-		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, { children: [
-			/* @__PURE__ */ jsx("span", { children: label ?? name }),
-			status ? /* @__PURE__ */ jsx("span", {
-				"data-scope": "ai",
-				"data-part": "tool-status",
-				children: status.charAt(0).toUpperCase() + status.slice(1)
-			}) : null,
-			/* @__PURE__ */ jsx(Collapsible.Indicator, { children: chevron$1 })
-		] }), /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsxs("div", {
-			"data-scope": "ai",
-			"data-part": "tool-body",
-			children: [input ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-				"data-scope": "ai",
-				"data-part": "tool-label",
-				children: "Input"
-			}), /* @__PURE__ */ jsx("pre", { children: input })] }) : null, output ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-				"data-scope": "ai",
-				"data-part": "tool-label",
-				children: "Output"
-			}), /* @__PURE__ */ jsx("pre", { children: output })] }) : null]
-		}) })]
+		ref: root,
+		"data-scope": "ai",
+		"data-part": "response",
+		onClick,
+		dangerouslySetInnerHTML: { __html: renderHtml(content, highlighter ? { highlighter } : void 0) }
 	});
 }
+injectComponentStyle("ai");
+//#endregion
+//#region src/components/ai-source/index.tsx
 function Source({ href, children, ...rest }) {
 	return /* @__PURE__ */ jsx("li", {
 		"data-scope": "ai",
@@ -220,17 +583,17 @@ function Source({ href, children, ...rest }) {
 		})
 	});
 }
-function Action({ label, children, ...rest }) {
-	return /* @__PURE__ */ jsx(Button, {
-		variant: "ghost",
-		size: "sm",
-		square: true,
-		"aria-label": label,
-		title: label,
+function Sources({ children, ...rest }) {
+	return /* @__PURE__ */ jsx("ol", {
 		...rest,
+		"data-scope": "ai",
+		"data-part": "sources",
 		children
 	});
 }
+injectComponentStyle("ai");
+//#endregion
+//#region src/components/ai-suggestion/index.tsx
 function Suggestion({ prompt, onSelect, ...rest }) {
 	return /* @__PURE__ */ jsx(Button, {
 		variant: "outline",
@@ -240,76 +603,196 @@ function Suggestion({ prompt, onSelect, ...rest }) {
 		children: prompt
 	});
 }
-function PromptInput({ value, onValueChange, onSubmit, placeholder = "Send a message", disabled = false, ...rest }) {
-	const send = () => {
-		const text = value.trim();
-		if (!text || disabled) return;
-		onSubmit?.(text);
-		onValueChange?.("");
-	};
-	return /* @__PURE__ */ jsxs("form", {
+injectComponentStyle("ai");
+//#endregion
+//#region src/components/ai-tool/index.tsx
+function Tool({ name, label, status, input, output, ...rest }) {
+	return /* @__PURE__ */ jsxs(Collapsible.Root, {
 		...rest,
-		"data-scope": "ai",
-		"data-part": "prompt",
-		onSubmit: (event) => {
-			event.preventDefault();
-			send();
-		},
-		children: [/* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsx(Field.Textarea, {
-			autoresize: true,
-			rows: 1,
-			value,
-			placeholder,
-			disabled,
-			onChange: (event) => onValueChange?.(event.target.value),
-			onKeyDown: (event) => {
-				if (event.key === "Enter" && !event.shiftKey) {
-					event.preventDefault();
-					send();
-				}
-			}
-		}) }), /* @__PURE__ */ jsx("div", {
+		"data-ai": "tool",
+		"data-status": status,
+		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, { children: [
+			/* @__PURE__ */ jsx("span", { children: label ?? name }),
+			status ? /* @__PURE__ */ jsx("span", {
+				"data-scope": "ai",
+				"data-part": "tool-status",
+				children: status.charAt(0).toUpperCase() + status.slice(1)
+			}) : null,
+			/* @__PURE__ */ jsx(Collapsible.Indicator, { children: chevron$2 })
+		] }), /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsxs("div", {
 			"data-scope": "ai",
-			"data-part": "prompt-footer",
-			children: /* @__PURE__ */ jsx(Button, {
-				variant: "solid",
-				size: "sm",
-				square: true,
-				type: "submit",
-				"aria-label": "Send",
-				disabled: disabled || !value.trim(),
-				children: /* @__PURE__ */ jsx("svg", {
-					viewBox: "0 0 16 16",
-					width: 14,
-					height: 14,
-					"aria-hidden": "true",
-					fill: "none",
-					stroke: "currentColor",
-					strokeWidth: 1.5,
-					strokeLinecap: "square",
-					children: /* @__PURE__ */ jsx("path", { d: "M8 13V3M3.5 7.5 8 3l4.5 4.5" })
-				})
-			})
-		})]
+			"data-part": "tool-body",
+			children: [input ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				"data-scope": "ai",
+				"data-part": "tool-label",
+				children: "Input"
+			}), /* @__PURE__ */ jsx("pre", { children: input })] }) : null, output ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				"data-scope": "ai",
+				"data-part": "tool-label",
+				children: "Output"
+			}), /* @__PURE__ */ jsx("pre", { children: output })] }) : null]
+		}) })]
 	});
 }
+injectComponentStyle("ai");
+//#endregion
+//#region src/components/ai/index.tsx
+/** 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$12(name, tag, extra = {}) {
+	const Tag = tag;
+	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
+		...extra,
+		...rest,
+		"data-scope": "ai",
+		"data-part": name.toLowerCase(),
+		children
+	});
+	Component.displayName = "Ai" + name;
+	return Component;
+}
+/** The log itself: the column every stroke lands in, a landmark to
+* screen readers. */
+const Conversation = part$12("Conversation", "div", {
+	role: "log",
+	"aria-label": "Conversation"
+});
+/** The bubble's inner measure — content that belongs to neither side
+* specifically. */
+const MessageContent = part$12("Content", "div");
+/** The quiet row under a message — copy, retry, feedback. */
+const Actions$4 = part$12("Actions", "div");
+/** The while-it-works whisper for the in-flight turns. */
+const Loader = part$12("Loader", "span", {
+	role: "status",
+	"aria-label": "Loading"
+});
+/** The whole family under one handle — `Ai.Conversation`,
+* `Ai.Message`, and the rest, exactly as before the split. */
 const Ai = Object.assign(Conversation, {
 	Conversation,
-	Message,
 	MessageContent,
+	Actions: Actions$4,
+	Loader,
+	Message,
 	Response,
 	Reasoning,
 	Tool,
 	Sources,
 	Source,
-	Actions: Actions$3,
 	Action,
 	Suggestion,
-	PromptInput,
-	Loader
+	PromptInput
 });
 injectComponentStyle("ai");
 //#endregion
+//#region src/components/ai-attachments/index.tsx
+const imageGlyph = /* @__PURE__ */ jsxs("svg", {
+	viewBox: "0 0 16 16",
+	"aria-hidden": "true",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 1.5,
+	strokeLinecap: "square",
+	children: [
+		/* @__PURE__ */ jsx("rect", {
+			x: 2.5,
+			y: 3.5,
+			width: 11,
+			height: 9
+		}),
+		/* @__PURE__ */ jsx("path", { d: "M2.5 10.5 6 7l3 3 2-1.5 2.5 2" }),
+		/* @__PURE__ */ jsx("circle", {
+			cx: 6,
+			cy: 6,
+			r: .75,
+			fill: "currentColor",
+			stroke: "none"
+		})
+	]
+});
+const fileGlyph = /* @__PURE__ */ jsxs("svg", {
+	viewBox: "0 0 16 16",
+	"aria-hidden": "true",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 1.5,
+	strokeLinecap: "square",
+	children: [/* @__PURE__ */ jsx("path", { d: "M4 2.5h5l3 3V13.5H4z" }), /* @__PURE__ */ jsx("path", { d: "M9 2.5v3h3" })]
+});
+const removeGlyph = /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 16 16",
+	width: 12,
+	height: 12,
+	"aria-hidden": "true",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 1.5,
+	strokeLinecap: "square",
+	children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" })
+});
+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]}`;
+};
+function Attachment({ name, size, status = "ready", onRemove, ...rest }) {
+	return /* @__PURE__ */ jsxs("span", {
+		...rest,
+		"data-scope": "ai",
+		"data-part": "attachment",
+		"data-status": status,
+		children: [
+			isImage(name) ? imageGlyph : fileGlyph,
+			/* @__PURE__ */ jsx("span", { children: name }),
+			size !== void 0 ? /* @__PURE__ */ jsx("span", { children: humanSize(size) }) : null,
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-remove": "",
+				"aria-label": `Remove ${name}`,
+				onClick: () => onRemove?.(),
+				children: removeGlyph
+			})
+		]
+	});
+}
+/** The row the files ride in — a wrapping line of chips. */
+function Attachments({ children, ...rest }) {
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		"data-scope": "ai",
+		"data-part": "attachments",
+		children
+	});
+}
+injectComponentStyle("ai");
+//#endregion
 //#region src/components/alert/index.tsx
 const StatusContext = createContext("ink");
 function glyph(status) {
@@ -345,7 +828,7 @@ function AlertRoot({ status = "ink", children, ...rest }) {
 		})
 	});
 }
-function Icon$1() {
+function Icon$2() {
 	const status = useContext(StatusContext);
 	return /* @__PURE__ */ jsx("span", {
 		"data-scope": "alert",
@@ -379,7 +862,7 @@ function Description$5({ children, ...rest }) {
 }
 const Alert = Object.assign(AlertRoot, {
 	Root: AlertRoot,
-	Icon: Icon$1,
+	Icon: Icon$2,
 	Body: Body$2,
 	Title: Title$4,
 	Description: Description$5
@@ -394,11 +877,56 @@ injectComponentStyle("alert");
 const AngleSlider = AngleSlider$1;
 injectComponentStyle("angle-slider");
 //#endregion
+//#region src/components/aspect-ratio/index.tsx
+function AspectRatio({ ratio = "1 / 1", ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		style: {
+			...rest.style,
+			"--bs-aspect-ratio": ratio
+		},
+		"data-scope": "aspect-ratio",
+		"data-part": "root"
+	});
+}
+injectComponentStyle("aspect-ratio");
+//#endregion
+//#region src/components/autocomplete/index.tsx
+function AutoComplete({ value = "", items = [], placeholder, filter, onValueChange, ...rest }) {
+	const { collection, filter: filterItems } = useListCollection$1({
+		initialItems: items,
+		filter: (item, input) => filter ? filter(item, input) : item.toLowerCase().includes(input.toLowerCase())
+	});
+	return /* @__PURE__ */ jsxs(Combobox$1.Root, {
+		...rest,
+		collection,
+		inputValue: value,
+		allowCustomValue: true,
+		onValueChange: (details) => {
+			const [first] = details.value;
+			if (first != null) onValueChange?.(first);
+		},
+		onInputValueChange: (details) => {
+			filterItems(details.inputValue);
+			onValueChange?.(details.inputValue);
+		},
+		positioning: { sameWidth: true },
+		children: [/* @__PURE__ */ jsx(Combobox$1.Control, { children: /* @__PURE__ */ jsx(Combobox$1.Input, { placeholder }) }), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, { children: /* @__PURE__ */ jsxs(Combobox$1.Content, { children: [/* @__PURE__ */ jsx(Combobox$1.Empty, { children: "No matches" }), collection.items.map((item) => /* @__PURE__ */ jsx(Combobox$1.Item, {
+			item,
+			children: /* @__PURE__ */ jsx(Combobox$1.ItemText, { children: item })
+		}, item))] }) }) })]
+	});
+}
+injectComponentStyle("combobox");
+//#endregion
 //#region src/components/avatar/index.tsx
-/** 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
-* API is Ark's own — Root, Image, Fallback. */
-const Avatar = Avatar$1;
+function AvatarRoot({ size, ...rest }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+const Avatar = Object.assign({}, Avatar$1, { Root: AvatarRoot });
 injectComponentStyle("avatar");
 //#endregion
 //#region src/components/avatar-group/index.tsx
@@ -412,6 +940,83 @@ function AvatarGroup({ children, ...rest }) {
 }
 injectComponentStyle("avatar-group");
 //#endregion
+//#region src/components/back-top/index.tsx
+/** The single glyph a way-home control needs: one stroke pointing up. */
+function chevronUp() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: 16,
+		height: 16,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.75,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("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 (a moored control asks the media query
+* directly, since a scroller of its own has no stylesheet to defer to).
+* 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({ threshold = 400, label = "Back to top", scrollEl, ...rest }) {
+	const [visible, setVisible] = useState(false);
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const el = scrollEl?.() ?? null;
+		const onScroll = () => setVisible((el ? el.scrollTop : window.scrollY) > threshold);
+		onScroll();
+		if (el) el.addEventListener("scroll", onScroll, { passive: true });
+		else window.addEventListener("scroll", onScroll, { passive: true });
+		return () => {
+			if (el) el.removeEventListener("scroll", onScroll);
+			else window.removeEventListener("scroll", onScroll);
+		};
+	}, [threshold, scrollEl]);
+	const toTop = () => {
+		const el = scrollEl?.();
+		if (!el) {
+			window.scrollTo({ top: 0 });
+			return;
+		}
+		const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		el.scrollTo({
+			top: 0,
+			behavior: reduce ? "auto" : "smooth"
+		});
+	};
+	return /* @__PURE__ */ jsx("div", {
+		"data-scope": "back-top",
+		"data-part": "root",
+		"data-state": visible ? "shown" : "hidden",
+		...scrollEl ? { "data-container": "" } : {},
+		children: /* @__PURE__ */ jsx(Button, {
+			...rest,
+			variant: "outline",
+			square: true,
+			size: "lg",
+			type: "button",
+			"aria-label": label,
+			"aria-hidden": visible ? void 0 : "true",
+			tabIndex: visible ? 0 : -1,
+			onClick: toTop,
+			children: rest.children ?? chevronUp()
+		})
+	});
+}
+injectComponentStyle("back-top");
+//#endregion
 //#region src/components/badge/index.tsx
 function Badge({ tone = "ink", variant = "solid", ...rest }) {
 	return /* @__PURE__ */ jsx("span", {
@@ -428,7 +1033,7 @@ injectComponentStyle("badge");
 /** 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$8(name, tag, extra = {}, fallback) {
+function part$11(name, tag, extra = {}, fallback) {
 	const Tag = tag;
 	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
 		...extra,
@@ -440,28 +1045,50 @@ function part$8(name, tag, extra = {}, fallback) {
 	Component.displayName = "Breadcrumb" + name;
 	return Component;
 }
-const Root$7 = part$8("Root", "nav", { "aria-label": "Breadcrumb" });
-const List = part$8("List", "ol");
-const Item$1 = part$8("Item", "li");
-const Link$1 = part$8("Link", "a");
-const Current = part$8("Current", "span", { "aria-current": "page" });
-const Separator$1 = part$8("Separator", "span", { "aria-hidden": "true" }, "/");
-const Breadcrumb = Object.assign(Root$7, {
-	Root: Root$7,
-	List,
-	Item: Item$1,
+const Root$12 = part$11("Root", "nav", { "aria-label": "Breadcrumb" });
+const List$1 = part$11("List", "ol");
+const Item$4 = part$11("Item", "li");
+const Link$1 = part$11("Link", "a");
+const Current = part$11("Current", "span", { "aria-current": "page" });
+const Separator$1 = part$11("Separator", "span", { "aria-hidden": "true" }, "/");
+const Breadcrumb = Object.assign(Root$12, {
+	Root: Root$12,
+	List: List$1,
+	Item: Item$4,
 	Link: Link$1,
 	Current,
 	Separator: Separator$1
 });
 injectComponentStyle("breadcrumb");
 //#endregion
+//#region src/components/button-group/index.tsx
+/**
+* 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 Root$11({ orientation = "horizontal", size, radius, children, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		role: "group",
+		"data-scope": "button-group",
+		"data-part": "root",
+		"data-orientation": orientation,
+		"data-size": size,
+		"data-radius": radius,
+		children
+	});
+}
+const ButtonGroup = Object.assign(Root$11, { Root: Root$11 });
+injectComponentStyle("button-group");
+//#endregion
 //#region src/components/banner/index.tsx
 /** 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. */
-const Root$6 = ({ status = "ink", children, ...rest }) => /* @__PURE__ */ jsx("div", {
+const Root$10 = ({ status = "ink", children, ...rest }) => /* @__PURE__ */ jsx("div", {
 	...rest,
 	role: status === "ink" ? void 0 : "status",
 	"data-scope": "banner",
@@ -469,7 +1096,7 @@ const Root$6 = ({ status = "ink", children, ...rest }) => /* @__PURE__ */ jsx("d
 	"data-status": status,
 	children
 });
-function part$7(name, tag) {
+function part$10(name, tag) {
 	const Tag = tag;
 	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
 		...rest,
@@ -480,14 +1107,14 @@ function part$7(name, tag) {
 	Component.displayName = "Banner" + name;
 	return Component;
 }
-const Icon = part$7("Icon", "span");
-const Body$1 = part$7("Body", "div");
-const Title$3 = part$7("Title", "p");
-const Description$4 = part$7("Description", "p");
-const Actions$2 = part$7("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. */
-const Close = ({ children, ...rest }) => /* @__PURE__ */ jsx("button", {
+const Close = (rest) => /* @__PURE__ */ jsx("button", {
 	...rest,
 	type: rest.type ?? "button",
 	"aria-label": rest["aria-label"] ?? "Dismiss",
@@ -505,19 +1132,19 @@ const Close = ({ children, ...rest }) => /* @__PURE__ */ jsx("button", {
 		})
 	})
 });
-const Banner = Object.assign(Root$6, {
-	Root: Root$6,
-	Icon,
+const Banner = Object.assign(Root$10, {
+	Root: Root$10,
+	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/calendar/index.tsx
-function chevron(dir) {
+function chevron$1(dir) {
 	return /* @__PURE__ */ jsx("svg", {
 		width: 16,
 		height: 16,
@@ -551,9 +1178,9 @@ function Calendar({ value, min, max, onValueChange, children, ...rest }) {
 		"data-scope": "calendar",
 		"data-part": "header",
 		children: /* @__PURE__ */ jsxs(DatePicker$1.ViewControl, { children: [
-			/* @__PURE__ */ jsx(DatePicker$1.PrevTrigger, { children: chevron("left") }),
+			/* @__PURE__ */ jsx(DatePicker$1.PrevTrigger, { children: chevron$1("left") }),
 			/* @__PURE__ */ jsx(DatePicker$1.Context, { children: (dp) => /* @__PURE__ */ jsx(DatePicker$1.ViewTrigger, { children: title(dp) }) }),
-			/* @__PURE__ */ jsx(DatePicker$1.NextTrigger, { children: chevron("right") })
+			/* @__PURE__ */ jsx(DatePicker$1.NextTrigger, { children: chevron$1("right") })
 		] })
 	});
 	return /* @__PURE__ */ jsxs("div", {
@@ -606,12 +1233,13 @@ function Calendar({ value, min, max, onValueChange, children, ...rest }) {
 	});
 }
 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$9(name, tag) {
 	const Tag = tag;
 	const Component = ({ asChild, children, ...rest }) => {
 		const partProps = {
@@ -623,29 +1251,253 @@ function part$6(name, tag) {
 			const child = Children.only(children);
 			return isValidElement(child) ? cloneElement(child, partProps) : null;
 		}
-		return /* @__PURE__ */ jsx(Tag, {
-			...partProps,
-			children
+		return /* @__PURE__ */ jsx(Tag, {
+			...partProps,
+			children
+		});
+	};
+	Component.displayName = "Card" + name;
+	return Component;
+}
+const Root$9 = part$9("Root", "section");
+const Header$1 = part$9("Header", "header");
+const Title$2 = part$9("Title", "h3");
+const Description$3 = part$9("Description", "p");
+const Content$3 = part$9("Content", "div");
+const Footer$1 = part$9("Footer", "footer");
+const Card = Object.assign(Root$9, {
+	Root: Root$9,
+	Header: Header$1,
+	Title: Title$2,
+	Description: Description$3,
+	Content: Content$3,
+	Footer: Footer$1
+});
+injectComponentStyle("card");
+//#endregion
+//#region src/components/input/index.tsx
+function Input({ value, size = "md", invalid = false, onValueChange, ...rest }) {
+	const field = useFieldContext();
+	const fieldProps = field?.getInputProps() ?? {};
+	return /* @__PURE__ */ jsx("input", {
+		...fieldProps,
+		...rest,
+		...value !== void 0 ? { value } : {},
+		"data-scope": "input",
+		"data-part": "root",
+		"data-size": size,
+		"data-invalid": invalid || field?.invalid ? "" : void 0,
+		onChange: (event) => onValueChange?.(event.target.value)
+	});
+}
+injectComponentStyle("input");
+//#endregion
+//#region src/components/cascade-select/index.tsx
+const chevronDown$2 = /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+});
+const chevronRight = /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+});
+const checkGlyph$2 = /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 3,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "m5 12.5 5 5L19 7" })
+});
+function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigger, filterable = false, multiple = false, disabled = false, onValueChange, ...rest }) {
+	const id = useId();
+	const locale = useLocaleContext();
+	const env = useEnvironmentContext();
+	const collection = cascade.collection({
+		nodeToValue: (node) => node.value,
+		nodeToString: (node) => node.label,
+		nodeToChildren: (node) => node.children ?? [],
+		rootNode: {
+			value: "ROOT",
+			label: "",
+			children: data
+		}
+	});
+	const service = useMachine(cascade.machine, {
+		id,
+		collection,
+		dir: locale.dir,
+		getRootNode: env.getRootNode.bind(env),
+		disabled: disabled || void 0,
+		multiple: multiple || void 0,
+		...value !== void 0 ? { value } : {},
+		...highlightTrigger != null ? { highlightTrigger } : {},
+		onValueChange(details) {
+			onValueChange?.(details.value);
+		}
+	});
+	const api = cascade.connect(service, normalizeProps);
+	const [query, setQuery] = useState("");
+	const filterFns = useFilter({ sensitivity: "base" });
+	const filtering = filterable && query.trim().length > 0;
+	/** The corridor's answer to a query: every leaf whose route matches —
+	* the query may land on any hop, and the whole route still shows. */
+	const matchPaths = useMemo(() => {
+		if (!filtering) return [];
+		const q = query.trim();
+		const hits = [];
+		const walk = (nodes, path, labels, matched) => {
+			for (const node of nodes ?? []) {
+				const hit = matched || filterFns.contains(node.label, q);
+				const nextPath = [...path, node.value];
+				const nextLabels = [...labels, node.label];
+				if (node.children?.length) walk(node.children, nextPath, nextLabels, hit);
+				else if (hit) hits.push({
+					path: nextPath,
+					labels: nextLabels
+				});
+			}
+		};
+		walk(data, [], [], false);
+		return hits;
+	}, [
+		filtering,
+		query,
+		filterFns,
+		data
+	]);
+	const isSelected = (path) => (value ?? []).some((p) => p.join("/") === path.join("/"));
+	function pickMatch(path) {
+		if (multiple) {
+			const current = value ?? [];
+			const key = path.join("/");
+			const next = current.some((p) => p.join("/") === key) ? current.filter((p) => p.join("/") !== key) : [...current, path];
+			api.setValue(next);
+		} else {
+			api.selectValue(path);
+			api.setOpen(false);
+		}
+	}
+	/** 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 = data;
+		for (const entry of path) {
+			const node = nodes?.find((n) => n.value === entry);
+			if (!node) return null;
+			out.push(node.label);
+			nodes = node.children;
+		}
+		return out;
+	}
+	const display = (value ?? []).map((path) => labelsFor(path)?.join(" / ")).filter((label) => label != null).join(", ");
+	/** 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 = /* @__PURE__ */ jsx("ul", {
+			...api.getListProps(nodeProps),
+			children: children.map((item, index) => {
+				const itemValue = collection.getNodeValue(item);
+				const itemProps = {
+					item,
+					indexPath: [...indexPath, index],
+					value: [...valuePath, itemValue]
+				};
+				const itemState = api.getItemState(itemProps);
+				return /* @__PURE__ */ jsxs("li", {
+					...api.getItemProps(itemProps),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							...api.getItemTextProps(itemProps),
+							children: item.label
+						}),
+						itemState.hasChildren ? /* @__PURE__ */ jsx("span", {
+							"data-part": "branch-indicator",
+							"aria-hidden": "true",
+							children: chevronRight
+						}) : null,
+						/* @__PURE__ */ jsx("span", {
+							...api.getItemIndicatorProps(itemProps),
+							children: checkGlyph$2
+						})
+					]
+				}, itemValue);
+			})
 		});
-	};
-	Component.displayName = "Card" + name;
-	return Component;
+		const next = nodeState.highlightedChild;
+		return [list, next != null && collection.isBranchNode(next) ? renderColumn(next, [...indexPath, nodeState.highlightedIndex], [...valuePath, collection.getNodeValue(next)]) : null];
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		...api.getRootProps(),
+		children: [/* @__PURE__ */ jsx("div", {
+			...api.getControlProps(),
+			children: /* @__PURE__ */ jsxs("button", {
+				...api.getTriggerProps(),
+				onClick: (event) => {
+					api.getTriggerProps().onClick?.(event);
+					setQuery("");
+				},
+				disabled: disabled || void 0,
+				children: [/* @__PURE__ */ jsx("span", {
+					...api.getValueTextProps(),
+					children: display || placeholder
+				}), /* @__PURE__ */ jsx("span", {
+					...api.getIndicatorProps(),
+					children: chevronDown$2
+				})]
+			})
+		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", {
+			...api.getPositionerProps(),
+			children: /* @__PURE__ */ jsxs("div", {
+				...api.getContentProps(),
+				children: [filterable ? /* @__PURE__ */ jsx("div", {
+					"data-part": "search",
+					children: /* @__PURE__ */ jsx(Input, {
+						size: "sm",
+						value: query,
+						onValueChange: setQuery,
+						placeholder: "Filter…",
+						"aria-label": "Filter options"
+					})
+				}) : null, filtering ? matchPaths.length === 0 ? /* @__PURE__ */ jsx("p", {
+					"data-part": "empty",
+					children: "Nothing matches"
+				}) : matchPaths.map((hit) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"data-part": "match",
+					"data-selected": isSelected(hit.path) || void 0,
+					onClick: () => pickMatch(hit.path),
+					children: hit.labels.join(" / ")
+				}, hit.path.join("/"))) : renderColumn(collection.rootNode, [], [])]
+			})
+		}) })]
+	});
 }
-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,
-	Header,
-	Title: Title$2,
-	Description: Description$3,
-	Content: Content$1,
-	Footer
-});
-injectComponentStyle("card");
+injectComponentStyle("cascade-select");
 //#endregion
 //#region src/components/carousel/index.tsx
 /** Ark's Carousel, dressed in the paper-and-ink system: slides ride in one
@@ -664,6 +1516,59 @@ injectComponentStyle("carousel");
 const Checkbox = Checkbox$1;
 injectComponentStyle("checkbox");
 //#endregion
+//#region src/components/checkbox-group/index.tsx
+const checkGlyph$1 = /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 3,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "m5 12.5 5 5L19 7" })
+});
+/**
+* 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. Inside a `Field.Root` the group picks up
+* the field context, so the invalid and disabled states a Form routes to
+* its name dress every box at once.
+*/
+function CheckboxGroup({ value = [], options, layout = "vertical", invalid = false, disabled = false, onValueChange, ...rest }) {
+	const field = useFieldContext();
+	const selected = new Set(value);
+	const isInvalid = invalid || field?.invalid === true;
+	const isDisabled = disabled || field?.disabled === true;
+	function toggle(option) {
+		const next = new Set(selected);
+		if (next.has(option)) next.delete(option);
+		else next.add(option);
+		onValueChange?.([...next]);
+	}
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		role: "group",
+		"data-scope": "checkbox-group",
+		"data-part": "root",
+		"data-layout": layout,
+		"data-invalid": isInvalid ? "" : void 0,
+		children: options.map((option) => /* @__PURE__ */ jsxs(Checkbox$1.Root, {
+			checked: selected.has(option.value),
+			invalid: isInvalid,
+			disabled: isDisabled || option.disabled === true,
+			onCheckedChange: () => toggle(option.value),
+			children: [
+				/* @__PURE__ */ jsx(Checkbox$1.Control, { children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, { children: checkGlyph$1 }) }),
+				/* @__PURE__ */ jsx(Checkbox$1.Label, { children: option.label }),
+				/* @__PURE__ */ jsx(Checkbox$1.HiddenInput, {})
+			]
+		}, option.value))
+	});
+}
+injectComponentStyle("checkbox-group");
+injectComponentStyle("checkbox");
+//#endregion
 //#region src/components/chip/index.tsx
 function Chip({ value, max, tone = "ink", variant = "solid", ...rest }) {
 	const text = max != null && value > max ? `${max}+` : String(value);
@@ -707,6 +1612,227 @@ injectComponentStyle("color-picker");
 const Combobox = Combobox$1;
 injectComponentStyle("combobox");
 //#endregion
+//#region src/components/command/index.tsx
+function Command({ items = [], placeholder, open, autoFilter = true, inputValue, emptyText = "No matching commands", onSelect, onOpenChange, onInputValueChange }) {
+	const [internalOpen, setInternalOpen] = useState(false);
+	const [listOpen, setListOpen] = useState(true);
+	const [fieldText, setFieldText] = useState("");
+	const { collection, set, filter } = useListCollection$1({
+		initialItems: items.map((entry) => entry.value),
+		filter: (value, input) => {
+			const entry = items.find((candidate) => candidate.value === value);
+			if (!entry) return false;
+			const query = input.toLowerCase();
+			return entry.label.toLowerCase().includes(query) || value.toLowerCase().includes(query);
+		}
+	});
+	useEffect(() => {
+		set(items.map((entry) => entry.value));
+		if (autoFilter) filter(fieldText);
+	}, [items]);
+	const currentOpen = open ?? internalOpen;
+	useEffect(() => {
+		if (currentOpen) setListOpen(true);
+	}, [currentOpen]);
+	const setOpen = (value) => {
+		if (open === void 0) setInternalOpen(value);
+		onOpenChange?.(value);
+	};
+	const available = new Set(collection.items);
+	const groups = /* @__PURE__ */ new Map();
+	for (const entry of items) {
+		if (!available.has(entry.value)) continue;
+		const key = entry.group ?? "";
+		if (!groups.has(key)) groups.set(key, []);
+		groups.get(key).push(entry);
+	}
+	const row = (entry) => /* @__PURE__ */ jsx(Combobox$1.Item, {
+		item: entry.value,
+		asChild: true,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-scope": "command",
+			"data-part": "item",
+			children: [/* @__PURE__ */ jsx(Combobox$1.ItemText, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("span", {
+					"data-scope": "command",
+					"data-part": "item-label",
+					children: entry.label
+				})
+			}), entry.hint ? /* @__PURE__ */ jsx("span", {
+				"data-scope": "command",
+				"data-part": "item-hint",
+				children: entry.hint
+			}) : void 0]
+		})
+	}, entry.value);
+	return /* @__PURE__ */ jsx(Dialog$1.Root, {
+		open: currentOpen,
+		onOpenChange: (details) => setOpen(details.open),
+		children: /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Dialog$1.Backdrop, {}), /* @__PURE__ */ jsx(Dialog$1.Positioner, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-scope": "command",
+				"data-part": "positioner",
+				children: /* @__PURE__ */ jsx(Dialog$1.Content, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx("div", {
+						"data-scope": "command",
+						"data-part": "content",
+						children: /* @__PURE__ */ jsxs(Combobox$1.Root, {
+							collection,
+							inputValue,
+							open: listOpen,
+							onOpenChange: (details) => setListOpen(details.open),
+							inputBehavior: "autohighlight",
+							loopFocus: true,
+							onInputValueChange: (details) => {
+								setFieldText(details.inputValue);
+								if (autoFilter) filter(details.inputValue);
+								onInputValueChange?.(details.inputValue);
+							},
+							onValueChange: (details) => {
+								const [first] = details.value;
+								if (first == null) return;
+								onSelect?.(first);
+								setOpen(false);
+							},
+							children: [/* @__PURE__ */ jsx(Combobox$1.Input, {
+								asChild: true,
+								children: /* @__PURE__ */ jsx("input", {
+									type: "text",
+									placeholder,
+									"data-scope": "command",
+									"data-part": "input"
+								})
+							}), /* @__PURE__ */ jsx(Combobox$1.Content, {
+								asChild: true,
+								children: /* @__PURE__ */ jsxs("div", {
+									"data-scope": "command",
+									"data-part": "list",
+									children: [Array.from(groups, ([group, entries]) => group === "" ? entries.map(row) : /* @__PURE__ */ jsx(Combobox$1.ItemGroup, {
+										asChild: true,
+										children: /* @__PURE__ */ jsxs("div", {
+											"data-scope": "command",
+											"data-part": "group",
+											children: [/* @__PURE__ */ jsx(Combobox$1.ItemGroupLabel, {
+												asChild: true,
+												children: /* @__PURE__ */ jsx("div", {
+													"data-scope": "command",
+													"data-part": "group-label",
+													children: group
+												})
+											}), entries.map(row)]
+										})
+									}, group)), groups.size === 0 ? /* @__PURE__ */ jsx("div", {
+										"data-scope": "command",
+										"data-part": "empty",
+										children: emptyText
+									}) : null]
+								})
+							})]
+						})
+					})
+				})
+			})
+		})] })
+	});
+}
+injectComponentStyle("command");
+injectComponentStyle("dialog");
+//#endregion
+//#region src/components/comment/index.tsx
+function Comment({ author, datetime, avatar, actions, children, ...rest }) {
+	return /* @__PURE__ */ jsxs("article", {
+		...rest,
+		"data-scope": "comment",
+		"data-part": "root",
+		children: [avatar ? /* @__PURE__ */ jsx("div", {
+			"data-scope": "comment",
+			"data-part": "avatar",
+			children: avatar
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			"data-scope": "comment",
+			"data-part": "body",
+			children: [
+				author || datetime ? /* @__PURE__ */ jsxs("header", {
+					"data-scope": "comment",
+					"data-part": "header",
+					children: [author ? /* @__PURE__ */ jsx("span", {
+						"data-scope": "comment",
+						"data-part": "author",
+						children: author
+					}) : null, datetime ? /* @__PURE__ */ jsx("time", {
+						"data-scope": "comment",
+						"data-part": "datetime",
+						dateTime: datetime,
+						children: datetime
+					}) : null]
+				}) : null,
+				/* @__PURE__ */ jsx("div", {
+					"data-scope": "comment",
+					"data-part": "content",
+					children
+				}),
+				actions ? /* @__PURE__ */ jsx("div", {
+					"data-scope": "comment",
+					"data-part": "actions",
+					children: actions
+				}) : null
+			]
+		})]
+	});
+}
+injectComponentStyle("comment");
+//#endregion
+//#region src/components/config-provider/index.tsx
+const ConfigContextImpl = 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(ConfigContextImpl);
+}
+/**
+* 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({ density, accent, dir, locale, children, ...rest }) {
+	return /* @__PURE__ */ jsx(ConfigContextImpl.Provider, {
+		value: {
+			density,
+			accent,
+			dir,
+			locale
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			...rest,
+			"data-scope": "config-provider",
+			"data-part": "root",
+			...density != null ? { "data-density": density } : {},
+			...accent != null ? { "data-accent": accent } : {},
+			...dir != null ? { dir } : {},
+			...locale != null ? { lang: locale } : {},
+			children
+		})
+	});
+}
+//#endregion
+//#region src/components/container/index.tsx
+function Container({ size = "readable", padding = true, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "container",
+		"data-part": "root",
+		"data-size": size,
+		"data-padding": padding ? "" : void 0
+	});
+}
+injectComponentStyle("container");
+//#endregion
 //#region src/components/date-input/index.tsx
 /** 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
@@ -725,6 +1851,35 @@ injectComponentStyle("date-input");
 const DatePicker = DatePicker$1;
 injectComponentStyle("date-picker");
 //#endregion
+//#region src/components/descriptions/index.tsx
+function DescriptionsRoot({ layout = "horizontal", children, ...rest }) {
+	return /* @__PURE__ */ jsx("dl", {
+		...rest,
+		"data-scope": "descriptions",
+		"data-part": "root",
+		"data-layout": layout,
+		children
+	});
+}
+function part$8(name, tag) {
+	const Tag = tag;
+	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
+		...rest,
+		"data-scope": "descriptions",
+		"data-part": name.toLowerCase(),
+		children
+	});
+	Component.displayName = "Descriptions" + name;
+	return Component;
+}
+const Descriptions = {
+	Root: DescriptionsRoot,
+	Item: part$8("Item", "div"),
+	Term: part$8("Term", "dt"),
+	Detail: part$8("Detail", "dd")
+};
+injectComponentStyle("descriptions");
+//#endregion
 //#region src/components/dialog/index.tsx
 /** Ark's Dialog, dressed in the paper-and-ink system: the sheet dissolves
 * in on elevation, the backdrop fades, and nested overlays stack through
@@ -742,6 +1897,81 @@ injectComponentStyle("dialog");
 const Drawer = Drawer$1;
 injectComponentStyle("drawer");
 //#endregion
+//#region src/components/dynamic-input/index.tsx
+/**
+* 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
+* reports a fresh array through `onValueChange` 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({ value, min = 0, max, placeholder, addLabel = "Add entry", disabled = false, invalid = false, onValueChange, children: _children, ...rest }) {
+	const values = value ?? [""];
+	const update = (index, next) => {
+		const rows = values.slice();
+		rows[index] = next;
+		onValueChange?.(rows);
+	};
+	const remove = (index) => {
+		const rows = values.filter((_, i) => i !== index);
+		onValueChange?.(rows.length > 0 ? rows : [""]);
+	};
+	const add = () => {
+		onValueChange?.([...values, ""]);
+	};
+	const canRemove = values.length > Math.max(min, 1);
+	const canAdd = max === void 0 || values.length < max;
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-scope": "dynamic-input",
+		"data-part": "root",
+		children: [values.map((value, index) => /* @__PURE__ */ jsxs("div", {
+			"data-scope": "dynamic-input",
+			"data-part": "row",
+			children: [/* @__PURE__ */ jsx(Input, {
+				value,
+				placeholder,
+				disabled,
+				invalid,
+				onValueChange: (next) => update(index, next)
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				square: true,
+				disabled: disabled || !canRemove,
+				"aria-label": `Remove entry ${index + 1}`,
+				onClick: () => remove(index),
+				children: crossIcon()
+			})]
+		}, index)), /* @__PURE__ */ jsx("div", {
+			"data-scope": "dynamic-input",
+			"data-part": "add",
+			children: /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				disabled: disabled || !canAdd,
+				onClick: () => add(),
+				children: ["+", addLabel]
+			})
+		})]
+	});
+}
+/** The one glyph a remove seal needs: a single crossing stroke. */
+function crossIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: 16,
+		height: 16,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.75,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+	});
+}
+injectComponentStyle("dynamic-input");
+//#endregion
 //#region src/components/editable/index.tsx
 /** 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 —
@@ -750,11 +1980,27 @@ injectComponentStyle("drawer");
 const Editable = Editable$1;
 injectComponentStyle("editable");
 //#endregion
+//#region src/components/ellipsis/index.tsx
+function Ellipsis({ lines = 1, ...rest }) {
+	const multiline = lines > 1;
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		style: multiline ? {
+			...rest.style,
+			"--bs-ellipsis-lines": String(lines)
+		} : rest.style,
+		"data-scope": "ellipsis",
+		"data-part": "root",
+		"data-multiline": multiline ? "" : void 0
+	});
+}
+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$5(name, tag) {
+function part$7(name, tag) {
 	const Tag = tag;
 	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
 		...rest,
@@ -765,17 +2011,17 @@ function part$5(name, tag) {
 	Component.displayName = "Empty" + name;
 	return Component;
 }
-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,
+const Root$8 = part$7("Root", "div");
+const Visual = part$7("Visual", "div");
+const Title$1 = part$7("Title", "h3");
+const Description$2 = part$7("Description", "p");
+const Actions$2 = part$7("Actions", "div");
+const Empty = Object.assign(Root$8, {
+	Root: Root$8,
 	Visual,
 	Title: Title$1,
 	Description: Description$2,
-	Actions: Actions$1
+	Actions: Actions$2
 });
 injectComponentStyle("empty");
 //#endregion
@@ -796,6 +2042,85 @@ injectComponentStyle("fieldset");
 const FileUpload = FileUpload$1;
 injectComponentStyle("file-upload");
 //#endregion
+//#region src/components/float-button/index.tsx
+/** Context for {@link FloatButtonContextValue}, exported so a custom
+* part can read the group's state. */
+const FLOAT_BUTTON_CONTEXT = createContext(null);
+/**
+* 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 Root$7({ open: openProp, placement = "bottom-end", onOpenChange, children, ...rest }) {
+	const [inner, setInner] = useState(false);
+	const open = openProp !== void 0 ? openProp : inner;
+	const setOpen = (value) => {
+		setInner(value);
+		onOpenChange?.(value);
+	};
+	return /* @__PURE__ */ jsx(FLOAT_BUTTON_CONTEXT.Provider, {
+		value: {
+			open,
+			toggle: () => setOpen(!open),
+			close: () => setOpen(false)
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			...rest,
+			"data-scope": "float-button",
+			"data-part": "root",
+			"data-placement": placement,
+			"data-state": open ? "open" : "closed",
+			children
+		})
+	});
+}
+function Trigger({ label, children }) {
+	const context = useContext(FLOAT_BUTTON_CONTEXT);
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "solid",
+		square: true,
+		size: "lg",
+		onClick: () => context?.toggle(),
+		"aria-label": label || "Actions",
+		"aria-expanded": context ? context.open : false,
+		children
+	});
+}
+function Item$2({ label, disabled = false, onClick, children }) {
+	const context = useContext(FLOAT_BUTTON_CONTEXT);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-scope": "float-button",
+		"data-part": "item",
+		children: [/* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			square: true,
+			size: "md",
+			disabled,
+			"aria-label": label,
+			onClick: () => {
+				onClick?.();
+				context?.close();
+			},
+			children
+		}), /* @__PURE__ */ jsx("span", {
+			"data-scope": "float-button",
+			"data-part": "item-label",
+			"aria-hidden": "true",
+			children: label
+		})]
+	});
+}
+const FloatButton = Object.assign(Root$7, {
+	Root: Root$7,
+	Trigger,
+	Item: Item$2
+});
+injectComponentStyle("float-button");
+//#endregion
 //#region src/components/floating-panel/index.tsx
 /** Ark's FloatingPanel, dressed in the paper-and-ink system: the shared
 * popup vessel let loose — a draggable, resizable sheet whose header is the
@@ -805,6 +2130,134 @@ injectComponentStyle("file-upload");
 const FloatingPanel = FloatingPanel$1;
 injectComponentStyle("floating-panel");
 //#endregion
+//#region src/components/form/index.tsx
+const FormContext = createContext(null);
+/** 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 error map, a submit that validates
+* before it fires, 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({ state, schema, validate, validateOn = [
+	"input",
+	"change",
+	"blur"
+], disabled = false, onSubmit, onError, ref, children, ...rest }) {
+	const [errors, setErrors] = useState(() => /* @__PURE__ */ new Map());
+	const run = useRef(0);
+	async function runValidate() {
+		const seq = ++run.current;
+		const next = /* @__PURE__ */ new Map();
+		if (validate) for (const error of await validate(state)) next.set(error.name, error.message);
+		if (schema) {
+			const result = await schema["~standard"].validate(state);
+			for (const issue of result.issues ?? []) {
+				const name = issueName(issue);
+				if (!next.has(name)) next.set(name, issue.message);
+			}
+		}
+		if (seq === run.current) setErrors(next);
+		return next;
+	}
+	function clear(name) {
+		if (!name) {
+			setErrors(/* @__PURE__ */ new Map());
+			return;
+		}
+		setErrors((prev) => {
+			const next = new Map(prev);
+			for (const key of next.keys()) if (typeof name === "string" ? key === name : name.test(key)) next.delete(key);
+			return next;
+		});
+	}
+	function setErrorsFrom(list) {
+		setErrors(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));
+	}
+	useImperativeHandle(ref, () => ({
+		validate: runValidate,
+		clear,
+		setErrors: setErrorsFrom,
+		getErrors,
+		errors
+	}));
+	function handleSubmit(event) {
+		event.preventDefault();
+		runValidate().then((map) => {
+			if (map.size === 0) {
+				onSubmit?.(state);
+				return;
+			}
+			onError?.([...map].map(([name, message]) => ({
+				name,
+				message
+			})));
+		});
+	}
+	const timer = useRef(void 0);
+	function onDelegated(kind, event) {
+		if (!validateOn.includes(kind)) return;
+		const target = event.target;
+		if (!target || !("value" in target)) return;
+		clearTimeout(timer.current);
+		timer.current = setTimeout(() => void runValidate(), kind === "blur" ? 0 : 300);
+	}
+	return /* @__PURE__ */ jsx(FormContext.Provider, {
+		value: {
+			errors,
+			disabled
+		},
+		children: /* @__PURE__ */ jsx("form", {
+			...rest,
+			"data-scope": "form",
+			"data-part": "root",
+			noValidate: true,
+			onSubmit: handleSubmit,
+			onInput: (event) => onDelegated("input", event),
+			onChange: (event) => onDelegated("change", event),
+			onBlurCapture: (event) => onDelegated("blur", event),
+			children
+		})
+	});
+}
+function FormField({ name, label, hint, required = false, invalid = false, disabled = false, children, ...rest }) {
+	const form = useContext(FormContext);
+	const formError = name ? form?.errors.get(name) : void 0;
+	const isInvalid = invalid || formError != null;
+	const isDisabled = disabled || (form?.disabled ?? false);
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-form-field": name,
+		children: /* @__PURE__ */ jsxs(Field$1.Root, {
+			invalid: isInvalid,
+			required,
+			disabled: isDisabled,
+			children: [
+				label ? /* @__PURE__ */ jsx(Field$1.Label, { children: label }) : null,
+				children,
+				hint && formError == null ? /* @__PURE__ */ jsx(Field$1.HelperText, { children: hint }) : null,
+				formError != null ? /* @__PURE__ */ jsx(Field$1.ErrorText, { children: formError }) : null
+			]
+		})
+	});
+}
+injectComponentStyle("form");
+injectComponentStyle("field");
+//#endregion
 //#region src/components/format/index.tsx
 /** Ark's Format, dressed in the paper-and-ink system: Intl formatting for
 * numbers, currency, bytes and relative time. The components render bare
@@ -823,6 +2276,34 @@ const Format = Format$1;
 * to hook. The API is Ark's own. */
 const Frame = Frame$1;
 //#endregion
+//#region src/components/grid/index.tsx
+/** 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({ columns = 12, gap = "md", minChildWidth, ...rest }) {
+	const style = {
+		...rest.style,
+		"--bs-grid-columns": String(columns),
+		"--bs-grid-gap": gapVars$2[gap] ?? gapVars$2.md,
+		...minChildWidth != null ? { "--bs-grid-min-child-width": minChildWidth } : {}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		style,
+		"data-scope": "grid",
+		"data-part": "root",
+		"data-autofill": minChildWidth != null ? "" : void 0
+	});
+}
+injectComponentStyle("grid");
+//#endregion
 //#region src/components/highlight/index.tsx
 /** 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
@@ -838,6 +2319,74 @@ injectComponentStyle("highlight");
 const HoverCard = HoverCard$1;
 injectComponentStyle("hover-card");
 //#endregion
+//#region src/components/icon/index.tsx
+function Icon({ size = "inherit", label, children, ...rest }) {
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		role: label != null ? "img" : void 0,
+		"aria-label": label,
+		"aria-hidden": label != null ? void 0 : "true",
+		"data-scope": "icon",
+		"data-part": "root",
+		"data-size": size,
+		children
+	});
+}
+injectComponentStyle("icon");
+//#endregion
+//#region src/components/image/index.tsx
+/** 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 /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: 3,
+				y: 4,
+				width: 18,
+				height: 16,
+				rx: 1.5
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: 9,
+				cy: 10,
+				r: 1.5
+			}),
+			/* @__PURE__ */ jsx("path", { d: "m5.5 17.5 4.5-5 3 3.5 2.5-3 3 4.5" })
+		]
+	});
+}
+function Image({ src, alt = "", fit = "cover", loading = "lazy", fallback, ...rest }) {
+	const [state, setState] = useState("loading");
+	useEffect(() => setState("loading"), [src]);
+	return /* @__PURE__ */ jsxs("figure", {
+		...rest,
+		"data-scope": "image",
+		"data-part": "root",
+		"data-state": state,
+		"data-fit": fit,
+		children: [/* @__PURE__ */ jsx("img", {
+			"data-scope": "image",
+			"data-part": "img",
+			src,
+			alt,
+			loading,
+			decoding: "async",
+			onLoad: () => setState("loaded"),
+			onError: () => setState("error")
+		}), state === "error" ? /* @__PURE__ */ jsx("div", {
+			"data-scope": "image",
+			"data-part": "fallback",
+			children: fallback ?? placeholderGlyph()
+		}) : null]
+	});
+}
+injectComponentStyle("image");
+//#endregion
 //#region src/components/image-cropper/index.tsx
 /** Ark's ImageCropper, dressed in the paper-and-ink system: a rounded vessel
 * holding the photograph, one lit selection window framed by light hairlines.
@@ -846,6 +2395,136 @@ injectComponentStyle("hover-card");
 const ImageCropper = ImageCropper$1;
 injectComponentStyle("image-cropper");
 //#endregion
+//#region src/components/image-viewer/index.tsx
+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: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("circle", {
+			cx: 11,
+			cy: 11,
+			r: 7
+		}),
+		/* @__PURE__ */ jsx("path", { d: "m16.2 16.2 4.8 4.8" }),
+		/* @__PURE__ */ jsx("path", { d: "M8 11h6" }),
+		/* @__PURE__ */ jsx("path", { d: "M11 8v6" })
+	] }),
+	zoomOut: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("circle", {
+			cx: 11,
+			cy: 11,
+			r: 7
+		}),
+		/* @__PURE__ */ jsx("path", { d: "m16.2 16.2 4.8 4.8" }),
+		/* @__PURE__ */ jsx("path", { d: "M8 11h6" })
+	] }),
+	rotate: () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M20.49 12A8.5 8.5 0 1 1 18 6.06" }), /* @__PURE__ */ jsx("path", { d: "M20.5 3.5v4h-4" })] }),
+	close: () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "m6 6 12 12" }), /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" })] })
+};
+function ImageViewer({ src, alt = "", open, zoomable = true, onOpenChange }) {
+	const [localOpen, setLocalOpen] = useState(false);
+	const [scale, setScale] = useState(1);
+	const [rotation, setRotation] = useState(0);
+	const isOpen = open ?? localOpen;
+	const setOpen = (value) => {
+		if (open === void 0) setLocalOpen(value);
+		onOpenChange?.(value);
+	};
+	useEffect(() => {
+		if (isOpen) {
+			setScale(1);
+			setRotation(0);
+		}
+	}, [isOpen]);
+	function zoom(step) {
+		setScale((current) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, current + step)));
+	}
+	function rotate() {
+		setRotation((current) => (current + 90) % 360);
+	}
+	function toolButton(label, glyph, onClick) {
+		return /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			square: true,
+			size: "lg",
+			"aria-label": label,
+			onClick,
+			children: /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": "true",
+				children: glyph()
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(Dialog$1.Root, {
+		open: isOpen,
+		onOpenChange: (details) => setOpen(details.open),
+		lazyMount: true,
+		unmountOnExit: true,
+		children: /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Dialog$1.Backdrop, { className: "bs-image-viewer-backdrop" }), /* @__PURE__ */ jsx(Dialog$1.Positioner, {
+			className: "bs-image-viewer-positioner",
+			children: /* @__PURE__ */ jsxs(Dialog$1.Content, {
+				className: "bs-image-viewer-content",
+				"aria-label": alt || "Image preview",
+				onClick: (event) => {
+					if (event.target === event.currentTarget) setOpen(false);
+				},
+				children: [/* @__PURE__ */ jsx("img", {
+					"data-scope": "image-viewer",
+					"data-part": "viewport",
+					src,
+					alt,
+					style: { transform: `scale(${scale}) rotate(${rotation}deg)` }
+				}), /* @__PURE__ */ jsx("div", {
+					"data-scope": "image-viewer",
+					"data-part": "toolbar",
+					children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+						zoomable ? [toolButton("Zoom in", TOOL_GLYPHS.zoomIn, () => zoom(SCALE_STEP)), toolButton("Zoom out", TOOL_GLYPHS.zoomOut, () => zoom(-.25))] : null,
+						toolButton("Rotate 90 degrees", TOOL_GLYPHS.rotate, rotate),
+						toolButton("Close", TOOL_GLYPHS.close, () => setOpen(false))
+					] })
+				})]
+			})
+		})] })
+	});
+}
+injectComponentStyle("image-viewer");
+//#endregion
+//#region src/components/input-group/index.tsx
+function part$6(name) {
+	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "input-group",
+		"data-part": name.toLowerCase(),
+		children
+	});
+	Component.displayName = "InputGroup" + name;
+	return Component;
+}
+/**
+* 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.
+*/
+const Root$6 = part$6("Root");
+const Addon = part$6("Addon");
+const InputGroup = Object.assign(Root$6, {
+	Root: Root$6,
+	Addon
+});
+injectComponentStyle("input-group");
+//#endregion
 //#region src/components/json-tree-view/index.tsx
 /** 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
@@ -864,6 +2543,135 @@ function Kbd({ children, ...rest }) {
 }
 injectComponentStyle("kbd");
 //#endregion
+//#region src/components/layout/index.tsx
+const LAYOUT_CONTEXT = createContext(null);
+/**
+* The application skeleton: Root, Header, Sider, Content, Footer —
+* the admin arrangement 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 Root$5({ sider, children, ...rest }) {
+	return /* @__PURE__ */ jsx(LAYOUT_CONTEXT.Provider, {
+		value: { siderPlacement: () => sider },
+		children: /* @__PURE__ */ jsx("div", {
+			...rest,
+			"data-scope": "layout",
+			"data-part": "root",
+			"data-sider": sider,
+			children
+		})
+	});
+}
+/** A semantic block of the skeleton — header, footer, and the flow's
+* main content each land on their native element and their grid area. */
+function region(name, tag) {
+	const Tag = tag;
+	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
+		...rest,
+		"data-scope": "layout",
+		"data-part": name.toLowerCase(),
+		children
+	});
+	Component.displayName = "Layout" + name;
+	return Component;
+}
+const Header = region("Header", "header");
+const Content$2 = region("Content", "main");
+const Footer = region("Footer", "footer");
+/** One step of the arrow-key resize, in px. */
+const RESIZE_STEP = 16;
+function Sider({ collapsed = false, width: widthProp, collapsedWidth = "3.5rem", resizable = false, minWidth = "12rem", maxWidth = "24rem", style, onCollapsedChange, onWidthChange, children, ...rest }) {
+	const layout = useContext(LAYOUT_CONTEXT);
+	const rail = useRef(null);
+	const [dragging, setDragging] = useState(false);
+	const [innerWidth, setInnerWidth] = useState(widthProp ?? "16rem");
+	const width = widthProp !== void 0 ? widthProp : innerWidth;
+	const prevCollapsed = useRef(collapsed);
+	useEffect(() => {
+		if (prevCollapsed.current === collapsed) return;
+		prevCollapsed.current = collapsed;
+		onCollapsedChange?.(collapsed);
+	}, [collapsed, onCollapsedChange]);
+	const innerWidthRef = useRef(innerWidth);
+	innerWidthRef.current = innerWidth;
+	useEffect(() => {
+		if (widthProp === void 0 || widthProp === innerWidthRef.current) return;
+		setInnerWidth(widthProp);
+		onWidthChange?.(widthProp);
+	}, [widthProp, onWidthChange]);
+	const applyWidth = (next) => {
+		setInnerWidth(next);
+		onWidthChange?.(next);
+	};
+	const dragStart = useRef({
+		x: 0,
+		width: 0
+	});
+	const onPointerDown = (event) => {
+		setDragging(true);
+		dragStart.current = {
+			x: event.clientX,
+			width: rail.current ? rail.current.getBoundingClientRect().width : 0
+		};
+		event.currentTarget.setPointerCapture(event.pointerId);
+	};
+	const onPointerMove = (event) => {
+		if (!dragging) return;
+		const towardFlow = (layout?.siderPlacement() ?? "start") === "end" ? -1 : 1;
+		applyWidth(`${Math.round(dragStart.current.width + towardFlow * (event.clientX - dragStart.current.x))}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 current = rail.current ? rail.current.getBoundingClientRect().width : 0;
+		applyWidth(`${Math.round(current + (widen ? RESIZE_STEP : -16))}px`);
+	};
+	const handle = resizable && !collapsed ? /* @__PURE__ */ jsx("div", {
+		"data-scope": "layout",
+		"data-part": "sider-resize",
+		"data-dragging": dragging ? "" : void 0,
+		role: "separator",
+		"aria-orientation": "vertical",
+		tabIndex: 0,
+		"aria-label": "Resize sidebar",
+		"aria-valuenow": Math.round(rail.current ? rail.current.getBoundingClientRect().width : 0),
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		onKeyDown
+	}) : null;
+	return /* @__PURE__ */ jsxs("aside", {
+		...rest,
+		ref: rail,
+		style: {
+			...style,
+			"--bs-layout-sider-width": collapsed ? collapsedWidth : width,
+			"--bs-layout-sider-min": collapsed ? collapsedWidth : minWidth,
+			"--bs-layout-sider-max": collapsed ? collapsedWidth : maxWidth
+		},
+		"data-scope": "layout",
+		"data-part": "sider",
+		"data-collapsed": collapsed ? "" : void 0,
+		"data-dragging": dragging ? "" : void 0,
+		"data-resizable": resizable ? "" : void 0,
+		children: [typeof children === "function" ? children({ collapsed }) : children, handle]
+	});
+}
+const Layout = Object.assign(Root$5, {
+	Root: Root$5,
+	Header,
+	Sider,
+	Content: Content$2,
+	Footer
+});
+injectComponentStyle("layout");
+//#endregion
 //#region src/components/link/index.tsx
 /** 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 —
@@ -879,6 +2687,69 @@ function Link({ underline = "hover", children, ...rest }) {
 }
 injectComponentStyle("link");
 //#endregion
+//#region src/components/list/index.tsx
+/** 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) {
+	const Tag = tag;
+	function Component({ children, ...rest }) {
+		return /* @__PURE__ */ jsx(Tag, {
+			...rest,
+			"data-scope": "list",
+			"data-part": name.toLowerCase(),
+			children
+		});
+	}
+	Component.displayName = "List" + name;
+	return Component;
+}
+function Root$4({ bordered = false, hoverable = false, children, ...rest }) {
+	return /* @__PURE__ */ jsx("ul", {
+		...rest,
+		"data-scope": "list",
+		"data-part": "root",
+		"data-bordered": bordered || void 0,
+		"data-hoverable": hoverable || void 0,
+		children
+	});
+}
+Root$4.displayName = "ListRoot";
+const Item$1 = part$5("Item", "li");
+const Leading = part$5("Leading", "div");
+const Actions$1 = part$5("Actions", "div");
+function Content$1({ title, description, children, ...rest }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-scope": "list",
+		"data-part": "content",
+		children: [
+			title ? /* @__PURE__ */ jsx("div", {
+				"data-scope": "list",
+				"data-part": "title",
+				children: title
+			}) : null,
+			description ? /* @__PURE__ */ jsx("div", {
+				"data-scope": "list",
+				"data-part": "description",
+				children: description
+			}) : null,
+			children
+		]
+	});
+}
+Content$1.displayName = "ListContent";
+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.tsx
 /** 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
@@ -895,6 +2766,32 @@ injectComponentStyle("listbox");
 const Marquee = Marquee$1;
 injectComponentStyle("marquee");
 //#endregion
+//#region src/components/masonry/index.tsx
+/** 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({ columns = 3, gap = "md", ...rest }) {
+	const style = {
+		...rest.style,
+		"--bs-masonry-columns": String(columns),
+		"--bs-masonry-gap": gapVars$1[gap] ?? gapVars$1.md
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		style,
+		"data-scope": "masonry",
+		"data-part": "root"
+	});
+}
+injectComponentStyle("masonry");
+//#endregion
 //#region src/components/menu/index.tsx
 /** 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.
@@ -904,6 +2801,36 @@ injectComponentStyle("marquee");
 const Menu = Menu$1;
 injectComponentStyle("menu");
 //#endregion
+//#region src/components/menubar/index.tsx
+function Menubar({ items, onSelect, children, ...rest }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-scope": "menubar",
+		"data-part": "root",
+		role: "menubar",
+		children: [items.map((group) => /* @__PURE__ */ jsxs(Menu$1.Root, {
+			positioning: { placement: "bottom-start" },
+			children: [/* @__PURE__ */ jsx(Menu$1.Trigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"data-scope": "menubar",
+					"data-part": "trigger",
+					children: group.label
+				})
+			}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, { children: /* @__PURE__ */ jsx(Menu$1.Content, { children: group.items.map((entry) => /* @__PURE__ */ jsx(Menu$1.Item, {
+				value: entry.value,
+				disabled: entry.disabled,
+				"data-danger": entry.danger ? "" : void 0,
+				onSelect: () => onSelect?.(entry.value),
+				children: /* @__PURE__ */ jsx(Menu$1.ItemText, { children: entry.label })
+			}, entry.value)) }) }) })]
+		}, group.label)), children]
+	});
+}
+injectComponentStyle("menubar");
+injectComponentStyle("menu");
+//#endregion
 //#region src/components/meter/index.tsx
 function part$4(name, tag) {
 	const Tag = tag;
@@ -918,7 +2845,7 @@ function part$4(name, tag) {
 }
 const Label$2 = part$4("Label", "span");
 const ValueText = part$4("ValueText", "span");
-const Track = ({ children, ...rest }) => /* @__PURE__ */ jsx("span", {
+const Track = ({ ...rest }) => /* @__PURE__ */ jsx("span", {
 	...rest,
 	"data-scope": "meter",
 	"data-part": "track",
@@ -1000,6 +2927,43 @@ injectComponentStyle("password-input");
 const PinInput = PinInput$1;
 injectComponentStyle("pin-input");
 //#endregion
+//#region src/components/popconfirm/index.tsx
+function Popconfirm({ message, confirmText = "Confirm", cancelText = "Cancel", children, onConfirm, onCancel }) {
+	const [open, setOpen] = useState(false);
+	function settle(confirmed) {
+		setOpen(false);
+		(confirmed ? onConfirm : onCancel)?.();
+	}
+	return /* @__PURE__ */ jsxs(Popover$1.Root, {
+		open,
+		onOpenChange: (details) => setOpen(details.open),
+		positioning: { placement: "top" },
+		children: [/* @__PURE__ */ jsx(Popover$1.Trigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { children: /* @__PURE__ */ jsxs(Popover$1.Content, {
+			className: "bs-popconfirm",
+			children: [/* @__PURE__ */ jsx("p", {
+				"data-part": "message",
+				children: message
+			}), /* @__PURE__ */ jsxs("div", {
+				"data-part": "actions",
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					onClick: () => settle(false),
+					children: cancelText
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					onClick: () => settle(true),
+					children: confirmText
+				})]
+			})]
+		}) }) })]
+	});
+}
+injectComponentStyle("popconfirm");
+//#endregion
 //#region src/components/popover/index.tsx
 /** 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
@@ -1016,6 +2980,59 @@ injectComponentStyle("popover");
 const Progress = Progress$1;
 injectComponentStyle("progress");
 //#endregion
+//#region src/components/progress-group/index.tsx
+function ProgressGroup({ segments, max, showLegend = true, ...rest }) {
+	const total = max ?? segments.reduce((sum, segment) => sum + segment.value, 0);
+	const share = (value) => total > 0 ? `${value / total * 100}%` : "0%";
+	const nameOf = (segment, index) => segment.label ?? segment.pigment ?? `Segment ${index + 1}`;
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-scope": "progress-group",
+		"data-part": "root",
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-scope": "progress-group",
+			"data-part": "track",
+			children: segments.map((segment, index) => /* @__PURE__ */ jsx("div", {
+				"data-scope": "progress-group",
+				"data-part": "segment",
+				"data-pigment": segment.pigment,
+				role: "progressbar",
+				"aria-valuenow": segment.value,
+				"aria-valuemin": 0,
+				"aria-valuemax": total,
+				"aria-label": nameOf(segment, index),
+				style: { inlineSize: share(segment.value) }
+			}, index))
+		}), showLegend ? /* @__PURE__ */ jsx("div", {
+			"data-scope": "progress-group",
+			"data-part": "legend",
+			children: segments.map((segment, index) => /* @__PURE__ */ jsxs("div", {
+				"data-scope": "progress-group",
+				"data-part": "legend-item",
+				"data-pigment": segment.pigment,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"data-scope": "progress-group",
+						"data-part": "swatch",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"data-scope": "progress-group",
+						"data-part": "legend-label",
+						children: nameOf(segment, index)
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"data-scope": "progress-group",
+						"data-part": "legend-value",
+						children: String(segment.value)
+					})
+				]
+			}, index))
+		}) : null]
+	});
+}
+injectComponentStyle("progress-group");
+//#endregion
 //#region src/components/qr-code/index.tsx
 /** 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
@@ -1103,6 +3120,71 @@ injectComponentStyle("skeleton");
 const Slider = Slider$1;
 injectComponentStyle("slider");
 //#endregion
+//#region src/components/split-button/index.tsx
+/**
+* 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 report `onSelect` with their value. The arrow
+* is the menu machine's trigger grafting the button recipe — 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({ label, items = [], variant = "solid", tone = "ink", size = "md", disabled = false, onClick, onSelect, ...rest }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-scope": "split-button",
+		"data-part": "root",
+		children: [/* @__PURE__ */ jsx(Button, {
+			variant,
+			tone,
+			size,
+			disabled,
+			onClick,
+			children: label
+		}), /* @__PURE__ */ jsxs(Menu$1.Root, {
+			positioning: { placement: "bottom-end" },
+			children: [/* @__PURE__ */ jsx(Menu$1.Trigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled,
+					"data-variant": variant,
+					"data-tone": tone,
+					"data-size": size,
+					"data-square": "true",
+					"data-motion": "ink-ripple lit",
+					"aria-label": "More actions",
+					children: chevronDown$1()
+				})
+			}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, { children: /* @__PURE__ */ jsx(Menu$1.Content, { children: items.map((entry) => /* @__PURE__ */ jsx(Menu$1.Item, {
+				value: entry.value,
+				disabled: entry.disabled,
+				"data-danger": entry.danger ? "" : void 0,
+				onSelect: () => onSelect?.(entry.value),
+				children: /* @__PURE__ */ jsx(Menu$1.ItemText, { children: entry.label })
+			}, entry.value)) }) }) })]
+		})]
+	});
+}
+/** One stroke pointing down: all a fitted dropdown arrow needs. */
+function chevronDown$1() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: 16,
+		height: 16,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.75,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+	});
+}
+injectComponentStyle("split-button");
+injectComponentStyle("menu");
+//#endregion
 //#region src/components/splitter/index.tsx
 /** 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
@@ -1110,6 +3192,35 @@ injectComponentStyle("slider");
 const Splitter = Splitter$1;
 injectComponentStyle("splitter");
 //#endregion
+//#region src/components/stack/index.tsx
+/** 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({ direction = "column", gap = "md", wrap = false, align, justify, ...rest }) {
+	const style = {
+		...rest.style,
+		"--bs-stack-gap": gapVars[gap] ?? gapVars.md,
+		alignItems: align,
+		justifyContent: justify,
+		flexWrap: wrap ? "wrap" : void 0
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		style,
+		"data-scope": "stack",
+		"data-part": "root",
+		"data-direction": direction
+	});
+}
+injectComponentStyle("stack");
+//#endregion
 //#region src/components/page-header/index.tsx
 /** The page's face: an eyebrow whisper, a serif title, one line of
 * description, and the actions resting beside the title on the same
@@ -1255,6 +3366,36 @@ const TagsInput = TagsInput$1;
 injectComponentStyle("tags-input");
 //#endregion
 //#region src/components/table/index.tsx
+/** The pagination bar's arrows — thin chevrons for the row of seals. */
+function pageGlyph(direction) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		width: 14,
+		height: 14,
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: direction === "start" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6" })
+	});
+}
+/** The page-size select's pointing chevron. */
+function chevronDownGlyph() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		width: 14,
+		height: 14,
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+	});
+}
 const SELECT_COL_ID = "__select";
 const SELECT_COL_WIDTH = 48;
 /** The list holding `id` and the index inside it, or null when absent. */
@@ -1334,7 +3475,7 @@ function SelectBox(props) {
 }
 function DataTable(rawProps) {
 	const props = rawProps;
-	const { selectable = false, sortable = true, filterable = false, tree = false, virtual: virtualProp = false, rowHeight = 40, paginated = false, pageSize = 10, pageSizeOptions = [
+	const { selectable = false, sortable = true, filterable = false, showToolbar = true, tree = false, virtual: virtualProp = false, rowHeight = 40, paginated = false, pageSize = 10, pageSizeOptions = [
 		10,
 		20,
 		50
@@ -1702,7 +3843,7 @@ function DataTable(rawProps) {
 			onDragLeave: canDrag ? onColDragLeave : void 0,
 			onDrop: canDrag ? (e) => onColDrop(column, e) : void 0,
 			onDragEnd: canDrag ? onColDragEnd : void 0,
-			children: [header.isPlaceholder ? null : /* @__PURE__ */ jsx(FlexRender, { header }), canFilter ? /* @__PURE__ */ jsx("input", {
+			children: [header.isPlaceholder || header.column.columnDef.header === "" ? null : /* @__PURE__ */ jsx(FlexRender, { header }), canFilter ? /* @__PURE__ */ jsx("input", {
 				type: "text",
 				"data-scope": "table",
 				"data-part": "header-filter",
@@ -1809,55 +3950,53 @@ function DataTable(rawProps) {
 	const paginationBar = paginated ? (() => {
 		const pagination = table.atoms.pagination.get();
 		const rowCount = table.getRowCount();
-		const pageCount = table.getPageCount();
+		const sizeItems = createListCollection({ items: pageSizeOptions.map((size) => ({
+			label: `${size} / page`,
+			value: String(size)
+		})) });
+		const pageSize = /* @__PURE__ */ jsxs(Select.Root, {
+			collection: sizeItems,
+			value: [String(pagination.pageSize)],
+			onValueChange: (details) => table.setPageSize(Number(details.value[0])),
+			positioning: { placement: "top-start" },
+			children: [/* @__PURE__ */ jsx(Select.Control, { children: /* @__PURE__ */ jsxs(Select.Trigger, {
+				"aria-label": "Rows per page",
+				children: [/* @__PURE__ */ jsx(Select.ValueText, {}), /* @__PURE__ */ jsx(Select.Indicator, { children: chevronDownGlyph() })]
+			}) }), /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Content, { children: sizeItems.items.map((item) => /* @__PURE__ */ jsxs(Select.Item, {
+				item,
+				children: [/* @__PURE__ */ jsx(Select.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Select.ItemIndicator, { children: "✓" })]
+			}, item.value)) }) })]
+		});
+		const pager = /* @__PURE__ */ jsxs(Pagination.Root, {
+			count: rowCount,
+			pageSize: pagination.pageSize,
+			page: pagination.pageIndex + 1,
+			onPageChange: (details) => table.setPageIndex(details.page - 1),
+			children: [
+				/* @__PURE__ */ jsx(Pagination.PrevTrigger, { children: pageGlyph("start") }),
+				/* @__PURE__ */ jsx(Pagination.Context, { children: (scope) => scope.pages.map((page, index) => page.type === "ellipsis" ? /* @__PURE__ */ jsx(Pagination.Ellipsis, { index }, `e${index}`) : /* @__PURE__ */ jsx(Pagination.Item, {
+					type: "page",
+					value: page.value,
+					children: String(page.value)
+				}, page.value)) }),
+				/* @__PURE__ */ jsx(Pagination.NextTrigger, { children: pageGlyph("end") })
+			]
+		});
 		return /* @__PURE__ */ jsxs("div", {
 			"data-scope": "table",
 			"data-part": "pagination",
-			children: [
-				/* @__PURE__ */ jsx("button", {
-					type: "button",
-					"data-scope": "table",
-					"data-part": "page-button",
-					disabled: !table.getCanPreviousPage(),
-					onClick: () => table.previousPage(),
-					children: "Prev"
-				}),
-				/* @__PURE__ */ jsx("button", {
-					type: "button",
-					"data-scope": "table",
-					"data-part": "page-button",
-					disabled: !table.getCanNextPage(),
-					onClick: () => table.nextPage(),
-					children: "Next"
-				}),
-				/* @__PURE__ */ jsx("select", {
-					"data-scope": "table",
-					"data-part": "page-size",
-					"aria-label": "Rows per page",
-					value: pagination.pageSize,
-					onChange: (e) => table.setPageSize(Number(e.target.value)),
-					children: pageSizeOptions.map((size) => /* @__PURE__ */ jsxs("option", {
-						value: size,
-						children: [size, " / page"]
-					}, size))
-				}),
-				/* @__PURE__ */ jsxs("span", {
-					"data-scope": "table",
-					"data-part": "page-status",
-					children: [
-						"Page ",
-						pagination.pageIndex + 1,
-						" of ",
-						pageCount,
-						" · ",
-						rowCount,
-						" rows"
-					]
-				})
-			]
+			children: [/* @__PURE__ */ jsxs("span", {
+				"data-scope": "table",
+				"data-part": "page-status",
+				children: [rowCount, " rows"]
+			}), /* @__PURE__ */ jsxs("div", {
+				"data-scope": "table",
+				"data-part": "page-nav",
+				children: [pageSize, pager]
+			})]
 		});
 	})() : null;
-	const toolbar = filterable ? /* @__PURE__ */ jsx("div", {
+	const toolbar = filterable && showToolbar ? /* @__PURE__ */ jsx("div", {
 		"data-scope": "table",
 		"data-part": "toolbar",
 		children: /* @__PURE__ */ jsx("input", {
@@ -1902,6 +4041,22 @@ function DataTable(rawProps) {
 }
 injectComponentStyle("table");
 //#endregion
+//#region src/components/textarea/index.tsx
+function Textarea({ value, invalid = false, onValueChange, ...rest }) {
+	const field = useFieldContext();
+	const fieldProps = field?.getTextareaProps() ?? {};
+	return /* @__PURE__ */ jsx("textarea", {
+		...fieldProps,
+		...rest,
+		...value !== void 0 ? { value } : {},
+		"data-scope": "textarea",
+		"data-part": "root",
+		"data-invalid": invalid || field?.invalid ? "" : void 0,
+		onChange: (event) => onValueChange?.(event.target.value)
+	});
+}
+injectComponentStyle("textarea");
+//#endregion
 //#region src/components/timeline/index.tsx
 /** A line of moments: Root is the ordered thread, Item one moment on it,
 * Marker the point where the thread passes, Content what the moment
@@ -2016,6 +4171,299 @@ injectComponentStyle("tooltip");
 const Tour = Tour$1;
 injectComponentStyle("tour");
 //#endregion
+//#region src/components/transfer/index.tsx
+const checkGlyph = /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 3,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "m5 12.5 5 5L19 7" })
+});
+function arrowGlyph(direction) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.75,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: direction === "right" ? "M5 12h14m-6-6 6 6-6 6" : "M19 12H5m6-6-6 6 6 6" })
+	});
+}
+/**
+* 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({ value = [], data, titles = ["Source", "Target"], searchable = false, disabled = false, onValueChange, ...rest }) {
+	const [checkedSource, setCheckedSource] = useState(() => /* @__PURE__ */ new Set());
+	const [checkedTarget, setCheckedTarget] = useState(() => /* @__PURE__ */ new Set());
+	const [sourceQuery, setSourceQuery] = useState("");
+	const [targetQuery, setTargetQuery] = useState("");
+	const target = new Set(value);
+	function panelItems(values, inTarget, query) {
+		return values.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()) && target.has(item.value) === inTarget);
+	}
+	function toggle(side, option) {
+		(side === "source" ? setCheckedSource : setCheckedTarget)((prev) => {
+			const next = new Set(prev);
+			if (next.has(option)) next.delete(option);
+			else next.add(option);
+			return next;
+		});
+	}
+	function move(toTarget) {
+		const moving = toTarget ? checkedSource : checkedTarget;
+		if (moving.size === 0) return;
+		const next = toTarget ? [...value, ...moving].filter((entry, index, all) => all.indexOf(entry) === index) : value.filter((entry) => !moving.has(entry));
+		if (toTarget) setCheckedSource(/* @__PURE__ */ new Set());
+		else setCheckedTarget(/* @__PURE__ */ new Set());
+		onValueChange?.(next);
+	}
+	function panel(side, title, query, onQuery, checked, items) {
+		return /* @__PURE__ */ jsxs("div", {
+			"data-scope": "transfer",
+			"data-part": "panel",
+			"data-side": side,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					"data-scope": "transfer",
+					"data-part": "head",
+					children: [/* @__PURE__ */ jsx("span", {
+						"data-scope": "transfer",
+						"data-part": "title",
+						children: title
+					}), /* @__PURE__ */ jsx("span", {
+						"data-scope": "transfer",
+						"data-part": "count",
+						children: items.length
+					})]
+				}),
+				searchable ? /* @__PURE__ */ jsx("div", {
+					"data-scope": "transfer",
+					"data-part": "search",
+					children: /* @__PURE__ */ jsx(Input, {
+						size: "sm",
+						value: query,
+						onValueChange: onQuery,
+						placeholder: "Filter…",
+						"aria-label": `Filter ${title}`
+					})
+				}) : null,
+				/* @__PURE__ */ jsx("div", {
+					"data-scope": "transfer",
+					"data-part": "list",
+					children: items.length === 0 ? /* @__PURE__ */ jsx("p", {
+						"data-scope": "transfer",
+						"data-part": "empty",
+						children: "Nothing here"
+					}) : items.map((item) => {
+						const locked = disabled || item.disabled === true;
+						return /* @__PURE__ */ jsxs(Checkbox$1.Root, {
+							checked: checked.has(item.value),
+							disabled: locked,
+							onCheckedChange: () => toggle(side, item.value),
+							children: [
+								/* @__PURE__ */ jsx(Checkbox$1.Control, { children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, { children: checkGlyph }) }),
+								/* @__PURE__ */ jsx(Checkbox$1.Label, {
+									"data-part": "label",
+									children: item.label
+								}),
+								/* @__PURE__ */ jsx(Checkbox$1.HiddenInput, {})
+							]
+						}, item.value);
+					})
+				})
+			]
+		});
+	}
+	const items = panelItems(data, false, sourceQuery);
+	const targetItems = panelItems(data, true, targetQuery);
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-scope": "transfer",
+		"data-part": "root",
+		children: [
+			panel("source", titles[0], sourceQuery, setSourceQuery, checkedSource, items),
+			/* @__PURE__ */ jsxs("div", {
+				"data-scope": "transfer",
+				"data-part": "operations",
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "sm",
+					square: true,
+					disabled: checkedSource.size === 0 || disabled,
+					"aria-label": "Move right",
+					onClick: () => move(true),
+					children: arrowGlyph("right")
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "sm",
+					square: true,
+					disabled: checkedTarget.size === 0 || disabled,
+					"aria-label": "Move left",
+					onClick: () => move(false),
+					children: arrowGlyph("left")
+				})]
+			}),
+			panel("target", titles[1], targetQuery, setTargetQuery, checkedTarget, targetItems)
+		]
+	});
+}
+injectComponentStyle("transfer");
+injectComponentStyle("checkbox");
+//#endregion
+//#region src/components/tree-select/index.tsx
+const chevron = /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+});
+const chevronDown = /* @__PURE__ */ jsx("span", {
+	"data-part": "chevron",
+	"aria-hidden": "true",
+	children: chevron
+});
+function TreeSelectRow({ node, indexPath }) {
+	return /* @__PURE__ */ jsx(TreeView$1.NodeProvider, {
+		node,
+		indexPath,
+		children: node.children ? /* @__PURE__ */ jsxs(TreeView$1.Branch, { children: [/* @__PURE__ */ jsxs(TreeView$1.BranchControl, { children: [/* @__PURE__ */ jsx(TreeView$1.BranchIndicator, { children: chevron }), /* @__PURE__ */ jsx(TreeView$1.BranchText, { children: node.label })] }), /* @__PURE__ */ jsxs(TreeView$1.BranchContent, { children: [/* @__PURE__ */ jsx(TreeView$1.BranchIndentGuide, {}), node.children.map((child, index) => /* @__PURE__ */ jsx(TreeSelectRow, {
+			node: child,
+			indexPath: [...indexPath, index]
+		}, child.value))] })] }) : /* @__PURE__ */ jsx(TreeView$1.Item, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("span", {
+				style: {
+					display: "flex",
+					inlineSize: "100%"
+				},
+				children: /* @__PURE__ */ jsx(TreeView$1.ItemText, { children: node.label })
+			})
+		})
+	});
+}
+function TreeSelect({ value, data, placeholder = "Select…", filterable = false, disabled = false, onValueChange, ...rest }) {
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useState("");
+	const filterFns = useFilter({ sensitivity: "base" });
+	const collection = useMemo(() => createTreeCollection$1({
+		nodeToValue: (node) => node.value,
+		nodeToString: (node) => node.label,
+		rootNode: {
+			value: "ROOT",
+			label: "",
+			children: data
+		}
+	}), [data]);
+	const filtering = filterable && query.trim().length > 0;
+	/** The collection pruned to the matches — each hit keeping its
+	* ancestors, so a deep match still reads inside its hierarchy. */
+	const visibleCollection = useMemo(() => filtering ? collection.filter((node) => filterFns.contains(node.label, query.trim())) : collection, [
+		filtering,
+		collection,
+		filterFns,
+		query
+	]);
+	const firstLevel = data.map((node) => node.value);
+	const expandedWhileFiltering = useMemo(() => {
+		if (!filtering) return void 0;
+		const values = [];
+		const walk = (nodes) => {
+			for (const node of nodes) if (node.children?.length) {
+				values.push(node.value);
+				walk(node.children);
+			}
+		};
+		walk(visibleCollection.rootNode.children ?? []);
+		return values;
+	}, [filtering, visibleCollection]);
+	let found;
+	const walk = (nodes) => {
+		for (const node of nodes ?? []) {
+			if (node.value === value) found = node.label;
+			walk(node.children);
+		}
+	};
+	walk(data);
+	const label = found;
+	function pick(details) {
+		const [selected] = details.selectedValue;
+		if (selected == null) return;
+		onValueChange?.(selected);
+		setOpen(false);
+	}
+	return /* @__PURE__ */ jsxs(Popover$1.Root, {
+		...rest,
+		open,
+		onOpenChange: (details) => {
+			setOpen(details.open);
+			if (!details.open) setQuery("");
+		},
+		positioning: {
+			sameWidth: true,
+			placement: "bottom-start"
+		},
+		children: [/* @__PURE__ */ jsx(Popover$1.Trigger, {
+			asChild: true,
+			disabled,
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"data-scope": "tree-select",
+				"data-part": "control",
+				"data-open": open ? "" : void 0,
+				"data-placeholder": label == null ? "" : void 0,
+				disabled,
+				children: [label ?? placeholder, chevronDown]
+			})
+		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { children: /* @__PURE__ */ jsxs(Popover$1.Content, {
+			"data-scope": "tree-select",
+			"data-part": "content",
+			children: [filterable ? /* @__PURE__ */ jsx("div", {
+				"data-scope": "tree-select",
+				"data-part": "search",
+				children: /* @__PURE__ */ jsx(Input, {
+					size: "sm",
+					value: query,
+					onValueChange: setQuery,
+					placeholder: "Filter…",
+					"aria-label": "Filter options"
+				})
+			}) : null, /* @__PURE__ */ jsx("div", {
+				"data-scope": "tree-select",
+				"data-part": "body",
+				children: (visibleCollection.rootNode.children ?? []).length === 0 ? /* @__PURE__ */ jsx("p", {
+					"data-scope": "tree-select",
+					"data-part": "empty",
+					children: "Nothing matches"
+				}) : /* @__PURE__ */ jsx(TreeView$1.Root, {
+					collection: visibleCollection,
+					selectionMode: "single",
+					selectedValue: value ? [value] : [],
+					...filtering ? { expandedValue: expandedWhileFiltering } : { defaultExpandedValue: firstLevel },
+					onSelectionChange: pick,
+					children: /* @__PURE__ */ jsx(TreeView$1.Tree, { children: visibleCollection.rootNode.children?.map((node, index) => /* @__PURE__ */ jsx(TreeSelectRow, {
+						node,
+						indexPath: [index]
+					}, node.value)) })
+				})
+			})]
+		}) }) })]
+	});
+}
+injectComponentStyle("tree-select");
+injectComponentStyle("tree-view");
+//#endregion
 //#region src/components/tree-view/index.tsx
 /** 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,
@@ -2027,4 +4475,80 @@ 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
+/** 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;
+}
+/**
+* The paper bears its seal beneath the content: a canvas draws the
+* text once into a tile (rotated, faint, crisp at the screen's pixel
+* density) and the marks layer repeats it over the children. The seal
+* redraws itself when a prop turns — and it never takes a pointer.
+*/
+function Watermark({ content, opacity = .06, rotate = -20, fontSize = "0.875rem", children, ...rest }) {
+	const [root, setRoot] = useState(null);
+	const [tile, setTile] = useState("");
+	useEffect(() => {
+		if (!root) return;
+		const canvas = document.createElement("canvas");
+		const paint = canvas.getContext("2d");
+		if (!paint) return;
+		const styles = getComputedStyle(root);
+		const fontSizePx = toPx(fontSize);
+		const font = `${styles.fontWeight} ${fontSizePx}px ${styles.fontFamily}`;
+		paint.font = font;
+		const textWidth = paint.measureText(content).width;
+		const margin = fontSizePx;
+		const boxWidth = Math.ceil(textWidth + margin * 2);
+		const boxHeight = Math.ceil(fontSizePx + margin * 2);
+		const radian = rotate * 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 = opacity;
+		paint.font = font;
+		paint.textAlign = "center";
+		paint.textBaseline = "middle";
+		paint.fillStyle = styles.getPropertyValue("--bs-color-text-tertiary").trim() || styles.color;
+		paint.fillText(content, 0, 0);
+		setTile(`url(${canvas.toDataURL()})`);
+	}, [
+		root,
+		content,
+		opacity,
+		rotate,
+		fontSize
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		ref: setRoot,
+		"data-scope": "watermark",
+		"data-part": "root",
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-scope": "watermark",
+			"data-part": "content",
+			children
+		}), /* @__PURE__ */ jsx("div", {
+			"data-scope": "watermark",
+			"data-part": "marks",
+			"aria-hidden": "true",
+			style: { backgroundImage: tile }
+		})]
+	});
+}
+injectComponentStyle("watermark");
+//#endregion
+export { Accordion, Action, Action as AiAction, Affix, Ai, Attachment as AiAttachment, Attachment, Attachments as AiAttachments, Attachments, 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, Calendar, Card, Carousel, CascadeSelect, Checkbox, CheckboxGroup, Chip, ClientOnly, Clipboard, Collapsible, ColorPicker, Combobox, Command, Comment, ConfigProvider, Container, DataTable, DateInput, DatePicker, Descriptions, DescriptionsRoot, Dialog, DownloadTrigger, Drawer, DynamicInput, Editable, Ellipsis, Empty, FLOAT_BUTTON_CONTEXT, Field, Fieldset, FileUpload, FlexRender, FloatButton, 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 };