@nonoun/native-ai 1.0.9 → 1.0.12

package/dist/native-ai.js

@@ -20,23 +20,23 @@ function T(e) {
 function E(e) {
 	return "deleteSurface" in e;
 }
-function ee(e) {
+function D(e) {
 	return "requestCatalog" in e;
 }
-function te(e) {
+function ee(e) {
 	return "action" in e;
 }
-function ne(e) {
+function te(e) {
 	return "error" in e;
 }
-function re(e) {
+function ne(e) {
 	return "catalog" 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 D(e) {
+function O(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;
@@ -44,11 +44,126 @@ function D(e) {
 		return null;
 	}
 }
-var ie = [
+/**
+* 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 re = class e {
+	#e = /* @__PURE__ */ new Map();
+	#t = /* @__PURE__ */ new Map();
+	#n = /* @__PURE__ */ new Map();
+	#r;
+	constructor(e, t) {
+		this.#r = d(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 re([
 	{
 		a2uiType: "Text",
-		nativeTag: "n-text",
-		childStrategy: "textContent"
+		nativeTag: "span",
+		childStrategy: "textContent",
+		defaultAttributes: { class: "text" }
 	},
 	{
 		a2uiType: "Button",
@@ -150,7 +265,22 @@ var ie = [
 	},
 	{
 		a2uiType: "Card",
-		nativeTag: "n-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"
 	},
 	{
@@ -267,68 +397,7 @@ var ie = [
 		nativeTag: "n-toast",
 		childStrategy: "textContent"
 	}
-], O = /* @__PURE__ */ new Map(), k = /* @__PURE__ */ new Map();
-for (let e of ie) O.set(e.a2uiType, e), e.nativeTag !== "div" && e.nativeTag !== "span" && e.nativeTag !== "n-stack" && !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 M(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 "Text";
-	if (e === "n-stack") return t?.direction === "row" ? "Row" : "Column";
-	if (e === "div") {
-		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" : e === "hr" ? "Divider" : /^h[1-6]$/.test(e) ? "Text" : null;
-}
-var ae = {
-	h1: "h1",
-	h2: "h2",
-	h3: "h3",
-	h4: "h4",
-	h5: "h5",
-	heading: "h2",
-	caption: "small",
-	body: "n-text"
-};
-/**
-* For A2UI Text components, resolve the variant to an HTML tag.
-* Returns 'n-text' by default.
-*/
-function oe(e) {
-	return e ? ae[e] ?? "n-text" : "n-text";
-}
-/**
-* For A2UI DateTimeInput components, resolve enableDate/enableTime to HTML input type.
-*/
-function se(e, t) {
-	return e && t ? "datetime-local" : t && !e ? "time" : "date";
-}
-var ce = {
-	number: "number",
-	obscured: "password",
-	shortText: "text",
-	longText: "text"
-};
-/**
-* For A2UI TextField components, resolve the variant to an HTML input type attribute.
-*/
-function le(e) {
-	return e ? ce[e] ?? "text" : "text";
-}
-/**
-* Get all supported A2UI component types.
-*/
-function N() {
-	return Array.from(O.keys());
-}
-var ue = {
+], {
 	Text: "display",
 	Icon: "display",
 	Image: "display",
@@ -348,6 +417,9 @@ var ue = {
 	Row: "layout",
 	Column: "layout",
 	Card: "container",
+	Header: "container",
+	Body: "container",
+	Footer: "container",
 	Modal: "container",
 	Accordion: "container",
 	AccordionItem: "container",
@@ -359,19 +431,50 @@ var ue = {
 	AudioPlayer: "media",
 	Table: "data",
 	Toast: "feedback"
+}), ie = k;
+function A(e) {
+	return k.resolveNativeTag(e);
+}
+function j(e, t) {
+	return k.resolveA2UIType(e, t);
+}
+function M() {
+	return k.getSupportedTypes();
+}
+var ae = {
+	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 oe(e) {
+	return e ? ae[e] ?? "span" : "span";
+}
+/**
+* For A2UI DateTimeInput components, resolve enableDate/enableTime to HTML input type.
 */
-function P(e) {
-	return ue[e] ?? "other";
+function se(e, t) {
+	return e && t ? "datetime-local" : t && !e ? "time" : "date";
 }
+var ce = {
+	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 de(e) {
-	let t = P(e);
-	return Array.from(O.keys()).filter((e) => P(e) === t);
+function le(e) {
+	return e ? ce[e] ?? "text" : "text";
 }
 /**
 * A2UI Converter
@@ -379,8 +482,12 @@ function de(e) {
 * Bidirectional conversion between A2UI flat adjacency lists
 * and native-ui nested UINode trees.
 */
-var fe = 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 F(e, t) {
+var ue = 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(".")), de = new Set([
+	"Header",
+	"Body",
+	"Footer"
+]);
+function N(e, t) {
 	if (e.length === 0) return {
 		root: {
 			id: "empty-root",
@@ -412,118 +519,118 @@ function F(e, t) {
 		warnings: ["No root component found"],
 		orphans: []
 	};
-	let a = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Map(), s = [], c = t?.surfaceId ?? "default", l = I(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 I(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 = oe(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];
+	let l = c.nativeTag;
+	s.component === "Text" && s.variant && (l = oe(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 (S(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 = le(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 = le(s.variant);
+		e !== "text" && (u.type = e);
 	}
-	if (o.component === "DateTimeInput" && (l.type = se(o.enableDate, o.enableTime)), (o.component === "TextField" || o.component === "DateTimeInput" || o.component === "Slider") && o.label) if (S(o.label)) {
+	if (s.component === "DateTimeInput" && (u.type = se(s.enableDate, s.enableTime)), (s.component === "TextField" || s.component === "DateTimeInput" || s.component === "Slider") && s.label) if (S(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 (S(o.text)) {
+	let d;
+	if (s.text !== void 0) if (S(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)) fe.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)) ue.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) => I(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 ?? ""),
@@ -531,95 +638,125 @@ function I(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) => I(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 ? de.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 (S(o.label)) {
+		textContent: d
+	}], d = void 0;
+	else if (c.childStrategy === "textContent" && s.label && !d) if (S(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 (S(o.url)) {
+		]) u[e] && (n[e] = u[e], delete u[e]);
+		if (s.component === "Image" && s.url !== void 0) {
+			if (S(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 pe(e, t) {
-	let n = [];
-	return L(e, n, t?.surfaceId ?? "default"), n;
+function fe(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 L(e, t, n) {
-	let r = M(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) L(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) L(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 ? me(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 ? me(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 ? pe(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 ? pe(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 me(e) {
+function pe(e) {
 	let t = {};
 	for (let [n, r] of Object.entries(e)) t[r] = n;
 	return t;
@@ -627,7 +764,7 @@ function me(e) {
 /**
 * Wrap a conversion result as a UIPlan.
 */
-function R(e, t = "generated") {
+function me(e, t = "generated") {
 	return Object.freeze({
 		id: f("a2ui-plan"),
 		version: 1,
@@ -642,18 +779,18 @@ function R(e, t = "generated") {
 * Manages A2UI surface lifecycle: create → updateComponents → updateDataModel → delete.
 * Each surface maps to one UIPlan in the kernel.
 */
-function z(e, t) {
+function I(e, t) {
 	if (!t || t === "/") return e;
-	let n = t.replace(/^\//, "").split("/").map(ge), 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 he(e, t, n) {
+function L(e, t, n) {
 	if (!t || t === "/") return;
-	let r = t.replace(/^\//, "").split("/").map(ge), 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];
@@ -661,24 +798,25 @@ function he(e, t, n) {
 	let a = r[r.length - 1];
 	n === void 0 ? delete i[a] : i[a] = n;
 }
-function ge(e) {
+function R(e) {
 	return e.replace(/~1/g, "/").replace(/~0/g, "~");
 }
-var B = class {
+var z = class {
 	#e;
 	#t;
 	#n;
-	#r = /* @__PURE__ */ new Map();
-	#i = d(0);
-	surfaceCount = c(() => this.#i.value);
-	constructor(e, t, n) {
-		this.#e = e, this.#t = t, this.#n = n ?? null;
+	#r;
+	#i = /* @__PURE__ */ new Map();
+	#a = d(0);
+	surfaceCount = c(() => this.#a.value);
+	constructor(e, t, n, r) {
+		this.#e = e, this.#t = t, this.#n = n ?? null, this.#r = r;
 	}
 	handleMessage(e, t) {
-		C(e) ? this.#a(e, t) : w(e) ? this.#o(e, t) : T(e) ? this.#l(e) : E(e) && this.#u(e);
+		C(e) ? this.#o(e, t) : w(e) ? this.#s(e, t) : T(e) ? this.#u(e) : E(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;
@@ -696,10 +834,10 @@ var B = 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: f("a2ui-plan"),
@@ -710,20 +848,23 @@ var B = 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 = F(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 = R(t);
+		let n = me(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 = be(e.components, t, e.surfaceId);
+	#l(e, t) {
+		let n = ve(e.components, t, e.surfaceId, this.#r);
 		if (n.length === 0) return;
 		this.#e.patchPlan({
 			planId: e.planId,
@@ -731,45 +872,48 @@ var B = class {
 			source: "generated",
 			timestamp: Date.now()
 		});
-		let r = F(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 ?? {} : (he(a, n, r), i.dataModel.value = a);
+		!n || n === "/" ? i.dataModel.value = r ?? {} : (L(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 = u(() => {
-					let n = e.dataModel.value, r = z(n, t.path);
+					let n = e.dataModel.value, r = I(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 ? _e(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 ? he(a, e.dataModel.value) : void 0;
 			this.#t({ action: {
 				surfaceId: e.surfaceId,
 				sourceComponentId: r,
@@ -780,7 +924,7 @@ var B = class {
 		});
 	}
 	getSurface(e) {
-		let t = this.#r.get(e);
+		let t = this.#i.get(e);
 		return t ? {
 			surfaceId: t.surfaceId,
 			planId: t.planId,
@@ -791,22 +935,22 @@ var B = 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 _e(e, t) {
+function he(e, t) {
 	let n = {};
-	for (let [r, i] of Object.entries(e)) typeof i == "object" && i && "path" in i ? n[r] = z(t, i.path) : n[r] = i;
+	for (let [r, i] of Object.entries(e)) typeof i == "object" && i && "path" in i ? n[r] = I(t, i.path) : n[r] = i;
 	return n;
 }
 /** A2UI properties that map to HTML attributes on the rendered element. */
-var ve = [
+var ge = [
 	"variant",
 	"placeholder",
 	"name",
@@ -819,92 +963,95 @@ var ve = [
 	"fit",
 	"style",
 	"intent"
-], ye = ["value"];
-function be(e, t, n) {
-	let r = /* @__PURE__ */ new Map();
-	for (let t of e) r.set(t.id, t);
+], _e = ["value"];
+function ve(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 = xe(e, t);
-		if (r) {
-			let t = F([o], {
+	for (let [e, s] of a) if (!i.has(e)) {
+		let i = ye(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 = F(Se(e, t), {
+	for (let [e, s] of a) {
+		let a = i.get(e);
+		if (a) {
+			if (s.component !== a.component) {
+				let i = N(B(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 = F(Se(e, t), {
+			if (JSON.stringify(a.children ?? a.child ?? []) !== JSON.stringify(s.children ?? s.child ?? [])) {
+				let i = N(B(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 ve) {
-				let n = i[t], r = o[t];
-				r !== n && (r == null || r === !1 ? a.push({
+			for (let t of ge) {
+				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 ye) {
-				let n = i[t], r = o[t];
-				r !== n && r !== void 0 && a.push({
+			for (let t of _e) {
+				let n = a[t], r = s[t];
+				r !== n && r !== void 0 && o.push({
 					type: "set-property",
 					targetId: e,
 					name: t,
@@ -913,13 +1060,13 @@ function be(e, t, n) {
 			}
 		}
 	}
-	return a;
+	return o;
 }
-function xe(e, t) {
+function ye(e, t) {
 	for (let n of t) if (n.children?.includes(e) || n.child === e) return n.id;
 	return null;
 }
-function Se(e, t) {
+function B(e, t) {
 	let n = /* @__PURE__ */ new Map();
 	for (let e of t) n.set(e.id, e);
 	let r = [], i = /* @__PURE__ */ new Set();
@@ -934,18 +1081,18 @@ function Se(e, t) {
 	}
 	return a(e), r;
 }
-function Ce(e, t) {
-	return new B(e, t);
+function be(e, t, n) {
+	return new z(e, t, void 0, n);
 }
 var V = class {
 	#e;
 	#t;
 	constructor(e, t) {
-		this.#t = t ?? {}, this.#e = new B(e, (e) => {
+		this.#t = t ?? {}, this.#e = new z(e, (e) => {
 			this.#t.onClientMessage?.(e);
 		}, (e, t) => {
 			this.#t.onRender?.(e, t);
-		});
+		}, this.#t.registry);
 	}
 	/**
 	* Process a raw A2UI server message.
@@ -953,7 +1100,7 @@ var V = class {
 	* If a container is provided, it is used as the render target for new surfaces.
 	*/
 	receive(e, t) {
-		let n = typeof e == "string" ? D(e) : e;
+		let n = typeof e == "string" ? O(e) : e;
 		if (!n) {
 			this.#t.onClientMessage?.({ error: {
 				surfaceId: "",
@@ -962,26 +1109,26 @@ var V = class {
 			} });
 			return;
 		}
-		if (ee(n)) {
+		if (D(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: [...N()],
+			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 D(e);
+		return O(e);
 	}
 	/**
 	* Convert a UIPlan to A2UI updateComponents format.
@@ -989,11 +1136,12 @@ var V = 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: pe(e.root, r)
+			components: fe(e.root, r)
 		} };
 	}
 	/**
@@ -1015,16 +1163,16 @@ var V = class {
 	* Returns the list of A2UI component types supported by this adapter.
 	*/
 	getSupportedTypes() {
-		return N();
+		return this.#t.registry?.getSupportedTypes() ?? M();
 	}
 	destroy() {
 		this.#e.destroy();
 	}
 };
-function we(e, t) {
+function xe(e, t) {
 	return new V(e, t);
 }
-var Te = class {
+var Se = class {
 	#e;
 	#t;
 	#n;
@@ -1089,7 +1237,7 @@ var Te = class {
 			this.#o = null, this.#i !== "closed" && this.connect();
 		}, n);
 	}
-}, Ee = class {
+}, Ce = class {
 	#e;
 	#t;
 	#n;
@@ -1149,13 +1297,13 @@ var Te = class {
 		this.#i !== e && (this.#i = e, this.#n.onStateChange?.(e));
 	}
 };
-function De(e, t, n) {
-	return new Te(e, t, n);
+function we(e, t, n) {
+	return new Se(e, t, n);
 }
-function Oe(e, t, n) {
-	return new Ee(e, t, n);
+function Te(e, t, n) {
+	return new Ce(e, t, n);
 }
-function ke(e, t) {
+function Ee(e, t) {
 	e.use("a2ui", () => new V(e, t));
 }
 var H = new Set([
@@ -1169,7 +1317,7 @@ var H = new Set([
 * Find top-level `{}` blocks using brace-counting with string-escape awareness.
 * Same algorithm as the workbench's `#getEnvelopes()` method.
 */
-function Ae(e) {
+function De(e) {
 	let t = [], n = 0, r = -1, i = !1, a = !1;
 	for (let o = 0; o < e.length; o++) {
 		let s = e[o];
@@ -1202,8 +1350,8 @@ function Ae(e) {
 * const ext = linter(a2uiLinter);
 * ```
 */
-function je(e) {
-	let t = e.state.doc.toString(), n = [], r = Ae(t), i = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), o = [], s = /* @__PURE__ */ new Map();
+function Oe(e) {
+	let t = e.state.doc.toString(), n = [], r = De(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 {
@@ -1304,7 +1452,7 @@ function je(e) {
 	}
 	return n;
 }
-const Me = [
+const ke = [
 	{
 		id: "general",
 		label: "General"
@@ -7660,36 +7808,39 @@ var W = [
 	"html",
 	"css",
 	"js",
-	"components"
-], Ne = {
+	"components",
+	"schema"
+], Ae = {
 	"json-in": "IN",
 	"json-out": "OUT",
 	html: "HTML",
 	css: "CSS",
 	js: "JS",
-	components: "UI"
-}, Pe = {
+	components: "UI",
+	schema: "SCHEMA"
+}, je = {
 	"json-in": "brackets-curly",
 	"json-out": "chat-circle-dots",
 	html: "code",
 	css: "palette",
 	js: "terminal",
-	components: "squares-four"
-}, Fe = h.define(), Ie = p.line({ class: "cm-a2ui-sent" }), Le = p.line({ class: "cm-a2ui-next" }), Re = g.define({
+	components: "squares-four",
+	schema: "file-code"
+}, Me = h.define(), Ne = p.line({ class: "cm-a2ui-sent" }), Pe = p.line({ class: "cm-a2ui-next" }), Fe = g.define({
 	create() {
 		return p.none;
 	},
 	update(e, t) {
-		for (let e of t.effects) if (e.is(Fe)) {
+		for (let e of t.effects) if (e.is(Me)) {
 			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(Ie.range(n.line(e).from));
-			for (let e = Math.max(1, i); e <= Math.min(a, n.lines); e++) o.push(Le.range(n.line(e).from));
+			for (let e = 1; e <= Math.min(r, n.lines); e++) o.push(Ne.range(n.line(e).from));
+			for (let e = Math.max(1, i); e <= Math.min(a, n.lines); e++) o.push(Pe.range(n.line(e).from));
 			return p.set(o, !0);
 		}
 		return e;
 	},
 	provide: (e) => m.decorations.from(e)
-}), ze = class extends i {
+}), Ie = class extends i {
 	static observedAttributes = ["stream"];
 	#e = d("");
 	#t = d(0);
@@ -7713,17 +7864,19 @@ var W = [
 	#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;
 	}
@@ -7734,33 +7887,46 @@ var W = [
 		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 a(this, { closeButton: !1 }), this.addEventListener("native:present", this.#fe), this.addEventListener("native:dismiss", this.#pe), this.#b && (this.#O = new o(this.#b, {
+		super.setup(), this.#Z(), this.#F(), this.#j = new a(this, { closeButton: !1 }), this.addEventListener("native:present", this.#ve), this.addEventListener("native:dismiss", this.#ye), this.#x && (this.#A = new o(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 = [v()], 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;
@@ -7771,41 +7937,42 @@ var W = [
 			this.#m.value = r ? r + "\n\n" + n : n;
 		}), this.addEffect(() => {
 			let e = this.#s.value;
-			this.#h && (this.#h.value = e ? Be(e) : "");
+			this.#h && (this.#h.value = e ? Le(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: Fe.of({
+			t.dispatch({ effects: Me.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() {
-		x(), this.#T = new b({ allowUnregistered: !0 }), this.#E = we(this.#T, {
+	#F() {
+		x(), this.#D = new b({ allowUnregistered: !0 }), this.#O = xe(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", {
@@ -7817,18 +7984,44 @@ var W = [
 			}));
 		});
 	}
-	#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 = re.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,
@@ -7844,28 +8037,28 @@ var W = [
 			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",
@@ -7885,11 +8078,11 @@ var W = [
 		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 W.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;
@@ -7897,33 +8090,33 @@ var W = [
 		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) {
@@ -7942,45 +8135,45 @@ var W = [
 			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() {
-		let e = document.createElement("header"), t = document.createElement("n-toolbar");
+	#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");
 		n.setAttribute("size", "sm"), n.setAttribute("inline", "");
@@ -7988,7 +8181,7 @@ var W = [
 		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 Me) {
+		for (let e of ke) {
 			if ("hidden" in e && e.hidden) continue;
 			let t = Object.entries(U).filter(([t, n]) => n.group === e.id);
 			if (t.length === 0) continue;
@@ -8000,99 +8193,115 @@ var W = [
 			}
 			i.appendChild(n);
 		}
-		n.appendChild(i), n.addEventListener("native:change", this.#me), e.appendChild(n);
+		n.appendChild(i), n.addEventListener("native:change", this.#be), t.appendChild(n);
 		for (let e of W) {
 			let n = document.createElement("n-button");
-			n.setAttribute("variant", "ghost"), n.setAttribute("size", "sm"), n.textContent = Ne[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 = Ae[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 W) {
 			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("header"), r = document.createElement("nav"), i = document.createElement("n-icon");
-			i.setAttribute("name", Pe[e]), r.appendChild(i), n.appendChild(r);
+			let n = document.createElement("n-header"), r = document.createElement("nav"), i = document.createElement("n-icon");
+			i.setAttribute("name", je[e]), r.appendChild(i), n.appendChild(r);
 			let a = document.createElement("span");
-			a.textContent = Ne[e], n.appendChild(a);
+			a.textContent = Ae[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 o = document.createElement("n-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 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.#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 = [
 			v(),
-			Re,
-			y(je)
+			Fe,
+			y(Oe)
 		], this.#p.addEventListener("native:input", (e) => {
 			this.#e.value = e.detail.value;
 		});
 		let e = _.of([{
 			key: "Mod-s",
-			run: () => (this.#L(), !0)
+			run: () => (this.#U(), !0)
 		}]), t = _.of([{
 			key: "Mod-s",
-			run: () => (this.#R(), !0)
+			run: () => (this.#W(), !0)
 		}]);
 		this.#m && (this.#m.extensions = [v()]), this.#h && (this.#h.extensions = [e]), this.#g && (this.#g.extensions = [v(), 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;
@@ -8124,84 +8333,84 @@ var W = [
 		}
 		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");
@@ -8211,8 +8420,8 @@ var W = [
 			for (let n of e) {
 				let e = document.createElement("div");
 				e.className = "a2ui-log-entry";
-				let r = document.createElement("n-badge");
-				r.className = `a2ui-log-type a2ui-log-type--${n.type}`, r.textContent = n.type.toUpperCase();
+				let r = document.createElement("span");
+				r.className = `badge a2ui-log-type a2ui-log-type--${n.type}`, r.textContent = n.type.toUpperCase();
 				let i = document.createElement("span");
 				i.style.cssText = "opacity: 0.5; margin-left: 0.5rem; font-size: 0.75rem;";
 				let a = new Date(n.timestamp);
@@ -8224,11 +8433,11 @@ var W = [
 		}
 	}
 	/** 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");
@@ -8244,7 +8453,7 @@ var W = [
 		}
 		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");
@@ -8252,39 +8461,39 @@ var W = [
 			let o = document.createElement("td"), s = document.createElement("code");
 			s.textContent = r.nativeTag, o.appendChild(s);
 			let c = document.createElement("td");
-			c.textContent = P(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("header");
+		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", P(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) {
@@ -8296,14 +8505,14 @@ var W = [
 				a.textContent = t, n.append(r, a), i.appendChild(n);
 			}
 			e.appendChild(i);
-			let o = de(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) {
@@ -8314,29 +8523,32 @@ var W = [
 					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 = [v()], 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 = [v()], 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);
@@ -8344,7 +8556,7 @@ var W = [
 		return n;
 	}
 	/** Apply edited component JSON back into the stream envelopes and replay. */
-	#le(e) {
+	#he(e) {
 		if (!this.#_) return;
 		let t;
 		try {
@@ -8355,7 +8567,7 @@ var W = [
 		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++) {
@@ -8369,15 +8581,15 @@ var W = [
 		} 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 {
@@ -8387,41 +8599,41 @@ var W = [
 		} 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) {
+	#xe(e) {
 		if (!U[e]) return;
 		let t = U[e].envelopes.map((e) => JSON.stringify(e, null, 2)).join("\n\n");
-		this.#$(), this.stream = t, this.#X();
+		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 },
@@ -8462,15 +8674,15 @@ var W = [
 			a.dispatch({ selection: { anchor: a.state.doc.line(e).from } }), a.dispatch({ effects: m.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);
@@ -8479,11 +8691,11 @@ var W = [
 			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;
@@ -8491,19 +8703,19 @@ var W = [
 		} else if (e === "html") {
 			if (!this.#h) return;
 			let e = this.#s.value;
-			this.#h.value = e ? Be(e) : "";
+			this.#h.value = e ? Le(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 Be(e) {
+function Le(e) {
 	let t = "", n = 0, r = 0;
 	for (; r < e.length;) if (e[r] === "<") {
 		let i = e.indexOf(">", r);
@@ -8518,7 +8730,7 @@ function Be(e) {
 	}
 	return t.trimEnd();
 }
-var G = class {
+var Re = class {
 	#e = /* @__PURE__ */ new Set();
 	/** Emit an interaction event to all subscribers. */
 	emit(e) {
@@ -8534,7 +8746,7 @@ var G = class {
 	destroy() {
 		this.#e.clear();
 	}
-}, Ve = class {
+}, ze = class {
 	id;
 	agentId;
 	catalog;
@@ -8546,9 +8758,9 @@ var G = class {
 	#i;
 	#a = /* @__PURE__ */ new Map();
 	constructor(e, t, n) {
-		this.id = f("session"), this.agentId = n.agentId, this.catalog = n.catalog, this.#t = t, this.#i = new Set(n.surfaces ?? []), this.eventEmitter = new G(), this.#e = new V(e, {
+		this.id = f("session"), this.agentId = n.agentId, this.catalog = n.catalog, this.#t = t, this.#i = new Set(n.surfaces ?? []), this.eventEmitter = new Re(), this.#e = new V(e, {
 			onClientMessage: (e) => {
-				if (te(e)) {
+				if (ee(e)) {
 					let t = e.action, n = {
 						surfaceId: t.surfaceId,
 						componentId: t.sourceComponentId,
@@ -8580,9 +8792,9 @@ var G = class {
 	*/
 	receive(e) {
 		if (this.#n === "terminated") return;
-		let t = typeof e == "string" ? D(e) : e;
+		let t = typeof e == "string" ? O(e) : e;
 		if (!t) return;
-		let n = He(t);
+		let n = Be(t);
 		if (n && !this.#i.has(n) && !this.#t.isOwner(n, this)) {
 			this.#s("catalog-violation", n, "");
 			return;
@@ -8620,13 +8832,13 @@ var G = class {
 		if (n) for (let e of n) e(...t);
 	}
 };
-function He(e) {
+function Be(e) {
 	if (C(e)) return e.createSurface.surfaceId;
 	if (w(e)) return e.updateComponents.surfaceId;
 	if (T(e)) return e.updateDataModel.surfaceId;
 	if (E(e)) return e.deleteSurface.surfaceId;
 }
-var Ue = class {
+var Ve = class {
 	#e = /* @__PURE__ */ new Map();
 	#t = /* @__PURE__ */ new Set();
 	#n = /* @__PURE__ */ new Set();
@@ -8706,7 +8918,7 @@ var Ue = class {
 	destroy() {
 		this.#e.clear(), this.#t.clear(), this.#n.clear();
 	}
-}, We = class {
+}, He = class {
 	#e;
 	constructor(e) {
 		let t = /* @__PURE__ */ new Map();
@@ -8755,7 +8967,7 @@ var Ue = class {
 		});
 	}
 };
-function Ge(e) {
+function Ue(e) {
 	return {
 		a2uiType: e.a2uiType,
 		tagName: e.nativeTag,
@@ -8768,23 +8980,23 @@ function Ge(e) {
 * - `'core-only'`: excludes `native-dashboard-*` elements (recommended default)
 * - `'full'`: all registered component types
 */
-function K(e = "core-only") {
+function G(e = "core-only") {
 	let t = [];
-	for (let [n, r] of A) e === "core-only" && r.nativeTag.startsWith("native-dashboard-") || t.push(Ge(r));
-	return new We(t);
+	for (let [n, r] of ie) e === "core-only" && r.nativeTag.startsWith("native-dashboard-") || t.push(Ue(r));
+	return new He(t);
 }
-var Ke = class {
+var We = class {
 	surfaces;
 	#e;
 	#t = /* @__PURE__ */ new Map();
 	constructor(e) {
-		this.#e = e, this.surfaces = new Ue();
+		this.#e = e, this.surfaces = new Ve();
 	}
 	/** Create a new agent session with the given configuration. */
 	createSession(e) {
 		let t;
-		t = e.catalog === "full" ? K("full") : e.catalog === "core-only" ? K("core-only") : e.catalog;
-		let n = new Ve(this.#e, this.surfaces, {
+		t = e.catalog === "full" ? G("full") : e.catalog === "core-only" ? G("core-only") : e.catalog;
+		let n = new ze(this.#e, this.surfaces, {
 			agentId: e.agentId,
 			catalog: t,
 			surfaces: e.surfaces
@@ -8823,7 +9035,7 @@ var Ke = class {
 	destroy() {
 		this.terminateAll(), this.surfaces.destroy();
 	}
-}, qe = class {
+}, Ge = class {
 	type = "direct";
 	#e;
 	#t = null;
@@ -8860,7 +9072,7 @@ var Ke = class {
 	async disconnect() {
 		this.#r?.(), this.#r = null, this.#n && this.#t && this.#t.sessionManager.terminateSession(this.#n.id), this.#n = null, this.#t = null;
 	}
-}, Je = class {
+}, Ke = class {
 	type = "a2a";
 	#e;
 	#t = null;
@@ -8902,7 +9114,7 @@ var Ke = class {
 	#a() {
 		let e = this.#e.endpoint;
 		this.#r = new EventSource(e), this.#r.onmessage = (e) => {
-			let t = D(e.data);
+			let t = O(e.data);
 			t && this.#n?.receive(t);
 		}, this.#r.onerror = () => {};
 	}
@@ -8922,7 +9134,7 @@ var Ke = class {
 			});
 		} catch {}
 	}
-}, Ye = class {
+}, qe = class {
 	type = "ag-ui";
 	#e;
 	#t = null;
@@ -8955,13 +9167,13 @@ var Ke = class {
 	}
 	#a(e, t) {
 		if (e.type === t && e.data) {
-			let t = D(typeof e.data == "string" ? e.data : JSON.stringify(e.data));
+			let t = O(typeof e.data == "string" ? e.data : JSON.stringify(e.data));
 			t && this.#n?.receive(t);
 			return;
 		}
 		e.type === "RUN_FINISHED" || e.type;
 	}
-}, Xe = class extends i {
+}, Je = class extends i {
 	static observedAttributes = [
 		"disabled",
 		"busy",
@@ -9091,7 +9303,7 @@ var Ke = class {
 			})) && !this.hasAttribute("no-auto-clear") && (this.value = "", this.#i?.setAttribute("disabled", ""));
 		}
 	}
-}, Ze = class extends i {
+}, Ye = class extends i {
 	static MAX_CONTEXT_MESSAGES = 50;
 	static observedAttributes = [
 		"show-stop",
@@ -9259,7 +9471,7 @@ var Ke = class {
 	}
 	setup() {
 		super.setup(), this.hasAttribute("open") && (this.#r.value = !0);
-		let i = document.createElement("header");
+		let i = document.createElement("n-header");
 		i.setAttribute("dividers", "");
 		let a = document.createElement("nav"), o = document.createElement("n-icon");
 		o.setAttribute("name", "chat-dots"), a.appendChild(o), i.appendChild(a);
@@ -9267,9 +9479,9 @@ var Ke = class {
 		s.textContent = "Assistant", i.appendChild(s);
 		let c = document.createElement("aside");
 		c.className = "n-chat-panel-header-trailing", i.appendChild(c), this.#v = c;
-		let l = document.createElement("section"), u = document.createElement("n-chat-content"), d = document.createElement("n-chat-feed");
+		let l = document.createElement("n-body"), u = document.createElement("n-chat-content"), d = document.createElement("n-chat-feed");
 		d.setAttribute("auto-scroll", ""), u.appendChild(d), this.#h = d, l.appendChild(u);
-		let f = document.createElement("footer");
+		let f = document.createElement("n-footer");
 		f.setAttribute("dividers", ""), this.#m = f;
 		let p = document.createElement("n-chat-input"), m = document.createElement("n-textarea");
 		m.setAttribute("placeholder", "Ask anything"), m.setAttribute("autogrow", ""), m.setAttribute("rows", "3"), p.appendChild(m);
@@ -9610,7 +9822,7 @@ var Ke = class {
 	#B() {
 		this.#b &&= (this.#b.removeEventListener("native:change", this.#M), this.#b.remove(), null), this.#x = null;
 	}
-}, Qe = 40, $e = class extends i {
+}, Xe = 40, Ze = class extends i {
 	static observedAttributes = [
 		"auto-scroll",
 		"scrollable",
@@ -9719,7 +9931,7 @@ var Ke = class {
 		}
 	}
 	#f = () => {
-		let e = this.#n.value, t = this.scrollTop + this.clientHeight >= this.scrollHeight - Qe;
+		let e = this.#n.value, t = this.scrollTop + this.clientHeight >= this.scrollHeight - Xe;
 		this.#n.value = t, t !== e && this.dispatchEvent(new CustomEvent("native:feed-scroll", {
 			bubbles: !0,
 			composed: !0,
@@ -9737,7 +9949,7 @@ var Ke = class {
 			});
 		});
 	};
-}, et = class extends i {
+}, Qe = class extends i {
 	static observedAttributes = [
 		"src",
 		"name",
@@ -9777,7 +9989,7 @@ var Ke = class {
 			}
 			if (n) {
 				let e = document.createElement("span");
-				e.className = "n-chat-avatar-initials", e.textContent = tt(n), e.setAttribute("aria-hidden", "true"), this.appendChild(e);
+				e.className = "n-chat-avatar-initials", e.textContent = $e(n), e.setAttribute("aria-hidden", "true"), this.appendChild(e);
 				return;
 			}
 			let r = document.createElement("n-icon");
@@ -9788,11 +10000,11 @@ var Ke = class {
 		this.textContent = "", super.teardown();
 	}
 };
-function tt(e) {
+function $e(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 nt = {
+const et = {
 	copy: {
 		label: "Copy",
 		icon: "copy"
@@ -9817,7 +10029,7 @@ const nt = {
 		label: "Continue",
 		icon: "arrow-right"
 	}
-}, rt = {
+}, tt = {
 	assistant: [
 		"copy",
 		"retry",
@@ -9842,7 +10054,7 @@ const nt = {
 * @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 it = class extends i {
+var nt = class extends i {
 	static observedAttributes = [
 		"data-role",
 		"message-id",
@@ -9961,12 +10173,12 @@ var it = class extends i {
 	#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) : rt[e] ?? [], i === "partial" && !a.includes("continue") && (a = [...a, "continue"]), a.length === 0) return;
+		if (a = t ? t.split(",").map((e) => e.trim()).filter(Boolean) : tt[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 = nt[e];
-			t && o.appendChild(at(e, t, n));
+			let t = et[e];
+			t && o.appendChild(rt(e, t, n));
 		}
 		if (o.children.length !== 0) {
 			if (o.addEventListener("native:press", this.#m), r === "below") {
@@ -9999,7 +10211,7 @@ var it = class extends i {
 		}
 	};
 };
-function at(e, t, n) {
+function rt(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");
@@ -10036,7 +10248,7 @@ function at(e, t, n) {
 * @attr {string} sender - Display name of the sender
 * @attr {string} avatar-align - `"top"` | `"center"` | `"bottom"` (default) — avatar vertical alignment
 */
-var ot = class extends i {
+var it = class extends i {
 	static observedAttributes = [
 		"data-role",
 		"sender",
@@ -10079,7 +10291,7 @@ var ot = class extends i {
 		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;
 	}
-}, st = class extends i {
+}, at = class extends i {
 	static observedAttributes = ["format"];
 	#e = d("markdown");
 	#t = d("");
@@ -10105,7 +10317,7 @@ var ot = class extends i {
 			!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 = lt(Y(e)));
+					this.#n && (this.#n.innerHTML = st(J(e)));
 				})));
 			});
 		});
@@ -10113,7 +10325,7 @@ var ot = class extends i {
 	teardown() {
 		cancelAnimationFrame(this.#r), this.#n = null, super.teardown();
 	}
-}, ct = new Set([
+}, ot = new Set([
 	"p",
 	"br",
 	"strong",
@@ -10133,14 +10345,14 @@ var ot = class extends i {
 	"blockquote",
 	"hr"
 ]);
-function q(e) {
+function K(e) {
 	return e.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#39;");
 }
-function J(e) {
-	let t = q(e);
+function q(e) {
+	let t = K(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 Y(e) {
+function J(e) {
 	if (!e) return "";
 	let t = e.split("\n"), n = [], r = 0;
 	for (; r < t.length;) {
@@ -10149,14 +10361,14 @@ function Y(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="${q(i)}"` : "";
-			n.push(`<pre${o}><code>${q(a.join("\n"))}</code></pre>`);
+			let o = i ? ` data-lang="${K(i)}"` : "";
+			n.push(`<pre${o}><code>${K(a.join("\n"))}</code></pre>`);
 			continue;
 		}
 		let i = e.match(/^(#{1,6})\s+(.+)/);
 		if (i) {
 			let e = i[1].length;
-			n.push(`<h${e}>${J(i[2])}</h${e}>`), r += 1;
+			n.push(`<h${e}>${q(i[2])}</h${e}>`), r += 1;
 			continue;
 		}
 		if (/^---+$/.test(e.trim()) || /^\*\*\*+$/.test(e.trim())) {
@@ -10166,19 +10378,19 @@ function Y(e) {
 		if (e.startsWith("> ")) {
 			let e = [];
 			for (; r < t.length && t[r].startsWith("> ");) e.push(t[r].slice(2)), r += 1;
-			n.push(`<blockquote>${Y(e.join("\n"))}</blockquote>`);
+			n.push(`<blockquote>${J(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>${J(e)}</li>`).join("") + "</ul>");
+			n.push("<ul>" + e.map((e) => `<li>${q(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>${J(e)}</li>`).join("") + "</ol>");
+			n.push("<ol>" + e.map((e) => `<li>${q(e)}</li>`).join("") + "</ol>");
 			continue;
 		}
 		if (!e.trim()) {
@@ -10187,15 +10399,15 @@ function Y(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>${J(a.join("\n"))}</p>`);
+		a.length > 0 && n.push(`<p>${q(a.join("\n"))}</p>`);
 	}
 	return n.join("");
 }
 /** Sanitize rendered HTML — strip any tags not in allowlist. */
-function lt(e) {
+function st(e) {
 	return e.replace(/<\/?([a-zA-Z][a-zA-Z0-9]*)[^>]*>/g, (e, t) => {
 		let n = t.toLowerCase();
-		return ct.has(n) ? e : "";
+		return ot.has(n) ? e : "";
 	});
 }
 /**
@@ -10216,7 +10428,7 @@ function lt(e) {
 * @attr {boolean} expandable - Allow click to expand trace content
 * @fires native:activity-toggle - Fired when trace is expanded/collapsed
 */
-var ut = class extends i {
+var ct = class extends i {
 	static observedAttributes = [
 		"type",
 		"label",
@@ -10274,7 +10486,7 @@ var ut = class extends i {
 			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 || dt(this.#t.value);
+			let e = this.#n.value || lt(this.#t.value);
 			this.#c.textContent = e;
 		}), this.addEffect(() => {
 			this.#u && (this.#u.hidden = !this.#r.value);
@@ -10304,7 +10516,7 @@ var ut = class extends i {
 	#h = () => {
 		if (!this.#r.value || !this.#l) return;
 		let e = performance.now() - this.#o;
-		this.#l.textContent = ft(e), this.#s = requestAnimationFrame(this.#h);
+		this.#l.textContent = ut(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", {
@@ -10314,14 +10526,14 @@ var ut = class extends i {
 		})));
 	};
 };
-function dt(e) {
+function lt(e) {
 	switch (e) {
 		case "thinking": return "Thinking…";
 		case "tool-use": return "Using tools…";
 		default: return "Host is typing…";
 	}
 }
-function ft(e) {
+function ut(e) {
 	let t = Math.floor(e / 1e3);
 	if (t < 60) return `${t}s`;
 	let n = Math.floor(t / 60), r = t % 60;
@@ -10341,7 +10553,7 @@ function ft(e) {
 * @attr {boolean} disabled - Disables all chips
 * @fires native:seed-select - Fired when a chip is clicked
 */
-var pt = class extends i {
+var dt = class extends i {
 	static observedAttributes = ["options", "disabled"];
 	#e;
 	#t = d([]);
@@ -10382,8 +10594,8 @@ var pt = class extends i {
 		super.setup(), this.addEffect(l(this, this.#n, this.#e)), this.addEffect(() => {
 			let e = this.#t.value;
 			this.textContent = "";
-			let t = document.createElement("n-stack");
-			t.setAttribute("direction", "row"), t.setAttribute("wrap", "");
+			let t = document.createElement("div");
+			t.className = "stack", t.setAttribute("direction", "row"), t.setAttribute("wrap", "");
 			for (let n of e) {
 				let e = document.createElement("n-button");
 				if (e.setAttribute("variant", "outline"), e.setAttribute("size", "sm"), e.setAttribute("inline", ""), e.setAttribute("data-value", n.value), n.icon) {
@@ -10413,7 +10625,7 @@ var pt = class extends i {
 			}
 		}));
 	};
-}, mt = new Set([
+}, ft = new Set([
 	"script",
 	"style",
 	"link",
@@ -10430,7 +10642,7 @@ var pt = class extends i {
 	"frame",
 	"frameset",
 	"noscript"
-]), ht = class extends i {
+]), pt = class extends i {
 	static observedAttributes = ["schema-type", "mode"];
 	#e;
 	#t = d("a2ui");
@@ -10476,7 +10688,7 @@ var pt = class extends i {
 		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 = gt(e);
+			let n = mt(e);
 			if (n.length > 0) {
 				this.#o(n), this.dispatchEvent(new CustomEvent("native:genui-error", {
 					bubbles: !0,
@@ -10487,7 +10699,7 @@ var pt = class extends i {
 			}
 			if (t === "lightbox") this.#s(e);
 			else {
-				let t = X(e);
+				let t = Y(e);
 				t && this.#i.appendChild(t);
 			}
 			this.#e.states.add("rendered");
@@ -10503,7 +10715,7 @@ var pt = class extends i {
 	}
 	#s(e) {
 		if (!this.#i) return;
-		let t = document.createElement("n-card");
+		let t = document.createElement("n-container");
 		t.dataset.role = "preview";
 		let n = document.createElement("span");
 		n.textContent = `Interactive UI (${e.tag})`, t.appendChild(n);
@@ -10512,7 +10724,7 @@ var pt = class extends i {
 	}
 	#c(e) {
 		this.#l();
-		let t = document.createElement("n-dialog"), n = X(e);
+		let t = document.createElement("n-dialog"), n = Y(e);
 		n && t.appendChild(n), this.appendChild(t), this.#a = t, requestAnimationFrame(() => {
 			let e = t.querySelector("dialog");
 			e && e.showModal();
@@ -10540,20 +10752,20 @@ var pt = class extends i {
 		}));
 	};
 };
-function gt(e, t = 0) {
+function mt(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 (mt.has(e.tag.toLowerCase()) && n.push(`Forbidden tag: <${e.tag}>`), e.children) for (let r of e.children) n.push(...gt(r, t + 1));
+	if (ft.has(e.tag.toLowerCase()) && n.push(`Forbidden tag: <${e.tag}>`), e.children) for (let r of e.children) n.push(...mt(r, t + 1));
 	return n;
 }
-function X(e) {
-	if (mt.has(e.tag.toLowerCase())) return null;
+function Y(e) {
+	if (ft.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;
 	if (e.text && (t.textContent = e.text), e.children) for (let n of e.children) {
-		let e = X(n);
+		let e = Y(n);
 		e && t.appendChild(e);
 	}
 	return t;
@@ -10578,7 +10790,7 @@ function X(e) {
 * @fires native:structured-submit - Fired on submit with selections
 * @fires native:structured-cancel - Fired when dismissed without selecting
 */
-var _t = class extends i {
+var ht = class extends i {
 	static observedAttributes = [
 		"question",
 		"type",
@@ -10667,8 +10879,8 @@ var _t = class extends i {
 			let t = document.createElement("div");
 			t.className = "n-chat-structured-question", t.textContent = e, this.appendChild(t);
 		}
-		let r = document.createElement("n-stack");
-		r.setAttribute("direction", "row"), r.setAttribute("wrap", ""), r.setAttribute("role", n === "multi" ? "group" : "radiogroup");
+		let r = document.createElement("div");
+		r.className = "stack", r.setAttribute("direction", "row"), r.setAttribute("wrap", ""), r.setAttribute("role", n === "multi" ? "group" : "radiogroup");
 		for (let e of t) {
 			let t = document.createElement("n-button");
 			if (t.setAttribute("variant", "outline"), t.setAttribute("data-value", e.value), t.setAttribute("aria-pressed", "false"), e.icon) {
@@ -10719,7 +10931,7 @@ var _t = class extends i {
 * Reads `data:` lines from the response body, skips empty lines and comments,
 * handles the `[DONE]` sentinel, and accumulates the full message across chunks.
 */
-async function* vt(e) {
+async function* gt(e) {
 	let t = e.body.getReader(), n = new TextDecoder("utf-8"), r = "", i = "";
 	try {
 		for (;;) {
@@ -10799,7 +11011,7 @@ async function* vt(e) {
 * Each non-empty line is parsed as a standalone JSON object.
 * Accumulates the full message across chunks.
 */
-async function* yt(e) {
+async function* _t(e) {
 	let t = e.body.getReader(), n = new TextDecoder("utf-8"), r = "", i = "";
 	try {
 		for (;;) {
@@ -10860,7 +11072,7 @@ async function* yt(e) {
 * Reads the entire response body, parses as JSON, and yields one chunk
 * with `done: true`.
 */
-async function* bt(e) {
+async function* vt(e) {
 	let t = await e.json(), n = "";
 	typeof t.content == "string" ? n = t.content : typeof t.message == "string" ? n = t.message : typeof t.delta == "string" ? n = t.delta : Array.isArray(t.choices) && typeof t.choices[0]?.message?.content == "string" && (n = t.choices[0].message.content), yield {
 		delta: n,
@@ -10877,25 +11089,25 @@ async function* bt(e) {
 * - `error` — an error occurred during streaming
 * - `stopped` — consumer aborted the stream
 */
-function xt(e, t) {
+function yt(e, t) {
 	return t ? t.name === "AbortError" ? "stopped" : "error" : e.partial ? "partial" : "complete";
 }
 /**
 * Classify an HTTP status code into a transport state.
 */
-function St(e) {
+function bt(e) {
 	return e === 401 || e === 403 ? "auth-required" : e === 429 ? "rate-limited" : "server-error";
 }
 /**
 * Calculate exponential backoff delay with jitter.
 */
-function Z(e, t = 1e3, n = 3e4) {
+function X(e, t = 1e3, n = 3e4) {
 	return Math.min(n, t * 2 ** e + Math.random() * 500);
 }
 /**
 * Detect the stream format from a Content-Type header value.
 */
-function Ct(e) {
+function xt(e) {
 	let t = e.toLowerCase();
 	return t.includes("text/event-stream") ? "sse" : t.includes("ndjson") || t.includes("x-ndjson") ? "ndjson" : "json";
 }
@@ -10903,16 +11115,16 @@ function Ct(e) {
 * Create an async generator that yields ChatStreamChunk values from a
 * Response, auto-detecting the format from Content-Type when not specified.
 */
-async function* wt(e, t) {
-	switch (t ?? Ct(e.headers.get("content-type") ?? "")) {
+async function* Z(e, t) {
+	switch (t ?? xt(e.headers.get("content-type") ?? "")) {
 		case "sse":
-			yield* vt(e);
+			yield* gt(e);
 			break;
 		case "ndjson":
-			yield* yt(e);
+			yield* _t(e);
 			break;
 		case "json":
-			yield* bt(e);
+			yield* vt(e);
 			break;
 	}
 }
@@ -10920,7 +11132,7 @@ async function* wt(e, t) {
 * Create a reusable chat transport that sends requests and returns a
 * streaming async generator. Supports retry/backoff and transport state callbacks.
 */
-function Tt(e) {
+function St(e) {
 	let t = (t) => {
 		e.onStateChange?.(t);
 	}, n = e.retry?.maxAttempts ?? 1, r = e.retry?.baseDelayMs ?? 1e3, i = e.retry?.maxDelayMs ?? 3e4;
@@ -10952,19 +11164,19 @@ function Tt(e) {
 					attempt: c,
 					maxAttempts: n
 				}), c + 1 < n) {
-					let e = Z(c, r, i);
+					let e = X(c, r, i);
 					t({
 						state: "retrying",
 						retryInMs: e,
 						attempt: c + 1,
 						maxAttempts: n
-					}), await Dt(e);
+					}), await wt(e);
 					continue;
 				}
 				break;
 			}
 			if (!l.ok) {
-				let e = St(l.status);
+				let e = bt(l.status);
 				s = /* @__PURE__ */ Error(`Chat transport error: ${l.status} ${l.statusText}`);
 				let a;
 				if (l.status === 429) {
@@ -10982,18 +11194,18 @@ function Tt(e) {
 					attempt: c,
 					maxAttempts: n
 				}), (l.status === 429 || l.status >= 500) && c + 1 < n) {
-					let e = a ?? Z(c, r, i);
+					let e = a ?? X(c, r, i);
 					t({
 						state: "retrying",
 						retryInMs: e,
 						attempt: c + 1,
 						maxAttempts: n
-					}), await Dt(e);
+					}), await wt(e);
 					continue;
 				}
 				break;
 			}
-			return t({ state: "streaming" }), Et(wt(l, e.format), t);
+			return t({ state: "streaming" }), Ct(Z(l, e.format), t);
 		}
 		throw s ?? /* @__PURE__ */ Error("Chat transport failed");
 	} };
@@ -11001,7 +11213,7 @@ function Tt(e) {
 /**
 * Wraps an async generator to emit `ready` state when the stream finishes.
 */
-async function* Et(e, t) {
+async function* Ct(e, t) {
 	try {
 		yield* e, t({ state: "ready" });
 	} catch (e) {
@@ -11011,7 +11223,7 @@ async function* Et(e, t) {
 		}), e;
 	}
 }
-function Dt(e) {
+function wt(e) {
 	return new Promise((t) => setTimeout(t, e));
 }
 const Q = {
@@ -11021,7 +11233,7 @@ const Q = {
 	GENERATION_STOP: "native:generation-stop",
 	GENERATION_ERROR: "native:generation-error",
 	WARNING: "native:chat-warning"
-}, Ot = [
+}, Tt = [
 	"requestId",
 	"sessionId",
 	"conversationId",
@@ -11034,7 +11246,7 @@ const Q = {
 	"attempt",
 	"maxAttempts",
 	"chunkIndex"
-], kt = [
+], Et = [
 	"query",
 	"message",
 	"delta",
@@ -11044,17 +11256,17 @@ const Q = {
 	"prompt",
 	"response"
 ];
-var At = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g, jt = /\b(?:\+?\d{1,3}[-.\s]?)?\(?\d{2,4}\)?[-.\s]?\d{3,4}[-.\s]?\d{3,4}\b/g, Mt = /\b(?:\d{4}[-\s]?){3}\d{4}\b/g;
+var Dt = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g, Ot = /\b(?:\+?\d{1,3}[-.\s]?)?\(?\d{2,4}\)?[-.\s]?\d{3,4}[-.\s]?\d{3,4}\b/g, kt = /\b(?:\d{4}[-\s]?){3}\d{4}\b/g;
 /**
 * Scrub common PII patterns from a string.
 *
 * Replaces email addresses, phone-like numbers, and credit-card-like
 * number sequences with `[redacted]` placeholders.
 */
-function Nt(e) {
-	return e.replace(At, "[redacted:email]").replace(Mt, "[redacted:card]").replace(jt, "[redacted:phone]");
+function At(e) {
+	return e.replace(Dt, "[redacted:email]").replace(kt, "[redacted:card]").replace(Ot, "[redacted:phone]");
 }
-var Pt = new Set(kt);
+var jt = new Set(Et);
 /**
 * Create a default redactor for the given telemetry level.
 *
@@ -11066,7 +11278,7 @@ function $(e) {
 	return e === "debug" ? (e) => e : (e) => {
 		if (!e.detail) return e;
 		let t = {};
-		for (let [n, r] of Object.entries(e.detail)) Pt.has(n) && typeof r == "string" ? t[n] = `[redacted:${r.length}chars]` : t[n] = r;
+		for (let [n, r] of Object.entries(e.detail)) jt.has(n) && typeof r == "string" ? t[n] = `[redacted:${r.length}chars]` : t[n] = r;
 		return {
 			...e,
 			detail: t
@@ -11077,7 +11289,7 @@ function $(e) {
 * Dispatches telemetry events as `CustomEvent` instances on a given
 * `EventTarget`, applying a configurable redactor before emission.
 */
-var Ft = class {
+var Mt = class {
 	#e;
 	#t;
 	constructor(e, t = "minimal") {
@@ -11137,4 +11349,4 @@ var Ft = class {
 		});
 	}
 };
-export { Je as A2AAdapter, V as A2UIAdapter, nt as ACTION_REGISTRY, Ye as AGUIAdapter, Q as CHAT_EVENTS, A as COMPONENT_MAP, qe as DirectAdapter, ze as NA2UI, Ve as NAgentSession, We as NCatalog, et as NChatAvatar, $e as NChatFeed, Xe as NChatInput, _t as NChatInputStructured, it as NChatMessage, ut as NChatMessageActivity, ht as NChatMessageGenUI, pt as NChatMessageSeed, st as NChatMessageText, ot as NChatMessages, Ze as NChatPanel, G as NEventEmitter, Ke as NSessionManager, Ue as NSurfaceRegistry, rt as ROLE_DEFAULTS, Ot as SAFE_FIELDS, kt as SENSITIVE_FIELDS, Ee as SSETransport, B as SurfaceManager, Ft as TelemetryEmitter, Te as WebSocketTransport, F as a2uiToUINode, Z as backoffDelay, K as buildCatalogFromRegistry, St as classifyHttpError, xt as classifyStreamEnd, R as conversionToPlan, we as createA2UIAdapter, wt as createChatStream, Tt as createChatTransport, $ as createDefaultRedactor, Oe as createSSETransport, Ce as createSurfaceManager, De as createWebSocketTransport, se as dateTimeInputType, Ct as detectFormat, N as getSupportedTypes, ke as installA2UI, te as isActionMessage, ee as isCatalogRequest, re as isCatalogResponse, C as isCreateSurface, S as isDataBinding, E as isDeleteSurface, ne as isErrorMessage, w as isUpdateComponents, T as isUpdateDataModel, bt as parseJSON, yt as parseNDJSON, vt as parseSSE, D as parseServerMessage, J as renderInline, Y as renderMarkdown, M as resolveA2UIType, z as resolveJsonPointer, j as resolveNativeTag, lt as sanitizeHtml, Nt as scrubPII, he as setJsonPointer, le as textFieldInputType, oe as textVariantTag, pe as uiNodeToA2UI };
+export { Ke as A2AAdapter, V as A2UIAdapter, et as ACTION_REGISTRY, qe as AGUIAdapter, Q as CHAT_EVENTS, ie as COMPONENT_MAP, Ge as DirectAdapter, Ie as NA2UI, ze as NAgentSession, He as NCatalog, Qe as NChatAvatar, Ze as NChatFeed, Je as NChatInput, ht as NChatInputStructured, nt as NChatMessage, ct as NChatMessageActivity, pt as NChatMessageGenUI, dt as NChatMessageSeed, at as NChatMessageText, it as NChatMessages, Ye as NChatPanel, Re as NEventEmitter, We as NSessionManager, Ve as NSurfaceRegistry, tt as ROLE_DEFAULTS, Tt as SAFE_FIELDS, Et as SENSITIVE_FIELDS, Ce as SSETransport, z as SurfaceManager, Mt as TelemetryEmitter, Se as WebSocketTransport, N as a2uiToUINode, X as backoffDelay, G as buildCatalogFromRegistry, bt as classifyHttpError, yt as classifyStreamEnd, me as conversionToPlan, xe as createA2UIAdapter, Z as createChatStream, St as createChatTransport, $ as createDefaultRedactor, Te as createSSETransport, be as createSurfaceManager, we as createWebSocketTransport, se as dateTimeInputType, xt as detectFormat, M as getSupportedTypes, Ee as installA2UI, ee as isActionMessage, D as isCatalogRequest, ne as isCatalogResponse, C as isCreateSurface, S as isDataBinding, E as isDeleteSurface, te as isErrorMessage, w as isUpdateComponents, T as isUpdateDataModel, vt as parseJSON, _t as parseNDJSON, gt as parseSSE, O as parseServerMessage, q as renderInline, J as renderMarkdown, j as resolveA2UIType, I as resolveJsonPointer, A as resolveNativeTag, st as sanitizeHtml, At as scrubPII, L as setJsonPointer, le as textFieldInputType, oe as textVariantTag, fe as uiNodeToA2UI };