@bysages/react 0.2.3 → 0.3.0

package/README.md

@@ -4,11 +4,11 @@
 ![npm downloads](https://img.shields.io/npm/dw/@bysages/react)
 ![npm license](https://img.shields.io/npm/l/@bysages/react)
 
-> By Sages Elements for React — 90+ accessible component families, headless by construction, dressed by the paper-and-ink style layer. Ported from the Vue reference implementation, API for API.
+> By Sages Elements for React — 140+ accessible component families, headless by construction, dressed by the paper-and-ink style layer. Ported from the Vue reference implementation, API for API.
 
 ## Features
 
-- 🧩 **90+ families** — actions, forms, overlays, navigation, data, layout, and an AI conversation family on ai-sdk formats
+- 🧩 **140+ families** — actions, forms, overlays, navigation, data, layout, an AI conversation family on ai-sdk formats, and a full generative vocabulary
 - 🏛️ **Headless inside** — interaction, state, ARIA, and positioning come from proven headless state machines; wrappers add API narrowing and style injection, no DOM of their own
 - 🎨 **Token-styled** — every visual value is a CSS custom property from `@bysages/core`; light/dark, accent pigments, contrast and density tiers are data, never hardcoded styles
 - 📦 **Container-driven** — components respond to `@container`, not the viewport; the same component composes in a sidebar, a card, or a page
@@ -66,6 +66,20 @@ export function App() {
 }
 ```
 
+## Generative UI
+
+Every family carries a generative face — a zod-typed catalog entry that
+lives beside the component. The faces compose into a
+[json-render](https://json-render.dev) catalog and render through the
+same package:
+
+```ts
+import { catalog } from "@bysages/react/generative";
+```
+
+Point an AI SDK stream at the renderer and a prompt becomes real,
+on-brand components — constrained to the families you registered.
+
 ## Documentation
 
 The [documentation site](https://elements.bysages.com) carries every family with live demos and props tables.

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

@@ -1,2 +1,2 @@
-import { a as SourceDocumentUIPart, c as TextUIPart, d as UIMessagePart, i as ReasoningUIPart, l as ToolUIPart, n as DataUIPart, o as SourceUrlUIPart, r as FileUIPart, s as StepStartUIPart, t as Ai, u as UIMessage } from "../../index-DaAbbSz9.mjs";
-export { Ai, type DataUIPart, type FileUIPart, type ReasoningUIPart, type SourceDocumentUIPart, type SourceUrlUIPart, type StepStartUIPart, type TextUIPart, type ToolUIPart, type UIMessage, type UIMessagePart };
+import { a as AiLoader, c as ReasoningUIPart, d as StepStartUIPart, f as TextUIPart, h as UIMessagePart, i as AiConversation, l as SourceDocumentUIPart, m as UIMessage, n as AiActions, o as DataUIPart, p as ToolUIPart, r as AiContent, s as FileUIPart, t as Ai, u as SourceUrlUIPart } from "../../index-CsfxYv6J.mjs";
+export { Ai, AiActions, AiContent, AiConversation, AiLoader, type DataUIPart, type FileUIPart, type ReasoningUIPart, type SourceDocumentUIPart, type SourceUrlUIPart, type StepStartUIPart, type TextUIPart, type ToolUIPart, type UIMessage, type UIMessagePart };

package/dist/components/ai/index.mjs

@@ -29,27 +29,27 @@ function part(name, tag, extra = {}) {
 }
 /** The log itself: the column every stroke lands in, a landmark to
 * screen readers. */
-const Conversation = part("Conversation", "div", {
+const AiConversation = part("Conversation", "div", {
 	role: "log",
 	"aria-label": "Conversation"
 });
 /** The bubble's inner measure — content that belongs to neither side
 * specifically. */
-const MessageContent = part("Content", "div");
+const AiContent = part("Content", "div");
 /** The quiet row under a message — copy, retry, feedback. */
-const Actions = part("Actions", "div");
+const AiActions = part("Actions", "div");
 /** The while-it-works whisper for the in-flight turns. */
-const Loader = part("Loader", "span", {
+const AiLoader = part("Loader", "span", {
 	role: "status",
 	"aria-label": "Loading"
 });
 /** The whole family under one handle — `Ai.Conversation`,
 * `Ai.Message`, and the rest, exactly as before the split. */
-const Ai = Object.assign(Conversation, {
-	Conversation,
-	MessageContent,
-	Actions,
-	Loader,
+const Ai = Object.assign(AiConversation, {
+	Conversation: AiConversation,
+	MessageContent: AiContent,
+	Actions: AiActions,
+	Loader: AiLoader,
 	Message,
 	Response,
 	Reasoning,
@@ -62,4 +62,4 @@ const Ai = Object.assign(Conversation, {
 });
 injectComponentStyle("ai");
 //#endregion
-export { Ai };
+export { Ai, AiActions, AiContent, AiConversation, AiLoader };

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

@@ -12,8 +12,11 @@ export interface AvatarProps extends ComponentProps<typeof Avatar$1.Root> {
    * default (large) stands as tall as the biggest control so an avatar
    * rides a row without stretching it. */
   size?: AvatarSize;
+  /** The corner: round by default; square cuts it sharp, a stamp
+   * beside a round portrait. */
+  shape?: "circle" | "square";
 }
-declare function AvatarRoot({ size, ...rest }: AvatarProps): import("react").JSX.Element;
+declare function AvatarRoot({ size, shape, ...rest }: AvatarProps): import("react").JSX.Element;
 export declare const Avatar: typeof Avatar$1 & {
   Root: typeof AvatarRoot;
 };

package/dist/components/avatar/index.mjs

@@ -2,10 +2,11 @@ import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 import { Avatar as Avatar$1 } from "@ark-ui/react/avatar";
 //#region src/components/avatar/index.tsx
-function AvatarRoot({ size, ...rest }) {
+function AvatarRoot({ size, shape = "circle", ...rest }) {
 	return /* @__PURE__ */ jsx(Avatar$1.Root, {
 		...rest,
-		"data-size": size
+		"data-size": size,
+		"data-shape": shape
 	});
 }
 const Avatar = Object.assign({}, Avatar$1, { Root: AvatarRoot });

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

@@ -0,0 +1,26 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/bento/index.d.ts
+export interface BentoProps extends HTMLAttributes<HTMLDivElement> {
+  /** Tracks across the lattice. */
+  columns?: number;
+  children?: ReactNode;
+}
+export interface BentoCellProps extends HTMLAttributes<HTMLDivElement> {
+  /** Columns this tile claims. */
+  span?: number;
+  /** Rows this tile claims. */
+  rowSpan?: number;
+  children?: ReactNode;
+}
+/** The bento lattice: a grid of unequal tiles that reads as one plate.
+ * The container owns the track count; each cell claims its own span. */
+export declare function BentoRoot({ columns, children, ...rest }: BentoProps): import("react").JSX.Element;
+/** One tile: `span` claims columns, `rowSpan` claims rows — the rest
+ * of the plate stays in measure. */
+export declare function BentoCell({ span, rowSpan, children, ...rest }: BentoCellProps): import("react").JSX.Element;
+/** The whole family under one handle — Bento.Root, Bento.Cell. */
+export declare const Bento: typeof BentoRoot & {
+  Root: typeof BentoRoot;
+  Cell: typeof BentoCell;
+};
+//#endregion

package/dist/components/bento/index.mjs

@@ -0,0 +1,41 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/bento/index.tsx
+/** The bento lattice: a grid of unequal tiles that reads as one plate.
+* The container owns the track count; each cell claims its own span. */
+function BentoRoot({ columns = 3, children, ...rest }) {
+	injectComponentStyle("bento");
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "bento",
+		"data-part": "root",
+		style: {
+			...rest.style,
+			"--bs-bento-columns": String(columns)
+		},
+		children
+	});
+}
+/** One tile: `span` claims columns, `rowSpan` claims rows — the rest
+* of the plate stays in measure. */
+function BentoCell({ span = 1, rowSpan = 1, children, ...rest }) {
+	injectComponentStyle("bento");
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "bento",
+		"data-part": "cell",
+		style: {
+			...rest.style,
+			"--bs-bento-span-x": String(span),
+			"--bs-bento-span-y": String(rowSpan)
+		},
+		children
+	});
+}
+/** The whole family under one handle — Bento.Root, Bento.Cell. */
+const Bento = Object.assign(BentoRoot, {
+	Root: BentoRoot,
+	Cell: BentoCell
+});
+//#endregion
+export { Bento, BentoCell, BentoRoot };

package/dist/components/block-ui/index.d.mts

@@ -0,0 +1,12 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/block-ui/index.d.ts
+export interface BlockUIProps extends HTMLAttributes<HTMLDivElement> {
+  /** Whether the curtain is drawn. */
+  blocked?: boolean;
+  children?: ReactNode;
+}
+/** A curtain over content that must wait: the blocked region keeps its
+ * shape and dims under frosted paper while a quiet wheel reports the
+ * wait. Callers own the state; the curtain only answers it. */
+export declare function BlockUI({ blocked, children, ...rest }: BlockUIProps): import("react").JSX.Element;
+//#endregion

package/dist/components/block-ui/index.mjs

@@ -0,0 +1,24 @@
+import { Spinner } from "../spinner/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/block-ui/index.tsx
+/** A curtain over content that must wait: the blocked region keeps its
+* shape and dims under frosted paper while a quiet wheel reports the
+* wait. Callers own the state; the curtain only answers it. */
+function BlockUI({ blocked = false, children, ...rest }) {
+	injectComponentStyle("block-ui");
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-scope": "block-ui",
+		"data-part": "root",
+		"data-blocked": blocked ? "" : void 0,
+		"aria-busy": blocked || void 0,
+		children: [children, blocked ? /* @__PURE__ */ jsx("div", {
+			"data-scope": "block-ui",
+			"data-part": "mask",
+			children: /* @__PURE__ */ jsx(Spinner, { size: "lg" })
+		}) : null]
+	});
+}
+//#endregion
+export { BlockUI };

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

@@ -0,0 +1,23 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/browser/index.d.ts
+export interface BrowserPartProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+/** The three lamps are the system's own fixed pigments — the same
+ * semantics reserved for danger, warning, and success. */
+export declare function BrowserDots(props: BrowserPartProps): import("react").JSX.Element;
+export declare function BrowserRoot(props: BrowserPartProps): import("react").JSX.Element;
+export declare function BrowserTitleBar(props: BrowserPartProps): import("react").JSX.Element;
+export declare function BrowserUrlBar(props: BrowserPartProps): import("react").JSX.Element;
+export declare function BrowserBody(props: BrowserPartProps): import("react").JSX.Element;
+/** A browser window as a vessel: title bar, the three lamps, the
+ * address well, and a body that carries whatever the site hangs in
+ * it — an iframe, a screenshot, a live page. */
+export declare const Browser: typeof BrowserRoot & {
+  Root: typeof BrowserRoot;
+  TitleBar: typeof BrowserTitleBar;
+  Dots: typeof BrowserDots;
+  UrlBar: typeof BrowserUrlBar;
+  Body: typeof BrowserBody;
+};
+//#endregion

package/dist/components/browser/index.mjs

@@ -0,0 +1,70 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/browser/index.tsx
+/** The three lamps are the system's own fixed pigments — the same
+* semantics reserved for danger, warning, and success. */
+function BrowserDots(props) {
+	injectComponentStyle("browser");
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-scope": "browser",
+		"data-part": "dots",
+		children: [
+			"danger",
+			"warning",
+			"success"
+		].map((tone) => /* @__PURE__ */ jsx("span", {
+			"data-scope": "browser",
+			"data-part": "dot",
+			"data-tone": tone
+		}, tone))
+	});
+}
+function BrowserRoot(props) {
+	injectComponentStyle("browser");
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-scope": "browser",
+		"data-part": "root",
+		children: props.children
+	});
+}
+function BrowserTitleBar(props) {
+	injectComponentStyle("browser");
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-scope": "browser",
+		"data-part": "titlebar",
+		children: props.children
+	});
+}
+function BrowserUrlBar(props) {
+	injectComponentStyle("browser");
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-scope": "browser",
+		"data-part": "urlbar",
+		children: props.children
+	});
+}
+function BrowserBody(props) {
+	injectComponentStyle("browser");
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-scope": "browser",
+		"data-part": "body",
+		children: props.children
+	});
+}
+/** A browser window as a vessel: title bar, the three lamps, the
+* address well, and a body that carries whatever the site hangs in
+* it — an iframe, a screenshot, a live page. */
+const Browser = Object.assign(BrowserRoot, {
+	Root: BrowserRoot,
+	TitleBar: BrowserTitleBar,
+	Dots: BrowserDots,
+	UrlBar: BrowserUrlBar,
+	Body: BrowserBody
+});
+//#endregion
+export { Browser, BrowserBody, BrowserDots, BrowserRoot, BrowserTitleBar, BrowserUrlBar };

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

@@ -1,6 +1,6 @@
-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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId, useMemo, useState } from "react";
 import { Portal } from "@ark-ui/react/portal";
 import { useEnvironmentContext } from "@ark-ui/react/environment";
@@ -151,6 +151,7 @@ function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigge
 							children: item.label
 						}),
 						itemState.hasChildren ? /* @__PURE__ */ jsx("span", {
+							"data-scope": "cascade-select",
 							"data-part": "branch-indicator",
 							"aria-hidden": "true",
 							children: chevronRight
@@ -164,7 +165,8 @@ function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigge
 			})
 		});
 		const next = nodeState.highlightedChild;
-		return [list, next != null && collection.isBranchNode(next) ? renderColumn(next, [...indexPath, nodeState.highlightedIndex], [...valuePath, collection.getNodeValue(next)]) : null];
+		const child = next != null && collection.isBranchNode(next) ? renderColumn(next, [...indexPath, nodeState.highlightedIndex], [...valuePath, collection.getNodeValue(next)]) : null;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [list, child] });
 	}
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
@@ -193,6 +195,7 @@ function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigge
 				...api.getContentProps(),
 				"data-size": size,
 				children: [filterable ? /* @__PURE__ */ jsx("div", {
+					"data-scope": "cascade-select",
 					"data-part": "search",
 					children: /* @__PURE__ */ jsx(Input, {
 						size: "sm",
@@ -202,13 +205,16 @@ function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigge
 						"aria-label": "Filter options"
 					})
 				}) : null, /* @__PURE__ */ jsx("div", {
+					"data-scope": "cascade-select",
 					"data-part": "corridor",
 					"data-flow": filtering ? "flat" : "columns",
 					children: filtering ? matchPaths.length === 0 ? /* @__PURE__ */ jsx("p", {
+						"data-scope": "cascade-select",
 						"data-part": "empty",
 						children: "Nothing matches"
 					}) : matchPaths.map((hit) => /* @__PURE__ */ jsx("button", {
 						type: "button",
+						"data-scope": "cascade-select",
 						"data-part": "match",
 						"data-selected": isSelected(hit.path) || void 0,
 						onClick: () => pickMatch(hit.path),

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

@@ -0,0 +1,18 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/data-view/index.d.ts
+export interface DataViewProps extends HTMLAttributes<HTMLDivElement> {
+  items: unknown[];
+  /** Ledger rows or a lattice of cards. */
+  layout?: "list" | "grid";
+  /** Records per page; leave unset to show everything at once. */
+  pageSize?: number;
+  /** Renders one record; the view lays the returned nodes out. */
+  renderItem?: (item: unknown, index: number) => ReactNode;
+  header?: ReactNode;
+}
+/** One vessel, two layouts: the caller renders each record through
+ * renderItem, the view lays the records out as a ledger or a lattice
+ * and — when a page size is given — pages them with the pagination
+ * family's own parts rather than a second implementation. */
+export declare function DataView({ items, layout, pageSize, renderItem, header, ...rest }: DataViewProps): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,64 @@
+import { Pagination } from "../pagination/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/components/data-view/index.tsx
+/** One vessel, two layouts: the caller renders each record through
+* renderItem, the view lays the records out as a ledger or a lattice
+* and — when a page size is given — pages them with the pagination
+* family's own parts rather than a second implementation. */
+function DataView({ items, layout = "list", pageSize, renderItem, header, ...rest }) {
+	injectComponentStyle("data-view");
+	const [page, setPage] = useState(1);
+	const pageCount = pageSize ? Math.max(1, Math.ceil(items.length / pageSize)) : 1;
+	const visible = pageSize ? items.slice((page - 1) * pageSize, page * pageSize) : items;
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-scope": "data-view",
+		"data-part": "root",
+		children: [
+			header,
+			/* @__PURE__ */ jsx("div", {
+				"data-scope": "data-view",
+				"data-part": "content",
+				"data-layout": layout,
+				children: visible.map((item, index) => /* @__PURE__ */ jsx("div", {
+					"data-scope": "data-view",
+					"data-part": "cell",
+					children: renderItem?.(item, index)
+				}, index))
+			}),
+			pageSize && pageCount > 1 ? /* @__PURE__ */ jsx("div", {
+				"data-scope": "data-view",
+				"data-part": "pager",
+				children: /* @__PURE__ */ jsxs(Pagination.Root, {
+					count: items.length,
+					pageSize,
+					page,
+					siblingCount: 1,
+					onPageChange: (details) => setPage(details.page),
+					children: [
+						/* @__PURE__ */ jsx(Pagination.PrevTrigger, {
+							"aria-label": "Previous page",
+							children: "‹"
+						}),
+						/* @__PURE__ */ jsx(Pagination.Context, { children: (pagination) => pagination.pages.map((entry, index) => entry.type === "ellipsis" ? /* @__PURE__ */ jsx(Pagination.Ellipsis, {
+							index,
+							children: "…"
+						}, `e${index}`) : /* @__PURE__ */ jsx(Pagination.Item, {
+							type: "page",
+							value: entry.value,
+							children: entry.value
+						}, entry.value)) }),
+						/* @__PURE__ */ jsx(Pagination.NextTrigger, {
+							"aria-label": "Next page",
+							children: "›"
+						})
+					]
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { DataView };

package/dist/components/deferred-content/index.d.mts

@@ -0,0 +1,16 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/deferred-content/index.d.ts
+export interface DeferredContentProps extends HTMLAttributes<HTMLDivElement> {
+  /** How much of the placeholder must be visible before the content
+   * mounts, from 0 (any pixel) to 1 (the whole box). */
+  threshold?: number;
+  /** Drawn until the box approaches the viewport. */
+  placeholder?: ReactNode;
+  children?: ReactNode;
+}
+/** Content that waits to be worth rendering: the slot stays off the
+ * tree until the placeholder scrolls near the viewport, then mounts
+ * once and stays. The placeholder is drawn by the caller, so the late
+ * arrival costs no layout shift it cannot predict. */
+export declare function DeferredContent({ threshold, placeholder, children, ...rest }: DeferredContentProps): import("react").JSX.Element;
+//#endregion

package/dist/components/deferred-content/index.mjs

@@ -0,0 +1,34 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/deferred-content/index.tsx
+/** Content that waits to be worth rendering: the slot stays off the
+* tree until the placeholder scrolls near the viewport, then mounts
+* once and stays. The placeholder is drawn by the caller, so the late
+* arrival costs no layout shift it cannot predict. */
+function DeferredContent({ threshold = .2, placeholder, children, ...rest }) {
+	injectComponentStyle("deferred-content");
+	const host = useRef(null);
+	const [active, setActive] = useState(false);
+	useEffect(() => {
+		const node = host.current;
+		if (!node) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) {
+				setActive(true);
+				observer.disconnect();
+			}
+		}, { threshold });
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [threshold]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: host,
+		...rest,
+		"data-scope": "deferred-content",
+		"data-part": "root",
+		children: active ? children : placeholder
+	});
+}
+//#endregion
+export { DeferredContent };

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

@@ -5,14 +5,22 @@ import { HTMLAttributes } from "react";
  * stacks each pair for narrow measures. */
 export interface DescriptionsRootProps extends HTMLAttributes<HTMLDListElement> {
   layout?: "horizontal" | "vertical";
+  /** The framed register: one hairline round the whole, terms on
+   * inset paper. */
+  bordered?: boolean;
+  /** Pairs across the grid: one ledger per column. */
+  column?: number;
+}
+export declare function DescriptionsRoot({ layout, bordered, column, children, ...rest }: DescriptionsRootProps): import("react").JSX.Element;
+declare function DescriptionsItem({ span, children, ...rest }: HTMLAttributes<HTMLDivElement> & {
+  span?: number;
+}): import("react").JSX.Element;
+declare namespace DescriptionsItem {
+  var displayName: string;
 }
-export declare function DescriptionsRoot({ layout, children, ...rest }: DescriptionsRootProps): import("react").JSX.Element;
 export declare const Descriptions: {
   Root: typeof DescriptionsRoot;
-  Item: {
-    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
-    displayName: string;
-  };
+  Item: typeof DescriptionsItem;
   Term: {
     ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
     displayName: string;

package/dist/components/descriptions/index.mjs

@@ -1,13 +1,18 @@
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/descriptions/index.tsx
-function DescriptionsRoot({ layout = "horizontal", children, ...rest }) {
+function DescriptionsRoot({ layout = "horizontal", bordered = false, column = 1, children, ...rest }) {
 	injectComponentStyle("descriptions");
 	return /* @__PURE__ */ jsx("dl", {
 		...rest,
 		"data-scope": "descriptions",
 		"data-part": "root",
 		"data-layout": layout,
+		"data-bordered": bordered || void 0,
+		style: {
+			...rest.style,
+			"--bs-desc-columns": String(column)
+		},
 		children
 	});
 }
@@ -22,9 +27,22 @@ function part(name, tag) {
 	Component.displayName = "Descriptions" + name;
 	return Component;
 }
+function DescriptionsItem({ span = 1, children, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		style: {
+			...rest.style,
+			"--bs-desc-span": String(span * 2)
+		},
+		"data-scope": "descriptions",
+		"data-part": "item",
+		children
+	});
+}
+DescriptionsItem.displayName = "DescriptionsItem";
 const Descriptions = {
 	Root: DescriptionsRoot,
-	Item: part("Item", "div"),
+	Item: DescriptionsItem,
 	Term: part("Term", "dt"),
 	Detail: part("Detail", "dd")
 };

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

@@ -0,0 +1,25 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/dock/index.d.ts
+export interface DockProps extends HTMLAttributes<HTMLDivElement> {
+  /** The tallest an item swells under the hand — 1 stands still. */
+  maxScale?: number;
+  /** How far the hand reaches, in px, before an item stops answering. */
+  radius?: number;
+  children?: ReactNode;
+}
+export interface DockItemProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+/** The magnifying dock: a floating rail whose icons swell toward the
+ * hand. The wrapper measures per item and writes --bs-dock-scale; CSS
+ * eases the chase, so no spring engine rides along. */
+export declare function DockRoot({ maxScale, radius, children, ...rest }: DockProps): import("react").JSX.Element;
+/** One moored place in the rail: whatever slots in grows from the
+ * floor, never from its center. */
+export declare function DockItem({ children, ...rest }: DockItemProps): import("react").JSX.Element;
+/** The whole family under one handle — Dock.Root, Dock.Item. */
+export declare const Dock: typeof DockRoot & {
+  Root: typeof DockRoot;
+  Item: typeof DockItem;
+};
+//#endregion

package/dist/components/dock/index.mjs

@@ -0,0 +1,51 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/dock/index.tsx
+const ITEM = "[data-scope=\"dock\"][data-part=\"item\"]";
+/** The magnifying dock: a floating rail whose icons swell toward the
+* hand. The wrapper measures per item and writes --bs-dock-scale; CSS
+* eases the chase, so no spring engine rides along. */
+function DockRoot({ maxScale = 1.5, radius = 96, children, ...rest }) {
+	injectComponentStyle("dock");
+	const magnify = (event) => {
+		for (const item of event.currentTarget.querySelectorAll(ITEM)) {
+			const rect = item.getBoundingClientRect();
+			const dist = Math.abs(event.clientX - (rect.left + rect.width / 2));
+			const t = Math.max(0, 1 - dist / radius);
+			item.style.setProperty("--bs-dock-scale", (1 + (maxScale - 1) * t * t).toFixed(4));
+		}
+	};
+	const reset = (event) => {
+		for (const item of event.currentTarget.querySelectorAll(ITEM)) item.style.removeProperty("--bs-dock-scale");
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "dock",
+		"data-part": "root",
+		style: {
+			...rest.style,
+			"--bs-dock-max-scale": maxScale
+		},
+		onPointerMove: magnify,
+		onPointerLeave: reset,
+		children
+	});
+}
+/** One moored place in the rail: whatever slots in grows from the
+* floor, never from its center. */
+function DockItem({ children, ...rest }) {
+	injectComponentStyle("dock");
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "dock",
+		"data-part": "item",
+		children
+	});
+}
+/** The whole family under one handle — Dock.Root, Dock.Item. */
+const Dock = Object.assign(DockRoot, {
+	Root: DockRoot,
+	Item: DockItem
+});
+//#endregion
+export { Dock, DockItem, DockRoot };