@bysages/react 0.3.0 → 0.4.0

package/dist/components/hover-card/index.mjs

@@ -1,10 +1,41 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { HoverCard as HoverCard$1 } from "@ark-ui/react/hover-card";
 //#region src/components/hover-card/index.tsx
 /** Ark's HoverCard, dressed in the paper-and-ink system: a preview card
 * that dissolves in over a quiet inline link, never stealing focus. The
 * API is Ark's own — Root, Trigger, Positioner, Content, Arrow, ArrowTip. */
-const HoverCard = HoverCard$1;
+function HoverCardRoot(props) {
+	const id = useElementId("hover-card", props);
+	return /* @__PURE__ */ jsx(HoverCard$1.Root, {
+		...props,
+		id
+	});
+}
+function HoverCardFacade({ open, defaultOpen, trigger, content, label, description, disabled = false, placement, children, onOpenChange }) {
+	return /* @__PURE__ */ jsxs(HoverCardRoot, {
+		...placement === void 0 ? {} : { positioning: { placement } },
+		...open === void 0 ? {} : { open },
+		...defaultOpen === void 0 ? {} : { defaultOpen },
+		onOpenChange: (details) => onOpenChange?.(details.open),
+		children: [/* @__PURE__ */ jsx(HoverCard$1.Trigger, {
+			disabled,
+			children: trigger
+		}), /* @__PURE__ */ jsx(HoverCard$1.Positioner, { children: /* @__PURE__ */ jsxs(HoverCard$1.Content, { children: [
+			/* @__PURE__ */ jsx(HoverCard$1.Arrow, { children: /* @__PURE__ */ jsx(HoverCard$1.ArrowTip, {}) }),
+			/* @__PURE__ */ jsx("h3", { children: label }),
+			description ? /* @__PURE__ */ jsx("p", { children: description }) : null,
+			content ? /* @__PURE__ */ jsx("p", { children: content }) : null,
+			children
+		] }) })]
+	});
+}
+HoverCardFacade.displayName = "SHoverCard";
+const HoverCard = Object.assign(HoverCardFacade, {
+	...HoverCard$1,
+	Root: HoverCardRoot
+});
 injectComponentStyle("hover-card");
 //#endregion
 export { HoverCard };

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

@@ -1,11 +1,11 @@
-import { HTMLAttributes } from "react";
 import { IconifyIcon } from "@bysages/core/icons";
+import { HTMLAttributes } from "react";
 //#region src/components/icon/index.d.ts
 /** The inkwell: a standard box that keeps any inline svg at its optical
  * measure and in the text's own ink — the icon carries no pigment and no
- * size of its own. Bring a glyph through `glyph` (a direct registry
- * import), through `name` from the whitelisted registry, or bring your
- * own; the well renders either. */
+ * size of its own. Bring an `@bysages/icons` export or any other
+ * IconifyIcon through `glyph`, a built-in core-registry name through
+ * `name`, or your own svg; the well renders either. */
 export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
   /** Size steps follow the surrounding font size; `inherit` is the
    * default — one em of the text the icon sits in. */
@@ -13,12 +13,14 @@ export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
   /** The accessible name. Without it the icon is presentation-only and
    * hidden from the accessibility tree. */
   label?: string;
-  /** A glyph from the registry, imported directly. Ignored when children
+  /** An `@bysages/icons` export or any IconifyIcon. Ignored when children
    * are given — an explicit glyph always wins. */
   glyph?: IconifyIcon;
-  /** A registry name — only the whitelisted set the wrappers draw
-   * themselves. Ignored when `glyph` or children are given. */
+  /** A built-in name from the curated core registry. Ignored when `glyph` or children are given. */
   name?: string;
 }
-export declare function Icon({ size, label, glyph, name, children, ...rest }: IconProps): import("react").JSX.Element;
+declare function IconImpl({ size, label, glyph, name, children, ...rest }: IconProps): import("react").JSX.Element;
+export declare const Icon: typeof IconImpl & {
+  Root: typeof IconImpl;
+};
 //#endregion

package/dist/components/icon/index.mjs

@@ -1,11 +1,12 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
 import { getIcon } from "@bysages/core/icons";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/icon/index.tsx
-function Icon({ size = "inherit", label, glyph, name, children, ...rest }) {
+function IconImpl({ size = "inherit", label, glyph, name, children, ...rest }) {
 	injectComponentStyle("icon");
 	const resolved = glyph ?? (name && children == null ? getIcon(name) : void 0);
-	if (name && children == null && glyph == null && !resolved) console.error(`[icons] unknown icon name "${name}" — not in the wrappers' whitelist; import the glyph from @bysages/icons and pass it as glyph`);
+	if (name && children == null && glyph == null && !resolved) console.error(`[icons] unknown icon name "${name}" — not in the core default registry; pass it explicitly as glyph`);
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
 		role: label != null ? "img" : void 0,
@@ -22,5 +23,6 @@ function Icon({ size = "inherit", label, glyph, name, children, ...rest }) {
 		}) : null)
 	});
 }
+const Icon = withSelfRoot(IconImpl);
 //#endregion
 export { Icon };

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

@@ -2,7 +2,7 @@ import { HTMLAttributes, ReactNode } from "react";
 //#region src/components/image/index.d.ts
 /** A framed picture: while the source loads, the frame keeps the
  * skeleton's breath; the picture dissolves in when it lands; a broken
- * source leaves the `fallback` — or the placeholder glyph when the
+ * source leaves the `fallback` — or the placeholder icon when the
  * caller has nothing local to say. The frame's size is the consumer's
  * to give. */
 export interface ImageProps extends Omit<HTMLAttributes<HTMLElement>, "onError" | "onLoad"> {
@@ -10,8 +10,17 @@ export interface ImageProps extends Omit<HTMLAttributes<HTMLElement>, "onError"
   alt?: string;
   fit?: "cover" | "contain" | "fill" | "none";
   loading?: "lazy" | "eager";
+  /** Intrinsic rendered width, reserved on the image to avoid layout
+   * shift while the source loads. */
+  width?: number | string;
+  /** Intrinsic rendered height, reserved on the image to avoid layout
+   * shift while the source loads. */
+  height?: number | string;
   /** Shown in place of the picture when the source breaks. */
   fallback?: ReactNode;
 }
-export declare function Image({ src, alt, fit, loading, fallback, ...rest }: ImageProps): import("react").JSX.Element;
+declare function ImageImpl({ src, alt, fit, loading, width, height, fallback, ...rest }: ImageProps): import("react").JSX.Element;
+export declare const Image: typeof ImageImpl & {
+  Root: typeof ImageImpl;
+};
 //#endregion

package/dist/components/image/index.mjs

@@ -1,36 +1,19 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 //#region src/components/image/index.tsx
-/** The mark for a source that never arrived: a quiet mountain-and-sun,
-* drawn in the stylesheet's stroke and hidden from the reader. */
-function placeholderGlyph() {
-	return /* @__PURE__ */ jsxs("svg", {
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		"aria-hidden": "true",
-		children: [
-			/* @__PURE__ */ jsx("rect", {
-				x: 3,
-				y: 4,
-				width: 18,
-				height: 16,
-				rx: 1.5
-			}),
-			/* @__PURE__ */ jsx("circle", {
-				cx: 9,
-				cy: 10,
-				r: 1.5
-			}),
-			/* @__PURE__ */ jsx("path", { d: "m5.5 17.5 4.5-5 3 3.5 2.5-3 3 4.5" })
-		]
-	});
-}
-function Image({ src, alt = "", fit = "cover", loading = "lazy", fallback, ...rest }) {
+const placeholderIcon = iconNode("image");
+function ImageImpl({ src, alt = "", fit = "cover", loading = "lazy", width, height, fallback, ...rest }) {
 	injectComponentStyle("image");
 	const [state, setState] = useState("loading");
-	useEffect(() => setState("loading"), [src]);
+	const imageRef = useRef(null);
+	useEffect(() => {
+		setState("loading");
+		const image = imageRef.current;
+		if (image?.complete) setState(image.naturalWidth > 0 ? "loaded" : "error");
+	}, [src]);
 	return /* @__PURE__ */ jsxs("figure", {
 		...rest,
 		"data-scope": "image",
@@ -38,20 +21,24 @@ function Image({ src, alt = "", fit = "cover", loading = "lazy", fallback, ...re
 		"data-state": state,
 		"data-fit": fit,
 		children: [/* @__PURE__ */ jsx("img", {
+			ref: imageRef,
 			"data-scope": "image",
 			"data-part": "img",
 			src,
 			alt,
 			loading,
 			decoding: "async",
+			width,
+			height,
 			onLoad: () => setState("loaded"),
 			onError: () => setState("error")
 		}), state === "error" ? /* @__PURE__ */ jsx("div", {
 			"data-scope": "image",
 			"data-part": "fallback",
-			children: fallback ?? placeholderGlyph()
+			children: fallback ?? placeholderIcon
 		}) : null]
 	});
 }
+const Image = withSelfRoot(ImageImpl);
 //#endregion
 export { Image };

package/dist/components/image-cropper/index.d.mts

@@ -1,8 +1,19 @@
+import { ComponentProps } from "react";
 import { ImageCropper as ImageCropper$1 } from "@ark-ui/react/image-cropper";
 //#region src/components/image-cropper/index.d.ts
-/** Ark's ImageCropper, dressed in the paper-and-ink system: a rounded vessel
+/** ImageCropper, dressed in the paper-and-ink system: a rounded vessel
  * holding the photograph, one lit selection window framed by light hairlines.
  * The API is Ark's own — Root, Viewport, Image, Selection, Handle, Grid,
  * Context. */
-export declare const ImageCropper: typeof ImageCropper$1;
+declare function ImageCropperRoot(props: ComponentProps<typeof ImageCropper$1.Root>): import("react").JSX.Element;
+export interface ImageCropperFacadeProps {
+  src: string;
+  alt?: string;
+}
+/** The complete cropper behind one photograph: viewport, selection frame,
+ * corner handles, and ruling grid arrive ready to use. */
+declare function ImageCropperFacade({ src, alt }: ImageCropperFacadeProps): import("react").JSX.Element;
+export declare const ImageCropper: typeof ImageCropperFacade & typeof ImageCropper$1 & {
+  Root: typeof ImageCropperRoot;
+};
 //#endregion

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

@@ -1,11 +1,43 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ImageCropper as ImageCropper$1 } from "@ark-ui/react/image-cropper";
 //#region src/components/image-cropper/index.tsx
-/** Ark's ImageCropper, dressed in the paper-and-ink system: a rounded vessel
+/** ImageCropper, dressed in the paper-and-ink system: a rounded vessel
 * holding the photograph, one lit selection window framed by light hairlines.
 * The API is Ark's own — Root, Viewport, Image, Selection, Handle, Grid,
 * Context. */
-const ImageCropper = ImageCropper$1;
+function ImageCropperRoot(props) {
+	const id = useElementId("image-cropper", props);
+	return /* @__PURE__ */ jsx(ImageCropper$1.Root, {
+		...props,
+		id
+	});
+}
+/** The complete cropper behind one photograph: viewport, selection frame,
+* corner handles, and ruling grid arrive ready to use. */
+function ImageCropperFacade({ src, alt }) {
+	return /* @__PURE__ */ jsx(ImageCropperRoot, { children: /* @__PURE__ */ jsxs(ImageCropper$1.Viewport, { children: [/* @__PURE__ */ jsx(ImageCropper$1.Image, {
+		src,
+		alt
+	}), /* @__PURE__ */ jsxs(ImageCropper$1.Selection, { children: [
+		[
+			"nw",
+			"ne",
+			"se",
+			"sw"
+		].map((position) => /* @__PURE__ */ jsx(ImageCropper$1.Handle, {
+			position,
+			children: /* @__PURE__ */ jsx("div", {})
+		}, position)),
+		/* @__PURE__ */ jsx(ImageCropper$1.Grid, { axis: "horizontal" }),
+		/* @__PURE__ */ jsx(ImageCropper$1.Grid, { axis: "vertical" })
+	] })] }) });
+}
+const ImageCropper = Object.assign(ImageCropperFacade, {
+	...ImageCropper$1,
+	Root: ImageCropperRoot
+});
 injectComponentStyle("image-cropper");
 //#endregion
 export { ImageCropper };

package/dist/components/image-viewer/index.d.mts

@@ -1,18 +1,2 @@
-//#region src/components/image-viewer/index.d.ts
-/**
- * A lightbox: the picture over a dimmed page, with a small toolbar
- * beneath it. Zoom is the reader's hand (half to three times, clamped),
- * a quarter turn at a time rotates, Escape and the scrim close — the
- * dialog machine carries the modal part. `open` may stay with the
- * caller; left undefined the viewer keeps it to itself.
- */
-export interface ImageViewerProps {
-  src: string;
-  alt?: string;
-  open?: boolean;
-  zoomable?: boolean;
-  /** Reports the viewer's next state. */
-  onOpenChange?: (open: boolean) => void;
-}
-export declare function ImageViewer({ src, alt, open, zoomable, onOpenChange }: ImageViewerProps): import("react").JSX.Element;
-//#endregion
+import { n as ImageViewerProps, t as ImageViewer } from "../../index-Dj8S4eyJ.mjs";
+export { ImageViewer, ImageViewerProps };

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

@@ -1,110 +1,4 @@
-import { Button } from "../button/index.mjs";
-import { ButtonGroup } from "../button-group/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { Portal } from "@ark-ui/react/portal";
-import { Dialog } from "@ark-ui/react/dialog";
-//#region src/components/image-viewer/index.tsx
-const MIN_SCALE = .5;
-const MAX_SCALE = 3;
-const SCALE_STEP = .25;
-/** The toolbar's line-drawn glyphs, fresh per render. */
-const TOOL_GLYPHS = {
-	zoomIn: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx("circle", {
-			cx: 11,
-			cy: 11,
-			r: 7
-		}),
-		/* @__PURE__ */ jsx("path", { d: "m16.2 16.2 4.8 4.8" }),
-		/* @__PURE__ */ jsx("path", { d: "M8 11h6" }),
-		/* @__PURE__ */ jsx("path", { d: "M11 8v6" })
-	] }),
-	zoomOut: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx("circle", {
-			cx: 11,
-			cy: 11,
-			r: 7
-		}),
-		/* @__PURE__ */ jsx("path", { d: "m16.2 16.2 4.8 4.8" }),
-		/* @__PURE__ */ jsx("path", { d: "M8 11h6" })
-	] }),
-	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 }) {
-	injectComponentStyle("image-viewer");
-	const [localOpen, setLocalOpen] = useState(false);
-	const [scale, setScale] = useState(1);
-	const [rotation, setRotation] = useState(0);
-	const isOpen = open ?? localOpen;
-	const setOpen = (value) => {
-		if (open === void 0) setLocalOpen(value);
-		onOpenChange?.(value);
-	};
-	useEffect(() => {
-		if (isOpen) {
-			setScale(1);
-			setRotation(0);
-		}
-	}, [isOpen]);
-	function zoom(step) {
-		setScale((current) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, current + step)));
-	}
-	function rotate() {
-		setRotation((current) => (current + 90) % 360);
-	}
-	function toolButton(label, glyph, onClick) {
-		return /* @__PURE__ */ jsx(Button, {
-			variant: "ghost",
-			square: true,
-			size: "lg",
-			"aria-label": label,
-			onClick,
-			children: /* @__PURE__ */ jsx("svg", {
-				viewBox: "0 0 24 24",
-				fill: "none",
-				stroke: "currentColor",
-				strokeWidth: 1.5,
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				"aria-hidden": "true",
-				children: glyph()
-			})
-		});
-	}
-	return /* @__PURE__ */ jsx(Dialog.Root, {
-		open: isOpen,
-		onOpenChange: (details) => setOpen(details.open),
-		lazyMount: true,
-		unmountOnExit: true,
-		children: /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: "bs-image-viewer-backdrop" }), /* @__PURE__ */ jsx(Dialog.Positioner, {
-			className: "bs-image-viewer-positioner",
-			children: /* @__PURE__ */ jsxs(Dialog.Content, {
-				className: "bs-image-viewer-content",
-				"aria-label": alt || "Image preview",
-				onClick: (event) => {
-					if (event.target === event.currentTarget) setOpen(false);
-				},
-				children: [/* @__PURE__ */ jsx("img", {
-					"data-scope": "image-viewer",
-					"data-part": "viewport",
-					src,
-					alt,
-					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))
-					] })
-				})]
-			})
-		})] })
-	});
-}
-//#endregion
+import "../button-group/index.mjs";
+import "../dialog/index.mjs";
+import { t as ImageViewer } from "../../image-viewer-Cf6thHax.mjs";
 export { ImageViewer };

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

@@ -15,5 +15,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
   mask?: string;
   onValueChange?: (value: string) => void;
 }
-export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>> & {
+  Root: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+};
 //#endregion

package/dist/components/input/index.mjs

@@ -1,2 +1,2 @@
-import { t as Input } from "../../input-2oezH-dY.mjs";
+import { t as Input } from "../../input-C21Zzuy6.mjs";
 export { Input };

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

@@ -1,7 +1,23 @@
+import { ComponentProps } from "react";
 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. */
-export declare const JsonTreeView: typeof JsonTreeView$1;
+/** The auto-rendered tree hands every branch its chevron from the
+ * `arrow` element — filled with the house icon unless the consumer
+ * draws their own, so a JSON tree never opens as a bare indent. */
+declare function JsonTreeViewTree(props: ComponentProps<typeof JsonTreeView$1.Tree>): import("react").JSX.Element;
+/** 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. */
+declare function JsonTreeViewRoot(props: ComponentProps<typeof JsonTreeView$1.Root>): import("react").JSX.Element;
+/** The one-tag path for a read-only tree; custom node rendering stays on
+ * the anatomy. */
+declare function JsonTreeViewFacade({ data, defaultExpandedDepth, ...rest }: {
+  data: unknown;
+  defaultExpandedDepth?: number;
+} & ComponentProps<typeof JsonTreeViewRoot>): import("react").JSX.Element;
+export declare const JsonTreeView: typeof JsonTreeViewFacade & {
+  Root: typeof JsonTreeViewRoot;
+  Tree: typeof JsonTreeViewTree;
+  RootProvider: import("react").ForwardRefExoticComponent<JsonTreeView$1.RootProviderProps & import("react").RefAttributes<HTMLDivElement>>;
+};
 //#endregion

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

@@ -1,10 +1,44 @@
+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 { JsonTreeView as JsonTreeView$1 } from "@ark-ui/react/json-tree-view";
 //#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 icon unless the consumer
+* draws their own, so a JSON tree never opens as a bare indent. */
+function JsonTreeViewTree(props) {
+	const { arrow = iconNode("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. */
+function JsonTreeViewRoot(props) {
+	const id = useElementId("json-tree-view", props);
+	return /* @__PURE__ */ jsx(JsonTreeView$1.Root, {
+		...props,
+		id
+	});
+}
+/** The one-tag path for a read-only tree; custom node rendering stays on
+* the anatomy. */
+function JsonTreeViewFacade({ data, defaultExpandedDepth = 1, ...rest }) {
+	return /* @__PURE__ */ jsx(JsonTreeViewRoot, {
+		...rest,
+		data,
+		defaultExpandedDepth,
+		children: /* @__PURE__ */ jsx(JsonTreeViewTree, {})
+	});
+}
+const JsonTreeView = Object.assign(JsonTreeViewFacade, {
+	...JsonTreeView$1,
+	Root: JsonTreeViewRoot,
+	Tree: JsonTreeViewTree
+});
 injectComponentStyle("json-tree-view");
 //#endregion
 export { JsonTreeView };

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

@@ -2,5 +2,8 @@ import { HTMLAttributes } from "react";
 //#region src/components/kbd/index.d.ts
 /** A keycap in miniature, riding the type it annotates. */
 export type KbdProps = HTMLAttributes<HTMLElement>;
-export declare function Kbd({ children, ...rest }: KbdProps): import("react").JSX.Element;
+declare function KbdImpl({ children, ...rest }: KbdProps): import("react").JSX.Element;
+export declare const Kbd: typeof KbdImpl & {
+  Root: typeof KbdImpl;
+};
 //#endregion

package/dist/components/kbd/index.mjs

@@ -1,7 +1,8 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/kbd/index.tsx
-function Kbd({ children, ...rest }) {
+function KbdImpl({ children, ...rest }) {
 	injectComponentStyle("kbd");
 	return /* @__PURE__ */ jsx("kbd", {
 		...rest,
@@ -10,5 +11,6 @@ function Kbd({ children, ...rest }) {
 		children
 	});
 }
+const Kbd = withSelfRoot(KbdImpl);
 //#endregion
 export { Kbd };

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode } from "react";
+import { Dispatch, HTMLAttributes, ReactNode, SetStateAction } from "react";
 //#region src/components/layout/index.d.ts
 /** Declare which edge the skeleton reserves for its sider — without
  * it the root is a single column. */
@@ -6,10 +6,28 @@ export interface LayoutRootProps extends HTMLAttributes<HTMLDivElement> {
   sider?: "start" | "end";
   children?: ReactNode;
 }
-/** Which edge the enclosing root reserves for its rail — shared so the
- * sider's resize handle knows which way the hand pulls. */
+/** Runtime settings the sider shares with its root so the split can be
+ * driven by Ark while the public sizing props stay on `Layout.Sider`. */
+export interface LayoutSiderState {
+  resizable: boolean;
+  collapsed: boolean;
+  width: string;
+  minWidth: string;
+  maxWidth: string;
+}
+export interface LayoutResizeHandlers {
+  start: () => void;
+  resize: (width: number) => void;
+  end: () => void;
+}
 export interface LayoutContextValue {
   siderPlacement: () => "start" | "end" | undefined;
+  getSiderState: () => LayoutSiderState | null;
+  setSiderState: Dispatch<SetStateAction<LayoutSiderState | null>>;
+  setResizeHandlers: (handlers: LayoutResizeHandlers) => void;
+  resizeStart: () => void;
+  resize: (width: number) => void;
+  resizeEnd: () => void;
 }
 /**
  * The application skeleton: Root, Header, Sider, Content, Footer —
@@ -17,7 +35,7 @@ export interface LayoutContextValue {
  * root is a full-height grid; a declared `sider` turns the columns
  * around to meet whichever edge the rail stands on.
  */
-declare function Root({ sider, children, ...rest }: LayoutRootProps): import("react").JSX.Element;
+declare function Root({ sider, children, style, ...rest }: LayoutRootProps): import("react").JSX.Element;
 export interface LayoutSiderProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
   /** The caller drives the fold; the sider mirrors it and echoes every
    * change back through `onCollapsedChange`. */
@@ -27,9 +45,9 @@ export interface LayoutSiderProps extends Omit<HTMLAttributes<HTMLElement>, "chi
   width?: string;
   /** The inline size when folded. */
   collapsedWidth?: string;
-  /** Offer the hairline at the flow edge: the rail's width follows the
-   * hand (and the arrow keys), clamped by `minWidth`/`maxWidth`, and
-   * every change rides `onWidthChange`. */
+  /** Offer the Ark-powered hairline at the flow edge: the rail's width
+   * follows the hand and keyboard, clamped by `minWidth`/`maxWidth`,
+   * and every change rides `onWidthChange`. */
   resizable?: boolean;
   /** The rail's narrowest inline size while resizing. */
   minWidth?: string;