@jasonshimmy/custom-elements-runtime 0.0.10 → 0.0.11

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

@@ -1,20 +1,20 @@
-function N(e) {
+function Ne(e) {
   let t = new Proxy(e, {
-    set: (i, a, c) => (i[a] = c, s(), !0)
+    set: (o, c, d) => (o[c] = d, s(), !0)
   });
   const r = [];
-  function n(i) {
-    r.push(i), i(t);
+  function n(o) {
+    r.push(o), o(t);
   }
-  function o() {
+  function i() {
     return t;
   }
   function s() {
-    r.forEach((i) => i(t));
+    r.forEach((o) => o(t));
   }
-  return { subscribe: n, getState: o };
+  return { subscribe: n, getState: i };
 }
-class y extends EventTarget {
+class R extends EventTarget {
   handlers = {};
   static instance;
   eventCounters = /* @__PURE__ */ new Map();
@@ -22,7 +22,7 @@ class y extends EventTarget {
    * Returns the singleton instance of GlobalEventBus
    */
   static getInstance() {
-    return y.instance || (y.instance = new y()), y.instance;
+    return R.instance || (R.instance = new R()), R.instance;
   }
   // Enhanced emit method with better typing and event storm protection
   /**
@@ -31,10 +31,10 @@ class y extends EventTarget {
    * @param data - Optional event payload
    */
   emit(t, r) {
-    const n = Date.now(), o = this.eventCounters.get(t);
-    if (!o || n - o.window > 1e3)
+    const n = Date.now(), i = this.eventCounters.get(t);
+    if (!i || n - i.window > 1e3)
       this.eventCounters.set(t, { count: 1, window: n });
-    else if (o.count++, o.count > 50 && (console.error(`Event storm detected for "${t}": ${o.count} events in 1 second. Throttling...`), o.count > 100)) {
+    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;
     }
@@ -45,11 +45,11 @@ class y extends EventTarget {
       cancelable: !0
     }));
     const s = this.handlers[t];
-    s && s.forEach((i) => {
+    s && s.forEach((o) => {
       try {
-        i(r);
-      } catch (a) {
-        console.error(`Error in global event handler for "${t}":`, a);
+        o(r);
+      } catch (c) {
+        console.error(`Error in global event handler for "${t}":`, c);
       }
     });
   }
@@ -93,8 +93,8 @@ class y extends EventTarget {
    */
   once(t, r) {
     return new Promise((n) => {
-      const o = this.on(t, (s) => {
-        o(), r(s), n(s);
+      const i = this.on(t, (s) => {
+        i(), r(s), n(s);
       });
     });
   }
@@ -138,1545 +138,1590 @@ class y extends EventTarget {
     this.eventCounters.clear();
   }
 }
-const w = y.getInstance(), G = typeof window > "u" || typeof document > "u";
-function Z(e) {
-  return {
-    state: e,
-    emit: () => {
-    },
-    // No-op on server
-    onGlobal: () => () => {
-    },
-    offGlobal: () => {
-    },
-    emitGlobal: () => {
-    },
-    render: () => {
-    }
-  };
-}
-function V(e, t = {}) {
-  G || console.warn("[SSR] renderToString should only be used on the server");
-  try {
-    const r = e.state, n = Z(r), o = e.template(r, n);
-    let s = "";
-    t.includeStyles && e.style && (s = `<style>${typeof e.style == "function" ? e.style(r) : e.style}</style>`);
-    const i = t.sanitizeAttributes ? t.sanitizeAttributes(e.attrs || {}) : e.attrs || {}, a = Object.entries(i).map(([u, d]) => `${D(u)}="${D(d)}"`).join(" "), l = `${a ? `<${e.tag} ${a}>` : `<${e.tag}>`}${s}${o}</${e.tag}>`;
-    return t.prettyPrint ? Y(l) : l;
-  } catch (r) {
-    return console.error(`[SSR] Error rendering ${e.tag}:`, r), `<${e.tag}><div style="color: red;">SSR Error: ${X(String(r))}</div></${e.tag}>`;
-  }
-}
-function lt(e, t = {}) {
-  const r = {
-    components: /* @__PURE__ */ new Map(),
-    styles: /* @__PURE__ */ new Set()
-  }, n = [];
-  e.forEach((i) => {
-    if (r.components.set(i.tag, i), i.style) {
-      const c = typeof i.style == "function" ? i.style(i.state) : i.style;
-      r.styles.add(c);
-    }
-    const a = V(i, { ...t, includeStyles: !1 });
-    n.push(a);
-  });
-  const o = Array.from(r.styles).join(`
-`);
-  return { html: n.join(`
-`), styles: o, context: r };
+const je = R.getInstance();
+function P(e, t = {}, r, n) {
+  const i = n ?? t.key;
+  return { tag: e, key: i, props: t, children: r };
 }
-function ut(e) {
-  const t = Array.from(e.components.entries()).map(([r, n]) => ({
-    tag: r,
-    state: n.state
-  }));
-  return `
-<script type="module">
-  // Hydration data from SSR
-  window.__SSR_CONTEXT__ = ${JSON.stringify({ components: t })};
-  
-  // Auto-hydrate when DOM is ready
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', hydrate);
-  } else {
-    hydrate();
-  }
-  
-  function hydrate() {
-    const context = window.__SSR_CONTEXT__;
-    if (!context?.components) return;
-    
-    context.components.forEach(({ tag, state }) => {
-      const elements = document.querySelectorAll(tag);
-      elements.forEach(el => {
-        // Mark as hydrated to prevent re-initialization
-        if (!el.hasAttribute('data-hydrated')) {
-          el.setAttribute('data-hydrated', 'true');
-          // Restore state if component supports it
-          if (el._hydrateWithState) {
-            el._hydrateWithState(state);
-          }
-        }
-      });
-    });
-    
-    // Clean up
-    delete window.__SSR_CONTEXT__;
-  }
-<\/script>`.trim();
+function V(e) {
+  return !!e && typeof e == "object" && (e.type === "AnchorBlock" || e.tag === "#anchor");
 }
-const X = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), D = (e) => e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), Y = (e) => e.replace(/></g, `>
-<`).split(`
-`).map((t) => {
-  const r = (t.match(/^<[^\/]/g) || []).length - (t.match(/<\//g) || []).length;
-  return "  ".repeat(Math.max(0, r)) + t.trim();
-}).join(`
-`);
-function F(e) {
-  return typeof e != "string" ? String(e) : /expression\s*\(|url\s*\(\s*['"]?javascript:/i.test(e) ? "" : e.replace(/[\u0000-\u001F\u007F-\u009F]/g, "").replace(/<|>|"|'|`|;/g, "");
+function z(e) {
+  return typeof e == "object" && e !== null && "tag" in e && !V(e);
 }
-function I(e) {
-  return String(e).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function oe(e, t) {
+  return e.key != null ? e : { ...e, key: t };
 }
-function L(e, t) {
-  if (typeof e != "string" || !t) return String(e);
-  for (const r in t) {
-    if (typeof t[r] == "string" && e === t[r])
-      return I(e);
-    if (Array.isArray(t[r])) {
-      for (const n of t[r])
-        if (n && typeof n == "object") {
-          for (const o in n)
-            if (typeof n[o] == "string" && e === n[o])
-              return I(e);
-        }
-    }
+function se(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("."), C = [...p];
+      let g = f, l = [...C];
+      if (w === "model" && typeof g == "string" && g.includes(".")) {
+        const b = ["trim", "number", "lazy"], m = g.split(".");
+        let h = g;
+        const x = [];
+        for (let S = m.length - 1; S > 0 && b.includes(m[S]); S--)
+          x.unshift(m[S]), h = m.slice(0, S).join(".");
+        g = h, l.push(...x);
+      }
+      s[w] = {
+        value: g,
+        modifiers: l
+      };
+    } else
+      i[a] = f;
   }
-  return String(e);
+  return { props: n, attrs: i, directives: s };
 }
-function T(e, ...t) {
-  function r(n, o, s) {
-    if (Array.isArray(n)) {
-      const i = n.map((a) => r(a, o, s));
-      return i.some((a) => a instanceof Promise) ? Promise.all(i).then((a) => a.join("")) : i.join("");
+function ae(e, t, r) {
+  function n(l, b) {
+    return P("#text", {}, l, b);
+  }
+  let i = "";
+  for (let l = 0; l < e.length; l++)
+    i += e[l], l < t.length && (i += `{{${l}}}`);
+  const s = /<\/?([a-zA-Z0-9-]+)([^>]*)\/?>|{{(\d+)}}|([^<]+)/g, o = [];
+  let c = null, d, a = [], u = null, y = {}, f, w = 0, p = [];
+  function C(l) {
+    !l || typeof l != "object" || V(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(
+          /;?\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])
+        ];
+        y.attrs.class = x.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 (V(l)) {
+      const h = l.key ?? b;
+      let x = l.children;
+      m.push({
+        ...l,
+        key: h,
+        children: x
+      });
+      return;
     }
-    if (typeof n == "function") {
-      const i = r(n(o, s), o, s);
-      return i instanceof Promise, i;
+    if (z(l)) {
+      m.push(oe(l, void 0));
+      return;
     }
-    return n == null ? "" : n instanceof Promise ? n : String(n);
-  }
-  return (n, 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 u = e[c], d = /data-on-[a-z]+="?$/.test(u);
-        l = r(l, n, o), l instanceof Promise ? (i = !0, a.push(l)) : /=\s*"?$/.test(u) && typeof l == "string" && !d ? (l = l.replace(/"/g, "&quot;").replace(/'/g, "&#39;"), s += l) : !d && !/=\s*"?$/.test(u) ? s += L(l, n) : s += l;
+    if (Array.isArray(l)) {
+      if (l.length === 0) return;
+      for (let h = 0; h < l.length; h++) {
+        const x = l[h];
+        V(x) || z(x) || Array.isArray(x) ? g(x, `${b}-${h}`) : x !== null && typeof x == "object" ? C(x) : m.push(n(String(x), `${b}-${h}`));
       }
-    return i ? Promise.all(a).then((c) => {
-      let l = "", u = 0;
-      for (let d = 0; d < e.length; d++)
-        if (l += e[d], d < t.length) {
-          let f = t[d];
-          const h = e[d], m = /data-on-[a-z]+="?$/.test(h);
-          f = r(f, n, o), f instanceof Promise ? l += c[u++] : /=\s*"?$/.test(h) && typeof f == "string" && !m ? (f = f.replace(/"/g, "&quot;").replace(/'/g, "&#39;"), l += f) : !m && !/=\s*"?$/.test(h) ? l += L(f, n) : l += f;
+      return;
+    }
+    if (l !== null && typeof l == "object") {
+      C(l);
+      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: S
+      } = se(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(S))
+        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;
+          let E = [];
+          if (typeof A == "string")
+            E = A.split(/\s+/).filter(Boolean);
+          else if (Array.isArray(A)) {
+            for (const L of A)
+              if (typeof L == "string")
+                E.push(...L.split(/\s+/).filter(Boolean));
+              else if (L && typeof L == "object")
+                for (const [N, M] of Object.entries(L))
+                  M && E.push(...N.split(/\s+/).filter(Boolean));
+          } else if (A && typeof A == "object")
+            for (const [L, N] of Object.entries(A))
+              N && E.push(...L.split(/\s+/).filter(Boolean));
+          const B = k.attrs.class || "", O = [
+            .../* @__PURE__ */ new Set([
+              ...B.split(/\s+/).filter(Boolean),
+              ...E
+            ])
+          ];
+          k.attrs.class = O.join(" ");
+        } else if (_ === "style") {
+          const A = $.value;
+          let E = "";
+          if (typeof A == "string")
+            E = A;
+          else if (A && typeof A == "object") {
+            const O = [];
+            for (const [L, N] of Object.entries(A))
+              if (N != null && N !== "") {
+                const M = L.replace(
+                  /[A-Z]/g,
+                  (ie) => `-${ie.toLowerCase()}`
+                ), ne = [
+                  "width",
+                  "height",
+                  "top",
+                  "right",
+                  "bottom",
+                  "left",
+                  "margin",
+                  "margin-top",
+                  "margin-right",
+                  "margin-bottom",
+                  "margin-left",
+                  "padding",
+                  "padding-top",
+                  "padding-right",
+                  "padding-bottom",
+                  "padding-left",
+                  "font-size",
+                  "line-height",
+                  "border-width",
+                  "border-radius",
+                  "min-width",
+                  "max-width",
+                  "min-height",
+                  "max-height"
+                ];
+                let Q = String(N);
+                typeof N == "number" && ne.includes(M) && (Q = `${N}px`), O.push(`${M}: ${Q}`);
+              }
+            E = O.join("; ") + (O.length > 0 ? ";" : "");
+          }
+          const B = k.attrs.style || "";
+          k.attrs.style = B + (B && !B.endsWith(";") ? "; " : "") + E;
+        }
+      const v = {};
+      for (const [_, $] of Object.entries(S))
+        ["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 S = Number(x[1]), k = t[S], v = `interp-${S}`;
+          g(k, v);
+        } else {
+          const S = `text-${w++}`;
+          b.push(n(h, S));
         }
-      return l;
-    }) : s;
-  };
-}
-function dt(e, ...t) {
-  const r = "compiled-" + Math.random().toString(36).slice(2);
-  function n(s, i, a) {
-    return Array.isArray(s) ? s.map((c) => n(c, i, a)).join("") : typeof s == "function" ? n(s(i, a), i, a) : s == null ? "" : String(s);
-  }
-  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 u = e[c], d = /data-on-[a-z]+="?$/.test(u);
-        l = n(l, s, i), /=\s*"?$/.test(u) && typeof l == "string" && !d ? (l = l.replace(/"/g, "&quot;").replace(/'/g, "&#39;"), a += l) : !d && !/=\s*"?$/.test(u) ? a += L(l, s) : a += l ?? "";
       }
-    return a;
-  };
-  return o.id = r, o;
+    }
+  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
+      // 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
+    );
+    return l.length === 1 ? l[0] : l;
+  }
+  return P("div", {}, "", "fallback-root");
 }
-function J(e, ...t) {
-  let r = "";
-  for (let n = 0; n < e.length; n++)
-    r += e[n], n < t.length && (r += F(t[n]));
-  return r;
+function ze(e, ...t) {
+  const r = t[t.length - 1], n = typeof r == "object" && r && !Array.isArray(r) ? r : void 0;
+  return ae(e, t, n);
 }
-function ft(e) {
-  return Object.keys(e).filter((t) => e[t]).join(" ");
+function Re(e, t) {
+  return H(e ? t : [], "when-block");
 }
-function ht(e) {
-  return Object.entries(e).map(([t, r]) => {
-    const n = t.replace(/[^a-zA-Z0-9\-]/g, ""), o = typeof r == "string" ? F(r) : r;
-    return `${n}: ${o}`;
-  }).join("; ");
+function Be(e, t) {
+  return e.map((r, n) => {
+    const i = typeof r == "object" ? r?.key ?? r?.id ?? `idx-${n}` : String(r);
+    return H(t(r, n), `each-${i}`);
+  });
 }
-function Q(e, t, r) {
-  const [n, ...o] = r.split("|").map((a) => a.trim());
-  if (!n || n === "__proto__" || n === "constructor" || n === "prototype") return;
-  function s(a, c, l) {
-    const u = c.split(".");
-    let d = a;
-    for (let f = 0; f < u.length - 1; f++)
-      u[f] in d || (d[u[f]] = {}), d = d[u[f]];
-    d[u[u.length - 1]] = l;
-  }
-  const i = (a) => {
-    let c;
-    if (e instanceof HTMLInputElement && e.type === "checkbox") {
-      c = e.value;
-      const l = e.getAttribute("data-true-value"), u = e.getAttribute("data-false-value");
-      let d = Array.isArray(t[n]) ? t[n] : void 0;
-      if (d) {
-        if (e.checked)
-          d.includes(c) || d.push(c);
-        else {
-          const f = d.indexOf(c);
-          f !== -1 && d.splice(f, 1);
-        }
-        s(t, n, [...d]);
-      } else
-        l !== null || u !== null ? e.checked ? s(t, n, l) : s(t, n, u !== null ? u : !1) : s(t, n, e.checked);
-    } else e instanceof HTMLInputElement && e.type === "radio" ? (c = e.value, s(t, n, 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="${r}"]`) : []).forEach((u) => {
-      u.checked = u.value === String(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, n, c));
-    if ("_vnode" in e && typeof e._vnode == "object" && e._vnode?.props && (e._vnode.props.value = c), a.type === "input" && (e._isDirty = !0), a.type === "keydown" && a.key === "Enter" && (e._isDirty = !1, e instanceof HTMLElement && e.isConnected)) {
-      let l = e.parentElement;
-      for (; l && !(l instanceof HTMLElement && l.shadowRoot); )
-        l = l.parentElement;
-      l && typeof l == "object" && l !== null && "render" in l && typeof l.render == "function" && l.render();
+function Oe() {
+  const e = [];
+  return {
+    when(t, r) {
+      return e.push([t, r]), this;
+    },
+    otherwise(t) {
+      return e.push([!0, t]), this;
+    },
+    done() {
+      return le(...e);
     }
-    a.type === "blur" && (e._isDirty = !1);
   };
-  e.addEventListener("input", i), e.addEventListener("change", i), e.addEventListener("keydown", i), e.addEventListener("blur", i);
 }
-const j = (() => {
-  try {
-    if (typeof process < "u" && process.env)
-      return process.env.NODE_ENV === "development";
-  } catch {
-  }
-  return typeof window < "u" ? window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" : !1;
-})();
-function pt(e, t = {}) {
-  const { development: r = j, cache: n = !0, optimize: o = !0 } = t, s = U(e);
-  if (n && S.has(s)) {
-    if (r) {
-      const i = v.get(s) || {
-        compilationTime: 0,
-        renderTime: 0,
-        updateTime: 0,
-        cacheHits: 0,
-        cacheMisses: 0
-      };
-      i.cacheHits++, v.set(s, i);
-    }
-    return S.get(s);
-  }
-  if (r) {
-    const i = v.get(s) || {
-      compilationTime: 0,
-      renderTime: 0,
-      updateTime: 0,
-      cacheHits: 0,
-      cacheMisses: 0
-    };
-    i.cacheMisses++, v.set(s, i);
-  }
-  try {
-    const i = et(e, { development: r, optimize: o });
-    return n && S.set(s, i), i;
-  } catch (i) {
-    return r && (console.error("[Template Compiler] Error compiling template:", i), console.error("[Template Compiler] Template:", e)), {
-      statics: [e],
-      dynamics: [],
-      fragment: null,
-      id: s,
-      hasDynamics: !1,
-      render: () => e
-    };
+function le(...e) {
+  for (let t = 0; t < e.length; t++) {
+    const [r, n] = e[t];
+    if (r) return [H(n, `whenChain-branch-${t}`)];
   }
+  return [H([], "whenChain-empty")];
 }
-function tt(e, t) {
-  if (typeof document > "u")
-    return [0];
-  try {
-    let r = function(a, c = []) {
-      if (a.nodeType === Node.TEXT_NODE) {
-        if (a.textContent?.includes(t))
-          return c;
-      } else if (a.nodeType === Node.ELEMENT_NODE) {
-        let l = 0;
-        for (let u = 0; u < a.childNodes.length; u++) {
-          const d = a.childNodes[u], f = r(d, [...c, l]);
-          if (f)
-            return f;
-          l++;
-        }
-      }
-      return null;
-    };
-    const s = new DOMParser().parseFromString(`<div>${e}</div>`, "text/html").body.firstElementChild;
-    return r(s) || [0];
-  } catch (r) {
-    return j && console.warn("[Template Compiler] Error finding DOM path for placeholder:", t, r), [0];
-  }
+function H(e, t) {
+  const r = e ? Array.isArray(e) ? e.filter(Boolean) : [e].filter(Boolean) : [];
+  return {
+    tag: "#anchor",
+    key: t,
+    children: r
+  };
 }
-function et(e, t) {
-  return new rt(e, t).compile();
+function j(e, t) {
+  return t.split(".").reduce((r, n) => r?.[n], e);
 }
-class rt {
-  template;
-  options;
-  dynamics = [];
-  statics = [];
-  constructor(t, r) {
-    this.template = t, this.options = r;
-  }
-  compile() {
-    this.parseTemplate();
-    const t = this.createStaticFragment(), r = U(this.template), n = (o, s) => {
-      let i = "";
-      for (let a = 0; a < this.statics.length; a++)
-        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 u = l.getValue(o, s);
-              return u instanceof Promise ? u : Promise.resolve(u);
-            })).then((l) => {
-              let u = "";
-              for (let d = 0; d < this.statics.length; d++)
-                u += this.statics[d], d < l.length && (u += l[d]);
-              return u;
-            });
-          i += c;
+function X(e, t, r) {
+  const n = t.split("."), i = n.pop();
+  if (!i) return;
+  const s = n.reduce((o, c) => (c in o || (o[c] = {}), o[c]), e);
+  s[i] = r;
+}
+function ce(e, t, r, n, 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 j(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);
+    } else {
+      const g = o?.getAttribute("true-value") || !0, l = y === g;
+      o && o.checked !== l && (r.checked = l);
+    }
+  else if (f === "radio") {
+    const g = n?.value || "", l = y === g;
+    o && o.checked !== l && (r.checked = l);
+  } else if (f === "select")
+    if (o && o.hasAttribute("multiple")) {
+      const g = o, l = Array.isArray(y) ? y : [];
+      setTimeout(() => {
+        Array.from(g.options).forEach((b) => {
+          const m = l.includes(b.value);
+          b.selected !== m && (b.selected = m);
+        });
+      }, 0);
+    } else
+      setTimeout(() => {
+        o instanceof HTMLSelectElement && o.value !== String(y) && (o.value = String(y));
+      }, 0);
+  else {
+    const g = String(y ?? "");
+    (!o || o.value !== g) && (r.value = y);
+  }
+  const p = c || f === "checkbox" || f === "radio" || f === "select" ? "change" : "input", C = (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")
+      if (Array.isArray(b)) {
+        const k = l.getAttribute("value") || "", v = [...b];
+        if (l.checked)
+          v.includes(k) || v.push(k);
+        else {
+          const _ = v.indexOf(k);
+          _ > -1 && v.splice(_, 1);
         }
-      return i;
-    };
-    return {
-      statics: this.statics,
-      dynamics: this.dynamics,
-      fragment: t,
-      id: r,
-      hasDynamics: this.dynamics.length > 0,
-      render: n
-    };
-  }
-  parseTemplate() {
-    const t = /\{\{([^}]+)\}\}/g;
-    let r = 0, n;
-    for (; (n = t.exec(this.template)) !== null; ) {
-      const s = this.template.slice(r, n.index);
-      this.statics.push(s);
-      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") {
-        const u = s.match(/style\s*=\s*"?([^:;]+):\s*$/);
-        u && (c = u[1].trim());
+        m = v;
+      } else {
+        const k = l.getAttribute("true-value") || !0, v = l.getAttribute("false-value") || !1;
+        m = l.checked ? k : v;
       }
-      const l = n[1].trim();
-      this.analyzeDynamicExpression(l, this.dynamics.length, a, c), r = n.index + n[0].length;
+    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 (d && (m = m.trim()), a) {
+      const k = Number(m);
+      isNaN(k) || (m = k);
     }
-    const o = this.template.slice(r);
-    this.statics.push(o);
-  }
-  analyzeDynamicExpression(t, r, n, o) {
-    let s = "text", i;
-    n ? n === "class" ? (s = "class", i = "class") : n === "style" ? (s = "style", i = o || "style") : n === "value" ? (s = "property", i = "value") : (s = "attribute", i = n) : 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_${r}__`, c = this.statics.join(a);
-    let l = tt(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: i,
-      getValue: this.createValueGetter(t)
-    });
-  }
-  createValueGetter(t) {
-    return (r, n) => {
-      try {
-        let o;
-        if (t && typeof t == "function")
-          o = t(r);
-        else if (typeof t == "string" && t.startsWith("state.")) {
-          const s = t.slice(6);
-          o = r[s];
-        } else typeof t == "string" && /^[a-zA-Z0-9_$]+$/.test(t) ? o = r[t] : (typeof t == "string" && t.includes("("), o = "");
-        return o;
-      } catch (o) {
-        return this.options.development && console.warn(`[Template Compiler] Error evaluating expression: ${t}`, o), "";
-      }
+    const h = s._state || s, x = j(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, X(h, e, m), setTimeout(() => {
+        k._modelUpdating = !1;
+      }, 0), s._requestRender && s._requestRender();
+    }
+  };
+  if (i[p] = C, f === "text" || f === "textarea") {
+    const g = () => {
+      i._isComposing = !0;
+    }, l = (b) => {
+      i._isComposing = !1;
+      const m = b.target;
+      setTimeout(() => {
+        if (m) {
+          let h = m.value;
+          if (d && (h = h.trim()), a) {
+            const v = Number(h);
+            isNaN(v) || (h = v);
+          }
+          const x = s._state || s, S = j(x, e);
+          (Array.isArray(h) && Array.isArray(S) ? JSON.stringify([...h].sort()) !== JSON.stringify([...S].sort()) : h !== S) && (m && (m._modelUpdating = !0, setTimeout(() => {
+            m._modelUpdating = !1;
+          }, 0)), X(x, e, h), s._requestRender && s._requestRender());
+        }
+      }, 0);
     };
+    i.compositionstart = g, i.compositionend = l;
   }
-  createStaticFragment() {
-    if (typeof document > "u")
-      return null;
+}
+function fe(e, t, r, n) {
+  if (n)
     try {
-      const t = this.statics.join("");
-      if (!t.trim())
-        return null;
-      const n = new DOMParser().parseFromString(t, "text/html"), o = document.createDocumentFragment();
-      for (; n.body.firstChild; )
-        o.appendChild(n.body.firstChild);
-      return o;
-    } catch (t) {
-      return this.options.development && console.warn("[Template Compiler] Could not create static fragment:", t), null;
+      const i = JSON.parse(e);
+      if (typeof i == "object")
+        for (const [s, o] of Object.entries(i))
+          t[s] = o;
+    } catch {
+      const i = j(n, e);
+      r[e] = i;
     }
-  }
 }
-function R(e, t) {
-  try {
-    if (t.length === 1 && t[0] === 0 && e instanceof Element)
-      return e;
-    let r = e;
-    for (let n = 0; n < t.length; n++) {
-      const o = t[n];
-      if (!r.childNodes || r.childNodes.length <= o)
-        return null;
-      r = r.childNodes[o];
-    }
-    return r;
-  } catch {
-    return null;
-  }
+function de(e, t, r) {
+  if (!r) return;
+  const n = j(r, e), i = t.style || "", s = n ? "" : "none";
+  if (i) {
+    const o = i.split(";").filter(Boolean), c = o.findIndex(
+      (d) => d.trim().startsWith("display:")
+    );
+    c >= 0 ? o[c] = `display: ${s}` : o.push(`display: ${s}`), t.style = o.join("; ");
+  } else
+    t.style = `display: ${s}`;
 }
-function P(e, t, r) {
-  let n;
-  return e.fragment && !e.hasDynamics ? n = e.fragment.cloneNode(!0) : n = st(e, t, r), n;
+function ue(e, t, r) {
+  if (!r) return;
+  const n = j(r, 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));
+  const s = t.class || "", o = s ? `${s} ${i.join(" ")}`.trim() : i.join(" ");
+  o && (t.class = o);
 }
-function nt(e, t, r, n, o) {
-  if (e.hasDynamics)
-    for (const s of e.dynamics)
-      try {
-        const i = s.getValue(r, n);
-        if (o !== void 0 && s.getValue(o, n) === i)
-          continue;
-        K(t, s, i);
-      } catch (i) {
-        console.warn("[Template Compiler] Error applying update:", i);
+function he(e, t, r) {
+  let n;
+  if (typeof e == "string") {
+    if (!r) return;
+    n = j(r, e);
+  } else
+    n = e;
+  let i = "";
+  if (typeof n == "string")
+    i = n;
+  else if (n && typeof n == "object") {
+    const o = [];
+    for (const [c, d] of Object.entries(n))
+      if (d != null && d !== "") {
+        const a = c.replace(
+          /[A-Z]/g,
+          (f) => `-${f.toLowerCase()}`
+        ), u = [
+          "width",
+          "height",
+          "top",
+          "right",
+          "bottom",
+          "left",
+          "margin",
+          "margin-top",
+          "margin-right",
+          "margin-bottom",
+          "margin-left",
+          "padding",
+          "padding-top",
+          "padding-right",
+          "padding-bottom",
+          "padding-left",
+          "font-size",
+          "line-height",
+          "border-width",
+          "border-radius",
+          "min-width",
+          "max-width",
+          "min-height",
+          "max-height"
+        ];
+        let y = String(d);
+        typeof d == "number" && u.includes(a) && (y = `${d}px`), o.push(`${a}: ${y}`);
       }
-}
-function st(e, t, r) {
-  let n = "";
-  for (let a = 0; a < e.statics.length; a++)
-    if (n += e.statics[a], a < e.dynamics.length) {
-      const c = e.dynamics[a];
-      if (c.type === "text" || c.type === "attribute") {
-        const l = c.getValue(t, r);
-        n += String(l ?? "");
-      } else (c.type === "property" || c.type === "class" || c.type === "style") && (n += "");
-    }
-  if (typeof document > "u")
-    return new DocumentFragment();
-  const s = new DOMParser().parseFromString(n, "text/html"), i = document.createDocumentFragment();
-  for (; s.body.firstChild; )
-    i.appendChild(s.body.firstChild);
-  for (const a of e.dynamics) {
-    const c = a.getValue(t, r), l = R(i, a.path);
-    K(l, a, c);
+    i = o.join("; ") + (o.length > 0 ? ";" : "");
   }
-  return i;
+  const s = t.style || "";
+  t.style = s + (s && !s.endsWith(";") ? "; " : "") + i;
 }
-function K(e, t, r) {
-  try {
-    if (t.type === "text") {
-      const o = document.createTreeWalker(
-        e,
-        NodeFilter.SHOW_TEXT
-      );
-      let s = !1, i;
-      for (; i = o.nextNode(); ) {
-        const c = i.textContent || "";
-        if (c.includes("Count: ")) {
-          const l = c.replace(/Count: \d+/, `Count: ${r}`);
-          i.textContent = l, s = !0;
-        }
-      }
-      if (s) return;
-      const a = R(e, t.path);
-      a && a.nodeType === Node.TEXT_NODE && (a.textContent = r == null ? "" : String(r));
-      return;
-    }
-    const n = R(e, t.path);
-    if (!n)
-      return;
-    switch (t.type) {
-      case "attribute":
-        if (n.nodeType === Node.ELEMENT_NODE && t.target) {
-          const o = n;
-          r == null || r === "" ? o.removeAttribute(t.target) : o.setAttribute(t.target, String(r));
-        }
+function re(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) {
+      case "model":
+        ce(
+          typeof a == "string" ? a : String(a),
+          u,
+          i,
+          s,
+          o,
+          t,
+          r
+        );
+        break;
+      case "bind":
+        fe(a, i, s, t);
         break;
-      case "property":
-        n.nodeType === Node.ELEMENT_NODE && t.target && (n[t.target] = r ?? "", n.setAttribute(t.target, r == null ? "" : String(r)));
+      case "show":
+        de(a, s, t);
         break;
       case "class":
-        if (n.nodeType === Node.ELEMENT_NODE && t.target) {
-          const o = n;
-          o.className = r == null ? "" : String(r), o.setAttribute("class", r == null ? "" : String(r));
-        }
+        ue(a, s, t);
         break;
       case "style":
-        if (n.nodeType === Node.ELEMENT_NODE && t.target) {
-          const o = n;
-          o.style[t.target] = r == null ? "" : String(r), o.setAttribute("style", r == null ? `${t.target}:` : `${t.target}:${r}`);
-        }
+        he(a, s, t);
         break;
-      default:
-        throw new Error(`Unknown update type: ${t.type}`);
     }
-  } catch (n) {
-    (typeof globalThis < "u" ? globalThis.isDevelopment : j) && console.warn("[Template Compiler] Error applying update:", t, n);
   }
+  return { props: i, attrs: s, listeners: o };
 }
-const S = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Map();
-function U(e) {
-  let t = 0;
-  for (let r = 0; r < e.length; r++) {
-    const n = e.charCodeAt(r);
-    t = (t << 5) - t + n, t = t & t;
+function J(e, t) {
+  if (Array.isArray(e)) {
+    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 d = c, a = 1;
+      for (; s.has(d); )
+        d = `${c}#${a++}`;
+      s.add(d);
+      let u = o.children;
+      return Array.isArray(u) && (u = J(u, d)), { ...o, key: d, children: u };
+    });
   }
-  return `tpl_${Math.abs(t).toString(36)}`;
-}
-function q(e, t, r, n, o) {
-  return n && o ? `${t}.${e}[${r}]:${n}:${o}` : n ? `${t}.${e}[${r}]:${n}` : `${t}.${e}[${r}]`;
+  const r = e;
+  let n = r.props?.key ?? r.key ?? t, i = r.children;
+  return Array.isArray(i) && (i = J(i, n)), { ...r, key: n, children: i };
 }
-function z(e, t, r) {
-  if (!(!e || !(e instanceof Element)) && e.contains(r) && r.parentNode === e)
-    try {
-      e.replaceChild(t, r);
-    } catch (n) {
-      console.error("[VDOM] safeReplaceChild: error replacing child", n, {
-        parent: e,
-        newChild: t,
-        oldChild: r,
-        parentHTML: e.outerHTML,
-        newChildHTML: t.outerHTML,
-        oldChildHTML: r.outerHTML
-      });
-    }
-}
-function g(e) {
-  if (e.type === "#whitespace")
-    return null;
-  if (e.type === "#text") {
-    const r = document.createTextNode(e.props.nodeValue ?? "");
-    return e.dom = r, r;
-  }
-  const t = document.createElement(e.type);
-  for (const [r, n] of Object.entries(e.props))
-    r === "value" && t instanceof HTMLInputElement ? t.type === "radio" ? t.setAttribute("value", n) : (t.type, t.value = n, t.setAttribute("value", n)) : t.setAttribute(r, n);
-  e.dom = t;
-  for (const r of e.children) {
-    const n = g(r);
-    n && t.appendChild(n);
+function pe(e, t, r, n) {
+  const i = r.directives ?? {}, s = re(
+    i,
+    n,
+    e,
+    r.attrs
+  ), o = {
+    ...t.props,
+    ...r.props,
+    ...s.props
+  }, c = {
+    ...t.attrs,
+    ...r.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)));
+  }
+  for (const [f, w] 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)));
   }
-  return t;
 }
-function it(e) {
-  const t = document.createElement("template");
-  t.innerHTML = e.trim();
-  const r = Array.from(t.content.childNodes);
-  return r.length === 1 ? $(r[0]) : {
-    type: "#fragment",
-    key: void 0,
-    props: {},
-    children: r.map((o, s) => $(o, "#fragment", s)),
-    dom: void 0
+function T(e, t) {
+  if (typeof e == "string")
+    return document.createTextNode(e);
+  if (e.tag === "#text") {
+    const a = document.createTextNode(
+      typeof e.children == "string" ? e.children : ""
+    );
+    return e.key != null && (a.key = e.key), a;
+  }
+  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 r = document.createElement(e.tag);
+  e.key != null && (r.key = e.key);
+  const { props: n = {}, attrs: i = {}, directives: s = {} } = e.props ?? {}, o = re(s, t, r, i), c = {
+    ...n,
+    ...o.props
+  }, d = {
+    ...i,
+    ...o.attrs
   };
-}
-function $(e, t = "", r = 0) {
-  if (!e)
-    return { type: "#unknown", key: void 0, props: {}, children: [], dom: void 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: q("#text", t, r), props: { nodeValue: e.nodeValue }, children: [], dom: e };
-  if (e.nodeType === Node.ELEMENT_NODE) {
-    const n = e, o = {};
-    Array.from(n.attributes).forEach((l) => {
-      o[l.name] = l.value;
-    });
-    const s = n.tagName.toLowerCase();
-    let i;
-    if ((s === "input" || s === "select" || s === "textarea") && n.hasAttribute("data-model")) {
-      const l = n.getAttribute("data-model"), u = n.getAttribute("type") ?? "";
-      i = `${s}:${l}:${u}`, o["data-uid"] = i, n.setAttribute("data-uid", i);
-      let d = n.getAttribute("value"), f = n.getAttribute("checked");
-      d && (o.value = d), f && (o.checked = f);
-    } else s === "input" || s === "textarea" || s === "select" || n.hasAttribute("contenteditable") ? (i = `${s}:${t}:${r}`, o["data-uid"] = i, n.setAttribute("data-uid", i)) : (i = q(s, t, r), s === "li" && (o["data-uid"] = i, n.setAttribute("data-uid", i)));
-    const a = Array.from(n.childNodes).map((l, u) => $(l, i, u));
-    return {
-      type: s,
-      key: i,
-      props: o,
-      children: a,
-      dom: n
-    };
+  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);
+    else {
+      if (a.startsWith("on") && u === void 0)
+        continue;
+      u == null || u === !1 ? r.removeAttribute(a) : r.setAttribute(a, String(u));
+    }
   }
-  return { type: "#unknown", key: void 0, props: {}, children: [], dom: void 0 };
+  for (const [a, u] of Object.entries(
+    o.listeners || {}
+  ))
+    r.addEventListener(a, u);
+  if (Array.isArray(e.children))
+    for (const a of e.children)
+      r.appendChild(T(a, t));
+  else typeof e.children == "string" && (r.textContent = e.children);
+  return r;
 }
-function M(e, t, r) {
-  if (!t || !r) return;
-  function n(c) {
-    return !!c && c.type !== "#whitespace" && !(c.type === "#text" && (!c.props?.nodeValue || /^\s*$/.test(c.props.nodeValue)));
-  }
-  const o = Array.isArray(t.children) ? t.children.filter(n) : [], s = Array.isArray(r.children) ? r.children.filter(n) : [], i = r.type === "input" || r.type === "select" || r.type === "textarea";
-  if (t.type !== r.type || t.key !== r.key) {
-    const c = g(r);
-    if (c instanceof Node && t.dom instanceof Node && e.contains(t.dom)) {
-      if (z(e, c, t.dom), i && r.props && e.firstChild instanceof HTMLInputElement) {
-        const l = e.firstChild;
-        l.type === "radio" || l.type, l.value = r.props.value, l.setAttribute("value", r.props.value), "checked" in r.props && (l.checked = r.props.checked === !0 || r.props.checked === "true");
-      }
-    } else if (c instanceof Node)
-      if (c) {
-        if (e.appendChild(c), r.dom = c, i && r.props && e.firstChild instanceof HTMLInputElement) {
-          const l = e.firstChild;
-          l.type === "radio" ? l.setAttribute("value", r.props.value) : (l.type, l.value = r.props.value, l.setAttribute("value", r.props.value)), "checked" in r.props && (l.checked = r.props.checked === !0 || r.props.checked === "true");
-        }
-      } else
-        r.dom = void 0;
-    else
-      r.dom = void 0;
-    return;
-  }
-  if (i && t.dom instanceof HTMLElement && r.props) {
-    for (const [c, l] of Object.entries(r.props))
-      if (c === "value" && e.firstChild instanceof HTMLInputElement)
-        e.firstChild.value = l;
-      else if (c === "checked" && e.firstChild instanceof HTMLInputElement)
-        e.firstChild.checked = l === !0 || l === "true";
-      else if (c in t.dom)
-        try {
-          t.dom[c] = l;
-        } catch {
-        }
-      else
-        t.dom.setAttribute(c, l);
-    for (let c = r.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);
+function ge(e, t, r, n) {
+  if (typeof r == "string") {
+    e.textContent !== r && (e.textContent = r);
     return;
   }
-  const a = t.dom;
-  if (a && a instanceof Element && r.props) {
-    const c = a.tagName.toLowerCase() === "input" ? a.getAttribute("type") : void 0, l = a.tagName.includes("-");
-    for (const [u, d] of Object.entries(r.props))
-      if (!(c === "radio" && u === "value")) {
-        if (c === "checkbox" && u === "value") {
-          a.setAttribute("value", d);
-          continue;
-        }
-        a.setAttribute(u, d);
+  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, C) {
+    const g = [];
+    let l = f.nextSibling;
+    for (; l && l !== w; )
+      g.push(l), l = l.nextSibling;
+    const b = Array.isArray(p) ? p : [];
+    if (C.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) {
+        const _ = v.key;
+        _ != null && x.set(_, v);
       }
-    if (l)
-      for (const [u, d] of Object.entries(r.props))
-        a.setAttribute(u, d);
-    for (const u of Array.from(a.attributes).map((d) => d.name))
-      if (!(u in r.props)) {
-        if (c === "radio" && u === "value" || c === "checkbox" && u === "value") continue;
-        a.removeAttribute(u);
+      const S = /* @__PURE__ */ new Set();
+      let k = f.nextSibling;
+      for (const v of C) {
+        let _;
+        if (v.key != null && x.has(v.key)) {
+          const $ = h.get(v.key);
+          _ = I(
+            x.get(v.key),
+            $,
+            v,
+            n
+          ), S.add(_), _ !== k && e.contains(_) && e.insertBefore(_, k);
+        } else
+          _ = T(v, n), e.insertBefore(_, k), S.add(_);
+        k = _.nextSibling;
       }
-  }
-  if (r.type === "#text") {
-    if (a && a.nodeType === Node.TEXT_NODE)
-      a.nodeValue !== r.props.nodeValue && (a.nodeValue = r.props.nodeValue), r.dom = a;
-    else {
-      const c = document.createTextNode(r.props.nodeValue ?? "");
-      a && e.contains(a) && a.parentNode === e ? z(e, c, a) : e.appendChild(c), r.dom = c;
-    }
-    return;
-  }
-  if (a instanceof Element) {
-    const c = /* @__PURE__ */ new Map();
-    o.forEach((f) => f.key && c.set(f.key, f));
-    const l = new Set(s.map((f) => f.key));
-    let u = [];
-    for (let f = 0; f < s.length; f++) {
-      const h = s[f], m = h.key ? c.get(h.key) : o[f];
-      let p;
-      const C = h.type === "input" || h.type === "select" || h.type === "textarea";
-      if (m && m.dom && (!C || m.type === h.type && m.key === h.key))
-        M(a, m, h), p = m.dom;
-      else {
-        const E = g(h);
-        if (p = E instanceof Node ? E : void 0, p) {
-          if ((p instanceof Element || p instanceof Node) && p.contains(a))
-            throw console.error("[VDOM] Attempted to insert a parent into its own child:", {
-              parentTag: a.tagName,
-              childTag: p.tagName,
-              parentUid: a.getAttribute?.("data-uid"),
-              childUid: p.getAttribute?.("data-uid"),
-              parent: a,
-              child: p
-            }), new Error("VDOM patch error: Attempted to insert a parent into its own child");
-          a.insertBefore(p, a.childNodes[f] || null);
-        }
+      for (const v of g)
+        !S.has(v) && e.contains(v) && e.removeChild(v);
+    } else {
+      const h = Math.min(
+        b.length,
+        C.length
+      );
+      for (let x = 0; x < h; x++) {
+        const S = b[x], k = C[x], v = I(g[x], S, k, n);
+        v !== g[x] && (e.insertBefore(v, g[x]), e.removeChild(g[x]));
       }
-      h.dom = p, p && u.push(p);
+      for (let x = h; x < C.length; x++)
+        e.insertBefore(T(C[x], n), w);
+      for (let x = h; x < g.length; x++)
+        e.removeChild(g[x]);
     }
-    for (o.forEach((f) => {
-      !l.has(f.key) && f.dom && a.contains(f.dom) && a.removeChild(f.dom);
-    }); a.childNodes.length > s.length; )
-      a.removeChild(a.lastChild);
-    for (let f = 0; f < u.length; f++)
-      if (a.childNodes[f] !== u[f]) {
-        if ((u[f] instanceof Element || u[f] instanceof Node) && u[f].contains(a))
-          throw new Error("VDOM patch error: Attempted to insert a parent into its own child");
-        a.insertBefore(u[f], a.childNodes[f] || null);
-      }
-    r.dom = a;
-    const d = new Set(s.map((f) => f.key));
-    Array.from(a.childNodes).forEach((f, h) => {
-      const m = f.getAttribute?.("data-uid");
-      (m && !d.has(m) || h >= s.length) && a.removeChild(f);
-    });
   }
-}
-const ot = (e) => e ? typeof URLSearchParams > "u" ? {} : Object.fromEntries(new URLSearchParams(e)) : {}, b = (e, t) => {
-  for (const r of e) {
-    const n = [], o = r.path.replace(/:[^/]+/g, (a) => (n.push(a.slice(1)), "([^/]+)")), s = new RegExp(`^${o}$`), i = t.match(s);
-    if (i) {
-      const a = {};
-      return n.forEach((c, l) => {
-        a[c] = i[l + 1];
-      }), { route: r, params: a };
+  for (const f of r) {
+    let w;
+    if (f.tag === "#anchor") {
+      const p = f.key, C = `${p}:start`, g = `${p}:end`;
+      let l = c.get(C), b = c.get(g);
+      const m = Array.isArray(f.children) ? f.children : [];
+      if (l || (l = document.createTextNode(""), l.key = C), 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);
+      } else
+        y(
+          l,
+          b,
+          o.get(p)?.children,
+          m
+        );
+      u(l, b), a = b.nextSibling;
+      continue;
     }
-  }
-  return { route: null, params: {} };
-}, k = {};
-async function at(e) {
-  if (e.component) return e.component;
-  if (e.load) {
-    if (k[e.path]) return k[e.path];
-    try {
-      const t = await e.load();
-      return k[e.path] = t.default, t.default;
-    } catch {
-      throw new Error(`Failed to load component for route: ${e.path}`);
+    if (f.key != null && c.has(f.key)) {
+      const p = o.get(f.key);
+      w = I(
+        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));
+    } 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);
+}
+function I(e, t, r, n) {
+  if (t === r) return e;
+  if (typeof r == "string") {
+    if (e.nodeType === Node.TEXT_NODE)
+      return e.textContent !== r && (e.textContent = r), e;
+    {
+      const s = document.createTextNode(r);
+      return e.parentNode?.replaceChild(s, e), s;
     }
   }
-  throw new Error(`No component or loader defined for route: ${e.path}`);
+  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 (!r) {
+    const s = document.createComment("removed");
+    return e.parentNode?.replaceChild(s, e), s;
+  }
+  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 pe(s, t.props || {}, r.props || {}, n), ge(s, t.children, r.children, n), s;
+  }
+  const i = T(r, n);
+  return e.parentNode?.replaceChild(i, e), i;
 }
-function ct(e) {
-  const { routes: t, base: r = "" } = e;
-  let n, o, s, i, a, c, l;
-  if (typeof window < "u" && typeof document < "u") {
-    n = () => {
-      const d = new URL(window.location.href), f = d.pathname.replace(r, "") || "/", h = ot(d.search);
-      return { path: f, query: h };
-    }, o = n();
-    const u = b(t, o.path);
-    s = N({
-      path: o.path,
-      params: u.params,
-      query: o.query
-    }), i = () => {
-      const d = n(), f = b(t, d.path), h = s.getState();
-      h.path = d.path, h.params = f.params, h.query = d.query;
-    }, window.addEventListener("popstate", i), a = (d) => {
-      window.history.pushState({}, "", r + d), i();
-    }, c = (d) => {
-      window.history.replaceState({}, "", r + d), i();
-    }, l = () => window.history.back();
-  } else {
-    n = () => ({ path: "/", query: {} }), o = n();
-    const u = b(t, o.path);
-    s = N({
-      path: o.path,
-      params: u.params,
-      query: o.query
-    }), i = () => {
-    }, a = () => {
-    }, c = () => {
-    }, l = () => {
-    };
-  }
-  return {
-    store: s,
-    push: a,
-    replace: c,
-    back: l,
-    subscribe: s.subscribe,
-    matchRoute: (u) => b(t, u),
-    getCurrent: () => s.getState(),
-    resolveRouteComponent: at
-  };
+function me(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 = J(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 = I(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 mt(e, t) {
-  return b(e, t);
+function ye(e) {
+  return e.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\s+/g, " ").replace(/\s*([{}:;,>+~])\s*/g, "$1").replace(/;}/g, "}").trim();
 }
-function x(e, t) {
-  const r = [], n = t ? Object.keys(t) : [], o = { ...e };
-  let s = null;
-  function i(u) {
-    return r.push(u), () => {
-      const d = r.indexOf(u);
-      d !== -1 && r.splice(d, 1);
-    };
-  }
-  function a(u) {
-    Object.assign(s, u), r.forEach((d) => d(s));
-  }
-  const c = /* @__PURE__ */ new WeakMap();
-  function l(u) {
-    if (c.has(u)) return c.get(u);
-    const d = new Proxy(u, {
-      get(f, h, m) {
-        if (h === "subscribe") return i;
-        if (h === "set") return a;
-        if (t && n.includes(h))
-          return t[h](s);
-        const p = Reflect.get(f, h, m);
-        return typeof p == "object" && p !== null ? l(p) : p;
-      },
-      set(f, h, m, p) {
-        if (t && n.includes(h))
-          return !1;
-        const C = f[h], E = Reflect.set(f, h, m, p);
-        return C !== m && r.forEach((B) => B(s)), E;
-      },
-      deleteProperty(f, h) {
-        if (t && n.includes(h))
-          return !1;
-        const m = Reflect.deleteProperty(f, h);
-        return r.forEach((p) => p(s)), m;
-      }
-    });
-    return c.set(u, d), d;
-  }
-  return s = l(o), s;
+const be = `
+  :host {
+    box-sizing:border-box;
+    line-height:1.5;
+    font-family:ui-sans-serif,system-ui,sans-serif;
+    -webkit-text-size-adjust:100%;
+    text-size-adjust:100%;
+  }
+  *,::before,::after {
+    box-sizing:inherit;
+    margin:0;
+    padding:0;
+    border:0 solid currentColor;
+  }
+`, xe = {
+  gray: {
+    50: "var(--color-gray-50, #f9fafb)",
+    100: "var(--color-gray-100, #f3f4f6)",
+    200: "var(--color-gray-200, #e5e7eb)",
+    300: "var(--color-gray-300, #d1d5db)",
+    400: "var(--color-gray-400, #9ca3af)",
+    500: "var(--color-gray-500, #6b7280)",
+    600: "var(--color-gray-600, #4b5563)",
+    700: "var(--color-gray-700, #374151)",
+    800: "var(--color-gray-800, #1f2937)",
+    900: "var(--color-gray-900, #111827)"
+  },
+  slate: {
+    50: "var(--color-slate-50, #f8fafc)",
+    100: "var(--color-slate-100, #f1f5f9)",
+    200: "var(--color-slate-200, #e2e8f0)",
+    300: "var(--color-slate-300, #cbd5e1)",
+    400: "var(--color-slate-400, #94a3b8)",
+    500: "var(--color-slate-500, #64748b)",
+    600: "var(--color-slate-600, #475569)",
+    700: "var(--color-slate-700, #334155)",
+    800: "var(--color-slate-800, #1e293b)",
+    900: "var(--color-slate-900, #0f172a)"
+  },
+  zinc: {
+    50: "var(--color-zinc-50, #fafafa)",
+    100: "var(--color-zinc-100, #f4f4f5)",
+    200: "var(--color-zinc-200, #e4e4e7)",
+    300: "var(--color-zinc-300, #d4d4d8)",
+    400: "var(--color-zinc-400, #a1a1aa)",
+    500: "var(--color-zinc-500, #71717a)",
+    600: "var(--color-zinc-600, #52525b)",
+    700: "var(--color-zinc-700, #3f3f46)",
+    800: "var(--color-zinc-800, #27272a)",
+    900: "var(--color-zinc-900, #18181b)"
+  },
+  red: {
+    50: "var(--color-red-50, #fef2f2)",
+    100: "var(--color-red-100, #fee2e2)",
+    200: "var(--color-red-200, #fecaca)",
+    300: "var(--color-red-300, #fca5a5)",
+    400: "var(--color-red-400, #f87171)",
+    500: "var(--color-red-500, #ef4444)",
+    600: "var(--color-red-600, #dc2626)",
+    700: "var(--color-red-700, #b91c1c)",
+    800: "var(--color-red-800, #991b1b)",
+    900: "var(--color-red-900, #7f1d1d)"
+  },
+  blue: {
+    50: "var(--color-blue-50, #eff6ff)",
+    100: "var(--color-blue-100, #dbeafe)",
+    200: "var(--color-blue-200, #bfdbfe)",
+    300: "var(--color-blue-300, #93c5fd)",
+    400: "var(--color-blue-400, #60a5fa)",
+    500: "var(--color-blue-500, #3b82f6)",
+    600: "var(--color-blue-600, #2563eb)",
+    700: "var(--color-blue-700, #1d4ed8)",
+    800: "var(--color-blue-800, #1e40af)",
+    900: "var(--color-blue-900, #1e3a8a)"
+  },
+  green: {
+    50: "var(--color-green-50, #f0fdf4)",
+    100: "var(--color-green-100, #dcfce7)",
+    200: "var(--color-green-200, #bbf7d0)",
+    300: "var(--color-green-300, #86efac)",
+    400: "var(--color-green-400, #4ade80)",
+    500: "var(--color-green-500, #22c55e)",
+    600: "var(--color-green-600, #16a34a)",
+    700: "var(--color-green-700, #15803d)",
+    800: "var(--color-green-800, #166534)",
+    900: "var(--color-green-900, #14532d)"
+  },
+  amber: {
+    50: "var(--color-amber-50, #fffbeb)",
+    100: "var(--color-amber-100, #fef3c7)",
+    200: "var(--color-amber-200, #fde68a)",
+    300: "var(--color-amber-300, #fcd34d)",
+    400: "var(--color-amber-400, #fbbf24)",
+    500: "var(--color-amber-500, #f59e0b)",
+    600: "var(--color-amber-600, #d97706)",
+    700: "var(--color-amber-700, #b45309)",
+    800: "var(--color-amber-800, #92400e)",
+    900: "var(--color-amber-900, #78350f)"
+  },
+  indigo: {
+    50: "var(--color-indigo-50, #eef2ff)",
+    100: "var(--color-indigo-100, #e0e7ff)",
+    200: "var(--color-indigo-200, #c7d2fe)",
+    300: "var(--color-indigo-300, #a5b4fc)",
+    400: "var(--color-indigo-400, #818cf8)",
+    500: "var(--color-indigo-500, #6366f1)",
+    600: "var(--color-indigo-600, #4f46e5)",
+    700: "var(--color-indigo-700, #4338ca)",
+    800: "var(--color-indigo-800, #3730a3)",
+    900: "var(--color-indigo-900, #312e81)"
+  },
+  emerald: {
+    50: "var(--color-emerald-50, #ecfdf5)",
+    100: "var(--color-emerald-100, #d1fae5)",
+    200: "var(--color-emerald-200, #a7f3d0)",
+    300: "var(--color-emerald-300, #6ee7b7)",
+    400: "var(--color-emerald-400, #34d399)",
+    500: "var(--color-emerald-500, #10b981)",
+    600: "var(--color-emerald-600, #059669)",
+    700: "var(--color-emerald-700, #047857)",
+    800: "var(--color-emerald-800, #065f46)",
+    900: "var(--color-emerald-900, #064e3b)"
+  },
+  rose: {
+    50: "var(--color-rose-50, #fff1f2)",
+    100: "var(--color-rose-100, #ffe4e6)",
+    200: "var(--color-rose-200, #fecdd3)",
+    300: "var(--color-rose-300, #fda4af)",
+    400: "var(--color-rose-400, #fb7185)",
+    500: "var(--color-rose-500, #f43f5e)",
+    600: "var(--color-rose-600, #e11d48)",
+    700: "var(--color-rose-700, #be123c)",
+    800: "var(--color-rose-800, #9f1239)",
+    900: "var(--color-rose-900, #881337)"
+  },
+  white: { DEFAULT: "var(--color-white, #ffffff)" },
+  black: { DEFAULT: "var(--color-black, #000000)" }
+}, W = {
+  /* Display */
+  block: "display:block;",
+  inline: "display:inline;",
+  "inline-block": "display:inline-block;",
+  flex: "display:flex;",
+  "inline-flex": "display:inline-flex;",
+  grid: "display:grid;",
+  hidden: "display:none;",
+  /* Accessibility */
+  "sr-only": "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;",
+  "not-sr-only": "position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal;",
+  /* Grid Layout */
+  "grid-cols-1": "grid-template-columns:repeat(1,minmax(0,1fr));",
+  "grid-cols-2": "grid-template-columns:repeat(2,minmax(0,1fr));",
+  "grid-cols-3": "grid-template-columns:repeat(3,minmax(0,1fr));",
+  "grid-cols-4": "grid-template-columns:repeat(4,minmax(0,1fr));",
+  "grid-cols-5": "grid-template-columns:repeat(5,minmax(0,1fr));",
+  "grid-cols-6": "grid-template-columns:repeat(6,minmax(0,1fr));",
+  "grid-cols-12": "grid-template-columns:repeat(12,minmax(0,1fr));",
+  "grid-rows-1": "grid-template-rows:repeat(1,minmax(0,1fr));",
+  "grid-rows-2": "grid-template-rows:repeat(2,minmax(0,1fr));",
+  "grid-rows-3": "grid-template-rows:repeat(3,minmax(0,1fr));",
+  "grid-rows-4": "grid-template-rows:repeat(4,minmax(0,1fr));",
+  "grid-rows-6": "grid-template-rows:repeat(6,minmax(0,1fr));",
+  "grid-rows-12": "grid-template-rows:repeat(12,minmax(0,1fr));",
+  /* Grid Placement */
+  "col-span-1": "grid-column:span 1 / span 1;",
+  "col-span-2": "grid-column:span 2 / span 2;",
+  "col-span-3": "grid-column:span 3 / span 3;",
+  "col-span-4": "grid-column:span 4 / span 4;",
+  "col-span-5": "grid-column:span 5 / span 5;",
+  "col-span-6": "grid-column:span 6 / span 6;",
+  "col-span-12": "grid-column:span 12 / span 12;",
+  "row-span-1": "grid-row:span 1 / span 1;",
+  "row-span-2": "grid-row:span 2 / span 2;",
+  "row-span-3": "grid-row:span 3 / span 3;",
+  "row-span-4": "grid-row:span 4 / span 4;",
+  "row-span-6": "grid-row:span 6 / span 6;",
+  "row-span-12": "grid-row:span 12 / span 12;",
+  /* Positioning */
+  absolute: "position:absolute;",
+  relative: "position:relative;",
+  fixed: "position:fixed;",
+  sticky: "position:sticky;",
+  /* Typography */
+  "font-bold": "font-weight:700;",
+  "font-semibold": "font-weight:600;",
+  "font-medium": "font-weight:500;",
+  "font-light": "font-weight:300;",
+  underline: "text-decoration-line:underline;",
+  overline: "text-decoration-line:overline;",
+  "line-through": "text-decoration-line:line-through;",
+  "no-underline": "text-decoration-line:none;",
+  italic: "font-style:italic;",
+  "not-italic": "font-style:normal;",
+  uppercase: "text-transform:uppercase;",
+  lowercase: "text-transform:lowercase;",
+  capitalize: "text-transform:capitalize;",
+  "normal-case": "text-transform:none;",
+  "text-left": "text-align:left;",
+  "text-center": "text-align:center;",
+  "text-right": "text-align:right;",
+  "text-xs": "font-size:0.75rem;line-height:calc(1 / 0.75)",
+  "text-sm": "font-size:0.875rem;line-height:calc(1.25 / 0.875)",
+  "text-base": "font-size:1rem;line-height:calc(1.5 / 1)",
+  "text-lg": "font-size:1.125rem;line-height:calc(1.75 / 1.125)",
+  "text-xl": "font-size:1.25rem;line-height:calc(1.75 / 1.25)",
+  "text-2xl": "font-size:1.5rem;line-height:calc(2 / 1.5)",
+  "text-3xl": "font-size:1.875rem;line-height:calc(2.25 / 1.875)",
+  "text-4xl": "font-size:2.25rem;line-height:calc(2.5 / 2.25)",
+  "text-5xl": "font-size:3rem;line-height:1",
+  "text-6xl": "font-size:3.75rem;line-height:1",
+  "text-7xl": "font-size:4.5rem;line-height:1",
+  "text-8xl": "font-size:6rem;line-height:1",
+  /* Borders */
+  border: "border-width:1px;",
+  "rounded-none": "border-radius:0;",
+  "rounded-xs": "border-radius:0.125rem;",
+  "rounded-sm": "border-radius:0.25rem;",
+  "rounded-md": "border-radius:0.375rem;",
+  "rounded-lg": "border-radius:0.5rem;",
+  "rounded-full": "border-radius:9999px;",
+  /* Ring (box-shadow for focus) */
+  "ring-0": "box-shadow:none;",
+  "ring-1": "box-shadow:0 0 0 1px rgba(59,130,246,0.5);",
+  "ring-2": "box-shadow:0 0 0 2px rgba(59,130,246,0.5);",
+  "ring-4": "box-shadow:0 0 0 4px rgba(59,130,246,0.5);",
+  "ring-8": "box-shadow:0 0 0 8px rgba(59,130,246,0.5);",
+  /* Shadow and effects */
+  "shadow-none": "box-shadow:0 0 #0000;",
+  "shadow-xs": "box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);",
+  "shadow-sm": "box-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);",
+  "shadow-md": "box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);",
+  "shadow-lg": "box-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);",
+  "shadow-xl": "box-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);",
+  "shadow-2xl": "box-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);",
+  /* Transitions */
+  transition: "transition-property:all;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4,0,0.2,1);",
+  /* Text Overflow & Whitespace */
+  truncate: "overflow:hidden;text-overflow:ellipsis;white-space:nowrap;",
+  /* Visibility */
+  visible: "visibility:visible;",
+  invisible: "visibility:hidden;",
+  /* Flex Grow/Shrink/Basis */
+  grow: "flex-grow:1;",
+  shrink: "flex-shrink:1;",
+  "grow-0": "flex-grow:0;",
+  "shrink-0": "flex-shrink:0;",
+  /* Font Family */
+  "font-sans": "font-family:ui-sans-serif,system-ui,sans-serif;",
+  "font-serif": "font-family:ui-serif,Georgia,serif;",
+  "font-mono": "font-family:ui-monospace,SFMono-Regular,monospace;",
+  /* Line Clamp (for webkit) */
+  "line-clamp-1": "display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;",
+  "line-clamp-2": "display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;",
+  "line-clamp-3": "display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;",
+  "line-clamp-4": "display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;",
+  /* Transition Delay/Property */
+  "transition-colors": "transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;",
+  "transition-opacity": "transition-property:opacity;",
+  "transition-transform": "transition-property:transform;"
+}, ve = "0.25rem", Y = {
+  m: ["margin"],
+  mx: ["margin-inline"],
+  my: ["margin-block"],
+  mt: ["margin-top"],
+  mr: ["margin-right"],
+  mb: ["margin-bottom"],
+  ml: ["margin-left"],
+  p: ["padding"],
+  px: ["padding-inline"],
+  py: ["padding-block"],
+  pt: ["padding-top"],
+  pr: ["padding-right"],
+  pb: ["padding-bottom"],
+  pl: ["padding-left"],
+  inset: ["inset"],
+  "inset-x": ["inset-inline"],
+  "inset-y": ["inset-block"],
+  top: ["top"],
+  bottom: ["bottom"],
+  left: ["left"],
+  right: ["right"],
+  gap: ["gap"],
+  "gap-x": ["column-gap"],
+  "gap-y": ["row-gap"]
+}, we = {
+  // State variants
+  before: (e, t) => `${e}::before{${t}}`,
+  after: (e, t) => `${e}::after{${t}}`,
+  hover: (e, t) => `${e}:hover{${t}}`,
+  focus: (e, t) => `${e}:focus{${t}}`,
+  active: (e, t) => `${e}:active{${t}}`,
+  disabled: (e, t) => `${e}:disabled{${t}}`,
+  visited: (e, t) => `${e}:visited{${t}}`,
+  checked: (e, t) => `${e}:checked{${t}}`,
+  first: (e, t) => `${e}:first-child{${t}}`,
+  last: (e, t) => `${e}:last-child{${t}}`,
+  odd: (e, t) => `${e}:nth-child(odd){${t}}`,
+  even: (e, t) => `${e}:nth-child(even){${t}}`,
+  "focus-within": (e, t) => `${e}:focus-within{${t}}`,
+  "focus-visible": (e, t) => `${e}:focus-visible{${t}}`,
+  // Group variants
+  "group-hover": (e, t) => `.group:hover ${e}{${t}}`,
+  "group-focus": (e, t) => `.group:focus ${e}{${t}}`,
+  "group-active": (e, t) => `.group:active ${e}{${t}}`,
+  "group-disabled": (e, t) => `.group:disabled ${e}{${t}}`,
+  // Peer variants
+  "peer-hover": (e, t) => `.peer:hover ~ ${e}{${t}}`,
+  "peer-focus": (e, t) => `.peer:focus ~ ${e}{${t}}`,
+  "peer-checked": (e, t) => `.peer:checked ~ ${e}{${t}}`,
+  "peer-disabled": (e, t) => `.peer:disabled ~ ${e}{${t}}`
+}, G = {
+  // Responsive
+  sm: "(min-width:640px)",
+  md: "(min-width:768px)",
+  lg: "(min-width:1024px)",
+  xl: "(min-width:1280px)",
+  "2xl": "(min-width:1536px)",
+  // Dark mode (now plain string)
+  dark: "(prefers-color-scheme: dark)"
+}, K = ["sm", "md", "lg", "xl", "2xl"];
+function F(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);
+  if (Number.isNaN(o) || !Y[i]) return null;
+  const c = t ? "-" : "";
+  return Y[i].map((d) => `${d}:calc(${c}${ve} * ${o});`).join("");
 }
-const A = [];
-function yt(e) {
-  A.push(e);
+function ee(e) {
+  const t = e.replace("#", ""), r = parseInt(t, 16), n = r >> 16 & 255, i = r >> 8 & 255, s = r & 255;
+  return `${n} ${i} ${s}`;
 }
-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((o) => _(o, t));
-  Object.getPrototypeOf(e) !== Object.prototype && Object.getPrototypeOf(e) !== null && Object.setPrototypeOf(e, null);
-  const r = ["__proto__", "constructor", "prototype"], n = /* @__PURE__ */ Object.create(null);
-  for (const o of Object.keys(e))
-    r.includes(o) || (n[o] = _(e[o], t));
-  return n;
+function ke(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 = xe[n]?.[i];
+  return s ? `${{
+    bg: "background-color",
+    text: "color",
+    border: "border-color",
+    shadow: "box-shadow",
+    outline: "outline-color",
+    caret: "caret-color",
+    accent: "accent-color"
+  }[r]}:${s};` : null;
 }
-function O(e) {
-  return !!e && typeof e.then == "function";
+function _e(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 };
 }
-let H;
-typeof HTMLElement < "u" ? H = class extends HTMLElement {
-  /**
-   * Syncs whitelisted state properties to attributes after render.
-   * Only keys listed in config.reflect are reflected.
-   */
-  syncStateToAttributes() {
-    if (!this.stateObj || !this.config?.reflect || !Array.isArray(this.config.reflect)) return;
-    const e = ["__proto__", "constructor", "prototype"];
-    this.config.reflect.forEach((t) => {
-      if (e.includes(t)) {
-        this.removeAttribute(t);
-        return;
+function U(e) {
+  const { base: t, opacity: r } = _e(e), n = ke(t);
+  if (n) {
+    if (r !== void 0) {
+      const s = /#([0-9a-f]{6})/i.exec(n);
+      if (s) {
+        const o = ee(s[0]);
+        return n.replace(/#([0-9a-f]{6})/i, `rgb(${o} / ${r})`);
       }
-      const r = this.stateObj[t];
-      ["string", "number", "boolean"].includes(typeof r) ? r == null ? this.removeAttribute(t) : this.setAttribute(t, String(r)) : this.removeAttribute(t);
-    });
-  }
-  /**
-   * Allows updating the template function at runtime and triggers a re-render.
-   * @param newTemplate - New template function or string
-   */
-  setTemplate(e) {
-    const t = this.config;
-    typeof e == "function" ? t.template = e : t.template = () => e, this.render();
+    }
+    return n;
+  }
+  const i = D(t);
+  if (i && r !== void 0) {
+    const s = /#([0-9a-f]{6})/i.exec(i);
+    if (s) {
+      const o = ee(s[0]);
+      return i.replace(/#([0-9a-f]{6})/i, `rgb(${o} / ${r})`);
+    }
   }
-  _hasError = !1;
-  _mountedCalled = !1;
-  _unmountedCalled = !1;
-  /**
-   * Tracks auto-wired config event handlers for removal
-   */
-  _autoWiredHandlers = {};
-  /**
-   * Override removeEventListener to support auto-wired config handler removal
-   */
-  removeEventListener(e, t, r) {
-    super.removeEventListener(e, t, r), this._autoWiredHandlers[e] && (this._autoWiredHandlers[e] = this._autoWiredHandlers[e].filter((n) => n === t ? (super.removeEventListener(e, n, r), !1) : !0), this._autoWiredHandlers[e].length === 0 && delete this._autoWiredHandlers[e]);
+  return i;
+}
+function D(e) {
+  const t = e.indexOf("-["), r = e.endsWith("]");
+  if (t > 0 && r) {
+    const n = e.slice(0, t);
+    let i = e.slice(t + 2, -1);
+    i = i.replace(/_/g, " ");
+    const o = {
+      bg: "background-color",
+      text: "color",
+      p: "padding",
+      px: "padding-inline",
+      py: "padding-block",
+      m: "margin",
+      mx: "margin-inline",
+      my: "margin-block",
+      w: "width",
+      h: "height",
+      "min-w": "min-width",
+      "max-w": "max-width",
+      "min-h": "min-height",
+      "max-h": "max-height",
+      "border-t": "border-top",
+      "border-b": "border-bottom",
+      "border-l": "border-left",
+      "border-r": "border-right",
+      "border-x": "border-inline",
+      "border-y": "border-block",
+      shadow: "box-shadow",
+      duration: "transition-duration",
+      list: "list-style",
+      break: "word-break",
+      flex: "flex-direction",
+      items: "align-items",
+      justify: "justify-content",
+      whitespace: "white-space",
+      select: "user-select",
+      content: "align-content",
+      self: "align-self",
+      basis: "flex-basis",
+      tracking: "letter-spacing",
+      scroll: "scroll-behavior",
+      delay: "transition-delay",
+      weight: "font-weight",
+      leading: "line-height",
+      z: "z-index"
+    }[n] ?? n.replace(/_/g, "-");
+    if (o && i) return `${o}:${i};`;
+  }
+  return null;
+}
+function $e(e) {
+  return e.replace(/([!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g, "\\$1");
+}
+function Ce(e) {
+  const t = /class\s*=\s*["']([^"']+)["']/g, r = [];
+  let n;
+  for (; n = 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);
   }
-  /**
-   * observedAttributes automatically returns all primitive keys from static state.
-   * This enables automatic attribute observation for all primitive state properties.
-   */
-  static get observedAttributes() {
-    const e = this.stateObj || {};
-    return Object.keys(e).filter(
-      (t) => ["string", "number", "boolean"].includes(typeof e[t])
+  return r.filter(Boolean);
+}
+const te = /* @__PURE__ */ new Map(), Se = 16;
+function Ae(e) {
+  const t = Date.now(), r = te.get(e);
+  if (r && t - r.timestamp < Se) return r.css;
+  const n = Ce(e), i = new Set(n), s = [], o = [], c = [], d = [], a = {};
+  function u(p, C = !1) {
+    const g = (C ? "dark|" : "") + p;
+    if (g in a) return a[g];
+    const l = f(p, C);
+    return a[g] = l, l;
+  }
+  function y(p) {
+    const C = p.some((l) => K.includes(l)), g = p.includes("dark");
+    return p.length === 0 ? 1 : !C && !g ? 2 : C && !g ? 3 : 4;
+  }
+  function f(p, C = !1) {
+    const g = p.split(":"), l = g.find(
+      ($) => W[$] || F($) || U($) || D($)
     );
-  }
-  /**
-   * Called when an observed attribute changes. Syncs attribute to state and triggers render.
-   */
-  attributeChangedCallback(e, t, r) {
-    if (e === "__proto__" || e === "constructor" || e === "prototype" || !this.stateObj) return;
-    const n = e.replace(/-([a-z])/g, (s, i) => i.toUpperCase()), o = e in this.stateObj ? e : n in this.stateObj ? n : null;
-    if (o) {
-      const s = typeof this.config?.state?.[o];
-      let i = r;
-      if (r === null)
-        i = void 0;
-      else if (s === "number")
-        if (i === void 0 || i === "")
-          i = this.config?.state?.[o];
-        else {
-          const a = Number(i);
-          i = isNaN(a) ? this.config?.state?.[o] : a;
-        }
-      else s === "boolean" && (i = i === "true");
-      i = _(i), this.stateObj[o] !== i && (this.config?.debug && console.log("[runtime] state update:", { stateKey: o, value: i }), this.stateObj[o] = i, this.render());
+    if (!l) return null;
+    const b = W[l] ?? F(l) ?? U(l) ?? D(l);
+    if (!b) return null;
+    let m = `.${$e(p)}`, h = b;
+    const x = g.indexOf(l);
+    let S = x >= 0 ? g.slice(0, x) : [];
+    C && (S = S.filter(($) => $ !== "dark"));
+    const k = S.filter(($) => K.includes($)), v = k.length ? k[k.length - 1] : null;
+    for (const $ of S) {
+      if (K.includes($)) continue;
+      const A = we[$];
+      typeof A == "function" && (m = A(m, h).replace(/\{.*$/, ""));
     }
+    let _ = `${m}{${h}}`;
+    return C && v ? _ = `@media (prefers-color-scheme: dark) and ${G[v]}{${_}}` : C ? _ = `@media (prefers-color-scheme: dark){${_}}` : v && (_ = `@media ${G[v]}{${_}}`), _;
   }
-  /**
-   * Force sync all controlled input values and event listeners after VDOM patching.
-   */
-  forceSyncControlledInputs() {
-    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 r = e, n = String(this.stateObj[t]), o = document.activeElement === r;
-      r._hasDirtyListener || (r.addEventListener("input", () => {
-        r._isDirty = !0;
-      }), r.addEventListener("blur", () => {
-        r._isDirty = !1;
-      }), r._hasDirtyListener = !0);
-      const s = !!r._isDirty;
-      o || s || r.type !== "radio" && r.type !== "checkbox" && r.value !== n && (r.value = n);
-    }), this.rebindEventListeners());
-  }
-  /**
-   * Sync all controlled inputs and event listeners after render
-   */
-  syncControlledInputsAndEvents() {
-    this.shadowRoot && (this.shadowRoot.querySelectorAll('input[type="radio"][data-model]').forEach((e) => {
-      const t = e.getAttribute("data-model");
-      if (!t || !this.stateObj || typeof this.stateObj[t] > "u")
-        return;
-      const r = e, n = String(this.stateObj[t]);
-      r.checked = r.value === n;
-    }), 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 r = e, n = String(this.stateObj[t]);
-      if (r.type === "checkbox") {
-        const o = this.stateObj[t];
-        if (Array.isArray(o))
-          r.checked = o.includes(r.value);
-        else {
-          const s = r.getAttribute("data-true-value"), i = r.getAttribute("data-false-value");
-          s !== null || i !== null ? String(o) === s ? r.checked = !0 : String(o) === i ? r.checked = !1 : o === !0 ? r.checked = !0 : r.checked = !1 : r.checked = o === !0 || o === "true" || o === 1;
-        }
-      } else r.type === "radio" || (r.value = n);
-    }), this.shadowRoot.querySelectorAll("textarea[data-model]").forEach((e) => {
-      const t = e.getAttribute("data-model");
-      !t || !this.stateObj || typeof this.stateObj[t] > "u" || (e.value = String(this.stateObj[t]));
-    }), this.shadowRoot.querySelectorAll("select[data-model]").forEach((e) => {
-      const t = e.getAttribute("data-model");
-      !t || !this.stateObj || typeof this.stateObj[t] > "u" || (e.value = String(this.stateObj[t]));
-    }));
-  }
-  /**
-   * Attach event listeners for input[data-bind] after VDOM patching
-   */
-  attachListItemModelListeners() {
-    this.shadowRoot && this.shadowRoot.querySelectorAll("input[data-bind]").forEach((e) => {
-      const t = e.getAttribute("data-bind");
-      if (!t) return;
-      e._listItemModelListener && (e.removeEventListener("input", e._listItemModelListener), e.removeEventListener("change", e._listItemModelListener), delete e._listItemModelListener);
-      const r = t.match(/^([a-zA-Z0-9_]+)\[(\d+)\]\.([a-zA-Z0-9_]+)$/);
-      if (r) {
-        const [, o, s, i] = r, 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 = (u) => {
-          !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 n = t.match(/^([a-zA-Z0-9_]+)\.([a-zA-Z0-9_]+)((?:\|[a-zA-Z0-9_]+)*)$/);
-      if (n) {
-        const [, o, s, i] = n, a = this.stateObj[o], c = i ? i.split("|").map((u) => u.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 = (u) => {
-          if (!a) return;
-          let d;
-          e instanceof HTMLInputElement && e.type === "checkbox" ? d = e.checked : (d = e.value, c.includes("number") && (d = Number(d)), c.includes("trim") && typeof d == "string" && (d = d.trim())), a[s] = d;
-        };
-        e.addEventListener("input", l), e.addEventListener("change", l), e._listItemModelListener = l;
-      }
-    });
-  }
-  /**
-   * Attach controlled input listeners to sync DOM value to state
-   */
-  attachControlledInputListeners() {
-    const e = this.shadowRoot;
-    e && (e.querySelectorAll("[data-model]").forEach((t) => {
-      const r = t.getAttribute("data-model");
-      r && (t._dataModelBound || (Q(t, this.stateObj, r), t._dataModelBound = !0));
-    }), e.querySelectorAll("[data-model]").forEach((t) => {
-      const [r] = t.getAttribute("data-model")?.split("|").map((n) => n.trim()) ?? [];
-      if (!(!r || !(r in this.stateObj)))
-        if (t instanceof HTMLInputElement)
-          if (t.type === "checkbox") {
-            const n = this.stateObj[r], o = t.getAttribute("data-true-value"), s = t.getAttribute("data-false-value");
-            Array.isArray(n) ? t.checked = n.includes(t.value) : o !== null || s !== null ? String(n) === o ? t.checked = !0 : String(n) === s ? t.checked = !1 : n === !0 ? t.checked = !0 : t.checked = !1 : t.checked = n === !0 || n === "true" || n === 1;
-          } else t.type === "radio" ? t.checked = t.value === String(this.stateObj[r]) : t.value = String(this.stateObj[r] ?? "");
-        else (t instanceof HTMLTextAreaElement || t instanceof HTMLSelectElement) && (t.value = String(this.stateObj[r] ?? ""));
-    }));
-  }
-  config;
-  stateObj;
-  api;
-  _globalUnsubscribes = [];
-  unsubscribes = [];
-  lastCompiledTemplate = null;
-  lastState = null;
-  rafId = null;
-  /**
-   * Construct a new runtime component element.
-   * @param config - Component configuration
-   */
-  constructor() {
-    super();
+  for (const p of i) {
+    const C = p.split(":"), g = C.find(
+      (h) => W[h] || F(h) || U(h) || D(h)
+    );
+    if (!g) continue;
+    const l = C.indexOf(g), b = l >= 0 ? C.slice(0, l) : [], m = y(b);
+    if (m === 4) {
+      const h = u(p, !0);
+      h && d.push(h);
+    } else {
+      const h = u(p);
+      h && (m === 1 ? s.push(h) : m === 2 ? o.push(h) : m === 3 && c.push(h));
+    }
   }
-  initializeConfig() {
-    if (this.config) return;
-    const e = this.tagName.toLowerCase(), r = (window.__componentRegistry || {})[e];
-    if (!r || typeof r != "object")
-      throw new Error("Invalid component config: must be an object");
-    if (!r.state || typeof r.state != "object")
-      throw new Error("Invalid component config: state must be an object");
-    this.config = r;
-    const n = r.computed ? x(r.state, r.computed) : x(r.state);
-    if (this.stateObj = n, typeof this.stateObj.subscribe == "function" && this.unsubscribes.push(this.stateObj.subscribe(() => {
-      this.scheduleRender();
-    })), this.api = {
-      state: this.stateObj,
-      emit: (s, i) => this.dispatchEvent(new CustomEvent(s, { detail: i, bubbles: !0 })),
-      onGlobal: (s, i) => {
-        const a = w.on(s, i);
-        return this._globalUnsubscribes.push(a), a;
-      },
-      offGlobal: (s, i) => w.off(s, i),
-      emitGlobal: (s, i) => w.emit(s, i),
-      render: () => this.render()
-    }, Object.keys(this.config).forEach((s) => {
-      if (s.startsWith("on") && s.length > 2 && typeof this.config[s] == "function") {
-        const i = s.charAt(2).toLowerCase() + s.slice(3), a = (c) => {
-          const l = c.detail ?? c;
-          this.config[s](l, this.api.state, this.api);
-        };
-        this.addEventListener(i, a), this._autoWiredHandlers[i] || (this._autoWiredHandlers[i] = []), this._autoWiredHandlers[i].push(a);
-      }
-    }), this.attachShadow({ mode: "open" }), r.style) {
-      const s = document.createElement("style");
-      s.textContent = typeof r.style == "function" ? r.style(this.stateObj) : r.style, this.shadowRoot.appendChild(s);
+  const w = [...s, ...o, ...c, ...d].join("");
+  return te.set(e, { css: w, timestamp: t }), w;
+}
+const Ee = /* @__PURE__ */ new Map();
+function Z(e) {
+  return e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function q(e) {
+  return typeof e == "string" ? e.replace(
+    /[&<>"']/g,
+    (t) => ({
+      "&": "&amp;",
+      "<": "&lt;",
+      ">": "&gt;",
+      '"': "&quot;",
+      "'": "&#39;"
+    })[t]
+  ) : e;
+}
+function Te(e) {
+  return e.replace(/url\s*\(\s*['"]?javascript:[^)]*\)/gi, "").replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, "").replace(/expression\s*\([^)]*\)/gi, "");
+}
+function Me(e, ...t) {
+  let r = "";
+  for (let n = 0; n < e.length; n++)
+    r += e[n], n < t.length && (r += t[n]);
+  return r;
+}
+function Pe(e, t, r) {
+  let n = Z(e);
+  n.includes("-") || (n = `cer-${n}`);
+  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);
+  }), Ee.set(n, i), typeof window < "u" && !customElements.get(n) && customElements.define(n, Le(i));
+}
+function Le(e) {
+  if (!e.render)
+    throw new Error(
+      "Component must have a render function"
+    );
+  return typeof window > "u" ? class {
+    constructor() {
     }
-    if (typeof this.config.hydrate == "function") {
-      const s = this.shadowRoot?.querySelectorAll("[data-hydrate]");
-      try {
-        s && s.length > 0 ? s.forEach((i) => {
-          try {
-            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 (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);
-      }
+  } : class extends HTMLElement {
+    context;
+    _listeners = [];
+    _watchers = /* @__PURE__ */ new Map();
+    /** @internal */
+    _renderTimeoutId = null;
+    _mounted = !1;
+    _hasError = !1;
+    _initializing = !0;
+    _styleSheet = null;
+    _lastHtmlStringForJitCSS = "";
+    _cfg;
+    _lastRenderTime = 0;
+    _renderCount = 0;
+    _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));
+      }), this._applyProps(e), this._applyComputed(e), this._initializing = !1, this._initWatchers(e), this._render(e);
     }
-    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);
-        O(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;
-      } catch (s) {
-        typeof this.config.onError == "function" && this.config.onError(s, this.api.state, this.api), this._handleRenderError(s), this._mountedCalled = !0;
-      }
-  }
-  connectedCallback() {
-    if (this.initializeConfig(), this.stateObj)
-      for (const e of this.getAttributeNames()) {
-        const r = e.replace(/-([a-z])/g, (n, o) => o.toUpperCase());
-        if (r in this.stateObj) {
-          const n = typeof this.config?.state?.[r];
-          let o = this.getAttribute(e);
-          n === "number" ? o = Number(o) : n === "boolean" && (o = o === "true"), this.stateObj[r] = o === null ? void 0 : o;
-        }
-      }
-    if (!this._mountedCalled && typeof this.config.onMounted == "function")
-      try {
-        const e = this.config.onMounted(this.api.state, this.api);
-        O(e) ? e.catch((t) => {
-          typeof this.config.onError == "function" && this.config.onError(t, this.api.state, this.api), this._handleRenderError(t);
-        }).finally(() => {
-          this._mountedCalled = !0;
-        }) : this._mountedCalled = !0;
-      } catch (e) {
-        typeof this.config.onError == "function" && this.config.onError(e, this.api.state, this.api), this._handleRenderError(e), this._mountedCalled = !0;
-      }
-    typeof this.render == "function" && this.render();
-  }
-  /**
-   * Lifecycle: called when element is removed from DOM.
-   */
-  disconnectedCallback() {
-    if (Object.entries(this._autoWiredHandlers).forEach(([e, t]) => {
-      t.forEach((r) => {
-        super.removeEventListener(e, r);
+    connectedCallback() {
+      this._runLogicWithinErrorBoundary(e, () => {
+        e.onConnected && !this._mounted && (e.onConnected(this.context), this._mounted = !0);
       });
-    }), this._autoWiredHandlers = {}, this.unsubscribes.forEach((e) => e()), this.unsubscribes = [], this._globalUnsubscribes.forEach((e) => e()), this._globalUnsubscribes = [], !this._unmountedCalled && typeof this.config.onUnmounted == "function")
-      try {
-        const e = this.config.onUnmounted(this.api.state, this.api);
-        O(e) ? e.catch((t) => {
-          typeof this.config.onError == "function" && this.config.onError(t, this.api.state, this.api), this._handleRenderError(t);
-        }).finally(() => {
-          this._unmountedCalled = !0;
-        }) : this._unmountedCalled = !0;
-      } catch (e) {
-        typeof this.config.onError == "function" && this.config.onError(e, this.api.state, this.api), this._handleRenderError(e), this._unmountedCalled = !0;
-      }
-    this._mountedCalled = !1, this._unmountedCalled = !1;
-  }
-  /**
-   * Render the component. Handles both string and compiled templates, refs, and error boundaries.
-   */
-  render() {
-    this._hasError = !1, this.syncControlledInputsAndEvents(), setTimeout(() => this.attachControlledInputListeners(), 0);
-    try {
-      A.forEach((t) => {
-        try {
-          t.onRender?.(this.stateObj, this.api);
-        } catch (r) {
-          this._handleRenderError(r);
+    }
+    disconnectedCallback() {
+      this._runLogicWithinErrorBoundary(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) {
+      this._runLogicWithinErrorBoundary(e, () => {
+        this._applyProps(e), e.onAttributeChanged && e.onAttributeChanged(
+          t,
+          r,
+          n,
+          this.context
+        );
+      });
+    }
+    static get observedAttributes() {
+      return e.props ? Object.keys(e.props).map(Z) : [];
+    }
+    _applyComputed(t) {
+      this._runLogicWithinErrorBoundary(e, () => {
+        t.computed && Object.entries(t.computed).forEach(([r, n]) => {
+          Object.defineProperty(this.context, r, {
+            get: () => {
+              const i = n(this.context);
+              return q(i);
+            },
+            enumerable: !0
+          });
+        });
+      });
+    }
+    // --- Render ---
+    _render(t) {
+      this._runLogicWithinErrorBoundary(t, () => {
+        if (!this.shadowRoot) return;
+        if (this._templateLoading && t.loadingTemplate) {
+          this._renderOutput(t.loadingTemplate(this.context));
+          return;
         }
-      }), this.config.computed && Object.values(this.config.computed).forEach((t) => {
-        try {
-          t(this.stateObj);
-        } catch (r) {
-          this._handleRenderError(r);
+        if (this._templateError && t.errorTemplate) {
+          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);
+              return this._renderOutput(i), i;
+            }
+            throw n;
+          }), t.loadingTemplate && this._renderOutput(t.loadingTemplate(this.context));
+          return;
+        }
+        this._renderOutput(r), this._applyStyle(t);
       });
-      const e = this.config.template(this.stateObj, this.api);
-      e instanceof Promise ? e.then((t) => {
-        this._hasError || (this._renderTemplateResult(t), this.syncStateToAttributes(), setTimeout(() => this.attachListItemModelListeners(), 0));
-      }).catch((t) => {
-        this._handleRenderError(t);
-      }) : this._hasError || (this._renderTemplateResult(e), this.syncStateToAttributes(), setTimeout(() => this.attachListItemModelListeners(), 0));
-    } catch (e) {
-      this._handleRenderError(e), this.renderError(e instanceof Error ? e : new Error(String(e)));
     }
-  }
-  /**
-   * Internal: render a template result (string or compiled template)
-   */
-  _prevVNode = null;
-  /**
-   * Rebind event listeners for elements with data-on-* attributes in the shadow DOM
-   */
-  rebindEventListeners() {
-    if (!this.shadowRoot) return;
-    ["data-on-input", "data-on-change", "data-on-blur", "data-on-click"].forEach((t) => {
-      this.shadowRoot.querySelectorAll(`[${t}]`).forEach((r) => {
-        const n = t.replace("data-on-", ""), o = r.getAttribute(t);
-        if (!o || typeof this.config[o] != "function") return;
-        r._boundHandlers && r._boundHandlers[n] && r.removeEventListener(n, r._boundHandlers[n]);
-        const s = this.config[o], i = (a) => s.call(this, a, this.stateObj, this.api);
-        r.addEventListener(n, i), r._boundHandlers || (r._boundHandlers = {}), r._boundHandlers[n] = i;
-      });
-    }), Array.from(this.shadowRoot.children).forEach((t) => {
-      t instanceof HTMLElement && typeof t.rebindEventListeners == "function" && t.rebindEventListeners();
-    });
-  }
-  /**
-   * Internal: render a template result (string or compiled template).
-   * Handles VDOM patching, style updates, refs, and event binding.
-   * @param templateResult - HTML string or compiled template
-   */
-  _renderTemplateResult(e) {
-    if (!this._hasError)
-      try {
-        let t = function(r) {
-          const n = /* @__PURE__ */ new WeakSet();
-          function o(s) {
-            if (s === null || typeof s != "object" || n.has(s)) return s;
-            if (n.add(s), Array.isArray(s)) return s.map(o);
-            const i = {};
-            for (const a in s)
-              Object.prototype.hasOwnProperty.call(s, a) && (i[a] = o(s[a]));
-            return i;
-          }
-          return o(r);
-        };
-        if (typeof e == "string") {
-          let r = function(c) {
-            return c.replace(/<([a-zA-Z0-9]+)([^>]*)>/g, (l, u, d) => {
-              const f = d.replace(/\s+on[a-zA-Z]+\s*=\s*(['"][^'"]*['"]|[^\s>]*)/gi, "");
-              return `<${u}${f}>`;
-            });
-          }, n = function(c) {
-            c.children.forEach(n);
-          };
-          const o = r(e), s = it(o);
-          n(s);
-          const i = this.shadowRoot;
-          if (!i)
-            return;
-          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) {
-              Array.from(c.childNodes).forEach((d) => {
-                d.nodeType === 1 && d.nodeName === "STYLE" || c.removeChild(d);
-              });
-              const l = {
-                type: "#fragment",
-                dom: c,
-                children: s.children,
-                props: {},
-                key: void 0
-              }, u = this._prevVNode && this._prevVNode.type === "#fragment" ? { ...this._prevVNode, dom: c } : l;
-              M(c, u, l);
-            } else
-              s.children.forEach((l) => {
-                const u = g(l);
-                u && i.appendChild(u), l.dom = u ?? void 0;
-              });
-          } else {
-            let c = Array.from(this.shadowRoot.childNodes).find(
-              (l) => l !== a && l.nodeType === 1
-            );
-            if (c)
-              if (this._prevVNode && (this._prevVNode.type !== s.type || this._prevVNode.key !== s.key)) {
-                const l = g(s);
-                l && (this.shadowRoot.contains(c) && this.shadowRoot.replaceChild(l, c), c = l);
-              } else
-                M(c, this._prevVNode, s);
-            else
-              c = g(s), c && this.shadowRoot.appendChild(c);
-            s.dom = c;
-          }
-          this._prevVNode = s, this.forceSyncControlledInputs(), this.lastCompiledTemplate = null;
-        } else {
-          const r = !this.shadowRoot.firstElementChild, n = this.lastCompiledTemplate?.id === e.id;
-          if (r) {
-            const o = P(e, this.stateObj, this.api);
-            this.shadowRoot.appendChild(o);
-          } else if (n && this.shadowRoot.firstElementChild) {
-            const o = this.lastState;
-            nt(e, this.shadowRoot.firstElementChild, this.stateObj, this.api, o || void 0);
-          } else {
-            const o = P(e, this.stateObj, this.api);
-            let s = this.shadowRoot.querySelector("style");
-            s || (s = document.createElement("style"), this.shadowRoot.insertBefore(s, this.shadowRoot.firstChild)), this.config.style ? s.textContent = typeof this.config.style == "function" ? this.config.style(this.stateObj) : this.config.style : s.textContent = "";
-            let i = this.shadowRoot.querySelector("[data-root]");
-            for (i || (i = document.createElement("div"), i.setAttribute("data-root", ""), this.shadowRoot.appendChild(i)); i.firstChild; )
-              i.removeChild(i.firstChild);
-            i.appendChild(o);
+    // --- 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) => {
+          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;
           }
-          this.lastCompiledTemplate = e;
-        }
-        this.lastState = t(this.stateObj), this.updateStyle(), this.processRefs(), this.bindEvents(), this.syncControlledInputsAndEvents();
-      } catch (t) {
-        this._handleRenderError(t);
-      }
-  }
-  /**
-   * Internal: handle render errors and error boundaries.
-   * Logs details and allows fallback UI.
-   * @param error - Error object
-   */
-  _handleRenderError(e) {
-    if (this._hasError = !0, this.config.debug && console.error(`[runtime] Render error in <${this.tagName.toLowerCase()}>:`, e), A.forEach((t) => t.onError?.(e instanceof Error ? e : new Error(String(e)), this.stateObj, this.api)), "onError" in this.config && typeof this.config.onError == "function")
-      try {
-        this.config.onError(e instanceof Error ? e : new Error(String(e)), this.api.state, this.api);
-      } catch (t) {
-        this.config.debug && console.error("[runtime] Error in onError handler:", t);
-      }
-    this.renderError(e instanceof Error ? e : new Error(String(e)));
-  }
-  /**
-   * Schedule a render using requestAnimationFrame, batching multiple state changes.
-   */
-  scheduleRender() {
-    this.rafId !== void 0 && this.rafId !== null && cancelAnimationFrame(this.rafId), this.rafId = requestAnimationFrame(() => {
-      this.render(), this.rafId = null;
-    });
-  }
-  /**
-   * Updates the style element in the shadow root based on the current state.
-   */
-  updateStyle() {
-    const e = this.shadowRoot.querySelector("style");
-    if (!e || !this.config.style) return;
-    const t = typeof this.config.style == "function" ? this.config.style(this.api.state) : this.config.style;
-    e.textContent = t;
-  }
-  /**
-   * Processes and attaches ref handlers for elements with data-ref attributes.
-   */
-  processRefs() {
-    if (!this.config.refs) return;
-    const e = /* @__PURE__ */ new WeakMap();
-    Object.entries(this.config.refs).forEach(([t, r]) => {
-      const n = this.shadowRoot.querySelector(`[data-ref="${t}"]`);
-      if (n) {
-        e.has(n) || e.set(n, /* @__PURE__ */ new Set());
-        const o = e.get(n), s = n.addEventListener;
-        n.addEventListener = function(i, a, c) {
-          const l = `${i}`;
-          o.has(l) || (o.add(l), s.call(n, i, a, c));
-        }, n.setAttribute("data-refs-processed", "true");
-        try {
-          r(n, this.api.state, this.api);
-        } catch (i) {
-          this._handleRenderError(i);
+          return n[i] = s, !0;
         }
-      }
-    });
-  }
-  /**
-   * Automatically bind events for elements with data-on-* attributes.
-   * Ensures events are not attached multiple times after rerender.
-   */
-  bindEvents() {
-    if (!this.shadowRoot) return;
-    const e = document.createTreeWalker(this.shadowRoot, NodeFilter.SHOW_ELEMENT);
-    let t = e.nextNode();
-    for (; t; ) {
-      const r = t;
-      Array.from(r.attributes).forEach((n) => {
-        if (n.name.startsWith("data-on-")) {
-          const o = n.name.slice(8), s = n.value, i = this.config[s];
-          if (typeof i == "function") {
-            r._boundHandlers && r._boundHandlers[o] && r.removeEventListener(o, r._boundHandlers[o]);
-            const a = (c) => {
-              i.call(this.config, c, this.api.state, this.api), this.syncControlledInputsAndEvents();
-            };
-            r.addEventListener(o, a), r._boundHandlers || (r._boundHandlers = {}), r._boundHandlers[o] = a;
-          } else
-            this.config.debug && console.warn(`[runtime] Handler '${s}' not found on config for event '${o}'`, r);
+      });
+      me(
+        this.shadowRoot,
+        Array.isArray(t) ? t : [t],
+        r
+      ), this._lastHtmlStringForJitCSS = this.shadowRoot.innerHTML;
+    }
+    _requestRender() {
+      if (this._renderTimeoutId !== null && clearTimeout(this._renderTimeoutId), Date.now() - this._lastRenderTime < 16) {
+        if (this._renderCount++, this._renderCount > 10) {
+          console.warn(
+            `[${this.tagName}] Potential infinite render loop detected. Skipping render.`
+          ), this._renderTimeoutId = null;
+          return;
         }
-      }), t = e.nextNode();
+      } else
+        this._renderCount = 0;
+      this._renderTimeoutId = setTimeout(() => {
+        this._lastRenderTime = Date.now(), this._render(this._cfg), this._renderTimeoutId = null;
+      }, 0);
     }
-  }
-  /**
-   * Renders a fallback error UI in the shadow root.
-   * @param error - Error object
-   */
-  renderError(e) {
-    const t = this.config.style ? typeof this.config.style == "function" ? this.config.style(this.api.state) : this.config.style : "";
-    this.shadowRoot.innerHTML = `
-        <style>${t}</style>
-        <div style="color: red; border: 1px solid red; padding: 1rem; border-radius: 4px;">
-          <h3>Error Boundary</h3>
-          <div>Error: ${e.message}</div>
-        </div>
-      `;
-  }
-} : H = class {
-  // No-op for SSR, just a stub
-  constructor() {
-  }
-};
-function W(e, t) {
-  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: () => () => {
-      },
-      offGlobal: () => {
-      },
-      emitGlobal: () => {
-      }
-    }), t && t.debug && console.error("[runtime] Malformed config:", { tag: e, config: t });
-    return;
-  }
-  if (A.forEach((u) => {
-    try {
-      u.onInit?.(t);
-    } catch (d) {
-      t && typeof t.onError == "function" && t.onError(d instanceof Error ? d : new Error(String(d)), t.state, {
-        state: t.state,
-        emit: () => {
-        },
-        onGlobal: () => () => {
-        },
-        offGlobal: () => {
-        },
-        emitGlobal: () => {
+    // --- Style ---
+    _applyStyle(t) {
+      this._runLogicWithinErrorBoundary(t, () => {
+        if (!this.shadowRoot) return;
+        const r = Ae(this._lastHtmlStringForJitCSS);
+        if (!t.style && (!r || r.trim() === "")) {
+          this._styleSheet = null;
+          return;
         }
-      }), t && t.debug && console.error("[runtime] Plugin onInit error:", d);
+        let n = "";
+        t.style && (typeof t.style == "string" ? n = t.style : typeof t.style == "function" && (n = t.style(this.context)));
+        let i = Te(`${be}
+${n}
+${r}
+`);
+        t.minifyCSS && (i = ye(i)), this._styleSheet || (this._styleSheet = new CSSStyleSheet()), this._styleSheet.replaceSync(i), this.shadowRoot.adoptedStyleSheets = [this._styleSheet];
+      });
     }
-  }), (typeof window < "u" && window.VITE_DEV_HMR || typeof import.meta < "u" && void 0) && typeof customElements < "u" && customElements.get(e))
-    try {
-      document.querySelectorAll(e).forEach((u) => u.remove()), window.customElements._definitions && delete window.customElements._definitions[e];
-    } catch {
+    // --- Error Boundary function ---
+    _runLogicWithinErrorBoundary(t, r) {
+      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,
+          this.context
+        ));
+      }
     }
-  if (typeof customElements < "u" && customElements.get(e)) {
-    t.debug && console.warn(`[runtime] Component "${e}" already registered`);
-    return;
-  }
-  const s = x(t.state ?? {}, t.computed);
-  t.state = s, t._subscribe = s.subscribe;
-  const i = t.state ?? {}, a = Object.keys(i).filter(
-    (u) => ["string", "number", "boolean"].includes(typeof i[u])
-  );
-  class c extends H {
-    static get observedAttributes() {
-      return a;
+    // --- State, props, computed ---
+    _initContext(t) {
+      try {
+        let r = 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" && [
+                "push",
+                "pop",
+                "shift",
+                "unshift",
+                "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);
+                }
+                return f;
+              } : a;
+            },
+            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);
+              }
+              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);
+              }
+              return !0;
+            }
+          }) : i && typeof i == "object" ? (Object.keys(i).forEach((o) => {
+            const c = s ? `${s}.${o}` : o;
+            i[o] = r(i[o], c);
+          }), 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;
+            },
+            get(o, c, d) {
+              return Reflect.get(o, c, d);
+            }
+          })) : i;
+        };
+        const n = this;
+        return r({ ...t.state });
+      } catch {
+        return {};
+      }
     }
-    constructor() {
-      super();
+    _initWatchers(t) {
+      if (t.watch)
+        for (const [r, n] of Object.entries(t.watch)) {
+          let i, s = {};
+          if (Array.isArray(n) ? (i = n[0], s = n[1] || {}) : i = n, this._watchers.set(r, {
+            callback: i,
+            options: s,
+            oldValue: this._getNestedValue(r)
+          }), s.immediate)
+            try {
+              const o = this._getNestedValue(r);
+              i(o, void 0, this.context);
+            } catch (o) {
+              console.error(`Error in immediate watcher for "${r}":`, o);
+            }
+        }
     }
-  }
-  const l = c;
-  typeof customElements < "u" && !customElements.get(e) && (window.__componentRegistry = window.__componentRegistry || {}, window.__componentRegistry[e] = t, customElements.define(e, l));
-}
-function gt(e) {
-  const t = ct(e);
-  return W("router-view", {
-    template: async () => {
-      if (!t) return "<div>Router not initialized.</div>";
-      const r = t.getCurrent(), { path: n } = r, o = t.matchRoute(n);
-      return o.route ? (o.route.load && await o.route.load(), `<${o.route.component}></${o.route.component}>`) : "<div>Not found</div>";
-    },
-    onMounted(r, n) {
-      t && typeof t.subscribe == "function" && t.subscribe(() => {
-        n.render();
-      });
+    _getNestedValue(t) {
+      return t.split(".").reduce(
+        (r, n) => r?.[n],
+        this.context
+      );
     }
-  }), W("router-link", {
-    state: {
-      to: "",
-      tag: "a",
-      replace: !1,
-      exact: !1,
-      activeClass: "active",
-      exactActiveClass: "exact-active",
-      ariaCurrentValue: "page",
-      disabled: !1,
-      external: !1,
-      style: J`
-        [aria-disabled="true"] {
-          pointer-events: none;
-          opacity: 0.5;
+    _triggerWatchers(t, r) {
+      const n = (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]));
+      }, i = this._watchers.get(t);
+      if (i && !n(r, i.oldValue))
+        try {
+          i.callback(r, i.oldValue, this.context), i.oldValue = r;
+        } catch (s) {
+          console.error(`Error in watcher for "${t}":`, s);
         }
-      `
-    },
-    computed: {
-      current() {
-        return t.getCurrent();
-      },
-      isExactActive(r) {
-        return r.current.path === r.to;
-      },
-      isActive(r) {
-        const n = r.current;
-        return r.exact ? r.isExactActive : n && typeof n.path == "string" ? n.path.startsWith(r.to) : !1;
-      },
-      className(r) {
-        return r.isExactActive ? r.exactActiveClass : r.isActive ? r.activeClass : "";
-      },
-      ariaCurrent(r) {
-        return r.isExactActive ? `aria-current="${r.ariaCurrentValue}"` : "";
-      },
-      isButton(r) {
-        return r.tag === "button";
-      },
-      disabledAttr(r) {
-        return r.disabled ? r.isButton ? 'disabled aria-disabled="true" tabindex="-1"' : 'aria-disabled="true" tabindex="-1"' : "";
-      },
-      externalAttr(r) {
-        return r.external && (r.tag === "a" || !r.tag) ? 'target="_blank" rel="noopener noreferrer"' : "";
-      }
-    },
-    reflect: ["to", "tag", "replace", "exact", "activeClass", "exactActiveClass", "ariaCurrentValue", "disabled", "external", "style"],
-    style: (r) => r.style,
-    template: (r) => T`
-      ${r.isButton ? T`
-        <button
-          part="button"
-          class="${r.className}"
-          ${r.ariaCurrent}
-          ${r.disabledAttr}
-          ${r.externalAttr}
-          data-on-click="navigate"
-        ><slot></slot></button>
-      `(r) : T`
-        <a
-          part="link"
-          href="${r.to}"
-          class="${r.className}"
-          ${r.ariaCurrent}
-          ${r.disabledAttr}
-          ${r.externalAttr}
-          data-on-click="navigate"
-        ><slot></slot></a>
-      `(r)}
-    `(r),
-    navigate: (r, n) => {
-      if (n.disabled) {
-        r.preventDefault();
-        return;
+      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);
+          }
+    }
+    _applyProps(t) {
+      try {
+        let r = function(n, i) {
+          return i === Boolean ? n === "true" : i === Number ? Number(n) : n;
+        };
+        if (!t.props) return;
+        Object.entries(t.props).forEach(([n, i]) => {
+          const s = this.getAttribute(Z(n));
+          s !== null ? this.context[n] = q(
+            r(s, i.type)
+          ) : "default" in i && i.default !== void 0 && (this.context[n] = q(i.default));
+        });
+      } catch (r) {
+        this._hasError = !0, t.onError && t.onError(r, this.context), t.errorFallback && this.shadowRoot && (this.shadowRoot.innerHTML = t.errorFallback(
+          r,
+          this.context
+        ));
       }
-      n.external && (n.tag === "a" || !n.tag) || (r.preventDefault(), n.replace ? t.replace(n.to) : t.push(n.to));
     }
-  }), t;
+  };
 }
 export {
-  N as Store,
-  ft as classes,
-  dt as compile,
-  pt as compileTemplate,
-  W as component,
-  $ as createVNodeFromElement,
-  J as css,
-  _ as deepSanitizeObject,
-  w as eventBus,
-  ut as generateHydrationScript,
-  q as getVNodeKey,
-  T as html,
-  gt as initRouter,
-  O as isPromise,
-  mt as matchRouteSSR,
-  g as mountVNode,
-  it as parseVNodeFromHTML,
-  M as patchVNode,
-  P as renderCompiledTemplate,
-  lt as renderComponentsToString,
-  V as renderToString,
-  at as resolveRouteComponent,
-  A as runtimePlugins,
-  z as safeReplaceChild,
-  ht as styles,
-  nt as updateCompiledTemplate,
-  Q as useDataModel,
-  ct as useRouter,
-  yt as useRuntimePlugin
+  Pe as component,
+  Le as createElementClass,
+  Ne as createStore,
+  Me as css,
+  Be as each,
+  je as eventBus,
+  ze as html,
+  Oe as match,
+  Re as when
 };
 //# sourceMappingURL=custom-elements-runtime.es.js.map