@bysages/svelte 0.2.3 → 0.3.1

package/README.md

@@ -4,11 +4,11 @@
 ![npm downloads](https://img.shields.io/npm/dw/@bysages/svelte)
 ![npm license](https://img.shields.io/npm/l/@bysages/svelte)
 
-> By Sages Elements for Svelte — 90+ accessible component families, headless by construction, dressed by the paper-and-ink style layer.
+> By Sages Elements for Svelte — 140+ accessible component families, headless by construction, dressed by the paper-and-ink style layer.
 
 ## Features
 
-- 🧩 **90+ families** — actions, forms, overlays, navigation, data, layout, and an AI conversation family on ai-sdk formats
+- 🧩 **140+ families** — actions, forms, overlays, navigation, data, layout, an AI conversation family on ai-sdk formats, and a full generative vocabulary
 - 🏛️ **Headless inside** — interaction, state, ARIA, and positioning come from proven headless state machines; wrappers add API narrowing and style injection, no DOM of their own
 - 🎨 **Token-styled** — every visual value is a CSS custom property from `@bysages/core`; light/dark, accent pigments, contrast and density tiers are data, never hardcoded styles
 - 📦 **Container-driven** — components respond to `@container`, not the viewport; the same component composes in a sidebar, a card, or a page
@@ -65,6 +65,20 @@ mount(App, { target: document.getElementById("app")! });
 </Dialog.Root>
 ```
 
+## Generative UI
+
+Every family carries a generative face — a zod-typed catalog entry that
+lives beside the component. The faces compose into a
+[json-render](https://json-render.dev) catalog and render through the
+same package:
+
+```ts
+import { catalog } from "@bysages/svelte/generative";
+```
+
+Point an AI SDK stream at the renderer and a prompt becomes real,
+on-brand components — constrained to the families you registered.
+
 ## Documentation
 
 The [documentation site](https://elements.bysages.com) carries every family with live demos and props tables.

package/dist/{ai-BOUoSSjw.mjs → AiLoader-BEiPYOfW.mjs}

@@ -1,11 +1,4 @@
-import { t as AiAction } from "./ai-action-DKsvxilp.mjs";
-import { t as AiMessage } from "./ai-message-DBs1fdFm.mjs";
-import { t as AiPromptInput } from "./ai-prompt-input-BmyKyadu.mjs";
-import { t as AiReasoning } from "./ai-reasoning-C4YsB2hQ.mjs";
-import { t as AiResponse } from "./ai-response-D5IkRFMN.mjs";
-import { n as AiSources, t as AiSource } from "./ai-source-CvglcFw1.mjs";
-import { t as AiSuggestion } from "./ai-suggestion-zGAQ1kkf.mjs";
-import { t as AiTool } from "./ai-tool-DY_iNbMk.mjs";
+import { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -14,21 +7,23 @@ var rest_excludes$3 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
+	"aria-label",
 	"children"
 ]);
 var root$3 = $.from_html(`<div><!></div>`);
-function Ai$1($$anchor, $$props) {
+function Ai($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("ai");
 	let rest = $.rest_props($$props, rest_excludes$3);
+	const messages = useComponentMessages();
 	var div = root$3();
-	$.attribute_effect(div, () => ({
+	$.attribute_effect(div, ($0) => ({
 		...rest,
 		role: "log",
-		"aria-label": "Conversation",
+		"aria-label": $0,
 		"data-scope": "ai",
 		"data-part": "conversation"
-	}));
+	}), [() => $$props["aria-label"] ?? messages().ai.conversation]);
 	var node = $.child(div);
 	$.snippet(node, () => $$props.children ?? $.noop);
 	$.reset(div);
@@ -91,6 +86,7 @@ var rest_excludes = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
+	"aria-label",
 	"children"
 ]);
 var root = $.from_html(`<span><!></span>`);
@@ -98,14 +94,15 @@ function AiLoader($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("ai");
 	let rest = $.rest_props($$props, rest_excludes);
+	const messages = useComponentMessages();
 	var span = root();
-	$.attribute_effect(span, () => ({
+	$.attribute_effect(span, ($0) => ({
 		...rest,
 		role: "status",
-		"aria-label": "Loading",
+		"aria-label": $0,
 		"data-scope": "ai",
 		"data-part": "loader"
-	}));
+	}), [() => $$props["aria-label"] ?? messages().ai.loading]);
 	var node = $.child(span);
 	$.snippet(node, () => $$props.children ?? $.noop);
 	$.reset(span);
@@ -113,28 +110,4 @@ function AiLoader($$anchor, $$props) {
 	$.pop();
 }
 //#endregion
-//#region src/components/ai/index.ts
-/** 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, the prompt vessel the shared Field, 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 below)
-* onto these primitives. */
-const Ai = Object.assign(Ai$1, {
-	Conversation: Ai$1,
-	Content: AiContent,
-	Message: AiMessage,
-	Response: AiResponse,
-	Reasoning: AiReasoning,
-	Tool: AiTool,
-	Sources: AiSources,
-	Source: AiSource,
-	Actions: AiActions,
-	Action: AiAction,
-	Suggestion: AiSuggestion,
-	PromptInput: AiPromptInput,
-	Loader: AiLoader
-});
-//#endregion
-export { Ai as t };
+export { Ai as i, AiContent as n, AiActions as r, AiLoader as t };

package/dist/{FileUploadRoot-IVcTAZp-.mjs → FileUploadTrigger-BgAcpLXx.mjs}

@@ -3,7 +3,7 @@ import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { FileUpload } from "@ark-ui/svelte/file-upload";
 //#region src/components/file-upload/FileUploadRoot.svelte
-var rest_excludes = /* @__PURE__ */ new Set([
+var rest_excludes$1 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -13,7 +13,7 @@ var rest_excludes = /* @__PURE__ */ new Set([
 function FileUploadRoot($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("file-upload");
-	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
+	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes$1);
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 	$.component(node, () => FileUpload.Root, ($$anchor, ArkFileUpload_Root) => {
@@ -34,4 +34,40 @@ function FileUploadRoot($$anchor, $$props) {
 	$.pop();
 }
 //#endregion
-export { FileUploadRoot as t };
+//#region src/components/file-upload/FileUploadTrigger.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root = $.from_html(`<span><!></span>`);
+function FileUploadTrigger($$anchor, $$props) {
+	let rest = $.rest_props($$props, rest_excludes);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	{
+		const asChild = ($$anchor, triggerProps = $.noop) => {
+			var span = root();
+			$.attribute_effect(span, ($0) => ({
+				...$0,
+				"data-scope": "file-upload",
+				"data-part": "trigger",
+				"aria-hidden": "true"
+			}), [() => triggerProps()()]);
+			var node_1 = $.child(span);
+			$.snippet(node_1, () => $$props.children ?? $.noop);
+			$.reset(span);
+			$.append($$anchor, span);
+		};
+		$.component(node, () => FileUpload.Trigger, ($$anchor, ArkFileUpload_Trigger) => {
+			ArkFileUpload_Trigger($$anchor, $.spread_props(() => rest, {
+				asChild,
+				$$slots: { asChild: true }
+			}));
+		});
+	}
+	$.append($$anchor, fragment);
+}
+//#endregion
+export { FileUploadRoot as n, FileUploadTrigger as t };

package/dist/Input-CZhcEeFU.mjs

@@ -0,0 +1,75 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { useFieldContext } from "@ark-ui/svelte/field";
+//#region src/components/input/mask.ts
+function accepts(slot, ch) {
+	if (slot === "9") return /\d/.test(ch);
+	if (slot === "a") return /[a-zA-Z]/.test(ch);
+	return /[\da-zA-Z]/.test(ch);
+}
+/** Apply the entry mask: `9` takes a digit, `a` a letter, `*` either;
+* every other character is literal. A literal already typed is consumed,
+* not duplicated; a literal met out of place holds the walk and lets its
+* own slot claim it — so deleting through the middle reflows the shape
+* instead of corrupting it. */
+function applyMask(raw, mask) {
+	const literals = new Set(mask.split("").filter((s) => s !== "9" && s !== "a" && s !== "*"));
+	let out = "";
+	let at = 0;
+	slots: for (const slot of mask) {
+		if (at >= raw.length) break;
+		if (slot === "9" || slot === "a" || slot === "*") {
+			let ch = raw[at];
+			while (ch !== void 0 && !accepts(slot, ch)) {
+				if (literals.has(ch)) continue slots;
+				at += 1;
+				ch = raw[at];
+			}
+			if (ch === void 0) break;
+			out += ch;
+			at += 1;
+		} else if (raw[at] === slot) {
+			at += 1;
+			out += slot;
+		} else out += slot;
+	}
+	return out;
+}
+//#endregion
+//#region src/components/input/Input.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"value",
+	"size",
+	"invalid",
+	"mask"
+]);
+var root = $.from_html(`<input/>`);
+function Input($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("input");
+	let value = $.prop($$props, "value", 15), size = $.prop($$props, "size", 3, "md"), invalid = $.prop($$props, "invalid", 3, false), rest = $.rest_props($$props, rest_excludes);
+	const field = useFieldContext();
+	const fieldProps = $.derived(() => field?.()?.getInputProps() ?? {});
+	var input = root();
+	var event_handler = (event) => {
+		value($$props.mask ? applyMask(event.currentTarget.value, $$props.mask) : event.currentTarget.value);
+	};
+	$.attribute_effect(input, () => ({
+		...$.get(fieldProps),
+		...rest,
+		"data-scope": "input",
+		"data-part": "root",
+		"data-size": size(),
+		"data-invalid": invalid() || $.get(fieldProps)["data-invalid"] != null ? "" : void 0,
+		oninput: event_handler
+	}), void 0, void 0, void 0, void 0, true);
+	$.bind_value(input, value);
+	$.append($$anchor, input);
+	$.pop();
+}
+//#endregion
+export { Input as t };

package/dist/JsonTreeViewTree-CqRP_PwV.mjs

@@ -0,0 +1,71 @@
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { JsonTreeView } from "@ark-ui/svelte/json-tree-view";
+import { chevron_right } from "@bysages/icons";
+//#region src/components/json-tree-view/JsonTreeViewTree.svelte
+const defaultArrow = ($$anchor) => {
+	var svg = root();
+	$.html(svg, () => chevron_right.body, true);
+	$.reset(svg);
+	$.template_effect(() => $.set_attribute(svg, "viewBox", `0 0 ${chevron_right.width ?? ""} ${chevron_right.height ?? ""}`));
+	$.append($$anchor, svg);
+};
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"arrow",
+	"indentGuide",
+	"renderValue"
+]);
+var root = $.from_svg(`<svg aria-hidden="true"></svg>`);
+function JsonTreeViewTree($$anchor, $$props) {
+	$.push($$props, true);
+	let rest = $.rest_props($$props, rest_excludes);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	var consequent = ($$anchor) => {
+		var fragment_1 = $.comment();
+		var node_1 = $.first_child(fragment_1);
+		$.component(node_1, () => JsonTreeView.Tree, ($$anchor, ArkJsonTreeView_Tree) => {
+			ArkJsonTreeView_Tree($$anchor, $.spread_props(() => rest, {
+				get arrow() {
+					return $$props.arrow;
+				},
+				get indentGuide() {
+					return $$props.indentGuide;
+				},
+				get renderValue() {
+					return $$props.renderValue;
+				}
+			}));
+		});
+		$.append($$anchor, fragment_1);
+	};
+	var alternate = ($$anchor) => {
+		var fragment_2 = $.comment();
+		var node_2 = $.first_child(fragment_2);
+		$.component(node_2, () => JsonTreeView.Tree, ($$anchor, ArkJsonTreeView_Tree_1) => {
+			ArkJsonTreeView_Tree_1($$anchor, $.spread_props(() => rest, {
+				get indentGuide() {
+					return $$props.indentGuide;
+				},
+				get renderValue() {
+					return $$props.renderValue;
+				},
+				get arrow() {
+					return defaultArrow;
+				}
+			}));
+		});
+		$.append($$anchor, fragment_2);
+	};
+	$.if(node, ($$render) => {
+		if ($$props.arrow) $$render(consequent);
+		else $$render(alternate, -1);
+	});
+	$.append($$anchor, fragment);
+	$.pop();
+}
+//#endregion
+export { JsonTreeViewTree as t };

package/dist/{spinner-EpUWE3Hu.mjs → Spinner-DGAzGJ_8.mjs}

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -7,22 +8,24 @@ var rest_excludes = /* @__PURE__ */ new Set([
 	"$$events",
 	"$$legacy",
 	"size",
+	"aria-label",
 	"children"
 ]);
 var root = $.from_html(`<span><svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-opacity="0.2" stroke-width="2.5"></circle><path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"></path></svg> <!></span>`);
-function Spinner$1($$anchor, $$props) {
+function Spinner($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("spinner");
 	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
+	const messages = useComponentMessages();
 	var span = root();
-	$.attribute_effect(span, () => ({
+	$.attribute_effect(span, ($0) => ({
 		...rest,
 		role: "status",
-		"aria-label": rest["aria-label"] ?? "Loading",
+		"aria-label": $0,
 		"data-scope": "spinner",
 		"data-part": "root",
 		"data-size": size()
-	}));
+	}), [() => $$props["aria-label"] ?? messages().spinner.loading]);
 	var node = $.sibling($.child(span), 2);
 	$.snippet(node, () => $$props.children ?? $.noop);
 	$.reset(span);
@@ -30,9 +33,4 @@ function Spinner$1($$anchor, $$props) {
 	$.pop();
 }
 //#endregion
-//#region src/components/spinner/index.ts
-/** A wheel of waiting: one arc of ink turning about its center. Quiet by
-* default — it reports progress without claiming attention. */
-const Spinner = Spinner$1;
-//#endregion
 export { Spinner as t };

package/dist/{StepsRoot-Dg_3-lRb.mjs → StepsRoot-C_FYfShw.mjs}

@@ -2,6 +2,32 @@ import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { Steps } from "@ark-ui/svelte/steps";
+//#region src/components/steps/StepsItem.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+function StepsItem($$anchor, $$props) {
+	let rest = $.rest_props($$props, rest_excludes$1);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => Steps.Item, ($$anchor, ArkSteps_Item) => {
+		ArkSteps_Item($$anchor, $.spread_props(() => rest, {
+			role: "presentation",
+			children: ($$anchor, $$slotProps) => {
+				var fragment_1 = $.comment();
+				var node_1 = $.first_child(fragment_1);
+				$.snippet(node_1, () => $$props.children ?? $.noop);
+				$.append($$anchor, fragment_1);
+			},
+			$$slots: { default: true }
+		}));
+	});
+	$.append($$anchor, fragment);
+}
+//#endregion
 //#region src/components/steps/StepsRoot.svelte
 var rest_excludes = /* @__PURE__ */ new Set([
 	"$$slots",
@@ -34,4 +60,4 @@ function StepsRoot($$anchor, $$props) {
 	$.pop();
 }
 //#endregion
-export { StepsRoot as t };
+export { StepsItem as n, StepsRoot as t };

package/dist/{TabsRoot-BMMO3B77.mjs → TabsRoot-DXd41HqW.mjs}

@@ -8,12 +8,13 @@ var rest_excludes = /* @__PURE__ */ new Set([
 	"$$events",
 	"$$legacy",
 	"size",
+	"variant",
 	"children"
 ]);
 function TabsRoot($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("tabs");
-	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
+	let size = $.prop($$props, "size", 3, "md"), variant = $.prop($$props, "variant", 3, "line"), rest = $.rest_props($$props, rest_excludes);
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 	$.component(node, () => Tabs.Root, ($$anchor, ArkTabs_Root) => {
@@ -21,6 +22,9 @@ function TabsRoot($$anchor, $$props) {
 			get "data-size"() {
 				return size();
 			},
+			get "data-variant"() {
+				return variant();
+			},
 			children: ($$anchor, $$slotProps) => {
 				var fragment_1 = $.comment();
 				var node_1 = $.first_child(fragment_1);

package/dist/TocIndicator-DPnZxTJ2.mjs

@@ -0,0 +1,30 @@
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { Toc } from "@ark-ui/svelte/toc";
+//#region src/components/toc/TocIndicator.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+function TocIndicator($$anchor, $$props) {
+	let rest = $.rest_props($$props, rest_excludes);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => Toc.Indicator, ($$anchor, ArkToc_Indicator) => {
+		ArkToc_Indicator($$anchor, $.spread_props(() => rest, {
+			"aria-hidden": "true",
+			children: ($$anchor, $$slotProps) => {
+				var fragment_1 = $.comment();
+				var node_1 = $.first_child(fragment_1);
+				$.snippet(node_1, () => $$props.children ?? $.noop);
+				$.append($$anchor, fragment_1);
+			},
+			$$slots: { default: true }
+		}));
+	});
+	$.append($$anchor, fragment);
+}
+//#endregion
+export { TocIndicator as t };

package/dist/TreeViewRoot-RBynRAly.mjs

@@ -0,0 +1,108 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { chevron_right } from "@bysages/icons";
+import { TreeView } from "@ark-ui/svelte/tree-view";
+//#region src/components/tree-view/TreeViewBranchIndicator.svelte
+var rest_excludes$2 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root = $.from_svg(`<svg aria-hidden="true"></svg>`);
+function TreeViewBranchIndicator($$anchor, $$props) {
+	$.push($$props, true);
+	let rest = $.rest_props($$props, rest_excludes$2);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => TreeView.BranchIndicator, ($$anchor, ArkTreeView_BranchIndicator) => {
+		ArkTreeView_BranchIndicator($$anchor, $.spread_props(() => rest, {
+			children: ($$anchor, $$slotProps) => {
+				var fragment_1 = $.comment();
+				var node_1 = $.first_child(fragment_1);
+				var consequent = ($$anchor) => {
+					var fragment_2 = $.comment();
+					var node_2 = $.first_child(fragment_2);
+					$.snippet(node_2, () => $$props.children);
+					$.append($$anchor, fragment_2);
+				};
+				var alternate = ($$anchor) => {
+					var svg = root();
+					$.html(svg, () => chevron_right.body, true);
+					$.reset(svg);
+					$.template_effect(() => $.set_attribute(svg, "viewBox", `0 0 ${chevron_right.width ?? ""} ${chevron_right.height ?? ""}`));
+					$.append($$anchor, svg);
+				};
+				$.if(node_1, ($$render) => {
+					if ($$props.children) $$render(consequent);
+					else $$render(alternate, -1);
+				});
+				$.append($$anchor, fragment_1);
+			},
+			$$slots: { default: true }
+		}));
+	});
+	$.append($$anchor, fragment);
+	$.pop();
+}
+//#endregion
+//#region src/components/tree-view/TreeViewNodeCheckbox.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+function TreeViewNodeCheckbox($$anchor, $$props) {
+	let rest = $.rest_props($$props, rest_excludes$1);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => TreeView.NodeCheckbox, ($$anchor, ArkTreeView_NodeCheckbox) => {
+		ArkTreeView_NodeCheckbox($$anchor, $.spread_props(() => rest, {
+			"aria-hidden": "true",
+			children: ($$anchor, $$slotProps) => {
+				var fragment_1 = $.comment();
+				var node_1 = $.first_child(fragment_1);
+				$.snippet(node_1, () => $$props.children ?? $.noop);
+				$.append($$anchor, fragment_1);
+			},
+			$$slots: { default: true }
+		}));
+	});
+	$.append($$anchor, fragment);
+}
+//#endregion
+//#region src/components/tree-view/TreeViewRoot.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"size",
+	"children"
+]);
+function TreeViewRoot($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("tree-view");
+	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => TreeView.Root, ($$anchor, ArkTreeView_Root) => {
+		ArkTreeView_Root($$anchor, $.spread_props(() => rest, {
+			get "data-size"() {
+				return size();
+			},
+			children: ($$anchor, $$slotProps) => {
+				var fragment_1 = $.comment();
+				var node_1 = $.first_child(fragment_1);
+				$.snippet(node_1, () => $$props.children ?? $.noop);
+				$.append($$anchor, fragment_1);
+			},
+			$$slots: { default: true }
+		}));
+	});
+	$.append($$anchor, fragment);
+	$.pop();
+}
+//#endregion
+export { TreeViewNodeCheckbox as n, TreeViewBranchIndicator as r, TreeViewRoot as t };

package/dist/{ai-attachments-Y0Tf6UFL.mjs → ai-attachments-C0YVIKUc.mjs}

@@ -1,3 +1,4 @@
+import { n as useComponentMessages, t as formatMessage } from "./messages-DNzA55pH.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -9,7 +10,8 @@ var rest_excludes$1 = /* @__PURE__ */ new Set([
 	"name",
 	"size",
 	"status",
-	"onRemove"
+	"onRemove",
+	"aria-label"
 ]);
 var root$1 = $.from_svg(`<svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><rect x="2.5" y="3.5" width="11" height="9"></rect><path d="M2.5 10.5 6 7l3 3 2-1.5 2.5 2"></path><circle cx="6" cy="6" r="0.75" fill="currentColor" stroke="none"></circle></svg>`);
 var root_1 = $.from_svg(`<svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M4 2.5h5l3 3V13.5H4z"></path><path d="M9 2.5v3h3"></path></svg>`);
@@ -46,6 +48,8 @@ function Attachment$1($$anchor, $$props) {
 		return `${value.toFixed(1)} ${units[unit]}`;
 	};
 	let status = $.prop($$props, "status", 3, "ready"), rest = $.rest_props($$props, rest_excludes$1);
+	const messages = useComponentMessages();
+	const removeLabel = $.derived(() => $$props["aria-label"] ?? formatMessage(messages().ai.removeAttachment, { name: $$props.name }));
 	var span = root_3();
 	$.attribute_effect(span, () => ({
 		...rest,
@@ -83,7 +87,7 @@ function Attachment$1($$anchor, $$props) {
 	$.reset(span);
 	$.template_effect(() => {
 		$.set_text(text, $$props.name);
-		$.set_attribute(button, "aria-label", `Remove ${$$props.name}`);
+		$.set_attribute(button, "aria-label", $.get(removeLabel));
 	});
 	$.delegated("click", button, () => $$props.onRemove?.());
 	$.append($$anchor, span);