@jasonshimmy/custom-elements-runtime 0.0.2 → 0.0.3-beta.0

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

@@ -3,7 +3,7 @@ class Q {
   listeners = [];
   constructor(t) {
     this.state = new Proxy(t, {
-      set: (n, r, i) => (n[r] = i, this.notify(), !0)
+      set: (n, r, o) => (n[r] = o, this.notify(), !0)
     });
   }
   subscribe(t) {
@@ -33,10 +33,10 @@ class y extends EventTarget {
    * @param data - Optional event payload
    */
   emit(t, n) {
-    const r = Date.now(), i = this.eventCounters.get(t);
-    if (!i || r - i.window > 1e3)
+    const r = Date.now(), o = this.eventCounters.get(t);
+    if (!o || r - o.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)) {
+    else if (o.count++, o.count > 50 && (console.error(`Event storm detected for "${t}": ${o.count} events in 1 second. Throttling...`), o.count > 100)) {
       console.warn(`Blocking further "${t}" events to prevent infinite loop`);
       return;
     }
@@ -47,9 +47,9 @@ class y extends EventTarget {
       cancelable: !0
     }));
     const s = this.handlers[t];
-    s && s.forEach((o) => {
+    s && s.forEach((i) => {
       try {
-        o(n);
+        i(n);
       } catch (a) {
         console.error(`Error in global event handler for "${t}":`, a);
       }
@@ -95,8 +95,8 @@ class y extends EventTarget {
    */
   once(t, n) {
     return new Promise((r) => {
-      const i = this.on(t, (s) => {
-        i(), n(s), r(s);
+      const o = this.on(t, (s) => {
+        o(), n(s), r(s);
       });
     });
   }
@@ -158,10 +158,10 @@ function W(e) {
 function F(e, t = {}) {
   q || console.warn("[SSR] renderToString should only be used on the server");
   try {
-    const n = e.state, r = W(n), i = e.template(n, r);
+    const n = e.state, r = W(n), o = 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}>`;
+    const i = t.sanitizeAttributes ? t.sanitizeAttributes(e.attrs || {}) : e.attrs || {}, a = Object.entries(i).map(([d, f]) => `${H(d)}="${H(f)}"`).join(" "), l = `${a ? `<${e.tag} ${a}>` : `<${e.tag}>`}${s}${o}</${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}>`;
@@ -172,18 +172,18 @@ function tt(e, t = {}) {
     components: /* @__PURE__ */ new Map(),
     styles: /* @__PURE__ */ new Set()
   }, 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;
+  e.forEach((i) => {
+    if (n.components.set(i.tag, i), i.style) {
+      const c = typeof i.style == "function" ? i.style(i.state) : i.style;
       n.styles.add(c);
     }
-    const a = F(o, { ...t, includeStyles: !1 });
+    const a = F(i, { ...t, includeStyles: !1 });
     r.push(a);
   });
-  const i = Array.from(n.styles).join(`
+  const o = Array.from(n.styles).join(`
 `);
   return { html: r.join(`
-`), styles: i, context: n };
+`), styles: o, context: n };
 }
 function et(e) {
   const t = Array.from(e.components.entries()).map(([n, r]) => ({
@@ -243,8 +243,8 @@ function w(e, t) {
     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])
+          for (const o in r)
+            if (typeof r[o] == "string" && e === r[o])
               return $(e);
         }
     }
@@ -252,33 +252,33 @@ function w(e, t) {
   return String(e);
 }
 function nt(e, ...t) {
-  function n(r, i, s) {
+  function n(r, o, 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("");
+      const i = r.map((a) => n(a, o, s));
+      return i.some((a) => a instanceof Promise) ? Promise.all(i).then((a) => a.join("")) : i.join("");
     }
     if (typeof r == "function") {
-      const o = n(r(i, s), i, s);
-      return o instanceof Promise, o;
+      const i = n(r(o, s), o, s);
+      return i instanceof Promise, i;
     }
     return r == null ? "" : r instanceof Promise ? r : String(r);
   }
-  return (r, i) => {
-    let s = "", o = !1;
+  return (r, o) => {
+    let s = "", i = !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;
+        l = n(l, r, o), l instanceof Promise ? (i = !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 o ? Promise.all(a).then((c) => {
+    return i ? 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;
+          u = n(u, r, o), 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 l;
     }) : s;
@@ -286,20 +286,20 @@ function nt(e, ...t) {
 }
 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);
+  function r(s, i, a) {
+    return Array.isArray(s) ? s.map((c) => r(c, i, a)).join("") : typeof s == "function" ? r(s(i, a), i, a) : s == null ? "" : String(s);
   }
-  const i = (s, o) => {
+  const o = (s, i) => {
     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 ?? "";
+        l = r(l, s, i), /=\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 a;
   };
-  return i.id = n, i;
+  return o.id = n, o;
 }
 function st(e, ...t) {
   let n = "";
@@ -314,7 +314,7 @@ function ot(e) {
   return Object.entries(e).map(([t, n]) => `${t}: ${n}`).join("; ");
 }
 function U(e, t, n) {
-  const [r, ...i] = n.split("|").map((a) => a.trim());
+  const [r, ...o] = n.split("|").map((a) => a.trim());
   if (!r || r === "__proto__" || r === "constructor" || r === "prototype") return;
   function s(a, c, l) {
     const d = c.split(".");
@@ -323,7 +323,7 @@ function U(e, t, n) {
       d[u] in f || (f[d[u]] = {}), f = f[d[u]];
     f[d[d.length - 1]] = l;
   }
-  const o = (a) => {
+  const i = (a) => {
     let c;
     if (e instanceof HTMLInputElement && e.type === "checkbox") {
       c = e.value;
@@ -341,7 +341,7 @@ function U(e, t, n) {
         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));
+    })) : (c = e.value, e instanceof HTMLInputElement && e.type === "number" && (c = Number(c)), o.includes("trim") && typeof c == "string" && (c = c.trim()), o.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); )
@@ -350,7 +350,7 @@ function U(e, t, n) {
     }
     a.type === "blur" && (e._isDirty = !1);
   };
-  e.addEventListener("input", o), e.addEventListener("change", o), e.addEventListener("keydown", o), e.addEventListener("blur", o);
+  e.addEventListener("input", i), e.addEventListener("change", i), e.addEventListener("keydown", i), e.addEventListener("blur", i);
 }
 const R = (() => {
   try {
@@ -361,35 +361,35 @@ const R = (() => {
   return typeof window < "u" ? window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" : !1;
 })();
 function at(e, t = {}) {
-  const { development: n = R, cache: r = !0, optimize: i = !0 } = t, s = N(e);
+  const { development: n = R, cache: r = !0, optimize: o = !0 } = t, s = N(e);
   if (r && T.has(s)) {
     if (n) {
-      const o = E.get(s) || {
+      const i = E.get(s) || {
         compilationTime: 0,
         renderTime: 0,
         updateTime: 0,
         cacheHits: 0,
         cacheMisses: 0
       };
-      o.cacheHits++, E.set(s, o);
+      i.cacheHits++, E.set(s, i);
     }
     return T.get(s);
   }
   if (n) {
-    const o = E.get(s) || {
+    const i = E.get(s) || {
       compilationTime: 0,
       renderTime: 0,
       updateTime: 0,
       cacheHits: 0,
       cacheMisses: 0
     };
-    o.cacheMisses++, E.set(s, o);
+    i.cacheMisses++, E.set(s, i);
   }
   try {
-    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)), {
+    const i = B(e, { development: n, optimize: o });
+    return r && T.set(s, i), i;
+  } catch (i) {
+    return n && (console.error("[Template Compiler] Error compiling template:", i), console.error("[Template Compiler] Template:", e)), {
       statics: [e],
       dynamics: [],
       fragment: null,
@@ -437,14 +437,14 @@ class X {
   }
   compile() {
     this.parseTemplate();
-    const t = this.createStaticFragment(), n = N(this.template), r = (i, s) => {
-      let o = "";
+    const t = this.createStaticFragment(), n = N(this.template), r = (o, s) => {
+      let i = "";
       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 (i += this.statics[a], a < this.dynamics.length) {
+          let c = this.dynamics[a].getValue(o, s);
           if (c instanceof Promise)
             return Promise.all(this.dynamics.map((l) => {
-              const d = l.getValue(i, s);
+              const d = l.getValue(o, s);
               return d instanceof Promise ? d : Promise.resolve(d);
             })).then((l) => {
               let d = "";
@@ -452,9 +452,9 @@ class X {
                 d += this.statics[f], f < l.length && (d += l[f]);
               return d;
             });
-          o += c;
+          i += c;
         }
-      return o;
+      return i;
     };
     return {
       statics: this.statics,
@@ -471,7 +471,7 @@ class X {
     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;
+      let i = s.match(/([a-zA-Z0-9_-]+)\s*=\s*"?$/), a = i ? i[1] : void 0, c;
       if (s.endsWith('style="color:'))
         a = "style", c = "color";
       else if (a === "style") {
@@ -481,34 +481,34 @@ class X {
       const l = r[1].trim();
       this.analyzeDynamicExpression(l, this.dynamics.length, a, c), n = r.index + r[0].length;
     }
-    const i = this.template.slice(n);
-    this.statics.push(i);
+    const o = this.template.slice(n);
+    this.statics.push(o);
   }
-  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");
+  analyzeDynamicExpression(t, n, r, o) {
+    let s = "text", i;
+    r ? r === "class" ? (s = "class", i = "class") : r === "style" ? (s = "style", i = o || "style") : r === "value" ? (s = "property", i = "value") : (s = "attribute", i = r) : t.includes("class.") ? (s = "class", i = t.split(".")[1]) : t.includes("style.") ? (s = "style", i = t.split(".")[1]) : t.includes("@") ? (s = "event", i = t.split("@")[1]) : t === "class" ? (s = "class", i = "class") : t === "style" ? (s = "style", i = "style") : t === "value" ? (s = "property", i = "value") : t === "title" && (s = "attribute", i = "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,
+      target: i,
       getValue: this.createValueGetter(t)
     });
   }
   createValueGetter(t) {
     return (n, r) => {
       try {
-        let i;
+        let o;
         if (t && typeof t == "function")
-          i = t(n);
+          o = t(n);
         else if (typeof t == "string" && t.startsWith("state.")) {
           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), "";
+          o = n[s];
+        } else typeof t == "string" && /^[a-zA-Z0-9_$]+$/.test(t) ? o = n[t] : (typeof t == "string" && t.includes("("), o = "");
+        return o;
+      } catch (o) {
+        return this.options.development && console.warn(`[Template Compiler] Error evaluating expression: ${t}`, o), "";
       }
     };
   }
@@ -519,10 +519,10 @@ class X {
       const t = this.statics.join("");
       if (!t.trim())
         return null;
-      const r = new DOMParser().parseFromString(t, "text/html"), i = document.createDocumentFragment();
+      const r = new DOMParser().parseFromString(t, "text/html"), o = document.createDocumentFragment();
       for (; r.body.firstChild; )
-        i.appendChild(r.body.firstChild);
-      return i;
+        o.appendChild(r.body.firstChild);
+      return o;
     } catch (t) {
       return this.options.development && console.warn("[Template Compiler] Could not create static fragment:", t), null;
     }
@@ -534,10 +534,10 @@ function O(e, t) {
       return e;
     let n = e;
     for (let r = 0; r < t.length; r++) {
-      const i = t[r];
-      if (!n.childNodes || n.childNodes.length <= i)
+      const o = t[r];
+      if (!n.childNodes || n.childNodes.length <= o)
         return null;
-      n = n.childNodes[i];
+      n = n.childNodes[o];
     }
     return n;
   } catch {
@@ -548,16 +548,16 @@ function j(e, t, n) {
   let r;
   return e.fragment && !e.hasDynamics ? r = e.fragment.cloneNode(!0) : r = Y(e, t, n), r;
 }
-function V(e, t, n, r, i) {
+function V(e, t, n, r, o) {
   if (e.hasDynamics)
     for (const s of e.dynamics)
       try {
-        const o = s.getValue(n, r);
-        if (i !== void 0 && s.getValue(i, r) === o)
+        const i = s.getValue(n, r);
+        if (o !== void 0 && s.getValue(o, r) === i)
           continue;
-        I(t, s, o);
-      } catch (o) {
-        console.warn("[Template Compiler] Error applying update:", o);
+        I(t, s, i);
+      } catch (i) {
+        console.warn("[Template Compiler] Error applying update:", i);
       }
 }
 function Y(e, t, n) {
@@ -572,28 +572,28 @@ function Y(e, t, n) {
     }
   if (typeof document > "u")
     return new DocumentFragment();
-  const s = new DOMParser().parseFromString(r, "text/html"), o = document.createDocumentFragment();
+  const s = new DOMParser().parseFromString(r, "text/html"), i = document.createDocumentFragment();
   for (; s.body.firstChild; )
-    o.appendChild(s.body.firstChild);
+    i.appendChild(s.body.firstChild);
   for (const a of e.dynamics) {
-    const c = a.getValue(t, n), l = O(o, a.path);
+    const c = a.getValue(t, n), l = O(i, a.path);
     I(l, a, c);
   }
-  return o;
+  return i;
 }
 function I(e, t, n) {
   try {
     if (t.type === "text") {
-      const i = document.createTreeWalker(
+      const o = document.createTreeWalker(
         e,
         NodeFilter.SHOW_TEXT
       );
-      let s = !1, o;
-      for (; o = i.nextNode(); ) {
-        const c = o.textContent || "";
+      let s = !1, i;
+      for (; i = o.nextNode(); ) {
+        const c = i.textContent || "";
         if (c.includes("Count: ")) {
           const l = c.replace(/Count: \d+/, `Count: ${n}`);
-          o.textContent = l, s = !0;
+          i.textContent = l, s = !0;
         }
       }
       if (s) return;
@@ -607,8 +607,8 @@ function I(e, t, n) {
     switch (t.type) {
       case "attribute":
         if (r.nodeType === Node.ELEMENT_NODE && t.target) {
-          const i = r;
-          n == null || n === "" ? i.removeAttribute(t.target) : i.setAttribute(t.target, String(n));
+          const o = r;
+          n == null || n === "" ? o.removeAttribute(t.target) : o.setAttribute(t.target, String(n));
         }
         break;
       case "property":
@@ -616,14 +616,14 @@ function I(e, t, n) {
         break;
       case "class":
         if (r.nodeType === Node.ELEMENT_NODE && t.target) {
-          const i = r;
-          i.className = n == null ? "" : String(n), i.setAttribute("class", n == null ? "" : String(n));
+          const o = r;
+          o.className = n == null ? "" : String(n), o.setAttribute("class", n == null ? "" : String(n));
         }
         break;
       case "style":
         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}`);
+          const o = r;
+          o.style[t.target] = n == null ? "" : String(n), o.setAttribute("style", n == null ? `${t.target}:` : `${t.target}:${n}`);
         }
         break;
       default:
@@ -642,8 +642,8 @@ function N(e) {
   }
   return `tpl_${Math.abs(t).toString(36)}`;
 }
-function x(e, t, n, r, i) {
-  return r && i ? `${t}.${e}[${n}]:${r}:${i}` : r ? `${t}.${e}[${n}]:${r}` : `${t}.${e}[${n}]`;
+function x(e, t, n, r, o) {
+  return r && o ? `${t}.${e}[${n}]:${r}:${o}` : r ? `${t}.${e}[${n}]:${r}` : `${t}.${e}[${n}]`;
 }
 function D(e, t, n) {
   if (!(!e || !(e instanceof Element)) && e.contains(n) && n.parentNode === e)
@@ -685,7 +685,7 @@ function J(e) {
     type: "#fragment",
     key: void 0,
     props: {},
-    children: n.map((i, s) => k(i, "#fragment", s)),
+    children: n.map((o, s) => k(o, "#fragment", s)),
     dom: void 0
   };
 }
@@ -695,23 +695,23 @@ function k(e, t = "", n = 0) {
   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 = {};
+    const r = e, o = {};
     Array.from(r.attributes).forEach((l) => {
-      i[l.name] = l.value;
+      o[l.name] = l.value;
     });
     const s = r.tagName.toLowerCase();
-    let o;
+    let i;
     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);
+      i = `${s}:${l}:${d}`, o["data-uid"] = i, r.setAttribute("data-uid", i);
       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));
+      f && (o.value = f), u && (o.checked = u);
+    } else s === "input" || s === "textarea" || s === "select" || r.hasAttribute("contenteditable") ? (i = `${s}:${t}:${n}`, o["data-uid"] = i, r.setAttribute("data-uid", i)) : (i = x(s, t, n), s === "li" && (o["data-uid"] = i, r.setAttribute("data-uid", i)));
+    const a = Array.from(r.childNodes).map((l, d) => k(l, i, d));
     return {
       type: s,
-      key: o,
-      props: i,
+      key: i,
+      props: o,
       children: a,
       dom: r
     };
@@ -723,17 +723,17 @@ function L(e, t, n) {
   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";
+  const o = Array.isArray(t.children) ? t.children.filter(r) : [], s = Array.isArray(n.children) ? n.children.filter(r) : [], i = 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) {
+      if (D(e, c, t.dom), i && 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 (c instanceof Node)
       if (c) {
-        if (e.appendChild(c), n.dom = c, o && n.props && e.firstChild instanceof HTMLInputElement) {
+        if (e.appendChild(c), n.dom = c, i && 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");
         }
@@ -743,7 +743,7 @@ function L(e, t, n) {
       n.dom = void 0;
     return;
   }
-  if (o && t.dom instanceof HTMLElement && n.props) {
+  if (i && 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;
@@ -756,8 +756,8 @@ function L(e, t, n) {
         }
       else
         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);
+    for (let c = n.children.length; c < o.length; c++)
+      o[c] && o[c].dom && t.dom && t.dom.contains(o[c].dom) && t.dom.removeChild(o[c].dom);
     return;
   }
   const a = t.dom;
@@ -791,11 +791,11 @@ function L(e, t, n) {
   }
   if (a instanceof Element) {
     const c = /* @__PURE__ */ new Map();
-    i.forEach((u) => u.key && c.set(u.key, u));
+    o.forEach((u) => u.key && c.set(u.key, u));
     const l = new Set(s.map((u) => u.key));
     let d = [];
     for (let u = 0; u < s.length; u++) {
-      const h = s[u], m = h.key ? c.get(h.key) : i[u];
+      const h = s[u], m = h.key ? c.get(h.key) : o[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))
@@ -817,7 +817,7 @@ function L(e, t, n) {
       }
       h.dom = p, p && d.push(p);
     }
-    for (i.forEach((u) => {
+    for (o.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);
@@ -836,9 +836,9 @@ function L(e, t, n) {
   }
 }
 function M(e, t) {
-  const n = [], r = t ? Object.keys(t) : [], i = { ...e };
+  const n = [], r = t ? Object.keys(t) : [], o = { ...e };
   let s = null;
-  function o(d) {
+  function i(d) {
     return n.push(d), () => {
       const f = n.indexOf(d);
       f !== -1 && n.splice(f, 1);
@@ -852,7 +852,7 @@ function M(e, t) {
     if (c.has(d)) return c.get(d);
     const f = new Proxy(d, {
       get(u, h, m) {
-        if (h === "subscribe") return o;
+        if (h === "subscribe") return i;
         if (h === "set") return a;
         if (t && r.includes(h))
           return t[h](s);
@@ -874,7 +874,7 @@ function M(e, t) {
     });
     return c.set(d, f), f;
   }
-  return s = l(i), s;
+  return s = l(o), s;
 }
 const v = [];
 function ct(e) {
@@ -882,11 +882,11 @@ function ct(e) {
 }
 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));
+  if (t.add(e), Array.isArray(e)) return e.map((o) => _(o, 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));
+  for (const o of Object.keys(e))
+    n.includes(o) || (r[o] = _(e[o], t));
   return r;
 }
 function S(e) {
@@ -947,18 +947,18 @@ typeof HTMLElement < "u" && (P = class extends HTMLElement {
   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;
+      let o = n;
       if (n === null)
-        i = void 0;
+        o = void 0;
       else if (r === "number")
-        if (i === void 0 || i === "")
-          i = this.config?.state?.[e];
+        if (o === void 0 || o === "")
+          o = this.config?.state?.[e];
         else {
-          const s = Number(i);
-          i = isNaN(s) ? this.config?.state?.[e] : s;
+          const s = Number(o);
+          o = isNaN(s) ? this.config?.state?.[e] : s;
         }
-      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());
+      else r === "boolean" && (o = o === "true");
+      o = _(o), this.stateObj[e] !== o && (this.config?.debug && console.log("[runtime] state update:", { name: e, value: o }), this.stateObj[e] = o, this.render());
     }
   }
   /**
@@ -968,14 +968,14 @@ typeof HTMLElement < "u" && (P = class extends HTMLElement {
     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;
+      const n = e, r = String(this.stateObj[t]), o = document.activeElement === n;
       n._hasDirtyListener || (n.addEventListener("input", () => {
         n._isDirty = !0;
       }), n.addEventListener("blur", () => {
         n._isDirty = !1;
       }), n._hasDirtyListener = !0);
       const s = !!n._isDirty;
-      i || s || n.type !== "radio" && n.type !== "checkbox" && n.value !== r && (n.value = r);
+      o || s || n.type !== "radio" && n.type !== "checkbox" && n.value !== r && (n.value = r);
     }), this.rebindEventListeners());
   }
   /**
@@ -993,12 +993,12 @@ typeof HTMLElement < "u" && (P = class extends HTMLElement {
       if (!t || !this.stateObj || typeof this.stateObj[t] > "u") return;
       const n = e, r = String(this.stateObj[t]);
       if (n.type === "checkbox") {
-        const i = this.stateObj[t];
-        if (Array.isArray(i))
-          n.checked = i.includes(n.value);
+        const o = this.stateObj[t];
+        if (Array.isArray(o))
+          n.checked = o.includes(n.value);
         else {
-          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;
+          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;
         }
       } else n.type === "radio" || (n.value = r);
     }), this.shadowRoot.querySelectorAll("textarea[data-model]").forEach((e) => {
@@ -1019,17 +1019,17 @@ typeof HTMLElement < "u" && (P = class extends HTMLElement {
       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 [, 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 [, o, s, i] = n, a = parseInt(s, 10), c = this.stateObj[o];
+        e instanceof HTMLInputElement && e.type === "checkbox" && (e.checked = !!(Array.isArray(c) && c[a] && c[a][i]));
         const l = (d) => {
-          !Array.isArray(c) || !c[a] || (e instanceof HTMLInputElement && e.type === "checkbox" ? c[a][o] = e.checked : c[a][o] = e.value);
+          !Array.isArray(c) || !c[a] || (e instanceof HTMLInputElement && e.type === "checkbox" ? c[a][i] = e.checked : c[a][i] = e.value);
         };
         e.addEventListener("input", l), e.addEventListener("change", l), e._listItemModelListener = 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) : [];
+        const [, o, s, i] = r, a = this.stateObj[o], c = i ? i.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;
@@ -1053,8 +1053,8 @@ typeof HTMLElement < "u" && (P = class extends HTMLElement {
       if (!(!n || !(n in this.stateObj)))
         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;
+            const r = this.stateObj[n], o = t.getAttribute("data-true-value"), s = t.getAttribute("data-false-value");
+            Array.isArray(r) ? t.checked = r.includes(t.value) : o !== null || s !== null ? String(r) === o ? 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] ?? ""));
     }));
@@ -1087,20 +1087,20 @@ typeof HTMLElement < "u" && (P = class extends HTMLElement {
       this.scheduleRender();
     })), this.api = {
       state: this.stateObj,
-      emit: (s, o) => this.dispatchEvent(new CustomEvent(s, { detail: o, bubbles: !0 })),
-      onGlobal: (s, o) => {
-        const a = C.on(s, o);
+      emit: (s, i) => this.dispatchEvent(new CustomEvent(s, { detail: i, bubbles: !0 })),
+      onGlobal: (s, i) => {
+        const a = C.on(s, i);
         return this._globalUnsubscribes.push(a), a;
       },
-      offGlobal: (s, o) => C.off(s, o),
-      emitGlobal: (s, o) => C.emit(s, o)
+      offGlobal: (s, i) => C.off(s, i),
+      emitGlobal: (s, i) => C.emit(s, i)
     }, Object.keys(this.config).forEach((s) => {
       if (s.startsWith("on") && s.length > 2 && typeof this.config[s] == "function") {
-        const o = s.charAt(2).toLowerCase() + s.slice(3), a = (c) => {
+        const i = 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(o, a), this._autoWiredHandlers[o] || (this._autoWiredHandlers[o] = []), this._autoWiredHandlers[o].push(a);
+        this.addEventListener(i, a), this._autoWiredHandlers[i] || (this._autoWiredHandlers[i] = []), this._autoWiredHandlers[i].push(a);
       }
     }), this.attachShadow({ mode: "open" }), n.style) {
       const s = document.createElement("style");
@@ -1109,22 +1109,22 @@ typeof HTMLElement < "u" && (P = class extends HTMLElement {
     if (typeof this.config.hydrate == "function") {
       const s = this.shadowRoot?.querySelectorAll("[data-hydrate]");
       try {
-        s && s.length > 0 ? s.forEach((o) => {
+        s && s.length > 0 ? s.forEach((i) => {
           try {
-            this.config.hydrate(o, this.stateObj, this.api);
+            this.config.hydrate(i, 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 (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);
+      } 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);
       }
     }
     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((o) => {
-          typeof this.config.onError == "function" && this.config.onError(o, this.api.state, this.api), this._handleRenderError(o);
+        S(s) ? s.catch((i) => {
+          typeof this.config.onError == "function" && this.config.onError(i, this.api.state, this.api), this._handleRenderError(i);
         }).finally(() => {
           this._mountedCalled = !0;
         }) : this._mountedCalled = !0;
@@ -1215,11 +1215,11 @@ typeof HTMLElement < "u" && (P = class extends HTMLElement {
     if (!this.shadowRoot) return;
     ["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;
+        const r = t.replace("data-on-", ""), o = n.getAttribute(t);
+        if (!o || typeof this.config[o] != "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;
+        const s = this.config[o], i = (a) => s.call(this, a);
+        n.addEventListener(r, i), n._boundHandlers || (n._boundHandlers = {}), n._boundHandlers[r] = i;
       });
     }), Array.from(this.shadowRoot.children).forEach((t) => {
       t instanceof HTMLElement && typeof t.rebindEventListeners == "function" && t.rebindEventListeners();
@@ -1235,15 +1235,15 @@ typeof HTMLElement < "u" && (P = class extends HTMLElement {
       try {
         let t = function(n) {
           const r = /* @__PURE__ */ new WeakSet();
-          function i(s) {
+          function o(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 = {};
+            if (r.add(s), Array.isArray(s)) return s.map(o);
+            const i = {};
             for (const a in s)
-              Object.prototype.hasOwnProperty.call(s, a) && (o[a] = i(s[a]));
-            return o;
+              Object.prototype.hasOwnProperty.call(s, a) && (i[a] = o(s[a]));
+            return i;
           }
-          return i(n);
+          return o(n);
         };
         if (typeof e == "string") {
           let n = function(c) {
@@ -1254,14 +1254,14 @@ typeof HTMLElement < "u" && (P = class extends HTMLElement {
           }, r = function(c) {
             c.children.forEach(r);
           };
-          const i = n(e), s = J(i);
+          const o = n(e), s = J(o);
           r(s);
-          const o = this.shadowRoot;
-          if (!o)
+          const i = this.shadowRoot;
+          if (!i)
             return;
-          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(
+          let a = i.querySelector("style");
+          if (a || (a = document.createElement("style"), i.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(i.childNodes).find(
               (l) => l.nodeType === 1 && l !== a
             );
             if (c) {
@@ -1279,7 +1279,7 @@ typeof HTMLElement < "u" && (P = class extends HTMLElement {
             } else
               s.children.forEach((l) => {
                 const d = g(l);
-                d && o.appendChild(d), l.dom = d ?? void 0;
+                d && i.appendChild(d), l.dom = d ?? void 0;
               });
           } else {
             let c = Array.from(this.shadowRoot.childNodes).find(
@@ -1299,19 +1299,19 @@ typeof HTMLElement < "u" && (P = class extends HTMLElement {
         } else {
           const n = !this.shadowRoot.firstElementChild, r = this.lastCompiledTemplate?.id === e.id;
           if (n) {
-            const i = j(e, this.stateObj, this.api);
-            this.shadowRoot.appendChild(i);
+            const o = j(e, this.stateObj, this.api);
+            this.shadowRoot.appendChild(o);
           } else if (r && this.shadowRoot.firstElementChild) {
-            const i = this.lastState;
-            V(e, this.shadowRoot.firstElementChild, this.stateObj, this.api, i || void 0);
+            const o = this.lastState;
+            V(e, this.shadowRoot.firstElementChild, this.stateObj, this.api, o || void 0);
           } else {
-            const i = j(e, this.stateObj, this.api);
+            const o = 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 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);
+            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);
           }
           this.lastCompiledTemplate = e;
         }
@@ -1361,15 +1361,15 @@ typeof HTMLElement < "u" && (P = class extends HTMLElement {
       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));
+        const o = e.get(r), s = r.addEventListener;
+        r.addEventListener = function(i, a, c) {
+          const l = `${i}`;
+          o.has(l) || (o.add(l), s.call(r, i, a, c));
         }, r.setAttribute("data-refs-processed", "true");
         try {
           n(r, this.api.state, this.api);
-        } catch (o) {
-          this._handleRenderError(o);
+        } catch (i) {
+          this._handleRenderError(i);
         }
       }
     });
@@ -1386,15 +1386,15 @@ typeof HTMLElement < "u" && (P = class extends HTMLElement {
       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 o = r.name.slice(8), s = r.value, i = this.config[s];
+          if (typeof i == "function") {
+            n._boundHandlers && n._boundHandlers[o] && n.removeEventListener(o, n._boundHandlers[o]);
             const a = (c) => {
-              o.call(this.config, c, this.api.state, this.api), this.syncControlledInputsAndEvents();
+              i.call(this.config, c, this.api.state, this.api), this.syncControlledInputsAndEvents();
             };
-            n.addEventListener(i, a), n._boundHandlers || (n._boundHandlers = {}), n._boundHandlers[i] = a;
+            n.addEventListener(o, a), n._boundHandlers || (n._boundHandlers = {}), n._boundHandlers[o] = a;
           } else
-            this.config.debug && console.warn(`[runtime] Handler '${s}' not found on config for event '${i}'`, n);
+            this.config.debug && console.warn(`[runtime] Handler '${s}' not found on config for event '${o}'`, n);
         }
       }), t = e.nextNode();
     }
@@ -1415,9 +1415,9 @@ typeof HTMLElement < "u" && (P = class extends HTMLElement {
   }
 });
 function lt(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,
+  if (t = _(t), t.debug && console.log(`[runtime] Debugging component: ${e}`, t), !e || !t.template) {
+    t && typeof t.onError == "function" && t.onError(new Error("Component requires tag and template"), t.state ?? {}, {
+      state: t.state ?? {},
       emit: () => {
       },
       onGlobal: () => () => {
@@ -1429,11 +1429,11 @@ function lt(e, t) {
     }), t && t.debug && console.error("[runtime] Malformed config:", { tag: e, config: t });
     return;
   }
-  if (v.forEach((l) => {
+  if (v.forEach((d) => {
     try {
-      l.onInit?.(t);
-    } catch (d) {
-      t && typeof t.onError == "function" && t.onError(d instanceof Error ? d : new Error(String(d)), t.state, {
+      d.onInit?.(t);
+    } catch (f) {
+      t && typeof t.onError == "function" && t.onError(f instanceof Error ? f : new Error(String(f)), t.state, {
         state: t.state,
         emit: () => {
         },
@@ -1443,32 +1443,32 @@ function lt(e, t) {
         },
         emitGlobal: () => {
         }
-      }), t && t.debug && console.error("[runtime] Plugin onInit error:", d);
+      }), t && t.debug && console.error("[runtime] Plugin onInit error:", f);
     }
   }), (typeof window < "u" && window.VITE_DEV_HMR || typeof import.meta < "u" && void 0) && customElements.get(e))
     try {
-      document.querySelectorAll(e).forEach((l) => l.remove()), window.customElements._definitions && delete window.customElements._definitions[e];
+      document.querySelectorAll(e).forEach((d) => d.remove()), window.customElements._definitions && delete window.customElements._definitions[e];
     } catch {
     }
   if (customElements.get(e)) {
     t.debug && console.warn(`[runtime] Component "${e}" already registered`);
     return;
   }
-  const s = M(t.state, t.computed);
+  const s = M(t.state ?? {}, t.computed);
   t.state = s, t._subscribe = s.subscribe;
-  const o = Object.keys(t.state).filter(
-    (l) => ["string", "number", "boolean"].includes(typeof t.state[l])
+  const i = t.state ?? {}, a = Object.keys(i).filter(
+    (d) => ["string", "number", "boolean"].includes(typeof i[d])
   );
-  class a extends P {
+  class c extends P {
     static get observedAttributes() {
-      return o;
+      return a;
     }
     constructor() {
       super();
     }
   }
-  const c = a;
-  typeof customElements < "u" && !customElements.get(e) && (window.__componentRegistry = window.__componentRegistry || {}, window.__componentRegistry[e] = t, customElements.define(e, c));
+  const l = c;
+  typeof customElements < "u" && !customElements.get(e) && (window.__componentRegistry = window.__componentRegistry || {}, window.__componentRegistry[e] = t, customElements.define(e, l));
 }
 export {
   Q as Store,