@nonoun/native-ai 1.0.10 → 1.0.13

package/dist/register.js

@@ -1,10 +1,10 @@
 import { NButton as e, NContainer as t, NDialog as n, NIcon as r, NListbox as i, NOption as a, NOptionGroup as o, NOptionGroupHeader as s, NSegment as c, NSegmentedControl as l, NSelect as u, NTextarea as d, NToolbar as f, NativeElement as p, PresentController as m, ResizeController as h, VirtualScrollController as g, computed as _, createDisabledEffect as v, define as y, effect as ee, registerIcon as b, signal as x, uid as S } from "@nonoun/native-ui";
-import { Decoration as C, EditorView as w, StateEffect as te, StateField as ne, keymap as re } from "@nonoun/native-code";
-import { json as T } from "@codemirror/lang-json";
-import { linter as ie } from "@codemirror/lint";
+import { Decoration as C, EditorView as w, StateEffect as te, StateField as ne, keymap as T } from "@nonoun/native-code";
+import { json as E } from "@codemirror/lang-json";
+import { linter as re } from "@codemirror/lint";
 import "@nonoun/native-code/register";
-import { Kernel as ae, resetKernel as oe } from "@nonoun/native-ui/kernel";
-var E = new Set([
+import { Kernel as ie, resetKernel as ae } from "@nonoun/native-ui/kernel";
+var D = new Set([
 	"createSurface",
 	"updateComponents",
 	"updateDataModel",
@@ -15,7 +15,7 @@ var E = new Set([
 * Find top-level `{}` blocks using brace-counting with string-escape awareness.
 * Same algorithm as the workbench's `#getEnvelopes()` method.
 */
-function se(e) {
+function oe(e) {
 	let t = [], n = 0, r = -1, i = !1, a = !1;
 	for (let o = 0; o < e.length; o++) {
 		let s = e[o];
@@ -48,8 +48,8 @@ function se(e) {
 * const ext = linter(a2uiLinter);
 * ```
 */
-function ce(e) {
-	let t = e.state.doc.toString(), n = [], r = se(t), i = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), o = [], s = /* @__PURE__ */ new Map();
+function se(e) {
+	let t = e.state.doc.toString(), n = [], r = oe(t), i = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), o = [], s = /* @__PURE__ */ new Map();
 	for (let e of r) {
 		let { from: t, to: r, text: c } = e, l;
 		try {
@@ -73,13 +73,13 @@ function ce(e) {
 			});
 			continue;
 		}
-		let u = Object.keys(l), d = u.find((e) => E.has(e)), f = u.filter((e) => !E.has(e) && e !== "version");
+		let u = Object.keys(l), d = u.find((e) => D.has(e)), f = u.filter((e) => !D.has(e) && e !== "version");
 		if (!d && f.length > 0) {
 			n.push({
 				from: t,
 				to: r,
 				severity: "error",
-				message: `Unknown envelope key: "${f[0]}". Expected one of: ${[...E].join(", ")}`
+				message: `Unknown envelope key: "${f[0]}". Expected one of: ${[...D].join(", ")}`
 			});
 			continue;
 		}
@@ -88,7 +88,7 @@ function ce(e) {
 				from: t,
 				to: r,
 				severity: "error",
-				message: `Missing envelope key. Expected one of: ${[...E].join(", ")}`
+				message: `Missing envelope key. Expected one of: ${[...D].join(", ")}`
 			});
 			continue;
 		}
@@ -150,29 +150,29 @@ function ce(e) {
 	}
 	return n;
 }
-function D(e) {
+function O(e) {
 	return typeof e == "object" && !!e && "path" in e && typeof e.path == "string" && Object.keys(e).length === 1;
 }
-function le(e) {
+function ce(e) {
 	return "createSurface" in e;
 }
-function ue(e) {
+function le(e) {
 	return "updateComponents" in e;
 }
-function de(e) {
+function ue(e) {
 	return "updateDataModel" in e;
 }
-function fe(e) {
+function de(e) {
 	return "deleteSurface" in e;
 }
-function pe(e) {
+function fe(e) {
 	return "requestCatalog" in e;
 }
 /**
 * Parse a raw JSON string into a typed A2UI server message.
 * Returns null if the JSON is not a valid A2UI message.
 */
-function me(e) {
+function pe(e) {
 	try {
 		let t = JSON.parse(e);
 		return "createSurface" in t || "updateComponents" in t || "updateDataModel" in t || "deleteSurface" in t || "requestCatalog" in t ? t : null;
@@ -180,7 +180,121 @@ function me(e) {
 		return null;
 	}
 }
-var he = [
+/**
+* A2UI Component Map
+*
+* Bidirectional mapping between A2UI abstract component types
+* and native-ui concrete HTML/custom element tags.
+*
+* The `ComponentRegistry` class provides a mutable registry with
+* change tracking via a signal. The default singleton (`defaultRegistry`)
+* preserves backward compatibility with existing free-function imports.
+*/
+var me = class e {
+	#e = /* @__PURE__ */ new Map();
+	#t = /* @__PURE__ */ new Map();
+	#n = /* @__PURE__ */ new Map();
+	#r;
+	constructor(e, t) {
+		this.#r = x(0);
+		for (let t of e) this.#i(t);
+		if (t) for (let [e, n] of Object.entries(t)) this.#n.set(e, n);
+	}
+	get version() {
+		return this.#r;
+	}
+	get(e) {
+		return this.#e.get(e);
+	}
+	has(e) {
+		return this.#e.has(e);
+	}
+	get size() {
+		return this.#e.size;
+	}
+	keys() {
+		return this.#e.keys();
+	}
+	values() {
+		return this.#e.values();
+	}
+	entries() {
+		return this.#e.entries();
+	}
+	forEach(e) {
+		this.#e.forEach(e);
+	}
+	[Symbol.iterator]() {
+		return this.#e[Symbol.iterator]();
+	}
+	add(e, t = !0) {
+		this.#i(e), t && this.#r.value++;
+	}
+	update(e, t) {
+		let n = this.#e.get(e);
+		if (!n) return;
+		let r = {
+			...n,
+			...t
+		};
+		this.#e.set(e, r), this.#a(), this.#r.value++;
+	}
+	remove(e) {
+		this.#e.has(e) && (this.#e.delete(e), this.#n.delete(e), this.#a(), this.#r.value++);
+	}
+	setCategory(e, t) {
+		this.#n.set(e, t), this.#r.value++;
+	}
+	toJSON() {
+		let e = Array.from(this.#e.values()), t = {};
+		for (let [e, n] of this.#n) t[e] = n;
+		return {
+			mappings: e,
+			categories: t
+		};
+	}
+	static fromJSON(t) {
+		return new e(t.mappings, t.categories);
+	}
+	clone() {
+		return e.fromJSON(this.toJSON());
+	}
+	resolveNativeTag(e) {
+		return this.#e.get(e) ?? null;
+	}
+	resolveA2UIType(e, t) {
+		let n = t?.["data-a2ui"];
+		if (n && this.#e.has(n)) return n;
+		let r = this.#t.get(e);
+		if (r) return r.a2uiType;
+		if (e === "span") return t?.class?.includes("text"), "Text";
+		if (e === "n-stack") return t?.direction === "row" ? "Row" : "Column";
+		if (e === "div") {
+			if (t?.class?.includes("stack")) return t?.direction === "row" ? "Row" : "Column";
+			let e = t?.style ?? "";
+			return e.includes("flex-direction:column") || e.includes("flex-direction: column") ? "Column" : e.includes("display:flex") || e.includes("display: flex") ? "Row" : "Column";
+		}
+		return e === "img" ? "Image" : e === "video" ? "Video" : e === "audio" ? "AudioPlayer" : /^h[1-6]$/.test(e) ? "Text" : null;
+	}
+	getSupportedTypes() {
+		return Array.from(this.#e.keys());
+	}
+	getComponentCategory(e) {
+		return this.#n.get(e) ?? "other";
+	}
+	getCompatibleTypes(e) {
+		let t = this.getComponentCategory(e);
+		return Array.from(this.#e.keys()).filter((e) => this.getComponentCategory(e) === t);
+	}
+	#i(e) {
+		this.#e.set(e.a2uiType, e), e.nativeTag !== "div" && e.nativeTag !== "span" && !this.#t.has(e.nativeTag) && this.#t.set(e.nativeTag, e);
+	}
+	#a() {
+		this.#t.clear();
+		for (let e of this.#e.values()) e.nativeTag !== "div" && e.nativeTag !== "span" && !this.#t.has(e.nativeTag) && this.#t.set(e.nativeTag, e);
+	}
+};
+const k = new me([
 	{
 		a2uiType: "Text",
 		nativeTag: "span",
@@ -276,24 +390,35 @@ var he = [
 	},
 	{
 		a2uiType: "Row",
-		nativeTag: "div",
+		nativeTag: "n-stack",
 		childStrategy: "children",
-		defaultAttributes: {
-			class: "stack",
-			direction: "row"
-		}
+		defaultAttributes: { direction: "row" }
 	},
 	{
 		a2uiType: "Column",
-		nativeTag: "div",
-		childStrategy: "children",
-		defaultAttributes: { class: "stack" }
+		nativeTag: "n-stack",
+		childStrategy: "children"
 	},
 	{
 		a2uiType: "Card",
 		nativeTag: "n-container",
 		childStrategy: "children"
 	},
+	{
+		a2uiType: "Header",
+		nativeTag: "n-header",
+		childStrategy: "children"
+	},
+	{
+		a2uiType: "Body",
+		nativeTag: "n-body",
+		childStrategy: "children"
+	},
+	{
+		a2uiType: "Footer",
+		nativeTag: "n-footer",
+		childStrategy: "children"
+	},
 	{
 		a2uiType: "Modal",
 		nativeTag: "n-dialog",
@@ -339,15 +464,13 @@ var he = [
 	},
 	{
 		a2uiType: "Badge",
-		nativeTag: "span",
-		childStrategy: "textContent",
-		defaultAttributes: { class: "badge" }
+		nativeTag: "n-badge",
+		childStrategy: "textContent"
 	},
 	{
 		a2uiType: "Avatar",
-		nativeTag: "span",
+		nativeTag: "n-avatar",
 		childStrategy: "none",
-		defaultAttributes: { class: "avatar" },
 		propertyMap: {
 			src: "src",
 			alt: "alt"
@@ -410,68 +533,7 @@ var he = [
 		nativeTag: "n-toast",
 		childStrategy: "textContent"
 	}
-], O = /* @__PURE__ */ new Map(), k = /* @__PURE__ */ new Map();
-for (let e of he) O.set(e.a2uiType, e), e.nativeTag !== "div" && e.nativeTag !== "span" && !k.has(e.nativeTag) && k.set(e.nativeTag, e);
-/** All component mappings, keyed by A2UI type */
-const A = O;
-function j(e) {
-	return O.get(e) ?? null;
-}
-function ge(e, t) {
-	let n = t?.["data-a2ui"];
-	if (n && O.has(n)) return n;
-	let r = k.get(e);
-	if (r) return r.a2uiType;
-	if (e === "span") return t?.class?.includes("text"), "Text";
-	if (e === "div") {
-		if (t?.class?.includes("stack")) return t?.direction === "row" ? "Row" : "Column";
-		let e = t?.style ?? "";
-		return e.includes("flex-direction:column") || e.includes("flex-direction: column") ? "Column" : e.includes("display:flex") || e.includes("display: flex") ? "Row" : "Column";
-	}
-	return e === "img" ? "Image" : e === "video" ? "Video" : e === "audio" ? "AudioPlayer" : /^h[1-6]$/.test(e) ? "Text" : null;
-}
-var _e = {
-	h1: "h1",
-	h2: "h2",
-	h3: "h3",
-	h4: "h4",
-	h5: "h5",
-	heading: "h2",
-	caption: "small",
-	body: "span"
-};
-/**
-* For A2UI Text components, resolve the variant to an HTML tag.
-* Returns 'span' by default.
-*/
-function ve(e) {
-	return e ? _e[e] ?? "span" : "span";
-}
-/**
-* For A2UI DateTimeInput components, resolve enableDate/enableTime to HTML input type.
-*/
-function ye(e, t) {
-	return e && t ? "datetime-local" : t && !e ? "time" : "date";
-}
-var be = {
-	number: "number",
-	obscured: "password",
-	shortText: "text",
-	longText: "text"
-};
-/**
-* For A2UI TextField components, resolve the variant to an HTML input type attribute.
-*/
-function xe(e) {
-	return e ? be[e] ?? "text" : "text";
-}
-/**
-* Get all supported A2UI component types.
-*/
-function M() {
-	return Array.from(O.keys());
-}
-var Se = {
+], {
 	Text: "display",
 	Icon: "display",
 	Image: "display",
@@ -491,6 +553,9 @@ var Se = {
 	Row: "layout",
 	Column: "layout",
 	Card: "container",
+	Header: "container",
+	Body: "container",
+	Footer: "container",
 	Modal: "container",
 	Accordion: "container",
 	AccordionItem: "container",
@@ -502,19 +567,50 @@ var Se = {
 	AudioPlayer: "media",
 	Table: "data",
 	Toast: "feedback"
+});
+function A(e) {
+	return k.resolveNativeTag(e);
+}
+function j(e, t) {
+	return k.resolveA2UIType(e, t);
+}
+function M() {
+	return k.getSupportedTypes();
+}
+var he = {
+	h1: "h1",
+	h2: "h2",
+	h3: "h3",
+	h4: "h4",
+	h5: "h5",
+	heading: "h2",
+	caption: "small",
+	body: "span"
 };
 /**
-* Get the category for an A2UI component type.
+* For A2UI Text components, resolve the variant to an HTML tag.
+* Returns 'span' by default.
+*/
+function ge(e) {
+	return e ? he[e] ?? "span" : "span";
+}
+/**
+* For A2UI DateTimeInput components, resolve enableDate/enableTime to HTML input type.
 */
-function N(e) {
-	return Se[e] ?? "other";
+function _e(e, t) {
+	return e && t ? "datetime-local" : t && !e ? "time" : "date";
 }
+var ve = {
+	number: "number",
+	obscured: "password",
+	shortText: "text",
+	longText: "text"
+};
 /**
-* Get all component types in the same category.
+* For A2UI TextField components, resolve the variant to an HTML input type attribute.
 */
-function Ce(e) {
-	let t = N(e);
-	return Array.from(O.keys()).filter((e) => N(e) === t);
+function ye(e) {
+	return e ? ve[e] ?? "text" : "text";
 }
 /**
 * A2UI Converter
@@ -522,8 +618,12 @@ function Ce(e) {
 * Bidirectional conversion between A2UI flat adjacency lists
 * and native-ui nested UINode trees.
 */
-var we = new Set(/* @__PURE__ */ "id.component.children.child.text.label.variant.disabled.action.accessibility.value.placeholder.min.max.step.url.src.alt.name.fit.justify.align.weight.direction.enableDate.enableTime.options.filterable.displayStyle.validationRegexp.checks.trigger.content.tabs.poster".split("."));
-function P(e, t) {
+var be = new Set(/* @__PURE__ */ "id.component.children.child.text.label.variant.disabled.action.accessibility.value.placeholder.min.max.step.url.src.alt.name.fit.justify.align.weight.direction.enableDate.enableTime.options.filterable.displayStyle.validationRegexp.checks.trigger.content.tabs.poster.header.footer".split(".")), xe = new Set([
+	"Header",
+	"Body",
+	"Footer"
+]);
+function N(e, t) {
 	if (e.length === 0) return {
 		root: {
 			id: "empty-root",
@@ -555,118 +655,118 @@ function P(e, t) {
 		warnings: ["No root component found"],
 		orphans: []
 	};
-	let a = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Map(), s = [], c = t?.surfaceId ?? "default", l = F(i, n, a, o, s, c), u = e.filter((e) => !a.has(e.id)).map((e) => e.id);
-	return u.length > 0 && s.push(`Orphan components not reachable from root: ${u.join(", ")}`), {
-		root: l,
+	let a = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Map(), s = [], c = t?.surfaceId ?? "default", l = t?.registry ? (e) => t.registry.resolveNativeTag(e) : A, u = P(i, n, a, o, s, c, l), d = e.filter((e) => !a.has(e.id)).map((e) => e.id);
+	return d.length > 0 && s.push(`Orphan components not reachable from root: ${d.join(", ")}`), {
+		root: u,
 		bindings: o,
 		warnings: s,
-		orphans: u
+		orphans: d
 	};
 }
-function F(e, t, n, r, i, a) {
+function P(e, t, n, r, i, a, o = A) {
 	if (n.has(e)) return i.push(`Cycle detected at component "${e}"`), {
 		id: `${e}-cycle`,
 		tag: "div",
 		textContent: `[Cycle: ${e}]`
 	};
 	n.add(e);
-	let o = t.get(e);
-	if (!o) return i.push(`Component "${e}" referenced but not found`), {
+	let s = t.get(e);
+	if (!s) return i.push(`Component "${e}" referenced but not found`), {
 		id: e,
 		tag: "div",
 		textContent: `[Missing: ${e}]`
 	};
-	let s = j(o.component);
-	if (!s) return i.push(`Unknown A2UI type "${o.component}" for component "${e}"`), {
+	let c = o(s.component);
+	if (!c) return i.push(`Unknown A2UI type "${s.component}" for component "${e}"`), {
 		id: e,
 		tag: "div",
-		textContent: o.text ?? `[Unknown: ${o.component}]`
+		textContent: s.text ?? `[Unknown: ${s.component}]`
 	};
-	let c = s.nativeTag;
-	o.component === "Text" && o.variant && (c = ve(o.variant));
-	let l = {};
-	if (l["data-a2ui"] = o.component, s.defaultAttributes && Object.assign(l, s.defaultAttributes), o.variant && s.variantMap) {
-		let e = s.variantMap[o.variant];
-		e && (l.variant = e);
-	} else o.variant && o.component !== "Text" && (l.variant = o.variant);
-	if (s.propertyMap) for (let [t, n] of Object.entries(s.propertyMap)) {
-		let i = o[t];
-		if (i !== void 0) if (D(i)) {
+	let l = c.nativeTag;
+	s.component === "Text" && s.variant && (l = ge(s.variant));
+	let u = {};
+	if (u["data-a2ui"] = s.component, c.defaultAttributes && Object.assign(u, c.defaultAttributes), s.variant && c.variantMap) {
+		let e = c.variantMap[s.variant];
+		e && (u.variant = e);
+	} else s.variant && s.component !== "Text" && (u.variant = s.variant);
+	if (c.propertyMap) for (let [t, n] of Object.entries(c.propertyMap)) {
+		let i = s[t];
+		if (i !== void 0) if (O(i)) {
 			let t = r.get(e);
 			t || (t = [], r.set(e, t)), t.push({
 				property: n,
 				path: i.path
 			});
-		} else l[n] = String(i);
+		} else u[n] = String(i);
 	}
-	if (o.disabled && (l.disabled = ""), o.accessibility?.label && (l["aria-label"] = o.accessibility.label), o.component === "TextField") {
-		let e = xe(o.variant);
-		e !== "text" && (l.type = e);
+	if (s.disabled && (u.disabled = ""), s.accessibility?.label && (u["aria-label"] = s.accessibility.label), s.component === "TextField") {
+		let e = ye(s.variant);
+		e !== "text" && (u.type = e);
 	}
-	if (o.component === "DateTimeInput" && (l.type = ye(o.enableDate, o.enableTime)), (o.component === "TextField" || o.component === "DateTimeInput" || o.component === "Slider") && o.label) if (D(o.label)) {
+	if (s.component === "DateTimeInput" && (u.type = _e(s.enableDate, s.enableTime)), (s.component === "TextField" || s.component === "DateTimeInput" || s.component === "Slider") && s.label) if (O(s.label)) {
 		let t = r.get(e);
 		t || (t = [], r.set(e, t)), t.push({
 			property: "aria-label",
-			path: o.label.path
+			path: s.label.path
 		});
-	} else l["aria-label"] = o.label;
-	if (o.component === "Slider" && (o.min !== void 0 && (l.min = String(o.min)), o.max !== void 0 && (l.max = String(o.max))), o.component === "Progress") {
-		let e = parseFloat(l.value ?? "0"), t = parseFloat(l.max ?? "100");
-		l.style = `--n-progress: ${t > 0 ? Math.min(1, Math.max(0, e / t)) : 0}`, l.value && (l["data-value"] = l.value, delete l.value), l.max && (l["data-max"] = l.max, delete l.max);
+	} else u["aria-label"] = s.label;
+	if (s.component === "Slider" && (s.min !== void 0 && (u.min = String(s.min)), s.max !== void 0 && (u.max = String(s.max))), s.component === "Progress") {
+		let e = parseFloat(u.value ?? "0"), t = parseFloat(u.max ?? "100");
+		u.style = `--n-progress: ${t > 0 ? Math.min(1, Math.max(0, e / t)) : 0}`, u.value && (u["data-value"] = u.value, delete u.value), u.max && (u["data-max"] = u.max, delete u.max);
 	}
-	let u;
-	if (o.text !== void 0) if (D(o.text)) {
+	let d;
+	if (s.text !== void 0) if (O(s.text)) {
 		let t = r.get(e);
 		t || (t = [], r.set(e, t)), t.push({
 			property: "textContent",
-			path: o.text.path
+			path: s.text.path
 		});
-	} else u = o.text;
-	for (let [e, t] of Object.entries(o)) we.has(e) || typeof t == "string" && (l[e] = t);
-	let d;
-	o.action?.event && s.actionEvent && (d = { [s.actionEvent]: `a2ui:${a}:${e}:${o.action.event.name}` });
-	let f, p = o.children ?? (o.child ? [o.child] : void 0);
-	if (o.component === "Tabs" && p && p.length > 0) {
-		f = [];
-		let o = [];
-		for (let e = 0; e < p.length; e++) {
-			let s = p[e], c = t.get(s);
-			if (!c) continue;
-			n.add(s);
-			let l = String(c.value ?? c.id ?? `tab-${e}`), u = String(c.label ?? c.text ?? `Tab ${e + 1}`);
-			f.push({
-				id: `${s}-tab`,
+	} else d = s.text;
+	for (let [e, t] of Object.entries(s)) be.has(e) || typeof t == "string" && (u[e] = t);
+	let f;
+	s.action?.event && c.actionEvent && (f = { [c.actionEvent]: `a2ui:${a}:${e}:${s.action.event.name}` });
+	let p, m = s.children ?? (s.child ? [s.child] : void 0);
+	if (s.component === "Tabs" && m && m.length > 0) {
+		p = [];
+		let s = [];
+		for (let e = 0; e < m.length; e++) {
+			let c = m[e], l = t.get(c);
+			if (!l) continue;
+			n.add(c);
+			let u = String(l.value ?? l.id ?? `tab-${e}`), d = String(l.label ?? l.text ?? `Tab ${e + 1}`);
+			p.push({
+				id: `${c}-tab`,
 				tag: "n-tab",
-				attributes: { value: l },
-				textContent: u
+				attributes: { value: u },
+				textContent: d
 			});
-			let d = c.children ?? (c.child ? [c.child] : void 0), m = d ? d.map((e) => F(e, t, n, r, i, a)) : void 0, h = typeof c.text == "string" ? c.text : void 0;
-			o.push({
-				id: `${s}-panel`,
+			let f = l.children ?? (l.child ? [l.child] : void 0), h = f ? f.map((e) => P(e, t, n, r, i, a, o)) : void 0, g = typeof l.text == "string" ? l.text : void 0;
+			s.push({
+				id: `${c}-panel`,
 				tag: "n-tab-panel",
-				attributes: { value: l },
-				...m && m.length > 0 ? { children: m } : {},
-				...h && !m ? { textContent: h } : {}
+				attributes: { value: u },
+				...h && h.length > 0 ? { children: h } : {},
+				...g && !h ? { textContent: g } : {}
 			});
 		}
-		if (f.push({
+		if (p.push({
 			id: `${e}-panels`,
 			tag: "n-tab-panels",
-			children: o
-		}), !l.value && p.length > 0) {
-			let e = t.get(p[0]);
-			l.value = String(e?.value ?? e?.id ?? "tab-0");
+			children: s
+		}), !u.value && m.length > 0) {
+			let e = t.get(m[0]);
+			u.value = String(e?.value ?? e?.id ?? "tab-0");
 		}
-	} else if (o.component === "Select" || o.component === "ChoicePicker") {
-		if (Array.isArray(o.options) && o.options.length > 0) {
-			let e = o.options.map((e) => typeof e == "string" ? {
+	} else if (s.component === "Select" || s.component === "ChoicePicker") {
+		if (Array.isArray(s.options) && s.options.length > 0) {
+			let e = s.options.map((e) => typeof e == "string" ? {
 				value: e,
 				label: e
 			} : e);
-			l.options = JSON.stringify(e), o.label && (l.placeholder = String(o.label));
-		} else if (p && p.length > 0) {
+			u.options = JSON.stringify(e), s.label && (u.placeholder = String(s.label));
+		} else if (m && m.length > 0) {
 			let e = [];
-			for (let r of p) {
+			for (let r of m) {
 				let i = t.get(r);
 				i && i.component === "ListItem" && (n.add(r), e.push({
 					value: String(i.value ?? ""),
@@ -674,95 +774,125 @@ function F(e, t, n, r, i, a) {
 					...i.disabled ? { disabled: !0 } : {}
 				}));
 			}
-			e.length > 0 && (l.options = JSON.stringify(e), o.label && (l.placeholder = String(o.label)));
+			e.length > 0 && (u.options = JSON.stringify(e), s.label && (u.placeholder = String(s.label)));
 		}
-	} else p && p.length > 0 && (f = p.map((e) => F(e, t, n, r, i, a)));
-	if (s.childStrategy === "slot-label" && u && !f) f = [{
+	} else if (s.component === "Card" && m && m.length > 0) if (m.some((e) => {
+		let n = t.get(e);
+		return n ? xe.has(n.component) : !1;
+	})) p = m.map((e) => P(e, t, n, r, i, a, o));
+	else {
+		p = [];
+		let c = s.header ?? s.label;
+		c && p.push({
+			id: `${e}-header`,
+			tag: "n-header",
+			children: [{
+				id: `${e}-header-label`,
+				tag: "span",
+				attributes: { slot: "label" },
+				textContent: c
+			}]
+		});
+		let l = m.map((e) => P(e, t, n, r, i, a, o));
+		p.push({
+			id: `${e}-body`,
+			tag: "n-body",
+			children: l
+		});
+		let u = s.footer;
+		u && p.push({
+			id: `${e}-footer`,
+			tag: "n-footer",
+			textContent: u
+		}), c && (d = void 0);
+	}
+	else m && m.length > 0 && (p = m.map((e) => P(e, t, n, r, i, a, o)));
+	if (c.childStrategy === "slot-label" && d && !p) p = [{
 		id: `${e}-label`,
 		tag: "span",
 		attributes: { slot: "label" },
-		textContent: u
-	}], u = void 0;
-	else if (s.childStrategy === "textContent" && o.label && !u) if (D(o.label)) {
+		textContent: d
+	}], d = void 0;
+	else if (c.childStrategy === "textContent" && s.label && !d) if (O(s.label)) {
 		let t = r.get(e);
 		t || (t = [], r.set(e, t)), t.push({
 			property: "textContent",
-			path: o.label.path
+			path: s.label.path
 		});
-	} else u = o.label;
-	if (o.component === "ListItem" && o.value !== void 0 && (l.value = String(o.value)), o.component === "Image" || o.component === "Video" || o.component === "AudioPlayer") {
-		let t = o.component === "Image" ? "img" : o.component === "Video" ? "video" : "audio", n = {};
+	} else d = s.label;
+	if (s.component === "ListItem" && s.value !== void 0 && (u.value = String(s.value)), s.component === "Image" || s.component === "Video" || s.component === "AudioPlayer") {
+		let t = s.component === "Image" ? "img" : s.component === "Video" ? "video" : "audio", n = {};
 		t !== "img" && (n.controls = "");
 		for (let e of [
 			"src",
 			"alt",
 			"poster"
-		]) l[e] && (n[e] = l[e], delete l[e]);
-		if (o.component === "Image" && o.url !== void 0) {
-			if (D(o.url)) {
+		]) u[e] && (n[e] = u[e], delete u[e]);
+		if (s.component === "Image" && s.url !== void 0) {
+			if (O(s.url)) {
 				let t = r.get(`${e}-inner`);
 				t || (t = [], r.set(`${e}-inner`, t)), t.push({
 					property: "src",
-					path: o.url.path
+					path: s.url.path
 				});
-			} else n.src = o.url;
-			o.alt && (n.alt = o.alt);
+			} else n.src = s.url;
+			s.alt && (n.alt = s.alt);
 		}
-		f = [{
+		p = [{
 			id: `${e}-inner`,
 			tag: t,
 			...Object.keys(n).length > 0 ? { attributes: n } : {}
 		}];
 	}
-	let m = Object.keys(l).length > 0 ? l : void 0;
+	let h = Object.keys(u).length > 0 ? u : void 0;
 	return {
 		id: e,
-		tag: c,
-		...m ? { attributes: m } : {},
-		...u === void 0 ? {} : { textContent: u },
-		...f && f.length > 0 ? { children: f } : {},
-		...d ? { events: d } : {}
+		tag: l,
+		...h ? { attributes: h } : {},
+		...d === void 0 ? {} : { textContent: d },
+		...p && p.length > 0 ? { children: p } : {},
+		...f ? { events: f } : {}
 	};
 }
-function Te(e, t) {
-	let n = [];
-	return I(e, n, t?.surfaceId ?? "default"), n;
+function Se(e, t) {
+	let n = [], r = t?.registry ? (e, n) => t.registry.resolveA2UIType(e, n) : j, i = t?.registry ? (e) => t.registry.resolveNativeTag(e) : A;
+	return F(e, n, t?.surfaceId ?? "default", r, i), n;
 }
-function I(e, t, n) {
-	let r = ge(e.tag, e.attributes);
-	if (!r) {
-		let r = {
+function F(e, t, n, r = j, i = A) {
+	let a = r(e.tag, e.attributes);
+	if (!a) {
+		let a = {
 			id: e.id,
 			component: "Column",
 			...e.children ? { children: e.children.map((e) => e.id) } : {},
 			...e.textContent ? { text: e.textContent } : {}
 		};
-		if (t.push(r), e.children) for (let r of e.children) I(r, t, n);
+		if (t.push(a), e.children) for (let a of e.children) F(a, t, n, r, i);
 		return;
 	}
-	let i = j(r), a = {
+	let o = i(a), s = {
 		id: e.id,
-		component: r
+		component: a
 	};
-	if (e.children && e.children.length > 0) if ((r === "Image" || r === "Video" || r === "AudioPlayer") && e.children.length === 1 && (e.children[0].tag === "img" || e.children[0].tag === "video" || e.children[0].tag === "audio")) {
+	if (e.children && e.children.length > 0) if ((a === "Image" || a === "Video" || a === "AudioPlayer") && e.children.length === 1 && (e.children[0].tag === "img" || e.children[0].tag === "video" || e.children[0].tag === "audio")) {
 		let t = e.children[0];
-		t.attributes?.src && (a.url = t.attributes.src), t.attributes?.alt && (a.alt = t.attributes.alt), t.attributes?.poster && (a.poster = t.attributes.poster);
-	} else if (i?.childStrategy === "slot-label" && e.children.length === 1 && e.children[0].attributes?.slot === "label" && e.children[0].textContent) a.text = e.children[0].textContent;
+		t.attributes?.src && (s.url = t.attributes.src), t.attributes?.alt && (s.alt = t.attributes.alt), t.attributes?.poster && (s.poster = t.attributes.poster);
+	} else if (o?.childStrategy === "slot-label" && e.children.length === 1 && e.children[0].attributes?.slot === "label" && e.children[0].textContent) s.text = e.children[0].textContent;
 	else {
-		a.children = e.children.map((e) => e.id);
-		for (let r of e.children) I(r, t, n);
+		s.children = e.children.map((e) => e.id);
+		for (let a of e.children) F(a, t, n, r, i);
 	}
-	if (e.textContent && (r === "CheckBox" || r === "Switch" || r === "ListItem" ? a.label = e.textContent : a.text = e.textContent), e.attributes) {
-		let t = i?.propertyMap ? L(i.propertyMap) : {};
-		for (let [n, r] of Object.entries(e.attributes)) n === "style" || n === "data-a2ui" || n === "slot" || (t[n] ? a[t[n]] = r : n === "aria-label" ? a.label = r : n === "disabled" && r === "" ? a.disabled = !0 : n === "variant" && (a.variant = (i?.variantMap ? L(i.variantMap) : {})[r] ?? r));
+	if (e.textContent && (a === "CheckBox" || a === "Switch" || a === "ListItem" ? s.label = e.textContent : s.text = e.textContent), e.attributes) {
+		let t = o?.propertyMap ? I(o.propertyMap) : {};
+		for (let [n, r] of Object.entries(e.attributes)) n === "style" || n === "data-a2ui" || n === "slot" || (t[n] ? s[t[n]] = r : n === "aria-label" ? s.label = r : n === "disabled" && r === "" ? s.disabled = !0 : n === "variant" && (s.variant = (o?.variantMap ? I(o.variantMap) : {})[r] ?? r));
 	}
 	if (e.events) for (let [t, n] of Object.entries(e.events)) {
 		let e = n.split(":");
-		e[0] === "a2ui" && e.length >= 4 && (a.action = { event: { name: e[3] } });
+		e[0] === "a2ui" && e.length >= 4 && (s.action = { event: { name: e[3] } });
 	}
-	t.push(a);
+	t.push(s);
 }
-function L(e) {
+function I(e) {
 	let t = {};
 	for (let [n, r] of Object.entries(e)) t[r] = n;
 	return t;
@@ -770,7 +900,7 @@ function L(e) {
 /**
 * Wrap a conversion result as a UIPlan.
 */
-function Ee(e, t = "generated") {
+function Ce(e, t = "generated") {
 	return Object.freeze({
 		id: S("a2ui-plan"),
 		version: 1,
@@ -785,18 +915,18 @@ function Ee(e, t = "generated") {
 * Manages A2UI surface lifecycle: create → updateComponents → updateDataModel → delete.
 * Each surface maps to one UIPlan in the kernel.
 */
-function R(e, t) {
+function L(e, t) {
 	if (!t || t === "/") return e;
-	let n = t.replace(/^\//, "").split("/").map(z), r = e;
+	let n = t.replace(/^\//, "").split("/").map(R), r = e;
 	for (let e of n) {
 		if (typeof r != "object" || !r) return;
 		r = r[e];
 	}
 	return r;
 }
-function De(e, t, n) {
+function we(e, t, n) {
 	if (!t || t === "/") return;
-	let r = t.replace(/^\//, "").split("/").map(z), i = e;
+	let r = t.replace(/^\//, "").split("/").map(R), i = e;
 	for (let e = 0; e < r.length - 1; e++) {
 		let t = r[e];
 		(i[t] == null || typeof i[t] != "object") && (i[t] = {}), i = i[t];
@@ -804,24 +934,25 @@ function De(e, t, n) {
 	let a = r[r.length - 1];
 	n === void 0 ? delete i[a] : i[a] = n;
 }
-function z(e) {
+function R(e) {
 	return e.replace(/~1/g, "/").replace(/~0/g, "~");
 }
-var Oe = class {
+var Te = class {
 	#e;
 	#t;
 	#n;
-	#r = /* @__PURE__ */ new Map();
-	#i = x(0);
-	surfaceCount = _(() => this.#i.value);
-	constructor(e, t, n) {
-		this.#e = e, this.#t = t, this.#n = n ?? null;
+	#r;
+	#i = /* @__PURE__ */ new Map();
+	#a = x(0);
+	surfaceCount = _(() => this.#a.value);
+	constructor(e, t, n, r) {
+		this.#e = e, this.#t = t, this.#n = n ?? null, this.#r = r;
 	}
 	handleMessage(e, t) {
-		le(e) ? this.#a(e, t) : ue(e) ? this.#o(e, t) : de(e) ? this.#l(e) : fe(e) && this.#u(e);
+		ce(e) ? this.#o(e, t) : le(e) ? this.#s(e, t) : ue(e) ? this.#u(e) : de(e) && this.#d(e);
 	}
-	#a(e, t) {
-		let { surfaceId: n, catalogId: r, theme: i } = e.createSurface, a = this.#r.get(n);
+	#o(e, t) {
+		let { surfaceId: n, catalogId: r, theme: i } = e.createSurface, a = this.#i.get(n);
 		if (a) {
 			a.catalogId = r, a.theme = i;
 			return;
@@ -839,10 +970,10 @@ var Oe = class {
 			actionDisposer: null,
 			rendered: !1
 		};
-		this.#r.set(n, o), this.#i.value = this.#r.size;
+		this.#i.set(n, o), this.#a.value = this.#i.size;
 	}
-	#o(e, t) {
-		let { surfaceId: n, components: r } = e.updateComponents, i = this.#r.get(n);
+	#s(e, t) {
+		let { surfaceId: n, components: r } = e.updateComponents, i = this.#i.get(n);
 		i ? t && (i.container = t) : (i = {
 			surfaceId: n,
 			planId: S("a2ui-plan"),
@@ -853,20 +984,23 @@ var Oe = class {
 			bindingDisposers: [],
 			actionDisposer: null,
 			rendered: !1
-		}, this.#r.set(n, i), this.#i.value = this.#r.size), i.rendered ? (this.#c(i, r), i.components = [...r]) : (i.components = [...r], this.#s(i)), i.rendered && this.#n?.(i.surfaceId, i.container);
+		}, this.#i.set(n, i), this.#a.value = this.#i.size), i.rendered ? (this.#l(i, r), i.components = [...r]) : (i.components = [...r], this.#c(i)), i.rendered && this.#n?.(i.surfaceId, i.container);
 	}
-	#s(e) {
-		let t = P(e.components, { surfaceId: e.surfaceId });
+	#c(e) {
+		let t = N(e.components, {
+			surfaceId: e.surfaceId,
+			registry: this.#r
+		});
 		e.bindings = new Map(t.bindings);
-		let n = Ee(t);
+		let n = Ce(t);
 		e.planId = n.id;
 		try {
 			let t = this.#e.executePlan(n, e.container);
-			e.rendered = !0, this.#d(e, t), this.#f(e);
+			e.rendered = !0, this.#f(e, t), this.#p(e);
 		} catch {}
 	}
-	#c(e, t) {
-		let n = Me(e.components, t, e.surfaceId);
+	#l(e, t) {
+		let n = ke(e.components, t, e.surfaceId, this.#r);
 		if (n.length === 0) return;
 		this.#e.patchPlan({
 			planId: e.planId,
@@ -874,45 +1008,48 @@ var Oe = class {
 			source: "generated",
 			timestamp: Date.now()
 		});
-		let r = P(t, { surfaceId: e.surfaceId });
+		let r = N(t, {
+			surfaceId: e.surfaceId,
+			registry: this.#r
+		});
 		e.bindings = new Map(r.bindings);
 		for (let t of e.bindingDisposers) t();
 		e.bindingDisposers = [];
 		let i = this.#e.executor.getElements(e.planId);
-		i && this.#d(e, i);
+		i && this.#f(e, i);
 	}
-	#l(e) {
-		let { surfaceId: t, path: n, value: r } = e.updateDataModel, i = this.#r.get(t);
+	#u(e) {
+		let { surfaceId: t, path: n, value: r } = e.updateDataModel, i = this.#i.get(t);
 		if (!i) return;
 		let a = { ...i.dataModel.value };
-		!n || n === "/" ? i.dataModel.value = r ?? {} : (De(a, n, r), i.dataModel.value = a);
+		!n || n === "/" ? i.dataModel.value = r ?? {} : (we(a, n, r), i.dataModel.value = a);
 	}
-	#u(e) {
-		let { surfaceId: t } = e.deleteSurface, n = this.#r.get(t);
+	#d(e) {
+		let { surfaceId: t } = e.deleteSurface, n = this.#i.get(t);
 		if (n) {
 			n.rendered && this.#e.teardownPlan(n.planId);
 			for (let e of n.bindingDisposers) e();
-			n.bindingDisposers = [], n.actionDisposer?.(), this.#r.delete(t), this.#i.value = this.#r.size;
+			n.bindingDisposers = [], n.actionDisposer?.(), this.#i.delete(t), this.#a.value = this.#i.size;
 		}
 	}
-	#d(e, t) {
+	#f(e, t) {
 		for (let [n, r] of e.bindings) {
 			let i = t.get(n);
 			if (i) for (let t of r) {
 				let n = ee(() => {
-					let n = e.dataModel.value, r = R(n, t.path);
+					let n = e.dataModel.value, r = L(n, t.path);
 					r !== void 0 && (t.property === "textContent" ? i.textContent = String(r) : t.property === "src" || t.property === "alt" || t.property.startsWith("aria-") ? i.setAttribute(t.property, String(r)) : i[t.property] = r);
 				});
 				e.bindingDisposers.push(n);
 			}
 		}
 	}
-	#f(e) {
+	#p(e) {
 		let t = `a2ui:${e.surfaceId}:`;
 		e.actionDisposer = this.#e.bus.on((e) => e.type.startsWith(t), (t) => {
 			let n = t.type.split(":");
 			if (n.length < 4) return;
-			let r = n[2], i = n[3], a = e.components.find((e) => e.id === r)?.action?.event?.context, o = a ? ke(a, e.dataModel.value) : void 0;
+			let r = n[2], i = n[3], a = e.components.find((e) => e.id === r)?.action?.event?.context, o = a ? Ee(a, e.dataModel.value) : void 0;
 			this.#t({ action: {
 				surfaceId: e.surfaceId,
 				sourceComponentId: r,
@@ -923,7 +1060,7 @@ var Oe = class {
 		});
 	}
 	getSurface(e) {
-		let t = this.#r.get(e);
+		let t = this.#i.get(e);
 		return t ? {
 			surfaceId: t.surfaceId,
 			planId: t.planId,
@@ -934,22 +1071,22 @@ var Oe = class {
 		} : null;
 	}
 	getSurfaceIds() {
-		return Array.from(this.#r.keys());
+		return Array.from(this.#i.keys());
 	}
 	getDataModel(e) {
-		return this.#r.get(e)?.dataModel.value ?? null;
+		return this.#i.get(e)?.dataModel.value ?? null;
 	}
 	destroy() {
-		for (let e of this.#r.keys()) this.#u({ deleteSurface: { surfaceId: e } });
+		for (let e of this.#i.keys()) this.#d({ deleteSurface: { surfaceId: e } });
 	}
 };
-function ke(e, t) {
+function Ee(e, t) {
 	let n = {};
-	for (let [r, i] of Object.entries(e)) typeof i == "object" && i && "path" in i ? n[r] = R(t, i.path) : n[r] = i;
+	for (let [r, i] of Object.entries(e)) typeof i == "object" && i && "path" in i ? n[r] = L(t, i.path) : n[r] = i;
 	return n;
 }
 /** A2UI properties that map to HTML attributes on the rendered element. */
-var Ae = [
+var De = [
 	"variant",
 	"placeholder",
 	"name",
@@ -962,92 +1099,95 @@ var Ae = [
 	"fit",
 	"style",
 	"intent"
-], je = ["value"];
-function Me(e, t, n) {
-	let r = /* @__PURE__ */ new Map();
-	for (let t of e) r.set(t.id, t);
+], Oe = ["value"];
+function ke(e, t, n, r) {
 	let i = /* @__PURE__ */ new Map();
-	for (let e of t) i.set(e.id, e);
-	let a = [];
-	for (let [e] of r) i.has(e) || a.push({
+	for (let t of e) i.set(t.id, t);
+	let a = /* @__PURE__ */ new Map();
+	for (let e of t) a.set(e.id, e);
+	let o = [];
+	for (let [e] of i) a.has(e) || o.push({
 		type: "remove",
 		targetId: e
 	});
-	for (let [e, o] of i) if (!r.has(e)) {
-		let r = Ne(e, t);
-		if (r) {
-			let t = P([o], {
+	for (let [e, s] of a) if (!i.has(e)) {
+		let i = Ae(e, t);
+		if (i) {
+			let t = N([s], {
 				surfaceId: n,
-				rootId: e
+				rootId: e,
+				registry: r
 			});
-			a.push({
+			o.push({
 				type: "add",
-				parentId: r,
+				parentId: i,
 				node: t.root
 			});
 		}
 	}
-	for (let [e, o] of i) {
-		let i = r.get(e);
-		if (i) {
-			if (o.component !== i.component) {
-				let r = P(B(e, t), {
+	for (let [e, s] of a) {
+		let a = i.get(e);
+		if (a) {
+			if (s.component !== a.component) {
+				let i = N(z(e, t), {
 					surfaceId: n,
-					rootId: e
+					rootId: e,
+					registry: r
 				});
-				a.push({
+				o.push({
 					type: "replace",
 					targetId: e,
-					node: r.root
+					node: i.root
 				});
 				continue;
 			}
-			if (JSON.stringify(i.children ?? i.child ?? []) !== JSON.stringify(o.children ?? o.child ?? [])) {
-				let r = P(B(e, t), {
+			if (JSON.stringify(a.children ?? a.child ?? []) !== JSON.stringify(s.children ?? s.child ?? [])) {
+				let i = N(z(e, t), {
 					surfaceId: n,
-					rootId: e
+					rootId: e,
+					registry: r
 				});
-				a.push({
+				o.push({
 					type: "replace",
 					targetId: e,
-					node: r.root
+					node: i.root
 				});
 				continue;
 			}
-			o.text !== i.text && typeof o.text == "string" && a.push({
+			s.text !== a.text && typeof s.text == "string" && o.push({
 				type: "set-text",
 				targetId: e,
-				text: o.text
-			}), o.label !== i.label && typeof o.label == "string" && a.push({
+				text: s.text
+			}), s.label !== a.label && typeof s.label == "string" && o.push({
 				type: "set-text",
 				targetId: e,
-				text: o.label
-			}), o.disabled !== i.disabled && (o.disabled ? a.push({
+				text: s.label
+			}), s.disabled !== a.disabled && (s.disabled ? o.push({
 				type: "set-attribute",
 				targetId: e,
 				name: "disabled",
 				value: ""
-			}) : a.push({
+			}) : o.push({
 				type: "remove-attribute",
 				targetId: e,
 				name: "disabled"
 			}));
-			for (let t of Ae) {
-				let n = i[t], r = o[t];
-				r !== n && (r == null || r === !1 ? a.push({
+			for (let t of De) {
+				let n = a[t], r = s[t];
+				r !== n && (r == null || r === !1 ? o.push({
 					type: "remove-attribute",
 					targetId: e,
 					name: t
-				}) : a.push({
+				}) : o.push({
 					type: "set-attribute",
 					targetId: e,
 					name: t,
 					value: String(r)
 				}));
 			}
-			for (let t of je) {
-				let n = i[t], r = o[t];
-				r !== n && r !== void 0 && a.push({
+			for (let t of Oe) {
+				let n = a[t], r = s[t];
+				r !== n && r !== void 0 && o.push({
 					type: "set-property",
 					targetId: e,
 					name: t,
@@ -1056,13 +1196,13 @@ function Me(e, t, n) {
 			}
 		}
 	}
-	return a;
+	return o;
 }
-function Ne(e, t) {
+function Ae(e, t) {
 	for (let n of t) if (n.children?.includes(e) || n.child === e) return n.id;
 	return null;
 }
-function B(e, t) {
+function z(e, t) {
 	let n = /* @__PURE__ */ new Map();
 	for (let e of t) n.set(e.id, e);
 	let r = [], i = /* @__PURE__ */ new Set();
@@ -1077,15 +1217,15 @@ function B(e, t) {
 	}
 	return a(e), r;
 }
-var Pe = class {
+var je = class {
 	#e;
 	#t;
 	constructor(e, t) {
-		this.#t = t ?? {}, this.#e = new Oe(e, (e) => {
+		this.#t = t ?? {}, this.#e = new Te(e, (e) => {
 			this.#t.onClientMessage?.(e);
 		}, (e, t) => {
 			this.#t.onRender?.(e, t);
-		});
+		}, this.#t.registry);
 	}
 	/**
 	* Process a raw A2UI server message.
@@ -1093,7 +1233,7 @@ var Pe = class {
 	* If a container is provided, it is used as the render target for new surfaces.
 	*/
 	receive(e, t) {
-		let n = typeof e == "string" ? me(e) : e;
+		let n = typeof e == "string" ? pe(e) : e;
 		if (!n) {
 			this.#t.onClientMessage?.({ error: {
 				surfaceId: "",
@@ -1102,26 +1242,26 @@ var Pe = class {
 			} });
 			return;
 		}
-		if (pe(n)) {
+		if (fe(n)) {
 			this.#n(n.requestCatalog.surfaceId);
 			return;
 		}
 		this.#e.handleMessage(n, t);
 	}
 	#n(e) {
-		let t = { catalog: {
+		let t = this.#t.registry?.getSupportedTypes() ?? M(), n = { catalog: {
 			...e ? { surfaceId: e } : {},
-			supportedTypes: [...M()],
+			supportedTypes: [...t],
 			version: this.#t.version ?? "0.9"
 		} };
-		this.#t.onClientMessage?.(t);
+		this.#t.onClientMessage?.(n);
 	}
 	/**
 	* Parse a JSON string into a typed A2UI server message.
 	* Returns null if invalid.
 	*/
 	parse(e) {
-		return me(e);
+		return pe(e);
 	}
 	/**
 	* Convert a UIPlan to A2UI updateComponents format.
@@ -1129,11 +1269,12 @@ var Pe = class {
 	emit(e, t) {
 		let n = t ?? e.id, r = {
 			surfaceId: n,
-			version: this.#t.version
+			version: this.#t.version,
+			registry: this.#t.registry
 		};
 		return { updateComponents: {
 			surfaceId: n,
-			components: Te(e.root, r)
+			components: Se(e.root, r)
 		} };
 	}
 	/**
@@ -1155,16 +1296,16 @@ var Pe = class {
 	* Returns the list of A2UI component types supported by this adapter.
 	*/
 	getSupportedTypes() {
-		return M();
+		return this.#t.registry?.getSupportedTypes() ?? M();
 	}
 	destroy() {
 		this.#e.destroy();
 	}
 };
-function Fe(e, t) {
-	return new Pe(e, t);
+function Me(e, t) {
+	return new je(e, t);
 }
-const Ie = [
+const Ne = [
 	{
 		id: "general",
 		label: "General"
@@ -1182,7 +1323,7 @@ const Ie = [
 		label: "Travel",
 		hidden: !0
 	}
-], V = {
+], B = {
 	hello: {
 		label: "Hello World",
 		group: "general",
@@ -1310,24 +1451,33 @@ const Ie = [
 					{
 						id: "root",
 						component: "Card",
-						child: "card-content"
-					},
-					{
-						id: "card-content",
-						component: "Column",
 						children: [
-							"product-name",
-							"product-desc",
-							"product-price",
-							"product-actions"
+							"card-hdr",
+							"card-body",
+							"card-ftr"
 						]
 					},
+					{
+						id: "card-hdr",
+						component: "Header",
+						children: ["product-name"]
+					},
 					{
 						id: "product-name",
 						component: "Text",
 						text: "Premium Widget",
 						variant: "h3"
 					},
+					{
+						id: "card-body",
+						component: "Body",
+						child: "card-content"
+					},
+					{
+						id: "card-content",
+						component: "Column",
+						children: ["product-desc", "product-price"]
+					},
 					{
 						id: "product-desc",
 						component: "Text",
@@ -1339,6 +1489,11 @@ const Ie = [
 						text: "$49.99",
 						variant: "h4"
 					},
+					{
+						id: "card-ftr",
+						component: "Footer",
+						children: ["product-actions"]
+					},
 					{
 						id: "product-actions",
 						component: "Row",
@@ -1952,24 +2107,33 @@ const Ie = [
 						{
 							id: "preview-card",
 							component: "Card",
+							children: ["preview-hdr", "preview-body"]
+						},
+						{
+							id: "preview-hdr",
+							component: "Header",
+							children: ["preview-heading"]
+						},
+						{
+							id: "preview-heading",
+							component: "Text",
+							text: "Preview",
+							variant: "h3"
+						},
+						{
+							id: "preview-body",
+							component: "Body",
 							child: "preview-col"
 						},
 						{
 							id: "preview-col",
 							component: "Column",
 							children: [
-								"preview-heading",
 								"preview-name",
 								"preview-role",
 								"preview-bio"
 							]
 						},
-						{
-							id: "preview-heading",
-							component: "Text",
-							text: "Preview",
-							variant: "h3"
-						},
 						{
 							id: "preview-name",
 							component: "Text",
@@ -2172,21 +2336,17 @@ const Ie = [
 					{
 						id: "root",
 						component: "Card",
-						child: "card-col"
-					},
-					{
-						id: "card-col",
-						component: "Column",
 						children: [
-							"icon-row",
-							"title",
-							"desc",
-							"item-name",
-							"warning",
-							"confirm-field",
-							"actions"
+							"card-hdr",
+							"card-body",
+							"card-ftr"
 						]
 					},
+					{
+						id: "card-hdr",
+						component: "Header",
+						children: ["icon-row", "title"]
+					},
 					{
 						id: "icon-row",
 						component: "Row",
@@ -2203,6 +2363,21 @@ const Ie = [
 						text: "Delete Project?",
 						variant: "h2"
 					},
+					{
+						id: "card-body",
+						component: "Body",
+						child: "card-col"
+					},
+					{
+						id: "card-col",
+						component: "Column",
+						children: [
+							"desc",
+							"item-name",
+							"warning",
+							"confirm-field"
+						]
+					},
 					{
 						id: "desc",
 						component: "Text",
@@ -2235,6 +2410,11 @@ const Ie = [
 						component: "TextField",
 						placeholder: "acme-frontend"
 					},
+					{
+						id: "card-ftr",
+						component: "Footer",
+						children: ["actions"]
+					},
 					{
 						id: "actions",
 						component: "Row",
@@ -2496,13 +2676,28 @@ const Ie = [
 					{
 						id: "cbc-card",
 						component: "Card",
+						children: ["cbc-hdr", "cbc-body"]
+					},
+					{
+						id: "cbc-hdr",
+						component: "Header",
+						children: ["cbc-title"]
+					},
+					{
+						id: "cbc-title",
+						component: "Text",
+						text: "Complete Blood Count (CBC)",
+						variant: "h3"
+					},
+					{
+						id: "cbc-body",
+						component: "Body",
 						child: "cbc-col"
 					},
 					{
 						id: "cbc-col",
 						component: "Column",
 						children: [
-							"cbc-title",
 							"cbc-wbc",
 							"cbc-rbc",
 							"cbc-hgb",
@@ -2510,12 +2705,6 @@ const Ie = [
 							"cbc-plt"
 						]
 					},
-					{
-						id: "cbc-title",
-						component: "Text",
-						text: "Complete Blood Count (CBC)",
-						variant: "h3"
-					},
 					{
 						id: "cbc-wbc",
 						component: "Row",
@@ -2644,13 +2833,28 @@ const Ie = [
 					{
 						id: "metabolic-card",
 						component: "Card",
+						children: ["metabolic-hdr", "metabolic-body"]
+					},
+					{
+						id: "metabolic-hdr",
+						component: "Header",
+						children: ["metabolic-title"]
+					},
+					{
+						id: "metabolic-title",
+						component: "Text",
+						text: "Basic Metabolic Panel (BMP)",
+						variant: "h3"
+					},
+					{
+						id: "metabolic-body",
+						component: "Body",
 						child: "metabolic-col"
 					},
 					{
 						id: "metabolic-col",
 						component: "Column",
 						children: [
-							"metabolic-title",
 							"met-glucose",
 							"met-bun",
 							"met-creat",
@@ -2659,12 +2863,6 @@ const Ie = [
 							"met-k"
 						]
 					},
-					{
-						id: "metabolic-title",
-						component: "Text",
-						text: "Basic Metabolic Panel (BMP)",
-						variant: "h3"
-					},
 					{
 						id: "met-glucose",
 						component: "Row",
@@ -2818,13 +3016,28 @@ const Ie = [
 					{
 						id: "lipid-card",
 						component: "Card",
+						children: ["lipid-hdr", "lipid-body"]
+					},
+					{
+						id: "lipid-hdr",
+						component: "Header",
+						children: ["lipid-title"]
+					},
+					{
+						id: "lipid-title",
+						component: "Text",
+						text: "Lipid Panel",
+						variant: "h3"
+					},
+					{
+						id: "lipid-body",
+						component: "Body",
 						child: "lipid-col"
 					},
 					{
 						id: "lipid-col",
 						component: "Column",
 						children: [
-							"lipid-title",
 							"lip-tc",
 							"lip-ldl",
 							"lip-hdl",
@@ -2832,12 +3045,6 @@ const Ie = [
 							"lipid-note"
 						]
 					},
-					{
-						id: "lipid-title",
-						component: "Text",
-						text: "Lipid Panel",
-						variant: "h3"
-					},
 					{
 						id: "lip-tc",
 						component: "Row",
@@ -3054,16 +3261,12 @@ const Ie = [
 					{
 						id: "vital-hr",
 						component: "Card",
-						child: "hr-col"
+						children: ["hr-hdr", "hr-body"]
 					},
 					{
-						id: "hr-col",
-						component: "Column",
-						children: [
-							"hr-label",
-							"hr-val",
-							"hr-unit"
-						]
+						id: "hr-hdr",
+						component: "Header",
+						children: ["hr-label"]
 					},
 					{
 						id: "hr-label",
@@ -3071,6 +3274,16 @@ const Ie = [
 						text: "Heart Rate",
 						variant: "caption"
 					},
+					{
+						id: "hr-body",
+						component: "Body",
+						child: "hr-col"
+					},
+					{
+						id: "hr-col",
+						component: "Column",
+						children: ["hr-val", "hr-unit"]
+					},
 					{
 						id: "hr-val",
 						component: "Text",
@@ -3086,16 +3299,12 @@ const Ie = [
 					{
 						id: "vital-bp",
 						component: "Card",
-						child: "bp-col"
+						children: ["bp-hdr", "bp-body"]
 					},
 					{
-						id: "bp-col",
-						component: "Column",
-						children: [
-							"bp-label",
-							"bp-val",
-							"bp-unit"
-						]
+						id: "bp-hdr",
+						component: "Header",
+						children: ["bp-label"]
 					},
 					{
 						id: "bp-label",
@@ -3103,6 +3312,16 @@ const Ie = [
 						text: "Blood Pressure",
 						variant: "caption"
 					},
+					{
+						id: "bp-body",
+						component: "Body",
+						child: "bp-col"
+					},
+					{
+						id: "bp-col",
+						component: "Column",
+						children: ["bp-val", "bp-unit"]
+					},
 					{
 						id: "bp-val",
 						component: "Text",
@@ -3118,16 +3337,12 @@ const Ie = [
 					{
 						id: "vital-spo2",
 						component: "Card",
-						child: "spo2-col"
+						children: ["spo2-hdr", "spo2-body"]
 					},
 					{
-						id: "spo2-col",
-						component: "Column",
-						children: [
-							"spo2-label",
-							"spo2-val",
-							"spo2-unit"
-						]
+						id: "spo2-hdr",
+						component: "Header",
+						children: ["spo2-label"]
 					},
 					{
 						id: "spo2-label",
@@ -3135,6 +3350,16 @@ const Ie = [
 						text: "SpO₂",
 						variant: "caption"
 					},
+					{
+						id: "spo2-body",
+						component: "Body",
+						child: "spo2-col"
+					},
+					{
+						id: "spo2-col",
+						component: "Column",
+						children: ["spo2-val", "spo2-unit"]
+					},
 					{
 						id: "spo2-val",
 						component: "Text",
@@ -3150,16 +3375,12 @@ const Ie = [
 					{
 						id: "vital-temp",
 						component: "Card",
-						child: "temp-col"
+						children: ["temp-hdr", "temp-body"]
 					},
 					{
-						id: "temp-col",
-						component: "Column",
-						children: [
-							"temp-label",
-							"temp-val",
-							"temp-unit"
-						]
+						id: "temp-hdr",
+						component: "Header",
+						children: ["temp-label"]
 					},
 					{
 						id: "temp-label",
@@ -3167,6 +3388,16 @@ const Ie = [
 						text: "Temperature",
 						variant: "caption"
 					},
+					{
+						id: "temp-body",
+						component: "Body",
+						child: "temp-col"
+					},
+					{
+						id: "temp-col",
+						component: "Column",
+						children: ["temp-val", "temp-unit"]
+					},
 					{
 						id: "temp-val",
 						component: "Text",
@@ -3182,16 +3413,12 @@ const Ie = [
 					{
 						id: "vital-rr",
 						component: "Card",
-						child: "rr-col"
+						children: ["rr-hdr", "rr-body"]
 					},
 					{
-						id: "rr-col",
-						component: "Column",
-						children: [
-							"rr-label",
-							"rr-val",
-							"rr-unit"
-						]
+						id: "rr-hdr",
+						component: "Header",
+						children: ["rr-label"]
 					},
 					{
 						id: "rr-label",
@@ -3199,6 +3426,16 @@ const Ie = [
 						text: "Resp Rate",
 						variant: "caption"
 					},
+					{
+						id: "rr-body",
+						component: "Body",
+						child: "rr-col"
+					},
+					{
+						id: "rr-col",
+						component: "Column",
+						children: ["rr-val", "rr-unit"]
+					},
 					{
 						id: "rr-val",
 						component: "Text",
@@ -3218,24 +3455,33 @@ const Ie = [
 					{
 						id: "trend-card",
 						component: "Card",
+						children: ["trend-hdr", "trend-body"]
+					},
+					{
+						id: "trend-hdr",
+						component: "Header",
+						children: ["trend-title"]
+					},
+					{
+						id: "trend-title",
+						component: "Text",
+						text: "24h Trends",
+						variant: "h3"
+					},
+					{
+						id: "trend-body",
+						component: "Body",
 						child: "trend-col"
 					},
 					{
 						id: "trend-col",
 						component: "Column",
 						children: [
-							"trend-title",
 							"trend-bp",
 							"trend-hr",
 							"trend-spo2"
 						]
 					},
-					{
-						id: "trend-title",
-						component: "Text",
-						text: "24h Trends",
-						variant: "h3"
-					},
 					{
 						id: "trend-bp",
 						component: "Text",
@@ -3258,16 +3504,12 @@ const Ie = [
 					{
 						id: "alert-card",
 						component: "Card",
-						child: "alert-col"
+						children: ["alert-hdr", "alert-body"]
 					},
 					{
-						id: "alert-col",
-						component: "Column",
-						children: [
-							"alert-title",
-							"alert-1",
-							"alert-2"
-						]
+						id: "alert-hdr",
+						component: "Header",
+						children: ["alert-title"]
 					},
 					{
 						id: "alert-title",
@@ -3275,6 +3517,16 @@ const Ie = [
 						text: "Active Alerts",
 						variant: "h3"
 					},
+					{
+						id: "alert-body",
+						component: "Body",
+						child: "alert-col"
+					},
+					{
+						id: "alert-col",
+						component: "Column",
+						children: ["alert-1", "alert-2"]
+					},
 					{
 						id: "alert-1",
 						component: "Row",
@@ -3391,13 +3643,28 @@ const Ie = [
 					{
 						id: "active-card",
 						component: "Card",
+						children: ["active-hdr", "active-body"]
+					},
+					{
+						id: "active-hdr",
+						component: "Header",
+						children: ["active-title"]
+					},
+					{
+						id: "active-title",
+						component: "Text",
+						text: "Active Medications",
+						variant: "h3"
+					},
+					{
+						id: "active-body",
+						component: "Body",
 						child: "active-col"
 					},
 					{
 						id: "active-col",
 						component: "Column",
 						children: [
-							"active-title",
 							"med-1",
 							"med-2",
 							"med-3",
@@ -3405,12 +3672,6 @@ const Ie = [
 							"med-5"
 						]
 					},
-					{
-						id: "active-title",
-						component: "Text",
-						text: "Active Medications",
-						variant: "h3"
-					},
 					{
 						id: "med-1",
 						component: "Row",
@@ -3548,16 +3809,12 @@ const Ie = [
 					{
 						id: "discontinued-card",
 						component: "Card",
-						child: "disc-col"
+						children: ["disc-hdr", "disc-body"]
 					},
 					{
-						id: "disc-col",
-						component: "Column",
-						children: [
-							"disc-title",
-							"disc-1",
-							"disc-2"
-						]
+						id: "disc-hdr",
+						component: "Header",
+						children: ["disc-title"]
 					},
 					{
 						id: "disc-title",
@@ -3565,6 +3822,16 @@ const Ie = [
 						text: "Recently Discontinued",
 						variant: "h3"
 					},
+					{
+						id: "disc-body",
+						component: "Body",
+						child: "disc-col"
+					},
+					{
+						id: "disc-col",
+						component: "Column",
+						children: ["disc-1", "disc-2"]
+					},
 					{
 						id: "disc-1",
 						component: "Row",
@@ -3604,12 +3871,12 @@ const Ie = [
 					{
 						id: "interaction-card",
 						component: "Card",
-						child: "int-col"
+						children: ["interaction-hdr", "interaction-body"]
 					},
 					{
-						id: "int-col",
-						component: "Column",
-						children: ["int-title", "int-1"]
+						id: "interaction-hdr",
+						component: "Header",
+						children: ["int-title"]
 					},
 					{
 						id: "int-title",
@@ -3617,6 +3884,16 @@ const Ie = [
 						text: "Drug Interactions",
 						variant: "h3"
 					},
+					{
+						id: "interaction-body",
+						component: "Body",
+						child: "int-col"
+					},
+					{
+						id: "int-col",
+						component: "Column",
+						children: ["int-1"]
+					},
 					{
 						id: "int-1",
 						component: "Row",
@@ -3717,24 +3994,33 @@ const Ie = [
 					{
 						id: "patient-card",
 						component: "Card",
+						children: ["patient-hdr", "patient-body"]
+					},
+					{
+						id: "patient-hdr",
+						component: "Header",
+						children: ["patient-title"]
+					},
+					{
+						id: "patient-title",
+						component: "Text",
+						text: "Patient Information",
+						variant: "h3"
+					},
+					{
+						id: "patient-body",
+						component: "Body",
 						child: "patient-col"
 					},
 					{
 						id: "patient-col",
 						component: "Column",
 						children: [
-							"patient-title",
 							"patient-name-row",
 							"patient-dob-row",
 							"patient-insurance"
 						]
 					},
-					{
-						id: "patient-title",
-						component: "Text",
-						text: "Patient Information",
-						variant: "h3"
-					},
 					{
 						id: "patient-name-row",
 						component: "Row",
@@ -3783,24 +4069,33 @@ const Ie = [
 					{
 						id: "refer-card",
 						component: "Card",
+						children: ["refer-hdr", "refer-body"]
+					},
+					{
+						id: "refer-hdr",
+						component: "Header",
+						children: ["refer-title"]
+					},
+					{
+						id: "refer-title",
+						component: "Text",
+						text: "Referral Details",
+						variant: "h3"
+					},
+					{
+						id: "refer-body",
+						component: "Body",
 						child: "refer-col"
 					},
 					{
 						id: "refer-col",
 						component: "Column",
 						children: [
-							"refer-title",
 							"refer-specialty",
 							"refer-provider",
 							"refer-reason"
 						]
 					},
-					{
-						id: "refer-title",
-						component: "Text",
-						text: "Referral Details",
-						variant: "h3"
-					},
 					{
 						id: "refer-specialty",
 						component: "TextField",
@@ -3822,24 +4117,33 @@ const Ie = [
 					{
 						id: "clinical-card",
 						component: "Card",
+						children: ["clinical-hdr", "clinical-body"]
+					},
+					{
+						id: "clinical-hdr",
+						component: "Header",
+						children: ["clinical-title"]
+					},
+					{
+						id: "clinical-title",
+						component: "Text",
+						text: "Clinical Information",
+						variant: "h3"
+					},
+					{
+						id: "clinical-body",
+						component: "Body",
 						child: "clinical-col"
 					},
 					{
 						id: "clinical-col",
 						component: "Column",
 						children: [
-							"clinical-title",
 							"clinical-dx",
 							"clinical-icd",
 							"clinical-notes"
 						]
 					},
-					{
-						id: "clinical-title",
-						component: "Text",
-						text: "Clinical Information",
-						variant: "h3"
-					},
 					{
 						id: "clinical-dx",
 						component: "TextField",
@@ -3948,16 +4252,12 @@ const Ie = [
 					{
 						id: "results-card",
 						component: "Card",
-						child: "results-col"
+						children: ["results-hdr", "results-body"]
 					},
 					{
-						id: "results-col",
-						component: "Column",
-						children: [
-							"results-title",
-							"results-count",
-							"result-list"
-						]
+						id: "results-hdr",
+						component: "Header",
+						children: ["results-title"]
 					},
 					{
 						id: "results-title",
@@ -3965,6 +4265,16 @@ const Ie = [
 						text: "Results for \"type 2 diabetes\"",
 						variant: "h3"
 					},
+					{
+						id: "results-body",
+						component: "Body",
+						child: "results-col"
+					},
+					{
+						id: "results-col",
+						component: "Column",
+						children: ["results-count", "result-list"]
+					},
 					{
 						id: "results-count",
 						component: "Badge",
@@ -4018,27 +4328,39 @@ const Ie = [
 					{
 						id: "detail-card",
 						component: "Card",
+						children: [
+							"detail-hdr",
+							"detail-body",
+							"detail-ftr"
+						]
+					},
+					{
+						id: "detail-hdr",
+						component: "Header",
+						children: ["detail-title"]
+					},
+					{
+						id: "detail-title",
+						component: "Text",
+						text: "Code Detail",
+						variant: "h3"
+					},
+					{
+						id: "detail-body",
+						component: "Body",
 						child: "detail-col"
 					},
 					{
 						id: "detail-col",
 						component: "Column",
 						children: [
-							"detail-title",
 							"detail-code",
 							"detail-desc",
 							"detail-billable",
 							"detail-category",
-							"detail-parent",
-							"detail-actions"
+							"detail-parent"
 						]
 					},
-					{
-						id: "detail-title",
-						component: "Text",
-						text: "Code Detail",
-						variant: "h3"
-					},
 					{
 						id: "detail-code",
 						component: "Row",
@@ -4115,6 +4437,11 @@ const Ie = [
 						component: "Text",
 						text: "IV — Endocrine, nutritional and metabolic diseases (E00-E89)"
 					},
+					{
+						id: "detail-ftr",
+						component: "Footer",
+						children: ["detail-actions"]
+					},
 					{
 						id: "detail-actions",
 						component: "Row",
@@ -4204,13 +4531,28 @@ const Ie = [
 					{
 						id: "demographics-card",
 						component: "Card",
+						children: ["demo-hdr", "demo-body"]
+					},
+					{
+						id: "demo-hdr",
+						component: "Header",
+						children: ["demo-title"]
+					},
+					{
+						id: "demo-title",
+						component: "Text",
+						text: "Demographics",
+						variant: "h3"
+					},
+					{
+						id: "demo-body",
+						component: "Body",
 						child: "demo-col"
 					},
 					{
 						id: "demo-col",
 						component: "Column",
 						children: [
-							"demo-title",
 							"demo-name-row",
 							"demo-dob-row",
 							"demo-address",
@@ -4219,12 +4561,6 @@ const Ie = [
 							"demo-emergency"
 						]
 					},
-					{
-						id: "demo-title",
-						component: "Text",
-						text: "Demographics",
-						variant: "h3"
-					},
 					{
 						id: "demo-name-row",
 						component: "Row",
@@ -4286,24 +4622,33 @@ const Ie = [
 					{
 						id: "insurance-card",
 						component: "Card",
+						children: ["ins-hdr", "ins-body"]
+					},
+					{
+						id: "ins-hdr",
+						component: "Header",
+						children: ["ins-title"]
+					},
+					{
+						id: "ins-title",
+						component: "Text",
+						text: "Insurance",
+						variant: "h3"
+					},
+					{
+						id: "ins-body",
+						component: "Body",
 						child: "ins-col"
 					},
 					{
 						id: "ins-col",
 						component: "Column",
 						children: [
-							"ins-title",
 							"ins-carrier",
 							"ins-id",
 							"ins-group"
 						]
 					},
-					{
-						id: "ins-title",
-						component: "Text",
-						text: "Insurance",
-						variant: "h3"
-					},
 					{
 						id: "ins-carrier",
 						component: "TextField",
@@ -4325,25 +4670,34 @@ const Ie = [
 					{
 						id: "history-card",
 						component: "Card",
+						children: ["hist-hdr", "hist-body"]
+					},
+					{
+						id: "hist-hdr",
+						component: "Header",
+						children: ["hist-title"]
+					},
+					{
+						id: "hist-title",
+						component: "Text",
+						text: "Medical History",
+						variant: "h3"
+					},
+					{
+						id: "hist-body",
+						component: "Body",
 						child: "hist-col"
 					},
 					{
 						id: "hist-col",
 						component: "Column",
 						children: [
-							"hist-title",
 							"hist-conditions",
 							"hist-surgeries",
 							"hist-allergies",
 							"hist-meds"
 						]
 					},
-					{
-						id: "hist-title",
-						component: "Text",
-						text: "Medical History",
-						variant: "h3"
-					},
 					{
 						id: "hist-conditions",
 						component: "TextArea",
@@ -4431,16 +4785,12 @@ const Ie = [
 					{
 						id: "auth-1-card",
 						component: "Card",
-						child: "auth-1-col"
+						children: ["auth-1-hdr", "auth-1-body"]
 					},
 					{
-						id: "auth-1-col",
-						component: "Column",
-						children: [
-							"auth-1-header",
-							"auth-1-details",
-							"auth-1-timeline"
-						]
+						id: "auth-1-hdr",
+						component: "Header",
+						children: ["auth-1-header"]
 					},
 					{
 						id: "auth-1-header",
@@ -4458,6 +4808,16 @@ const Ie = [
 						component: "Badge",
 						text: "Approved"
 					},
+					{
+						id: "auth-1-body",
+						component: "Body",
+						child: "auth-1-col"
+					},
+					{
+						id: "auth-1-col",
+						component: "Column",
+						children: ["auth-1-details", "auth-1-timeline"]
+					},
 					{
 						id: "auth-1-details",
 						component: "Column",
@@ -4537,18 +4897,17 @@ const Ie = [
 					{
 						id: "auth-2-card",
 						component: "Card",
-						child: "auth-2-col"
-					},
-					{
-						id: "auth-2-col",
-						component: "Column",
 						children: [
-							"auth-2-header",
-							"auth-2-details",
-							"auth-2-timeline",
-							"auth-2-actions"
+							"auth-2-hdr",
+							"auth-2-body",
+							"auth-2-ftr"
 						]
 					},
+					{
+						id: "auth-2-hdr",
+						component: "Header",
+						children: ["auth-2-header"]
+					},
 					{
 						id: "auth-2-header",
 						component: "Row",
@@ -4565,6 +4924,16 @@ const Ie = [
 						component: "Badge",
 						text: "Pending Review"
 					},
+					{
+						id: "auth-2-body",
+						component: "Body",
+						child: "auth-2-col"
+					},
+					{
+						id: "auth-2-col",
+						component: "Column",
+						children: ["auth-2-details", "auth-2-timeline"]
+					},
 					{
 						id: "auth-2-details",
 						component: "Column",
@@ -4625,6 +4994,11 @@ const Ie = [
 						text: "Submitted Feb 18 — estimated decision by Feb 25",
 						variant: "caption"
 					},
+					{
+						id: "auth-2-ftr",
+						component: "Footer",
+						children: ["auth-2-actions"]
+					},
 					{
 						id: "auth-2-actions",
 						component: "Row",
@@ -4646,18 +5020,17 @@ const Ie = [
 					{
 						id: "auth-3-card",
 						component: "Card",
-						child: "auth-3-col"
-					},
-					{
-						id: "auth-3-col",
-						component: "Column",
 						children: [
-							"auth-3-header",
-							"auth-3-details",
-							"auth-3-reason",
-							"auth-3-actions"
+							"auth-3-hdr",
+							"auth-3-body",
+							"auth-3-ftr"
 						]
 					},
+					{
+						id: "auth-3-hdr",
+						component: "Header",
+						children: ["auth-3-header"]
+					},
 					{
 						id: "auth-3-header",
 						component: "Row",
@@ -4674,6 +5047,16 @@ const Ie = [
 						component: "Badge",
 						text: "Denied"
 					},
+					{
+						id: "auth-3-body",
+						component: "Body",
+						child: "auth-3-col"
+					},
+					{
+						id: "auth-3-col",
+						component: "Column",
+						children: ["auth-3-details", "auth-3-reason"]
+					},
 					{
 						id: "auth-3-details",
 						component: "Column",
@@ -4714,6 +5097,11 @@ const Ie = [
 						component: "Text",
 						text: "Denial reason: Step therapy not met — must trial methotrexate first. Appeal deadline: Mar 5."
 					},
+					{
+						id: "auth-3-ftr",
+						component: "Footer",
+						children: ["auth-3-actions"]
+					},
 					{
 						id: "auth-3-actions",
 						component: "Row",
@@ -4811,24 +5199,33 @@ const Ie = [
 					{
 						id: "goals-card",
 						component: "Card",
+						children: ["goals-hdr", "goals-body"]
+					},
+					{
+						id: "goals-hdr",
+						component: "Header",
+						children: ["goals-title"]
+					},
+					{
+						id: "goals-title",
+						component: "Text",
+						text: "Treatment Goals",
+						variant: "h3"
+					},
+					{
+						id: "goals-body",
+						component: "Body",
 						child: "goals-col"
 					},
 					{
 						id: "goals-col",
 						component: "Column",
 						children: [
-							"goals-title",
 							"goal-1",
 							"goal-2",
 							"goal-3"
 						]
 					},
-					{
-						id: "goals-title",
-						component: "Text",
-						text: "Treatment Goals",
-						variant: "h3"
-					},
 					{
 						id: "goal-1",
 						component: "Row",
@@ -4910,25 +5307,34 @@ const Ie = [
 					{
 						id: "interventions-card",
 						component: "Card",
+						children: ["interventions-hdr", "interventions-body"]
+					},
+					{
+						id: "interventions-hdr",
+						component: "Header",
+						children: ["int-title"]
+					},
+					{
+						id: "int-title",
+						component: "Text",
+						text: "Interventions",
+						variant: "h3"
+					},
+					{
+						id: "interventions-body",
+						component: "Body",
 						child: "int-col"
 					},
 					{
 						id: "int-col",
 						component: "Column",
 						children: [
-							"int-title",
 							"int-med",
 							"int-diet",
 							"int-exercise",
 							"int-monitor"
 						]
 					},
-					{
-						id: "int-title",
-						component: "Text",
-						text: "Interventions",
-						variant: "h3"
-					},
 					{
 						id: "int-med",
 						component: "Column",
@@ -5005,24 +5411,33 @@ const Ie = [
 					{
 						id: "follow-up-card",
 						component: "Card",
+						children: ["fu-hdr", "fu-body"]
+					},
+					{
+						id: "fu-hdr",
+						component: "Header",
+						children: ["fu-title"]
+					},
+					{
+						id: "fu-title",
+						component: "Text",
+						text: "Follow-Up Schedule",
+						variant: "h3"
+					},
+					{
+						id: "fu-body",
+						component: "Body",
 						child: "fu-col"
 					},
 					{
 						id: "fu-col",
 						component: "Column",
 						children: [
-							"fu-title",
 							"fu-1",
 							"fu-2",
 							"fu-3"
 						]
 					},
-					{
-						id: "fu-title",
-						component: "Text",
-						text: "Follow-Up Schedule",
-						variant: "h3"
-					},
 					{
 						id: "fu-1",
 						component: "Row",
@@ -5075,24 +5490,33 @@ const Ie = [
 					{
 						id: "team-card",
 						component: "Card",
+						children: ["team-hdr", "team-body"]
+					},
+					{
+						id: "team-hdr",
+						component: "Header",
+						children: ["team-title"]
+					},
+					{
+						id: "team-title",
+						component: "Text",
+						text: "Care Team",
+						variant: "h3"
+					},
+					{
+						id: "team-body",
+						component: "Body",
 						child: "team-col"
 					},
 					{
 						id: "team-col",
 						component: "Column",
 						children: [
-							"team-title",
 							"team-pcp",
 							"team-endo",
 							"team-diet"
 						]
 					},
-					{
-						id: "team-title",
-						component: "Text",
-						text: "Care Team",
-						variant: "h3"
-					},
 					{
 						id: "team-pcp",
 						component: "Text",
@@ -5627,6 +6051,11 @@ const Ie = [
 					{
 						id: "summary-card",
 						component: "Card",
+						children: ["summary-body"]
+					},
+					{
+						id: "summary-body",
+						component: "Body",
 						child: "summary-col"
 					},
 					{
@@ -5699,19 +6128,18 @@ const Ie = [
 					},
 					{
 						id: "spa-card",
-						component: "Card",
-						child: "spa-col"
-					},
-					{
-						id: "spa-col",
-						component: "Column",
+						component: "Card",
 						children: [
-							"spa-row",
-							"spa-desc",
-							"spa-slots",
-							"spa-book-btn"
+							"spa-hdr",
+							"spa-body",
+							"spa-ftr"
 						]
 					},
+					{
+						id: "spa-hdr",
+						component: "Header",
+						children: ["spa-row"]
+					},
 					{
 						id: "spa-row",
 						component: "Row",
@@ -5737,6 +6165,16 @@ const Ie = [
 						component: "Badge",
 						text: "Open"
 					},
+					{
+						id: "spa-body",
+						component: "Body",
+						child: "spa-col"
+					},
+					{
+						id: "spa-col",
+						component: "Column",
+						children: ["spa-desc", "spa-slots"]
+					},
 					{
 						id: "spa-desc",
 						component: "Text",
@@ -5780,6 +6218,11 @@ const Ie = [
 						text: "16:30 — Facial Treatment (45 min) · €65",
 						value: "spa-1630"
 					},
+					{
+						id: "spa-ftr",
+						component: "Footer",
+						children: ["spa-book-btn"]
+					},
 					{
 						id: "spa-book-btn",
 						component: "Button",
@@ -5790,17 +6233,17 @@ const Ie = [
 					{
 						id: "pool-card",
 						component: "Card",
-						child: "pool-col"
-					},
-					{
-						id: "pool-col",
-						component: "Column",
 						children: [
-							"pool-row",
-							"pool-desc",
-							"pool-cabana"
+							"pool-hdr",
+							"pool-body",
+							"pool-ftr"
 						]
 					},
+					{
+						id: "pool-hdr",
+						component: "Header",
+						children: ["pool-row"]
+					},
 					{
 						id: "pool-row",
 						component: "Row",
@@ -5826,11 +6269,21 @@ const Ie = [
 						component: "Badge",
 						text: "Open"
 					},
+					{
+						id: "pool-body",
+						component: "Body",
+						child: "pool-desc"
+					},
 					{
 						id: "pool-desc",
 						component: "Text",
 						text: "Infinity pool, heated jacuzzi, private beach access. Pool: 07:00–20:00, Beach: 08:00–sunset."
 					},
+					{
+						id: "pool-ftr",
+						component: "Footer",
+						children: ["pool-cabana"]
+					},
 					{
 						id: "pool-cabana",
 						component: "Row",
@@ -5850,17 +6303,17 @@ const Ie = [
 					{
 						id: "gym-card",
 						component: "Card",
-						child: "gym-col"
-					},
-					{
-						id: "gym-col",
-						component: "Column",
 						children: [
-							"gym-row",
-							"gym-desc",
-							"gym-class"
+							"gym-hdr",
+							"gym-body",
+							"gym-ftr"
 						]
 					},
+					{
+						id: "gym-hdr",
+						component: "Header",
+						children: ["gym-row"]
+					},
 					{
 						id: "gym-row",
 						component: "Row",
@@ -5886,11 +6339,21 @@ const Ie = [
 						component: "Badge",
 						text: "24h Access"
 					},
+					{
+						id: "gym-body",
+						component: "Body",
+						child: "gym-desc"
+					},
 					{
 						id: "gym-desc",
 						component: "Text",
 						text: "Cardio, free weights, yoga studio. Towels and water provided."
 					},
+					{
+						id: "gym-ftr",
+						component: "Footer",
+						children: ["gym-class"]
+					},
 					{
 						id: "gym-class",
 						component: "Row",
@@ -5993,24 +6456,33 @@ const Ie = [
 					{
 						id: "room-1-card",
 						component: "Card",
-						child: "room-1-col"
-					},
-					{
-						id: "room-1-col",
-						component: "Column",
 						children: [
-							"room-1-img",
-							"room-1-info",
-							"room-1-amenities",
-							"room-1-actions"
+							"room-1-hdr",
+							"room-1-body",
+							"room-1-ftr"
 						]
 					},
+					{
+						id: "room-1-hdr",
+						component: "Header",
+						children: ["room-1-img"]
+					},
 					{
 						id: "room-1-img",
 						component: "Image",
 						url: "https://images.unsplash.com/photo-1590490360182-c33d153d16ef?w=600&h=300&fit=crop",
 						alt: "Deluxe Room"
 					},
+					{
+						id: "room-1-body",
+						component: "Body",
+						child: "room-1-col"
+					},
+					{
+						id: "room-1-col",
+						component: "Column",
+						children: ["room-1-info", "room-1-amenities"]
+					},
 					{
 						id: "room-1-info",
 						component: "Row",
@@ -6080,6 +6552,11 @@ const Ie = [
 						component: "Badge",
 						text: "Room Safe"
 					},
+					{
+						id: "room-1-ftr",
+						component: "Footer",
+						children: ["room-1-actions"]
+					},
 					{
 						id: "room-1-actions",
 						component: "Row",
@@ -6101,24 +6578,33 @@ const Ie = [
 					{
 						id: "room-2-card",
 						component: "Card",
-						child: "room-2-col"
-					},
-					{
-						id: "room-2-col",
-						component: "Column",
 						children: [
-							"room-2-img",
-							"room-2-info",
-							"room-2-amenities",
-							"room-2-actions"
+							"room-2-hdr",
+							"room-2-body",
+							"room-2-ftr"
 						]
 					},
+					{
+						id: "room-2-hdr",
+						component: "Header",
+						children: ["room-2-img"]
+					},
 					{
 						id: "room-2-img",
 						component: "Image",
 						url: "https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?w=600&h=300&fit=crop",
 						alt: "Junior Suite"
 					},
+					{
+						id: "room-2-body",
+						component: "Body",
+						child: "room-2-col"
+					},
+					{
+						id: "room-2-col",
+						component: "Column",
+						children: ["room-2-info", "room-2-amenities"]
+					},
 					{
 						id: "room-2-info",
 						component: "Row",
@@ -6194,6 +6680,11 @@ const Ie = [
 						component: "Badge",
 						text: "Lounge Access"
 					},
+					{
+						id: "room-2-ftr",
+						component: "Footer",
+						children: ["room-2-actions"]
+					},
 					{
 						id: "room-2-actions",
 						component: "Row",
@@ -6215,24 +6706,33 @@ const Ie = [
 					{
 						id: "room-3-card",
 						component: "Card",
-						child: "room-3-col"
-					},
-					{
-						id: "room-3-col",
-						component: "Column",
 						children: [
-							"room-3-img",
-							"room-3-info",
-							"room-3-amenities",
-							"room-3-actions"
+							"room-3-hdr",
+							"room-3-body",
+							"room-3-ftr"
 						]
 					},
+					{
+						id: "room-3-hdr",
+						component: "Header",
+						children: ["room-3-img"]
+					},
 					{
 						id: "room-3-img",
 						component: "Image",
 						url: "https://images.unsplash.com/photo-1631049307264-da0ec9d70304?w=600&h=300&fit=crop",
 						alt: "Presidential Suite"
 					},
+					{
+						id: "room-3-body",
+						component: "Body",
+						child: "room-3-col"
+					},
+					{
+						id: "room-3-col",
+						component: "Column",
+						children: ["room-3-info", "room-3-amenities"]
+					},
 					{
 						id: "room-3-info",
 						component: "Row",
@@ -6323,6 +6823,11 @@ const Ie = [
 						component: "Badge",
 						text: "Airport Transfer"
 					},
+					{
+						id: "room-3-ftr",
+						component: "Footer",
+						children: ["room-3-actions"]
+					},
 					{
 						id: "room-3-actions",
 						component: "Row",
@@ -6409,25 +6914,34 @@ const Ie = [
 					{
 						id: "booking-card",
 						component: "Card",
+						children: ["booking-hdr", "booking-body"]
+					},
+					{
+						id: "booking-hdr",
+						component: "Header",
+						children: ["booking-title"]
+					},
+					{
+						id: "booking-title",
+						component: "Text",
+						text: "Booking Summary",
+						variant: "h3"
+					},
+					{
+						id: "booking-body",
+						component: "Body",
 						child: "booking-col"
 					},
 					{
 						id: "booking-col",
 						component: "Column",
 						children: [
-							"booking-title",
 							"booking-room",
 							"booking-dates",
 							"booking-guests",
 							"booking-rate"
 						]
 					},
-					{
-						id: "booking-title",
-						component: "Text",
-						text: "Booking Summary",
-						variant: "h3"
-					},
 					{
 						id: "booking-room",
 						component: "Row",
@@ -6491,25 +7005,34 @@ const Ie = [
 					{
 						id: "guest-card",
 						component: "Card",
+						children: ["guest-hdr", "guest-body"]
+					},
+					{
+						id: "guest-hdr",
+						component: "Header",
+						children: ["guest-title"]
+					},
+					{
+						id: "guest-title",
+						component: "Text",
+						text: "Guest Details",
+						variant: "h3"
+					},
+					{
+						id: "guest-body",
+						component: "Body",
 						child: "guest-col"
 					},
 					{
 						id: "guest-col",
 						component: "Column",
 						children: [
-							"guest-title",
 							"guest-name-row",
 							"guest-email",
 							"guest-phone",
 							"guest-requests"
 						]
 					},
-					{
-						id: "guest-title",
-						component: "Text",
-						text: "Guest Details",
-						variant: "h3"
-					},
 					{
 						id: "guest-name-row",
 						component: "Row",
@@ -6550,25 +7073,34 @@ const Ie = [
 					{
 						id: "extras-card",
 						component: "Card",
+						children: ["extras-hdr", "extras-body"]
+					},
+					{
+						id: "extras-hdr",
+						component: "Header",
+						children: ["extras-title"]
+					},
+					{
+						id: "extras-title",
+						component: "Text",
+						text: "Add-ons",
+						variant: "h3"
+					},
+					{
+						id: "extras-body",
+						component: "Body",
 						child: "extras-col"
 					},
 					{
 						id: "extras-col",
 						component: "Column",
 						children: [
-							"extras-title",
 							"extra-breakfast",
 							"extra-parking",
 							"extra-transfer",
 							"extra-late"
 						]
 					},
-					{
-						id: "extras-title",
-						component: "Text",
-						text: "Add-ons",
-						variant: "h3"
-					},
 					{
 						id: "extra-breakfast",
 						component: "CheckBox",
@@ -6596,6 +7128,11 @@ const Ie = [
 					{
 						id: "total-card",
 						component: "Card",
+						children: ["total-body"]
+					},
+					{
+						id: "total-body",
+						component: "Body",
 						child: "total-col"
 					},
 					{
@@ -6722,12 +7259,12 @@ const Ie = [
 					{
 						id: "msg-1",
 						component: "Card",
-						child: "msg-1-col"
+						children: ["msg-1-hdr", "msg-1-body"]
 					},
 					{
-						id: "msg-1-col",
-						component: "Column",
-						children: ["msg-1-sender", "msg-1-text"]
+						id: "msg-1-hdr",
+						component: "Header",
+						children: ["msg-1-sender"]
 					},
 					{
 						id: "msg-1-sender",
@@ -6735,6 +7272,11 @@ const Ie = [
 						text: "Concierge · 09:15",
 						variant: "caption"
 					},
+					{
+						id: "msg-1-body",
+						component: "Body",
+						child: "msg-1-text"
+					},
 					{
 						id: "msg-1-text",
 						component: "Text",
@@ -6743,12 +7285,12 @@ const Ie = [
 					{
 						id: "msg-2",
 						component: "Card",
-						child: "msg-2-col"
+						children: ["msg-2-hdr", "msg-2-body"]
 					},
 					{
-						id: "msg-2-col",
-						component: "Column",
-						children: ["msg-2-sender", "msg-2-text"]
+						id: "msg-2-hdr",
+						component: "Header",
+						children: ["msg-2-sender"]
 					},
 					{
 						id: "msg-2-sender",
@@ -6756,6 +7298,11 @@ const Ie = [
 						text: "You · 09:20",
 						variant: "caption"
 					},
+					{
+						id: "msg-2-body",
+						component: "Body",
+						child: "msg-2-text"
+					},
 					{
 						id: "msg-2-text",
 						component: "Text",
@@ -6764,12 +7311,12 @@ const Ie = [
 					{
 						id: "msg-3",
 						component: "Card",
-						child: "msg-3-col"
+						children: ["msg-3-hdr", "msg-3-body"]
 					},
 					{
-						id: "msg-3-col",
-						component: "Column",
-						children: ["msg-3-sender", "msg-3-text"]
+						id: "msg-3-hdr",
+						component: "Header",
+						children: ["msg-3-sender"]
 					},
 					{
 						id: "msg-3-sender",
@@ -6777,6 +7324,11 @@ const Ie = [
 						text: "Concierge · 09:22",
 						variant: "caption"
 					},
+					{
+						id: "msg-3-body",
+						component: "Body",
+						child: "msg-3-text"
+					},
 					{
 						id: "msg-3-text",
 						component: "Text",
@@ -6790,29 +7342,39 @@ const Ie = [
 					{
 						id: "option-1",
 						component: "Card",
-						child: "opt-1-col"
-					},
-					{
-						id: "opt-1-col",
-						component: "Column",
 						children: [
-							"opt-1-name",
-							"opt-1-detail",
-							"opt-1-btn"
+							"opt-1-hdr",
+							"opt-1-body",
+							"opt-1-ftr"
 						]
 					},
+					{
+						id: "opt-1-hdr",
+						component: "Header",
+						children: ["opt-1-name"]
+					},
 					{
 						id: "opt-1-name",
 						component: "Text",
 						text: "Sunset Catamaran Cruise",
 						variant: "h4"
 					},
+					{
+						id: "opt-1-body",
+						component: "Body",
+						child: "opt-1-detail"
+					},
 					{
 						id: "opt-1-detail",
 						component: "Text",
 						text: "17:30–19:30 · Includes drinks & canapés · €85/person",
 						variant: "caption"
 					},
+					{
+						id: "opt-1-ftr",
+						component: "Footer",
+						children: ["opt-1-btn"]
+					},
 					{
 						id: "opt-1-btn",
 						component: "Button",
@@ -6823,29 +7385,39 @@ const Ie = [
 					{
 						id: "option-2",
 						component: "Card",
-						child: "opt-2-col"
-					},
-					{
-						id: "opt-2-col",
-						component: "Column",
 						children: [
-							"opt-2-name",
-							"opt-2-detail",
-							"opt-2-btn"
+							"opt-2-hdr",
+							"opt-2-body",
+							"opt-2-ftr"
 						]
 					},
+					{
+						id: "opt-2-hdr",
+						component: "Header",
+						children: ["opt-2-name"]
+					},
 					{
 						id: "opt-2-name",
 						component: "Text",
 						text: "Private Yacht Charter",
 						variant: "h4"
 					},
+					{
+						id: "opt-2-body",
+						component: "Body",
+						child: "opt-2-detail"
+					},
 					{
 						id: "opt-2-detail",
 						component: "Text",
 						text: "17:00–20:00 · Private crew, dinner, champagne · €450 (up to 6 guests)",
 						variant: "caption"
 					},
+					{
+						id: "opt-2-ftr",
+						component: "Footer",
+						children: ["opt-2-btn"]
+					},
 					{
 						id: "opt-2-btn",
 						component: "Button",
@@ -6966,13 +7538,28 @@ const Ie = [
 					{
 						id: "charges-card",
 						component: "Card",
+						children: ["charges-hdr", "charges-body"]
+					},
+					{
+						id: "charges-hdr",
+						component: "Header",
+						children: ["charges-title"]
+					},
+					{
+						id: "charges-title",
+						component: "Text",
+						text: "Folio Summary",
+						variant: "h3"
+					},
+					{
+						id: "charges-body",
+						component: "Body",
 						child: "charges-col"
 					},
 					{
 						id: "charges-col",
 						component: "Column",
 						children: [
-							"charges-title",
 							"charge-room",
 							"charge-spa",
 							"charge-dining",
@@ -6984,12 +7571,6 @@ const Ie = [
 							"charge-total"
 						]
 					},
-					{
-						id: "charges-title",
-						component: "Text",
-						text: "Folio Summary",
-						variant: "h3"
-					},
 					{
 						id: "charge-room",
 						component: "Row",
@@ -7112,16 +7693,12 @@ const Ie = [
 					{
 						id: "payment-card",
 						component: "Card",
-						child: "payment-col"
+						children: ["payment-hdr", "payment-body"]
 					},
 					{
-						id: "payment-col",
-						component: "Column",
-						children: [
-							"payment-title",
-							"payment-method",
-							"payment-email"
-						]
+						id: "payment-hdr",
+						component: "Header",
+						children: ["payment-title"]
 					},
 					{
 						id: "payment-title",
@@ -7129,6 +7706,16 @@ const Ie = [
 						text: "Payment",
 						variant: "h3"
 					},
+					{
+						id: "payment-body",
+						component: "Body",
+						child: "payment-col"
+					},
+					{
+						id: "payment-col",
+						component: "Column",
+						children: ["payment-method", "payment-email"]
+					},
 					{
 						id: "payment-method",
 						component: "Row",
@@ -7153,12 +7740,12 @@ const Ie = [
 					{
 						id: "feedback-card",
 						component: "Card",
-						child: "feedback-col"
+						children: ["feedback-hdr", "feedback-body"]
 					},
 					{
-						id: "feedback-col",
-						component: "Column",
-						children: ["feedback-title", "feedback-q"]
+						id: "feedback-hdr",
+						component: "Header",
+						children: ["feedback-title"]
 					},
 					{
 						id: "feedback-title",
@@ -7166,6 +7753,11 @@ const Ie = [
 						text: "How was your stay?",
 						variant: "h3"
 					},
+					{
+						id: "feedback-body",
+						component: "Body",
+						child: "feedback-q"
+					},
 					{
 						id: "feedback-q",
 						component: "TextArea",
@@ -7230,12 +7822,12 @@ const Ie = [
 					{
 						id: "beach-card",
 						component: "Card",
-						child: "beach-col"
+						children: ["beach-hdr", "beach-body"]
 					},
 					{
-						id: "beach-col",
-						component: "Column",
-						children: ["beach-title", "beach-list"]
+						id: "beach-hdr",
+						component: "Header",
+						children: ["beach-title"]
 					},
 					{
 						id: "beach-title",
@@ -7243,6 +7835,11 @@ const Ie = [
 						text: "Beaches & Nature",
 						variant: "h3"
 					},
+					{
+						id: "beach-body",
+						component: "Body",
+						child: "beach-list"
+					},
 					{
 						id: "beach-list",
 						component: "Column",
@@ -7336,12 +7933,12 @@ const Ie = [
 					{
 						id: "culture-card",
 						component: "Card",
-						child: "culture-col"
+						children: ["culture-hdr", "culture-body"]
 					},
 					{
-						id: "culture-col",
-						component: "Column",
-						children: ["culture-title", "culture-list"]
+						id: "culture-hdr",
+						component: "Header",
+						children: ["culture-title"]
 					},
 					{
 						id: "culture-title",
@@ -7349,6 +7946,11 @@ const Ie = [
 						text: "Culture & History",
 						variant: "h3"
 					},
+					{
+						id: "culture-body",
+						component: "Body",
+						child: "culture-list"
+					},
 					{
 						id: "culture-list",
 						component: "Column",
@@ -7411,12 +8013,12 @@ const Ie = [
 					{
 						id: "food-card",
 						component: "Card",
-						child: "food-col"
+						children: ["food-hdr", "food-body"]
 					},
 					{
-						id: "food-col",
-						component: "Column",
-						children: ["food-title", "food-list"]
+						id: "food-hdr",
+						component: "Header",
+						children: ["food-title"]
 					},
 					{
 						id: "food-title",
@@ -7424,6 +8026,11 @@ const Ie = [
 						text: "Dining Beyond the Hotel",
 						variant: "h3"
 					},
+					{
+						id: "food-body",
+						component: "Body",
+						child: "food-list"
+					},
 					{
 						id: "food-list",
 						component: "Column",
@@ -7514,42 +8121,45 @@ const Ie = [
 * @fires native:a2ui-action - When an action fires inside the preview
 * @fires native:a2ui-state  - When surface state updates after processing envelopes
 */
-var H = [
+var V = [
 	"json-in",
 	"json-out",
 	"html",
 	"css",
 	"js",
-	"components"
-], U = {
+	"components",
+	"schema"
+], H = {
 	"json-in": "IN",
 	"json-out": "OUT",
 	html: "HTML",
 	css: "CSS",
 	js: "JS",
-	components: "UI"
-}, Le = {
+	components: "UI",
+	schema: "SCHEMA"
+}, Pe = {
 	"json-in": "brackets-curly",
 	"json-out": "chat-circle-dots",
 	html: "code",
 	css: "palette",
 	js: "terminal",
-	components: "squares-four"
-}, Re = te.define(), ze = C.line({ class: "cm-a2ui-sent" }), Be = C.line({ class: "cm-a2ui-next" }), Ve = ne.define({
+	components: "squares-four",
+	schema: "file-code"
+}, U = te.define(), Fe = C.line({ class: "cm-a2ui-sent" }), Ie = C.line({ class: "cm-a2ui-next" }), Le = ne.define({
 	create() {
 		return C.none;
 	},
 	update(e, t) {
-		for (let e of t.effects) if (e.is(Re)) {
+		for (let e of t.effects) if (e.is(U)) {
 			let n = t.state.doc, { sentUpToLine: r, nextFromLine: i, nextToLine: a } = e.value, o = [];
-			for (let e = 1; e <= Math.min(r, n.lines); e++) o.push(ze.range(n.line(e).from));
-			for (let e = Math.max(1, i); e <= Math.min(a, n.lines); e++) o.push(Be.range(n.line(e).from));
+			for (let e = 1; e <= Math.min(r, n.lines); e++) o.push(Fe.range(n.line(e).from));
+			for (let e = Math.max(1, i); e <= Math.min(a, n.lines); e++) o.push(Ie.range(n.line(e).from));
 			return C.set(o, !0);
 		}
 		return e;
 	},
 	provide: (e) => w.decorations.from(e)
-}), He = class extends p {
+}), Re = class extends p {
 	static observedAttributes = ["stream"];
 	#e = x("");
 	#t = x(0);
@@ -7573,17 +8183,19 @@ var H = [
 	#y = null;
 	#b = null;
 	#x = null;
-	#S = /* @__PURE__ */ new Map();
+	#S = null;
 	#C = /* @__PURE__ */ new Map();
 	#w = /* @__PURE__ */ new Map();
-	#T = null;
-	#E = null;
+	#T = /* @__PURE__ */ new Map();
+	#E = k.clone();
 	#D = null;
 	#O = null;
 	#k = null;
 	#A = null;
 	#j = null;
 	#M = null;
+	#N = null;
+	#P = null;
 	get stream() {
 		return this.#e.value;
 	}
@@ -7594,33 +8206,46 @@ var H = [
 		t !== n && (e === "stream" && (this.#e.value = n ?? "", this.#p && (this.#p.value = n ?? "")), super.attributeChangedCallback?.(e, t, n));
 	}
 	playAll() {
-		this.#X();
+		this.#ne();
 	}
 	step() {
-		this.#Z();
+		this.#re();
 	}
 	stepBack() {
-		this.#Q();
+		this.#ie();
 	}
 	reset() {
-		this.#$();
+		this.#ae();
 	}
 	setup() {
-		super.setup(), this.#G(), this.#N(), this.#k = new m(this, { closeButton: !1 }), this.addEventListener("native:present", this.#fe), this.addEventListener("native:dismiss", this.#pe), this.#b && (this.#O = new h(this.#b, {
+		super.setup(), this.#Z(), this.#F(), this.#j = new m(this, { closeButton: !1 }), this.addEventListener("native:present", this.#ve), this.addEventListener("native:dismiss", this.#ye), this.#x && (this.#A = new h(this.#x, {
 			handleSelector: ".a2ui-resize-handle",
 			axis: "horizontal",
 			min: 200
-		}), this.#b.addEventListener("native:resize-end", this.#xe)), this.#x && (this.#x.addEventListener("pointerdown", this.#V), this.#x.addEventListener("dblclick", this.#W)), this.addEffect(() => {
+		}), this.#x.addEventListener("native:resize-end", this.#De)), this.#S && (this.#S.addEventListener("pointerdown", this.#q), this.#S.addEventListener("dblclick", this.#X)), this.addEffect(() => {
 			let e = this.#n.value;
-			for (let [e, t] of this.#S) t.style.removeProperty("width");
-			for (let [t, n] of this.#S) n.hidden = !e.has(t);
-			for (let [t, n] of this.#w) n.toggleAttribute("data-active", e.has(t));
+			for (let [e, t] of this.#C) t.style.removeProperty("width");
+			for (let [t, n] of this.#C) n.hidden = !e.has(t);
+			for (let [t, n] of this.#T) n.toggleAttribute("data-active", e.has(t));
 		}), this.addEffect(() => {
+			this.#E.version.value;
 			let e = this.#l.value;
-			this.#v && this.#oe(this.#v, e);
+			this.#v && this.#fe(this.#v, e);
+		}), this.addEffect(() => {
+			this.#E.version.value;
+			let e = this.#y;
+			if (e) {
+				if (!e.extensions?.length) {
+					requestAnimationFrame(() => {
+						e.extensions = [E()], e.value = JSON.stringify(this.#E.toJSON(), null, 2);
+					});
+					return;
+				}
+				(e.shadowRoot ?? e).querySelector(".cm-focused") || (e.value = JSON.stringify(this.#E.toJSON(), null, 2));
+			}
 		}), this.addEffect(() => {
 			let e = this.#i.value;
-			this.#re(e, this.#C.get("json-out") ?? null);
+			this.#le(e, this.#w.get("json-out") ?? null);
 		}), this.addEffect(() => {
 			let e = this.#a.value;
 			if (!this.#m) return;
@@ -7631,41 +8256,42 @@ var H = [
 			this.#m.value = r ? r + "\n\n" + n : n;
 		}), this.addEffect(() => {
 			let e = this.#s.value;
-			this.#h && (this.#h.value = e ? Ue(e) : "");
+			this.#h && (this.#h.value = e ? ze(e) : "");
 		}), this.addEffect(() => {
 			let e = this.#c.value;
 			this.#g && (typeof e == "object" && e && Object.keys(e).length > 0 ? this.#g.value = JSON.stringify(e, null, 2) : this.#g.value = "");
 		}), this.addEffect(() => {
 			let e = this.#t.value, t = this.#p?.editorView;
 			if (!t) return;
-			let n = this.#Y(), r = 0, i = 0, a = 0;
+			let n = this.#te(), r = 0, i = 0, a = 0;
 			for (let t = 0; t < n.length; t++) if (t < e) r = n[t].endLine;
 			else if (t === e) {
 				i = n[t].startLine, a = n[t].endLine;
 				break;
 			}
-			t.dispatch({ effects: Re.of({
+			t.dispatch({ effects: U.of({
 				sentUpToLine: r,
 				nextFromLine: i,
 				nextToLine: a
 			}) });
 		}), this.deferChildren(() => {
-			this.#q(), this.#J(), this.#e.value || this.#he("card");
+			this.#$(), this.#ee(), this.#e.value || this.#xe("card");
 		});
 	}
 	teardown() {
-		this.#O?.destroy(), this.#O = null, this.removeEventListener("native:present", this.#fe), this.removeEventListener("native:dismiss", this.#pe), this.#k?.destroy(), this.#k = null, this.#A = null, this.#j = null, this.#b?.removeEventListener("native:resize-end", this.#xe), this.#x?.removeEventListener("pointerdown", this.#V), this.#x?.removeEventListener("dblclick", this.#W), document.removeEventListener("pointermove", this.#H), document.removeEventListener("pointerup", this.#U), this.#M = null, this.#b = null, this.#x = null, this.#S.clear(), this.#C.clear(), this.#w.clear(), this.#P(), this.#p = null, this.#m = null, this.#h = null, this.#g = null, this.#_ = null, this.#v = null, this.#y = null, super.teardown();
+		this.#A?.destroy(), this.#A = null, this.removeEventListener("native:present", this.#ve), this.removeEventListener("native:dismiss", this.#ye), this.#j?.destroy(), this.#j = null, this.#M = null, this.#N = null, this.#x?.removeEventListener("native:resize-end", this.#De), this.#S?.removeEventListener("pointerdown", this.#q), this.#S?.removeEventListener("dblclick", this.#X), document.removeEventListener("pointermove", this.#J), document.removeEventListener("pointerup", this.#Y), this.#P = null, this.#x = null, this.#S = null, this.#C.clear(), this.#w.clear(), this.#T.clear(), this.#I(), this.#p = null, this.#m = null, this.#h = null, this.#g = null, this.#_ = null, this.#v = null, this.#y = null, this.#b = null, super.teardown();
 	}
-	#N() {
-		oe(), this.#T = new ae({ allowUnregistered: !0 }), this.#E = Fe(this.#T, {
+	#F() {
+		ae(), this.#D = new ie({ allowUnregistered: !0 }), this.#O = Me(this.#D, {
+			registry: this.#E,
 			onClientMessage: (e) => {
-				this.#te("received", e);
+				this.#se("received", e);
 			},
 			onRender: (e) => {
-				this.#te("info", { message: `Surface ${e} rendered` }), this.#F(), this.#I(), this.#z();
+				this.#se("info", { message: `Surface ${e} rendered` }), this.#V(), this.#H(), this.#G();
 			}
-		}), this.#D = this.#T.bus.on((e) => e.type.startsWith("a2ui:"), (e) => {
-			this.#ne("action", {
+		}), this.#k = this.#D.bus.on((e) => e.type.startsWith("a2ui:"), (e) => {
+			this.#ce("action", {
 				action: e.type,
 				payload: e.payload
 			}), this.dispatchEvent(new CustomEvent("native:a2ui-action", {
@@ -7677,18 +8303,44 @@ var H = [
 			}));
 		});
 	}
-	#P() {
-		this.#D?.(), this.#D = null;
+	#I() {
+		this.#k?.(), this.#k = null;
 		try {
-			this.#E?.destroy();
+			this.#O?.destroy();
 		} catch {}
-		this.#E = null, this.#T = null;
+		this.#O = null, this.#D = null;
 	}
-	#F() {
-		if (!this.#E) return;
-		let e = this.#E.getSurfaceIds(), t = {};
+	/** Destroy and recreate adapter (after registry swap). */
+	#L() {
+		let e = this.#e.value;
+		this.#I(), this.#F(), e && (this.#t.value = 0, this.#b && (this.#b.textContent = ""), this.stream = e, this.#ne());
+	}
+	#R() {
+		let e = this.#y;
+		if (!e) return;
+		let t;
+		try {
+			t = JSON.parse(e.value);
+		} catch {
+			return;
+		}
+		!t || typeof t != "object" || (this.#E = me.fromJSON(t), this.#L(), this.#v && this.#fe(this.#v, this.#l.value));
+	}
+	#z() {
+		let e = this.#y;
+		if (e) try {
+			let t = JSON.parse(e.value);
+			e.value = JSON.stringify(t, null, 2);
+		} catch {}
+	}
+	#B() {
+		this.#E = k.clone(), this.#L(), this.#y && (this.#y.value = JSON.stringify(this.#E.toJSON(), null, 2)), this.#v && this.#fe(this.#v, this.#l.value);
+	}
+	#V() {
+		if (!this.#O) return;
+		let e = this.#O.getSurfaceIds(), t = {};
 		for (let n of e) {
-			let e = this.#E.getSurface(n), r = this.#E.getDataModel(n);
+			let e = this.#O.getSurface(n), r = this.#O.getDataModel(n);
 			t[n] = {
 				surfaceId: n,
 				rendered: e?.rendered ?? !1,
@@ -7704,28 +8356,28 @@ var H = [
 			detail: n
 		}));
 	}
-	#I() {
-		this.#y && (this.#s.value = this.#y.innerHTML);
+	#H() {
+		this.#b && (this.#s.value = this.#b.innerHTML);
 	}
 	/** Cmd+S in the HTML pane: write edited HTML back to preview. */
-	#L() {
-		!this.#h || !this.#y || (this.#y.innerHTML = this.#h.value, this.#z());
+	#U() {
+		!this.#h || !this.#b || (this.#b.innerHTML = this.#h.value, this.#G());
 	}
 	/** Cmd+S in the CSS pane: apply edited custom properties to the preview element. */
-	#R() {
-		if (!(!this.#g || !this.#y)) try {
+	#W() {
+		if (!(!this.#g || !this.#b)) try {
 			let e = JSON.parse(this.#g.value).computed;
-			if (e) for (let [t, n] of Object.entries(e)) t.startsWith("--") && this.#y.style.setProperty(t, n);
+			if (e) for (let [t, n] of Object.entries(e)) t.startsWith("--") && this.#b.style.setProperty(t, n);
 		} catch {}
 	}
-	#z() {
-		if (!this.#E || !this.#y) return;
-		let e = this.#E.getSurfaceIds(), t = {};
+	#G() {
+		if (!this.#O || !this.#b) return;
+		let e = this.#O.getSurfaceIds(), t = {};
 		for (let n of e) {
-			let e = this.#E.getSurface(n);
+			let e = this.#O.getSurface(n);
 			e?.theme && (t[`${n}/theme`] = e.theme);
 		}
-		let n = getComputedStyle(this.#y), r = [
+		let n = getComputedStyle(this.#b), r = [
 			"--n-ink",
 			"--n-background",
 			"--n-border-color",
@@ -7745,11 +8397,11 @@ var H = [
 		Object.keys(i).length && (t.computed = i), this.#c.value = t;
 	}
 	/** Get visible pane IDs in DOM order. */
-	#B() {
+	#K() {
 		let e = this.#n.value;
-		return H.filter((t) => e.has(t));
+		return V.filter((t) => e.has(t));
 	}
-	#V = (e) => {
+	#q = (e) => {
 		if (e.button !== 0) return;
 		let t = e.target.closest?.(".a2ui-resize-handle");
 		if (!t) return;
@@ -7757,33 +8409,33 @@ var H = [
 		if (!n?.classList.contains("a2ui-pane")) return;
 		let r = n.dataset.panel;
 		if (!r) return;
-		let i = this.#B(), a = i.indexOf(r);
+		let i = this.#K(), a = i.indexOf(r);
 		if (a === -1 || a >= i.length - 1) return;
-		let o = i[a + 1], s = this.#S.get(o);
+		let o = i[a + 1], s = this.#C.get(o);
 		if (!s) return;
 		e.preventDefault();
-		let c = this.#b?.offsetWidth ?? 0, l = s.offsetWidth, u = [];
+		let c = this.#x?.offsetWidth ?? 0, l = s.offsetWidth, u = [];
 		for (let e = 0; e <= a; e++) {
-			let t = this.#S.get(i[e]);
+			let t = this.#C.get(i[e]);
 			t && u.push({
 				id: i[e],
 				startW: t.offsetWidth
 			});
 		}
 		for (let e of i) {
-			let t = this.#S.get(e);
+			let t = this.#C.get(e);
 			t && (t.style.width = `${t.offsetWidth}px`, t.style.removeProperty("flex-grow"));
 		}
-		this.#b && (this.#b.style.width = `${c}px`), this.#M = {
+		this.#x && (this.#x.style.width = `${c}px`), this.#P = {
 			targetId: o,
 			startX: e.clientX,
 			previewStartW: c,
 			targetStartW: l,
 			leftPanes: u
-		}, s.setAttribute("resizing", ""), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.addEventListener("pointermove", this.#H), document.addEventListener("pointerup", this.#U);
+		}, s.setAttribute("resizing", ""), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.addEventListener("pointermove", this.#J), document.addEventListener("pointerup", this.#Y);
 	};
-	#H = (e) => {
-		let t = this.#M;
+	#J = (e) => {
+		let t = this.#P;
 		if (!t) return;
 		let n = e.clientX - t.startX, r = Math.max(150, t.targetStartW - n), i = r - t.targetStartW, a = t.leftPanes.map((e) => e.startW), o = t.previewStartW, s = r;
 		if (i > 0) {
@@ -7802,44 +8454,44 @@ var H = [
 			let e = t.leftPanes.length - 1;
 			e >= 0 ? a[e] = t.leftPanes[e].startW + -i : o = t.previewStartW + -i;
 		}
-		this.#b && (this.#b.style.width = `${o}px`);
-		let c = this.#S.get(t.targetId);
+		this.#x && (this.#x.style.width = `${o}px`);
+		let c = this.#C.get(t.targetId);
 		c && (c.style.width = `${s}px`);
 		for (let e = 0; e < t.leftPanes.length; e++) {
-			let n = this.#S.get(t.leftPanes[e].id);
+			let n = this.#C.get(t.leftPanes[e].id);
 			n && (n.style.width = `${a[e]}px`);
 		}
 	};
-	#U = (e) => {
-		let t = this.#M;
+	#Y = (e) => {
+		let t = this.#P;
 		if (!t) return;
-		if (this.#b && this.#x) {
-			let e = this.#x.offsetWidth;
+		if (this.#x && this.#S) {
+			let e = this.#S.offsetWidth;
 			if (e > 0) {
-				let t = this.#b.offsetWidth / e;
-				this.#b.style.width = `${(t * 100).toFixed(2)}%`;
+				let t = this.#x.offsetWidth / e;
+				this.#x.style.width = `${(t * 100).toFixed(2)}%`;
 			}
 		}
-		let n = this.#B(), r = [];
+		let n = this.#K(), r = [];
 		for (let e of n) {
-			let t = this.#S.get(e);
+			let t = this.#C.get(e);
 			r.push(t?.offsetWidth ?? 0);
 		}
 		let i = r.reduce((e, t) => e + t, 0);
 		if (i > 0) for (let e = 0; e < n.length; e++) {
-			let t = this.#S.get(n[e]);
+			let t = this.#C.get(n[e]);
 			t && (t.style.flexGrow = String(r[e] / i * n.length), t.style.removeProperty("width"));
 		}
-		this.#S.get(t.targetId)?.removeAttribute("resizing"), document.body.style.removeProperty("cursor"), document.body.style.removeProperty("user-select"), document.removeEventListener("pointermove", this.#H), document.removeEventListener("pointerup", this.#U), this.#M = null;
+		this.#C.get(t.targetId)?.removeAttribute("resizing"), document.body.style.removeProperty("cursor"), document.body.style.removeProperty("user-select"), document.removeEventListener("pointermove", this.#J), document.removeEventListener("pointerup", this.#Y), this.#P = null;
 	};
-	#W = (e) => {
+	#X = (e) => {
 		let t = e.target.closest?.(".a2ui-resize-handle");
 		if (!(!t || !t.parentElement?.classList.contains("a2ui-pane"))) {
-			this.#b && this.#b.style.removeProperty("width");
-			for (let [e, t] of this.#S) t.style.removeProperty("width"), t.style.removeProperty("flex-grow");
+			this.#x && this.#x.style.removeProperty("width");
+			for (let [e, t] of this.#C) t.style.removeProperty("width"), t.style.removeProperty("flex-grow");
 		}
 	};
-	#G() {
+	#Z() {
 		let e = document.createElement("n-header"), t = document.createElement("n-toolbar");
 		t.setAttribute("size", "sm"), t.setAttribute("variant", "ghost");
 		let n = document.createElement("n-select");
@@ -7848,9 +8500,9 @@ var H = [
 		r.setAttribute("justify", "spread"), r.innerHTML = "<span slot=\"label\">Presets</span><n-icon name=\"caret-up-down\" slot=\"trailing\"></n-icon>", n.appendChild(r);
 		let i = document.createElement("n-listbox");
 		i.setAttribute("popover", "");
-		for (let e of Ie) {
+		for (let e of Ne) {
 			if ("hidden" in e && e.hidden) continue;
-			let t = Object.entries(V).filter(([t, n]) => n.group === e.id);
+			let t = Object.entries(B).filter(([t, n]) => n.group === e.id);
 			if (t.length === 0) continue;
 			let n = document.createElement("n-option-group"), r = document.createElement("n-option-group-header");
 			r.textContent = e.label, n.appendChild(r);
@@ -7860,99 +8512,115 @@ var H = [
 			}
 			i.appendChild(n);
 		}
-		n.appendChild(i), n.addEventListener("native:change", this.#me), t.appendChild(n);
-		for (let e of H) {
+		n.appendChild(i), n.addEventListener("native:change", this.#be), t.appendChild(n);
+		for (let e of V) {
 			let n = document.createElement("n-button");
-			n.setAttribute("variant", "ghost"), n.setAttribute("size", "sm"), n.textContent = U[e], this.#n.value.has(e) && n.toggleAttribute("data-active", !0), n.addEventListener("native:press", this.#Te(e)), t.appendChild(n), this.#w.set(e, n);
+			n.setAttribute("variant", "ghost"), n.setAttribute("size", "sm"), n.textContent = H[e], this.#n.value.has(e) && n.toggleAttribute("data-active", !0), n.addEventListener("native:press", this.#je(e)), t.appendChild(n), this.#T.set(e, n);
 		}
 		let a = document.createElement("n-button");
-		a.setAttribute("variant", "ghost"), a.setAttribute("size", "sm"), a.title = "Auto-play presets on load", a.innerHTML = "<n-icon name=\"lightning\"></n-icon>", a.addEventListener("native:press", this.#Ce), t.appendChild(a), this.#j = a;
+		a.setAttribute("variant", "ghost"), a.setAttribute("size", "sm"), a.title = "Auto-play presets on load", a.innerHTML = "<n-icon name=\"lightning\"></n-icon>", a.addEventListener("native:press", this.#ke), t.appendChild(a), this.#N = a;
 		let o = document.createElement("n-button");
-		o.setAttribute("variant", "ghost"), o.setAttribute("size", "sm"), o.title = "Expand", o.innerHTML = "<n-icon name=\"arrows-out-simple\"></n-icon>", o.addEventListener("native:press", this.#de), t.appendChild(o), this.#A = o;
+		o.setAttribute("variant", "ghost"), o.setAttribute("size", "sm"), o.title = "Expand", o.innerHTML = "<n-icon name=\"arrows-out-simple\"></n-icon>", o.addEventListener("native:press", this.#_e), t.appendChild(o), this.#M = o;
 		let s = document.createElement("div");
-		s.className = "a2ui-split", this.#x = s;
+		s.className = "a2ui-split", this.#S = s;
 		let c = document.createElement("div");
-		c.className = "a2ui-preview", this.#b = c;
+		c.className = "a2ui-preview", this.#x = c;
 		let l = document.createElement("div");
-		l.className = "a2ui-preview-content", c.appendChild(l), this.#y = l;
+		l.className = "a2ui-preview-content", c.appendChild(l), this.#b = l;
 		let u = document.createElement("div");
 		u.className = "a2ui-resize-handle", c.appendChild(u), s.appendChild(c);
-		for (let e of H) {
+		for (let e of V) {
 			let t = document.createElement("div");
 			t.className = "a2ui-pane", t.dataset.panel = e, this.#n.value.has(e) || (t.hidden = !0);
 			let n = document.createElement("n-header"), r = document.createElement("nav"), i = document.createElement("n-icon");
-			i.setAttribute("name", Le[e]), r.appendChild(i), n.appendChild(r);
+			i.setAttribute("name", Pe[e]), r.appendChild(i), n.appendChild(r);
 			let a = document.createElement("span");
-			a.textContent = U[e], n.appendChild(a);
+			a.textContent = H[e], n.appendChild(a);
 			let o = document.createElement("aside");
 			if (e === "js" || e === "html" || e === "css") {
 				let t = document.createElement("n-button");
-				t.setAttribute("variant", "ghost"), t.setAttribute("size", "sm"), t.title = "Reset to computed", t.innerHTML = "<n-icon name=\"arrow-counter-clockwise\"></n-icon>", t.addEventListener("native:press", this.#we(e)), o.appendChild(t);
+				t.setAttribute("variant", "ghost"), t.setAttribute("size", "sm"), t.title = "Reset to computed", t.innerHTML = "<n-icon name=\"arrow-counter-clockwise\"></n-icon>", t.addEventListener("native:press", this.#Ae(e)), o.appendChild(t);
 			}
 			let c = document.createElement("n-button");
-			if (c.setAttribute("variant", "ghost"), c.setAttribute("size", "sm"), c.title = "Close pane", c.innerHTML = "<n-icon name=\"x\"></n-icon>", c.addEventListener("native:press", this.#Te(e)), o.appendChild(c), n.appendChild(o), t.appendChild(n), e === "json-in") {
+			if (c.setAttribute("variant", "ghost"), c.setAttribute("size", "sm"), c.title = "Close pane", c.innerHTML = "<n-icon name=\"x\"></n-icon>", c.addEventListener("native:press", this.#je(e)), o.appendChild(c), n.appendChild(o), t.appendChild(n), e === "json-in") {
 				let e = document.createElement("n-toolbar");
 				e.setAttribute("variant", "plain"), e.setAttribute("size", "sm"), e.setAttribute("fill", "");
-				let n = this.#K("Step back", "caret-left");
-				n.addEventListener("native:press", this.#ve);
-				let r = this.#K("Reset", "arrow-counter-clockwise");
-				r.addEventListener("native:press", this.#ye);
-				let i = this.#K("Step forward", "caret-right");
-				i.addEventListener("native:press", this.#_e);
-				let a = this.#K("Play all", "play", !0);
-				a.dataset.role = "run", a.addEventListener("native:press", this.#ge);
+				let n = this.#Q("Step back", "caret-left");
+				n.addEventListener("native:press", this.#we);
+				let r = this.#Q("Reset", "arrow-counter-clockwise");
+				r.addEventListener("native:press", this.#Te);
+				let i = this.#Q("Step forward", "caret-right");
+				i.addEventListener("native:press", this.#Ce);
+				let a = this.#Q("Play all", "play", !0);
+				a.dataset.role = "run", a.addEventListener("native:press", this.#Se);
 				let o = document.createElement("div");
 				o.className = "divider", o.setAttribute("orientation", "vertical");
-				let s = this.#K("Insert createSurface", "plus-circle");
-				s.addEventListener("native:press", this.#be("createSurface"));
-				let c = this.#K("Insert updateComponents", "squares-four");
-				c.addEventListener("native:press", this.#be("updateComponents"));
-				let l = this.#K("Insert updateDataModel", "database");
-				l.addEventListener("native:press", this.#be("updateDataModel"));
-				let u = this.#K("Insert deleteSurface", "minus-circle");
-				u.addEventListener("native:press", this.#be("deleteSurface")), e.append(n, r, i, a, o, s, c, l, u), t.appendChild(e);
+				let s = this.#Q("Insert createSurface", "plus-circle");
+				s.addEventListener("native:press", this.#Ee("createSurface"));
+				let c = this.#Q("Insert updateComponents", "squares-four");
+				c.addEventListener("native:press", this.#Ee("updateComponents"));
+				let l = this.#Q("Insert updateDataModel", "database");
+				l.addEventListener("native:press", this.#Ee("updateDataModel"));
+				let u = this.#Q("Insert deleteSurface", "minus-circle");
+				u.addEventListener("native:press", this.#Ee("deleteSurface")), e.append(n, r, i, a, o, s, c, l, u), t.appendChild(e);
+			}
+			if (e === "schema") {
+				let e = document.createElement("n-toolbar");
+				e.setAttribute("variant", "plain"), e.setAttribute("size", "sm"), e.setAttribute("fill", "");
+				let n = this.#Q("Apply schema", "play", !0);
+				n.addEventListener("native:press", () => this.#R());
+				let r = this.#Q("Format JSON", "text-align-left");
+				r.addEventListener("native:press", () => this.#z());
+				let i = document.createElement("div");
+				i.className = "divider", i.setAttribute("orientation", "vertical");
+				let a = this.#Q("Reset to defaults", "arrow-counter-clockwise");
+				a.addEventListener("native:press", () => this.#B()), e.append(n, r, i, a), t.appendChild(e);
 			}
 			let l = document.createElement("div");
-			if (l.className = "a2ui-pane-content", t.appendChild(l), this.#C.set(e, l), e === "json-in" || e === "js" || e === "html" || e === "css") {
+			if (l.className = "a2ui-pane-content", t.appendChild(l), this.#w.set(e, l), e === "json-in" || e === "js" || e === "html" || e === "css") {
 				let t = document.createElement("native-codemirror");
 				t.setAttribute("line-numbers", "false"), l.appendChild(t), e === "json-in" ? this.#p = t : e === "js" ? this.#m = t : e === "html" ? this.#h = t : e === "css" && (this.#g = t);
-			} else e === "components" && (this.#v = l);
+			} else if (e === "components") this.#v = l;
+			else if (e === "schema") {
+				let e = document.createElement("native-codemirror");
+				e.setAttribute("line-numbers", "false"), l.appendChild(e), this.#y = e;
+			}
 			let u = document.createElement("div");
-			u.className = "a2ui-resize-handle", t.appendChild(u), s.appendChild(t), this.#S.set(e, t);
+			u.className = "a2ui-resize-handle", t.appendChild(u), s.appendChild(t), this.#C.set(e, t);
 		}
 		e.appendChild(t), this.append(e, s);
 	}
-	#K(e, t, n = !1) {
+	#Q(e, t, n = !1) {
 		let r = document.createElement("n-button");
 		return r.title = e, r.setAttribute("variant", "ghost"), r.innerHTML = `<n-icon name="${t}"${n ? " weight=\"fill\"" : ""}></n-icon>`, r;
 	}
-	#q() {
+	#$() {
 		let e = this.querySelector("script[type=\"a2ui/stream\"]");
 		if (e) {
 			let t = (e.textContent ?? "").trim();
 			this.#e.value = t, e.remove();
 		}
 	}
-	#J() {
+	#ee() {
 		if (!this.#p) return;
 		this.#p.value = this.#e.value, this.#p.extensions = [
-			T(),
-			Ve,
-			ie(ce)
+			E(),
+			Le,
+			re(se)
 		], this.#p.addEventListener("native:input", (e) => {
 			this.#e.value = e.detail.value;
 		});
-		let e = re.of([{
+		let e = T.of([{
 			key: "Mod-s",
-			run: () => (this.#L(), !0)
-		}]), t = re.of([{
+			run: () => (this.#U(), !0)
+		}]), t = T.of([{
 			key: "Mod-s",
-			run: () => (this.#R(), !0)
+			run: () => (this.#W(), !0)
 		}]);
-		this.#m && (this.#m.extensions = [T()]), this.#h && (this.#h.extensions = [e]), this.#g && (this.#g.extensions = [T(), t]);
+		this.#m && (this.#m.extensions = [E()]), this.#h && (this.#h.extensions = [e]), this.#g && (this.#g.extensions = [E(), t]);
 	}
 	/** Parse JSON envelopes from the editor stream (supports multi-line formatted JSON). */
-	#Y() {
+	#te() {
 		let e = this.#e.value;
 		if (!e.trim()) return [];
 		let t = [], n = 0, r = -1, i = !1, a = !1;
@@ -7984,84 +8652,84 @@ var H = [
 		}
 		return t;
 	}
-	#X() {
-		let e = this.#Y();
-		if (!(!this.#E || !this.#y)) {
+	#ne() {
+		let e = this.#te();
+		if (!(!this.#O || !this.#b)) {
 			for (let t = this.#t.value; t < e.length; t++) try {
 				let n = JSON.parse(e[t].text);
-				this.#ee("sent", n), this.#E.receive(n, this.#y), this.#Se(n);
+				this.#oe("sent", n), this.#O.receive(n, this.#b), this.#Oe(n);
 			} catch (n) {
-				this.#ee("error", {
+				this.#oe("error", {
 					envelope: t + 1,
 					message: String(n),
 					raw: e[t].text
 				});
 			}
-			this.#t.value = e.length, this.#F(), this.#I(), this.#z();
+			this.#t.value = e.length, this.#V(), this.#H(), this.#G();
 		}
 	}
-	#Z() {
-		let e = this.#Y();
-		if (!this.#E || !this.#y) return;
+	#re() {
+		let e = this.#te();
+		if (!this.#O || !this.#b) return;
 		let t = this.#t.value;
 		if (!(t >= e.length)) {
 			try {
 				let n = JSON.parse(e[t].text);
-				this.#ee("sent", n), this.#E.receive(n, this.#y), this.#Se(n);
+				this.#oe("sent", n), this.#O.receive(n, this.#b), this.#Oe(n);
 			} catch (n) {
-				this.#ee("error", {
+				this.#oe("error", {
 					envelope: t + 1,
 					message: String(n),
 					raw: e[t].text
 				});
 			}
-			this.#t.value = t + 1, this.#F(), this.#I(), this.#z();
+			this.#t.value = t + 1, this.#V(), this.#H(), this.#G();
 		}
 	}
-	#Q() {
+	#ie() {
 		if (this.#t.value <= 0) return;
 		let e = this.#t.value - 1;
-		this.#P(), this.#y && (this.#y.textContent = ""), this.#r.value = [], this.#i.value = [], this.#a.value = [], this.#o.value = null, this.#s.value = "", this.#c.value = null, this.#l.value = /* @__PURE__ */ new Set(), this.#u.value = "demo", this.#N(), this.#t.value = 0;
-		let t = this.#Y();
-		if (!(!this.#E || !this.#y)) {
+		this.#I(), this.#b && (this.#b.textContent = ""), this.#r.value = [], this.#i.value = [], this.#a.value = [], this.#o.value = null, this.#s.value = "", this.#c.value = null, this.#l.value = /* @__PURE__ */ new Set(), this.#u.value = "demo", this.#F(), this.#t.value = 0;
+		let t = this.#te();
+		if (!(!this.#O || !this.#b)) {
 			for (let n = 0; n < e; n++) try {
 				let e = JSON.parse(t[n].text);
-				this.#ee("sent", e), this.#E.receive(e, this.#y), this.#Se(e);
+				this.#oe("sent", e), this.#O.receive(e, this.#b), this.#Oe(e);
 			} catch (e) {
-				this.#ee("error", {
+				this.#oe("error", {
 					envelope: n + 1,
 					message: String(e),
 					raw: t[n].text
 				});
 			}
-			this.#t.value = e, this.#F(), this.#I(), this.#z();
+			this.#t.value = e, this.#V(), this.#H(), this.#G();
 		}
 	}
-	#$() {
-		this.#P(), this.#y && (this.#y.textContent = ""), this.#t.value = 0, this.#f = 0, this.#r.value = [], this.#i.value = [], this.#a.value = [], this.#m && (this.#m.value = ""), this.#o.value = null, this.#s.value = "", this.#c.value = null, this.#l.value = /* @__PURE__ */ new Set(), this.#ie = null, this.#ae = "info", this.#u.value = "demo", this.#N();
+	#ae() {
+		this.#I(), this.#b && (this.#b.textContent = ""), this.#t.value = 0, this.#f = 0, this.#r.value = [], this.#i.value = [], this.#a.value = [], this.#m && (this.#m.value = ""), this.#o.value = null, this.#s.value = "", this.#c.value = null, this.#l.value = /* @__PURE__ */ new Set(), this.#ue = null, this.#de = "info", this.#u.value = "demo", this.#F();
 	}
-	#ee(e, t) {
+	#oe(e, t) {
 		this.#r.value = [...this.#r.value, {
 			type: e,
 			data: t,
 			timestamp: Date.now()
 		}];
 	}
-	#te(e, t) {
+	#se(e, t) {
 		this.#i.value = [...this.#i.value, {
 			type: e,
 			data: t,
 			timestamp: Date.now()
 		}];
 	}
-	#ne(e, t) {
+	#ce(e, t) {
 		this.#a.value = [...this.#a.value, {
 			type: e,
 			data: t,
 			timestamp: Date.now()
 		}];
 	}
-	#re(e, t) {
+	#le(e, t) {
 		if (t) {
 			if (t.textContent = "", e.length === 0) {
 				let e = document.createElement("span");
@@ -8084,11 +8752,11 @@ var H = [
 		}
 	}
 	/** Render the A2UI → native-ui component mapping table. */
-	#ie = null;
-	#ae = "info";
-	#oe(e, t) {
-		if (e.textContent = "", this.#ie) {
-			this.#se(e, this.#ie, t);
+	#ue = null;
+	#de = "info";
+	#fe(e, t) {
+		if (e.textContent = "", this.#ue) {
+			this.#pe(e, this.#ue, t);
 			return;
 		}
 		let n = document.createElement("table");
@@ -8104,7 +8772,7 @@ var H = [
 		}
 		r.appendChild(i), n.appendChild(r);
 		let a = document.createElement("tbody");
-		for (let [n, r] of A) {
+		for (let [n, r] of this.#E) {
 			let n = document.createElement("tr");
 			n.className = "a2ui-map-row", t.has(r.a2uiType) && n.classList.add("a2ui-map-active");
 			let i = document.createElement("td");
@@ -8112,39 +8780,39 @@ var H = [
 			let o = document.createElement("td"), s = document.createElement("code");
 			s.textContent = r.nativeTag, o.appendChild(s);
 			let c = document.createElement("td");
-			c.textContent = N(r.a2uiType), c.className = "a2ui-map-category", n.append(i, o, c), n.addEventListener("click", () => {
-				this.#ie = r.a2uiType, this.#oe(e, t);
+			c.textContent = this.#E.getComponentCategory(r.a2uiType), c.className = "a2ui-map-category", n.append(i, o, c), n.addEventListener("click", () => {
+				this.#ue = r.a2uiType, this.#fe(e, t);
 			}), a.appendChild(n);
 		}
 		n.appendChild(a);
 		let o = document.createElement("div");
-		o.className = "a2ui-map-summary", o.textContent = t.size > 0 ? `${t.size} of ${A.size} types active` : `${A.size} supported component types`, e.append(o, n);
+		o.className = "a2ui-map-summary", o.textContent = t.size > 0 ? `${t.size} of ${this.#E.size} types active` : `${this.#E.size} supported component types`, e.append(o, n);
 	}
-	#se(e, t, n) {
-		let r = A.get(t);
+	#pe(e, t, n) {
+		let r = this.#E.get(t);
 		if (!r) return;
 		let i = document.createElement("n-header");
 		i.className = "a2ui-map-detail-header";
 		let a = document.createElement("nav"), o = document.createElement("n-button");
 		o.setAttribute("variant", "ghost"), o.setAttribute("size", "sm"), o.className = "a2ui-map-back", o.innerHTML = `<n-icon name="caret-left"></n-icon> ${r.a2uiType}`, o.addEventListener("native:press", () => {
-			this.#ie = null, this.#ae = "info", this.#_ = null, this.#oe(e, n);
+			this.#ue = null, this.#de = "info", this.#_ = null, this.#fe(e, n);
 		}), a.appendChild(o), i.appendChild(a);
-		let s = this.#ce(t), c = s.length > 0, l = document.createElement("aside"), u = document.createElement("n-segmented-control");
-		u.className = "a2ui-map-tab-bar", u.setAttribute("size", "xs"), u.setAttribute("inline", ""), u.value = this.#ae;
+		let s = this.#me(t), c = s.length > 0, l = document.createElement("aside"), u = document.createElement("n-segmented-control");
+		u.className = "a2ui-map-tab-bar", u.setAttribute("size", "xs"), u.setAttribute("inline", ""), u.value = this.#de;
 		let d = document.createElement("n-segment");
 		d.setAttribute("value", "info"), d.textContent = "Info";
 		let f = document.createElement("n-segment");
 		if (f.setAttribute("value", "json"), f.textContent = c ? `JSON (${s.length})` : "JSON", c || f.setAttribute("disabled", ""), u.append(d, f), u.addEventListener("native:change", (t) => {
 			let r = t.detail;
-			(r?.value === "info" || r?.value === "json") && (this.#ae = r.value, this.#oe(e, n));
-		}), l.appendChild(u), i.appendChild(l), e.appendChild(i), this.#ae === "info") {
+			(r?.value === "info" || r?.value === "json") && (this.#de = r.value, this.#fe(e, n));
+		}), l.appendChild(u), i.appendChild(l), e.appendChild(i), this.#de === "info") {
 			this.#_ = null;
 			let i = document.createElement("div");
 			i.className = "a2ui-map-detail";
 			let a = [
 				["Tag", r.nativeTag],
 				["Children", r.childStrategy],
-				["Category", N(r.a2uiType)]
+				["Category", this.#E.getComponentCategory(r.a2uiType)]
 			];
 			r.actionEvent && a.push(["Action", r.actionEvent]), r.defaultAttributes && a.push(["Defaults", Object.entries(r.defaultAttributes).map(([e, t]) => `${e}="${t}"`).join(", ")]), r.propertyMap && a.push(["Props", Object.entries(r.propertyMap).map(([e, t]) => `${e} → ${t}`).join(", ")]), r.variantMap && a.push(["Variants", Object.keys(r.variantMap).join(", ")]);
 			for (let [e, t] of a) {
@@ -8156,14 +8824,14 @@ var H = [
 				a.textContent = t, n.append(r, a), i.appendChild(n);
 			}
 			e.appendChild(i);
-			let o = Ce(r.a2uiType).filter((e) => e !== t), s = n.has(t);
+			let o = this.#E.getCompatibleTypes(r.a2uiType).filter((e) => e !== t), s = n.has(t);
 			if (o.length > 0) {
 				let r = document.createElement("div");
 				r.className = "a2ui-map-alternatives";
 				let i = document.createElement("div");
 				i.className = "a2ui-map-alt-title", i.textContent = s ? "Swap To" : "Compatible Alternatives", r.appendChild(i);
 				for (let i of o) {
-					let a = A.get(i);
+					let a = this.#E.get(i);
 					if (!a) continue;
 					let o = document.createElement("div");
 					if (o.className = "a2ui-map-alt-row", n.has(i) && o.classList.add("a2ui-map-active"), s) {
@@ -8174,29 +8842,32 @@ var H = [
 					c.className = "a2ui-map-type", c.textContent = i;
 					let l = document.createElement("code");
 					l.textContent = a.nativeTag, o.append(c, l), s ? o.addEventListener("click", () => {
-						this.#ue(t, i), this.#ie = i, this.#ae = "info", this.#_ = null, this.#oe(e, this.#l.value);
+						this.#ge(t, i), this.#ue = i, this.#de = "info", this.#_ = null, this.#fe(e, this.#l.value);
 					}) : o.addEventListener("click", () => {
-						this.#ie = i, this.#ae = "info", this.#_ = null, this.#oe(e, n);
+						this.#ue = i, this.#de = "info", this.#_ = null, this.#fe(e, n);
 					}), r.appendChild(o);
 				}
 				e.appendChild(r);
 			}
 			return;
 		}
-		let p = document.createElement("div");
-		p.className = "a2ui-map-editor-section";
-		let m = document.createElement("n-toolbar");
-		m.className = "a2ui-map-editor-toolbar";
-		let h = document.createElement("n-button");
-		h.setAttribute("variant", "ghost"), h.setAttribute("size", "sm"), h.title = "Apply changes to stream", h.innerHTML = "<n-icon name=\"play\" weight=\"fill\"></n-icon>", h.addEventListener("native:press", () => this.#le(t)), m.appendChild(h), p.appendChild(m);
-		let g = document.createElement("native-codemirror");
-		g.setAttribute("line-numbers", "false"), p.appendChild(g), this.#_ = g, requestAnimationFrame(() => {
-			g.extensions = [T()], g.value = JSON.stringify(s, null, 2);
-		}), e.appendChild(p);
+		if (this.#de === "json") {
+			let n = document.createElement("div");
+			n.className = "a2ui-map-editor-section";
+			let r = document.createElement("n-toolbar");
+			r.className = "a2ui-map-editor-toolbar";
+			let i = document.createElement("n-button");
+			i.setAttribute("variant", "ghost"), i.setAttribute("size", "sm"), i.title = "Apply changes to stream", i.innerHTML = "<n-icon name=\"play\" weight=\"fill\"></n-icon>", i.addEventListener("native:press", () => this.#he(t)), r.appendChild(i), n.appendChild(r);
+			let a = document.createElement("native-codemirror");
+			a.setAttribute("line-numbers", "false"), n.appendChild(a), this.#_ = a, requestAnimationFrame(() => {
+				a.extensions = [E()], a.value = JSON.stringify(s, null, 2);
+			}), e.appendChild(n);
+			return;
+		}
 	}
 	/** Extract all component instances of a given A2UI type from the current envelopes. */
-	#ce(e) {
-		let t = this.#Y(), n = [];
+	#me(e) {
+		let t = this.#te(), n = [];
 		for (let r of t) try {
 			let t = JSON.parse(r.text).updateComponents;
 			if (t?.components) for (let r of t.components) r.component === e && n.push(r);
@@ -8204,7 +8875,7 @@ var H = [
 		return n;
 	}
 	/** Apply edited component JSON back into the stream envelopes and replay. */
-	#le(e) {
+	#he(e) {
 		if (!this.#_) return;
 		let t;
 		try {
@@ -8215,7 +8886,7 @@ var H = [
 		if (!Array.isArray(t)) return;
 		let n = /* @__PURE__ */ new Map();
 		for (let e of t) e.id && typeof e.id == "string" && n.set(e.id, e);
-		let r = this.#Y(), i = [];
+		let r = this.#te(), i = [];
 		for (let t of r) try {
 			let r = JSON.parse(t.text), a = r.updateComponents;
 			if (a?.components) for (let t = 0; t < a.components.length; t++) {
@@ -8229,15 +8900,15 @@ var H = [
 		} catch {
 			i.push(t.text);
 		}
-		let a = i.join("\n\n"), o = this.#ie;
-		if (this.#$(), this.#ie = o, this.stream = a, this.#X(), this.#_) {
-			let t = this.#ce(e);
+		let a = i.join("\n\n"), o = this.#ue;
+		if (this.#ae(), this.#ue = o, this.stream = a, this.#ne(), this.#_) {
+			let t = this.#me(e);
 			this.#_.value = JSON.stringify(t, null, 2);
 		}
 	}
 	/** Swap all instances of one A2UI component type for another in the stream and replay. */
-	#ue(e, t) {
-		let n = this.#Y();
+	#ge(e, t) {
+		let n = this.#te();
 		if (n.length === 0) return;
 		let r = [];
 		for (let i of n) try {
@@ -8247,41 +8918,41 @@ var H = [
 		} catch {
 			r.push(i.text);
 		}
-		let i = r.join("\n\n"), a = this.#ie;
-		this.#$(), this.#ie = a, this.stream = i, this.#X();
+		let i = r.join("\n\n"), a = this.#ue;
+		this.#ae(), this.#ue = a, this.stream = i, this.#ne();
 	}
-	#de = () => {
-		this.#k?.toggle();
+	#_e = () => {
+		this.#j?.toggle();
 	};
-	#fe = () => {
-		this.#A && (this.#A.innerHTML = "<n-icon name=\"x\"></n-icon>", this.#A.title = "Close");
+	#ve = () => {
+		this.#M && (this.#M.innerHTML = "<n-icon name=\"x\"></n-icon>", this.#M.title = "Close");
 	};
-	#pe = () => {
-		this.#A && (this.#A.innerHTML = "<n-icon name=\"arrows-out-simple\"></n-icon>", this.#A.title = "Expand");
+	#ye = () => {
+		this.#M && (this.#M.innerHTML = "<n-icon name=\"arrows-out-simple\"></n-icon>", this.#M.title = "Expand");
 	};
-	#me = (e) => {
+	#be = (e) => {
 		let t = e.detail?.value;
-		t && this.#he(t);
+		t && this.#xe(t);
 	};
-	#he(e) {
-		if (!V[e]) return;
-		let t = V[e].envelopes.map((e) => JSON.stringify(e, null, 2)).join("\n\n");
-		this.#$(), this.stream = t, this.#X();
+	#xe(e) {
+		if (!B[e]) return;
+		let t = B[e].envelopes.map((e) => JSON.stringify(e, null, 2)).join("\n\n");
+		this.#ae(), this.stream = t, this.#ne();
 	}
-	#ge = () => {
-		this.#X();
+	#Se = () => {
+		this.#ne();
 	};
-	#_e = () => {
-		this.#Z();
+	#Ce = () => {
+		this.#re();
 	};
-	#ve = () => {
-		this.#Q();
+	#we = () => {
+		this.#ie();
 	};
-	#ye = () => {
-		this.#$();
+	#Te = () => {
+		this.#ae();
 	};
 	/** Insert a lifecycle envelope template at the end of the editor stream. */
-	#be = (e) => () => {
+	#Ee = (e) => () => {
 		let t = this.#u.value, n = {
 			createSurface: {
 				createSurface: { surfaceId: t },
@@ -8322,15 +8993,15 @@ var H = [
 			a.dispatch({ selection: { anchor: a.state.doc.line(e).from } }), a.dispatch({ effects: w.scrollIntoView(a.state.doc.line(e).from) });
 		}
 	};
-	#xe = () => {
-		if (!this.#b || !this.#x) return;
-		let e = this.#x.offsetWidth;
+	#De = () => {
+		if (!this.#x || !this.#S) return;
+		let e = this.#S.offsetWidth;
 		if (e <= 0) return;
-		let t = this.#b.offsetWidth / e;
-		this.#b.style.width = `${(t * 100).toFixed(2)}%`;
+		let t = this.#x.offsetWidth / e;
+		this.#x.style.width = `${(t * 100).toFixed(2)}%`;
 	};
 	/** Track A2UI component types used in updateComponents envelopes. */
-	#Se(e) {
+	#Oe(e) {
 		let t = e.updateComponents;
 		if (t?.components) {
 			t.surfaceId && (this.#u.value = t.surfaceId);
@@ -8339,11 +9010,11 @@ var H = [
 			this.#l.value = e;
 		}
 	}
-	#Ce = () => {
-		this.#d.value = !this.#d.value, this.#j?.toggleAttribute("data-active", this.#d.value);
+	#ke = () => {
+		this.#d.value = !this.#d.value, this.#N?.toggleAttribute("data-active", this.#d.value);
 	};
 	/** Reset an editable pane to its computed/generated content. */
-	#we = (e) => () => {
+	#Ae = (e) => () => {
 		if (e === "js") {
 			if (!this.#m) return;
 			let e = this.#a.value;
@@ -8351,19 +9022,19 @@ var H = [
 		} else if (e === "html") {
 			if (!this.#h) return;
 			let e = this.#s.value;
-			this.#h.value = e ? Ue(e) : "";
+			this.#h.value = e ? ze(e) : "";
 		} else if (e === "css") {
 			if (!this.#g) return;
 			let e = this.#c.value;
 			typeof e == "object" && e && Object.keys(e).length > 0 ? this.#g.value = JSON.stringify(e, null, 2) : this.#g.value = "";
 		}
 	};
-	#Te = (e) => () => {
+	#je = (e) => () => {
 		let t = new Set(this.#n.value);
 		t.has(e) ? t.delete(e) : t.add(e), this.#n.value = t;
 	};
 };
-function Ue(e) {
+function ze(e) {
 	let t = "", n = 0, r = 0;
 	for (; r < e.length;) if (e[r] === "<") {
 		let i = e.indexOf(">", r);
@@ -8378,7 +9049,7 @@ function Ue(e) {
 	}
 	return t.trimEnd();
 }
-y("native-a2ui", He), y("n-button", e), y("n-icon", r), y("n-toolbar", f), y("n-select", u), y("n-listbox", i), y("n-option", a), y("n-option-group", o), y("n-option-group-header", s), y("n-segmented-control", l), y("n-segment", c), b("caret-left", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z\"/></svg>"), b("caret-right", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z\"/></svg>"), b("arrow-counter-clockwise", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z\"/></svg>"), b("play-fill", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z\"/></svg>"), b("arrows-out-simple", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M216,48V96a8,8,0,0,1-16,0V67.31l-50.34,50.35a8,8,0,0,1-11.32-11.32L188.69,56H160a8,8,0,0,1,0-16h48A8,8,0,0,1,216,48ZM106.34,138.34,56,188.69V160a8,8,0,0,0-16,0v48a8,8,0,0,0,8,8H96a8,8,0,0,0,0-16H67.31l50.35-50.34a8,8,0,0,0-11.32-11.32Z\"/></svg>"), b("arrows-in-simple", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M213.66,53.66,163.31,104H192a8,8,0,0,1,0,16H144a8,8,0,0,1-8-8V64a8,8,0,0,1,16,0V92.69l50.34-50.35a8,8,0,0,1,11.32,11.32ZM112,136H64a8,8,0,0,0,0,16H92.69L42.34,202.34a8,8,0,0,0,11.32,11.32L104,163.31V192a8,8,0,0,0,16,0V144A8,8,0,0,0,112,136Z\"/></svg>"), b("x", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"/></svg>"), b("caret-up-down", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M181.66,170.34a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-48-48a8,8,0,0,1,11.32-11.32L128,212.69l42.34-42.35A8,8,0,0,1,181.66,170.34Zm-96-84.68L128,43.31l42.34,42.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,85.66Z\"/></svg>"), b("lightning", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.38a8,8,0,0,0,5,9.06l52.8,19.8Z\"/></svg>"), b("plus", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z\"/></svg>"), b("arrows-left-right", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M213.66,181.66l-32,32a8,8,0,0,1-11.32-11.32L188.69,184H48a8,8,0,0,1,0-16H188.69l-18.35-18.34a8,8,0,0,1,11.32-11.32l32,32A8,8,0,0,1,213.66,181.66Zm-139.32-64a8,8,0,0,0,11.32-11.32L67.31,88H208a8,8,0,0,0,0-16H67.31L85.66,53.66A8,8,0,0,0,74.34,42.34l-32,32a8,8,0,0,0,0,11.32Z\"/></svg>"), b("plus-circle", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48-88a8,8,0,0,1-8,8H136v32a8,8,0,0,1-16,0V136H88a8,8,0,0,1,0-16h32V88a8,8,0,0,1,16,0v32h32A8,8,0,0,1,176,128Z\"/></svg>"), b("minus-circle", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M176,128a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h80A8,8,0,0,1,176,128Zm56,0A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z\"/></svg>"), b("database", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M128,24C74.17,24,32,48.6,32,80v96c0,31.4,42.17,56,96,56s96-24.6,96-56V80C224,48.6,181.83,24,128,24Zm80,104c0,9.62-7.88,19.43-21.61,26.92C170.93,163.35,150.19,168,128,168s-42.93-4.65-58.39-13.08C55.88,147.43,48,137.62,48,128V111.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64ZM69.61,53.08C85.07,44.65,105.81,40,128,40s42.93,4.65,58.39,13.08C200.12,60.57,208,70.38,208,80s-7.88,19.43-21.61,26.92C170.93,115.35,150.19,120,128,120s-42.93-4.65-58.39-13.08C55.88,99.43,48,89.62,48,80S55.88,60.57,69.61,53.08ZM186.39,202.92C170.93,211.35,150.19,216,128,216s-42.93-4.65-58.39-13.08C55.88,195.43,48,185.62,48,176V159.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64V176C208,185.62,200.12,195.43,186.39,202.92Z\"/></svg>"), b("play", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M232.4,114.49,88.32,26.35a16,16,0,0,0-16.2-.3A15.86,15.86,0,0,0,64,39.87V216.13A15.94,15.94,0,0,0,80,232a16.07,16.07,0,0,0,8.36-2.35L232.4,141.51a15.81,15.81,0,0,0,0-27ZM80,215.94V40l143.83,88Z\"/></svg>"), b("brackets-curly", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M43.18,128a29.78,29.78,0,0,1,8,10.26c4.8,9.9,4.8,22,4.8,33.74,0,24.31,1,36,24,36a8,8,0,0,1,0,16c-17.48,0-29.32-6.14-35.2-18.26-4.8-9.9-4.8-22-4.8-33.74,0-24.31-1-36-24-36a8,8,0,0,1,0-16c23,0,24-11.69,24-36,0-11.72,0-23.84,4.8-33.74C50.68,38.14,62.52,32,80,32a8,8,0,0,1,0,16C57,48,56,59.69,56,84c0,11.72,0,23.84-4.8,33.74A29.78,29.78,0,0,1,43.18,128ZM240,120c-23,0-24-11.69-24-36,0-11.72,0-23.84-4.8-33.74C205.32,38.14,193.48,32,176,32a8,8,0,0,0,0,16c23,0,24,11.69,24,36,0,11.72,0,23.84,4.8,33.74a29.78,29.78,0,0,0,8,10.26,29.78,29.78,0,0,0-8,10.26c-4.8,9.9-4.8,22-4.8,33.74,0,24.31-1,36-24,36a8,8,0,0,0,0,16c17.48,0,29.32-6.14,35.2-18.26,4.8-9.9,4.8-22,4.8-33.74,0-24.31,1-36,24-36a8,8,0,0,0,0-16Z\"/></svg>"), b("chat-circle-dots", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128ZM84,116a12,12,0,1,0,12,12A12,12,0,0,0,84,116Zm88,0a12,12,0,1,0,12,12A12,12,0,0,0,172,116Zm60,12A104,104,0,0,1,79.12,219.82L45.07,231.17a16,16,0,0,1-20.24-20.24l11.35-34.05A104,104,0,1,1,232,128Zm-16,0A88,88,0,1,0,51.81,172.06a8,8,0,0,1,.66,6.54L40,216,77.4,203.53a7.85,7.85,0,0,1,2.53-.42,8,8,0,0,1,4,1.08A88,88,0,0,0,216,128Z\"/></svg>"), b("code", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z\"/></svg>"), b("palette", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M200.77,53.89A103.27,103.27,0,0,0,128,24h-1.07A104,104,0,0,0,24,128c0,43,26.58,79.06,69.36,94.17A32,32,0,0,0,136,192a16,16,0,0,1,16-16h46.21a31.81,31.81,0,0,0,31.2-24.88,104.43,104.43,0,0,0,2.59-24A103.28,103.28,0,0,0,200.77,53.89Zm13,93.71A15.89,15.89,0,0,1,198.21,160H152a32,32,0,0,0-32,32,16,16,0,0,1-21.31,15.07C62.49,194.3,40,164,40,128a88,88,0,0,1,87.09-88h.9a88.35,88.35,0,0,1,88,87.25A88.86,88.86,0,0,1,213.81,147.6ZM140,76a12,12,0,1,1-12-12A12,12,0,0,1,140,76ZM96,100A12,12,0,1,1,84,88,12,12,0,0,1,96,100Zm0,56a12,12,0,1,1-12-12A12,12,0,0,1,96,156Zm88-56a12,12,0,1,1-12-12A12,12,0,0,1,184,100Z\"/></svg>"), b("terminal", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M117.31,134l-72,64a8,8,0,1,1-10.63-12L100,128,34.69,70A8,8,0,1,1,45.32,58l72,64a8,8,0,0,1,0,12ZM216,184H120a8,8,0,0,0,0,16h96a8,8,0,0,0,0-16Z\"/></svg>"), b("squares-four", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M104,40H56A16,16,0,0,0,40,56v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,104,40Zm0,64H56V56h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,64H152V56h48v48Zm-96,32H56a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,104,136Zm0,64H56V152h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,200,136Zm0,64H152V152h48v48Z\"/></svg>");
+y("native-a2ui", Re), y("n-button", e), y("n-icon", r), y("n-toolbar", f), y("n-select", u), y("n-listbox", i), y("n-option", a), y("n-option-group", o), y("n-option-group-header", s), y("n-segmented-control", l), y("n-segment", c), b("caret-left", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z\"/></svg>"), b("caret-right", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z\"/></svg>"), b("arrow-counter-clockwise", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z\"/></svg>"), b("play-fill", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z\"/></svg>"), b("arrows-out-simple", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M216,48V96a8,8,0,0,1-16,0V67.31l-50.34,50.35a8,8,0,0,1-11.32-11.32L188.69,56H160a8,8,0,0,1,0-16h48A8,8,0,0,1,216,48ZM106.34,138.34,56,188.69V160a8,8,0,0,0-16,0v48a8,8,0,0,0,8,8H96a8,8,0,0,0,0-16H67.31l50.35-50.34a8,8,0,0,0-11.32-11.32Z\"/></svg>"), b("arrows-in-simple", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M213.66,53.66,163.31,104H192a8,8,0,0,1,0,16H144a8,8,0,0,1-8-8V64a8,8,0,0,1,16,0V92.69l50.34-50.35a8,8,0,0,1,11.32,11.32ZM112,136H64a8,8,0,0,0,0,16H92.69L42.34,202.34a8,8,0,0,0,11.32,11.32L104,163.31V192a8,8,0,0,0,16,0V144A8,8,0,0,0,112,136Z\"/></svg>"), b("x", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"/></svg>"), b("caret-up-down", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M181.66,170.34a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-48-48a8,8,0,0,1,11.32-11.32L128,212.69l42.34-42.35A8,8,0,0,1,181.66,170.34Zm-96-84.68L128,43.31l42.34,42.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,85.66Z\"/></svg>"), b("lightning", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.38a8,8,0,0,0,5,9.06l52.8,19.8Z\"/></svg>"), b("plus", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z\"/></svg>"), b("arrows-left-right", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M213.66,181.66l-32,32a8,8,0,0,1-11.32-11.32L188.69,184H48a8,8,0,0,1,0-16H188.69l-18.35-18.34a8,8,0,0,1,11.32-11.32l32,32A8,8,0,0,1,213.66,181.66Zm-139.32-64a8,8,0,0,0,11.32-11.32L67.31,88H208a8,8,0,0,0,0-16H67.31L85.66,53.66A8,8,0,0,0,74.34,42.34l-32,32a8,8,0,0,0,0,11.32Z\"/></svg>"), b("plus-circle", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48-88a8,8,0,0,1-8,8H136v32a8,8,0,0,1-16,0V136H88a8,8,0,0,1,0-16h32V88a8,8,0,0,1,16,0v32h32A8,8,0,0,1,176,128Z\"/></svg>"), b("minus-circle", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M176,128a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h80A8,8,0,0,1,176,128Zm56,0A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z\"/></svg>"), b("database", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M128,24C74.17,24,32,48.6,32,80v96c0,31.4,42.17,56,96,56s96-24.6,96-56V80C224,48.6,181.83,24,128,24Zm80,104c0,9.62-7.88,19.43-21.61,26.92C170.93,163.35,150.19,168,128,168s-42.93-4.65-58.39-13.08C55.88,147.43,48,137.62,48,128V111.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64ZM69.61,53.08C85.07,44.65,105.81,40,128,40s42.93,4.65,58.39,13.08C200.12,60.57,208,70.38,208,80s-7.88,19.43-21.61,26.92C170.93,115.35,150.19,120,128,120s-42.93-4.65-58.39-13.08C55.88,99.43,48,89.62,48,80S55.88,60.57,69.61,53.08ZM186.39,202.92C170.93,211.35,150.19,216,128,216s-42.93-4.65-58.39-13.08C55.88,195.43,48,185.62,48,176V159.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64V176C208,185.62,200.12,195.43,186.39,202.92Z\"/></svg>"), b("play", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M232.4,114.49,88.32,26.35a16,16,0,0,0-16.2-.3A15.86,15.86,0,0,0,64,39.87V216.13A15.94,15.94,0,0,0,80,232a16.07,16.07,0,0,0,8.36-2.35L232.4,141.51a15.81,15.81,0,0,0,0-27ZM80,215.94V40l143.83,88Z\"/></svg>"), b("brackets-curly", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M43.18,128a29.78,29.78,0,0,1,8,10.26c4.8,9.9,4.8,22,4.8,33.74,0,24.31,1,36,24,36a8,8,0,0,1,0,16c-17.48,0-29.32-6.14-35.2-18.26-4.8-9.9-4.8-22-4.8-33.74,0-24.31-1-36-24-36a8,8,0,0,1,0-16c23,0,24-11.69,24-36,0-11.72,0-23.84,4.8-33.74C50.68,38.14,62.52,32,80,32a8,8,0,0,1,0,16C57,48,56,59.69,56,84c0,11.72,0,23.84-4.8,33.74A29.78,29.78,0,0,1,43.18,128ZM240,120c-23,0-24-11.69-24-36,0-11.72,0-23.84-4.8-33.74C205.32,38.14,193.48,32,176,32a8,8,0,0,0,0,16c23,0,24,11.69,24,36,0,11.72,0,23.84,4.8,33.74a29.78,29.78,0,0,0,8,10.26,29.78,29.78,0,0,0-8,10.26c-4.8,9.9-4.8,22-4.8,33.74,0,24.31-1,36-24,36a8,8,0,0,0,0,16c17.48,0,29.32-6.14,35.2-18.26,4.8-9.9,4.8-22,4.8-33.74,0-24.31,1-36,24-36a8,8,0,0,0,0-16Z\"/></svg>"), b("chat-circle-dots", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128ZM84,116a12,12,0,1,0,12,12A12,12,0,0,0,84,116Zm88,0a12,12,0,1,0,12,12A12,12,0,0,0,172,116Zm60,12A104,104,0,0,1,79.12,219.82L45.07,231.17a16,16,0,0,1-20.24-20.24l11.35-34.05A104,104,0,1,1,232,128Zm-16,0A88,88,0,1,0,51.81,172.06a8,8,0,0,1,.66,6.54L40,216,77.4,203.53a7.85,7.85,0,0,1,2.53-.42,8,8,0,0,1,4,1.08A88,88,0,0,0,216,128Z\"/></svg>"), b("code", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z\"/></svg>"), b("palette", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M200.77,53.89A103.27,103.27,0,0,0,128,24h-1.07A104,104,0,0,0,24,128c0,43,26.58,79.06,69.36,94.17A32,32,0,0,0,136,192a16,16,0,0,1,16-16h46.21a31.81,31.81,0,0,0,31.2-24.88,104.43,104.43,0,0,0,2.59-24A103.28,103.28,0,0,0,200.77,53.89Zm13,93.71A15.89,15.89,0,0,1,198.21,160H152a32,32,0,0,0-32,32,16,16,0,0,1-21.31,15.07C62.49,194.3,40,164,40,128a88,88,0,0,1,87.09-88h.9a88.35,88.35,0,0,1,88,87.25A88.86,88.86,0,0,1,213.81,147.6ZM140,76a12,12,0,1,1-12-12A12,12,0,0,1,140,76ZM96,100A12,12,0,1,1,84,88,12,12,0,0,1,96,100Zm0,56a12,12,0,1,1-12-12A12,12,0,0,1,96,156Zm88-56a12,12,0,1,1-12-12A12,12,0,0,1,184,100Z\"/></svg>"), b("terminal", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M117.31,134l-72,64a8,8,0,1,1-10.63-12L100,128,34.69,70A8,8,0,1,1,45.32,58l72,64a8,8,0,0,1,0,12ZM216,184H120a8,8,0,0,0,0,16h96a8,8,0,0,0,0-16Z\"/></svg>"), b("squares-four", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M104,40H56A16,16,0,0,0,40,56v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,104,40Zm0,64H56V56h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,64H152V56h48v48Zm-96,32H56a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,104,136Zm0,64H56V152h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,200,136Zm0,64H152V152h48v48Z\"/></svg>");
 /**
 * Chat message input with textarea, submit button, and Enter-to-send behavior.
 * @attr {boolean} disabled - Disables interaction
@@ -8391,7 +9062,7 @@ y("native-a2ui", He), y("n-button", e), y("n-icon", r), y("n-toolbar", f), y("n-
 * @fires native:composer-focus - Fired when the composer textarea gains focus
 * @fires native:composer-blur - Fired when the composer textarea loses focus
 */
-var We = class extends p {
+var Be = class extends p {
 	static observedAttributes = [
 		"disabled",
 		"busy",
@@ -8531,7 +9202,7 @@ var We = class extends p {
 		super(e.message), this.name = "GatewayRequestError", this.kind = e.kind, this.status = e.status ?? 0, this.body = e.body ?? "", this.requestId = e.requestId, this.contentType = e.contentType;
 	}
 };
-async function Ge(e) {
+async function Ve(e) {
 	return G(e, e.retryPolicy ?? {
 		delaysMs: [
 			1e3,
@@ -8541,7 +9212,7 @@ async function Ge(e) {
 		jitterRatio: 0
 	}, 0);
 }
-function Ke(e, t) {
+function He(e, t) {
 	let n = { ...e };
 	if (!t) return n;
 	if (t instanceof Headers) return t.forEach((e, t) => {
@@ -8567,7 +9238,7 @@ async function G(e, t, n) {
 		maxAttempts: t.delaysMs.length + 1
 	});
 	try {
-		let s = Ke(e.defaultHeaders ?? {}, i.headers), c = e.auth;
+		let s = He(e.defaultHeaders ?? {}, i.headers), c = e.auth;
 		if (c?.token) {
 			let e = c.headerName ?? "Authorization";
 			s[e] = c.scheme === "raw" ? c.token : `Bearer ${c.token}`;
@@ -8580,7 +9251,7 @@ async function G(e, t, n) {
 			signal: d
 		}), p = Math.round(performance.now() - o);
 		if (!f.ok) {
-			let o = await f.text(), s = qe(f.status), c = f.headers.get("content-type") ?? void 0;
+			let o = await f.text(), s = Ue(f.status), c = f.headers.get("content-type") ?? void 0;
 			if (!e.noRetry && (s === "rate-limit" || s === "server") && n < t.delaysMs.length) return a?.({
 				type: "request:retry",
 				requestId: i.requestId,
@@ -8591,7 +9262,7 @@ async function G(e, t, n) {
 				durationMs: p,
 				status: f.status,
 				errorKind: s
-			}), await Ye(Je(t.delaysMs[n], t.jitterRatio ?? 0)), G(e, t, n + 1);
+			}), await Ge(We(t.delaysMs[n], t.jitterRatio ?? 0)), G(e, t, n + 1);
 			throw a?.({
 				type: "request:error",
 				requestId: i.requestId,
@@ -8603,7 +9274,7 @@ async function G(e, t, n) {
 				status: f.status,
 				errorKind: s
 			}), new W({
-				message: Qe(f.status, o, c),
+				message: Je(f.status, o, c),
 				kind: s,
 				requestId: i.requestId,
 				status: f.status,
@@ -8633,7 +9304,7 @@ async function G(e, t, n) {
 			maxAttempts: t.delaysMs.length + 1,
 			durationMs: c,
 			errorKind: "network"
-		}), await Ye(Je(t.delaysMs[n], t.jitterRatio ?? 0)), G(e, t, n + 1);
+		}), await Ge(We(t.delaysMs[n], t.jitterRatio ?? 0)), G(e, t, n + 1);
 		throw a?.({
 			type: "request:error",
 			requestId: i.requestId,
@@ -8650,7 +9321,7 @@ async function G(e, t, n) {
 		});
 	}
 }
-function qe(e) {
+function Ue(e) {
 	return e === 401 || e === 403 ? "auth" : e === 429 ? "rate-limit" : e >= 500 ? "server" : e >= 400 ? "client" : "unknown";
 }
 async function K(e, t) {
@@ -8678,15 +9349,15 @@ async function K(e, t) {
 function q() {
 	return crypto.randomUUID();
 }
-function Je(e, t) {
+function We(e, t) {
 	if (t <= 0) return e;
 	let n = 1 + Math.random() * t;
 	return Math.round(e * n);
 }
-function Ye(e) {
+function Ge(e) {
 	return new Promise((t) => setTimeout(t, e));
 }
-function Xe(e) {
+function Ke(e) {
 	let t = e.split("\n"), n = "message", r = [];
 	for (let e of t) e.startsWith(":") || (e.startsWith("event:") ? n = e.slice(6).trim() : e.startsWith("data:") && r.push(e.slice(5).replace(/^ /, "")));
 	return r.length ? {
@@ -8694,12 +9365,12 @@ function Xe(e) {
 		data: r.join("\n")
 	} : null;
 }
-const Ze = [
+const qe = [
 	1e3,
 	2e3,
 	4e3
 ];
-function Qe(e, t, n) {
+function Je(e, t, n) {
 	let r = `Request failed with ${e}`;
 	if (!t.trim()) return r;
 	if ((n ?? "").toLowerCase().includes("application/json") || t.trim().startsWith("{")) try {
@@ -8710,7 +9381,7 @@ function Qe(e, t, n) {
 	}
 	return (n ?? "").toLowerCase().includes("text/html") ? `${r} (received HTML instead of API JSON)` : r;
 }
-var $e = class {
+var Ye = class {
 	clientId;
 	baseUrl;
 	model;
@@ -8833,7 +9504,7 @@ var $e = class {
 				signal: e?.signal,
 				requestId: t
 			}
-		}), t)).data ?? []).filter((e) => typeof e.id == "string" && e.id.length > 0).map((e) => e.id), r = n.filter((e) => tt(e));
+		}), t)).data ?? []).filter((e) => typeof e.id == "string" && e.id.length > 0).map((e) => e.id), r = n.filter((e) => Ze(e));
 		return (r.length ? r : n).map((e) => ({
 			id: e,
 			label: e,
@@ -8875,7 +9546,7 @@ var $e = class {
 				for (; p !== -1;) {
 					let a = s.slice(0, p);
 					s = s.slice(p + 2), p = s.indexOf("\n\n");
-					let o = Xe(a);
+					let o = Ke(a);
 					if (!o) continue;
 					if (o.data === "[DONE]") {
 						u = !0;
@@ -8951,11 +9622,11 @@ var $e = class {
 		};
 	}
 	request(e) {
-		return Ge({
+		return Ve({
 			url: e.url,
 			init: e.init,
 			noRetry: e.noRetry,
-			retryPolicy: { delaysMs: Ze },
+			retryPolicy: { delaysMs: qe },
 			auth: {
 				token: this.apiKey,
 				headerName: "Authorization",
@@ -8970,9 +9641,9 @@ var $e = class {
 		});
 	}
 };
-const et = ({ clientId: e, baseUrl: t, gatewayConfig: n, onEvent: r, auth: i }) => {
+const Xe = ({ clientId: e, baseUrl: t, gatewayConfig: n, onEvent: r, auth: i }) => {
 	let a = n?.model ?? "gpt-4.1-mini", o = Number(n?.max_tokens ?? n?.maxTokens ?? 1024), s = n?.temperature, c = n?.api_key ?? n?.apiKey ?? i?.token ?? null, l = n?.organization ?? n?.openai_organization ?? n?.openaiOrganization ?? null, u = n?.session_id ?? n?.sessionId ?? null;
-	return new $e({
+	return new Ye({
 		clientId: e,
 		baseUrl: t,
 		model: String(a),
@@ -8985,11 +9656,11 @@ const et = ({ clientId: e, baseUrl: t, gatewayConfig: n, onEvent: r, auth: i })
 		onEvent: r
 	});
 };
-function tt(e) {
+function Ze(e) {
 	let t = e.trim().toLowerCase();
 	return t ? t.startsWith("gpt-") || t.startsWith("chatgpt-") : !1;
 }
-var nt = class {
+var Qe = class {
 	clientId;
 	baseUrl;
 	model;
@@ -9150,7 +9821,7 @@ var nt = class {
 				for (; p !== -1;) {
 					let a = s.slice(0, p);
 					s = s.slice(p + 2), p = s.indexOf("\n\n");
-					let o = Xe(a);
+					let o = Ke(a);
 					if (!o) continue;
 					if (o.data === "[DONE]") {
 						u = !0;
@@ -9228,11 +9899,11 @@ var nt = class {
 		};
 	}
 	request(e) {
-		return Ge({
+		return Ve({
 			url: e.url,
 			init: e.init,
 			noRetry: e.noRetry,
-			retryPolicy: { delaysMs: Ze },
+			retryPolicy: { delaysMs: qe },
 			auth: {
 				token: this.apiKey,
 				headerName: "x-api-key",
@@ -9248,9 +9919,9 @@ var nt = class {
 		});
 	}
 };
-const rt = ({ clientId: e, baseUrl: t, gatewayConfig: n, onEvent: r, auth: i }) => {
+const $e = ({ clientId: e, baseUrl: t, gatewayConfig: n, onEvent: r, auth: i }) => {
 	let a = n?.model ?? "claude-sonnet-4-6", o = Number(n?.max_tokens ?? n?.maxTokens ?? 1024), s = n?.temperature, c = n?.anthropic_version ?? n?.anthropicVersion ?? "2023-06-01", l = n?.api_key ?? n?.apiKey ?? i?.token ?? null, u = n?.session_id ?? n?.sessionId ?? null;
-	return new nt({
+	return new Qe({
 		clientId: e,
 		baseUrl: t,
 		model: String(a),
@@ -9267,7 +9938,7 @@ var J = [
 	"That's a great question! Here's what I think:\n\n**Web components** are built on three main browser APIs:\n\n1. **Custom Elements** — define your own HTML tags\n2. **Shadow DOM** — encapsulated styling and markup\n3. **HTML Templates** — reusable content fragments\n\nThey work natively in all modern browsers.",
 	"Sure, I can help with that! Let me break it down:\n\n- First, you'll want to understand the **component lifecycle**\n- Then look at how **attributes** map to **properties**\n- Finally, consider your **event strategy**\n\n```js\nclass MyElement extends HTMLElement {\n  connectedCallback() {\n    console.log('Connected!');\n  }\n}\n```",
 	"Here are some key points to consider:\n\n> The best code is the code you don't have to write.\n\n1. Keep components **small and focused**\n2. Use **composition** over inheritance\n3. Leverage **CSS custom properties** for theming\n4. Always consider **accessibility**\n\nLet me know if you'd like more detail on any of these!"
-], it = 25, at = class {
+], et = 25, tt = class {
 	#e = 0;
 	bootstrapSession() {
 		return Promise.resolve({ id: "mock-session" });
@@ -9297,7 +9968,7 @@ var J = [
 				role: "assistant",
 				datetime: Date.now(),
 				done: i
-			}), i || await new Promise((e) => setTimeout(e, it));
+			}), i || await new Promise((e) => setTimeout(e, et));
 		}
 		return e.onStreamEvent?.({
 			phase: "complete",
@@ -9331,8 +10002,8 @@ var J = [
 		}]);
 	}
 };
-function ot(e) {
-	return new at();
+function nt(e) {
+	return new tt();
 }
 /**
 * Stamped panel for the chat interface.
@@ -9379,7 +10050,7 @@ function ot(e) {
 * @attr {string} gateway-config - JSON config for the adapter (model, apiKey, system, etc.)
 * @attr {string} gateway-urls - JSON map of provider prefixes to URLs (e.g. '{"claude":"/api/anthropic","openai":"/api/openai"}'). When set, auto-switches gateway based on model prefix.
 */
-var st = class extends p {
+var rt = class extends p {
 	static MAX_CONTEXT_MESSAGES = 50;
 	static observedAttributes = [
 		"show-stop",
@@ -9641,7 +10312,7 @@ var st = class extends p {
 				baseUrl: t,
 				gatewayConfig: n ?? {}
 			}, i = null;
-			e === "openai" ? i = et(r) : e === "claude" ? i = rt(r) : e === "mock" && (i = ot(r)), this.#d = i, i && i.bootstrapSession().catch(() => {});
+			e === "openai" ? i = Xe(r) : e === "claude" ? i = $e(r) : e === "mock" && (i = nt(r)), this.#d = i, i && i.bootstrapSession().catch(() => {});
 		}), this.addEffect(() => {
 			this.#o.value && (this.#e.value = this.#u.value);
 		}), this.addEventListener("native:send", this.#N), this.addEventListener("native:chat-stop", this.#L), this.addEventListener("native:chat-restart", this.#R), this.deferChildren(() => {
@@ -9898,7 +10569,7 @@ var st = class extends p {
 	#B() {
 		this.#b &&= (this.#b.removeEventListener("native:change", this.#M), this.#b.remove(), null), this.#x = null;
 	}
-}, ct = 40, lt = class extends p {
+}, it = 40, at = class extends p {
 	static observedAttributes = [
 		"auto-scroll",
 		"scrollable",
@@ -10007,7 +10678,7 @@ var st = class extends p {
 		}
 	}
 	#f = () => {
-		let e = this.#n.value, t = this.scrollTop + this.clientHeight >= this.scrollHeight - ct;
+		let e = this.#n.value, t = this.scrollTop + this.clientHeight >= this.scrollHeight - it;
 		this.#n.value = t, t !== e && this.dispatchEvent(new CustomEvent("native:feed-scroll", {
 			bubbles: !0,
 			composed: !0,
@@ -10025,7 +10696,7 @@ var st = class extends p {
 			});
 		});
 	};
-}, ut = class extends p {
+}, ot = class extends p {
 	static observedAttributes = [
 		"src",
 		"name",
@@ -10065,7 +10736,7 @@ var st = class extends p {
 			}
 			if (n) {
 				let e = document.createElement("span");
-				e.className = "n-chat-avatar-initials", e.textContent = dt(n), e.setAttribute("aria-hidden", "true"), this.appendChild(e);
+				e.className = "n-chat-avatar-initials", e.textContent = st(n), e.setAttribute("aria-hidden", "true"), this.appendChild(e);
 				return;
 			}
 			let r = document.createElement("n-icon");
@@ -10076,11 +10747,11 @@ var st = class extends p {
 		this.textContent = "", super.teardown();
 	}
 };
-function dt(e) {
+function st(e) {
 	let t = e.trim().split(/\s+/);
 	return t.length === 0 ? "" : t.length === 1 ? t[0][0].toUpperCase() : (t[0][0] + t[t.length - 1][0]).toUpperCase();
 }
-const ft = {
+const ct = {
 	copy: {
 		label: "Copy",
 		icon: "copy"
@@ -10105,7 +10776,7 @@ const ft = {
 		label: "Continue",
 		icon: "arrow-right"
 	}
-}, pt = {
+}, lt = {
 	assistant: [
 		"copy",
 		"retry",
@@ -10130,7 +10801,7 @@ const ft = {
 * @fires native:message-action - Fired when an action button is clicked
 * @fires native:continue-request - Fired when continue is requested for a partial message
 */
-var mt = class extends p {
+var ut = class extends p {
 	static observedAttributes = [
 		"data-role",
 		"message-id",
@@ -10249,12 +10920,12 @@ var mt = class extends p {
 	#p(e, t, n, r, i) {
 		if (this.#o &&= (this.#f(), null), clearTimeout(this.#l), t === "none" || this.querySelector("[slot=\"actions\"]")) return;
 		let a;
-		if (a = t ? t.split(",").map((e) => e.trim()).filter(Boolean) : pt[e] ?? [], i === "partial" && !a.includes("continue") && (a = [...a, "continue"]), a.length === 0) return;
+		if (a = t ? t.split(",").map((e) => e.trim()).filter(Boolean) : lt[e] ?? [], i === "partial" && !a.includes("continue") && (a = [...a, "continue"]), a.length === 0) return;
 		let o = document.createElement("n-toolbar");
 		o.dataset.role = "actions", o.setAttribute("padding", "tight"), o.setAttribute("aria-label", "Message actions"), n !== "label" && o.setAttribute("data-style", n);
 		for (let e of a) {
-			let t = ft[e];
-			t && o.appendChild(ht(e, t, n));
+			let t = ct[e];
+			t && o.appendChild(dt(e, t, n));
 		}
 		if (o.children.length !== 0) {
 			if (o.addEventListener("native:press", this.#m), r === "below") {
@@ -10287,7 +10958,7 @@ var mt = class extends p {
 		}
 	};
 };
-function ht(e, t, n) {
+function dt(e, t, n) {
 	let r = document.createElement("n-button");
 	if (r.setAttribute("variant", "ghost"), r.setAttribute("size", "sm"), r.setAttribute("inline", ""), r.setAttribute("data-action", e), r.setAttribute("aria-label", t.label), n === "icon" || n === "icon-label") {
 		let e = document.createElement("n-icon");
@@ -10324,7 +10995,7 @@ function ht(e, t, n) {
 * @attr {string} sender - Display name of the sender
 * @attr {string} avatar-align - `"top"` | `"center"` | `"bottom"` (default) — avatar vertical alignment
 */
-var gt = class extends p {
+var ft = class extends p {
 	static observedAttributes = [
 		"data-role",
 		"sender",
@@ -10367,7 +11038,7 @@ var gt = class extends p {
 		for (let r of n) r instanceof Element && r.localName === "n-chat-avatar" || (r instanceof Element && r.localName === "n-chat-message" ? t.appendChild(r) : e.appendChild(r));
 		this.appendChild(e), this.appendChild(t), this.#t = e, this.#n = t;
 	}
-}, Y = class extends p {
+}, pt = class extends p {
 	static observedAttributes = ["format"];
 	#e = x("markdown");
 	#t = x("");
@@ -10393,7 +11064,7 @@ var gt = class extends p {
 			!this.#t.value && this.textContent?.trim() && (this.#t.value = this.textContent.trim()), this.#n = document.createElement("div"), this.#n.className = "n-chat-prose", this.textContent = "", this.appendChild(this.#n), this.addEffect(() => {
 				let e = this.#t.value, t = this.#e.value;
 				this.#n && (t === "plain" ? this.#n.textContent = e : (cancelAnimationFrame(this.#r), this.#r = requestAnimationFrame(() => {
-					this.#n && (this.#n.innerHTML = yt(vt(e)));
+					this.#n && (this.#n.innerHTML = ht(Z(e)));
 				})));
 			});
 		});
@@ -10401,7 +11072,7 @@ var gt = class extends p {
 	teardown() {
 		cancelAnimationFrame(this.#r), this.#n = null, super.teardown();
 	}
-}, _t = new Set([
+}, mt = new Set([
 	"p",
 	"br",
 	"strong",
@@ -10421,14 +11092,14 @@ var gt = class extends p {
 	"blockquote",
 	"hr"
 ]);
-function X(e) {
+function Y(e) {
 	return e.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#39;");
 }
-function Z(e) {
-	let t = X(e);
+function X(e) {
+	let t = Y(e);
 	return t = t.replace(/`([^`]+)`/g, "<code>$1</code>"), t = t.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>"), t = t.replace(/__(.+?)__/g, "<strong>$1</strong>"), t = t.replace(/\*(.+?)\*/g, "<em>$1</em>"), t = t.replace(/(?<!\w)_(.+?)_(?!\w)/g, "<em>$1</em>"), t = t.replace(/\[([^\]]+)\]\((https?:\/\/[^)]+)\)/g, "<a href=\"$2\" rel=\"noopener noreferrer\" target=\"_blank\">$1</a>"), t;
 }
-function vt(e) {
+function Z(e) {
 	if (!e) return "";
 	let t = e.split("\n"), n = [], r = 0;
 	for (; r < t.length;) {
@@ -10437,14 +11108,14 @@ function vt(e) {
 			let i = e.slice(3).trim(), a = [];
 			for (r += 1; r < t.length && !t[r].startsWith("```");) a.push(t[r]), r += 1;
 			r += 1;
-			let o = i ? ` data-lang="${X(i)}"` : "";
-			n.push(`<pre${o}><code>${X(a.join("\n"))}</code></pre>`);
+			let o = i ? ` data-lang="${Y(i)}"` : "";
+			n.push(`<pre${o}><code>${Y(a.join("\n"))}</code></pre>`);
 			continue;
 		}
 		let i = e.match(/^(#{1,6})\s+(.+)/);
 		if (i) {
 			let e = i[1].length;
-			n.push(`<h${e}>${Z(i[2])}</h${e}>`), r += 1;
+			n.push(`<h${e}>${X(i[2])}</h${e}>`), r += 1;
 			continue;
 		}
 		if (/^---+$/.test(e.trim()) || /^\*\*\*+$/.test(e.trim())) {
@@ -10454,19 +11125,19 @@ function vt(e) {
 		if (e.startsWith("> ")) {
 			let e = [];
 			for (; r < t.length && t[r].startsWith("> ");) e.push(t[r].slice(2)), r += 1;
-			n.push(`<blockquote>${vt(e.join("\n"))}</blockquote>`);
+			n.push(`<blockquote>${Z(e.join("\n"))}</blockquote>`);
 			continue;
 		}
 		if (/^[-*+]\s/.test(e)) {
 			let e = [];
 			for (; r < t.length && /^[-*+]\s/.test(t[r]);) e.push(t[r].replace(/^[-*+]\s/, "")), r += 1;
-			n.push("<ul>" + e.map((e) => `<li>${Z(e)}</li>`).join("") + "</ul>");
+			n.push("<ul>" + e.map((e) => `<li>${X(e)}</li>`).join("") + "</ul>");
 			continue;
 		}
 		if (/^\d+\.\s/.test(e)) {
 			let e = [];
 			for (; r < t.length && /^\d+\.\s/.test(t[r]);) e.push(t[r].replace(/^\d+\.\s/, "")), r += 1;
-			n.push("<ol>" + e.map((e) => `<li>${Z(e)}</li>`).join("") + "</ol>");
+			n.push("<ol>" + e.map((e) => `<li>${X(e)}</li>`).join("") + "</ol>");
 			continue;
 		}
 		if (!e.trim()) {
@@ -10475,15 +11146,15 @@ function vt(e) {
 		}
 		let a = [];
 		for (; r < t.length && t[r].trim() && !t[r].startsWith("#") && !t[r].startsWith("```") && !t[r].startsWith("> ") && !/^[-*+]\s/.test(t[r]) && !/^\d+\.\s/.test(t[r]) && !/^---+$/.test(t[r].trim());) a.push(t[r]), r += 1;
-		a.length > 0 && n.push(`<p>${Z(a.join("\n"))}</p>`);
+		a.length > 0 && n.push(`<p>${X(a.join("\n"))}</p>`);
 	}
 	return n.join("");
 }
 /** Sanitize rendered HTML — strip any tags not in allowlist. */
-function yt(e) {
+function ht(e) {
 	return e.replace(/<\/?([a-zA-Z][a-zA-Z0-9]*)[^>]*>/g, (e, t) => {
 		let n = t.toLowerCase();
-		return _t.has(n) ? e : "";
+		return mt.has(n) ? e : "";
 	});
 }
 /**
@@ -10504,7 +11175,7 @@ function yt(e) {
 * @attr {boolean} expandable - Allow click to expand trace content
 * @fires native:activity-toggle - Fired when trace is expanded/collapsed
 */
-var bt = class extends p {
+var gt = class extends p {
 	static observedAttributes = [
 		"type",
 		"label",
@@ -10562,7 +11233,7 @@ var bt = class extends p {
 			this.#r.value ? (this.#p(), this.#e.states.add("active")) : (this.#m(), this.#e.states.delete("active"));
 		}), this.addEffect(() => {
 			if (!this.#c) return;
-			let e = this.#n.value || xt(this.#t.value);
+			let e = this.#n.value || _t(this.#t.value);
 			this.#c.textContent = e;
 		}), this.addEffect(() => {
 			this.#u && (this.#u.hidden = !this.#r.value);
@@ -10592,7 +11263,7 @@ var bt = class extends p {
 	#h = () => {
 		if (!this.#r.value || !this.#l) return;
 		let e = performance.now() - this.#o;
-		this.#l.textContent = St(e), this.#s = requestAnimationFrame(this.#h);
+		this.#l.textContent = vt(e), this.#s = requestAnimationFrame(this.#h);
 	};
 	#g = () => {
 		this.#i.value && (this.#a.value = !this.#a.value, this.toggleAttribute("expanded", this.#a.value), this.dispatchEvent(new CustomEvent("native:activity-toggle", {
@@ -10602,14 +11273,14 @@ var bt = class extends p {
 		})));
 	};
 };
-function xt(e) {
+function _t(e) {
 	switch (e) {
 		case "thinking": return "Thinking…";
 		case "tool-use": return "Using tools…";
 		default: return "Host is typing…";
 	}
 }
-function St(e) {
+function vt(e) {
 	let t = Math.floor(e / 1e3);
 	if (t < 60) return `${t}s`;
 	let n = Math.floor(t / 60), r = t % 60;
@@ -10629,7 +11300,7 @@ function St(e) {
 * @attr {boolean} disabled - Disables all chips
 * @fires native:seed-select - Fired when a chip is clicked
 */
-var Ct = class extends p {
+var yt = class extends p {
 	static observedAttributes = ["options", "disabled"];
 	#e;
 	#t = x([]);
@@ -10701,7 +11372,7 @@ var Ct = class extends p {
 			}
 		}));
 	};
-}, wt = new Set([
+}, bt = new Set([
 	"script",
 	"style",
 	"link",
@@ -10718,7 +11389,7 @@ var Ct = class extends p {
 	"frame",
 	"frameset",
 	"noscript"
-]), Tt = class extends p {
+]), xt = class extends p {
 	static observedAttributes = ["schema-type", "mode"];
 	#e;
 	#t = x("a2ui");
@@ -10764,7 +11435,7 @@ var Ct = class extends p {
 		super.setup(), this.#i = document.createElement("div"), this.#i.className = "n-chat-genui-container", this.appendChild(this.#i), this.addEffect(() => {
 			let e = this.#r.value, t = this.#n.value;
 			if (!this.#i || (this.#i.textContent = "", !e)) return;
-			let n = Et(e);
+			let n = St(e);
 			if (n.length > 0) {
 				this.#o(n), this.dispatchEvent(new CustomEvent("native:genui-error", {
 					bubbles: !0,
@@ -10828,15 +11499,15 @@ var Ct = class extends p {
 		}));
 	};
 };
-function Et(e, t = 0) {
+function St(e, t = 0) {
 	let n = [];
 	if (t > 20) return n.push("Maximum nesting depth (20) exceeded"), n;
 	if (!e.tag || typeof e.tag != "string") return n.push("Node missing required \"tag\" property"), n;
-	if (wt.has(e.tag.toLowerCase()) && n.push(`Forbidden tag: <${e.tag}>`), e.children) for (let r of e.children) n.push(...Et(r, t + 1));
+	if (bt.has(e.tag.toLowerCase()) && n.push(`Forbidden tag: <${e.tag}>`), e.children) for (let r of e.children) n.push(...St(r, t + 1));
 	return n;
 }
 function Q(e) {
-	if (wt.has(e.tag.toLowerCase())) return null;
+	if (bt.has(e.tag.toLowerCase())) return null;
 	let t = document.createElement(e.tag);
 	if (e.id && (t.id = e.id), e.slot && (t.slot = e.slot), e.attributes) for (let [n, r] of Object.entries(e.attributes)) t.setAttribute(n, r);
 	if (e.properties) for (let [n, r] of Object.entries(e.properties)) t[n] = r;
@@ -11001,5 +11672,5 @@ var $ = class extends p {
 		}));
 	};
 };
-y("n-chat-input", We), y("native-chat-panel", st), y("n-chat-feed", lt), y("n-chat-avatar", ut), y("n-chat-message", mt), y("n-chat-messages", gt), y("n-chat-message-text", Y), y("n-chat-message-activity", bt), y("n-chat-message-seed", Ct), y("n-chat-message-genui", Tt), y("n-chat-input-structured", $), y("n-textarea", d), y("n-button", e), y("n-icon", r), y("n-toolbar", f), y("n-dialog", n), y("n-container", t), y("n-listbox", i), y("n-option", a), y("n-option-group", o), y("n-option-group-header", s), y("n-select", u), b("chat-dots", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M116,128a12,12,0,1,1,12,12A12,12,0,0,1,116,128ZM84,140a12,12,0,1,0-12-12A12,12,0,0,0,84,140Zm88,0a12,12,0,1,0-12-12A12,12,0,0,0,172,140Zm60-76V192a16,16,0,0,1-16,16H83l-32.6,28.16-.09.07A15.89,15.89,0,0,1,40,240a16.13,16.13,0,0,1-6.8-1.52A15.85,15.85,0,0,1,24,224V64A16,16,0,0,1,40,48H216A16,16,0,0,1,232,64ZM40,224h0ZM216,64H40V224l34.77-30A8,8,0,0,1,80,192H216Z\"/></svg>"), b("user", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8C55.71,194.74,89.05,176,128,176s72.29,18.74,89.07,44a8,8,0,0,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z\"/></svg>"), b("stop", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M200,40H56A16,16,0,0,0,40,56V200a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,160H56V56H200V200Z\"/></svg>"), b("arrow-counter-clockwise", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z\"/></svg>"), b("caret-up-down", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M181.66,170.34a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-48-48a8,8,0,0,1,11.32-11.32L128,212.69l42.34-42.35A8,8,0,0,1,181.66,170.34Zm-96-84.68L128,43.31l42.34,42.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,85.66Z\"/></svg>"), b("dots-three-outline-fill", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M156,128a28,28,0,1,1-28-28A28,28,0,0,1,156,128ZM48,100a28,28,0,1,0,28,28A28,28,0,0,0,48,100Zm160,0a28,28,0,1,0,28,28A28,28,0,0,0,208,100Z\"/></svg>"), b("plus", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z\"/></svg>"), b("microphone", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M128,176a48.05,48.05,0,0,0,48-48V64a48,48,0,0,0-96,0v64A48.05,48.05,0,0,0,128,176ZM96,64a32,32,0,0,1,64,0v64a32,32,0,0,1-64,0Zm40,143.6V240a8,8,0,0,1-16,0V207.6A80.11,80.11,0,0,1,48,128a8,8,0,0,1,16,0,64,64,0,0,0,128,0,8,8,0,0,1,16,0A80.11,80.11,0,0,1,136,207.6Z\"/></svg>"), b("arrow-up", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M205.66,117.66a8,8,0,0,1-11.32,0L136,59.31V216a8,8,0,0,1-16,0V59.31L61.66,117.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0l72,72A8,8,0,0,1,205.66,117.66Z\"/></svg>"), b("copy", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z\"/></svg>"), b("arrow-clockwise", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M240,56v48a8,8,0,0,1-8,8H184a8,8,0,0,1,0-16H211.4L184.81,71.64l-.25-.24a80,80,0,1,0-1.67,114.78,8,8,0,0,1,11,11.63A95.44,95.44,0,0,1,128,224h-1.32A96,96,0,1,1,195.75,60L224,85.8V56a8,8,0,1,1,16,0Z\"/></svg>"), b("pencil-simple", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z\"/></svg>"), b("thumbs-up", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M234,80.12A24,24,0,0,0,216,72H160V56a40,40,0,0,0-40-40,8,8,0,0,0-7.16,4.42L75.06,96H32a16,16,0,0,0-16,16v88a16,16,0,0,0,16,16H204a24,24,0,0,0,23.82-21l12-96A24,24,0,0,0,234,80.12ZM32,112H72v88H32ZM223.94,97l-12,96a8,8,0,0,1-7.94,7H88V105.89l36.71-73.43A24,24,0,0,1,144,56V80a8,8,0,0,0,8,8h64a8,8,0,0,1,7.94,9Z\"/></svg>"), b("thumbs-down", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M239.82,157l-12-96A24,24,0,0,0,204,40H32A16,16,0,0,0,16,56v88a16,16,0,0,0,16,16H75.06l37.78,75.58A8,8,0,0,0,120,240a40,40,0,0,0,40-40V184h56a24,24,0,0,0,23.82-27ZM72,144H32V56H72Zm150,21.29a7.88,7.88,0,0,1-6,2.71H152a8,8,0,0,0-8,8v24a24,24,0,0,1-19.29,23.54L88,150.11V56H204a8,8,0,0,1,7.94,7l12,96A7.87,7.87,0,0,1,222,165.29Z\"/></svg>"), b("arrow-right", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z\"/></svg>");
-export { He as NA2UI, ut as NChatAvatar, lt as NChatFeed, We as NChatInput, $ as NChatInputStructured, mt as NChatMessage, bt as NChatMessageActivity, Tt as NChatMessageGenUI, Ct as NChatMessageSeed, Y as NChatMessageText, gt as NChatMessages, st as NChatPanel };
+y("n-chat-input", Be), y("native-chat-panel", rt), y("n-chat-feed", at), y("n-chat-avatar", ot), y("n-chat-message", ut), y("n-chat-messages", ft), y("n-chat-message-text", pt), y("n-chat-message-activity", gt), y("n-chat-message-seed", yt), y("n-chat-message-genui", xt), y("n-chat-input-structured", $), y("n-textarea", d), y("n-button", e), y("n-icon", r), y("n-toolbar", f), y("n-dialog", n), y("n-container", t), y("n-listbox", i), y("n-option", a), y("n-option-group", o), y("n-option-group-header", s), y("n-select", u), b("chat-dots", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M116,128a12,12,0,1,1,12,12A12,12,0,0,1,116,128ZM84,140a12,12,0,1,0-12-12A12,12,0,0,0,84,140Zm88,0a12,12,0,1,0-12-12A12,12,0,0,0,172,140Zm60-76V192a16,16,0,0,1-16,16H83l-32.6,28.16-.09.07A15.89,15.89,0,0,1,40,240a16.13,16.13,0,0,1-6.8-1.52A15.85,15.85,0,0,1,24,224V64A16,16,0,0,1,40,48H216A16,16,0,0,1,232,64ZM40,224h0ZM216,64H40V224l34.77-30A8,8,0,0,1,80,192H216Z\"/></svg>"), b("user", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8C55.71,194.74,89.05,176,128,176s72.29,18.74,89.07,44a8,8,0,0,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z\"/></svg>"), b("stop", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M200,40H56A16,16,0,0,0,40,56V200a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,160H56V56H200V200Z\"/></svg>"), b("arrow-counter-clockwise", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z\"/></svg>"), b("caret-up-down", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M181.66,170.34a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-48-48a8,8,0,0,1,11.32-11.32L128,212.69l42.34-42.35A8,8,0,0,1,181.66,170.34Zm-96-84.68L128,43.31l42.34,42.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,85.66Z\"/></svg>"), b("dots-three-outline-fill", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M156,128a28,28,0,1,1-28-28A28,28,0,0,1,156,128ZM48,100a28,28,0,1,0,28,28A28,28,0,0,0,48,100Zm160,0a28,28,0,1,0,28,28A28,28,0,0,0,208,100Z\"/></svg>"), b("plus", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z\"/></svg>"), b("microphone", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M128,176a48.05,48.05,0,0,0,48-48V64a48,48,0,0,0-96,0v64A48.05,48.05,0,0,0,128,176ZM96,64a32,32,0,0,1,64,0v64a32,32,0,0,1-64,0Zm40,143.6V240a8,8,0,0,1-16,0V207.6A80.11,80.11,0,0,1,48,128a8,8,0,0,1,16,0,64,64,0,0,0,128,0,8,8,0,0,1,16,0A80.11,80.11,0,0,1,136,207.6Z\"/></svg>"), b("arrow-up", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M205.66,117.66a8,8,0,0,1-11.32,0L136,59.31V216a8,8,0,0,1-16,0V59.31L61.66,117.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0l72,72A8,8,0,0,1,205.66,117.66Z\"/></svg>"), b("copy", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z\"/></svg>"), b("arrow-clockwise", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M240,56v48a8,8,0,0,1-8,8H184a8,8,0,0,1,0-16H211.4L184.81,71.64l-.25-.24a80,80,0,1,0-1.67,114.78,8,8,0,0,1,11,11.63A95.44,95.44,0,0,1,128,224h-1.32A96,96,0,1,1,195.75,60L224,85.8V56a8,8,0,1,1,16,0Z\"/></svg>"), b("pencil-simple", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z\"/></svg>"), b("thumbs-up", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M234,80.12A24,24,0,0,0,216,72H160V56a40,40,0,0,0-40-40,8,8,0,0,0-7.16,4.42L75.06,96H32a16,16,0,0,0-16,16v88a16,16,0,0,0,16,16H204a24,24,0,0,0,23.82-21l12-96A24,24,0,0,0,234,80.12ZM32,112H72v88H32ZM223.94,97l-12,96a8,8,0,0,1-7.94,7H88V105.89l36.71-73.43A24,24,0,0,1,144,56V80a8,8,0,0,0,8,8h64a8,8,0,0,1,7.94,9Z\"/></svg>"), b("thumbs-down", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M239.82,157l-12-96A24,24,0,0,0,204,40H32A16,16,0,0,0,16,56v88a16,16,0,0,0,16,16H75.06l37.78,75.58A8,8,0,0,0,120,240a40,40,0,0,0,40-40V184h56a24,24,0,0,0,23.82-27ZM72,144H32V56H72Zm150,21.29a7.88,7.88,0,0,1-6,2.71H152a8,8,0,0,0-8,8v24a24,24,0,0,1-19.29,23.54L88,150.11V56H204a8,8,0,0,1,7.94,7l12,96A7.87,7.87,0,0,1,222,165.29Z\"/></svg>"), b("arrow-right", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z\"/></svg>");
+export { Re as NA2UI, ot as NChatAvatar, at as NChatFeed, Be as NChatInput, $ as NChatInputStructured, ut as NChatMessage, gt as NChatMessageActivity, xt as NChatMessageGenUI, yt as NChatMessageSeed, pt as NChatMessageText, ft as NChatMessages, rt as NChatPanel };