@bysages/react 0.2.3 → 0.3.1

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

@@ -13,7 +13,11 @@ declare function StepsRoot({ size, ...rest }: StepsRootProps): import("react").J
  * PrevTrigger, NextTrigger, Progress. Indicator and Separator carry
  * data-complete / data-current / data-incomplete.
  */
-export declare const Steps: Omit<typeof Steps$1, "Root"> & {
+/** The machine wraps each tab in an item div; presentation keeps the
+ * tablist owned children legal while the tab itself keeps its role. */
+declare function StepsItem(props: ComponentProps<typeof Steps$1.Item>): import("react").JSX.Element;
+export declare const Steps: Omit<typeof Steps$1, "Root" | "Item"> & {
   Root: typeof StepsRoot;
+  Item: typeof StepsItem;
 };
 //#endregion

package/dist/components/steps/index.mjs

@@ -15,9 +15,18 @@ function StepsRoot({ size = "md", ...rest }) {
 * PrevTrigger, NextTrigger, Progress. Indicator and Separator carry
 * data-complete / data-current / data-incomplete.
 */
+/** The machine wraps each tab in an item div; presentation keeps the
+* tablist owned children legal while the tab itself keeps its role. */
+function StepsItem(props) {
+	return /* @__PURE__ */ jsx(Steps$1.Item, {
+		...props,
+		role: "presentation"
+	});
+}
 const Steps = {
 	...Steps$1,
-	Root: StepsRoot
+	Root: StepsRoot,
+	Item: StepsItem
 };
 injectComponentStyle("steps");
 //#endregion

package/dist/components/table/index.mjs

@@ -1,5 +1,6 @@
+import { n as useComponentMessages, t as formatMessage } from "../../messages-1jJWtaYU.mjs";
 import { Pagination } from "../pagination/index.mjs";
-import { Select as Select$1 } from "../select/index.mjs";
+import { t as Select$1 } from "../../select-eAHutw56.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useReducer, useRef } from "react";
@@ -121,8 +122,10 @@ function DataTable(rawProps) {
 		10,
 		20,
 		50
-	], globalFilterPlaceholder = "Filter rows", emptyText = "No rows", reorderable = false } = props;
+	], globalFilterPlaceholder, emptyText, reorderable = false } = props;
 	const merge = props.merge;
+	const messages = useComponentMessages();
+	const globalFilterText = globalFilterPlaceholder ?? messages.table.filterAll;
 	const virtual = virtualProp && !merge;
 	const mergeMode = !virtualProp && !!merge;
 	/** Features follow the construction-time switches: sorting, selection,
@@ -435,7 +438,7 @@ function DataTable(rawProps) {
 			checked: row.getIsSelected(),
 			indeterminate: false,
 			onToggle: () => row.toggleSelected(!row.getIsSelected()),
-			label: "Select row"
+			label: messages.table.selectRow
 		});
 		else if (isExpandHost) content = /* @__PURE__ */ jsxs("div", {
 			"data-scope": "table",
@@ -447,7 +450,7 @@ function DataTable(rawProps) {
 				"data-part": "expander",
 				"data-expanded": row.getIsExpanded() || void 0,
 				"data-leaf": !row.getCanExpand() || void 0,
-				"aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
+				"aria-label": row.getIsExpanded() ? messages.table.collapseRow : messages.table.expandRow,
 				onClick: () => row.toggleExpanded(),
 				children: /* @__PURE__ */ jsx(ChevronGlyph, {})
 			}), /* @__PURE__ */ jsx(FlexRender, { cell })]
@@ -492,9 +495,9 @@ function DataTable(rawProps) {
 				type: "text",
 				"data-scope": "table",
 				"data-part": "header-filter",
-				"aria-label": `Filter ${column.id}`,
+				"aria-label": formatMessage(messages.table.filterColumn, { name: column.id }),
 				value: column.getFilterValue() ?? "",
-				placeholder: "Filter",
+				placeholder: messages.command.filter,
 				draggable: false,
 				onClick: (e) => e.stopPropagation(),
 				onDragStart: (e) => e.stopPropagation(),
@@ -548,7 +551,7 @@ function DataTable(rawProps) {
 							checked: all,
 							indeterminate: table.getIsSomeRowsSelected() && !all,
 							onToggle: () => table.toggleAllRowsSelected(!all),
-							label: "Select all rows"
+							label: messages.table.selectAllRows
 						})
 					}, column.id);
 				}
@@ -568,7 +571,7 @@ function DataTable(rawProps) {
 		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",
-			children: emptyText
+			children: emptyText ?? messages.table.empty
 		}) : null]
 	});
 	const hasFooters = table.getFooterGroups().some((group) => group.headers.some((header) => header.column.columnDef.footer));
@@ -581,7 +584,7 @@ function DataTable(rawProps) {
 			"data-scope": "table",
 			"data-part": "row",
 			children: group.headers.map((header) => /* @__PURE__ */ jsx("div", {
-				role: "columnheader",
+				role: "cell",
 				"data-scope": "table",
 				"data-part": "footer-cell",
 				"data-numeric": header.column.columnDef.meta?.numeric ? "" : void 0,
@@ -596,7 +599,7 @@ function DataTable(rawProps) {
 		const pagination = table.atoms.pagination.get();
 		const rowCount = table.getRowCount();
 		const sizeItems = createListCollection({ items: pageSizeOptions.map((size) => ({
-			label: `${size} / page`,
+			label: formatMessage(messages.table.perPage, { size }),
 			value: String(size)
 		})) });
 		const pageSize = /* @__PURE__ */ jsxs(Select$1.Root, {
@@ -605,7 +608,7 @@ function DataTable(rawProps) {
 			onValueChange: (details) => table.setPageSize(Number(details.value[0])),
 			positioning: { placement: "top-start" },
 			children: [/* @__PURE__ */ jsx(Select$1.Control, { children: /* @__PURE__ */ jsxs(Select$1.Trigger, {
-				"aria-label": "Rows per page",
+				"aria-label": messages.table.rowsPerPage,
 				children: [/* @__PURE__ */ jsx(Select$1.ValueText, {}), /* @__PURE__ */ jsx(Select$1.Indicator, { children: chevronDownGlyph() })]
 			}) }), /* @__PURE__ */ jsx(Select$1.Positioner, { children: /* @__PURE__ */ jsx(Select$1.Content, { children: sizeItems.items.map((item) => /* @__PURE__ */ jsxs(Select$1.Item, {
 				item,
@@ -630,10 +633,10 @@ function DataTable(rawProps) {
 		return /* @__PURE__ */ jsxs("div", {
 			"data-scope": "table",
 			"data-part": "pagination",
-			children: [/* @__PURE__ */ jsxs("span", {
+			children: [/* @__PURE__ */ jsx("span", {
 				"data-scope": "table",
 				"data-part": "page-status",
-				children: [rowCount, " rows"]
+				children: formatMessage(messages.table.rowsCount, { count: rowCount })
 			}), /* @__PURE__ */ jsxs("div", {
 				"data-scope": "table",
 				"data-part": "page-nav",
@@ -648,8 +651,8 @@ function DataTable(rawProps) {
 			type: "search",
 			"data-scope": "table",
 			"data-part": "global-filter",
-			"aria-label": "Filter all columns",
-			placeholder: globalFilterPlaceholder,
+			"aria-label": messages.table.filterAll,
+			placeholder: globalFilterText,
 			value: table.atoms.globalFilter.get() ?? "",
 			onInput: (e) => table.setGlobalFilter(e.target.value)
 		})
@@ -668,6 +671,7 @@ function DataTable(rawProps) {
 				"data-scope": "table",
 				"data-part": "viewport",
 				ref: viewport,
+				tabIndex: 0,
 				children: /* @__PURE__ */ jsxs("div", {
 					role: "table",
 					"data-scope": "table",

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

@@ -4,8 +4,10 @@ import { Tabs as Tabs$1 } from "@ark-ui/react/tabs";
 type TabsRootProps = ComponentProps<typeof Tabs$1.Root> & {
   /** One rung of the control-height ladder for the tab rows. */
   size?: "sm" | "md" | "lg";
+  /** The register: a ruled line (default), or each tab its own card. */
+  variant?: "line" | "card";
 };
-declare function TabsRoot({ size, ...rest }: TabsRootProps): import("react").JSX.Element;
+declare function TabsRoot({ size, variant, ...rest }: TabsRootProps): import("react").JSX.Element;
 /**
  * Tabs — tabbed navigation.
  *

package/dist/components/tabs/index.mjs

@@ -2,10 +2,11 @@ import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 import { Tabs as Tabs$1 } from "@ark-ui/react/tabs";
 //#region src/components/tabs/index.tsx
-function TabsRoot({ size = "md", ...rest }) {
+function TabsRoot({ size = "md", variant = "line", ...rest }) {
 	return /* @__PURE__ */ jsx(Tabs$1.Root, {
 		...rest,
-		"data-size": size
+		"data-size": size,
+		"data-variant": variant
 	});
 }
 /**

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

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from "react";
+//#region src/components/terminal/index.d.ts
+export interface TerminalProps extends HTMLAttributes<HTMLDivElement> {
+  /** The transcript, oldest line first. */
+  lines?: string[];
+  /** The sigil at the head of the entry line. */
+  prompt?: string;
+  placeholder?: string;
+  label?: string;
+  onCommand?: (text: string) => void;
+}
+/** A quiet console: the transcript above, the prompt line below. The
+ * 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;
+//#endregion

package/dist/components/terminal/index.mjs

@@ -0,0 +1,68 @@
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/terminal/index.tsx
+/** A quiet console: the transcript above, the prompt line below. The
+* 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 }) {
+	injectComponentStyle("terminal");
+	const messages = useComponentMessages();
+	const commandLineLabel = label ?? messages.terminal.commandLine;
+	const [draft, setDraft] = useState("");
+	const scroll = useRef(null);
+	useEffect(() => {
+		scroll.current?.scrollTo({ top: scroll.current.scrollHeight });
+	}, [lines.length]);
+	function submit() {
+		const text = draft.trim();
+		if (!text) return;
+		setDraft("");
+		onCommand?.(text);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		role: "log",
+		"aria-label": commandLineLabel,
+		"data-scope": "terminal",
+		"data-part": "root",
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: scroll,
+			"data-scope": "terminal",
+			"data-part": "scroll",
+			children: lines.map((line, index) => /* @__PURE__ */ jsx("div", {
+				"data-scope": "terminal",
+				"data-part": "line",
+				children: line
+			}, index))
+		}), /* @__PURE__ */ jsxs("div", {
+			"data-scope": "terminal",
+			"data-part": "entry",
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-scope": "terminal",
+				"data-part": "sigil",
+				"aria-hidden": "true",
+				children: prompt
+			}), /* @__PURE__ */ jsx("input", {
+				"data-scope": "terminal",
+				"data-part": "input",
+				value: draft,
+				placeholder,
+				"aria-label": commandLineLabel,
+				spellCheck: false,
+				autoComplete: "off",
+				onInput: (event) => setDraft(event.target.value),
+				onKeyDown: (event) => {
+					if (event.key === "Enter") {
+						event.preventDefault();
+						submit();
+					}
+				}
+			})]
+		})]
+	});
+}
+//#endregion
+export { Terminal };

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

@@ -1,23 +1,25 @@
+import * as React from "react";
 import { HTMLAttributes } from "react";
 //#region src/components/timeline/index.d.ts
-export declare const Timeline: {
-  ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
-  displayName: string;
-} & {
-  Root: {
-    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
-    displayName: string;
-  };
+declare function Root({ orientation, children, ...rest }: HTMLAttributes<HTMLElement> & {
+  children?: React.ReactNode;
+  orientation?: "vertical" | "horizontal";
+}): React.JSX.Element;
+declare namespace Root {
+  var displayName: string;
+}
+export declare const Timeline: typeof Root & {
+  Root: typeof Root;
   Item: {
-    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): React.JSX.Element;
     displayName: string;
   };
   Marker: {
-    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): React.JSX.Element;
     displayName: string;
   };
   Content: {
-    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): React.JSX.Element;
     displayName: string;
   };
 };

package/dist/components/timeline/index.mjs

@@ -15,7 +15,17 @@ function part(name, tag) {
 	Component.displayName = "Timeline" + name;
 	return Component;
 }
-const Root = part("Root", "ol");
+function Root({ orientation = "vertical", children, ...rest }) {
+	injectComponentStyle("timeline");
+	return /* @__PURE__ */ jsx("ol", {
+		...rest,
+		"data-scope": "timeline",
+		"data-part": "root",
+		"data-orientation": orientation,
+		children
+	});
+}
+Root.displayName = "TimelineRoot";
 const Item = part("Item", "li");
 const Marker = part("Marker", "span");
 const Content = part("Content", "div");

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

@@ -1,7 +1,13 @@
+import { ComponentProps } from "react";
 import { Toc as Toc$1 } 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
  * 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. */
-export declare const Toc: typeof Toc$1;
+/** 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"> & {
+  Indicator: typeof TocIndicator;
+};
 //#endregion

package/dist/components/toc/index.mjs

@@ -1,10 +1,22 @@
 import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
 import { Toc as Toc$1 } from "@ark-ui/react/toc";
 //#region src/components/toc/index.tsx
 /** Ark's 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. */
-const Toc = Toc$1;
+/** The active stroke is decoration; hidden so the list reads as links
+* alone. */
+function TocIndicator(props) {
+	return /* @__PURE__ */ jsx(Toc$1.Indicator, {
+		...props,
+		"aria-hidden": "true"
+	});
+}
+const Toc = {
+	...Toc$1,
+	Indicator: TocIndicator
+};
 injectComponentStyle("toc");
 //#endregion
 export { Toc };

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

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/toolbar/index.d.ts
+export interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
+  /** Accessible name when more than one toolbar shares a page. */
+  label?: string;
+  /** Tools at the leading edge; `children` land here when no start is
+   * given. */
+  start?: ReactNode;
+  /** Tools at the trailing edge. */
+  end?: ReactNode;
+  children?: ReactNode;
+}
+/** A workbench rail: the start tools at the leading edge, the end tools
+ * at the trailing, the rail itself carrying the toolbar role so
+ * assistive tech reads it as one group of commands. */
+export declare function Toolbar({ label, start, end, children, ...rest }: ToolbarProps): import("react").JSX.Element;
+//#endregion

package/dist/components/toolbar/index.mjs

@@ -0,0 +1,29 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/toolbar/index.tsx
+/** A workbench rail: the start tools at the leading edge, the end tools
+* at the trailing, the rail itself carrying the toolbar role so
+* assistive tech reads it as one group of commands. */
+function Toolbar({ label, start, end, children, ...rest }) {
+	injectComponentStyle("toolbar");
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		role: "toolbar",
+		"aria-label": label ?? void 0,
+		"data-scope": "toolbar",
+		"data-part": "root",
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-scope": "toolbar",
+			"data-part": "group",
+			"data-edge": "start",
+			children: start ?? children
+		}), end ? /* @__PURE__ */ jsx("div", {
+			"data-scope": "toolbar",
+			"data-part": "group",
+			"data-edge": "end",
+			children: end
+		}) : null]
+	});
+}
+//#endregion
+export { Toolbar };

package/dist/components/transfer/index.mjs

@@ -1,5 +1,6 @@
+import { n as useComponentMessages, t as formatMessage } from "../../messages-1jJWtaYU.mjs";
 import { Button } from "../button/index.mjs";
-import { Input } from "../input/index.mjs";
+import { t as Input } from "../../input-2oezH-dY.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
@@ -36,6 +37,7 @@ function arrowGlyph(direction) {
 function Transfer({ value = [], data, titles = ["Source", "Target"], searchable = false, disabled = false, onValueChange, ...rest }) {
 	injectComponentStyle("transfer");
 	injectComponentStyle("checkbox");
+	const messages = useComponentMessages();
 	const [checkedSource, setCheckedSource] = useState(() => /* @__PURE__ */ new Set());
 	const [checkedTarget, setCheckedTarget] = useState(() => /* @__PURE__ */ new Set());
 	const [sourceQuery, setSourceQuery] = useState("");
@@ -86,8 +88,8 @@ function Transfer({ value = [], data, titles = ["Source", "Target"], searchable
 						size: "sm",
 						value: query,
 						onValueChange: onQuery,
-						placeholder: "Filter…",
-						"aria-label": `Filter ${title}`
+						placeholder: messages.transfer.filter,
+						"aria-label": formatMessage(messages.transfer.filter, { name: title })
 					})
 				}) : null,
 				/* @__PURE__ */ jsx("div", {
@@ -133,7 +135,7 @@ function Transfer({ value = [], data, titles = ["Source", "Target"], searchable
 					size: "sm",
 					square: true,
 					disabled: checkedSource.size === 0 || disabled,
-					"aria-label": "Move right",
+					"aria-label": messages.transfer.moveRight,
 					onClick: () => move(true),
 					children: arrowGlyph("right")
 				}), /* @__PURE__ */ jsx(Button, {
@@ -141,7 +143,7 @@ function Transfer({ value = [], data, titles = ["Source", "Target"], searchable
 					size: "sm",
 					square: true,
 					disabled: checkedTarget.size === 0 || disabled,
-					"aria-label": "Move left",
+					"aria-label": messages.transfer.moveLeft,
 					onClick: () => move(false),
 					children: arrowGlyph("left")
 				})]

package/dist/components/tree-select/index.mjs

@@ -1,4 +1,5 @@
-import { Input } from "../input/index.mjs";
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
+import { t as Input } from "../../input-2oezH-dY.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
@@ -44,6 +45,7 @@ function TreeSelectRow({ node, indexPath }) {
 function TreeSelect({ value, data, placeholder = "Select…", filterable = false, disabled = false, size = "md", onValueChange, ...rest }) {
 	injectComponentStyle("tree-select");
 	injectComponentStyle("tree-view");
+	const messages = useComponentMessages();
 	const [open, setOpen] = useState(false);
 	const [query, setQuery] = useState("");
 	const filterFns = useFilter({ sensitivity: "base" });
@@ -128,8 +130,8 @@ function TreeSelect({ value, data, placeholder = "Select…", filterable = false
 					size: "sm",
 					value: query,
 					onValueChange: setQuery,
-					placeholder: "Filter…",
-					"aria-label": "Filter options"
+					placeholder: messages.select.filter,
+					"aria-label": messages.select.filter
 				})
 			}) : null, /* @__PURE__ */ jsx("div", {
 				"data-scope": "tree-select",

package/dist/components/tree-view/index.d.mts

@@ -1,3 +1,4 @@
+import { ComponentProps } from "react";
 import { CollectionItem } from "@ark-ui/react/collection";
 import { TreeView as TreeView$1, TreeViewRootComponentProps } from "@ark-ui/react/tree-view";
 //#region src/components/tree-view/index.d.ts
@@ -13,7 +14,15 @@ type TreeViewOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function TreeViewRoot<T extends CollectionItem>(props: TreeViewRootComponentProps<T, TreeViewOwnProps>): import("react").JSX.Element;
-export declare const TreeView: Omit<typeof TreeView$1, "Root"> & {
+/** The node checkbox rides inside the branch control; the branch
+ * itself answers the keyboard, so the checkbox stays visual only. */
+declare function TreeViewNodeCheckbox(props: ComponentProps<typeof TreeView$1.NodeCheckbox>): import("react").JSX.Element;
+/** A branch is born with its chevron — the indicator stays a consumer's
+ * children to override, never a chore to remember. */
+declare function TreeViewBranchIndicator(props: ComponentProps<typeof TreeView$1.BranchIndicator>): import("react").JSX.Element;
+export declare const TreeView: Omit<typeof TreeView$1, "Root" | "NodeCheckbox" | "BranchIndicator"> & {
   Root: typeof TreeViewRoot;
+  NodeCheckbox: typeof TreeViewNodeCheckbox;
+  BranchIndicator: typeof TreeViewBranchIndicator;
 };
 //#endregion

package/dist/components/tree-view/index.mjs

@@ -1,5 +1,7 @@
+import { t as glyphNode } from "../../glyph-VI989p8H.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
+import { chevron_right } from "@bysages/icons";
 import { TreeView as TreeView$1 } from "@ark-ui/react/tree-view";
 //#region src/components/tree-view/index.tsx
 function TreeViewRoot(props) {
@@ -9,9 +11,28 @@ function TreeViewRoot(props) {
 		"data-size": size
 	});
 }
+/** The node checkbox rides inside the branch control; the branch
+* itself answers the keyboard, so the checkbox stays visual only. */
+function TreeViewNodeCheckbox(props) {
+	return /* @__PURE__ */ jsx(TreeView$1.NodeCheckbox, {
+		...props,
+		"aria-hidden": "true"
+	});
+}
+/** A branch is born with its chevron — the indicator stays a consumer's
+* children to override, never a chore to remember. */
+function TreeViewBranchIndicator(props) {
+	const { children = glyphNode(chevron_right), ...rest } = props;
+	return /* @__PURE__ */ jsx(TreeView$1.BranchIndicator, {
+		...rest,
+		children
+	});
+}
 const TreeView = {
 	...TreeView$1,
-	Root: TreeViewRoot
+	Root: TreeViewRoot,
+	NodeCheckbox: TreeViewNodeCheckbox,
+	BranchIndicator: TreeViewBranchIndicator
 };
 injectComponentStyle("tree-view");
 //#endregion

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

@@ -0,0 +1,20 @@
+import { AvatarSize } from "../avatar/index.mjs";
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/user/index.d.ts
+export interface UserProps extends HTMLAttributes<HTMLDivElement> {
+  /** The person's name — the loud line. */
+  name: string;
+  /** The quiet echo beneath the name: a role, a title, an address. */
+  description?: string;
+  /** Seal diameter: one rung of the Avatar's own ladder. */
+  size?: AvatarSize;
+  src?: string;
+  shape?: "circle" | "square";
+  children?: ReactNode;
+}
+/** A person on one line: the seal before the words, the name and its
+ * quiet echo beneath. The mark is the Avatar itself — one component
+ * renders it here, so every size and shape the Avatar knows the user
+ * inherits; this row only lays the words out beside it. */
+export declare function User({ name, description, size, src, shape, children, ...rest }: UserProps): import("react").JSX.Element;
+//#endregion

package/dist/components/user/index.mjs

@@ -0,0 +1,42 @@
+import { Avatar } from "../avatar/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/user/index.tsx
+function initialsOf(name) {
+	return name.split(/\s+/).filter(Boolean).slice(0, 2).map((word) => word[0]?.toUpperCase() ?? "").join("");
+}
+/** A person on one line: the seal before the words, the name and its
+* quiet echo beneath. The mark is the Avatar itself — one component
+* renders it here, so every size and shape the Avatar knows the user
+* inherits; this row only lays the words out beside it. */
+function User({ name, description, size, src, shape = "circle", children, ...rest }) {
+	injectComponentStyle("user");
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-scope": "user",
+		"data-part": "root",
+		children: [/* @__PURE__ */ jsxs(Avatar.Root, {
+			size,
+			shape,
+			children: [src ? /* @__PURE__ */ jsx(Avatar.Image, { src }) : null, /* @__PURE__ */ jsx(Avatar.Fallback, { children: initialsOf(name) })]
+		}), /* @__PURE__ */ jsxs("div", {
+			"data-scope": "user",
+			"data-part": "meta",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"data-scope": "user",
+					"data-part": "name",
+					children: name
+				}),
+				description ? /* @__PURE__ */ jsx("span", {
+					"data-scope": "user",
+					"data-part": "description",
+					children: description
+				}) : null,
+				children
+			]
+		})]
+	});
+}
+//#endregion
+export { User };

package/dist/components/virtual-list/index.d.mts

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/virtual-list/index.d.ts
+export interface VirtualListProps extends HTMLAttributes<HTMLDivElement> {
+  items: unknown[];
+  /** The height every row occupies — fixed rows keep it simple. */
+  itemHeight?: number;
+  /** The viewport height the ledger scrolls within. */
+  height?: number | string;
+  /** Renders one record into its positioned row. */
+  renderItem?: (item: unknown, index: number) => ReactNode;
+}
+/** A ledger that only mounts the rows on stage: the viewport keeps its
+ * scroll length by a spacer sized from the row height, the rows
+ * themselves are positioned against it — a ten-thousand-row list
+ * costs the DOM a window, not the ledger. */
+export declare function VirtualList({ items, itemHeight, height, renderItem, ...rest }: VirtualListProps): import("react").JSX.Element;
+//#endregion