@bysages/solid 0.1.1 → 0.2.1

package/dist/index.mjs

@@ -12,7 +12,7 @@ import { Avatar as Avatar$1 } from "@ark-ui/solid/avatar";
 import { DatePicker as DatePicker$1 } from "@ark-ui/solid/date-picker";
 import { Carousel as Carousel$1 } from "@ark-ui/solid/carousel";
 import { useEnvironmentContext } from "@ark-ui/solid/environment";
-import { useLocaleContext } from "@ark-ui/solid/locale";
+import { useFilter, useLocaleContext } from "@ark-ui/solid/locale";
 import * as cascade from "@zag-js/cascade-select";
 import { normalizeProps, useMachine } from "@zag-js/solid";
 import { Checkbox as Checkbox$1 } from "@ark-ui/solid/checkbox";
@@ -50,7 +50,7 @@ import { RadioGroup as RadioGroup$1 } from "@ark-ui/solid/radio-group";
 import { RatingGroup as RatingGroup$1 } from "@ark-ui/solid/rating-group";
 import { ScrollArea as ScrollArea$1 } from "@ark-ui/solid/scroll-area";
 import { SegmentGroup as SegmentGroup$1 } from "@ark-ui/solid/segment-group";
-import { Select as Select$1 } from "@ark-ui/solid/select";
+import { Select as Select$1, createListCollection } from "@ark-ui/solid/select";
 import { SignaturePad as SignaturePad$1 } from "@ark-ui/solid/signature-pad";
 import { Slider as Slider$1 } from "@ark-ui/solid/slider";
 import { Splitter as Splitter$1 } from "@ark-ui/solid/splitter";
@@ -203,8 +203,8 @@ injectComponentStyle("field");
 var _tmpl$$55 = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"width=14 height=14 aria-hidden=true fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=square><path d="M8 13V3M3.5 7.5 8 3l4.5 4.5">`);
 var _tmpl$2$28 = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"width=14 height=14 aria-hidden=true><rect x=4.5 y=4.5 width=7 height=7 fill=currentColor>`);
 var _tmpl$3$18 = /*#__PURE__*/ template(`<div data-scope=ai>`);
-var _tmpl$4$13 = /*#__PURE__*/ template(`<div data-scope=ai data-part=prompt-footer><div data-scope=ai data-part=prompt-end>`);
-var _tmpl$5$10 = /*#__PURE__*/ template(`<form><div data-scope=ai data-part=prompt-main>`);
+var _tmpl$4$14 = /*#__PURE__*/ template(`<div data-scope=ai data-part=prompt-footer><div data-scope=ai data-part=prompt-end>`);
+var _tmpl$5$11 = /*#__PURE__*/ template(`<form><div data-scope=ai data-part=prompt-main>`);
 function arrowUpGlyph() {
 	return _tmpl$$55();
 }
@@ -278,7 +278,7 @@ function PromptInput(props) {
 	});
 	const trailing = () => own.footer != null ? own.trailing : own.trailing ?? seal();
 	return (() => {
-		var _el$4 = _tmpl$5$10(), _el$5 = _el$4.firstChild;
+		var _el$4 = _tmpl$5$11(), _el$5 = _el$4.firstChild;
 		spread(_el$4, mergeProps(rest, {
 			"data-scope": "ai",
 			"data-part": "prompt",
@@ -317,7 +317,7 @@ function PromptInput(props) {
 				return own.footer != null;
 			},
 			get children() {
-				var _el$6 = _tmpl$4$13(), _el$7 = _el$6.firstChild;
+				var _el$6 = _tmpl$4$14(), _el$7 = _el$6.firstChild;
 				insert(_el$6, () => own.footer, _el$7);
 				insert(_el$7, () => own.footerEnd, null);
 				insert(_el$7, seal, null);
@@ -371,19 +371,91 @@ function Reasoning(props) {
 }
 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
 var _tmpl$$52 = /*#__PURE__*/ template(`<div>`);
 /** Markdown set on the paper. Rendering goes through
 * `@tanstack/markdown`, whose defaults leave raw HTML and executable
 * links inert — streaming-safe by construction. */
 function Response(props) {
-	const [own, rest] = splitProps(props, ["content", "highlighter"]);
+	const [own, rest] = splitProps(props, [
+		"content",
+		"highlighter",
+		"copyLabel",
+		"copiedLabel"
+	]);
 	const html = createMemo(() => renderHtml(own.content, own.highlighter ? { highlighter: own.highlighter } : void 0));
+	let root;
+	onMount(() => createEffect(() => {
+		html();
+		if (root) decorateCodeCopy(root, own.copyLabel ?? "Copy code");
+	}));
+	const onClick = (event) => {
+		clickCodeCopy(event, own.copyLabel ?? "Copy code", own.copiedLabel ?? "Copied");
+	};
 	return (() => {
 		var _el$ = _tmpl$$52();
+		use((el) => root = el, _el$);
 		spread(_el$, mergeProps(rest, {
 			"data-scope": "ai",
 			"data-part": "response",
+			"onClick": onClick,
 			get innerHTML() {
 				return html();
 			}
@@ -446,9 +518,9 @@ injectComponentStyle("ai");
 var _tmpl$$50 = /*#__PURE__*/ template(`<span>`);
 var _tmpl$2$25 = /*#__PURE__*/ template(`<span data-scope=ai data-part=tool-status>`);
 var _tmpl$3$17 = /*#__PURE__*/ template(`<span data-scope=ai data-part=tool-label>Input`);
-var _tmpl$4$12 = /*#__PURE__*/ template(`<pre>`);
-var _tmpl$5$9 = /*#__PURE__*/ template(`<span data-scope=ai data-part=tool-label>Output`);
-var _tmpl$6$6 = /*#__PURE__*/ template(`<div data-scope=ai data-part=tool-body>`);
+var _tmpl$4$13 = /*#__PURE__*/ template(`<pre>`);
+var _tmpl$5$10 = /*#__PURE__*/ template(`<span data-scope=ai data-part=tool-label>Output`);
+var _tmpl$6$7 = /*#__PURE__*/ template(`<div data-scope=ai data-part=tool-body>`);
 /** A tool call: the shared collapsible as the vessel — the name it was
 * reached by and the state it reached in on the trigger, its input and
 * output folded inside. */
@@ -483,14 +555,14 @@ function Tool(props) {
 				} })
 			];
 		} }), createComponent(Collapsible.Content, { get children() {
-			var _el$3 = _tmpl$6$6();
+			var _el$3 = _tmpl$6$7();
 			insert(_el$3, createComponent(Show, {
 				get when() {
 					return own.input !== void 0;
 				},
 				get children() {
 					return [_tmpl$3$17(), (() => {
-						var _el$5 = _tmpl$4$12();
+						var _el$5 = _tmpl$4$13();
 						insert(_el$5, () => own.input);
 						return _el$5;
 					})()];
@@ -501,8 +573,8 @@ function Tool(props) {
 					return own.output !== void 0;
 				},
 				get children() {
-					return [_tmpl$5$9(), (() => {
-						var _el$7 = _tmpl$4$12();
+					return [_tmpl$5$10(), (() => {
+						var _el$7 = _tmpl$4$13();
 						insert(_el$7, () => own.output);
 						return _el$7;
 					})()];
@@ -576,8 +648,8 @@ injectComponentStyle("ai");
 var _tmpl$$48 = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"aria-hidden=true fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=square><rect x=2.5 y=3.5 width=11 height=9></rect><path d="M2.5 10.5 6 7l3 3 2-1.5 2.5 2"></path><circle cx=6 cy=6 r=0.75 fill=currentColor stroke=none>`);
 var _tmpl$2$24 = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"aria-hidden=true fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=square><path d="M4 2.5h5l3 3V13.5H4z"></path><path d="M9 2.5v3h3">`);
 var _tmpl$3$16 = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"width=12 height=12 aria-hidden=true fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=square><path d="M4 4l8 8M12 4l-8 8">`);
-var _tmpl$4$11 = /*#__PURE__*/ template(`<span><span></span><button type=button data-remove>`);
-var _tmpl$5$8 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$4$12 = /*#__PURE__*/ template(`<span><span></span><button type=button data-remove>`);
+var _tmpl$5$9 = /*#__PURE__*/ template(`<span>`);
 function imageGlyph() {
 	return _tmpl$$48();
 }
@@ -625,7 +697,7 @@ function Attachment(props) {
 		"onRemove"
 	]);
 	return (() => {
-		var _el$4 = _tmpl$4$11(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
+		var _el$4 = _tmpl$4$12(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
 		spread(_el$4, mergeProps(rest, {
 			"data-scope": "ai",
 			"data-part": "attachment",
@@ -641,7 +713,7 @@ function Attachment(props) {
 		insert(_el$4, (() => {
 			var _c$2 = memo(() => own.size !== void 0);
 			return () => _c$2() ? (() => {
-				var _el$7 = _tmpl$5$8();
+				var _el$7 = _tmpl$5$9();
 				insert(_el$7, () => humanSize(own.size));
 				return _el$7;
 			})() : null;
@@ -655,7 +727,7 @@ function Attachment(props) {
 /** The row the files ride in — a wrapping line of chips. */
 function Attachments(props) {
 	return (() => {
-		var _el$8 = _tmpl$5$8();
+		var _el$8 = _tmpl$5$9();
 		spread(_el$8, mergeProps(props, {
 			"data-scope": "ai",
 			"data-part": "attachments"
@@ -670,7 +742,7 @@ delegateEvents(["click"]);
 var _tmpl$$47 = /*#__PURE__*/ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path>`);
 var _tmpl$2$23 = /*#__PURE__*/ template(`<div>`);
 var _tmpl$3$15 = /*#__PURE__*/ template(`<span data-scope=alert data-part=icon>`);
-var _tmpl$4$10 = /*#__PURE__*/ template(`<p>`);
+var _tmpl$4$11 = /*#__PURE__*/ template(`<p>`);
 const StatusContext = createContext(() => "ink");
 function glyph(status) {
 	const paths = {
@@ -727,7 +799,7 @@ function Body$2(props) {
 }
 function Title$4(props) {
 	return (() => {
-		var _el$6 = _tmpl$4$10();
+		var _el$6 = _tmpl$4$11();
 		spread(_el$6, mergeProps(props, {
 			"data-scope": "alert",
 			"data-part": "title"
@@ -737,7 +809,7 @@ function Title$4(props) {
 }
 function Description$5(props) {
 	return (() => {
-		var _el$7 = _tmpl$4$10();
+		var _el$7 = _tmpl$4$11();
 		spread(_el$7, mergeProps(props, {
 			"data-scope": "alert",
 			"data-part": "description"
@@ -848,11 +920,14 @@ function AutoComplete(props) {
 }
 injectComponentStyle("combobox");
 //#endregion
-//#region src/components/avatar/index.ts
-/** Ark's Avatar, dressed in the paper-and-ink system: a circular seal on
-* inset paper that holds initials until the image loads over them. The
-* API is Ark's own — Root, Image, Fallback. */
-const Avatar = Avatar$1;
+//#region src/components/avatar/index.tsx
+function AvatarRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(Avatar$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size;
+	} }));
+}
+const Avatar = Object.assign({}, Avatar$1, { Root: AvatarRoot });
 injectComponentStyle("avatar");
 //#endregion
 //#region src/components/avatar-group/index.tsx
@@ -877,26 +952,55 @@ var _tmpl$2$22 = /*#__PURE__*/ template(`<svg width=16 height=16 viewBox="0 0 24
 * floating control rises at the page's corner and returns the reader to
 * the top. The scroll itself stays native — `window.scrollTo` defers to
 * the stylesheet's `scroll-behavior: smooth`, which reduced motion turns
-* back into an instant jump. The button stays mounted either way so the
-* entrance is a transition, never a pop.
+* 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(props) {
-	const [own, rest] = splitProps(props, ["threshold", "label"]);
+	const [own, rest] = splitProps(props, [
+		"threshold",
+		"label",
+		"scrollEl"
+	]);
 	const [visible, setVisible] = createSignal(false);
+	const scroller = () => own.scrollEl?.() ?? null;
 	const onScroll = () => {
-		setVisible(window.scrollY > (own.threshold ?? 400));
+		const el = scroller();
+		setVisible((el ? el.scrollTop : window.scrollY) > (own.threshold ?? 400));
+	};
+	const toTop = () => {
+		const el = scroller();
+		if (!el) {
+			window.scrollTo({ top: 0 });
+			return;
+		}
+		const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		el.scrollTo({
+			top: 0,
+			behavior: reduce ? "auto" : "smooth"
+		});
 	};
 	onMount(() => {
+		const el = scroller();
 		onScroll();
-		window.addEventListener("scroll", onScroll, { passive: true });
+		if (el) el.addEventListener("scroll", onScroll, { passive: true });
+		else window.addEventListener("scroll", onScroll, { passive: true });
+	});
+	onCleanup(() => {
+		const el = scroller();
+		if (el) el.removeEventListener("scroll", onScroll);
+		else window.removeEventListener("scroll", onScroll);
 	});
-	onCleanup(() => window.removeEventListener("scroll", onScroll));
 	return (() => {
 		var _el$ = _tmpl$$44();
+		spread(_el$, mergeProps({ get ["data-state"]() {
+			return visible() ? "shown" : "hidden";
+		} }, () => scroller() ? { "data-container": "" } : {}), false, true);
 		insert(_el$, createComponent(Button, mergeProps(rest, {
 			variant: "outline",
 			square: true,
@@ -910,12 +1014,11 @@ function BackTop(props) {
 			get tabindex() {
 				return visible() ? 0 : -1;
 			},
-			onClick: () => window.scrollTo({ top: 0 }),
+			onClick: toTop,
 			get children() {
 				return rest.children ?? chevronUp();
 			}
 		})));
-		effect(() => setAttribute(_el$, "data-state", visible() ? "shown" : "hidden"));
 		return _el$;
 	})();
 }
@@ -1319,17 +1422,57 @@ injectComponentStyle("card");
 const Carousel = Carousel$1;
 injectComponentStyle("carousel");
 //#endregion
+//#region src/components/input/index.tsx
+var _tmpl$$38 = /*#__PURE__*/ template(`<input>`);
+/** The bare text input: the field recipe — border, surface, focus halo —
+* on a native control. Standing alone it styles itself from the `invalid`
+* prop; inside a `Field.Root` it consumes the field context, picking up
+* the label id, the described-by wiring and the invalid state for free,
+* which is also the seam the Form validation layer will drive. Disabled
+* rides the native attribute. */
+function Input(props) {
+	const field = useFieldContext();
+	const [own, rest] = splitProps(props, [
+		"value",
+		"size",
+		"invalid",
+		"onValueChange"
+	]);
+	return (() => {
+		var _el$ = _tmpl$$38();
+		spread(_el$, mergeProps(() => mergeProps$1(() => field?.().getInputProps() ?? {}, rest, {
+			get value() {
+				return own.value;
+			},
+			"data-scope": "input",
+			"data-part": "root",
+			get "data-size"() {
+				return own.size ?? "md";
+			},
+			get "data-invalid"() {
+				return own.invalid || field?.().getInputProps()["data-invalid"] != null ? "" : void 0;
+			},
+			onInput: (event) => own.onValueChange?.(event.currentTarget.value)
+		})), false, false);
+		return _el$;
+	})();
+}
+injectComponentStyle("input");
+//#endregion
 //#region src/components/cascade-select/index.tsx
-var _tmpl$$38 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m6 9 6 6 6-6">`);
+var _tmpl$$37 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m6 9 6 6 6-6">`);
 var _tmpl$2$19 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m9 18 6-6-6-6">`);
 var _tmpl$3$13 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m5 12.5 5 5L19 7">`);
-var _tmpl$4$9 = /*#__PURE__*/ template(`<ul>`);
-var _tmpl$5$7 = /*#__PURE__*/ template(`<span data-part=branch-indicator aria-hidden=true>`);
-var _tmpl$6$5 = /*#__PURE__*/ template(`<li><span></span><span>`);
-var _tmpl$7$2 = /*#__PURE__*/ template(`<div><div>`);
-var _tmpl$8$2 = /*#__PURE__*/ template(`<div><div><button><span></span><span>`);
+var _tmpl$4$10 = /*#__PURE__*/ template(`<ul>`);
+var _tmpl$5$8 = /*#__PURE__*/ template(`<span data-part=branch-indicator aria-hidden=true>`);
+var _tmpl$6$6 = /*#__PURE__*/ template(`<li><span></span><span>`);
+var _tmpl$7$2 = /*#__PURE__*/ template(`<div data-part=search>`);
+var _tmpl$8$2 = /*#__PURE__*/ template(`<div><div>`);
+var _tmpl$9$2 = /*#__PURE__*/ template(`<div><div><button><span></span><span>`);
+var _tmpl$0$2 = /*#__PURE__*/ template(`<p data-part=empty>Nothing matches`);
+var _tmpl$1$2 = /*#__PURE__*/ template(`<button type=button data-part=match>`);
 function chevronDown$1() {
-	return _tmpl$$38();
+	return _tmpl$$37();
 }
 function chevronRight() {
 	return _tmpl$2$19();
@@ -1342,7 +1485,9 @@ function checkGlyph$2() {
 * dissolves open beside it, until a leaf click settles the whole path.
 * `value` is the selected path (or paths, when `multiple`) — the
 * joined labels ride the trigger. `highlightTrigger: "hover"` turns the
-* classic cascading menu: pointing is enough to unfold.
+* classic cascading menu: pointing is enough to unfold. `filterable`
+* swaps the corridor for a flat list of matching paths while a query
+* runs — each hit still reads as its full route.
 */
 function CascadeSelect(props) {
 	const [own, rest] = splitProps(props, [
@@ -1350,6 +1495,7 @@ function CascadeSelect(props) {
 		"data",
 		"placeholder",
 		"highlightTrigger",
+		"filterable",
 		"multiple",
 		"disabled",
 		"onValueChange"
@@ -1381,6 +1527,42 @@ function CascadeSelect(props) {
 		}
 	}));
 	const api = createMemo(() => cascade.connect(service, normalizeProps));
+	const [query, setQuery] = createSignal("");
+	const filterFns = useFilter({ sensitivity: "base" });
+	const filtering = () => own.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 = createMemo(() => {
+		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(own.data, [], [], false);
+		return hits;
+	});
+	const isSelected = (path) => (own.value ?? []).some((p) => p.join("/") === path.join("/"));
+	function pickMatch(path) {
+		if (own.multiple) {
+			const current = own.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. */
@@ -1410,7 +1592,7 @@ function CascadeSelect(props) {
 		const nodeState = () => api().getItemState(nodeProps);
 		const children = collection().getNodeChildren(node);
 		const list = (() => {
-			var _el$4 = _tmpl$4$9();
+			var _el$4 = _tmpl$4$10();
 			spread(_el$4, mergeProps(() => mergeProps$1(() => api().getListProps(nodeProps))), false, true);
 			insert(_el$4, createComponent(For, {
 				each: children,
@@ -1423,7 +1605,7 @@ function CascadeSelect(props) {
 					};
 					const itemState = () => api().getItemState(itemProps);
 					return (() => {
-						var _el$5 = _tmpl$6$5(), _el$6 = _el$5.firstChild, _el$8 = _el$6.nextSibling;
+						var _el$5 = _tmpl$6$6(), _el$6 = _el$5.firstChild, _el$8 = _el$6.nextSibling;
 						spread(_el$5, mergeProps(() => mergeProps$1(() => api().getItemProps(itemProps))), false, true);
 						spread(_el$6, mergeProps(() => mergeProps$1(() => api().getItemTextProps(itemProps))), false, true);
 						insert(_el$6, () => item.label);
@@ -1432,7 +1614,7 @@ function CascadeSelect(props) {
 								return itemState().hasChildren;
 							},
 							get children() {
-								var _el$7 = _tmpl$5$7();
+								var _el$7 = _tmpl$5$8();
 								insert(_el$7, chevronRight);
 								return _el$7;
 							}
@@ -1449,27 +1631,83 @@ function CascadeSelect(props) {
 		return [list, next != null && collection().isBranchNode(next) ? renderColumn(next, [...indexPath, nodeState().highlightedIndex], [...valuePath, collection().getNodeValue(next)]) : null];
 	}
 	return (() => {
-		var _el$9 = _tmpl$8$2(), _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling;
+		var _el$9 = _tmpl$9$2(), _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling;
 		spread(_el$9, mergeProps(rest, () => mergeProps$1(() => api().getRootProps())), false, true);
 		spread(_el$0, mergeProps(() => mergeProps$1(() => api().getControlProps())), false, true);
-		spread(_el$1, mergeProps(() => mergeProps$1(() => api().getTriggerProps(), { get disabled() {
-			return own.disabled || void 0;
-		} })), false, true);
+		spread(_el$1, mergeProps(() => mergeProps$1(() => api().getTriggerProps(), {
+			get disabled() {
+				return own.disabled || void 0;
+			},
+			onclick(event) {
+				api().getTriggerProps().onclick?.(event);
+				setQuery("");
+			}
+		})), false, true);
 		spread(_el$10, mergeProps(() => mergeProps$1(() => api().getValueTextProps())), false, true);
 		insert(_el$10, () => display() ?? own.placeholder ?? "Select…");
 		spread(_el$11, mergeProps(() => mergeProps$1(() => api().getIndicatorProps())), false, true);
 		insert(_el$11, chevronDown$1);
 		insert(_el$9, createComponent(Portal, { get children() {
-			var _el$12 = _tmpl$7$2(), _el$13 = _el$12.firstChild;
+			var _el$12 = _tmpl$8$2(), _el$13 = _el$12.firstChild;
 			spread(_el$12, mergeProps(() => mergeProps$1(() => api().getPositionerProps())), false, true);
 			spread(_el$13, mergeProps(() => mergeProps$1(() => api().getContentProps())), false, true);
-			insert(_el$13, () => renderColumn(collection().rootNode, [], []));
+			insert(_el$13, createComponent(Show, {
+				get when() {
+					return own.filterable;
+				},
+				get children() {
+					var _el$14 = _tmpl$7$2();
+					insert(_el$14, createComponent(Input, {
+						size: "sm",
+						get value() {
+							return query();
+						},
+						onValueChange: setQuery,
+						placeholder: "Filter…",
+						"aria-label": "Filter options"
+					}));
+					return _el$14;
+				}
+			}), null);
+			insert(_el$13, createComponent(Show, {
+				get when() {
+					return !filtering();
+				},
+				get fallback() {
+					return createComponent(Show, {
+						get when() {
+							return matchPaths().length > 0;
+						},
+						get fallback() {
+							return _tmpl$0$2();
+						},
+						get children() {
+							return createComponent(For, {
+								get each() {
+									return matchPaths();
+								},
+								children: (hit) => (() => {
+									var _el$16 = _tmpl$1$2();
+									_el$16.$$click = () => pickMatch(hit.path);
+									insert(_el$16, () => hit.labels.join(" / "));
+									effect(() => setAttribute(_el$16, "data-selected", isSelected(hit.path) || void 0));
+									return _el$16;
+								})()
+							});
+						}
+					});
+				},
+				get children() {
+					return renderColumn(collection().rootNode, [], []);
+				}
+			}), null);
 			return _el$12;
 		} }), null);
 		return _el$9;
 	})();
 }
 injectComponentStyle("cascade-select");
+delegateEvents(["click"]);
 //#endregion
 //#region src/components/checkbox/index.ts
 /** Ark's Checkbox, dressed in the paper-and-ink system: a square-cut seal
@@ -1480,26 +1718,32 @@ const Checkbox = Checkbox$1;
 injectComponentStyle("checkbox");
 //#endregion
 //#region src/components/checkbox-group/index.tsx
-var _tmpl$$37 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m5 12.5 5 5L19 7">`);
+var _tmpl$$36 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m5 12.5 5 5L19 7">`);
 var _tmpl$2$18 = /*#__PURE__*/ template(`<div>`);
 function checkGlyph$1() {
-	return _tmpl$$37();
+	return _tmpl$$36();
 }
 /**
 * 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.
+* 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(props) {
+	const field = useFieldContext();
 	const [own, rest] = splitProps(props, [
 		"value",
 		"options",
 		"layout",
+		"invalid",
 		"disabled",
 		"onValueChange"
 	]);
 	const selected = () => new Set(own.value ?? []);
+	const isInvalid = () => own.invalid || field?.().invalid === true;
+	const isDisabled = () => own.disabled || field?.().disabled === true;
 	function toggle(value) {
 		const next = new Set(selected());
 		if (next.has(value)) next.delete(value);
@@ -1514,6 +1758,9 @@ function CheckboxGroup(props) {
 			"data-part": "root",
 			get ["data-layout"]() {
 				return own.layout ?? "vertical";
+			},
+			get ["data-invalid"]() {
+				return isInvalid() ? "" : void 0;
 			}
 		}), false, true);
 		insert(_el$2, createComponent(For, {
@@ -1524,8 +1771,11 @@ function CheckboxGroup(props) {
 				get checked() {
 					return selected().has(option.value);
 				},
+				get invalid() {
+					return isInvalid();
+				},
 				get disabled() {
-					return own.disabled || option.disabled === true;
+					return isDisabled() || option.disabled === true;
 				},
 				onCheckedChange: () => toggle(option.value),
 				get children() {
@@ -1550,7 +1800,7 @@ injectComponentStyle("checkbox-group");
 injectComponentStyle("checkbox");
 //#endregion
 //#region src/components/chip/index.tsx
-var _tmpl$$36 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$$35 = /*#__PURE__*/ template(`<span>`);
 function Chip(props) {
 	const [own, rest] = splitProps(props, [
 		"value",
@@ -1559,7 +1809,7 @@ function Chip(props) {
 		"variant"
 	]);
 	return (() => {
-		var _el$ = _tmpl$$36();
+		var _el$ = _tmpl$$35();
 		spread(_el$, mergeProps(rest, {
 			"data-scope": "chip",
 			"data-part": "root",
@@ -1609,11 +1859,11 @@ const Combobox = Combobox$1;
 injectComponentStyle("combobox");
 //#endregion
 //#region src/components/command/index.tsx
-var _tmpl$$35 = /*#__PURE__*/ template(`<span data-scope=command data-part=item-hint>`);
+var _tmpl$$34 = /*#__PURE__*/ template(`<span data-scope=command data-part=item-hint>`);
 var _tmpl$2$17 = /*#__PURE__*/ template(`<div>`);
 var _tmpl$3$12 = /*#__PURE__*/ template(`<span>`);
-var _tmpl$4$8 = /*#__PURE__*/ template(`<input>`);
-var _tmpl$5$6 = /*#__PURE__*/ template(`<div data-scope=command data-part=empty>`);
+var _tmpl$4$9 = /*#__PURE__*/ template(`<input>`);
+var _tmpl$5$7 = /*#__PURE__*/ template(`<div data-scope=command data-part=empty>`);
 /** A command row: the machine's item grafted onto a vessel of our own,
 * the label riding the machine's item text. */
 function Row(props) {
@@ -1641,7 +1891,7 @@ function Row(props) {
 					return props.entry.hint;
 				},
 				get children() {
-					var _el$2 = _tmpl$$35();
+					var _el$2 = _tmpl$$34();
 					insert(_el$2, () => props.entry.hint);
 					return _el$2;
 				}
@@ -1754,7 +2004,7 @@ function Command(props) {
 							},
 							get children() {
 								return [createComponent(Combobox$1.Input, { asChild: (inputProps) => (() => {
-									var _el$6 = _tmpl$4$8();
+									var _el$6 = _tmpl$4$9();
 									spread(_el$6, mergeProps(inputProps, {
 										"type": "text",
 										get placeholder() {
@@ -1818,7 +2068,7 @@ function Command(props) {
 											return sections().length === 0;
 										},
 										get children() {
-											var _el$8 = _tmpl$5$6();
+											var _el$8 = _tmpl$5$7();
 											insert(_el$8, () => own.emptyText ?? "No matching commands");
 											return _el$8;
 										}
@@ -1839,12 +2089,12 @@ injectComponentStyle("command");
 injectComponentStyle("dialog");
 //#endregion
 //#region src/components/comment/index.tsx
-var _tmpl$$34 = /*#__PURE__*/ template(`<div data-scope=comment data-part=avatar>`);
+var _tmpl$$33 = /*#__PURE__*/ template(`<div data-scope=comment data-part=avatar>`);
 var _tmpl$2$16 = /*#__PURE__*/ template(`<span data-scope=comment data-part=author>`);
 var _tmpl$3$11 = /*#__PURE__*/ template(`<time data-scope=comment data-part=datetime>`);
-var _tmpl$4$7 = /*#__PURE__*/ template(`<header data-scope=comment data-part=header>`);
-var _tmpl$5$5 = /*#__PURE__*/ template(`<div data-scope=comment data-part=actions>`);
-var _tmpl$6$4 = /*#__PURE__*/ template(`<article><div data-scope=comment data-part=body><div data-scope=comment data-part=content>`);
+var _tmpl$4$8 = /*#__PURE__*/ template(`<header data-scope=comment data-part=header>`);
+var _tmpl$5$6 = /*#__PURE__*/ template(`<div data-scope=comment data-part=actions>`);
+var _tmpl$6$5 = /*#__PURE__*/ template(`<article><div data-scope=comment data-part=body><div data-scope=comment data-part=content>`);
 /**
 * A voice on the record: the portrait hangs left (the `avatar` prop),
 * the body carries the byline from `author` and `datetime`, the ink is
@@ -1859,7 +2109,7 @@ function Comment(props) {
 		"children"
 	]);
 	return (() => {
-		var _el$ = _tmpl$6$4(), _el$3 = _el$.firstChild, _el$7 = _el$3.firstChild;
+		var _el$ = _tmpl$6$5(), _el$3 = _el$.firstChild, _el$7 = _el$3.firstChild;
 		spread(_el$, mergeProps(rest, {
 			"data-scope": "comment",
 			"data-part": "root"
@@ -1869,7 +2119,7 @@ function Comment(props) {
 				return own.avatar;
 			},
 			get children() {
-				var _el$2 = _tmpl$$34();
+				var _el$2 = _tmpl$$33();
 				insert(_el$2, () => own.avatar);
 				return _el$2;
 			}
@@ -1879,7 +2129,7 @@ function Comment(props) {
 				return own.author || own.datetime;
 			},
 			get children() {
-				var _el$4 = _tmpl$4$7();
+				var _el$4 = _tmpl$4$8();
 				insert(_el$4, createComponent(Show, {
 					get when() {
 						return own.author;
@@ -1910,7 +2160,7 @@ function Comment(props) {
 				return own.actions;
 			},
 			get children() {
-				var _el$8 = _tmpl$5$5();
+				var _el$8 = _tmpl$5$6();
 				insert(_el$8, () => own.actions);
 				return _el$8;
 			}
@@ -1921,7 +2171,7 @@ function Comment(props) {
 injectComponentStyle("comment");
 //#endregion
 //#region src/components/config-provider/index.tsx
-var _tmpl$$33 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$$32 = /*#__PURE__*/ template(`<div>`);
 /** Solid context for the provider's snapshot — a custom part reads it
 * with `useContext(ConfigContextKey)`. */
 const ConfigContextKey = createContext(() => ({}));
@@ -1954,7 +2204,7 @@ function ConfigProvider(props) {
 			locale: own.locale
 		}),
 		get children() {
-			var _el$ = _tmpl$$33();
+			var _el$ = _tmpl$$32();
 			spread(_el$, mergeProps(rest, {
 				"data-scope": "config-provider",
 				"data-part": "root",
@@ -1978,11 +2228,11 @@ function ConfigProvider(props) {
 }
 //#endregion
 //#region src/components/container/index.tsx
-var _tmpl$$32 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$$31 = /*#__PURE__*/ template(`<div>`);
 function Container(props) {
 	const [own, rest] = splitProps(props, ["size", "padding"]);
 	return (() => {
-		var _el$ = _tmpl$$32();
+		var _el$ = _tmpl$$31();
 		spread(_el$, mergeProps(rest, {
 			"data-scope": "container",
 			"data-part": "root",
@@ -2017,11 +2267,11 @@ const DatePicker = DatePicker$1;
 injectComponentStyle("date-picker");
 //#endregion
 //#region src/components/descriptions/index.tsx
-var _tmpl$$31 = /*#__PURE__*/ template(`<dl>`);
+var _tmpl$$30 = /*#__PURE__*/ template(`<dl>`);
 function Root$6(props) {
 	const [own, rest] = splitProps(props, ["layout"]);
 	return (() => {
-		var _el$ = _tmpl$$31();
+		var _el$ = _tmpl$$30();
 		spread(_el$, mergeProps(rest, {
 			"data-scope": "descriptions",
 			"data-part": "root",
@@ -2071,43 +2321,6 @@ injectComponentStyle("dialog");
 const Drawer = Drawer$1;
 injectComponentStyle("drawer");
 //#endregion
-//#region src/components/input/index.tsx
-var _tmpl$$30 = /*#__PURE__*/ template(`<input>`);
-/** The bare text input: the field recipe — border, surface, focus halo —
-* on a native control. Standing alone it styles itself from the `invalid`
-* prop; inside a `Field.Root` it consumes the field context, picking up
-* the label id, the described-by wiring and the invalid state for free,
-* which is also the seam the Form validation layer will drive. Disabled
-* rides the native attribute. */
-function Input(props) {
-	const field = useFieldContext();
-	const [own, rest] = splitProps(props, [
-		"value",
-		"size",
-		"invalid",
-		"onValueChange"
-	]);
-	return (() => {
-		var _el$ = _tmpl$$30();
-		spread(_el$, mergeProps(() => mergeProps$1(() => field?.().getInputProps() ?? {}, rest, {
-			get value() {
-				return own.value;
-			},
-			"data-scope": "input",
-			"data-part": "root",
-			get "data-size"() {
-				return own.size ?? "md";
-			},
-			get "data-invalid"() {
-				return own.invalid || field?.().getInputProps()["data-invalid"] != null ? "" : void 0;
-			},
-			onInput: (event) => own.onValueChange?.(event.currentTarget.value)
-		})), false, false);
-		return _el$;
-	})();
-}
-injectComponentStyle("input");
-//#endregion
 //#region src/components/dynamic-input/index.tsx
 var _tmpl$$29 = /*#__PURE__*/ template(`<div><div data-scope=dynamic-input data-part=add>`);
 var _tmpl$2$15 = /*#__PURE__*/ template(`<div data-scope=dynamic-input data-part=row>`);
@@ -2692,8 +2905,8 @@ injectComponentStyle("icon");
 var _tmpl$$23 = /*#__PURE__*/ template(`<svg><rect x=3 y=4 width=18 height=16 rx=1.5></svg>`, false, true, false);
 var _tmpl$2$12 = /*#__PURE__*/ template(`<svg><circle cx=9 cy=10 r=1.5></svg>`, false, true, false);
 var _tmpl$3$9 = /*#__PURE__*/ template(`<svg><path d="m5.5 17.5 4.5-5 3 3.5 2.5-3 3 4.5"></svg>`, false, true, false);
-var _tmpl$4$6 = /*#__PURE__*/ template(`<div data-scope=image data-part=fallback>`);
-var _tmpl$5$4 = /*#__PURE__*/ template(`<figure><img data-scope=image data-part=img decoding=async>`, true, false, false);
+var _tmpl$4$7 = /*#__PURE__*/ template(`<div data-scope=image data-part=fallback>`);
+var _tmpl$5$5 = /*#__PURE__*/ template(`<figure><img data-scope=image data-part=img decoding=async>`, true, false, false);
 /** The mark for a source that never arrived: a quiet mountain-and-sun,
 * drawn in the stylesheet's stroke and hidden from the reader. */
 function placeholderGlyph() {
@@ -2714,7 +2927,7 @@ function Image(props) {
 	const [state, setState] = createSignal("loading");
 	createEffect(on(() => own.src, () => setState("loading")));
 	return (() => {
-		var _el$4 = _tmpl$5$4(), _el$5 = _el$4.firstChild;
+		var _el$4 = _tmpl$5$5(), _el$5 = _el$4.firstChild;
 		spread(_el$4, mergeProps(rest, {
 			"data-scope": "image",
 			"data-part": "root",
@@ -2732,7 +2945,7 @@ function Image(props) {
 				return state() === "error";
 			},
 			get children() {
-				var _el$6 = _tmpl$4$6();
+				var _el$6 = _tmpl$4$7();
 				insert(_el$6, () => own.fallback ?? placeholderGlyph());
 				return _el$6;
 			}
@@ -2765,9 +2978,9 @@ injectComponentStyle("image-cropper");
 var _tmpl$$22 = /*#__PURE__*/ template(`<svg><circle cx=11 cy=11 r=7></svg>`, false, true, false);
 var _tmpl$2$11 = /*#__PURE__*/ template(`<svg><path d="m16.2 16.2 4.8 4.8"></svg>`, false, true, false);
 var _tmpl$3$8 = /*#__PURE__*/ template(`<svg><path d="M8 11h6"></svg>`, false, true, false);
-var _tmpl$4$5 = /*#__PURE__*/ template(`<svg><path d="M11 8v6"></svg>`, false, true, false);
-var _tmpl$5$3 = /*#__PURE__*/ template(`<svg><path d="M20.49 12A8.5 8.5 0 1 1 18 6.06"></svg>`, false, true, false);
-var _tmpl$6$3 = /*#__PURE__*/ template(`<svg><path d="M20.5 3.5v4h-4"></svg>`, false, true, false);
+var _tmpl$4$6 = /*#__PURE__*/ template(`<svg><path d="M11 8v6"></svg>`, false, true, false);
+var _tmpl$5$4 = /*#__PURE__*/ template(`<svg><path d="M20.49 12A8.5 8.5 0 1 1 18 6.06"></svg>`, false, true, false);
+var _tmpl$6$4 = /*#__PURE__*/ template(`<svg><path d="M20.5 3.5v4h-4"></svg>`, false, true, false);
 var _tmpl$7$1 = /*#__PURE__*/ template(`<svg><path d="m6 6 12 12"></svg>`, false, true, false);
 var _tmpl$8$1 = /*#__PURE__*/ template(`<svg><path d="M18 6 6 18"></svg>`, false, true, false);
 var _tmpl$9$1 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true>`);
@@ -2782,14 +2995,14 @@ const TOOL_GLYPHS = {
 		_tmpl$$22(),
 		_tmpl$2$11(),
 		_tmpl$3$8(),
-		_tmpl$4$5()
+		_tmpl$4$6()
 	],
 	zoomOut: () => [
 		_tmpl$$22(),
 		_tmpl$2$11(),
 		_tmpl$3$8()
 	],
-	rotate: () => [_tmpl$5$3(), _tmpl$6$3()],
+	rotate: () => [_tmpl$5$4(), _tmpl$6$4()],
 	close: () => [_tmpl$7$1(), _tmpl$8$1()]
 };
 function ImageViewer(props) {
@@ -2959,16 +3172,15 @@ injectComponentStyle("kbd");
 var _tmpl$$19 = /*#__PURE__*/ template(`<div>`);
 var _tmpl$2$10 = /*#__PURE__*/ template(`<header>`);
 var _tmpl$3$7 = /*#__PURE__*/ template(`<main>`);
-var _tmpl$4$4 = /*#__PURE__*/ template(`<footer>`);
-var _tmpl$5$2 = /*#__PURE__*/ template(`<div data-scope=layout data-part=sider-resize role=separator aria-orientation=vertical tabindex=0 aria-label="Resize sidebar">`);
-var _tmpl$6$2 = /*#__PURE__*/ template(`<aside>`);
+var _tmpl$4$5 = /*#__PURE__*/ template(`<footer>`);
+var _tmpl$5$3 = /*#__PURE__*/ template(`<div data-scope=layout data-part=sider-resize role=separator aria-orientation=vertical tabindex=0 aria-label="Resize sidebar">`);
+var _tmpl$6$3 = /*#__PURE__*/ template(`<aside>`);
 const LayoutContext = createContext();
 /**
 * The application skeleton: Root, Header, Sider, Content, Footer —
-* the admin arrangement (Element Plus / AntD keep the same anatomy)
-* dressed in the paper-and-ink surfaces. The root is a full-height
-* grid; a declared `sider` turns the columns around to meet whichever
-* edge the rail stands on.
+* 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 LayoutRoot(props) {
 	const [own, rest] = splitProps(props, ["sider"]);
@@ -3009,7 +3221,7 @@ function LayoutContent(props) {
 }
 function LayoutFooter(props) {
 	return (() => {
-		var _el$4 = _tmpl$4$4();
+		var _el$4 = _tmpl$4$5();
 		spread(_el$4, mergeProps(props, {
 			"data-scope": "layout",
 			"data-part": "footer"
@@ -3080,7 +3292,7 @@ function LayoutSider(props) {
 		own.onWidthChange?.(`${next}px`);
 	};
 	const handle = () => own.resizable && !collapsed() ? (() => {
-		var _el$5 = _tmpl$5$2();
+		var _el$5 = _tmpl$5$3();
 		_el$5.$$keydown = onKeyDown;
 		_el$5.$$pointerup = onPointerUp;
 		_el$5.$$pointermove = onPointerMove;
@@ -3098,7 +3310,7 @@ function LayoutSider(props) {
 	})() : null;
 	const foldedWidth = () => own.collapsedWidth ?? "3.5rem";
 	return (() => {
-		var _el$6 = _tmpl$6$2();
+		var _el$6 = _tmpl$6$3();
 		use((el) => rail = el, _el$6);
 		spread(_el$6, mergeProps(rest, {
 			get style() {
@@ -3169,7 +3381,7 @@ injectComponentStyle("link");
 var _tmpl$$17 = /*#__PURE__*/ template(`<ul>`);
 var _tmpl$2$9 = /*#__PURE__*/ template(`<div data-scope=list data-part=title>`);
 var _tmpl$3$6 = /*#__PURE__*/ template(`<div data-scope=list data-part=description>`);
-var _tmpl$4$3 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$4$4 = /*#__PURE__*/ template(`<div>`);
 /** A ledger of rows: Root is the list, Item one row, Leading the mark
 * before the words, Content the title and its quiet echo, Actions the
 * way out. The bordered variant draws the hairlines; the hoverable
@@ -3215,7 +3427,7 @@ function Content$1(props) {
 		"children"
 	]);
 	return (() => {
-		var _el$2 = _tmpl$4$3();
+		var _el$2 = _tmpl$4$4();
 		spread(_el$2, mergeProps(rest, {
 			"data-scope": "list",
 			"data-part": "content"
@@ -3911,7 +4123,7 @@ injectComponentStyle("progress");
 var _tmpl$$10 = /*#__PURE__*/ template(`<div data-scope=progress-group data-part=legend>`);
 var _tmpl$2$4 = /*#__PURE__*/ template(`<div><div data-scope=progress-group data-part=track>`);
 var _tmpl$3$4 = /*#__PURE__*/ template(`<div data-scope=progress-group data-part=segment role=progressbar aria-valuemin=0>`);
-var _tmpl$4$2 = /*#__PURE__*/ template(`<div data-scope=progress-group data-part=legend-item><span data-scope=progress-group data-part=swatch aria-hidden=true></span><span data-scope=progress-group data-part=legend-label></span><span data-scope=progress-group data-part=legend-value>`);
+var _tmpl$4$3 = /*#__PURE__*/ template(`<div data-scope=progress-group data-part=legend-item><span data-scope=progress-group data-part=swatch aria-hidden=true></span><span data-scope=progress-group data-part=legend-label></span><span data-scope=progress-group data-part=legend-value>`);
 function ProgressGroup(props) {
 	const [own, rest] = splitProps(props, [
 		"segments",
@@ -3965,7 +4177,7 @@ function ProgressGroup(props) {
 						return own.segments;
 					},
 					children: (segment, index) => (() => {
-						var _el$5 = _tmpl$4$2(), _el$7 = _el$5.firstChild.nextSibling, _el$8 = _el$7.nextSibling;
+						var _el$5 = _tmpl$4$3(), _el$7 = _el$5.firstChild.nextSibling, _el$8 = _el$7.nextSibling;
 						insert(_el$7, () => nameOf(segment, index()));
 						insert(_el$8, () => String(segment.value));
 						effect(() => setAttribute(_el$5, "data-pigment", segment.pigment));
@@ -4344,21 +4556,34 @@ const Switch = Switch$1;
 injectComponentStyle("switch");
 //#endregion
 //#region src/components/table/index.tsx
-var _tmpl$$3 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m9 6 6 6-6 6">`);
-var _tmpl$2$2 = /*#__PURE__*/ template(`<input type=checkbox>`);
-var _tmpl$3$2 = /*#__PURE__*/ template(`<div data-scope=table data-part=cell-main><button type=button data-scope=table data-part=expander>`);
-var _tmpl$4$1 = /*#__PURE__*/ template(`<div role=cell data-scope=table data-part=cell>`);
-var _tmpl$5$1 = /*#__PURE__*/ template(`<div role=row data-scope=table data-part=row>`);
-var _tmpl$6$1 = /*#__PURE__*/ template(`<div role=columnheader data-scope=table data-part=header-cell>`);
-var _tmpl$7 = /*#__PURE__*/ template(`<input type=text data-scope=table data-part=header-filter placeholder=Filter>`);
-var _tmpl$8 = /*#__PURE__*/ template(`<div data-scope=table data-part=root><div data-scope=table data-part=viewport><div role=table data-scope=table data-part=table><div role=rowgroup data-scope=table data-part=header></div><div role=rowgroup data-scope=table data-part=body>`);
-var _tmpl$9 = /*#__PURE__*/ template(`<div data-scope=table data-part=toolbar><input type=search data-scope=table data-part=global-filter aria-label="Filter all columns">`);
-var _tmpl$0 = /*#__PURE__*/ template(`<div role=columnheader data-scope=table data-part=header-cell><input type=checkbox>`);
-var _tmpl$1 = /*#__PURE__*/ template(`<div data-scope=table data-part=empty>`);
-var _tmpl$10 = /*#__PURE__*/ template(`<div role=rowgroup data-scope=table data-part=footer>`);
-var _tmpl$11 = /*#__PURE__*/ template(`<div role=columnheader data-scope=table data-part=footer-cell>`);
-var _tmpl$12 = /*#__PURE__*/ template(`<div data-scope=table data-part=pagination><button type=button data-scope=table data-part=page-button>Prev</button><button type=button data-scope=table data-part=page-button>Next</button><select data-scope=table data-part=page-size aria-label="Rows per page"></select><span data-scope=table data-part=page-status>`);
-var _tmpl$13 = /*#__PURE__*/ template(`<option>`);
+var _tmpl$$3 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"width=14 height=14 fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path>`);
+var _tmpl$2$2 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"width=14 height=14 fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m6 9 6 6 6-6">`);
+var _tmpl$3$2 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m9 6 6 6-6 6">`);
+var _tmpl$4$2 = /*#__PURE__*/ template(`<input type=checkbox>`);
+var _tmpl$5$2 = /*#__PURE__*/ template(`<div data-scope=table data-part=cell-main><button type=button data-scope=table data-part=expander>`);
+var _tmpl$6$2 = /*#__PURE__*/ template(`<div role=cell data-scope=table data-part=cell>`);
+var _tmpl$7 = /*#__PURE__*/ template(`<div role=row data-scope=table data-part=row>`);
+var _tmpl$8 = /*#__PURE__*/ template(`<div role=columnheader data-scope=table data-part=header-cell>`);
+var _tmpl$9 = /*#__PURE__*/ template(`<input type=text data-scope=table data-part=header-filter placeholder=Filter>`);
+var _tmpl$0 = /*#__PURE__*/ template(`<div data-scope=table data-part=root><div data-scope=table data-part=viewport><div role=table data-scope=table data-part=table><div role=rowgroup data-scope=table data-part=header></div><div role=rowgroup data-scope=table data-part=body>`);
+var _tmpl$1 = /*#__PURE__*/ template(`<div data-scope=table data-part=toolbar><input type=search data-scope=table data-part=global-filter aria-label="Filter all columns">`);
+var _tmpl$10 = /*#__PURE__*/ template(`<div role=columnheader data-scope=table data-part=header-cell><input type=checkbox>`);
+var _tmpl$11 = /*#__PURE__*/ template(`<div data-scope=table data-part=empty>`);
+var _tmpl$12 = /*#__PURE__*/ template(`<div role=rowgroup data-scope=table data-part=footer>`);
+var _tmpl$13 = /*#__PURE__*/ template(`<div role=columnheader data-scope=table data-part=footer-cell>`);
+var _tmpl$14 = /*#__PURE__*/ template(`<div data-scope=table data-part=pagination><span data-scope=table data-part=page-status></span><div data-scope=table data-part=page-nav>`);
+/** The pagination bar's arrows — thin chevrons for the row of seals. */
+function pageGlyph(direction) {
+	return (() => {
+		var _el$ = _tmpl$$3(), _el$2 = _el$.firstChild;
+		setAttribute(_el$2, "d", direction === "start" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6");
+		return _el$;
+	})();
+}
+/** The page-size select's pointing chevron. */
+function chevronDownGlyph() {
+	return _tmpl$2$2();
+}
 const SELECT_COL_ID = "__select";
 const SELECT_COL_WIDTH = 48;
 /** The list holding `id` and the index inside it, or null when absent. */
@@ -4409,7 +4634,7 @@ function mark(el, attr, on) {
 	if (on) el.setAttribute(attr, "");
 	else el.removeAttribute(attr);
 }
-const chevronGlyph = _tmpl$$3();
+const chevronGlyph = _tmpl$3$2();
 function DataTable(props) {
 	if (props.virtual && props.merge) console.warn("[DataTable] `virtual` and `merge` are mutually exclusive; merge wins.");
 	/** Features follow the construction-time switches: sorting, selection,
@@ -4491,24 +4716,30 @@ function DataTable(props) {
 	const rows = createMemo(() => table.getRowModel().rows);
 	/** The declared row height is the density-scale baseline; the live
 	* scale comes off the document so the virtual window matches what CSS
-	* actually renders. */
+	* actually renders. It is read once and re-read only when the density
+	* or scene attribute moves — estimateSize runs on every scroll frame. */
 	const baseRowHeight = () => props.rowHeight ?? 40;
-	const densityScale = () => {
+	let densityScale = 1;
+	const readDensityScale = () => {
 		const value = Number(getComputedStyle(document.documentElement).getPropertyValue("--bs-density-scale"));
-		return Number.isFinite(value) && value > 0 ? value : 1;
+		densityScale = Number.isFinite(value) && value > 0 ? value : 1;
 	};
 	const virtualizer = createVirtualizer({
 		get count() {
 			return rows().length;
 		},
 		getScrollElement: () => viewport(),
-		estimateSize: () => baseRowHeight() * densityScale(),
+		estimateSize: () => baseRowHeight() * densityScale,
 		getItemKey: (index) => rows()[index]?.id ?? index,
 		overscan: 8
 	});
 	onMount(() => {
 		if (typeof MutationObserver === "undefined") return;
-		const densityObserver = new MutationObserver(() => virtualizer.measure());
+		readDensityScale();
+		const densityObserver = new MutationObserver(() => {
+			readDensityScale();
+			virtualizer.measure();
+		});
 		densityObserver.observe(document.documentElement, {
 			attributes: true,
 			attributeFilter: ["data-density", "data-scene"]
@@ -4717,26 +4948,26 @@ function DataTable(props) {
 		};
 		let content;
 		if (column.id === SELECT_COL_ID) content = (() => {
-			var _el$2 = _tmpl$2$2();
-			spread(_el$2, mergeProps({ get checked() {
+			var _el$5 = _tmpl$4$2();
+			spread(_el$5, mergeProps({ get checked() {
 				return row.getIsSelected();
 			} }, { indeterminate: false }, {
 				"aria-label": "Select row",
 				"onchange": () => row.toggleSelected(!row.getIsSelected())
 			}), false, false);
-			return _el$2;
+			return _el$5;
 		})();
 		else if (isExpandHost) content = (() => {
-			var _el$3 = _tmpl$3$2(), _el$4 = _el$3.firstChild;
-			_el$4.$$click = () => row.toggleExpanded();
-			insert(_el$4, chevronGlyph);
-			insert(_el$3, createComponent(FlexRender, { cell }), null);
+			var _el$6 = _tmpl$5$2(), _el$7 = _el$6.firstChild;
+			_el$7.$$click = () => row.toggleExpanded();
+			insert(_el$7, chevronGlyph);
+			insert(_el$6, createComponent(FlexRender, { cell }), null);
 			effect((_p$) => {
 				var _v$ = String(row.depth), _v$2 = row.getIsExpanded() || void 0, _v$3 = !row.getCanExpand() || void 0, _v$4 = row.getIsExpanded() ? "Collapse row" : "Expand row";
-				_v$ !== _p$.e && setStyleProperty(_el$3, "--bs-table-depth", _p$.e = _v$);
-				_v$2 !== _p$.t && setAttribute(_el$4, "data-expanded", _p$.t = _v$2);
-				_v$3 !== _p$.a && setAttribute(_el$4, "data-leaf", _p$.a = _v$3);
-				_v$4 !== _p$.o && setAttribute(_el$4, "aria-label", _p$.o = _v$4);
+				_v$ !== _p$.e && setStyleProperty(_el$6, "--bs-table-depth", _p$.e = _v$);
+				_v$2 !== _p$.t && setAttribute(_el$7, "data-expanded", _p$.t = _v$2);
+				_v$3 !== _p$.a && setAttribute(_el$7, "data-leaf", _p$.a = _v$3);
+				_v$4 !== _p$.o && setAttribute(_el$7, "aria-label", _p$.o = _v$4);
 				return _p$;
 			}, {
 				e: void 0,
@@ -4744,17 +4975,17 @@ function DataTable(props) {
 				a: void 0,
 				o: void 0
 			});
-			return _el$3;
+			return _el$6;
 		})();
 		else content = createComponent(FlexRender, { cell });
 		return (() => {
-			var _el$5 = _tmpl$4$1();
-			setAttribute(_el$5, "data-spanned", rowSpan > 1 ? "" : void 0);
-			spread(_el$5, mergeProps({ get ["data-numeric"]() {
+			var _el$8 = _tmpl$6$2();
+			setAttribute(_el$8, "data-spanned", rowSpan > 1 ? "" : void 0);
+			spread(_el$8, mergeProps({ get ["data-numeric"]() {
 				return column.columnDef.meta?.numeric ? "" : void 0;
 			} }, pin, { "style": style }), false, true);
-			insert(_el$5, content);
-			return _el$5;
+			insert(_el$8, content);
+			return _el$8;
 		})();
 	}
 	function renderRow(row, virtualItem) {
@@ -4767,14 +4998,14 @@ function DataTable(props) {
 		} : {};
 		const draggable = rowDraggable();
 		return (() => {
-			var _el$6 = _tmpl$5$1();
-			addEventListener(_el$6, "dragend", draggable ? onRowDragEnd : void 0);
-			addEventListener(_el$6, "drop", draggable ? (e) => onRowDrop(row, e) : void 0);
-			addEventListener(_el$6, "dragleave", draggable ? onRowDragLeave : void 0);
-			addEventListener(_el$6, "dragover", draggable ? (e) => onRowDragOver(row, e) : void 0);
-			addEventListener(_el$6, "dragstart", draggable ? (e) => onRowDragStart(row, e) : void 0);
-			setAttribute(_el$6, "draggable", draggable || void 0);
-			insert(_el$6, createComponent(For, {
+			var _el$9 = _tmpl$7();
+			addEventListener(_el$9, "dragend", draggable ? onRowDragEnd : void 0);
+			addEventListener(_el$9, "drop", draggable ? (e) => onRowDrop(row, e) : void 0);
+			addEventListener(_el$9, "dragleave", draggable ? onRowDragLeave : void 0);
+			addEventListener(_el$9, "dragover", draggable ? (e) => onRowDragOver(row, e) : void 0);
+			addEventListener(_el$9, "dragstart", draggable ? (e) => onRowDragStart(row, e) : void 0);
+			setAttribute(_el$9, "draggable", draggable || void 0);
+			insert(_el$9, createComponent(For, {
 				get each() {
 					return row.getVisibleCells();
 				},
@@ -4782,14 +5013,14 @@ function DataTable(props) {
 			}));
 			effect((_p$) => {
 				var _v$5 = row.getIsSelected() || void 0, _v$6 = style$1;
-				_v$5 !== _p$.e && setAttribute(_el$6, "data-selected", _p$.e = _v$5);
-				_p$.t = style(_el$6, _v$6, _p$.t);
+				_v$5 !== _p$.e && setAttribute(_el$9, "data-selected", _p$.e = _v$5);
+				_p$.t = style(_el$9, _v$6, _p$.t);
 				return _p$;
 			}, {
 				e: void 0,
 				t: void 0
 			});
-			return _el$6;
+			return _el$9;
 		})();
 	}
 	function renderHeaderCell(header) {
@@ -4799,13 +5030,13 @@ function DataTable(props) {
 		const canFilter = props.filterable && column.getCanFilter();
 		const canDrag = !!props.reorderable && column.id !== SELECT_COL_ID && !column.getIsPinned();
 		return (() => {
-			var _el$7 = _tmpl$6$1();
-			setAttribute(_el$7, "data-sortable", canSort || void 0);
-			setAttribute(_el$7, "data-sort", sorted || void 0);
-			setAttribute(_el$7, "data-draggable", canDrag || void 0);
-			setAttribute(_el$7, "draggable", canDrag || void 0);
-			setAttribute(_el$7, "aria-sort", sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0);
-			spread(_el$7, mergeProps({
+			var _el$0 = _tmpl$8();
+			setAttribute(_el$0, "data-sortable", canSort || void 0);
+			setAttribute(_el$0, "data-sort", sorted || void 0);
+			setAttribute(_el$0, "data-draggable", canDrag || void 0);
+			setAttribute(_el$0, "draggable", canDrag || void 0);
+			setAttribute(_el$0, "aria-sort", sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0);
+			spread(_el$0, mergeProps({
 				get ["data-numeric"]() {
 					return column.columnDef.meta?.numeric ? "" : void 0;
 				},
@@ -4820,43 +5051,43 @@ function DataTable(props) {
 				"ondrop": canDrag ? (e) => onColDrop(column, e) : void 0,
 				"ondragend": canDrag ? onColDragEnd : void 0
 			}), false, true);
-			insert(_el$7, (() => {
-				var _c$ = memo(() => !!header.isPlaceholder);
+			insert(_el$0, (() => {
+				var _c$ = memo(() => !!(header.isPlaceholder || header.column.columnDef.header === ""));
 				return () => _c$() ? null : createComponent(FlexRender, { header });
 			})(), null);
-			insert(_el$7, canFilter ? (() => {
-				var _el$8 = _tmpl$7();
-				_el$8.$$input = (e) => column.setFilterValue(e.target.value);
-				_el$8.addEventListener("dragstart", (e) => e.stopPropagation());
-				_el$8.$$click = (e) => e.stopPropagation();
-				setAttribute(_el$8, "draggable", false);
-				effect(() => setAttribute(_el$8, "aria-label", `Filter ${column.id}`));
-				effect(() => _el$8.value = column.getFilterValue() ?? "");
-				return _el$8;
+			insert(_el$0, canFilter ? (() => {
+				var _el$1 = _tmpl$9();
+				_el$1.$$input = (e) => column.setFilterValue(e.target.value);
+				_el$1.addEventListener("dragstart", (e) => e.stopPropagation());
+				_el$1.$$click = (e) => e.stopPropagation();
+				setAttribute(_el$1, "draggable", false);
+				effect(() => setAttribute(_el$1, "aria-label", `Filter ${column.id}`));
+				effect(() => _el$1.value = column.getFilterValue() ?? "");
+				return _el$1;
 			})() : null, null);
-			return _el$7;
+			return _el$0;
 		})();
 	}
 	return (() => {
-		var _el$9 = _tmpl$8(), _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling;
-		insert(_el$9, (() => {
-			var _c$2 = memo(() => !!props.filterable);
+		var _el$10 = _tmpl$0(), _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling;
+		insert(_el$10, (() => {
+			var _c$2 = memo(() => !!(props.filterable && (props.showToolbar ?? true)));
 			return () => _c$2() ? (() => {
-				var _el$12 = _tmpl$9(), _el$13 = _el$12.firstChild;
-				_el$13.$$input = (e) => table.setGlobalFilter(e.target.value);
-				effect(() => setAttribute(_el$13, "placeholder", props.globalFilterPlaceholder));
-				effect(() => _el$13.value = table.atoms.globalFilter.get() ?? "");
-				return _el$12;
+				var _el$15 = _tmpl$1(), _el$16 = _el$15.firstChild;
+				_el$16.$$input = (e) => table.setGlobalFilter(e.target.value);
+				effect(() => setAttribute(_el$16, "placeholder", props.globalFilterPlaceholder));
+				effect(() => _el$16.value = table.atoms.globalFilter.get() ?? "");
+				return _el$15;
 			})() : null;
-		})(), _el$0);
-		use(setViewport, _el$0);
-		insert(_el$10, createComponent(For, {
+		})(), _el$11);
+		use(setViewport, _el$11);
+		insert(_el$13, createComponent(For, {
 			get each() {
 				return table.getHeaderGroups();
 			},
 			children: (group) => (() => {
-				var _el$14 = _tmpl$5$1();
-				insert(_el$14, createComponent(For, {
+				var _el$17 = _tmpl$7();
+				insert(_el$17, createComponent(For, {
 					get each() {
 						return group.headers;
 					},
@@ -4865,21 +5096,21 @@ function DataTable(props) {
 						if (column.id !== SELECT_COL_ID) return renderHeaderCell(header);
 						const all = table.getIsAllRowsSelected();
 						return (() => {
-							var _el$15 = _tmpl$0(), _el$16 = _el$15.firstChild;
-							spread(_el$15, mergeProps(() => pinAttrs(column)), false, true);
-							_el$16.checked = all;
-							spread(_el$16, mergeProps(() => ({ indeterminate: table.getIsSomeRowsSelected() && !all }), {
+							var _el$18 = _tmpl$10(), _el$19 = _el$18.firstChild;
+							spread(_el$18, mergeProps(() => pinAttrs(column)), false, true);
+							_el$19.checked = all;
+							spread(_el$19, mergeProps(() => ({ indeterminate: table.getIsSomeRowsSelected() && !all }), {
 								"aria-label": "Select all rows",
 								"onchange": () => table.toggleAllRowsSelected(!all)
 							}), false, false);
-							return _el$15;
+							return _el$18;
 						})();
 					}
 				}));
-				return _el$14;
+				return _el$17;
 			})()
 		}));
-		insert(_el$11, (() => {
+		insert(_el$14, (() => {
 			var _c$3 = memo(() => !!virtual());
 			return () => _c$3() ? createComponent(For, {
 				get each() {
@@ -4893,80 +5124,142 @@ function DataTable(props) {
 				children: (row) => renderRow(row)
 			});
 		})(), null);
-		insert(_el$11, (() => {
+		insert(_el$14, (() => {
 			var _c$4 = memo(() => rows().length === 0);
 			return () => _c$4() ? (() => {
-				var _el$17 = _tmpl$1();
-				insert(_el$17, () => props.emptyText);
-				return _el$17;
+				var _el$20 = _tmpl$11();
+				insert(_el$20, () => props.emptyText);
+				return _el$20;
 			})() : null;
 		})(), null);
-		insert(_el$1, (() => {
+		insert(_el$12, (() => {
 			var _c$5 = memo(() => !!(props.stickyFooter && table.getFooterGroups().some((group) => group.headers.some((header) => header.column.columnDef.footer))));
 			return () => _c$5() ? (() => {
-				var _el$18 = _tmpl$10();
-				insert(_el$18, createComponent(For, {
+				var _el$21 = _tmpl$12();
+				insert(_el$21, createComponent(For, {
 					get each() {
 						return table.getFooterGroups();
 					},
 					children: (group) => (() => {
-						var _el$19 = _tmpl$5$1();
-						insert(_el$19, createComponent(For, {
+						var _el$22 = _tmpl$7();
+						insert(_el$22, createComponent(For, {
 							get each() {
 								return group.headers;
 							},
 							children: (header) => (() => {
-								var _el$20 = _tmpl$11();
-								spread(_el$20, mergeProps({ get ["data-numeric"]() {
+								var _el$23 = _tmpl$13();
+								spread(_el$23, mergeProps({ get ["data-numeric"]() {
 									return header.column.columnDef.meta?.numeric ? "" : void 0;
 								} }, () => pinAttrs(header.column)), false, true);
-								insert(_el$20, (() => {
+								insert(_el$23, (() => {
 									var _c$7 = memo(() => !!header.isPlaceholder);
 									return () => _c$7() ? null : createComponent(FlexRender, { footer: header });
 								})());
-								return _el$20;
+								return _el$23;
 							})()
 						}));
-						return _el$19;
+						return _el$22;
 					})()
 				}));
-				return _el$18;
+				return _el$21;
 			})() : null;
 		})(), null);
-		insert(_el$9, (() => {
+		insert(_el$10, (() => {
 			var _c$6 = memo(() => !!props.paginated);
 			return () => _c$6() ? (() => {
-				var _el$21 = _tmpl$12(), _el$22 = _el$21.firstChild, _el$23 = _el$22.nextSibling, _el$24 = _el$23.nextSibling, _el$25 = _el$24.nextSibling;
-				_el$22.$$click = () => table.previousPage();
-				_el$23.$$click = () => table.nextPage();
-				_el$24.addEventListener("change", (e) => table.setPageSize(Number(e.target.value)));
-				insert(_el$24, createComponent(For, {
-					get each() {
-						return props.pageSizeOptions ?? [
+				var _el$24 = _tmpl$14(), _el$25 = _el$24.firstChild, _el$26 = _el$25.nextSibling;
+				insert(_el$25, () => `${table.getRowCount()} rows`);
+				insert(_el$26, createComponent(Select.Root, {
+					get collection() {
+						return createListCollection({ items: (props.pageSizeOptions ?? [
 							10,
 							20,
 							50
-						];
+						]).map((size) => ({
+							label: `${size} / page`,
+							value: String(size)
+						})) });
 					},
-					children: (size) => (() => {
-						var _el$26 = _tmpl$13();
-						_el$26.value = size;
-						insert(_el$26, `${size} / page`);
-						return _el$26;
-					})()
-				}));
-				insert(_el$25, () => `Page ${table.atoms.pagination.get().pageIndex + 1} of ${table.getPageCount()} · ${table.getRowCount()} rows`);
-				effect((_p$) => {
-					var _v$10 = !table.getCanPreviousPage(), _v$11 = !table.getCanNextPage();
-					_v$10 !== _p$.e && (_el$22.disabled = _p$.e = _v$10);
-					_v$11 !== _p$.t && (_el$23.disabled = _p$.t = _v$11);
-					return _p$;
-				}, {
-					e: void 0,
-					t: void 0
-				});
-				effect(() => _el$24.value = table.atoms.pagination.get().pageSize);
-				return _el$21;
+					get value() {
+						return [String(table.atoms.pagination.get().pageSize)];
+					},
+					onValueChange: (details) => table.setPageSize(Number(details.value[0])),
+					positioning: { placement: "top-start" },
+					get children() {
+						return [createComponent(Select.Control, { get children() {
+							return createComponent(Select.Trigger, {
+								"aria-label": "Rows per page",
+								get children() {
+									return [createComponent(Select.ValueText, {}), createComponent(Select.Indicator, { get children() {
+										return chevronDownGlyph();
+									} })];
+								}
+							});
+						} }), createComponent(Select.Positioner, { get children() {
+							return createComponent(Select.Content, { get children() {
+								return createComponent(For, {
+									get each() {
+										return (props.pageSizeOptions ?? [
+											10,
+											20,
+											50
+										]).map((size) => ({
+											label: `${size} / page`,
+											value: String(size)
+										}));
+									},
+									children: (item) => createComponent(Select.Item, {
+										item,
+										get children() {
+											return [createComponent(Select.ItemText, { get children() {
+												return item.label;
+											} }), createComponent(Select.ItemIndicator, { children: "✓" })];
+										}
+									})
+								});
+							} });
+						} })];
+					}
+				}), null);
+				insert(_el$26, createComponent(Pagination.Root, {
+					get count() {
+						return table.getRowCount();
+					},
+					get pageSize() {
+						return table.atoms.pagination.get().pageSize;
+					},
+					get page() {
+						return table.atoms.pagination.get().pageIndex + 1;
+					},
+					onPageChange: (details) => table.setPageIndex(details.page - 1),
+					get children() {
+						return [
+							createComponent(Pagination.PrevTrigger, { get children() {
+								return pageGlyph("start");
+							} }),
+							createComponent(Pagination.Context, { children: (scope) => createComponent(For, {
+								get each() {
+									return scope().pages;
+								},
+								children: (page, index) => page.type === "ellipsis" ? createComponent(Pagination.Ellipsis, { get index() {
+									return index();
+								} }) : createComponent(Pagination.Item, {
+									type: "page",
+									get value() {
+										return page.value;
+									},
+									get children() {
+										return String(page.value);
+									}
+								})
+							}) }),
+							createComponent(Pagination.NextTrigger, { get children() {
+								return pageGlyph("end");
+							} })
+						];
+					}
+				}), null);
+				return _el$24;
 			})() : null;
 		})(), null);
 		effect((_p$) => {
@@ -4974,11 +5267,11 @@ function DataTable(props) {
 				position: "relative",
 				"block-size": `${virtualizer.getTotalSize()}px`
 			} : void 0;
-			_v$7 !== _p$.e && setAttribute(_el$9, "data-reorderable", _p$.e = _v$7);
-			_v$8 !== _p$.t && setStyleProperty(_el$9, "--bs-table-row-height", _p$.t = _v$8);
-			_v$9 !== _p$.a && setStyleProperty(_el$1, "--bs-table-cols", _p$.a = _v$9);
-			_v$0 !== _p$.o && setAttribute(_el$11, "data-merge", _p$.o = _v$0);
-			_p$.i = style(_el$11, _v$1, _p$.i);
+			_v$7 !== _p$.e && setAttribute(_el$10, "data-reorderable", _p$.e = _v$7);
+			_v$8 !== _p$.t && setStyleProperty(_el$10, "--bs-table-row-height", _p$.t = _v$8);
+			_v$9 !== _p$.a && setStyleProperty(_el$12, "--bs-table-cols", _p$.a = _v$9);
+			_v$0 !== _p$.o && setAttribute(_el$14, "data-merge", _p$.o = _v$0);
+			_p$.i = style(_el$14, _v$1, _p$.i);
 			return _p$;
 		}, {
 			e: void 0,
@@ -4987,7 +5280,7 @@ function DataTable(props) {
 			o: void 0,
 			i: void 0
 		});
-		return _el$9;
+		return _el$10;
 	})();
 }
 injectComponentStyle("table");
@@ -5112,9 +5405,9 @@ injectComponentStyle("toggle-group");
 var _tmpl$$2 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m5 12.5 5 5L19 7">`);
 var _tmpl$2$1 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path>`);
 var _tmpl$3$1 = /*#__PURE__*/ template(`<div data-scope=transfer data-part=search>`);
-var _tmpl$4 = /*#__PURE__*/ template(`<div data-scope=transfer data-part=panel><div data-scope=transfer data-part=head><span data-scope=transfer data-part=title></span><span data-scope=transfer data-part=count></span></div><div data-scope=transfer data-part=list>`);
-var _tmpl$5 = /*#__PURE__*/ template(`<p data-scope=transfer data-part=empty>Nothing here`);
-var _tmpl$6 = /*#__PURE__*/ template(`<div><div data-scope=transfer data-part=operations>`);
+var _tmpl$4$1 = /*#__PURE__*/ template(`<div data-scope=transfer data-part=panel><div data-scope=transfer data-part=head><span data-scope=transfer data-part=title></span><span data-scope=transfer data-part=count></span></div><div data-scope=transfer data-part=list>`);
+var _tmpl$5$1 = /*#__PURE__*/ template(`<p data-scope=transfer data-part=empty>Nothing here`);
+var _tmpl$6$1 = /*#__PURE__*/ template(`<div><div data-scope=transfer data-part=operations>`);
 function checkGlyph() {
 	return _tmpl$$2();
 }
@@ -5164,7 +5457,7 @@ function Transfer(props) {
 	}
 	function panel(side, title, query, setQuery, checked, setChecked, items) {
 		return (() => {
-			var _el$4 = _tmpl$4(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$9 = _el$5.nextSibling;
+			var _el$4 = _tmpl$4$1(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$9 = _el$5.nextSibling;
 			setAttribute(_el$4, "data-side", side);
 			insert(_el$6, title);
 			insert(_el$7, () => String(items.length));
@@ -5191,7 +5484,7 @@ function Transfer(props) {
 					return items.length > 0;
 				},
 				get fallback() {
-					return _tmpl$5();
+					return _tmpl$5$1();
 				},
 				get children() {
 					return createComponent(For, {
@@ -5228,7 +5521,7 @@ function Transfer(props) {
 		})();
 	}
 	return (() => {
-		var _el$1 = _tmpl$6(), _el$10 = _el$1.firstChild;
+		var _el$1 = _tmpl$6$1(), _el$10 = _el$1.firstChild;
 		spread(_el$1, mergeProps(rest, {
 			"data-scope": "transfer",
 			"data-part": "root"
@@ -5287,7 +5580,10 @@ injectComponentStyle("tour");
 //#region src/components/tree-select/index.tsx
 var _tmpl$$1 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m9 18 6-6-6-6">`);
 var _tmpl$2 = /*#__PURE__*/ template(`<span>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<button><span data-part=chevron aria-hidden=true>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div data-scope=tree-select data-part=search>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div data-scope=tree-select data-part=body>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<button><span data-part=chevron aria-hidden=true>`);
+var _tmpl$6 = /*#__PURE__*/ template(`<p data-scope=tree-select data-part=empty>Nothing matches`);
 function chevron() {
 	return _tmpl$$1();
 }
@@ -5295,17 +5591,21 @@ function chevron() {
 * A tree behind a field: the control reads like an input, the vessel
 * below walks the hierarchy, and one leaf click closes the deal. Single
 * selection — the chosen label rides on the control, its value rides in
-* `value`.
+* `value`. `filterable` puts a filter line at the top of the vessel;
+* matches keep their ancestors and the branches fan open.
 */
 function TreeSelect(props) {
 	const [own, rest] = splitProps(props, [
 		"value",
 		"data",
 		"placeholder",
+		"filterable",
 		"disabled",
 		"onValueChange"
 	]);
 	const [open, setOpen] = createSignal(false);
+	const [query, setQuery] = createSignal("");
+	const filterFns = useFilter({ sensitivity: "base" });
 	const collection = createMemo(() => createTreeCollection$1({
 		nodeToValue: (node) => node.value,
 		nodeToString: (node) => node.label,
@@ -5315,7 +5615,23 @@ function TreeSelect(props) {
 			children: own.data
 		}
 	}));
+	const filtering = () => own.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 = createMemo(() => filtering() ? collection().filter((node) => filterFns().contains(node.label, query().trim())) : collection());
 	const firstLevel = () => (own.data ?? []).map((node) => node.value);
+	const expandedWhileFiltering = () => {
+		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;
+	};
 	const label = () => {
 		let found;
 		const walk = (nodes) => {
@@ -5390,15 +5706,18 @@ function TreeSelect(props) {
 		get open() {
 			return open();
 		},
-		onOpenChange: (details) => setOpen(details.open),
+		onOpenChange: (details) => {
+			setOpen(details.open);
+			if (!details.open) setQuery("");
+		},
 		positioning: {
 			sameWidth: true,
 			placement: "bottom-start"
 		},
 		get children() {
 			return [createComponent(Popover$1.Trigger, { asChild: (propsFn) => (() => {
-				var _el$3 = _tmpl$3(), _el$4 = _el$3.firstChild;
-				spread(_el$3, mergeProps(propsFn, {
+				var _el$5 = _tmpl$5(), _el$6 = _el$5.firstChild;
+				spread(_el$5, mergeProps(propsFn, {
 					"type": "button",
 					"data-scope": "tree-select",
 					"data-part": "control",
@@ -5412,43 +5731,72 @@ function TreeSelect(props) {
 						return own.disabled;
 					}
 				}), false, true);
-				insert(_el$3, () => label() ?? own.placeholder ?? "Select…", _el$4);
-				insert(_el$4, chevron);
-				return _el$3;
+				insert(_el$5, () => label() ?? own.placeholder ?? "Select…", _el$6);
+				insert(_el$6, chevron);
+				return _el$5;
 			})() }), createComponent(Portal, { get children() {
 				return createComponent(Popover$1.Positioner, { get children() {
 					return createComponent(Popover$1.Content, {
 						"data-scope": "tree-select",
 						"data-part": "content",
 						get children() {
-							return createComponent(TreeView$1.Root, {
-								get collection() {
-									return collection();
+							return [createComponent(Show, {
+								get when() {
+									return own.filterable;
 								},
-								selectionMode: "single",
-								get selectedValue() {
-									return memo(() => !!own.value)() ? [own.value] : [];
-								},
-								get defaultExpandedValue() {
-									return firstLevel();
-								},
-								onSelectionChange: pick,
 								get children() {
-									return createComponent(TreeView$1.Tree, { get children() {
-										return createComponent(For, {
-											get each() {
-												return collection().rootNode.children;
-											},
-											children: (node, index) => createComponent(Row, {
-												node,
-												get indexPath() {
-													return [index()];
-												}
-											})
-										});
-									} });
+									var _el$3 = _tmpl$3();
+									insert(_el$3, createComponent(Input, {
+										size: "sm",
+										get value() {
+											return query();
+										},
+										onValueChange: setQuery,
+										placeholder: "Filter…",
+										"aria-label": "Filter options"
+									}));
+									return _el$3;
 								}
-							});
+							}), (() => {
+								var _el$4 = _tmpl$4();
+								insert(_el$4, createComponent(Show, {
+									get when() {
+										return (visibleCollection().rootNode.children ?? []).length > 0;
+									},
+									get fallback() {
+										return _tmpl$6();
+									},
+									get children() {
+										return createComponent(TreeView$1.Root, mergeProps({
+											get collection() {
+												return visibleCollection();
+											},
+											selectionMode: "single",
+											get selectedValue() {
+												return memo(() => !!own.value)() ? [own.value] : [];
+											}
+										}, () => filtering() ? { expandedValue: expandedWhileFiltering() } : { defaultExpandedValue: firstLevel() }, {
+											onSelectionChange: pick,
+											get children() {
+												return createComponent(TreeView$1.Tree, { get children() {
+													return createComponent(For, {
+														get each() {
+															return visibleCollection().rootNode.children;
+														},
+														children: (node, index) => createComponent(Row, {
+															node,
+															get indexPath() {
+																return [index()];
+															}
+														})
+													});
+												} });
+											}
+										}));
+									}
+								}));
+								return _el$4;
+							})()];
 						}
 					});
 				} });