@bysages/svelte 0.2.0 → 0.2.2

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { t as useMentions } from "./use-mentions-DeF_38di.mjs";
+import { C as DateInputRoot, D as CheckboxRoot, E as ClipboardRoot, O as AngleSliderRoot, S as DatePickerRoot, T as ColorPickerRoot, _ as MenuRoot, a as SwitchRoot, b as FileUploadRoot, c as SelectRoot, d as RadioGroupRoot, f as ProgressRoot, g as NumberInputRoot, h as PaginationRoot, i as TabsRoot, k as useMentions, l as SegmentGroupRoot, m as PasswordInputRoot, n as ToggleGroupRoot, o as StepsRoot, p as PinInputRoot, r as TagsInputRoot, s as SliderRoot, t as TreeViewRoot, u as RatingGroupRoot, v as MenuContent, w as ComboboxRoot, x as EditableRoot, y as ListboxRoot } from "./TreeViewRoot-CWHR4O1k.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { Accordion as Accordion$1 } from "@ark-ui/svelte/accordion";
 import "svelte/internal/disclose-version";
@@ -11,7 +11,7 @@ import { Collapsible as Collapsible$1 } from "@ark-ui/svelte/collapsible";
 import "svelte/internal/flags/legacy";
 import { renderHtml } from "@tanstack/markdown/html";
 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 { createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, useAsyncList, useListCollection, useListCollection as useListCollection$1, useListSelection } from "@ark-ui/svelte/collection";
 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";
@@ -37,6 +37,7 @@ import { Format as Format$1 } from "@ark-ui/svelte/format";
 import { Frame as Frame$1 } from "@ark-ui/svelte/frame";
 import { Highlight as Highlight$1 } from "@ark-ui/svelte/highlight";
 import { HoverCard as HoverCard$1 } from "@ark-ui/svelte/hover-card";
+import { getIcon } from "@bysages/icons";
 import { ImageCropper as ImageCropper$1 } from "@ark-ui/svelte/image-cropper";
 import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/svelte/json-tree-view";
 import { Listbox as Listbox$1 } from "@ark-ui/svelte/listbox";
@@ -54,7 +55,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, createListCollection } from "@ark-ui/svelte/select";
+import { Select as Select$1, createListCollection as createListCollection$1 } 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";
@@ -244,10 +245,10 @@ 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>`);
+var root_1$27 = $.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);
+	let open = $.prop($$props, "open", 3, false), matches = $.prop($$props, "matches", 19, () => []), active = $.prop($$props, "active", 3, 0), anchor = $.prop($$props, "anchor", 3, null), size = $.prop($$props, "size", 3, "md");
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 	$.component(node, () => Popover$1.Root, ($$anchor, ArkPopover_Root) => {
@@ -272,11 +273,12 @@ function MentionsVessel$1($$anchor, $$props) {
 									var node_2 = $.first_child(fragment_3);
 									{
 										const asChild = ($$anchor, contentProps = $.noop) => {
-											var div = root_1$26();
+											var div = root_1$27();
 											$.attribute_effect(div, ($0) => ({
 												...$0,
 												"data-scope": "mentions",
-												"data-part": "popup"
+												"data-part": "popup",
+												"data-size": size()
 											}), [() => contentProps()()]);
 											$.each(div, 23, matches, (entry) => entry.value, ($$anchor, entry, index) => {
 												var div_1 = root$123();
@@ -329,12 +331,13 @@ var rest_excludes$122 = /* @__PURE__ */ new Set([
 	"placeholder",
 	"autoresize",
 	"invalid",
+	"size",
 	"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 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), size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes$122);
 	let textareaEl = $.state(null);
 	const mentions = useMentions(() => ({
 		items: items(),
@@ -354,7 +357,8 @@ function Mentions$1($$anchor, $$props) {
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "mentions",
-		"data-part": "root"
+		"data-part": "root",
+		"data-size": size()
 	}));
 	var node = $.child(div);
 	{
@@ -405,6 +409,9 @@ function Mentions$1($$anchor, $$props) {
 		get anchor() {
 			return $.get(textareaEl);
 		},
+		get size() {
+			return size();
+		},
 		get onInsert() {
 			return mentions.insert;
 		},
@@ -451,7 +458,7 @@ var rest_excludes$121 = /* @__PURE__ */ new Set([
 	"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_1$26 = $.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>`);
@@ -493,7 +500,7 @@ function AiPromptInput$1($$anchor, $$props) {
 						return $.get($0);
 					},
 					children: ($$anchor, $$slotProps) => {
-						var svg_1 = root_1$25();
+						var svg_1 = root_1$26();
 						$.append($$anchor, svg_1);
 					},
 					$$slots: { default: true }
@@ -717,7 +724,7 @@ var rest_excludes$120 = /* @__PURE__ */ new Set([
 	"children"
 ]);
 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_1$25 = $.from_html(`<div data-scope="ai" data-part="reasoning-content"><!></div>`);
 var root_2$18 = $.from_html(`<!> <!>`, 1);
 function AiReasoning$1($$anchor, $$props) {
 	let label = $.prop($$props, "label", 3, "Thinking"), rest = $.rest_props($$props, rest_excludes$120);
@@ -754,7 +761,7 @@ function AiReasoning$1($$anchor, $$props) {
 				$.component(node_3, () => Collapsible.Content, ($$anchor, Collapsible_Content) => {
 					Collapsible_Content($$anchor, {
 						children: ($$anchor, $$slotProps) => {
-							var div = root_1$24();
+							var div = root_1$25();
 							var node_4 = $.child(div);
 							$.snippet(node_4, () => $$props.children ?? $.noop);
 							$.reset(div);
@@ -834,6 +841,45 @@ async function clickCodeCopy(event, copyLabel, copiedLabel) {
 	}, REVERT_MS);
 }
 //#endregion
+//#region src/components/ai-response/tables.ts
+/** Wide tables ride a scrolling lane instead of bursting the column.
+* The lane is a plain div: the table-as-scroll-container form is what
+* ate the mouse wheel over plain tables. Idempotent, so it can run
+* after every stream patch. */
+const lanes = /* @__PURE__ */ new Set();
+let laneObserver;
+/** A lane's verdict must follow its box — the panel around it can
+* resize at any moment, so each lane stays observed and re-decided
+* whenever its width changes. */
+function watchLane(lane) {
+	if (lanes.has(lane)) return;
+	lanes.add(lane);
+	laneObserver ??= new ResizeObserver(() => {
+		for (const lane of lanes) {
+			if (!lane.isConnected) {
+				laneObserver.unobserve(lane);
+				lanes.delete(lane);
+				continue;
+			}
+			lane.toggleAttribute("data-scrollable", lane.scrollWidth > lane.clientWidth);
+		}
+	});
+	laneObserver.observe(lane);
+}
+function wrapResponseTables(root) {
+	for (const table of root.querySelectorAll("table")) {
+		if (table.parentElement?.hasAttribute("data-table-scroll")) continue;
+		const lane = document.createElement("div");
+		lane.setAttribute("data-table-scroll", "");
+		table.replaceWith(lane);
+		lane.append(table);
+	}
+	for (const lane of root.querySelectorAll("[data-table-scroll]")) {
+		lane.toggleAttribute("data-scrollable", lane.scrollWidth > lane.clientWidth);
+		watchLane(lane);
+	}
+}
+//#endregion
 //#region src/components/ai-response/AiResponse.svelte
 var rest_excludes$119 = /* @__PURE__ */ new Set([
 	"$$slots",
@@ -845,7 +891,7 @@ var rest_excludes$119 = /* @__PURE__ */ new Set([
 	"copiedLabel",
 	"onclick"
 ]);
-var root_1$23 = $.from_html(`<div></div>`);
+var root_1$24 = $.from_html(`<div></div>`);
 function AiResponse$1($$anchor, $$props) {
 	$.push($$props, true);
 	let copyLabel = $.prop($$props, "copyLabel", 3, "Copy code"), copiedLabel = $.prop($$props, "copiedLabel", 3, "Copied"), rest = $.rest_props($$props, rest_excludes$119);
@@ -854,12 +900,13 @@ function AiResponse$1($$anchor, $$props) {
 	$.user_effect(() => {
 		$.get(html);
 		if (root) decorateCodeCopy(root, copyLabel());
+		if (root) wrapResponseTables(root);
 	});
 	const handleClick = (event) => {
 		clickCodeCopy(event, copyLabel(), copiedLabel());
 		$$props.onclick?.(event);
 	};
-	var div = root_1$23();
+	var div = root_1$24();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "ai",
@@ -992,7 +1039,7 @@ var rest_excludes$115 = /* @__PURE__ */ new Set([
 	"output"
 ]);
 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_1$23 = $.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$8 = $.from_html(`<div data-scope="ai" data-part="tool-body"><!> <!></div>`);
@@ -1014,7 +1061,7 @@ function AiTool$1($$anchor, $$props) {
 				$.component(node_1, () => Collapsible.Trigger, ($$anchor, Collapsible_Trigger) => {
 					Collapsible_Trigger($$anchor, {
 						children: ($$anchor, $$slotProps) => {
-							var fragment_2 = root_1$22();
+							var fragment_2 = root_1$23();
 							var span = $.first_child(fragment_2);
 							var text = $.only_child(span, true);
 							var node_2 = $.sibling(span, 2);
@@ -1219,7 +1266,7 @@ var rest_excludes$110 = /* @__PURE__ */ new Set([
 	"onRemove"
 ]);
 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_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_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) {
@@ -1266,7 +1313,7 @@ function Attachment$1($$anchor, $$props) {
 	};
 	var d = $.derived(() => isImage($$props.name));
 	var alternate = ($$anchor) => {
-		var svg_1 = root_1$21();
+		var svg_1 = root_1$22();
 		$.append($$anchor, svg_1);
 	};
 	$.if(node, ($$render) => {
@@ -1473,12 +1520,13 @@ var rest_excludes$103 = /* @__PURE__ */ new Set([
 	"value",
 	"items",
 	"placeholder",
+	"size",
 	"filter"
 ]);
 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);
+	let value = $.prop($$props, "value", 15, ""), items = $.prop($$props, "items", 19, () => []), size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes$103);
 	const { collection, filter: filterItems } = useListCollection$1({
 		initialItems: items(),
 		filter: (item, input) => $$props.filter ? $$props.filter(item, input) : item.toLowerCase().includes(input.toLowerCase())
@@ -1490,6 +1538,9 @@ function AutoComplete$1($$anchor, $$props) {
 			get collection() {
 				return collection;
 			},
+			get "data-size"() {
+				return size();
+			},
 			get inputValue() {
 				return value();
 			},
@@ -1612,7 +1663,10 @@ injectComponentStyle("combobox");
 * the thumb sweeps as a pigment needle over hairline degree ticks. The API
 * is Ark's own — Root, Label, ValueText, Control, Thumb, MarkerGroup,
 * Marker, HiddenInput. */
-const AngleSlider = AngleSlider$1;
+const AngleSlider = {
+	...AngleSlider$1,
+	Root: AngleSliderRoot
+};
 injectComponentStyle("angle-slider");
 //#endregion
 //#region src/components/aspect-ratio/AspectRatio.svelte
@@ -1688,6 +1742,7 @@ var rest_excludes$100 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
+	"size",
 	"children"
 ]);
 var root$102 = $.from_html(`<div><!></div>`);
@@ -1697,7 +1752,8 @@ function AvatarGroup$1($$anchor, $$props) {
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "avatar-group",
-		"data-part": "root"
+		"data-part": "root",
+		"data-size": $$props.size
 	}));
 	var node = $.child(div);
 	$.snippet(node, () => $$props.children ?? $.noop);
@@ -1722,7 +1778,7 @@ var rest_excludes$99 = /* @__PURE__ */ new Set([
 	"children"
 ]);
 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>`);
+var root_1$21 = $.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$99);
@@ -1751,7 +1807,7 @@ function BackTop$1($$anchor, $$props) {
 			behavior: reduce ? "auto" : "smooth"
 		});
 	};
-	var div = root_1$20();
+	var div = root_1$21();
 	$.attribute_effect(div, () => ({
 		"data-scope": "back-top",
 		"data-part": "root",
@@ -2293,7 +2349,7 @@ const header = ($$anchor) => {
 				$.component(node_5, () => DatePicker$1.NextTrigger, ($$anchor, ArkDatePicker_NextTrigger) => {
 					ArkDatePicker_NextTrigger($$anchor, {
 						children: ($$anchor, $$slotProps) => {
-							var svg_1 = root_1$19();
+							var svg_1 = root_1$20();
 							$.append($$anchor, svg_1);
 						},
 						$$slots: { default: true }
@@ -2318,7 +2374,7 @@ var rest_excludes$83 = /* @__PURE__ */ new Set([
 	"children"
 ]);
 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_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_2$15 = $.from_html(`<!> <!> <!>`, 1);
 var root_3$8 = $.from_html(`<div data-scope="calendar" data-part="header"><!></div>`);
 var root_4$7 = $.from_html(`<!> <!>`, 1);
@@ -2875,11 +2931,12 @@ var rest_excludes$75 = /* @__PURE__ */ new Set([
 	"placeholder",
 	"highlightTrigger",
 	"filterable",
+	"size",
 	"multiple",
 	"disabled"
 ]);
 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_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_2$14 = $.from_html(`<ul></ul> <!>`, 1);
 var root_3$7 = $.from_html(`<div data-part="search"><!></div>`);
 var root_4$6 = $.from_html(`<p data-part="empty">Nothing matches</p>`);
@@ -2911,7 +2968,7 @@ function CascadeSelect$1($$anchor, $$props) {
 				value: [...valuePath(), $.get(itemValue)]
 			}));
 			const itemState = $.derived(() => $.get(api).getItemState($.get(itemProps)));
-			var li = root_1$18();
+			var li = root_1$19();
 			$.attribute_effect(li, ($0) => ({ ...$0 }), [() => $.get(api).getItemProps($.get(itemProps))]);
 			var span = $.child(li);
 			$.attribute_effect(span, ($0) => ({ ...$0 }), [() => $.get(api).getItemTextProps($.get(itemProps))]);
@@ -2945,7 +3002,7 @@ function CascadeSelect$1($$anchor, $$props) {
 		});
 		$.append($$anchor, fragment);
 	};
-	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);
+	let value = $.prop($$props, "value", 15), placeholder = $.prop($$props, "placeholder", 3, "Select…"), filterable = $.prop($$props, "filterable", 3, false), size = $.prop($$props, "size", 3, "md"), 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({
@@ -3029,7 +3086,8 @@ function CascadeSelect$1($$anchor, $$props) {
 	var div = root_7$4();
 	$.attribute_effect(div, ($0) => ({
 		...rest,
-		...$0
+		...$0,
+		"data-size": size()
 	}), [() => $.get(api).getRootProps()]);
 	var div_1 = $.child(div);
 	$.attribute_effect(div_1, ($0) => ({ ...$0 }), [() => $.get(api).getControlProps()]);
@@ -3056,7 +3114,10 @@ function CascadeSelect$1($$anchor, $$props) {
 			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()]);
+			$.attribute_effect(div_3, ($0) => ({
+				...$0,
+				"data-size": size()
+			}), [() => $.get(api).getContentProps()]);
 			var node_4 = $.child(div_3);
 			var consequent_2 = ($$anchor) => {
 				var div_4 = root_3$7();
@@ -3147,7 +3208,10 @@ injectComponentStyle("carousel");
 * that fills flat with primary ink when ticked, the mark springing into
 * place. The API is Ark's own — Root, Label, Control, Indicator,
 * HiddenInput. */
-const Checkbox = Checkbox$1;
+const Checkbox = {
+	...Checkbox$1,
+	Root: CheckboxRoot
+};
 injectComponentStyle("checkbox");
 //#endregion
 //#region src/components/checkbox-group/CheckboxGroup.svelte
@@ -3158,15 +3222,17 @@ var rest_excludes$74 = /* @__PURE__ */ new Set([
 	"value",
 	"options",
 	"layout",
+	"size",
 	"invalid",
 	"disabled"
 ]);
 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_1$18 = $.from_html(`<!> <!> <!>`, 1);
 var root_2$13 = $.from_html(`<div></div>`);
 function CheckboxGroup$1($$anchor, $$props) {
+	const uid = $.props_id();
 	$.push($$props, true);
-	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);
+	let value = $.prop($$props, "value", 31, () => $.proxy([])), layout = $.prop($$props, "layout", 3, "vertical"), size = $.prop($$props, "size", 3, "md"), 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);
@@ -3190,22 +3256,32 @@ function CheckboxGroup$1($$anchor, $$props) {
 		var fragment = $.comment();
 		var node = $.first_child(fragment);
 		{
-			let $0 = $.derived(() => $.get(selected).has($.get(option).value));
-			let $1 = $.derived(() => $.get(isDisabled) || $.get(option).disabled === true);
+			let $0 = $.derived(() => ({
+				label: `${uid}:${$.get(option).value}:label`,
+				hiddenInput: `${uid}:${$.get(option).value}:input`
+			}));
+			let $1 = $.derived(() => $.get(selected).has($.get(option).value));
+			let $2 = $.derived(() => $.get(isDisabled) || $.get(option).disabled === true);
 			$.component(node, () => Checkbox$1.Root, ($$anchor, ArkCheckbox_Root) => {
 				ArkCheckbox_Root($$anchor, {
-					get checked() {
+					get ids() {
 						return $.get($0);
 					},
+					get checked() {
+						return $.get($1);
+					},
 					get invalid() {
 						return $.get(isInvalid);
 					},
+					get "data-size"() {
+						return size();
+					},
 					get disabled() {
-						return $.get($1);
+						return $.get($2);
 					},
 					onCheckedChange: () => toggle($.get(option).value),
 					children: ($$anchor, $$slotProps) => {
-						var fragment_1 = root_1$17();
+						var fragment_1 = root_1$18();
 						var node_1 = $.first_child(fragment_1);
 						$.component(node_1, () => Checkbox$1.Control, ($$anchor, ArkCheckbox_Control) => {
 							ArkCheckbox_Control($$anchor, {
@@ -3299,7 +3375,10 @@ injectComponentStyle("chip");
 * field beside an icon-sized copy trigger whose ink turns bamboo while the
 * copy is confirmed. The API is Ark's own — Root, Label, Control, Input,
 * Trigger, Indicator, Context, HiddenInput. */
-const Clipboard = Clipboard$1;
+const Clipboard = {
+	...Clipboard$1,
+	Root: ClipboardRoot
+};
 injectComponentStyle("clipboard");
 //#endregion
 //#region src/components/color-picker/index.ts
@@ -3311,7 +3390,10 @@ injectComponentStyle("clipboard");
 * ChannelSliderValueText, ChannelInput, TransparencyGrid, SwatchGroup,
 * SwatchTrigger, SwatchIndicator, Swatch, EyeDropperTrigger, FormatTrigger,
 * FormatSelect, HiddenInput, Context. */
-const ColorPicker = ColorPicker$1;
+const ColorPicker = {
+	...ColorPicker$1,
+	Root: ColorPickerRoot
+};
 injectComponentStyle("color-picker");
 //#endregion
 //#region src/components/combobox/index.ts
@@ -3320,7 +3402,10 @@ injectComponentStyle("color-picker");
 * checked row taking the flat ink fill. The API is Ark's own — Root, Label,
 * Control, Input, Trigger, ClearTrigger, Positioner, Content, List, Empty,
 * Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel. */
-const Combobox = Combobox$1;
+const Combobox = {
+	...Combobox$1,
+	Root: ComboboxRoot
+};
 injectComponentStyle("combobox");
 //#endregion
 //#region src/components/command/Command.svelte
@@ -3357,7 +3442,7 @@ const row$1 = ($$anchor, entry = $.noop) => {
 			}
 			var node_2 = $.sibling(node_1, 2);
 			var consequent = ($$anchor) => {
-				var span_1 = root_1$16();
+				var span_1 = root_1$17();
 				var text_1 = $.only_child(span_1, true);
 				$.template_effect(() => $.set_text(text_1, entry().hint));
 				$.append($$anchor, span_1);
@@ -3381,7 +3466,7 @@ const row$1 = ($$anchor, entry = $.noop) => {
 	$.append($$anchor, fragment);
 };
 var root$74 = $.from_html(`<span> </span>`);
-var root_1$16 = $.from_html(`<span data-scope="command" data-part="item-hint"> </span>`);
+var root_1$17 = $.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$5 = $.from_html(`<div> </div>`);
@@ -3669,7 +3754,7 @@ var rest_excludes$72 = /* @__PURE__ */ new Set([
 	"children"
 ]);
 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_1$16 = $.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$4 = $.from_html(`<div data-scope="comment" data-part="actions"><!></div>`);
@@ -3699,7 +3784,7 @@ function Comment$1($$anchor, $$props) {
 		var header = root_3$5();
 		var node_3 = $.child(header);
 		var consequent_1 = ($$anchor) => {
-			var span = root_1$15();
+			var span = root_1$16();
 			var text = $.only_child(span, true);
 			$.template_effect(() => $.set_text(text, $$props.author));
 			$.append($$anchor, span);
@@ -3857,7 +3942,10 @@ injectComponentStyle("container");
 * field where the focused segment takes the flat ink fill. The API is
 * Ark's own — Root, Label, Control, SegmentGroup, Segment, SegmentContext,
 * HiddenInput. */
-const DateInput = DateInput$1;
+const DateInput = {
+	...DateInput$1,
+	Root: DateInputRoot
+};
 injectComponentStyle("date-input");
 //#endregion
 //#region src/components/date-picker/index.ts
@@ -3867,7 +3955,10 @@ injectComponentStyle("date-input");
 * Root, Label, Control, Input, Trigger, ClearTrigger, Positioner,
 * Content, View, ViewControl, ViewTrigger, RangeText, PrevTrigger,
 * NextTrigger, Table*, MonthSelect, YearSelect, PresetTrigger. */
-const DatePicker = DatePicker$1;
+const DatePicker = {
+	...DatePicker$1,
+	Root: DatePickerRoot
+};
 injectComponentStyle("date-picker");
 //#endregion
 //#region src/components/descriptions/Descriptions.svelte
@@ -4006,15 +4097,16 @@ var rest_excludes$65 = /* @__PURE__ */ new Set([
 	"max",
 	"placeholder",
 	"addLabel",
+	"size",
 	"disabled",
 	"invalid"
 ]);
 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_1$15 = $.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$65);
+	let value = $.prop($$props, "value", 31, () => $.proxy([""])), min = $.prop($$props, "min", 3, 0), addLabel = $.prop($$props, "addLabel", 3, "Add entry"), size = $.prop($$props, "size", 3, "md"), 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) {
@@ -4037,7 +4129,7 @@ function DynamicInput$1($$anchor, $$props) {
 	}));
 	var node = $.child(div);
 	$.each(node, 17, value, $.index, ($$anchor, entry, index) => {
-		var div_1 = root_1$14();
+		var div_1 = root_1$15();
 		var node_1 = $.child(div_1);
 		Input(node_1, {
 			get value() {
@@ -4052,6 +4144,9 @@ function DynamicInput$1($$anchor, $$props) {
 			get invalid() {
 				return invalid();
 			},
+			get size() {
+				return size();
+			},
 			oninput: (event) => update(index, event.currentTarget.value)
 		});
 		var node_2 = $.sibling(node_1, 2);
@@ -4060,6 +4155,9 @@ function DynamicInput$1($$anchor, $$props) {
 			Button(node_2, {
 				variant: "ghost",
 				square: true,
+				get size() {
+					return size();
+				},
 				get disabled() {
 					return $.get($0);
 				},
@@ -4081,6 +4179,9 @@ function DynamicInput$1($$anchor, $$props) {
 		let $0 = $.derived(() => disabled() || !$.get(canAdd));
 		Button(node_3, {
 			variant: "ghost",
+			get size() {
+				return size();
+			},
 			get disabled() {
 				return $.get($0);
 			},
@@ -4112,7 +4213,10 @@ injectComponentStyle("dynamic-input");
 * reading, the full field recipe while editing. The API is Ark's own —
 * Root, Area, Label, Preview, Input, EditTrigger, SubmitTrigger,
 * CancelTrigger, Control. */
-const Editable = Editable$1;
+const Editable = {
+	...Editable$1,
+	Root: EditableRoot
+};
 injectComponentStyle("editable");
 //#endregion
 //#region src/components/ellipsis/Ellipsis.svelte
@@ -4285,7 +4389,10 @@ injectComponentStyle("fieldset");
 * Dropzone, HiddenInput, ItemGroup, Item, ItemName, ItemSizeText,
 * ItemPreview, ItemPreviewImage, ItemDeleteTrigger, ClearTrigger,
 * Context. */
-const FileUpload = FileUpload$1;
+const FileUpload = {
+	...FileUpload$1,
+	Root: FileUploadRoot
+};
 injectComponentStyle("file-upload");
 //#endregion
 //#region src/components/float-button/context.ts
@@ -4303,16 +4410,18 @@ var rest_excludes$58 = /* @__PURE__ */ new Set([
 	"$$legacy",
 	"open",
 	"placement",
+	"size",
 	"children"
 ]);
 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$58);
+	let open = $.prop($$props, "open", 15, false), placement = $.prop($$props, "placement", 3, "bottom-end"), size = $.prop($$props, "size", 3, "lg"), rest = $.rest_props($$props, rest_excludes$58);
 	setContext(FLOAT_BUTTON_KEY, {
 		get open() {
 			return open();
 		},
+		size: size(),
 		toggle: () => open(!open()),
 		close: () => open(false)
 	});
@@ -4337,30 +4446,40 @@ function FloatButtonItem($$anchor, $$props) {
 	$.push($$props, true);
 	let disabled = $.prop($$props, "disabled", 3, false);
 	const context = useFloatButton();
+	const STEP_DOWN = {
+		lg: "md",
+		md: "sm",
+		sm: "sm"
+	};
 	var div = root$58();
 	var node = $.child(div);
-	Button(node, {
-		variant: "outline",
-		square: true,
-		size: "md",
-		get disabled() {
-			return disabled();
-		},
-		get "aria-label"() {
-			return $$props.label;
-		},
-		onclick: () => {
-			$$props.onclick?.();
-			context?.close();
-		},
-		children: ($$anchor, $$slotProps) => {
-			var fragment = $.comment();
-			var node_1 = $.first_child(fragment);
-			$.snippet(node_1, () => $$props.children ?? $.noop);
-			$.append($$anchor, fragment);
-		},
-		$$slots: { default: true }
-	});
+	{
+		let $0 = $.derived(() => context ? STEP_DOWN[context.size] : "md");
+		Button(node, {
+			variant: "outline",
+			square: true,
+			get size() {
+				return $.get($0);
+			},
+			get disabled() {
+				return disabled();
+			},
+			get "aria-label"() {
+				return $$props.label;
+			},
+			onclick: () => {
+				$$props.onclick?.();
+				context?.close();
+			},
+			children: ($$anchor, $$slotProps) => {
+				var fragment = $.comment();
+				var node_1 = $.first_child(fragment);
+				$.snippet(node_1, () => $$props.children ?? $.noop);
+				$.append($$anchor, fragment);
+			},
+			$$slots: { default: true }
+		});
+	}
 	var span = $.sibling(node, 2);
 	var text = $.only_child(span, true);
 	$.reset(div);
@@ -4374,18 +4493,21 @@ function FloatButtonTrigger($$anchor, $$props) {
 	$.push($$props, true);
 	const context = useFloatButton();
 	{
-		let $0 = $.derived(() => $$props.label || "Actions");
-		let $1 = $.derived(() => context?.open ?? false);
+		let $0 = $.derived(() => context?.size ?? "lg");
+		let $1 = $.derived(() => $$props.label || "Actions");
+		let $2 = $.derived(() => context?.open ?? false);
 		Button($$anchor, {
 			variant: "solid",
 			square: true,
-			size: "lg",
+			get size() {
+				return $.get($0);
+			},
 			onclick: () => context?.toggle(),
 			get "aria-label"() {
-				return $.get($0);
+				return $.get($1);
 			},
 			get "aria-expanded"() {
-				return $.get($1);
+				return $.get($2);
 			},
 			children: ($$anchor, $$slotProps) => {
 				var fragment_1 = $.comment();
@@ -4481,7 +4603,12 @@ function Form$1($$anchor, $$props) {
 		return (issue.path ?? []).map((segment) => typeof segment === "object" ? segment.key : segment).join(".");
 	}
 	let run = 0;
-	async function runValidate() {
+	/** A field owns the issues that live at its name or deeper inside it
+	* ("topics.0" belongs to the "topics" field). */
+	function inScope(name, scope) {
+		return name === scope || name.startsWith(scope + ".");
+	}
+	async function runValidate(scope) {
 		const seq = ++run;
 		const next = /* @__PURE__ */ new Map();
 		if ($$props.validate) for (const error of await $$props.validate($$props.state)) next.set(error.name, error.message);
@@ -4492,6 +4619,13 @@ function Form$1($$anchor, $$props) {
 				if (!next.has(name)) next.set(name, issue.message);
 			}
 		}
+		if (scope != null) {
+			const merged = /* @__PURE__ */ new Map();
+			for (const [name, message] of errors) if (!inScope(name, scope)) merged.set(name, message);
+			for (const [name, message] of next) if (inScope(name, scope)) merged.set(name, message);
+			if (seq === run) errors = merged;
+			return merged;
+		}
 		if (seq === run) errors = next;
 		return next;
 	}
@@ -4518,8 +4652,9 @@ function Form$1($$anchor, $$props) {
 		if (!validateOn().includes(event.type)) return;
 		const target = event.target;
 		if (!target || !("value" in target)) return;
+		const scope = target.closest?.("[data-form-field]")?.getAttribute("data-form-field") ?? void 0;
 		clearTimeout(timer);
-		timer = setTimeout(() => void runValidate(), event.type === "input" ? 300 : 0);
+		timer = setTimeout(() => void runValidate(scope), event.type === "input" ? 300 : 0);
 	}
 	var $$exports = { validate };
 	var form = root$57();
@@ -4556,7 +4691,7 @@ var rest_excludes$56 = /* @__PURE__ */ new Set([
 	"children"
 ]);
 var root$56 = $.from_html(`<!> <!> <!> <!>`, 1);
-var root_1$13 = $.from_html(`<div><!></div>`);
+var root_1$14 = $.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$56);
@@ -4564,7 +4699,7 @@ function FormField$1($$anchor, $$props) {
 	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$13();
+	var div = root_1$14();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-form-field": $$props.name
@@ -4733,12 +4868,17 @@ var rest_excludes$54 = /* @__PURE__ */ new Set([
 	"$$legacy",
 	"size",
 	"label",
+	"name",
 	"children"
 ]);
-var root$54 = $.from_html(`<span><!></span>`);
+var root$54 = $.from_svg(`<svg fill="currentColor" aria-hidden="true"></svg>`);
+var root_1$13 = $.from_html(`<span><!></span>`);
 function Icon$1($$anchor, $$props) {
+	$.push($$props, true);
 	let size = $.prop($$props, "size", 3, "inherit"), rest = $.rest_props($$props, rest_excludes$54);
-	var span = root$54();
+	const glyph = $$props.name && $$props.children == null ? getIcon($$props.name) : void 0;
+	if ($$props.name && $$props.children == null && !glyph) console.error(`[icons] unknown icon name "${$$props.name}" — extend packages/icons/icons.config.json and rerun the generator`);
+	var span = root_1$13();
 	$.attribute_effect(span, () => ({
 		...rest,
 		role: $$props.label != null ? "img" : void 0,
@@ -4749,9 +4889,26 @@ function Icon$1($$anchor, $$props) {
 		"data-size": size()
 	}));
 	var node = $.child(span);
-	$.snippet(node, () => $$props.children ?? $.noop);
+	var consequent = ($$anchor) => {
+		var fragment = $.comment();
+		var node_1 = $.first_child(fragment);
+		$.snippet(node_1, () => $$props.children);
+		$.append($$anchor, fragment);
+	};
+	var consequent_1 = ($$anchor) => {
+		var svg = root$54();
+		$.html(svg, () => glyph.body, true);
+		$.reset(svg);
+		$.template_effect(() => $.set_attribute(svg, "viewBox", `0 0 ${glyph.width ?? 24 ?? ""} ${glyph.height ?? 24 ?? ""}`));
+		$.append($$anchor, svg);
+	};
+	$.if(node, ($$render) => {
+		if ($$props.children) $$render(consequent);
+		else if (glyph) $$render(consequent_1, 1);
+	});
 	$.reset(span);
 	$.append($$anchor, span);
+	$.pop();
 }
 //#endregion
 //#region src/components/icon/index.ts
@@ -5513,7 +5670,10 @@ injectComponentStyle("list");
 * Ark's own — Root, Label, Input, Content, Empty, Item, ItemText,
 * ItemIndicator, ItemGroup, ItemGroupLabel, ValueText, plus
 * createListCollection. */
-const Listbox = Listbox$1;
+const Listbox = {
+	...Listbox$1,
+	Root: ListboxRoot
+};
 injectComponentStyle("listbox");
 //#endregion
 //#region src/components/marquee/index.ts
@@ -5574,8 +5734,14 @@ injectComponentStyle("masonry");
 * elevation, hover as light on the row, checked items as the flat ink fill.
 * The API is Ark's own — Root, Trigger, ContextTrigger, Indicator, Positioner,
 * Content, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel,
-* TriggerItem, Separator, Arrow, ArrowTip. */
-const Menu = Menu$1;
+* TriggerItem, Separator, Arrow, ArrowTip. Ark's namespace is frozen —
+* spread copies the members so Root and Content can be the sized
+* wrappers while the rest stay Ark's own parts. */
+const Menu = {
+	...Menu$1,
+	Root: MenuRoot,
+	Content: MenuContent
+};
 injectComponentStyle("menu");
 //#endregion
 //#region src/components/menubar/Menubar.svelte
@@ -5793,13 +5959,14 @@ var rest_excludes$33 = /* @__PURE__ */ new Set([
 	"max",
 	"level",
 	"label",
+	"size",
 	"children"
 ]);
 var root$32 = $.from_html(`<!> <!> <!>`, 1);
 var root_1$7 = $.from_html(`<div><!></div>`);
 function Meter$1($$anchor, $$props) {
 	$.push($$props, true);
-	let min = $.prop($$props, "min", 3, 0), max = $.prop($$props, "max", 3, 100), level = $.prop($$props, "level", 3, "normal"), rest = $.rest_props($$props, rest_excludes$33);
+	let min = $.prop($$props, "min", 3, 0), max = $.prop($$props, "max", 3, 100), level = $.prop($$props, "level", 3, "normal"), size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes$33);
 	const ratio = $.derived(() => {
 		const span = max() - min();
 		return span > 0 ? Math.min(Math.max(($$props.value - min()) / span, 0), 1) : 0;
@@ -5815,6 +5982,7 @@ function Meter$1($$anchor, $$props) {
 		"data-scope": "meter",
 		"data-part": "root",
 		"data-level": level() !== "normal" ? level() : void 0,
+		"data-size": size(),
 		[$.STYLE]: { "--_percent": `${$.get(ratio) * 100}%` }
 	}));
 	var node = $.child(div);
@@ -5882,7 +6050,10 @@ injectComponentStyle("navigation-menu");
 * rides inside the field as one seal split by a hairline, numbers set in
 * tabular figures. The API is Ark's own — Root, Label, Control, Input,
 * ValueText, IncrementTrigger, DecrementTrigger, Scrubber. */
-const NumberInput = NumberInput$1;
+const NumberInput = {
+	...NumberInput$1,
+	Root: NumberInputRoot
+};
 injectComponentStyle("number-input");
 //#endregion
 //#region src/components/pagination/index.ts
@@ -5892,7 +6063,10 @@ injectComponentStyle("number-input");
 * Parts: Root, Item (page seals), Ellipsis, PrevTrigger, NextTrigger,
 * FirstTrigger, LastTrigger. Items carry data-selected.
 */
-const Pagination = Pagination$1;
+const Pagination = {
+	...Pagination$1,
+	Root: PaginationRoot
+};
 injectComponentStyle("pagination");
 //#endregion
 //#region src/components/password-input/index.ts
@@ -5900,14 +6074,20 @@ injectComponentStyle("pagination");
 * eye sits quiet at the field's edge and swaps in place — no shift, no
 * noise. The API is Ark's own — Root, Label, Control, Input, Indicator,
 * VisibilityTrigger. */
-const PasswordInput = PasswordInput$1;
+const PasswordInput = {
+	...PasswordInput$1,
+	Root: PasswordInputRoot
+};
 injectComponentStyle("password-input");
 //#endregion
 //#region src/components/pin-input/index.ts
 /** Ark's PinInput, dressed in the paper-and-ink system: one character per
 * square-cut seal, centered ink in tabular figures. The API is Ark's own —
 * Root, Label, Control, Input, HiddenInput. */
-const PinInput = PinInput$1;
+const PinInput = {
+	...PinInput$1,
+	Root: PinInputRoot
+};
 injectComponentStyle("pin-input");
 //#endregion
 //#region src/components/popconfirm/Popconfirm.svelte
@@ -6052,7 +6232,10 @@ injectComponentStyle("popover");
 * groove that the primary ink fills at the machine's pace. The API is
 * Ark's own — Root, Label, ValueText, Track, Range, View, Circle,
 * CircleTrack, CircleRange. */
-const Progress = Progress$1;
+const Progress = {
+	...Progress$1,
+	Root: ProgressRoot
+};
 injectComponentStyle("progress");
 //#endregion
 //#region src/components/progress-group/ProgressGroup.svelte
@@ -6145,7 +6328,10 @@ injectComponentStyle("qr-code");
 * full-circle seals that fill flat with primary ink when chosen, the dot
 * punched through as paper. The API is Ark's own — Root, Label, Item,
 * ItemText, ItemControl, Indicator, ItemHiddenInput. */
-const RadioGroup = RadioGroup$1;
+const RadioGroup = {
+	...RadioGroup$1,
+	Root: RadioGroupRoot
+};
 injectComponentStyle("radio-group");
 //#endregion
 //#region src/components/rating-group/index.ts
@@ -6153,7 +6339,10 @@ injectComponentStyle("radio-group");
 * seals whose glyphs take the primary pigment as they light up. The API is
 * Ark's own — Root, Label, Control, Item, HiddenInput (plus the Context and
 * ItemContext render helpers). */
-const RatingGroup = RatingGroup$1;
+const RatingGroup = {
+	...RatingGroup$1,
+	Root: RatingGroupRoot
+};
 injectComponentStyle("rating-group");
 //#endregion
 //#region src/components/scroll-area/index.ts
@@ -6164,11 +6353,13 @@ const ScrollArea = ScrollArea$1;
 injectComponentStyle("scroll-area");
 //#endregion
 //#region src/components/segment-group/index.ts
-/** Ark's SegmentGroup, dressed in the paper-and-ink system: a hairline tray
-* where one flat ink plate travels beneath the checked seal. The API is
-* Ark's own — Root, Label, Indicator, Item, ItemText, ItemControl,
+/** SegmentGroup, dressed in the paper-and-ink system: a hairline tray
+* where one flat ink plate travels beneath the checked seal. The parts - Root, Label, Indicator, Item, ItemText, ItemControl,
 * ItemHiddenInput. */
-const SegmentGroup = SegmentGroup$1;
+const SegmentGroup = {
+	...SegmentGroup$1,
+	Root: SegmentGroupRoot
+};
 injectComponentStyle("segment-group");
 //#endregion
 //#region src/components/select/index.ts
@@ -6177,7 +6368,10 @@ injectComponentStyle("segment-group");
 * row taking the flat ink fill. The API is Ark's own — Root, Label, Control,
 * Trigger, ValueText, Indicator, ClearTrigger, HiddenSelect, Positioner,
 * Content, List, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel. */
-const Select = Select$1;
+const Select = {
+	...Select$1,
+	Root: SelectRoot
+};
 injectComponentStyle("select");
 //#endregion
 //#region src/components/separator/Separator.svelte
@@ -6247,7 +6441,10 @@ injectComponentStyle("skeleton");
 * primary ink runs along, a paper-seal thumb, and hairline tick markers.
 * The API is Ark's own — Root, Label, ValueText, Control, Track, Range,
 * Thumb, MarkerGroup, Marker, DraggingIndicator, HiddenInput. */
-const Slider = Slider$1;
+const Slider = {
+	...Slider$1,
+	Root: SliderRoot
+};
 injectComponentStyle("slider");
 //#endregion
 //#region src/components/split-button/SplitButton.svelte
@@ -6787,7 +6984,10 @@ injectComponentStyle("stat");
 * PrevTrigger, NextTrigger, Progress. Indicator and Separator carry
 * data-complete / data-current / data-incomplete.
 */
-const Steps = Steps$1;
+const Steps = {
+	...Steps$1,
+	Root: StepsRoot
+};
 injectComponentStyle("steps");
 //#endregion
 //#region src/components/swap/index.ts
@@ -6803,7 +7003,10 @@ injectComponentStyle("swap");
 * in the inset shade of the paper and fills flat with primary ink when on,
 * the thumb sliding on the spring. The API is Ark's own — Root, Label,
 * Control, Thumb, HiddenInput. */
-const Switch = Switch$1;
+const Switch = {
+	...Switch$1,
+	Root: SwitchRoot
+};
 injectComponentStyle("switch");
 //#endregion
 //#region src/components/table/table-utils.ts
@@ -7505,7 +7708,7 @@ function DataTable$1($$anchor, $$props) {
 	var node_14 = $.sibling(div_5, 2);
 	var consequent_12 = ($$anchor) => {
 		const pagination = $.derived(() => table.atoms.pagination.get());
-		const sizeItems = $.derived(() => createListCollection({ items: pageSizeOptions().map((size) => ({
+		const sizeItems = $.derived(() => createListCollection$1({ items: pageSizeOptions().map((size) => ({
 			label: `${size} / page`,
 			value: String(size)
 		})) }));
@@ -7778,7 +7981,10 @@ injectComponentStyle("table");
 * Parts: Root, List, Trigger, Content, Indicator (machine-positioned ink
 * bar on the list rule).
 */
-const Tabs = Tabs$1;
+const Tabs = {
+	...Tabs$1,
+	Root: TabsRoot
+};
 injectComponentStyle("tabs");
 //#endregion
 //#region src/components/tags-input/index.ts
@@ -7787,7 +7993,10 @@ injectComponentStyle("tabs");
 * is Ark's own — Root, Label, Control, Input, ClearTrigger, Item,
 * ItemPreview, ItemText, ItemInput, ItemDeleteTrigger, HiddenInput,
 * Context. */
-const TagsInput = TagsInput$1;
+const TagsInput = {
+	...TagsInput$1,
+	Root: TagsInputRoot
+};
 injectComponentStyle("tags-input");
 //#endregion
 //#region src/components/textarea/Textarea.svelte
@@ -8339,7 +8548,10 @@ injectComponentStyle("checkbox");
 /** Ark's ToggleGroup, dressed in the paper-and-ink system: a hairline tray
 * of quiet seals where the pressed item takes the flat ink fill. The API is
 * Ark's own — Root, Item. */
-const ToggleGroup = ToggleGroup$1;
+const ToggleGroup = {
+	...ToggleGroup$1,
+	Root: ToggleGroupRoot
+};
 injectComponentStyle("toggle-group");
 //#endregion
 //#region src/components/tooltip/index.ts
@@ -8494,6 +8706,7 @@ var rest_excludes$1 = /* @__PURE__ */ new Set([
 	"data",
 	"placeholder",
 	"filterable",
+	"size",
 	"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>`);
@@ -8505,7 +8718,7 @@ var root_5 = $.from_html(`<p data-scope="tree-select" data-part="empty">Nothing
 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…"), filterable = $.prop($$props, "filterable", 3, false), 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), size = $.prop($$props, "size", 3, "md"), 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" });
@@ -8579,6 +8792,7 @@ function TreeSelect$1($$anchor, $$props) {
 							type: "button",
 							"data-scope": "tree-select",
 							"data-part": "control",
+							"data-size": size(),
 							"data-open": $.get(open) ? "" : void 0,
 							"data-placeholder": $.get(label) == null ? "" : void 0,
 							disabled: disabled()
@@ -8613,6 +8827,9 @@ function TreeSelect$1($$anchor, $$props) {
 										ArkPopover_Content($$anchor, {
 											"data-scope": "tree-select",
 											"data-part": "content",
+											get "data-size"() {
+												return size();
+											},
 											children: ($$anchor, $$slotProps) => {
 												var fragment_14 = root_6();
 												var node_17 = $.first_child(fragment_14);
@@ -8731,7 +8948,10 @@ injectComponentStyle("tree-view");
 * BranchTrigger, BranchIndicator, BranchText, BranchContent,
 * BranchIndentGuide, Item, ItemText, ItemIndicator, NodeCheckbox,
 * NodeRenameInput, plus createTreeCollection. */
-const TreeView = TreeView$1;
+const TreeView = {
+	...TreeView$1,
+	Root: TreeViewRoot
+};
 injectComponentStyle("tree-view");
 //#endregion
 //#region src/components/watermark/Watermark.svelte
@@ -8820,4 +9040,4 @@ function Watermark$1($$anchor, $$props) {
 const Watermark = Watermark$1;
 injectComponentStyle("watermark");
 //#endregion
-export { Accordion, Affix, Ai, AiAction, Attachment as AiAttachment, Attachment, Attachments as AiAttachments, Attachments, AiMessage, AiPromptInput, AiReasoning, AiResponse, AiSource, AiSources, AiSuggestion, AiTool, Alert, AngleSlider, AspectRatio, AutoComplete, Avatar, AvatarGroup, BackTop, Badge, Banner, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, CascadeSelect, Checkbox, CheckboxGroup, Chip, ClientOnly, Clipboard, Collapsible, ColorPicker, Combobox, Command, Comment, ConfigProvider, Container, DataTable, DateInput, DatePicker, Descriptions, Dialog, DownloadTrigger, Drawer, DynamicInput, Editable, Ellipsis, Empty, FLOAT_BUTTON_KEY, Field, Fieldset, FileUpload, FlexRender, FloatButton, FloatingPanel, FocusTrap, Form, FormField, Format, Frame, Grid, Highlight, HoverCard, Icon, Image, ImageCropper, ImageViewer, Input, InputGroup, JsonTreeView, Kbd, Layout, Link, List, Listbox, Marquee, Masonry, Mentions, MentionsVessel, Menu, Menubar, Meter, NavigationMenu, NumberInput, PageHeader, Pagination, PasswordInput, PinInput, Popconfirm, Popover, Presence, PresenceProvider, Progress, ProgressGroup, QrCode, RadioGroup, RatingGroup, ScrollArea, SegmentGroup, Select, Separator, SignaturePad, Skeleton, Slider, Spinner, SplitButton, Splitter, Stack, Stat, Steps, Swap, Switch, Tabs, TagsInput, Textarea, Timeline, Timer, Toast, Toaster, Toc, Toggle, ToggleGroup, Tooltip, Tour, Transfer, TreeSelect, TreeView, Typography, Watermark, createColumnHelper, createFileTreeCollection, createGridCollection, createToaster, createTreeCollection, splitPresenceProps, useAsyncList, useConfig, useDownload, useListCollection, useListSelection, useMentions, usePresence, usePresenceContext, useTour };
+export { Accordion, Affix, Ai, AiAction, Attachment as AiAttachment, Attachment, Attachments as AiAttachments, Attachments, AiMessage, AiPromptInput, AiReasoning, AiResponse, AiSource, AiSources, AiSuggestion, AiTool, Alert, AngleSlider, AspectRatio, AutoComplete, Avatar, AvatarGroup, BackTop, Badge, Banner, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, CascadeSelect, Checkbox, CheckboxGroup, Chip, ClientOnly, Clipboard, Collapsible, ColorPicker, Combobox, Command, Comment, ConfigProvider, Container, DataTable, DateInput, DatePicker, Descriptions, Dialog, DownloadTrigger, Drawer, DynamicInput, Editable, Ellipsis, Empty, FLOAT_BUTTON_KEY, Field, Fieldset, FileUpload, FlexRender, FloatButton, FloatingPanel, FocusTrap, Form, FormField, Format, Frame, Grid, Highlight, HoverCard, Icon, Image, ImageCropper, ImageViewer, Input, InputGroup, JsonTreeView, Kbd, Layout, Link, List, Listbox, Marquee, Masonry, Mentions, MentionsVessel, Menu, Menubar, Meter, NavigationMenu, NumberInput, PageHeader, Pagination, PasswordInput, PinInput, Popconfirm, Popover, Presence, PresenceProvider, Progress, ProgressGroup, QrCode, RadioGroup, RatingGroup, ScrollArea, SegmentGroup, Select, Separator, SignaturePad, Skeleton, Slider, Spinner, SplitButton, Splitter, Stack, Stat, Steps, Swap, Switch, Tabs, TagsInput, Textarea, Timeline, Timer, Toast, Toaster, Toc, Toggle, ToggleGroup, Tooltip, Tour, Transfer, TreeSelect, TreeView, Typography, Watermark, createColumnHelper, createFileTreeCollection, createGridCollection, createListCollection, createToaster, createTreeCollection, splitPresenceProps, useAsyncList, useConfig, useDownload, useListCollection, useListSelection, useMentions, usePresence, usePresenceContext, useTour };