@bysages/react 0.3.1 → 0.4.0

package/dist/components/table/index.mjs

@@ -1,6 +1,8 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { n as useComponentMessages, t as formatMessage } from "../../messages-1jJWtaYU.mjs";
 import { Pagination } from "../pagination/index.mjs";
-import { t as Select$1 } from "../../select-eAHutw56.mjs";
+import { t as Select$1 } from "../../select-ozUFq0zd.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useReducer, useRef } from "react";
@@ -8,36 +10,16 @@ import { createListCollection } from "@ark-ui/react/select";
 import { FlexRender, cellSpanningFeature, columnFilteringFeature, columnOrderingFeature, columnPinningFeature, columnSizingFeature, columnVisibilityFeature, createColumnHelper, createExpandedRowModel, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_arrIncludes, filterFn_equals, filterFn_inDateRange, filterFn_inNumberRange, filterFn_includesString, filterFn_weakEquals, globalFilteringFeature, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_alphanumericCaseSensitive, sortFn_basic, sortFn_datetime, sortFn_text, sortFn_textCaseSensitive, tableFeatures, useTable } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 //#region src/components/table/index.tsx
-/** The pagination bar's arrows — thin chevrons for the row of seals. */
-function pageGlyph(direction) {
-	return /* @__PURE__ */ jsx("svg", {
-		viewBox: "0 0 24 24",
+function pageIcon(direction) {
+	return iconNode(direction === "start" ? "chevron-left" : "chevron-right", {
 		width: 14,
-		height: 14,
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 2,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("path", { d: direction === "start" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6" })
-	});
-}
-/** The page-size select's pointing chevron. */
-function chevronDownGlyph() {
-	return /* @__PURE__ */ jsx("svg", {
-		viewBox: "0 0 24 24",
-		width: 14,
-		height: 14,
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 2.5,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+		height: 14
 	});
 }
+const chevronDownIcon = iconNode("chevron-down", {
+	width: 14,
+	height: 14
+});
 const SELECT_COL_ID = "__select";
 const SELECT_COL_WIDTH = 48;
 /** The list holding `id` and the index inside it, or null when absent. */
@@ -88,18 +70,7 @@ function mark(el, attr, on) {
 	if (on) el.setAttribute(attr, "");
 	else el.removeAttribute(attr);
 }
-function ChevronGlyph() {
-	return /* @__PURE__ */ jsx("svg", {
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 2.5,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": true,
-		children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" })
-	});
-}
+const chevronIcon = iconNode("chevron-right");
 /** React keeps `indeterminate` off the JSX types; the DOM property is the
 * only channel, so the checkbox owns its ref. */
 function SelectBox(props) {
@@ -115,7 +86,7 @@ function SelectBox(props) {
 		onChange: props.onToggle
 	});
 }
-function DataTable(rawProps) {
+function DataTableImpl(rawProps) {
 	injectComponentStyle("table");
 	const props = rawProps;
 	const { selectable = false, sortable = true, filterable = false, showToolbar = true, tree = false, virtual: virtualProp = false, rowHeight = 40, paginated = false, pageSize = 10, pageSizeOptions = [
@@ -431,7 +402,7 @@ function DataTable(rawProps) {
 		const style = { ...pin.style };
 		delete pin.style;
 		const rowSpan = cell.getRowSpan();
-		if (rowSpan > 1) style.gridRow = `span ${rowSpan}`;
+		if (rowSpan > 1) style["--bs-table-row-span"] = String(rowSpan);
 		const spanned = rowSpan > 1 ? { "data-spanned": "" } : {};
 		let content;
 		if (column.id === SELECT_COL_ID) content = /* @__PURE__ */ jsx(SelectBox, {
@@ -452,7 +423,7 @@ function DataTable(rawProps) {
 				"data-leaf": !row.getCanExpand() || void 0,
 				"aria-label": row.getIsExpanded() ? messages.table.collapseRow : messages.table.expandRow,
 				onClick: () => row.toggleExpanded(),
-				children: /* @__PURE__ */ jsx(ChevronGlyph, {})
+				children: chevronIcon
 			}), /* @__PURE__ */ jsx(FlexRender, { cell })]
 		});
 		else content = /* @__PURE__ */ jsx(FlexRender, { cell });
@@ -509,11 +480,8 @@ function DataTable(rawProps) {
 		const style = {};
 		if (virtual) {
 			const item = virtualRows[virtualIndex];
-			style.position = "absolute";
-			style.insetInlineStart = "0";
-			style.inlineSize = "100%";
-			style.transform = `translateY(${item.start}px)`;
-			style.blockSize = `${item.size}px`;
+			style["--bs-table-virtual-row-start"] = `${item.start}px`;
+			style["--bs-table-virtual-row-size"] = `${item.size}px`;
 		}
 		return /* @__PURE__ */ jsx("div", {
 			role: "row",
@@ -564,10 +532,8 @@ function DataTable(rawProps) {
 		"data-scope": "table",
 		"data-part": "body",
 		"data-merge": mergeMode || void 0,
-		style: virtual ? {
-			position: "relative",
-			blockSize: `${totalSize}px`
-		} : void 0,
+		"data-virtual": virtual || void 0,
+		style: virtual ? { "--bs-table-virtual-total": `${totalSize}px` } : void 0,
 		children: [virtual ? virtualRows.map((_, index) => renderRow(rows[index], index)) : rows.map((row) => renderRow(row, -1)), rows.length === 0 ? /* @__PURE__ */ jsx("div", {
 			"data-scope": "table",
 			"data-part": "empty",
@@ -609,10 +575,13 @@ function DataTable(rawProps) {
 			positioning: { placement: "top-start" },
 			children: [/* @__PURE__ */ jsx(Select$1.Control, { children: /* @__PURE__ */ jsxs(Select$1.Trigger, {
 				"aria-label": messages.table.rowsPerPage,
-				children: [/* @__PURE__ */ jsx(Select$1.ValueText, {}), /* @__PURE__ */ jsx(Select$1.Indicator, { children: chevronDownGlyph() })]
+				children: [/* @__PURE__ */ jsx(Select$1.ValueText, {}), /* @__PURE__ */ jsx(Select$1.Indicator, { children: chevronDownIcon })]
 			}) }), /* @__PURE__ */ jsx(Select$1.Positioner, { children: /* @__PURE__ */ jsx(Select$1.Content, { children: sizeItems.items.map((item) => /* @__PURE__ */ jsxs(Select$1.Item, {
 				item,
-				children: [/* @__PURE__ */ jsx(Select$1.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: "✓" })]
+				children: [/* @__PURE__ */ jsx(Select$1.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: iconNode("check", {
+					width: 14,
+					height: 14
+				}) })]
 			}, item.value)) }) })]
 		});
 		const pager = /* @__PURE__ */ jsxs(Pagination.Root, {
@@ -621,13 +590,13 @@ function DataTable(rawProps) {
 			page: pagination.pageIndex + 1,
 			onPageChange: (details) => table.setPageIndex(details.page - 1),
 			children: [
-				/* @__PURE__ */ jsx(Pagination.PrevTrigger, { children: pageGlyph("start") }),
+				/* @__PURE__ */ jsx(Pagination.PrevTrigger, { children: pageIcon("start") }),
 				/* @__PURE__ */ jsx(Pagination.Context, { children: (scope) => scope.pages.map((page, index) => page.type === "ellipsis" ? /* @__PURE__ */ jsx(Pagination.Ellipsis, { index }, `e${index}`) : /* @__PURE__ */ jsx(Pagination.Item, {
 					type: "page",
 					value: page.value,
 					children: String(page.value)
 				}, page.value)) }),
-				/* @__PURE__ */ jsx(Pagination.NextTrigger, { children: pageGlyph("end") })
+				/* @__PURE__ */ jsx(Pagination.NextTrigger, { children: pageIcon("end") })
 			]
 		});
 		return /* @__PURE__ */ jsxs("div", {
@@ -688,5 +657,6 @@ function DataTable(rawProps) {
 		]
 	});
 }
+const DataTable = withSelfRoot(DataTableImpl);
 //#endregion
 export { DataTable, FlexRender, createColumnHelper };

package/dist/components/tabs/index.d.mts

@@ -1,6 +1,27 @@
-import { ComponentProps } from "react";
+import { ComponentProps, ReactNode } from "react";
 import { Tabs as Tabs$1 } from "@ark-ui/react/tabs";
 //#region src/components/tabs/index.d.ts
+export type TabsItem = {
+  value: string;
+  label: string;
+  content?: ReactNode;
+};
+export interface TabsFacadeProps {
+  value?: string;
+  defaultValue?: string;
+  items: TabsItem[];
+  /** The register: a ruled line (default), or each tab its own card. */
+  variant?: "line" | "card";
+  orientation?: "horizontal" | "vertical";
+  /** One rung of the control-height ladder for the tab rows. */
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  onValueChange?: (value: string) => void;
+}
+declare function TabsFacade({ value, defaultValue, items, variant, orientation, size, className, onValueChange }: TabsFacadeProps): import("react").JSX.Element;
+declare namespace TabsFacade {
+  var displayName: string;
+}
 type TabsRootProps = ComponentProps<typeof Tabs$1.Root> & {
   /** One rung of the control-height ladder for the tab rows. */
   size?: "sm" | "md" | "lg";
@@ -14,7 +35,8 @@ declare function TabsRoot({ size, variant, ...rest }: TabsRootProps): import("re
  * Parts: Root, List, Trigger, Content, Indicator (machine-positioned ink
  * bar on the list rule).
  */
-export declare const Tabs: Omit<typeof Tabs$1, "Root"> & {
+type TabsParts = Omit<typeof Tabs$1, "Root"> & {
   Root: typeof TabsRoot;
 };
+export declare const Tabs: typeof TabsFacade & TabsParts;
 //#endregion

package/dist/components/tabs/index.mjs

@@ -1,24 +1,40 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs as Tabs$1 } from "@ark-ui/react/tabs";
 //#region src/components/tabs/index.tsx
+function TabsFacade({ value, defaultValue, items, variant = "line", orientation = "horizontal", size = "md", className, onValueChange }) {
+	return /* @__PURE__ */ jsxs(TabsRoot, {
+		className,
+		size,
+		variant,
+		orientation,
+		defaultValue,
+		...value === void 0 ? {} : { value },
+		onValueChange: (details) => onValueChange?.(details.value),
+		children: [/* @__PURE__ */ jsxs(Tabs$1.List, { children: [items.map((item) => /* @__PURE__ */ jsx(Tabs$1.Trigger, {
+			value: item.value,
+			children: item.label
+		}, item.value)), /* @__PURE__ */ jsx(Tabs$1.Indicator, {})] }), items.map((item) => /* @__PURE__ */ jsx(Tabs$1.Content, {
+			value: item.value,
+			children: item.content
+		}, item.value))]
+	});
+}
+TabsFacade.displayName = "STabs";
 function TabsRoot({ size = "md", variant = "line", ...rest }) {
+	const id = useElementId("tabs", rest);
 	return /* @__PURE__ */ jsx(Tabs$1.Root, {
 		...rest,
+		id,
 		"data-size": size,
 		"data-variant": variant
 	});
 }
-/**
-* Tabs — tabbed navigation.
-*
-* Parts: Root, List, Trigger, Content, Indicator (machine-positioned ink
-* bar on the list rule).
-*/
-const Tabs = {
+const Tabs = Object.assign(TabsFacade, {
 	...Tabs$1,
 	Root: TabsRoot
-};
+});
 injectComponentStyle("tabs");
 //#endregion
 export { Tabs };

package/dist/components/tags-input/index.d.mts

@@ -1,17 +1,42 @@
-import { ComponentProps } from "react";
+import { ComponentProps, ReactNode } from "react";
 import { TagsInput as TagsInput$1 } from "@ark-ui/react/tags-input";
 //#region src/components/tags-input/index.d.ts
 type TagsInputRootProps = ComponentProps<typeof TagsInput$1.Root> & {
   /** One rung of the control-height ladder for the vessel at rest. */
   size?: "sm" | "md" | "lg";
 };
-declare function TagsInputRoot({ size, ...rest }: TagsInputRootProps): import("react").JSX.Element;
-/** 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. */
-export declare const TagsInput: Omit<typeof TagsInput$1, "Root"> & {
+declare function TagsInputRoot(props: TagsInputRootProps): import("react").JSX.Element;
+interface TagsInputFacadeProps {
+  value?: string[];
+  defaultValue?: string[];
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  /** Show the clear-all control when values exist. */
+  clearable?: boolean;
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: string[]) => void;
+  children?: ReactNode;
+}
+/** The one-tag path: one labelled vessel whose values become editable
+ * chips. Delimiters, limits, and custom validation stay on the anatomy. */
+declare function TagsInputFacade({ value, defaultValue, label, placeholder, disabled, invalid, required, clearable, size, onValueChange }: TagsInputFacadeProps): import("react").JSX.Element;
+export declare const TagsInput: typeof TagsInputFacade & {
   Root: typeof TagsInputRoot;
+  ClearTrigger: import("react").ForwardRefExoticComponent<TagsInput$1.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Context: (props: TagsInput$1.ContextProps) => ReactNode;
+  Control: import("react").ForwardRefExoticComponent<TagsInput$1.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
+  HiddenInput: import("react").ForwardRefExoticComponent<TagsInput$1.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+  Input: import("react").ForwardRefExoticComponent<TagsInput$1.InputProps & import("react").RefAttributes<HTMLInputElement>>;
+  Item: import("react").ForwardRefExoticComponent<TagsInput$1.ItemProps & import("react").RefAttributes<HTMLDivElement>>;
+  ItemContext: (props: TagsInput$1.ItemContextProps) => ReactNode;
+  ItemDeleteTrigger: import("react").ForwardRefExoticComponent<TagsInput$1.ItemDeleteTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+  ItemInput: import("react").ForwardRefExoticComponent<TagsInput$1.ItemInputProps & import("react").RefAttributes<HTMLInputElement>>;
+  ItemPreview: import("react").ForwardRefExoticComponent<TagsInput$1.ItemPreviewProps & import("react").RefAttributes<HTMLDivElement>>;
+  ItemText: import("react").ForwardRefExoticComponent<TagsInput$1.ItemTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+  Label: import("react").ForwardRefExoticComponent<TagsInput$1.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<TagsInput$1.RootProviderProps & import("react").RefAttributes<HTMLDivElement>>;
 };
 //#endregion

package/dist/components/tags-input/index.mjs

@@ -1,22 +1,54 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { TagsInput as TagsInput$1 } from "@ark-ui/react/tags-input";
 //#region src/components/tags-input/index.tsx
-function TagsInputRoot({ size = "md", ...rest }) {
+function TagsInputRoot(props) {
+	const id = useElementId("tags-input", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(TagsInput$1.Root, {
 		...rest,
+		id,
 		"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 = {
+const closeIcon = iconNode("x", {
+	width: 14,
+	height: 14
+});
+/** The one-tag path: one labelled vessel whose values become editable
+* chips. Delimiters, limits, and custom validation stay on the anatomy. */
+function TagsInputFacade({ value, defaultValue, label, placeholder, disabled = false, invalid = false, required = false, clearable = true, size = "md", onValueChange }) {
+	return /* @__PURE__ */ jsxs(TagsInputRoot, {
+		size,
+		disabled,
+		invalid,
+		required,
+		defaultValue,
+		...value === void 0 ? {} : {
+			value,
+			onValueChange: (details) => onValueChange?.(details.value)
+		},
+		children: [
+			label ? /* @__PURE__ */ jsx(TagsInput$1.Label, { children: label }) : null,
+			/* @__PURE__ */ jsxs(TagsInput$1.Control, { children: [
+				/* @__PURE__ */ jsx(TagsInput$1.Context, { children: (tagsInput) => tagsInput.value.map((tag, index) => /* @__PURE__ */ jsxs(TagsInput$1.Item, {
+					index,
+					value: tag,
+					children: [/* @__PURE__ */ jsxs(TagsInput$1.ItemPreview, { children: [/* @__PURE__ */ jsx(TagsInput$1.ItemText, { children: tag }), /* @__PURE__ */ jsx(TagsInput$1.ItemDeleteTrigger, { children: closeIcon })] }), /* @__PURE__ */ jsx(TagsInput$1.ItemInput, {})]
+				}, `${tag}-${index}`)) }),
+				/* @__PURE__ */ jsx(TagsInput$1.Input, { placeholder }),
+				clearable ? /* @__PURE__ */ jsx(TagsInput$1.ClearTrigger, { children: closeIcon }) : null
+			] }),
+			/* @__PURE__ */ jsx(TagsInput$1.HiddenInput, {})
+		]
+	});
+}
+const TagsInput = Object.assign(TagsInputFacade, {
 	...TagsInput$1,
 	Root: TagsInputRoot
-};
+});
 injectComponentStyle("tags-input");
 //#endregion
 export { TagsInput };

package/dist/components/terminal/index.d.mts

@@ -13,5 +13,8 @@ export interface TerminalProps extends HTMLAttributes<HTMLDivElement> {
  * component owns only the reading and the caret — each entered line
  * leaves as an event, and the caller answers through the lines prop,
  * so history stays theirs to shape. */
-export declare function Terminal({ lines, prompt, placeholder, label, onCommand, ...rest }: TerminalProps): import("react").JSX.Element;
+declare function TerminalImpl({ lines, prompt, placeholder, label, onCommand, ...rest }: TerminalProps): import("react").JSX.Element;
+export declare const Terminal: typeof TerminalImpl & {
+  Root: typeof TerminalImpl;
+};
 //#endregion

package/dist/components/terminal/index.mjs

@@ -1,3 +1,4 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -7,7 +8,7 @@ import { useEffect, useRef, useState } from "react";
 * component owns only the reading and the caret — each entered line
 * leaves as an event, and the caller answers through the lines prop,
 * so history stays theirs to shape. */
-function Terminal({ lines = [], prompt = "$", placeholder, label, onCommand, ...rest }) {
+function TerminalImpl({ lines = [], prompt = "$", placeholder, label, onCommand, ...rest }) {
 	injectComponentStyle("terminal");
 	const messages = useComponentMessages();
 	const commandLineLabel = label ?? messages.terminal.commandLine;
@@ -64,5 +65,6 @@ function Terminal({ lines = [], prompt = "$", placeholder, label, onCommand, ...
 		})]
 	});
 }
+const Terminal = withSelfRoot(TerminalImpl);
 //#endregion
 export { Terminal };

package/dist/components/textarea/index.d.mts

@@ -10,5 +10,8 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
   invalid?: boolean;
   onValueChange?: (value: string) => void;
 }
-export declare function Textarea({ value, invalid, onValueChange, ...rest }: TextareaProps): import("react").JSX.Element;
+declare function TextareaImpl({ value, invalid, onValueChange, ...rest }: TextareaProps): import("react").JSX.Element;
+export declare const Textarea: typeof TextareaImpl & {
+  Root: typeof TextareaImpl;
+};
 //#endregion

package/dist/components/textarea/index.mjs

@@ -1,8 +1,9 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 import { useFieldContext } from "@ark-ui/react/field";
 //#region src/components/textarea/index.tsx
-function Textarea({ value, invalid = false, onValueChange, ...rest }) {
+function TextareaImpl({ value, invalid = false, onValueChange, ...rest }) {
 	injectComponentStyle("textarea");
 	const field = useFieldContext();
 	const fieldProps = field?.getTextareaProps() ?? {};
@@ -16,5 +17,6 @@ function Textarea({ value, invalid = false, onValueChange, ...rest }) {
 		onChange: (event) => onValueChange?.(event.target.value)
 	});
 }
+const Textarea = withSelfRoot(TextareaImpl);
 //#endregion
 export { Textarea };

package/dist/components/timer/index.d.mts

@@ -1,8 +1,25 @@
+import { CSSProperties, ComponentProps } from "react";
 import { Timer as Timer$1 } from "@ark-ui/react/timer";
 //#region src/components/timer/index.d.ts
 /** Ark's Timer, dressed in the paper-and-ink system: monospaced digits
  * that never jitter, quiet action triggers on the control recipe. The API
  * is Ark's own — Root, Area, Control, Item, Separator, ActionTrigger,
  * Context. Unit labels are plain content, not a machine part. */
-export declare const Timer: typeof Timer$1;
+declare function TimerRoot(props: ComponentProps<typeof Timer$1.Root>): import("react").JSX.Element;
+type TimerFacadeProps = {
+  startMs?: number;
+  targetMs?: number;
+  countdown?: boolean;
+  autoStart?: boolean;
+  label?: string;
+  className?: string;
+  style?: CSSProperties;
+};
+/** The complete timer behind one duration: minute and second digits with
+ * start, pause, resume, and reset. Finer intervals and custom faces remain
+ * anatomy work. */
+declare function TimerFacade(props: TimerFacadeProps): import("react").JSX.Element;
+export declare const Timer: typeof TimerFacade & Omit<typeof Timer$1, "Root"> & {
+  Root: typeof TimerRoot;
+};
 //#endregion

package/dist/components/timer/index.mjs

@@ -1,11 +1,60 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Timer as Timer$1 } from "@ark-ui/react/timer";
 //#region src/components/timer/index.tsx
 /** Ark's Timer, dressed in the paper-and-ink system: monospaced digits
 * that never jitter, quiet action triggers on the control recipe. The API
 * is Ark's own — Root, Area, Control, Item, Separator, ActionTrigger,
 * Context. Unit labels are plain content, not a machine part. */
-const Timer = Timer$1;
-injectComponentStyle("timer");
+function TimerRoot(props) {
+	injectComponentStyle("timer");
+	const id = useElementId("timer", props);
+	return /* @__PURE__ */ jsx(Timer$1.Root, {
+		...props,
+		id
+	});
+}
+/** The complete timer behind one duration: minute and second digits with
+* start, pause, resume, and reset. Finer intervals and custom faces remain
+* anatomy work. */
+function TimerFacade(props) {
+	const { startMs = 0, targetMs, countdown, autoStart, label, className, style } = props;
+	return /* @__PURE__ */ jsxs(TimerRoot, {
+		"aria-label": label,
+		startMs,
+		targetMs,
+		countdown,
+		autoStart,
+		className,
+		style,
+		children: [/* @__PURE__ */ jsxs(Timer$1.Area, { children: [
+			/* @__PURE__ */ jsx(Timer$1.Item, { type: "minutes" }),
+			/* @__PURE__ */ jsx(Timer$1.Separator, { children: ":" }),
+			/* @__PURE__ */ jsx(Timer$1.Item, { type: "seconds" })
+		] }), /* @__PURE__ */ jsxs(Timer$1.Control, { children: [
+			/* @__PURE__ */ jsx(Timer$1.ActionTrigger, {
+				action: "start",
+				children: "Start"
+			}),
+			/* @__PURE__ */ jsx(Timer$1.ActionTrigger, {
+				action: "pause",
+				children: "Pause"
+			}),
+			/* @__PURE__ */ jsx(Timer$1.ActionTrigger, {
+				action: "resume",
+				children: "Resume"
+			}),
+			/* @__PURE__ */ jsx(Timer$1.ActionTrigger, {
+				action: "reset",
+				children: "Reset"
+			})
+		] })]
+	});
+}
+const Timer = Object.assign(TimerFacade, {
+	...Timer$1,
+	Root: TimerRoot
+});
 //#endregion
 export { Timer };

package/dist/components/toast/index.d.mts

@@ -1,11 +1,8 @@
 import { CreateToasterReturn, Toast as Toast$1, createToaster } from "@ark-ui/react/toast";
 //#region src/components/toast/index.d.ts
-/** Ark's Toast, dressed in the paper-and-ink system: each notice rides the
- * popup vessel while a pigment accents the title by type, and the machine's
- * translate variables carry the slide. The API is Ark's own — Toaster,
- * Root, Title, Description, ActionTrigger, CloseTrigger, plus
- * createToaster. */
 export declare const Toast: typeof Toast$1;
-export declare const Toaster: import("react").ForwardRefExoticComponent<import("@ark-ui/react/toast").ToasterProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Toaster: import("react").ForwardRefExoticComponent<import("@ark-ui/react/toast").ToasterProps & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<import("@ark-ui/react/toast").ToasterProps & import("react").RefAttributes<HTMLDivElement>>;
+};
 //#endregion
 export { type CreateToasterReturn, createToaster };

package/dist/components/toast/index.mjs

@@ -1,4 +1,8 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Toast as Toast$1, Toaster as Toaster$1, createToaster } from "@ark-ui/react/toast";
 //#region src/components/toast/index.tsx
 /** Ark's Toast, dressed in the paper-and-ink system: each notice rides the
@@ -6,8 +10,24 @@ import { Toast as Toast$1, Toaster as Toaster$1, createToaster } from "@ark-ui/r
 * translate variables carry the slide. The API is Ark's own — Toaster,
 * Root, Title, Description, ActionTrigger, CloseTrigger, plus
 * createToaster. */
-const Toast = Toast$1;
-const Toaster = Toaster$1;
+function ToastRoot(props) {
+	const id = useElementId("toast", props);
+	return /* @__PURE__ */ jsx(Toast$1.Root, {
+		...props,
+		id
+	});
+}
+const Toast = {
+	...Toast$1,
+	Root: ToastRoot
+};
+const ToasterRoot = forwardRef(function ToasterRoot(props, ref) {
+	return /* @__PURE__ */ jsx(Toaster$1, {
+		ref,
+		...props
+	});
+});
+const Toaster = withSelfRoot(ToasterRoot);
 injectComponentStyle("toast");
 //#endregion
 export { Toast, Toaster, createToaster };

package/dist/components/toc/index.d.mts

@@ -1,13 +1,27 @@
-import { ComponentProps } from "react";
-import { Toc as Toc$1 } from "@ark-ui/react/toc";
+import { CSSProperties, ComponentProps } from "react";
+import { Toc as Toc$1, TocItemData } from "@ark-ui/react/toc";
 //#region src/components/toc/index.d.ts
-/** Ark's Toc, dressed in the paper-and-ink system: a quiet rail of links
+/** Toc, dressed in the paper-and-ink system: a quiet rail of links
  * beside the scroll, one stroke of primary ink marking where the reader
- * stands. The API is Ark's own — Root, Title, List, Item, Link, Indicator. */
+ * stands. The parts — Root, Title, List, Item, Link, Indicator. */
+declare function TocRoot(props: ComponentProps<typeof Toc$1.Root>): import("react").JSX.Element;
 /** The active stroke is decoration; hidden so the list reads as links
  * alone. */
 declare function TocIndicator(props: ComponentProps<typeof Toc$1.Indicator>): import("react").JSX.Element;
-export declare const Toc: Omit<typeof Toc$1, "Indicator"> & {
+export interface TocFacadeProps {
+  items: Array<TocItemData & {
+    label: string;
+  }>;
+  scrollEl?: () => HTMLElement | null;
+  title?: string;
+  className?: string;
+  style?: CSSProperties;
+}
+/** The complete rail behind one page: items become anchor rows, the
+ * title names the list, and the active stroke follows the scroller. */
+declare function TocFacade({ items, scrollEl, title, className, style }: TocFacadeProps): import("react").JSX.Element;
+export declare const Toc: typeof TocFacade & Omit<typeof Toc$1, "Root" | "Indicator"> & {
+  Root: typeof TocRoot;
   Indicator: typeof TocIndicator;
 };
 //#endregion