@bysages/react 0.3.1 → 0.4.1

package/dist/components/image/index.mjs

@@ -1,36 +1,19 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 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", width, height, 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,6 +21,7 @@ function Image({ src, alt = "", fit = "cover", loading = "lazy", width, height,
 		"data-state": state,
 		"data-fit": fit,
 		children: [/* @__PURE__ */ jsx("img", {
+			ref: imageRef,
 			"data-scope": "image",
 			"data-part": "img",
 			src,
@@ -51,9 +35,10 @@ function Image({ src, alt = "", fit = "cover", loading = "lazy", width, height,
 		}), 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 { injectComponentStyle } from "@bysages/core";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+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,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-B-hKFkEw.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-BDpQ0e6G.mjs";
 export { Input };

package/dist/components/input-group/index.mjs

@@ -1,4 +1,4 @@
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/input-group/index.tsx
 function part(name) {

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 { injectComponentStyle } from "@bysages/core";
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 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 { injectComponentStyle } from "@bysages/core";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 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;