@geajs/ui 0.1.1 → 0.1.3

package/dist/index.mjs

@@ -46,9 +46,15 @@ var ZagComponent = class extends Component {
 	created(props) {
 		if (!this._spreadCleanups) this._spreadCleanups = /* @__PURE__ */ new Map();
 		if (this._spreadScheduled === void 0) this._spreadScheduled = false;
+		if (!this._zagIdMap) this._zagIdMap = /* @__PURE__ */ new Map();
 		const machineDef = this.createMachine(props);
 		if (!machineDef) return;
 		this._machine = new VanillaMachine(machineDef, this.getMachineProps(props));
+		const zagIdMap = this._zagIdMap;
+		const origGetById = this._machine.scope.getById;
+		this._machine.scope.getById = (id) => {
+			return origGetById(id) || zagIdMap.get(id) || null;
+		};
 		this._machine.start();
 		this._api = this.connectApi(this._machine.service);
 		this.syncState(this._api);
@@ -101,11 +107,20 @@ var ZagComponent = class extends Component {
 				const key = selector + ":" + i;
 				const nextProps = this._resolveProps(getter, el);
 				if (!nextProps) continue;
+				const bindingId = el.id;
 				const cleanup = spreadProps(el, nextProps);
+				if (bindingId && el.id !== bindingId) {
+					this._zagIdMap.set(el.id, el);
+					el.id = bindingId;
+				}
 				this._spreadCleanups.set(key, cleanup);
 			}
 		}
 	}
+	__geaSyncMap(idx) {
+		super.__geaSyncMap(idx);
+		this._scheduleSpreadApplication();
+	}
 	onAfterRender() {
 		this._cacheArrayContainers();
 		this._applyAllSpreads();
@@ -127,6 +142,7 @@ var ZagComponent = class extends Component {
 			this._machine = null;
 		}
 		this._api = null;
+		this._zagIdMap?.clear();
 		super.dispose();
 	}
 	static {
@@ -186,25 +202,30 @@ var Accordion = class extends ZagComponent {
 		this.value = api.value;
 	}
 	template(props) {
+		Component._register(ZagComponent);
 		const items = props.items || [];
-		return `<div id="${this.id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}>${items.map((item) => `<div data-gea-item-id="${String(item)}" data-part="item"${item.value == null ? "" : ` data-value="${item.value}"`} class="accordion-item border-b"><h3><button data-part="item-trigger"${item.value == null ? "" : ` data-value="${item.value}"`} class="accordion-trigger flex w-full items-center justify-between py-4 text-sm font-medium transition-all">${item.label}<span data-part="item-indicator"${item.value == null ? "" : ` data-value="${item.value}"`} class="accordion-indicator h-4 w-4 shrink-0 transition-transform duration-200">▶</span></button></h3><div data-part="item-content"${item.value == null ? "" : ` data-value="${item.value}"`} class="accordion-content overflow-hidden text-sm"><div class="pb-4 pt-0">${item.content}</div></div></div>`).join("") + "<!---->"}</div>`;
+		return `<div id="${this.id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}>${items.map((item) => `<div data-gea-item-id="${item.value}" data-part="item"${item.value == null || item.value === false ? "" : ` data-value="${item.value}"`} class="accordion-item border-b"><h3><button data-part="item-trigger"${item.value == null || item.value === false ? "" : ` data-value="${item.value}"`} class="accordion-trigger flex w-full items-center justify-between py-4 text-sm font-medium transition-all">${item.label}<span data-part="item-indicator"${item.value == null || item.value === false ? "" : ` data-value="${item.value}"`} class="accordion-indicator h-4 w-4 shrink-0 transition-transform duration-200">▶</span></button></h3><div data-part="item-content"${item.value == null || item.value === false ? "" : ` data-value="${item.value}"`} class="accordion-content overflow-hidden text-sm"><div class="pb-4 pt-0">${item.content}</div></div></div>`).join("") + "<!---->"}</div>`;
 	}
 	render__unresolved_0Item(item) {
 		const __v = (v) => v != null && typeof v === "object" ? v.valueOf() : v;
-		return `<div data-gea-item-id="${String(item)}" data-part="item"${__v(item.value) == __v(null) ? "" : ` data-value="${item.value}"`} class="accordion-item border-b"><h3><button data-part="item-trigger"${__v(item.value) == __v(null) ? "" : ` data-value="${item.value}"`} class="accordion-trigger flex w-full items-center justify-between py-4 text-sm font-medium transition-all">${item.label}<span data-part="item-indicator"${__v(item.value) == __v(null) ? "" : ` data-value="${item.value}"`} class="accordion-indicator h-4 w-4 shrink-0 transition-transform duration-200">▶</span></button></h3><div data-part="item-content"${__v(item.value) == __v(null) ? "" : ` data-value="${item.value}"`} class="accordion-content overflow-hidden text-sm"><div class="pb-4 pt-0">${item.content}</div></div></div>`;
+		return `<div data-gea-item-id="${item.value}" data-part="item"${__v(item.value) == null || __v(item.value) === false ? "" : ` data-value="${item.value}"`} class="accordion-item border-b"><h3><button data-part="item-trigger"${__v(item.value) == null || __v(item.value) === false ? "" : ` data-value="${item.value}"`} class="accordion-trigger flex w-full items-center justify-between py-4 text-sm font-medium transition-all">${item.label}<span data-part="item-indicator"${__v(item.value) == null || __v(item.value) === false ? "" : ` data-value="${item.value}"`} class="accordion-indicator h-4 w-4 shrink-0 transition-transform duration-200">▶</span></button></h3><div data-part="item-content"${__v(item.value) == null || __v(item.value) === false ? "" : ` data-value="${item.value}"`} class="accordion-content overflow-hidden text-sm"><div class="pb-4 pt-0">${item.content}</div></div></div>`;
 	}
 	create__unresolved_0Item(item) {
 		var __c = this.____unresolved_0_container;
 		if (!__c.__geaTpl) try {
-			var __tw = __c.cloneNode(false);
-			__tw.innerHTML = this.render__unresolved_0Item("__dummy__");
-			__c.__geaTpl = __tw.firstElementChild;
+			var __tw = document.createElement("template");
+			__tw.innerHTML = this.render__unresolved_0Item({
+				value: 0,
+				label: "",
+				content: ""
+			});
+			__c.__geaTpl = __tw.content.firstElementChild;
 		} catch {}
 		if (__c.__geaTpl) var el = __c.__geaTpl.cloneNode(true);
 		else {
-			var __fw = __c.cloneNode(false);
+			var __fw = document.createElement("template");
 			__fw.innerHTML = this.render__unresolved_0Item(item);
-			var el = __fw.firstElementChild;
+			var el = __fw.content.firstElementChild;
 		}
 		var __av = item.value;
 		if (__av == null || __av === false) el.removeAttribute("data-value");
@@ -219,7 +240,7 @@ var Accordion = class extends ZagComponent {
 		if (__av == null || __av === false) el.firstElementChild.nextElementSibling.removeAttribute("data-value");
 		else el.firstElementChild.nextElementSibling.setAttribute("data-value", String(__av));
 		el.firstElementChild.nextElementSibling.firstElementChild.textContent = `${item.content}`;
-		el.setAttribute("data-gea-item-id", String(item));
+		el.setAttribute("data-gea-item-id", item.value);
 		el.__geaItem = item;
 		return el;
 	}
@@ -246,11 +267,7 @@ var Accordion = class extends ZagComponent {
 		if (typeof this.__ensureArrayConfigs === "function") this.__ensureArrayConfigs();
 		this.__geaRegisterMap(0, "____unresolved_0_container", () => this.$(":scope"), () => {
 			return this.props.items || [];
-		}, (__item) => this.create__unresolved_0Item(__item));
-	}
-	dispose() {
-		if (this.__observer_removers__) this.__observer_removers__.forEach((fn) => fn());
-		super.dispose();
+		}, (__item) => this.create__unresolved_0Item(__item), "value");
 	}
 };
 //#endregion
@@ -259,14 +276,16 @@ var Avatar = class extends ZagComponent {
 	constructor(...args) {
 		super(...args);
 		this.loaded = false;
-		this.props;
-		this.__geaCond_0 = !!this.props.src;
+		try {
+			this.props;
+			this.__geaCond_0 = !!this.props.src;
+		} catch {}
 		this.__geaRegisterCond(0, "c0", () => {
 			this.props;
 			return this.props.src;
 		}, () => {
 			const props = this.props;
-			return `<img data-part="image"${this.props.src == null ? "" : ` src="${this.props.src}"`}${(this.props.name || "") == null || (props.name || "") === false ? "" : ` alt="${this.props.name || ""}"`} class="avatar-image absolute inset-0 h-full w-full object-cover" />`;
+			return `<img data-part="image"${this.props.src == null || props.src === false ? "" : ` src="${this.props.src}"`}${(this.props.name || "") == null || (props.name || "") === false ? "" : ` alt="${this.props.name || ""}"`} class="avatar-image absolute inset-0 h-full w-full object-cover" />`;
 		}, () => {
 			this.props;
 			return "";
@@ -295,8 +314,9 @@ var Avatar = class extends ZagComponent {
 		this.loaded = api.loaded;
 	}
 	template(props) {
+		Component._register(ZagComponent);
 		const initials = props.fallback || (props.name ? props.name.split(" ").map((n) => n[0]).join("").toUpperCase() : "?");
-		return `<div id="${this.id}" data-part="root"${`avatar-root relative inline-flex h-10 w-10 shrink-0 overflow-hidden rounded-full ${props.class || ""}` == null ? "" : ` class="${`avatar-root relative inline-flex h-10 w-10 shrink-0 overflow-hidden rounded-full ${props.class || ""}`.trim()}"`}><!--${this.id + "-c0"}-->${(props.src ? `<img data-part="image"${props.src == null ? "" : ` src="${props.src}"`}${(props.name || "") == null || (props.name || "") === false ? "" : ` alt="${props.name || ""}"`} class="avatar-image absolute inset-0 h-full w-full object-cover" />` : "") || ""}<!--${this.id + "-c0-end"}--><div id="${this.id + "-b1"}" data-part="fallback"${`avatar-fallback flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground text-sm font-medium ${props.src ? "absolute inset-0" : ""}` == null ? "" : ` class="${`avatar-fallback flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground text-sm font-medium ${props.src ? "absolute inset-0" : ""}`.trim()}"`}>${initials}</div></div>`;
+		return `<div id="${this.id}" data-part="root" class="${`avatar-root relative inline-flex h-10 w-10 shrink-0 overflow-hidden rounded-full ${props.class || ""}`.trim()}"><!--${this.id + "-c0"}-->${(props.src ? `<img data-part="image"${props.src == null || props.src === false ? "" : ` src="${props.src}"`}${(props.name || "") == null || (props.name || "") === false ? "" : ` alt="${props.name || ""}"`} class="avatar-image absolute inset-0 h-full w-full object-cover" />` : "") || ""}<!--${this.id + "-c0-end"}--><div id="${this.id + "-b1"}" data-part="fallback" class="${`avatar-fallback flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground text-sm font-medium ${props.src ? "absolute inset-0" : ""}`.trim()}">${initials}</div></div>`;
 	}
 	__onPropChange(key, value) {
 		if (key === "class") try {
@@ -308,18 +328,15 @@ var Avatar = class extends ZagComponent {
 				if (__el.className !== __newClass) __el.className = __newClass;
 			}
 		} catch {}
-		if (key === "src") {
-			try {
-				const __el = document.getElementById(this.id + "-b1");
-				this.props;
-				const __boundValue = `avatar-fallback flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground text-sm font-medium ${this.props.src ? "absolute inset-0" : ""}`;
-				if (__el) {
-					const __newClass = __boundValue != null ? String(__boundValue).trim() : "";
-					if (__el.className !== __newClass) __el.className = __newClass;
-				}
-			} catch {}
-			this.__geaPatchCond(0);
-		}
+		if (key === "src") try {
+			const __el = document.getElementById(this.id + "-b1");
+			this.props;
+			const __boundValue = `avatar-fallback flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground text-sm font-medium ${this.props.src ? "absolute inset-0" : ""}`;
+			if (__el) {
+				const __newClass = __boundValue != null ? String(__boundValue).trim() : "";
+				if (__el.className !== __newClass) __el.className = __newClass;
+			}
+		} catch {}
 		if (key === "fallback") try {
 			const __el = document.getElementById(this.id + "-b1");
 			this.props;
@@ -336,6 +353,7 @@ var Avatar = class extends ZagComponent {
 				if (__el.textContent !== __boundValue) __el.textContent = __boundValue;
 			}
 		} catch {}
+		if (key === "src" || key === "name") this.__geaPatchCond(0);
 	}
 };
 //#endregion
@@ -344,8 +362,10 @@ var Checkbox = class extends ZagComponent {
 	constructor(...args) {
 		super(...args);
 		this.checked = false;
-		this.props;
-		this.__geaCond_0 = !!this.props.label;
+		try {
+			this.props;
+			this.__geaCond_0 = !!this.props.label;
+		} catch {}
 		this.__geaRegisterCond(0, "c0", () => {
 			this.props;
 			return this.props.label;
@@ -391,7 +411,8 @@ var Checkbox = class extends ZagComponent {
 		this.checked = api.checkedState;
 	}
 	template(props) {
-		return `<label id="${this.id}" data-part="root"${`checkbox-root inline-flex items-center gap-2 cursor-pointer ${props.class || ""}` == null ? "" : ` class="${`checkbox-root inline-flex items-center gap-2 cursor-pointer ${props.class || ""}`.trim()}"`}><input data-part="hidden-input" type="checkbox" class="sr-only" /><div data-part="control" class="checkbox-control h-4 w-4 shrink-0 rounded-sm border border-primary shadow transition-colors data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"><span data-part="indicator" class="checkbox-indicator flex items-center justify-center text-current h-full w-full"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3"><polyline points="20 6 9 17 4 12"></polyline></svg></span></div><!--${this.id + "-c0"}-->${props.label && `<span data-part="label" class="checkbox-label text-sm font-medium leading-none">${props.label}</span>` || ""}<!--${this.id + "-c0-end"}--></label>`;
+		Component._register(ZagComponent);
+		return `<label id="${this.id}" data-part="root" class="${`checkbox-root inline-flex items-center gap-2 cursor-pointer ${props.class || ""}`.trim()}"><input data-part="hidden-input" type="checkbox" class="sr-only" /><div data-part="control" class="checkbox-control h-4 w-4 shrink-0 rounded-sm border border-primary shadow transition-colors data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"><span data-part="indicator" class="checkbox-indicator flex items-center justify-center text-current h-full w-full"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3"><polyline points="20 6 9 17 4 12"></polyline></svg></span></div><!--${this.id + "-c0"}-->${props.label && `<span data-part="label" class="checkbox-label text-sm font-medium leading-none">${props.label}</span>` || ""}<!--${this.id + "-c0-end"}--></label>`;
 	}
 	__onPropChange(key, value) {
 		if (key === "class") try {
@@ -412,17 +433,12 @@ var Clipboard = class extends ZagComponent {
 	constructor(...args) {
 		super(...args);
 		this.copied = false;
-		this.props;
-		this.__geaCond_0 = !!this.props.label;
-		this.__geaCond_1 = !!this.copied;
-		this.__geaRegisterCond(0, "c0", () => {
-			this.props;
-			return this.props.label;
-		}, () => {
+		try {
 			this.props;
-			return `<label data-part="label" class="clipboard-label text-sm font-medium mb-1 block">${this.props.label}</label>`;
-		}, null);
-		this.__geaRegisterCond(1, "c1", () => {
+			this.__geaCond_0 = !!this.copied;
+			this.__geaCond_1 = !!this.props.label;
+		} catch {}
+		this.__geaRegisterCond(0, "c0", () => {
 			this.props;
 			return this.copied;
 		}, () => {
@@ -432,6 +448,13 @@ var Clipboard = class extends ZagComponent {
 			this.props;
 			return `<span data-part="indicator-not-copied">Copy</span>`;
 		});
+		this.__geaRegisterCond(1, "c1", () => {
+			this.props;
+			return this.props.label;
+		}, () => {
+			this.props;
+			return `<label data-part="label" class="clipboard-label text-sm font-medium mb-1 block">${this.props.label}</label>`;
+		}, null);
 	}
 	createMachine(_props) {
 		return clipboard.machine;
@@ -466,7 +489,8 @@ var Clipboard = class extends ZagComponent {
 		this.copied = api.copied;
 	}
 	template(props) {
-		return `<div id="${this.id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><!--${this.id + "-c0"}-->${props.label && `<label data-part="label" class="clipboard-label text-sm font-medium mb-1 block">${props.label}</label>` || ""}<!--${this.id + "-c0-end"}--><div data-part="control" class="clipboard-control flex gap-2"><input data-part="input" class="clipboard-input flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm" /><button data-part="trigger" class="clipboard-trigger inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-3 text-sm shadow-sm hover:bg-accent"><!--${this.id + "-c1"}-->${(this.copied ? `<span data-part="indicator-copied">✓ Copied</span>` : `<span data-part="indicator-not-copied">Copy</span>`) || ""}<!--${this.id + "-c1-end"}--></button></div></div>`;
+		Component._register(ZagComponent);
+		return `<div id="${this.id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><!--${this.id + "-c1"}-->${props.label && `<label data-part="label" class="clipboard-label text-sm font-medium mb-1 block">${props.label}</label>` || ""}<!--${this.id + "-c1-end"}--><div data-part="control" class="clipboard-control flex gap-2"><input data-part="input" class="clipboard-input flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm" /><button data-part="trigger" class="clipboard-trigger inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-3 text-sm shadow-sm hover:bg-accent"><!--${this.id + "-c0"}-->${(this.copied ? `<span data-part="indicator-copied">✓ Copied</span>` : `<span data-part="indicator-not-copied">Copy</span>`) || ""}<!--${this.id + "-c0-end"}--></button></div></div>`;
 	}
 	__onPropChange(key, value) {
 		if (key === "class") try {
@@ -478,23 +502,23 @@ var Clipboard = class extends ZagComponent {
 				if (__el.className !== __newClass) __el.className = __newClass;
 			}
 		} catch {}
-		if (key === "label") this.__geaPatchCond(0);
-		this.__geaPatchCond(1);
+		this.__geaPatchCond(0);
+		if (key === "label") this.__geaPatchCond(1);
 	}
 	__observe_local_copied(value, change) {
 		if (this.rendered_) {
-			this.__geaCondPatched_1 = this.__geaPatchCond(1);
-			if (this.__geaCondPatched_1) return;
+			this.__geaCondPatched_0 = this.__geaPatchCond(0);
+			if (this.__geaCondPatched_0) return;
 		}
 	}
 	__setupLocalStateObservers() {
 		if (typeof this.__ensureArrayConfigs === "function") this.__ensureArrayConfigs();
 		if (!this.__store) return;
-		this.__observer_removers__.push(this.__store.observe(["copied"], (__v, __c) => this.__observe_local_copied(__v, __c)));
-	}
-	dispose() {
-		if (this.__observer_removers__) this.__observer_removers__.forEach((fn) => fn());
-		super.dispose();
+		this.__observer_removers__.push(this.__store.observe(["copied"], (__v, __c) => {
+			try {
+				this.__observe_local_copied(__v, __c);
+			} catch (_e) {}
+		}));
 	}
 };
 //#endregion
@@ -529,6 +553,7 @@ var Collapsible = class extends ZagComponent {
 		this.open = api.open;
 	}
 	template(props) {
+		Component._register(ZagComponent);
 		return `<div id="${this.id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><button id="${this.id + "-b1"}" data-part="trigger" class="collapsible-trigger flex w-full items-center justify-between py-2 text-sm font-medium">${props.label || "Toggle"}</button><div data-part="content" class="collapsible-content overflow-hidden"><div id="${this.id + "-b2"}" class="pb-4">${props.children}</div></div></div>`;
 	}
 	__onPropChange(key, value) {
@@ -552,7 +577,11 @@ var Collapsible = class extends ZagComponent {
 		if (key === "children") try {
 			const __el = document.getElementById(this.id + "-b2");
 			if (__el) {
-				if (__el.textContent !== value) __el.textContent = value;
+				if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this.instantiateChildComponents_();
+					if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+				}
 			}
 		} catch {}
 	}
@@ -562,8 +591,10 @@ var Collapsible = class extends ZagComponent {
 var Combobox = class extends ZagComponent {
 	constructor(...args) {
 		super(...args);
-		this.props;
-		this.__geaCond_0 = !!this.props.label;
+		try {
+			this.props;
+			this.__geaCond_0 = !!this.props.label;
+		} catch {}
 		this.__geaRegisterCond(0, "c0", () => {
 			this.props;
 			return this.props.label;
@@ -680,6 +711,7 @@ var Combobox = class extends ZagComponent {
 		this.inputValue = api.inputValue;
 	}
 	template(props) {
+		Component._register(ZagComponent);
 		return `<div id="${this.id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><!--${this.id + "-c0"}-->${props.label && `<label data-part="label" class="combobox-label text-sm font-medium mb-1 block">${props.label}</label>` || ""}<!--${this.id + "-c0-end"}--><div data-part="control" class="combobox-control flex"><input data-part="input" class="combobox-input flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" /><button data-part="trigger" class="combobox-trigger inline-flex h-9 items-center justify-center rounded-r-md border border-l-0 border-input px-2">▼</button></div><div data-part="positioner" class="combobox-positioner"><div data-part="content" class="combobox-content z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md"><div id="${this.id + "-b1"}" data-part="list">${this.filteredItems.map((item) => this.renderFilteredItemsItem(item)).join("")}</div></div></div></div>`;
 	}
 	__onPropChange(key, value) {
@@ -696,25 +728,24 @@ var Combobox = class extends ZagComponent {
 	}
 	renderFilteredItemsItem(item) {
 		const __v = (v) => v != null && typeof v === "object" ? v.valueOf() : v;
-		return `<div id="${this.id + "-b1-" + String(item.id)}" data-gea-item-id="${item.id}" data-part="item"${__v(item.value) == __v(null) ? "" : ` data-value="${item.value}"`}${__v(item.label) == __v(null) ? "" : ` data-label="${item.label}"`} class="combobox-item relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground"><span data-part="item-text"${__v(item.value) == __v(null) ? "" : ` data-value="${item.value}"`}${__v(item.label) == __v(null) ? "" : ` data-label="${item.label}"`}>${item.label}</span><span data-part="item-indicator"${__v(item.value) == __v(null) ? "" : ` data-value="${item.value}"`}${__v(item.label) == __v(null) ? "" : ` data-label="${item.label}"`} class="combobox-item-indicator ml-auto">✓</span></div>`;
+		return `<div id="${this.id + "-b1-" + String(item.value)}" data-gea-item-id="${item.value}" data-part="item"${__v(item.value) == null || __v(item.value) === false ? "" : ` data-value="${item.value}"`}${__v(item.label) == null || __v(item.label) === false ? "" : ` data-label="${item.label}"`} class="combobox-item relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground"><span data-part="item-text"${__v(item.value) == null || __v(item.value) === false ? "" : ` data-value="${item.value}"`}${__v(item.label) == null || __v(item.label) === false ? "" : ` data-label="${item.label}"`}>${item.label}</span><span data-part="item-indicator"${__v(item.value) == null || __v(item.value) === false ? "" : ` data-value="${item.value}"`}${__v(item.label) == null || __v(item.label) === false ? "" : ` data-label="${item.label}"`} class="combobox-item-indicator ml-auto">✓</span></div>`;
 	}
 	createFilteredItemsItem(item) {
 		var __c = this.__filteredItems_container;
 		if (!__c.__geaTpl) try {
-			var __tw = __c.cloneNode(false);
+			var __tw = document.createElement("template");
 			__tw.innerHTML = this.renderFilteredItemsItem({
-				id: 0,
-				value: "",
+				value: 0,
 				label: ""
 			});
-			__c.__geaTpl = __tw.firstElementChild;
+			__c.__geaTpl = __tw.content.firstElementChild;
 		} catch {}
 		if (!__c.__geaIdPfx) __c.__geaIdPfx = this.id_ + "-b1-";
 		if (__c.__geaTpl) var el = __c.__geaTpl.cloneNode(true);
 		else {
-			var __fw = __c.cloneNode(false);
+			var __fw = document.createElement("template");
 			__fw.innerHTML = this.renderFilteredItemsItem(item);
-			var el = __fw.firstElementChild;
+			var el = __fw.content.firstElementChild;
 		}
 		var __av = item.value;
 		if (__av == null || __av === false) el.removeAttribute("data-value");
@@ -737,8 +768,8 @@ var Combobox = class extends ZagComponent {
 		var __av = item.label;
 		if (__av == null || __av === false) el.firstElementChild.nextElementSibling.removeAttribute("data-label");
 		else el.firstElementChild.nextElementSibling.setAttribute("data-label", String(__av));
-		el.setAttribute("data-gea-item-id", item.id);
-		el.id = __c.__geaIdPfx + item.id;
+		el.setAttribute("data-gea-item-id", item.value);
+		el.id = __c.__geaIdPfx + item.value;
 		el.__geaItem = item;
 		return el;
 	}
@@ -782,6 +813,7 @@ var Combobox = class extends ZagComponent {
 					},
 					(row, value) => row.classList.toggle("value", value),
 					(row, value) => row.classList.toggle("value", value),
+					(row, value) => row.classList.toggle("value", value),
 					(row, value) => row.classList.toggle("value", value)
 				],
 				"label": [
@@ -825,11 +857,11 @@ var Combobox = class extends ZagComponent {
 	__setupLocalStateObservers() {
 		if (typeof this.__ensureArrayConfigs === "function") this.__ensureArrayConfigs();
 		if (!this.__store) return;
-		this.__observer_removers__.push(this.__store.observe(["filteredItems"], (__v, __c) => this.__observe_local_filteredItems(__v, __c)));
-	}
-	dispose() {
-		if (this.__observer_removers__) this.__observer_removers__.forEach((fn) => fn());
-		super.dispose();
+		this.__observer_removers__.push(this.__store.observe(["filteredItems"], (__v, __c) => {
+			try {
+				this.__observe_local_filteredItems(__v, __c);
+			} catch (_e) {}
+		}));
 	}
 };
 //#endregion
@@ -837,9 +869,12 @@ var Combobox = class extends ZagComponent {
 var Dialog = class extends ZagComponent {
 	constructor(...args) {
 		super(...args);
-		this.props;
-		this.__geaCond_0 = !!this.props.title;
-		this.__geaCond_1 = !!this.props.description;
+		try {
+			this.props;
+			this.__geaCond_0 = !!this.props.title;
+			this.__geaCond_1 = !!this.props.description;
+			this.__geaCond_2 = !!this.props.triggerLabel;
+		} catch {}
 		this.__geaRegisterCond(0, "c0", () => {
 			this.props;
 			return this.props.title;
@@ -854,6 +889,13 @@ var Dialog = class extends ZagComponent {
 			this.props;
 			return `<p data-part="description" class="dialog-description text-sm text-gray-500 mb-4">${this.props.description}</p>`;
 		}, null);
+		this.__geaRegisterCond(2, "c2", () => {
+			this.props;
+			return this.props.triggerLabel;
+		}, () => {
+			this.props;
+			return `<button data-part="trigger" class="dialog-trigger">${this.props.triggerLabel}</button>`;
+		}, null);
 	}
 	createMachine(_props) {
 		return dialog.machine;
@@ -922,7 +964,8 @@ var Dialog = class extends ZagComponent {
 		this.open = api.open;
 	}
 	template(props) {
-		return `<div id="${this.id}"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><button id="${this.id + "-b1"}" data-part="trigger" class="dialog-trigger">${props.triggerLabel || "Open"}</button><div data-part="backdrop" class="dialog-backdrop fixed inset-0 bg-black/50 z-50" hidden></div><div data-part="positioner" class="dialog-positioner fixed inset-0 flex items-center justify-center z-50" hidden><div data-part="content" class="dialog-content bg-white rounded-lg shadow-xl p-6 w-full max-w-md mx-4"><!--${this.id + "-c0"}-->${props.title && `<h2 data-part="title" class="dialog-title text-lg font-semibold mb-2">${props.title}</h2>` || ""}<!--${this.id + "-c0-end"}--><!--${this.id + "-c1"}-->${props.description && `<p data-part="description" class="dialog-description text-sm text-gray-500 mb-4">${props.description}</p>` || ""}<!--${this.id + "-c1-end"}--><div id="${this.id + "-b2"}" class="dialog-body">${props.children}</div><button data-part="close-trigger" class="dialog-close-trigger absolute top-3 right-3 text-gray-400 hover:text-gray-600">✕</button></div></div></div>`;
+		Component._register(ZagComponent);
+		return `<div id="${this.id}"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><!--${this.id + "-c2"}-->${props.triggerLabel && `<button data-part="trigger" class="dialog-trigger">${props.triggerLabel}</button>` || ""}<!--${this.id + "-c2-end"}--><div data-part="backdrop" class="dialog-backdrop fixed inset-0 bg-black/50 z-50" hidden></div><div data-part="positioner" class="dialog-positioner fixed inset-0 flex items-center justify-center z-50" hidden><div data-part="content" class="dialog-content bg-white rounded-lg shadow-xl p-6 w-full max-w-md mx-4"><!--${this.id + "-c0"}-->${props.title && `<h2 data-part="title" class="dialog-title text-lg font-semibold mb-2">${props.title}</h2>` || ""}<!--${this.id + "-c0-end"}--><!--${this.id + "-c1"}-->${props.description && `<p data-part="description" class="dialog-description text-sm text-gray-500 mb-4">${props.description}</p>` || ""}<!--${this.id + "-c1-end"}--><div id="${this.id + "-b1"}" class="dialog-body">${props.children}</div><button data-part="close-trigger" class="dialog-close-trigger absolute top-3 right-3 text-gray-400 hover:text-gray-600">✕</button></div></div></div>`;
 	}
 	__onPropChange(key, value) {
 		if (key === "class") try {
@@ -934,22 +977,19 @@ var Dialog = class extends ZagComponent {
 				if (__el.className !== __newClass) __el.className = __newClass;
 			}
 		} catch {}
-		if (key === "triggerLabel") try {
-			const __el = document.getElementById(this.id + "-b1");
-			this.props;
-			const __boundValue = this.props.triggerLabel || "Open";
-			if (__el) {
-				if (__el.textContent !== __boundValue) __el.textContent = __boundValue;
-			}
-		} catch {}
 		if (key === "children") try {
-			const __el = document.getElementById(this.id + "-b2");
+			const __el = document.getElementById(this.id + "-b1");
 			if (__el) {
-				if (__el.textContent !== value) __el.textContent = value;
+				if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this.instantiateChildComponents_();
+					if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+				}
 			}
 		} catch {}
 		if (key === "title") this.__geaPatchCond(0);
 		if (key === "description") this.__geaPatchCond(1);
+		if (key === "triggerLabel") this.__geaPatchCond(2);
 	}
 };
 //#endregion
@@ -957,9 +997,11 @@ var Dialog = class extends ZagComponent {
 var FileUpload = class extends ZagComponent {
 	constructor(...args) {
 		super(...args);
-		this.props;
-		this.__geaCond_0 = !!this.props.label;
-		this.__geaCond_1 = !!(this.acceptedFiles.length > 0);
+		try {
+			this.props;
+			this.__geaCond_0 = !!this.props.label;
+			this.__geaCond_1 = !!(this.acceptedFiles.length > 0);
+		} catch {}
 		this.__geaRegisterCond(0, "c0", () => {
 			this.props;
 			return this.props.label;
@@ -1014,6 +1056,7 @@ var FileUpload = class extends ZagComponent {
 		this.rejectedFiles = api.rejectedFiles;
 	}
 	template(props) {
+		Component._register(ZagComponent);
 		return `<div id="${this.id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><!--${this.id + "-c0"}-->${props.label && `<label data-part="label" class="file-upload-label text-sm font-medium mb-2 block">${props.label}</label>` || ""}<!--${this.id + "-c0-end"}--><div data-part="dropzone" class="file-upload-dropzone flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/25 p-8 text-center hover:border-muted-foreground/50 transition-colors"><p class="text-sm text-muted-foreground mb-2">Drag and drop files here</p><button data-part="trigger" class="file-upload-trigger inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90">Choose Files</button></div><input data-part="hidden-input" type="file" class="sr-only" /><!--${this.id + "-c1"}-->${this.acceptedFiles.length > 0 && `<div class="file-upload-file-list mt-3 space-y-1">${this.acceptedFiles.map((file) => this.renderAcceptedFilesItem(file)).join("")}<button data-part="clear-trigger" class="file-upload-clear text-xs text-muted-foreground hover:text-foreground mt-1">Clear all</button></div>` || ""}<!--${this.id + "-c1-end"}--></div>`;
 	}
 	__onPropChange(key, value) {
@@ -1043,27 +1086,36 @@ var FileUpload = class extends ZagComponent {
 		if (typeof this.__ensureArrayConfigs === "function") this.__ensureArrayConfigs();
 		this.__applyListChanges(this.__acceptedFiles_container, value, change, this.__acceptedFilesListConfig);
 	}
+	__observe_local_acceptedFiles__join(value, change) {
+		if (this.rendered_) {
+			this.__geaCondPatched_1 = this.__geaPatchCond(1);
+			if (this.__geaCondPatched_1) return;
+		}
+	}
+	__observe_local_acceptedFiles__map(value, change) {
+		if (this.rendered_) {
+			this.__geaCondPatched_1 = this.__geaPatchCond(1);
+			if (this.__geaCondPatched_1) return;
+		}
+	}
 	renderAcceptedFilesItem(file) {
-		return `<div data-gea-item-id="${file.id}" class="flex items-center justify-between rounded-md border px-3 py-2 text-sm"><span>${file.name}</span></div>`;
+		return `<div data-gea-item-id="${file.name}" class="flex items-center justify-between rounded-md border px-3 py-2 text-sm"><span>${file.name}</span></div>`;
 	}
 	createAcceptedFilesItem(item) {
 		var __c = this.__acceptedFiles_container;
 		if (!__c.__geaTpl) try {
-			var __tw = __c.cloneNode(false);
-			__tw.innerHTML = this.renderAcceptedFilesItem({
-				id: 0,
-				name: ""
-			});
-			__c.__geaTpl = __tw.firstElementChild;
+			var __tw = document.createElement("template");
+			__tw.innerHTML = this.renderAcceptedFilesItem({ name: 0 });
+			__c.__geaTpl = __tw.content.firstElementChild;
 		} catch {}
 		if (__c.__geaTpl) var el = __c.__geaTpl.cloneNode(true);
 		else {
-			var __fw = __c.cloneNode(false);
+			var __fw = document.createElement("template");
 			__fw.innerHTML = this.renderAcceptedFilesItem(item);
-			var el = __fw.firstElementChild;
+			var el = __fw.content.firstElementChild;
 		}
 		el.firstElementChild.textContent = `${item.name}`;
-		el.setAttribute("data-gea-item-id", item.id);
+		el.setAttribute("data-gea-item-id", item.name);
 		el.__geaItem = item;
 		return el;
 	}
@@ -1076,17 +1128,27 @@ var FileUpload = class extends ZagComponent {
 				const __target = row.firstElementChild;
 				if (!__target) return;
 				__target.firstChild && (__target.firstChild.nodeValue = `${item.name}`) || (__target.textContent = `${item.name}`);
-			}] }
+			}, (row, value) => row.classList.toggle("name", value)] }
 		};
 	}
 	__setupLocalStateObservers() {
 		if (typeof this.__ensureArrayConfigs === "function") this.__ensureArrayConfigs();
 		if (!this.__store) return;
-		this.__observer_removers__.push(this.__store.observe(["acceptedFiles"], (__v, __c) => this.__observe_local_acceptedFiles(__v, __c)));
-	}
-	dispose() {
-		if (this.__observer_removers__) this.__observer_removers__.forEach((fn) => fn());
-		super.dispose();
+		this.__observer_removers__.push(this.__store.observe(["acceptedFiles"], (__v, __c) => {
+			try {
+				this.__observe_local_acceptedFiles(__v, __c);
+			} catch (_e) {}
+		}));
+		this.__observer_removers__.push(this.__store.observe(["acceptedFiles", "join"], (__v, __c) => {
+			try {
+				this.__observe_local_acceptedFiles__join(__v, __c);
+			} catch (_e) {}
+		}));
+		this.__observer_removers__.push(this.__store.observe(["acceptedFiles", "map"], (__v, __c) => {
+			try {
+				this.__observe_local_acceptedFiles__map(__v, __c);
+			} catch (_e) {}
+		}));
 	}
 };
 //#endregion
@@ -1125,6 +1187,7 @@ var HoverCard = class extends ZagComponent {
 		this.open = api.open;
 	}
 	template(props) {
+		Component._register(ZagComponent);
 		return `<div id="${this.id}"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`} style="display: inline-block;"><a id="${this.id + "-b1"}" data-part="trigger"${(props.href || "#") == null || (props.href || "#") === false ? "" : ` href="${props.href || "#"}"`} class="hover-card-trigger inline-block">${props.triggerLabel || "Hover me"}</a><div data-part="positioner" class="hover-card-positioner"><div id="${this.id + "-b2"}" data-part="content" class="hover-card-content z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none">${props.children}</div></div></div>`;
 	}
 	__onPropChange(key, value) {
@@ -1155,7 +1218,11 @@ var HoverCard = class extends ZagComponent {
 		if (key === "children") try {
 			const __el = document.getElementById(this.id + "-b2");
 			if (__el) {
-				if (__el.textContent !== value) __el.textContent = value;
+				if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this.instantiateChildComponents_();
+					if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+				}
 			}
 		} catch {}
 	}
@@ -1199,11 +1266,12 @@ var Menu = class extends ZagComponent {
 		this.open = api.open;
 	}
 	template(props) {
+		Component._register(ZagComponent);
 		const items = props.items || [];
-		return `<div id="${this.id}"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><button id="${this.id + "-b1"}" data-part="trigger" class="menu-trigger inline-flex items-center justify-center gap-1 rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm hover:bg-accent hover:text-accent-foreground">${props.triggerLabel || "Menu"}</button><div data-part="positioner" class="menu-positioner"><div id="${this.id + "-b2"}" data-part="content" class="menu-content z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md">${items.map((item) => item.type === "separator" ? `<div id="${this.id + "-b2-" + String(String(item))}" data-gea-item-id="${String(item)}" data-part="separator" class="menu-separator -mx-1 my-1 h-px bg-muted"></div>` : `<div data-part="item"${item.value == null ? "" : ` data-value="${item.value}"`} class="menu-item relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50">${item.label}</div>`).join("") + "<!---->"}</div></div></div>`;
+		return `<div id="${this.id}"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><button id="${this.id + "-b1"}" data-part="trigger" class="menu-trigger inline-flex items-center justify-center gap-1 rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm hover:bg-accent hover:text-accent-foreground">${props.triggerLabel || "Menu"}</button><div data-part="positioner" class="menu-positioner"><div id="${this.id + "-b2"}" data-part="content" class="menu-content z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md">${items.map((item, i) => item.type === "separator" ? `<div id="${this.id + "-b2-" + String(String(item))}" data-gea-item-id="${String(item)}" data-part="separator" class="menu-separator -mx-1 my-1 h-px bg-muted"></div>` : `<div data-gea-item-id="${item.id}" data-part="item"${item.value == null || item.value === false ? "" : ` data-value="${item.value}"`} class="menu-item relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50">${item.label}</div>`).join("") + "<!---->"}</div></div></div>`;
 	}
-	render__unresolved_0Item(item) {
-		return `<div id="${this.id + "-b2-" + String(String(item))}" data-gea-item-id="${String(item)}" data-part="separator" class="menu-separator -mx-1 my-1 h-px bg-muted"></div>`;
+	render__unresolved_0Item(item, i) {
+		return `<div id="${this.id + "-b2-" + String(item.id)}" data-gea-item-id="${item.id}" data-part="separator" class="menu-separator -mx-1 my-1 h-px bg-muted"></div>`;
 	}
 	__onPropChange(key, value) {
 		if (key === "class") try {
@@ -1236,11 +1304,7 @@ var Menu = class extends ZagComponent {
 		if (typeof this.__ensureArrayConfigs === "function") this.__ensureArrayConfigs();
 		this.__geaRegisterMap(0, "____unresolved_0_container", () => document.getElementById(this.id + "-b2"), () => {
 			return this.props.items || [];
-		}, (__item) => this.create__unresolved_0Item(__item));
-	}
-	dispose() {
-		if (this.__observer_removers__) this.__observer_removers__.forEach((fn) => fn());
-		super.dispose();
+		}, (__item, __idx) => this.create__unresolved_0Item(__item, __idx));
 	}
 };
 //#endregion
@@ -1248,8 +1312,10 @@ var Menu = class extends ZagComponent {
 var NumberInput = class extends ZagComponent {
 	constructor(...args) {
 		super(...args);
-		this.props;
-		this.__geaCond_0 = !!this.props.label;
+		try {
+			this.props;
+			this.__geaCond_0 = !!this.props.label;
+		} catch {}
 		this.__geaRegisterCond(0, "c0", () => {
 			this.props;
 			return this.props.label;
@@ -1305,6 +1371,7 @@ var NumberInput = class extends ZagComponent {
 		this.valueAsNumber = api.valueAsNumber;
 	}
 	template(props) {
+		Component._register(ZagComponent);
 		return `<div id="${this.id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><!--${this.id + "-c0"}-->${props.label && `<label data-part="label" class="number-input-label text-sm font-medium mb-1 block">${props.label}</label>` || ""}<!--${this.id + "-c0-end"}--><div data-part="control" class="number-input-control flex"><button data-part="decrement-trigger" class="number-input-decrement inline-flex h-9 items-center justify-center rounded-l-md border border-r-0 border-input px-2 hover:bg-accent">−</button><input data-part="input" class="number-input-input h-9 w-full border border-input bg-transparent px-3 text-center text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" /><button data-part="increment-trigger" class="number-input-increment inline-flex h-9 items-center justify-center rounded-r-md border border-l-0 border-input px-2 hover:bg-accent">+</button></div></div>`;
 	}
 	__onPropChange(key, value) {
@@ -1374,7 +1441,8 @@ var Pagination = class extends ZagComponent {
 		this.totalPages = api.totalPages;
 	}
 	template(props) {
-		return `<nav id="${this.id}" data-part="root"${`pagination-root ${props.class || ""}` == null ? "" : ` class="${`pagination-root ${props.class || ""}`.trim()}"`}><div class="flex items-center gap-1"><button data-part="prev-trigger" class="pagination-prev inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-3 text-sm shadow-sm hover:bg-accent disabled:opacity-50">‹ Prev</button><button data-part="next-trigger" class="pagination-next inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-3 text-sm shadow-sm hover:bg-accent disabled:opacity-50">Next ›</button></div></nav>`;
+		Component._register(ZagComponent);
+		return `<nav id="${this.id}" data-part="root" class="${`pagination-root ${props.class || ""}`.trim()}"><div class="flex items-center gap-1"><button data-part="prev-trigger" class="pagination-prev inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-3 text-sm shadow-sm hover:bg-accent disabled:opacity-50">‹ Prev</button><button data-part="next-trigger" class="pagination-next inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-3 text-sm shadow-sm hover:bg-accent disabled:opacity-50">Next ›</button></div></nav>`;
 	}
 	__onPropChange(key, value) {
 		if (key === "class") try {
@@ -1393,8 +1461,10 @@ var Pagination = class extends ZagComponent {
 var PinInput = class extends ZagComponent {
 	constructor(...args) {
 		super(...args);
-		this.props;
-		this.__geaCond_0 = !!this.props.label;
+		try {
+			this.props;
+			this.__geaCond_0 = !!this.props.label;
+		} catch {}
 		this.__geaRegisterCond(0, "c0", () => {
 			this.props;
 			return this.props.label;
@@ -1452,27 +1522,28 @@ var PinInput = class extends ZagComponent {
 		this.valueAsString = api.valueAsString;
 	}
 	template(props) {
+		Component._register(ZagComponent);
 		const count = props.count ?? 4;
 		const inputs = Array.from({ length: count }, (_, i) => i);
-		return `<div id="${this.id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><!--${this.id + "-c0"}-->${props.label && `<label data-part="label" class="pin-input-label text-sm font-medium mb-2 block">${props.label}</label>` || ""}<!--${this.id + "-c0-end"}--><div id="${this.id + "-b1"}" data-part="control" class="pin-input-control flex gap-2">${inputs.map((i) => `<input id="${this.id + "-b1-" + String(String(i))}" data-gea-item-id="${String(i)}" data-part="input"${String(i) == null ? "" : ` data-index="${String(i)}"`} class="pin-input-field h-9 w-9 rounded-md border border-input bg-transparent text-center text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />`).join("") + "<!---->"}</div><input data-part="hidden-input" type="hidden" /></div>`;
+		return `<div id="${this.id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><!--${this.id + "-c0"}-->${props.label && `<label data-part="label" class="pin-input-label text-sm font-medium mb-2 block">${props.label}</label>` || ""}<!--${this.id + "-c0-end"}--><div id="${this.id + "-b1"}" data-part="control" class="pin-input-control flex gap-2">${inputs.map((i) => `<input id="${this.id + "-b1-" + String(String(i))}" data-gea-item-id="${String(i)}" data-part="input"${String(i) == null || String(i) === false ? "" : ` data-index="${String(i)}"`} class="pin-input-field h-9 w-9 rounded-md border border-input bg-transparent text-center text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />`).join("") + "<!---->"}</div><input data-part="hidden-input" type="hidden" /></div>`;
 	}
 	render__unresolved_0Item(i) {
 		const __v = (v) => v != null && typeof v === "object" ? v.valueOf() : v;
-		return `<input id="${this.id + "-b1-" + String(String(i))}" data-gea-item-id="${String(i)}" data-part="input"${__v(String(i)) == __v(null) ? "" : ` data-index="${String(i)}"`} class="pin-input-field h-9 w-9 rounded-md border border-input bg-transparent text-center text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />`;
+		return `<input id="${this.id + "-b1-" + String(String(i))}" data-gea-item-id="${String(i)}" data-part="input"${__v(String(i)) == null || __v(String(i)) === false ? "" : ` data-index="${String(i)}"`} class="pin-input-field h-9 w-9 rounded-md border border-input bg-transparent text-center text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />`;
 	}
 	create__unresolved_0Item(item) {
 		var __c = this.____unresolved_0_container;
 		if (!__c.__geaTpl) try {
-			var __tw = __c.cloneNode(false);
+			var __tw = document.createElement("template");
 			__tw.innerHTML = this.render__unresolved_0Item("__dummy__");
-			__c.__geaTpl = __tw.firstElementChild;
+			__c.__geaTpl = __tw.content.firstElementChild;
 		} catch {}
 		if (!__c.__geaIdPfx) __c.__geaIdPfx = this.id_ + "-b1-";
 		if (__c.__geaTpl) var el = __c.__geaTpl.cloneNode(true);
 		else {
-			var __fw = __c.cloneNode(false);
+			var __fw = document.createElement("template");
 			__fw.innerHTML = this.render__unresolved_0Item(item);
-			var el = __fw.firstElementChild;
+			var el = __fw.content.firstElementChild;
 		}
 		var __av = String(item);
 		if (__av == null || __av === false) el.removeAttribute("data-index");
@@ -1509,19 +1580,17 @@ var PinInput = class extends ZagComponent {
 			return Array.from({ length: count }, (_, i) => i);
 		}, (__item) => this.create__unresolved_0Item(__item));
 	}
-	dispose() {
-		if (this.__observer_removers__) this.__observer_removers__.forEach((fn) => fn());
-		super.dispose();
-	}
 };
 //#endregion
 //#region src/components/popover.tsx
 var Popover = class extends ZagComponent {
 	constructor(...args) {
 		super(...args);
-		this.props;
-		this.__geaCond_0 = !!this.props.title;
-		this.__geaCond_1 = !!this.props.description;
+		try {
+			this.props;
+			this.__geaCond_0 = !!this.props.title;
+			this.__geaCond_1 = !!this.props.description;
+		} catch {}
 		this.__geaRegisterCond(0, "c0", () => {
 			this.props;
 			return this.props.title;
@@ -1576,6 +1645,7 @@ var Popover = class extends ZagComponent {
 		this.open = api.open;
 	}
 	template(props) {
+		Component._register(ZagComponent);
 		return `<div id="${this.id}"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><button id="${this.id + "-b1"}" data-part="trigger" class="popover-trigger">${props.triggerLabel || "Open"}</button><div data-part="positioner" class="popover-positioner"><div data-part="content" class="popover-content z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none"><!--${this.id + "-c0"}-->${props.title && `<div data-part="title" class="popover-title font-medium leading-none mb-2">${props.title}</div>` || ""}<!--${this.id + "-c0-end"}--><!--${this.id + "-c1"}-->${props.description && `<p data-part="description" class="popover-description text-sm text-muted-foreground mb-3">${props.description}</p>` || ""}<!--${this.id + "-c1-end"}--><div id="${this.id + "-b2"}" class="popover-body">${props.children}</div><button data-part="close-trigger" class="popover-close-trigger absolute top-2 right-2 text-gray-400 hover:text-gray-600 text-sm">✕</button></div></div></div>`;
 	}
 	__onPropChange(key, value) {
@@ -1599,7 +1669,11 @@ var Popover = class extends ZagComponent {
 		if (key === "children") try {
 			const __el = document.getElementById(this.id + "-b2");
 			if (__el) {
-				if (__el.textContent !== value) __el.textContent = value;
+				if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this.instantiateChildComponents_();
+					if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+				}
 			}
 		} catch {}
 		if (key === "title") this.__geaPatchCond(0);
@@ -1612,8 +1686,10 @@ var Progress = class extends ZagComponent {
 	constructor(...args) {
 		super(...args);
 		this.percent = 0;
-		this.props;
-		this.__geaCond_0 = !!this.props.label;
+		try {
+			this.props;
+			this.__geaCond_0 = !!this.props.label;
+		} catch {}
 		this.__geaRegisterCond(0, "c0", () => {
 			this.props;
 			return this.props.label;
@@ -1653,7 +1729,8 @@ var Progress = class extends ZagComponent {
 		this.percent = api.percent;
 	}
 	template(props) {
-		return `<div id="${this.id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><div class="flex justify-between mb-1"><!--${this.id + "-c0"}-->${props.label && `<label data-part="label" class="progress-label text-sm font-medium">${props.label}</label>` || ""}<!--${this.id + "-c0-end"}--><span id="${this.id + "-b1"}" data-part="value-text" class="progress-value-text text-sm text-muted-foreground">${this.percent}%</span></div><div data-part="track" class="progress-track relative h-2 w-full overflow-hidden rounded-full bg-primary/20"><div id="${this.id + "-b2"}" data-part="range" class="progress-range h-full w-full flex-1 bg-primary transition-all"${`width: ${this.percent}%` == null ? "" : ` style="${`width: ${this.percent}%`}"`}></div></div></div>`;
+		Component._register(ZagComponent);
+		return `<div id="${this.id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><div class="flex justify-between mb-1"><!--${this.id + "-c0"}-->${props.label && `<label data-part="label" class="progress-label text-sm font-medium">${props.label}</label>` || ""}<!--${this.id + "-c0-end"}--><span id="${this.id + "-b1"}" data-part="value-text" class="progress-value-text text-sm text-muted-foreground">${this.percent}%</span></div><div data-part="track" class="progress-track relative h-2 w-full overflow-hidden rounded-full bg-primary/20"><div id="${this.id + "-b2"}" data-part="range" class="progress-range h-full w-full flex-1 bg-primary transition-all" style="${`width: ${this.percent}%`}"></div></div></div>`;
 	}
 	__observe_local_percent(percent, change) {
 		if (document.getElementById(this.id + "-b1")) document.getElementById(this.id + "-b1").textContent = `${this.percent}%`;
@@ -1673,11 +1750,11 @@ var Progress = class extends ZagComponent {
 	__setupLocalStateObservers() {
 		if (typeof this.__ensureArrayConfigs === "function") this.__ensureArrayConfigs();
 		if (!this.__store) return;
-		this.__observer_removers__.push(this.__store.observe(["percent"], (__v, __c) => this.__observe_local_percent(__v, __c)));
-	}
-	dispose() {
-		if (this.__observer_removers__) this.__observer_removers__.forEach((fn) => fn());
-		super.dispose();
+		this.__observer_removers__.push(this.__store.observe(["percent"], (__v, __c) => {
+			try {
+				this.__observe_local_percent(__v, __c);
+			} catch (_e) {}
+		}));
 	}
 };
 //#endregion
@@ -1685,8 +1762,10 @@ var Progress = class extends ZagComponent {
 var RadioGroup = class extends ZagComponent {
 	constructor(...args) {
 		super(...args);
-		this.props;
-		this.__geaCond_0 = !!this.props.label;
+		try {
+			this.props;
+			this.__geaCond_0 = !!this.props.label;
+		} catch {}
 		this.__geaRegisterCond(0, "c0", () => {
 			this.props;
 			return this.props.label;
@@ -1732,25 +1811,29 @@ var RadioGroup = class extends ZagComponent {
 		this.value = api.value;
 	}
 	template(props) {
+		Component._register(ZagComponent);
 		const items = props.items || [];
-		return `<div id="${this.id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><!--${this.id + "-c0"}-->${props.label && `<span data-part="label" class="radio-group-label text-sm font-medium mb-2 block">${props.label}</span>` || ""}<!--${this.id + "-c0-end"}--><div data-part="indicator" class="radio-group-indicator"></div>${items.map((item) => `<label data-gea-item-id="${String(item)}" data-part="item"${item.value == null ? "" : ` data-value="${item.value}"`} class="radio-group-item flex items-center gap-2 cursor-pointer py-1"><div data-part="item-control"${item.value == null ? "" : ` data-value="${item.value}"`} class="radio-group-item-control h-4 w-4 rounded-full border border-primary flex items-center justify-center"><span class="radio-dot"></span></div><input data-part="item-hidden-input"${item.value == null ? "" : ` data-value="${item.value}"`} type="radio" class="sr-only" /><span data-part="item-text"${item.value == null ? "" : ` data-value="${item.value}"`} class="radio-group-item-text text-sm">${item.label}</span></label>`).join("") + "<!---->"}</div>`;
+		return `<div id="${this.id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><!--${this.id + "-c0"}-->${props.label && `<span data-part="label" class="radio-group-label text-sm font-medium mb-2 block">${props.label}</span>` || ""}<!--${this.id + "-c0-end"}--><div data-part="indicator" class="radio-group-indicator"></div>${items.map((item) => `<label data-gea-item-id="${item.value}" data-part="item"${item.value == null || item.value === false ? "" : ` data-value="${item.value}"`} class="radio-group-item flex items-center gap-2 cursor-pointer py-1"><div data-part="item-control"${item.value == null || item.value === false ? "" : ` data-value="${item.value}"`} class="radio-group-item-control h-4 w-4 rounded-full border border-primary flex items-center justify-center"><span class="radio-dot"></span></div><input data-part="item-hidden-input"${item.value == null || item.value === false ? "" : ` data-value="${item.value}"`} type="radio" class="sr-only" /><span data-part="item-text"${item.value == null || item.value === false ? "" : ` data-value="${item.value}"`} class="radio-group-item-text text-sm">${item.label}</span></label>`).join("") + "<!---->"}</div>`;
 	}
 	render__unresolved_0Item(item) {
 		const __v = (v) => v != null && typeof v === "object" ? v.valueOf() : v;
-		return `<label data-gea-item-id="${String(item)}" data-part="item"${__v(item.value) == __v(null) ? "" : ` data-value="${item.value}"`} class="radio-group-item flex items-center gap-2 cursor-pointer py-1"><div data-part="item-control"${__v(item.value) == __v(null) ? "" : ` data-value="${item.value}"`} class="radio-group-item-control h-4 w-4 rounded-full border border-primary flex items-center justify-center"><span class="radio-dot"></span></div><input data-part="item-hidden-input"${__v(item.value) == __v(null) ? "" : ` data-value="${item.value}"`} type="radio" class="sr-only" /><span data-part="item-text"${__v(item.value) == __v(null) ? "" : ` data-value="${item.value}"`} class="radio-group-item-text text-sm">${item.label}</span></label>`;
+		return `<label data-gea-item-id="${item.value}" data-part="item"${__v(item.value) == null || __v(item.value) === false ? "" : ` data-value="${item.value}"`} class="radio-group-item flex items-center gap-2 cursor-pointer py-1"><div data-part="item-control"${__v(item.value) == null || __v(item.value) === false ? "" : ` data-value="${item.value}"`} class="radio-group-item-control h-4 w-4 rounded-full border border-primary flex items-center justify-center"><span class="radio-dot"></span></div><input data-part="item-hidden-input"${__v(item.value) == null || __v(item.value) === false ? "" : ` data-value="${item.value}"`} type="radio" class="sr-only" /><span data-part="item-text"${__v(item.value) == null || __v(item.value) === false ? "" : ` data-value="${item.value}"`} class="radio-group-item-text text-sm">${item.label}</span></label>`;
 	}
 	create__unresolved_0Item(item) {
 		var __c = this.____unresolved_0_container;
 		if (!__c.__geaTpl) try {
-			var __tw = __c.cloneNode(false);
-			__tw.innerHTML = this.render__unresolved_0Item("__dummy__");
-			__c.__geaTpl = __tw.firstElementChild;
+			var __tw = document.createElement("template");
+			__tw.innerHTML = this.render__unresolved_0Item({
+				value: 0,
+				label: ""
+			});
+			__c.__geaTpl = __tw.content.firstElementChild;
 		} catch {}
 		if (__c.__geaTpl) var el = __c.__geaTpl.cloneNode(true);
 		else {
-			var __fw = __c.cloneNode(false);
+			var __fw = document.createElement("template");
 			__fw.innerHTML = this.render__unresolved_0Item(item);
-			var el = __fw.firstElementChild;
+			var el = __fw.content.firstElementChild;
 		}
 		var __av = item.value;
 		if (__av == null || __av === false) el.removeAttribute("data-value");
@@ -1764,8 +1847,10 @@ var RadioGroup = class extends ZagComponent {
 		var __av = item.value;
 		if (__av == null || __av === false) el.firstElementChild.nextElementSibling.nextElementSibling.removeAttribute("data-value");
 		else el.firstElementChild.nextElementSibling.nextElementSibling.setAttribute("data-value", String(__av));
-		el.firstElementChild.nextElementSibling.nextElementSibling.textContent = `${item.label}`;
-		el.setAttribute("data-gea-item-id", String(item));
+		el.firstElementChild.nextElementSibling.nextElementSibling.textContent = `
+              ${item.label}
+            `;
+		el.setAttribute("data-gea-item-id", item.value);
 		el.__geaItem = item;
 		return el;
 	}
@@ -1793,11 +1878,7 @@ var RadioGroup = class extends ZagComponent {
 		if (typeof this.__ensureArrayConfigs === "function") this.__ensureArrayConfigs();
 		this.__geaRegisterMap(0, "____unresolved_0_container", () => this.$(":scope"), () => {
 			return this.props.items || [];
-		}, (__item) => this.create__unresolved_0Item(__item));
-	}
-	dispose() {
-		if (this.__observer_removers__) this.__observer_removers__.forEach((fn) => fn());
-		super.dispose();
+		}, (__item) => this.create__unresolved_0Item(__item), "value");
 	}
 };
 //#endregion
@@ -1805,8 +1886,10 @@ var RadioGroup = class extends ZagComponent {
 var RatingGroup = class extends ZagComponent {
 	constructor(...args) {
 		super(...args);
-		this.props;
-		this.__geaCond_0 = !!this.props.label;
+		try {
+			this.props;
+			this.__geaCond_0 = !!this.props.label;
+		} catch {}
 		this.__geaRegisterCond(0, "c0", () => {
 			this.props;
 			return this.props.label;
@@ -1882,27 +1965,28 @@ var RatingGroup = class extends ZagComponent {
 		}
 	}
 	template(props) {
+		Component._register(ZagComponent);
 		const count = props.count ?? 5;
 		const items = Array.from({ length: count }, (_, i) => i + 1);
-		return `<div id="${this.id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><!--${this.id + "-c0"}-->${props.label && `<label data-part="label" class="rating-group-label text-sm font-medium mb-1 block">${props.label}</label>` || ""}<!--${this.id + "-c0-end"}--><div id="${this.id + "-b1"}" data-part="control" class="rating-group-control flex gap-0.5">${items.map((i) => `<span id="${this.id + "-b1-" + String(String(i))}" data-gea-item-id="${String(i)}" data-part="item"${String(i) == null ? "" : ` data-index="${String(i)}"`} class="rating-group-item cursor-pointer text-2xl text-muted-foreground data-[highlighted]:text-yellow-400 data-[checked]:text-yellow-400" style="line-height: 1;">★</span>`).join("") + "<!---->"}</div><input data-part="hidden-input" type="hidden" /></div>`;
+		return `<div id="${this.id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><!--${this.id + "-c0"}-->${props.label && `<label data-part="label" class="rating-group-label text-sm font-medium mb-1 block">${props.label}</label>` || ""}<!--${this.id + "-c0-end"}--><div id="${this.id + "-b1"}" data-part="control" class="rating-group-control flex gap-0.5">${items.map((i) => `<span id="${this.id + "-b1-" + String(String(i))}" data-gea-item-id="${String(i)}" data-part="item"${String(i) == null || String(i) === false ? "" : ` data-index="${String(i)}"`} class="rating-group-item cursor-pointer text-2xl text-muted-foreground data-[highlighted]:text-yellow-400 data-[checked]:text-yellow-400" style="line-height: 1;">★</span>`).join("") + "<!---->"}</div><input data-part="hidden-input" type="hidden" /></div>`;
 	}
 	render__unresolved_0Item(i) {
 		const __v = (v) => v != null && typeof v === "object" ? v.valueOf() : v;
-		return `<span id="${this.id + "-b1-" + String(String(i))}" data-gea-item-id="${String(i)}" data-part="item"${__v(String(i)) == __v(null) ? "" : ` data-index="${String(i)}"`} class="rating-group-item cursor-pointer text-2xl text-muted-foreground data-[highlighted]:text-yellow-400 data-[checked]:text-yellow-400" style="line-height: 1;">★</span>`;
+		return `<span id="${this.id + "-b1-" + String(String(i))}" data-gea-item-id="${String(i)}" data-part="item"${__v(String(i)) == null || __v(String(i)) === false ? "" : ` data-index="${String(i)}"`} class="rating-group-item cursor-pointer text-2xl text-muted-foreground data-[highlighted]:text-yellow-400 data-[checked]:text-yellow-400" style="line-height: 1;">★</span>`;
 	}
 	create__unresolved_0Item(item) {
 		var __c = this.____unresolved_0_container;
 		if (!__c.__geaTpl) try {
-			var __tw = __c.cloneNode(false);
+			var __tw = document.createElement("template");
 			__tw.innerHTML = this.render__unresolved_0Item("__dummy__");
-			__c.__geaTpl = __tw.firstElementChild;
+			__c.__geaTpl = __tw.content.firstElementChild;
 		} catch {}
 		if (!__c.__geaIdPfx) __c.__geaIdPfx = this.id_ + "-b1-";
 		if (__c.__geaTpl) var el = __c.__geaTpl.cloneNode(true);
 		else {
-			var __fw = __c.cloneNode(false);
+			var __fw = document.createElement("template");
 			__fw.innerHTML = this.render__unresolved_0Item(item);
-			var el = __fw.firstElementChild;
+			var el = __fw.content.firstElementChild;
 		}
 		var __av = String(item);
 		if (__av == null || __av === false) el.removeAttribute("data-index");
@@ -1939,18 +2023,16 @@ var RatingGroup = class extends ZagComponent {
 			return Array.from({ length: count }, (_, i) => i + 1);
 		}, (__item) => this.create__unresolved_0Item(__item));
 	}
-	dispose() {
-		if (this.__observer_removers__) this.__observer_removers__.forEach((fn) => fn());
-		super.dispose();
-	}
 };
 //#endregion
 //#region src/components/select.tsx
 var Select = class extends ZagComponent {
 	constructor(...args) {
 		super(...args);
-		this.props;
-		this.__geaCond_0 = !!this.props.label;
+		try {
+			this.props;
+			this.__geaCond_0 = !!this.props.label;
+		} catch {}
 		this.__geaRegisterCond(0, "c0", () => {
 			this.props;
 			return this.props.label;
@@ -2044,26 +2126,30 @@ var Select = class extends ZagComponent {
 		this.valueAsString = api.valueAsString;
 	}
 	template(props) {
+		Component._register(ZagComponent);
 		const items = props.items || [];
-		return `<div id="${this.id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><!--${this.id + "-c0"}-->${props.label && `<label data-part="label" class="select-label text-sm font-medium mb-1 block">${props.label}</label>` || ""}<!--${this.id + "-c0-end"}--><div data-part="control" class="select-control"><button data-part="trigger" class="select-trigger flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"><span id="${this.id + "-b1"}" data-part="value-text" class="select-value-text">${this.valueAsString || props.placeholder || "Select..."}</span><span data-part="indicator" class="select-indicator">▼</span></button></div><div data-part="positioner" class="select-positioner"><div data-part="content" class="select-content z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md"><div id="${this.id + "-b2"}" data-part="list">${items.map((item) => `<div id="${this.id + "-b2-" + String(String(item))}" data-gea-item-id="${String(item)}" data-part="item"${item.value == null ? "" : ` data-value="${item.value}"`}${item.label == null ? "" : ` data-label="${item.label}"`} class="select-item relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"><span data-part="item-text"${item.value == null ? "" : ` data-value="${item.value}"`}${item.label == null ? "" : ` data-label="${item.label}"`}>${item.label}</span><span data-part="item-indicator"${item.value == null ? "" : ` data-value="${item.value}"`}${item.label == null ? "" : ` data-label="${item.label}"`} class="select-item-indicator ml-auto">✓</span></div>`).join("") + "<!---->"}</div></div></div></div>`;
+		return `<div id="${this.id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><!--${this.id + "-c0"}-->${props.label && `<label data-part="label" class="select-label text-sm font-medium mb-1 block">${props.label}</label>` || ""}<!--${this.id + "-c0-end"}--><div data-part="control" class="select-control"><button data-part="trigger" class="select-trigger flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"><span id="${this.id + "-b1"}" data-part="value-text" class="select-value-text">${this.valueAsString || props.placeholder || "Select..."}</span><span data-part="indicator" class="select-indicator">▼</span></button></div><div data-part="positioner" class="select-positioner"><div data-part="content" class="select-content z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md"><div id="${this.id + "-b2"}" data-part="list">${items.map((item) => `<div id="${this.id + "-b2-" + String(item.value)}" data-gea-item-id="${item.value}" data-part="item"${item.value == null || item.value === false ? "" : ` data-value="${item.value}"`}${item.label == null || item.label === false ? "" : ` data-label="${item.label}"`} class="select-item relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"><span data-part="item-text"${item.value == null || item.value === false ? "" : ` data-value="${item.value}"`}${item.label == null || item.label === false ? "" : ` data-label="${item.label}"`}>${item.label}</span><span data-part="item-indicator"${item.value == null || item.value === false ? "" : ` data-value="${item.value}"`}${item.label == null || item.label === false ? "" : ` data-label="${item.label}"`} class="select-item-indicator ml-auto">✓</span></div>`).join("") + "<!---->"}</div></div></div></div>`;
 	}
 	render__unresolved_0Item(item) {
 		const __v = (v) => v != null && typeof v === "object" ? v.valueOf() : v;
-		return `<div id="${this.id + "-b2-" + String(String(item))}" data-gea-item-id="${String(item)}" data-part="item"${__v(item.value) == __v(null) ? "" : ` data-value="${item.value}"`}${__v(item.label) == __v(null) ? "" : ` data-label="${item.label}"`} class="select-item relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"><span data-part="item-text"${__v(item.value) == __v(null) ? "" : ` data-value="${item.value}"`}${__v(item.label) == __v(null) ? "" : ` data-label="${item.label}"`}>${item.label}</span><span data-part="item-indicator"${__v(item.value) == __v(null) ? "" : ` data-value="${item.value}"`}${__v(item.label) == __v(null) ? "" : ` data-label="${item.label}"`} class="select-item-indicator ml-auto">✓</span></div>`;
+		return `<div id="${this.id + "-b2-" + String(item.value)}" data-gea-item-id="${item.value}" data-part="item"${__v(item.value) == null || __v(item.value) === false ? "" : ` data-value="${item.value}"`}${__v(item.label) == null || __v(item.label) === false ? "" : ` data-label="${item.label}"`} class="select-item relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"><span data-part="item-text"${__v(item.value) == null || __v(item.value) === false ? "" : ` data-value="${item.value}"`}${__v(item.label) == null || __v(item.label) === false ? "" : ` data-label="${item.label}"`}>${item.label}</span><span data-part="item-indicator"${__v(item.value) == null || __v(item.value) === false ? "" : ` data-value="${item.value}"`}${__v(item.label) == null || __v(item.label) === false ? "" : ` data-label="${item.label}"`} class="select-item-indicator ml-auto">✓</span></div>`;
 	}
 	create__unresolved_0Item(item) {
 		var __c = this.____unresolved_0_container;
 		if (!__c.__geaTpl) try {
-			var __tw = __c.cloneNode(false);
-			__tw.innerHTML = this.render__unresolved_0Item("__dummy__");
-			__c.__geaTpl = __tw.firstElementChild;
+			var __tw = document.createElement("template");
+			__tw.innerHTML = this.render__unresolved_0Item({
+				value: 0,
+				label: ""
+			});
+			__c.__geaTpl = __tw.content.firstElementChild;
 		} catch {}
 		if (!__c.__geaIdPfx) __c.__geaIdPfx = this.id_ + "-b2-";
 		if (__c.__geaTpl) var el = __c.__geaTpl.cloneNode(true);
 		else {
-			var __fw = __c.cloneNode(false);
+			var __fw = document.createElement("template");
 			__fw.innerHTML = this.render__unresolved_0Item(item);
-			var el = __fw.firstElementChild;
+			var el = __fw.content.firstElementChild;
 		}
 		var __av = item.value;
 		if (__av == null || __av === false) el.removeAttribute("data-value");
@@ -2086,8 +2172,8 @@ var Select = class extends ZagComponent {
 		var __av = item.label;
 		if (__av == null || __av === false) el.firstElementChild.nextElementSibling.removeAttribute("data-label");
 		else el.firstElementChild.nextElementSibling.setAttribute("data-label", String(__av));
-		el.setAttribute("data-gea-item-id", String(item));
-		el.id = __c.__geaIdPfx + String(item);
+		el.setAttribute("data-gea-item-id", item.value);
+		el.id = __c.__geaIdPfx + item.value;
 		el.__geaItem = item;
 		return el;
 	}
@@ -2133,16 +2219,16 @@ var Select = class extends ZagComponent {
 		if (typeof this.__ensureArrayConfigs === "function") this.__ensureArrayConfigs();
 		this.__geaRegisterMap(0, "____unresolved_0_container", () => document.getElementById(this.id + "-b2"), () => {
 			return this.props.items || [];
-		}, (__item) => this.create__unresolved_0Item(__item));
+		}, (__item) => this.create__unresolved_0Item(__item), "value");
 	}
 	__setupLocalStateObservers() {
 		if (typeof this.__ensureArrayConfigs === "function") this.__ensureArrayConfigs();
 		if (!this.__store) return;
-		this.__observer_removers__.push(this.__store.observe(["valueAsString"], (__v, __c) => this.__observe_local_valueAsString(__v, __c)));
-	}
-	dispose() {
-		if (this.__observer_removers__) this.__observer_removers__.forEach((fn) => fn());
-		super.dispose();
+		this.__observer_removers__.push(this.__store.observe(["valueAsString"], (__v, __c) => {
+			try {
+				this.__observe_local_valueAsString(__v, __c);
+			} catch (_e) {}
+		}));
 	}
 };
 //#endregion
@@ -2151,8 +2237,10 @@ const THUMB_CLASS = "slider-thumb block h-5 w-5 rounded-full border-2 border-pri
 var Slider = class extends ZagComponent {
 	constructor(...args) {
 		super(...args);
-		this.props;
-		this.__geaCond_0 = !!this.props.label;
+		try {
+			this.props;
+			this.__geaCond_0 = !!this.props.label;
+		} catch {}
 		this.__geaRegisterCond(0, "c0", () => {
 			this.props;
 			return this.props.label;
@@ -2234,7 +2322,8 @@ var Slider = class extends ZagComponent {
 		super._applyAllSpreads();
 	}
 	template(props) {
-		return `<div id="${this.id}" data-part="root"${"w-full " + (props.class || "") == null ? "" : ` class="${("w-full " + (props.class || "")).trim()}"`}><!--${this.id + "-c0"}-->${props.label && `<div class="flex justify-between mb-2"><label data-part="label" class="slider-label text-sm font-medium">${props.label}</label></div>` || ""}<!--${this.id + "-c0-end"}--><div data-part="control" class="slider-control relative flex items-center"><div data-part="track" class="slider-track relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20"><div data-part="range" class="slider-range absolute h-full bg-primary"></div></div><div data-part="thumb" data-index="0"${THUMB_CLASS == null ? "" : ` class="${THUMB_CLASS.trim()}"`}><input data-part="hidden-input" data-index="0" type="hidden" /></div></div></div>`;
+		Component._register(ZagComponent);
+		return `<div id="${this.id}" data-part="root"${"w-full " + (props.class || "") == null || "w-full " + (props.class || "") === false ? "" : ` class="${("w-full " + (props.class || "")).trim()}"`}><!--${this.id + "-c0"}-->${props.label && `<div class="flex justify-between mb-2"><label data-part="label" class="slider-label text-sm font-medium">${props.label}</label></div>` || ""}<!--${this.id + "-c0-end"}--><div data-part="control" class="slider-control relative flex items-center"><div data-part="track" class="slider-track relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20"><div data-part="range" class="slider-range absolute h-full bg-primary"></div></div><div data-part="thumb" data-index="0"${THUMB_CLASS == null || THUMB_CLASS === false ? "" : ` class="${THUMB_CLASS.trim()}"`}><input data-part="hidden-input" data-index="0" type="hidden" /></div></div></div>`;
 	}
 	__onPropChange(key, value) {
 		if (key === "class") try {
@@ -2255,8 +2344,10 @@ var Switch = class extends ZagComponent {
 	constructor(...args) {
 		super(...args);
 		this.checked = false;
-		this.props;
-		this.__geaCond_0 = !!this.props.label;
+		try {
+			this.props;
+			this.__geaCond_0 = !!this.props.label;
+		} catch {}
 		this.__geaRegisterCond(0, "c0", () => {
 			this.props;
 			return this.props.label;
@@ -2302,7 +2393,8 @@ var Switch = class extends ZagComponent {
 		this.checked = api.checked;
 	}
 	template(props) {
-		return `<label id="${this.id}" data-part="root"${`switch-root inline-flex items-center gap-2 cursor-pointer ${props.class || ""}` == null ? "" : ` class="${`switch-root inline-flex items-center gap-2 cursor-pointer ${props.class || ""}`.trim()}"`}><input data-part="hidden-input" type="checkbox" /><span data-part="control" class="switch-control inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors data-[state=checked]:bg-primary data-[state=unchecked]:bg-input"><span data-part="thumb" class="switch-thumb pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"></span></span><!--${this.id + "-c0"}-->${props.label && `<span data-part="label" class="switch-label text-sm font-medium">${props.label}</span>` || ""}<!--${this.id + "-c0-end"}--></label>`;
+		Component._register(ZagComponent);
+		return `<label id="${this.id}" data-part="root" class="${`switch-root inline-flex items-center gap-2 cursor-pointer ${props.class || ""}`.trim()}"><input data-part="hidden-input" type="checkbox" /><span data-part="control" class="switch-control inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors data-[state=checked]:bg-primary data-[state=unchecked]:bg-input"><span data-part="thumb" class="switch-thumb pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"></span></span><!--${this.id + "-c0"}-->${props.label && `<span data-part="label" class="switch-label text-sm font-medium">${props.label}</span>` || ""}<!--${this.id + "-c0-end"}--></label>`;
 	}
 	__onPropChange(key, value) {
 		if (key === "class") try {
@@ -2366,62 +2458,69 @@ var Tabs = class extends ZagComponent {
 		if (this._api?.value && this._machine) this._machine.service.send({ type: "SET_INDICATOR_RECT" });
 	}
 	template(props) {
+		Component._register(ZagComponent);
 		const items = props.items || [];
-		return `<div id="${this.id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><div id="${this.id + "-b1"}" data-part="list" class="tabs-list relative flex border-b border-gray-200 dark:border-gray-700">${items.map((item) => `<button id="${this.id + "-b1-" + String(String(item))}" data-gea-item-id="${String(item)}" data-part="trigger"${item.value == null ? "" : ` data-value="${item.value}"`} class="tabs-trigger px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 data-[selected]:text-blue-600 dark:text-gray-400 dark:hover:text-gray-100 dark:data-[selected]:text-blue-400">${item.label}</button>`).join("") + "<!---->"}<div data-part="indicator" class="tabs-indicator bg-blue-600 dark:bg-blue-400"></div></div>${items.map((item) => `<div id="${this.id + "-b1-" + String(String(item))}" data-gea-item-id="${String(item)}" data-part="content"${item.value == null ? "" : ` data-value="${item.value}"`} class="tabs-content p-4">${item.content}</div>`).join("") + "<!---->"}</div>`;
+		return `<div id="${this.id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><div id="${this.id + "-b1"}" data-part="list" class="tabs-list relative flex border-b border-gray-200 dark:border-gray-700">${items.map((item) => `<button id="${this.id + "-b1-" + String(item.value)}" data-gea-item-id="${item.value}" data-part="trigger"${item.value == null || item.value === false ? "" : ` data-value="${item.value}"`} class="tabs-trigger px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 data-[selected]:text-blue-600 dark:text-gray-400 dark:hover:text-gray-100 dark:data-[selected]:text-blue-400">${item.label}</button>`).join("") + "<!---->"}<div data-part="indicator" class="tabs-indicator bg-blue-600 dark:bg-blue-400"></div></div>${items.map((item) => `<div data-gea-item-id="${item.value}" data-part="content"${item.value == null || item.value === false ? "" : ` data-value="${item.value}"`} class="tabs-content p-4">${item.content}</div>`).join("") + "<!---->"}</div>`;
 	}
 	render__unresolved_0Item(item) {
 		const __v = (v) => v != null && typeof v === "object" ? v.valueOf() : v;
-		return `<div data-gea-item-id="${String(item)}" data-part="content"${__v(item.value) == __v(null) ? "" : ` data-value="${item.value}"`} class="tabs-content p-4">${item.content}</div>`;
+		return `<button id="${this.id + "-b1-" + String(item.value)}" data-gea-item-id="${item.value}" data-part="trigger"${__v(item.value) == null || __v(item.value) === false ? "" : ` data-value="${item.value}"`} class="tabs-trigger px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 data-[selected]:text-blue-600 dark:text-gray-400 dark:hover:text-gray-100 dark:data-[selected]:text-blue-400">${item.label}</button>`;
 	}
 	create__unresolved_0Item(item) {
 		var __c = this.____unresolved_0_container;
 		if (!__c.__geaTpl) try {
-			var __tw = __c.cloneNode(false);
-			__tw.innerHTML = this.render__unresolved_0Item("__dummy__");
-			__c.__geaTpl = __tw.firstElementChild;
+			var __tw = document.createElement("template");
+			__tw.innerHTML = this.render__unresolved_0Item({
+				value: 0,
+				label: ""
+			});
+			__c.__geaTpl = __tw.content.firstElementChild;
 		} catch {}
+		if (!__c.__geaIdPfx) __c.__geaIdPfx = this.id_ + "-b1-";
 		if (__c.__geaTpl) var el = __c.__geaTpl.cloneNode(true);
 		else {
-			var __fw = __c.cloneNode(false);
+			var __fw = document.createElement("template");
 			__fw.innerHTML = this.render__unresolved_0Item(item);
-			var el = __fw.firstElementChild;
+			var el = __fw.content.firstElementChild;
 		}
 		var __av = item.value;
 		if (__av == null || __av === false) el.removeAttribute("data-value");
 		else el.setAttribute("data-value", String(__av));
 		el.textContent = `
-            ${item.content}
-          `;
-		el.setAttribute("data-gea-item-id", String(item));
+              ${item.label}
+            `;
+		el.setAttribute("data-gea-item-id", item.value);
+		el.id = __c.__geaIdPfx + item.value;
 		el.__geaItem = item;
 		return el;
 	}
 	render__unresolved_1Item(item) {
 		const __v = (v) => v != null && typeof v === "object" ? v.valueOf() : v;
-		return `<button id="${this.id + "-b1-" + String(String(item))}" data-gea-item-id="${String(item)}" data-part="trigger"${__v(item.value) == __v(null) ? "" : ` data-value="${item.value}"`} class="tabs-trigger px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 data-[selected]:text-blue-600 dark:text-gray-400 dark:hover:text-gray-100 dark:data-[selected]:text-blue-400">${item.label}</button>`;
+		return `<div data-gea-item-id="${item.value}" data-part="content"${__v(item.value) == null || __v(item.value) === false ? "" : ` data-value="${item.value}"`} class="tabs-content p-4">${item.content}</div>`;
 	}
 	create__unresolved_1Item(item) {
 		var __c = this.____unresolved_1_container;
 		if (!__c.__geaTpl) try {
-			var __tw = __c.cloneNode(false);
-			__tw.innerHTML = this.render__unresolved_1Item("__dummy__");
-			__c.__geaTpl = __tw.firstElementChild;
+			var __tw = document.createElement("template");
+			__tw.innerHTML = this.render__unresolved_1Item({
+				value: 0,
+				content: ""
+			});
+			__c.__geaTpl = __tw.content.firstElementChild;
 		} catch {}
-		if (!__c.__geaIdPfx) __c.__geaIdPfx = this.id_ + "-b1-";
 		if (__c.__geaTpl) var el = __c.__geaTpl.cloneNode(true);
 		else {
-			var __fw = __c.cloneNode(false);
+			var __fw = document.createElement("template");
 			__fw.innerHTML = this.render__unresolved_1Item(item);
-			var el = __fw.firstElementChild;
+			var el = __fw.content.firstElementChild;
 		}
 		var __av = item.value;
 		if (__av == null || __av === false) el.removeAttribute("data-value");
 		else el.setAttribute("data-value", String(__av));
 		el.textContent = `
-              ${item.label}
-            `;
-		el.setAttribute("data-gea-item-id", String(item));
-		el.id = __c.__geaIdPfx + String(item);
+            ${item.content}
+          `;
+		el.setAttribute("data-gea-item-id", item.value);
 		el.__geaItem = item;
 		return el;
 	}
@@ -2450,16 +2549,12 @@ var Tabs = class extends ZagComponent {
 		this.__observer_removers__.forEach((fn) => fn());
 		this.__observer_removers__ = [];
 		if (typeof this.__ensureArrayConfigs === "function") this.__ensureArrayConfigs();
-		this.__geaRegisterMap(0, "____unresolved_0_container", () => this.$(":scope"), () => {
+		this.__geaRegisterMap(0, "____unresolved_0_container", () => document.getElementById(this.id + "-b1"), () => {
 			return this.props.items || [];
-		}, (__item) => this.create__unresolved_0Item(__item));
-		this.__geaRegisterMap(1, "____unresolved_1_container", () => document.getElementById(this.id + "-b1"), () => {
+		}, (__item) => this.create__unresolved_0Item(__item), "value");
+		this.__geaRegisterMap(1, "____unresolved_1_container", () => this.$(":scope"), () => {
 			return this.props.items || [];
-		}, (__item) => this.create__unresolved_1Item(__item));
-	}
-	dispose() {
-		if (this.__observer_removers__) this.__observer_removers__.forEach((fn) => fn());
-		super.dispose();
+		}, (__item) => this.create__unresolved_1Item(__item), "value");
 	}
 };
 //#endregion
@@ -2467,8 +2562,10 @@ var Tabs = class extends ZagComponent {
 var TagsInput = class extends ZagComponent {
 	constructor(...args) {
 		super(...args);
-		this.props;
-		this.__geaCond_0 = !!this.props.label;
+		try {
+			this.props;
+			this.__geaCond_0 = !!this.props.label;
+		} catch {}
 		this.__geaRegisterCond(0, "c0", () => {
 			this.props;
 			return this.props.label;
@@ -2549,25 +2646,26 @@ var TagsInput = class extends ZagComponent {
 		this.value = api.value;
 	}
 	template(props) {
-		return `<div id="${this.id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><!--${this.id + "-c0"}-->${props.label && `<label data-part="label" class="tags-input-label text-sm font-medium mb-1 block">${props.label}</label>` || ""}<!--${this.id + "-c0-end"}--><div id="${this.id + "-b1"}" data-part="control" class="tags-input-control flex flex-wrap gap-1.5 rounded-md border border-input bg-transparent px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-ring">${(this.value || []).map((tag, i) => `<span id="${this.id + "-b1-" + String(String(tag))}" data-gea-item-id="${String(tag)}" data-part="item"${String(i) == null ? "" : ` data-index="${String(i)}"`}${tag == null ? "" : ` data-value="${tag}"`} class="tags-input-item inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-0.5 text-xs font-medium"><span data-part="item-preview"${String(i) == null ? "" : ` data-index="${String(i)}"`}${tag == null ? "" : ` data-value="${tag}"`} class="inline-flex items-center gap-1 data-[highlighted]:ring-2 data-[highlighted]:ring-ring data-[highlighted]:rounded-sm"><span data-part="item-text"${String(i) == null ? "" : ` data-index="${String(i)}"`}${tag == null ? "" : ` data-value="${tag}"`}>${tag}</span></span><button data-part="item-delete-trigger"${String(i) == null ? "" : ` data-index="${String(i)}"`}${tag == null ? "" : ` data-value="${tag}"`} class="tags-input-item-delete text-muted-foreground hover:text-foreground">✕</button></span>`).join("") + "<!---->"}<input data-part="input" class="tags-input-input flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground min-w-[60px]" /></div><input data-part="hidden-input" type="hidden" /></div>`;
+		Component._register(ZagComponent);
+		return `<div id="${this.id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><!--${this.id + "-c0"}-->${props.label && `<label data-part="label" class="tags-input-label text-sm font-medium mb-1 block">${props.label}</label>` || ""}<!--${this.id + "-c0-end"}--><div id="${this.id + "-b1"}" data-part="control" class="tags-input-control flex flex-wrap gap-1.5 rounded-md border border-input bg-transparent px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-ring">${(this.value || []).map((tag, i) => `<span id="${this.id + "-b1-" + String(String(tag))}" data-gea-item-id="${String(tag)}" data-part="item"${String(i) == null || String(i) === false ? "" : ` data-index="${String(i)}"`}${tag == null || tag === false ? "" : ` data-value="${tag}"`} class="tags-input-item inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-0.5 text-xs font-medium"><span data-part="item-preview"${String(i) == null || String(i) === false ? "" : ` data-index="${String(i)}"`}${tag == null || tag === false ? "" : ` data-value="${tag}"`} class="inline-flex items-center gap-1 data-[highlighted]:ring-2 data-[highlighted]:ring-ring data-[highlighted]:rounded-sm"><span data-part="item-text"${String(i) == null || String(i) === false ? "" : ` data-index="${String(i)}"`}${tag == null || tag === false ? "" : ` data-value="${tag}"`}>${tag}</span></span><button data-part="item-delete-trigger"${String(i) == null || String(i) === false ? "" : ` data-index="${String(i)}"`}${tag == null || tag === false ? "" : ` data-value="${tag}"`} class="tags-input-item-delete text-muted-foreground hover:text-foreground">✕</button></span>`).join("") + "<!---->"}<input data-part="input" class="tags-input-input flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground min-w-[60px]" /></div><input data-part="hidden-input" type="hidden" /></div>`;
 	}
 	render__unresolved_0Item(tag, i) {
 		const __v = (v) => v != null && typeof v === "object" ? v.valueOf() : v;
-		return `<span id="${this.id + "-b1-" + String(String(tag))}" data-gea-item-id="${String(tag)}" data-part="item"${__v(String(i)) == __v(null) ? "" : ` data-index="${String(i)}"`}${__v(tag) == __v(null) ? "" : ` data-value="${tag}"`} class="tags-input-item inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-0.5 text-xs font-medium"><span data-part="item-preview"${__v(String(i)) == __v(null) ? "" : ` data-index="${String(i)}"`}${__v(tag) == __v(null) ? "" : ` data-value="${tag}"`} class="inline-flex items-center gap-1 data-[highlighted]:ring-2 data-[highlighted]:ring-ring data-[highlighted]:rounded-sm"><span data-part="item-text"${__v(String(i)) == __v(null) ? "" : ` data-index="${String(i)}"`}${__v(tag) == __v(null) ? "" : ` data-value="${tag}"`}>${tag}</span></span><button data-part="item-delete-trigger"${__v(String(i)) == __v(null) ? "" : ` data-index="${String(i)}"`}${__v(tag) == __v(null) ? "" : ` data-value="${tag}"`} class="tags-input-item-delete text-muted-foreground hover:text-foreground">✕</button></span>`;
+		return `<span id="${this.id + "-b1-" + String(tag.id)}" data-gea-item-id="${tag.id}" data-part="item"${__v(String(i)) == null || __v(String(i)) === false ? "" : ` data-index="${String(i)}"`}${__v(tag) == null || __v(tag) === false ? "" : ` data-value="${tag}"`} class="tags-input-item inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-0.5 text-xs font-medium"><span data-part="item-preview"${__v(String(i)) == null || __v(String(i)) === false ? "" : ` data-index="${String(i)}"`}${__v(tag) == null || __v(tag) === false ? "" : ` data-value="${tag}"`} class="inline-flex items-center gap-1 data-[highlighted]:ring-2 data-[highlighted]:ring-ring data-[highlighted]:rounded-sm"><span data-part="item-text"${__v(String(i)) == null || __v(String(i)) === false ? "" : ` data-index="${String(i)}"`}${__v(tag) == null || __v(tag) === false ? "" : ` data-value="${tag}"`}>${tag}</span></span><button data-part="item-delete-trigger"${__v(String(i)) == null || __v(String(i)) === false ? "" : ` data-index="${String(i)}"`}${__v(tag) == null || __v(tag) === false ? "" : ` data-value="${tag}"`} class="tags-input-item-delete text-muted-foreground hover:text-foreground">✕</button></span>`;
 	}
 	create__unresolved_0Item(item, __idx) {
 		var __c = this.____unresolved_0_container;
 		if (!__c.__geaTpl) try {
-			var __tw = __c.cloneNode(false);
+			var __tw = document.createElement("template");
 			__tw.innerHTML = this.render__unresolved_0Item("__dummy__", 0);
-			__c.__geaTpl = __tw.firstElementChild;
+			__c.__geaTpl = __tw.content.firstElementChild;
 		} catch {}
 		if (!__c.__geaIdPfx) __c.__geaIdPfx = this.id_ + "-b1-";
 		if (__c.__geaTpl) var el = __c.__geaTpl.cloneNode(true);
 		else {
-			var __fw = __c.cloneNode(false);
+			var __fw = document.createElement("template");
 			__fw.innerHTML = this.render__unresolved_0Item(item, __idx);
-			var el = __fw.firstElementChild;
+			var el = __fw.content.firstElementChild;
 		}
 		var __av = String(__idx);
 		if (__av == null || __av === false) el.removeAttribute("data-index");
@@ -2601,6 +2699,10 @@ var TagsInput = class extends ZagComponent {
 		el.__geaItem = item;
 		return el;
 	}
+	__observe_local_value(value, change) {
+		this.__geaSyncMap(0);
+		this.__geaSyncMap(0);
+	}
 	__onPropChange(key, value) {
 		if (key === "class") try {
 			const __el = this.$(":scope");
@@ -2613,9 +2715,6 @@ var TagsInput = class extends ZagComponent {
 		} catch {}
 		if (key === "label") this.__geaPatchCond(0);
 	}
-	__observe_local_value(__v, __c) {
-		this.__geaSyncMap(0);
-	}
 	createdHooks() {
 		if (!this.__observer_removers__) this.__observer_removers__ = [];
 		if (!this.__stores) this.__stores = {};
@@ -2629,11 +2728,11 @@ var TagsInput = class extends ZagComponent {
 	__setupLocalStateObservers() {
 		if (typeof this.__ensureArrayConfigs === "function") this.__ensureArrayConfigs();
 		if (!this.__store) return;
-		this.__observer_removers__.push(this.__store.observe(["value"], (__v, __c) => this.__observe_local_value(__v, __c)));
-	}
-	dispose() {
-		if (this.__observer_removers__) this.__observer_removers__.forEach((fn) => fn());
-		super.dispose();
+		this.__observer_removers__.push(this.__store.observe(["value"], (__v, __c) => {
+			try {
+				this.__observe_local_value(__v, __c);
+			} catch (_e) {}
+		}));
 	}
 };
 //#endregion
@@ -2809,7 +2908,8 @@ var Toaster = class extends Component {
 		super.dispose();
 	}
 	template(props) {
-		return `<div id="${this.id}" data-part="group"${`toaster fixed z-[100] flex max-h-screen flex-col-reverse gap-2 p-4 ${props.class || "bottom-0 right-0"}` == null ? "" : ` class="${`toaster fixed z-[100] flex max-h-screen flex-col-reverse gap-2 p-4 ${props.class || "bottom-0 right-0"}`.trim()}"`}></div>`;
+		Component._register(Component);
+		return `<div id="${this.id}" data-part="group" class="${`toaster fixed z-[100] flex max-h-screen flex-col-reverse gap-2 p-4 ${props.class || "bottom-0 right-0"}`.trim()}"></div>`;
 	}
 	__onPropChange(key, value) {
 		if (key === "class") try {
@@ -2858,25 +2958,29 @@ var ToggleGroup = class extends ZagComponent {
 		this.value = api.value;
 	}
 	template(props) {
+		Component._register(ZagComponent);
 		const items = props.items || [];
-		return `<div id="${this.id}" data-part="root"${`toggle-group-root inline-flex rounded-md border ${props.class || ""}` == null ? "" : ` class="${`toggle-group-root inline-flex rounded-md border ${props.class || ""}`.trim()}"`}>${items.map((item) => `<button data-gea-item-id="${String(item)}" data-part="item"${item.value == null ? "" : ` data-value="${item.value}"`} class="toggle-group-item inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground">${item.label}</button>`).join("") + "<!---->"}</div>`;
+		return `<div id="${this.id}" data-part="root" class="${`toggle-group-root inline-flex rounded-md border ${props.class || ""}`.trim()}">${items.map((item) => `<button data-gea-item-id="${item.value}" data-part="item"${item.value == null || item.value === false ? "" : ` data-value="${item.value}"`} class="toggle-group-item inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground">${item.label}</button>`).join("") + "<!---->"}</div>`;
 	}
 	render__unresolved_0Item(item) {
 		const __v = (v) => v != null && typeof v === "object" ? v.valueOf() : v;
-		return `<button data-gea-item-id="${String(item)}" data-part="item"${__v(item.value) == __v(null) ? "" : ` data-value="${item.value}"`} class="toggle-group-item inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground">${item.label}</button>`;
+		return `<button data-gea-item-id="${item.value}" data-part="item"${__v(item.value) == null || __v(item.value) === false ? "" : ` data-value="${item.value}"`} class="toggle-group-item inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground">${item.label}</button>`;
 	}
 	create__unresolved_0Item(item) {
 		var __c = this.____unresolved_0_container;
 		if (!__c.__geaTpl) try {
-			var __tw = __c.cloneNode(false);
-			__tw.innerHTML = this.render__unresolved_0Item("__dummy__");
-			__c.__geaTpl = __tw.firstElementChild;
+			var __tw = document.createElement("template");
+			__tw.innerHTML = this.render__unresolved_0Item({
+				value: 0,
+				label: ""
+			});
+			__c.__geaTpl = __tw.content.firstElementChild;
 		} catch {}
 		if (__c.__geaTpl) var el = __c.__geaTpl.cloneNode(true);
 		else {
-			var __fw = __c.cloneNode(false);
+			var __fw = document.createElement("template");
 			__fw.innerHTML = this.render__unresolved_0Item(item);
-			var el = __fw.firstElementChild;
+			var el = __fw.content.firstElementChild;
 		}
 		var __av = item.value;
 		if (__av == null || __av === false) el.removeAttribute("data-value");
@@ -2884,7 +2988,7 @@ var ToggleGroup = class extends ZagComponent {
 		el.textContent = `
             ${item.label}
           `;
-		el.setAttribute("data-gea-item-id", String(item));
+		el.setAttribute("data-gea-item-id", item.value);
 		el.__geaItem = item;
 		return el;
 	}
@@ -2911,11 +3015,7 @@ var ToggleGroup = class extends ZagComponent {
 		if (typeof this.__ensureArrayConfigs === "function") this.__ensureArrayConfigs();
 		this.__geaRegisterMap(0, "____unresolved_0_container", () => this.$(":scope"), () => {
 			return this.props.items || [];
-		}, (__item) => this.create__unresolved_0Item(__item));
-	}
-	dispose() {
-		if (this.__observer_removers__) this.__observer_removers__.forEach((fn) => fn());
-		super.dispose();
+		}, (__item) => this.create__unresolved_0Item(__item), "value");
 	}
 };
 //#endregion
@@ -2960,6 +3060,7 @@ var Tooltip = class extends ZagComponent {
 		this.open = api.open;
 	}
 	template(props) {
+		Component._register(ZagComponent);
 		return `<div id="${this.id}"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`} style="display: inline-block;"><div id="${this.id + "-b1"}" data-part="trigger" class="tooltip-trigger" style="display: inline-block;">${props.children}</div><div data-part="positioner" class="tooltip-positioner"><div id="${this.id + "-b2"}" data-part="content" class="tooltip-content z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md">${props.content}</div></div></div>`;
 	}
 	__onPropChange(key, value) {
@@ -2975,7 +3076,11 @@ var Tooltip = class extends ZagComponent {
 		if (key === "children") try {
 			const __el = document.getElementById(this.id + "-b1");
 			if (__el) {
-				if (__el.textContent !== value) __el.textContent = value;
+				if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this.instantiateChildComponents_();
+					if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+				}
 			}
 		} catch {}
 		if (key === "content") try {
@@ -2993,8 +3098,10 @@ var TreeView = class extends ZagComponent {
 		super(...args);
 		this.selectedValue = [];
 		this.expandedValue = [];
-		this.props;
-		this.__geaCond_0 = !!this.props.label;
+		try {
+			this.props;
+			this.__geaCond_0 = !!this.props.label;
+		} catch {}
 		this.__geaRegisterCond(0, "c0", () => {
 			this.props;
 			return this.props.label;
@@ -3041,6 +3148,7 @@ var TreeView = class extends ZagComponent {
 		this.expandedValue = api.expandedValue;
 	}
 	template(props) {
+		Component._register(ZagComponent);
 		return `<div id="${this.id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${(props.class || "").trim()}"`}><!--${this.id + "-c0"}-->${props.label && `<label data-part="label" class="tree-view-label text-sm font-medium mb-2 block">${props.label}</label>` || ""}<!--${this.id + "-c0-end"}--><div id="${this.id + "-b1"}" data-part="tree" class="tree-view-tree" role="tree">${props.children}</div></div>`;
 	}
 	__onPropChange(key, value) {
@@ -3056,7 +3164,11 @@ var TreeView = class extends ZagComponent {
 		if (key === "children") try {
 			const __el = document.getElementById(this.id + "-b1");
 			if (__el) {
-				if (__el.textContent !== value) __el.textContent = value;
+				if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this.instantiateChildComponents_();
+					if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+				}
 			}
 		} catch {}
 		if (key === "label") this.__geaPatchCond(0);
@@ -3080,9 +3192,10 @@ const sizes = {
 };
 var Button = class extends Component {
 	template(props) {
+		Component._register(Component);
 		const variant = variants$2[props.variant || "default"] || variants$2.default;
 		const size = sizes[props.size || "default"] || sizes.default;
-		return `<button id="${this.id}"${cn("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", variant, size, props.class) == null ? "" : ` class="${cn("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", variant, size, props.class).trim()}"`}${(props.type || "button") == null || (props.type || "button") === false ? "" : ` type="${props.type || "button"}"`}${props.disabled == null ? "" : ` disabled="${props.disabled}"`}>${props.children}</button>`;
+		return `<button id="${this.id}"${cn("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", variant, size, props.class) == null || cn("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", variant, size, props.class) === false ? "" : ` class="${cn("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", variant, size, props.class).trim()}"`}${(props.type || "button") == null || (props.type || "button") === false ? "" : ` type="${props.type || "button"}"`}${props.disabled == null || props.disabled === false ? "" : ` disabled="${props.disabled}"`}>${props.children}</button>`;
 	}
 	get events() {
 		return { click: { [`#${this.id}`]: this.__event_click_0 } };
@@ -3133,7 +3246,11 @@ var Button = class extends Component {
 		if (key === "children") try {
 			const __el = this.$(":scope");
 			if (__el) {
-				if (__el.textContent !== value) __el.textContent = value;
+				if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this.instantiateChildComponents_();
+					if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+				}
 			}
 		} catch {}
 	}
@@ -3142,7 +3259,13 @@ var Button = class extends Component {
 //#region src/components/card.tsx
 var Card = class extends Component {
 	template(props) {
-		return `<div id="${this.id}"${cn("rounded-xl border bg-card text-card-foreground shadow", props.class) == null ? "" : ` class="${cn("rounded-xl border bg-card text-card-foreground shadow", props.class).trim()}"`}>${props.children}</div>`;
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		return `<div id="${this.id}"${cn("rounded-xl border bg-card text-card-foreground shadow", props.class) == null || cn("rounded-xl border bg-card text-card-foreground shadow", props.class) === false ? "" : ` class="${cn("rounded-xl border bg-card text-card-foreground shadow", props.class).trim()}"`}>${props.children}</div>`;
 	}
 	__onPropChange(key, value) {
 		if (key === "class") try {
@@ -3157,14 +3280,24 @@ var Card = class extends Component {
 		if (key === "children") try {
 			const __el = this.$(":scope");
 			if (__el) {
-				if (__el.textContent !== value) __el.textContent = value;
+				if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this.instantiateChildComponents_();
+					if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+				}
 			}
 		} catch {}
 	}
 };
 var CardHeader = class extends Component {
 	template(props) {
-		return `<div id="${this.id}"${cn("flex flex-col space-y-1.5 p-6", props.class) == null ? "" : ` class="${cn("flex flex-col space-y-1.5 p-6", props.class).trim()}"`}>${props.children}</div>`;
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		return `<div id="${this.id}"${cn("flex flex-col space-y-1.5 p-6", props.class) == null || cn("flex flex-col space-y-1.5 p-6", props.class) === false ? "" : ` class="${cn("flex flex-col space-y-1.5 p-6", props.class).trim()}"`}>${props.children}</div>`;
 	}
 	__onPropChange(key, value) {
 		if (key === "class") try {
@@ -3179,14 +3312,24 @@ var CardHeader = class extends Component {
 		if (key === "children") try {
 			const __el = this.$(":scope");
 			if (__el) {
-				if (__el.textContent !== value) __el.textContent = value;
+				if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this.instantiateChildComponents_();
+					if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+				}
 			}
 		} catch {}
 	}
 };
 var CardTitle = class extends Component {
 	template(props) {
-		return `<h3 id="${this.id}"${cn("font-semibold leading-none tracking-tight", props.class) == null ? "" : ` class="${cn("font-semibold leading-none tracking-tight", props.class).trim()}"`}>${props.children}</h3>`;
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		return `<h3 id="${this.id}"${cn("font-semibold leading-none tracking-tight", props.class) == null || cn("font-semibold leading-none tracking-tight", props.class) === false ? "" : ` class="${cn("font-semibold leading-none tracking-tight", props.class).trim()}"`}>${props.children}</h3>`;
 	}
 	__onPropChange(key, value) {
 		if (key === "class") try {
@@ -3201,14 +3344,24 @@ var CardTitle = class extends Component {
 		if (key === "children") try {
 			const __el = this.$(":scope");
 			if (__el) {
-				if (__el.textContent !== value) __el.textContent = value;
+				if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this.instantiateChildComponents_();
+					if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+				}
 			}
 		} catch {}
 	}
 };
 var CardDescription = class extends Component {
 	template(props) {
-		return `<p id="${this.id}"${cn("text-sm text-muted-foreground", props.class) == null ? "" : ` class="${cn("text-sm text-muted-foreground", props.class).trim()}"`}>${props.children}</p>`;
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		return `<p id="${this.id}"${cn("text-sm text-muted-foreground", props.class) == null || cn("text-sm text-muted-foreground", props.class) === false ? "" : ` class="${cn("text-sm text-muted-foreground", props.class).trim()}"`}>${props.children}</p>`;
 	}
 	__onPropChange(key, value) {
 		if (key === "class") try {
@@ -3223,14 +3376,24 @@ var CardDescription = class extends Component {
 		if (key === "children") try {
 			const __el = this.$(":scope");
 			if (__el) {
-				if (__el.textContent !== value) __el.textContent = value;
+				if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this.instantiateChildComponents_();
+					if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+				}
 			}
 		} catch {}
 	}
 };
 var CardContent = class extends Component {
 	template(props) {
-		return `<div id="${this.id}"${cn("p-6 pt-0", props.class) == null ? "" : ` class="${cn("p-6 pt-0", props.class).trim()}"`}>${props.children}</div>`;
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		return `<div id="${this.id}"${cn("p-6 pt-0", props.class) == null || cn("p-6 pt-0", props.class) === false ? "" : ` class="${cn("p-6 pt-0", props.class).trim()}"`}>${props.children}</div>`;
 	}
 	__onPropChange(key, value) {
 		if (key === "class") try {
@@ -3245,14 +3408,24 @@ var CardContent = class extends Component {
 		if (key === "children") try {
 			const __el = this.$(":scope");
 			if (__el) {
-				if (__el.textContent !== value) __el.textContent = value;
+				if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this.instantiateChildComponents_();
+					if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+				}
 			}
 		} catch {}
 	}
 };
 var CardFooter = class extends Component {
 	template(props) {
-		return `<div id="${this.id}"${cn("flex items-center p-6 pt-0", props.class) == null ? "" : ` class="${cn("flex items-center p-6 pt-0", props.class).trim()}"`}>${props.children}</div>`;
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		return `<div id="${this.id}"${cn("flex items-center p-6 pt-0", props.class) == null || cn("flex items-center p-6 pt-0", props.class) === false ? "" : ` class="${cn("flex items-center p-6 pt-0", props.class).trim()}"`}>${props.children}</div>`;
 	}
 	__onPropChange(key, value) {
 		if (key === "class") try {
@@ -3267,7 +3440,11 @@ var CardFooter = class extends Component {
 		if (key === "children") try {
 			const __el = this.$(":scope");
 			if (__el) {
-				if (__el.textContent !== value) __el.textContent = value;
+				if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this.instantiateChildComponents_();
+					if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+				}
 			}
 		} catch {}
 	}
@@ -3276,7 +3453,8 @@ var CardFooter = class extends Component {
 //#region src/components/input.tsx
 var Input = class extends Component {
 	template(props) {
-		return `<input id="${this.id}"${cn("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", props.class) == null ? "" : ` class="${cn("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", props.class).trim()}"`}${(props.type || "text") == null || (props.type || "text") === false ? "" : ` type="${props.type || "text"}"`}${props.placeholder == null ? "" : ` placeholder="${props.placeholder}"`}${props.value == null ? "" : ` value="${props.value}"`}${props.disabled == null ? "" : ` disabled="${props.disabled}"`}${props.name == null ? "" : ` name="${props.name}"`}${props.inputId == null ? "" : ` id="${props.inputId}"`} />`;
+		Component._register(Component);
+		return `<input id="${this.id}"${cn("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", props.class) == null || cn("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", props.class) === false ? "" : ` class="${cn("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", props.class).trim()}"`}${(props.type || "text") == null || (props.type || "text") === false ? "" : ` type="${props.type || "text"}"`}${props.placeholder == null || props.placeholder === false ? "" : ` placeholder="${props.placeholder}"`}${props.value == null || props.value === false ? "" : ` value="${props.value}"`}${props.disabled == null || props.disabled === false ? "" : ` disabled="${props.disabled}"`}${props.name == null || props.name === false ? "" : ` name="${props.name}"`} />`;
 	}
 	get events() {
 		return { input: { [`#${this.id}`]: this.__event_input_0 } };
@@ -3336,7 +3514,8 @@ var Input = class extends Component {
 //#region src/components/textarea.tsx
 var Textarea = class extends Component {
 	template(props) {
-		return `<textarea id="${this.id}"${cn("flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", props.class) == null ? "" : ` class="${cn("flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", props.class).trim()}"`}${props.placeholder == null ? "" : ` placeholder="${props.placeholder}"`}${props.disabled == null ? "" : ` disabled="${props.disabled}"`}${props.name == null ? "" : ` name="${props.name}"`}${props.rows == null ? "" : ` rows="${props.rows}"`}>${props.value || ""}</textarea>`;
+		Component._register(Component);
+		return `<textarea id="${this.id}"${cn("flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", props.class) == null || cn("flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", props.class) === false ? "" : ` class="${cn("flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", props.class).trim()}"`}${props.placeholder == null || props.placeholder === false ? "" : ` placeholder="${props.placeholder}"`}${props.disabled == null || props.disabled === false ? "" : ` disabled="${props.disabled}"`}${props.name == null || props.name === false ? "" : ` name="${props.name}"`}${props.rows == null || props.rows === false ? "" : ` rows="${props.rows}"`}>${props.value || ""}</textarea>`;
 	}
 	get events() {
 		return { input: { [`#${this.id}`]: this.__event_input_0 } };
@@ -3393,7 +3572,8 @@ var Textarea = class extends Component {
 //#region src/components/label.tsx
 var Label = class extends Component {
 	template(props) {
-		return `<label id="${this.id}"${cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", props.class) == null ? "" : ` class="${cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", props.class).trim()}"`}${props.htmlFor == null ? "" : ` for="${props.htmlFor}"`}>${props.children}</label>`;
+		Component._register(Component);
+		return `<label id="${this.id}"${cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", props.class) == null || cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", props.class) === false ? "" : ` class="${cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", props.class).trim()}"`}${props.htmlFor == null || props.htmlFor === false ? "" : ` for="${props.htmlFor}"`}>${props.children}</label>`;
 	}
 	__onPropChange(key, value) {
 		if (key === "class") try {
@@ -3413,7 +3593,11 @@ var Label = class extends Component {
 		if (key === "children") try {
 			const __el = this.$(":scope");
 			if (__el) {
-				if (__el.textContent !== value) __el.textContent = value;
+				if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this.instantiateChildComponents_();
+					if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+				}
 			}
 		} catch {}
 	}
@@ -3428,8 +3612,9 @@ const variants$1 = {
 };
 var Badge = class extends Component {
 	template(props) {
+		Component._register(Component);
 		const variant = variants$1[props.variant || "default"] || variants$1.default;
-		return `<span id="${this.id}"${cn("inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", variant, props.class) == null ? "" : ` class="${cn("inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", variant, props.class).trim()}"`}>${props.children}</span>`;
+		return `<span id="${this.id}"${cn("inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", variant, props.class) == null || cn("inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", variant, props.class) === false ? "" : ` class="${cn("inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", variant, props.class).trim()}"`}>${props.children}</span>`;
 	}
 	__onPropChange(key, value) {
 		if (key === "variant") try {
@@ -3451,7 +3636,11 @@ var Badge = class extends Component {
 		if (key === "children") try {
 			const __el = this.$(":scope");
 			if (__el) {
-				if (__el.textContent !== value) __el.textContent = value;
+				if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this.instantiateChildComponents_();
+					if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+				}
 			}
 		} catch {}
 	}
@@ -3464,8 +3653,11 @@ const variants = {
 };
 var Alert = class extends Component {
 	template(props) {
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
 		const variant = variants[props.variant || "default"] || variants.default;
-		return `<div id="${this.id}"${cn("relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7", variant, props.class) == null ? "" : ` class="${cn("relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7", variant, props.class).trim()}"`} role="alert">${props.children}</div>`;
+		return `<div id="${this.id}"${cn("relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7", variant, props.class) == null || cn("relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7", variant, props.class) === false ? "" : ` class="${cn("relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7", variant, props.class).trim()}"`} role="alert">${props.children}</div>`;
 	}
 	__onPropChange(key, value) {
 		if (key === "variant") try {
@@ -3487,14 +3679,21 @@ var Alert = class extends Component {
 		if (key === "children") try {
 			const __el = this.$(":scope");
 			if (__el) {
-				if (__el.textContent !== value) __el.textContent = value;
+				if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this.instantiateChildComponents_();
+					if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+				}
 			}
 		} catch {}
 	}
 };
 var AlertTitle = class extends Component {
 	template(props) {
-		return `<h5 id="${this.id}"${cn("mb-1 font-medium leading-none tracking-tight", props.class) == null ? "" : ` class="${cn("mb-1 font-medium leading-none tracking-tight", props.class).trim()}"`}>${props.children}</h5>`;
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		return `<h5 id="${this.id}"${cn("mb-1 font-medium leading-none tracking-tight", props.class) == null || cn("mb-1 font-medium leading-none tracking-tight", props.class) === false ? "" : ` class="${cn("mb-1 font-medium leading-none tracking-tight", props.class).trim()}"`}>${props.children}</h5>`;
 	}
 	__onPropChange(key, value) {
 		if (key === "class") try {
@@ -3509,14 +3708,21 @@ var AlertTitle = class extends Component {
 		if (key === "children") try {
 			const __el = this.$(":scope");
 			if (__el) {
-				if (__el.textContent !== value) __el.textContent = value;
+				if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this.instantiateChildComponents_();
+					if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+				}
 			}
 		} catch {}
 	}
 };
 var AlertDescription = class extends Component {
 	template(props) {
-		return `<div id="${this.id}"${cn("text-sm [&_p]:leading-relaxed", props.class) == null ? "" : ` class="${cn("text-sm [&_p]:leading-relaxed", props.class).trim()}"`}>${props.children}</div>`;
+		Component._register(Component);
+		Component._register(Component);
+		Component._register(Component);
+		return `<div id="${this.id}"${cn("text-sm [&_p]:leading-relaxed", props.class) == null || cn("text-sm [&_p]:leading-relaxed", props.class) === false ? "" : ` class="${cn("text-sm [&_p]:leading-relaxed", props.class).trim()}"`}>${props.children}</div>`;
 	}
 	__onPropChange(key, value) {
 		if (key === "class") try {
@@ -3531,7 +3737,11 @@ var AlertDescription = class extends Component {
 		if (key === "children") try {
 			const __el = this.$(":scope");
 			if (__el) {
-				if (__el.textContent !== value) __el.textContent = value;
+				if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this.instantiateChildComponents_();
+					if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+				}
 			}
 		} catch {}
 	}
@@ -3540,8 +3750,9 @@ var AlertDescription = class extends Component {
 //#region src/components/separator.tsx
 var Separator = class extends Component {
 	template(props) {
+		Component._register(Component);
 		const isVertical = props.orientation === "vertical";
-		return `<div id="${this.id}"${cn("shrink-0 bg-border", isVertical ? "h-full w-[1px]" : "h-[1px] w-full", props.class) == null ? "" : ` class="${cn("shrink-0 bg-border", isVertical ? "h-full w-[1px]" : "h-[1px] w-full", props.class).trim()}"`} role="separator"${(props.orientation || "horizontal") == null || (props.orientation || "horizontal") === false ? "" : ` aria-orientation="${props.orientation || "horizontal"}"`}></div>`;
+		return `<div id="${this.id}"${cn("shrink-0 bg-border", isVertical ? "h-full w-[1px]" : "h-[1px] w-full", props.class) == null || cn("shrink-0 bg-border", isVertical ? "h-full w-[1px]" : "h-[1px] w-full", props.class) === false ? "" : ` class="${cn("shrink-0 bg-border", isVertical ? "h-full w-[1px]" : "h-[1px] w-full", props.class).trim()}"`} role="separator"${(props.orientation || "horizontal") == null || (props.orientation || "horizontal") === false ? "" : ` aria-orientation="${props.orientation || "horizontal"}"`}></div>`;
 	}
 	__onPropChange(key, value) {
 		if (key === "orientation") try {
@@ -3577,7 +3788,8 @@ var Separator = class extends Component {
 //#region src/components/skeleton.tsx
 var Skeleton = class extends Component {
 	template(props) {
-		return `<div id="${this.id}"${cn("animate-pulse rounded-md bg-primary/10", props.class) == null ? "" : ` class="${cn("animate-pulse rounded-md bg-primary/10", props.class).trim()}"`}></div>`;
+		Component._register(Component);
+		return `<div id="${this.id}"${cn("animate-pulse rounded-md bg-primary/10", props.class) == null || cn("animate-pulse rounded-md bg-primary/10", props.class) === false ? "" : ` class="${cn("animate-pulse rounded-md bg-primary/10", props.class).trim()}"`}></div>`;
 	}
 	__onPropChange(key, value) {
 		if (key === "class") try {
@@ -3592,6 +3804,530 @@ var Skeleton = class extends Component {
 	}
 };
 //#endregion
-export { Accordion, Alert, AlertDescription, AlertTitle, Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Clipboard, Collapsible, Combobox, Dialog, FileUpload, HoverCard, Input, Label, Menu, NumberInput, Pagination, PinInput, Popover, Progress, RadioGroup, RatingGroup, Select, Separator, Skeleton, Slider, Switch, Tabs, TagsInput, Textarea, ToastStore, Toaster, ToggleGroup, Tooltip, TreeView, ZagComponent, cn };
+//#region src/components/dnd-manager.ts
+const DRAG_THRESHOLD_SQ = 25;
+const DRAGGABLE_SEL = "[data-draggable-id]";
+const DROPPABLE_SEL = "[data-droppable-id]";
+var DndManager = class {
+	constructor() {
+		this.droppables = /* @__PURE__ */ new Map();
+		this._onDragEnd = null;
+		this._dragging = false;
+		this._started = false;
+		this._draggedId = "";
+		this._sourceDroppableId = "";
+		this._sourceIndex = 0;
+		this._sourceEl = null;
+		this._sourceHeight = 0;
+		this._sourceRect = null;
+		this._savedCssText = "";
+		this._placeholder = null;
+		this._startX = 0;
+		this._startY = 0;
+		this._offsetX = 0;
+		this._offsetY = 0;
+		this._currentDroppableId = null;
+		this._currentIndex = 0;
+		this._lastClientY = 0;
+		this._cleanedUp = false;
+		this._boundMove = this._onPointerMove.bind(this);
+		this._boundUp = this._onPointerUp.bind(this);
+		this._boundKeyDown = this._onKeyDown.bind(this);
+		this._boundDocDown = this._onDocumentPointerDown.bind(this);
+		this._docListenerAttached = false;
+	}
+	get onDragEnd() {
+		return this._onDragEnd;
+	}
+	set onDragEnd(fn) {
+		this._onDragEnd = fn;
+		if (fn) this._ensureDocListener();
+	}
+	get isDragging() {
+		return this._started;
+	}
+	_ensureDocListener() {
+		if (this._docListenerAttached || typeof document === "undefined") return;
+		document.addEventListener("pointerdown", this._boundDocDown, true);
+		this._docListenerAttached = true;
+	}
+	_onDocumentPointerDown(e) {
+		const el = e.target.closest?.(DRAGGABLE_SEL);
+		if (!el) return;
+		this.startTracking(e, el.dataset.draggableId, el);
+	}
+	registerDroppable(id, el) {
+		this.droppables.set(id, el);
+		this._ensureDocListener();
+	}
+	unregisterDroppable(id) {
+		this.droppables.delete(id);
+	}
+	startTracking(e, draggableId, el) {
+		if (this._dragging || e.button !== 0) return;
+		this._ensureDocListener();
+		const droppableEl = el.closest(DROPPABLE_SEL);
+		if (!droppableEl) return;
+		const droppableId = droppableEl.dataset.droppableId;
+		const sourceIndex = Array.from(droppableEl.querySelectorAll(`:scope > ${DRAGGABLE_SEL}`)).indexOf(el);
+		if (sourceIndex === -1) return;
+		this._dragging = true;
+		this._started = false;
+		this._cleanedUp = false;
+		this._draggedId = draggableId;
+		this._sourceDroppableId = droppableId;
+		this._sourceIndex = sourceIndex;
+		this._sourceEl = el;
+		const rect = el.getBoundingClientRect();
+		this._sourceHeight = rect.height;
+		this._sourceRect = rect;
+		this._startX = e.clientX;
+		this._startY = e.clientY;
+		this._lastClientY = e.clientY;
+		this._offsetX = e.clientX - rect.left;
+		this._offsetY = e.clientY - rect.top;
+		document.addEventListener("pointermove", this._boundMove);
+		document.addEventListener("pointerup", this._boundUp);
+		document.addEventListener("keydown", this._boundKeyDown);
+		e.preventDefault();
+	}
+	_onPointerMove(e) {
+		if (!this._dragging) return;
+		if (!this._started) {
+			const dx = e.clientX - this._startX;
+			const dy = e.clientY - this._startY;
+			if (dx * dx + dy * dy < DRAG_THRESHOLD_SQ) return;
+			this._initDrag();
+			this._updateTarget(e.clientX, e.clientY);
+			return;
+		}
+		this._sourceEl.style.transform = `translate(${e.clientX - this._offsetX}px, ${e.clientY - this._offsetY}px)`;
+		this._updateTarget(e.clientX, e.clientY);
+		this._lastClientY = e.clientY;
+	}
+	_initDrag() {
+		this._started = true;
+		const el = this._sourceEl;
+		const rect = this._sourceRect;
+		document.querySelectorAll(DROPPABLE_SEL).forEach((dropEl) => {
+			const id = dropEl.dataset.droppableId;
+			if (!this.droppables.has(id)) this.droppables.set(id, dropEl);
+		});
+		const elMargin = getComputedStyle(el).marginBottom;
+		this._savedCssText = el.style.cssText;
+		const placeholder = document.createElement("div");
+		placeholder.className = "gea-dnd-placeholder";
+		placeholder.style.height = rect.height + "px";
+		placeholder.style.marginBottom = elMargin;
+		placeholder.style.transition = "none";
+		el.parentElement.insertBefore(placeholder, el);
+		document.body.appendChild(el);
+		Object.assign(el.style, {
+			position: "fixed",
+			top: "0px",
+			left: "0",
+			width: rect.width + "px",
+			height: rect.height + "px",
+			transform: `translate(${rect.left}px, ${rect.top}px)`,
+			pointerEvents: "none",
+			zIndex: "99999",
+			margin: "0",
+			willChange: "transform",
+			boxShadow: "none"
+		});
+		el.offsetHeight;
+		el.style.boxShadow = "5px 10px 30px 0px rgba(9, 30, 66, 0.15)";
+		this._placeholder = placeholder;
+		this._currentDroppableId = this._sourceDroppableId;
+		this._currentIndex = this._sourceIndex;
+	}
+	_updateTarget(clientX, clientY) {
+		let foundId = null;
+		let foundEl = null;
+		for (const [id, el] of this.droppables) {
+			const r = el.getBoundingClientRect();
+			if (clientX >= r.left && clientX <= r.right && clientY >= r.top && clientY <= r.bottom) {
+				foundId = id;
+				foundEl = el;
+				break;
+			}
+		}
+		if (!foundEl || foundId === null) {
+			this._currentDroppableId = null;
+			return;
+		}
+		const items = Array.from(foundEl.querySelectorAll(`:scope > ${DRAGGABLE_SEL}`));
+		const threshold = clientY >= this._lastClientY ? 0 : 1;
+		let insertIndex = items.length;
+		for (let i = 0; i < items.length; i++) {
+			const r = items[i].getBoundingClientRect();
+			if (clientY < r.top + r.height * threshold) {
+				insertIndex = i;
+				break;
+			}
+		}
+		this._currentDroppableId = foundId;
+		this._currentIndex = insertIndex;
+		if (!this._placeholder) return;
+		const refNode = items[insertIndex] || null;
+		if (this._placeholder.parentElement !== foundEl || this._placeholder.nextElementSibling !== refNode) {
+			if (this._placeholder.parentElement) {
+				const ghost = document.createElement("div");
+				ghost.style.height = this._sourceHeight + "px";
+				ghost.style.marginBottom = this._placeholder.style.marginBottom;
+				ghost.style.transition = "height 0.2s cubic-bezier(0.2, 0, 0, 1)";
+				ghost.style.overflow = "hidden";
+				this._placeholder.parentElement.insertBefore(ghost, this._placeholder);
+				ghost.offsetHeight;
+				ghost.style.height = "0px";
+				ghost.style.marginBottom = "0px";
+				ghost.addEventListener("transitionend", () => ghost.remove(), { once: true });
+				setTimeout(() => ghost.remove(), 250);
+			}
+			this._placeholder.style.transition = "none";
+			this._placeholder.style.height = "0px";
+			foundEl.insertBefore(this._placeholder, refNode);
+			this._placeholder.offsetHeight;
+			this._placeholder.style.transition = "height 0.2s cubic-bezier(0.2, 0, 0, 1)";
+			this._placeholder.style.height = this._sourceHeight + "px";
+		}
+	}
+	_onKeyDown(e) {
+		if (e.key === "Escape" && this._dragging) this._cancelDrag();
+	}
+	_cancelDrag() {
+		this._removeGlobalListeners();
+		if (!this._started) {
+			this._dragging = false;
+			return;
+		}
+		this._animateReturn().then(() => {
+			this._returnToSource();
+			this._cleanup();
+		});
+	}
+	_onPointerUp(_e) {
+		this._removeGlobalListeners();
+		if (!this._started) {
+			this._dragging = false;
+			return;
+		}
+		const destination = this._currentDroppableId !== null ? {
+			droppableId: this._currentDroppableId,
+			index: this._currentIndex
+		} : null;
+		const samePosition = destination && destination.droppableId === this._sourceDroppableId && destination.index === this._sourceIndex;
+		if (destination && this._placeholder && !samePosition) {
+			const result = {
+				draggableId: this._draggedId,
+				source: {
+					droppableId: this._sourceDroppableId,
+					index: this._sourceIndex
+				},
+				destination
+			};
+			this._animateDrop().then(() => {
+				this._restoreElStyles();
+				this._performTransfer(destination);
+				this._cleanup();
+				this._onDragEnd?.(result);
+			});
+		} else this._animateReturn().then(() => {
+			this._returnToSource();
+			this._cleanup();
+		});
+	}
+	_getComponentFromElement(el) {
+		let current = el;
+		while (current) {
+			if (current.__geaComponent) return current.__geaComponent;
+			current = current.parentElement;
+		}
+		return null;
+	}
+	_restoreElStyles() {
+		if (!this._sourceEl) return;
+		this._sourceEl.style.cssText = this._savedCssText;
+	}
+	_returnToSource() {
+		if (!this._sourceEl) return;
+		this._restoreElStyles();
+		if (this._placeholder?.parentElement) this._placeholder.parentElement.insertBefore(this._sourceEl, this._placeholder);
+		else {
+			const container = this.droppables.get(this._sourceDroppableId);
+			if (container) {
+				const items = Array.from(container.querySelectorAll(`:scope > ${DRAGGABLE_SEL}`));
+				container.insertBefore(this._sourceEl, items[this._sourceIndex] || null);
+			}
+		}
+	}
+	_performTransfer(destination) {
+		const sourceEl = this._sourceEl;
+		if (!sourceEl) return;
+		const destContainer = this.droppables.get(destination.droppableId);
+		if (!destContainer) return;
+		const refNode = Array.from(destContainer.querySelectorAll(`:scope > ${DRAGGABLE_SEL}`))[destination.index] || null;
+		destContainer.insertBefore(sourceEl, refNode);
+		const draggedComp = this._getComponentFromElement(sourceEl);
+		if (!draggedComp) return;
+		const sourceParent = draggedComp.parentComponent;
+		if (!sourceParent) return;
+		const srcArr = this._findCompiledArray(sourceParent, draggedComp);
+		if (!srcArr) return;
+		const destParent = this._getComponentFromElement(destContainer);
+		if (!destParent) return;
+		srcArr.arr.splice(srcArr.index, 1);
+		const destArr = destParent[srcArr.key];
+		if (Array.isArray(destArr)) destArr.splice(destination.index, 0, draggedComp);
+		const srcChildren = sourceParent.__childComponents;
+		if (Array.isArray(srcChildren)) {
+			const ci = srcChildren.indexOf(draggedComp);
+			if (ci !== -1) srcChildren.splice(ci, 1);
+		}
+		const destChildren = destParent.__childComponents;
+		if (Array.isArray(destChildren) && !destChildren.includes(draggedComp)) destChildren.push(draggedComp);
+		draggedComp.parentComponent = destParent;
+	}
+	_findCompiledArray(parent, child) {
+		for (const key of Object.keys(parent)) if (key.startsWith("_") && key.endsWith("Items") && Array.isArray(parent[key])) {
+			const idx = parent[key].indexOf(child);
+			if (idx !== -1) return {
+				key,
+				arr: parent[key],
+				index: idx
+			};
+		}
+		return null;
+	}
+	_animateDrop() {
+		return new Promise((resolve) => {
+			if (!this._sourceEl || !this._placeholder) return resolve();
+			const phRect = this._placeholder.getBoundingClientRect();
+			this._sourceEl.style.transition = "transform 0.2s cubic-bezier(0.2, 0, 0, 1), rotate 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1)";
+			this._sourceEl.style.transform = `translate(${phRect.left}px, ${phRect.top}px)`;
+			this._sourceEl.style.rotate = "0deg";
+			this._sourceEl.style.boxShadow = "none";
+			let done = false;
+			const finish = () => {
+				if (done) return;
+				done = true;
+				resolve();
+			};
+			this._sourceEl.addEventListener("transitionend", finish, { once: true });
+			setTimeout(finish, 250);
+		});
+	}
+	_animateReturn() {
+		return new Promise((resolve) => {
+			if (!this._sourceEl || !this._sourceRect) return resolve();
+			let targetX = this._sourceRect.left;
+			let targetY = this._sourceRect.top;
+			if (this._placeholder?.parentElement) {
+				const phRect = this._placeholder.getBoundingClientRect();
+				targetX = phRect.left;
+				targetY = phRect.top;
+			}
+			this._sourceEl.style.transition = "transform 0.2s cubic-bezier(0.2, 0, 0, 1), rotate 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1)";
+			this._sourceEl.style.transform = `translate(${targetX}px, ${targetY}px)`;
+			this._sourceEl.style.rotate = "0deg";
+			this._sourceEl.style.boxShadow = "none";
+			let done = false;
+			const finish = () => {
+				if (done) return;
+				done = true;
+				resolve();
+			};
+			this._sourceEl.addEventListener("transitionend", finish, { once: true });
+			setTimeout(finish, 250);
+		});
+	}
+	_removeGlobalListeners() {
+		document.removeEventListener("pointermove", this._boundMove);
+		document.removeEventListener("pointerup", this._boundUp);
+		document.removeEventListener("keydown", this._boundKeyDown);
+	}
+	_cleanup() {
+		if (this._cleanedUp) return;
+		this._cleanedUp = true;
+		this._placeholder?.remove();
+		this._placeholder = null;
+		this._sourceEl = null;
+		this._sourceRect = null;
+		this._dragging = false;
+		this._started = false;
+		this._draggedId = "";
+		this._currentDroppableId = null;
+	}
+	destroy() {
+		this._removeGlobalListeners();
+		if (this._dragging) {
+			if (this._sourceEl) this._returnToSource();
+			this._cleanup();
+		}
+		if (this._docListenerAttached && typeof document !== "undefined") {
+			document.removeEventListener("pointerdown", this._boundDocDown, true);
+			this._docListenerAttached = false;
+		}
+		this.droppables.clear();
+		this.onDragEnd = null;
+	}
+};
+const dndManager = new DndManager();
+//#endregion
+//#region src/components/draggable.tsx
+var Draggable = class extends Component {
+	constructor(..._args) {
+		super(..._args);
+		this._didDrag = false;
+	}
+	_onPointerDown(e) {
+		const el = e.currentTarget.closest(".gea-draggable");
+		if (!el) return;
+		this._didDrag = false;
+		dndManager.startTracking(e, this.props.draggableId, el);
+	}
+	template(props) {
+		Component._register(Component);
+		return `<div id="${this.id}" class="${`gea-draggable ${props.class || ""}`.trim()}"${props.draggableId == null || props.draggableId === false ? "" : ` data-draggable-id="${props.draggableId}"`}${props.index == null || props.index === false ? "" : ` data-index="${props.index}"`}${` pointerdown="${(e) => this._onPointerDown(e)}"`}>${props.children}</div>`;
+	}
+	get events() {
+		return { click: { [`#${this.id}`]: this.__event_click_0 } };
+	}
+	__event_click_0(e, targetComponent) {
+		if (dndManager.isDragging) {
+			e.preventDefault();
+			e.stopPropagation();
+		}
+	}
+	__onPropChange(key, value) {
+		if (key === "class") try {
+			const __el = this.$(":scope");
+			this.props;
+			const __boundValue = `gea-draggable ${this.props.class || ""}`;
+			if (__el) {
+				const __newClass = __boundValue != null ? String(__boundValue).trim() : "";
+				if (__el.className !== __newClass) __el.className = __newClass;
+			}
+		} catch {}
+		if (key === "draggableId") try {
+			const __el = this.$(":scope");
+			if (__el) if (value === null || value === void 0) __el.removeAttribute("data-draggable-id");
+			else __el.setAttribute("data-draggable-id", String(value));
+		} catch {}
+		if (key === "index") try {
+			const __el = this.$(":scope");
+			if (__el) if (value === null || value === void 0) __el.removeAttribute("data-index");
+			else __el.setAttribute("data-index", String(value));
+		} catch {}
+		if (key === "children") try {
+			const __el = this.$(":scope");
+			if (__el) {
+				if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this.instantiateChildComponents_();
+					if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+				}
+			}
+		} catch {}
+	}
+};
+//#endregion
+//#region src/components/droppable.tsx
+var Droppable = class extends Component {
+	constructor(..._args) {
+		super(..._args);
+		this._registered = false;
+	}
+	_registerWithManager() {
+		const el = this.el?.querySelector("[data-droppable-id]");
+		if (el && !this._registered) {
+			dndManager.registerDroppable(this.props.droppableId, el);
+			this._registered = true;
+		}
+	}
+	created() {
+		queueMicrotask(() => this._registerWithManager());
+	}
+	onAfterRender() {
+		this._registerWithManager();
+	}
+	dispose() {
+		if (this._registered) {
+			dndManager.unregisterDroppable(this.props.droppableId);
+			this._registered = false;
+		}
+		super.dispose();
+	}
+	template(props) {
+		Component._register(Component);
+		return `<div id="${this.id}" class="${`gea-droppable ${props.class || ""}`.trim()}"${props.droppableId == null || props.droppableId === false ? "" : ` data-droppable-id="${props.droppableId}"`}>${props.children}</div>`;
+	}
+	__onPropChange(key, value) {
+		if (key === "class") try {
+			const __el = this.$(":scope");
+			this.props;
+			const __boundValue = `gea-droppable ${this.props.class || ""}`;
+			if (__el) {
+				const __newClass = __boundValue != null ? String(__boundValue).trim() : "";
+				if (__el.className !== __newClass) __el.className = __newClass;
+			}
+		} catch {}
+		if (key === "droppableId") try {
+			const __el = this.$(":scope");
+			if (__el) if (value === null || value === void 0) __el.removeAttribute("data-droppable-id");
+			else __el.setAttribute("data-droppable-id", String(value));
+		} catch {}
+		if (key === "children") try {
+			const __el = this.$(":scope");
+			if (__el) {
+				if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this.instantiateChildComponents_();
+					if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+				}
+			}
+		} catch {}
+	}
+};
+//#endregion
+//#region src/components/drag-drop-context.tsx
+var DragDropContext = class extends Component {
+	created() {
+		dndManager.onDragEnd = (result) => {
+			this.props.onDragEnd?.(result);
+		};
+	}
+	dispose() {
+		dndManager.destroy();
+		super.dispose();
+	}
+	template(props) {
+		Component._register(Component);
+		return `<div id="${this.id}" class="${`gea-dnd-context ${props.class || ""}`.trim()}">${props.children}</div>`;
+	}
+	__onPropChange(key, value) {
+		if (key === "class") try {
+			const __el = this.$(":scope");
+			this.props;
+			const __boundValue = `gea-dnd-context ${this.props.class || ""}`;
+			if (__el) {
+				const __newClass = __boundValue != null ? String(__boundValue).trim() : "";
+				if (__el.className !== __newClass) __el.className = __newClass;
+			}
+		} catch {}
+		if (key === "children") try {
+			const __el = this.$(":scope");
+			if (__el) {
+				if (__el.innerHTML !== value) {
+					__el.innerHTML = value;
+					this.instantiateChildComponents_();
+					if (this.parentComponent) this.parentComponent.mountCompiledChildComponents_();
+				}
+			}
+		} catch {}
+	}
+};
+//#endregion
+export { Accordion, Alert, AlertDescription, AlertTitle, Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Clipboard, Collapsible, Combobox, Dialog, DragDropContext, Draggable, Droppable, FileUpload, HoverCard, Input, Label, Menu, NumberInput, Pagination, PinInput, Popover, Progress, RadioGroup, RatingGroup, Select, Separator, Skeleton, Slider, Switch, Tabs, TagsInput, Textarea, ToastStore, Toaster, ToggleGroup, Tooltip, TreeView, ZagComponent, cn, dndManager };
 
 //# sourceMappingURL=index.mjs.map