@bysages/svelte 0.3.1 → 0.4.0

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

@@ -1,3 +1,5 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
+import { t as InternalIcon } from "./InternalIcon-Clwbj4MY.mjs";
 import { n as useComponentMessages, t as formatMessage } from "./messages-DNzA55pH.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
@@ -13,10 +15,8 @@ var rest_excludes$1 = /* @__PURE__ */ new Set([
 	"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>`);
-var root_2 = $.from_html(`<span> </span>`);
-var root_3 = $.from_html(`<span><!> <span> </span> <!> <button type="button" data-remove=""><svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M4 4l8 8M12 4l-8 8"></path></svg></button></span>`);
+var root$1 = $.from_html(`<span> </span>`);
+var root_1 = $.from_html(`<span><!> <span> </span> <!> <button type="button" data-remove=""><!></button></span>`);
 function Attachment$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("ai");
@@ -50,7 +50,7 @@ function Attachment$1($$anchor, $$props) {
 	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();
+	var span = root_1();
 	$.attribute_effect(span, () => ({
 		...rest,
 		"data-scope": "ai",
@@ -58,32 +58,31 @@ function Attachment$1($$anchor, $$props) {
 		"data-status": status()
 	}));
 	var node = $.child(span);
-	var consequent = ($$anchor) => {
-		var svg = root$1();
-		$.append($$anchor, svg);
-	};
-	var d = $.derived(() => isImage($$props.name));
-	var alternate = ($$anchor) => {
-		var svg_1 = root_1();
-		$.append($$anchor, svg_1);
-	};
-	$.if(node, ($$render) => {
-		if ($.get(d)) $$render(consequent);
-		else $$render(alternate, -1);
-	});
+	{
+		let $0 = $.derived(() => isImage($$props.name) ? "image" : "file");
+		InternalIcon(node, { get name() {
+			return $.get($0);
+		} });
+	}
 	var span_1 = $.sibling(node, 2);
 	var text = $.only_child(span_1, true);
 	var node_1 = $.sibling(span_1, 2);
-	var consequent_1 = ($$anchor) => {
-		var span_2 = root_2();
+	var consequent = ($$anchor) => {
+		var span_2 = root$1();
 		var text_1 = $.only_child(span_2, true);
 		$.template_effect(($0) => $.set_text(text_1, $0), [() => humanSize($$props.size)]);
 		$.append($$anchor, span_2);
 	};
 	$.if(node_1, ($$render) => {
-		if ($$props.size !== void 0) $$render(consequent_1);
+		if ($$props.size !== void 0) $$render(consequent);
 	});
 	var button = $.sibling(node_1, 2);
+	var node_2 = $.child(button);
+	InternalIcon(node_2, {
+		name: "x",
+		size: "sm"
+	});
+	$.reset(button);
 	$.reset(span);
 	$.template_effect(() => {
 		$.set_text(text, $$props.name);
@@ -121,7 +120,7 @@ function Attachments$1($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/ai-attachments/index.ts
-const Attachment = Attachment$1;
-const Attachments = Attachments$1;
+const Attachment = withSelfRoot(Attachment$1);
+const Attachments = withSelfRoot(Attachments$1);
 //#endregion
 export { Attachments as n, Attachment as t };

package/dist/{ai-message-DBs1fdFm.mjs → ai-message-aIyT-RXH.mjs}

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -31,6 +32,6 @@ function AiMessage$1($$anchor, $$props) {
 //#region src/components/ai-message/index.ts
 /** Whose stroke this is — the user's words sit in a recessed bubble,
 * the assistant speaks flat on the paper. */
-const AiMessage = AiMessage$1;
+const AiMessage = withSelfRoot(AiMessage$1);
 //#endregion
 export { AiMessage as t };

package/dist/{ai-prompt-input-vh89e9EX.mjs → ai-prompt-input-jB3RQ9Q8.mjs}

@@ -1,6 +1,8 @@
-import { t as Button } from "./button-BCcX7lHq.mjs";
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
+import { t as InternalIcon } from "./InternalIcon-Clwbj4MY.mjs";
+import { t as Button } from "./button-CghWQD3J.mjs";
 import { Field } from "./components/field/index.mjs";
-import { n as MentionsVessel } from "./mentions-DjhgNRmY.mjs";
+import { n as MentionsVessel } from "./mentions-L0Z29LV8.mjs";
 import { t as useMentions } from "./use-mentions-DeF_38di.mjs";
 import { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
 import { injectComponentStyle } from "@bysages/core";
@@ -26,12 +28,11 @@ var rest_excludes = /* @__PURE__ */ new Set([
 	"footerEnd"
 ]);
 var root = $.from_svg(`<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><rect x="4.5" y="4.5" width="7" height="7" fill="currentColor"></rect></svg>`);
-var root_1 = $.from_svg(`<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"><path d="M8 13V3M3.5 7.5 8 3l4.5 4.5"></path></svg>`);
-var root_2 = $.from_html(`<div data-scope="ai" data-part="prompt-header"><!></div>`);
-var root_3 = $.from_html(`<div data-scope="ai" data-part="prompt-leading"><!></div>`);
-var root_4 = $.from_html(`<div data-scope="ai" data-part="prompt-trailing"><!> <!></div>`);
-var root_5 = $.from_html(`<div data-scope="ai" data-part="prompt-footer"><!> <div data-scope="ai" data-part="prompt-end"><!> <!></div></div>`);
-var root_6 = $.from_html(`<form><!> <div data-scope="ai" data-part="prompt-main"><!> <!> <!> <!></div> <!></form>`);
+var root_1 = $.from_html(`<div data-scope="ai" data-part="prompt-header"><!></div>`);
+var root_2 = $.from_html(`<div data-scope="ai" data-part="prompt-leading"><!></div>`);
+var root_3 = $.from_html(`<div data-scope="ai" data-part="prompt-trailing"><!> <!></div>`);
+var root_4 = $.from_html(`<div data-scope="ai" data-part="prompt-footer"><!> <div data-scope="ai" data-part="prompt-end"><!> <!></div></div>`);
+var root_5 = $.from_html(`<form><!> <div data-scope="ai" data-part="prompt-main"><!> <!> <!> <!></div> <!></form>`);
 function AiPromptInput$1($$anchor, $$props) {
 	$.push($$props, true);
 	const seal = ($$anchor) => {
@@ -76,8 +77,10 @@ function AiPromptInput$1($$anchor, $$props) {
 						return $.get($1);
 					},
 					children: ($$anchor, $$slotProps) => {
-						var svg_1 = root_1();
-						$.append($$anchor, svg_1);
+						InternalIcon($$anchor, {
+							name: "arrow-up",
+							size: "sm"
+						});
 					},
 					$$slots: { default: true }
 				});
@@ -113,7 +116,7 @@ function AiPromptInput$1($$anchor, $$props) {
 		$$props.onValueChange?.("");
 	}
 	const hasFooter = $.derived(() => $$props.footer != null);
-	var form = root_6();
+	var form = root_5();
 	var event_handler = (event) => {
 		event.preventDefault();
 		send();
@@ -126,7 +129,7 @@ function AiPromptInput$1($$anchor, $$props) {
 	}));
 	var node_1 = $.child(form);
 	var consequent_1 = ($$anchor) => {
-		var div = root_2();
+		var div = root_1();
 		var node_2 = $.child(div);
 		$.snippet(node_2, () => $$props.header);
 		$.reset(div);
@@ -138,7 +141,7 @@ function AiPromptInput$1($$anchor, $$props) {
 	var div_1 = $.sibling(node_1, 2);
 	var node_3 = $.child(div_1);
 	var consequent_2 = ($$anchor) => {
-		var div_2 = root_3();
+		var div_2 = root_2();
 		var node_4 = $.child(div_2);
 		$.snippet(node_4, () => $$props.leading);
 		$.reset(div_2);
@@ -151,8 +154,8 @@ function AiPromptInput$1($$anchor, $$props) {
 	$.component(node_5, () => Field.Root, ($$anchor, Field_Root) => {
 		Field_Root($$anchor, {
 			children: ($$anchor, $$slotProps) => {
-				var fragment_3 = $.comment();
-				var node_6 = $.first_child(fragment_3);
+				var fragment_4 = $.comment();
+				var node_6 = $.first_child(fragment_4);
 				{
 					let $0 = $.derived(() => messages().ai.conversation);
 					$.component(node_6, () => Field.Textarea, ($$anchor, Field_Textarea) => {
@@ -191,7 +194,7 @@ function AiPromptInput$1($$anchor, $$props) {
 						});
 					});
 				}
-				$.append($$anchor, fragment_3);
+				$.append($$anchor, fragment_4);
 			},
 			$$slots: { default: true }
 		});
@@ -225,13 +228,13 @@ function AiPromptInput$1($$anchor, $$props) {
 	});
 	var node_8 = $.sibling(node_7, 2);
 	var consequent_6 = ($$anchor) => {
-		var div_3 = root_4();
+		var div_3 = root_3();
 		var node_9 = $.child(div_3);
 		var consequent_4 = ($$anchor) => {
-			var fragment_5 = $.comment();
-			var node_10 = $.first_child(fragment_5);
+			var fragment_6 = $.comment();
+			var node_10 = $.first_child(fragment_6);
 			$.snippet(node_10, () => $$props.trailing);
-			$.append($$anchor, fragment_5);
+			$.append($$anchor, fragment_6);
 		};
 		$.if(node_9, ($$render) => {
 			if ($$props.trailing) $$render(consequent_4);
@@ -252,16 +255,16 @@ function AiPromptInput$1($$anchor, $$props) {
 	$.reset(div_1);
 	var node_12 = $.sibling(div_1, 2);
 	var consequent_8 = ($$anchor) => {
-		var div_4 = root_5();
+		var div_4 = root_4();
 		var node_13 = $.child(div_4);
 		$.snippet(node_13, () => $$props.footer);
 		var div_5 = $.sibling(node_13, 2);
 		var node_14 = $.child(div_5);
 		var consequent_7 = ($$anchor) => {
-			var fragment_7 = $.comment();
-			var node_15 = $.first_child(fragment_7);
+			var fragment_8 = $.comment();
+			var node_15 = $.first_child(fragment_8);
 			$.snippet(node_15, () => $$props.footerEnd);
-			$.append($$anchor, fragment_7);
+			$.append($$anchor, fragment_8);
 		};
 		$.if(node_14, ($$render) => {
 			if ($$props.footerEnd) $$render(consequent_7);
@@ -283,6 +286,6 @@ function AiPromptInput$1($$anchor, $$props) {
 //#region src/components/ai-prompt-input/index.ts
 /** The prompt vessel: the shared field textarea — self-growing on the
 * machine's autoresize — over a footer row carrying the submit seal. */
-const AiPromptInput = AiPromptInput$1;
+const AiPromptInput = withSelfRoot(AiPromptInput$1);
 //#endregion
 export { AiPromptInput as t };

package/dist/{ai-reasoning-C4YsB2hQ.mjs → ai-reasoning-CQx7rye9.mjs}

@@ -1,5 +1,6 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
 import { Collapsible } from "./components/collapsible/index.mjs";
-import { t as ChevronIcon } from "./ChevronIcon-CVJJYda-.mjs";
+import { t as ChevronIcon } from "./ChevronIcon-BrLZJ0NH.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -72,6 +73,6 @@ function AiReasoning$1($$anchor, $$props) {
 //#region src/components/ai-reasoning/index.ts
 /** The model's thought, folded by the shared collapsible in its quiet
 * register. */
-const AiReasoning = AiReasoning$1;
+const AiReasoning = withSelfRoot(AiReasoning$1);
 //#endregion
 export { AiReasoning as t };

package/dist/{ai-response-BPQPjMlC.mjs → ai-response-D_eFsV6G.mjs}

@@ -1,14 +1,22 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
+import { t as iconHtml } from "./icon-lWVQxDG6.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";
 import { renderHtml } from "@tanstack/markdown/html";
 //#region src/components/ai-response/code-copy.ts
-/** The two glyphs a copy affordance needs: the stamp and its
-* confirmation. Inline SVG keeps the enhancement framework-agnostic —
-* it lives beside the renderer's generated code HTML. */
-const COPY_CODE_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
-const COPIED_CODE_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>`;
+/** The two icons a copy affordance needs: the stamp and its confirmation,
+* drawn from the house icon set. Inline SVG keeps the enhancement
+* framework-agnostic — it lives beside the renderer's generated code HTML. */
+const COPY_CODE_ICON = iconHtml("copy", {
+	width: "14",
+	height: "14"
+});
+const COPIED_CODE_ICON = iconHtml("check", {
+	width: "14",
+	height: "14"
+});
 /** How long the confirmation stays before the stamp returns. */
 const REVERT_MS = 1500;
 /** Make sure every fenced block under `host` carries its copy stamp.
@@ -145,6 +153,6 @@ function AiResponse$1($$anchor, $$props) {
 //#endregion
 //#region src/components/ai-response/index.ts
 /** Markdown set on the paper — streaming-safe by construction. */
-const AiResponse = AiResponse$1;
+const AiResponse = withSelfRoot(AiResponse$1);
 //#endregion
 export { AiResponse as t };

package/dist/{ai-source-CvglcFw1.mjs → ai-source-B9ZfhWOl.mjs}

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -72,7 +73,7 @@ function AiSources$1($$anchor, $$props) {
 //#region src/components/ai-source/index.ts
 /** One place the ink came from, and the reading list that gathers
 * them under a response. */
-const AiSource = AiSource$1;
-const AiSources = AiSources$1;
+const AiSource = withSelfRoot(AiSource$1);
+const AiSources = withSelfRoot(AiSources$1);
 //#endregion
 export { AiSources as n, AiSource as t };

package/dist/{ai-suggestion-zGAQ1kkf.mjs → ai-suggestion-CrZ5Ol4-.mjs}

@@ -1,4 +1,5 @@
-import { t as Button } from "./button-BCcX7lHq.mjs";
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
+import { t as Button } from "./button-CghWQD3J.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -33,6 +34,6 @@ function AiSuggestion$1($$anchor, $$props) {
 //#region src/components/ai-suggestion/index.ts
 /** A seal-cut button proposing the next stroke; selection hands back
 * the prompt. */
-const AiSuggestion = AiSuggestion$1;
+const AiSuggestion = withSelfRoot(AiSuggestion$1);
 //#endregion
 export { AiSuggestion as t };

package/dist/{ai-tool-DY_iNbMk.mjs → ai-tool-0vdpM2Aq.mjs}

@@ -1,5 +1,6 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
 import { Collapsible } from "./components/collapsible/index.mjs";
-import { t as ChevronIcon } from "./ChevronIcon-CVJJYda-.mjs";
+import { t as ChevronIcon } from "./ChevronIcon-BrLZJ0NH.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -112,6 +113,6 @@ function AiTool$1($$anchor, $$props) {
 /** A tool call: the shared collapsible as the vessel — the name it
 * was reached by and the state it reached in on the trigger, its
 * input and output folded inside. */
-const AiTool = AiTool$1;
+const AiTool = withSelfRoot(AiTool$1);
 //#endregion
 export { AiTool as t };

package/dist/{alert-Xp8I8IY9.mjs → alert-D9oBDEBE.mjs}

@@ -1,3 +1,4 @@
+import { t as InternalIcon } from "./InternalIcon-Clwbj4MY.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -87,18 +88,18 @@ var rest_excludes$1 = /* @__PURE__ */ new Set([
 	"$$events",
 	"$$legacy"
 ]);
-var root$1 = $.from_html(`<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path></path></svg></span>`);
+var root$1 = $.from_html(`<span><!></span>`);
 function AlertIcon($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("alert");
 	let rest = $.rest_props($$props, rest_excludes$1);
 	const readStatus = getContext("alert:status");
-	const paths = {
-		info: "M12 8v5m0 3v.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z",
-		success: "m4 12.5 5 5L20 6.5",
-		warning: "M12 4 2.5 20h19L12 4Zm0 6v4m0 3v.01",
-		danger: "M6 6l12 12M18 6 6 18",
-		ink: "M12 8v5m0 3v.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z"
+	const statusIcons = {
+		ink: "info",
+		info: "info",
+		success: "circle-check",
+		warning: "triangle-alert",
+		danger: "circle-x"
 	};
 	var span = root$1();
 	$.attribute_effect(span, () => ({
@@ -106,12 +107,14 @@ function AlertIcon($$anchor, $$props) {
 		"data-scope": "alert",
 		"data-part": "icon"
 	}));
-	var svg = $.child(span);
-	$.set_attribute(svg, "width", 16);
-	$.set_attribute(svg, "height", 16);
-	var path = $.only_child(svg);
+	var node = $.child(span);
+	{
+		let $0 = $.derived(() => statusIcons[readStatus()]);
+		InternalIcon(node, { get name() {
+			return $.get($0);
+		} });
+	}
 	$.reset(span);
-	$.template_effect(($0) => $.set_attribute(path, "d", $0), [() => paths[readStatus()]]);
 	$.append($$anchor, span);
 	$.pop();
 }

package/dist/{aspect-ratio-COOgu44A.mjs → aspect-ratio-Ca2csfG1.mjs}

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -31,6 +32,6 @@ function AspectRatio$1($$anchor, $$props) {
 //#region src/components/aspect-ratio/index.ts
 /** A frame that keeps its shape: the box holds the given ratio whatever
 * the width it is dealt, and the child fills the frame it is given. */
-const AspectRatio = AspectRatio$1;
+const AspectRatio = withSelfRoot(AspectRatio$1);
 //#endregion
 export { AspectRatio as t };

package/dist/{autocomplete-Dhuhqp-6.mjs → autocomplete-CS7ZVq_o.mjs}

@@ -1,8 +1,10 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.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";
 import { Portal } from "@ark-ui/svelte/portal";
+import { untrack } from "svelte";
 import { Combobox } from "@ark-ui/svelte/combobox";
 import { useListCollection } from "@ark-ui/svelte/collection";
 //#region src/components/autocomplete/AutoComplete.svelte
@@ -22,10 +24,13 @@ function AutoComplete$1($$anchor, $$props) {
 	injectComponentStyle("combobox");
 	let value = $.prop($$props, "value", 15, ""), items = $.prop($$props, "items", 19, () => []), size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
 	const messages = useComponentMessages();
-	const { collection, filter: filterItems } = useListCollection({
-		initialItems: items(),
+	const { collection, filter: filterItems, set } = useListCollection({
+		initialItems: untrack(() => items()),
 		filter: (item, input) => $$props.filter ? $$props.filter(item, input) : item.toLowerCase().includes(input.toLowerCase())
 	});
+	$.user_effect(() => {
+		set(items());
+	});
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 	$.component(node, () => Combobox.Root, ($$anchor, ArkCombobox_Root) => {
@@ -151,6 +156,6 @@ function AutoComplete$1($$anchor, $$props) {
 /** Free text with suggestions: the reader types anything, the list
 * narrows to help, and both a pick and a custom value end up in the
 * same `value`. A preset of the combobox machinery. */
-const AutoComplete = AutoComplete$1;
+const AutoComplete = withSelfRoot(AutoComplete$1);
 //#endregion
 export { AutoComplete as t };

package/dist/{avatar-group-BgIxNuVj.mjs → avatar-group-BnyaymLu.mjs}

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -31,6 +32,6 @@ function AvatarGroup$1($$anchor, $$props) {
 //#region src/components/avatar-group/index.ts
 /** Avatars overlapping one row, each rimmed in the ground so the pile
 * stays legible. */
-const AvatarGroup = AvatarGroup$1;
+const AvatarGroup = withSelfRoot(AvatarGroup$1);
 //#endregion
 export { AvatarGroup as t };

package/dist/{back-top-rbP0aP47.mjs → back-top-DNwTF40O.mjs}

@@ -1,4 +1,6 @@
-import { t as Button } from "./button-BCcX7lHq.mjs";
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
+import { t as InternalIcon } from "./InternalIcon-Clwbj4MY.mjs";
+import { t as Button } from "./button-CghWQD3J.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -12,8 +14,7 @@ var rest_excludes = /* @__PURE__ */ new Set([
 	"scrollEl",
 	"children"
 ]);
-var root = $.from_svg(`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 14 6-6 6 6"></path></svg>`);
-var root_1 = $.from_html(`<div><!></div>`);
+var root = $.from_html(`<div><!></div>`);
 function BackTop$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("back-top");
@@ -43,7 +44,7 @@ function BackTop$1($$anchor, $$props) {
 			behavior: reduce ? "auto" : "smooth"
 		});
 	};
-	var div = root_1();
+	var div = root();
 	$.attribute_effect(div, () => ({
 		"data-scope": "back-top",
 		"data-part": "root",
@@ -79,8 +80,7 @@ function BackTop$1($$anchor, $$props) {
 					$.append($$anchor, fragment_1);
 				};
 				var alternate = ($$anchor) => {
-					var svg = root();
-					$.append($$anchor, svg);
+					InternalIcon($$anchor, { name: "chevron-up" });
 				};
 				$.if(node_1, ($$render) => {
 					if ($$props.children) $$render(consequent);
@@ -104,6 +104,6 @@ function BackTop$1($$anchor, $$props) {
 * back into an instant jump. The control itself is the shared `Button`
 * (outline, square) — the paper, hairline and halo are its; this family
 * owns only the floating and the entrance. */
-const BackTop = BackTop$1;
+const BackTop = withSelfRoot(BackTop$1);
 //#endregion
 export { BackTop as t };

package/dist/{badge-DKa-8Pv0.mjs → badge-BFZgNgbw.mjs}

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -33,6 +34,6 @@ function Badge$1($$anchor, $$props) {
 //#region src/components/badge/index.ts
 /** A small seal of state. Ink is the neutral tone; the four semantic
 * pigments are fixed. Subtle and outline re-register the same pigment. */
-const Badge = Badge$1;
+const Badge = withSelfRoot(Badge$1);
 //#endregion
 export { Badge as t };

package/dist/{banner-Bj3FFB-O.mjs → banner-Ko97JhS3.mjs}

@@ -1,3 +1,4 @@
+import { t as InternalIcon } from "./InternalIcon-Clwbj4MY.mjs";
 import { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
@@ -88,7 +89,7 @@ var rest_excludes$3 = /* @__PURE__ */ new Set([
 	"type",
 	"aria-label"
 ]);
-var root$3 = $.from_html(`<button><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg></button>`);
+var root$3 = $.from_html(`<button><!></button>`);
 function BannerClose($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("banner");
@@ -102,6 +103,9 @@ function BannerClose($$anchor, $$props) {
 		"data-scope": "banner",
 		"data-part": "close"
 	}), [() => $$props["aria-label"] ?? messages().banner.dismiss]);
+	var node = $.child(button);
+	InternalIcon(node, { name: "x" });
+	$.reset(button);
 	$.append($$anchor, button);
 	$.pop();
 }

package/dist/{block-ui-CxsMoEoa.mjs → block-ui-DTG19xuY.mjs}

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
 import { t as Spinner } from "./Spinner-DGAzGJ_8.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
@@ -45,6 +46,6 @@ function BlockUI$1($$anchor, $$props) {
 //#region src/components/block-ui/index.ts
 /** A curtain over content that must wait: frosted paper and one
 * quiet wheel. */
-const BlockUI = BlockUI$1;
+const BlockUI = withSelfRoot(BlockUI$1);
 //#endregion
 export { BlockUI as t };

package/dist/{browser-gmPTH6mJ.mjs → browser-Dlqvffp6.mjs}

@@ -137,6 +137,7 @@ function BrowserUrlBar($$anchor, $$props) {
 //#region src/components/browser/index.ts
 /** A browser window as a vessel: Root, TitleBar, Dots, UrlBar, Body. */
 const Browser = Object.assign(Browser$1, {
+	Root: Browser$1,
 	TitleBar: BrowserTitleBar,
 	Dots: BrowserDots,
 	UrlBar: BrowserUrlBar,

package/dist/{button-BCcX7lHq.mjs → button-CghWQD3J.mjs}

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -47,6 +48,6 @@ function Button$1($$anchor, $$props) {
 /** The control recipe as a standalone button: the variant chooses how it
 * rests, the tone chooses the pigment. Ink is the solemn default; any
 * action can carry the primary weight. */
-const Button = Button$1;
+const Button = withSelfRoot(Button$1);
 //#endregion
 export { Button as t };

package/dist/{button-group-CVLqPMlR.mjs → button-group-BV7Ces1o.mjs}

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -36,6 +37,6 @@ function ButtonGroup$1($$anchor, $$props) {
 //#region src/components/button-group/index.ts
 /** Buttons fused into one control: the group owns only the joinery, so
 * members keep every variant they were given. */
-const ButtonGroup = ButtonGroup$1;
+const ButtonGroup = withSelfRoot(ButtonGroup$1);
 //#endregion
 export { ButtonGroup as t };