@bysages/svelte 0.1.1 → 0.2.1

package/dist/index.mjs

@@ -4,18 +4,19 @@ import { Accordion as Accordion$1 } from "@ark-ui/svelte/accordion";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { Field as Field$1, useFieldContext } from "@ark-ui/svelte/field";
+import { Popover as Popover$1 } from "@ark-ui/svelte/popover";
+import Portal from "@ark-ui/svelte/portal";
+import { getContext, setContext, untrack } from "svelte";
 import { Collapsible as Collapsible$1 } from "@ark-ui/svelte/collapsible";
 import "svelte/internal/flags/legacy";
 import { renderHtml } from "@tanstack/markdown/html";
-import { getContext, setContext, untrack } from "svelte";
 import { Combobox as Combobox$1 } from "@ark-ui/svelte/combobox";
 import { createFileTreeCollection, createGridCollection, createTreeCollection, useAsyncList, useListCollection, useListCollection as useListCollection$1, useListSelection } from "@ark-ui/svelte/collection";
-import Portal from "@ark-ui/svelte/portal";
 import { AngleSlider as AngleSlider$1 } from "@ark-ui/svelte/angle-slider";
 import { Avatar as Avatar$1 } from "@ark-ui/svelte/avatar";
 import { DatePicker as DatePicker$1 } from "@ark-ui/svelte/date-picker";
 import { useEnvironmentContext } from "@ark-ui/svelte/environment";
-import { useLocaleContext } from "@ark-ui/svelte/locale";
+import { useFilter, useLocaleContext } from "@ark-ui/svelte/locale";
 import * as cascade from "@zag-js/cascade-select";
 import { normalizeProps, useMachine } from "@zag-js/svelte";
 import { Carousel as Carousel$1 } from "@ark-ui/svelte/carousel";
@@ -41,7 +42,6 @@ import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/svelte/json-tree-view";
 import { Listbox as Listbox$1 } from "@ark-ui/svelte/listbox";
 import { Marquee as Marquee$1 } from "@ark-ui/svelte/marquee";
 import { Menu as Menu$1 } from "@ark-ui/svelte/menu";
-import { Popover as Popover$1 } from "@ark-ui/svelte/popover";
 import { NavigationMenu as NavigationMenu$1 } from "@ark-ui/svelte/navigation-menu";
 import { NumberInput as NumberInput$1 } from "@ark-ui/svelte/number-input";
 import { Pagination as Pagination$1 } from "@ark-ui/svelte/pagination";
@@ -54,7 +54,7 @@ import { RadioGroup as RadioGroup$1 } from "@ark-ui/svelte/radio-group";
 import { RatingGroup as RatingGroup$1 } from "@ark-ui/svelte/rating-group";
 import { ScrollArea as ScrollArea$1 } from "@ark-ui/svelte/scroll-area";
 import { SegmentGroup as SegmentGroup$1 } from "@ark-ui/svelte/segment-group";
-import { Select as Select$1 } from "@ark-ui/svelte/select";
+import { Select as Select$1, createListCollection } from "@ark-ui/svelte/select";
 import { SignaturePad as SignaturePad$1 } from "@ark-ui/svelte/signature-pad";
 import { Slider as Slider$1 } from "@ark-ui/svelte/slider";
 import { Splitter as Splitter$1 } from "@ark-ui/svelte/splitter";
@@ -83,7 +83,7 @@ const Accordion = Accordion$1;
 injectComponentStyle("accordion");
 //#endregion
 //#region src/components/affix/Affix.svelte
-var rest_excludes$125 = /* @__PURE__ */ new Set([
+var rest_excludes$126 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -91,10 +91,10 @@ var rest_excludes$125 = /* @__PURE__ */ new Set([
 	"offsetBottom",
 	"children"
 ]);
-var root$126 = $.from_html(`<div><!></div>`);
+var root$125 = $.from_html(`<div><!></div>`);
 function Affix$1($$anchor, $$props) {
-	let offsetTop = $.prop($$props, "offsetTop", 3, "0px"), offsetBottom = $.prop($$props, "offsetBottom", 3, "0px"), rest = $.rest_props($$props, rest_excludes$125);
-	var div = root$126();
+	let offsetTop = $.prop($$props, "offsetTop", 3, "0px"), offsetBottom = $.prop($$props, "offsetBottom", 3, "0px"), rest = $.rest_props($$props, rest_excludes$126);
+	var div = root$125();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "affix",
@@ -122,7 +122,7 @@ const Affix = Affix$1;
 injectComponentStyle("affix");
 //#endregion
 //#region src/components/button/Button.svelte
-var rest_excludes$124 = /* @__PURE__ */ new Set([
+var rest_excludes$125 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -136,7 +136,7 @@ var rest_excludes$124 = /* @__PURE__ */ new Set([
 	"children"
 ]);
 function Button$1($$anchor, $$props) {
-	let variant = $.prop($$props, "variant", 3, "solid"), tone = $.prop($$props, "tone", 3, "ink"), size = $.prop($$props, "size", 3, "md"), square = $.prop($$props, "square", 3, false), type = $.prop($$props, "type", 3, "button"), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes$124);
+	let variant = $.prop($$props, "variant", 3, "solid"), tone = $.prop($$props, "tone", 3, "ink"), size = $.prop($$props, "size", 3, "md"), square = $.prop($$props, "square", 3, false), type = $.prop($$props, "type", 3, "button"), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes$125);
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 	$.element(node, () => $$props.as ?? "button", false, ($$element, $$anchor) => {
@@ -168,7 +168,7 @@ const Button = Button$1;
 injectComponentStyle("button");
 //#endregion
 //#region src/components/ai-action/AiAction.svelte
-var rest_excludes$123 = /* @__PURE__ */ new Set([
+var rest_excludes$124 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -176,7 +176,7 @@ var rest_excludes$123 = /* @__PURE__ */ new Set([
 	"children"
 ]);
 function AiAction$1($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$123);
+	let rest = $.rest_props($$props, rest_excludes$124);
 	Button($$anchor, $.spread_props({
 		variant: "ghost",
 		size: "sm",
@@ -205,17 +205,17 @@ const AiAction = AiAction$1;
 injectComponentStyle("ai");
 //#endregion
 //#region src/components/ai-message/AiMessage.svelte
-var rest_excludes$122 = /* @__PURE__ */ new Set([
+var rest_excludes$123 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"role",
 	"children"
 ]);
-var root$125 = $.from_html(`<article><!></article>`);
+var root$124 = $.from_html(`<article><!></article>`);
 function AiMessage$1($$anchor, $$props) {
-	let role = $.prop($$props, "role", 3, "assistant"), rest = $.rest_props($$props, rest_excludes$122);
-	var article = root$125();
+	let role = $.prop($$props, "role", 3, "assistant"), rest = $.rest_props($$props, rest_excludes$123);
+	var article = root$124();
 	$.attribute_effect(article, () => ({
 		...rest,
 		"data-scope": "ai",
@@ -242,28 +242,292 @@ injectComponentStyle("ai");
 const Field = Field$1;
 injectComponentStyle("field");
 //#endregion
+//#region src/components/mentions/MentionsVessel.svelte
+var root$123 = $.from_html(`<div data-scope="mentions" data-part="option"> </div>`);
+var root_1$26 = $.from_html(`<div></div>`);
+function MentionsVessel$1($$anchor, $$props) {
+	$.push($$props, true);
+	let open = $.prop($$props, "open", 3, false), matches = $.prop($$props, "matches", 19, () => []), active = $.prop($$props, "active", 3, 0), anchor = $.prop($$props, "anchor", 3, null);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => Popover$1.Root, ($$anchor, ArkPopover_Root) => {
+		ArkPopover_Root($$anchor, {
+			get open() {
+				return open();
+			},
+			positioning: {
+				placement: "bottom-start",
+				getAnchorRect: () => anchor()?.getBoundingClientRect() ?? null
+			},
+			onOpenChange: (details) => $$props.onOpenChange?.(details.open),
+			children: ($$anchor, $$slotProps) => {
+				Portal($$anchor, {
+					children: ($$anchor, $$slotProps) => {
+						var fragment_2 = $.comment();
+						var node_1 = $.first_child(fragment_2);
+						$.component(node_1, () => Popover$1.Positioner, ($$anchor, ArkPopover_Positioner) => {
+							ArkPopover_Positioner($$anchor, {
+								children: ($$anchor, $$slotProps) => {
+									var fragment_3 = $.comment();
+									var node_2 = $.first_child(fragment_3);
+									{
+										const asChild = ($$anchor, contentProps = $.noop) => {
+											var div = root_1$26();
+											$.attribute_effect(div, ($0) => ({
+												...$0,
+												"data-scope": "mentions",
+												"data-part": "popup"
+											}), [() => contentProps()()]);
+											$.each(div, 23, matches, (entry) => entry.value, ($$anchor, entry, index) => {
+												var div_1 = root$123();
+												var text = $.only_child(div_1, true);
+												$.template_effect(() => {
+													$.set_attribute(div_1, "data-active", $.get(index) === active() ? "" : void 0);
+													$.set_text(text, $.get(entry).label);
+												});
+												$.event("mouseenter", div_1, () => $$props.onActiveChange?.($.get(index)));
+												$.delegated("mousedown", div_1, (event) => event.preventDefault());
+												$.delegated("click", div_1, () => $$props.onInsert?.($.get(entry)));
+												$.append($$anchor, div_1);
+											});
+											$.reset(div);
+											$.append($$anchor, div);
+										};
+										$.component(node_2, () => Popover$1.Content, ($$anchor, ArkPopover_Content) => {
+											ArkPopover_Content($$anchor, {
+												asChild,
+												$$slots: { asChild: true }
+											});
+										});
+									}
+									$.append($$anchor, fragment_3);
+								},
+								$$slots: { default: true }
+							});
+						});
+						$.append($$anchor, fragment_2);
+					},
+					$$slots: { default: true }
+				});
+			},
+			$$slots: { default: true }
+		});
+	});
+	$.append($$anchor, fragment);
+	$.pop();
+}
+$.delegate(["mousedown", "click"]);
+//#endregion
+//#region src/components/mentions/Mentions.svelte
+var rest_excludes$122 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"items",
+	"value",
+	"trigger",
+	"placeholder",
+	"autoresize",
+	"invalid",
+	"onValueChange"
+]);
+var root$122 = $.from_html(`<div><!> <!></div>`);
+function Mentions$1($$anchor, $$props) {
+	$.push($$props, true);
+	let items = $.prop($$props, "items", 19, () => []), value = $.prop($$props, "value", 15, ""), trigger = $.prop($$props, "trigger", 3, "@"), autoresize = $.prop($$props, "autoresize", 3, false), invalid = $.prop($$props, "invalid", 3, false), rest = $.rest_props($$props, rest_excludes$122);
+	let textareaEl = $.state(null);
+	const mentions = useMentions(() => ({
+		items: items(),
+		trigger: trigger()
+	}), () => $.get(textareaEl), {
+		getText: () => $.get(textareaEl)?.value ?? value(),
+		setText: (next) => {
+			value(next);
+			$$props.onValueChange?.(next);
+		}
+	});
+	function onInput(event) {
+		$$props.onValueChange?.(event.currentTarget.value);
+		mentions.onInput();
+	}
+	var div = root$122();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "mentions",
+		"data-part": "root"
+	}));
+	var node = $.child(div);
+	{
+		let $0 = $.derived(() => invalid() ? "true" : void 0);
+		$.component(node, () => Field.Textarea, ($$anchor, Field_Textarea) => {
+			Field_Textarea($$anchor, {
+				get autoresize() {
+					return autoresize();
+				},
+				rows: 3,
+				get placeholder() {
+					return $$props.placeholder;
+				},
+				get "aria-invalid"() {
+					return $.get($0);
+				},
+				"data-scope": "mentions",
+				"data-part": "textarea",
+				oninput: onInput,
+				get onkeydown() {
+					return mentions.onKeydown;
+				},
+				get ref() {
+					return $.get(textareaEl);
+				},
+				set ref($$value) {
+					$.set(textareaEl, $$value, true);
+				},
+				get value() {
+					return value();
+				},
+				set value($$value) {
+					value($$value);
+				}
+			});
+		});
+	}
+	MentionsVessel$1($.sibling(node, 2), {
+		get open() {
+			return mentions.open;
+		},
+		get matches() {
+			return mentions.matches;
+		},
+		get active() {
+			return mentions.active;
+		},
+		get anchor() {
+			return $.get(textareaEl);
+		},
+		get onInsert() {
+			return mentions.insert;
+		},
+		onActiveChange: (index) => mentions.active = index,
+		onOpenChange: (open) => {
+			if (!open) mentions.close();
+		}
+	});
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/mentions/index.ts
+/** @-mentions: a plain textarea that, when the text before the caret
+* ends with the trigger character followed by a token, offers the
+* matching candidates in a small anchored vessel; choosing one replaces
+* the token with `trigger + label` and hands the whole text back
+* through `bind:value`. Arrows move, Enter inserts, Escape dismisses. */
+const Mentions = Mentions$1;
+/** The vessel: the candidates themselves as a floating card. Composers
+* that keep their own field anatomy wire it up with `useMentions`
+* directly. */
+const MentionsVessel = MentionsVessel$1;
+injectComponentStyle("mentions");
+//#endregion
 //#region src/components/ai-prompt-input/AiPromptInput.svelte
 var rest_excludes$121 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"value",
+	"onValueChange",
 	"onSubmit",
+	"onStop",
 	"placeholder",
-	"disabled"
-]);
-var root$124 = $.from_svg(`<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"></path></svg>`);
-var root_1$25 = $.from_html(`<form><!> <div data-scope="ai" data-part="prompt-footer"><!></div></form>`);
+	"disabled",
+	"busy",
+	"mentions",
+	"header",
+	"leading",
+	"trailing",
+	"footer",
+	"footerEnd"
+]);
+var root$121 = $.from_svg(`<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"></rect></svg>`);
+var root_1$25 = $.from_svg(`<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"></path></svg>`);
+var root_2$19 = $.from_html(`<div data-scope="ai" data-part="prompt-header"><!></div>`);
+var root_3$11 = $.from_html(`<div data-scope="ai" data-part="prompt-leading"><!></div>`);
+var root_4$9 = $.from_html(`<div data-scope="ai" data-part="prompt-trailing"><!> <!></div>`);
+var root_5$9 = $.from_html(`<div data-scope="ai" data-part="prompt-footer"><!> <div data-scope="ai" data-part="prompt-end"><!> <!></div></div>`);
+var root_6$6 = $.from_html(`<form><!> <div data-scope="ai" data-part="prompt-main"><!> <!> <!> <!></div> <!></form>`);
 function AiPromptInput$1($$anchor, $$props) {
 	$.push($$props, true);
-	let value = $.prop($$props, "value", 15, ""), placeholder = $.prop($$props, "placeholder", 3, "Send a message"), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes$121);
+	const seal = ($$anchor) => {
+		var fragment = $.comment();
+		var node = $.first_child(fragment);
+		var consequent = ($$anchor) => {
+			Button($$anchor, {
+				variant: "solid",
+				size: "sm",
+				square: true,
+				type: "button",
+				"aria-label": "Stop",
+				get disabled() {
+					return disabled();
+				},
+				onclick: () => $$props.onStop?.(),
+				children: ($$anchor, $$slotProps) => {
+					var svg = root$121();
+					$.append($$anchor, svg);
+				},
+				$$slots: { default: true }
+			});
+		};
+		var alternate = ($$anchor) => {
+			{
+				let $0 = $.derived(() => disabled() || !value().trim());
+				Button($$anchor, {
+					variant: "solid",
+					size: "sm",
+					square: true,
+					type: "submit",
+					"aria-label": "Send",
+					get disabled() {
+						return $.get($0);
+					},
+					children: ($$anchor, $$slotProps) => {
+						var svg_1 = root_1$25();
+						$.append($$anchor, svg_1);
+					},
+					$$slots: { default: true }
+				});
+			}
+		};
+		$.if(node, ($$render) => {
+			if (busy()) $$render(consequent);
+			else $$render(alternate, -1);
+		});
+		$.append($$anchor, fragment);
+	};
+	let value = $.prop($$props, "value", 15, ""), placeholder = $.prop($$props, "placeholder", 3, "Send a message"), disabled = $.prop($$props, "disabled", 3, false), busy = $.prop($$props, "busy", 3, false), rest = $.rest_props($$props, rest_excludes$121);
+	let textareaEl = $.state(null);
+	const mentionState = useMentions(() => ({
+		items: $$props.mentions?.items ?? [],
+		trigger: $$props.mentions?.trigger
+	}), () => $.get(textareaEl), {
+		getText: () => $.get(textareaEl)?.value ?? value(),
+		setText: (next) => {
+			value(next);
+			$$props.onValueChange?.(next);
+		}
+	});
+	const mentionsActive = $.derived(() => $$props.mentions != null);
 	function send() {
 		const text = value().trim();
-		if (!text || disabled()) return;
+		if (!text || disabled() || busy()) return;
 		$$props.onSubmit?.(text);
 		value("");
+		$$props.onValueChange?.("");
 	}
-	var form = root_1$25();
+	const hasFooter = $.derived(() => $$props.footer != null);
+	var form = root_6$6();
 	var event_handler = (event) => {
 		event.preventDefault();
 		send();
@@ -274,13 +538,36 @@ function AiPromptInput$1($$anchor, $$props) {
 		"data-part": "prompt",
 		onsubmit: event_handler
 	}));
-	var node = $.child(form);
-	$.component(node, () => Field.Root, ($$anchor, Field_Root) => {
+	var node_1 = $.child(form);
+	var consequent_1 = ($$anchor) => {
+		var div = root_2$19();
+		var node_2 = $.child(div);
+		$.snippet(node_2, () => $$props.header);
+		$.reset(div);
+		$.append($$anchor, div);
+	};
+	$.if(node_1, ($$render) => {
+		if ($$props.header) $$render(consequent_1);
+	});
+	var div_1 = $.sibling(node_1, 2);
+	var node_3 = $.child(div_1);
+	var consequent_2 = ($$anchor) => {
+		var div_2 = root_3$11();
+		var node_4 = $.child(div_2);
+		$.snippet(node_4, () => $$props.leading);
+		$.reset(div_2);
+		$.append($$anchor, div_2);
+	};
+	$.if(node_3, ($$render) => {
+		if ($$props.leading) $$render(consequent_2);
+	});
+	var node_5 = $.sibling(node_3, 2);
+	$.component(node_5, () => Field.Root, ($$anchor, Field_Root) => {
 		Field_Root($$anchor, {
 			children: ($$anchor, $$slotProps) => {
-				var fragment = $.comment();
-				var node_1 = $.first_child(fragment);
-				$.component(node_1, () => Field.Textarea, ($$anchor, Field_Textarea) => {
+				var fragment_3 = $.comment();
+				var node_6 = $.first_child(fragment_3);
+				$.component(node_6, () => Field.Textarea, ($$anchor, Field_Textarea) => {
 					Field_Textarea($$anchor, {
 						autoresize: true,
 						rows: 1,
@@ -290,12 +577,20 @@ function AiPromptInput$1($$anchor, $$props) {
 						get disabled() {
 							return disabled();
 						},
+						oninput: () => mentionState.onInput(),
 						onkeydown: (event) => {
+							if (mentionState.onKeydown(event)) return;
 							if (event.key === "Enter" && !event.shiftKey) {
 								event.preventDefault();
 								send();
 							}
 						},
+						get ref() {
+							return $.get(textareaEl);
+						},
+						set ref($$value) {
+							$.set(textareaEl, $$value, true);
+						},
 						get value() {
 							return value();
 						},
@@ -304,32 +599,90 @@ function AiPromptInput$1($$anchor, $$props) {
 						}
 					});
 				});
-				$.append($$anchor, fragment);
+				$.append($$anchor, fragment_3);
 			},
 			$$slots: { default: true }
 		});
 	});
-	var div = $.sibling(node, 2);
-	var node_2 = $.child(div);
-	{
-		let $0 = $.derived(() => disabled() || !value().trim());
-		Button(node_2, {
-			variant: "solid",
-			size: "sm",
-			square: true,
-			type: "submit",
-			"aria-label": "Send",
-			get disabled() {
-				return $.get($0);
+	var node_7 = $.sibling(node_5, 2);
+	var consequent_3 = ($$anchor) => {
+		MentionsVessel($$anchor, {
+			get open() {
+				return mentionState.open;
 			},
-			children: ($$anchor, $$slotProps) => {
-				var svg = root$124();
-				$.append($$anchor, svg);
+			get matches() {
+				return mentionState.matches;
 			},
-			$$slots: { default: true }
+			get active() {
+				return mentionState.active;
+			},
+			get anchor() {
+				return $.get(textareaEl);
+			},
+			get onInsert() {
+				return mentionState.insert;
+			},
+			onActiveChange: (index) => mentionState.active = index,
+			onOpenChange: (open) => {
+				if (!open) mentionState.close();
+			}
 		});
-	}
-	$.reset(div);
+	};
+	$.if(node_7, ($$render) => {
+		if ($.get(mentionsActive)) $$render(consequent_3);
+	});
+	var node_8 = $.sibling(node_7, 2);
+	var consequent_6 = ($$anchor) => {
+		var div_3 = root_4$9();
+		var node_9 = $.child(div_3);
+		var consequent_4 = ($$anchor) => {
+			var fragment_5 = $.comment();
+			var node_10 = $.first_child(fragment_5);
+			$.snippet(node_10, () => $$props.trailing);
+			$.append($$anchor, fragment_5);
+		};
+		$.if(node_9, ($$render) => {
+			if ($$props.trailing) $$render(consequent_4);
+		});
+		var node_11 = $.sibling(node_9, 2);
+		var consequent_5 = ($$anchor) => {
+			seal($$anchor);
+		};
+		$.if(node_11, ($$render) => {
+			if (!$.get(hasFooter)) $$render(consequent_5);
+		});
+		$.reset(div_3);
+		$.append($$anchor, div_3);
+	};
+	$.if(node_8, ($$render) => {
+		if (!$.get(hasFooter) || $$props.trailing) $$render(consequent_6);
+	});
+	$.reset(div_1);
+	var node_12 = $.sibling(div_1, 2);
+	var consequent_8 = ($$anchor) => {
+		var div_4 = root_5$9();
+		var node_13 = $.child(div_4);
+		$.snippet(node_13, () => $$props.footer);
+		var div_5 = $.sibling(node_13, 2);
+		var node_14 = $.child(div_5);
+		var consequent_7 = ($$anchor) => {
+			var fragment_7 = $.comment();
+			var node_15 = $.first_child(fragment_7);
+			$.snippet(node_15, () => $$props.footerEnd);
+			$.append($$anchor, fragment_7);
+		};
+		$.if(node_14, ($$render) => {
+			if ($$props.footerEnd) $$render(consequent_7);
+		});
+		var node_16 = $.sibling(node_14, 2);
+		seal(node_16);
+		$.reset(div_5);
+		$.reset(div_4);
+		$.append($$anchor, div_4);
+	};
+	$.if(node_12, ($$render) => {
+		if ($.get(hasFooter)) $$render(consequent_8);
+	});
 	$.reset(form);
 	$.append($$anchor, form);
 	$.pop();
@@ -349,9 +702,9 @@ const Collapsible = Collapsible$1;
 injectComponentStyle("collapsible");
 //#endregion
 //#region src/components/ai/ChevronIcon.svelte
-var root$123 = $.from_svg(`<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>`);
+var root$120 = $.from_svg(`<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>`);
 function ChevronIcon($$anchor) {
-	var svg = root$123();
+	var svg = root$120();
 	$.append($$anchor, svg);
 }
 //#endregion
@@ -363,7 +716,7 @@ var rest_excludes$120 = /* @__PURE__ */ new Set([
 	"label",
 	"children"
 ]);
-var root$122 = $.from_html(`<span> </span> <!>`, 1);
+var root$119 = $.from_html(`<span> </span> <!>`, 1);
 var root_1$24 = $.from_html(`<div data-scope="ai" data-part="reasoning-content"><!></div>`);
 var root_2$18 = $.from_html(`<!> <!>`, 1);
 function AiReasoning$1($$anchor, $$props) {
@@ -379,7 +732,7 @@ function AiReasoning$1($$anchor, $$props) {
 				$.component(node_1, () => Collapsible.Trigger, ($$anchor, Collapsible_Trigger) => {
 					Collapsible_Trigger($$anchor, {
 						children: ($$anchor, $$slotProps) => {
-							var fragment_2 = root$122();
+							var fragment_2 = root$119();
 							var span = $.first_child(fragment_2);
 							var text = $.only_child(span, true);
 							var node_2 = $.sibling(span, 2);
@@ -424,26 +777,98 @@ function AiReasoning$1($$anchor, $$props) {
 const AiReasoning = AiReasoning$1;
 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/AiResponse.svelte
 var rest_excludes$119 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
-	"content"
+	"content",
+	"highlighter",
+	"copyLabel",
+	"copiedLabel",
+	"onclick"
 ]);
-var root$121 = $.from_html(`<div></div>`);
+var root_1$23 = $.from_html(`<div></div>`);
 function AiResponse$1($$anchor, $$props) {
 	$.push($$props, true);
-	let rest = $.rest_props($$props, rest_excludes$119);
-	const html = $.derived(() => renderHtml($$props.content));
-	var div = root$121();
+	let copyLabel = $.prop($$props, "copyLabel", 3, "Copy code"), copiedLabel = $.prop($$props, "copiedLabel", 3, "Copied"), rest = $.rest_props($$props, rest_excludes$119);
+	const html = $.derived(() => renderHtml($$props.content, $$props.highlighter ? { highlighter: $$props.highlighter } : void 0));
+	let root;
+	$.user_effect(() => {
+		$.get(html);
+		if (root) decorateCodeCopy(root, copyLabel());
+	});
+	const handleClick = (event) => {
+		clickCodeCopy(event, copyLabel(), copiedLabel());
+		$$props.onclick?.(event);
+	};
+	var div = root_1$23();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "ai",
-		"data-part": "response"
+		"data-part": "response",
+		onclick: handleClick
 	}));
 	$.html(div, () => $.get(html), true);
 	$.reset(div);
+	$.bind_this(div, ($$value) => root = $$value, () => root);
 	$.append($$anchor, div);
 	$.pop();
 }
@@ -461,10 +886,10 @@ var rest_excludes$118 = /* @__PURE__ */ new Set([
 	"href",
 	"children"
 ]);
-var root$120 = $.from_html(`<li data-scope="ai" data-part="source"><a><!></a></li>`);
+var root$118 = $.from_html(`<li data-scope="ai" data-part="source"><a><!></a></li>`);
 function AiSource$1($$anchor, $$props) {
 	let rest = $.rest_props($$props, rest_excludes$118);
-	var li = root$120();
+	var li = root$118();
 	var a = $.child(li);
 	$.attribute_effect(a, () => ({
 		...rest,
@@ -500,10 +925,10 @@ var rest_excludes$117 = /* @__PURE__ */ new Set([
 	"$$legacy",
 	"children"
 ]);
-var root$119 = $.from_html(`<ol><!></ol>`);
+var root$117 = $.from_html(`<ol><!></ol>`);
 function AiSources$1($$anchor, $$props) {
 	let rest = $.rest_props($$props, rest_excludes$117);
-	var ol = root$119();
+	var ol = root$117();
 	$.attribute_effect(ol, () => ({
 		...rest,
 		"data-scope": "ai",
@@ -566,12 +991,12 @@ var rest_excludes$115 = /* @__PURE__ */ new Set([
 	"input",
 	"output"
 ]);
-var root$118 = $.from_html(`<span data-scope="ai" data-part="tool-status"> </span>`);
-var root_1$23 = $.from_html(`<span> </span> <!> <!>`, 1);
+var root$116 = $.from_html(`<span data-scope="ai" data-part="tool-status"> </span>`);
+var root_1$22 = $.from_html(`<span> </span> <!> <!>`, 1);
 var root_2$17 = $.from_html(`<span data-scope="ai" data-part="tool-label">Input</span> <pre> </pre>`, 1);
 var root_3$10 = $.from_html(`<span data-scope="ai" data-part="tool-label">Output</span> <pre> </pre>`, 1);
-var root_4$7 = $.from_html(`<div data-scope="ai" data-part="tool-body"><!> <!></div>`);
-var root_5$6 = $.from_html(`<!> <!>`, 1);
+var root_4$8 = $.from_html(`<div data-scope="ai" data-part="tool-body"><!> <!></div>`);
+var root_5$8 = $.from_html(`<!> <!>`, 1);
 function AiTool$1($$anchor, $$props) {
 	$.push($$props, true);
 	let rest = $.rest_props($$props, rest_excludes$115);
@@ -584,17 +1009,17 @@ function AiTool$1($$anchor, $$props) {
 				return $$props.status;
 			},
 			children: ($$anchor, $$slotProps) => {
-				var fragment_1 = root_5$6();
+				var fragment_1 = root_5$8();
 				var node_1 = $.first_child(fragment_1);
 				$.component(node_1, () => Collapsible.Trigger, ($$anchor, Collapsible_Trigger) => {
 					Collapsible_Trigger($$anchor, {
 						children: ($$anchor, $$slotProps) => {
-							var fragment_2 = root_1$23();
+							var fragment_2 = root_1$22();
 							var span = $.first_child(fragment_2);
 							var text = $.only_child(span, true);
 							var node_2 = $.sibling(span, 2);
 							var consequent = ($$anchor) => {
-								var span_1 = root$118();
+								var span_1 = root$116();
 								var text_1 = $.only_child(span_1, true);
 								$.template_effect(($0) => $.set_text(text_1, $0), [() => $$props.status.charAt(0).toUpperCase() + $$props.status.slice(1)]);
 								$.append($$anchor, span_1);
@@ -621,7 +1046,7 @@ function AiTool$1($$anchor, $$props) {
 				$.component(node_4, () => Collapsible.Content, ($$anchor, Collapsible_Content) => {
 					Collapsible_Content($$anchor, {
 						children: ($$anchor, $$slotProps) => {
-							var div = root_4$7();
+							var div = root_4$8();
 							var node_5 = $.child(div);
 							var consequent_1 = ($$anchor) => {
 								var fragment_4 = root_2$17();
@@ -673,10 +1098,10 @@ var rest_excludes$114 = /* @__PURE__ */ new Set([
 	"$$legacy",
 	"children"
 ]);
-var root$117 = $.from_html(`<div><!></div>`);
+var root$115 = $.from_html(`<div><!></div>`);
 function Ai$1($$anchor, $$props) {
 	let rest = $.rest_props($$props, rest_excludes$114);
-	var div = root$117();
+	var div = root$115();
 	$.attribute_effect(div, () => ({
 		...rest,
 		role: "log",
@@ -697,10 +1122,10 @@ var rest_excludes$113 = /* @__PURE__ */ new Set([
 	"$$legacy",
 	"children"
 ]);
-var root$116 = $.from_html(`<div><!></div>`);
+var root$114 = $.from_html(`<div><!></div>`);
 function AiActions($$anchor, $$props) {
 	let rest = $.rest_props($$props, rest_excludes$113);
-	var div = root$116();
+	var div = root$114();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "ai",
@@ -719,10 +1144,10 @@ var rest_excludes$112 = /* @__PURE__ */ new Set([
 	"$$legacy",
 	"children"
 ]);
-var root$115 = $.from_html(`<div><!></div>`);
+var root$113 = $.from_html(`<div><!></div>`);
 function AiContent($$anchor, $$props) {
 	let rest = $.rest_props($$props, rest_excludes$112);
-	var div = root$115();
+	var div = root$113();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "ai",
@@ -741,10 +1166,10 @@ var rest_excludes$111 = /* @__PURE__ */ new Set([
 	"$$legacy",
 	"children"
 ]);
-var root$114 = $.from_html(`<span><!></span>`);
+var root$112 = $.from_html(`<span><!></span>`);
 function AiLoader($$anchor, $$props) {
 	let rest = $.rest_props($$props, rest_excludes$111);
-	var span = root$114();
+	var span = root$112();
 	$.attribute_effect(span, () => ({
 		...rest,
 		role: "status",
@@ -793,8 +1218,8 @@ var rest_excludes$110 = /* @__PURE__ */ new Set([
 	"status",
 	"onRemove"
 ]);
-var root$113 = $.from_svg(`<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"></circle></svg>`);
-var root_1$22 = $.from_svg(`<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"></path></svg>`);
+var root$111 = $.from_svg(`<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"></circle></svg>`);
+var root_1$21 = $.from_svg(`<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"></path></svg>`);
 var root_2$16 = $.from_html(`<span> </span>`);
 var root_3$9 = $.from_html(`<span><!> <span> </span> <!> <button type="button" data-remove=""><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"></path></svg></button></span>`);
 function Attachment$1($$anchor, $$props) {
@@ -836,12 +1261,12 @@ function Attachment$1($$anchor, $$props) {
 	}));
 	var node = $.child(span);
 	var consequent = ($$anchor) => {
-		var svg = root$113();
+		var svg = root$111();
 		$.append($$anchor, svg);
 	};
 	var d = $.derived(() => isImage($$props.name));
 	var alternate = ($$anchor) => {
-		var svg_1 = root_1$22();
+		var svg_1 = root_1$21();
 		$.append($$anchor, svg_1);
 	};
 	$.if(node, ($$render) => {
@@ -879,10 +1304,10 @@ var rest_excludes$109 = /* @__PURE__ */ new Set([
 	"$$legacy",
 	"children"
 ]);
-var root$112 = $.from_html(`<span><!></span>`);
+var root$110 = $.from_html(`<span><!></span>`);
 function Attachments$1($$anchor, $$props) {
 	let rest = $.rest_props($$props, rest_excludes$109);
-	var span = root$112();
+	var span = root$110();
 	$.attribute_effect(span, () => ({
 		...rest,
 		"data-scope": "ai",
@@ -907,12 +1332,12 @@ var rest_excludes$108 = /* @__PURE__ */ new Set([
 	"status",
 	"children"
 ]);
-var root$111 = $.from_html(`<div><!></div>`);
+var root$109 = $.from_html(`<div><!></div>`);
 function Alert$1($$anchor, $$props) {
 	$.push($$props, true);
 	let status = $.prop($$props, "status", 3, "ink"), rest = $.rest_props($$props, rest_excludes$108);
 	setContext("alert:status", () => status());
-	var div = root$111();
+	var div = root$109();
 	$.attribute_effect(div, () => ({
 		...rest,
 		role: status() === "ink" || status() === "info" ? "status" : "alert",
@@ -934,10 +1359,10 @@ var rest_excludes$107 = /* @__PURE__ */ new Set([
 	"$$legacy",
 	"children"
 ]);
-var root$110 = $.from_html(`<div><!></div>`);
+var root$108 = $.from_html(`<div><!></div>`);
 function AlertBody($$anchor, $$props) {
 	let rest = $.rest_props($$props, rest_excludes$107);
-	var div = root$110();
+	var div = root$108();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "alert",
@@ -956,10 +1381,10 @@ var rest_excludes$106 = /* @__PURE__ */ new Set([
 	"$$legacy",
 	"children"
 ]);
-var root$109 = $.from_html(`<p><!></p>`);
+var root$107 = $.from_html(`<p><!></p>`);
 function AlertDescription($$anchor, $$props) {
 	let rest = $.rest_props($$props, rest_excludes$106);
-	var p = root$109();
+	var p = root$107();
 	$.attribute_effect(p, () => ({
 		...rest,
 		"data-scope": "alert",
@@ -977,7 +1402,7 @@ var rest_excludes$105 = /* @__PURE__ */ new Set([
 	"$$events",
 	"$$legacy"
 ]);
-var root$108 = $.from_html(`<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path></path></svg></span>`);
+var root$106 = $.from_html(`<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path></path></svg></span>`);
 function AlertIcon($$anchor, $$props) {
 	$.push($$props, true);
 	let rest = $.rest_props($$props, rest_excludes$105);
@@ -989,7 +1414,7 @@ function AlertIcon($$anchor, $$props) {
 		danger: "M6 6l12 12M18 6 6 18",
 		ink: "M12 8v5m0 3v.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z"
 	};
-	var span = root$108();
+	var span = root$106();
 	$.attribute_effect(span, () => ({
 		...rest,
 		"data-scope": "alert",
@@ -1012,10 +1437,10 @@ var rest_excludes$104 = /* @__PURE__ */ new Set([
 	"$$legacy",
 	"children"
 ]);
-var root$107 = $.from_html(`<p><!></p>`);
+var root$105 = $.from_html(`<p><!></p>`);
 function AlertTitle($$anchor, $$props) {
 	let rest = $.rest_props($$props, rest_excludes$104);
-	var p = root$107();
+	var p = root$105();
 	$.attribute_effect(p, () => ({
 		...rest,
 		"data-scope": "alert",
@@ -1050,7 +1475,7 @@ var rest_excludes$103 = /* @__PURE__ */ new Set([
 	"placeholder",
 	"filter"
 ]);
-var root$106 = $.from_html(`<!> <!>`, 1);
+var root$104 = $.from_html(`<!> <!>`, 1);
 function AutoComplete$1($$anchor, $$props) {
 	$.push($$props, true);
 	let value = $.prop($$props, "value", 15, ""), items = $.prop($$props, "items", 19, () => []), rest = $.rest_props($$props, rest_excludes$103);
@@ -1080,7 +1505,7 @@ function AutoComplete$1($$anchor, $$props) {
 			positioning: { sameWidth: true }
 		}, () => rest, {
 			children: ($$anchor, $$slotProps) => {
-				var fragment_1 = root$106();
+				var fragment_1 = root$104();
 				var node_1 = $.first_child(fragment_1);
 				$.component(node_1, () => Combobox$1.Control, ($$anchor, ArkCombobox_Control) => {
 					ArkCombobox_Control($$anchor, {
@@ -1110,7 +1535,7 @@ function AutoComplete$1($$anchor, $$props) {
 									$.component(node_5, () => Combobox$1.Content, ($$anchor, ArkCombobox_Content) => {
 										ArkCombobox_Content($$anchor, {
 											children: ($$anchor, $$slotProps) => {
-												var fragment_5 = root$106();
+												var fragment_5 = root$104();
 												var node_6 = $.first_child(fragment_5);
 												$.component(node_6, () => Combobox$1.Empty, ($$anchor, ArkCombobox_Empty) => {
 													ArkCombobox_Empty($$anchor, {
@@ -1198,10 +1623,10 @@ var rest_excludes$102 = /* @__PURE__ */ new Set([
 	"ratio",
 	"children"
 ]);
-var root$105 = $.from_html(`<div><!></div>`);
+var root$103 = $.from_html(`<div><!></div>`);
 function AspectRatio$1($$anchor, $$props) {
 	let ratio = $.prop($$props, "ratio", 3, "1 / 1"), rest = $.rest_props($$props, rest_excludes$102);
-	var div = root$105();
+	var div = root$103();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "aspect-ratio",
@@ -1220,24 +1645,55 @@ function AspectRatio$1($$anchor, $$props) {
 const AspectRatio = AspectRatio$1;
 injectComponentStyle("aspect-ratio");
 //#endregion
+//#region src/components/avatar/Avatar.svelte
+var rest_excludes$101 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"size",
+	"children"
+]);
+function Avatar$2($$anchor, $$props) {
+	let rest = $.rest_props($$props, rest_excludes$101);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => Avatar$1.Root, ($$anchor, ArkAvatar_Root) => {
+		ArkAvatar_Root($$anchor, $.spread_props(() => rest, {
+			get "data-size"() {
+				return $$props.size;
+			},
+			children: ($$anchor, $$slotProps) => {
+				var fragment_1 = $.comment();
+				var node_1 = $.first_child(fragment_1);
+				$.snippet(node_1, () => $$props.children ?? $.noop);
+				$.append($$anchor, fragment_1);
+			},
+			$$slots: { default: true }
+		}));
+	});
+	$.append($$anchor, fragment);
+}
+//#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;
+/** Avatar, dressed in the paper-and-ink system: a circular seal on
+* inset paper that holds initials until the image loads over them.
+* `size` picks a control-height rung for the seal — the core styles
+* re-point `--bs-avatar-size` per rung, and scenes can still retune the
+* variable directly. */
+const Avatar = Object.assign({}, Avatar$1, { Root: Avatar$2 });
 injectComponentStyle("avatar");
 //#endregion
 //#region src/components/avatar-group/AvatarGroup.svelte
-var rest_excludes$101 = /* @__PURE__ */ new Set([
+var rest_excludes$100 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$104 = $.from_html(`<div><!></div>`);
+var root$102 = $.from_html(`<div><!></div>`);
 function AvatarGroup$1($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$101);
-	var div = root$104();
+	let rest = $.rest_props($$props, rest_excludes$100);
+	var div = root$102();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "avatar-group",
@@ -1256,28 +1712,52 @@ const AvatarGroup = AvatarGroup$1;
 injectComponentStyle("avatar-group");
 //#endregion
 //#region src/components/back-top/BackTop.svelte
-var rest_excludes$100 = /* @__PURE__ */ new Set([
+var rest_excludes$99 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"threshold",
 	"label",
+	"scrollEl",
 	"children"
 ]);
-var root$103 = $.from_svg(`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 14 6-6 6 6"></path></svg>`);
-var root_1$21 = $.from_html(`<div data-scope="back-top" data-part="root"><!></div>`);
+var root$101 = $.from_svg(`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 14 6-6 6 6"></path></svg>`);
+var root_1$20 = $.from_html(`<div><!></div>`);
 function BackTop$1($$anchor, $$props) {
 	$.push($$props, true);
-	let threshold = $.prop($$props, "threshold", 3, 400), label = $.prop($$props, "label", 3, "Back to top"), rest = $.rest_props($$props, rest_excludes$100);
+	let threshold = $.prop($$props, "threshold", 3, 400), label = $.prop($$props, "label", 3, "Back to top"), rest = $.rest_props($$props, rest_excludes$99);
 	let visible = $.state(false);
 	$.user_effect(() => {
 		if (typeof window === "undefined") return;
-		const onScroll = () => $.set(visible, window.scrollY > threshold());
+		const el = $$props.scrollEl?.() ?? null;
+		const onScroll = () => $.set(visible, (el ? el.scrollTop : window.scrollY) > threshold());
 		onScroll();
-		window.addEventListener("scroll", onScroll, { passive: true });
-		return () => window.removeEventListener("scroll", 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);
+		};
 	});
-	var div = root_1$21();
+	const toTop = () => {
+		const el = $$props.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"
+		});
+	};
+	var div = root_1$20();
+	$.attribute_effect(div, () => ({
+		"data-scope": "back-top",
+		"data-part": "root",
+		"data-state": $.get(visible) ? "shown" : "hidden",
+		...$$props.scrollEl ? { "data-container": "" } : {}
+	}));
 	var node = $.child(div);
 	{
 		let $0 = $.derived(() => $.get(visible) ? void 0 : "true");
@@ -1296,7 +1776,7 @@ function BackTop$1($$anchor, $$props) {
 			get tabindex() {
 				return $.get($1);
 			},
-			onclick: () => window.scrollTo({ top: 0 }),
+			onclick: toTop,
 			children: ($$anchor, $$slotProps) => {
 				var fragment = $.comment();
 				var node_1 = $.first_child(fragment);
@@ -1307,7 +1787,7 @@ function BackTop$1($$anchor, $$props) {
 					$.append($$anchor, fragment_1);
 				};
 				var alternate = ($$anchor) => {
-					var svg = root$103();
+					var svg = root$101();
 					$.append($$anchor, svg);
 				};
 				$.if(node_1, ($$render) => {
@@ -1320,7 +1800,6 @@ function BackTop$1($$anchor, $$props) {
 		}));
 	}
 	$.reset(div);
-	$.template_effect(() => $.set_attribute(div, "data-state", $.get(visible) ? "shown" : "hidden"));
 	$.append($$anchor, div);
 	$.pop();
 }
@@ -1337,7 +1816,7 @@ const BackTop = BackTop$1;
 injectComponentStyle("back-top");
 //#endregion
 //#region src/components/badge/Badge.svelte
-var rest_excludes$99 = /* @__PURE__ */ new Set([
+var rest_excludes$98 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -1345,12 +1824,12 @@ var rest_excludes$99 = /* @__PURE__ */ new Set([
 	"variant",
 	"children"
 ]);
-var root$102 = $.from_html(`<span><!></span>`);
+var root$100 = $.from_html(`<span><!></span>`);
 function Badge$1($$anchor, $$props) {
 	$.push($$props, true);
-	let tone = $.prop($$props, "tone", 3, "ink"), variant = $.prop($$props, "variant", 3, "solid"), rest = $.rest_props($$props, rest_excludes$99);
+	let tone = $.prop($$props, "tone", 3, "ink"), variant = $.prop($$props, "variant", 3, "solid"), rest = $.rest_props($$props, rest_excludes$98);
 	injectComponentStyle("badge");
-	var span = root$102();
+	var span = root$100();
 	$.attribute_effect(span, () => ({
 		...rest,
 		"data-scope": "badge",
@@ -1371,16 +1850,16 @@ function Badge$1($$anchor, $$props) {
 const Badge = Badge$1;
 //#endregion
 //#region src/components/breadcrumb/Breadcrumb.svelte
-var rest_excludes$98 = /* @__PURE__ */ new Set([
+var rest_excludes$97 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$101 = $.from_html(`<nav><!></nav>`);
+var root$99 = $.from_html(`<nav><!></nav>`);
 function Breadcrumb$1($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$98);
-	var nav = root$101();
+	let rest = $.rest_props($$props, rest_excludes$97);
+	var nav = root$99();
 	$.attribute_effect(nav, () => ({
 		...rest,
 		"aria-label": "Breadcrumb",
@@ -1394,16 +1873,16 @@ function Breadcrumb$1($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/breadcrumb/BreadcrumbCurrent.svelte
-var rest_excludes$97 = /* @__PURE__ */ new Set([
+var rest_excludes$96 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$100 = $.from_html(`<span><!></span>`);
+var root$98 = $.from_html(`<span><!></span>`);
 function BreadcrumbCurrent($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$97);
-	var span = root$100();
+	let rest = $.rest_props($$props, rest_excludes$96);
+	var span = root$98();
 	$.attribute_effect(span, () => ({
 		...rest,
 		"aria-current": "page",
@@ -1417,16 +1896,16 @@ function BreadcrumbCurrent($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/breadcrumb/BreadcrumbItem.svelte
-var rest_excludes$96 = /* @__PURE__ */ new Set([
+var rest_excludes$95 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$99 = $.from_html(`<li><!></li>`);
+var root$97 = $.from_html(`<li><!></li>`);
 function BreadcrumbItem($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$96);
-	var li = root$99();
+	let rest = $.rest_props($$props, rest_excludes$95);
+	var li = root$97();
 	$.attribute_effect(li, () => ({
 		...rest,
 		"data-scope": "breadcrumb",
@@ -1439,16 +1918,16 @@ function BreadcrumbItem($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/breadcrumb/BreadcrumbLink.svelte
-var rest_excludes$95 = /* @__PURE__ */ new Set([
+var rest_excludes$94 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$98 = $.from_html(`<a><!></a>`);
+var root$96 = $.from_html(`<a><!></a>`);
 function BreadcrumbLink($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$95);
-	var a = root$98();
+	let rest = $.rest_props($$props, rest_excludes$94);
+	var a = root$96();
 	$.attribute_effect(a, () => ({
 		...rest,
 		"data-scope": "breadcrumb",
@@ -1461,16 +1940,16 @@ function BreadcrumbLink($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/breadcrumb/BreadcrumbList.svelte
-var rest_excludes$94 = /* @__PURE__ */ new Set([
+var rest_excludes$93 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$97 = $.from_html(`<ol><!></ol>`);
+var root$95 = $.from_html(`<ol><!></ol>`);
 function BreadcrumbList($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$94);
-	var ol = root$97();
+	let rest = $.rest_props($$props, rest_excludes$93);
+	var ol = root$95();
 	$.attribute_effect(ol, () => ({
 		...rest,
 		"data-scope": "breadcrumb",
@@ -1483,16 +1962,16 @@ function BreadcrumbList($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/breadcrumb/BreadcrumbSeparator.svelte
-var rest_excludes$93 = /* @__PURE__ */ new Set([
+var rest_excludes$92 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$96 = $.from_html(`<span><!></span>`);
+var root$94 = $.from_html(`<span><!></span>`);
 function BreadcrumbSeparator($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$93);
-	var span = root$96();
+	let rest = $.rest_props($$props, rest_excludes$92);
+	var span = root$94();
 	$.attribute_effect(span, () => ({
 		...rest,
 		"aria-hidden": "true",
@@ -1533,7 +2012,7 @@ const Breadcrumb = Object.assign(Breadcrumb$1, {
 injectComponentStyle("breadcrumb");
 //#endregion
 //#region src/components/button-group/ButtonGroup.svelte
-var rest_excludes$92 = /* @__PURE__ */ new Set([
+var rest_excludes$91 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -1542,10 +2021,10 @@ var rest_excludes$92 = /* @__PURE__ */ new Set([
 	"radius",
 	"children"
 ]);
-var root$95 = $.from_html(`<div><!></div>`);
+var root$93 = $.from_html(`<div><!></div>`);
 function ButtonGroup$1($$anchor, $$props) {
-	let orientation = $.prop($$props, "orientation", 3, "horizontal"), rest = $.rest_props($$props, rest_excludes$92);
-	var div = root$95();
+	let orientation = $.prop($$props, "orientation", 3, "horizontal"), rest = $.rest_props($$props, rest_excludes$91);
+	var div = root$93();
 	$.attribute_effect(div, () => ({
 		...rest,
 		role: "group",
@@ -1568,17 +2047,17 @@ const ButtonGroup = ButtonGroup$1;
 injectComponentStyle("button-group");
 //#endregion
 //#region src/components/banner/Banner.svelte
-var rest_excludes$91 = /* @__PURE__ */ new Set([
+var rest_excludes$90 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"status",
 	"children"
 ]);
-var root$94 = $.from_html(`<div><!></div>`);
+var root$92 = $.from_html(`<div><!></div>`);
 function Banner$1($$anchor, $$props) {
-	let status = $.prop($$props, "status", 3, "ink"), rest = $.rest_props($$props, rest_excludes$91);
-	var div = root$94();
+	let status = $.prop($$props, "status", 3, "ink"), rest = $.rest_props($$props, rest_excludes$90);
+	var div = root$92();
 	$.attribute_effect(div, () => ({
 		...rest,
 		role: status() === "ink" ? void 0 : "status",
@@ -1593,16 +2072,16 @@ function Banner$1($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/banner/BannerActions.svelte
-var rest_excludes$90 = /* @__PURE__ */ new Set([
+var rest_excludes$89 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$93 = $.from_html(`<div><!></div>`);
+var root$91 = $.from_html(`<div><!></div>`);
 function BannerActions($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$90);
-	var div = root$93();
+	let rest = $.rest_props($$props, rest_excludes$89);
+	var div = root$91();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "banner",
@@ -1615,16 +2094,16 @@ function BannerActions($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/banner/BannerBody.svelte
-var rest_excludes$89 = /* @__PURE__ */ new Set([
+var rest_excludes$88 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$92 = $.from_html(`<div><!></div>`);
+var root$90 = $.from_html(`<div><!></div>`);
 function BannerBody($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$89);
-	var div = root$92();
+	let rest = $.rest_props($$props, rest_excludes$88);
+	var div = root$90();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "banner",
@@ -1637,17 +2116,17 @@ function BannerBody($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/banner/BannerClose.svelte
-var rest_excludes$88 = /* @__PURE__ */ new Set([
+var rest_excludes$87 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"type"
 ]);
-var root$91 = $.from_html(`<button><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg></button>`);
+var root$89 = $.from_html(`<button><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg></button>`);
 function BannerClose($$anchor, $$props) {
 	$.push($$props, true);
-	let type = $.prop($$props, "type", 3, "button"), rest = $.rest_props($$props, rest_excludes$88);
-	var button = root$91();
+	let type = $.prop($$props, "type", 3, "button"), rest = $.rest_props($$props, rest_excludes$87);
+	var button = root$89();
 	$.attribute_effect(button, () => ({
 		...rest,
 		type: type(),
@@ -1660,16 +2139,16 @@ function BannerClose($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/banner/BannerDescription.svelte
-var rest_excludes$87 = /* @__PURE__ */ new Set([
+var rest_excludes$86 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$90 = $.from_html(`<p><!></p>`);
+var root$88 = $.from_html(`<p><!></p>`);
 function BannerDescription($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$87);
-	var p = root$90();
+	let rest = $.rest_props($$props, rest_excludes$86);
+	var p = root$88();
 	$.attribute_effect(p, () => ({
 		...rest,
 		"data-scope": "banner",
@@ -1682,16 +2161,16 @@ function BannerDescription($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/banner/BannerIcon.svelte
-var rest_excludes$86 = /* @__PURE__ */ new Set([
+var rest_excludes$85 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$89 = $.from_html(`<span><!></span>`);
+var root$87 = $.from_html(`<span><!></span>`);
 function BannerIcon($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$86);
-	var span = root$89();
+	let rest = $.rest_props($$props, rest_excludes$85);
+	var span = root$87();
 	$.attribute_effect(span, () => ({
 		...rest,
 		"data-scope": "banner",
@@ -1704,16 +2183,16 @@ function BannerIcon($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/banner/BannerTitle.svelte
-var rest_excludes$85 = /* @__PURE__ */ new Set([
+var rest_excludes$84 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$88 = $.from_html(`<p><!></p>`);
+var root$86 = $.from_html(`<p><!></p>`);
 function BannerTitle($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$85);
-	var p = root$88();
+	let rest = $.rest_props($$props, rest_excludes$84);
+	var p = root$86();
 	$.attribute_effect(p, () => ({
 		...rest,
 		"data-scope": "banner",
@@ -1782,7 +2261,7 @@ const header = ($$anchor) => {
 				$.component(node_2, () => DatePicker$1.PrevTrigger, ($$anchor, ArkDatePicker_PrevTrigger) => {
 					ArkDatePicker_PrevTrigger($$anchor, {
 						children: ($$anchor, $$slotProps) => {
-							var svg = root$87();
+							var svg = root$85();
 							$.append($$anchor, svg);
 						},
 						$$slots: { default: true }
@@ -1814,7 +2293,7 @@ const header = ($$anchor) => {
 				$.component(node_5, () => DatePicker$1.NextTrigger, ($$anchor, ArkDatePicker_NextTrigger) => {
 					ArkDatePicker_NextTrigger($$anchor, {
 						children: ($$anchor, $$slotProps) => {
-							var svg_1 = root_1$20();
+							var svg_1 = root_1$19();
 							$.append($$anchor, svg_1);
 						},
 						$$slots: { default: true }
@@ -1828,7 +2307,7 @@ const header = ($$anchor) => {
 	$.reset(div);
 	$.append($$anchor, div);
 };
-var rest_excludes$84 = /* @__PURE__ */ new Set([
+var rest_excludes$83 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -1838,16 +2317,16 @@ var rest_excludes$84 = /* @__PURE__ */ new Set([
 	"onValueChange",
 	"children"
 ]);
-var root$87 = $.from_svg(`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true" style="transform: rotate(180deg)"><path d="m9 5 7 7-7 7"></path></svg>`);
-var root_1$20 = $.from_svg(`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><path d="m9 5 7 7-7 7"></path></svg>`);
+var root$85 = $.from_svg(`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true" style="transform: rotate(180deg)"><path d="m9 5 7 7-7 7"></path></svg>`);
+var root_1$19 = $.from_svg(`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><path d="m9 5 7 7-7 7"></path></svg>`);
 var root_2$15 = $.from_html(`<!> <!> <!>`, 1);
 var root_3$8 = $.from_html(`<div data-scope="calendar" data-part="header"><!></div>`);
-var root_4$6 = $.from_html(`<!> <!>`, 1);
-var root_5$5 = $.from_html(`<div><!> <!></div>`);
+var root_4$7 = $.from_html(`<!> <!>`, 1);
+var root_5$7 = $.from_html(`<div><!> <!></div>`);
 function Calendar$1($$anchor, $$props) {
 	$.push($$props, true);
-	let rest = $.rest_props($$props, rest_excludes$84);
-	var div_1 = root_5$5();
+	let rest = $.rest_props($$props, rest_excludes$83);
+	var div_1 = root_5$7();
 	$.attribute_effect(div_1, () => ({
 		...rest,
 		"data-scope": "calendar",
@@ -1876,7 +2355,7 @@ function Calendar$1($$anchor, $$props) {
 					ArkDatePicker_View($$anchor, {
 						view: "day",
 						children: ($$anchor, $$slotProps) => {
-							var fragment_8 = root_4$6();
+							var fragment_8 = root_4$7();
 							var node_8 = $.first_child(fragment_8);
 							header(node_8);
 							var node_9 = $.sibling(node_8, 2);
@@ -1887,7 +2366,7 @@ function Calendar$1($$anchor, $$props) {
 									$.component(node_10, () => DatePicker$1.Table, ($$anchor, ArkDatePicker_Table) => {
 										ArkDatePicker_Table($$anchor, {
 											children: ($$anchor, $$slotProps) => {
-												var fragment_10 = root_4$6();
+												var fragment_10 = root_4$7();
 												var node_11 = $.first_child(fragment_10);
 												$.component(node_11, () => DatePicker$1.TableHead, ($$anchor, ArkDatePicker_TableHead) => {
 													ArkDatePicker_TableHead($$anchor, {
@@ -2007,7 +2486,7 @@ function Calendar$1($$anchor, $$props) {
 					ArkDatePicker_View_1($$anchor, {
 						view: "month",
 						children: ($$anchor, $$slotProps) => {
-							var fragment_21 = root_4$6();
+							var fragment_21 = root_4$7();
 							var node_22 = $.first_child(fragment_21);
 							header(node_22);
 							var node_23 = $.sibling(node_22, 2);
@@ -2100,7 +2579,7 @@ function Calendar$1($$anchor, $$props) {
 					ArkDatePicker_View_2($$anchor, {
 						view: "year",
 						children: ($$anchor, $$slotProps) => {
-							var fragment_30 = root_4$6();
+							var fragment_30 = root_4$7();
 							var node_32 = $.first_child(fragment_30);
 							header(node_32);
 							var node_33 = $.sibling(node_32, 2);
@@ -2208,16 +2687,16 @@ injectComponentStyle("calendar");
 injectComponentStyle("date-picker");
 //#endregion
 //#region src/components/card/Card.svelte
-var rest_excludes$83 = /* @__PURE__ */ new Set([
+var rest_excludes$82 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$86 = $.from_html(`<section><!></section>`);
+var root$84 = $.from_html(`<section><!></section>`);
 function Card$1($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$83);
-	var section = root$86();
+	let rest = $.rest_props($$props, rest_excludes$82);
+	var section = root$84();
 	$.attribute_effect(section, () => ({
 		...rest,
 		"data-scope": "card",
@@ -2230,16 +2709,16 @@ function Card$1($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/card/CardContent.svelte
-var rest_excludes$82 = /* @__PURE__ */ new Set([
+var rest_excludes$81 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$85 = $.from_html(`<div><!></div>`);
+var root$83 = $.from_html(`<div><!></div>`);
 function CardContent($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$82);
-	var div = root$85();
+	let rest = $.rest_props($$props, rest_excludes$81);
+	var div = root$83();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "card",
@@ -2252,16 +2731,16 @@ function CardContent($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/card/CardDescription.svelte
-var rest_excludes$81 = /* @__PURE__ */ new Set([
+var rest_excludes$80 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$84 = $.from_html(`<p><!></p>`);
+var root$82 = $.from_html(`<p><!></p>`);
 function CardDescription($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$81);
-	var p = root$84();
+	let rest = $.rest_props($$props, rest_excludes$80);
+	var p = root$82();
 	$.attribute_effect(p, () => ({
 		...rest,
 		"data-scope": "card",
@@ -2274,16 +2753,16 @@ function CardDescription($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/card/CardFooter.svelte
-var rest_excludes$80 = /* @__PURE__ */ new Set([
+var rest_excludes$79 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$83 = $.from_html(`<footer><!></footer>`);
+var root$81 = $.from_html(`<footer><!></footer>`);
 function CardFooter($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$80);
-	var footer = root$83();
+	let rest = $.rest_props($$props, rest_excludes$79);
+	var footer = root$81();
 	$.attribute_effect(footer, () => ({
 		...rest,
 		"data-scope": "card",
@@ -2296,16 +2775,16 @@ function CardFooter($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/card/CardHeader.svelte
-var rest_excludes$79 = /* @__PURE__ */ new Set([
+var rest_excludes$78 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$82 = $.from_html(`<header><!></header>`);
+var root$80 = $.from_html(`<header><!></header>`);
 function CardHeader($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$79);
-	var header = root$82();
+	let rest = $.rest_props($$props, rest_excludes$78);
+	var header = root$80();
 	$.attribute_effect(header, () => ({
 		...rest,
 		"data-scope": "card",
@@ -2318,16 +2797,16 @@ function CardHeader($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/card/CardTitle.svelte
-var rest_excludes$78 = /* @__PURE__ */ new Set([
+var rest_excludes$77 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$81 = $.from_html(`<h3><!></h3>`);
+var root$79 = $.from_html(`<h3><!></h3>`);
 function CardTitle($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$78);
-	var h3 = root$81();
+	let rest = $.rest_props($$props, rest_excludes$77);
+	var h3 = root$79();
 	$.attribute_effect(h3, () => ({
 		...rest,
 		"data-scope": "card",
@@ -2353,8 +2832,41 @@ const Card = Object.assign(Card$1, {
 });
 injectComponentStyle("card");
 //#endregion
+//#region src/components/input/Input.svelte
+var rest_excludes$76 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"value",
+	"size",
+	"invalid"
+]);
+var root$78 = $.from_html(`<input/>`);
+function Input$1($$anchor, $$props) {
+	$.push($$props, true);
+	let value = $.prop($$props, "value", 15), size = $.prop($$props, "size", 3, "md"), invalid = $.prop($$props, "invalid", 3, false), rest = $.rest_props($$props, rest_excludes$76);
+	const field = useFieldContext();
+	const fieldProps = $.derived(() => field?.()?.getInputProps() ?? {});
+	var input = root$78();
+	var event_handler = (event) => {
+		value(event.currentTarget.value);
+	};
+	$.attribute_effect(input, () => ({
+		...$.get(fieldProps),
+		...rest,
+		"data-scope": "input",
+		"data-part": "root",
+		"data-size": size(),
+		"data-invalid": invalid() || $.get(fieldProps)["data-invalid"] != null ? "" : void 0,
+		oninput: event_handler
+	}), void 0, void 0, void 0, void 0, true);
+	$.bind_value(input, value);
+	$.append($$anchor, input);
+	$.pop();
+}
+//#endregion
 //#region src/components/cascade-select/CascadeSelect.svelte
-var rest_excludes$77 = /* @__PURE__ */ new Set([
+var rest_excludes$75 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -2362,14 +2874,18 @@ var rest_excludes$77 = /* @__PURE__ */ new Set([
 	"data",
 	"placeholder",
 	"highlightTrigger",
+	"filterable",
 	"multiple",
 	"disabled"
 ]);
-var root$80 = $.from_html(`<span data-part="branch-indicator" aria-hidden="true"><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"></path></svg></span>`);
-var root_1$19 = $.from_html(`<li><span> </span> <!> <span><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"></path></svg></span></li>`);
+var root$77 = $.from_html(`<span data-part="branch-indicator" aria-hidden="true"><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"></path></svg></span>`);
+var root_1$18 = $.from_html(`<li><span> </span> <!> <span><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"></path></svg></span></li>`);
 var root_2$14 = $.from_html(`<ul></ul> <!>`, 1);
-var root_3$7 = $.from_html(`<div><div><!></div></div>`);
-var root_4$5 = $.from_html(`<div><div><button><span> </span> <span><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"></path></svg></span></button></div> <!></div>`);
+var root_3$7 = $.from_html(`<div data-part="search"><!></div>`);
+var root_4$6 = $.from_html(`<p data-part="empty">Nothing matches</p>`);
+var root_5$6 = $.from_html(`<button type="button" data-part="match"> </button>`);
+var root_6$5 = $.from_html(`<div><div><!> <!></div></div>`);
+var root_7$4 = $.from_html(`<div><div><button><span> </span> <span><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"></path></svg></span></button></div> <!></div>`);
 function CascadeSelect$1($$anchor, $$props) {
 	const id = $.props_id();
 	$.push($$props, true);
@@ -2395,14 +2911,14 @@ function CascadeSelect$1($$anchor, $$props) {
 				value: [...valuePath(), $.get(itemValue)]
 			}));
 			const itemState = $.derived(() => $.get(api).getItemState($.get(itemProps)));
-			var li = root_1$19();
+			var li = root_1$18();
 			$.attribute_effect(li, ($0) => ({ ...$0 }), [() => $.get(api).getItemProps($.get(itemProps))]);
 			var span = $.child(li);
 			$.attribute_effect(span, ($0) => ({ ...$0 }), [() => $.get(api).getItemTextProps($.get(itemProps))]);
 			var text = $.only_child(span, true);
 			var node_1 = $.sibling(span, 2);
 			var consequent = ($$anchor) => {
-				var span_1 = root$80();
+				var span_1 = root$77();
 				$.append($$anchor, span_1);
 			};
 			$.if(node_1, ($$render) => {
@@ -2429,7 +2945,7 @@ function CascadeSelect$1($$anchor, $$props) {
 		});
 		$.append($$anchor, fragment);
 	};
-	let value = $.prop($$props, "value", 15), placeholder = $.prop($$props, "placeholder", 3, "Select…"), multiple = $.prop($$props, "multiple", 3, false), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes$77);
+	let value = $.prop($$props, "value", 15), placeholder = $.prop($$props, "placeholder", 3, "Select…"), filterable = $.prop($$props, "filterable", 3, false), multiple = $.prop($$props, "multiple", 3, false), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes$75);
 	const locale = useLocaleContext();
 	const env = useEnvironmentContext();
 	const collection = $.derived(() => cascade.collection({
@@ -2456,6 +2972,42 @@ function CascadeSelect$1($$anchor, $$props) {
 		}
 	}));
 	const api = $.derived(() => cascade.connect(service, normalizeProps));
+	let query = $.state("");
+	const filterFns = useFilter({ sensitivity: "base" });
+	const filtering = $.derived(() => filterable() && $.get(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 = $.derived(() => {
+		if (!$.get(filtering)) return [];
+		const q = $.get(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($$props.data, [], [], false);
+		return hits;
+	});
+	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];
+			$.get(api).setValue(next);
+		} else {
+			$.get(api).selectValue(path);
+			$.get(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. */
@@ -2474,7 +3026,7 @@ function CascadeSelect$1($$anchor, $$props) {
 		const parts = (value() ?? []).map((path) => labelsFor(path)?.join(" / ")).filter((label) => label != null);
 		return parts.length > 0 ? parts.join(", ") : null;
 	});
-	var div = root_4$5();
+	var div = root_7$4();
 	$.attribute_effect(div, ($0) => ({
 		...rest,
 		...$0
@@ -2482,8 +3034,13 @@ function CascadeSelect$1($$anchor, $$props) {
 	var div_1 = $.child(div);
 	$.attribute_effect(div_1, ($0) => ({ ...$0 }), [() => $.get(api).getControlProps()]);
 	var button = $.child(div_1);
+	var event_handler = (event) => {
+		$.get(api).getTriggerProps().onclick?.(event);
+		$.set(query, "");
+	};
 	$.attribute_effect(button, ($0) => ({
 		...$0,
+		onclick: event_handler,
 		disabled: disabled() || void 0
 	}), [() => $.get(api).getTriggerProps()]);
 	var span_3 = $.child(button);
@@ -2496,12 +3053,66 @@ function CascadeSelect$1($$anchor, $$props) {
 	var node_3 = $.sibling(div_1, 2);
 	Portal(node_3, {
 		children: ($$anchor, $$slotProps) => {
-			var div_2 = root_3$7();
+			var div_2 = root_6$5();
 			$.attribute_effect(div_2, ($0) => ({ ...$0 }), [() => $.get(api).getPositionerProps()]);
 			var div_3 = $.child(div_2);
 			$.attribute_effect(div_3, ($0) => ({ ...$0 }), [() => $.get(api).getContentProps()]);
 			var node_4 = $.child(div_3);
-			column(node_4, () => $.get(collection).rootNode, () => [], () => []);
+			var consequent_2 = ($$anchor) => {
+				var div_4 = root_3$7();
+				Input$1($.child(div_4), {
+					size: "sm",
+					placeholder: "Filter…",
+					"aria-label": "Filter options",
+					get value() {
+						return $.get(query);
+					},
+					set value($$value) {
+						$.set(query, $$value, true);
+					}
+				});
+				$.reset(div_4);
+				$.append($$anchor, div_4);
+			};
+			$.if(node_4, ($$render) => {
+				if (filterable()) $$render(consequent_2);
+			});
+			var node_6 = $.sibling(node_4, 2);
+			var consequent_4 = ($$anchor) => {
+				var fragment_2 = $.comment();
+				var node_7 = $.first_child(fragment_2);
+				var consequent_3 = ($$anchor) => {
+					var p_1 = root_4$6();
+					$.append($$anchor, p_1);
+				};
+				var alternate = ($$anchor) => {
+					var fragment_3 = $.comment();
+					var node_8 = $.first_child(fragment_3);
+					$.each(node_8, 17, () => $.get(matchPaths), (hit) => hit.path.join("/"), ($$anchor, hit) => {
+						var button_1 = root_5$6();
+						var text_2 = $.only_child(button_1, true);
+						$.template_effect(($0, $1) => {
+							$.set_attribute(button_1, "data-selected", $0);
+							$.set_text(text_2, $1);
+						}, [() => isSelected($.get(hit).path) || void 0, () => $.get(hit).labels.join(" / ")]);
+						$.delegated("click", button_1, () => pickMatch($.get(hit).path));
+						$.append($$anchor, button_1);
+					});
+					$.append($$anchor, fragment_3);
+				};
+				$.if(node_7, ($$render) => {
+					if ($.get(matchPaths).length === 0) $$render(consequent_3);
+					else $$render(alternate, -1);
+				});
+				$.append($$anchor, fragment_2);
+			};
+			var alternate_1 = ($$anchor) => {
+				column($$anchor, () => $.get(collection).rootNode, () => [], () => []);
+			};
+			$.if(node_6, ($$render) => {
+				if ($.get(filtering)) $$render(consequent_4);
+				else $$render(alternate_1, -1);
+			});
 			$.reset(div_3);
 			$.reset(div_2);
 			$.append($$anchor, div_2);
@@ -2513,6 +3124,7 @@ function CascadeSelect$1($$anchor, $$props) {
 	$.append($$anchor, div);
 	$.pop();
 }
+$.delegate(["click"]);
 //#endregion
 //#region src/components/cascade-select/index.ts
 /** A corridor of linked columns: pick a branch and the next column
@@ -2539,22 +3151,26 @@ const Checkbox = Checkbox$1;
 injectComponentStyle("checkbox");
 //#endregion
 //#region src/components/checkbox-group/CheckboxGroup.svelte
-var rest_excludes$76 = /* @__PURE__ */ new Set([
+var rest_excludes$74 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"value",
 	"options",
 	"layout",
+	"invalid",
 	"disabled"
 ]);
-var root$79 = $.from_svg(`<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"></path></svg>`);
-var root_1$18 = $.from_html(`<!> <!> <!>`, 1);
+var root$76 = $.from_svg(`<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"></path></svg>`);
+var root_1$17 = $.from_html(`<!> <!> <!>`, 1);
 var root_2$13 = $.from_html(`<div></div>`);
 function CheckboxGroup$1($$anchor, $$props) {
 	$.push($$props, true);
-	let value = $.prop($$props, "value", 31, () => $.proxy([])), layout = $.prop($$props, "layout", 3, "vertical"), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes$76);
+	let value = $.prop($$props, "value", 31, () => $.proxy([])), layout = $.prop($$props, "layout", 3, "vertical"), invalid = $.prop($$props, "invalid", 3, false), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes$74);
+	const field = useFieldContext();
 	const selected = $.derived(() => new Set(value()));
+	const isInvalid = $.derived(() => invalid() || field?.()?.invalid === true);
+	const isDisabled = $.derived(() => disabled() || field?.()?.disabled === true);
 	function toggle(option) {
 		const next = new Set($.get(selected));
 		if (next.has(option)) next.delete(option);
@@ -2567,25 +3183,29 @@ function CheckboxGroup$1($$anchor, $$props) {
 		role: "group",
 		"data-scope": "checkbox-group",
 		"data-part": "root",
-		"data-layout": layout()
+		"data-layout": layout(),
+		"data-invalid": $.get(isInvalid) ? "" : void 0
 	}));
 	$.each(div, 21, () => $$props.options, (option) => option.value, ($$anchor, option) => {
 		var fragment = $.comment();
 		var node = $.first_child(fragment);
 		{
 			let $0 = $.derived(() => $.get(selected).has($.get(option).value));
-			let $1 = $.derived(() => disabled() || $.get(option).disabled === true);
+			let $1 = $.derived(() => $.get(isDisabled) || $.get(option).disabled === true);
 			$.component(node, () => Checkbox$1.Root, ($$anchor, ArkCheckbox_Root) => {
 				ArkCheckbox_Root($$anchor, {
 					get checked() {
 						return $.get($0);
 					},
+					get invalid() {
+						return $.get(isInvalid);
+					},
 					get disabled() {
 						return $.get($1);
 					},
 					onCheckedChange: () => toggle($.get(option).value),
 					children: ($$anchor, $$slotProps) => {
-						var fragment_1 = root_1$18();
+						var fragment_1 = root_1$17();
 						var node_1 = $.first_child(fragment_1);
 						$.component(node_1, () => Checkbox$1.Control, ($$anchor, ArkCheckbox_Control) => {
 							ArkCheckbox_Control($$anchor, {
@@ -2595,7 +3215,7 @@ function CheckboxGroup$1($$anchor, $$props) {
 									$.component(node_2, () => Checkbox$1.Indicator, ($$anchor, ArkCheckbox_Indicator) => {
 										ArkCheckbox_Indicator($$anchor, {
 											children: ($$anchor, $$slotProps) => {
-												var svg = root$79();
+												var svg = root$76();
 												$.append($$anchor, svg);
 											},
 											$$slots: { default: true }
@@ -2643,7 +3263,7 @@ injectComponentStyle("checkbox-group");
 injectComponentStyle("checkbox");
 //#endregion
 //#region src/components/chip/Chip.svelte
-var rest_excludes$75 = /* @__PURE__ */ new Set([
+var rest_excludes$73 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -2652,10 +3272,10 @@ var rest_excludes$75 = /* @__PURE__ */ new Set([
 	"tone",
 	"variant"
 ]);
-var root$78 = $.from_html(`<span> </span>`);
+var root$75 = $.from_html(`<span> </span>`);
 function Chip$1($$anchor, $$props) {
-	let tone = $.prop($$props, "tone", 3, "ink"), variant = $.prop($$props, "variant", 3, "solid"), rest = $.rest_props($$props, rest_excludes$75);
-	var span = root$78();
+	let tone = $.prop($$props, "tone", 3, "ink"), variant = $.prop($$props, "variant", 3, "solid"), rest = $.rest_props($$props, rest_excludes$73);
+	var span = root$75();
 	$.attribute_effect(span, () => ({
 		...rest,
 		"data-scope": "chip",
@@ -2718,7 +3338,7 @@ const row$1 = ($$anchor, entry = $.noop) => {
 			var node_1 = $.child(div);
 			{
 				const asChild = ($$anchor, textProps = $.noop) => {
-					var span = root$77();
+					var span = root$74();
 					$.attribute_effect(span, ($0) => ({
 						...$0,
 						"data-scope": "command",
@@ -2737,7 +3357,7 @@ const row$1 = ($$anchor, entry = $.noop) => {
 			}
 			var node_2 = $.sibling(node_1, 2);
 			var consequent = ($$anchor) => {
-				var span_1 = root_1$17();
+				var span_1 = root_1$16();
 				var text_1 = $.only_child(span_1, true);
 				$.template_effect(() => $.set_text(text_1, entry().hint));
 				$.append($$anchor, span_1);
@@ -2760,13 +3380,13 @@ const row$1 = ($$anchor, entry = $.noop) => {
 	}
 	$.append($$anchor, fragment);
 };
-var root$77 = $.from_html(`<span> </span>`);
-var root_1$17 = $.from_html(`<span data-scope="command" data-part="item-hint"> </span>`);
+var root$74 = $.from_html(`<span> </span>`);
+var root_1$16 = $.from_html(`<span data-scope="command" data-part="item-hint"> </span>`);
 var root_2$12 = $.from_html(`<div><!> <!></div>`);
 var root_3$6 = $.from_html(`<input/>`);
-var root_4$4 = $.from_html(`<div> </div>`);
-var root_5$4 = $.from_html(`<div data-scope="command" data-part="empty"> </div>`);
-var root_6$3 = $.from_html(`<!> <!>`, 1);
+var root_4$5 = $.from_html(`<div> </div>`);
+var root_5$5 = $.from_html(`<div data-scope="command" data-part="empty"> </div>`);
+var root_6$4 = $.from_html(`<!> <!>`, 1);
 var root_7$3 = $.from_html(`<div><!></div>`);
 function Command$1($$anchor, $$props) {
 	$.push($$props, true);
@@ -2829,7 +3449,7 @@ function Command$1($$anchor, $$props) {
 			children: ($$anchor, $$slotProps) => {
 				Portal($$anchor, {
 					children: ($$anchor, $$slotProps) => {
-						var fragment_3 = root_6$3();
+						var fragment_3 = root_6$4();
 						var node_4 = $.first_child(fragment_3);
 						$.component(node_4, () => Dialog$1.Backdrop, ($$anchor, ArkDialog_Backdrop) => {
 							ArkDialog_Backdrop($$anchor, {});
@@ -2870,7 +3490,7 @@ function Command$1($$anchor, $$props) {
 												onInputValueChange: onFieldInput,
 												onValueChange: pick,
 												children: ($$anchor, $$slotProps) => {
-													var fragment_4 = root_6$3();
+													var fragment_4 = root_6$4();
 													var node_8 = $.first_child(fragment_4);
 													{
 														const asChild = ($$anchor, inputProps = $.noop) => {
@@ -2929,7 +3549,7 @@ function Command$1($$anchor, $$props) {
 																			var node_14 = $.child(div_4);
 																			{
 																				const asChild = ($$anchor, labelProps = $.noop) => {
-																					var div_5 = root_4$4();
+																					var div_5 = root_4$5();
 																					$.attribute_effect(div_5, ($0) => ({
 																						...$0,
 																						"data-scope": "command",
@@ -2970,7 +3590,7 @@ function Command$1($$anchor, $$props) {
 															});
 															var node_16 = $.sibling(node_10, 2);
 															var consequent_2 = ($$anchor) => {
-																var div_6 = root_5$4();
+																var div_6 = root_5$5();
 																var text_3 = $.only_child(div_6, true);
 																$.template_effect(() => $.set_text(text_3, emptyText()));
 																$.append($$anchor, div_6);
@@ -3038,7 +3658,7 @@ injectComponentStyle("command");
 injectComponentStyle("dialog");
 //#endregion
 //#region src/components/comment/Comment.svelte
-var rest_excludes$74 = /* @__PURE__ */ new Set([
+var rest_excludes$72 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -3048,15 +3668,15 @@ var rest_excludes$74 = /* @__PURE__ */ new Set([
 	"actions",
 	"children"
 ]);
-var root$76 = $.from_html(`<div data-scope="comment" data-part="avatar"><!></div>`);
-var root_1$16 = $.from_html(`<span data-scope="comment" data-part="author"> </span>`);
+var root$73 = $.from_html(`<div data-scope="comment" data-part="avatar"><!></div>`);
+var root_1$15 = $.from_html(`<span data-scope="comment" data-part="author"> </span>`);
 var root_2$11 = $.from_html(`<time data-scope="comment" data-part="datetime"> </time>`);
 var root_3$5 = $.from_html(`<header data-scope="comment" data-part="header"><!> <!></header>`);
-var root_4$3 = $.from_html(`<div data-scope="comment" data-part="actions"><!></div>`);
-var root_5$3 = $.from_html(`<article><!> <div data-scope="comment" data-part="body"><!> <div data-scope="comment" data-part="content"><!></div> <!></div></article>`);
+var root_4$4 = $.from_html(`<div data-scope="comment" data-part="actions"><!></div>`);
+var root_5$4 = $.from_html(`<article><!> <div data-scope="comment" data-part="body"><!> <div data-scope="comment" data-part="content"><!></div> <!></div></article>`);
 function Comment$1($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$74);
-	var article = root_5$3();
+	let rest = $.rest_props($$props, rest_excludes$72);
+	var article = root_5$4();
 	$.attribute_effect(article, () => ({
 		...rest,
 		"data-scope": "comment",
@@ -3064,7 +3684,7 @@ function Comment$1($$anchor, $$props) {
 	}));
 	var node = $.child(article);
 	var consequent = ($$anchor) => {
-		var div = root$76();
+		var div = root$73();
 		var node_1 = $.child(div);
 		$.snippet(node_1, () => $$props.avatar);
 		$.reset(div);
@@ -3079,7 +3699,7 @@ function Comment$1($$anchor, $$props) {
 		var header = root_3$5();
 		var node_3 = $.child(header);
 		var consequent_1 = ($$anchor) => {
-			var span = root_1$16();
+			var span = root_1$15();
 			var text = $.only_child(span, true);
 			$.template_effect(() => $.set_text(text, $$props.author));
 			$.append($$anchor, span);
@@ -3112,7 +3732,7 @@ function Comment$1($$anchor, $$props) {
 	$.reset(div_2);
 	var node_6 = $.sibling(div_2, 2);
 	var consequent_4 = ($$anchor) => {
-		var div_3 = root_4$3();
+		var div_3 = root_4$4();
 		var node_7 = $.child(div_3);
 		$.snippet(node_7, () => $$props.actions);
 		$.reset(div_3);
@@ -3146,7 +3766,7 @@ function useConfig() {
 }
 //#endregion
 //#region src/components/config-provider/ConfigProvider.svelte
-var rest_excludes$73 = /* @__PURE__ */ new Set([
+var rest_excludes$71 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -3157,10 +3777,10 @@ var rest_excludes$73 = /* @__PURE__ */ new Set([
 	"lang",
 	"children"
 ]);
-var root$75 = $.from_html(`<div><!></div>`);
+var root$72 = $.from_html(`<div><!></div>`);
 function ConfigProvider$1($$anchor, $$props) {
 	$.push($$props, true);
-	let rest = $.rest_props($$props, rest_excludes$73);
+	let rest = $.rest_props($$props, rest_excludes$71);
 	provideConfig({
 		get density() {
 			return $$props.density;
@@ -3175,7 +3795,7 @@ function ConfigProvider$1($$anchor, $$props) {
 			return $$props.locale;
 		}
 	});
-	var div = root$75();
+	var div = root$72();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "config-provider",
@@ -3200,7 +3820,7 @@ function ConfigProvider$1($$anchor, $$props) {
 const ConfigProvider = ConfigProvider$1;
 //#endregion
 //#region src/components/container/Container.svelte
-var rest_excludes$72 = /* @__PURE__ */ new Set([
+var rest_excludes$70 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -3208,10 +3828,10 @@ var rest_excludes$72 = /* @__PURE__ */ new Set([
 	"padding",
 	"children"
 ]);
-var root$74 = $.from_html(`<div><!></div>`);
+var root$71 = $.from_html(`<div><!></div>`);
 function Container$1($$anchor, $$props) {
-	let size = $.prop($$props, "size", 3, "readable"), padding = $.prop($$props, "padding", 3, true), rest = $.rest_props($$props, rest_excludes$72);
-	var div = root$74();
+	let size = $.prop($$props, "size", 3, "readable"), padding = $.prop($$props, "padding", 3, true), rest = $.rest_props($$props, rest_excludes$70);
+	var div = root$71();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "container",
@@ -3251,17 +3871,17 @@ const DatePicker = DatePicker$1;
 injectComponentStyle("date-picker");
 //#endregion
 //#region src/components/descriptions/Descriptions.svelte
-var rest_excludes$71 = /* @__PURE__ */ new Set([
+var rest_excludes$69 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"layout",
 	"children"
 ]);
-var root$73 = $.from_html(`<dl><!></dl>`);
+var root$70 = $.from_html(`<dl><!></dl>`);
 function Descriptions$1($$anchor, $$props) {
-	let layout = $.prop($$props, "layout", 3, "horizontal"), rest = $.rest_props($$props, rest_excludes$71);
-	var dl = root$73();
+	let layout = $.prop($$props, "layout", 3, "horizontal"), rest = $.rest_props($$props, rest_excludes$69);
+	var dl = root$70();
 	$.attribute_effect(dl, () => ({
 		...rest,
 		"data-scope": "descriptions",
@@ -3275,16 +3895,16 @@ function Descriptions$1($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/descriptions/DescriptionsDetail.svelte
-var rest_excludes$70 = /* @__PURE__ */ new Set([
+var rest_excludes$68 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$72 = $.from_html(`<dd><!></dd>`);
+var root$69 = $.from_html(`<dd><!></dd>`);
 function DescriptionsDetail($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$70);
-	var dd = root$72();
+	let rest = $.rest_props($$props, rest_excludes$68);
+	var dd = root$69();
 	$.attribute_effect(dd, () => ({
 		...rest,
 		"data-scope": "descriptions",
@@ -3297,16 +3917,16 @@ function DescriptionsDetail($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/descriptions/DescriptionsItem.svelte
-var rest_excludes$69 = /* @__PURE__ */ new Set([
+var rest_excludes$67 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$71 = $.from_html(`<div><!></div>`);
+var root$68 = $.from_html(`<div><!></div>`);
 function DescriptionsItem($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$69);
-	var div = root$71();
+	let rest = $.rest_props($$props, rest_excludes$67);
+	var div = root$68();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "descriptions",
@@ -3319,16 +3939,16 @@ function DescriptionsItem($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/descriptions/DescriptionsTerm.svelte
-var rest_excludes$68 = /* @__PURE__ */ new Set([
+var rest_excludes$66 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$70 = $.from_html(`<dt><!></dt>`);
+var root$67 = $.from_html(`<dt><!></dt>`);
 function DescriptionsTerm($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$68);
-	var dt = root$70();
+	let rest = $.rest_props($$props, rest_excludes$66);
+	var dt = root$67();
 	$.attribute_effect(dt, () => ({
 		...rest,
 		"data-scope": "descriptions",
@@ -3369,39 +3989,6 @@ injectComponentStyle("dialog");
 const Drawer = Drawer$1;
 injectComponentStyle("drawer");
 //#endregion
-//#region src/components/input/Input.svelte
-var rest_excludes$67 = /* @__PURE__ */ new Set([
-	"$$slots",
-	"$$events",
-	"$$legacy",
-	"value",
-	"size",
-	"invalid"
-]);
-var root$69 = $.from_html(`<input/>`);
-function Input$1($$anchor, $$props) {
-	$.push($$props, true);
-	let value = $.prop($$props, "value", 15), size = $.prop($$props, "size", 3, "md"), invalid = $.prop($$props, "invalid", 3, false), rest = $.rest_props($$props, rest_excludes$67);
-	const field = useFieldContext();
-	const fieldProps = $.derived(() => field?.()?.getInputProps() ?? {});
-	var input = root$69();
-	var event_handler = (event) => {
-		value(event.currentTarget.value);
-	};
-	$.attribute_effect(input, () => ({
-		...$.get(fieldProps),
-		...rest,
-		"data-scope": "input",
-		"data-part": "root",
-		"data-size": size(),
-		"data-invalid": invalid() || $.get(fieldProps)["data-invalid"] != null ? "" : void 0,
-		oninput: event_handler
-	}), void 0, void 0, void 0, void 0, true);
-	$.bind_value(input, value);
-	$.append($$anchor, input);
-	$.pop();
-}
-//#endregion
 //#region src/components/input/index.ts
 /** The bare text input, dressed in the field recipe: border, surface,
 * focus halo — no shadow. Inside a Field.Root it picks up the label
@@ -3410,7 +3997,7 @@ const Input = Input$1;
 injectComponentStyle("input");
 //#endregion
 //#region src/components/dynamic-input/DynamicInput.svelte
-var rest_excludes$66 = /* @__PURE__ */ new Set([
+var rest_excludes$65 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -3422,12 +4009,12 @@ var rest_excludes$66 = /* @__PURE__ */ new Set([
 	"disabled",
 	"invalid"
 ]);
-var root$68 = $.from_svg(`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"></path></svg>`);
-var root_1$15 = $.from_html(`<div data-scope="dynamic-input" data-part="row"><!> <!></div>`);
+var root$66 = $.from_svg(`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"></path></svg>`);
+var root_1$14 = $.from_html(`<div data-scope="dynamic-input" data-part="row"><!> <!></div>`);
 var root_2$10 = $.from_html(`<div><!> <div data-scope="dynamic-input" data-part="add"><!></div></div>`);
 function DynamicInput$1($$anchor, $$props) {
 	$.push($$props, true);
-	let value = $.prop($$props, "value", 31, () => $.proxy([""])), min = $.prop($$props, "min", 3, 0), addLabel = $.prop($$props, "addLabel", 3, "Add entry"), disabled = $.prop($$props, "disabled", 3, false), invalid = $.prop($$props, "invalid", 3, false), rest = $.rest_props($$props, rest_excludes$66);
+	let value = $.prop($$props, "value", 31, () => $.proxy([""])), min = $.prop($$props, "min", 3, 0), addLabel = $.prop($$props, "addLabel", 3, "Add entry"), disabled = $.prop($$props, "disabled", 3, false), invalid = $.prop($$props, "invalid", 3, false), rest = $.rest_props($$props, rest_excludes$65);
 	const canRemove = $.derived(() => value().length > Math.max(min(), 1));
 	const canAdd = $.derived(() => $$props.max === void 0 || value().length < $$props.max);
 	function update(index, next) {
@@ -3450,7 +4037,7 @@ function DynamicInput$1($$anchor, $$props) {
 	}));
 	var node = $.child(div);
 	$.each(node, 17, value, $.index, ($$anchor, entry, index) => {
-		var div_1 = root_1$15();
+		var div_1 = root_1$14();
 		var node_1 = $.child(div_1);
 		Input(node_1, {
 			get value() {
@@ -3479,7 +4066,7 @@ function DynamicInput$1($$anchor, $$props) {
 				"aria-label": `Remove entry ${index + 1}`,
 				onclick: () => remove(index),
 				children: ($$anchor, $$slotProps) => {
-					var svg = root$68();
+					var svg = root$66();
 					$.append($$anchor, svg);
 				},
 				$$slots: { default: true }
@@ -3529,18 +4116,18 @@ const Editable = Editable$1;
 injectComponentStyle("editable");
 //#endregion
 //#region src/components/ellipsis/Ellipsis.svelte
-var rest_excludes$65 = /* @__PURE__ */ new Set([
+var rest_excludes$64 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"lines",
 	"children"
 ]);
-var root$67 = $.from_html(`<span><!></span>`);
+var root$65 = $.from_html(`<span><!></span>`);
 function Ellipsis$1($$anchor, $$props) {
-	let lines = $.prop($$props, "lines", 3, 1), rest = $.rest_props($$props, rest_excludes$65);
+	let lines = $.prop($$props, "lines", 3, 1), rest = $.rest_props($$props, rest_excludes$64);
 	const multiline = $.derived(() => lines() > 1);
-	var span = root$67();
+	var span = root$65();
 	$.attribute_effect(span, ($0) => ({
 		...rest,
 		"data-scope": "ellipsis",
@@ -3562,16 +4149,16 @@ const Ellipsis = Ellipsis$1;
 injectComponentStyle("ellipsis");
 //#endregion
 //#region src/components/empty/Empty.svelte
-var rest_excludes$64 = /* @__PURE__ */ new Set([
+var rest_excludes$63 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$66 = $.from_html(`<div><!></div>`);
+var root$64 = $.from_html(`<div><!></div>`);
 function Empty$1($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$64);
-	var div = root$66();
+	let rest = $.rest_props($$props, rest_excludes$63);
+	var div = root$64();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "empty",
@@ -3584,16 +4171,16 @@ function Empty$1($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/empty/EmptyActions.svelte
-var rest_excludes$63 = /* @__PURE__ */ new Set([
+var rest_excludes$62 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$65 = $.from_html(`<div><!></div>`);
+var root$63 = $.from_html(`<div><!></div>`);
 function EmptyActions($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$63);
-	var div = root$65();
+	let rest = $.rest_props($$props, rest_excludes$62);
+	var div = root$63();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "empty",
@@ -3606,16 +4193,16 @@ function EmptyActions($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/empty/EmptyDescription.svelte
-var rest_excludes$62 = /* @__PURE__ */ new Set([
+var rest_excludes$61 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$64 = $.from_html(`<p><!></p>`);
+var root$62 = $.from_html(`<p><!></p>`);
 function EmptyDescription($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$62);
-	var p = root$64();
+	let rest = $.rest_props($$props, rest_excludes$61);
+	var p = root$62();
 	$.attribute_effect(p, () => ({
 		...rest,
 		"data-scope": "empty",
@@ -3628,16 +4215,16 @@ function EmptyDescription($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/empty/EmptyTitle.svelte
-var rest_excludes$61 = /* @__PURE__ */ new Set([
+var rest_excludes$60 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$63 = $.from_html(`<h3><!></h3>`);
+var root$61 = $.from_html(`<h3><!></h3>`);
 function EmptyTitle($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$61);
-	var h3 = root$63();
+	let rest = $.rest_props($$props, rest_excludes$60);
+	var h3 = root$61();
 	$.attribute_effect(h3, () => ({
 		...rest,
 		"data-scope": "empty",
@@ -3650,16 +4237,16 @@ function EmptyTitle($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/empty/EmptyVisual.svelte
-var rest_excludes$60 = /* @__PURE__ */ new Set([
+var rest_excludes$59 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$62 = $.from_html(`<div><!></div>`);
+var root$60 = $.from_html(`<div><!></div>`);
 function EmptyVisual($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$60);
-	var div = root$62();
+	let rest = $.rest_props($$props, rest_excludes$59);
+	var div = root$60();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "empty",
@@ -3710,7 +4297,7 @@ function useFloatButton() {
 }
 //#endregion
 //#region src/components/float-button/FloatButton.svelte
-var rest_excludes$59 = /* @__PURE__ */ new Set([
+var rest_excludes$58 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -3718,10 +4305,10 @@ var rest_excludes$59 = /* @__PURE__ */ new Set([
 	"placement",
 	"children"
 ]);
-var root$61 = $.from_html(`<div><!></div>`);
+var root$59 = $.from_html(`<div><!></div>`);
 function FloatButton$1($$anchor, $$props) {
 	$.push($$props, true);
-	let open = $.prop($$props, "open", 15, false), placement = $.prop($$props, "placement", 3, "bottom-end"), rest = $.rest_props($$props, rest_excludes$59);
+	let open = $.prop($$props, "open", 15, false), placement = $.prop($$props, "placement", 3, "bottom-end"), rest = $.rest_props($$props, rest_excludes$58);
 	setContext(FLOAT_BUTTON_KEY, {
 		get open() {
 			return open();
@@ -3729,7 +4316,7 @@ function FloatButton$1($$anchor, $$props) {
 		toggle: () => open(!open()),
 		close: () => open(false)
 	});
-	var div = root$61();
+	var div = root$59();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "float-button",
@@ -3745,12 +4332,12 @@ function FloatButton$1($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/float-button/FloatButtonItem.svelte
-var root$60 = $.from_html(`<div data-scope="float-button" data-part="item"><!> <span data-scope="float-button" data-part="item-label" aria-hidden="true"> </span></div>`);
+var root$58 = $.from_html(`<div data-scope="float-button" data-part="item"><!> <span data-scope="float-button" data-part="item-label" aria-hidden="true"> </span></div>`);
 function FloatButtonItem($$anchor, $$props) {
 	$.push($$props, true);
 	let disabled = $.prop($$props, "disabled", 3, false);
 	const context = useFloatButton();
-	var div = root$60();
+	var div = root$58();
 	var node = $.child(div);
 	Button(node, {
 		variant: "outline",
@@ -3860,7 +4447,7 @@ function useForm() {
 }
 //#endregion
 //#region src/components/form/Form.svelte
-var rest_excludes$58 = /* @__PURE__ */ new Set([
+var rest_excludes$57 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -3873,7 +4460,7 @@ var rest_excludes$58 = /* @__PURE__ */ new Set([
 	"onError",
 	"children"
 ]);
-var root$59 = $.from_html(`<form><!></form>`);
+var root$57 = $.from_html(`<form><!></form>`);
 function Form$1($$anchor, $$props) {
 	$.push($$props, true);
 	const $state = () => $.store_get($$props.state, "$state", $$stores);
@@ -3882,7 +4469,7 @@ function Form$1($$anchor, $$props) {
 		"input",
 		"change",
 		"blur"
-	]), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes$58);
+	]), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes$57);
 	let errors = $state()(/* @__PURE__ */ new Map());
 	provideForm({
 		errors: () => errors,
@@ -3935,7 +4522,7 @@ function Form$1($$anchor, $$props) {
 		timer = setTimeout(() => void runValidate(), event.type === "input" ? 300 : 0);
 	}
 	var $$exports = { validate };
-	var form = root$59();
+	var form = root$57();
 	$.attribute_effect(form, () => ({
 		...rest,
 		"data-scope": "form",
@@ -3956,7 +4543,7 @@ function Form$1($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/form/FormField.svelte
-var rest_excludes$57 = /* @__PURE__ */ new Set([
+var rest_excludes$56 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -3968,16 +4555,16 @@ var rest_excludes$57 = /* @__PURE__ */ new Set([
 	"disabled",
 	"children"
 ]);
-var root$58 = $.from_html(`<!> <!> <!> <!>`, 1);
-var root_1$14 = $.from_html(`<div><!></div>`);
+var root$56 = $.from_html(`<!> <!> <!> <!>`, 1);
+var root_1$13 = $.from_html(`<div><!></div>`);
 function FormField$1($$anchor, $$props) {
 	$.push($$props, true);
-	let required = $.prop($$props, "required", 3, false), invalid = $.prop($$props, "invalid", 3, false), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes$57);
+	let required = $.prop($$props, "required", 3, false), invalid = $.prop($$props, "invalid", 3, false), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes$56);
 	const form = useForm();
 	const formError = $.derived(() => $$props.name ? form?.errors().get($$props.name) : void 0);
 	const fieldInvalid = $.derived(() => invalid() || $.get(formError) != null);
 	const fieldDisabled = $.derived(() => disabled() || (form?.disabled ?? false));
-	var div = root_1$14();
+	var div = root_1$13();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-form-field": $$props.name
@@ -3995,7 +4582,7 @@ function FormField$1($$anchor, $$props) {
 				return $.get(fieldDisabled);
 			},
 			children: ($$anchor, $$slotProps) => {
-				var fragment = root$58();
+				var fragment = root$56();
 				var node_1 = $.first_child(fragment);
 				var consequent = ($$anchor) => {
 					var fragment_1 = $.comment();
@@ -4077,7 +4664,7 @@ injectComponentStyle("form");
 injectComponentStyle("field");
 //#endregion
 //#region src/components/grid/Grid.svelte
-var rest_excludes$56 = /* @__PURE__ */ new Set([
+var rest_excludes$55 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -4086,7 +4673,7 @@ var rest_excludes$56 = /* @__PURE__ */ new Set([
 	"minChildWidth",
 	"children"
 ]);
-var root$57 = $.from_html(`<div><!></div>`);
+var root$55 = $.from_html(`<div><!></div>`);
 function Grid$1($$anchor, $$props) {
 	/** The same named steps of the space ramp the stack uses — one
 	* vocabulary of distance across the layout primitives. */
@@ -4098,9 +4685,9 @@ function Grid$1($$anchor, $$props) {
 		lg: "var(--bs-gap-lg)",
 		xl: "var(--bs-gap-xl)"
 	};
-	let columns = $.prop($$props, "columns", 3, 12), gap = $.prop($$props, "gap", 3, "md"), rest = $.rest_props($$props, rest_excludes$56);
+	let columns = $.prop($$props, "columns", 3, 12), gap = $.prop($$props, "gap", 3, "md"), rest = $.rest_props($$props, rest_excludes$55);
 	const gapValue = $.derived(() => gapVars[gap()] ?? gapVars.md);
-	var div = root$57();
+	var div = root$55();
 	$.attribute_effect(div, ($0) => ({
 		...rest,
 		"data-scope": "grid",
@@ -4140,7 +4727,7 @@ const HoverCard = HoverCard$1;
 injectComponentStyle("hover-card");
 //#endregion
 //#region src/components/icon/Icon.svelte
-var rest_excludes$55 = /* @__PURE__ */ new Set([
+var rest_excludes$54 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -4148,10 +4735,10 @@ var rest_excludes$55 = /* @__PURE__ */ new Set([
 	"label",
 	"children"
 ]);
-var root$56 = $.from_html(`<span><!></span>`);
+var root$54 = $.from_html(`<span><!></span>`);
 function Icon$1($$anchor, $$props) {
-	let size = $.prop($$props, "size", 3, "inherit"), rest = $.rest_props($$props, rest_excludes$55);
-	var span = root$56();
+	let size = $.prop($$props, "size", 3, "inherit"), rest = $.rest_props($$props, rest_excludes$54);
+	var span = root$54();
 	$.attribute_effect(span, () => ({
 		...rest,
 		role: $$props.label != null ? "img" : void 0,
@@ -4175,7 +4762,7 @@ const Icon = Icon$1;
 injectComponentStyle("icon");
 //#endregion
 //#region src/components/image/Image.svelte
-var rest_excludes$54 = /* @__PURE__ */ new Set([
+var rest_excludes$53 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -4185,12 +4772,12 @@ var rest_excludes$54 = /* @__PURE__ */ new Set([
 	"loading",
 	"fallback"
 ]);
-var root$55 = $.from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="1.5"></rect><circle cx="9" cy="10" r="1.5"></circle><path d="m5.5 17.5 4.5-5 3 3.5 2.5-3 3 4.5"></path></svg>`);
-var root_1$13 = $.from_html(`<div data-scope="image" data-part="fallback"><!></div>`);
+var root$53 = $.from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="1.5"></rect><circle cx="9" cy="10" r="1.5"></circle><path d="m5.5 17.5 4.5-5 3 3.5 2.5-3 3 4.5"></path></svg>`);
+var root_1$12 = $.from_html(`<div data-scope="image" data-part="fallback"><!></div>`);
 var root_2$9 = $.from_html(`<figure><img data-scope="image" data-part="img" decoding="async"/> <!></figure>`);
 function Image$1($$anchor, $$props) {
 	$.push($$props, true);
-	let alt = $.prop($$props, "alt", 3, ""), fit = $.prop($$props, "fit", 3, "cover"), loading = $.prop($$props, "loading", 3, "lazy"), rest = $.rest_props($$props, rest_excludes$54);
+	let alt = $.prop($$props, "alt", 3, ""), fit = $.prop($$props, "fit", 3, "cover"), loading = $.prop($$props, "loading", 3, "lazy"), rest = $.rest_props($$props, rest_excludes$53);
 	let state = $.state("loading");
 	$.user_effect(() => {
 		$$props.src;
@@ -4207,7 +4794,7 @@ function Image$1($$anchor, $$props) {
 	var img = $.child(figure);
 	var node = $.sibling(img, 2);
 	var consequent_1 = ($$anchor) => {
-		var div = root_1$13();
+		var div = root_1$12();
 		var node_1 = $.child(div);
 		var consequent = ($$anchor) => {
 			var fragment = $.comment();
@@ -4216,7 +4803,7 @@ function Image$1($$anchor, $$props) {
 			$.append($$anchor, fragment);
 		};
 		var alternate = ($$anchor) => {
-			var svg = root$55();
+			var svg = root$53();
 			$.append($$anchor, svg);
 		};
 		$.if(node_1, ($$render) => {
@@ -4272,7 +4859,7 @@ const tool = ($$anchor, label = $.noop, onclick = $.noop, glyph = $.noop) => {
 			return onclick();
 		},
 		children: ($$anchor, $$slotProps) => {
-			var svg = root$54();
+			var svg = root$52();
 			var node = $.child(svg);
 			$.snippet(node, glyph);
 			$.reset(svg);
@@ -4282,7 +4869,7 @@ const tool = ($$anchor, label = $.noop, onclick = $.noop, glyph = $.noop) => {
 	});
 };
 const zoomIn = ($$anchor) => {
-	var fragment_1 = root_1$12();
+	var fragment_1 = root_1$11();
 	$.next(3);
 	$.append($$anchor, fragment_1);
 };
@@ -4297,17 +4884,17 @@ const turnGlyph = ($$anchor) => {
 	$.append($$anchor, fragment_3);
 };
 const closeGlyph = ($$anchor) => {
-	var fragment_4 = root_4$2();
+	var fragment_4 = root_4$3();
 	$.next();
 	$.append($$anchor, fragment_4);
 };
-var root$54 = $.from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><!></svg>`);
-var root_1$12 = $.from_svg(`<circle cx="11" cy="11" r="7"></circle><path d="m16.2 16.2 4.8 4.8"></path><path d="M8 11h6"></path><path d="M11 8v6"></path>`, 1);
+var root$52 = $.from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><!></svg>`);
+var root_1$11 = $.from_svg(`<circle cx="11" cy="11" r="7"></circle><path d="m16.2 16.2 4.8 4.8"></path><path d="M8 11h6"></path><path d="M11 8v6"></path>`, 1);
 var root_2$8 = $.from_svg(`<circle cx="11" cy="11" r="7"></circle><path d="m16.2 16.2 4.8 4.8"></path><path d="M8 11h6"></path>`, 1);
 var root_3$4 = $.from_svg(`<path d="M20.49 12A8.5 8.5 0 1 1 18 6.06"></path><path d="M20.5 3.5v4h-4"></path>`, 1);
-var root_4$2 = $.from_svg(`<path d="m6 6 12 12"></path><path d="M18 6 6 18"></path>`, 1);
-var root_5$2 = $.from_html(`<!> <!>`, 1);
-var root_6$2 = $.from_html(`<!> <!> <!>`, 1);
+var root_4$3 = $.from_svg(`<path d="m6 6 12 12"></path><path d="M18 6 6 18"></path>`, 1);
+var root_5$3 = $.from_html(`<!> <!>`, 1);
+var root_6$3 = $.from_html(`<!> <!> <!>`, 1);
 var root_7$2 = $.from_html(`<img data-scope="image-viewer" data-part="viewport"/> <div data-scope="image-viewer" data-part="toolbar"><!></div>`, 1);
 function ImageViewer$1($$anchor, $$props) {
 	$.push($$props, true);
@@ -4346,7 +4933,7 @@ function ImageViewer$1($$anchor, $$props) {
 			children: ($$anchor, $$slotProps) => {
 				Portal($$anchor, {
 					children: ($$anchor, $$slotProps) => {
-						var fragment_7 = root_5$2();
+						var fragment_7 = root_5$3();
 						var node_2 = $.first_child(fragment_7);
 						$.component(node_2, () => Dialog$1.Backdrop, ($$anchor, ArkDialog_Backdrop) => {
 							ArkDialog_Backdrop($$anchor, { class: "bs-image-viewer-backdrop" });
@@ -4377,10 +4964,10 @@ function ImageViewer$1($$anchor, $$props) {
 													var node_5 = $.child(div);
 													ButtonGroup(node_5, {
 														children: ($$anchor, $$slotProps) => {
-															var fragment_10 = root_6$2();
+															var fragment_10 = root_6$3();
 															var node_6 = $.first_child(fragment_10);
 															var consequent = ($$anchor) => {
-																var fragment_11 = root_5$2();
+																var fragment_11 = root_5$3();
 																var node_7 = $.first_child(fragment_11);
 																tool(node_7, () => "Zoom in", () => () => zoom(SCALE_STEP), () => zoomIn);
 																var node_8 = $.sibling(node_7, 2);
@@ -4438,16 +5025,16 @@ const ImageViewer = ImageViewer$1;
 injectComponentStyle("image-viewer");
 //#endregion
 //#region src/components/input-group/InputGroup.svelte
-var rest_excludes$53 = /* @__PURE__ */ new Set([
+var rest_excludes$52 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$53 = $.from_html(`<div><!></div>`);
+var root$51 = $.from_html(`<div><!></div>`);
 function InputGroup$1($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$53);
-	var div = root$53();
+	let rest = $.rest_props($$props, rest_excludes$52);
+	var div = root$51();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "input-group",
@@ -4460,16 +5047,16 @@ function InputGroup$1($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/input-group/InputGroupAddon.svelte
-var rest_excludes$52 = /* @__PURE__ */ new Set([
+var rest_excludes$51 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$52 = $.from_html(`<div><!></div>`);
+var root$50 = $.from_html(`<div><!></div>`);
 function InputGroupAddon($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$52);
-	var div = root$52();
+	let rest = $.rest_props($$props, rest_excludes$51);
+	var div = root$50();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "input-group",
@@ -4498,16 +5085,16 @@ const JsonTreeView = JsonTreeView$1;
 injectComponentStyle("json-tree-view");
 //#endregion
 //#region src/components/kbd/Kbd.svelte
-var rest_excludes$51 = /* @__PURE__ */ new Set([
+var rest_excludes$50 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$51 = $.from_html(`<kbd><!></kbd>`);
+var root$49 = $.from_html(`<kbd><!></kbd>`);
 function Kbd$1($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$51);
-	var kbd = root$51();
+	let rest = $.rest_props($$props, rest_excludes$50);
+	var kbd = root$49();
 	$.attribute_effect(kbd, () => ({
 		...rest,
 		"data-scope": "kbd",
@@ -4535,19 +5122,19 @@ function useLayout() {
 }
 //#endregion
 //#region src/components/layout/Layout.svelte
-var rest_excludes$50 = /* @__PURE__ */ new Set([
+var rest_excludes$49 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"sider",
 	"children"
 ]);
-var root$50 = $.from_html(`<div><!></div>`);
+var root$48 = $.from_html(`<div><!></div>`);
 function Layout$1($$anchor, $$props) {
 	$.push($$props, true);
-	let rest = $.rest_props($$props, rest_excludes$50);
+	let rest = $.rest_props($$props, rest_excludes$49);
 	provideLayout({ siderPlacement: () => $$props.sider });
-	var div = root$50();
+	var div = root$48();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "layout",
@@ -4562,16 +5149,16 @@ function Layout$1($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/layout/LayoutContent.svelte
-var rest_excludes$49 = /* @__PURE__ */ new Set([
+var rest_excludes$48 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$49 = $.from_html(`<main><!></main>`);
+var root$47 = $.from_html(`<main><!></main>`);
 function LayoutContent($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$49);
-	var main = root$49();
+	let rest = $.rest_props($$props, rest_excludes$48);
+	var main = root$47();
 	$.attribute_effect(main, () => ({
 		...rest,
 		"data-scope": "layout",
@@ -4584,16 +5171,16 @@ function LayoutContent($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/layout/LayoutFooter.svelte
-var rest_excludes$48 = /* @__PURE__ */ new Set([
+var rest_excludes$47 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$48 = $.from_html(`<footer><!></footer>`);
+var root$46 = $.from_html(`<footer><!></footer>`);
 function LayoutFooter($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$48);
-	var footer = root$48();
+	let rest = $.rest_props($$props, rest_excludes$47);
+	var footer = root$46();
 	$.attribute_effect(footer, () => ({
 		...rest,
 		"data-scope": "layout",
@@ -4606,16 +5193,16 @@ function LayoutFooter($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/layout/LayoutHeader.svelte
-var rest_excludes$47 = /* @__PURE__ */ new Set([
+var rest_excludes$46 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$47 = $.from_html(`<header><!></header>`);
+var root$45 = $.from_html(`<header><!></header>`);
 function LayoutHeader($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$47);
-	var header = root$47();
+	let rest = $.rest_props($$props, rest_excludes$46);
+	var header = root$45();
 	$.attribute_effect(header, () => ({
 		...rest,
 		"data-scope": "layout",
@@ -4628,7 +5215,7 @@ function LayoutHeader($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/layout/LayoutSider.svelte
-var rest_excludes$46 = /* @__PURE__ */ new Set([
+var rest_excludes$45 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -4640,11 +5227,11 @@ var rest_excludes$46 = /* @__PURE__ */ new Set([
 	"maxWidth",
 	"children"
 ]);
-var root$46 = $.from_html(`<div data-scope="layout" data-part="sider-resize" role="separator" aria-orientation="vertical" aria-label="Resize sidebar"></div>`);
-var root_1$11 = $.from_html(`<aside><!> <!></aside>`);
+var root$44 = $.from_html(`<div data-scope="layout" data-part="sider-resize" role="separator" aria-orientation="vertical" aria-label="Resize sidebar"></div>`);
+var root_1$10 = $.from_html(`<aside><!> <!></aside>`);
 function LayoutSider($$anchor, $$props) {
 	$.push($$props, true);
-	let collapsed = $.prop($$props, "collapsed", 11, false), width = $.prop($$props, "width", 15, "16rem"), collapsedWidth = $.prop($$props, "collapsedWidth", 3, "3.5rem"), resizable = $.prop($$props, "resizable", 3, false), minWidth = $.prop($$props, "minWidth", 3, "12rem"), maxWidth = $.prop($$props, "maxWidth", 3, "24rem"), rest = $.rest_props($$props, rest_excludes$46);
+	let collapsed = $.prop($$props, "collapsed", 11, false), width = $.prop($$props, "width", 15, "16rem"), collapsedWidth = $.prop($$props, "collapsedWidth", 3, "3.5rem"), resizable = $.prop($$props, "resizable", 3, false), minWidth = $.prop($$props, "minWidth", 3, "12rem"), maxWidth = $.prop($$props, "maxWidth", 3, "24rem"), rest = $.rest_props($$props, rest_excludes$45);
 	const layout = useLayout();
 	/** One step of the arrow-key resize, in px. */
 	const RESIZE_STEP = 16;
@@ -4682,7 +5269,7 @@ function LayoutSider($$anchor, $$props) {
 		const next = Math.round(current + (widen ? RESIZE_STEP : -16));
 		width(`${next}px`);
 	}
-	var aside = root_1$11();
+	var aside = root_1$10();
 	$.attribute_effect(aside, () => ({
 		...rest,
 		style: $.get(siderStyle),
@@ -4696,7 +5283,7 @@ function LayoutSider($$anchor, $$props) {
 	$.snippet(node, () => $$props.children ?? $.noop, () => ({ collapsed: collapsed() }));
 	var node_1 = $.sibling(node, 2);
 	var consequent = ($$anchor) => {
-		var div = root$46();
+		var div = root$44();
 		$.set_attribute(div, "tabindex", 0);
 		$.template_effect(($0) => {
 			$.set_attribute(div, "data-dragging", $.get(dragging) ? "" : void 0);
@@ -4736,17 +5323,17 @@ const Layout = Object.assign(Layout$1, {
 injectComponentStyle("layout");
 //#endregion
 //#region src/components/link/Link.svelte
-var rest_excludes$45 = /* @__PURE__ */ new Set([
+var rest_excludes$44 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"underline",
 	"children"
 ]);
-var root$45 = $.from_html(`<a><!></a>`);
+var root$43 = $.from_html(`<a><!></a>`);
 function Link$1($$anchor, $$props) {
-	let underline = $.prop($$props, "underline", 3, "hover"), rest = $.rest_props($$props, rest_excludes$45);
-	var a = root$45();
+	let underline = $.prop($$props, "underline", 3, "hover"), rest = $.rest_props($$props, rest_excludes$44);
+	var a = root$43();
 	$.attribute_effect(a, () => ({
 		...rest,
 		"data-scope": "link",
@@ -4766,7 +5353,7 @@ const Link = Link$1;
 injectComponentStyle("link");
 //#endregion
 //#region src/components/list/List.svelte
-var rest_excludes$44 = /* @__PURE__ */ new Set([
+var rest_excludes$43 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -4774,10 +5361,10 @@ var rest_excludes$44 = /* @__PURE__ */ new Set([
 	"hoverable",
 	"children"
 ]);
-var root$44 = $.from_html(`<ul><!></ul>`);
+var root$42 = $.from_html(`<ul><!></ul>`);
 function List$1($$anchor, $$props) {
-	let bordered = $.prop($$props, "bordered", 3, false), hoverable = $.prop($$props, "hoverable", 3, false), rest = $.rest_props($$props, rest_excludes$44);
-	var ul = root$44();
+	let bordered = $.prop($$props, "bordered", 3, false), hoverable = $.prop($$props, "hoverable", 3, false), rest = $.rest_props($$props, rest_excludes$43);
+	var ul = root$42();
 	$.attribute_effect(ul, () => ({
 		...rest,
 		"data-scope": "list",
@@ -4792,16 +5379,16 @@ function List$1($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/list/ListActions.svelte
-var rest_excludes$43 = /* @__PURE__ */ new Set([
+var rest_excludes$42 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$43 = $.from_html(`<div><!></div>`);
+var root$41 = $.from_html(`<div><!></div>`);
 function ListActions($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$43);
-	var div = root$43();
+	let rest = $.rest_props($$props, rest_excludes$42);
+	var div = root$41();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "list",
@@ -4814,7 +5401,7 @@ function ListActions($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/list/ListContent.svelte
-var rest_excludes$42 = /* @__PURE__ */ new Set([
+var rest_excludes$41 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -4822,11 +5409,11 @@ var rest_excludes$42 = /* @__PURE__ */ new Set([
 	"description",
 	"children"
 ]);
-var root$42 = $.from_html(`<div data-scope="list" data-part="title"><!></div>`);
-var root_1$10 = $.from_html(`<div data-scope="list" data-part="description"><!></div>`);
+var root$40 = $.from_html(`<div data-scope="list" data-part="title"><!></div>`);
+var root_1$9 = $.from_html(`<div data-scope="list" data-part="description"><!></div>`);
 var root_2$7 = $.from_html(`<div><!> <!> <!></div>`);
 function ListContent($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$42);
+	let rest = $.rest_props($$props, rest_excludes$41);
 	var div = root_2$7();
 	$.attribute_effect(div, () => ({
 		...rest,
@@ -4835,7 +5422,7 @@ function ListContent($$anchor, $$props) {
 	}));
 	var node = $.child(div);
 	var consequent = ($$anchor) => {
-		var div_1 = root$42();
+		var div_1 = root$40();
 		var node_1 = $.child(div_1);
 		$.snippet(node_1, () => $$props.title);
 		$.reset(div_1);
@@ -4846,7 +5433,7 @@ function ListContent($$anchor, $$props) {
 	});
 	var node_2 = $.sibling(node, 2);
 	var consequent_1 = ($$anchor) => {
-		var div_2 = root_1$10();
+		var div_2 = root_1$9();
 		var node_3 = $.child(div_2);
 		$.snippet(node_3, () => $$props.description);
 		$.reset(div_2);
@@ -4862,16 +5449,16 @@ function ListContent($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/list/ListItem.svelte
-var rest_excludes$41 = /* @__PURE__ */ new Set([
+var rest_excludes$40 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$41 = $.from_html(`<li><!></li>`);
+var root$39 = $.from_html(`<li><!></li>`);
 function ListItem($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$41);
-	var li = root$41();
+	let rest = $.rest_props($$props, rest_excludes$40);
+	var li = root$39();
 	$.attribute_effect(li, () => ({
 		...rest,
 		"data-scope": "list",
@@ -4884,16 +5471,16 @@ function ListItem($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/list/ListLeading.svelte
-var rest_excludes$40 = /* @__PURE__ */ new Set([
+var rest_excludes$39 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$40 = $.from_html(`<div><!></div>`);
+var root$38 = $.from_html(`<div><!></div>`);
 function ListLeading($$anchor, $$props) {
-	let rest = $.rest_props($$props, rest_excludes$40);
-	var div = root$40();
+	let rest = $.rest_props($$props, rest_excludes$39);
+	var div = root$38();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "list",
@@ -4937,7 +5524,7 @@ const Marquee = Marquee$1;
 injectComponentStyle("marquee");
 //#endregion
 //#region src/components/masonry/Masonry.svelte
-var rest_excludes$39 = /* @__PURE__ */ new Set([
+var rest_excludes$38 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -4945,7 +5532,7 @@ var rest_excludes$39 = /* @__PURE__ */ new Set([
 	"gap",
 	"children"
 ]);
-var root$39 = $.from_html(`<div><!></div>`);
+var root$37 = $.from_html(`<div><!></div>`);
 function Masonry$1($$anchor, $$props) {
 	/** The same named steps of the space ramp the stack uses — one
 	* vocabulary of distance across the layout primitives. */
@@ -4957,9 +5544,9 @@ function Masonry$1($$anchor, $$props) {
 		lg: "var(--bs-gap-lg)",
 		xl: "var(--bs-gap-xl)"
 	};
-	let columns = $.prop($$props, "columns", 3, 3), gap = $.prop($$props, "gap", 3, "md"), rest = $.rest_props($$props, rest_excludes$39);
+	let columns = $.prop($$props, "columns", 3, 3), gap = $.prop($$props, "gap", 3, "md"), rest = $.rest_props($$props, rest_excludes$38);
 	const gapValue = $.derived(() => gapVars[gap()] ?? gapVars.md);
-	var div = root$39();
+	var div = root$37();
 	$.attribute_effect(div, ($0) => ({
 		...rest,
 		"data-scope": "masonry",
@@ -4992,19 +5579,19 @@ const Menu = Menu$1;
 injectComponentStyle("menu");
 //#endregion
 //#region src/components/menubar/Menubar.svelte
-var rest_excludes$38 = /* @__PURE__ */ new Set([
+var rest_excludes$37 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"items",
 	"onSelect"
 ]);
-var root$38 = $.from_html(`<button> </button>`);
-var root_1$9 = $.from_html(`<!> <!>`, 1);
+var root$36 = $.from_html(`<button> </button>`);
+var root_1$8 = $.from_html(`<!> <!>`, 1);
 var root_2$6 = $.from_html(`<div></div>`);
 function Menubar$1($$anchor, $$props) {
 	$.push($$props, true);
-	let items = $.prop($$props, "items", 19, () => []), rest = $.rest_props($$props, rest_excludes$38);
+	let items = $.prop($$props, "items", 19, () => []), rest = $.rest_props($$props, rest_excludes$37);
 	var div = root_2$6();
 	$.attribute_effect(div, () => ({
 		...rest,
@@ -5019,11 +5606,11 @@ function Menubar$1($$anchor, $$props) {
 			ArkMenu_Root($$anchor, {
 				positioning: { placement: "bottom-start" },
 				children: ($$anchor, $$slotProps) => {
-					var fragment_1 = root_1$9();
+					var fragment_1 = root_1$8();
 					var node_1 = $.first_child(fragment_1);
 					{
 						const asChild = ($$anchor, props = $.noop) => {
-							var button = root$38();
+							var button = root$36();
 							$.attribute_effect(button, ($0) => ({
 								...$0,
 								type: "button",
@@ -5050,277 +5637,88 @@ function Menubar$1($$anchor, $$props) {
 								ArkMenu_Positioner($$anchor, {
 									children: ($$anchor, $$slotProps) => {
 										var fragment_3 = $.comment();
-										var node_4 = $.first_child(fragment_3);
-										$.component(node_4, () => Menu$1.Content, ($$anchor, ArkMenu_Content) => {
-											ArkMenu_Content($$anchor, {
-												children: ($$anchor, $$slotProps) => {
-													var fragment_4 = $.comment();
-													var node_5 = $.first_child(fragment_4);
-													$.each(node_5, 17, () => $.get(group).items, (entry) => entry.value, ($$anchor, entry) => {
-														var fragment_5 = $.comment();
-														var node_6 = $.first_child(fragment_5);
-														{
-															let $0 = $.derived(() => $.get(entry).danger ? "" : void 0);
-															$.component(node_6, () => Menu$1.Item, ($$anchor, ArkMenu_Item) => {
-																ArkMenu_Item($$anchor, {
-																	get value() {
-																		return $.get(entry).value;
-																	},
-																	get disabled() {
-																		return $.get(entry).disabled;
-																	},
-																	get "data-danger"() {
-																		return $.get($0);
-																	},
-																	onSelect: () => $$props.onSelect?.($.get(entry).value),
-																	children: ($$anchor, $$slotProps) => {
-																		var fragment_6 = $.comment();
-																		var node_7 = $.first_child(fragment_6);
-																		$.component(node_7, () => Menu$1.ItemText, ($$anchor, ArkMenu_ItemText) => {
-																			ArkMenu_ItemText($$anchor, {
-																				children: ($$anchor, $$slotProps) => {
-																					$.next();
-																					var text_1 = $.text();
-																					$.template_effect(() => $.set_text(text_1, $.get(entry).label));
-																					$.append($$anchor, text_1);
-																				},
-																				$$slots: { default: true }
-																			});
-																		});
-																		$.append($$anchor, fragment_6);
-																	},
-																	$$slots: { default: true }
-																});
-															});
-														}
-														$.append($$anchor, fragment_5);
-													});
-													$.append($$anchor, fragment_4);
-												},
-												$$slots: { default: true }
-											});
-										});
-										$.append($$anchor, fragment_3);
-									},
-									$$slots: { default: true }
-								});
-							});
-							$.append($$anchor, fragment_2);
-						},
-						$$slots: { default: true }
-					});
-					$.append($$anchor, fragment_1);
-				},
-				$$slots: { default: true }
-			});
-		});
-		$.append($$anchor, fragment);
-	});
-	$.reset(div);
-	$.append($$anchor, div);
-	$.pop();
-}
-//#endregion
-//#region src/components/menubar/index.ts
-/** A desktop-style menu bar: a row of quiet ghost triggers, each
-* opening the same paper vessel as the menu family. The triggers are
-* our own buttons grafted onto the menu machine's trigger via
-* `asChild` — the machine keeps the trigger element (positioning,
-* focus restore, `data-state`) while the element wears the menubar
-* scope. The popups keep the menu parts untouched, so the menu
-* stylesheet dresses them. */
-const Menubar = Menubar$1;
-injectComponentStyle("menubar");
-injectComponentStyle("menu");
-//#endregion
-//#region src/components/mentions/MentionsVessel.svelte
-var root$37 = $.from_html(`<div data-scope="mentions" data-part="option"> </div>`);
-var root_1$8 = $.from_html(`<div></div>`);
-function MentionsVessel$1($$anchor, $$props) {
-	$.push($$props, true);
-	let open = $.prop($$props, "open", 3, false), matches = $.prop($$props, "matches", 19, () => []), active = $.prop($$props, "active", 3, 0), anchor = $.prop($$props, "anchor", 3, null);
-	var fragment = $.comment();
-	var node = $.first_child(fragment);
-	$.component(node, () => Popover$1.Root, ($$anchor, ArkPopover_Root) => {
-		ArkPopover_Root($$anchor, {
-			get open() {
-				return open();
-			},
-			positioning: {
-				placement: "bottom-start",
-				getAnchorRect: () => anchor()?.getBoundingClientRect() ?? null
-			},
-			onOpenChange: (details) => $$props.onOpenChange?.(details.open),
-			children: ($$anchor, $$slotProps) => {
-				Portal($$anchor, {
-					children: ($$anchor, $$slotProps) => {
-						var fragment_2 = $.comment();
-						var node_1 = $.first_child(fragment_2);
-						$.component(node_1, () => Popover$1.Positioner, ($$anchor, ArkPopover_Positioner) => {
-							ArkPopover_Positioner($$anchor, {
-								children: ($$anchor, $$slotProps) => {
-									var fragment_3 = $.comment();
-									var node_2 = $.first_child(fragment_3);
-									{
-										const asChild = ($$anchor, contentProps = $.noop) => {
-											var div = root_1$8();
-											$.attribute_effect(div, ($0) => ({
-												...$0,
-												"data-scope": "mentions",
-												"data-part": "popup"
-											}), [() => contentProps()()]);
-											$.each(div, 23, matches, (entry) => entry.value, ($$anchor, entry, index) => {
-												var div_1 = root$37();
-												var text = $.only_child(div_1, true);
-												$.template_effect(() => {
-													$.set_attribute(div_1, "data-active", $.get(index) === active() ? "" : void 0);
-													$.set_text(text, $.get(entry).label);
-												});
-												$.event("mouseenter", div_1, () => $$props.onActiveChange?.($.get(index)));
-												$.delegated("mousedown", div_1, (event) => event.preventDefault());
-												$.delegated("click", div_1, () => $$props.onInsert?.($.get(entry)));
-												$.append($$anchor, div_1);
-											});
-											$.reset(div);
-											$.append($$anchor, div);
-										};
-										$.component(node_2, () => Popover$1.Content, ($$anchor, ArkPopover_Content) => {
-											ArkPopover_Content($$anchor, {
-												asChild,
-												$$slots: { asChild: true }
-											});
-										});
-									}
-									$.append($$anchor, fragment_3);
-								},
-								$$slots: { default: true }
-							});
-						});
-						$.append($$anchor, fragment_2);
-					},
-					$$slots: { default: true }
-				});
-			},
-			$$slots: { default: true }
-		});
-	});
-	$.append($$anchor, fragment);
-	$.pop();
-}
-$.delegate(["mousedown", "click"]);
-//#endregion
-//#region src/components/mentions/Mentions.svelte
-var rest_excludes$37 = /* @__PURE__ */ new Set([
-	"$$slots",
-	"$$events",
-	"$$legacy",
-	"items",
-	"value",
-	"trigger",
-	"placeholder",
-	"autoresize",
-	"invalid",
-	"onValueChange"
-]);
-var root$36 = $.from_html(`<div><!> <!></div>`);
-function Mentions$1($$anchor, $$props) {
-	$.push($$props, true);
-	let items = $.prop($$props, "items", 19, () => []), value = $.prop($$props, "value", 15, ""), trigger = $.prop($$props, "trigger", 3, "@"), autoresize = $.prop($$props, "autoresize", 3, false), invalid = $.prop($$props, "invalid", 3, false), rest = $.rest_props($$props, rest_excludes$37);
-	let textareaEl = $.state(null);
-	const mentions = useMentions(() => ({
-		items: items(),
-		trigger: trigger()
-	}), () => $.get(textareaEl), {
-		getText: () => $.get(textareaEl)?.value ?? value(),
-		setText: (next) => {
-			value(next);
-			$$props.onValueChange?.(next);
-		}
-	});
-	function onInput(event) {
-		$$props.onValueChange?.(event.currentTarget.value);
-		mentions.onInput();
-	}
-	var div = root$36();
-	$.attribute_effect(div, () => ({
-		...rest,
-		"data-scope": "mentions",
-		"data-part": "root"
-	}));
-	var node = $.child(div);
-	{
-		let $0 = $.derived(() => invalid() ? "true" : void 0);
-		$.component(node, () => Field.Textarea, ($$anchor, Field_Textarea) => {
-			Field_Textarea($$anchor, {
-				get autoresize() {
-					return autoresize();
-				},
-				rows: 3,
-				get placeholder() {
-					return $$props.placeholder;
-				},
-				get "aria-invalid"() {
-					return $.get($0);
-				},
-				"data-scope": "mentions",
-				"data-part": "textarea",
-				oninput: onInput,
-				get onkeydown() {
-					return mentions.onKeydown;
-				},
-				get ref() {
-					return $.get(textareaEl);
-				},
-				set ref($$value) {
-					$.set(textareaEl, $$value, true);
-				},
-				get value() {
-					return value();
+										var node_4 = $.first_child(fragment_3);
+										$.component(node_4, () => Menu$1.Content, ($$anchor, ArkMenu_Content) => {
+											ArkMenu_Content($$anchor, {
+												children: ($$anchor, $$slotProps) => {
+													var fragment_4 = $.comment();
+													var node_5 = $.first_child(fragment_4);
+													$.each(node_5, 17, () => $.get(group).items, (entry) => entry.value, ($$anchor, entry) => {
+														var fragment_5 = $.comment();
+														var node_6 = $.first_child(fragment_5);
+														{
+															let $0 = $.derived(() => $.get(entry).danger ? "" : void 0);
+															$.component(node_6, () => Menu$1.Item, ($$anchor, ArkMenu_Item) => {
+																ArkMenu_Item($$anchor, {
+																	get value() {
+																		return $.get(entry).value;
+																	},
+																	get disabled() {
+																		return $.get(entry).disabled;
+																	},
+																	get "data-danger"() {
+																		return $.get($0);
+																	},
+																	onSelect: () => $$props.onSelect?.($.get(entry).value),
+																	children: ($$anchor, $$slotProps) => {
+																		var fragment_6 = $.comment();
+																		var node_7 = $.first_child(fragment_6);
+																		$.component(node_7, () => Menu$1.ItemText, ($$anchor, ArkMenu_ItemText) => {
+																			ArkMenu_ItemText($$anchor, {
+																				children: ($$anchor, $$slotProps) => {
+																					$.next();
+																					var text_1 = $.text();
+																					$.template_effect(() => $.set_text(text_1, $.get(entry).label));
+																					$.append($$anchor, text_1);
+																				},
+																				$$slots: { default: true }
+																			});
+																		});
+																		$.append($$anchor, fragment_6);
+																	},
+																	$$slots: { default: true }
+																});
+															});
+														}
+														$.append($$anchor, fragment_5);
+													});
+													$.append($$anchor, fragment_4);
+												},
+												$$slots: { default: true }
+											});
+										});
+										$.append($$anchor, fragment_3);
+									},
+									$$slots: { default: true }
+								});
+							});
+							$.append($$anchor, fragment_2);
+						},
+						$$slots: { default: true }
+					});
+					$.append($$anchor, fragment_1);
 				},
-				set value($$value) {
-					value($$value);
-				}
+				$$slots: { default: true }
 			});
 		});
-	}
-	MentionsVessel$1($.sibling(node, 2), {
-		get open() {
-			return mentions.open;
-		},
-		get matches() {
-			return mentions.matches;
-		},
-		get active() {
-			return mentions.active;
-		},
-		get anchor() {
-			return $.get(textareaEl);
-		},
-		get onInsert() {
-			return mentions.insert;
-		},
-		onActiveChange: (index) => mentions.active = index,
-		onOpenChange: (open) => {
-			if (!open) mentions.close();
-		}
+		$.append($$anchor, fragment);
 	});
 	$.reset(div);
 	$.append($$anchor, div);
 	$.pop();
 }
 //#endregion
-//#region src/components/mentions/index.ts
-/** @-mentions: a plain textarea that, when the text before the caret
-* ends with the trigger character followed by a token, offers the
-* matching candidates in a small anchored vessel; choosing one replaces
-* the token with `trigger + label` and hands the whole text back
-* through `bind:value`. Arrows move, Enter inserts, Escape dismisses. */
-const Mentions = Mentions$1;
-/** The vessel: the candidates themselves as a floating card. Composers
-* that keep their own field anatomy wire it up with `useMentions`
-* directly. */
-const MentionsVessel = MentionsVessel$1;
-injectComponentStyle("mentions");
+//#region src/components/menubar/index.ts
+/** A desktop-style menu bar: a row of quiet ghost triggers, each
+* opening the same paper vessel as the menu family. The triggers are
+* our own buttons grafted onto the menu machine's trigger via
+* `asChild` — the machine keeps the trigger element (positioning,
+* focus restore, `data-state`) while the element wears the menubar
+* scope. The popups keep the menu parts untouched, so the menu
+* stylesheet dresses them. */
+const Menubar = Menubar$1;
+injectComponentStyle("menubar");
+injectComponentStyle("menu");
 //#endregion
 //#region src/components/meter/MeterLabel.svelte
 var rest_excludes$36 = /* @__PURE__ */ new Set([
@@ -6468,6 +6866,7 @@ var rest_excludes$14 = /* @__PURE__ */ new Set([
 	"selectable",
 	"sortable",
 	"filterable",
+	"showToolbar",
 	"tree",
 	"merge",
 	"pinStart",
@@ -6489,15 +6888,18 @@ var root$13 = $.from_html(`<input type="checkbox" aria-label="Select row"/>`);
 var root_1$3 = $.from_html(`<div data-scope="table" data-part="cell-main"><button type="button" data-scope="table" data-part="expander"><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"></path></svg></button> <!></div>`);
 var root_2$2 = $.from_html(`<div><!></div>`);
 var root_3$2 = $.from_html(`<div role="row" data-scope="table" data-part="row"></div>`);
-var root_4$1 = $.from_html(`<div data-scope="table" data-part="toolbar"><input type="search" data-scope="table" data-part="global-filter" aria-label="Filter all columns"/></div>`);
-var root_5$1 = $.from_html(`<div><input type="checkbox" aria-label="Select all rows"/></div>`);
-var root_6$1 = $.from_html(`<input type="text" data-scope="table" data-part="header-filter" placeholder="Filter"/>`);
+var root_4$2 = $.from_html(`<div data-scope="table" data-part="toolbar"><input type="search" data-scope="table" data-part="global-filter" aria-label="Filter all columns"/></div>`);
+var root_5$2 = $.from_html(`<div><input type="checkbox" aria-label="Select all rows"/></div>`);
+var root_6$2 = $.from_html(`<input type="text" data-scope="table" data-part="header-filter" placeholder="Filter"/>`);
 var root_7$1 = $.from_html(`<div><!> <!></div>`);
 var root_8 = $.from_html(`<div data-scope="table" data-part="empty"> </div>`);
 var root_9 = $.from_html(`<div role="rowgroup" data-scope="table" data-part="footer"></div>`);
-var root_10 = $.from_html(`<option> </option>`);
-var root_11 = $.from_html(`<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"> </span></div>`);
-var root_12 = $.from_html(`<div><!> <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"><!> <!></div> <!></div></div> <!></div>`);
+var root_10 = $.from_svg(`<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"></path></svg>`);
+var root_11 = $.from_html(`<!> <!>`, 1);
+var root_12 = $.from_svg(`<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></path></svg>`);
+var root_13 = $.from_html(`<!> <!> <!>`, 1);
+var root_14 = $.from_html(`<div data-scope="table" data-part="pagination"><span data-scope="table" data-part="page-status"> </span> <div data-scope="table" data-part="page-nav"><!> <!></div></div>`);
+var root_15 = $.from_html(`<div><!> <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"><!> <!></div> <!></div></div> <!></div>`);
 function DataTable$1($$anchor, $$props) {
 	$.push($$props, true);
 	const $virtualizer = () => $.store_get(virtualizer, "$virtualizer", $$stores);
@@ -6591,7 +6993,7 @@ function DataTable$1($$anchor, $$props) {
 		$.event("dragend", div, onRowDragEnd);
 		$.append($$anchor, div);
 	};
-	let selectable = $.prop($$props, "selectable", 3, false), sortable = $.prop($$props, "sortable", 3, true), filterable = $.prop($$props, "filterable", 3, false), tree = $.prop($$props, "tree", 3, false), virtual = $.prop($$props, "virtual", 3, false), rowHeight = $.prop($$props, "rowHeight", 3, 40), paginated = $.prop($$props, "paginated", 3, false), pageSize = $.prop($$props, "pageSize", 3, 10), pageSizeOptions = $.prop($$props, "pageSizeOptions", 19, () => [
+	let selectable = $.prop($$props, "selectable", 3, false), sortable = $.prop($$props, "sortable", 3, true), filterable = $.prop($$props, "filterable", 3, false), showToolbar = $.prop($$props, "showToolbar", 3, true), tree = $.prop($$props, "tree", 3, false), virtual = $.prop($$props, "virtual", 3, false), rowHeight = $.prop($$props, "rowHeight", 3, 40), paginated = $.prop($$props, "paginated", 3, false), pageSize = $.prop($$props, "pageSize", 3, 10), pageSizeOptions = $.prop($$props, "pageSizeOptions", 19, () => [
 		10,
 		20,
 		50
@@ -6908,7 +7310,7 @@ function DataTable$1($$anchor, $$props) {
 			...span > 1 ? { "grid-row": `span ${span}` } : {}
 		};
 	}
-	var div_3 = root_12();
+	var div_3 = root_15();
 	$.attribute_effect(div_3, ($0) => ({
 		...rest,
 		"data-scope": "table",
@@ -6918,7 +7320,7 @@ function DataTable$1($$anchor, $$props) {
 	}), [() => `calc(${baseRowHeight()}px * var(--bs-density-scale, 1))`]);
 	var node_4 = $.child(div_3);
 	var consequent_3 = ($$anchor) => {
-		var div_4 = root_4$1();
+		var div_4 = root_4$2();
 		var input_1 = $.child(div_4);
 		$.remove_input_defaults(input_1);
 		$.reset(div_4);
@@ -6930,7 +7332,7 @@ function DataTable$1($$anchor, $$props) {
 		$.append($$anchor, div_4);
 	};
 	$.if(node_4, ($$render) => {
-		if (filterable()) $$render(consequent_3);
+		if (filterable() && showToolbar()) $$render(consequent_3);
 	});
 	var div_5 = $.sibling(node_4, 2);
 	var div_6 = $.child(div_5);
@@ -6944,7 +7346,7 @@ function DataTable$1($$anchor, $$props) {
 			var node_5 = $.first_child(fragment_2);
 			var consequent_4 = ($$anchor) => {
 				const all = $.derived(() => table.getIsAllRowsSelected());
-				var div_9 = root_5$1();
+				var div_9 = root_5$2();
 				$.attribute_effect(div_9, ($0, $1) => ({
 					role: "columnheader",
 					"data-scope": "table",
@@ -6995,11 +7397,11 @@ function DataTable$1($$anchor, $$props) {
 					} });
 				};
 				$.if(node_6, ($$render) => {
-					if (!$.get(header).isPlaceholder) $$render(consequent_5);
+					if (!$.get(header).isPlaceholder && $.get(header).column.columnDef.header !== "") $$render(consequent_5);
 				});
 				var node_7 = $.sibling(node_6, 2);
 				var consequent_6 = ($$anchor) => {
-					var input_3 = root_6$1();
+					var input_3 = root_6$2();
 					$.remove_input_defaults(input_3);
 					$.set_attribute(input_3, "draggable", false);
 					$.template_effect(($0) => {
@@ -7101,45 +7503,247 @@ function DataTable$1($$anchor, $$props) {
 	$.reset(div_5);
 	$.bind_this(div_5, ($$value) => $.set(viewportEl, $$value), () => $.get(viewportEl));
 	var node_14 = $.sibling(div_5, 2);
-	var consequent_11 = ($$anchor) => {
+	var consequent_12 = ($$anchor) => {
 		const pagination = $.derived(() => table.atoms.pagination.get());
-		var div_16 = root_11();
-		var button_1 = $.child(div_16);
-		var button_2 = $.sibling(button_1, 2);
-		var select = $.sibling(button_2, 2);
-		$.each(select, 20, pageSizeOptions, (size) => size, ($$anchor, size) => {
-			var option = root_10();
-			var text_1 = $.only_child(option, true);
-			var option_value = {};
-			$.template_effect(() => {
-				$.set_text(text_1, `${size} / page`);
-				if (option_value !== (option_value = size)) option.value = (option.__value = option_value) ?? "";
+		const sizeItems = $.derived(() => createListCollection({ items: pageSizeOptions().map((size) => ({
+			label: `${size} / page`,
+			value: String(size)
+		})) }));
+		var div_16 = root_14();
+		var span_1 = $.child(div_16);
+		var text_1 = $.only_child(span_1, true);
+		var div_17 = $.sibling(span_1, 2);
+		var node_15 = $.child(div_17);
+		{
+			let $0 = $.derived(() => [String($.get(pagination).pageSize)]);
+			$.component(node_15, () => Select.Root, ($$anchor, ArkSelect_Root) => {
+				ArkSelect_Root($$anchor, {
+					get collection() {
+						return $.get(sizeItems);
+					},
+					get value() {
+						return $.get($0);
+					},
+					onValueChange: (details) => table.setPageSize(Number(details.value[0])),
+					positioning: { placement: "top-start" },
+					children: ($$anchor, $$slotProps) => {
+						var fragment_9 = root_11();
+						var node_16 = $.first_child(fragment_9);
+						$.component(node_16, () => Select.Control, ($$anchor, ArkSelect_Control) => {
+							ArkSelect_Control($$anchor, {
+								children: ($$anchor, $$slotProps) => {
+									var fragment_10 = $.comment();
+									var node_17 = $.first_child(fragment_10);
+									$.component(node_17, () => Select.Trigger, ($$anchor, ArkSelect_Trigger) => {
+										ArkSelect_Trigger($$anchor, {
+											"aria-label": "Rows per page",
+											children: ($$anchor, $$slotProps) => {
+												var fragment_11 = root_11();
+												var node_18 = $.first_child(fragment_11);
+												$.component(node_18, () => Select.ValueText, ($$anchor, ArkSelect_ValueText) => {
+													ArkSelect_ValueText($$anchor, {});
+												});
+												var node_19 = $.sibling(node_18, 2);
+												$.component(node_19, () => Select.Indicator, ($$anchor, ArkSelect_Indicator) => {
+													ArkSelect_Indicator($$anchor, {
+														children: ($$anchor, $$slotProps) => {
+															var svg = root_10();
+															$.append($$anchor, svg);
+														},
+														$$slots: { default: true }
+													});
+												});
+												$.append($$anchor, fragment_11);
+											},
+											$$slots: { default: true }
+										});
+									});
+									$.append($$anchor, fragment_10);
+								},
+								$$slots: { default: true }
+							});
+						});
+						var node_20 = $.sibling(node_16, 2);
+						$.component(node_20, () => Select.Positioner, ($$anchor, ArkSelect_Positioner) => {
+							ArkSelect_Positioner($$anchor, {
+								children: ($$anchor, $$slotProps) => {
+									var fragment_12 = $.comment();
+									var node_21 = $.first_child(fragment_12);
+									$.component(node_21, () => Select.Content, ($$anchor, ArkSelect_Content) => {
+										ArkSelect_Content($$anchor, {
+											children: ($$anchor, $$slotProps) => {
+												var fragment_13 = $.comment();
+												var node_22 = $.first_child(fragment_13);
+												$.each(node_22, 17, () => $.get(sizeItems).items, (item) => item.value, ($$anchor, item) => {
+													var fragment_14 = $.comment();
+													var node_23 = $.first_child(fragment_14);
+													$.component(node_23, () => Select.Item, ($$anchor, ArkSelect_Item) => {
+														ArkSelect_Item($$anchor, {
+															get item() {
+																return $.get(item);
+															},
+															get value() {
+																return $.get(item).value;
+															},
+															children: ($$anchor, $$slotProps) => {
+																var fragment_15 = root_11();
+																var node_24 = $.first_child(fragment_15);
+																$.component(node_24, () => Select.ItemText, ($$anchor, ArkSelect_ItemText) => {
+																	ArkSelect_ItemText($$anchor, {
+																		children: ($$anchor, $$slotProps) => {
+																			$.next();
+																			var text_2 = $.text();
+																			$.template_effect(() => $.set_text(text_2, $.get(item).label));
+																			$.append($$anchor, text_2);
+																		},
+																		$$slots: { default: true }
+																	});
+																});
+																var node_25 = $.sibling(node_24, 2);
+																$.component(node_25, () => Select.ItemIndicator, ($$anchor, ArkSelect_ItemIndicator) => {
+																	ArkSelect_ItemIndicator($$anchor, {
+																		children: ($$anchor, $$slotProps) => {
+																			$.next();
+																			var text_3 = $.text("✓");
+																			$.append($$anchor, text_3);
+																		},
+																		$$slots: { default: true }
+																	});
+																});
+																$.append($$anchor, fragment_15);
+															},
+															$$slots: { default: true }
+														});
+													});
+													$.append($$anchor, fragment_14);
+												});
+												$.append($$anchor, fragment_13);
+											},
+											$$slots: { default: true }
+										});
+									});
+									$.append($$anchor, fragment_12);
+								},
+								$$slots: { default: true }
+							});
+						});
+						$.append($$anchor, fragment_9);
+					},
+					$$slots: { default: true }
+				});
 			});
-			$.append($$anchor, option);
-		});
-		$.reset(select);
-		var select_value;
-		$.init_select(select);
-		var span_1 = $.sibling(select, 2);
-		var text_2 = $.only_child(span_1, true);
+		}
+		var node_26 = $.sibling(node_15, 2);
+		{
+			const glyph = ($$anchor, direction = $.noop) => {
+				var svg_1 = root_12();
+				var path = $.only_child(svg_1);
+				$.template_effect(() => $.set_attribute(path, "d", direction() === "start" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6"));
+				$.append($$anchor, svg_1);
+			};
+			let $0 = $.derived(() => table.getRowCount());
+			let $1 = $.derived(() => $.get(pagination).pageIndex + 1);
+			$.component(node_26, () => Pagination.Root, ($$anchor, ArkPagination_Root) => {
+				ArkPagination_Root($$anchor, {
+					get count() {
+						return $.get($0);
+					},
+					get pageSize() {
+						return $.get(pagination).pageSize;
+					},
+					get page() {
+						return $.get($1);
+					},
+					onPageChange: (details) => table.setPageIndex(details.page - 1),
+					glyph,
+					children: ($$anchor, $$slotProps) => {
+						var fragment_17 = root_13();
+						var node_27 = $.first_child(fragment_17);
+						$.component(node_27, () => Pagination.PrevTrigger, ($$anchor, ArkPagination_PrevTrigger) => {
+							ArkPagination_PrevTrigger($$anchor, {
+								children: ($$anchor, $$slotProps) => {
+									glyph($$anchor, () => "start");
+								},
+								$$slots: { default: true }
+							});
+						});
+						var node_28 = $.sibling(node_27, 2);
+						{
+							const children = ($$anchor, scope = $.noop) => {
+								var fragment_19 = $.comment();
+								var node_29 = $.first_child(fragment_19);
+								$.each(node_29, 19, () => scope().pages, (page, index) => page.type === "ellipsis" ? `e${index}` : page.value, ($$anchor, page, index) => {
+									var fragment_20 = $.comment();
+									var node_30 = $.first_child(fragment_20);
+									var consequent_11 = ($$anchor) => {
+										var fragment_21 = $.comment();
+										var node_31 = $.first_child(fragment_21);
+										$.component(node_31, () => Pagination.Ellipsis, ($$anchor, ArkPagination_Ellipsis) => {
+											ArkPagination_Ellipsis($$anchor, { get index() {
+												return $.get(index);
+											} });
+										});
+										$.append($$anchor, fragment_21);
+									};
+									var alternate_3 = ($$anchor) => {
+										var fragment_22 = $.comment();
+										var node_32 = $.first_child(fragment_22);
+										$.component(node_32, () => Pagination.Item, ($$anchor, ArkPagination_Item) => {
+											ArkPagination_Item($$anchor, {
+												get value() {
+													return $.get(page).value;
+												},
+												children: ($$anchor, $$slotProps) => {
+													$.next();
+													var text_4 = $.text();
+													$.template_effect(($0) => $.set_text(text_4, $0), [() => String($.get(page).value)]);
+													$.append($$anchor, text_4);
+												},
+												$$slots: { default: true }
+											});
+										});
+										$.append($$anchor, fragment_22);
+									};
+									$.if(node_30, ($$render) => {
+										if ($.get(page).type === "ellipsis") $$render(consequent_11);
+										else $$render(alternate_3, -1);
+									});
+									$.append($$anchor, fragment_20);
+								});
+								$.append($$anchor, fragment_19);
+							};
+							$.component(node_28, () => Pagination.Context, ($$anchor, ArkPagination_Context) => {
+								ArkPagination_Context($$anchor, {
+									children,
+									$$slots: { default: true }
+								});
+							});
+						}
+						var node_33 = $.sibling(node_28, 2);
+						$.component(node_33, () => Pagination.NextTrigger, ($$anchor, ArkPagination_NextTrigger) => {
+							ArkPagination_NextTrigger($$anchor, {
+								children: ($$anchor, $$slotProps) => {
+									glyph($$anchor, () => "end");
+								},
+								$$slots: { default: true }
+							});
+						});
+						$.append($$anchor, fragment_17);
+					},
+					$$slots: {
+						glyph: true,
+						default: true
+					}
+				});
+			});
+		}
+		$.reset(div_17);
 		$.reset(div_16);
-		$.template_effect(($0, $1, $2) => {
-			button_1.disabled = $0;
-			button_2.disabled = $1;
-			if (select_value !== (select_value = $.get(pagination).pageSize)) select.value = (select.__value = select_value) ?? "", $.select_option(select, select_value);
-			$.set_text(text_2, $2);
-		}, [
-			() => !table.getCanPreviousPage(),
-			() => !table.getCanNextPage(),
-			() => `Page ${$.get(pagination).pageIndex + 1} of ${table.getPageCount()} · ${table.getRowCount()} rows`
-		]);
-		$.delegated("click", button_1, () => table.previousPage());
-		$.delegated("click", button_2, () => table.nextPage());
-		$.delegated("change", select, (e) => table.setPageSize(Number(e.currentTarget.value)));
+		$.template_effect(($0) => $.set_text(text_1, $0), [() => `${table.getRowCount()} rows`]);
 		$.append($$anchor, div_16);
 	};
 	$.if(node_14, ($$render) => {
-		if (paginated()) $$render(consequent_11);
+		if (paginated()) $$render(consequent_12);
 	});
 	$.reset(div_3);
 	$.template_effect(($0) => {
@@ -7518,14 +8122,14 @@ var root$1 = $.from_html(`<div data-scope="transfer" data-part="search"><!></div
 var root_1$2 = $.from_html(`<p data-scope="transfer" data-part="empty">Nothing here</p>`);
 var root_2$1 = $.from_svg(`<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"></path></svg>`);
 var root_3$1 = $.from_html(`<!> <!> <!>`, 1);
-var root_4 = $.from_html(`<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"><!></div></div>`);
-var root_5 = $.from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14m-6-6 6 6-6 6"></path></svg>`);
-var root_6 = $.from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5m6-6-6 6 6 6"></path></svg>`);
+var root_4$1 = $.from_html(`<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"><!></div></div>`);
+var root_5$1 = $.from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14m-6-6 6 6-6 6"></path></svg>`);
+var root_6$1 = $.from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5m6-6-6 6 6 6"></path></svg>`);
 var root_7 = $.from_html(`<div><!> <div data-scope="transfer" data-part="operations"><!> <!></div> <!></div>`);
 function Transfer$1($$anchor, $$props) {
 	$.push($$props, true);
 	const panel = ($$anchor, side = $.noop, title = $.noop, items = $.noop, checked = $.noop) => {
-		var div = root_4();
+		var div = root_4$1();
 		var div_1 = $.child(div);
 		var span = $.child(div_1);
 		var text = $.only_child(span, true);
@@ -7691,7 +8295,7 @@ function Transfer$1($$anchor, $$props) {
 			"aria-label": "Move right",
 			onclick: () => move(true),
 			children: ($$anchor, $$slotProps) => {
-				var svg_1 = root_5();
+				var svg_1 = root_5$1();
 				$.append($$anchor, svg_1);
 			},
 			$$slots: { default: true }
@@ -7710,7 +8314,7 @@ function Transfer$1($$anchor, $$props) {
 			"aria-label": "Move left",
 			onclick: () => move(false),
 			children: ($$anchor, $$slotProps) => {
-				var svg_2 = root_6();
+				var svg_2 = root_6$1();
 				$.append($$anchor, svg_2);
 			},
 			$$slots: { default: true }
@@ -7889,16 +8493,22 @@ var rest_excludes$1 = /* @__PURE__ */ new Set([
 	"value",
 	"data",
 	"placeholder",
+	"filterable",
 	"disabled"
 ]);
 var root = $.from_svg(`<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"></path></svg>`);
 var root_1$1 = $.from_html(`<!> <!>`, 1);
 var root_2 = $.from_html(`<span><!></span>`);
 var root_3 = $.from_html(`<button> <span data-part="chevron" aria-hidden="true"><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"></path></svg></span></button>`);
+var root_4 = $.from_html(`<div data-scope="tree-select" data-part="search"><!></div>`);
+var root_5 = $.from_html(`<p data-scope="tree-select" data-part="empty">Nothing matches</p>`);
+var root_6 = $.from_html(`<!> <div data-scope="tree-select" data-part="body"><!></div>`, 1);
 function TreeSelect$1($$anchor, $$props) {
 	$.push($$props, true);
-	let value = $.prop($$props, "value", 15), placeholder = $.prop($$props, "placeholder", 3, "Select…"), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes$1);
+	let value = $.prop($$props, "value", 15), placeholder = $.prop($$props, "placeholder", 3, "Select…"), filterable = $.prop($$props, "filterable", 3, false), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes$1);
 	let open = $.state(false);
+	let query = $.state("");
+	const filterFns = useFilter({ sensitivity: "base" });
 	const collection = $.derived(() => createTreeCollection$1({
 		nodeToValue: (node) => node.value,
 		nodeToString: (node) => node.label,
@@ -7908,7 +8518,23 @@ function TreeSelect$1($$anchor, $$props) {
 			children: $$props.data
 		}
 	}));
+	const filtering = $.derived(() => filterable() && $.get(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 = $.derived(() => $.get(filtering) ? $.get(collection).filter((node) => filterFns.contains(node.label, $.get(query).trim())) : $.get(collection));
 	const firstLevel = $.derived(() => ($$props.data ?? []).map((node) => node.value));
+	const expandedWhileFiltering = $.derived(() => {
+		if (!$.get(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($.get(visibleCollection).rootNode.children ?? []);
+		return values;
+	});
 	const label = $.derived(() => {
 		let found;
 		const walk = (nodes) => {
@@ -7937,7 +8563,10 @@ function TreeSelect$1($$anchor, $$props) {
 				sameWidth: true,
 				placement: "bottom-start"
 			},
-			onOpenChange: (details) => $.set(open, details.open, true),
+			onOpenChange: (details) => {
+				$.set(open, details.open, true);
+				if (!details.open) $.set(query, "");
+			},
 			children: ($$anchor, $$slotProps) => {
 				var fragment_11 = root_1$1();
 				var node_13 = $.first_child(fragment_11);
@@ -7985,45 +8614,85 @@ function TreeSelect$1($$anchor, $$props) {
 											"data-scope": "tree-select",
 											"data-part": "content",
 											children: ($$anchor, $$slotProps) => {
-												var fragment_14 = $.comment();
+												var fragment_14 = root_6();
 												var node_17 = $.first_child(fragment_14);
-												{
-													let $0 = $.derived(() => value() ? [value()] : []);
-													$.component(node_17, () => TreeView$1.Root, ($$anchor, ArkTreeView_Root) => {
-														ArkTreeView_Root($$anchor, {
-															get collection() {
-																return $.get(collection);
-															},
-															selectionMode: "single",
-															get selectedValue() {
-																return $.get($0);
-															},
-															get defaultExpandedValue() {
-																return $.get(firstLevel);
-															},
-															onSelectionChange: pick,
-															children: ($$anchor, $$slotProps) => {
-																var fragment_15 = $.comment();
-																var node_18 = $.first_child(fragment_15);
-																$.component(node_18, () => TreeView$1.Tree, ($$anchor, ArkTreeView_Tree) => {
-																	ArkTreeView_Tree($$anchor, {
-																		children: ($$anchor, $$slotProps) => {
-																			var fragment_16 = $.comment();
-																			var node_19 = $.first_child(fragment_16);
-																			$.each(node_19, 19, () => $.get(collection).rootNode.children ?? [], (node) => node.value, ($$anchor, node, index) => {
-																				row($$anchor, () => $.get(node), () => [$.get(index)]);
-																			});
-																			$.append($$anchor, fragment_16);
-																		},
-																		$$slots: { default: true }
+												var consequent_1 = ($$anchor) => {
+													var div = root_4();
+													Input$1($.child(div), {
+														size: "sm",
+														placeholder: "Filter…",
+														"aria-label": "Filter options",
+														get value() {
+															return $.get(query);
+														},
+														set value($$value) {
+															$.set(query, $$value, true);
+														}
+													});
+													$.reset(div);
+													$.append($$anchor, div);
+												};
+												$.if(node_17, ($$render) => {
+													if (filterable()) $$render(consequent_1);
+												});
+												var div_1 = $.sibling(node_17, 2);
+												var node_19 = $.child(div_1);
+												var consequent_2 = ($$anchor) => {
+													var p = root_5();
+													$.append($$anchor, p);
+												};
+												var alternate_1 = ($$anchor) => {
+													var fragment_15 = $.comment();
+													var node_20 = $.first_child(fragment_15);
+													{
+														let $0 = $.derived(() => value() ? [value()] : []);
+														let $1 = $.derived(() => $.get(filtering) ? $.get(expandedWhileFiltering) : void 0);
+														let $2 = $.derived(() => $.get(filtering) ? void 0 : $.get(firstLevel));
+														$.component(node_20, () => TreeView$1.Root, ($$anchor, ArkTreeView_Root) => {
+															ArkTreeView_Root($$anchor, {
+																get collection() {
+																	return $.get(visibleCollection);
+																},
+																selectionMode: "single",
+																get selectedValue() {
+																	return $.get($0);
+																},
+																get expandedValue() {
+																	return $.get($1);
+																},
+																get defaultExpandedValue() {
+																	return $.get($2);
+																},
+																onSelectionChange: pick,
+																children: ($$anchor, $$slotProps) => {
+																	var fragment_16 = $.comment();
+																	var node_21 = $.first_child(fragment_16);
+																	$.component(node_21, () => TreeView$1.Tree, ($$anchor, ArkTreeView_Tree) => {
+																		ArkTreeView_Tree($$anchor, {
+																			children: ($$anchor, $$slotProps) => {
+																				var fragment_17 = $.comment();
+																				var node_22 = $.first_child(fragment_17);
+																				$.each(node_22, 19, () => $.get(visibleCollection).rootNode.children ?? [], (node) => node.value, ($$anchor, node, index) => {
+																					row($$anchor, () => $.get(node), () => [$.get(index)]);
+																				});
+																				$.append($$anchor, fragment_17);
+																			},
+																			$$slots: { default: true }
+																		});
 																	});
-																});
-																$.append($$anchor, fragment_15);
-															},
-															$$slots: { default: true }
+																	$.append($$anchor, fragment_16);
+																},
+																$$slots: { default: true }
+															});
 														});
-													});
-												}
+													}
+													$.append($$anchor, fragment_15);
+												};
+												$.if(node_19, ($$render) => {
+													if (($.get(visibleCollection).rootNode.children ?? []).length === 0) $$render(consequent_2);
+													else $$render(alternate_1, -1);
+												});
+												$.reset(div_1);
 												$.append($$anchor, fragment_14);
 											},
 											$$slots: { default: true }