@bysages/react 0.3.1 → 0.4.0

package/dist/components/file-upload/index.mjs

@@ -1,10 +1,15 @@
+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 { jsx, jsxs } from "react/jsx-runtime";
 import { FileUpload as FileUpload$1 } from "@ark-ui/react/file-upload";
 //#region src/components/file-upload/index.tsx
-function FileUploadRoot({ size = "md", ...rest }) {
+function FileUploadRoot(props) {
+	const id = useElementId("file-upload", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(FileUpload$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
@@ -26,17 +31,48 @@ function FileUploadTrigger(props) {
 		})
 	});
 }
-/** Ark's FileUpload, dressed in the paper-and-ink system: a dashed
-* dropzone that floods with subtle light on drag-over, and accepted files
-* as loose hairline slips. The API is Ark's own — Root, Label, Trigger,
-* Dropzone, HiddenInput, ItemGroup, Item, ItemName, ItemSizeText,
-* ItemPreview, ItemPreviewImage, ItemDeleteTrigger, ClearTrigger,
-* Context. */
-const FileUpload = {
+const fileIcon = iconNode("file", {
+	width: 16,
+	height: 16
+});
+const uploadIcon = iconNode("upload", {
+	width: 28,
+	height: 28
+});
+const closeIcon = iconNode("x", {
+	width: 14,
+	height: 14
+});
+/** The one-tag path: a labelled dropzone and its accepted slips; MIME
+* rules, directories, and controlled files stay on the anatomy. */
+function FileUploadFacade({ label, placeholder, disabled = false, invalid = false, required = false, maxFiles, size = "md" }) {
+	return /* @__PURE__ */ jsxs(FileUploadRoot, {
+		size,
+		disabled,
+		invalid,
+		required,
+		maxFiles,
+		children: [
+			label ? /* @__PURE__ */ jsx(FileUpload$1.Label, { children: label }) : null,
+			/* @__PURE__ */ jsx(FileUpload$1.Dropzone, { children: /* @__PURE__ */ jsxs(FileUploadTrigger, { children: [uploadIcon, placeholder ?? "Choose files"] }) }),
+			/* @__PURE__ */ jsx(FileUpload$1.ItemGroup, { children: /* @__PURE__ */ jsx(FileUpload$1.Context, { children: (api) => api.acceptedFiles.map((file) => /* @__PURE__ */ jsxs(FileUpload$1.Item, {
+				file,
+				children: [
+					/* @__PURE__ */ jsx(FileUpload$1.ItemPreview, { children: fileIcon }),
+					/* @__PURE__ */ jsx(FileUpload$1.ItemName, {}),
+					/* @__PURE__ */ jsx(FileUpload$1.ItemSizeText, {}),
+					/* @__PURE__ */ jsx(FileUpload$1.ItemDeleteTrigger, { children: closeIcon })
+				]
+			}, file.name)) }) }),
+			/* @__PURE__ */ jsx(FileUpload$1.HiddenInput, {})
+		]
+	});
+}
+const FileUpload = Object.assign(FileUploadFacade, {
 	...FileUpload$1,
 	Root: FileUploadRoot,
 	Trigger: FileUploadTrigger
-};
+});
 injectComponentStyle("file-upload");
 //#endregion
 export { FileUpload };

package/dist/components/floating-panel/index.d.mts

@@ -1,9 +1,21 @@
+import { ReactNode } from "react";
 import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/react/floating-panel";
 //#region src/components/floating-panel/index.d.ts
-/** Ark's FloatingPanel, dressed in the paper-and-ink system: the shared
- * popup vessel let loose — a draggable, resizable sheet whose header is the
- * handle. The API is Ark's own — Root, Trigger, Positioner, Content, Header,
- * Title, Control, DragTrigger, StageTrigger, CloseTrigger, ResizeTrigger,
- * Body. */
-export declare const FloatingPanel: typeof FloatingPanel$1;
+export interface FloatingPanelFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  trigger?: string;
+  content?: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  children?: ReactNode;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function FloatingPanelFacade({ open, defaultOpen, trigger, content, label, description, disabled, children, onOpenChange }: FloatingPanelFacadeProps): import("react").JSX.Element;
+declare namespace FloatingPanelFacade {
+  var displayName: string;
+}
+type FloatingPanelParts = typeof FloatingPanel$1;
+export declare const FloatingPanel: typeof FloatingPanelFacade & FloatingPanelParts;
 //#endregion

package/dist/components/floating-panel/index.mjs

@@ -1,4 +1,7 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/react/floating-panel";
 //#region src/components/floating-panel/index.tsx
 /** Ark's FloatingPanel, dressed in the paper-and-ink system: the shared
@@ -6,7 +9,58 @@ import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/react/floating-panel";
 * handle. The API is Ark's own — Root, Trigger, Positioner, Content, Header,
 * Title, Control, DragTrigger, StageTrigger, CloseTrigger, ResizeTrigger,
 * Body. */
-const FloatingPanel = FloatingPanel$1;
+function FloatingPanelRoot(props) {
+	const id = useElementId("floating-panel", props);
+	return /* @__PURE__ */ jsx(FloatingPanel$1.Root, {
+		...props,
+		id
+	});
+}
+const resizeAxes = [
+	"n",
+	"e",
+	"s",
+	"w",
+	"ne",
+	"se",
+	"sw",
+	"nw"
+];
+function FloatingPanelFacade({ open, defaultOpen, trigger, content, label, description, disabled = false, children, onOpenChange }) {
+	return /* @__PURE__ */ jsxs(FloatingPanelRoot, {
+		disabled,
+		...open === void 0 ? {} : { open },
+		...defaultOpen === void 0 ? {} : { defaultOpen },
+		onOpenChange: (details) => onOpenChange?.(details.open),
+		children: [/* @__PURE__ */ jsx(FloatingPanel$1.Trigger, { children: trigger ?? label }), /* @__PURE__ */ jsx(FloatingPanel$1.Positioner, { children: /* @__PURE__ */ jsxs(FloatingPanel$1.Content, { children: [
+			/* @__PURE__ */ jsx(FloatingPanel$1.DragTrigger, { children: /* @__PURE__ */ jsxs(FloatingPanel$1.Header, { children: [/* @__PURE__ */ jsx(FloatingPanel$1.Title, { children: label }), /* @__PURE__ */ jsxs(FloatingPanel$1.Control, { children: [
+				/* @__PURE__ */ jsx(FloatingPanel$1.StageTrigger, {
+					stage: "minimized",
+					children: iconNode("minus")
+				}),
+				/* @__PURE__ */ jsx(FloatingPanel$1.StageTrigger, {
+					stage: "maximized",
+					children: iconNode("maximize-2")
+				}),
+				/* @__PURE__ */ jsx(FloatingPanel$1.CloseTrigger, {
+					"aria-label": "Close",
+					children: iconNode("x")
+				})
+			] })] }) }),
+			/* @__PURE__ */ jsxs(FloatingPanel$1.Body, { children: [
+				description ? /* @__PURE__ */ jsx("p", { children: description }) : null,
+				content ? /* @__PURE__ */ jsx("p", { children: content }) : null,
+				children
+			] }),
+			resizeAxes.map((axis) => /* @__PURE__ */ jsx(FloatingPanel$1.ResizeTrigger, { axis }, axis))
+		] }) })]
+	});
+}
+FloatingPanelFacade.displayName = "SFloatingPanel";
+const FloatingPanel = Object.assign(FloatingPanelFacade, {
+	...FloatingPanel$1,
+	Root: FloatingPanelRoot
+});
 injectComponentStyle("floating-panel");
 //#endregion
 export { FloatingPanel };

package/dist/components/focus-trap/index.d.mts

@@ -1,2 +1,7 @@
-import { FocusTrap, FocusTrapBaseProps, FocusTrapProps } from "@ark-ui/react/focus-trap";
-export { FocusTrap, type FocusTrapBaseProps, type FocusTrapProps };
+import { FocusTrapBaseProps, FocusTrapProps } from "@ark-ui/react/focus-trap";
+//#region src/components/focus-trap/index.d.ts
+export declare const FocusTrap: import("react").ForwardRefExoticComponent<import("@ark-ui/react/focus-trap").FocusTrapProps & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<import("@ark-ui/react/focus-trap").FocusTrapProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export type { FocusTrapBaseProps, FocusTrapProps };

package/dist/components/focus-trap/index.mjs

@@ -1,2 +1,6 @@
-import { FocusTrap } from "@ark-ui/react/focus-trap";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { FocusTrap as FocusTrap$1 } from "@ark-ui/react/focus-trap";
+//#region src/components/focus-trap/index.tsx
+const FocusTrap = withSelfRoot(FocusTrap$1);
+//#endregion
 export { FocusTrap };

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

@@ -1,2 +1,2 @@
-import { a as useField, c as FieldApi, i as FormProps, n as FormField, o as useForm, r as FormFieldProps, s as FormApi, t as Form } from "../../index-uPyYiWaL.mjs";
+import { a as useField, c as FieldApi, i as FormProps, n as FormField, o as useForm, r as FormFieldProps, s as FormApi, t as Form } from "../../index-PsgGWW3m.mjs";
 export { type FieldApi, Form, type FormApi, FormField, FormFieldProps, FormProps, useField, useForm };

package/dist/components/form/index.mjs

@@ -1,3 +1,4 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
@@ -13,7 +14,7 @@ function errorText(error) {
 	if (typeof error === "object" && "message" in error) return String(error.message);
 	return "";
 }
-function Form({ form, children, ...rest }) {
+function FormImpl({ form, children, ...rest }) {
 	injectComponentStyle("form");
 	injectComponentStyle("field");
 	return /* @__PURE__ */ jsx(FormContext.Provider, {
@@ -31,7 +32,8 @@ function Form({ form, children, ...rest }) {
 		})
 	});
 }
-function FormField({ form: formProp, name, label, hint, required = false, invalid = false, disabled = false, children, ...rest }) {
+const Form = withSelfRoot(FormImpl);
+function FormFieldImpl({ form: formProp, name, label, hint, required = false, invalid = false, disabled = false, children, ...rest }) {
 	const injected = useContext(FormContext);
 	const form = formProp ?? injected;
 	const { className: klass, style, ...fieldOptions } = rest;
@@ -63,5 +65,6 @@ function FormField({ form: formProp, name, label, hint, required = false, invali
 		children: assemble
 	});
 }
+const FormField = withSelfRoot(FormFieldImpl);
 //#endregion
 export { Form, FormField, useField, useForm };

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

@@ -1,10 +1,6 @@
+import { FrameProps } from "@ark-ui/react/frame";
 //#region src/components/frame/index.d.ts
-/** Ark's Frame, dressed in the paper-and-ink system: a sandboxed
- * iframe whose body teleports the children and whose `head` prop
- * carries extra <head> nodes — styles the child renders must travel
- * through that prop. The frame measures its content and grows to
- * fit; the vessel's border and paper belong to the consumer, since
- * an iframe carries no anatomy attributes for the core stylesheet
- * to hook. The API is Ark's own. */
-export declare const Frame: import("react").ForwardRefExoticComponent<import("@ark-ui/react/frame").FrameProps & import("react").RefAttributes<HTMLIFrameElement>>;
+export declare const Frame: import("react").ForwardRefExoticComponent<FrameProps & import("react").RefAttributes<HTMLIFrameElement>> & {
+  Root: import("react").ForwardRefExoticComponent<FrameProps & import("react").RefAttributes<HTMLIFrameElement>>;
+};
 //#endregion

package/dist/components/frame/index.mjs

@@ -1,3 +1,7 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Frame as Frame$1 } from "@ark-ui/react/frame";
 //#region src/components/frame/index.tsx
 /** Ark's Frame, dressed in the paper-and-ink system: a sandboxed
@@ -7,6 +11,14 @@ import { Frame as Frame$1 } from "@ark-ui/react/frame";
 * fit; the vessel's border and paper belong to the consumer, since
 * an iframe carries no anatomy attributes for the core stylesheet
 * to hook. The API is Ark's own. */
-const Frame = Frame$1;
+const FrameRoot = forwardRef(function FrameRoot(props, ref) {
+	const id = useElementId("frame", props);
+	return /* @__PURE__ */ jsx(Frame$1, {
+		ref,
+		...props,
+		id
+	});
+});
+const Frame = withSelfRoot(FrameRoot);
 //#endregion
 export { Frame };

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

@@ -9,5 +9,8 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
    * and the container decides how many fit. */
   minChildWidth?: string;
 }
-export declare function Grid({ columns, gap, minChildWidth, ...rest }: GridProps): import("react").JSX.Element;
+declare function GridImpl({ columns, gap, minChildWidth, ...rest }: GridProps): import("react").JSX.Element;
+export declare const Grid: typeof GridImpl & {
+  Root: typeof GridImpl;
+};
 //#endregion

package/dist/components/grid/index.mjs

@@ -1,3 +1,4 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/grid/index.tsx
@@ -11,7 +12,7 @@ const gapVars = {
 	lg: "var(--bs-gap-lg)",
 	xl: "var(--bs-gap-xl)"
 };
-function Grid({ columns = 12, gap = "md", minChildWidth, ...rest }) {
+function GridImpl({ columns = 12, gap = "md", minChildWidth, ...rest }) {
 	injectComponentStyle("grid");
 	const style = {
 		...rest.style,
@@ -27,5 +28,6 @@ function Grid({ columns = 12, gap = "md", minChildWidth, ...rest }) {
 		"data-autofill": minChildWidth != null ? "" : void 0
 	});
 }
+const Grid = withSelfRoot(GridImpl);
 //#endregion
 export { Grid };

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

@@ -1,7 +1,5 @@
 //#region src/components/highlight/index.d.ts
-/** Ark's Highlight, dressed in the paper-and-ink system: query hits are
- * strokes of pigment on the page — a quiet tint of the accent behind the
- * ink, never neon. The component renders bare <mark> elements, so the
- * document-wide mark default carries the look. The API is Ark's own. */
-export declare const Highlight: (props: import("@ark-ui/react/highlight").HighlightProps) => import("react").JSX.Element;
+export declare const Highlight: ((props: import("@ark-ui/react/highlight").HighlightProps) => import("react").JSX.Element) & {
+  Root: (props: import("@ark-ui/react/highlight").HighlightProps) => import("react").JSX.Element;
+};
 //#endregion

package/dist/components/highlight/index.mjs

@@ -1,11 +1,16 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
 import { Highlight as Highlight$1 } from "@ark-ui/react/highlight";
 //#region src/components/highlight/index.tsx
 /** Ark's Highlight, dressed in the paper-and-ink system: query hits are
 * strokes of pigment on the page — a quiet tint of the accent behind the
 * ink, never neon. The component renders bare <mark> elements, so the
 * document-wide mark default carries the look. The API is Ark's own. */
-const Highlight = Highlight$1;
+function HighlightRoot(props) {
+	return /* @__PURE__ */ jsx(Highlight$1, { ...props });
+}
+const Highlight = withSelfRoot(HighlightRoot);
 injectComponentStyle("highlight");
 //#endregion
 export { Highlight };

package/dist/components/hover-card/index.d.mts

@@ -1,7 +1,23 @@
+import { ReactNode } from "react";
 import { HoverCard as HoverCard$1 } from "@ark-ui/react/hover-card";
 //#region src/components/hover-card/index.d.ts
-/** 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. */
-export declare const HoverCard: typeof HoverCard$1;
+type HoverCardPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+export interface HoverCardFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  trigger: string;
+  content?: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  placement?: HoverCardPlacement;
+  children?: ReactNode;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function HoverCardFacade({ open, defaultOpen, trigger, content, label, description, disabled, placement, children, onOpenChange }: HoverCardFacadeProps): import("react").JSX.Element;
+declare namespace HoverCardFacade {
+  var displayName: string;
+}
+type HoverCardParts = typeof HoverCard$1;
+export declare const HoverCard: typeof HoverCardFacade & HoverCardParts;
 //#endregion

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"> {
@@ -19,5 +19,8 @@ export interface ImageProps extends Omit<HTMLAttributes<HTMLElement>, "onError"
   /** Shown in place of the picture when the source breaks. */
   fallback?: ReactNode;
 }
-export declare function Image({ src, alt, fit, loading, width, height, 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", 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 { 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 };