@bysages/react 0.3.1 → 0.4.0

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

@@ -1,24 +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;
-  /** 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;
-  /** Reports the viewer's next state. */
-  onOpenChange?: (open: boolean) => void;
-}
-export declare function ImageViewer({ src, alt, open, zoomable, width, height, 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,114 +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";
-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, width, height, onOpenChange }) {
-	injectComponentStyle("image-viewer");
-	const messages = useComponentMessages();
-	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,
-					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(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))
-					] })
-				})]
-			})
-		})] })
-	});
-}
-//#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
+/** 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. */
-export declare const JsonTreeView: typeof JsonTreeView$1;
+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,14 +1,14 @@
-import { t as glyphNode } from "../../glyph-VI989p8H.mjs";
+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";
-import { chevron_right } from "@bysages/icons";
 //#region src/components/json-tree-view/index.tsx
 /** The auto-rendered tree hands every branch its chevron from the
-* `arrow` element — filled with the house glyph unless the consumer
+* `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 = glyphNode(chevron_right), ...rest } = props;
+	const { arrow = iconNode("chevron-right"), ...rest } = props;
 	return /* @__PURE__ */ jsx(JsonTreeView$1.Tree, {
 		...rest,
 		arrow
@@ -17,7 +17,28 @@ function JsonTreeViewTree(props) {
 /** 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 });
+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;

package/dist/components/layout/index.mjs

@@ -1,20 +1,105 @@
 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";
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Splitter } from "@ark-ui/react/splitter";
 //#region src/components/layout/index.tsx
 const LAYOUT_CONTEXT = createContext(null);
+/** One step of Ark's keyboard resize, converted to a splitter percentage
+* at render time so the public behavior remains a 16px move. */
+const RESIZE_STEP = 16;
 /**
 * The application skeleton: Root, Header, Sider, Content, Footer —
 * the admin arrangement dressed in the paper-and-ink surfaces. The
 * root is a full-height grid; a declared `sider` turns the columns
 * around to meet whichever edge the rail stands on.
 */
-function Root({ sider, children, ...rest }) {
+function Root({ sider, children, style, ...rest }) {
+	const [siderState, setSiderState] = useState(null);
+	const [rootWidth, setRootWidth] = useState(0);
+	const siderStateRef = useRef(siderState);
+	const resizeHandlers = useRef({
+		start: () => {},
+		resize: () => {},
+		end: () => {}
+	});
+	siderStateRef.current = siderState;
+	const splitterRoot = useRef(null);
+	const splitterActive = !!sider;
+	useEffect(() => {
+		const element = splitterActive ? splitterRoot.current : null;
+		if (!element || typeof ResizeObserver === "undefined") {
+			if (!element) setRootWidth(0);
+			else setRootWidth(element.getBoundingClientRect().width);
+			return;
+		}
+		const observer = new ResizeObserver(() => {
+			setRootWidth(element.getBoundingClientRect().width);
+		});
+		observer.observe(element);
+		setRootWidth(element.getBoundingClientRect().width);
+		return () => observer.disconnect();
+	}, [splitterActive]);
+	const context = useMemo(() => ({
+		siderPlacement: () => sider,
+		getSiderState: () => siderStateRef.current,
+		setSiderState,
+		setResizeHandlers: (handlers) => {
+			resizeHandlers.current = handlers;
+		},
+		resizeStart: () => resizeHandlers.current.start(),
+		resize: (width) => resizeHandlers.current.resize(width),
+		resizeEnd: () => resizeHandlers.current.end()
+	}), [sider]);
+	const keyboardResizeBy = rootWidth > 0 ? RESIZE_STEP / rootWidth * 100 : RESIZE_STEP;
+	const panels = useMemo(() => {
+		if (!siderState) return [];
+		const rail = {
+			id: "sider",
+			minSize: siderState.minWidth,
+			maxSize: siderState.maxWidth
+		};
+		const flow = {
+			id: "flow",
+			minSize: "0px"
+		};
+		return sider === "end" ? [flow, rail] : [rail, flow];
+	}, [sider, siderState]);
+	const size = useMemo(() => sider === "end" ? [void 0, siderState?.width] : [siderState?.width, void 0], [sider, siderState?.width]);
+	const siderIndex = sider === "end" ? 1 : 0;
+	const callerStyle = style ?? {};
+	const gridStyle = {
+		...callerStyle,
+		display: callerStyle.display ?? "grid",
+		width: callerStyle.width ?? "auto",
+		height: callerStyle.height ?? "auto",
+		overflow: callerStyle.overflow ?? "visible"
+	};
 	return /* @__PURE__ */ jsx(LAYOUT_CONTEXT.Provider, {
-		value: { siderPlacement: () => sider },
-		children: /* @__PURE__ */ jsx("div", {
+		value: context,
+		children: splitterActive ? /* @__PURE__ */ jsx(Splitter.Root, {
+			ref: splitterRoot,
+			asChild: true,
+			panels,
+			size,
+			keyboardResizeBy,
+			onResize: (details) => {
+				const width = rootWidth * (details.size[siderIndex] ?? 0) / 100;
+				if (width > 0) context.resize(width);
+			},
+			onResizeStart: context.resizeStart,
+			onResizeEnd: context.resizeEnd,
+			children: /* @__PURE__ */ jsx("div", {
+				...rest,
+				style: gridStyle,
+				"data-scope": "layout",
+				"data-part": "root",
+				"data-sider": sider,
+				children
+			})
+		}) : /* @__PURE__ */ jsx("div", {
 			...rest,
+			style: gridStyle,
 			"data-scope": "layout",
 			"data-part": "root",
 			"data-sider": sider,
@@ -26,27 +111,59 @@ function Root({ sider, children, ...rest }) {
 * main content each land on their native element and their grid area. */
 function region(name, tag) {
 	const Tag = tag;
-	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
-		...rest,
-		"data-scope": "layout",
-		"data-part": name.toLowerCase(),
-		children
-	});
+	const Component = ({ children, ...rest }) => {
+		const layout = useContext(LAYOUT_CONTEXT);
+		const splitPanel = name === "Content" && !!layout?.siderPlacement() && !!layout.getSiderState()?.resizable && !layout.getSiderState().collapsed;
+		return /* @__PURE__ */ jsx(Tag, {
+			...rest,
+			"data-scope": "layout",
+			"data-part": name.toLowerCase(),
+			children: splitPanel ? /* @__PURE__ */ jsx(Splitter.Panel, {
+				id: "flow",
+				children
+			}) : children
+		});
+	};
 	Component.displayName = "Layout" + name;
 	return Component;
 }
 const Header = region("Header", "header");
 const Content = region("Content", "main");
 const Footer = region("Footer", "footer");
-/** One step of the arrow-key resize, in px. */
-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 active = resizable && !collapsed;
+	useEffect(() => {
+		if (!active) setDragging(false);
+	}, [active]);
 	const [innerWidth, setInnerWidth] = useState(widthProp ?? "16rem");
 	const width = widthProp !== void 0 ? widthProp : innerWidth;
+	useEffect(() => {
+		layout?.setSiderState((previous) => previous ? {
+			...previous,
+			resizable,
+			collapsed,
+			width,
+			minWidth,
+			maxWidth
+		} : {
+			resizable,
+			collapsed,
+			width,
+			minWidth,
+			maxWidth
+		});
+	}, [
+		layout,
+		resizable,
+		collapsed,
+		width,
+		minWidth,
+		maxWidth
+	]);
+	useEffect(() => () => layout?.setSiderState(null), [layout]);
 	const prevCollapsed = useRef(collapsed);
 	useEffect(() => {
 		if (prevCollapsed.current === collapsed) return;
@@ -60,55 +177,32 @@ function Sider({ collapsed = false, width: widthProp, collapsedWidth = "3.5rem",
 		setInnerWidth(widthProp);
 		onWidthChange?.(widthProp);
 	}, [widthProp, onWidthChange]);
-	const applyWidth = (next) => {
-		setInnerWidth(next);
-		onWidthChange?.(next);
-	};
-	const dragStart = useRef({
-		x: 0,
-		width: 0
-	});
-	const onPointerDown = (event) => {
-		setDragging(true);
-		dragStart.current = {
-			x: event.clientX,
-			width: rail.current ? rail.current.getBoundingClientRect().width : 0
-		};
-		event.currentTarget.setPointerCapture(event.pointerId);
-	};
-	const onPointerMove = (event) => {
-		if (!dragging) return;
-		const towardFlow = (layout?.siderPlacement() ?? "start") === "end" ? -1 : 1;
-		applyWidth(`${Math.round(dragStart.current.width + towardFlow * (event.clientX - dragStart.current.x))}px`);
-	};
-	const onPointerUp = (event) => {
-		setDragging(false);
-		event.currentTarget.releasePointerCapture(event.pointerId);
-	};
-	const onKeyDown = (event) => {
-		if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
-		event.preventDefault();
-		const widen = (layout?.siderPlacement() ?? "start") === "end" ? event.key === "ArrowLeft" : event.key === "ArrowRight";
-		const current = rail.current ? rail.current.getBoundingClientRect().width : 0;
-		applyWidth(`${Math.round(current + (widen ? RESIZE_STEP : -16))}px`);
-	};
-	const handle = resizable && !collapsed ? /* @__PURE__ */ jsx("div", {
-		"data-scope": "layout",
-		"data-part": "sider-resize",
-		"data-dragging": dragging ? "" : void 0,
-		role: "separator",
-		"aria-orientation": "vertical",
-		tabIndex: 0,
-		"aria-label": messages.sidebar.resize,
-		"aria-valuenow": Math.round(rail.current ? rail.current.getBoundingClientRect().width : 0),
-		onPointerDown,
-		onPointerMove,
-		onPointerUp,
-		onKeyDown
-	}) : null;
-	return /* @__PURE__ */ jsxs("aside", {
+	useEffect(() => {
+		layout?.setResizeHandlers({
+			start: () => setDragging(true),
+			resize: (nextWidth) => {
+				const next = `${Math.round(nextWidth)}px`;
+				setInnerWidth(next);
+				onWidthChange?.(next);
+			},
+			end: () => setDragging(false)
+		});
+		return () => layout?.setResizeHandlers({
+			start: () => {},
+			resize: () => {},
+			end: () => {}
+		});
+	}, [layout, onWidthChange]);
+	const contents = typeof children === "function" ? children({ collapsed }) : children;
+	const body = active ? /* @__PURE__ */ jsxs(Splitter.Panel, {
+		id: "sider",
+		children: [contents, /* @__PURE__ */ jsx(Splitter.ResizeTrigger, {
+			id: layout?.siderPlacement() === "end" ? "flow:sider" : "sider:flow",
+			"aria-label": messages.sidebar.resize
+		})]
+	}) : contents;
+	return /* @__PURE__ */ jsx("aside", {
 		...rest,
-		ref: rail,
 		style: {
 			...style,
 			"--bs-layout-sider-width": collapsed ? collapsedWidth : width,
@@ -119,8 +213,8 @@ function Sider({ collapsed = false, width: widthProp, collapsedWidth = "3.5rem",
 		"data-part": "sider",
 		"data-collapsed": collapsed ? "" : void 0,
 		"data-dragging": dragging ? "" : void 0,
-		"data-resizable": resizable ? "" : void 0,
-		children: [typeof children === "function" ? children({ collapsed }) : children, handle]
+		"data-resizable": active ? "" : void 0,
+		children: body
 	});
 }
 const Layout = Object.assign(Root, {

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

@@ -6,5 +6,8 @@ export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
 /** A link is ink in the accent's voice: quiet at rest, deepening under
  * the hand, the halo at focus. The underline follows the prose —
  * always, on hover, or never. */
-export declare function Link({ underline, children, ...rest }: LinkProps): import("react").JSX.Element;
+declare function LinkImpl({ underline, children, ...rest }: LinkProps): import("react").JSX.Element;
+export declare const Link: typeof LinkImpl & {
+  Root: typeof LinkImpl;
+};
 //#endregion

package/dist/components/link/index.mjs

@@ -1,10 +1,11 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/link/index.tsx
 /** A link is ink in the accent's voice: quiet at rest, deepening under
 * the hand, the halo at focus. The underline follows the prose —
 * always, on hover, or never. */
-function Link({ underline = "hover", children, ...rest }) {
+function LinkImpl({ underline = "hover", children, ...rest }) {
 	injectComponentStyle("link");
 	return /* @__PURE__ */ jsx("a", {
 		...rest,
@@ -14,5 +15,6 @@ function Link({ underline = "hover", children, ...rest }) {
 		children
 	});
 }
+const Link = withSelfRoot(LinkImpl);
 //#endregion
 export { Link };

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

@@ -1,3 +1,4 @@
+import { CSSProperties } from "react";
 import { CollectionItem } from "@ark-ui/react/collection";
 import { Listbox as Listbox$1, ListboxRootComponentProps, createListCollection } from "@ark-ui/react/listbox";
 //#region src/components/listbox/index.d.ts
@@ -11,7 +12,27 @@ type ListboxOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function ListboxRoot<T extends CollectionItem>(props: ListboxRootComponentProps<T, ListboxOwnProps>): import("react").JSX.Element;
-export declare const Listbox: Omit<typeof Listbox$1, "Root"> & {
+type ListboxOption = {
+  label: string;
+  value: string;
+};
+type ListboxFacadeValue = string | string[];
+type ListboxFacadeProps = {
+  value?: ListboxFacadeValue;
+  defaultValue?: ListboxFacadeValue;
+  options: ListboxOption[];
+  multiple?: boolean;
+  disabled?: boolean;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  style?: CSSProperties;
+  onValueChange?: (value?: ListboxFacadeValue) => void;
+};
+/** The complete listbox behind one model value: options become rows and the
+ * label names the quiet register. */
+declare function ListboxFacade(props: ListboxFacadeProps): import("react").JSX.Element;
+export declare const Listbox: typeof ListboxFacade & Omit<typeof Listbox$1, "Root"> & {
   Root: typeof ListboxRoot;
 };
 //#endregion