@bysages/react 0.3.0 → 0.3.1

package/dist/components/image-viewer/index.mjs

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { Button } from "../button/index.mjs";
 import { ButtonGroup } from "../button-group/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
@@ -33,8 +34,9 @@ const TOOL_GLYPHS = {
 	rotate: () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M20.49 12A8.5 8.5 0 1 1 18 6.06" }), /* @__PURE__ */ jsx("path", { d: "M20.5 3.5v4h-4" })] }),
 	close: () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "m6 6 12 12" }), /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" })] })
 };
-function ImageViewer({ src, alt = "", open, zoomable = true, onOpenChange }) {
+function ImageViewer({ src, alt = "", open, zoomable = true, width, height, onOpenChange }) {
 	injectComponentStyle("image-viewer");
+	const messages = useComponentMessages();
 	const [localOpen, setLocalOpen] = useState(false);
 	const [scale, setScale] = useState(1);
 	const [rotation, setRotation] = useState(0);
@@ -92,14 +94,16 @@ function ImageViewer({ src, alt = "", open, zoomable = true, onOpenChange }) {
 					"data-part": "viewport",
 					src,
 					alt,
+					width,
+					height,
 					style: { transform: `scale(${scale}) rotate(${rotation}deg)` }
 				}), /* @__PURE__ */ jsx("div", {
 					"data-scope": "image-viewer",
 					"data-part": "toolbar",
 					children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
-						zoomable ? [toolButton("Zoom in", TOOL_GLYPHS.zoomIn, () => zoom(SCALE_STEP)), toolButton("Zoom out", TOOL_GLYPHS.zoomOut, () => zoom(-.25))] : null,
-						toolButton("Rotate 90 degrees", TOOL_GLYPHS.rotate, rotate),
-						toolButton("Close", TOOL_GLYPHS.close, () => setOpen(false))
+						zoomable ? [toolButton(messages.imageViewer.zoomIn, TOOL_GLYPHS.zoomIn, () => zoom(SCALE_STEP)), toolButton(messages.imageViewer.zoomOut, TOOL_GLYPHS.zoomOut, () => zoom(-.25))] : null,
+						toolButton(messages.imageViewer.rotate, TOOL_GLYPHS.rotate, rotate),
+						toolButton(messages.imageViewer.close, TOOL_GLYPHS.close, () => setOpen(false))
 					] })
 				})]
 			})

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

@@ -1,7 +1,7 @@
 import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/react/json-tree-view";
 //#region src/components/json-tree-view/index.d.ts
-/** Ark's JsonTreeView, dressed in the paper-and-ink system: the tree-view
- * recipes re-scoped, with value nodes reading as tabular data. The API is
- * Ark's own — Root, Tree, plus createJsonTreeCollection. */
+/** JsonTreeView, dressed in the paper-and-ink system: the tree-view
+ * recipes re-scoped, with value nodes reading as tabular data. The parts —
+ * Root, Tree, plus createJsonTreeCollection. */
 export declare const JsonTreeView: typeof JsonTreeView$1;
 //#endregion

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

@@ -1,10 +1,23 @@
+import { t as glyphNode } from "../../glyph-VI989p8H.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
 import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/react/json-tree-view";
+import { chevron_right } from "@bysages/icons";
 //#region src/components/json-tree-view/index.tsx
-/** Ark's JsonTreeView, dressed in the paper-and-ink system: the tree-view
-* recipes re-scoped, with value nodes reading as tabular data. The API is
-* Ark's own — Root, Tree, plus createJsonTreeCollection. */
-const JsonTreeView = JsonTreeView$1;
+/** The auto-rendered tree hands every branch its chevron from the
+* `arrow` element — filled with the house glyph unless the consumer
+* draws their own, so a JSON tree never opens as a bare indent. */
+function JsonTreeViewTree(props) {
+	const { arrow = glyphNode(chevron_right), ...rest } = props;
+	return /* @__PURE__ */ jsx(JsonTreeView$1.Tree, {
+		...rest,
+		arrow
+	});
+}
+/** JsonTreeView, dressed in the paper-and-ink system: the tree-view
+* recipes re-scoped, with value nodes reading as tabular data. The parts —
+* Root, Tree, plus createJsonTreeCollection. */
+const JsonTreeView = Object.assign({}, JsonTreeView$1, { Tree: JsonTreeViewTree });
 injectComponentStyle("json-tree-view");
 //#endregion
 export { JsonTreeView };

package/dist/components/layout/index.mjs

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useRef, useState } from "react";
@@ -41,6 +42,7 @@ const Footer = region("Footer", "footer");
 const RESIZE_STEP = 16;
 function Sider({ collapsed = false, width: widthProp, collapsedWidth = "3.5rem", resizable = false, minWidth = "12rem", maxWidth = "24rem", style, onCollapsedChange, onWidthChange, children, ...rest }) {
 	const layout = useContext(LAYOUT_CONTEXT);
+	const messages = useComponentMessages();
 	const rail = useRef(null);
 	const [dragging, setDragging] = useState(false);
 	const [innerWidth, setInnerWidth] = useState(widthProp ?? "16rem");
@@ -97,7 +99,7 @@ function Sider({ collapsed = false, width: widthProp, collapsedWidth = "3.5rem",
 		role: "separator",
 		"aria-orientation": "vertical",
 		tabIndex: 0,
-		"aria-label": "Resize sidebar",
+		"aria-label": messages.sidebar.resize,
 		"aria-valuenow": Math.round(rail.current ? rail.current.getBoundingClientRect().width : 0),
 		onPointerDown,
 		onPointerMove,

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

@@ -10,6 +10,10 @@ declare function Root({ bordered, hoverable, children, ...rest }: ListRootProps)
 declare namespace Root {
   var displayName: string;
 }
+declare function Item({ children, ...attrs }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+declare namespace Item {
+  var displayName: string;
+}
 /** The row's words: `title` and `description` ride their own slots, the
  * children follow them for anything else. */
 export interface ListContentProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
@@ -22,10 +26,7 @@ declare namespace Content {
 }
 export declare const List: typeof Root & {
   Root: typeof Root;
-  Item: {
-    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
-    displayName: string;
-  };
+  Item: typeof Item;
   Leading: {
     ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
     displayName: string;

package/dist/components/list/index.mjs

@@ -30,7 +30,16 @@ function Root({ bordered = false, hoverable = false, children, ...rest }) {
 	});
 }
 Root.displayName = "ListRoot";
-const Item = part("Item", "li");
+function Item({ children, ...attrs }) {
+	delete attrs.role;
+	return /* @__PURE__ */ jsx("li", {
+		...attrs,
+		"data-scope": "list",
+		"data-part": "item",
+		children
+	});
+}
+Item.displayName = "ListItem";
 const Leading = part("Leading", "div");
 const Actions = part("Actions", "div");
 function Content({ title, description, children, ...rest }) {

package/dist/components/menubar/index.mjs

@@ -17,6 +17,7 @@ function Menubar({ items, onSelect, children, ...rest }) {
 				asChild: true,
 				children: /* @__PURE__ */ jsx("button", {
 					type: "button",
+					role: "menuitem",
 					"data-scope": "menubar",
 					"data-part": "trigger",
 					children: group.label

package/dist/components/order-list/index.mjs

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
@@ -29,6 +30,7 @@ function arrowGlyph(paths) {
 * touch keeps the buttons as its route. */
 function OrderList({ value, options, label, onValueChange, ...rest }) {
 	injectComponentStyle("order-list");
+	const messages = useComponentMessages();
 	const dragging = useRef(null);
 	const [dropLine, setDropLine] = useState(null);
 	const rows = value.map((entry) => options.find((option) => option.value === entry)).filter((option) => option != null);
@@ -69,9 +71,6 @@ function OrderList({ value, options, label, onValueChange, ...rest }) {
 	}
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
-		role: "listbox",
-		"aria-label": label ?? void 0,
-		"aria-multiselectable": false,
 		"data-scope": "order-list",
 		"data-part": "root",
 		onDragLeave: (event) => {
@@ -81,12 +80,12 @@ function OrderList({ value, options, label, onValueChange, ...rest }) {
 		children: /* @__PURE__ */ jsx("ol", {
 			"data-scope": "order-list",
 			"data-part": "list",
+			"aria-label": label ?? void 0,
 			children: rows.map((option, index) => {
 				const seam = dropLine && dropLine.index === index ? dropLine.before ? "top" : "bottom" : void 0;
 				return /* @__PURE__ */ jsxs("li", {
-					role: "option",
-					"aria-selected": true,
 					draggable: true,
+					"aria-roledescription": "Sortable item",
 					"data-scope": "order-list",
 					"data-part": "item",
 					"data-dragging": dragging.current === option.value ? "" : void 0,
@@ -119,25 +118,25 @@ function OrderList({ value, options, label, onValueChange, ...rest }) {
 							"data-part": "controls",
 							children: [
 								[
-									"Move to top",
+									messages.orderList.toTop,
 									ARROWS.top,
 									-index,
 									0
 								],
 								[
-									"Move up",
+									messages.orderList.moveUp,
 									ARROWS.up,
 									-1,
 									0
 								],
 								[
-									"Move down",
+									messages.orderList.moveDown,
 									ARROWS.down,
 									1,
 									rows.length - 1
 								],
 								[
-									"Move to bottom",
+									messages.orderList.toBottom,
 									ARROWS.bottom,
 									rows.length - 1 - index,
 									rows.length - 1

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

@@ -1,2 +1,2 @@
-import { i as NativeSelectProps, n as NativeSelect, r as NativeSelectOption, t as Select } from "../../index-DFN9F5Zt.mjs";
+import { i as NativeSelectProps, n as NativeSelect, r as NativeSelectOption, t as Select } from "../../index-Iy8m0Qev.mjs";
 export { NativeSelect, type NativeSelectOption, type NativeSelectProps, Select };

package/dist/components/select/index.mjs

@@ -1,2 +1,2 @@
-import { n as NativeSelect, t as Select } from "../../select-D1xiT1oJ.mjs";
+import { n as NativeSelect, t as Select } from "../../select-eAHutw56.mjs";
 export { NativeSelect, Select };

package/dist/components/spinner/index.mjs

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/spinner/index.tsx
@@ -5,10 +6,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * default — it reports progress without claiming attention. */
 function Spinner({ size = "md", children, ...rest }) {
 	injectComponentStyle("spinner");
+	const messages = useComponentMessages();
 	return /* @__PURE__ */ jsxs("span", {
 		...rest,
 		role: "status",
-		"aria-label": rest["aria-label"] ?? "Loading",
+		"aria-label": rest["aria-label"] ?? messages.spinner.loading,
 		"data-scope": "spinner",
 		"data-part": "root",
 		"data-size": size,

package/dist/components/split-button/index.mjs

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { Button } from "../button/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -16,6 +17,7 @@ import { Menu } from "@ark-ui/react/menu";
 function SplitButton({ label, items = [], variant = "solid", tone = "ink", size = "md", disabled = false, onClick, onSelect, ...rest }) {
 	injectComponentStyle("split-button");
 	injectComponentStyle("menu");
+	const messages = useComponentMessages();
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
 		"data-scope": "split-button",
@@ -39,7 +41,7 @@ function SplitButton({ label, items = [], variant = "solid", tone = "ink", size
 					"data-size": size,
 					"data-square": "true",
 					"data-motion": "ink-ripple lit",
-					"aria-label": "More actions",
+					"aria-label": messages.more.actions,
 					children: chevronDown()
 				})
 			}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, { children: items.map((entry) => /* @__PURE__ */ jsx(Menu.Item, {

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 { t as Select$1 } from "../../select-D1xiT1oJ.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/terminal/index.mjs

@@ -1,3 +1,4 @@
+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";
@@ -8,6 +9,8 @@ import { useEffect, useRef, useState } from "react";
 * 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(() => {
@@ -22,7 +25,7 @@ function Terminal({ lines = [], prompt = "$", placeholder, label, onCommand, ...
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
 		role: "log",
-		"aria-label": label ?? void 0,
+		"aria-label": commandLineLabel,
 		"data-scope": "terminal",
 		"data-part": "root",
 		children: [/* @__PURE__ */ jsx("div", {
@@ -47,7 +50,7 @@ function Terminal({ lines = [], prompt = "$", placeholder, label, onCommand, ...
 				"data-part": "input",
 				value: draft,
 				placeholder,
-				"aria-label": label ? `${label} command line` : "Command line",
+				"aria-label": commandLineLabel,
 				spellCheck: false,
 				autoComplete: "off",
 				onInput: (event) => setDraft(event.target.value),

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/transfer/index.mjs

@@ -1,3 +1,4 @@
+import { n as useComponentMessages, t as formatMessage } from "../../messages-1jJWtaYU.mjs";
 import { Button } from "../button/index.mjs";
 import { t as Input } from "../../input-2oezH-dY.mjs";
 import { injectComponentStyle } from "@bysages/core";
@@ -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,3 +1,4 @@
+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";
@@ -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/virtual-list/index.mjs

@@ -19,6 +19,7 @@ function VirtualList({ items, itemHeight = 40, height = 320, renderItem, ...rest
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
 		ref: viewport,
+		tabIndex: 0,
 		"data-scope": "virtual-list",
 		"data-part": "root",
 		style: {