@bysages/solid 0.2.0 → 0.2.2

package/dist/index.mjs

@@ -1,12 +1,12 @@
 import { injectComponentStyle } from "@bysages/core";
 import { Accordion as Accordion$1 } from "@ark-ui/solid/accordion";
 import { Portal, addEventListener, createComponent, delegateEvents, effect, insert, memo, mergeProps, setAttribute, setStyleProperty, spread, style, template, use } from "solid-js/web";
-import { For, Index, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, mergeProps as mergeProps$1, on, onCleanup, onMount, splitProps, useContext } from "solid-js";
+import { For, Index, Show, createComponent as createComponent$1, createContext, createEffect, createMemo, createSignal, createUniqueId, mergeProps as mergeProps$1, on, onCleanup, onMount, splitProps, useContext } from "solid-js";
 import { Field as Field$1, useFieldContext } from "@ark-ui/solid/field";
 import { Collapsible as Collapsible$1 } from "@ark-ui/solid/collapsible";
 import { renderHtml } from "@tanstack/markdown/html";
 import { AngleSlider as AngleSlider$1 } from "@ark-ui/solid/angle-slider";
-import { createFileTreeCollection, createGridCollection, createTreeCollection, useAsyncList, useListCollection, useListCollection as useListCollection$1, useListSelection } from "@ark-ui/solid/collection";
+import { createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, useAsyncList, useListCollection, useListCollection as useListCollection$1, useListSelection } from "@ark-ui/solid/collection";
 import { Combobox as Combobox$1 } from "@ark-ui/solid/combobox";
 import { Avatar as Avatar$1 } from "@ark-ui/solid/avatar";
 import { DatePicker as DatePicker$1 } from "@ark-ui/solid/date-picker";
@@ -32,6 +32,7 @@ import { Format as Format$1 } from "@ark-ui/solid/format";
 import { Frame as Frame$1 } from "@ark-ui/solid/frame";
 import { Highlight as Highlight$1 } from "@ark-ui/solid/highlight";
 import { HoverCard as HoverCard$1 } from "@ark-ui/solid/hover-card";
+import { getIcon } from "@bysages/icons";
 import { ImageCropper as ImageCropper$1 } from "@ark-ui/solid/image-cropper";
 import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/solid/json-tree-view";
 import { Listbox as Listbox$1 } from "@ark-ui/solid/listbox";
@@ -50,7 +51,7 @@ import { RadioGroup as RadioGroup$1 } from "@ark-ui/solid/radio-group";
 import { RatingGroup as RatingGroup$1 } from "@ark-ui/solid/rating-group";
 import { ScrollArea as ScrollArea$1 } from "@ark-ui/solid/scroll-area";
 import { SegmentGroup as SegmentGroup$1 } from "@ark-ui/solid/segment-group";
-import { Select as Select$1, createListCollection } from "@ark-ui/solid/select";
+import { Select as Select$1, createListCollection as createListCollection$1 } from "@ark-ui/solid/select";
 import { SignaturePad as SignaturePad$1 } from "@ark-ui/solid/signature-pad";
 import { Slider as Slider$1 } from "@ark-ui/solid/slider";
 import { Splitter as Splitter$1 } from "@ark-ui/solid/splitter";
@@ -201,7 +202,7 @@ injectComponentStyle("field");
 //#endregion
 //#region src/components/ai-prompt-input/index.tsx
 var _tmpl$$55 = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"width=14 height=14 aria-hidden=true fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=square><path d="M8 13V3M3.5 7.5 8 3l4.5 4.5">`);
-var _tmpl$2$28 = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"width=14 height=14 aria-hidden=true><rect x=4.5 y=4.5 width=7 height=7 fill=currentColor>`);
+var _tmpl$2$29 = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"width=14 height=14 aria-hidden=true><rect x=4.5 y=4.5 width=7 height=7 fill=currentColor>`);
 var _tmpl$3$18 = /*#__PURE__*/ template(`<div data-scope=ai>`);
 var _tmpl$4$14 = /*#__PURE__*/ template(`<div data-scope=ai data-part=prompt-footer><div data-scope=ai data-part=prompt-end>`);
 var _tmpl$5$11 = /*#__PURE__*/ template(`<form><div data-scope=ai data-part=prompt-main>`);
@@ -209,7 +210,7 @@ function arrowUpGlyph() {
 	return _tmpl$$55();
 }
 function stopGlyph() {
-	return _tmpl$2$28();
+	return _tmpl$2$29();
 }
 /** The prompt vessel: the shared field textarea — self-growing on the
 * machine's autoresize — with the submit seal riding its last line.
@@ -345,7 +346,7 @@ injectComponentStyle("collapsible");
 //#endregion
 //#region src/components/ai-reasoning/index.tsx
 var _tmpl$$53 = /*#__PURE__*/ template(`<span>`);
-var _tmpl$2$27 = /*#__PURE__*/ template(`<div data-scope=ai data-part=reasoning-content>`);
+var _tmpl$2$28 = /*#__PURE__*/ template(`<div data-scope=ai data-part=reasoning-content>`);
 /** The model's thought, folded by the shared collapsible in its quiet
 * register: bare ink for a trigger, the thought on one hairline. */
 function Reasoning(props) {
@@ -362,7 +363,7 @@ function Reasoning(props) {
 					return chevron$2();
 				} })];
 			} }), createComponent(Collapsible.Content, { get children() {
-				var _el$2 = _tmpl$2$27();
+				var _el$2 = _tmpl$2$28();
 				insert(_el$2, () => own.children);
 				return _el$2;
 			} })];
@@ -428,6 +429,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/index.tsx
 var _tmpl$$52 = /*#__PURE__*/ template(`<div>`);
 /** Markdown set on the paper. Rendering goes through
@@ -445,6 +485,7 @@ function Response(props) {
 	onMount(() => createEffect(() => {
 		html();
 		if (root) decorateCodeCopy(root, own.copyLabel ?? "Copy code");
+		if (root) wrapResponseTables(root);
 	}));
 	const onClick = (event) => {
 		clickCodeCopy(event, own.copyLabel ?? "Copy code", own.copiedLabel ?? "Copied");
@@ -467,7 +508,7 @@ injectComponentStyle("ai");
 //#endregion
 //#region src/components/ai-source/index.tsx
 var _tmpl$$51 = /*#__PURE__*/ template(`<li data-scope=ai data-part=source><a>`);
-var _tmpl$2$26 = /*#__PURE__*/ template(`<ol>`);
+var _tmpl$2$27 = /*#__PURE__*/ template(`<ol>`);
 /** One place the ink came from; href and the rest ride the anchor. */
 function Source(props) {
 	const [own, rest] = splitProps(props, ["href", "children"]);
@@ -487,7 +528,7 @@ function Source(props) {
 /** The reading list under a response: where this ink came from. */
 function Sources(props) {
 	return (() => {
-		var _el$3 = _tmpl$2$26();
+		var _el$3 = _tmpl$2$27();
 		spread(_el$3, mergeProps(props, {
 			"data-scope": "ai",
 			"data-part": "sources"
@@ -516,7 +557,7 @@ injectComponentStyle("ai");
 //#endregion
 //#region src/components/ai-tool/index.tsx
 var _tmpl$$50 = /*#__PURE__*/ template(`<span>`);
-var _tmpl$2$25 = /*#__PURE__*/ template(`<span data-scope=ai data-part=tool-status>`);
+var _tmpl$2$26 = /*#__PURE__*/ template(`<span data-scope=ai data-part=tool-status>`);
 var _tmpl$3$17 = /*#__PURE__*/ template(`<span data-scope=ai data-part=tool-label>Input`);
 var _tmpl$4$13 = /*#__PURE__*/ template(`<pre>`);
 var _tmpl$5$10 = /*#__PURE__*/ template(`<span data-scope=ai data-part=tool-label>Output`);
@@ -545,7 +586,7 @@ function Tool(props) {
 						return own.status;
 					},
 					get children() {
-						var _el$2 = _tmpl$2$25();
+						var _el$2 = _tmpl$2$26();
 						insert(_el$2, () => own.status.charAt(0).toUpperCase() + own.status.slice(1));
 						return _el$2;
 					}
@@ -646,7 +687,7 @@ injectComponentStyle("ai");
 //#endregion
 //#region src/components/ai-attachments/index.tsx
 var _tmpl$$48 = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"aria-hidden=true fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=square><rect x=2.5 y=3.5 width=11 height=9></rect><path d="M2.5 10.5 6 7l3 3 2-1.5 2.5 2"></path><circle cx=6 cy=6 r=0.75 fill=currentColor stroke=none>`);
-var _tmpl$2$24 = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"aria-hidden=true fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=square><path d="M4 2.5h5l3 3V13.5H4z"></path><path d="M9 2.5v3h3">`);
+var _tmpl$2$25 = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"aria-hidden=true fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=square><path d="M4 2.5h5l3 3V13.5H4z"></path><path d="M9 2.5v3h3">`);
 var _tmpl$3$16 = /*#__PURE__*/ template(`<svg viewBox="0 0 16 16"width=12 height=12 aria-hidden=true fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=square><path d="M4 4l8 8M12 4l-8 8">`);
 var _tmpl$4$12 = /*#__PURE__*/ template(`<span><span></span><button type=button data-remove>`);
 var _tmpl$5$9 = /*#__PURE__*/ template(`<span>`);
@@ -654,7 +695,7 @@ function imageGlyph() {
 	return _tmpl$$48();
 }
 function fileGlyph() {
-	return _tmpl$2$24();
+	return _tmpl$2$25();
 }
 function removeGlyph() {
 	return _tmpl$3$16();
@@ -740,7 +781,7 @@ delegateEvents(["click"]);
 //#endregion
 //#region src/components/alert/index.tsx
 var _tmpl$$47 = /*#__PURE__*/ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path>`);
-var _tmpl$2$23 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2$24 = /*#__PURE__*/ template(`<div>`);
 var _tmpl$3$15 = /*#__PURE__*/ template(`<span data-scope=alert data-part=icon>`);
 var _tmpl$4$11 = /*#__PURE__*/ template(`<p>`);
 const StatusContext = createContext(() => "ink");
@@ -764,7 +805,7 @@ function AlertRoot(props) {
 	return createComponent(StatusContext.Provider, {
 		value: status,
 		get children() {
-			var _el$3 = _tmpl$2$23();
+			var _el$3 = _tmpl$2$24();
 			spread(_el$3, mergeProps(rest, {
 				get role() {
 					return status() === "ink" || status() === "info" ? "status" : "alert";
@@ -789,7 +830,7 @@ function Icon$2() {
 }
 function Body$2(props) {
 	return (() => {
-		var _el$5 = _tmpl$2$23();
+		var _el$5 = _tmpl$2$24();
 		spread(_el$5, mergeProps(props, {
 			"data-scope": "alert",
 			"data-part": "body"
@@ -826,12 +867,17 @@ const Alert = Object.assign(AlertRoot, {
 });
 injectComponentStyle("alert");
 //#endregion
-//#region src/components/angle-slider/index.ts
-/** Ark's AngleSlider, dressed in the paper-and-ink system: a flat paper dial
-* 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;
+//#region src/components/angle-slider/index.tsx
+function AngleSliderRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(AngleSlider$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const AngleSlider = {
+	...AngleSlider$1,
+	Root: AngleSliderRoot
+};
 injectComponentStyle("angle-slider");
 //#endregion
 //#region src/components/aspect-ratio/index.tsx
@@ -869,6 +915,7 @@ function AutoComplete(props) {
 		"value",
 		"items",
 		"placeholder",
+		"size",
 		"filter",
 		"onValueChange"
 	]);
@@ -883,6 +930,9 @@ function AutoComplete(props) {
 		get inputValue() {
 			return own.value;
 		},
+		get ["data-size"]() {
+			return own.size ?? "md";
+		},
 		allowCustomValue: true,
 		onValueChange: (details) => {
 			const [first] = details.value;
@@ -933,11 +983,15 @@ injectComponentStyle("avatar");
 //#region src/components/avatar-group/index.tsx
 var _tmpl$$45 = /*#__PURE__*/ template(`<div>`);
 function AvatarGroup(props) {
+	const [own, rest] = splitProps(props, ["size"]);
 	return (() => {
 		var _el$ = _tmpl$$45();
-		spread(_el$, mergeProps(props, {
+		spread(_el$, mergeProps(rest, {
 			"data-scope": "avatar-group",
-			"data-part": "root"
+			"data-part": "root",
+			get ["data-size"]() {
+				return own.size;
+			}
 		}), false, false);
 		return _el$;
 	})();
@@ -946,7 +1000,7 @@ injectComponentStyle("avatar-group");
 //#endregion
 //#region src/components/back-top/index.tsx
 var _tmpl$$44 = /*#__PURE__*/ template(`<div data-scope=back-top data-part=root>`);
-var _tmpl$2$22 = /*#__PURE__*/ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m6 14 6-6 6 6">`);
+var _tmpl$2$23 = /*#__PURE__*/ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m6 14 6-6 6 6">`);
 /**
 * A way home: after the page has scrolled past `threshold`, a small
 * floating control rises at the page's corner and returns the reader to
@@ -1024,7 +1078,7 @@ function BackTop(props) {
 }
 /** The single glyph a way-home control needs: one stroke pointing up. */
 function chevronUp() {
-	return _tmpl$2$22();
+	return _tmpl$2$23();
 }
 injectComponentStyle("back-top");
 //#endregion
@@ -1051,7 +1105,7 @@ injectComponentStyle("badge");
 //#endregion
 //#region src/components/banner/index.tsx
 var _tmpl$$42 = /*#__PURE__*/ template(`<div>`);
-var _tmpl$2$21 = /*#__PURE__*/ template(`<button><svg viewBox="0 0 16 16"fill=none aria-hidden=true><path d="M4 4l8 8M12 4l-8 8"stroke=currentColor stroke-width=1.5 stroke-linecap=round>`);
+var _tmpl$2$22 = /*#__PURE__*/ template(`<button><svg viewBox="0 0 16 16"fill=none aria-hidden=true><path d="M4 4l8 8M12 4l-8 8"stroke=currentColor stroke-width=1.5 stroke-linecap=round>`);
 /** A page-level notice, spoken across the full measure: a wash of the
 * status pigment, one heavier hairline on the leading edge, and room
 * for actions and a quiet close. Ink is the neutral register; the four
@@ -1091,7 +1145,7 @@ const Actions$3 = part$10("Actions", "div");
 function Close(props) {
 	const [own, rest] = splitProps(props, ["type"]);
 	return (() => {
-		var _el$2 = _tmpl$2$21();
+		var _el$2 = _tmpl$2$22();
 		spread(_el$2, mergeProps(rest, {
 			get type() {
 				return own.type ?? "button";
@@ -1193,7 +1247,7 @@ injectComponentStyle("button-group");
 //#endregion
 //#region src/components/calendar/index.tsx
 var _tmpl$$39 = /*#__PURE__*/ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 aria-hidden=true><path d="m9 5 7 7-7 7">`);
-var _tmpl$2$20 = /*#__PURE__*/ template(`<div data-scope=calendar data-part=header>`);
+var _tmpl$2$21 = /*#__PURE__*/ template(`<div data-scope=calendar data-part=header>`);
 var _tmpl$3$14 = /*#__PURE__*/ template(`<div>`);
 function chevron$1(dir) {
 	return (() => {
@@ -1227,7 +1281,7 @@ function Calendar(props) {
 		return `${decade} - ${decade + 9}`;
 	};
 	const header = () => (() => {
-		var _el$2 = _tmpl$2$20();
+		var _el$2 = _tmpl$2$21();
 		insert(_el$2, createComponent(DatePicker$1.ViewControl, { get children() {
 			return [
 				createComponent(DatePicker$1.PrevTrigger, { get children() {
@@ -1461,7 +1515,7 @@ injectComponentStyle("input");
 //#endregion
 //#region src/components/cascade-select/index.tsx
 var _tmpl$$37 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m6 9 6 6 6-6">`);
-var _tmpl$2$19 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m9 18 6-6-6-6">`);
+var _tmpl$2$20 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m9 18 6-6-6-6">`);
 var _tmpl$3$13 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m5 12.5 5 5L19 7">`);
 var _tmpl$4$10 = /*#__PURE__*/ template(`<ul>`);
 var _tmpl$5$8 = /*#__PURE__*/ template(`<span data-part=branch-indicator aria-hidden=true>`);
@@ -1475,7 +1529,7 @@ function chevronDown$1() {
 	return _tmpl$$37();
 }
 function chevronRight() {
-	return _tmpl$2$19();
+	return _tmpl$2$20();
 }
 function checkGlyph$2() {
 	return _tmpl$3$13();
@@ -1498,6 +1552,7 @@ function CascadeSelect(props) {
 		"filterable",
 		"multiple",
 		"disabled",
+		"size",
 		"onValueChange"
 	]);
 	const id = createUniqueId();
@@ -1632,7 +1687,9 @@ function CascadeSelect(props) {
 	}
 	return (() => {
 		var _el$9 = _tmpl$9$2(), _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling;
-		spread(_el$9, mergeProps(rest, () => mergeProps$1(() => api().getRootProps())), false, true);
+		spread(_el$9, mergeProps(rest, () => mergeProps$1(() => api().getRootProps()), { get ["data-size"]() {
+			return own.size ?? "md";
+		} }), false, true);
 		spread(_el$0, mergeProps(() => mergeProps$1(() => api().getControlProps())), false, true);
 		spread(_el$1, mergeProps(() => mergeProps$1(() => api().getTriggerProps(), {
 			get disabled() {
@@ -1650,7 +1707,9 @@ function CascadeSelect(props) {
 		insert(_el$9, createComponent(Portal, { get children() {
 			var _el$12 = _tmpl$8$2(), _el$13 = _el$12.firstChild;
 			spread(_el$12, mergeProps(() => mergeProps$1(() => api().getPositionerProps())), false, true);
-			spread(_el$13, mergeProps(() => mergeProps$1(() => api().getContentProps())), false, true);
+			spread(_el$13, mergeProps(() => mergeProps$1(() => api().getContentProps()), { get ["data-size"]() {
+				return own.size ?? "md";
+			} }), false, true);
 			insert(_el$13, createComponent(Show, {
 				get when() {
 					return own.filterable;
@@ -1709,17 +1768,22 @@ function CascadeSelect(props) {
 injectComponentStyle("cascade-select");
 delegateEvents(["click"]);
 //#endregion
-//#region src/components/checkbox/index.ts
-/** Ark's Checkbox, dressed in the paper-and-ink system: a square-cut seal
-* 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;
+//#region src/components/checkbox/index.tsx
+function CheckboxRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(Checkbox$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const Checkbox = {
+	...Checkbox$1,
+	Root: CheckboxRoot
+};
 injectComponentStyle("checkbox");
 //#endregion
 //#region src/components/checkbox-group/index.tsx
 var _tmpl$$36 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m5 12.5 5 5L19 7">`);
-var _tmpl$2$18 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2$19 = /*#__PURE__*/ template(`<div>`);
 function checkGlyph$1() {
 	return _tmpl$$36();
 }
@@ -1733,10 +1797,12 @@ function checkGlyph$1() {
 */
 function CheckboxGroup(props) {
 	const field = useFieldContext();
+	const uid = createUniqueId();
 	const [own, rest] = splitProps(props, [
 		"value",
 		"options",
 		"layout",
+		"size",
 		"invalid",
 		"disabled",
 		"onValueChange"
@@ -1751,7 +1817,7 @@ function CheckboxGroup(props) {
 		own.onValueChange?.([...next]);
 	}
 	return (() => {
-		var _el$2 = _tmpl$2$18();
+		var _el$2 = _tmpl$2$19();
 		spread(_el$2, mergeProps(rest, {
 			"role": "group",
 			"data-scope": "checkbox-group",
@@ -1768,9 +1834,18 @@ function CheckboxGroup(props) {
 				return own.options;
 			},
 			children: (option) => createComponent(Checkbox$1.Root, {
+				get ids() {
+					return {
+						label: `${uid}:${option.value}:label`,
+						hiddenInput: `${uid}:${option.value}:input`
+					};
+				},
 				get checked() {
 					return selected().has(option.value);
 				},
+				get ["data-size"]() {
+					return own.size ?? "md";
+				},
 				get invalid() {
 					return isInvalid();
 				},
@@ -1829,38 +1904,49 @@ function Chip(props) {
 }
 injectComponentStyle("chip");
 //#endregion
-//#region src/components/clipboard/index.ts
-/** Ark's Clipboard, dressed in the paper-and-ink system: a hairline value
-* 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;
+//#region src/components/clipboard/index.tsx
+const ArkRoot$2 = Clipboard$1.Root;
+function ClipboardRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(ArkRoot$2, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const Clipboard = {
+	...Clipboard$1,
+	Root: ClipboardRoot
+};
 injectComponentStyle("clipboard");
 //#endregion
-//#region src/components/color-picker/index.ts
-/** Ark's ColorPicker, dressed in the paper-and-ink system: a seal-sized swatch
-* on the paper, opening into an area and channel sliders where pigment is
-* picked. The API is Ark's own — Root, Label, Control, Trigger, Positioner,
-* Content, Area, AreaThumb, AreaBackground, ValueText, ValueSwatch,
-* ChannelSlider, ChannelSliderLabel, ChannelSliderTrack, ChannelSliderThumb,
-* ChannelSliderValueText, ChannelInput, TransparencyGrid, SwatchGroup,
-* SwatchTrigger, SwatchIndicator, Swatch, EyeDropperTrigger, FormatTrigger,
-* FormatSelect, HiddenInput, Context. */
-const ColorPicker = ColorPicker$1;
+//#region src/components/color-picker/index.tsx
+function ColorPickerRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(ColorPicker$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const ColorPicker = {
+	...ColorPicker$1,
+	Root: ColorPickerRoot
+};
 injectComponentStyle("color-picker");
 //#endregion
-//#region src/components/combobox/index.ts
-/** Ark's Combobox, dressed in the paper-and-ink system: the field carries
-* the control recipe and its matches dissolve open as a paper vessel, the
-* 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;
+//#region src/components/combobox/index.tsx
+function ComboboxRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(Combobox$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const Combobox = {
+	...Combobox$1,
+	Root: ComboboxRoot
+};
 injectComponentStyle("combobox");
 //#endregion
 //#region src/components/command/index.tsx
 var _tmpl$$34 = /*#__PURE__*/ template(`<span data-scope=command data-part=item-hint>`);
-var _tmpl$2$17 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2$18 = /*#__PURE__*/ template(`<div>`);
 var _tmpl$3$12 = /*#__PURE__*/ template(`<span>`);
 var _tmpl$4$9 = /*#__PURE__*/ template(`<input>`);
 var _tmpl$5$7 = /*#__PURE__*/ template(`<div data-scope=command data-part=empty>`);
@@ -1872,7 +1958,7 @@ function Row(props) {
 			return props.entry.value;
 		},
 		asChild: (itemProps) => (() => {
-			var _el$ = _tmpl$2$17();
+			var _el$ = _tmpl$2$18();
 			spread(_el$, mergeProps(itemProps, {
 				"data-scope": "command",
 				"data-part": "item"
@@ -1967,13 +2053,13 @@ function Command(props) {
 		get children() {
 			return createComponent(Portal, { get children() {
 				return [createComponent(Dialog$1.Backdrop, {}), createComponent(Dialog$1.Positioner, { asChild: (positionerProps) => (() => {
-					var _el$4 = _tmpl$2$17();
+					var _el$4 = _tmpl$2$18();
 					spread(_el$4, mergeProps(positionerProps, {
 						"data-scope": "command",
 						"data-part": "positioner"
 					}), false, true);
 					insert(_el$4, createComponent(Dialog$1.Content, { asChild: (contentProps) => (() => {
-						var _el$5 = _tmpl$2$17();
+						var _el$5 = _tmpl$2$18();
 						spread(_el$5, mergeProps(contentProps, {
 							"data-scope": "command",
 							"data-part": "content"
@@ -2015,7 +2101,7 @@ function Command(props) {
 									}), false, false);
 									return _el$6;
 								})() }), createComponent(Combobox$1.Content, { asChild: (listProps) => (() => {
-									var _el$7 = _tmpl$2$17();
+									var _el$7 = _tmpl$2$18();
 									spread(_el$7, mergeProps(listProps, {
 										"data-scope": "command",
 										"data-part": "list"
@@ -2038,13 +2124,13 @@ function Command(props) {
 											},
 											get children() {
 												return createComponent(Combobox$1.ItemGroup, { asChild: (groupProps) => (() => {
-													var _el$9 = _tmpl$2$17();
+													var _el$9 = _tmpl$2$18();
 													spread(_el$9, mergeProps(groupProps, {
 														"data-scope": "command",
 														"data-part": "group"
 													}), false, true);
 													insert(_el$9, createComponent(Combobox$1.ItemGroupLabel, { asChild: (labelProps) => (() => {
-														var _el$0 = _tmpl$2$17();
+														var _el$0 = _tmpl$2$18();
 														spread(_el$0, mergeProps(labelProps, {
 															"data-scope": "command",
 															"data-part": "group-label"
@@ -2090,7 +2176,7 @@ injectComponentStyle("dialog");
 //#endregion
 //#region src/components/comment/index.tsx
 var _tmpl$$33 = /*#__PURE__*/ template(`<div data-scope=comment data-part=avatar>`);
-var _tmpl$2$16 = /*#__PURE__*/ template(`<span data-scope=comment data-part=author>`);
+var _tmpl$2$17 = /*#__PURE__*/ template(`<span data-scope=comment data-part=author>`);
 var _tmpl$3$11 = /*#__PURE__*/ template(`<time data-scope=comment data-part=datetime>`);
 var _tmpl$4$8 = /*#__PURE__*/ template(`<header data-scope=comment data-part=header>`);
 var _tmpl$5$6 = /*#__PURE__*/ template(`<div data-scope=comment data-part=actions>`);
@@ -2135,7 +2221,7 @@ function Comment(props) {
 						return own.author;
 					},
 					get children() {
-						var _el$5 = _tmpl$2$16();
+						var _el$5 = _tmpl$2$17();
 						insert(_el$5, () => own.author);
 						return _el$5;
 					}
@@ -2248,22 +2334,30 @@ function Container(props) {
 }
 injectComponentStyle("container");
 //#endregion
-//#region src/components/date-input/index.ts
-/** Ark's DateInput, dressed in the paper-and-ink system: a segmented
-* field where the focused segment takes the flat ink fill. The API is
-* Ark's own — Root, Label, Control, SegmentGroup, Segment, SegmentContext,
-* HiddenInput. */
-const DateInput = DateInput$1;
+//#region src/components/date-input/index.tsx
+function DateInputRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(DateInput$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const DateInput = {
+	...DateInput$1,
+	Root: DateInputRoot
+};
 injectComponentStyle("date-input");
 //#endregion
-//#region src/components/date-picker/index.ts
-/** Ark's DatePicker, dressed in the paper-and-ink system: the popup
-* dissolves in on elevation, selected days take the flat ink fill, and
-* range middles run subtle with cut corners. The API is Ark's own —
-* Root, Label, Control, Input, Trigger, ClearTrigger, Positioner,
-* Content, View, ViewControl, ViewTrigger, RangeText, PrevTrigger,
-* NextTrigger, Table*, MonthSelect, YearSelect, PresetTrigger. */
-const DatePicker = DatePicker$1;
+//#region src/components/date-picker/index.tsx
+function DatePickerRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(DatePicker$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const DatePicker = {
+	...DatePicker$1,
+	Root: DatePickerRoot
+};
 injectComponentStyle("date-picker");
 //#endregion
 //#region src/components/descriptions/index.tsx
@@ -2323,7 +2417,7 @@ injectComponentStyle("drawer");
 //#endregion
 //#region src/components/dynamic-input/index.tsx
 var _tmpl$$29 = /*#__PURE__*/ template(`<div><div data-scope=dynamic-input data-part=add>`);
-var _tmpl$2$15 = /*#__PURE__*/ template(`<div data-scope=dynamic-input data-part=row>`);
+var _tmpl$2$16 = /*#__PURE__*/ template(`<div data-scope=dynamic-input data-part=row>`);
 var _tmpl$3$10 = /*#__PURE__*/ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="M18 6 6 18M6 6l12 12">`);
 /**
 * A column of entry rows: one Input per line, each with a quiet remove
@@ -2339,6 +2433,7 @@ function DynamicInput(props) {
 		"min",
 		"max",
 		"placeholder",
+		"size",
 		"addLabel",
 		"disabled",
 		"invalid",
@@ -2371,7 +2466,7 @@ function DynamicInput(props) {
 				return values();
 			},
 			children: (value, index) => (() => {
-				var _el$3 = _tmpl$2$15();
+				var _el$3 = _tmpl$2$16();
 				insert(_el$3, createComponent(Input, {
 					get value() {
 						return value();
@@ -2385,10 +2480,16 @@ function DynamicInput(props) {
 					get invalid() {
 						return own.invalid;
 					},
+					get size() {
+						return own.size ?? "md";
+					},
 					onValueChange: (next) => update(index, next)
 				}), null);
 				insert(_el$3, createComponent(Button, {
 					variant: "ghost",
+					get size() {
+						return own.size ?? "md";
+					},
 					square: true,
 					get disabled() {
 						return own.disabled || !canRemove();
@@ -2404,6 +2505,9 @@ function DynamicInput(props) {
 		}), _el$2);
 		insert(_el$2, createComponent(Button, {
 			variant: "ghost",
+			get size() {
+				return own.size ?? "md";
+			},
 			get disabled() {
 				return own.disabled || !canAdd();
 			},
@@ -2421,12 +2525,17 @@ function crossIcon() {
 }
 injectComponentStyle("dynamic-input");
 //#endregion
-//#region src/components/editable/index.ts
-/** Ark's Editable, dressed in the paper-and-ink system: bare ink while
-* reading, the full field recipe while editing. The API is Ark's own —
-* Root, Area, Label, Preview, Input, EditTrigger, SubmitTrigger,
-* CancelTrigger, Control. */
-const Editable = Editable$1;
+//#region src/components/editable/index.tsx
+function EditableRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(Editable$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const Editable = {
+	...Editable$1,
+	Root: EditableRoot
+};
 injectComponentStyle("editable");
 //#endregion
 //#region src/components/ellipsis/index.tsx
@@ -2489,19 +2598,22 @@ injectComponentStyle("empty");
 const Fieldset = Fieldset$1;
 injectComponentStyle("fieldset");
 //#endregion
-//#region src/components/file-upload/index.ts
-/** Ark's FileUpload, dressed in the paper-and-ink system: a dashed
-* dropzone that floods with subtle light on drag-over, and accepted files
-* as loose hairline slips. The API is Ark's own — Root, Label, Trigger,
-* Dropzone, HiddenInput, ItemGroup, Item, ItemName, ItemSizeText,
-* ItemPreview, ItemPreviewImage, ItemDeleteTrigger, ClearTrigger,
-* Context. */
-const FileUpload = FileUpload$1;
+//#region src/components/file-upload/index.tsx
+function FileUploadRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(FileUpload$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const FileUpload = {
+	...FileUpload$1,
+	Root: FileUploadRoot
+};
 injectComponentStyle("file-upload");
 //#endregion
 //#region src/components/float-button/index.tsx
 var _tmpl$$27 = /*#__PURE__*/ template(`<div>`);
-var _tmpl$2$14 = /*#__PURE__*/ template(`<div><span data-scope=float-button data-part=item-label aria-hidden=true>`);
+var _tmpl$2$15 = /*#__PURE__*/ template(`<div><span data-scope=float-button data-part=item-label aria-hidden=true>`);
 /** Solid context for {@link FloatButtonContext}, exported so a custom
 * part can read the group's state with `useContext`. */
 const FloatButtonContextKey = createContext();
@@ -2518,6 +2630,7 @@ function FloatButtonRoot(props) {
 	const [own, rest] = splitProps(props, [
 		"open",
 		"placement",
+		"size",
 		"onOpenChange"
 	]);
 	const [inner, setInner] = createSignal(false);
@@ -2528,6 +2641,7 @@ function FloatButtonRoot(props) {
 	};
 	const context = {
 		open,
+		size: () => own.size ?? "lg",
 		toggle: () => setOpen(!open()),
 		close: () => setOpen(false)
 	};
@@ -2549,13 +2663,20 @@ function FloatButtonRoot(props) {
 		}
 	});
 }
+const STEP_DOWN = {
+	lg: "md",
+	md: "sm",
+	sm: "sm"
+};
 function FloatButtonTrigger(props) {
 	const [own, rest] = splitProps(props, ["label", "children"]);
 	const context = useContext(FloatButtonContextKey);
 	return createComponent(Button, mergeProps(rest, {
 		variant: "solid",
 		square: true,
-		size: "lg",
+		get size() {
+			return context?.size() ?? "lg";
+		},
 		onClick: () => context?.toggle(),
 		get ["aria-label"]() {
 			return own.label || "Actions";
@@ -2577,7 +2698,7 @@ function FloatButtonItem(props) {
 	]);
 	const context = useContext(FloatButtonContextKey);
 	return (() => {
-		var _el$2 = _tmpl$2$14(), _el$3 = _el$2.firstChild;
+		var _el$2 = _tmpl$2$15(), _el$3 = _el$2.firstChild;
 		spread(_el$2, mergeProps(rest, {
 			"data-scope": "float-button",
 			"data-part": "item"
@@ -2585,7 +2706,9 @@ function FloatButtonItem(props) {
 		insert(_el$2, createComponent(Button, {
 			variant: "outline",
 			square: true,
-			size: "md",
+			get size() {
+				return context ? STEP_DOWN[context.size()] : "md";
+			},
 			get disabled() {
 				return own.disabled;
 			},
@@ -2630,13 +2753,18 @@ const Format = Format$1;
 //#endregion
 //#region src/components/form/index.tsx
 var _tmpl$$26 = /*#__PURE__*/ template(`<form>`);
-var _tmpl$2$13 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2$14 = /*#__PURE__*/ template(`<div>`);
 const FormContext = createContext();
 /** Walk a Standard Schema issue's path back to the dotted name the
 * matching FormField declared. */
 function issueName(issue) {
 	return (issue.path ?? []).map((segment) => typeof segment === "object" ? segment.key : segment).join(".");
 }
+/** 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 + ".");
+}
 /**
 * The validation scheduler: one reactive error map, a submit that
 * validates before it emits, live re-validation on the events the
@@ -2662,7 +2790,7 @@ function Form(props) {
 		disabled: own.disabled ?? false
 	};
 	let run = 0;
-	async function runValidate() {
+	async function runValidate(scope) {
 		const seq = ++run;
 		const next = /* @__PURE__ */ new Map();
 		if (own.validate) for (const error of await own.validate(own.state)) next.set(error.name, error.message);
@@ -2673,6 +2801,13 @@ function Form(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) setErrorsMap(merged);
+			return merged;
+		}
 		if (seq === run) setErrorsMap(next);
 		return next;
 	}
@@ -2726,8 +2861,9 @@ function Form(props) {
 		]).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);
 	}
 	const [formEl, setFormEl] = createSignal(null);
 	onMount(() => {
@@ -2774,7 +2910,7 @@ function FormField(props) {
 	const invalid = () => own.invalid || error() != null;
 	const disabled = () => own.disabled || (form?.disabled ?? false);
 	return (() => {
-		var _el$2 = _tmpl$2$13();
+		var _el$2 = _tmpl$2$14();
 		spread(_el$2, mergeProps(rest, { get ["data-form-field"]() {
 			return own.name;
 		} }), false, true);
@@ -2876,8 +3012,16 @@ injectComponentStyle("hover-card");
 //#endregion
 //#region src/components/icon/index.tsx
 var _tmpl$$24 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$2$13 = /*#__PURE__*/ template(`<svg fill=currentColor aria-hidden=true>`);
 function Icon(props) {
-	const [own, rest] = splitProps(props, ["size", "label"]);
+	const [own, rest] = splitProps(props, [
+		"size",
+		"label",
+		"name",
+		"children"
+	]);
+	const glyph = own.name && own.children == null ? getIcon(own.name) : void 0;
+	if (own.name && own.children == null && !glyph) console.error(`[icons] unknown icon name "${own.name}" — extend packages/icons/icons.config.json and rerun the generator`);
 	return (() => {
 		var _el$ = _tmpl$$24();
 		spread(_el$, mergeProps(rest, {
@@ -2895,7 +3039,20 @@ function Icon(props) {
 			get ["data-size"]() {
 				return own.size ?? "inherit";
 			}
-		}), false, false);
+		}), false, true);
+		insert(_el$, () => own.children ?? (glyph ? (() => {
+			var _el$2 = _tmpl$2$13();
+			effect((_p$) => {
+				var _v$ = `0 0 ${glyph.width ?? 24} ${glyph.height ?? 24}`, _v$2 = glyph.body;
+				_v$ !== _p$.e && setAttribute(_el$2, "viewBox", _p$.e = _v$);
+				_v$2 !== _p$.t && (_el$2.innerHTML = _p$.t = _v$2);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0
+			});
+			return _el$2;
+		})() : null));
 		return _el$;
 	})();
 }
@@ -3465,13 +3622,18 @@ const List = Object.assign(Root$4, {
 });
 injectComponentStyle("list");
 //#endregion
-//#region src/components/listbox/index.ts
-/** Ark's Listbox, dressed in the paper-and-ink system: quiet rows of ink
-* where the checked row alone takes the flat primary fill. The API is
-* Ark's own — Root, Label, Input, Content, Empty, Item, ItemText,
-* ItemIndicator, ItemGroup, ItemGroupLabel, ValueText, plus
-* createListCollection. */
-const Listbox = Listbox$1;
+//#region src/components/listbox/index.tsx
+const ArkRoot$1 = Listbox$1.Root;
+function ListboxRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(ArkRoot$1, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const Listbox = {
+	...Listbox$1,
+	Root: ListboxRoot
+};
 injectComponentStyle("listbox");
 //#endregion
 //#region src/components/marquee/index.ts
@@ -3513,13 +3675,37 @@ function Masonry(props) {
 }
 injectComponentStyle("masonry");
 //#endregion
-//#region src/components/menu/index.ts
+//#region src/components/menu/index.tsx
 /** Ark's Menu, dressed in the paper-and-ink system: a quiet paper vessel on
 * elevation, hover as light on the row, checked items as the flat ink fill.
 * 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;
+/** The row rung rides the context because Ark's Root renders no DOM of
+* its own — the vessel (Content) is the element the rung can land on,
+* and the Portal breaks CSS ancestry between the two. The getter keeps
+* the rung live, so a bound size retunes an open vessel. */
+const MenuSizeContext = createContext();
+function MenuRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(MenuSizeContext.Provider, {
+		value: () => own.size ?? "md",
+		get children() {
+			return createComponent(Menu$1.Root, rest);
+		}
+	});
+}
+function MenuContent(props) {
+	const size = useContext(MenuSizeContext);
+	return createComponent(Menu$1.Content, mergeProps(props, { get ["data-size"]() {
+		return size?.() ?? "md";
+	} }));
+}
+const Menu = {
+	...Menu$1,
+	Root: MenuRoot,
+	Content: MenuContent
+};
 injectComponentStyle("menu");
 //#endregion
 //#region src/components/menubar/index.tsx
@@ -3739,7 +3925,10 @@ function MentionsVessel(props) {
 						var _el$ = _tmpl$$13();
 						spread(_el$, mergeProps(contentProps, {
 							"data-scope": "mentions",
-							"data-part": "popup"
+							"data-part": "popup",
+							get ["data-size"]() {
+								return props.size ?? "md";
+							}
 						}), false, true);
 						insert(_el$, createComponent(For, {
 							get each() {
@@ -3785,6 +3974,7 @@ function Mentions(props) {
 		"placeholder",
 		"autoresize",
 		"invalid",
+		"size",
 		"onValueChange"
 	]);
 	const [internal, setInternal] = createSignal("");
@@ -3818,7 +4008,10 @@ function Mentions(props) {
 		var _el$3 = _tmpl$$13();
 		spread(_el$3, mergeProps(rest, {
 			"data-scope": "mentions",
-			"data-part": "root"
+			"data-part": "root",
+			get ["data-size"]() {
+				return own.size ?? "md";
+			}
 		}), false, true);
 		insert(_el$3, createComponent(Textarea, {
 			ref: (node) => setFieldEl(node),
@@ -3853,6 +4046,9 @@ function Mentions(props) {
 			get active() {
 				return mentions.active();
 			},
+			get size() {
+				return own.size ?? "md";
+			},
 			get anchor() {
 				return fieldEl();
 			},
@@ -3902,7 +4098,8 @@ function Root$3(props) {
 		"min",
 		"max",
 		"level",
-		"label"
+		"label",
+		"size"
 	]);
 	const min = () => own.min ?? 0;
 	const max = () => own.max ?? 100;
@@ -3929,6 +4126,9 @@ function Root$3(props) {
 			},
 			"data-scope": "meter",
 			"data-part": "root",
+			get ["data-size"]() {
+				return own.size ?? "md";
+			},
 			get ["data-level"]() {
 				return memo(() => level() !== "normal")() ? level() : void 0;
 			},
@@ -3967,12 +4167,17 @@ injectComponentStyle("meter");
 const NavigationMenu = NavigationMenu$1;
 injectComponentStyle("navigation-menu");
 //#endregion
-//#region src/components/number-input/index.ts
-/** Ark's NumberInput, dressed in the paper-and-ink system: the stepper
-* 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;
+//#region src/components/number-input/index.tsx
+function NumberInputRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(NumberInput$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const NumberInput = {
+	...NumberInput$1,
+	Root: NumberInputRoot
+};
 injectComponentStyle("number-input");
 //#endregion
 //#region src/components/page-header/index.tsx
@@ -4006,29 +4211,43 @@ const PageHeader = Object.assign(Root$2, {
 });
 injectComponentStyle("page-header");
 //#endregion
-//#region src/components/pagination/index.ts
-/**
-* Pagination — paged navigation.
-*
-* Parts: Root, Item (page seals), Ellipsis, PrevTrigger, NextTrigger,
-* FirstTrigger, LastTrigger. Items carry data-selected.
-*/
-const Pagination = Pagination$1;
+//#region src/components/pagination/index.tsx
+function PaginationRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(Pagination$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const Pagination = {
+	...Pagination$1,
+	Root: PaginationRoot
+};
 injectComponentStyle("pagination");
 //#endregion
-//#region src/components/password-input/index.ts
-/** Ark's PasswordInput, dressed in the paper-and-ink system: the reveal
-* 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;
+//#region src/components/password-input/index.tsx
+function PasswordInputRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(PasswordInput$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+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;
+//#region src/components/pin-input/index.tsx
+function PinInputRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(PinInput$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const PinInput = {
+	...PinInput$1,
+	Root: PinInputRoot
+};
 injectComponentStyle("pin-input");
 //#endregion
 //#region src/components/popconfirm/index.tsx
@@ -4111,12 +4330,17 @@ injectComponentStyle("popconfirm");
 const Popover = Popover$1;
 injectComponentStyle("popover");
 //#endregion
-//#region src/components/progress/index.ts
-/** Ark's Progress, dressed in the paper-and-ink system: a quiet hairline
-* 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;
+//#region src/components/progress/index.tsx
+function ProgressRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(Progress$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const Progress = {
+	...Progress$1,
+	Root: ProgressRoot
+};
 injectComponentStyle("progress");
 //#endregion
 //#region src/components/progress-group/index.tsx
@@ -4200,20 +4424,30 @@ injectComponentStyle("progress-group");
 const QrCode = QrCode$1;
 injectComponentStyle("qr-code");
 //#endregion
-//#region src/components/radio-group/index.ts
-/** Ark's RadioGroup, dressed in the paper-and-ink system: a column of
-* 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;
+//#region src/components/radio-group/index.tsx
+function RadioGroupRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(RadioGroup$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const RadioGroup = {
+	...RadioGroup$1,
+	Root: RadioGroupRoot
+};
 injectComponentStyle("radio-group");
 //#endregion
-//#region src/components/rating-group/index.ts
-/** Ark's RatingGroup, dressed in the paper-and-ink system: a row of quiet
-* 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;
+//#region src/components/rating-group/index.tsx
+function RatingGroupRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(RatingGroup$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const RatingGroup = {
+	...RatingGroup$1,
+	Root: RatingGroupRoot
+};
 injectComponentStyle("rating-group");
 //#endregion
 //#region src/components/scroll-area/index.ts
@@ -4223,21 +4457,36 @@ injectComponentStyle("rating-group");
 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,
+//#region src/components/segment-group/index.tsx
+function SegmentGroupRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent$1(SegmentGroup$1.Root, {
+		get "data-size"() {
+			return own.size ?? "md";
+		},
+		...rest
+	});
+}
+/** 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
-/** Ark's Select, dressed in the paper-and-ink system: the trigger is the
-* whole control and its list dissolves open as a paper vessel, the checked
-* 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;
+//#region src/components/select/index.tsx
+function SelectRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(Select$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const Select = {
+	...Select$1,
+	Root: SelectRoot
+};
 injectComponentStyle("select");
 //#endregion
 //#region src/components/separator/index.tsx
@@ -4287,12 +4536,17 @@ function Skeleton(props) {
 }
 injectComponentStyle("skeleton");
 //#endregion
-//#region src/components/slider/index.ts
-/** Ark's Slider, dressed in the paper-and-ink system: a recessed track the
-* 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;
+//#region src/components/slider/index.tsx
+function SliderRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(Slider$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const Slider = {
+	...Slider$1,
+	Root: SliderRoot
+};
 injectComponentStyle("slider");
 //#endregion
 //#region src/components/spinner/index.tsx
@@ -4528,15 +4782,17 @@ const Stat = Object.assign(Root$1, {
 });
 injectComponentStyle("stat");
 //#endregion
-//#region src/components/steps/index.ts
-/**
-* Steps — linear progress through a sequence.
-*
-* Parts: Root, List, Item, Trigger, Indicator, Separator, Content,
-* PrevTrigger, NextTrigger, Progress. Indicator and Separator carry
-* data-complete / data-current / data-incomplete.
-*/
-const Steps = Steps$1;
+//#region src/components/steps/index.tsx
+function StepsRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(Steps$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const Steps = {
+	...Steps$1,
+	Root: StepsRoot
+};
 injectComponentStyle("steps");
 //#endregion
 //#region src/components/swap/index.ts
@@ -4547,12 +4803,17 @@ injectComponentStyle("steps");
 const Swap = Swap$1;
 injectComponentStyle("swap");
 //#endregion
-//#region src/components/switch/index.ts
-/** Ark's Switch, dressed in the paper-and-ink system: a track that rests
-* 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;
+//#region src/components/switch/index.tsx
+function SwitchRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(Switch$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const Switch = {
+	...Switch$1,
+	Root: SwitchRoot
+};
 injectComponentStyle("switch");
 //#endregion
 //#region src/components/table/index.tsx
@@ -4716,24 +4977,30 @@ function DataTable(props) {
 	const rows = createMemo(() => table.getRowModel().rows);
 	/** The declared row height is the density-scale baseline; the live
 	* scale comes off the document so the virtual window matches what CSS
-	* actually renders. */
+	* actually renders. It is read once and re-read only when the density
+	* or scene attribute moves — estimateSize runs on every scroll frame. */
 	const baseRowHeight = () => props.rowHeight ?? 40;
-	const densityScale = () => {
+	let densityScale = 1;
+	const readDensityScale = () => {
 		const value = Number(getComputedStyle(document.documentElement).getPropertyValue("--bs-density-scale"));
-		return Number.isFinite(value) && value > 0 ? value : 1;
+		densityScale = Number.isFinite(value) && value > 0 ? value : 1;
 	};
 	const virtualizer = createVirtualizer({
 		get count() {
 			return rows().length;
 		},
 		getScrollElement: () => viewport(),
-		estimateSize: () => baseRowHeight() * densityScale(),
+		estimateSize: () => baseRowHeight() * densityScale,
 		getItemKey: (index) => rows()[index]?.id ?? index,
 		overscan: 8
 	});
 	onMount(() => {
 		if (typeof MutationObserver === "undefined") return;
-		const densityObserver = new MutationObserver(() => virtualizer.measure());
+		readDensityScale();
+		const densityObserver = new MutationObserver(() => {
+			readDensityScale();
+			virtualizer.measure();
+		});
 		densityObserver.observe(document.documentElement, {
 			attributes: true,
 			attributeFilter: ["data-density", "data-scene"]
@@ -5165,7 +5432,7 @@ function DataTable(props) {
 				insert(_el$25, () => `${table.getRowCount()} rows`);
 				insert(_el$26, createComponent(Select.Root, {
 					get collection() {
-						return createListCollection({ items: (props.pageSizeOptions ?? [
+						return createListCollection$1({ items: (props.pageSizeOptions ?? [
 							10,
 							20,
 							50
@@ -5280,23 +5547,30 @@ function DataTable(props) {
 injectComponentStyle("table");
 delegateEvents(["click", "input"]);
 //#endregion
-//#region src/components/tabs/index.ts
-/**
-* Tabs — tabbed navigation.
-*
-* Parts: Root, List, Trigger, Content, Indicator (machine-positioned ink
-* bar on the list rule).
-*/
-const Tabs = Tabs$1;
+//#region src/components/tabs/index.tsx
+function TabsRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(Tabs$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const Tabs = {
+	...Tabs$1,
+	Root: TabsRoot
+};
 injectComponentStyle("tabs");
 //#endregion
-//#region src/components/tags-input/index.ts
-/** Ark's TagsInput, dressed in the paper-and-ink system: one field vessel
-* whose chips rest as quiet ink and lift only a tone when edited. The API
-* is Ark's own — Root, Label, Control, Input, ClearTrigger, Item,
-* ItemPreview, ItemText, ItemInput, ItemDeleteTrigger, HiddenInput,
-* Context. */
-const TagsInput = TagsInput$1;
+//#region src/components/tags-input/index.tsx
+function TagsInputRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(TagsInput$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const TagsInput = {
+	...TagsInput$1,
+	Root: TagsInputRoot
+};
 injectComponentStyle("tags-input");
 //#endregion
 //#region src/components/timeline/index.tsx
@@ -5388,11 +5662,17 @@ const Typography = Object.assign(Display, {
 });
 injectComponentStyle("typography");
 //#endregion
-//#region src/components/toggle-group/index.ts
-/** 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;
+//#region src/components/toggle-group/index.tsx
+function ToggleGroupRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(ToggleGroup$1.Root, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const ToggleGroup = {
+	...ToggleGroup$1,
+	Root: ToggleGroupRoot
+};
 injectComponentStyle("toggle-group");
 //#endregion
 //#region src/components/transfer/index.tsx
@@ -5595,6 +5875,7 @@ function TreeSelect(props) {
 		"placeholder",
 		"filterable",
 		"disabled",
+		"size",
 		"onValueChange"
 	]);
 	const [open, setOpen] = createSignal(false);
@@ -5715,6 +5996,9 @@ function TreeSelect(props) {
 					"type": "button",
 					"data-scope": "tree-select",
 					"data-part": "control",
+					get ["data-size"]() {
+						return own.size ?? "md";
+					},
 					get ["data-open"]() {
 						return open() ? "" : void 0;
 					},
@@ -5733,6 +6017,9 @@ function TreeSelect(props) {
 					return createComponent(Popover$1.Content, {
 						"data-scope": "tree-select",
 						"data-part": "content",
+						get ["data-size"]() {
+							return own.size ?? "md";
+						},
 						get children() {
 							return [createComponent(Show, {
 								get when() {
@@ -5801,15 +6088,18 @@ function TreeSelect(props) {
 injectComponentStyle("tree-select");
 injectComponentStyle("tree-view");
 //#endregion
-//#region src/components/tree-view/index.ts
-/** Ark's TreeView, dressed in the paper-and-ink system: quiet rows where
-* selection is pure light on the paper, one hairline plumb line per depth,
-* and branches that swing open on the spring. The API is Ark's own —
-* Root, Label, Tree, NodeProvider, NodeContext, Branch, BranchControl,
-* BranchTrigger, BranchIndicator, BranchText, BranchContent,
-* BranchIndentGuide, Item, ItemText, ItemIndicator, NodeCheckbox,
-* NodeRenameInput, plus createTreeCollection. */
-const TreeView = TreeView$1;
+//#region src/components/tree-view/index.tsx
+const ArkRoot = TreeView$1.Root;
+function TreeViewRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(ArkRoot, mergeProps(rest, { get ["data-size"]() {
+		return own.size ?? "md";
+	} }));
+}
+const TreeView = {
+	...TreeView$1,
+	Root: TreeViewRoot
+};
 injectComponentStyle("tree-view");
 //#endregion
 //#region src/components/watermark/index.tsx
@@ -5879,4 +6169,4 @@ function Watermark(props) {
 }
 injectComponentStyle("watermark");
 //#endregion
-export { Accordion, Action, Action as AiAction, Affix, Ai, AiActions, Attachment as AiAttachment, Attachment, Attachments as AiAttachments, Attachments, AiContent, AiConversation, AiLoader, Message as AiMessage, Message, PromptInput as AiPromptInput, PromptInput, Reasoning as AiReasoning, Reasoning, Response as AiResponse, Response, Source as AiSource, Source, Sources as AiSources, Sources, Suggestion as AiSuggestion, Suggestion, Tool as AiTool, Tool, Alert, AngleSlider, AspectRatio, AutoComplete, Avatar, AvatarGroup, BackTop, Badge, Banner, Breadcrumb, Button, ButtonGroup, ButtonGroupRoot, Calendar, Card, Carousel, CascadeSelect, Checkbox, CheckboxGroup, Chip, ClientOnly, Clipboard, Collapsible, ColorPicker, Combobox, Command, Comment, ConfigContextKey, ConfigProvider, Container, DataTable, DateInput, DatePicker, Descriptions, Dialog, DownloadTrigger, Drawer, DynamicInput, Editable, Ellipsis, Empty, Field, Fieldset, FileUpload, FlexRender, FloatButton, FloatButtonContextKey, FloatingPanel, FocusTrap, Form, FormField, Format, Frame, Grid, Highlight, HoverCard, Icon, Image, ImageCropper, ImageViewer, Input, InputGroup, JsonTreeView, Kbd, Layout, Link, List, Listbox, Marquee, Masonry, Mentions, MentionsVessel, Menu, Menubar, Meter, NavigationMenu, NumberInput, PageHeader, Pagination, PasswordInput, PinInput, Popconfirm, Popover, Presence, PresenceProvider, Progress, ProgressGroup, QrCode, RadioGroup, RatingGroup, ScrollArea, SegmentGroup, Select, Separator, SignaturePad, Skeleton, Slider, Spinner, SplitButton, Splitter, Stack, Stat, Steps, Swap, Switch, Tabs, TagsInput, Textarea, Timeline, Timer, Toast, Toaster, Toc, Toggle, ToggleGroup, Tooltip, Tour, Transfer, TreeSelect, TreeView, Typography, Watermark, createColumnHelper, createFileTreeCollection, createGridCollection, createToaster, createTreeCollection, useAsyncList, useConfig, useDownload, useListCollection, useListSelection, useMentions, usePresence, usePresenceContext, useTour };
+export { Accordion, Action, Action as AiAction, Affix, Ai, AiActions, Attachment as AiAttachment, Attachment, Attachments as AiAttachments, Attachments, AiContent, AiConversation, AiLoader, Message as AiMessage, Message, PromptInput as AiPromptInput, PromptInput, Reasoning as AiReasoning, Reasoning, Response as AiResponse, Response, Source as AiSource, Source, Sources as AiSources, Sources, Suggestion as AiSuggestion, Suggestion, Tool as AiTool, Tool, Alert, AngleSlider, AspectRatio, AutoComplete, Avatar, AvatarGroup, BackTop, Badge, Banner, Breadcrumb, Button, ButtonGroup, ButtonGroupRoot, Calendar, Card, Carousel, CascadeSelect, Checkbox, CheckboxGroup, Chip, ClientOnly, Clipboard, Collapsible, ColorPicker, Combobox, Command, Comment, ConfigContextKey, ConfigProvider, Container, DataTable, DateInput, DatePicker, Descriptions, Dialog, DownloadTrigger, Drawer, DynamicInput, Editable, Ellipsis, Empty, Field, Fieldset, FileUpload, FlexRender, FloatButton, FloatButtonContextKey, FloatingPanel, FocusTrap, Form, FormField, Format, Frame, Grid, Highlight, HoverCard, Icon, Image, ImageCropper, ImageViewer, Input, InputGroup, JsonTreeView, Kbd, Layout, Link, List, Listbox, Marquee, Masonry, Mentions, MentionsVessel, Menu, Menubar, Meter, NavigationMenu, NumberInput, PageHeader, Pagination, PasswordInput, PinInput, Popconfirm, Popover, Presence, PresenceProvider, Progress, ProgressGroup, QrCode, RadioGroup, RatingGroup, ScrollArea, SegmentGroup, Select, Separator, SignaturePad, Skeleton, Slider, Spinner, SplitButton, Splitter, Stack, Stat, Steps, Swap, Switch, Tabs, TagsInput, Textarea, Timeline, Timer, Toast, Toaster, Toc, Toggle, ToggleGroup, Tooltip, Tour, Transfer, TreeSelect, TreeView, Typography, Watermark, createColumnHelper, createFileTreeCollection, createGridCollection, createListCollection, createToaster, createTreeCollection, useAsyncList, useConfig, useDownload, useListCollection, useListSelection, useMentions, usePresence, usePresenceContext, useTour };