@jasonshimmy/custom-elements-runtime 0.0.17 → 0.1.1

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

@@ -1,20 +1,20 @@
-function ze(e) {
+function Re(e) {
   let t = new Proxy(e, {
-    set: (o, c, d) => (o[c] = d, s(), !0)
+    set: (o, l, f) => (o[l] = f, s(), !0)
   });
-  const r = [];
-  function n(o) {
-    r.push(o), o(t);
+  const n = [];
+  function r(o) {
+    n.push(o), o(t);
   }
   function i() {
     return t;
   }
   function s() {
-    r.forEach((o) => o(t));
+    n.forEach((o) => o(t));
   }
-  return { subscribe: n, getState: i };
+  return { subscribe: r, getState: i };
 }
-class R extends EventTarget {
+class B extends EventTarget {
   handlers = {};
   static instance;
   eventCounters = /* @__PURE__ */ new Map();
@@ -22,7 +22,7 @@ class R extends EventTarget {
    * Returns the singleton instance of GlobalEventBus
    */
   static getInstance() {
-    return R.instance || (R.instance = new R()), R.instance;
+    return B.instance || (B.instance = new B()), B.instance;
   }
   // Enhanced emit method with better typing and event storm protection
   /**
@@ -30,16 +30,16 @@ class R extends EventTarget {
    * @param eventName - Name of the event
    * @param data - Optional event payload
    */
-  emit(t, r) {
-    const n = Date.now(), i = this.eventCounters.get(t);
-    if (!i || n - i.window > 1e3)
-      this.eventCounters.set(t, { count: 1, window: n });
+  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: r,
+      detail: n,
       bubbles: !1,
       // Global events don't need to bubble
       cancelable: !0
@@ -47,9 +47,9 @@ class R extends EventTarget {
     const s = this.handlers[t];
     s && s.forEach((o) => {
       try {
-        o(r);
-      } catch (c) {
-        console.error(`Error in global event handler for "${t}":`, c);
+        o(n);
+      } catch (l) {
+        console.error(`Error in global event handler for "${t}":`, l);
       }
     });
   }
@@ -58,17 +58,17 @@ class R extends EventTarget {
    * @param eventName - Name of the event
    * @param handler - Handler function
    */
-  on(t, r) {
-    return this.handlers[t] || (this.handlers[t] = /* @__PURE__ */ new Set()), this.handlers[t].add(r), () => this.off(t, r);
+  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, r) {
-    const n = this.handlers[t];
-    n && n.delete(r);
+  off(t, n) {
+    const r = this.handlers[t];
+    r && r.delete(n);
   }
   /**
    * Remove all handlers for a specific event.
@@ -83,18 +83,18 @@ class R extends EventTarget {
    * @param handler - CustomEvent handler
    * @param options - AddEventListener options
    */
-  listen(t, r, n) {
-    return this.addEventListener(t, r, n), () => this.removeEventListener(t, r);
+  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, r) {
-    return new Promise((n) => {
+  once(t, n) {
+    return new Promise((r) => {
       const i = this.on(t, (s) => {
-        i(), r(s), n(s);
+        i(), n(s), r(s);
       });
     });
   }
@@ -124,10 +124,10 @@ class R extends EventTarget {
    */
   getEventStats() {
     const t = {};
-    for (const [r, n] of this.eventCounters.entries())
-      t[r] = {
-        count: n.count,
-        handlersCount: this.getHandlerCount(r)
+    for (const [n, r] of this.eventCounters.entries())
+      t[n] = {
+        count: r.count,
+        handlersCount: this.getHandlerCount(n)
       };
     return t;
   }
@@ -138,127 +138,126 @@ class R extends EventTarget {
     this.eventCounters.clear();
   }
 }
-const Re = R.getInstance();
-function P(e, t = {}, r, n) {
-  const i = n ?? t.key;
-  return { tag: e, key: i, props: t, children: r };
+const Be = B.getInstance();
+function P(e, t = {}, n, r) {
+  const i = r ?? t.key;
+  return { tag: e, key: i, props: t, children: n };
 }
 function I(e) {
   return !!e && typeof e == "object" && (e.type === "AnchorBlock" || e.tag === "#anchor");
 }
-function z(e) {
+function R(e) {
   return typeof e == "object" && e !== null && "tag" in e && !I(e);
 }
 function le(e, t) {
   return e.key != null ? e : { ...e, key: t };
 }
-function ce(e, t = [], r = {}) {
-  const n = {}, i = {}, s = {}, o = /([:@#]?)([a-zA-Z0-9-:\.]+)=("([^"\\]*(\\.[^"\\]*)*)"|'([^'\\]*(\\.[^'\\]*)*)')/g;
-  let c;
-  for (; c = o.exec(e); ) {
-    const d = c[1], a = c[2], u = (c[4] || c[6]) ?? "", y = u.match(/^{{(\d+)}}$/);
-    let f = y ? t[Number(y[1])] ?? null : u;
-    if (y || (f === "true" ? f = !0 : f === "false" ? f = !1 : f === "null" ? f = null : isNaN(Number(f)) || (f = Number(f))), d === ":")
-      typeof f == "boolean" ? i[a] = f : f != null && (n[a] = f);
-    else if (d === "@") {
-      const w = "on" + a.charAt(0).toUpperCase() + a.slice(1);
-      n[w] = typeof f == "function" ? f : typeof r[f] == "function" ? r[f] : void 0;
-    } else if (d === "#") {
-      const [w, ...p] = a.split("."), S = [...p];
-      let g = f, l = [...S];
-      if (w === "model" && typeof g == "string" && g.includes(".")) {
-        const b = ["trim", "number", "lazy"], m = g.split(".");
-        let h = g;
-        const x = [];
-        for (let C = m.length - 1; C > 0 && b.includes(m[C]); C--)
-          x.unshift(m[C]), h = m.slice(0, C).join(".");
-        g = h, l.push(...x);
+function ce(e, t = [], n = {}) {
+  const r = {}, i = {}, s = {}, o = /([:@#]?)([a-zA-Z0-9-:\.]+)=("([^"\\]*(\\.[^"\\]*)*)"|'([^'\\]*(\\.[^'\\]*)*)')/g;
+  let l;
+  for (; l = o.exec(e); ) {
+    const f = l[1], u = l[2], p = (l[4] || l[6]) ?? "", d = p.match(/^{{(\d+)}}$/);
+    let c = d ? t[Number(d[1])] ?? null : p;
+    if (d || (c === "true" ? c = !0 : c === "false" ? c = !1 : c === "null" ? c = null : isNaN(Number(c)) || (c = Number(c))), f === ":")
+      typeof c == "boolean" ? i[u] = c : c != null && (r[u] = c);
+    else if (f === "@") {
+      const y = "on" + u.charAt(0).toUpperCase() + u.slice(1);
+      r[y] = typeof c == "function" ? c : typeof n[c] == "function" ? n[c] : void 0;
+    } else if (f === "#") {
+      const [y, ...h] = u.split("."), S = [...h];
+      let m = c, a = [...S];
+      if (y === "model" && typeof m == "string" && m.includes(".")) {
+        const b = ["trim", "number", "lazy"], g = m.split(".");
+        let x = m;
+        const w = [];
+        for (let k = g.length - 1; k > 0 && b.includes(g[k]); k--)
+          w.unshift(g[k]), x = g.slice(0, k).join(".");
+        m = x, a.push(...w);
       }
-      s[w] = {
-        value: g,
-        modifiers: l
+      s[y] = {
+        value: m,
+        modifiers: a
       };
-    } else
-      i[a] = f;
+    } else u === "ref" ? r.ref = c : i[u] = c;
   }
-  return { props: n, attrs: i, directives: s };
+  return { props: r, attrs: i, directives: s };
 }
-function fe(e, t, r) {
-  function n(l, b) {
-    return P("#text", {}, l, b);
+function fe(e, t, n) {
+  function r(a, b) {
+    return P("#text", {}, a, b);
   }
   let i = "";
-  for (let l = 0; l < e.length; l++)
-    i += e[l], l < t.length && (i += `{{${l}}}`);
+  for (let a = 0; a < e.length; a++)
+    i += e[a], a < t.length && (i += `{{${a}}}`);
   const s = /<\/?([a-zA-Z0-9-]+)([^>]*)\/?>|{{(\d+)}}|([^<]+)/g, o = [];
-  let c = null, d, a = [], u = null, y = {}, f, w = 0, p = [];
-  function S(l) {
-    !l || typeof l != "object" || I(l) || (l.props || l.attrs ? (l.props && (y.props || (y.props = {}), Object.assign(y.props, l.props)), l.attrs && (y.attrs || (y.attrs = {}), Object.keys(l.attrs).forEach((b) => {
-      if (b === "style" && y.attrs.style) {
-        const m = y.attrs.style.replace(
+  let l = null, f, u = [], p = null, d = {}, c, y = 0, h = [];
+  function S(a) {
+    !a || typeof a != "object" || I(a) || (a.props || a.attrs ? (a.props && (d.props || (d.props = {}), Object.assign(d.props, a.props)), a.attrs && (d.attrs || (d.attrs = {}), Object.keys(a.attrs).forEach((b) => {
+      if (b === "style" && d.attrs.style) {
+        const g = d.attrs.style.replace(
           /;?\s*$/,
           ""
-        ), h = l.attrs.style.replace(/^;?\s*/, "");
-        y.attrs.style = m + "; " + h;
-      } else if (b === "class" && y.attrs.class) {
-        const m = y.attrs.class.trim().split(/\s+/).filter(Boolean), h = l.attrs.class.trim().split(/\s+/).filter(Boolean), x = [
-          .../* @__PURE__ */ new Set([...m, ...h])
+        ), x = a.attrs.style.replace(/^;?\s*/, "");
+        d.attrs.style = g + "; " + x;
+      } else if (b === "class" && d.attrs.class) {
+        const g = d.attrs.class.trim().split(/\s+/).filter(Boolean), x = a.attrs.class.trim().split(/\s+/).filter(Boolean), w = [
+          .../* @__PURE__ */ new Set([...g, ...x])
         ];
-        y.attrs.class = x.join(" ");
+        d.attrs.class = w.join(" ");
       } else
-        y.attrs[b] = l.attrs[b];
-    }))) : (y.props || (y.props = {}), Object.assign(y.props, l)));
-  }
-  function g(l, b) {
-    const m = u ? a : p;
-    if (I(l)) {
-      const h = l.key ?? b;
-      let x = l.children;
-      m.push({
-        ...l,
-        key: h,
-        children: x
+        d.attrs[b] = a.attrs[b];
+    }))) : (d.props || (d.props = {}), Object.assign(d.props, a)));
+  }
+  function m(a, b) {
+    const g = p ? u : h;
+    if (I(a)) {
+      const x = a.key ?? b;
+      let w = a.children;
+      g.push({
+        ...a,
+        key: x,
+        children: w
       });
       return;
     }
-    if (z(l)) {
-      m.push(le(l, void 0));
+    if (R(a)) {
+      g.push(le(a, void 0));
       return;
     }
-    if (Array.isArray(l)) {
-      if (l.length === 0) return;
-      for (let h = 0; h < l.length; h++) {
-        const x = l[h];
-        I(x) || z(x) || Array.isArray(x) ? g(x, `${b}-${h}`) : x !== null && typeof x == "object" ? S(x) : m.push(n(String(x), `${b}-${h}`));
+    if (Array.isArray(a)) {
+      if (a.length === 0) return;
+      for (let x = 0; x < a.length; x++) {
+        const w = a[x];
+        I(w) || R(w) || Array.isArray(w) ? m(w, `${b}-${x}`) : w !== null && typeof w == "object" ? S(w) : g.push(r(String(w), `${b}-${x}`));
       }
       return;
     }
-    if (l !== null && typeof l == "object") {
-      S(l);
+    if (a !== null && typeof a == "object") {
+      S(a);
       return;
     }
-    m.push(n(String(l), b));
-  }
-  for (; d = s.exec(i); )
-    if (d[1]) {
-      const l = d[1], b = d[0][1] === "/", m = d[0][d[0].length - 2] === "/", {
-        props: h,
-        attrs: x,
-        directives: C
-      } = ce(d[2] || "", t, r), k = { props: {}, attrs: {} };
-      for (const _ in h) k.props[_] = h[_];
-      for (const _ in x) k.attrs[_] = x[_];
-      for (const [_, $] of Object.entries(C))
-        if (_ === "bind")
-          if (typeof $.value == "object" && $.value !== null)
-            for (const [A, E] of Object.entries($.value))
-              typeof E == "boolean" ? k.attrs[A] = E : E != null && (k.attrs[A] = String(E));
-          else $.value != null && (k.attrs[_] = String($.value));
-        else if (_ === "show") {
-          const A = !!$.value;
-          k.attrs.style = (k.attrs.style || "") + (A ? "" : "; display: none !important");
-        } else if (_ === "class") {
-          const A = $.value;
+    g.push(r(String(a), b));
+  }
+  for (; f = s.exec(i); )
+    if (f[1]) {
+      const a = f[1], b = f[0][1] === "/", g = f[0][f[0].length - 2] === "/", {
+        props: x,
+        attrs: w,
+        directives: k
+      } = ce(f[2] || "", t, n), $ = { props: {}, attrs: {} };
+      for (const v in x) $.props[v] = x[v];
+      for (const v in w) $.attrs[v] = w[v];
+      for (const [v, _] of Object.entries(k))
+        if (v === "bind")
+          if (typeof _.value == "object" && _.value !== null)
+            for (const [A, E] of Object.entries(_.value))
+              typeof E == "boolean" ? $.attrs[A] = E : E != null && ($.attrs[A] = String(E));
+          else _.value != null && ($.attrs[v] = String(_.value));
+        else if (v === "show") {
+          const A = !!_.value;
+          $.attrs.style = ($.attrs.style || "") + (A ? "" : "; display: none !important");
+        } else if (v === "class") {
+          const A = _.value;
           let E = [];
           if (typeof A == "string")
             E = A.split(/\s+/).filter(Boolean);
@@ -267,20 +266,20 @@ function fe(e, t, r) {
               if (typeof j == "string")
                 E.push(...j.split(/\s+/).filter(Boolean));
               else if (j && typeof j == "object")
-                for (const [L, M] of Object.entries(j))
-                  M && E.push(...L.split(/\s+/).filter(Boolean));
+                for (const [L, N] of Object.entries(j))
+                  N && E.push(...L.split(/\s+/).filter(Boolean));
           } else if (A && typeof A == "object")
             for (const [j, L] of Object.entries(A))
               L && E.push(...j.split(/\s+/).filter(Boolean));
-          const B = k.attrs.class || "", O = [
+          const M = $.attrs.class || "", O = [
             .../* @__PURE__ */ new Set([
-              ...B.split(/\s+/).filter(Boolean),
+              ...M.split(/\s+/).filter(Boolean),
               ...E
             ])
           ];
-          k.attrs.class = O.join(" ");
-        } else if (_ === "style") {
-          const A = $.value;
+          $.attrs.class = O.join(" ");
+        } else if (v === "style") {
+          const A = _.value;
           let E = "";
           if (typeof A == "string")
             E = A;
@@ -288,7 +287,7 @@ function fe(e, t, r) {
             const O = [];
             for (const [j, L] of Object.entries(A))
               if (L != null && L !== "") {
-                const M = j.replace(
+                const N = j.replace(
                   /[A-Z]/g,
                   (ae) => `-${ae.toLowerCase()}`
                 ), se = [
@@ -318,78 +317,78 @@ function fe(e, t, r) {
                   "max-height"
                 ];
                 let X = String(L);
-                typeof L == "number" && se.includes(M) && (X = `${L}px`), O.push(`${M}: ${X}`);
+                typeof L == "number" && se.includes(N) && (X = `${L}px`), O.push(`${N}: ${X}`);
               }
             E = O.join("; ") + (O.length > 0 ? ";" : "");
           }
-          const B = k.attrs.style || "";
-          k.attrs.style = B + (B && !B.endsWith(";") ? "; " : "") + E;
+          const M = $.attrs.style || "";
+          $.attrs.style = M + (M && !M.endsWith(";") ? "; " : "") + E;
         }
-      const v = {};
-      for (const [_, $] of Object.entries(C))
-        ["bind", "show", "class", "style"].includes(_) || (v[_] = $);
-      if (Object.keys(v).length > 0 && (k.directives = v), b) {
-        const _ = P(
-          u,
-          y,
-          a.length === 1 && z(a[0]) && a[0].tag === "#text" ? typeof a[0].children == "string" ? a[0].children : "" : a.length ? a : void 0,
-          f
-        ), $ = o.pop();
-        $ ? (u = $.tag, y = $.props, f = $.key, a = $.children, a.push(_)) : c = _;
-      } else m ? (u ? a : p).push(P(l, k, void 0, void 0)) : (u && o.push({
-        tag: u,
-        props: y,
-        children: a,
-        key: f
-      }), u = l, y = k, a = []);
-    } else if (typeof d[3] < "u") {
-      const l = Number(d[3]), b = t[l], m = `interp-${l}`;
-      g(b, m);
-    } else if (d[4]) {
-      const l = d[4], b = u ? a : p, m = l.split(/({{\d+}})/);
-      for (const h of m) {
-        if (!h) continue;
-        const x = h.match(/^{{(\d+)}}$/);
-        if (x) {
-          const C = Number(x[1]), k = t[C], v = `interp-${C}`;
-          g(k, v);
+      const C = {};
+      for (const [v, _] of Object.entries(k))
+        ["bind", "show", "class", "style"].includes(v) || (C[v] = _);
+      if (Object.keys(C).length > 0 && ($.directives = C), b) {
+        const v = P(
+          p,
+          d,
+          u.length === 1 && R(u[0]) && u[0].tag === "#text" ? typeof u[0].children == "string" ? u[0].children : "" : u.length ? u : void 0,
+          c
+        ), _ = o.pop();
+        _ ? (p = _.tag, d = _.props, c = _.key, u = _.children, u.push(v)) : l = v;
+      } else g ? (p ? u : h).push(P(a, $, void 0, void 0)) : (p && o.push({
+        tag: p,
+        props: d,
+        children: u,
+        key: c
+      }), p = a, d = $, u = []);
+    } else if (typeof f[3] < "u") {
+      const a = Number(f[3]), b = t[a], g = `interp-${a}`;
+      m(b, g);
+    } else if (f[4]) {
+      const a = f[4], b = p ? u : h, g = a.split(/({{\d+}})/);
+      for (const x of g) {
+        if (!x) continue;
+        const w = x.match(/^{{(\d+)}}$/);
+        if (w) {
+          const k = Number(w[1]), $ = t[k], C = `interp-${k}`;
+          m($, C);
         } else {
-          const C = `text-${w++}`;
-          b.push(n(h, C));
+          const k = `text-${y++}`;
+          b.push(r(x, k));
         }
       }
     }
-  if (c)
-    return z(c) && Array.isArray(c.children) && (c.children = c.children.filter(
-      (l) => z(l) ? l.tag !== "#text" || typeof l.children == "string" && l.children.trim() !== "" : !0
+  if (l)
+    return R(l) && Array.isArray(l.children) && (l.children = l.children.filter(
+      (a) => R(a) ? a.tag !== "#text" || typeof a.children == "string" && a.children.trim() !== "" : !0
       // keep non-element VNodes (including anchors) as-is
-    )), c;
-  if (p.length > 0) {
-    const l = p.filter(
-      (b) => z(b) ? b.tag !== "#text" || typeof b.children == "string" && b.children.trim() !== "" : !0
+    )), l;
+  if (h.length > 0) {
+    const a = h.filter(
+      (b) => R(b) ? b.tag !== "#text" || typeof b.children == "string" && b.children.trim() !== "" : !0
     );
-    return l.length === 1 ? l[0] : l;
+    return a.length === 1 ? a[0] : a;
   }
   return P("div", {}, "", "fallback-root");
 }
-function Be(e, ...t) {
-  const r = t[t.length - 1], n = typeof r == "object" && r && !Array.isArray(r) ? r : void 0;
-  return fe(e, t, n);
+function Me(e, ...t) {
+  const n = t[t.length - 1], r = typeof n == "object" && n && !Array.isArray(n) ? n : void 0;
+  return fe(e, t, r);
 }
 function Oe(e, t) {
-  return W(e ? t : [], "when-block");
+  return K(e ? t : [], "when-block");
 }
-function Me(e, t) {
-  return e.map((r, n) => {
-    const i = typeof r == "object" ? r?.key ?? r?.id ?? `idx-${n}` : String(r);
-    return W(t(r, n), `each-${i}`);
+function Ne(e, t) {
+  return e.map((n, r) => {
+    const i = typeof n == "object" ? n?.key ?? n?.id ?? `idx-${r}` : String(n);
+    return K(t(n, r), `each-${i}`);
   });
 }
 function Pe() {
   const e = [];
   return {
-    when(t, r) {
-      return e.push([t, r]), this;
+    when(t, n) {
+      return e.push([t, n]), this;
     },
     otherwise(t) {
       return e.push([!0, t]), this;
@@ -401,175 +400,175 @@ function Pe() {
 }
 function de(...e) {
   for (let t = 0; t < e.length; t++) {
-    const [r, n] = e[t];
-    if (r) return [W(n, `whenChain-branch-${t}`)];
+    const [n, r] = e[t];
+    if (n) return [K(r, `whenChain-branch-${t}`)];
   }
-  return [W([], "whenChain-empty")];
+  return [K([], "whenChain-empty")];
 }
-function W(e, t) {
-  const r = e ? Array.isArray(e) ? e.filter(Boolean) : [e].filter(Boolean) : [];
+function K(e, t) {
+  const n = e ? Array.isArray(e) ? e.filter(Boolean) : [e].filter(Boolean) : [];
   return {
     tag: "#anchor",
     key: t,
-    children: r
+    children: n
   };
 }
-function N(e, t) {
-  return t.split(".").reduce((r, n) => r?.[n], e);
+function z(e, t) {
+  return t.split(".").reduce((n, r) => n?.[r], e);
 }
-function Y(e, t, r) {
-  const n = t.split("."), i = n.pop();
+function Y(e, t, n) {
+  const r = t.split("."), i = r.pop();
   if (!i) return;
-  const s = n.reduce((o, c) => (c in o || (o[c] = {}), o[c]), e);
-  s[i] = r;
+  const s = r.reduce((o, l) => (l in o || (o[l] = {}), o[l]), e);
+  s[i] = n;
 }
-function ue(e, t, r, n, i, s, o) {
+function ue(e, t, n, r, i, s, o) {
   if (!s) return;
-  const c = t.includes("lazy"), d = t.includes("trim"), a = t.includes("number"), u = () => {
-    const g = s._state || s;
-    return N(g, e);
-  }, y = u();
-  let f = "text";
-  const w = n?.type;
-  if (o instanceof HTMLInputElement ? f = w || o.type || "text" : o instanceof HTMLSelectElement ? f = "select" : o instanceof HTMLTextAreaElement && (f = "textarea"), f === "checkbox")
-    if (Array.isArray(y)) {
-      const g = o?.getAttribute("value") || n?.value || "", l = y.includes(g);
-      o && o.checked !== l && (r.checked = l);
+  const l = t.includes("lazy"), f = t.includes("trim"), u = t.includes("number"), p = () => {
+    const m = s._state || s;
+    return z(m, e);
+  }, d = p();
+  let c = "text";
+  const y = r?.type;
+  if (o instanceof HTMLInputElement ? c = y || o.type || "text" : o instanceof HTMLSelectElement ? c = "select" : o instanceof HTMLTextAreaElement && (c = "textarea"), c === "checkbox")
+    if (Array.isArray(d)) {
+      const m = o?.getAttribute("value") || r?.value || "", a = d.includes(m);
+      o && o.checked !== a && (n.checked = a);
     } else {
-      const g = o?.getAttribute("true-value") || !0, l = y === g;
-      o && o.checked !== l && (r.checked = l);
+      const m = o?.getAttribute("true-value") || !0, a = d === m;
+      o && o.checked !== a && (n.checked = a);
     }
-  else if (f === "radio") {
-    const g = n?.value || "", l = y === g;
-    o && o.checked !== l && (r.checked = l);
-  } else if (f === "select")
+  else if (c === "radio") {
+    const m = r?.value || "", a = d === m;
+    o && o.checked !== a && (n.checked = a);
+  } else if (c === "select")
     if (o && o.hasAttribute("multiple")) {
-      const g = o, l = Array.isArray(y) ? y : [];
+      const m = o, a = Array.isArray(d) ? d : [];
       setTimeout(() => {
-        Array.from(g.options).forEach((b) => {
-          const m = l.includes(b.value);
-          b.selected !== m && (b.selected = m);
+        Array.from(m.options).forEach((b) => {
+          const g = a.includes(b.value);
+          b.selected !== g && (b.selected = g);
         });
       }, 0);
     } else
       setTimeout(() => {
-        o instanceof HTMLSelectElement && o.value !== String(y) && (o.value = String(y));
+        o instanceof HTMLSelectElement && o.value !== String(d) && (o.value = String(d));
       }, 0);
   else {
-    const g = String(y ?? "");
-    (!o || o.value !== g) && (r.value = y);
-  }
-  const p = c || f === "checkbox" || f === "radio" || f === "select" ? "change" : "input", S = (g) => {
-    if (g.isComposing || i._isComposing || g.isTrusted === !1) return;
-    const l = g.target;
-    if (l._modelUpdating) return;
-    const b = u();
-    let m = l.value;
-    if (f === "checkbox")
+    const m = String(d ?? "");
+    (!o || o.value !== m) && (n.value = d);
+  }
+  const h = l || c === "checkbox" || c === "radio" || c === "select" ? "change" : "input", S = (m) => {
+    if (m.isComposing || i._isComposing || m.isTrusted === !1) return;
+    const a = m.target;
+    if (a._modelUpdating) return;
+    const b = p();
+    let g = a.value;
+    if (c === "checkbox")
       if (Array.isArray(b)) {
-        const k = l.getAttribute("value") || "", v = [...b];
-        if (l.checked)
-          v.includes(k) || v.push(k);
+        const $ = a.getAttribute("value") || "", C = [...b];
+        if (a.checked)
+          C.includes($) || C.push($);
         else {
-          const _ = v.indexOf(k);
-          _ > -1 && v.splice(_, 1);
+          const v = C.indexOf($);
+          v > -1 && C.splice(v, 1);
         }
-        m = v;
+        g = C;
       } else {
-        const k = l.getAttribute("true-value") || !0, v = l.getAttribute("false-value") || !1;
-        m = l.checked ? k : v;
+        const $ = a.getAttribute("true-value") || !0, C = a.getAttribute("false-value") || !1;
+        g = a.checked ? $ : C;
       }
-    else if (f === "radio")
-      m = l.getAttribute("value") || l.value;
-    else if (f === "select" && l.multiple) {
-      const k = l;
-      m = Array.from(k.selectedOptions).map(
-        (v) => v.value
+    else if (c === "radio")
+      g = a.getAttribute("value") || a.value;
+    else if (c === "select" && a.multiple) {
+      const $ = a;
+      g = Array.from($.selectedOptions).map(
+        (C) => C.value
       );
-    } else if (d && (m = m.trim()), a) {
-      const k = Number(m);
-      isNaN(k) || (m = k);
+    } else if (f && (g = g.trim()), u) {
+      const $ = Number(g);
+      isNaN($) || (g = $);
     }
-    const h = s._state || s, x = N(h, e);
-    if (Array.isArray(m) && Array.isArray(x) ? JSON.stringify([...m].sort()) !== JSON.stringify([...x].sort()) : m !== x) {
-      const k = g.target;
-      k._modelUpdating = !0, Y(h, e, m), setTimeout(() => {
-        k._modelUpdating = !1;
+    const x = s._state || s, w = z(x, e);
+    if (Array.isArray(g) && Array.isArray(w) ? JSON.stringify([...g].sort()) !== JSON.stringify([...w].sort()) : g !== w) {
+      const $ = m.target;
+      $._modelUpdating = !0, Y(x, e, g), setTimeout(() => {
+        $._modelUpdating = !1;
       }, 0), s._requestRender && s._requestRender();
     }
   };
-  if (i[p] = S, f === "text" || f === "textarea") {
-    const g = () => {
+  if (i[h] = S, c === "text" || c === "textarea") {
+    const m = () => {
       i._isComposing = !0;
-    }, l = (b) => {
+    }, a = (b) => {
       i._isComposing = !1;
-      const m = b.target;
+      const g = b.target;
       setTimeout(() => {
-        if (m) {
-          let h = m.value;
-          if (d && (h = h.trim()), a) {
-            const v = Number(h);
-            isNaN(v) || (h = v);
+        if (g) {
+          let x = g.value;
+          if (f && (x = x.trim()), u) {
+            const C = Number(x);
+            isNaN(C) || (x = C);
           }
-          const x = s._state || s, C = N(x, e);
-          (Array.isArray(h) && Array.isArray(C) ? JSON.stringify([...h].sort()) !== JSON.stringify([...C].sort()) : h !== C) && (m && (m._modelUpdating = !0, setTimeout(() => {
-            m._modelUpdating = !1;
-          }, 0)), Y(x, e, h), s._requestRender && s._requestRender());
+          const w = s._state || s, k = z(w, e);
+          (Array.isArray(x) && Array.isArray(k) ? JSON.stringify([...x].sort()) !== JSON.stringify([...k].sort()) : x !== k) && (g && (g._modelUpdating = !0, setTimeout(() => {
+            g._modelUpdating = !1;
+          }, 0)), Y(w, e, x), s._requestRender && s._requestRender());
         }
       }, 0);
     };
-    i.compositionstart = g, i.compositionend = l;
+    i.compositionstart = m, i.compositionend = a;
   }
 }
-function he(e, t, r, n) {
-  if (n)
+function pe(e, t, n, r) {
+  if (r)
     try {
       const i = JSON.parse(e);
       if (typeof i == "object")
         for (const [s, o] of Object.entries(i))
           t[s] = o;
     } catch {
-      const i = N(n, e);
-      r[e] = i;
+      const i = z(r, e);
+      n[e] = i;
     }
 }
-function pe(e, t, r) {
-  if (!r) return;
-  const n = N(r, e), i = t.style || "", s = n ? "" : "none";
+function he(e, t, n) {
+  if (!n) return;
+  const r = z(n, e), i = t.style || "", s = r ? "" : "none";
   if (i) {
-    const o = i.split(";").filter(Boolean), c = o.findIndex(
-      (d) => d.trim().startsWith("display:")
+    const o = i.split(";").filter(Boolean), l = o.findIndex(
+      (f) => f.trim().startsWith("display:")
     );
-    c >= 0 ? o[c] = `display: ${s}` : o.push(`display: ${s}`), t.style = o.join("; ");
+    l >= 0 ? o[l] = `display: ${s}` : o.push(`display: ${s}`), t.style = o.join("; ");
   } else
     t.style = `display: ${s}`;
 }
-function ge(e, t, r) {
-  if (!r) return;
-  const n = N(r, e);
+function ge(e, t, n) {
+  if (!n) return;
+  const r = z(n, e);
   let i = [];
-  typeof n == "string" ? i = [n] : Array.isArray(n) ? i = n.filter(Boolean) : typeof n == "object" && (i = Object.entries(n).filter(([, c]) => !!c).map(([c]) => c));
+  typeof r == "string" ? i = [r] : Array.isArray(r) ? i = r.filter(Boolean) : typeof r == "object" && (i = Object.entries(r).filter(([, l]) => !!l).map(([l]) => l));
   const s = t.class || "", o = s ? `${s} ${i.join(" ")}`.trim() : i.join(" ");
   o && (t.class = o);
 }
-function me(e, t, r) {
-  let n;
+function ye(e, t, n) {
+  let r;
   if (typeof e == "string") {
-    if (!r) return;
-    n = N(r, e);
+    if (!n) return;
+    r = z(n, e);
   } else
-    n = e;
+    r = e;
   let i = "";
-  if (typeof n == "string")
-    i = n;
-  else if (n && typeof n == "object") {
+  if (typeof r == "string")
+    i = r;
+  else if (r && typeof r == "object") {
     const o = [];
-    for (const [c, d] of Object.entries(n))
-      if (d != null && d !== "") {
-        const a = c.replace(
+    for (const [l, f] of Object.entries(r))
+      if (f != null && f !== "") {
+        const u = l.replace(
           /[A-Z]/g,
-          (f) => `-${f.toLowerCase()}`
-        ), u = [
+          (c) => `-${c.toLowerCase()}`
+        ), p = [
           "width",
           "height",
           "top",
@@ -595,41 +594,41 @@ function me(e, t, r) {
           "min-height",
           "max-height"
         ];
-        let y = String(d);
-        typeof d == "number" && u.includes(a) && (y = `${d}px`), o.push(`${a}: ${y}`);
+        let d = String(f);
+        typeof f == "number" && p.includes(u) && (d = `${f}px`), o.push(`${u}: ${d}`);
       }
     i = o.join("; ") + (o.length > 0 ? ";" : "");
   }
   const s = t.style || "";
   t.style = s + (s && !s.endsWith(";") ? "; " : "") + i;
 }
-function ie(e, t, r, n) {
-  const i = {}, s = { ...n || {} }, o = {};
-  for (const [c, d] of Object.entries(e)) {
-    const { value: a, modifiers: u } = d;
-    switch (c) {
+function ie(e, t, n, r) {
+  const i = {}, s = { ...r || {} }, o = {};
+  for (const [l, f] of Object.entries(e)) {
+    const { value: u, modifiers: p } = f;
+    switch (l) {
       case "model":
         ue(
-          typeof a == "string" ? a : String(a),
-          u,
+          typeof u == "string" ? u : String(u),
+          p,
           i,
           s,
           o,
           t,
-          r
+          n
         );
         break;
       case "bind":
-        he(a, i, s, t);
+        pe(u, i, s, t);
         break;
       case "show":
-        pe(a, s, t);
+        he(u, s, t);
         break;
       case "class":
-        ge(a, s, t);
+        ge(u, s, t);
         break;
       case "style":
-        me(a, s, t);
+        ye(u, s, t);
         break;
     }
   }
@@ -640,274 +639,286 @@ function Z(e, t) {
     const s = /* @__PURE__ */ new Set();
     return e.map((o) => {
       if (!o || typeof o != "object") return o;
-      let c = o.props?.key ?? o.key;
-      if (!c) {
-        const y = o.tag || "node", f = o.props?.attrs?.id ?? o.props?.attrs?.name ?? o.props?.attrs?.["data-key"] ?? "";
-        c = f ? `${t}:${y}:${f}` : `${t}:${y}`;
+      let l = o.props?.key ?? o.key;
+      if (!l) {
+        const d = o.tag || "node", c = o.props?.attrs?.id ?? o.props?.attrs?.name ?? o.props?.attrs?.["data-key"] ?? "";
+        l = c ? `${t}:${d}:${c}` : `${t}:${d}`;
       }
-      let d = c, a = 1;
-      for (; s.has(d); )
-        d = `${c}#${a++}`;
-      s.add(d);
-      let u = o.children;
-      return Array.isArray(u) && (u = Z(u, d)), { ...o, key: d, children: u };
+      let f = l, u = 1;
+      for (; s.has(f); )
+        f = `${l}#${u++}`;
+      s.add(f);
+      let p = o.children;
+      return Array.isArray(p) && (p = Z(p, f)), { ...o, key: f, children: p };
     });
   }
-  const r = e;
-  let n = r.props?.key ?? r.key ?? t, i = r.children;
-  return Array.isArray(i) && (i = Z(i, n)), { ...r, key: n, children: i };
+  const n = e;
+  let r = n.props?.key ?? n.key ?? t, i = n.children;
+  return Array.isArray(i) && (i = Z(i, r)), { ...n, key: r, children: i };
 }
-function ye(e, t, r, n) {
-  const i = r.directives ?? {}, s = ie(
+function me(e, t, n, r) {
+  const i = n.directives ?? {}, s = ie(
     i,
-    n,
+    r,
     e,
-    r.attrs
+    n.attrs
   ), o = {
     ...t.props,
-    ...r.props,
+    ...n.props,
     ...s.props
-  }, c = {
+  }, l = {
     ...t.attrs,
-    ...r.attrs,
+    ...n.attrs,
     ...s.attrs
-  }, d = t.props ?? {}, a = o;
-  for (const f in { ...d, ...a }) {
-    const w = d[f], p = a[f];
-    w !== p && (f === "value" && (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement) ? e.value !== p && (e.value = p ?? "") : f === "checked" && e instanceof HTMLInputElement ? e.checked = !!p : f.startsWith("on") && typeof p == "function" ? (typeof w == "function" && e.removeEventListener(f.slice(2).toLowerCase(), w), e.addEventListener(f.slice(2).toLowerCase(), p)) : p == null || p === !1 ? e.removeAttribute(f) : e.setAttribute(f, String(p)));
+  }, f = t.props ?? {}, u = o;
+  for (const c in { ...f, ...u }) {
+    const y = f[c], h = u[c];
+    y !== h && (c === "value" && (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement) ? e.value !== h && (e.value = h ?? "") : c === "checked" && e instanceof HTMLInputElement ? e.checked = !!h : c.startsWith("on") && typeof h == "function" ? (typeof y == "function" && e.removeEventListener(c.slice(2).toLowerCase(), y), e.addEventListener(c.slice(2).toLowerCase(), h)) : h == null || h === !1 ? e.removeAttribute(c) : e.setAttribute(c, String(h)));
   }
-  for (const [f, w] of Object.entries(
+  for (const [c, y] of Object.entries(
     s.listeners || {}
   ))
-    e.addEventListener(f, w);
-  const u = t.attrs ?? {}, y = c;
-  for (const f in { ...u, ...y }) {
-    const w = u[f], p = y[f];
-    w !== p && (p == null || p === !1 ? e.removeAttribute(f) : e.setAttribute(f, String(p)));
+    e.addEventListener(c, y);
+  const p = t.attrs ?? {}, d = l;
+  for (const c in { ...p, ...d }) {
+    const y = p[c], h = d[c];
+    y !== h && (h == null || h === !1 ? e.removeAttribute(c) : e.setAttribute(c, String(h)));
   }
 }
-function T(e, t) {
+function T(e, t, n) {
   if (typeof e == "string")
     return document.createTextNode(e);
   if (e.tag === "#text") {
-    const a = document.createTextNode(
+    const d = document.createTextNode(
       typeof e.children == "string" ? e.children : ""
     );
-    return e.key != null && (a.key = e.key), a;
+    return e.key != null && (d.key = e.key), d;
   }
   if (e.tag === "#anchor") {
-    const a = e, u = Array.isArray(a.children) ? a.children : [], y = document.createTextNode(""), f = document.createTextNode("");
-    a.key != null && (y.key = `${a.key}:start`, f.key = `${a.key}:end`), a._startNode = y, a._endNode = f;
-    const w = document.createDocumentFragment();
-    w.appendChild(y);
-    for (const p of u)
-      w.appendChild(T(p, t));
-    return w.appendChild(f), w;
+    const d = e, c = Array.isArray(d.children) ? d.children : [], y = document.createTextNode(""), h = document.createTextNode("");
+    d.key != null && (y.key = `${d.key}:start`, h.key = `${d.key}:end`), d._startNode = y, d._endNode = h;
+    const S = document.createDocumentFragment();
+    S.appendChild(y);
+    for (const m of c)
+      S.appendChild(T(m, t));
+    return S.appendChild(h), S;
   }
   const r = document.createElement(e.tag);
   e.key != null && (r.key = e.key);
-  const { props: n = {}, attrs: i = {}, directives: s = {} } = e.props ?? {}, o = ie(s, t, r, i), c = {
-    ...n,
-    ...o.props
-  }, d = {
+  const { props: i = {}, attrs: s = {}, directives: o = {} } = e.props ?? {}, l = ie(o, t, r, s), f = {
     ...i,
-    ...o.attrs
+    ...l.props
+  }, u = {
+    ...s,
+    ...l.attrs
   };
-  for (const a in d) {
-    const u = d[a];
-    typeof u == "boolean" ? u && r.setAttribute(a, "") : u != null && r.setAttribute(a, String(u));
-  }
-  for (const a in c) {
-    const u = c[a];
-    if (a === "value" && (r instanceof HTMLInputElement || r instanceof HTMLTextAreaElement || r instanceof HTMLSelectElement))
-      r.value = u ?? "";
-    else if (a === "checked" && r instanceof HTMLInputElement)
-      r.checked = !!u;
-    else if (a.startsWith("on") && typeof u == "function")
-      r.addEventListener(a.slice(2).toLowerCase(), u);
+  for (const d in u) {
+    const c = u[d];
+    typeof c == "boolean" ? c && r.setAttribute(d, "") : c != null && r.setAttribute(d, String(c));
+  }
+  for (const d in f) {
+    const c = f[d];
+    if (d === "value" && (r instanceof HTMLInputElement || r instanceof HTMLTextAreaElement || r instanceof HTMLSelectElement))
+      r.value = c ?? "";
+    else if (d === "checked" && r instanceof HTMLInputElement)
+      r.checked = !!c;
+    else if (d.startsWith("on") && typeof c == "function")
+      r.addEventListener(d.slice(2).toLowerCase(), c);
     else {
-      if (a.startsWith("on") && u === void 0)
+      if (d.startsWith("on") && c === void 0)
         continue;
-      u == null || u === !1 ? r.removeAttribute(a) : r.setAttribute(a, String(u));
+      c == null || c === !1 ? r.removeAttribute(d) : r.setAttribute(d, String(c));
     }
   }
-  for (const [a, u] of Object.entries(
-    o.listeners || {}
+  for (const [d, c] of Object.entries(
+    l.listeners || {}
   ))
-    r.addEventListener(a, u);
-  if (Array.isArray(e.children))
-    for (const a of e.children)
-      r.appendChild(T(a, t));
+    r.addEventListener(d, c);
+  const p = e.props?.ref ?? (e.props?.props && e.props.props.ref);
+  if (typeof e != "string" && p && n && (n[p] = r), Array.isArray(e.children))
+    for (const d of e.children)
+      r.appendChild(T(d, t, n));
   else typeof e.children == "string" && (r.textContent = e.children);
   return r;
 }
-function be(e, t, r, n) {
-  if (typeof r == "string") {
-    e.textContent !== r && (e.textContent = r);
+function be(e, t, n, r, i) {
+  if (typeof n == "string") {
+    e.textContent !== n && (e.textContent = n);
     return;
   }
-  if (!Array.isArray(r)) return;
-  const i = Array.from(e.childNodes), s = Array.isArray(t) ? t : [], o = /* @__PURE__ */ new Map();
-  for (const f of s)
-    f && f.key != null && o.set(f.key, f);
-  const c = /* @__PURE__ */ new Map();
-  for (const f of i) {
-    const w = f.key;
-    w != null && c.set(w, f);
-  }
-  const d = /* @__PURE__ */ new Set();
-  let a = e.firstChild;
-  function u(f, w) {
-    let p = f;
-    for (; p && (d.add(p), p !== w); )
-      p = p.nextSibling;
-  }
-  function y(f, w, p, S) {
-    const g = [];
-    let l = f.nextSibling;
-    for (; l && l !== w; )
-      g.push(l), l = l.nextSibling;
-    const b = Array.isArray(p) ? p : [];
-    if (S.some((h) => h && h.key != null) || b.some((h) => h && h.key != null)) {
-      const h = /* @__PURE__ */ new Map(), x = /* @__PURE__ */ new Map();
-      for (const v of b)
-        v && v.key != null && h.set(v.key, v);
-      for (const v of g) {
+  if (!Array.isArray(n)) return;
+  const s = Array.from(e.childNodes), o = Array.isArray(t) ? t : [], l = /* @__PURE__ */ new Map();
+  for (const y of o)
+    y && y.key != null && l.set(y.key, y);
+  const f = /* @__PURE__ */ new Map();
+  for (const y of s) {
+    const h = y.key;
+    h != null && f.set(h, y);
+  }
+  const u = /* @__PURE__ */ new Set();
+  let p = e.firstChild;
+  function d(y, h) {
+    let S = y;
+    for (; S && (u.add(S), S !== h); )
+      S = S.nextSibling;
+  }
+  function c(y, h, S, m) {
+    const a = [];
+    let b = y.nextSibling;
+    for (; b && b !== h; )
+      a.push(b), b = b.nextSibling;
+    const g = Array.isArray(S) ? S : [];
+    if (m.some((w) => w && w.key != null) || g.some((w) => w && w.key != null)) {
+      const w = /* @__PURE__ */ new Map(), k = /* @__PURE__ */ new Map();
+      for (const v of g)
+        v && v.key != null && w.set(v.key, v);
+      for (const v of a) {
         const _ = v.key;
-        _ != null && x.set(_, v);
+        _ != null && k.set(_, v);
       }
-      const C = /* @__PURE__ */ new Set();
-      let k = f.nextSibling;
-      for (const v of S) {
+      const $ = /* @__PURE__ */ new Set();
+      let C = y.nextSibling;
+      for (const v of m) {
         let _;
-        if (v.key != null && x.has(v.key)) {
-          const $ = h.get(v.key);
+        if (v.key != null && k.has(v.key)) {
+          const A = w.get(v.key);
           _ = D(
-            x.get(v.key),
-            $,
+            k.get(v.key),
+            A,
             v,
-            n
-          ), C.add(_), _ !== k && e.contains(_) && e.insertBefore(_, k);
+            r
+          ), $.add(_), _ !== C && e.contains(_) && e.insertBefore(_, C);
         } else
-          _ = T(v, n), e.insertBefore(_, k), C.add(_);
-        k = _.nextSibling;
+          _ = T(v, r), e.insertBefore(_, C), $.add(_);
+        C = _.nextSibling;
       }
-      for (const v of g)
-        !C.has(v) && e.contains(v) && e.removeChild(v);
+      for (const v of a)
+        !$.has(v) && e.contains(v) && e.removeChild(v);
     } else {
-      const h = Math.min(
-        b.length,
-        S.length
+      const w = Math.min(
+        g.length,
+        m.length
       );
-      for (let x = 0; x < h; x++) {
-        const C = b[x], k = S[x], v = D(g[x], C, k, n);
-        v !== g[x] && (e.insertBefore(v, g[x]), e.removeChild(g[x]));
+      for (let k = 0; k < w; k++) {
+        const $ = g[k], C = m[k], v = D(a[k], $, C, r);
+        v !== a[k] && (e.insertBefore(v, a[k]), e.removeChild(a[k]));
       }
-      for (let x = h; x < S.length; x++)
-        e.insertBefore(T(S[x], n), w);
-      for (let x = h; x < g.length; x++)
-        e.removeChild(g[x]);
+      for (let k = w; k < m.length; k++)
+        e.insertBefore(T(m[k], r), h);
+      for (let k = w; k < a.length; k++)
+        e.removeChild(a[k]);
     }
   }
-  for (const f of r) {
-    let w;
-    if (f.tag === "#anchor") {
-      const p = f.key, S = `${p}:start`, g = `${p}:end`;
-      let l = c.get(S), b = c.get(g);
-      const m = Array.isArray(f.children) ? f.children : [];
-      if (l || (l = document.createTextNode(""), l.key = S), b || (b = document.createTextNode(""), b.key = g), f._startNode = l, f._endNode = b, !e.contains(l) || !e.contains(b)) {
-        e.insertBefore(l, a);
-        for (const h of m)
-          e.insertBefore(T(h, n), a);
-        e.insertBefore(b, a);
+  for (const y of n) {
+    let h;
+    if (y.tag === "#anchor") {
+      const S = y.key, m = `${S}:start`, a = `${S}:end`;
+      let b = f.get(m), g = f.get(a);
+      const x = Array.isArray(y.children) ? y.children : [];
+      if (b || (b = document.createTextNode(""), b.key = m), g || (g = document.createTextNode(""), g.key = a), y._startNode = b, y._endNode = g, !e.contains(b) || !e.contains(g)) {
+        e.insertBefore(b, p);
+        for (const w of x)
+          e.insertBefore(T(w, r), p);
+        e.insertBefore(g, p);
       } else
-        y(
-          l,
+        c(
           b,
-          o.get(p)?.children,
-          m
+          g,
+          l.get(S)?.children,
+          x
         );
-      u(l, b), a = b.nextSibling;
+      d(b, g), p = g.nextSibling;
       continue;
     }
-    if (f.key != null && c.has(f.key)) {
-      const p = o.get(f.key);
-      w = D(
-        c.get(f.key),
-        p,
-        f,
-        n
-      ), d.add(w), w !== a && e.contains(w) && (a && !e.contains(a) && (a = null), e.insertBefore(w, a));
+    if (y.key != null && f.has(y.key)) {
+      const S = l.get(y.key);
+      h = D(
+        f.get(y.key),
+        S,
+        y,
+        r,
+        i
+      ), u.add(h), h !== p && e.contains(h) && (p && !e.contains(p) && (p = null), e.insertBefore(h, p));
     } else
-      w = T(f, n), a && !e.contains(a) && (a = null), e.insertBefore(w, a), d.add(w);
-    a = w.nextSibling;
-  }
-  for (const f of i)
-    !d.has(f) && e.contains(f) && e.removeChild(f);
+      h = T(y, r, i), p && !e.contains(p) && (p = null), e.insertBefore(h, p), u.add(h);
+    p = h.nextSibling;
+  }
+  for (const y of s)
+    if (!u.has(y) && e.contains(y)) {
+      if (y instanceof HTMLElement && i)
+        for (const h in i)
+          i[h] === y && delete i[h];
+      e.removeChild(y);
+    }
 }
-function D(e, t, r, n) {
-  if (t === r) return e;
-  if (typeof r == "string") {
+function D(e, t, n, r, i) {
+  if (t && typeof t != "string" && t.props?.ref && i && delete i[t.props.ref], t === n) return e;
+  if (typeof n == "string") {
     if (e.nodeType === Node.TEXT_NODE)
-      return e.textContent !== r && (e.textContent = r), e;
+      return e.textContent !== n && (e.textContent = n), e;
     {
-      const s = document.createTextNode(r);
-      return e.parentNode?.replaceChild(s, e), s;
+      const o = document.createTextNode(n);
+      return e.parentNode?.replaceChild(o, e), o;
     }
   }
-  if (r && typeof r != "string" && r.tag === "#anchor") {
-    const s = r, o = Array.isArray(s.children) ? s.children : [], c = s._startNode ?? document.createTextNode(""), d = s._endNode ?? document.createTextNode("");
-    s.key != null && (c.key = `${s.key}:start`, d.key = `${s.key}:end`), s._startNode = c, s._endNode = d;
-    const a = document.createDocumentFragment();
-    a.appendChild(c);
-    for (const u of o)
-      a.appendChild(T(u, n));
-    return a.appendChild(d), e.parentNode?.replaceChild(a, e), c;
+  if (n && typeof n != "string" && n.tag === "#anchor") {
+    const o = n, l = Array.isArray(o.children) ? o.children : [], f = o._startNode ?? document.createTextNode(""), u = o._endNode ?? document.createTextNode("");
+    o.key != null && (f.key = `${o.key}:start`, u.key = `${o.key}:end`), o._startNode = f, o._endNode = u;
+    const p = document.createDocumentFragment();
+    p.appendChild(f);
+    for (const d of l)
+      p.appendChild(T(d, r));
+    return p.appendChild(u), e.parentNode?.replaceChild(p, e), f;
   }
-  if (!r) {
-    const s = document.createComment("removed");
-    return e.parentNode?.replaceChild(s, e), s;
+  if (!n) {
+    const o = document.createComment("removed");
+    return e.parentNode?.replaceChild(o, e), o;
   }
   if (!t || typeof t == "string") {
-    const s = T(r, n);
-    return e.parentNode?.replaceChild(s, e), s;
-  }
-  if (r.tag === "#anchor") {
-    const s = Array.isArray(r.children) ? r.children : [], o = r._startNode ?? document.createTextNode(""), c = r._endNode ?? document.createTextNode("");
-    r.key != null && (o.key = `${r.key}:start`, c.key = `${r.key}:end`), r._startNode = o, r._endNode = c;
-    const d = document.createDocumentFragment();
-    d.appendChild(o);
-    for (const a of s)
-      d.appendChild(T(a, n));
-    return d.appendChild(c), e.parentNode?.replaceChild(d, e), o;
-  }
-  if (typeof t != "string" && typeof r != "string" && t.tag === r.tag && t.key === r.key) {
-    const s = e;
-    return ye(s, t.props || {}, r.props || {}, n), be(s, t.children, r.children, n), s;
-  }
-  const i = T(r, n);
-  return e.parentNode?.replaceChild(i, e), i;
+    const o = T(n, r, i);
+    return typeof n != "string" && n.props?.ref && i && (i[n.props.ref] = o), e.parentNode?.replaceChild(o, e), o;
+  }
+  if (n.tag === "#anchor") {
+    const o = Array.isArray(n.children) ? n.children : [], l = n._startNode ?? document.createTextNode(""), f = n._endNode ?? document.createTextNode("");
+    n.key != null && (l.key = `${n.key}:start`, f.key = `${n.key}:end`), n._startNode = l, n._endNode = f;
+    const u = document.createDocumentFragment();
+    u.appendChild(l);
+    for (const p of o)
+      u.appendChild(T(p, r));
+    return u.appendChild(f), e.parentNode?.replaceChild(u, e), l;
+  }
+  if (typeof t != "string" && typeof n != "string" && t.tag === n.tag && t.key === n.key) {
+    const o = e;
+    return me(o, t.props || {}, n.props || {}, r), be(o, t.children, n.children, r, i), typeof n != "string" && n.props?.ref && i && (i[n.props.ref] = o), o;
+  }
+  const s = T(n, r, i);
+  return typeof n != "string" && n.props?.ref && i && (i[n.props.ref] = s), e.parentNode?.replaceChild(s, e), s;
 }
-function xe(e, t, r) {
-  const n = (a) => a.key == null ? { ...a, key: "__root__" } : a;
-  let i = Array.isArray(t) ? { tag: "div", key: "__root__", children: t } : n(t);
-  i = Z(i, String(i.key ?? "root"));
-  const s = e._prevVNode ?? null, o = e._prevDom ?? e.firstChild ?? null;
-  let c;
-  s && o ? typeof s != "string" && typeof i != "string" && s.tag === i.tag && s.key === i.key ? c = D(o, s, i, r) : (c = T(i, r), e.replaceChild(c, o)) : (c = T(i, r), e.firstChild ? e.replaceChild(c, e.firstChild) : e.appendChild(c));
-  const d = [];
-  for (let a = 0; a < e.childNodes.length; a++) {
-    const u = e.childNodes[a];
-    u !== c && u.nodeName !== "STYLE" && d.push(u);
-  }
-  d.forEach((a) => e.removeChild(a)), e._prevVNode = i, e._prevDom = c;
+function xe(e, t, n, r) {
+  const i = (p) => p.key == null ? { ...p, key: "__root__" } : p;
+  let s = Array.isArray(t) ? { tag: "div", key: "__root__", children: t } : i(t);
+  s = Z(s, String(s.key ?? "root"));
+  const o = e._prevVNode ?? null, l = e._prevDom ?? e.firstChild ?? null;
+  let f;
+  o && l ? typeof o != "string" && typeof s != "string" && o.tag === s.tag && o.key === s.key ? f = D(l, o, s, n, r) : (f = T(s, n, r), e.replaceChild(f, l)) : (f = T(s, n, r), e.firstChild ? e.replaceChild(f, e.firstChild) : e.appendChild(f));
+  const u = [];
+  for (let p = 0; p < e.childNodes.length; p++) {
+    const d = e.childNodes[p];
+    if (d !== f && d.nodeName !== "STYLE") {
+      if (d instanceof HTMLElement && r)
+        for (const c in r)
+          r[c] === d && delete r[c];
+      u.push(d);
+    }
+  }
+  u.forEach((p) => e.removeChild(p)), e._prevVNode = s, e._prevDom = f;
 }
 function oe(e) {
   return e.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\s+/g, " ").replace(/\s*([{}:;,>+~])\s*/g, "$1").replace(/;}/g, "}").trim();
 }
-let V = null;
+let H = null;
 function G() {
-  return V || (V = new CSSStyleSheet(), V.replaceSync(oe(we))), V;
+  return H || (H = new CSSStyleSheet(), H.replaceSync(oe(we))), H;
 }
 function ve(e) {
   return e.replace(/url\s*\(\s*['"]?javascript:[^)]*\)/gi, "").replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, "").replace(/expression\s*\([^)]*\)/gi, "");
@@ -1159,7 +1170,7 @@ const we = `
   },
   white: { DEFAULT: "var(--color-white, #ffffff)" },
   black: { DEFAULT: "var(--color-black, #000000)" }
-}, K = {
+}, F = {
   /* Display */
   block: "display:block;",
   inline: "display:inline;",
@@ -1352,23 +1363,23 @@ const we = `
   "2xl": "(min-width:1536px)",
   // Dark mode (now plain string)
   dark: "(prefers-color-scheme: dark)"
-}, F = ["sm", "md", "lg", "xl", "2xl"];
+}, V = ["sm", "md", "lg", "xl", "2xl"];
 function U(e) {
-  const t = e.startsWith("-"), n = (t ? e.slice(1) : e).split("-");
-  if (n.length < 2) return null;
-  const i = n.slice(0, -1).join("-"), s = n[n.length - 1], o = parseFloat(s);
+  const t = e.startsWith("-"), r = (t ? e.slice(1) : e).split("-");
+  if (r.length < 2) return null;
+  const i = r.slice(0, -1).join("-"), s = r[r.length - 1], o = parseFloat(s);
   if (Number.isNaN(o) || !ee[i]) return null;
-  const c = t ? "-" : "";
-  return ee[i].map((d) => `${d}:calc(${c}${_e} * ${o});`).join("");
+  const l = t ? "-" : "";
+  return ee[i].map((f) => `${f}:calc(${l}${_e} * ${o});`).join("");
 }
 function re(e) {
-  const t = e.replace("#", ""), r = parseInt(t, 16), n = r >> 16 & 255, i = r >> 8 & 255, s = r & 255;
-  return `${n} ${i} ${s}`;
+  const t = e.replace("#", ""), n = parseInt(t, 16), r = n >> 16 & 255, i = n >> 8 & 255, s = n & 255;
+  return `${r} ${i} ${s}`;
 }
 function Se(e) {
   const t = /^(bg|text|border|shadow|outline|caret|accent)-([a-z]+)-?(\d{2,3}|DEFAULT)?$/.exec(e);
   if (!t) return null;
-  const [, r, n, i = "DEFAULT"] = t, s = ke[n]?.[i];
+  const [, n, r, i = "DEFAULT"] = t, s = ke[r]?.[i];
   return s ? `${{
     bg: "background-color",
     text: "color",
@@ -1377,40 +1388,40 @@ function Se(e) {
     outline: "outline-color",
     caret: "caret-color",
     accent: "accent-color"
-  }[r]}:${s};` : null;
+  }[n]}:${s};` : null;
 }
 function Ce(e) {
-  const [t, r] = e.split("/");
-  if (!r) return { base: t };
-  const n = parseInt(r, 10);
-  return isNaN(n) || n < 0 || n > 100 ? { base: t } : { base: t, opacity: n / 100 };
+  const [t, n] = e.split("/");
+  if (!n) return { base: t };
+  const r = parseInt(n, 10);
+  return isNaN(r) || r < 0 || r > 100 ? { base: t } : { base: t, opacity: r / 100 };
 }
 function q(e) {
-  const { base: t, opacity: r } = Ce(e), n = Se(t);
-  if (n) {
-    if (r !== void 0) {
-      const s = /#([0-9a-f]{6})/i.exec(n);
+  const { base: t, opacity: n } = Ce(e), r = Se(t);
+  if (r) {
+    if (n !== void 0) {
+      const s = /#([0-9a-f]{6})/i.exec(r);
       if (s) {
         const o = re(s[0]);
-        return n.replace(/#([0-9a-f]{6})/i, `rgb(${o} / ${r})`);
+        return r.replace(/#([0-9a-f]{6})/i, `rgb(${o} / ${n})`);
       }
     }
-    return n;
+    return r;
   }
-  const i = H(t);
-  if (i && r !== void 0) {
+  const i = W(t);
+  if (i && n !== void 0) {
     const s = /#([0-9a-f]{6})/i.exec(i);
     if (s) {
       const o = re(s[0]);
-      return i.replace(/#([0-9a-f]{6})/i, `rgb(${o} / ${r})`);
+      return i.replace(/#([0-9a-f]{6})/i, `rgb(${o} / ${n})`);
     }
   }
   return i;
 }
-function H(e) {
-  const t = e.indexOf("-["), r = e.endsWith("]");
-  if (t > 0 && r) {
-    const n = e.slice(0, t);
+function W(e) {
+  const t = e.indexOf("-["), n = e.endsWith("]");
+  if (t > 0 && n) {
+    const r = e.slice(0, t);
     let i = e.slice(t + 2, -1);
     i = i.replace(/_/g, " ");
     const o = {
@@ -1452,7 +1463,7 @@ function H(e) {
       weight: "font-weight",
       leading: "line-height",
       z: "z-index"
-    }[n] ?? n.replace(/_/g, "-");
+    }[r] ?? r.replace(/_/g, "-");
     if (o && i) return `${o}:${i};`;
   }
   return null;
@@ -1461,67 +1472,67 @@ function Ae(e) {
   return e.replace(/([!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g, "\\$1");
 }
 function Ee(e) {
-  const t = /class\s*=\s*["']([^"']+)["']/g, r = [];
-  let n;
-  for (; n = t.exec(e); ) {
+  const t = /class\s*=\s*["']([^"']+)["']/g, n = [];
+  let r;
+  for (; r = t.exec(e); ) {
     let i = "", s = !1;
-    for (const o of n[1])
-      o === "[" && (s = !0), o === "]" && (s = !1), o === " " && !s ? (i && r.push(i), i = "") : i += o;
-    i && r.push(i);
+    for (const o of r[1])
+      o === "[" && (s = !0), o === "]" && (s = !1), o === " " && !s ? (i && n.push(i), i = "") : i += o;
+    i && n.push(i);
   }
-  return r.filter(Boolean);
+  return n.filter(Boolean);
 }
 const ne = /* @__PURE__ */ new Map(), Te = 16;
 function je(e) {
-  const t = Date.now(), r = ne.get(e);
-  if (r && t - r.timestamp < Te) return r.css;
-  const n = Ee(e), i = new Set(n), s = [], o = [], c = [], d = [], a = {};
-  function u(p, S = !1) {
-    const g = (S ? "dark|" : "") + p;
-    if (g in a) return a[g];
-    const l = f(p, S);
-    return a[g] = l, l;
-  }
-  function y(p) {
-    const S = p.some((l) => F.includes(l)), g = p.includes("dark");
-    return p.length === 0 ? 1 : !S && !g ? 2 : S && !g ? 3 : 4;
-  }
-  function f(p, S = !1) {
-    const g = p.split(":"), l = g.find(
-      ($) => K[$] || U($) || q($) || H($)
+  const t = Date.now(), n = ne.get(e);
+  if (n && t - n.timestamp < Te) return n.css;
+  const r = Ee(e), i = new Set(r), s = [], o = [], l = [], f = [], u = {};
+  function p(h, S = !1) {
+    const m = (S ? "dark|" : "") + h;
+    if (m in u) return u[m];
+    const a = c(h, S);
+    return u[m] = a, a;
+  }
+  function d(h) {
+    const S = h.some((a) => V.includes(a)), m = h.includes("dark");
+    return h.length === 0 ? 1 : !S && !m ? 2 : S && !m ? 3 : 4;
+  }
+  function c(h, S = !1) {
+    const m = h.split(":"), a = m.find(
+      (_) => F[_] || U(_) || q(_) || W(_)
     );
-    if (!l) return null;
-    const b = K[l] ?? U(l) ?? q(l) ?? H(l);
+    if (!a) return null;
+    const b = F[a] ?? U(a) ?? q(a) ?? W(a);
     if (!b) return null;
-    let m = `.${Ae(p)}`, h = b;
-    const x = g.indexOf(l);
-    let C = x >= 0 ? g.slice(0, x) : [];
-    S && (C = C.filter(($) => $ !== "dark"));
-    const k = C.filter(($) => F.includes($)), v = k.length ? k[k.length - 1] : null;
-    for (const $ of C) {
-      if (F.includes($)) continue;
-      const A = $e[$];
-      typeof A == "function" && (m = A(m, h).replace(/\{.*$/, ""));
+    let g = `.${Ae(h)}`, x = b;
+    const w = m.indexOf(a);
+    let k = w >= 0 ? m.slice(0, w) : [];
+    S && (k = k.filter((_) => _ !== "dark"));
+    const $ = k.filter((_) => V.includes(_)), C = $.length ? $[$.length - 1] : null;
+    for (const _ of k) {
+      if (V.includes(_)) continue;
+      const A = $e[_];
+      typeof A == "function" && (g = A(g, x).replace(/\{.*$/, ""));
     }
-    let _ = `${m}{${h}}`;
-    return S && v ? _ = `@media (prefers-color-scheme: dark) and ${te[v]}{${_}}` : S ? _ = `@media (prefers-color-scheme: dark){${_}}` : v && (_ = `@media ${te[v]}{${_}}`), _;
+    let v = `${g}{${x}}`;
+    return S && C ? v = `@media (prefers-color-scheme: dark) and ${te[C]}{${v}}` : S ? v = `@media (prefers-color-scheme: dark){${v}}` : C && (v = `@media ${te[C]}{${v}}`), v;
   }
-  for (const p of i) {
-    const S = p.split(":"), g = S.find(
-      (h) => K[h] || U(h) || q(h) || H(h)
+  for (const h of i) {
+    const S = h.split(":"), m = S.find(
+      (x) => F[x] || U(x) || q(x) || W(x)
     );
-    if (!g) continue;
-    const l = S.indexOf(g), b = l >= 0 ? S.slice(0, l) : [], m = y(b);
-    if (m === 4) {
-      const h = u(p, !0);
-      h && d.push(h);
+    if (!m) continue;
+    const a = S.indexOf(m), b = a >= 0 ? S.slice(0, a) : [], g = d(b);
+    if (g === 4) {
+      const x = p(h, !0);
+      x && f.push(x);
     } else {
-      const h = u(p);
-      h && (m === 1 ? s.push(h) : m === 2 ? o.push(h) : m === 3 && c.push(h));
+      const x = p(h);
+      x && (g === 1 ? s.push(x) : g === 2 ? o.push(x) : g === 3 && l.push(x));
     }
   }
-  const w = [...s, ...o, ...c, ...d].join("");
-  return ne.set(e, { css: w, timestamp: t }), w;
+  const y = [...s, ...o, ...l, ...f].join("");
+  return ne.set(e, { css: y, timestamp: t }), y;
 }
 const Le = /* @__PURE__ */ new Map();
 function Q(e) {
@@ -1539,21 +1550,21 @@ function J(e) {
     })[t]
   ) : e;
 }
-function Ve(e, ...t) {
-  let r = "";
-  for (let n = 0; n < e.length; n++)
-    r += e[n], n < t.length && (r += t[n]);
-  return r;
+function He(e, ...t) {
+  let n = "";
+  for (let r = 0; r < e.length; r++)
+    n += e[r], r < t.length && (n += t[r]);
+  return n;
 }
-function Ie(e, t, r) {
-  let n = Q(e);
-  n.includes("-") || (n = `cer-${n}`);
+function Ie(e, t, n) {
+  let r = Q(e);
+  r.includes("-") || (r = `cer-${r}`);
   let i;
-  typeof t == "function" ? i = { ...r, render: t } : i = t, typeof i.onError != "function" && (i.onError = (s, o) => {
-    console.error(`[${n}] Error:`, s, o);
-  }), Le.set(n, i), typeof window < "u" && !customElements.get(n) && customElements.define(n, Ne(i));
+  typeof t == "function" ? i = { ...n, render: t } : i = t, typeof i.onError != "function" && (i.onError = (s, o) => {
+    console.error(`[${r}] Error:`, s, o);
+  }), Le.set(r, i), typeof window < "u" && !customElements.get(r) && customElements.define(r, ze(i));
 }
-function Ne(e) {
+function ze(e) {
   if (!e.render)
     throw new Error(
       "Component must have a render function"
@@ -1563,6 +1574,7 @@ function Ne(e) {
     }
   } : class extends HTMLElement {
     context;
+    _refs = {};
     _listeners = [];
     _watchers = /* @__PURE__ */ new Map();
     /** @internal */
@@ -1578,9 +1590,17 @@ function Ne(e) {
     _templateLoading = !1;
     _templateError = null;
     constructor() {
-      super(), this.attachShadow({ mode: "open" }), this._cfg = e, this.context = this._initContext(e), Object.keys(e).forEach((t) => {
-        const r = e[t];
-        typeof r == "function" && !t.startsWith("on") && (this.context[t] = (...n) => r(...n, this.context));
+      super(), this.attachShadow({ mode: "open" }), this._cfg = e;
+      const t = this._initContext(e);
+      Object.defineProperty(t, "refs", {
+        value: this._refs,
+        writable: !1,
+        enumerable: !1,
+        // Hide from iteration to avoid proxy traps
+        configurable: !1
+      }), this.context = t, Object.keys(e).forEach((n) => {
+        const r = e[n];
+        typeof r == "function" && !n.startsWith("on") && (this.context[n] = (...i) => r(...i, this.context));
       }), this._applyProps(e), this._applyComputed(e), this._initializing = !1, this._initWatchers(e), this._render(e);
     }
     connectedCallback() {
@@ -1593,12 +1613,12 @@ function Ne(e) {
         e.onDisconnected && e.onDisconnected(this.context), this._listeners.forEach((t) => t()), this._listeners = [], this._watchers.clear(), this._templateLoading = !1, this._templateError = null, this._mounted = !1;
       });
     }
-    attributeChangedCallback(t, r, n) {
+    attributeChangedCallback(t, n, r) {
       this._runLogicWithinErrorBoundary(e, () => {
         this._applyProps(e), e.onAttributeChanged && e.onAttributeChanged(
           t,
-          r,
           n,
+          r,
           this.context
         );
       });
@@ -1608,10 +1628,10 @@ function Ne(e) {
     }
     _applyComputed(t) {
       this._runLogicWithinErrorBoundary(e, () => {
-        t.computed && Object.entries(t.computed).forEach(([r, n]) => {
-          Object.defineProperty(this.context, r, {
+        t.computed && Object.entries(t.computed).forEach(([n, r]) => {
+          Object.defineProperty(this.context, n, {
             get: () => {
-              const i = n(this.context);
+              const i = r(this.context);
               return J(i);
             },
             enumerable: !0
@@ -1631,39 +1651,40 @@ function Ne(e) {
           this._renderOutput(t.errorTemplate(this._templateError, this.context));
           return;
         }
-        const r = t.render(this.context);
-        if (r instanceof Promise) {
-          this._templateLoading = !0, r.then((n) => (this._templateLoading = !1, this._templateError = null, this._renderOutput(n), n)).catch((n) => {
-            if (this._templateLoading = !1, this._templateError = n, t.errorTemplate) {
-              const i = t.errorTemplate(n, this.context);
+        const n = t.render(this.context);
+        if (n instanceof Promise) {
+          this._templateLoading = !0, n.then((r) => (this._templateLoading = !1, this._templateError = null, this._renderOutput(r), r)).catch((r) => {
+            if (this._templateLoading = !1, this._templateError = r, t.errorTemplate) {
+              const i = t.errorTemplate(r, this.context);
               return this._renderOutput(i), i;
             }
-            throw n;
+            throw r;
           }), t.loadingTemplate && this._renderOutput(t.loadingTemplate(this.context));
           return;
         }
-        this._renderOutput(r), this._applyStyle(t);
+        this._renderOutput(n), this._applyStyle(t);
       });
     }
     // --- Helper to render output ---
     _renderOutput(t) {
       if (!this.shadowRoot) return;
-      const r = new Proxy(this.context, {
-        get: (n, i) => i === "_requestRender" ? () => this._requestRender() : i === "context" ? n : typeof i == "string" && i.includes(".") ? i.split(".").reduce((s, o) => s?.[o], n) : n[i],
-        set: (n, i, s) => {
+      const n = new Proxy(this.context, {
+        get: (r, i) => i === "_requestRender" ? () => this._requestRender() : i === "context" ? r : typeof i == "string" && i.includes(".") ? i.split(".").reduce((s, o) => s?.[o], r) : r[i],
+        set: (r, i, s) => {
           if (typeof i == "string" && i.includes(".")) {
-            const o = i.split("."), c = o.pop();
-            if (!c) return !1;
-            const d = o.reduce((a, u) => (u in a || (a[u] = {}), a[u]), n);
-            return d[c] = s, !0;
+            const o = i.split("."), l = o.pop();
+            if (!l) return !1;
+            const f = o.reduce((u, p) => (p in u || (u[p] = {}), u[p]), r);
+            return f[l] = s, !0;
           }
-          return n[i] = s, !0;
+          return r[i] = s, !0;
         }
       });
       xe(
         this.shadowRoot,
         Array.isArray(t) ? t : [t],
-        r
+        n,
+        this._refs
       ), this._lastHtmlStringForJitCSS = this.shadowRoot.innerHTML;
     }
     _requestRender() {
@@ -1684,27 +1705,27 @@ function Ne(e) {
     _applyStyle(t) {
       this._runLogicWithinErrorBoundary(t, () => {
         if (!this.shadowRoot) return;
-        const r = je(this._lastHtmlStringForJitCSS);
-        if (!t.style && (!r || r.trim() === "")) {
+        const n = je(this._lastHtmlStringForJitCSS);
+        if (!t.style && (!n || n.trim() === "")) {
           this._styleSheet = null, this.shadowRoot.adoptedStyleSheets = [G()];
           return;
         }
-        let n = "";
-        t.style && (typeof t.style == "string" ? n = t.style : typeof t.style == "function" && (n = t.style(this.context)));
-        let i = ve(`${n}
-${r}
+        let r = "";
+        t.style && (typeof t.style == "string" ? r = t.style : typeof t.style == "function" && (r = t.style(this.context)));
+        let i = ve(`${r}
+${n}
 `);
         i = oe(i), this._styleSheet || (this._styleSheet = new CSSStyleSheet()), (this._styleSheet.cssRules.length === 0 || this._styleSheet.toString() !== i) && this._styleSheet.replaceSync(i), this.shadowRoot.adoptedStyleSheets = [G(), this._styleSheet];
       });
     }
     // --- Error Boundary function ---
-    _runLogicWithinErrorBoundary(t, r) {
+    _runLogicWithinErrorBoundary(t, n) {
       this._hasError && (this._hasError = !1);
       try {
-        r();
-      } catch (n) {
-        this._hasError = !0, t.onError && t.onError(n, this.context), t.errorFallback && this.shadowRoot && (this.shadowRoot.innerHTML = t.errorFallback(
-          n,
+        n();
+      } catch (r) {
+        this._hasError = !0, t.onError && t.onError(r, this.context), t.errorFallback && this.shadowRoot && (this.shadowRoot.innerHTML = t.errorFallback(
+          r,
           this.context
         ));
       }
@@ -1712,11 +1733,11 @@ ${r}
     // --- State, props, computed ---
     _initContext(t) {
       try {
-        let r = function(i, s = "") {
+        let n = function(i, s = "") {
           return Array.isArray(i) ? new Proxy(i, {
-            get(o, c, d) {
-              const a = Reflect.get(o, c, d);
-              return typeof a == "function" && typeof c == "string" && [
+            get(o, l, f) {
+              const u = Reflect.get(o, l, f);
+              return typeof u == "function" && typeof l == "string" && [
                 "push",
                 "pop",
                 "shift",
@@ -1724,113 +1745,113 @@ ${r}
                 "splice",
                 "sort",
                 "reverse"
-              ].includes(c) ? function(...y) {
-                const f = a.apply(o, y);
-                if (!n._initializing) {
-                  const w = s || "root";
-                  n._triggerWatchers(w, o), n._render(t);
+              ].includes(l) ? function(...d) {
+                const c = u.apply(o, d);
+                if (!r._initializing) {
+                  const y = s || "root";
+                  r._triggerWatchers(y, o), r._render(t);
                 }
-                return f;
-              } : a;
+                return c;
+              } : u;
             },
-            set(o, c, d) {
-              if (o[c] = d, !n._initializing) {
-                const a = s ? `${s}.${String(c)}` : String(c);
-                n._triggerWatchers(a, d), n._render(t);
+            set(o, l, f) {
+              if (o[l] = f, !r._initializing) {
+                const u = s ? `${s}.${String(l)}` : String(l);
+                r._triggerWatchers(u, f), r._render(t);
               }
               return !0;
             },
-            deleteProperty(o, c) {
-              if (delete o[c], !n._initializing) {
-                const d = s ? `${s}.${String(c)}` : String(c);
-                n._triggerWatchers(d, void 0), n._render(t);
+            deleteProperty(o, l) {
+              if (delete o[l], !r._initializing) {
+                const f = s ? `${s}.${String(l)}` : String(l);
+                r._triggerWatchers(f, void 0), r._render(t);
               }
               return !0;
             }
           }) : i && typeof i == "object" ? (Object.keys(i).forEach((o) => {
-            const c = s ? `${s}.${o}` : o;
-            i[o] = r(i[o], c);
+            const l = s ? `${s}.${o}` : o;
+            i[o] = n(i[o], l);
           }), new Proxy(i, {
-            set(o, c, d) {
-              const a = s ? `${s}.${String(c)}` : String(c);
-              return o[c] = r(d, a), n._initializing || (n._triggerWatchers(
-                a,
-                o[c]
-              ), n._render(t)), !0;
+            set(o, l, f) {
+              const u = s ? `${s}.${String(l)}` : String(l);
+              return o[l] = n(f, u), r._initializing || (r._triggerWatchers(
+                u,
+                o[l]
+              ), r._render(t)), !0;
             },
-            get(o, c, d) {
-              return Reflect.get(o, c, d);
+            get(o, l, f) {
+              return Reflect.get(o, l, f);
             }
           })) : i;
         };
-        const n = this;
-        return r({ ...t.state });
+        const r = this;
+        return n({ ...t.state });
       } catch {
         return {};
       }
     }
     _initWatchers(t) {
       if (t.watch)
-        for (const [r, n] of Object.entries(t.watch)) {
+        for (const [n, r] of Object.entries(t.watch)) {
           let i, s = {};
-          if (Array.isArray(n) ? (i = n[0], s = n[1] || {}) : i = n, this._watchers.set(r, {
+          if (Array.isArray(r) ? (i = r[0], s = r[1] || {}) : i = r, this._watchers.set(n, {
             callback: i,
             options: s,
-            oldValue: this._getNestedValue(r)
+            oldValue: this._getNestedValue(n)
           }), s.immediate)
             try {
-              const o = this._getNestedValue(r);
+              const o = this._getNestedValue(n);
               i(o, void 0, this.context);
             } catch (o) {
-              console.error(`Error in immediate watcher for "${r}":`, o);
+              console.error(`Error in immediate watcher for "${n}":`, o);
             }
         }
     }
     _getNestedValue(t) {
       return t.split(".").reduce(
-        (r, n) => r?.[n],
+        (n, r) => n?.[r],
         this.context
       );
     }
-    _triggerWatchers(t, r) {
-      const n = (s, o) => {
+    _triggerWatchers(t, n) {
+      const r = (s, o) => {
         if (s === o) return !0;
         if (typeof s != typeof o || typeof s != "object" || s === null || o === null) return !1;
         if (Array.isArray(s) && Array.isArray(o))
-          return s.length !== o.length ? !1 : s.every((a, u) => n(a, o[u]));
-        const c = Object.keys(s), d = Object.keys(o);
-        return c.length !== d.length ? !1 : c.every((a) => n(s[a], o[a]));
+          return s.length !== o.length ? !1 : s.every((u, p) => r(u, o[p]));
+        const l = Object.keys(s), f = Object.keys(o);
+        return l.length !== f.length ? !1 : l.every((u) => r(s[u], o[u]));
       }, i = this._watchers.get(t);
-      if (i && !n(r, i.oldValue))
+      if (i && !r(n, i.oldValue))
         try {
-          i.callback(r, i.oldValue, this.context), i.oldValue = r;
+          i.callback(n, i.oldValue, this.context), i.oldValue = n;
         } catch (s) {
           console.error(`Error in watcher for "${t}":`, s);
         }
       for (const [s, o] of this._watchers.entries())
         if (o.options.deep && t.startsWith(s + "."))
           try {
-            const c = this._getNestedValue(s);
-            n(c, o.oldValue) || (o.callback(c, o.oldValue, this.context), o.oldValue = c);
-          } catch (c) {
-            console.error(`Error in deep watcher for "${s}":`, c);
+            const l = this._getNestedValue(s);
+            r(l, o.oldValue) || (o.callback(l, o.oldValue, this.context), o.oldValue = l);
+          } catch (l) {
+            console.error(`Error in deep watcher for "${s}":`, l);
           }
     }
     _applyProps(t) {
       try {
-        let r = function(n, i) {
-          return i === Boolean ? n === "true" : i === Number ? Number(n) : n;
+        let n = function(r, i) {
+          return i === Boolean ? r === "true" : i === Number ? Number(r) : r;
         };
         if (!t.props) return;
-        Object.entries(t.props).forEach(([n, i]) => {
-          const s = this.getAttribute(Q(n));
-          s !== null ? this.context[n] = J(
-            r(s, i.type)
-          ) : "default" in i && i.default !== void 0 && (this.context[n] = J(i.default));
+        Object.entries(t.props).forEach(([r, i]) => {
+          const s = this.getAttribute(Q(r));
+          s !== null ? this.context[r] = J(
+            n(s, i.type)
+          ) : "default" in i && i.default !== void 0 && (this.context[r] = J(i.default));
         });
-      } catch (r) {
-        this._hasError = !0, t.onError && t.onError(r, this.context), t.errorFallback && this.shadowRoot && (this.shadowRoot.innerHTML = t.errorFallback(
-          r,
+      } catch (n) {
+        this._hasError = !0, t.onError && t.onError(n, this.context), t.errorFallback && this.shadowRoot && (this.shadowRoot.innerHTML = t.errorFallback(
+          n,
           this.context
         ));
       }
@@ -1839,12 +1860,12 @@ ${r}
 }
 export {
   Ie as component,
-  Ne as createElementClass,
-  ze as createStore,
-  Ve as css,
-  Me as each,
-  Re as eventBus,
-  Be as html,
+  ze as createElementClass,
+  Re as createStore,
+  He as css,
+  Ne as each,
+  Be as eventBus,
+  Me as html,
   Pe as match,
   Oe as when
 };