@jasonshimmy/custom-elements-runtime 0.0.1-beta.2 → 0.0.1-beta.3

package/dist/custom-elements-runtime.es.js

@@ -3,7 +3,7 @@ class Q {
   listeners = [];
   constructor(t) {
     this.state = new Proxy(t, {
-      set: (e, n, a) => (e[n] = a, this.notify(), !0)
+      set: (n, r, i) => (n[r] = i, this.notify(), !0)
     });
   }
   subscribe(t) {
@@ -32,26 +32,26 @@ class y extends EventTarget {
    * @param eventName - Name of the event
    * @param data - Optional event payload
    */
-  emit(t, e) {
-    const n = Date.now(), a = this.eventCounters.get(t);
-    if (!a || n - a.window > 1e3)
-      this.eventCounters.set(t, { count: 1, window: n });
-    else if (a.count++, a.count > 50 && (console.error(`Event storm detected for "${t}": ${a.count} events in 1 second. Throttling...`), a.count > 100)) {
+  emit(t, n) {
+    const r = Date.now(), i = this.eventCounters.get(t);
+    if (!i || r - i.window > 1e3)
+      this.eventCounters.set(t, { count: 1, window: r });
+    else if (i.count++, i.count > 50 && (console.error(`Event storm detected for "${t}": ${i.count} events in 1 second. Throttling...`), i.count > 100)) {
       console.warn(`Blocking further "${t}" events to prevent infinite loop`);
       return;
     }
     this.dispatchEvent(new CustomEvent(t, {
-      detail: e,
+      detail: n,
       bubbles: !1,
       // Global events don't need to bubble
       cancelable: !0
     }));
-    const o = this.handlers[t];
-    o && o.forEach((s) => {
+    const s = this.handlers[t];
+    s && s.forEach((o) => {
       try {
-        s(e);
-      } catch (i) {
-        console.error(`Error in global event handler for "${t}":`, i);
+        o(n);
+      } catch (a) {
+        console.error(`Error in global event handler for "${t}":`, a);
       }
     });
   }
@@ -60,17 +60,17 @@ class y extends EventTarget {
    * @param eventName - Name of the event
    * @param handler - Handler function
    */
-  on(t, e) {
-    return this.handlers[t] || (this.handlers[t] = /* @__PURE__ */ new Set()), this.handlers[t].add(e), () => this.off(t, e);
+  on(t, n) {
+    return this.handlers[t] || (this.handlers[t] = /* @__PURE__ */ new Set()), this.handlers[t].add(n), () => this.off(t, n);
   }
   /**
    * Remove a specific handler for a global event.
    * @param eventName - Name of the event
    * @param handler - Handler function to remove
    */
-  off(t, e) {
-    const n = this.handlers[t];
-    n && n.delete(e);
+  off(t, n) {
+    const r = this.handlers[t];
+    r && r.delete(n);
   }
   /**
    * Remove all handlers for a specific event.
@@ -85,18 +85,18 @@ class y extends EventTarget {
    * @param handler - CustomEvent handler
    * @param options - AddEventListener options
    */
-  listen(t, e, n) {
-    return this.addEventListener(t, e, n), () => this.removeEventListener(t, e);
+  listen(t, n, r) {
+    return this.addEventListener(t, n, r), () => this.removeEventListener(t, n);
   }
   /**
    * Register a one-time event handler. Returns a promise that resolves with the event data.
    * @param eventName - Name of the event
    * @param handler - Handler function
    */
-  once(t, e) {
-    return new Promise((n) => {
-      const a = this.on(t, (o) => {
-        a(), e(o), n(o);
+  once(t, n) {
+    return new Promise((r) => {
+      const i = this.on(t, (s) => {
+        i(), n(s), r(s);
       });
     });
   }
@@ -126,10 +126,10 @@ class y extends EventTarget {
    */
   getEventStats() {
     const t = {};
-    for (const [e, n] of this.eventCounters.entries())
-      t[e] = {
-        count: n.count,
-        handlersCount: this.getHandlerCount(e)
+    for (const [n, r] of this.eventCounters.entries())
+      t[n] = {
+        count: r.count,
+        handlersCount: this.getHandlerCount(n)
       };
     return t;
   }
@@ -140,10 +140,10 @@ class y extends EventTarget {
     this.eventCounters.clear();
   }
 }
-const C = y.getInstance(), z = typeof window > "u" || typeof document > "u";
-function q(r) {
+const C = y.getInstance(), q = typeof window > "u" || typeof document > "u";
+function W(e) {
   return {
-    state: r,
+    state: e,
     emit: () => {
     },
     // No-op on server
@@ -155,40 +155,40 @@ function q(r) {
     }
   };
 }
-function W(r, t = {}) {
-  z || console.warn("[SSR] renderToString should only be used on the server");
+function F(e, t = {}) {
+  q || console.warn("[SSR] renderToString should only be used on the server");
   try {
-    const e = r.state, n = q(e), a = r.template(e, n);
-    let o = "";
-    t.includeStyles && r.style && (o = `<style>${typeof r.style == "function" ? r.style(e) : r.style}</style>`);
-    const s = t.sanitizeAttributes ? t.sanitizeAttributes(r.attrs || {}) : r.attrs || {}, i = Object.entries(s).map(([d, u]) => `${H(d)}="${H(u)}"`).join(" "), c = `${i ? `<${r.tag} ${i}>` : `<${r.tag}>`}${o}${a}</${r.tag}>`;
-    return t.prettyPrint ? K(c) : c;
-  } catch (e) {
-    return console.error(`[SSR] Error rendering ${r.tag}:`, e), `<${r.tag}><div style="color: red;">SSR Error: ${F(String(e))}</div></${r.tag}>`;
+    const n = e.state, r = W(n), i = e.template(n, r);
+    let s = "";
+    t.includeStyles && e.style && (s = `<style>${typeof e.style == "function" ? e.style(n) : e.style}</style>`);
+    const o = t.sanitizeAttributes ? t.sanitizeAttributes(e.attrs || {}) : e.attrs || {}, a = Object.entries(o).map(([d, f]) => `${H(d)}="${H(f)}"`).join(" "), l = `${a ? `<${e.tag} ${a}>` : `<${e.tag}>`}${s}${i}</${e.tag}>`;
+    return t.prettyPrint ? G(l) : l;
+  } catch (n) {
+    return console.error(`[SSR] Error rendering ${e.tag}:`, n), `<${e.tag}><div style="color: red;">SSR Error: ${K(String(n))}</div></${e.tag}>`;
   }
 }
-function tt(r, t = {}) {
-  const e = {
+function tt(e, t = {}) {
+  const n = {
     components: /* @__PURE__ */ new Map(),
     styles: /* @__PURE__ */ new Set()
-  }, n = [];
-  r.forEach((s) => {
-    if (e.components.set(s.tag, s), s.style) {
-      const l = typeof s.style == "function" ? s.style(s.state) : s.style;
-      e.styles.add(l);
+  }, r = [];
+  e.forEach((o) => {
+    if (n.components.set(o.tag, o), o.style) {
+      const c = typeof o.style == "function" ? o.style(o.state) : o.style;
+      n.styles.add(c);
     }
-    const i = W(s, { ...t, includeStyles: !1 });
-    n.push(i);
+    const a = F(o, { ...t, includeStyles: !1 });
+    r.push(a);
   });
-  const a = Array.from(e.styles).join(`
+  const i = Array.from(n.styles).join(`
 `);
-  return { html: n.join(`
-`), styles: a, context: e };
+  return { html: r.join(`
+`), styles: i, context: n };
 }
-function et(r) {
-  const t = Array.from(r.components.entries()).map(([e, n]) => ({
-    tag: e,
-    state: n.state
+function et(e) {
+  const t = Array.from(e.components.entries()).map(([n, r]) => ({
+    tag: n,
+    state: r.state
   }));
   return `
 <script type="module">
@@ -225,138 +225,138 @@ function et(r) {
   }
 <\/script>`.trim();
 }
-const F = (r) => r.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), H = (r) => r.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), K = (r) => r.replace(/></g, `>
+const K = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), H = (e) => e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), G = (e) => e.replace(/></g, `>
 <`).split(`
 `).map((t) => {
-  const e = (t.match(/^<[^\/]/g) || []).length - (t.match(/<\//g) || []).length;
-  return "  ".repeat(Math.max(0, e)) + t.trim();
+  const n = (t.match(/^<[^\/]/g) || []).length - (t.match(/<\//g) || []).length;
+  return "  ".repeat(Math.max(0, n)) + t.trim();
 }).join(`
 `);
-function $(r) {
-  return String(r).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function $(e) {
+  return String(e).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function w(r, t) {
-  if (typeof r != "string" || !t) return String(r);
-  for (const e in t) {
-    if (typeof t[e] == "string" && r === t[e])
-      return $(r);
-    if (Array.isArray(t[e])) {
-      for (const n of t[e])
-        if (n && typeof n == "object") {
-          for (const a in n)
-            if (typeof n[a] == "string" && r === n[a])
-              return $(r);
+function w(e, t) {
+  if (typeof e != "string" || !t) return String(e);
+  for (const n in t) {
+    if (typeof t[n] == "string" && e === t[n])
+      return $(e);
+    if (Array.isArray(t[n])) {
+      for (const r of t[n])
+        if (r && typeof r == "object") {
+          for (const i in r)
+            if (typeof r[i] == "string" && e === r[i])
+              return $(e);
         }
     }
   }
-  return String(r);
+  return String(e);
 }
-function nt(r, ...t) {
-  function e(n, a, o) {
-    if (Array.isArray(n)) {
-      const s = n.map((i) => e(i, a, o));
-      return s.some((i) => i instanceof Promise) ? Promise.all(s).then((i) => i.join("")) : s.join("");
+function nt(e, ...t) {
+  function n(r, i, s) {
+    if (Array.isArray(r)) {
+      const o = r.map((a) => n(a, i, s));
+      return o.some((a) => a instanceof Promise) ? Promise.all(o).then((a) => a.join("")) : o.join("");
     }
-    if (typeof n == "function") {
-      const s = e(n(a, o), a, o);
-      return s instanceof Promise, s;
+    if (typeof r == "function") {
+      const o = n(r(i, s), i, s);
+      return o instanceof Promise, o;
     }
-    return n == null ? "" : n instanceof Promise ? n : String(n);
-  }
-  return (n, a) => {
-    let o = "", s = !1;
-    const i = [];
-    for (let l = 0; l < r.length; l++)
-      if (o += r[l], l < t.length) {
-        let c = t[l];
-        const d = r[l], u = /data-on-[a-z]+="?$/.test(d);
-        c = e(c, n, a), c instanceof Promise ? (s = !0, i.push(c)) : /=\s*"?$/.test(d) && typeof c == "string" && !u ? (c = c.replace(/"/g, "&quot;").replace(/'/g, "&#39;"), o += c) : !u && !/=\s*"?$/.test(d) ? o += w(c, n) : o += c;
+    return r == null ? "" : r instanceof Promise ? r : String(r);
+  }
+  return (r, i) => {
+    let s = "", o = !1;
+    const a = [];
+    for (let c = 0; c < e.length; c++)
+      if (s += e[c], c < t.length) {
+        let l = t[c];
+        const d = e[c], f = /data-on-[a-z]+="?$/.test(d);
+        l = n(l, r, i), l instanceof Promise ? (o = !0, a.push(l)) : /=\s*"?$/.test(d) && typeof l == "string" && !f ? (l = l.replace(/"/g, "&quot;").replace(/'/g, "&#39;"), s += l) : !f && !/=\s*"?$/.test(d) ? s += w(l, r) : s += l;
       }
-    return s ? Promise.all(i).then((l) => {
-      let c = "", d = 0;
-      for (let u = 0; u < r.length; u++)
-        if (c += r[u], u < t.length) {
-          let f = t[u];
-          const h = r[u], m = /data-on-[a-z]+="?$/.test(h);
-          f = e(f, n, a), f instanceof Promise ? c += l[d++] : /=\s*"?$/.test(h) && typeof f == "string" && !m ? (f = f.replace(/"/g, "&quot;").replace(/'/g, "&#39;"), c += f) : !m && !/=\s*"?$/.test(h) ? c += w(f, n) : c += f;
+    return o ? Promise.all(a).then((c) => {
+      let l = "", d = 0;
+      for (let f = 0; f < e.length; f++)
+        if (l += e[f], f < t.length) {
+          let u = t[f];
+          const h = e[f], m = /data-on-[a-z]+="?$/.test(h);
+          u = n(u, r, i), u instanceof Promise ? l += c[d++] : /=\s*"?$/.test(h) && typeof u == "string" && !m ? (u = u.replace(/"/g, "&quot;").replace(/'/g, "&#39;"), l += u) : !m && !/=\s*"?$/.test(h) ? l += w(u, r) : l += u;
         }
-      return c;
-    }) : o;
+      return l;
+    }) : s;
   };
 }
-function rt(r, ...t) {
-  const e = "compiled-" + Math.random().toString(36).slice(2);
-  function n(o, s, i) {
-    return Array.isArray(o) ? o.map((l) => n(l, s, i)).join("") : typeof o == "function" ? n(o(s, i), s, i) : o == null ? "" : String(o);
-  }
-  const a = (o, s) => {
-    let i = "";
-    for (let l = 0; l < r.length; l++)
-      if (i += r[l], l < t.length) {
-        let c = t[l];
-        const d = r[l], u = /data-on-[a-z]+="?$/.test(d);
-        c = n(c, o, s), /=\s*"?$/.test(d) && typeof c == "string" && !u ? (c = c.replace(/"/g, "&quot;").replace(/'/g, "&#39;"), i += c) : !u && !/=\s*"?$/.test(d) ? i += w(c, o) : i += c ?? "";
+function rt(e, ...t) {
+  const n = "compiled-" + Math.random().toString(36).slice(2);
+  function r(s, o, a) {
+    return Array.isArray(s) ? s.map((c) => r(c, o, a)).join("") : typeof s == "function" ? r(s(o, a), o, a) : s == null ? "" : String(s);
+  }
+  const i = (s, o) => {
+    let a = "";
+    for (let c = 0; c < e.length; c++)
+      if (a += e[c], c < t.length) {
+        let l = t[c];
+        const d = e[c], f = /data-on-[a-z]+="?$/.test(d);
+        l = r(l, s, o), /=\s*"?$/.test(d) && typeof l == "string" && !f ? (l = l.replace(/"/g, "&quot;").replace(/'/g, "&#39;"), a += l) : !f && !/=\s*"?$/.test(d) ? a += w(l, s) : a += l ?? "";
       }
-    return i;
+    return a;
   };
-  return a.id = e, a;
+  return i.id = n, i;
 }
-function st(r, ...t) {
-  let e = "";
-  for (let n = 0; n < r.length; n++)
-    e += r[n], n < t.length && (e += t[n] ?? "");
-  return e;
+function st(e, ...t) {
+  let n = "";
+  for (let r = 0; r < e.length; r++)
+    n += e[r], r < t.length && (n += t[r] ?? "");
+  return n;
 }
-function it(r) {
-  return r;
+function it(e) {
+  return e;
 }
-function ot(r, t) {
-  return { [r]: t };
+function ot(e, t) {
+  return { [e]: t };
 }
-function at(r) {
-  return Object.keys(r).filter((t) => r[t]).join(" ");
+function at(e) {
+  return Object.keys(e).filter((t) => e[t]).join(" ");
 }
-function ct(r) {
-  return Object.entries(r).map(([t, e]) => `${t}: ${e}`).join("; ");
+function ct(e) {
+  return Object.entries(e).map(([t, n]) => `${t}: ${n}`).join("; ");
 }
-function G(r, t, e) {
-  const [n, ...a] = e.split("|").map((i) => i.trim());
-  if (!n || n === "__proto__" || n === "constructor" || n === "prototype") return;
-  function o(i, l, c) {
-    const d = l.split(".");
-    let u = i;
-    for (let f = 0; f < d.length - 1; f++)
-      d[f] in u || (u[d[f]] = {}), u = u[d[f]];
-    u[d[d.length - 1]] = c;
-  }
-  const s = (i) => {
-    let l;
-    if (r instanceof HTMLInputElement && r.type === "checkbox") {
-      l = r.value;
-      const c = r.getAttribute("data-true-value"), d = r.getAttribute("data-false-value");
-      let u = Array.isArray(t[n]) ? t[n] : void 0;
-      if (u) {
-        if (r.checked)
-          u.includes(l) || u.push(l);
+function U(e, t, n) {
+  const [r, ...i] = n.split("|").map((a) => a.trim());
+  if (!r || r === "__proto__" || r === "constructor" || r === "prototype") return;
+  function s(a, c, l) {
+    const d = c.split(".");
+    let f = a;
+    for (let u = 0; u < d.length - 1; u++)
+      d[u] in f || (f[d[u]] = {}), f = f[d[u]];
+    f[d[d.length - 1]] = l;
+  }
+  const o = (a) => {
+    let c;
+    if (e instanceof HTMLInputElement && e.type === "checkbox") {
+      c = e.value;
+      const l = e.getAttribute("data-true-value"), d = e.getAttribute("data-false-value");
+      let f = Array.isArray(t[r]) ? t[r] : void 0;
+      if (f) {
+        if (e.checked)
+          f.includes(c) || f.push(c);
         else {
-          const f = u.indexOf(l);
-          f !== -1 && u.splice(f, 1);
+          const u = f.indexOf(c);
+          u !== -1 && f.splice(u, 1);
         }
-        o(t, n, [...u]);
+        s(t, r, [...f]);
       } else
-        c !== null || d !== null ? r.checked ? o(t, n, c) : o(t, n, d !== null ? d : !1) : o(t, n, r.checked);
-    } else r instanceof HTMLInputElement && r.type === "radio" ? (l = r.value, o(t, n, l), ((r.form || r.closest("form") || r.getRootNode()) instanceof Element ? (r.form || r.closest("form") || r.getRootNode()).querySelectorAll(`input[type="radio"][name="${r.name}"][data-model="${e}"]`) : []).forEach((d) => {
-      d.checked = d.value === String(l);
-    })) : (l = r.value, r instanceof HTMLInputElement && r.type === "number" && (l = Number(l)), a.includes("trim") && typeof l == "string" && (l = l.trim()), a.includes("number") && (l = Number(l)), o(t, n, l));
-    if ("_vnode" in r && typeof r._vnode == "object" && r._vnode?.props && (r._vnode.props.value = l), i.type === "input" && (r._isDirty = !0), i.type === "keydown" && i.key === "Enter" && (r._isDirty = !1, r instanceof HTMLElement && r.isConnected)) {
-      let c = r.parentElement;
-      for (; c && !(c instanceof HTMLElement && c.shadowRoot); )
-        c = c.parentElement;
-      c && typeof c == "object" && c !== null && "render" in c && typeof c.render == "function" && c.render();
+        l !== null || d !== null ? e.checked ? s(t, r, l) : s(t, r, d !== null ? d : !1) : s(t, r, e.checked);
+    } else e instanceof HTMLInputElement && e.type === "radio" ? (c = e.value, s(t, r, c), ((e.form || e.closest("form") || e.getRootNode()) instanceof Element ? (e.form || e.closest("form") || e.getRootNode()).querySelectorAll(`input[type="radio"][name="${e.name}"][data-model="${n}"]`) : []).forEach((d) => {
+      d.checked = d.value === String(c);
+    })) : (c = e.value, e instanceof HTMLInputElement && e.type === "number" && (c = Number(c)), i.includes("trim") && typeof c == "string" && (c = c.trim()), i.includes("number") && (c = Number(c)), s(t, r, c));
+    if ("_vnode" in e && typeof e._vnode == "object" && e._vnode?.props && (e._vnode.props.value = c), a.type === "input" && (e._isDirty = !0), a.type === "keydown" && a.key === "Enter" && (e._isDirty = !1, e instanceof HTMLElement && e.isConnected)) {
+      let l = e.parentElement;
+      for (; l && !(l instanceof HTMLElement && l.shadowRoot); )
+        l = l.parentElement;
+      l && typeof l == "object" && l !== null && "render" in l && typeof l.render == "function" && l.render();
     }
-    i.type === "blur" && (r._isDirty = !1);
+    a.type === "blur" && (e._isDirty = !1);
   };
-  r.addEventListener("input", s), r.addEventListener("change", s), r.addEventListener("keydown", s), r.addEventListener("blur", s);
+  e.addEventListener("input", o), e.addEventListener("change", o), e.addEventListener("keydown", o), e.addEventListener("blur", o);
 }
 const R = (() => {
   try {
@@ -366,155 +366,155 @@ const R = (() => {
   }
   return typeof window < "u" ? window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" : !1;
 })();
-function lt(r, t = {}) {
-  const { development: e = R, cache: n = !0, optimize: a = !0 } = t, o = N(r);
-  if (n && T.has(o)) {
-    if (e) {
-      const s = v.get(o) || {
+function lt(e, t = {}) {
+  const { development: n = R, cache: r = !0, optimize: i = !0 } = t, s = N(e);
+  if (r && T.has(s)) {
+    if (n) {
+      const o = E.get(s) || {
         compilationTime: 0,
         renderTime: 0,
         updateTime: 0,
         cacheHits: 0,
         cacheMisses: 0
       };
-      s.cacheHits++, v.set(o, s);
+      o.cacheHits++, E.set(s, o);
     }
-    return T.get(o);
+    return T.get(s);
   }
-  if (e) {
-    const s = v.get(o) || {
+  if (n) {
+    const o = E.get(s) || {
       compilationTime: 0,
       renderTime: 0,
       updateTime: 0,
       cacheHits: 0,
       cacheMisses: 0
     };
-    s.cacheMisses++, v.set(o, s);
+    o.cacheMisses++, E.set(s, o);
   }
   try {
-    const s = Z(r, { development: e, optimize: a });
-    return n && T.set(o, s), s;
-  } catch (s) {
-    return e && (console.error("[Template Compiler] Error compiling template:", s), console.error("[Template Compiler] Template:", r)), {
-      statics: [r],
+    const o = B(e, { development: n, optimize: i });
+    return r && T.set(s, o), o;
+  } catch (o) {
+    return n && (console.error("[Template Compiler] Error compiling template:", o), console.error("[Template Compiler] Template:", e)), {
+      statics: [e],
       dynamics: [],
       fragment: null,
-      id: o,
+      id: s,
       hasDynamics: !1,
-      render: () => r
+      render: () => e
     };
   }
 }
-function U(r, t) {
+function Z(e, t) {
   if (typeof document > "u")
     return [0];
   try {
-    let e = function(i, l = []) {
-      if (i.nodeType === Node.TEXT_NODE) {
-        if (i.textContent?.includes(t))
-          return l;
-      } else if (i.nodeType === Node.ELEMENT_NODE) {
-        let c = 0;
-        for (let d = 0; d < i.childNodes.length; d++) {
-          const u = i.childNodes[d], f = e(u, [...l, c]);
-          if (f)
-            return f;
-          c++;
+    let n = function(a, c = []) {
+      if (a.nodeType === Node.TEXT_NODE) {
+        if (a.textContent?.includes(t))
+          return c;
+      } else if (a.nodeType === Node.ELEMENT_NODE) {
+        let l = 0;
+        for (let d = 0; d < a.childNodes.length; d++) {
+          const f = a.childNodes[d], u = n(f, [...c, l]);
+          if (u)
+            return u;
+          l++;
         }
       }
       return null;
     };
-    const o = new DOMParser().parseFromString(`<div>${r}</div>`, "text/html").body.firstElementChild;
-    return e(o) || [0];
-  } catch (e) {
-    return R && console.warn("[Template Compiler] Error finding DOM path for placeholder:", t, e), [0];
+    const s = new DOMParser().parseFromString(`<div>${e}</div>`, "text/html").body.firstElementChild;
+    return n(s) || [0];
+  } catch (n) {
+    return R && console.warn("[Template Compiler] Error finding DOM path for placeholder:", t, n), [0];
   }
 }
-function Z(r, t) {
-  return new B(r, t).compile();
+function B(e, t) {
+  return new X(e, t).compile();
 }
-class B {
+class X {
   template;
   options;
   dynamics = [];
   statics = [];
-  constructor(t, e) {
-    this.template = t, this.options = e;
+  constructor(t, n) {
+    this.template = t, this.options = n;
   }
   compile() {
     this.parseTemplate();
-    const t = this.createStaticFragment(), e = N(this.template), n = (a, o) => {
-      let s = "";
-      for (let i = 0; i < this.statics.length; i++)
-        if (s += this.statics[i], i < this.dynamics.length) {
-          let l = this.dynamics[i].getValue(a, o);
-          if (l instanceof Promise)
-            return Promise.all(this.dynamics.map((c) => {
-              const d = c.getValue(a, o);
+    const t = this.createStaticFragment(), n = N(this.template), r = (i, s) => {
+      let o = "";
+      for (let a = 0; a < this.statics.length; a++)
+        if (o += this.statics[a], a < this.dynamics.length) {
+          let c = this.dynamics[a].getValue(i, s);
+          if (c instanceof Promise)
+            return Promise.all(this.dynamics.map((l) => {
+              const d = l.getValue(i, s);
               return d instanceof Promise ? d : Promise.resolve(d);
-            })).then((c) => {
+            })).then((l) => {
               let d = "";
-              for (let u = 0; u < this.statics.length; u++)
-                d += this.statics[u], u < c.length && (d += c[u]);
+              for (let f = 0; f < this.statics.length; f++)
+                d += this.statics[f], f < l.length && (d += l[f]);
               return d;
             });
-          s += l;
+          o += c;
         }
-      return s;
+      return o;
     };
     return {
       statics: this.statics,
       dynamics: this.dynamics,
       fragment: t,
-      id: e,
+      id: n,
       hasDynamics: this.dynamics.length > 0,
-      render: n
+      render: r
     };
   }
   parseTemplate() {
     const t = /\{\{([^}]+)\}\}/g;
-    let e = 0, n;
-    for (; (n = t.exec(this.template)) !== null; ) {
-      const o = this.template.slice(e, n.index);
-      this.statics.push(o);
-      let s = o.match(/([a-zA-Z0-9_-]+)\s*=\s*"?$/), i = s ? s[1] : void 0, l;
-      if (o.endsWith('style="color:'))
-        i = "style", l = "color";
-      else if (i === "style") {
-        const d = o.match(/style\s*=\s*"?([^:;]+):\s*$/);
-        d && (l = d[1].trim());
+    let n = 0, r;
+    for (; (r = t.exec(this.template)) !== null; ) {
+      const s = this.template.slice(n, r.index);
+      this.statics.push(s);
+      let o = s.match(/([a-zA-Z0-9_-]+)\s*=\s*"?$/), a = o ? o[1] : void 0, c;
+      if (s.endsWith('style="color:'))
+        a = "style", c = "color";
+      else if (a === "style") {
+        const d = s.match(/style\s*=\s*"?([^:;]+):\s*$/);
+        d && (c = d[1].trim());
       }
-      const c = n[1].trim();
-      this.analyzeDynamicExpression(c, this.dynamics.length, i, l), e = n.index + n[0].length;
+      const l = r[1].trim();
+      this.analyzeDynamicExpression(l, this.dynamics.length, a, c), n = r.index + r[0].length;
     }
-    const a = this.template.slice(e);
-    this.statics.push(a);
-  }
-  analyzeDynamicExpression(t, e, n, a) {
-    let o = "text", s;
-    n ? n === "class" ? (o = "class", s = "class") : n === "style" ? (o = "style", s = a || "style") : n === "value" ? (o = "property", s = "value") : (o = "attribute", s = n) : t.includes("class.") ? (o = "class", s = t.split(".")[1]) : t.includes("style.") ? (o = "style", s = t.split(".")[1]) : t.includes("@") ? (o = "event", s = t.split("@")[1]) : t === "class" ? (o = "class", s = "class") : t === "style" ? (o = "style", s = "style") : t === "value" ? (o = "property", s = "value") : t === "title" && (o = "attribute", s = "title");
-    const i = `__DYNAMIC_${e}__`, l = this.statics.join(i);
-    let c = U(l, i);
-    this.statics.length === 2 && o !== "text" ? c = [0] : this.statics.length === 2 && c.length === 0 && (c = [0]), this.dynamics.push({
-      path: c,
-      type: o,
-      target: s,
+    const i = this.template.slice(n);
+    this.statics.push(i);
+  }
+  analyzeDynamicExpression(t, n, r, i) {
+    let s = "text", o;
+    r ? r === "class" ? (s = "class", o = "class") : r === "style" ? (s = "style", o = i || "style") : r === "value" ? (s = "property", o = "value") : (s = "attribute", o = r) : t.includes("class.") ? (s = "class", o = t.split(".")[1]) : t.includes("style.") ? (s = "style", o = t.split(".")[1]) : t.includes("@") ? (s = "event", o = t.split("@")[1]) : t === "class" ? (s = "class", o = "class") : t === "style" ? (s = "style", o = "style") : t === "value" ? (s = "property", o = "value") : t === "title" && (s = "attribute", o = "title");
+    const a = `__DYNAMIC_${n}__`, c = this.statics.join(a);
+    let l = Z(c, a);
+    this.statics.length === 2 && s !== "text" ? l = [0] : this.statics.length === 2 && l.length === 0 && (l = [0]), this.dynamics.push({
+      path: l,
+      type: s,
+      target: o,
       getValue: this.createValueGetter(t)
     });
   }
   createValueGetter(t) {
-    return (e, n) => {
+    return (n, r) => {
       try {
-        let a;
+        let i;
         if (t && typeof t == "function")
-          a = t(e);
+          i = t(n);
         else if (typeof t == "string" && t.startsWith("state.")) {
-          const o = t.slice(6);
-          a = e[o];
-        } else typeof t == "string" && /^[a-zA-Z0-9_$]+$/.test(t) ? a = e[t] : (typeof t == "string" && t.includes("("), a = "");
-        return a;
-      } catch (a) {
-        return this.options.development && console.warn(`[Template Compiler] Error evaluating expression: ${t}`, a), "";
+          const s = t.slice(6);
+          i = n[s];
+        } else typeof t == "string" && /^[a-zA-Z0-9_$]+$/.test(t) ? i = n[t] : (typeof t == "string" && t.includes("("), i = "");
+        return i;
+      } catch (i) {
+        return this.options.development && console.warn(`[Template Compiler] Error evaluating expression: ${t}`, i), "";
       }
     };
   }
@@ -525,407 +525,404 @@ class B {
       const t = this.statics.join("");
       if (!t.trim())
         return null;
-      const n = new DOMParser().parseFromString(t, "text/html"), a = document.createDocumentFragment();
-      for (; n.body.firstChild; )
-        a.appendChild(n.body.firstChild);
-      return a;
+      const r = new DOMParser().parseFromString(t, "text/html"), i = document.createDocumentFragment();
+      for (; r.body.firstChild; )
+        i.appendChild(r.body.firstChild);
+      return i;
     } catch (t) {
       return this.options.development && console.warn("[Template Compiler] Could not create static fragment:", t), null;
     }
   }
 }
-function O(r, t) {
+function O(e, t) {
   try {
-    if (t.length === 1 && t[0] === 0 && r instanceof Element)
-      return r;
-    let e = r;
-    for (let n = 0; n < t.length; n++) {
-      const a = t[n];
-      if (!e.childNodes || e.childNodes.length <= a)
+    if (t.length === 1 && t[0] === 0 && e instanceof Element)
+      return e;
+    let n = e;
+    for (let r = 0; r < t.length; r++) {
+      const i = t[r];
+      if (!n.childNodes || n.childNodes.length <= i)
         return null;
-      e = e.childNodes[a];
+      n = n.childNodes[i];
     }
-    return e;
+    return n;
   } catch {
     return null;
   }
 }
-function j(r, t, e) {
-  let n;
-  return r.fragment && !r.hasDynamics ? n = r.fragment.cloneNode(!0) : n = V(r, t, e), n;
+function j(e, t, n) {
+  let r;
+  return e.fragment && !e.hasDynamics ? r = e.fragment.cloneNode(!0) : r = Y(e, t, n), r;
 }
-function X(r, t, e, n, a) {
-  if (r.hasDynamics)
-    for (const o of r.dynamics)
+function V(e, t, n, r, i) {
+  if (e.hasDynamics)
+    for (const s of e.dynamics)
       try {
-        const s = o.getValue(e, n);
-        if (a !== void 0 && o.getValue(a, n) === s)
+        const o = s.getValue(n, r);
+        if (i !== void 0 && s.getValue(i, r) === o)
           continue;
-        I(t, o, s);
-      } catch (s) {
-        console.warn("[Template Compiler] Error applying update:", s);
+        I(t, s, o);
+      } catch (o) {
+        console.warn("[Template Compiler] Error applying update:", o);
       }
 }
-function V(r, t, e) {
-  let n = "";
-  for (let i = 0; i < r.statics.length; i++)
-    if (n += r.statics[i], i < r.dynamics.length) {
-      const l = r.dynamics[i];
-      if (l.type === "text" || l.type === "attribute") {
-        const c = l.getValue(t, e);
-        n += String(c ?? "");
-      } else (l.type === "property" || l.type === "class" || l.type === "style") && (n += "");
+function Y(e, t, n) {
+  let r = "";
+  for (let a = 0; a < e.statics.length; a++)
+    if (r += e.statics[a], a < e.dynamics.length) {
+      const c = e.dynamics[a];
+      if (c.type === "text" || c.type === "attribute") {
+        const l = c.getValue(t, n);
+        r += String(l ?? "");
+      } else (c.type === "property" || c.type === "class" || c.type === "style") && (r += "");
     }
   if (typeof document > "u")
     return new DocumentFragment();
-  const o = new DOMParser().parseFromString(n, "text/html"), s = document.createDocumentFragment();
-  for (; o.body.firstChild; )
-    s.appendChild(o.body.firstChild);
-  for (const i of r.dynamics) {
-    const l = i.getValue(t, e), c = O(s, i.path);
-    I(c, i, l);
-  }
-  return s;
+  const s = new DOMParser().parseFromString(r, "text/html"), o = document.createDocumentFragment();
+  for (; s.body.firstChild; )
+    o.appendChild(s.body.firstChild);
+  for (const a of e.dynamics) {
+    const c = a.getValue(t, n), l = O(o, a.path);
+    I(l, a, c);
+  }
+  return o;
 }
-function I(r, t, e) {
+function I(e, t, n) {
   try {
     if (t.type === "text") {
-      const a = document.createTreeWalker(
-        r,
+      const i = document.createTreeWalker(
+        e,
         NodeFilter.SHOW_TEXT
       );
-      let o = !1, s;
-      for (; s = a.nextNode(); ) {
-        const l = s.textContent || "";
-        if (l.includes("Count: ")) {
-          const c = l.replace(/Count: \d+/, `Count: ${e}`);
-          s.textContent = c, o = !0;
+      let s = !1, o;
+      for (; o = i.nextNode(); ) {
+        const c = o.textContent || "";
+        if (c.includes("Count: ")) {
+          const l = c.replace(/Count: \d+/, `Count: ${n}`);
+          o.textContent = l, s = !0;
         }
       }
-      if (o) return;
-      const i = O(r, t.path);
-      i && i.nodeType === Node.TEXT_NODE && (i.textContent = e == null ? "" : String(e));
+      if (s) return;
+      const a = O(e, t.path);
+      a && a.nodeType === Node.TEXT_NODE && (a.textContent = n == null ? "" : String(n));
       return;
     }
-    const n = O(r, t.path);
-    if (!n)
+    const r = O(e, t.path);
+    if (!r)
       return;
     switch (t.type) {
       case "attribute":
-        if (n.nodeType === Node.ELEMENT_NODE && t.target) {
-          const a = n;
-          e == null || e === "" ? a.removeAttribute(t.target) : a.setAttribute(t.target, String(e));
+        if (r.nodeType === Node.ELEMENT_NODE && t.target) {
+          const i = r;
+          n == null || n === "" ? i.removeAttribute(t.target) : i.setAttribute(t.target, String(n));
         }
         break;
       case "property":
-        n.nodeType === Node.ELEMENT_NODE && t.target && (n[t.target] = e ?? "", n.setAttribute(t.target, e == null ? "" : String(e)));
+        r.nodeType === Node.ELEMENT_NODE && t.target && (r[t.target] = n ?? "", r.setAttribute(t.target, n == null ? "" : String(n)));
         break;
       case "class":
-        if (n.nodeType === Node.ELEMENT_NODE && t.target) {
-          const a = n;
-          a.className = e == null ? "" : String(e), a.setAttribute("class", e == null ? "" : String(e));
+        if (r.nodeType === Node.ELEMENT_NODE && t.target) {
+          const i = r;
+          i.className = n == null ? "" : String(n), i.setAttribute("class", n == null ? "" : String(n));
         }
         break;
       case "style":
-        if (n.nodeType === Node.ELEMENT_NODE && t.target) {
-          const a = n;
-          a.style[t.target] = e == null ? "" : String(e), a.setAttribute("style", e == null ? `${t.target}:` : `${t.target}:${e}`);
+        if (r.nodeType === Node.ELEMENT_NODE && t.target) {
+          const i = r;
+          i.style[t.target] = n == null ? "" : String(n), i.setAttribute("style", n == null ? `${t.target}:` : `${t.target}:${n}`);
         }
         break;
       default:
         throw new Error(`Unknown update type: ${t.type}`);
     }
-  } catch (n) {
-    (typeof globalThis < "u" ? globalThis.isDevelopment : R) && console.warn("[Template Compiler] Error applying update:", t, n);
+  } catch (r) {
+    (typeof globalThis < "u" ? globalThis.isDevelopment : R) && console.warn("[Template Compiler] Error applying update:", t, r);
   }
 }
-const T = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Map();
-function N(r) {
+const T = /* @__PURE__ */ new Map(), E = /* @__PURE__ */ new Map();
+function N(e) {
   let t = 0;
-  for (let e = 0; e < r.length; e++) {
-    const n = r.charCodeAt(e);
-    t = (t << 5) - t + n, t = t & t;
+  for (let n = 0; n < e.length; n++) {
+    const r = e.charCodeAt(n);
+    t = (t << 5) - t + r, t = t & t;
   }
   return `tpl_${Math.abs(t).toString(36)}`;
 }
-function x(r, t, e, n, a) {
-  return n && a ? `${t}.${r}[${e}]:${n}:${a}` : n ? `${t}.${r}[${e}]:${n}` : `${t}.${r}[${e}]`;
+function x(e, t, n, r, i) {
+  return r && i ? `${t}.${e}[${n}]:${r}:${i}` : r ? `${t}.${e}[${n}]:${r}` : `${t}.${e}[${n}]`;
 }
-function D(r, t, e) {
-  if (!(!r || !(r instanceof Element)) && r.contains(e) && e.parentNode === r)
+function D(e, t, n) {
+  if (!(!e || !(e instanceof Element)) && e.contains(n) && n.parentNode === e)
     try {
-      r.replaceChild(t, e);
-    } catch (n) {
-      console.error("[VDOM] safeReplaceChild: error replacing child", n, {
-        parent: r,
+      e.replaceChild(t, n);
+    } catch (r) {
+      console.error("[VDOM] safeReplaceChild: error replacing child", r, {
+        parent: e,
         newChild: t,
-        oldChild: e,
-        parentHTML: r.outerHTML,
+        oldChild: n,
+        parentHTML: e.outerHTML,
         newChildHTML: t.outerHTML,
-        oldChildHTML: e.outerHTML
+        oldChildHTML: n.outerHTML
       });
     }
 }
-function g(r) {
-  if (r.type === "#whitespace")
+function g(e) {
+  if (e.type === "#whitespace")
     return null;
-  if (r.type === "#text") {
-    const e = document.createTextNode(r.props.nodeValue ?? "");
-    return r.dom = e, e;
-  }
-  const t = document.createElement(r.type);
-  for (const [e, n] of Object.entries(r.props))
-    e === "value" && t instanceof HTMLInputElement ? t.type === "radio" ? t.setAttribute("value", n) : (t.type, t.value = n, t.setAttribute("value", n)) : t.setAttribute(e, n);
-  r.dom = t;
-  for (const e of r.children) {
-    const n = g(e);
-    n && t.appendChild(n);
+  if (e.type === "#text") {
+    const n = document.createTextNode(e.props.nodeValue ?? "");
+    return e.dom = n, n;
+  }
+  const t = document.createElement(e.type);
+  for (const [n, r] of Object.entries(e.props))
+    n === "value" && t instanceof HTMLInputElement ? t.type === "radio" ? t.setAttribute("value", r) : (t.type, t.value = r, t.setAttribute("value", r)) : t.setAttribute(n, r);
+  e.dom = t;
+  for (const n of e.children) {
+    const r = g(n);
+    r && t.appendChild(r);
   }
   return t;
 }
-function Y(r) {
+function J(e) {
   const t = document.createElement("template");
-  t.innerHTML = r.trim();
-  const e = Array.from(t.content.childNodes);
-  return e.length === 1 ? k(e[0]) : {
+  t.innerHTML = e.trim();
+  const n = Array.from(t.content.childNodes);
+  return n.length === 1 ? k(n[0]) : {
     type: "#fragment",
     key: void 0,
     props: {},
-    children: e.map((a, o) => k(a, "#fragment", o)),
+    children: n.map((i, s) => k(i, "#fragment", s)),
     dom: void 0
   };
 }
-function k(r, t = "", e = 0) {
-  if (!r)
+function k(e, t = "", n = 0) {
+  if (!e)
     return { type: "#unknown", key: void 0, props: {}, children: [], dom: void 0 };
-  if (r.nodeType === Node.TEXT_NODE)
-    return !r.nodeValue || /^\s*$/.test(r.nodeValue) ? { type: "#whitespace", key: void 0, props: {}, children: [], dom: void 0 } : { type: "#text", key: x("#text", t, e), props: { nodeValue: r.nodeValue }, children: [], dom: r };
-  if (r.nodeType === Node.ELEMENT_NODE) {
-    const n = r, a = {};
-    Array.from(n.attributes).forEach((c) => {
-      a[c.name] = c.value;
+  if (e.nodeType === Node.TEXT_NODE)
+    return !e.nodeValue || /^\s*$/.test(e.nodeValue) ? { type: "#whitespace", key: void 0, props: {}, children: [], dom: void 0 } : { type: "#text", key: x("#text", t, n), props: { nodeValue: e.nodeValue }, children: [], dom: e };
+  if (e.nodeType === Node.ELEMENT_NODE) {
+    const r = e, i = {};
+    Array.from(r.attributes).forEach((l) => {
+      i[l.name] = l.value;
     });
-    const o = n.tagName.toLowerCase();
-    let s;
-    if ((o === "input" || o === "select" || o === "textarea") && n.hasAttribute("data-model")) {
-      const c = n.getAttribute("data-model"), d = n.getAttribute("type") ?? "";
-      s = `${o}:${c}:${d}`, a["data-uid"] = s, n.setAttribute("data-uid", s);
-      let u = n.getAttribute("value"), f = n.getAttribute("checked");
-      u && (a.value = u), f && (a.checked = f);
-    } else o === "input" || o === "textarea" || o === "select" || n.hasAttribute("contenteditable") ? (s = `${o}:${t}:${e}`, a["data-uid"] = s, n.setAttribute("data-uid", s)) : (s = x(o, t, e), o === "li" && (a["data-uid"] = s, n.setAttribute("data-uid", s)));
-    const i = Array.from(n.childNodes).map((c, d) => k(c, s, d));
+    const s = r.tagName.toLowerCase();
+    let o;
+    if ((s === "input" || s === "select" || s === "textarea") && r.hasAttribute("data-model")) {
+      const l = r.getAttribute("data-model"), d = r.getAttribute("type") ?? "";
+      o = `${s}:${l}:${d}`, i["data-uid"] = o, r.setAttribute("data-uid", o);
+      let f = r.getAttribute("value"), u = r.getAttribute("checked");
+      f && (i.value = f), u && (i.checked = u);
+    } else s === "input" || s === "textarea" || s === "select" || r.hasAttribute("contenteditable") ? (o = `${s}:${t}:${n}`, i["data-uid"] = o, r.setAttribute("data-uid", o)) : (o = x(s, t, n), s === "li" && (i["data-uid"] = o, r.setAttribute("data-uid", o)));
+    const a = Array.from(r.childNodes).map((l, d) => k(l, o, d));
     return {
-      type: o,
-      key: s,
-      props: a,
-      children: i,
-      dom: n
+      type: s,
+      key: o,
+      props: i,
+      children: a,
+      dom: r
     };
   }
   return { type: "#unknown", key: void 0, props: {}, children: [], dom: void 0 };
 }
-function L(r, t, e) {
-  if (!t || !e) return;
-  function n(l) {
-    return !!l && l.type !== "#whitespace" && !(l.type === "#text" && (!l.props?.nodeValue || /^\s*$/.test(l.props.nodeValue)));
-  }
-  const a = Array.isArray(t.children) ? t.children.filter(n) : [], o = Array.isArray(e.children) ? e.children.filter(n) : [], s = e.type === "input" || e.type === "select" || e.type === "textarea";
-  if (t.type !== e.type || t.key !== e.key) {
-    const l = g(e);
-    if (l instanceof Node && t.dom instanceof Node && r.contains(t.dom)) {
-      if (D(r, l, t.dom), s && e.props && r.firstChild instanceof HTMLInputElement) {
-        const c = r.firstChild;
-        c.type === "radio" || c.type, c.value = e.props.value, c.setAttribute("value", e.props.value), "checked" in e.props && (c.checked = e.props.checked === !0 || e.props.checked === "true");
+function L(e, t, n) {
+  if (!t || !n) return;
+  function r(c) {
+    return !!c && c.type !== "#whitespace" && !(c.type === "#text" && (!c.props?.nodeValue || /^\s*$/.test(c.props.nodeValue)));
+  }
+  const i = Array.isArray(t.children) ? t.children.filter(r) : [], s = Array.isArray(n.children) ? n.children.filter(r) : [], o = n.type === "input" || n.type === "select" || n.type === "textarea";
+  if (t.type !== n.type || t.key !== n.key) {
+    const c = g(n);
+    if (c instanceof Node && t.dom instanceof Node && e.contains(t.dom)) {
+      if (D(e, c, t.dom), o && n.props && e.firstChild instanceof HTMLInputElement) {
+        const l = e.firstChild;
+        l.type === "radio" || l.type, l.value = n.props.value, l.setAttribute("value", n.props.value), "checked" in n.props && (l.checked = n.props.checked === !0 || n.props.checked === "true");
       }
-    } else if (l instanceof Node)
-      if (l) {
-        if (r.appendChild(l), e.dom = l, s && e.props && r.firstChild instanceof HTMLInputElement) {
-          const c = r.firstChild;
-          c.type === "radio" ? c.setAttribute("value", e.props.value) : (c.type, c.value = e.props.value, c.setAttribute("value", e.props.value)), "checked" in e.props && (c.checked = e.props.checked === !0 || e.props.checked === "true");
+    } else if (c instanceof Node)
+      if (c) {
+        if (e.appendChild(c), n.dom = c, o && n.props && e.firstChild instanceof HTMLInputElement) {
+          const l = e.firstChild;
+          l.type === "radio" ? l.setAttribute("value", n.props.value) : (l.type, l.value = n.props.value, l.setAttribute("value", n.props.value)), "checked" in n.props && (l.checked = n.props.checked === !0 || n.props.checked === "true");
         }
       } else
-        e.dom = void 0;
+        n.dom = void 0;
     else
-      e.dom = void 0;
+      n.dom = void 0;
     return;
   }
-  if (s && t.dom instanceof HTMLElement && e.props) {
-    for (const [l, c] of Object.entries(e.props))
-      if (l === "value" && r.firstChild instanceof HTMLInputElement)
-        r.firstChild.value = c;
-      else if (l === "checked" && r.firstChild instanceof HTMLInputElement)
-        r.firstChild.checked = c === !0 || c === "true";
-      else if (l in t.dom)
+  if (o && t.dom instanceof HTMLElement && n.props) {
+    for (const [c, l] of Object.entries(n.props))
+      if (c === "value" && e.firstChild instanceof HTMLInputElement)
+        e.firstChild.value = l;
+      else if (c === "checked" && e.firstChild instanceof HTMLInputElement)
+        e.firstChild.checked = l === !0 || l === "true";
+      else if (c in t.dom)
         try {
-          t.dom[l] = c;
+          t.dom[c] = l;
         } catch {
         }
       else
-        t.dom.setAttribute(l, c);
-    for (let l = e.children.length; l < a.length; l++)
-      a[l] && a[l].dom && t.dom && t.dom.contains(a[l].dom) && t.dom.removeChild(a[l].dom);
+        t.dom.setAttribute(c, l);
+    for (let c = n.children.length; c < i.length; c++)
+      i[c] && i[c].dom && t.dom && t.dom.contains(i[c].dom) && t.dom.removeChild(i[c].dom);
     return;
   }
-  const i = t.dom;
-  if (i && i instanceof Element && e.props) {
-    const l = i.tagName.toLowerCase() === "input" ? i.getAttribute("type") : void 0, c = i.tagName.includes("-");
-    for (const [d, u] of Object.entries(e.props))
-      if (!(l === "radio" && d === "value")) {
-        if (l === "checkbox" && d === "value") {
-          i.setAttribute("value", u);
+  const a = t.dom;
+  if (a && a instanceof Element && n.props) {
+    const c = a.tagName.toLowerCase() === "input" ? a.getAttribute("type") : void 0, l = a.tagName.includes("-");
+    for (const [d, f] of Object.entries(n.props))
+      if (!(c === "radio" && d === "value")) {
+        if (c === "checkbox" && d === "value") {
+          a.setAttribute("value", f);
           continue;
         }
-        i.setAttribute(d, u);
+        a.setAttribute(d, f);
       }
-    if (c)
-      for (const [d, u] of Object.entries(e.props))
-        i.setAttribute(d, u);
-    for (const d of Array.from(i.attributes).map((u) => u.name))
-      if (!(d in e.props)) {
-        if (l === "radio" && d === "value" || l === "checkbox" && d === "value") continue;
-        i.removeAttribute(d);
+    if (l)
+      for (const [d, f] of Object.entries(n.props))
+        a.setAttribute(d, f);
+    for (const d of Array.from(a.attributes).map((f) => f.name))
+      if (!(d in n.props)) {
+        if (c === "radio" && d === "value" || c === "checkbox" && d === "value") continue;
+        a.removeAttribute(d);
       }
   }
-  if (e.type === "#text") {
-    if (i && i.nodeType === Node.TEXT_NODE)
-      i.nodeValue !== e.props.nodeValue && (i.nodeValue = e.props.nodeValue), e.dom = i;
+  if (n.type === "#text") {
+    if (a && a.nodeType === Node.TEXT_NODE)
+      a.nodeValue !== n.props.nodeValue && (a.nodeValue = n.props.nodeValue), n.dom = a;
     else {
-      const l = document.createTextNode(e.props.nodeValue ?? "");
-      i && r.contains(i) && i.parentNode === r ? D(r, l, i) : r.appendChild(l), e.dom = l;
+      const c = document.createTextNode(n.props.nodeValue ?? "");
+      a && e.contains(a) && a.parentNode === e ? D(e, c, a) : e.appendChild(c), n.dom = c;
     }
     return;
   }
-  if (i instanceof Element) {
-    const l = /* @__PURE__ */ new Map();
-    a.forEach((f) => f.key && l.set(f.key, f));
-    const c = new Set(o.map((f) => f.key));
+  if (a instanceof Element) {
+    const c = /* @__PURE__ */ new Map();
+    i.forEach((u) => u.key && c.set(u.key, u));
+    const l = new Set(s.map((u) => u.key));
     let d = [];
-    for (let f = 0; f < o.length; f++) {
-      const h = o[f], m = h.key ? l.get(h.key) : a[f];
+    for (let u = 0; u < s.length; u++) {
+      const h = s[u], m = h.key ? c.get(h.key) : i[u];
       let p;
       const A = h.type === "input" || h.type === "select" || h.type === "textarea";
       if (m && m.dom && (!A || m.type === h.type && m.key === h.key))
-        L(i, m, h), p = m.dom;
+        L(a, m, h), p = m.dom;
       else {
-        const E = g(h);
-        if (p = E instanceof Node ? E : void 0, p) {
-          if ((p instanceof Element || p instanceof Node) && p.contains(i))
+        const b = g(h);
+        if (p = b instanceof Node ? b : void 0, p) {
+          if ((p instanceof Element || p instanceof Node) && p.contains(a))
             throw console.error("[VDOM] Attempted to insert a parent into its own child:", {
-              parentTag: i.tagName,
+              parentTag: a.tagName,
               childTag: p.tagName,
-              parentUid: i.getAttribute?.("data-uid"),
+              parentUid: a.getAttribute?.("data-uid"),
               childUid: p.getAttribute?.("data-uid"),
-              parent: i,
+              parent: a,
               child: p
             }), new Error("VDOM patch error: Attempted to insert a parent into its own child");
-          i.insertBefore(p, i.childNodes[f] || null);
+          a.insertBefore(p, a.childNodes[u] || null);
         }
       }
       h.dom = p, p && d.push(p);
     }
-    for (a.forEach((f) => {
-      !c.has(f.key) && f.dom && i.contains(f.dom) && i.removeChild(f.dom);
-    }); i.childNodes.length > o.length; )
-      i.removeChild(i.lastChild);
-    for (let f = 0; f < d.length; f++)
-      if (i.childNodes[f] !== d[f]) {
-        if ((d[f] instanceof Element || d[f] instanceof Node) && d[f].contains(i))
+    for (i.forEach((u) => {
+      !l.has(u.key) && u.dom && a.contains(u.dom) && a.removeChild(u.dom);
+    }); a.childNodes.length > s.length; )
+      a.removeChild(a.lastChild);
+    for (let u = 0; u < d.length; u++)
+      if (a.childNodes[u] !== d[u]) {
+        if ((d[u] instanceof Element || d[u] instanceof Node) && d[u].contains(a))
           throw new Error("VDOM patch error: Attempted to insert a parent into its own child");
-        i.insertBefore(d[f], i.childNodes[f] || null);
+        a.insertBefore(d[u], a.childNodes[u] || null);
       }
-    e.dom = i;
-    const u = new Set(o.map((f) => f.key));
-    Array.from(i.childNodes).forEach((f, h) => {
-      const m = f.getAttribute?.("data-uid");
-      (m && !u.has(m) || h >= o.length) && i.removeChild(f);
+    n.dom = a;
+    const f = new Set(s.map((u) => u.key));
+    Array.from(a.childNodes).forEach((u, h) => {
+      const m = u.getAttribute?.("data-uid");
+      (m && !f.has(m) || h >= s.length) && a.removeChild(u);
     });
   }
 }
-function M(r, t) {
-  const e = [], n = t ? Object.keys(t) : [], a = { ...r };
-  let o = null;
-  function s(d) {
-    return e.push(d), () => {
-      const u = e.indexOf(d);
-      u !== -1 && e.splice(u, 1);
+function M(e, t) {
+  const n = [], r = t ? Object.keys(t) : [], i = { ...e };
+  let s = null;
+  function o(d) {
+    return n.push(d), () => {
+      const f = n.indexOf(d);
+      f !== -1 && n.splice(f, 1);
     };
   }
-  function i(d) {
-    Object.assign(o, d), e.forEach((u) => u(o));
-  }
-  const l = /* @__PURE__ */ new WeakMap();
-  function c(d) {
-    if (l.has(d)) return l.get(d);
-    const u = new Proxy(d, {
-      get(f, h, m) {
-        if (h === "subscribe") return s;
-        if (h === "set") return i;
-        if (t && n.includes(h))
-          return t[h](o);
-        const p = Reflect.get(f, h, m);
-        return typeof p == "object" && p !== null ? c(p) : p;
+  function a(d) {
+    Object.assign(s, d), n.forEach((f) => f(s));
+  }
+  const c = /* @__PURE__ */ new WeakMap();
+  function l(d) {
+    if (c.has(d)) return c.get(d);
+    const f = new Proxy(d, {
+      get(u, h, m) {
+        if (h === "subscribe") return o;
+        if (h === "set") return a;
+        if (t && r.includes(h))
+          return t[h](s);
+        const p = Reflect.get(u, h, m);
+        return typeof p == "object" && p !== null ? l(p) : p;
       },
-      set(f, h, m, p) {
-        if (t && n.includes(h))
+      set(u, h, m, p) {
+        if (t && r.includes(h))
           return !1;
-        const A = f[h], E = Reflect.set(f, h, m, p);
-        return A !== m && e.forEach((P) => P(o)), E;
+        const A = u[h], b = Reflect.set(u, h, m, p);
+        return A !== m && n.forEach((z) => z(s)), b;
       },
-      deleteProperty(f, h) {
-        if (t && n.includes(h))
+      deleteProperty(u, h) {
+        if (t && r.includes(h))
           return !1;
-        const m = Reflect.deleteProperty(f, h);
-        return e.forEach((p) => p(o)), m;
+        const m = Reflect.deleteProperty(u, h);
+        return n.forEach((p) => p(s)), m;
       }
     });
-    return l.set(d, u), u;
+    return c.set(d, f), f;
   }
-  return o = c(a), o;
+  return s = l(i), s;
 }
-const _ = [];
-function dt(r) {
-  _.push(r);
+const v = [];
+function dt(e) {
+  v.push(e);
 }
-function b(r, t = /* @__PURE__ */ new WeakSet()) {
-  if (r === null || typeof r != "object" || t.has(r)) return r;
-  if (t.add(r), Array.isArray(r)) return r.map((a) => b(a, t));
-  Object.getPrototypeOf(r) !== Object.prototype && Object.getPrototypeOf(r) !== null && Object.setPrototypeOf(r, null);
-  const e = ["__proto__", "constructor", "prototype"], n = /* @__PURE__ */ Object.create(null);
-  for (const a of Object.keys(r))
-    e.includes(a) || (n[a] = b(r[a], t));
-  return n;
+function _(e, t = /* @__PURE__ */ new WeakSet()) {
+  if (e === null || typeof e != "object" || t.has(e)) return e;
+  if (t.add(e), Array.isArray(e)) return e.map((i) => _(i, t));
+  Object.getPrototypeOf(e) !== Object.prototype && Object.getPrototypeOf(e) !== null && Object.setPrototypeOf(e, null);
+  const n = ["__proto__", "constructor", "prototype"], r = /* @__PURE__ */ Object.create(null);
+  for (const i of Object.keys(e))
+    n.includes(i) || (r[i] = _(e[i], t));
+  return r;
 }
-function S(r) {
-  return !!r && typeof r.then == "function";
+function S(e) {
+  return !!e && typeof e.then == "function";
 }
-class J extends HTMLElement {
-  /**
-   * Allows updating the state object and triggers a re-render.
-   * @param newState - Partial state to merge
-   */
+let P;
+typeof HTMLElement < "u" && (P = class extends HTMLElement {
   /**
    * Syncs whitelisted state properties to attributes after render.
    * Only keys listed in config.reflect are reflected.
    */
   syncStateToAttributes() {
     if (!this.stateObj || !this.config?.reflect || !Array.isArray(this.config.reflect)) return;
-    const t = ["__proto__", "constructor", "prototype"];
-    this.config.reflect.forEach((e) => {
-      if (t.includes(e)) {
-        this.removeAttribute(e);
+    const e = ["__proto__", "constructor", "prototype"];
+    this.config.reflect.forEach((t) => {
+      if (e.includes(t)) {
+        this.removeAttribute(t);
         return;
       }
-      const n = this.stateObj[e];
-      ["string", "number", "boolean"].includes(typeof n) ? n == null ? this.removeAttribute(e) : this.setAttribute(e, String(n)) : this.removeAttribute(e);
+      const n = this.stateObj[t];
+      ["string", "number", "boolean"].includes(typeof n) ? n == null ? this.removeAttribute(t) : this.setAttribute(t, String(n)) : this.removeAttribute(t);
     });
   }
   /**
    * Allows updating the template function at runtime and triggers a re-render.
    * @param newTemplate - New template function or string
    */
-  setTemplate(t) {
-    const e = this.config;
-    typeof t == "function" ? e.template = t : e.template = () => t, this.render();
+  setTemplate(e) {
+    const t = this.config;
+    typeof e == "function" ? t.template = e : t.template = () => e, this.render();
   }
   _hasError = !1;
   _mountedCalled = !1;
@@ -937,115 +934,115 @@ class J extends HTMLElement {
   /**
    * Override removeEventListener to support auto-wired config handler removal
    */
-  removeEventListener(t, e, n) {
-    super.removeEventListener(t, e, n), this._autoWiredHandlers[t] && (this._autoWiredHandlers[t] = this._autoWiredHandlers[t].filter((a) => a === e ? (super.removeEventListener(t, a, n), !1) : !0), this._autoWiredHandlers[t].length === 0 && delete this._autoWiredHandlers[t]);
+  removeEventListener(e, t, n) {
+    super.removeEventListener(e, t, n), this._autoWiredHandlers[e] && (this._autoWiredHandlers[e] = this._autoWiredHandlers[e].filter((r) => r === t ? (super.removeEventListener(e, r, n), !1) : !0), this._autoWiredHandlers[e].length === 0 && delete this._autoWiredHandlers[e]);
   }
   /**
    * observedAttributes automatically returns all primitive keys from static state.
    * This enables automatic attribute observation for all primitive state properties.
    */
   static get observedAttributes() {
-    const t = this.stateObj || {};
-    return Object.keys(t).filter(
-      (e) => ["string", "number", "boolean"].includes(typeof t[e])
+    const e = this.stateObj || {};
+    return Object.keys(e).filter(
+      (t) => ["string", "number", "boolean"].includes(typeof e[t])
     );
   }
   /**
    * Called when an observed attribute changes. Syncs attribute to state and triggers render.
    */
-  attributeChangedCallback(t, e, n) {
-    if (!(t === "__proto__" || t === "constructor" || t === "prototype") && this.stateObj && t in this.stateObj) {
-      const a = typeof this.config?.state?.[t];
-      let o = n;
+  attributeChangedCallback(e, t, n) {
+    if (!(e === "__proto__" || e === "constructor" || e === "prototype") && this.stateObj && e in this.stateObj) {
+      const r = typeof this.config?.state?.[e];
+      let i = n;
       if (n === null)
-        o = void 0;
-      else if (a === "number")
-        if (o === void 0 || o === "")
-          o = this.config?.state?.[t];
+        i = void 0;
+      else if (r === "number")
+        if (i === void 0 || i === "")
+          i = this.config?.state?.[e];
         else {
-          const s = Number(o);
-          o = isNaN(s) ? this.config?.state?.[t] : s;
+          const s = Number(i);
+          i = isNaN(s) ? this.config?.state?.[e] : s;
         }
-      else a === "boolean" && (o = o === "true");
-      o = b(o), this.stateObj[t] !== o && (this.config?.debug && console.log("[runtime] state update:", { name: t, value: o }), this.stateObj[t] = o, this.render());
+      else r === "boolean" && (i = i === "true");
+      i = _(i), this.stateObj[e] !== i && (this.config?.debug && console.log("[runtime] state update:", { name: e, value: i }), this.stateObj[e] = i, this.render());
     }
   }
   /**
    * Force sync all controlled input values and event listeners after VDOM patching.
    */
   forceSyncControlledInputs() {
-    this.shadowRoot && (this.shadowRoot.querySelectorAll("input[data-model]").forEach((t) => {
-      const e = t.getAttribute("data-model");
-      if (!e || !this.stateObj || typeof this.stateObj[e] > "u") return;
-      const n = t, a = String(this.stateObj[e]), o = document.activeElement === n;
+    this.shadowRoot && (this.shadowRoot.querySelectorAll("input[data-model]").forEach((e) => {
+      const t = e.getAttribute("data-model");
+      if (!t || !this.stateObj || typeof this.stateObj[t] > "u") return;
+      const n = e, r = String(this.stateObj[t]), i = document.activeElement === n;
       n._hasDirtyListener || (n.addEventListener("input", () => {
         n._isDirty = !0;
       }), n.addEventListener("blur", () => {
         n._isDirty = !1;
       }), n._hasDirtyListener = !0);
       const s = !!n._isDirty;
-      o || s || n.type !== "radio" && n.type !== "checkbox" && n.value !== a && (n.value = a);
+      i || s || n.type !== "radio" && n.type !== "checkbox" && n.value !== r && (n.value = r);
     }), this.rebindEventListeners());
   }
   /**
    * Sync all controlled inputs and event listeners after render
    */
   syncControlledInputsAndEvents() {
-    this.shadowRoot && (this.shadowRoot.querySelectorAll('input[type="radio"][data-model]').forEach((t) => {
-      const e = t.getAttribute("data-model");
-      if (!e || !this.stateObj || typeof this.stateObj[e] > "u")
+    this.shadowRoot && (this.shadowRoot.querySelectorAll('input[type="radio"][data-model]').forEach((e) => {
+      const t = e.getAttribute("data-model");
+      if (!t || !this.stateObj || typeof this.stateObj[t] > "u")
         return;
-      const n = t, a = String(this.stateObj[e]);
-      n.checked = n.value === a;
-    }), this.shadowRoot.querySelectorAll("input[data-model]").forEach((t) => {
-      const e = t.getAttribute("data-model");
-      if (!e || !this.stateObj || typeof this.stateObj[e] > "u") return;
-      const n = t, a = String(this.stateObj[e]);
+      const n = e, r = String(this.stateObj[t]);
+      n.checked = n.value === r;
+    }), this.shadowRoot.querySelectorAll("input[data-model]").forEach((e) => {
+      const t = e.getAttribute("data-model");
+      if (!t || !this.stateObj || typeof this.stateObj[t] > "u") return;
+      const n = e, r = String(this.stateObj[t]);
       if (n.type === "checkbox") {
-        const o = this.stateObj[e];
-        if (Array.isArray(o))
-          n.checked = o.includes(n.value);
+        const i = this.stateObj[t];
+        if (Array.isArray(i))
+          n.checked = i.includes(n.value);
         else {
-          const s = n.getAttribute("data-true-value"), i = n.getAttribute("data-false-value");
-          s !== null || i !== null ? String(o) === s ? n.checked = !0 : String(o) === i ? n.checked = !1 : o === !0 ? n.checked = !0 : n.checked = !1 : n.checked = o === !0 || o === "true" || o === 1;
+          const s = n.getAttribute("data-true-value"), o = n.getAttribute("data-false-value");
+          s !== null || o !== null ? String(i) === s ? n.checked = !0 : String(i) === o ? n.checked = !1 : i === !0 ? n.checked = !0 : n.checked = !1 : n.checked = i === !0 || i === "true" || i === 1;
         }
-      } else n.type === "radio" || (n.value = a);
-    }), this.shadowRoot.querySelectorAll("textarea[data-model]").forEach((t) => {
-      const e = t.getAttribute("data-model");
-      !e || !this.stateObj || typeof this.stateObj[e] > "u" || (t.value = String(this.stateObj[e]));
-    }), this.shadowRoot.querySelectorAll("select[data-model]").forEach((t) => {
-      const e = t.getAttribute("data-model");
-      !e || !this.stateObj || typeof this.stateObj[e] > "u" || (t.value = String(this.stateObj[e]));
+      } else n.type === "radio" || (n.value = r);
+    }), this.shadowRoot.querySelectorAll("textarea[data-model]").forEach((e) => {
+      const t = e.getAttribute("data-model");
+      !t || !this.stateObj || typeof this.stateObj[t] > "u" || (e.value = String(this.stateObj[t]));
+    }), this.shadowRoot.querySelectorAll("select[data-model]").forEach((e) => {
+      const t = e.getAttribute("data-model");
+      !t || !this.stateObj || typeof this.stateObj[t] > "u" || (e.value = String(this.stateObj[t]));
     }));
   }
   /**
    * Attach event listeners for input[data-bind] after VDOM patching
    */
   attachListItemModelListeners() {
-    this.shadowRoot && this.shadowRoot.querySelectorAll("input[data-bind]").forEach((t) => {
-      const e = t.getAttribute("data-bind");
-      if (!e) return;
-      t._listItemModelListener && (t.removeEventListener("input", t._listItemModelListener), t.removeEventListener("change", t._listItemModelListener), delete t._listItemModelListener);
-      const n = e.match(/^([a-zA-Z0-9_]+)\[(\d+)\]\.([a-zA-Z0-9_]+)$/);
+    this.shadowRoot && this.shadowRoot.querySelectorAll("input[data-bind]").forEach((e) => {
+      const t = e.getAttribute("data-bind");
+      if (!t) return;
+      e._listItemModelListener && (e.removeEventListener("input", e._listItemModelListener), e.removeEventListener("change", e._listItemModelListener), delete e._listItemModelListener);
+      const n = t.match(/^([a-zA-Z0-9_]+)\[(\d+)\]\.([a-zA-Z0-9_]+)$/);
       if (n) {
-        const [, o, s, i] = n, l = parseInt(s, 10), c = this.stateObj[o];
-        t instanceof HTMLInputElement && t.type === "checkbox" && (t.checked = !!(Array.isArray(c) && c[l] && c[l][i]));
-        const d = (u) => {
-          !Array.isArray(c) || !c[l] || (t instanceof HTMLInputElement && t.type === "checkbox" ? c[l][i] = t.checked : c[l][i] = t.value);
+        const [, i, s, o] = n, a = parseInt(s, 10), c = this.stateObj[i];
+        e instanceof HTMLInputElement && e.type === "checkbox" && (e.checked = !!(Array.isArray(c) && c[a] && c[a][o]));
+        const l = (d) => {
+          !Array.isArray(c) || !c[a] || (e instanceof HTMLInputElement && e.type === "checkbox" ? c[a][o] = e.checked : c[a][o] = e.value);
         };
-        t.addEventListener("input", d), t.addEventListener("change", d), t._listItemModelListener = d;
+        e.addEventListener("input", l), e.addEventListener("change", l), e._listItemModelListener = l;
         return;
       }
-      const a = e.match(/^([a-zA-Z0-9_]+)\.([a-zA-Z0-9_]+)((?:\|[a-zA-Z0-9_]+)*)$/);
-      if (a) {
-        const [, o, s, i] = a, l = this.stateObj[o], c = i ? i.split("|").map((u) => u.trim()).filter(Boolean) : [];
-        t instanceof HTMLInputElement && t.type === "checkbox" ? t.checked = !!(l && l[s]) : t instanceof HTMLInputElement && (t.value = l ? String(l[s] ?? "") : "");
-        const d = (u) => {
-          if (!l) return;
+      const r = t.match(/^([a-zA-Z0-9_]+)\.([a-zA-Z0-9_]+)((?:\|[a-zA-Z0-9_]+)*)$/);
+      if (r) {
+        const [, i, s, o] = r, a = this.stateObj[i], c = o ? o.split("|").map((d) => d.trim()).filter(Boolean) : [];
+        e instanceof HTMLInputElement && e.type === "checkbox" ? e.checked = !!(a && a[s]) : e instanceof HTMLInputElement && (e.value = a ? String(a[s] ?? "") : "");
+        const l = (d) => {
+          if (!a) return;
           let f;
-          t instanceof HTMLInputElement && t.type === "checkbox" ? f = t.checked : (f = t.value, c.includes("number") && (f = Number(f)), c.includes("trim") && typeof f == "string" && (f = f.trim())), l[s] = f;
+          e instanceof HTMLInputElement && e.type === "checkbox" ? f = e.checked : (f = e.value, c.includes("number") && (f = Number(f)), c.includes("trim") && typeof f == "string" && (f = f.trim())), a[s] = f;
         };
-        t.addEventListener("input", d), t.addEventListener("change", d), t._listItemModelListener = d;
+        e.addEventListener("input", l), e.addEventListener("change", l), e._listItemModelListener = l;
       }
     });
   }
@@ -1053,19 +1050,19 @@ class J extends HTMLElement {
    * Attach controlled input listeners to sync DOM value to state
    */
   attachControlledInputListeners() {
-    const t = this.shadowRoot;
-    t && (t.querySelectorAll("[data-model]").forEach((e) => {
-      const n = e.getAttribute("data-model");
-      n && (e._dataModelBound || (G(e, this.stateObj, n), e._dataModelBound = !0));
-    }), t.querySelectorAll("[data-model]").forEach((e) => {
-      const [n] = e.getAttribute("data-model")?.split("|").map((a) => a.trim()) ?? [];
+    const e = this.shadowRoot;
+    e && (e.querySelectorAll("[data-model]").forEach((t) => {
+      const n = t.getAttribute("data-model");
+      n && (t._dataModelBound || (U(t, this.stateObj, n), t._dataModelBound = !0));
+    }), e.querySelectorAll("[data-model]").forEach((t) => {
+      const [n] = t.getAttribute("data-model")?.split("|").map((r) => r.trim()) ?? [];
       if (!(!n || !(n in this.stateObj)))
-        if (e instanceof HTMLInputElement)
-          if (e.type === "checkbox") {
-            const a = this.stateObj[n], o = e.getAttribute("data-true-value"), s = e.getAttribute("data-false-value");
-            Array.isArray(a) ? e.checked = a.includes(e.value) : o !== null || s !== null ? String(a) === o ? e.checked = !0 : String(a) === s ? e.checked = !1 : a === !0 ? e.checked = !0 : e.checked = !1 : e.checked = a === !0 || a === "true" || a === 1;
-          } else e.type === "radio" ? e.checked = e.value === String(this.stateObj[n]) : e.value = String(this.stateObj[n] ?? "");
-        else (e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement) && (e.value = String(this.stateObj[n] ?? ""));
+        if (t instanceof HTMLInputElement)
+          if (t.type === "checkbox") {
+            const r = this.stateObj[n], i = t.getAttribute("data-true-value"), s = t.getAttribute("data-false-value");
+            Array.isArray(r) ? t.checked = r.includes(t.value) : i !== null || s !== null ? String(r) === i ? t.checked = !0 : String(r) === s ? t.checked = !1 : r === !0 ? t.checked = !0 : t.checked = !1 : t.checked = r === !0 || r === "true" || r === 1;
+          } else t.type === "radio" ? t.checked = t.value === String(this.stateObj[n]) : t.value = String(this.stateObj[n] ?? "");
+        else (t instanceof HTMLTextAreaElement || t instanceof HTMLSelectElement) && (t.value = String(this.stateObj[n] ?? ""));
     }));
   }
   config;
@@ -1085,31 +1082,31 @@ class J extends HTMLElement {
   }
   initializeConfig() {
     if (this.config) return;
-    const t = this.tagName.toLowerCase(), n = (window.__componentRegistry || {})[t];
+    const e = this.tagName.toLowerCase(), n = (window.__componentRegistry || {})[e];
     if (!n || typeof n != "object")
       throw new Error("Invalid component config: must be an object");
     if (!n.state || typeof n.state != "object")
       throw new Error("Invalid component config: state must be an object");
     this.config = n;
-    const a = n.computed ? M(n.state, n.computed) : M(n.state);
-    if (this.stateObj = a, typeof this.stateObj.subscribe == "function" && this.unsubscribes.push(this.stateObj.subscribe(() => {
+    const r = n.computed ? M(n.state, n.computed) : M(n.state);
+    if (this.stateObj = r, typeof this.stateObj.subscribe == "function" && this.unsubscribes.push(this.stateObj.subscribe(() => {
       this.scheduleRender();
     })), this.api = {
       state: this.stateObj,
-      emit: (s, i) => this.dispatchEvent(new CustomEvent(s, { detail: i, bubbles: !0 })),
-      onGlobal: (s, i) => {
-        const l = C.on(s, i);
-        return this._globalUnsubscribes.push(l), l;
+      emit: (s, o) => this.dispatchEvent(new CustomEvent(s, { detail: o, bubbles: !0 })),
+      onGlobal: (s, o) => {
+        const a = C.on(s, o);
+        return this._globalUnsubscribes.push(a), a;
       },
-      offGlobal: (s, i) => C.off(s, i),
-      emitGlobal: (s, i) => C.emit(s, i)
+      offGlobal: (s, o) => C.off(s, o),
+      emitGlobal: (s, o) => C.emit(s, o)
     }, Object.keys(this.config).forEach((s) => {
       if (s.startsWith("on") && s.length > 2 && typeof this.config[s] == "function") {
-        const i = s.charAt(2).toLowerCase() + s.slice(3), l = (c) => {
-          const d = c.detail ?? c;
-          this.config[s](d, this.api.state, this.api);
+        const o = s.charAt(2).toLowerCase() + s.slice(3), a = (c) => {
+          const l = c.detail ?? c;
+          this.config[s](l, this.api.state, this.api);
         };
-        this.addEventListener(i, l), this._autoWiredHandlers[i] || (this._autoWiredHandlers[i] = []), this._autoWiredHandlers[i].push(l);
+        this.addEventListener(o, a), this._autoWiredHandlers[o] || (this._autoWiredHandlers[o] = []), this._autoWiredHandlers[o].push(a);
       }
     }), this.attachShadow({ mode: "open" }), n.style) {
       const s = document.createElement("style");
@@ -1118,22 +1115,22 @@ class J extends HTMLElement {
     if (typeof this.config.hydrate == "function") {
       const s = this.shadowRoot?.querySelectorAll("[data-hydrate]");
       try {
-        s && s.length > 0 ? s.forEach((i) => {
+        s && s.length > 0 ? s.forEach((o) => {
           try {
-            this.config.hydrate(i, this.stateObj, this.api);
-          } catch (l) {
-            typeof this.config.onError == "function" && this.config.onError(l instanceof Error ? l : new Error(String(l)), this.api.state, this.api), this._handleRenderError(l);
+            this.config.hydrate(o, this.stateObj, this.api);
+          } catch (a) {
+            typeof this.config.onError == "function" && this.config.onError(a instanceof Error ? a : new Error(String(a)), this.api.state, this.api), this._handleRenderError(a);
           }
         }) : this.config.hydrate(this.shadowRoot, this.stateObj, this.api);
-      } catch (i) {
-        typeof this.config.onError == "function" && this.config.onError(i instanceof Error ? i : new Error(String(i)), this.api.state, this.api), this._handleRenderError(i);
+      } catch (o) {
+        typeof this.config.onError == "function" && this.config.onError(o instanceof Error ? o : new Error(String(o)), this.api.state, this.api), this._handleRenderError(o);
       }
     }
     if (this.hasAttribute("data-hydrated") ? this.processRefs() : this.render(), !this._mountedCalled && typeof this.config.onMounted == "function")
       try {
         const s = this.config.onMounted(this.api.state, this.api);
-        S(s) ? s.catch((i) => {
-          typeof this.config.onError == "function" && this.config.onError(i, this.api.state, this.api), this._handleRenderError(i);
+        S(s) ? s.catch((o) => {
+          typeof this.config.onError == "function" && this.config.onError(o, this.api.state, this.api), this._handleRenderError(o);
         }).finally(() => {
           this._mountedCalled = !0;
         }) : this._mountedCalled = !0;
@@ -1143,23 +1140,23 @@ class J extends HTMLElement {
   }
   connectedCallback() {
     if (this.initializeConfig(), this.stateObj) {
-      for (const t of this.getAttributeNames())
-        if (t in this.stateObj) {
-          const e = typeof this.config?.state?.[t];
-          let n = this.getAttribute(t);
-          e === "number" ? n = Number(n) : e === "boolean" && (n = n === "true"), this.stateObj[t] = n === null ? void 0 : n;
+      for (const e of this.getAttributeNames())
+        if (e in this.stateObj) {
+          const t = typeof this.config?.state?.[e];
+          let n = this.getAttribute(e);
+          t === "number" ? n = Number(n) : t === "boolean" && (n = n === "true"), this.stateObj[e] = n === null ? void 0 : n;
         }
     }
     if (!this._mountedCalled && typeof this.config.onMounted == "function")
       try {
-        const t = this.config.onMounted(this.api.state, this.api);
-        S(t) ? t.catch((e) => {
-          typeof this.config.onError == "function" && this.config.onError(e, this.api.state, this.api), this._handleRenderError(e);
+        const e = this.config.onMounted(this.api.state, this.api);
+        S(e) ? e.catch((t) => {
+          typeof this.config.onError == "function" && this.config.onError(t, this.api.state, this.api), this._handleRenderError(t);
         }).finally(() => {
           this._mountedCalled = !0;
         }) : this._mountedCalled = !0;
-      } catch (t) {
-        typeof this.config.onError == "function" && this.config.onError(t, this.api.state, this.api), this._handleRenderError(t), this._mountedCalled = !0;
+      } catch (e) {
+        typeof this.config.onError == "function" && this.config.onError(e, this.api.state, this.api), this._handleRenderError(e), this._mountedCalled = !0;
       }
     typeof this.render == "function" && this.render();
   }
@@ -1167,20 +1164,20 @@ class J extends HTMLElement {
    * Lifecycle: called when element is removed from DOM.
    */
   disconnectedCallback() {
-    if (Object.entries(this._autoWiredHandlers).forEach(([t, e]) => {
-      e.forEach((n) => {
-        super.removeEventListener(t, n);
+    if (Object.entries(this._autoWiredHandlers).forEach(([e, t]) => {
+      t.forEach((n) => {
+        super.removeEventListener(e, n);
       });
-    }), this._autoWiredHandlers = {}, this.unsubscribes.forEach((t) => t()), this.unsubscribes = [], this._globalUnsubscribes.forEach((t) => t()), this._globalUnsubscribes = [], !this._unmountedCalled && typeof this.config.onUnmounted == "function")
+    }), this._autoWiredHandlers = {}, this.unsubscribes.forEach((e) => e()), this.unsubscribes = [], this._globalUnsubscribes.forEach((e) => e()), this._globalUnsubscribes = [], !this._unmountedCalled && typeof this.config.onUnmounted == "function")
       try {
-        const t = this.config.onUnmounted(this.api.state, this.api);
-        S(t) ? t.catch((e) => {
-          typeof this.config.onError == "function" && this.config.onError(e, this.api.state, this.api), this._handleRenderError(e);
+        const e = this.config.onUnmounted(this.api.state, this.api);
+        S(e) ? e.catch((t) => {
+          typeof this.config.onError == "function" && this.config.onError(t, this.api.state, this.api), this._handleRenderError(t);
         }).finally(() => {
           this._unmountedCalled = !0;
         }) : this._unmountedCalled = !0;
-      } catch (t) {
-        typeof this.config.onError == "function" && this.config.onError(t, this.api.state, this.api), this._handleRenderError(t), this._unmountedCalled = !0;
+      } catch (e) {
+        typeof this.config.onError == "function" && this.config.onError(e, this.api.state, this.api), this._handleRenderError(e), this._unmountedCalled = !0;
       }
     this._mountedCalled = !1, this._unmountedCalled = !1;
   }
@@ -1190,27 +1187,27 @@ class J extends HTMLElement {
   render() {
     this._hasError = !1, this.syncControlledInputsAndEvents(), setTimeout(() => this.attachControlledInputListeners(), 0);
     try {
-      _.forEach((e) => {
+      v.forEach((t) => {
         try {
-          e.onRender?.(this.stateObj, this.api);
+          t.onRender?.(this.stateObj, this.api);
         } catch (n) {
           this._handleRenderError(n);
         }
-      }), this.config.computed && Object.values(this.config.computed).forEach((e) => {
+      }), this.config.computed && Object.values(this.config.computed).forEach((t) => {
         try {
-          e(this.stateObj);
+          t(this.stateObj);
         } catch (n) {
           this._handleRenderError(n);
         }
       });
-      const t = this.config.template(this.stateObj, this.api);
-      t instanceof Promise ? t.then((e) => {
-        this._hasError || (this._renderTemplateResult(e), this.syncStateToAttributes(), setTimeout(() => this.attachListItemModelListeners(), 0));
-      }).catch((e) => {
-        this._handleRenderError(e);
-      }) : this._hasError || (this._renderTemplateResult(t), this.syncStateToAttributes(), setTimeout(() => this.attachListItemModelListeners(), 0));
-    } catch (t) {
-      this._handleRenderError(t), this.renderError(t instanceof Error ? t : new Error(String(t)));
+      const e = this.config.template(this.stateObj, this.api);
+      e instanceof Promise ? e.then((t) => {
+        this._hasError || (this._renderTemplateResult(t), this.syncStateToAttributes(), setTimeout(() => this.attachListItemModelListeners(), 0));
+      }).catch((t) => {
+        this._handleRenderError(t);
+      }) : this._hasError || (this._renderTemplateResult(e), this.syncStateToAttributes(), setTimeout(() => this.attachListItemModelListeners(), 0));
+    } catch (e) {
+      this._handleRenderError(e), this.renderError(e instanceof Error ? e : new Error(String(e)));
     }
   }
   /**
@@ -1222,16 +1219,16 @@ class J extends HTMLElement {
    */
   rebindEventListeners() {
     if (!this.shadowRoot) return;
-    ["data-on-input", "data-on-change", "data-on-blur", "data-on-click"].forEach((e) => {
-      this.shadowRoot.querySelectorAll(`[${e}]`).forEach((n) => {
-        const a = e.replace("data-on-", ""), o = n.getAttribute(e);
-        if (!o || typeof this.config[o] != "function") return;
-        n._boundHandlers && n._boundHandlers[a] && n.removeEventListener(a, n._boundHandlers[a]);
-        const s = this.config[o], i = (l) => s.call(this, l);
-        n.addEventListener(a, i), n._boundHandlers || (n._boundHandlers = {}), n._boundHandlers[a] = i;
+    ["data-on-input", "data-on-change", "data-on-blur", "data-on-click"].forEach((t) => {
+      this.shadowRoot.querySelectorAll(`[${t}]`).forEach((n) => {
+        const r = t.replace("data-on-", ""), i = n.getAttribute(t);
+        if (!i || typeof this.config[i] != "function") return;
+        n._boundHandlers && n._boundHandlers[r] && n.removeEventListener(r, n._boundHandlers[r]);
+        const s = this.config[i], o = (a) => s.call(this, a);
+        n.addEventListener(r, o), n._boundHandlers || (n._boundHandlers = {}), n._boundHandlers[r] = o;
       });
-    }), Array.from(this.shadowRoot.children).forEach((e) => {
-      e instanceof HTMLElement && typeof e.rebindEventListeners == "function" && e.rebindEventListeners();
+    }), Array.from(this.shadowRoot.children).forEach((t) => {
+      t instanceof HTMLElement && typeof t.rebindEventListeners == "function" && t.rebindEventListeners();
     });
   }
   /**
@@ -1239,66 +1236,65 @@ class J extends HTMLElement {
    * Handles VDOM patching, style updates, refs, and event binding.
    * @param templateResult - HTML string or compiled template
    */
-  _renderTemplateResult(t) {
+  _renderTemplateResult(e) {
     if (!this._hasError)
       try {
-        let e = function(n) {
-          const a = /* @__PURE__ */ new WeakSet();
-          function o(s) {
-            if (s === null || typeof s != "object") return s;
-            if (a.has(s)) return;
-            if (a.add(s), Array.isArray(s)) return s.map(o);
-            const i = {};
-            for (const l in s)
-              Object.prototype.hasOwnProperty.call(s, l) && (i[l] = o(s[l]));
-            return i;
+        let t = function(n) {
+          const r = /* @__PURE__ */ new WeakSet();
+          function i(s) {
+            if (s === null || typeof s != "object" || r.has(s)) return s;
+            if (r.add(s), Array.isArray(s)) return s.map(i);
+            const o = {};
+            for (const a in s)
+              Object.prototype.hasOwnProperty.call(s, a) && (o[a] = i(s[a]));
+            return o;
           }
-          return o(n);
+          return i(n);
         };
-        if (typeof t == "string") {
+        if (typeof e == "string") {
           let n = function(c) {
-            return c.replace(/<([a-zA-Z0-9]+)([^>]*)>/g, (d, u, f) => {
-              const h = f.replace(/\s+on[a-zA-Z]+\s*=\s*(['"][^'"]*['"]|[^\s>]*)/gi, "");
-              return `<${u}${h}>`;
+            return c.replace(/<([a-zA-Z0-9]+)([^>]*)>/g, (l, d, f) => {
+              const u = f.replace(/\s+on[a-zA-Z]+\s*=\s*(['"][^'"]*['"]|[^\s>]*)/gi, "");
+              return `<${d}${u}>`;
             });
-          }, a = function(c) {
-            c.children.forEach(a);
+          }, r = function(c) {
+            c.children.forEach(r);
           };
-          const o = n(t), s = Y(o);
-          a(s);
-          const i = this.shadowRoot;
-          if (!i)
+          const i = n(e), s = J(i);
+          r(s);
+          const o = this.shadowRoot;
+          if (!o)
             return;
-          let l = i.querySelector("style");
-          if (l || (l = document.createElement("style"), i.appendChild(l)), this.config.style ? l.textContent = typeof this.config.style == "function" ? this.config.style(this.stateObj) : this.config.style : l.textContent = "", s.type === "#fragment") {
-            const c = Array.from(i.childNodes).find(
-              (d) => d.nodeType === 1 && d !== l
+          let a = o.querySelector("style");
+          if (a || (a = document.createElement("style"), o.appendChild(a)), this.config.style ? a.textContent = typeof this.config.style == "function" ? this.config.style(this.stateObj) : this.config.style : a.textContent = "", s.type === "#fragment") {
+            const c = Array.from(o.childNodes).find(
+              (l) => l.nodeType === 1 && l !== a
             );
             if (c) {
               Array.from(c.childNodes).forEach((f) => {
                 f.nodeType === 1 && f.nodeName === "STYLE" || c.removeChild(f);
               });
-              const d = {
+              const l = {
                 type: "#fragment",
                 dom: c,
                 children: s.children,
                 props: {},
                 key: void 0
-              }, u = this._prevVNode && this._prevVNode.type === "#fragment" ? { ...this._prevVNode, dom: c } : d;
-              L(c, u, d);
+              }, d = this._prevVNode && this._prevVNode.type === "#fragment" ? { ...this._prevVNode, dom: c } : l;
+              L(c, d, l);
             } else
-              s.children.forEach((d) => {
-                const u = g(d);
-                u && i.appendChild(u), d.dom = u ?? void 0;
+              s.children.forEach((l) => {
+                const d = g(l);
+                d && o.appendChild(d), l.dom = d ?? void 0;
               });
           } else {
             let c = Array.from(this.shadowRoot.childNodes).find(
-              (d) => d !== l && d.nodeType === 1
+              (l) => l !== a && l.nodeType === 1
             );
             if (c)
               if (this._prevVNode && (this._prevVNode.type !== s.type || this._prevVNode.key !== s.key)) {
-                const d = g(s);
-                d && (this.shadowRoot.contains(c) && this.shadowRoot.replaceChild(d, c), c = d);
+                const l = g(s);
+                l && (this.shadowRoot.contains(c) && this.shadowRoot.replaceChild(l, c), c = l);
               } else
                 L(c, this._prevVNode, s);
             else
@@ -1307,27 +1303,27 @@ class J extends HTMLElement {
           }
           this._prevVNode = s, this.forceSyncControlledInputs(), this.lastCompiledTemplate = null;
         } else {
-          const n = !this.shadowRoot.firstElementChild, a = this.lastCompiledTemplate?.id === t.id;
+          const n = !this.shadowRoot.firstElementChild, r = this.lastCompiledTemplate?.id === e.id;
           if (n) {
-            const o = j(t, this.stateObj, this.api);
-            this.shadowRoot.appendChild(o);
-          } else if (a && this.shadowRoot.firstElementChild) {
-            const o = this.lastState;
-            X(t, this.shadowRoot.firstElementChild, this.stateObj, this.api, o || void 0);
+            const i = j(e, this.stateObj, this.api);
+            this.shadowRoot.appendChild(i);
+          } else if (r && this.shadowRoot.firstElementChild) {
+            const i = this.lastState;
+            V(e, this.shadowRoot.firstElementChild, this.stateObj, this.api, i || void 0);
           } else {
-            const o = j(t, this.stateObj, this.api);
+            const i = j(e, this.stateObj, this.api);
             let s = this.shadowRoot.querySelector("style");
             s || (s = document.createElement("style"), this.shadowRoot.insertBefore(s, this.shadowRoot.firstChild)), this.config.style ? s.textContent = typeof this.config.style == "function" ? this.config.style(this.stateObj) : this.config.style : s.textContent = "";
-            let i = this.shadowRoot.querySelector("[data-root]");
-            for (i || (i = document.createElement("div"), i.setAttribute("data-root", ""), this.shadowRoot.appendChild(i)); i.firstChild; )
-              i.removeChild(i.firstChild);
-            i.appendChild(o);
+            let o = this.shadowRoot.querySelector("[data-root]");
+            for (o || (o = document.createElement("div"), o.setAttribute("data-root", ""), this.shadowRoot.appendChild(o)); o.firstChild; )
+              o.removeChild(o.firstChild);
+            o.appendChild(i);
           }
-          this.lastCompiledTemplate = t;
+          this.lastCompiledTemplate = e;
         }
-        this.lastState = e(this.stateObj), this.updateStyle(), this.processRefs(), this.bindEvents(), this.syncControlledInputsAndEvents();
-      } catch (e) {
-        this._handleRenderError(e);
+        this.lastState = t(this.stateObj), this.updateStyle(), this.processRefs(), this.bindEvents(), this.syncControlledInputsAndEvents();
+      } catch (t) {
+        this._handleRenderError(t);
       }
   }
   /**
@@ -1335,14 +1331,14 @@ class J extends HTMLElement {
    * Logs details and allows fallback UI.
    * @param error - Error object
    */
-  _handleRenderError(t) {
-    if (this._hasError = !0, this.config.debug && console.error(`[runtime] Render error in <${this.tagName.toLowerCase()}>:`, t), _.forEach((e) => e.onError?.(t instanceof Error ? t : new Error(String(t)), this.stateObj, this.api)), "onError" in this.config && typeof this.config.onError == "function")
+  _handleRenderError(e) {
+    if (this._hasError = !0, this.config.debug && console.error(`[runtime] Render error in <${this.tagName.toLowerCase()}>:`, e), v.forEach((t) => t.onError?.(e instanceof Error ? e : new Error(String(e)), this.stateObj, this.api)), "onError" in this.config && typeof this.config.onError == "function")
       try {
-        this.config.onError(t instanceof Error ? t : new Error(String(t)), this.api.state, this.api);
-      } catch (e) {
-        this.config.debug && console.error("[runtime] Error in onError handler:", e);
+        this.config.onError(e instanceof Error ? e : new Error(String(e)), this.api.state, this.api);
+      } catch (t) {
+        this.config.debug && console.error("[runtime] Error in onError handler:", t);
       }
-    this.renderError(t instanceof Error ? t : new Error(String(t)));
+    this.renderError(e instanceof Error ? e : new Error(String(e)));
   }
   /**
    * Schedule a render using requestAnimationFrame, batching multiple state changes.
@@ -1356,30 +1352,30 @@ class J extends HTMLElement {
    * Updates the style element in the shadow root based on the current state.
    */
   updateStyle() {
-    const t = this.shadowRoot.querySelector("style");
-    if (!t || !this.config.style) return;
-    const e = typeof this.config.style == "function" ? this.config.style(this.api.state) : this.config.style;
-    t.textContent = e;
+    const e = this.shadowRoot.querySelector("style");
+    if (!e || !this.config.style) return;
+    const t = typeof this.config.style == "function" ? this.config.style(this.api.state) : this.config.style;
+    e.textContent = t;
   }
   /**
    * Processes and attaches ref handlers for elements with data-ref attributes.
    */
   processRefs() {
     if (!this.config.refs) return;
-    const t = /* @__PURE__ */ new WeakMap();
-    Object.entries(this.config.refs).forEach(([e, n]) => {
-      const a = this.shadowRoot.querySelector(`[data-ref="${e}"]`);
-      if (a) {
-        t.has(a) || t.set(a, /* @__PURE__ */ new Set());
-        const o = t.get(a), s = a.addEventListener;
-        a.addEventListener = function(i, l, c) {
-          const d = `${i}`;
-          o.has(d) || (o.add(d), s.call(a, i, l, c));
-        }, a.setAttribute("data-refs-processed", "true");
+    const e = /* @__PURE__ */ new WeakMap();
+    Object.entries(this.config.refs).forEach(([t, n]) => {
+      const r = this.shadowRoot.querySelector(`[data-ref="${t}"]`);
+      if (r) {
+        e.has(r) || e.set(r, /* @__PURE__ */ new Set());
+        const i = e.get(r), s = r.addEventListener;
+        r.addEventListener = function(o, a, c) {
+          const l = `${o}`;
+          i.has(l) || (i.add(l), s.call(r, o, a, c));
+        }, r.setAttribute("data-refs-processed", "true");
         try {
-          n(a, this.api.state, this.api);
-        } catch (i) {
-          this._handleRenderError(i);
+          n(r, this.api.state, this.api);
+        } catch (o) {
+          this._handleRenderError(o);
         }
       }
     });
@@ -1390,43 +1386,42 @@ class J extends HTMLElement {
    */
   bindEvents() {
     if (!this.shadowRoot) return;
-    const t = document.createTreeWalker(this.shadowRoot, NodeFilter.SHOW_ELEMENT);
-    let e = t.nextNode();
-    for (; e; ) {
-      const n = e;
-      Array.from(n.attributes).forEach((a) => {
-        if (a.name.startsWith("data-on-")) {
-          const o = a.name.slice(8), s = a.value, i = this.config[s];
-          if (typeof i == "function") {
-            n._boundHandlers && n._boundHandlers[o] && n.removeEventListener(o, n._boundHandlers[o]);
-            const l = (c) => {
-              i.call(this.config, c, this.api.state, this.api), this.syncControlledInputsAndEvents();
+    const e = document.createTreeWalker(this.shadowRoot, NodeFilter.SHOW_ELEMENT);
+    let t = e.nextNode();
+    for (; t; ) {
+      const n = t;
+      Array.from(n.attributes).forEach((r) => {
+        if (r.name.startsWith("data-on-")) {
+          const i = r.name.slice(8), s = r.value, o = this.config[s];
+          if (typeof o == "function") {
+            n._boundHandlers && n._boundHandlers[i] && n.removeEventListener(i, n._boundHandlers[i]);
+            const a = (c) => {
+              o.call(this.config, c, this.api.state, this.api), this.syncControlledInputsAndEvents();
             };
-            n.addEventListener(o, l), n._boundHandlers || (n._boundHandlers = {}), n._boundHandlers[o] = l;
+            n.addEventListener(i, a), n._boundHandlers || (n._boundHandlers = {}), n._boundHandlers[i] = a;
           } else
-            this.config.debug && console.warn(`[runtime] Handler '${s}' not found on config for event '${o}'`, n);
+            this.config.debug && console.warn(`[runtime] Handler '${s}' not found on config for event '${i}'`, n);
         }
-      }), e = t.nextNode();
+      }), t = e.nextNode();
     }
   }
   /**
    * Renders a fallback error UI in the shadow root.
    * @param error - Error object
    */
-  renderError(t) {
-    const e = this.config.style ? typeof this.config.style == "function" ? this.config.style(this.api.state) : this.config.style : "";
+  renderError(e) {
+    const t = this.config.style ? typeof this.config.style == "function" ? this.config.style(this.api.state) : this.config.style : "";
     this.shadowRoot.innerHTML = `
-      <style>${e}</style>
-      <div style="color: red; border: 1px solid red; padding: 1rem; border-radius: 4px;">
-        <h3>Error Boundary</h3>
-        <div>Error: ${t.message}</div>
-      </div>
-    `;
-  }
-}
-function ft(r, t) {
-  const e = b(t), n = b(t.state);
-  if (t = e, t.state = n, t.debug && console.log(`[runtime] Debugging component: ${r}`, t), !r || !t.template || !t.state) {
+        <style>${t}</style>
+        <div style="color: red; border: 1px solid red; padding: 1rem; border-radius: 4px;">
+          <h3>Error Boundary</h3>
+          <div>Error: ${e.message}</div>
+        </div>
+      `;
+  }
+});
+function ft(e, t) {
+  if (t = _(t), t.debug && console.log(`[runtime] Debugging component: ${e}`, t), !e || !t.template || !t.state) {
     t && typeof t.onError == "function" && t.onError(new Error("Component requires tag, template, and state"), t.state, {
       state: t.state,
       emit: () => {
@@ -1437,12 +1432,12 @@ function ft(r, t) {
       },
       emitGlobal: () => {
       }
-    }), t && t.debug && console.error("[runtime] Malformed config:", { tag: r, config: t });
+    }), t && t.debug && console.error("[runtime] Malformed config:", { tag: e, config: t });
     return;
   }
-  if (_.forEach((c) => {
+  if (v.forEach((l) => {
     try {
-      c.onInit?.(t);
+      l.onInit?.(t);
     } catch (d) {
       t && typeof t.onError == "function" && t.onError(d instanceof Error ? d : new Error(String(d)), t.state, {
         state: t.state,
@@ -1456,28 +1451,32 @@ function ft(r, t) {
         }
       }), t && t.debug && console.error("[runtime] Plugin onInit error:", d);
     }
-  }), (typeof window < "u" && window.VITE_DEV_HMR || typeof import.meta < "u" && void 0) && customElements.get(r))
+  }), (typeof window < "u" && window.VITE_DEV_HMR || typeof import.meta < "u" && void 0) && customElements.get(e))
     try {
-      document.querySelectorAll(r).forEach((c) => c.remove()), window.customElements._definitions && delete window.customElements._definitions[r];
+      document.querySelectorAll(e).forEach((l) => l.remove()), window.customElements._definitions && delete window.customElements._definitions[e];
     } catch {
     }
-  if (customElements.get(r)) {
-    t.debug && console.warn(`[runtime] Component "${r}" already registered`);
+  if (customElements.get(e)) {
+    t.debug && console.warn(`[runtime] Component "${e}" already registered`);
     return;
   }
   const s = M(t.state, t.computed);
   t.state = s, t._subscribe = s.subscribe;
-  const i = Object.keys(t.state).filter(
-    (c) => ["string", "number", "boolean"].includes(typeof t.state[c])
-  ), l = class extends J {
+  const o = Object.keys(t.state).filter(
+    (l) => ["string", "number", "boolean"].includes(typeof t.state[l])
+  );
+  class a extends P {
     static get observedAttributes() {
-      return i;
+      return o;
     }
     constructor() {
       super();
     }
-  };
-  customElements.get(r) || (window.__componentRegistry = window.__componentRegistry || {}, window.__componentRegistry[r] = t, customElements.define(r, l));
+  }
+  const c = a;
+  typeof customElements < "u" && !customElements.get(e) && (window.__componentRegistry = window.__componentRegistry || {}, window.__componentRegistry[e] = t, customElements.define(e, c)), (void 0).accept(() => {
+    customElements.get(e) || customElements.define(e, c);
+  });
 }
 export {
   Q as Store,
@@ -1487,7 +1486,7 @@ export {
   ft as component,
   k as createVNodeFromElement,
   st as css,
-  b as deepSanitizeObject,
+  _ as deepSanitizeObject,
   C as eventBus,
   et as generateHydrationScript,
   x as getVNodeKey,
@@ -1495,17 +1494,17 @@ export {
   S as isPromise,
   g as mountVNode,
   ot as on,
-  Y as parseVNodeFromHTML,
+  J as parseVNodeFromHTML,
   L as patchVNode,
   it as ref,
   j as renderCompiledTemplate,
   tt as renderComponentsToString,
-  W as renderToString,
-  _ as runtimePlugins,
+  F as renderToString,
+  v as runtimePlugins,
   D as safeReplaceChild,
   ct as styles,
-  X as updateCompiledTemplate,
-  G as useDataModel,
+  V as updateCompiledTemplate,
+  U as useDataModel,
   dt as useRuntimePlugin
 };
 //# sourceMappingURL=custom-elements-runtime.es.js.map