@bysages/solid 0.3.1 → 0.4.1

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

@@ -1,10 +1,99 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { n as withElementProps, t as isElement } from "../../element-dGIhOTJ6.mjs";
+import { createComponent, insert, memo, mergeProps, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { Show, createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { HoverCard as HoverCard$1 } from "@ark-ui/solid/hover-card";
-//#region src/components/hover-card/index.ts
+//#region src/components/hover-card/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<h3>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<p>`);
 /** 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.id);
+	return createComponent$1(HoverCard$1.Root, mergeProps$1(props, { get id() {
+		return id();
+	} }));
+}
+function HoverCardFacade(props) {
+	injectComponentStyle("hover-card");
+	const triggerElement = () => isElement(props.trigger) ? props.trigger : void 0;
+	const triggerChildren = () => triggerElement() ? void 0 : props.trigger;
+	const triggerAsChild = (propsFn) => {
+		const trigger = triggerElement();
+		return trigger ? withElementProps(trigger, propsFn()) : props.trigger;
+	};
+	return createComponent(HoverCardRoot, mergeProps(() => {
+		return props.open === void 0 ? {} : { open: props.open };
+	}, () => {
+		return props.defaultOpen === void 0 ? {} : { defaultOpen: props.defaultOpen };
+	}, () => {
+		return props.placement === void 0 ? {} : { positioning: { placement: props.placement } };
+	}, {
+		onOpenChange: (details) => props.onOpenChange?.(details.open),
+		get children() {
+			return [createComponent(HoverCard$1.Trigger, {
+				get disabled() {
+					return props.disabled;
+				},
+				get asChild() {
+					return triggerElement() ? triggerAsChild : void 0;
+				},
+				get children() {
+					return triggerChildren();
+				}
+			}), createComponent(HoverCard$1.Positioner, { get children() {
+				return createComponent(HoverCard$1.Content, { get children() {
+					return [
+						createComponent(HoverCard$1.Arrow, { get children() {
+							return createComponent(HoverCard$1.ArrowTip, {});
+						} }),
+						(() => {
+							var _el$ = _tmpl$();
+							insert(_el$, () => {
+								return props.label;
+							});
+							return _el$;
+						})(),
+						createComponent(Show, {
+							get when() {
+								return props.description;
+							},
+							get children() {
+								var _el$2 = _tmpl$2();
+								insert(_el$2, () => {
+									return props.description;
+								});
+								return _el$2;
+							}
+						}),
+						createComponent(Show, {
+							get when() {
+								return props.content;
+							},
+							get children() {
+								var _el$3 = _tmpl$2();
+								insert(_el$3, () => {
+									return props.content;
+								});
+								return _el$3;
+							}
+						}),
+						memo(() => {
+							return props.children;
+						})
+					];
+				} });
+			} })];
+		}
+	}));
+}
+const HoverCard = defineFamily(HoverCardFacade, {
+	...HoverCard$1,
+	Root: HoverCardRoot
+});
 injectComponentStyle("hover-card");
 //#endregion
 export { HoverCard };

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

@@ -3,9 +3,9 @@ import { IconifyIcon } from "@bysages/core/icons";
 //#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 JSX.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,13 @@ export interface IconProps extends JSX.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(props: IconProps): JSX.Element;
+export declare const Icon: ((props: IconProps) => JSX.Element) & {
+  Root: (props: IconProps) => JSX.Element;
+};
 //#endregion

package/dist/components/icon/index.mjs

@@ -1,11 +1,12 @@
-import { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { effect, insert, setAttribute, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 import { getIcon } from "@bysages/core/icons";
 //#region src/components/icon/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<span>`);
 var _tmpl$2 = /* @__PURE__ */ template(`<svg fill=currentColor aria-hidden=true>`);
-function Icon(props) {
+const Icon = withSelfRoot(function Icon(props) {
 	injectComponentStyle("icon");
 	const [own, rest] = splitProps(props, [
 		"size",
@@ -15,7 +16,7 @@ function Icon(props) {
 		"children"
 	]);
 	const resolved = own.glyph ?? (own.name && own.children == null ? getIcon(own.name) : void 0);
-	if (own.name && own.children == null && own.glyph == null && !resolved) console.error(`[icons] unknown icon name "${own.name}" — not in the wrappers' whitelist; import the glyph from @bysages/icons and pass it as glyph`);
+	if (own.name && own.children == null && own.glyph == null && !resolved) console.error(`[icons] unknown icon name "${own.name}" — not in the core default registry; pass it explicitly as glyph`);
 	var _el$ = _tmpl$();
 	spread(_el$, [rest, {
 		get role() {
@@ -49,6 +50,6 @@ function Icon(props) {
 		})() : null);
 	});
 	return _el$;
-}
+});
 //#endregion
 export { Icon };

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

@@ -2,7 +2,7 @@ import { JSX } from "solid-js";
 //#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` prop — or the placeholder glyph when the
+ * source leaves the `fallback` prop — 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 JSX.HTMLAttributes<HTMLElement> {
@@ -17,5 +17,7 @@ export interface ImageProps extends JSX.HTMLAttributes<HTMLElement> {
   /** What a broken source leaves instead of the picture. */
   fallback?: JSX.Element;
 }
-export declare function Image(props: ImageProps): JSX.Element;
+export declare const Image: ((props: ImageProps) => JSX.Element) & {
+  Root: (props: ImageProps) => JSX.Element;
+};
 //#endregion

package/dist/components/image/index.mjs

@@ -1,22 +1,16 @@
-import { injectComponentStyle } from "@bysages/core";
-import { createComponent, effect, insert, setAttribute, spread, template } from "@solidjs/web";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
+import { createComponent, effect, insert, ref, setAttribute, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { Show, createEffect, createSignal, on, splitProps } from "solid-js";
 //#region src/components/image/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<svg><rect x=3 y=4 width=18 height=16 rx=1.5></svg>`, 2);
-var _tmpl$2 = /* @__PURE__ */ template(`<svg><circle cx=9 cy=10 r=1.5></svg>`, 2);
-var _tmpl$3 = /* @__PURE__ */ template(`<svg><path d="m5.5 17.5 4.5-5 3 3.5 2.5-3 3 4.5"></svg>`, 2);
-var _tmpl$4 = /* @__PURE__ */ template(`<div data-scope=image data-part=fallback>`);
-var _tmpl$5 = /* @__PURE__ */ template(`<figure><img data-scope=image data-part=img decoding=async>`, 1);
-/** 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 [
-		_tmpl$(),
-		_tmpl$2(),
-		_tmpl$3()
-	];
+var _tmpl$ = /* @__PURE__ */ template(`<div data-scope=image data-part=fallback>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<figure><img data-scope=image data-part=img decoding=async>`, 1);
+/** The registry icon for a source that never arrived, hidden from the reader. */
+function placeholderIcon() {
+	return iconNode("image");
 }
-function Image(props) {
+const Image = withSelfRoot(function Image(props) {
 	injectComponentStyle("image");
 	const [own, rest] = splitProps(props, [
 		"src",
@@ -28,10 +22,14 @@ function Image(props) {
 		"fallback"
 	]);
 	const [state, setState] = createSignal("loading");
-	createEffect(on(() => own.src, () => setState("loading")));
-	var _el$4 = _tmpl$5();
-	var _el$5 = _el$4.firstChild;
-	spread(_el$4, [rest, {
+	let image;
+	createEffect(on(() => own.src, () => {
+		setState("loading");
+		if (image?.complete) setState(image.naturalWidth > 0 ? "loaded" : "error");
+	}));
+	var _el$ = _tmpl$2();
+	var _el$2 = _el$.firstChild;
+	spread(_el$, [rest, {
 		"data-scope": "image",
 		"data-part": "root",
 		get "data-state"() {
@@ -41,18 +39,21 @@ function Image(props) {
 			return own.fit ?? "cover";
 		}
 	}], true);
-	_el$5.addEventListener("error", () => setState("error"));
-	_el$5.addEventListener("load", () => setState("loaded"));
-	insert(_el$4, createComponent(Show, {
+	_el$2.addEventListener("error", () => setState("error"));
+	_el$2.addEventListener("load", () => setState("loaded"));
+	ref(() => {
+		return (element) => image = element;
+	}, _el$2);
+	insert(_el$, createComponent(Show, {
 		get when() {
 			return state() === "error";
 		},
 		get children() {
-			var _el$6 = _tmpl$4();
-			insert(_el$6, () => {
-				return own.fallback ?? placeholderGlyph();
+			var _el$3 = _tmpl$();
+			insert(_el$3, () => {
+				return own.fallback ?? placeholderIcon();
 			});
-			return _el$6;
+			return _el$3;
 		}
 	}), null);
 	effect(() => {
@@ -64,13 +65,13 @@ function Image(props) {
 			i: own.loading ?? "lazy"
 		};
 	}, ({ e, t, a, o, i }, _p$) => {
-		e !== _p$?.e && setAttribute(_el$5, "src", e);
-		t !== _p$?.t && setAttribute(_el$5, "alt", t);
-		a !== _p$?.a && setAttribute(_el$5, "width", a);
-		o !== _p$?.o && setAttribute(_el$5, "height", o);
-		i !== _p$?.i && setAttribute(_el$5, "loading", i);
+		e !== _p$?.e && setAttribute(_el$2, "src", e);
+		t !== _p$?.t && setAttribute(_el$2, "alt", t);
+		a !== _p$?.a && setAttribute(_el$2, "width", a);
+		o !== _p$?.o && setAttribute(_el$2, "height", o);
+		i !== _p$?.i && setAttribute(_el$2, "loading", i);
 	});
-	return _el$4;
-}
+	return _el$;
+});
 //#endregion
 export { Image };

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

@@ -1,8 +1,12 @@
+import { ComponentProps } from "solid-js";
 import { ImageCropper as ImageCropper$1 } from "@ark-ui/solid/image-cropper";
 //#region src/components/image-cropper/index.d.ts
 /** Ark's 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("solid-js").JSX.Element;
+export declare const ImageCropper: typeof ImageCropperRoot & Omit<typeof ImageCropper$1, "Root"> & {
+  Root: typeof ImageCropperRoot;
+};
 //#endregion

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

@@ -1,11 +1,23 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { createComponent, mergeProps } from "solid-js";
 import { ImageCropper as ImageCropper$1 } from "@ark-ui/solid/image-cropper";
 //#region src/components/image-cropper/index.ts
 /** Ark's 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.id);
+	return createComponent(ImageCropper$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const ImageCropper = defineFamily(ImageCropperRoot, {
+	...ImageCropper$1,
+	Root: ImageCropperRoot
+});
 injectComponentStyle("image-cropper");
 //#endregion
 export { ImageCropper };

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

@@ -1,23 +1,2 @@
-import { JSX } from "solid-js";
-//#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;
-  /** Intrinsic dimensions for the image element, reserving the layout
-   * box before bytes arrive. */
-  width?: number | string;
-  height?: number | string;
-  open?: boolean;
-  zoomable?: boolean;
-  /** The openness changed — from the scrim, Escape or the toolbar. */
-  onOpenChange?: (open: boolean) => void;
-}
-export declare function ImageViewer(props: ImageViewerProps): JSX.Element;
-//#endregion
+import { n as ImageViewerProps, t as ImageViewer } from "../../index-DhripUtf.mjs";
+export { ImageViewer, ImageViewerProps };

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

@@ -1,160 +1,4 @@
-import { Button } from "../button/index.mjs";
-import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
-import { ButtonGroup } from "../button-group/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
-import { createComponent, effect, insert, memo, setAttribute, setStyleProperty, template } from "@solidjs/web";
-import { Show, createEffect, createSignal, splitProps } from "solid-js";
-import { Portal } from "solid-js/web";
-import { Dialog } from "@ark-ui/solid/dialog";
-//#region src/components/image-viewer/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<svg><circle cx=11 cy=11 r=7></svg>`, 2);
-var _tmpl$2 = /* @__PURE__ */ template(`<svg><path d="m16.2 16.2 4.8 4.8"></svg>`, 2);
-var _tmpl$3 = /* @__PURE__ */ template(`<svg><path d="M8 11h6"></svg>`, 2);
-var _tmpl$4 = /* @__PURE__ */ template(`<svg><path d="M11 8v6"></svg>`, 2);
-var _tmpl$5 = /* @__PURE__ */ template(`<svg><path d="M20.49 12A8.5 8.5 0 1 1 18 6.06"></svg>`, 2);
-var _tmpl$6 = /* @__PURE__ */ template(`<svg><path d="M20.5 3.5v4h-4"></svg>`, 2);
-var _tmpl$7 = /* @__PURE__ */ template(`<svg><path d="m6 6 12 12"></svg>`, 2);
-var _tmpl$8 = /* @__PURE__ */ template(`<svg><path d="M18 6 6 18"></svg>`, 2);
-var _tmpl$9 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true>`);
-var _tmpl$10 = /* @__PURE__ */ template(`<img data-scope=image-viewer data-part=viewport>`);
-var _tmpl$11 = /* @__PURE__ */ template(`<div data-scope=image-viewer data-part=toolbar>`);
-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: () => [
-		_tmpl$(),
-		_tmpl$2(),
-		_tmpl$3(),
-		_tmpl$4()
-	],
-	zoomOut: () => [
-		_tmpl$(),
-		_tmpl$2(),
-		_tmpl$3()
-	],
-	rotate: () => [_tmpl$5(), _tmpl$6()],
-	close: () => [_tmpl$7(), _tmpl$8()]
-};
-function ImageViewer(props) {
-	injectComponentStyle("image-viewer");
-	const [own] = splitProps(props, [
-		"src",
-		"alt",
-		"width",
-		"height",
-		"open",
-		"zoomable",
-		"onOpenChange"
-	]);
-	const messages = useComponentMessages();
-	const [localOpen, setLocalOpen] = createSignal(false);
-	const [scale, setScale] = createSignal(1);
-	const [rotation, setRotation] = createSignal(0);
-	const isOpen = () => own.open ?? localOpen();
-	const setOpen = (value) => {
-		if (own.open === void 0) setLocalOpen(value);
-		own.onOpenChange?.(value);
-	};
-	createEffect(() => {
-		if (isOpen()) {
-			setScale(1);
-			setRotation(0);
-		}
-	});
-	function zoom(step) {
-		setScale(Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale() + step)));
-	}
-	function rotate() {
-		setRotation((rotation() + 90) % 360);
-	}
-	function toolButton(label, glyph, onClick) {
-		return createComponent(Button, {
-			variant: "ghost",
-			square: true,
-			size: "lg",
-			"aria-label": label,
-			onClick,
-			get children() {
-				var _el$12 = _tmpl$9();
-				insert(_el$12, glyph);
-				return _el$12;
-			}
-		});
-	}
-	return createComponent(Dialog.Root, {
-		get open() {
-			return isOpen();
-		},
-		onOpenChange: (details) => setOpen(details.open),
-		lazyMount: true,
-		unmountOnExit: true,
-		get children() {
-			return createComponent(Portal, { get children() {
-				return [createComponent(Dialog.Backdrop, { class: "bs-image-viewer-backdrop" }), createComponent(Dialog.Positioner, {
-					class: "bs-image-viewer-positioner",
-					get children() {
-						return createComponent(Dialog.Content, {
-							class: "bs-image-viewer-content",
-							get "aria-label"() {
-								return own.alt || "Image preview";
-							},
-							onClick: (event) => {
-								if (event.target === event.currentTarget) setOpen(false);
-							},
-							get children() {
-								return [(() => {
-									var _el$13 = _tmpl$10();
-									effect(() => {
-										return {
-											e: own.src,
-											t: own.alt ?? "",
-											a: own.width,
-											o: own.height,
-											i: `scale(${scale()}) rotate(${rotation()}deg)`
-										};
-									}, ({ e, t, a, o, i }, _p$) => {
-										e !== _p$?.e && setAttribute(_el$13, "src", e);
-										t !== _p$?.t && setAttribute(_el$13, "alt", t);
-										a !== _p$?.a && setAttribute(_el$13, "width", a);
-										o !== _p$?.o && setAttribute(_el$13, "height", o);
-										i !== _p$?.i && setStyleProperty(_el$13, "transform", i);
-									});
-									return _el$13;
-								})(), (() => {
-									var _el$14 = _tmpl$11();
-									insert(_el$14, createComponent(ButtonGroup, { get children() {
-										return [
-											createComponent(Show, {
-												get when() {
-													return own.zoomable ?? true;
-												},
-												get children() {
-													return [memo(() => {
-														return toolButton(messages().imageViewer.zoomIn, TOOL_GLYPHS.zoomIn, () => zoom(SCALE_STEP));
-													}), memo(() => {
-														return toolButton(messages().imageViewer.zoomOut, TOOL_GLYPHS.zoomOut, () => zoom(-.25));
-													})];
-												}
-											}),
-											memo(() => {
-												return toolButton(messages().imageViewer.rotate, TOOL_GLYPHS.rotate, rotate);
-											}),
-											memo(() => {
-												return toolButton(messages().imageViewer.close, TOOL_GLYPHS.close, () => setOpen(false));
-											})
-										];
-									} }));
-									return _el$14;
-								})()];
-							}
-						});
-					}
-				})];
-			} });
-		}
-	});
-}
-//#endregion
+import "../button-group/index.mjs";
+import "../dialog/index.mjs";
+import { t as ImageViewer } from "../../image-viewer-19s75Hz_.mjs";
 export { ImageViewer };

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

@@ -15,5 +15,7 @@ export interface InputProps extends JSX.InputHTMLAttributes<HTMLInputElement> {
  * the label id, the described-by wiring and the invalid state for free,
  * which is also the seam the Form validation layer will drive. Disabled
  * rides the native attribute. */
-export declare function Input(props: InputProps): JSX.Element;
+export declare const Input: ((props: InputProps) => JSX.Element) & {
+  Root: (props: InputProps) => JSX.Element;
+};
 //#endregion

package/dist/components/input/index.mjs

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

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

@@ -1,5 +1,5 @@
-import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 //#region src/components/input-group/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 /**

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

@@ -1,10 +1,11 @@
-import { JsonTreeView as JsonTreeView$1, JsonTreeViewTreeProps } from "@ark-ui/solid/json-tree-view";
+import { ComponentProps } from "solid-js";
+import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/solid/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. */
-declare function JsonTreeViewTree(props: JsonTreeViewTreeProps): import("solid-js").JSX.Element;
-export declare const JsonTreeView: Omit<typeof JsonTreeView$1, "Tree"> & {
-  Tree: typeof JsonTreeViewTree;
+declare function JsonTreeViewRoot(props: ComponentProps<typeof JsonTreeView$1.Root>): import("solid-js").JSX.Element;
+export declare const JsonTreeView: typeof JsonTreeViewRoot & Omit<typeof JsonTreeView$1, "Root"> & {
+  Root: typeof JsonTreeViewRoot;
 };
 //#endregion

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

@@ -1,33 +1,30 @@
-import { injectComponentStyle } from "@bysages/core";
-import { createComponent, effect, mergeProps, setAttribute, template } from "@solidjs/web";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/solid/json-tree-view";
-import { chevron_right } from "@bysages/icons";
 //#region src/components/json-tree-view/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<svg aria-hidden=true>`);
 /** 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. */
+function JsonTreeViewRoot(props) {
+	const id = useElementId("json-tree-view", () => props.id);
+	return createComponent$1(JsonTreeView$1.Root, mergeProps$1(props, { get id() {
+		return id();
+	} }));
+}
 function JsonTreeViewTree(props) {
 	return createComponent(JsonTreeView$1.Tree, mergeProps(props, { get arrow() {
-		return props.arrow ?? (() => {
-			var _el$ = _tmpl$();
-			effect(() => {
-				return {
-					e: `0 0 ${chevron_right.width} ${chevron_right.height}`,
-					t: chevron_right.body
-				};
-			}, ({ e, t }, _p$) => {
-				e !== _p$?.e && setAttribute(_el$, "viewBox", e);
-				t !== _p$?.t && (_el$.innerHTML = t);
-			});
-			return _el$;
-		})();
+		return props.arrow ?? iconNode("chevron-right");
 	} }));
 }
-const JsonTreeView = {
+const JsonTreeView = defineFamily(JsonTreeViewRoot, {
 	...JsonTreeView$1,
+	Root: JsonTreeViewRoot,
 	Tree: JsonTreeViewTree
-};
+});
 injectComponentStyle("json-tree-view");
 //#endregion
 export { JsonTreeView };

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

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

package/dist/components/kbd/index.mjs

@@ -1,8 +1,9 @@
-import { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 //#region src/components/kbd/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<kbd>`);
-function Kbd(props) {
+const Kbd = withSelfRoot(function Kbd(props) {
 	injectComponentStyle("kbd");
 	var _el$ = _tmpl$();
 	spread(_el$, [props, {
@@ -10,6 +11,6 @@ function Kbd(props) {
 		"data-part": "root"
 	}], false);
 	return _el$;
-}
+});
 //#endregion
 export { Kbd };

package/dist/components/layout/index.mjs

@@ -1,6 +1,6 @@
 import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, delegateEvents, effect, insert, memo, ref, setAttribute, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { createContext, createEffect, createSignal, splitProps, useContext } from "solid-js";
 //#region src/components/layout/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);