@bysages/react 0.2.0 → 0.2.2

package/dist/index.mjs

@@ -34,6 +34,7 @@ import { Format as Format$1 } from "@ark-ui/react/format";
 import { Frame as Frame$1 } from "@ark-ui/react/frame";
 import { Highlight as Highlight$1 } from "@ark-ui/react/highlight";
 import { HoverCard as HoverCard$1 } from "@ark-ui/react/hover-card";
+import { getIcon } from "@bysages/icons";
 import { ImageCropper as ImageCropper$1 } from "@ark-ui/react/image-cropper";
 import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/react/json-tree-view";
 import { Listbox as Listbox$1 } from "@ark-ui/react/listbox";
@@ -242,7 +243,7 @@ function useMentions(options, textarea, handlers) {
 * its own anatomy (the textarea rides where the host puts it) and the
 * vessel still points at the right place. Shares the detection state
 * with the host through `useMentions`. */
-function MentionsVessel({ open = false, matches = [], active = 0, anchor = null, onInsert, onActiveChange, onOpenChange }) {
+function MentionsVessel({ size = "md", open = false, matches = [], active = 0, anchor = null, onInsert, onActiveChange, onOpenChange }) {
 	return /* @__PURE__ */ jsx(Popover$1.Root, {
 		open,
 		onOpenChange: (details) => onOpenChange?.(details.open),
@@ -255,6 +256,7 @@ function MentionsVessel({ open = false, matches = [], active = 0, anchor = null,
 			children: /* @__PURE__ */ jsx("div", {
 				"data-scope": "mentions",
 				"data-part": "popup",
+				"data-size": size,
 				children: matches.map((entry, index) => /* @__PURE__ */ jsx("div", {
 					"data-scope": "mentions",
 					"data-part": "option",
@@ -268,7 +270,7 @@ function MentionsVessel({ open = false, matches = [], active = 0, anchor = null,
 		}) }) })
 	});
 }
-function Mentions({ items = [], value, trigger = "@", placeholder, autoresize = false, invalid = false, onValueChange, children, ...rest }) {
+function Mentions({ items = [], value, trigger = "@", placeholder, autoresize = false, invalid = false, size = "md", onValueChange, children, ...rest }) {
 	const [internal, setInternal] = useState("");
 	const fieldRef = useRef(null);
 	const el = () => fieldRef.current;
@@ -293,6 +295,7 @@ function Mentions({ items = [], value, trigger = "@", placeholder, autoresize =
 		...rest,
 		"data-scope": "mentions",
 		"data-part": "root",
+		"data-size": size,
 		children: [
 			/* @__PURE__ */ jsx(Field.Textarea, {
 				ref: fieldRef,
@@ -307,6 +310,7 @@ function Mentions({ items = [], value, trigger = "@", placeholder, autoresize =
 				"data-part": "textarea"
 			}),
 			/* @__PURE__ */ jsx(MentionsVessel, {
+				size,
 				open: mentions.open,
 				matches: mentions.matches,
 				active: mentions.active,
@@ -544,12 +548,52 @@ 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
 function Response({ content, highlighter, copyLabel = "Copy code", copiedLabel = "Copied", ...rest }) {
 	const root = useRef(null);
 	useEffect(() => {
 		const host = root.current;
 		if (host) decorateCodeCopy(host, copyLabel);
+		if (host) wrapResponseTables(host);
 	}, [
 		content,
 		highlighter,
@@ -870,11 +914,20 @@ const Alert = Object.assign(AlertRoot, {
 injectComponentStyle("alert");
 //#endregion
 //#region src/components/angle-slider/index.tsx
+function AngleSliderRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(AngleSlider$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
 /** 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;
+const AngleSlider = {
+	...AngleSlider$1,
+	Root: AngleSliderRoot
+};
 injectComponentStyle("angle-slider");
 //#endregion
 //#region src/components/aspect-ratio/index.tsx
@@ -892,7 +945,7 @@ function AspectRatio({ ratio = "1 / 1", ...rest }) {
 injectComponentStyle("aspect-ratio");
 //#endregion
 //#region src/components/autocomplete/index.tsx
-function AutoComplete({ value = "", items = [], placeholder, filter, onValueChange, ...rest }) {
+function AutoComplete({ value = "", items = [], placeholder, filter, size = "md", onValueChange, ...rest }) {
 	const { collection, filter: filterItems } = useListCollection$1({
 		initialItems: items,
 		filter: (item, input) => filter ? filter(item, input) : item.toLowerCase().includes(input.toLowerCase())
@@ -902,6 +955,7 @@ function AutoComplete({ value = "", items = [], placeholder, filter, onValueChan
 		collection,
 		inputValue: value,
 		allowCustomValue: true,
+		"data-size": size,
 		onValueChange: (details) => {
 			const [first] = details.value;
 			if (first != null) onValueChange?.(first);
@@ -930,11 +984,12 @@ const Avatar = Object.assign({}, Avatar$1, { Root: AvatarRoot });
 injectComponentStyle("avatar");
 //#endregion
 //#region src/components/avatar-group/index.tsx
-function AvatarGroup({ children, ...rest }) {
+function AvatarGroup({ size, children, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
 		"data-scope": "avatar-group",
 		"data-part": "root",
+		"data-size": size,
 		children
 	});
 }
@@ -1323,7 +1378,7 @@ const checkGlyph$2 = /* @__PURE__ */ jsx("svg", {
 	"aria-hidden": "true",
 	children: /* @__PURE__ */ jsx("path", { d: "m5 12.5 5 5L19 7" })
 });
-function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigger, filterable = false, multiple = false, disabled = false, onValueChange, ...rest }) {
+function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigger, filterable = false, multiple = false, disabled = false, size = "md", onValueChange, ...rest }) {
 	const id = useId();
 	const locale = useLocaleContext();
 	const env = useEnvironmentContext();
@@ -1453,6 +1508,7 @@ function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigge
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
 		...api.getRootProps(),
+		"data-size": size,
 		children: [/* @__PURE__ */ jsx("div", {
 			...api.getControlProps(),
 			children: /* @__PURE__ */ jsxs("button", {
@@ -1474,6 +1530,7 @@ function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigge
 			...api.getPositionerProps(),
 			children: /* @__PURE__ */ jsxs("div", {
 				...api.getContentProps(),
+				"data-size": size,
 				children: [filterable ? /* @__PURE__ */ jsx("div", {
 					"data-part": "search",
 					children: /* @__PURE__ */ jsx(Input, {
@@ -1509,11 +1566,20 @@ const Carousel = Carousel$1;
 injectComponentStyle("carousel");
 //#endregion
 //#region src/components/checkbox/index.tsx
+function CheckboxRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
 /** 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;
+const Checkbox = {
+	...Checkbox$1,
+	Root: CheckboxRoot
+};
 injectComponentStyle("checkbox");
 //#endregion
 //#region src/components/checkbox-group/index.tsx
@@ -1535,8 +1601,9 @@ const checkGlyph$1 = /* @__PURE__ */ jsx("svg", {
 * the field context, so the invalid and disabled states a Form routes to
 * its name dress every box at once.
 */
-function CheckboxGroup({ value = [], options, layout = "vertical", invalid = false, disabled = false, onValueChange, ...rest }) {
+function CheckboxGroup({ value = [], options, layout = "vertical", size = "md", invalid = false, disabled = false, onValueChange, ...rest }) {
 	const field = useFieldContext();
+	const uid = useId();
 	const selected = new Set(value);
 	const isInvalid = invalid || field?.invalid === true;
 	const isDisabled = disabled || field?.disabled === true;
@@ -1554,6 +1621,11 @@ function CheckboxGroup({ value = [], options, layout = "vertical", invalid = fal
 		"data-layout": layout,
 		"data-invalid": isInvalid ? "" : void 0,
 		children: options.map((option) => /* @__PURE__ */ jsxs(Checkbox$1.Root, {
+			ids: {
+				label: `${uid}:${option.value}:label`,
+				hiddenInput: `${uid}:${option.value}:input`
+			},
+			"data-size": size,
 			checked: selected.has(option.value),
 			invalid: isInvalid,
 			disabled: isDisabled || option.disabled === true,
@@ -1584,14 +1656,25 @@ function Chip({ value, max, tone = "ink", variant = "solid", ...rest }) {
 injectComponentStyle("chip");
 //#endregion
 //#region src/components/clipboard/index.tsx
-/** 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;
+function ClipboardRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(Clipboard$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+const Clipboard = {
+	...Clipboard$1,
+	Root: ClipboardRoot
+};
 injectComponentStyle("clipboard");
 //#endregion
 //#region src/components/color-picker/index.tsx
+function ColorPickerRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(ColorPicker$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
 /** 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,
@@ -1600,16 +1683,24 @@ 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.tsx
-/** 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;
+function ComboboxRoot(props) {
+	const { size = "md", ...rest } = props;
+	return /* @__PURE__ */ jsx(Combobox$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+const Combobox = {
+	...Combobox$1,
+	Root: ComboboxRoot
+};
 injectComponentStyle("combobox");
 //#endregion
 //#region src/components/command/index.tsx
@@ -1834,21 +1925,39 @@ function Container({ size = "readable", padding = true, ...rest }) {
 injectComponentStyle("container");
 //#endregion
 //#region src/components/date-input/index.tsx
+function DateInputRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(DateInput$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
 /** 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;
+const DateInput = {
+	...DateInput$1,
+	Root: DateInputRoot
+};
 injectComponentStyle("date-input");
 //#endregion
 //#region src/components/date-picker/index.tsx
+function DatePickerRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(DatePicker$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
 /** 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;
+const DatePicker = {
+	...DatePicker$1,
+	Root: DatePickerRoot
+};
 injectComponentStyle("date-picker");
 //#endregion
 //#region src/components/descriptions/index.tsx
@@ -1906,7 +2015,7 @@ injectComponentStyle("drawer");
 * grows past `max`, and the group always keeps one row: an entry list
 * that emptied itself would leave the reader no place to type.
 */
-function DynamicInput({ value, min = 0, max, placeholder, addLabel = "Add entry", disabled = false, invalid = false, onValueChange, children: _children, ...rest }) {
+function DynamicInput({ value, min = 0, max, placeholder, addLabel = "Add entry", disabled = false, invalid = false, size = "md", onValueChange, children: _children, ...rest }) {
 	const values = value ?? [""];
 	const update = (index, next) => {
 		const rows = values.slice();
@@ -1934,10 +2043,12 @@ function DynamicInput({ value, min = 0, max, placeholder, addLabel = "Add entry"
 				placeholder,
 				disabled,
 				invalid,
+				size,
 				onValueChange: (next) => update(index, next)
 			}), /* @__PURE__ */ jsx(Button, {
 				variant: "ghost",
 				square: true,
+				size,
 				disabled: disabled || !canRemove,
 				"aria-label": `Remove entry ${index + 1}`,
 				onClick: () => remove(index),
@@ -1948,6 +2059,7 @@ function DynamicInput({ value, min = 0, max, placeholder, addLabel = "Add entry"
 			"data-part": "add",
 			children: /* @__PURE__ */ jsxs(Button, {
 				variant: "ghost",
+				size,
 				disabled: disabled || !canAdd,
 				onClick: () => add(),
 				children: ["+", addLabel]
@@ -1973,11 +2085,16 @@ function crossIcon() {
 injectComponentStyle("dynamic-input");
 //#endregion
 //#region src/components/editable/index.tsx
-/** Ark's Editable, dressed in the paper-and-ink system: bare ink while
-* reading, the full field recipe while editing. The API is Ark's own —
-* Root, Area, Label, Preview, Input, EditTrigger, SubmitTrigger,
-* CancelTrigger, Control. */
-const Editable = Editable$1;
+function EditableRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(Editable$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+const Editable = {
+	...Editable$1,
+	Root: EditableRoot
+};
 injectComponentStyle("editable");
 //#endregion
 //#region src/components/ellipsis/index.tsx
@@ -2033,13 +2150,22 @@ const Fieldset = Fieldset$1;
 injectComponentStyle("fieldset");
 //#endregion
 //#region src/components/file-upload/index.tsx
+function FileUploadRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(FileUpload$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
 /** 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;
+const FileUpload = {
+	...FileUpload$1,
+	Root: FileUploadRoot
+};
 injectComponentStyle("file-upload");
 //#endregion
 //#region src/components/float-button/index.tsx
@@ -2055,7 +2181,7 @@ const FLOAT_BUTTON_CONTEXT = createContext(null);
 * (vessels here: round); this family owns only the mooring, the fan
 * and the fold.
 */
-function Root$7({ open: openProp, placement = "bottom-end", onOpenChange, children, ...rest }) {
+function Root$7({ open: openProp, placement = "bottom-end", size, onOpenChange, children, ...rest }) {
 	const [inner, setInner] = useState(false);
 	const open = openProp !== void 0 ? openProp : inner;
 	const setOpen = (value) => {
@@ -2065,6 +2191,7 @@ function Root$7({ open: openProp, placement = "bottom-end", onOpenChange, childr
 	return /* @__PURE__ */ jsx(FLOAT_BUTTON_CONTEXT.Provider, {
 		value: {
 			open,
+			size: size ?? "lg",
 			toggle: () => setOpen(!open),
 			close: () => setOpen(false)
 		},
@@ -2078,12 +2205,17 @@ function Root$7({ open: openProp, placement = "bottom-end", onOpenChange, childr
 		})
 	});
 }
+const STEP_DOWN = {
+	lg: "md",
+	md: "sm",
+	sm: "sm"
+};
 function Trigger({ label, children }) {
 	const context = useContext(FLOAT_BUTTON_CONTEXT);
 	return /* @__PURE__ */ jsx(Button, {
 		variant: "solid",
 		square: true,
-		size: "lg",
+		size: context?.size ?? "lg",
 		onClick: () => context?.toggle(),
 		"aria-label": label || "Actions",
 		"aria-expanded": context ? context.open : false,
@@ -2098,7 +2230,7 @@ function Item$2({ label, disabled = false, onClick, children }) {
 		children: [/* @__PURE__ */ jsx(Button, {
 			variant: "outline",
 			square: true,
-			size: "md",
+			size: context ? STEP_DOWN[context.size] : "md",
 			disabled,
 			"aria-label": label,
 			onClick: () => {
@@ -2137,6 +2269,11 @@ const FormContext = createContext(null);
 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 error map, a submit that validates
 * before it fires, live re-validation on the events the `validateOn`
@@ -2152,7 +2289,7 @@ function Form({ state, schema, validate, validateOn = [
 ], disabled = false, onSubmit, onError, ref, children, ...rest }) {
 	const [errors, setErrors] = useState(() => /* @__PURE__ */ new Map());
 	const run = useRef(0);
-	async function runValidate() {
+	async function runValidate(scope) {
 		const seq = ++run.current;
 		const next = /* @__PURE__ */ new Map();
 		if (validate) for (const error of await validate(state)) next.set(error.name, error.message);
@@ -2163,7 +2300,13 @@ function Form({ state, schema, validate, validateOn = [
 				if (!next.has(name)) next.set(name, issue.message);
 			}
 		}
-		if (seq === run.current) setErrors(next);
+		if (scope != null) setErrors((prev) => {
+			const merged = /* @__PURE__ */ new Map();
+			for (const [name, message] of prev) if (!inScope(name, scope)) merged.set(name, message);
+			for (const [name, message] of next) if (inScope(name, scope)) merged.set(name, message);
+			return merged;
+		});
+		if (seq === run.current && scope == null) setErrors(next);
 		return next;
 	}
 	function clear(name) {
@@ -2213,8 +2356,9 @@ function Form({ state, schema, validate, validateOn = [
 		if (!validateOn.includes(kind)) 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.current);
-		timer.current = setTimeout(() => void runValidate(), kind === "blur" ? 0 : 300);
+		timer.current = setTimeout(() => void runValidate(scope), kind === "blur" ? 0 : 300);
 	}
 	return /* @__PURE__ */ jsx(FormContext.Provider, {
 		value: {
@@ -2320,7 +2464,9 @@ const HoverCard = HoverCard$1;
 injectComponentStyle("hover-card");
 //#endregion
 //#region src/components/icon/index.tsx
-function Icon({ size = "inherit", label, children, ...rest }) {
+function Icon({ size = "inherit", label, name, children, ...rest }) {
+	const glyph = name && children == null ? getIcon(name) : void 0;
+	if (name && children == null && !glyph) console.error(`[icons] unknown icon name "${name}" — extend packages/icons/icons.config.json and rerun the generator`);
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
 		role: label != null ? "img" : void 0,
@@ -2329,7 +2475,12 @@ function Icon({ size = "inherit", label, children, ...rest }) {
 		"data-scope": "icon",
 		"data-part": "root",
 		"data-size": size,
-		children
+		children: children ?? (glyph ? /* @__PURE__ */ jsx("svg", {
+			viewBox: `0 0 ${glyph.width ?? 24} ${glyph.height ?? 24}`,
+			fill: "currentColor",
+			"aria-hidden": "true",
+			dangerouslySetInnerHTML: { __html: glyph.body }
+		}) : null)
 	});
 }
 injectComponentStyle("icon");
@@ -2751,12 +2902,17 @@ const List = Object.assign(Root$4, {
 injectComponentStyle("list");
 //#endregion
 //#region src/components/listbox/index.tsx
-/** Ark's Listbox, dressed in the paper-and-ink system: quiet rows of ink
-* where the checked row alone takes the flat primary fill. The API is
-* Ark's own — Root, Label, Input, Content, Empty, Item, ItemText,
-* ItemIndicator, ItemGroup, ItemGroupLabel, ValueText, plus
-* createListCollection. */
-const Listbox = Listbox$1;
+function ListboxRoot(props) {
+	const { size = "md", ...rest } = props;
+	return /* @__PURE__ */ jsx(Listbox$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+const Listbox = {
+	...Listbox$1,
+	Root: ListboxRoot
+};
 injectComponentStyle("listbox");
 //#endregion
 //#region src/components/marquee/index.tsx
@@ -2793,12 +2949,35 @@ function Masonry({ columns = 3, gap = "md", ...rest }) {
 injectComponentStyle("masonry");
 //#endregion
 //#region src/components/menu/index.tsx
+/** 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. */
+const MenuSizeContext = createContext("md");
+function MenuRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(MenuSizeContext.Provider, {
+		value: size,
+		children: /* @__PURE__ */ jsx(Menu$1.Root, { ...rest })
+	});
+}
+function MenuContent(props) {
+	const size = useContext(MenuSizeContext);
+	return /* @__PURE__ */ jsx(Menu$1.Content, {
+		...props,
+		"data-size": size
+	});
+}
 /** 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,
+* The parts — 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/index.tsx
@@ -2854,7 +3033,7 @@ const Track = ({ ...rest }) => /* @__PURE__ */ jsx("span", {
 		"data-part": "range"
 	})
 });
-const Root$3 = ({ value, min = 0, max = 100, level = "normal", label, children, ...rest }) => {
+const Root$3 = ({ value, min = 0, max = 100, level = "normal", size = "md", label, children, ...rest }) => {
 	const span = max - min;
 	const ratio = span > 0 ? Math.min(Math.max((value - min) / span, 0), 1) : 0;
 	return /* @__PURE__ */ jsx("div", {
@@ -2866,6 +3045,7 @@ const Root$3 = ({ value, min = 0, max = 100, level = "normal", label, children,
 		"aria-label": label ?? rest["aria-label"],
 		"data-scope": "meter",
 		"data-part": "root",
+		"data-size": size,
 		"data-level": level !== "normal" ? level : void 0,
 		style: {
 			...rest.style,
@@ -2895,36 +3075,72 @@ const NavigationMenu = NavigationMenu$1;
 injectComponentStyle("navigation-menu");
 //#endregion
 //#region src/components/number-input/index.tsx
+function NumberInputRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(NumberInput$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
 /** 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;
+const NumberInput = {
+	...NumberInput$1,
+	Root: NumberInputRoot
+};
 injectComponentStyle("number-input");
 //#endregion
 //#region src/components/pagination/index.tsx
+function PaginationRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(Pagination$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
 /**
 * Pagination — paged navigation.
 *
 * 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.tsx
+function PasswordInputRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(PasswordInput$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
 /** 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;
+const PasswordInput = {
+	...PasswordInput$1,
+	Root: PasswordInputRoot
+};
 injectComponentStyle("password-input");
 //#endregion
 //#region src/components/pin-input/index.tsx
+function PinInputRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(PinInput$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
 /** 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/index.tsx
@@ -2973,11 +3189,20 @@ const Popover = Popover$1;
 injectComponentStyle("popover");
 //#endregion
 //#region src/components/progress/index.tsx
+function ProgressRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(Progress$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
 /** 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;
+const Progress = {
+	...Progress$1,
+	Root: ProgressRoot
+};
 injectComponentStyle("progress");
 //#endregion
 //#region src/components/progress-group/index.tsx
@@ -3042,19 +3267,37 @@ const QrCode = QrCode$1;
 injectComponentStyle("qr-code");
 //#endregion
 //#region src/components/radio-group/index.tsx
+function RadioGroupRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(RadioGroup$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
 /** 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;
+const RadioGroup = {
+	...RadioGroup$1,
+	Root: RadioGroupRoot
+};
 injectComponentStyle("radio-group");
 //#endregion
 //#region src/components/rating-group/index.tsx
+function RatingGroupRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(RatingGroup$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
 /** 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;
+const RatingGroup = {
+	...RatingGroup$1,
+	Root: RatingGroupRoot
+};
 injectComponentStyle("rating-group");
 //#endregion
 //#region src/components/scroll-area/index.tsx
@@ -3065,20 +3308,33 @@ const ScrollArea = ScrollArea$1;
 injectComponentStyle("scroll-area");
 //#endregion
 //#region src/components/segment-group/index.tsx
-/** 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,
+function SegmentGroupRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(SegmentGroup$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+/** 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.tsx
-/** 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;
+function SelectRoot(props) {
+	const { size = "md", ...rest } = props;
+	return /* @__PURE__ */ jsx(Select$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+const Select = {
+	...Select$1,
+	Root: SelectRoot
+};
 injectComponentStyle("select");
 //#endregion
 //#region src/components/separator/index.tsx
@@ -3113,11 +3369,20 @@ function Skeleton({ ...rest }) {
 injectComponentStyle("skeleton");
 //#endregion
 //#region src/components/slider/index.tsx
+function SliderRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(Slider$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
 /** 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;
+const Slider = {
+	...Slider$1,
+	Root: SliderRoot
+};
 injectComponentStyle("slider");
 //#endregion
 //#region src/components/split-button/index.tsx
@@ -3320,6 +3585,12 @@ const Stat = Object.assign(Root$1, {
 injectComponentStyle("stat");
 //#endregion
 //#region src/components/steps/index.tsx
+function StepsRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(Steps$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
 /**
 * Steps — linear progress through a sequence.
 *
@@ -3327,7 +3598,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.tsx
@@ -3339,30 +3613,57 @@ const Swap = Swap$1;
 injectComponentStyle("swap");
 //#endregion
 //#region src/components/switch/index.tsx
+function SwitchRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(Switch$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
 /** 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;
+const Switch = {
+	...Switch$1,
+	Root: SwitchRoot
+};
 injectComponentStyle("switch");
 //#endregion
 //#region src/components/tabs/index.tsx
+function TabsRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
 /**
 * Tabs — tabbed navigation.
 *
 * 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.tsx
+function TagsInputRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(TagsInput$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
 /** 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;
+const TagsInput = {
+	...TagsInput$1,
+	Root: TagsInputRoot
+};
 injectComponentStyle("tags-input");
 //#endregion
 //#region src/components/table/index.tsx
@@ -3570,21 +3871,24 @@ function DataTable(rawProps) {
 	const rows = 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. */
-	const densityScale = () => {
+	* actually renders. It is read once and re-read only when the density
+	* or scene attribute moves — estimateSize runs on every scroll frame. */
+	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 = useVirtualizer({
 		count: rows.length,
 		getScrollElement: () => viewport.current,
-		estimateSize: () => rowHeight * densityScale(),
+		estimateSize: () => rowHeight * densityScale,
 		getItemKey: (index) => rows[index]?.id ?? index,
 		overscan: 8
 	});
 	const [, rerender] = useReducer((count) => count + 1, 0);
 	useEffect(() => {
 		if (!virtual) return;
+		readDensityScale();
 		const observer = new MutationObserver(rerender);
 		observer.observe(document.documentElement, {
 			attributes: true,
@@ -4148,10 +4452,19 @@ const Typography = Object.assign(Display, {
 injectComponentStyle("typography");
 //#endregion
 //#region src/components/toggle-group/index.tsx
+function ToggleGroupRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(ToggleGroup$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
 /** 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.tsx
@@ -4353,7 +4666,7 @@ function TreeSelectRow({ node, indexPath }) {
 		})
 	});
 }
-function TreeSelect({ value, data, placeholder = "Select…", filterable = false, disabled = false, onValueChange, ...rest }) {
+function TreeSelect({ value, data, placeholder = "Select…", filterable = false, disabled = false, size = "md", onValueChange, ...rest }) {
 	const [open, setOpen] = useState(false);
 	const [query, setQuery] = useState("");
 	const filterFns = useFilter({ sensitivity: "base" });
@@ -4421,6 +4734,7 @@ function TreeSelect({ value, data, placeholder = "Select…", filterable = false
 				type: "button",
 				"data-scope": "tree-select",
 				"data-part": "control",
+				"data-size": size,
 				"data-open": open ? "" : void 0,
 				"data-placeholder": label == null ? "" : void 0,
 				disabled,
@@ -4429,6 +4743,7 @@ function TreeSelect({ value, data, placeholder = "Select…", filterable = false
 		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { children: /* @__PURE__ */ jsxs(Popover$1.Content, {
 			"data-scope": "tree-select",
 			"data-part": "content",
+			"data-size": size,
 			children: [filterable ? /* @__PURE__ */ jsx("div", {
 				"data-scope": "tree-select",
 				"data-part": "search",
@@ -4465,14 +4780,17 @@ injectComponentStyle("tree-select");
 injectComponentStyle("tree-view");
 //#endregion
 //#region src/components/tree-view/index.tsx
-/** Ark's TreeView, dressed in the paper-and-ink system: quiet rows where
-* selection is pure light on the paper, one hairline plumb line per depth,
-* 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;
+function TreeViewRoot(props) {
+	const { size = "md", ...rest } = props;
+	return /* @__PURE__ */ jsx(TreeView$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+const TreeView = {
+	...TreeView$1,
+	Root: TreeViewRoot
+};
 injectComponentStyle("tree-view");
 //#endregion
 //#region src/components/watermark/index.tsx