@bysages/svelte 0.3.1 → 0.4.0

package/dist/{descriptions-DgkA_9B-.mjs → descriptions-BeZtDMzt.mjs}

@@ -1,50 +1,19 @@
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
-//#region src/components/descriptions/Descriptions.svelte
-var rest_excludes$3 = /* @__PURE__ */ new Set([
-	"$$slots",
-	"$$events",
-	"$$legacy",
-	"layout",
-	"bordered",
-	"column",
-	"children"
-]);
-var root$3 = $.from_html(`<dl><!></dl>`);
-function Descriptions$1($$anchor, $$props) {
-	$.push($$props, true);
-	injectComponentStyle("descriptions");
-	let layout = $.prop($$props, "layout", 3, "horizontal"), bordered = $.prop($$props, "bordered", 3, false), column = $.prop($$props, "column", 3, 1), rest = $.rest_props($$props, rest_excludes$3);
-	var dl = root$3();
-	$.attribute_effect(dl, ($0) => ({
-		...rest,
-		"data-scope": "descriptions",
-		"data-part": "root",
-		"data-layout": layout(),
-		"data-bordered": bordered() || void 0,
-		[$.STYLE]: { "--bs-desc-columns": $0 }
-	}), [() => String(column())]);
-	var node = $.child(dl);
-	$.snippet(node, () => $$props.children ?? $.noop);
-	$.reset(dl);
-	$.append($$anchor, dl);
-	$.pop();
-}
-//#endregion
 //#region src/components/descriptions/DescriptionsDetail.svelte
-var rest_excludes$2 = /* @__PURE__ */ new Set([
+var rest_excludes$3 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$2 = $.from_html(`<dd><!></dd>`);
+var root$3 = $.from_html(`<dd><!></dd>`);
 function DescriptionsDetail($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("descriptions");
-	let rest = $.rest_props($$props, rest_excludes$2);
-	var dd = root$2();
+	let rest = $.rest_props($$props, rest_excludes$3);
+	var dd = root$3();
 	$.attribute_effect(dd, () => ({
 		...rest,
 		"data-scope": "descriptions",
@@ -58,19 +27,19 @@ function DescriptionsDetail($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/descriptions/DescriptionsItem.svelte
-var rest_excludes$1 = /* @__PURE__ */ new Set([
+var rest_excludes$2 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"span",
 	"children"
 ]);
-var root$1 = $.from_html(`<div><!></div>`);
+var root$2 = $.from_html(`<div><!></div>`);
 function DescriptionsItem($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("descriptions");
-	let span = $.prop($$props, "span", 3, 1), rest = $.rest_props($$props, rest_excludes$1);
-	var div = root$1();
+	let span = $.prop($$props, "span", 3, 1), rest = $.rest_props($$props, rest_excludes$2);
+	var div = root$2();
 	$.attribute_effect(div, ($0) => ({
 		...rest,
 		"data-scope": "descriptions",
@@ -85,18 +54,18 @@ function DescriptionsItem($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/descriptions/DescriptionsTerm.svelte
-var rest_excludes = /* @__PURE__ */ new Set([
+var rest_excludes$1 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root = $.from_html(`<dt><!></dt>`);
+var root$1 = $.from_html(`<dt><!></dt>`);
 function DescriptionsTerm($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("descriptions");
-	let rest = $.rest_props($$props, rest_excludes);
-	var dt = root();
+	let rest = $.rest_props($$props, rest_excludes$1);
+	var dt = root$1();
 	$.attribute_effect(dt, () => ({
 		...rest,
 		"data-scope": "descriptions",
@@ -109,6 +78,84 @@ function DescriptionsTerm($$anchor, $$props) {
 	$.pop();
 }
 //#endregion
+//#region src/components/descriptions/Descriptions.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"layout",
+	"bordered",
+	"column",
+	"items",
+	"children"
+]);
+var root = $.from_html(`<!> <!>`, 1);
+var root_1 = $.from_html(`<dl><!></dl>`);
+function Descriptions$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("descriptions");
+	let layout = $.prop($$props, "layout", 3, "horizontal"), bordered = $.prop($$props, "bordered", 3, false), column = $.prop($$props, "column", 3, 1), rest = $.rest_props($$props, rest_excludes);
+	var dl = root_1();
+	$.attribute_effect(dl, ($0) => ({
+		...rest,
+		"data-scope": "descriptions",
+		"data-part": "root",
+		"data-layout": layout(),
+		"data-bordered": bordered() || void 0,
+		[$.STYLE]: { "--bs-desc-columns": $0 }
+	}), [() => String(column())]);
+	var node = $.child(dl);
+	var consequent = ($$anchor) => {
+		var fragment = $.comment();
+		var node_1 = $.first_child(fragment);
+		$.snippet(node_1, () => $$props.children);
+		$.append($$anchor, fragment);
+	};
+	var alternate = ($$anchor) => {
+		var fragment_1 = $.comment();
+		var node_2 = $.first_child(fragment_1);
+		$.each(node_2, 17, () => $$props.items ?? [], $.index, ($$anchor, item) => {
+			DescriptionsItem($$anchor, {
+				get span() {
+					return $.get(item).span;
+				},
+				children: ($$anchor, $$slotProps) => {
+					var fragment_3 = root();
+					var node_3 = $.first_child(fragment_3);
+					DescriptionsTerm(node_3, {
+						children: ($$anchor, $$slotProps) => {
+							$.next();
+							var text = $.text();
+							$.template_effect(() => $.set_text(text, $.get(item).term));
+							$.append($$anchor, text);
+						},
+						$$slots: { default: true }
+					});
+					DescriptionsDetail($.sibling(node_3, 2), {
+						children: ($$anchor, $$slotProps) => {
+							$.next();
+							var text_1 = $.text();
+							$.template_effect(() => $.set_text(text_1, $.get(item).detail));
+							$.append($$anchor, text_1);
+						},
+						$$slots: { default: true }
+					});
+					$.append($$anchor, fragment_3);
+				},
+				$$slots: { default: true }
+			});
+		});
+		$.append($$anchor, fragment_1);
+	};
+	$.if(node, ($$render) => {
+		if ($$props.children) $$render(consequent);
+		else $$render(alternate, -1);
+	});
+	$.reset(dl);
+	$.append($$anchor, dl);
+	$.pop();
+}
+//#endregion
 //#region src/components/descriptions/index.ts
 /** A ledger laid flat: term and detail pairs in one quiet grid. The
 * horizontal layout reads as a table of two columns; the vertical one

package/dist/{dynamic-input-D1a-5vy-.mjs → dynamic-input-Bt1CeSq4.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 { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
 import { Input } from "./components/input/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
@@ -18,9 +20,8 @@ var rest_excludes = /* @__PURE__ */ new Set([
 	"disabled",
 	"invalid"
 ]);
-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="M18 6 6 18M6 6l12 12"></path></svg>`);
-var root_1 = $.from_html(`<div data-scope="dynamic-input" data-part="row"><!> <!></div>`);
-var root_2 = $.from_html(`<div><!> <div data-scope="dynamic-input" data-part="add"><!></div></div>`);
+var root = $.from_html(`<div data-scope="dynamic-input" data-part="row"><!> <!></div>`);
+var root_1 = $.from_html(`<div><!> <div data-scope="dynamic-input" data-part="add"><!></div></div>`);
 function DynamicInput$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("dynamic-input");
@@ -40,7 +41,7 @@ function DynamicInput$1($$anchor, $$props) {
 	function add() {
 		value([...value(), ""]);
 	}
-	var div = root_2();
+	var div = root_1();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "dynamic-input",
@@ -48,7 +49,7 @@ function DynamicInput$1($$anchor, $$props) {
 	}));
 	var node = $.child(div);
 	$.each(node, 17, value, $.index, ($$anchor, entry, index) => {
-		var div_1 = root_1();
+		var div_1 = root();
 		var node_1 = $.child(div_1);
 		Input(node_1, {
 			get value() {
@@ -86,8 +87,7 @@ function DynamicInput$1($$anchor, $$props) {
 				},
 				onclick: () => remove(index),
 				children: ($$anchor, $$slotProps) => {
-					var svg = root();
-					$.append($$anchor, svg);
+					InternalIcon($$anchor, { name: "x" });
 				},
 				$$slots: { default: true }
 			});
@@ -127,6 +127,6 @@ function DynamicInput$1($$anchor, $$props) {
 /** A column of entry rows: one Input per line, each with a quiet remove
 * seal, and an add row at the tail — the bound array stays the only
 * truth. */
-const DynamicInput = DynamicInput$1;
+const DynamicInput = withSelfRoot(DynamicInput$1);
 //#endregion
 export { DynamicInput as t };

package/dist/{ellipsis-CLaZ9Grh.mjs → ellipsis-CPs9IHbU.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";
@@ -34,6 +35,6 @@ function Ellipsis$1($$anchor, $$props) {
 /** The overflow knife: text cut at one line, or held to N lines. The
 * primitive only draws the cut — reaching the full text (title,
 * tooltip) stays the consumer's decision. */
-const Ellipsis = Ellipsis$1;
+const Ellipsis = withSelfRoot(Ellipsis$1);
 //#endregion
 export { Ellipsis as t };

package/dist/family-CzLaku1F.mjs

@@ -0,0 +1,12 @@
+//#region src/internal/family.ts
+/** Attaches anatomy parts to a callable family facade without letting
+* a parts namespace overwrite the facade's own component metadata. */
+function defineFamily(facade, parts) {
+	return Object.assign(facade, parts);
+}
+/** Gives a single-component family the same component + Root surface. */
+function withSelfRoot(component) {
+	return Object.assign(component, { Root: component });
+}
+//#endregion
+export { withSelfRoot as n, defineFamily as t };

package/dist/{float-button-BLIHnw2u.mjs → float-button-B6J8RQMu.mjs}

@@ -1,4 +1,4 @@
-import { t as Button } from "./button-BCcX7lHq.mjs";
+import { t as Button } from "./button-CghWQD3J.mjs";
 import { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
@@ -26,14 +26,22 @@ var root$1 = $.from_html(`<div><!></div>`);
 function FloatButton$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("float-button");
-	let open = $.prop($$props, "open", 15, false), placement = $.prop($$props, "placement", 3, "bottom-end"), size = $.prop($$props, "size", 3, "lg"), rest = $.rest_props($$props, rest_excludes);
+	let open = $.prop($$props, "open", 15), placement = $.prop($$props, "placement", 3, "bottom-end"), size = $.prop($$props, "size", 3, "lg"), rest = $.rest_props($$props, rest_excludes);
+	let localOpen = $.state(false);
+	const isOpen = $.derived(() => open() ?? $.get(localOpen));
+	function setOpen(value) {
+		if (open() !== void 0) open(value);
+		else $.set(localOpen, value, true);
+	}
 	setContext(FLOAT_BUTTON_KEY, {
 		get open() {
-			return open();
+			return $.get(isOpen);
+		},
+		get size() {
+			return size();
 		},
-		size: size(),
-		toggle: () => open(!open()),
-		close: () => open(false)
+		toggle: () => setOpen(!$.get(isOpen)),
+		close: () => setOpen(false)
 	});
 	var div = root$1();
 	$.attribute_effect(div, () => ({
@@ -41,7 +49,7 @@ function FloatButton$1($$anchor, $$props) {
 		"data-scope": "float-button",
 		"data-part": "root",
 		"data-placement": placement(),
-		"data-state": open() ? "open" : "closed"
+		"data-state": $.get(isOpen) ? "open" : "closed"
 	}));
 	var node = $.child(div);
 	$.snippet(node, () => $$props.children ?? $.noop);

package/dist/{form-BTL9S1gn.mjs → form-CCjPDJmO.mjs}

@@ -1,19 +1,9 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
-import { Field } from "@ark-ui/svelte/field";
-import { getContext, setContext } from "svelte";
+import { getContext, untrack } from "svelte";
 import { createField, createField as useField, createForm, createForm as useForm } from "@tanstack/svelte-form";
-//#region src/components/form/context.ts
-const FORM_KEY = Symbol("bysages-form");
-function provideForm(engine) {
-	setContext(FORM_KEY, engine);
-	return engine;
-}
-function useForm$1() {
-	return getContext(FORM_KEY) ?? null;
-}
-//#endregion
 //#region src/components/form/Form.svelte
 var rest_excludes$1 = /* @__PURE__ */ new Set([
 	"$$slots",
@@ -27,7 +17,7 @@ function Form$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("form");
 	let rest = $.rest_props($$props, rest_excludes$1);
-	provideForm($$props.form);
+	provideForm(untrack(() => $$props.form));
 	var form_1 = root$1();
 	var event_handler = (event) => {
 		event.preventDefault();
@@ -47,6 +37,12 @@ function Form$1($$anchor, $$props) {
 	$.pop();
 }
 //#endregion
+//#region src/components/form/context.ts
+const FORM_KEY = Symbol("bysages-form");
+function useForm$1() {
+	return getContext(FORM_KEY) ?? null;
+}
+//#endregion
 //#region src/components/form/FormField.svelte
 var rest_excludes = /* @__PURE__ */ new Set([
 	"$$slots",
@@ -77,85 +73,68 @@ function FormField$1($$anchor, $$props) {
 		var node = $.child(div);
 		{
 			let $0 = $.derived(() => invalid() || $.get(errors).length > 0);
-			$.component(node, () => Field.Root, ($$anchor, ArkField_Root) => {
-				ArkField_Root($$anchor, {
-					get invalid() {
-						return $.get($0);
-					},
-					get required() {
-						return required();
-					},
-					get disabled() {
-						return disabled();
-					},
-					children: ($$anchor, $$slotProps) => {
-						var fragment = root();
-						var node_1 = $.first_child(fragment);
-						var consequent = ($$anchor) => {
-							var fragment_1 = $.comment();
-							var node_2 = $.first_child(fragment_1);
-							$.component(node_2, () => Field.Label, ($$anchor, ArkField_Label) => {
-								ArkField_Label($$anchor, {
-									children: ($$anchor, $$slotProps) => {
-										$.next();
-										var text = $.text();
-										$.template_effect(() => $.set_text(text, $$props.label));
-										$.append($$anchor, text);
-									},
-									$$slots: { default: true }
-								});
-							});
-							$.append($$anchor, fragment_1);
-						};
-						$.if(node_1, ($$render) => {
-							if ($$props.label) $$render(consequent);
+			ArkField.Root(node, {
+				get invalid() {
+					return $.get($0);
+				},
+				get required() {
+					return required();
+				},
+				get disabled() {
+					return disabled();
+				},
+				children: ($$anchor, $$slotProps) => {
+					var fragment = root();
+					var node_1 = $.first_child(fragment);
+					var consequent = ($$anchor) => {
+						ArkField.Label($$anchor, {
+							children: ($$anchor, $$slotProps) => {
+								$.next();
+								var text = $.text();
+								$.template_effect(() => $.set_text(text, $$props.label));
+								$.append($$anchor, text);
+							},
+							$$slots: { default: true }
 						});
-						var node_3 = $.sibling(node_1, 2);
-						$.snippet(node_3, () => $$props.children ?? $.noop, field);
-						var node_4 = $.sibling(node_3, 2);
-						var consequent_1 = ($$anchor) => {
-							var fragment_3 = $.comment();
-							var node_5 = $.first_child(fragment_3);
-							$.component(node_5, () => Field.HelperText, ($$anchor, ArkField_HelperText) => {
-								ArkField_HelperText($$anchor, {
-									children: ($$anchor, $$slotProps) => {
-										$.next();
-										var text_1 = $.text();
-										$.template_effect(() => $.set_text(text_1, $$props.hint));
-										$.append($$anchor, text_1);
-									},
-									$$slots: { default: true }
-								});
-							});
-							$.append($$anchor, fragment_3);
-						};
-						$.if(node_4, ($$render) => {
-							if ($$props.hint && $.get(errors).length === 0) $$render(consequent_1);
+					};
+					$.if(node_1, ($$render) => {
+						if ($$props.label) $$render(consequent);
+					});
+					var node_2 = $.sibling(node_1, 2);
+					$.snippet(node_2, () => $$props.children ?? $.noop, field);
+					var node_3 = $.sibling(node_2, 2);
+					var consequent_1 = ($$anchor) => {
+						ArkField.HelperText($$anchor, {
+							children: ($$anchor, $$slotProps) => {
+								$.next();
+								var text_1 = $.text();
+								$.template_effect(() => $.set_text(text_1, $$props.hint));
+								$.append($$anchor, text_1);
+							},
+							$$slots: { default: true }
 						});
-						var node_6 = $.sibling(node_4, 2);
-						var consequent_2 = ($$anchor) => {
-							var fragment_5 = $.comment();
-							var node_7 = $.first_child(fragment_5);
-							$.component(node_7, () => Field.ErrorText, ($$anchor, ArkField_ErrorText) => {
-								ArkField_ErrorText($$anchor, {
-									children: ($$anchor, $$slotProps) => {
-										$.next();
-										var text_2 = $.text();
-										$.template_effect(() => $.set_text(text_2, $.get(errors)[0]));
-										$.append($$anchor, text_2);
-									},
-									$$slots: { default: true }
-								});
-							});
-							$.append($$anchor, fragment_5);
-						};
-						$.if(node_6, ($$render) => {
-							if ($.get(errors).length > 0) $$render(consequent_2);
+					};
+					$.if(node_3, ($$render) => {
+						if ($$props.hint && $.get(errors).length === 0) $$render(consequent_1);
+					});
+					var node_4 = $.sibling(node_3, 2);
+					var consequent_2 = ($$anchor) => {
+						ArkField.ErrorText($$anchor, {
+							children: ($$anchor, $$slotProps) => {
+								$.next();
+								var text_2 = $.text();
+								$.template_effect(() => $.set_text(text_2, $.get(errors)[0]));
+								$.append($$anchor, text_2);
+							},
+							$$slots: { default: true }
 						});
-						$.append($$anchor, fragment);
-					},
-					$$slots: { default: true }
-				});
+					};
+					$.if(node_4, ($$render) => {
+						if ($.get(errors).length > 0) $$render(consequent_2);
+					});
+					$.append($$anchor, fragment);
+				},
+				$$slots: { default: true }
 			});
 		}
 		$.reset(div);
@@ -163,7 +142,8 @@ function FormField$1($$anchor, $$props) {
 	};
 	injectComponentStyle("form");
 	let required = $.prop($$props, "required", 3, false), invalid = $.prop($$props, "invalid", 3, false), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes);
-	const engine = $$props.form ?? useForm$1();
+	const injectedForm = untrack(() => useForm$1());
+	const engine = $.derived(() => $$props.form ?? injectedForm);
 	function errorText(error) {
 		if (error == null) return "";
 		if (typeof error === "string") return error;
@@ -171,15 +151,15 @@ function FormField$1($$anchor, $$props) {
 		return String(error);
 	}
 	var fragment_7 = $.comment();
-	var node_8 = $.first_child(fragment_7);
+	var node_5 = $.first_child(fragment_7);
 	var consequent_3 = ($$anchor) => {
 		var fragment_8 = $.comment();
-		var node_9 = $.first_child(fragment_8);
+		var node_6 = $.first_child(fragment_8);
 		{
 			const children = ($$anchor, field = $.noop) => {
 				assemble($$anchor, field);
 			};
-			$.component(node_9, () => engine.Field, ($$anchor, engine_Field) => {
+			$.component(node_6, () => $.get(engine).Field, ($$anchor, engine_Field) => {
 				engine_Field($$anchor, $.spread_props(() => rest, {
 					get name() {
 						return $$props.name;
@@ -194,8 +174,8 @@ function FormField$1($$anchor, $$props) {
 	var alternate = ($$anchor) => {
 		assemble($$anchor, () => void 0);
 	};
-	$.if(node_8, ($$render) => {
-		if (engine) $$render(consequent_3);
+	$.if(node_5, ($$render) => {
+		if ($.get(engine)) $$render(consequent_3);
 		else $$render(alternate, -1);
 	});
 	$.append($$anchor, fragment_7);
@@ -205,8 +185,8 @@ function FormField$1($$anchor, $$props) {
 //#region src/components/form/index.ts
 /** The engine owns the values and the validation; these two are the
 * assembly — one grid, one error routing. */
-const Form = Form$1;
-const FormField = FormField$1;
+const Form = withSelfRoot(Form$1);
+const FormField = withSelfRoot(FormField$1);
 injectComponentStyle("field");
 //#endregion
 export { useField as a, createForm as i, FormField as n, useForm as o, createField as r, Form as t };

package/dist/{grid-DNgTWYSL.mjs → grid-ClJBYO96.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";
@@ -49,6 +50,6 @@ function Grid$1($$anchor, $$props) {
 //#region src/components/grid/index.ts
 /** An alignment lattice: tracks of equal measure, sized by column count
 * — or, with `minChildWidth`, as many tracks as the container fits. */
-const Grid = Grid$1;
+const Grid = withSelfRoot(Grid$1);
 //#endregion
 export { Grid as t };

package/dist/{icon-D7AeDq0M.mjs → icon-DmeRO0e6.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";
@@ -19,8 +20,10 @@ function Icon$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("icon");
 	let size = $.prop($$props, "size", 3, "inherit"), rest = $.rest_props($$props, rest_excludes);
-	const resolved = $$props.glyph ?? ($$props.name && $$props.children == null ? getIcon($$props.name) : void 0);
-	if ($$props.name && $$props.children == null && $$props.glyph == null && !resolved) console.error(`[icons] unknown icon name "${$$props.name}" — not in the wrappers' whitelist; import the glyph from @bysages/icons and pass it as glyph`);
+	const resolved = $.derived(() => $$props.glyph ?? ($$props.name && $$props.children == null ? getIcon($$props.name) : void 0));
+	$.user_effect(() => {
+		if ($$props.name && $$props.children == null && $$props.glyph == null && !$.get(resolved)) console.error(`[icons] unknown icon name "${$$props.name}" — not in the core default registry; pass it explicitly as glyph`);
+	});
 	var span = root_1();
 	$.attribute_effect(span, () => ({
 		...rest,
@@ -40,14 +43,14 @@ function Icon$1($$anchor, $$props) {
 	};
 	var consequent_1 = ($$anchor) => {
 		var svg = root();
-		$.html(svg, () => resolved.body, true);
+		$.html(svg, () => $.get(resolved).body, true);
 		$.reset(svg);
-		$.template_effect(() => $.set_attribute(svg, "viewBox", `0 0 ${resolved.width ?? 24 ?? ""} ${resolved.height ?? 24 ?? ""}`));
+		$.template_effect(() => $.set_attribute(svg, "viewBox", `0 0 ${$.get(resolved).width ?? 24 ?? ""} ${$.get(resolved).height ?? 24 ?? ""}`));
 		$.append($$anchor, svg);
 	};
 	$.if(node, ($$render) => {
 		if ($$props.children) $$render(consequent);
-		else if (resolved) $$render(consequent_1, 1);
+		else if ($.get(resolved)) $$render(consequent_1, 1);
 	});
 	$.reset(span);
 	$.append($$anchor, span);
@@ -57,7 +60,7 @@ function Icon$1($$anchor, $$props) {
 //#region src/components/icon/index.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 the glyph; it ships no set. */
-const Icon = Icon$1;
+* no size of its own. Bring the icon; it ships no set. */
+const Icon = withSelfRoot(Icon$1);
 //#endregion
 export { Icon as t };

package/dist/icon-lWVQxDG6.mjs

@@ -0,0 +1,18 @@
+import { getIcon } from "@bysages/core/icons";
+//#region src/internal/icon.ts
+/** Render a curated core icon as an SVG string, for enhancements that write
+* innerHTML rather than mount elements. */
+function iconHtml(name, attrs = {}) {
+	const icon = getIcon(name);
+	if (!icon) throw new Error(`Unknown icon "${name}" in the curated core registry`);
+	const attributes = {
+		width: String(icon.width),
+		height: String(icon.height),
+		viewBox: `0 0 ${icon.width} ${icon.height}`,
+		"aria-hidden": "true",
+		...attrs
+	};
+	return `<svg${Object.entries(attributes).map(([key, value]) => ` ${key}="${value}"`).join("")}>${icon.body}</svg>`;
+}
+//#endregion
+export { iconHtml as t };

package/dist/id-Alz497yI.mjs

@@ -0,0 +1,7 @@
+//#region src/internal/id.ts
+/** Generates an SSR-stable machine base id while honoring an explicit id. */
+function useElementId(scope, generatedId, explicitId) {
+	return typeof explicitId === "string" && explicitId ? explicitId : `bs-${scope}-${generatedId}`;
+}
+//#endregion
+export { useElementId as t };