@bysages/solid 0.3.0 → 0.3.1

package/dist/{ai-response-ClGGptX3.mjs → ai-response-slzE03wh.mjs}

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "./use-component-messages-C4SCVYjD.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { ref, spread, template } from "@solidjs/web";
 import { createEffect, createMemo, onMount, splitProps } from "solid-js";
@@ -111,15 +112,16 @@ function Response(props) {
 		"copyLabel",
 		"copiedLabel"
 	]);
+	const messages = useComponentMessages();
 	const html = createMemo(() => renderHtml(own.content, own.highlighter ? { highlighter: own.highlighter } : void 0));
 	let root;
 	onMount(() => createEffect(() => {
 		html();
-		if (root) decorateCodeCopy(root, own.copyLabel ?? "Copy code");
+		if (root) decorateCodeCopy(root, own.copyLabel ?? messages().ai.copyCode);
 		if (root) wrapResponseTables(root);
 	}));
 	const onClick = (event) => {
-		clickCodeCopy(event, own.copyLabel ?? "Copy code", own.copiedLabel ?? "Copied");
+		clickCodeCopy(event, own.copyLabel ?? messages().ai.copyCode, own.copiedLabel ?? messages().ai.copied);
 	};
 	var _el$ = _tmpl$();
 	ref(() => {

package/dist/components/ai/index.mjs

@@ -1,8 +1,9 @@
 import { Action } from "../ai-action/index.mjs";
 import { AiMessage as Message } from "../ai-message/index.mjs";
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { AiPromptInput as PromptInput } from "../ai-prompt-input/index.mjs";
 import { AiReasoning as Reasoning } from "../ai-reasoning/index.mjs";
-import { t as Response } from "../../ai-response-ClGGptX3.mjs";
+import { t as Response } from "../../ai-response-slzE03wh.mjs";
 import { AiSource as Source, AiSources as Sources } from "../ai-source/index.mjs";
 import { AiSuggestion as Suggestion } from "../ai-suggestion/index.mjs";
 import { AiTool as Tool } from "../ai-tool/index.mjs";
@@ -10,17 +11,13 @@ import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
 //#region src/components/ai/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-/** A conversation column: Root is the log, Message carries a role, and
-* the speaking parts — Response, Reasoning, Tool, Sources — part the
-* stream. The interactive folds are the shared Collapsible wearing a
-* `data-ai` marker, so the machine work is never ours. Parts stay
-* agnostic of any client; consumers map their message format (e.g. the
-* `UIMessage` parts re-exported here) onto these primitives. */
 function part(name, extra = {}) {
 	function Component(props) {
+		const messages = useComponentMessages();
+		const partExtra = typeof extra === "function" ? extra(messages()) : extra;
 		var _el$ = _tmpl$();
 		spread(_el$, [
-			extra,
+			partExtra,
 			props,
 			{
 				"data-scope": "ai",
@@ -35,20 +32,20 @@ function part(name, extra = {}) {
 }
 /** The log itself: the column every stroke lands in, a landmark to
 * screen readers. */
-const AiConversation = part("Conversation", {
+const AiConversation = part("Conversation", (messages) => ({
 	role: "log",
-	"aria-label": "Conversation"
-});
+	"aria-label": messages.ai.conversation
+}));
 /** The bubble's inner measure — content that belongs to neither side
 * specifically. */
 const AiContent = part("Content");
 /** The quiet row under a message — copy, retry, feedback. */
 const AiActions = part("Actions");
 /** The while-it-works whisper for the in-flight turns. */
-const AiLoader = part("Loader", {
+const AiLoader = part("Loader", (messages) => ({
 	role: "status",
-	"aria-label": "Loading"
-});
+	"aria-label": messages.ai.loading
+}));
 /** The whole family under one handle — `Ai.Conversation`,
 * `Ai.MessageContent`, and the rest. */
 const Ai = Object.assign(AiConversation, {

package/dist/components/ai-attachments/index.mjs

@@ -1,3 +1,4 @@
+import { n as useComponentMessages, t as formatComponentMessage } from "../../use-component-messages-C4SCVYjD.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { delegateEvents, effect, insert, memo, setAttribute, spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -54,6 +55,7 @@ function Attachment(props) {
 		"status",
 		"onRemove"
 	]);
+	const messages = useComponentMessages();
 	var _el$4 = _tmpl$4();
 	var _el$5 = _el$4.firstChild;
 	var _el$6 = _el$5.nextSibling;
@@ -91,7 +93,7 @@ function Attachment(props) {
 	})(), _el$6);
 	_el$6._$$click = () => own.onRemove?.();
 	insert(_el$6, removeGlyph);
-	effect(() => `Remove ${own.name}`, (_v$) => {
+	effect(() => formatComponentMessage(messages().ai.removeAttachment, { name: own.name }), (_v$) => {
 		setAttribute(_el$6, "aria-label", _v$);
 	});
 	return _el$4;

package/dist/components/ai-prompt-input/index.mjs

@@ -1,4 +1,5 @@
 import { Button } from "../button/index.mjs";
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { Field } from "../field/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { claimElement, createComponent, insert, setAttribute, spread, template } from "@solidjs/web";
@@ -43,6 +44,7 @@ function PromptInput(props) {
 		"footer",
 		"footerEnd"
 	]);
+	const messages = useComponentMessages();
 	const send = () => {
 		const value = (own.value ?? "").trim();
 		if (!value || own.disabled || own.busy) return;
@@ -60,7 +62,9 @@ function PromptInput(props) {
 		size: "sm",
 		square: true,
 		type: "button",
-		"aria-label": "Stop",
+		get "aria-label"() {
+			return messages().ai.stop;
+		},
 		get disabled() {
 			return own.disabled;
 		},
@@ -73,7 +77,9 @@ function PromptInput(props) {
 		size: "sm",
 		square: true,
 		type: "submit",
-		"aria-label": "Send",
+		get "aria-label"() {
+			return messages().ai.send;
+		},
 		get disabled() {
 			return own.disabled || !(own.value ?? "").trim();
 		},
@@ -111,7 +117,10 @@ function PromptInput(props) {
 				return own.value ?? "";
 			},
 			get placeholder() {
-				return own.placeholder ?? "Send a message";
+				return own.placeholder ?? messages().ai.send;
+			},
+			get "aria-label"() {
+				return messages().ai.conversation;
 			},
 			get disabled() {
 				return own.disabled;

package/dist/components/ai-response/index.mjs

@@ -1,2 +1,2 @@
-import { t as Response } from "../../ai-response-ClGGptX3.mjs";
+import { t as Response } from "../../ai-response-slzE03wh.mjs";
 export { Response as AiResponse, Response };

package/dist/components/autocomplete/index.mjs

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
 import { For, splitProps } from "solid-js";
@@ -14,6 +15,7 @@ import { Portal } from "solid-js/web";
 * otherwise.
 */
 function AutoComplete(props) {
+	const messages = useComponentMessages();
 	injectComponentStyle("combobox");
 	const [own, rest] = splitProps(props, [
 		"value",
@@ -55,7 +57,9 @@ function AutoComplete(props) {
 			} }), createComponent(Portal, { get children() {
 				return createComponent(Combobox.Positioner, { get children() {
 					return createComponent(Combobox.Content, { get children() {
-						return [createComponent(Combobox.Empty, { children: "No matches" }), createComponent(For, {
+						return [createComponent(Combobox.Empty, { get children() {
+							return messages().command.noMatches;
+						} }), createComponent(For, {
 							get each() {
 								return collection().items;
 							},

package/dist/components/banner/index.mjs

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps, spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -40,13 +41,14 @@ const Actions = part("Actions", "div");
 * consumer's state. */
 function Close(props) {
 	const [own, rest] = splitProps(props, ["type"]);
+	const messages = useComponentMessages();
 	var _el$2 = _tmpl$2();
 	spread(_el$2, [rest, {
 		get type() {
 			return own.type ?? "button";
 		},
 		get "aria-label"() {
-			return rest["aria-label"] ?? "Dismiss";
+			return rest["aria-label"] ?? messages().banner.dismiss;
 		},
 		"data-scope": "banner",
 		"data-part": "close"

package/dist/components/breadcrumb/index.mjs

@@ -1,14 +1,14 @@
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps, spread, template } from "@solidjs/web";
 import { mergeProps as mergeProps$1 } from "solid-js";
 //#region src/components/breadcrumb/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<span>`);
-/** A trail of waymarks: Root wraps the nav, List the ordered trail, and
-* each Item carries a Link — or the Current page — parted by a quiet
-* Separator. Links take href and the rest through attributes. */
 function part(name, tag, extra = {}) {
 	return ((props) => {
-		return createComponent(tag, mergeProps(extra, props, {
+		const messages = useComponentMessages();
+		const partExtra = typeof extra === "function" ? extra(messages()) : extra;
+		return createComponent(tag, mergeProps(partExtra, props, {
 			"data-scope": "breadcrumb",
 			get "data-part"() {
 				return name.toLowerCase();
@@ -16,7 +16,7 @@ function part(name, tag, extra = {}) {
 		}));
 	});
 }
-const Root = part("Root", "nav", { "aria-label": "Breadcrumb" });
+const Root = part("Root", "nav", (messages) => ({ "aria-label": messages.breadcrumb.label }));
 const List = part("List", "ol");
 const Item = part("Item", "li");
 const Link = part("Link", "a");

package/dist/components/cascade-select/index.mjs

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { t as Input } from "../../input-DoFQ7RXh.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, delegateEvents, effect, insert, setAttribute, spread, template } from "@solidjs/web";
@@ -38,6 +39,7 @@ function checkGlyph() {
 * runs — each hit still reads as its full route.
 */
 function CascadeSelect(props) {
+	const messages = useComponentMessages();
 	injectComponentStyle("cascade-select");
 	const [own, rest] = splitProps(props, [
 		"value",
@@ -207,6 +209,7 @@ function CascadeSelect(props) {
 	}, true);
 	spread(_el$11, () => {
 		return mergeProps$1(() => api().getTriggerProps(), {
+			"aria-labelledby": id + ":value-text",
 			get disabled() {
 				return own.disabled || void 0;
 			},
@@ -217,7 +220,7 @@ function CascadeSelect(props) {
 		});
 	}, true);
 	spread(_el$12, () => {
-		return mergeProps$1(() => api().getValueTextProps());
+		return mergeProps$1(() => api().getValueTextProps(), { id: id + ":value-text" });
 	}, true);
 	insert(_el$12, () => {
 		return display() ?? own.placeholder ?? "Select…";
@@ -250,8 +253,12 @@ function CascadeSelect(props) {
 						return query();
 					},
 					onValueChange: setQuery,
-					placeholder: "Filter…",
-					"aria-label": "Filter options"
+					get placeholder() {
+						return messages().select.filter;
+					},
+					get "aria-label"() {
+						return messages().select.filter;
+					}
 				}));
 				return _el$16;
 			}

package/dist/components/command/index.mjs

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
 import { For, Show, createEffect, createSignal, splitProps } from "solid-js";
@@ -66,6 +67,7 @@ function Row(props) {
 function Command(props) {
 	injectComponentStyle("command");
 	injectComponentStyle("dialog");
+	const messages = useComponentMessages();
 	const [own, rest] = splitProps(props, [
 		"items",
 		"placeholder",
@@ -132,7 +134,10 @@ function Command(props) {
 						var _el$7 = _tmpl$4();
 						spread(_el$7, [contentProps, {
 							"data-scope": "command",
-							"data-part": "content"
+							"data-part": "content",
+							get "aria-label"() {
+								return messages().command.palette;
+							}
 						}], true);
 						insert(_el$7, createComponent(Combobox.Root, {
 							get collection() {
@@ -164,7 +169,10 @@ function Command(props) {
 									spread(_el$8, [inputProps, {
 										type: "text",
 										get placeholder() {
-											return own.placeholder;
+											return own.placeholder ?? messages().command.search;
+										},
+										get "aria-label"() {
+											return messages().command.search;
 										},
 										"data-scope": "command",
 										"data-part": "input"
@@ -232,7 +240,7 @@ function Command(props) {
 										get children() {
 											var _el$11 = _tmpl$6();
 											insert(_el$11, () => {
-												return own.emptyText ?? "No matching commands";
+												return own.emptyText ?? messages().command.noMatches;
 											});
 											return _el$11;
 										}

package/dist/components/config-provider/index.d.mts

@@ -1,4 +1,4 @@
-import { ThemeScene } from "@bysages/core";
+import { ComponentMessagesOverride, ThemeScene } from "@bysages/core";
 import { JSX } from "solid-js";
 //#region src/components/config-provider/index.d.ts
 /** The four density tiers the token layer's `[data-density]` selectors
@@ -22,6 +22,8 @@ export interface ConfigContext {
   dir?: "ltr" | "rtl";
   /** BCP-47 locale, landing as the native `lang` attribute. */
   locale?: string;
+  /** Wrapper-owned copy, resolved with `locale` and merged over its locale defaults leaf by leaf. */
+  messages?: ComponentMessagesOverride;
 }
 /** Solid context for the provider's snapshot — a custom part reads it
  * with `useContext(ConfigContextKey)`. */
@@ -36,6 +38,7 @@ export interface ConfigProviderProps extends JSX.HTMLAttributes<HTMLDivElement>
   accent?: string;
   dir?: "ltr" | "rtl";
   locale?: string;
+  messages?: ComponentMessagesOverride;
 }
 /**
  * The declarative host for global configuration: one element that both

package/dist/components/config-provider/index.mjs

@@ -25,6 +25,7 @@ function ConfigProvider(props) {
 		"accent",
 		"dir",
 		"locale",
+		"messages",
 		"children"
 	]);
 	return createComponent(ConfigContextKey.Provider, {
@@ -33,7 +34,8 @@ function ConfigProvider(props) {
 			scene: own.scene,
 			accent: own.accent,
 			dir: own.dir,
-			locale: own.locale
+			locale: own.locale,
+			messages: own.messages
 		}),
 		get children() {
 			var _el$ = _tmpl$();

package/dist/components/data-view/index.mjs

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { Pagination } from "../pagination/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, effect, insert, memo, setAttribute, spread, template } from "@solidjs/web";
@@ -20,6 +21,7 @@ function DataView(props) {
 		"renderItem",
 		"header"
 	]);
+	const messages = useComponentMessages();
 	const [page, setPage] = createSignal(1);
 	const pageCount = () => own.pageSize ? Math.max(1, Math.ceil(own.items.length / own.pageSize)) : 1;
 	const visible = () => own.pageSize ? own.items.slice((page() - 1) * own.pageSize, page() * own.pageSize) : own.items;
@@ -69,7 +71,9 @@ function DataView(props) {
 				get children() {
 					return [
 						createComponent(Pagination.PrevTrigger, {
-							"aria-label": "Previous page",
+							get "aria-label"() {
+								return messages().pagination.previous;
+							},
 							children: "‹"
 						}),
 						createComponent(Pagination.Context, { children: (pagination) => createComponent(For, {
@@ -92,7 +96,9 @@ function DataView(props) {
 							})
 						}) }),
 						createComponent(Pagination.NextTrigger, {
-							"aria-label": "Next page",
+							get "aria-label"() {
+								return messages().pagination.next;
+							},
 							children: "›"
 						})
 					];

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

@@ -1,4 +1,5 @@
 import { Button } from "../button/index.mjs";
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { t as Input } from "../../input-DoFQ7RXh.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, memo, spread, template } from "@solidjs/web";
@@ -16,6 +17,7 @@ var _tmpl$3 = /* @__PURE__ */ template(`<svg width=16 height=16 viewBox="0 0 24
 * emptied itself would leave the reader no place to type.
 */
 function DynamicInput(props) {
+	const messages = useComponentMessages();
 	injectComponentStyle("dynamic-input");
 	const [own, rest] = splitProps(props, [
 		"value",
@@ -85,7 +87,9 @@ function DynamicInput(props) {
 				get disabled() {
 					return own.disabled || !canRemove();
 				},
-				"aria-label": `Remove entry ${index + 1}`,
+				get "aria-label"() {
+					return `${messages().dynamicEntry.remove} ${index + 1}`;
+				},
 				onClick: () => remove(index),
 				get children() {
 					return crossIcon();

package/dist/components/file-upload/index.d.mts

@@ -1,5 +1,10 @@
+import { ComponentProps } from "solid-js";
 import { FileUpload as FileUpload$1, FileUploadRootProps } from "@ark-ui/solid/file-upload";
 //#region src/components/file-upload/index.d.ts
+/** The inner trigger repeats the click binding the dropzone already
+ * owns: keyboard users enter through the dropzone, so the button
+ * leaves the tab order and the semantic tree entirely. */
+declare function FileUploadTrigger(props: ComponentProps<typeof FileUpload$1.Trigger>): import("solid-js").JSX.Element;
 /** 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,
@@ -11,7 +16,8 @@ type FileUploadOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function FileUploadRoot(props: FileUploadRootProps & FileUploadOwnProps): import("solid-js").JSX.Element;
-export declare const FileUpload: Omit<typeof FileUpload$1, "Root"> & {
+export declare const FileUpload: Omit<typeof FileUpload$1, "Root" | "Trigger"> & {
   Root: typeof FileUploadRoot;
+  Trigger: typeof FileUploadTrigger;
 };
 //#endregion

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

@@ -3,6 +3,15 @@ import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
 import { FileUpload as FileUpload$1 } from "@ark-ui/solid/file-upload";
 //#region src/components/file-upload/index.tsx
+/** The inner trigger repeats the click binding the dropzone already
+* owns: keyboard users enter through the dropzone, so the button
+* leaves the tab order and the semantic tree entirely. */
+function FileUploadTrigger(props) {
+	return createComponent(FileUpload$1.Trigger, mergeProps(props, {
+		tabindex: -1,
+		"aria-hidden": "true"
+	}));
+}
 function FileUploadRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
 	return createComponent(FileUpload$1.Root, mergeProps(rest, { get "data-size"() {
@@ -11,7 +20,8 @@ function FileUploadRoot(props) {
 }
 const FileUpload = {
 	...FileUpload$1,
-	Root: FileUploadRoot
+	Root: FileUploadRoot,
+	Trigger: FileUploadTrigger
 };
 injectComponentStyle("file-upload");
 //#endregion

package/dist/components/float-button/index.mjs

@@ -1,4 +1,5 @@
 import { Button } from "../button/index.mjs";
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
 import { createContext, createSignal, splitProps, useContext } from "solid-js";
@@ -62,6 +63,7 @@ const STEP_DOWN = {
 function FloatButtonTrigger(props) {
 	const [own, rest] = splitProps(props, ["label", "children"]);
 	const context = useContext(FloatButtonContextKey);
+	const messages = useComponentMessages();
 	return createComponent(Button, mergeProps(rest, {
 		variant: "solid",
 		square: true,
@@ -70,7 +72,7 @@ function FloatButtonTrigger(props) {
 		},
 		onClick: () => context?.toggle(),
 		get "aria-label"() {
-			return own.label || "Actions";
+			return own.label || messages().floatButton.actions;
 		},
 		get "aria-expanded"() {
 			return context?.open() ?? false;

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

@@ -8,6 +8,10 @@ import { JSX } from "solid-js";
 export interface ImageProps extends JSX.HTMLAttributes<HTMLElement> {
   src: string;
   alt?: string;
+  /** Intrinsic dimensions for the image element, reserving the layout
+   * box before bytes arrive. */
+  width?: number | string;
+  height?: number | string;
   fit?: "cover" | "contain" | "fill" | "none";
   loading?: "lazy" | "eager";
   /** What a broken source leaves instead of the picture. */

package/dist/components/image/index.mjs

@@ -21,6 +21,8 @@ function Image(props) {
 	const [own, rest] = splitProps(props, [
 		"src",
 		"alt",
+		"width",
+		"height",
 		"fit",
 		"loading",
 		"fallback"
@@ -57,12 +59,16 @@ function Image(props) {
 		return {
 			e: own.src,
 			t: own.alt ?? "",
-			a: own.loading ?? "lazy"
+			a: own.width,
+			o: own.height,
+			i: own.loading ?? "lazy"
 		};
-	}, ({ e, t, a }, _p$) => {
+	}, ({ 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, "loading", a);
+		a !== _p$?.a && setAttribute(_el$5, "width", a);
+		o !== _p$?.o && setAttribute(_el$5, "height", o);
+		i !== _p$?.i && setAttribute(_el$5, "loading", i);
 	});
 	return _el$4;
 }

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

@@ -10,6 +10,10 @@ import { JSX } from "solid-js";
 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. */

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

@@ -1,4 +1,5 @@
 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";
@@ -41,10 +42,13 @@ function ImageViewer(props) {
 	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);
@@ -106,12 +110,16 @@ function ImageViewer(props) {
 										return {
 											e: own.src,
 											t: own.alt ?? "",
-											a: `scale(${scale()}) rotate(${rotation()}deg)`
+											a: own.width,
+											o: own.height,
+											i: `scale(${scale()}) rotate(${rotation()}deg)`
 										};
-									}, ({ e, t, a }, _p$) => {
+									}, ({ 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 && setStyleProperty(_el$13, "transform", a);
+										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;
 								})(), (() => {
@@ -124,17 +132,17 @@ function ImageViewer(props) {
 												},
 												get children() {
 													return [memo(() => {
-														return toolButton("Zoom in", TOOL_GLYPHS.zoomIn, () => zoom(SCALE_STEP));
+														return toolButton(messages().imageViewer.zoomIn, TOOL_GLYPHS.zoomIn, () => zoom(SCALE_STEP));
 													}), memo(() => {
-														return toolButton("Zoom out", TOOL_GLYPHS.zoomOut, () => zoom(-.25));
+														return toolButton(messages().imageViewer.zoomOut, TOOL_GLYPHS.zoomOut, () => zoom(-.25));
 													})];
 												}
 											}),
 											memo(() => {
-												return toolButton("Rotate 90 degrees", TOOL_GLYPHS.rotate, rotate);
+												return toolButton(messages().imageViewer.rotate, TOOL_GLYPHS.rotate, rotate);
 											}),
 											memo(() => {
-												return toolButton("Close", TOOL_GLYPHS.close, () => setOpen(false));
+												return toolButton(messages().imageViewer.close, TOOL_GLYPHS.close, () => setOpen(false));
 											})
 										];
 									} }));

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

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

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

@@ -1,10 +1,33 @@
 import { injectComponentStyle } from "@bysages/core";
+import { createComponent, effect, mergeProps, setAttribute, template } from "@solidjs/web";
 import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/solid/json-tree-view";
-//#region src/components/json-tree-view/index.ts
+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. */
-const JsonTreeView = JsonTreeView$1;
+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$;
+		})();
+	} }));
+}
+const JsonTreeView = {
+	...JsonTreeView$1,
+	Tree: JsonTreeViewTree
+};
 injectComponentStyle("json-tree-view");
 //#endregion
 export { JsonTreeView };