@jasonshimmy/custom-elements-runtime 0.0.6 → 0.0.7-beta.0

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

@@ -1,16 +1,16 @@
-function $(e) {
-  let t = new Proxy(e, {
+function j(t) {
+  let e = new Proxy(t, {
     set: (i, a, c) => (i[a] = c, s(), !0)
   });
   const n = [];
   function r(i) {
-    n.push(i), i(t);
+    n.push(i), i(e);
   }
   function o() {
-    return t;
+    return e;
   }
   function s() {
-    n.forEach((i) => i(t));
+    n.forEach((i) => i(e));
   }
   return { subscribe: r, getState: o };
 }
@@ -30,26 +30,26 @@ class y extends EventTarget {
    * @param eventName - Name of the event
    * @param data - Optional event payload
    */
-  emit(t, n) {
-    const r = Date.now(), o = this.eventCounters.get(t);
+  emit(e, n) {
+    const r = Date.now(), o = this.eventCounters.get(e);
     if (!o || r - o.window > 1e3)
-      this.eventCounters.set(t, { count: 1, window: r });
-    else if (o.count++, o.count > 50 && (console.error(`Event storm detected for "${t}": ${o.count} events in 1 second. Throttling...`), o.count > 100)) {
-      console.warn(`Blocking further "${t}" events to prevent infinite loop`);
+      this.eventCounters.set(e, { count: 1, window: r });
+    else if (o.count++, o.count > 50 && (console.error(`Event storm detected for "${e}": ${o.count} events in 1 second. Throttling...`), o.count > 100)) {
+      console.warn(`Blocking further "${e}" events to prevent infinite loop`);
       return;
     }
-    this.dispatchEvent(new CustomEvent(t, {
+    this.dispatchEvent(new CustomEvent(e, {
       detail: n,
       bubbles: !1,
       // Global events don't need to bubble
       cancelable: !0
     }));
-    const s = this.handlers[t];
+    const s = this.handlers[e];
     s && s.forEach((i) => {
       try {
         i(n);
       } catch (a) {
-        console.error(`Error in global event handler for "${t}":`, a);
+        console.error(`Error in global event handler for "${e}":`, a);
       }
     });
   }
@@ -58,24 +58,24 @@ class y extends EventTarget {
    * @param eventName - Name of the event
    * @param handler - Handler function
    */
-  on(t, n) {
-    return this.handlers[t] || (this.handlers[t] = /* @__PURE__ */ new Set()), this.handlers[t].add(n), () => this.off(t, n);
+  on(e, n) {
+    return this.handlers[e] || (this.handlers[e] = /* @__PURE__ */ new Set()), this.handlers[e].add(n), () => this.off(e, n);
   }
   /**
    * Remove a specific handler for a global event.
    * @param eventName - Name of the event
    * @param handler - Handler function to remove
    */
-  off(t, n) {
-    const r = this.handlers[t];
+  off(e, n) {
+    const r = this.handlers[e];
     r && r.delete(n);
   }
   /**
    * Remove all handlers for a specific event.
    * @param eventName - Name of the event
    */
-  offAll(t) {
-    delete this.handlers[t];
+  offAll(e) {
+    delete this.handlers[e];
   }
   /**
    * Listen for a native CustomEvent. Returns an unsubscribe function.
@@ -83,17 +83,17 @@ class y extends EventTarget {
    * @param handler - CustomEvent handler
    * @param options - AddEventListener options
    */
-  listen(t, n, r) {
-    return this.addEventListener(t, n, r), () => this.removeEventListener(t, n);
+  listen(e, n, r) {
+    return this.addEventListener(e, n, r), () => this.removeEventListener(e, n);
   }
   /**
    * Register a one-time event handler. Returns a promise that resolves with the event data.
    * @param eventName - Name of the event
    * @param handler - Handler function
    */
-  once(t, n) {
+  once(e, n) {
     return new Promise((r) => {
-      const o = this.on(t, (s) => {
+      const o = this.on(e, (s) => {
         o(), n(s), r(s);
       });
     });
@@ -103,7 +103,7 @@ class y extends EventTarget {
    */
   getActiveEvents() {
     return Object.keys(this.handlers).filter(
-      (t) => this.handlers[t] && this.handlers[t].size > 0
+      (e) => this.handlers[e] && this.handlers[e].size > 0
     );
   }
   /**
@@ -116,20 +116,20 @@ class y extends EventTarget {
    * Get the number of handlers registered for a specific event.
    * @param eventName - Name of the event
    */
-  getHandlerCount(t) {
-    return this.handlers[t]?.size || 0;
+  getHandlerCount(e) {
+    return this.handlers[e]?.size || 0;
   }
   /**
    * Get event statistics for debugging.
    */
   getEventStats() {
-    const t = {};
+    const e = {};
     for (const [n, r] of this.eventCounters.entries())
-      t[n] = {
+      e[n] = {
         count: r.count,
         handlersCount: this.getHandlerCount(n)
       };
-    return t;
+    return e;
   }
   /**
    * Reset event counters (useful for testing or after resolving issues).
@@ -138,10 +138,10 @@ class y extends EventTarget {
     this.eventCounters.clear();
   }
 }
-const w = y.getInstance(), F = typeof window > "u" || typeof document > "u";
-function K(e) {
+const w = y.getInstance(), K = typeof window > "u" || typeof document > "u";
+function U(t) {
   return {
-    state: e,
+    state: t,
     emit: () => {
     },
     // No-op on server
@@ -153,29 +153,29 @@ function K(e) {
     }
   };
 }
-function U(e, t = {}) {
-  F || console.warn("[SSR] renderToString should only be used on the server");
+function G(t, e = {}) {
+  K || console.warn("[SSR] renderToString should only be used on the server");
   try {
-    const n = e.state, r = K(n), o = e.template(n, r);
+    const n = t.state, r = U(n), o = t.template(n, r);
     let s = "";
-    t.includeStyles && e.style && (s = `<style>${typeof e.style == "function" ? e.style(n) : e.style}</style>`);
-    const i = t.sanitizeAttributes ? t.sanitizeAttributes(e.attrs || {}) : e.attrs || {}, a = Object.entries(i).map(([u, d]) => `${j(u)}="${j(d)}"`).join(" "), l = `${a ? `<${e.tag} ${a}>` : `<${e.tag}>`}${s}${o}</${e.tag}>`;
-    return t.prettyPrint ? Z(l) : l;
+    e.includeStyles && t.style && (s = `<style>${typeof t.style == "function" ? t.style(n) : t.style}</style>`);
+    const i = e.sanitizeAttributes ? e.sanitizeAttributes(t.attrs || {}) : t.attrs || {}, a = Object.entries(i).map(([d, u]) => `${x(d)}="${x(u)}"`).join(" "), l = `${a ? `<${t.tag} ${a}>` : `<${t.tag}>`}${s}${o}</${t.tag}>`;
+    return e.prettyPrint ? B(l) : l;
   } catch (n) {
-    return console.error(`[SSR] Error rendering ${e.tag}:`, n), `<${e.tag}><div style="color: red;">SSR Error: ${G(String(n))}</div></${e.tag}>`;
+    return console.error(`[SSR] Error rendering ${t.tag}:`, n), `<${t.tag}><div style="color: red;">SSR Error: ${Z(String(n))}</div></${t.tag}>`;
   }
 }
-function st(e, t = {}) {
+function ot(t, e = {}) {
   const n = {
     components: /* @__PURE__ */ new Map(),
     styles: /* @__PURE__ */ new Set()
   }, r = [];
-  e.forEach((i) => {
+  t.forEach((i) => {
     if (n.components.set(i.tag, i), i.style) {
       const c = typeof i.style == "function" ? i.style(i.state) : i.style;
       n.styles.add(c);
     }
-    const a = U(i, { ...t, includeStyles: !1 });
+    const a = G(i, { ...e, includeStyles: !1 });
     r.push(a);
   });
   const o = Array.from(n.styles).join(`
@@ -183,15 +183,15 @@ function st(e, t = {}) {
   return { html: r.join(`
 `), styles: o, context: n };
 }
-function it(e) {
-  const t = Array.from(e.components.entries()).map(([n, r]) => ({
+function at(t) {
+  const e = Array.from(t.components.entries()).map(([n, r]) => ({
     tag: n,
     state: r.state
   }));
   return `
 <script type="module">
   // Hydration data from SSR
-  window.__SSR_CONTEXT__ = ${JSON.stringify({ components: t })};
+  window.__SSR_CONTEXT__ = ${JSON.stringify({ components: e })};
   
   // Auto-hydrate when DOM is ready
   if (document.readyState === 'loading') {
@@ -223,33 +223,33 @@ function it(e) {
   }
 <\/script>`.trim();
 }
-const G = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), j = (e) => e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), Z = (e) => e.replace(/></g, `>
+const Z = (t) => t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), x = (t) => t.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), B = (t) => t.replace(/></g, `>
 <`).split(`
-`).map((t) => {
-  const n = (t.match(/^<[^\/]/g) || []).length - (t.match(/<\//g) || []).length;
-  return "  ".repeat(Math.max(0, n)) + t.trim();
+`).map((e) => {
+  const n = (e.match(/^<[^\/]/g) || []).length - (e.match(/<\//g) || []).length;
+  return "  ".repeat(Math.max(0, n)) + e.trim();
 }).join(`
 `);
-function x(e) {
-  return String(e).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function D(t) {
+  return String(t).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function O(e, t) {
-  if (typeof e != "string" || !t) return String(e);
-  for (const n in t) {
-    if (typeof t[n] == "string" && e === t[n])
-      return x(e);
-    if (Array.isArray(t[n])) {
-      for (const r of t[n])
+function k(t, e) {
+  if (typeof t != "string" || !e) return String(t);
+  for (const n in e) {
+    if (typeof e[n] == "string" && t === e[n])
+      return D(t);
+    if (Array.isArray(e[n])) {
+      for (const r of e[n])
         if (r && typeof r == "object") {
           for (const o in r)
-            if (typeof r[o] == "string" && e === r[o])
-              return x(e);
+            if (typeof r[o] == "string" && t === r[o])
+              return D(t);
         }
     }
   }
-  return String(e);
+  return String(t);
 }
-function ot(e, ...t) {
+function ct(t, ...e) {
   function n(r, o, s) {
     if (Array.isArray(r)) {
       const i = r.map((a) => n(a, o, s));
@@ -264,91 +264,91 @@ function ot(e, ...t) {
   return (r, o) => {
     let s = "", i = !1;
     const a = [];
-    for (let c = 0; c < e.length; c++)
-      if (s += e[c], c < t.length) {
-        let l = t[c];
-        const u = e[c], d = /data-on-[a-z]+="?$/.test(u);
-        l = n(l, r, 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 += O(l, r) : s += l;
+    for (let c = 0; c < t.length; c++)
+      if (s += t[c], c < e.length) {
+        let l = e[c];
+        const d = t[c], u = /data-on-[a-z]+="?$/.test(d);
+        l = n(l, r, o), l instanceof Promise ? (i = !0, a.push(l)) : /=\s*"?$/.test(d) && typeof l == "string" && !u ? (l = l.replace(/"/g, "&quot;").replace(/'/g, "&#39;"), s += l) : !u && !/=\s*"?$/.test(d) ? s += k(l, r) : s += l;
       }
     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 = n(f, r, 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 += O(f, r) : l += f;
+      let l = "", d = 0;
+      for (let u = 0; u < t.length; u++)
+        if (l += t[u], u < e.length) {
+          let f = e[u];
+          const h = t[u], m = /data-on-[a-z]+="?$/.test(h);
+          f = n(f, r, o), f instanceof Promise ? l += c[d++] : /=\s*"?$/.test(h) && typeof f == "string" && !m ? (f = f.replace(/"/g, "&quot;").replace(/'/g, "&#39;"), l += f) : !m && !/=\s*"?$/.test(h) ? l += k(f, r) : l += f;
         }
       return l;
     }) : s;
   };
 }
-function at(e, ...t) {
+function lt(t, ...e) {
   const n = "compiled-" + Math.random().toString(36).slice(2);
   function r(s, i, a) {
     return Array.isArray(s) ? s.map((c) => r(c, i, a)).join("") : typeof s == "function" ? r(s(i, a), i, a) : s == null ? "" : String(s);
   }
   const 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 = r(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 += O(l, s) : a += l ?? "";
+    for (let c = 0; c < t.length; c++)
+      if (a += t[c], c < e.length) {
+        let l = e[c];
+        const d = t[c], u = /data-on-[a-z]+="?$/.test(d);
+        l = r(l, s, i), /=\s*"?$/.test(d) && typeof l == "string" && !u ? (l = l.replace(/"/g, "&quot;").replace(/'/g, "&#39;"), a += l) : !u && !/=\s*"?$/.test(d) ? a += k(l, s) : a += l ?? "";
       }
     return a;
   };
   return o.id = n, o;
 }
-function ct(e, ...t) {
+function dt(t, ...e) {
   let n = "";
-  for (let r = 0; r < e.length; r++)
-    n += e[r], r < t.length && (n += t[r] ?? "");
+  for (let r = 0; r < t.length; r++)
+    n += t[r], r < e.length && (n += e[r] ?? "");
   return n;
 }
-function lt(e) {
-  return Object.keys(e).filter((t) => e[t]).join(" ");
+function ut(t) {
+  return Object.keys(t).filter((e) => t[e]).join(" ");
 }
-function ut(e) {
-  return Object.entries(e).map(([t, n]) => `${t}: ${n}`).join("; ");
+function ft(t) {
+  return Object.entries(t).map(([e, n]) => `${e}: ${n}`).join("; ");
 }
-function B(e, t, n) {
+function X(t, e, n) {
   const [r, ...o] = n.split("|").map((a) => a.trim());
   if (!r || r === "__proto__" || r === "constructor" || r === "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 d = c.split(".");
+    let u = a;
+    for (let f = 0; f < d.length - 1; f++)
+      d[f] in u || (u[d[f]] = {}), u = u[d[f]];
+    u[d[d.length - 1]] = 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[r]) ? t[r] : void 0;
-      if (d) {
-        if (e.checked)
-          d.includes(c) || d.push(c);
+    if (t instanceof HTMLInputElement && t.type === "checkbox") {
+      c = t.value;
+      const l = t.getAttribute("data-true-value"), d = t.getAttribute("data-false-value");
+      let u = Array.isArray(e[r]) ? e[r] : void 0;
+      if (u) {
+        if (t.checked)
+          u.includes(c) || u.push(c);
         else {
-          const f = d.indexOf(c);
-          f !== -1 && d.splice(f, 1);
+          const f = u.indexOf(c);
+          f !== -1 && u.splice(f, 1);
         }
-        s(t, r, [...d]);
+        s(e, r, [...u]);
       } else
-        l !== null || u !== null ? e.checked ? s(t, r, l) : s(t, r, u !== null ? u : !1) : s(t, r, e.checked);
-    } else e instanceof HTMLInputElement && e.type === "radio" ? (c = e.value, s(t, r, c), ((e.form || e.closest("form") || e.getRootNode()) instanceof Element ? (e.form || e.closest("form") || e.getRootNode()).querySelectorAll(`input[type="radio"][name="${e.name}"][data-model="${n}"]`) : []).forEach((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, r, c));
-    if ("_vnode" in e && typeof e._vnode == "object" && e._vnode?.props && (e._vnode.props.value = c), a.type === "input" && (e._isDirty = !0), a.type === "keydown" && a.key === "Enter" && (e._isDirty = !1, e instanceof HTMLElement && e.isConnected)) {
-      let l = e.parentElement;
+        l !== null || d !== null ? t.checked ? s(e, r, l) : s(e, r, d !== null ? d : !1) : s(e, r, t.checked);
+    } else t instanceof HTMLInputElement && t.type === "radio" ? (c = t.value, s(e, r, c), ((t.form || t.closest("form") || t.getRootNode()) instanceof Element ? (t.form || t.closest("form") || t.getRootNode()).querySelectorAll(`input[type="radio"][name="${t.name}"][data-model="${n}"]`) : []).forEach((d) => {
+      d.checked = d.value === String(c);
+    })) : (c = t.value, t instanceof HTMLInputElement && t.type === "number" && (c = Number(c)), o.includes("trim") && typeof c == "string" && (c = c.trim()), o.includes("number") && (c = Number(c)), s(e, r, c));
+    if ("_vnode" in t && typeof t._vnode == "object" && t._vnode?.props && (t._vnode.props.value = c), a.type === "input" && (t._isDirty = !0), a.type === "keydown" && a.key === "Enter" && (t._isDirty = !1, t instanceof HTMLElement && t.isConnected)) {
+      let l = t.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();
     }
-    a.type === "blur" && (e._isDirty = !1);
+    a.type === "blur" && (t._isDirty = !1);
   };
-  e.addEventListener("input", i), e.addEventListener("change", i), e.addEventListener("keydown", i), e.addEventListener("blur", i);
+  t.addEventListener("input", i), t.addEventListener("change", i), t.addEventListener("keydown", i), t.addEventListener("blur", i);
 }
 const H = (() => {
   try {
@@ -358,8 +358,8 @@ const H = (() => {
   }
   return typeof window < "u" ? window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" : !1;
 })();
-function dt(e, t = {}) {
-  const { development: n = H, cache: r = !0, optimize: o = !0 } = t, s = q(e);
+function ht(t, e = {}) {
+  const { development: n = H, cache: r = !0, optimize: o = !0 } = e, s = z(t);
   if (r && T.has(s)) {
     if (n) {
       const i = v.get(s) || {
@@ -384,31 +384,31 @@ function dt(e, t = {}) {
     i.cacheMisses++, v.set(s, i);
   }
   try {
-    const i = V(e, { development: n, optimize: o });
+    const i = Y(t, { development: n, optimize: o });
     return r && T.set(s, i), i;
   } catch (i) {
-    return n && (console.error("[Template Compiler] Error compiling template:", i), console.error("[Template Compiler] Template:", e)), {
-      statics: [e],
+    return n && (console.error("[Template Compiler] Error compiling template:", i), console.error("[Template Compiler] Template:", t)), {
+      statics: [t],
       dynamics: [],
       fragment: null,
       id: s,
       hasDynamics: !1,
-      render: () => e
+      render: () => t
     };
   }
 }
-function X(e, t) {
+function V(t, e) {
   if (typeof document > "u")
     return [0];
   try {
     let n = function(a, c = []) {
       if (a.nodeType === Node.TEXT_NODE) {
-        if (a.textContent?.includes(t))
+        if (a.textContent?.includes(e))
           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 = n(d, [...c, l]);
+        for (let d = 0; d < a.childNodes.length; d++) {
+          const u = a.childNodes[d], f = n(u, [...c, l]);
           if (f)
             return f;
           l++;
@@ -416,39 +416,39 @@ function X(e, t) {
       }
       return null;
     };
-    const s = new DOMParser().parseFromString(`<div>${e}</div>`, "text/html").body.firstElementChild;
+    const s = new DOMParser().parseFromString(`<div>${t}</div>`, "text/html").body.firstElementChild;
     return n(s) || [0];
   } catch (n) {
-    return H && console.warn("[Template Compiler] Error finding DOM path for placeholder:", t, n), [0];
+    return H && console.warn("[Template Compiler] Error finding DOM path for placeholder:", e, n), [0];
   }
 }
-function V(e, t) {
-  return new Y(e, t).compile();
+function Y(t, e) {
+  return new J(t, e).compile();
 }
-class Y {
+class J {
   template;
   options;
   dynamics = [];
   statics = [];
-  constructor(t, n) {
-    this.template = t, this.options = n;
+  constructor(e, n) {
+    this.template = e, this.options = n;
   }
   compile() {
     this.parseTemplate();
-    const t = this.createStaticFragment(), n = q(this.template), r = (o, s) => {
+    const e = this.createStaticFragment(), n = z(this.template), r = (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);
+              const d = l.getValue(o, s);
+              return d instanceof Promise ? d : Promise.resolve(d);
             })).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;
+              let d = "";
+              for (let u = 0; u < this.statics.length; u++)
+                d += this.statics[u], u < l.length && (d += l[u]);
+              return d;
             });
           i += c;
         }
@@ -457,24 +457,24 @@ class Y {
     return {
       statics: this.statics,
       dynamics: this.dynamics,
-      fragment: t,
+      fragment: e,
       id: n,
       hasDynamics: this.dynamics.length > 0,
       render: r
     };
   }
   parseTemplate() {
-    const t = /\{\{([^}]+)\}\}/g;
+    const e = /\{\{([^}]+)\}\}/g;
     let n = 0, r;
-    for (; (r = t.exec(this.template)) !== null; ) {
+    for (; (r = e.exec(this.template)) !== null; ) {
       const s = this.template.slice(n, r.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());
+        const d = s.match(/style\s*=\s*"?([^:;]+):\s*$/);
+        d && (c = d[1].trim());
       }
       const l = r[1].trim();
       this.analyzeDynamicExpression(l, this.dynamics.length, a, c), n = r.index + r[0].length;
@@ -482,31 +482,31 @@ class Y {
     const o = this.template.slice(n);
     this.statics.push(o);
   }
-  analyzeDynamicExpression(t, n, r, o) {
+  analyzeDynamicExpression(e, n, r, o) {
     let s = "text", i;
-    r ? r === "class" ? (s = "class", i = "class") : r === "style" ? (s = "style", i = o || "style") : r === "value" ? (s = "property", i = "value") : (s = "attribute", i = r) : t.includes("class.") ? (s = "class", i = t.split(".")[1]) : t.includes("style.") ? (s = "style", i = t.split(".")[1]) : t.includes("@") ? (s = "event", i = t.split("@")[1]) : t === "class" ? (s = "class", i = "class") : t === "style" ? (s = "style", i = "style") : t === "value" ? (s = "property", i = "value") : t === "title" && (s = "attribute", i = "title");
+    r ? r === "class" ? (s = "class", i = "class") : r === "style" ? (s = "style", i = o || "style") : r === "value" ? (s = "property", i = "value") : (s = "attribute", i = r) : e.includes("class.") ? (s = "class", i = e.split(".")[1]) : e.includes("style.") ? (s = "style", i = e.split(".")[1]) : e.includes("@") ? (s = "event", i = e.split("@")[1]) : e === "class" ? (s = "class", i = "class") : e === "style" ? (s = "style", i = "style") : e === "value" ? (s = "property", i = "value") : e === "title" && (s = "attribute", i = "title");
     const a = `__DYNAMIC_${n}__`, c = this.statics.join(a);
-    let l = X(c, a);
+    let l = V(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)
+      getValue: this.createValueGetter(e)
     });
   }
-  createValueGetter(t) {
+  createValueGetter(e) {
     return (n, r) => {
       try {
         let o;
-        if (t && typeof t == "function")
-          o = t(n);
-        else if (typeof t == "string" && t.startsWith("state.")) {
-          const s = t.slice(6);
+        if (e && typeof e == "function")
+          o = e(n);
+        else if (typeof e == "string" && e.startsWith("state.")) {
+          const s = e.slice(6);
           o = n[s];
-        } else typeof t == "string" && /^[a-zA-Z0-9_$]+$/.test(t) ? o = n[t] : (typeof t == "string" && t.includes("("), o = "");
+        } else typeof e == "string" && /^[a-zA-Z0-9_$]+$/.test(e) ? o = n[e] : (typeof e == "string" && e.includes("("), o = "");
         return o;
       } catch (o) {
-        return this.options.development && console.warn(`[Template Compiler] Error evaluating expression: ${t}`, o), "";
+        return this.options.development && console.warn(`[Template Compiler] Error evaluating expression: ${e}`, o), "";
       }
     };
   }
@@ -514,25 +514,25 @@ class Y {
     if (typeof document > "u")
       return null;
     try {
-      const t = this.statics.join("");
-      if (!t.trim())
+      const e = this.statics.join("");
+      if (!e.trim())
         return null;
-      const r = new DOMParser().parseFromString(t, "text/html"), o = document.createDocumentFragment();
+      const r = new DOMParser().parseFromString(e, "text/html"), o = document.createDocumentFragment();
       for (; r.body.firstChild; )
         o.appendChild(r.body.firstChild);
       return o;
-    } catch (t) {
-      return this.options.development && console.warn("[Template Compiler] Could not create static fragment:", t), null;
+    } catch (e) {
+      return this.options.development && console.warn("[Template Compiler] Could not create static fragment:", e), null;
     }
   }
 }
-function k(e, t) {
+function L(t, e) {
   try {
-    if (t.length === 1 && t[0] === 0 && e instanceof Element)
-      return e;
-    let n = e;
-    for (let r = 0; r < t.length; r++) {
-      const o = t[r];
+    if (e.length === 1 && e[0] === 0 && t instanceof Element)
+      return t;
+    let n = t;
+    for (let r = 0; r < e.length; r++) {
+      const o = e[r];
       if (!n.childNodes || n.childNodes.length <= o)
         return null;
       n = n.childNodes[o];
@@ -542,29 +542,29 @@ function k(e, t) {
     return null;
   }
 }
-function D(e, t, n) {
+function I(t, e, n) {
   let r;
-  return e.fragment && !e.hasDynamics ? r = e.fragment.cloneNode(!0) : r = Q(e, t, n), r;
+  return t.fragment && !t.hasDynamics ? r = t.fragment.cloneNode(!0) : r = tt(t, e, n), r;
 }
-function J(e, t, n, r, o) {
-  if (e.hasDynamics)
-    for (const s of e.dynamics)
+function Q(t, e, n, r, o) {
+  if (t.hasDynamics)
+    for (const s of t.dynamics)
       try {
         const i = s.getValue(n, r);
         if (o !== void 0 && s.getValue(o, r) === i)
           continue;
-        P(t, s, i);
+        q(e, s, i);
       } catch (i) {
         console.warn("[Template Compiler] Error applying update:", i);
       }
 }
-function Q(e, t, n) {
+function tt(t, e, n) {
   let r = "";
-  for (let a = 0; a < e.statics.length; a++)
-    if (r += e.statics[a], a < e.dynamics.length) {
-      const c = e.dynamics[a];
+  for (let a = 0; a < t.statics.length; a++)
+    if (r += t.statics[a], a < t.dynamics.length) {
+      const c = t.dynamics[a];
       if (c.type === "text" || c.type === "attribute") {
-        const l = c.getValue(t, n);
+        const l = c.getValue(e, n);
         r += String(l ?? "");
       } else (c.type === "property" || c.type === "class" || c.type === "style") && (r += "");
     }
@@ -573,17 +573,17 @@ function Q(e, t, n) {
   const s = new DOMParser().parseFromString(r, "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, n), l = k(i, a.path);
-    P(l, a, c);
+  for (const a of t.dynamics) {
+    const c = a.getValue(e, n), l = L(i, a.path);
+    q(l, a, c);
   }
   return i;
 }
-function P(e, t, n) {
+function q(t, e, n) {
   try {
-    if (t.type === "text") {
+    if (e.type === "text") {
       const o = document.createTreeWalker(
-        e,
+        t,
         NodeFilter.SHOW_TEXT
       );
       let s = !1, i;
@@ -595,117 +595,117 @@ function P(e, t, n) {
         }
       }
       if (s) return;
-      const a = k(e, t.path);
+      const a = L(t, e.path);
       a && a.nodeType === Node.TEXT_NODE && (a.textContent = n == null ? "" : String(n));
       return;
     }
-    const r = k(e, t.path);
+    const r = L(t, e.path);
     if (!r)
       return;
-    switch (t.type) {
+    switch (e.type) {
       case "attribute":
-        if (r.nodeType === Node.ELEMENT_NODE && t.target) {
+        if (r.nodeType === Node.ELEMENT_NODE && e.target) {
           const o = r;
-          n == null || n === "" ? o.removeAttribute(t.target) : o.setAttribute(t.target, String(n));
+          n == null || n === "" ? o.removeAttribute(e.target) : o.setAttribute(e.target, String(n));
         }
         break;
       case "property":
-        r.nodeType === Node.ELEMENT_NODE && t.target && (r[t.target] = n ?? "", r.setAttribute(t.target, n == null ? "" : String(n)));
+        r.nodeType === Node.ELEMENT_NODE && e.target && (r[e.target] = n ?? "", r.setAttribute(e.target, n == null ? "" : String(n)));
         break;
       case "class":
-        if (r.nodeType === Node.ELEMENT_NODE && t.target) {
+        if (r.nodeType === Node.ELEMENT_NODE && e.target) {
           const o = r;
           o.className = n == null ? "" : String(n), o.setAttribute("class", n == null ? "" : String(n));
         }
         break;
       case "style":
-        if (r.nodeType === Node.ELEMENT_NODE && t.target) {
+        if (r.nodeType === Node.ELEMENT_NODE && e.target) {
           const o = r;
-          o.style[t.target] = n == null ? "" : String(n), o.setAttribute("style", n == null ? `${t.target}:` : `${t.target}:${n}`);
+          o.style[e.target] = n == null ? "" : String(n), o.setAttribute("style", n == null ? `${e.target}:` : `${e.target}:${n}`);
         }
         break;
       default:
-        throw new Error(`Unknown update type: ${t.type}`);
+        throw new Error(`Unknown update type: ${e.type}`);
     }
   } catch (r) {
-    (typeof globalThis < "u" ? globalThis.isDevelopment : H) && console.warn("[Template Compiler] Error applying update:", t, r);
+    (typeof globalThis < "u" ? globalThis.isDevelopment : H) && console.warn("[Template Compiler] Error applying update:", e, r);
   }
 }
 const T = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Map();
-function q(e) {
-  let t = 0;
-  for (let n = 0; n < e.length; n++) {
-    const r = e.charCodeAt(n);
-    t = (t << 5) - t + r, t = t & t;
+function z(t) {
+  let e = 0;
+  for (let n = 0; n < t.length; n++) {
+    const r = t.charCodeAt(n);
+    e = (e << 5) - e + r, e = e & e;
   }
-  return `tpl_${Math.abs(t).toString(36)}`;
+  return `tpl_${Math.abs(e).toString(36)}`;
 }
-function I(e, t, n, r, o) {
-  return r && o ? `${t}.${e}[${n}]:${r}:${o}` : r ? `${t}.${e}[${n}]:${r}` : `${t}.${e}[${n}]`;
+function N(t, e, n, r, o) {
+  return r && o ? `${e}.${t}[${n}]:${r}:${o}` : r ? `${e}.${t}[${n}]:${r}` : `${e}.${t}[${n}]`;
 }
-function N(e, t, n) {
-  if (!(!e || !(e instanceof Element)) && e.contains(n) && n.parentNode === e)
+function P(t, e, n) {
+  if (!(!t || !(t instanceof Element)) && t.contains(n) && n.parentNode === t)
     try {
-      e.replaceChild(t, n);
+      t.replaceChild(e, n);
     } catch (r) {
       console.error("[VDOM] safeReplaceChild: error replacing child", r, {
-        parent: e,
-        newChild: t,
+        parent: t,
+        newChild: e,
         oldChild: n,
-        parentHTML: e.outerHTML,
-        newChildHTML: t.outerHTML,
+        parentHTML: t.outerHTML,
+        newChildHTML: e.outerHTML,
         oldChildHTML: n.outerHTML
       });
     }
 }
-function g(e) {
-  if (e.type === "#whitespace")
+function g(t) {
+  if (t.type === "#whitespace")
     return null;
-  if (e.type === "#text") {
-    const n = document.createTextNode(e.props.nodeValue ?? "");
-    return e.dom = n, n;
-  }
-  const t = document.createElement(e.type);
-  for (const [n, r] of Object.entries(e.props))
-    n === "value" && t instanceof HTMLInputElement ? t.type === "radio" ? t.setAttribute("value", r) : (t.type, t.value = r, t.setAttribute("value", r)) : t.setAttribute(n, r);
-  e.dom = t;
-  for (const n of e.children) {
+  if (t.type === "#text") {
+    const n = document.createTextNode(t.props.nodeValue ?? "");
+    return t.dom = n, n;
+  }
+  const e = document.createElement(t.type);
+  for (const [n, r] of Object.entries(t.props))
+    n === "value" && e instanceof HTMLInputElement ? e.type === "radio" ? e.setAttribute("value", r) : (e.type, e.value = r, e.setAttribute("value", r)) : e.setAttribute(n, r);
+  t.dom = e;
+  for (const n of t.children) {
     const r = g(n);
-    r && t.appendChild(r);
+    r && e.appendChild(r);
   }
-  return t;
+  return e;
 }
-function tt(e) {
-  const t = document.createElement("template");
-  t.innerHTML = e.trim();
-  const n = Array.from(t.content.childNodes);
-  return n.length === 1 ? L(n[0]) : {
+function et(t) {
+  const e = document.createElement("template");
+  e.innerHTML = t.trim();
+  const n = Array.from(e.content.childNodes);
+  return n.length === 1 ? R(n[0]) : {
     type: "#fragment",
     key: void 0,
     props: {},
-    children: n.map((o, s) => L(o, "#fragment", s)),
+    children: n.map((o, s) => R(o, "#fragment", s)),
     dom: void 0
   };
 }
-function L(e, t = "", n = 0) {
-  if (!e)
+function R(t, e = "", n = 0) {
+  if (!t)
     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: I("#text", t, n), props: { nodeValue: e.nodeValue }, children: [], dom: e };
-  if (e.nodeType === Node.ELEMENT_NODE) {
-    const r = e, o = {};
+  if (t.nodeType === Node.TEXT_NODE)
+    return !t.nodeValue || /^\s*$/.test(t.nodeValue) ? { type: "#whitespace", key: void 0, props: {}, children: [], dom: void 0 } : { type: "#text", key: N("#text", e, n), props: { nodeValue: t.nodeValue }, children: [], dom: t };
+  if (t.nodeType === Node.ELEMENT_NODE) {
+    const r = t, o = {};
     Array.from(r.attributes).forEach((l) => {
       o[l.name] = l.value;
     });
     const s = r.tagName.toLowerCase();
     let i;
     if ((s === "input" || s === "select" || s === "textarea") && r.hasAttribute("data-model")) {
-      const l = r.getAttribute("data-model"), u = r.getAttribute("type") ?? "";
-      i = `${s}:${l}:${u}`, o["data-uid"] = i, r.setAttribute("data-uid", i);
-      let d = r.getAttribute("value"), f = r.getAttribute("checked");
-      d && (o.value = d), f && (o.checked = f);
-    } else s === "input" || s === "textarea" || s === "select" || r.hasAttribute("contenteditable") ? (i = `${s}:${t}:${n}`, o["data-uid"] = i, r.setAttribute("data-uid", i)) : (i = I(s, t, n), s === "li" && (o["data-uid"] = i, r.setAttribute("data-uid", i)));
-    const a = Array.from(r.childNodes).map((l, u) => L(l, i, u));
+      const l = r.getAttribute("data-model"), d = r.getAttribute("type") ?? "";
+      i = `${s}:${l}:${d}`, o["data-uid"] = i, r.setAttribute("data-uid", i);
+      let u = r.getAttribute("value"), f = r.getAttribute("checked");
+      u && (o.value = u), f && (o.checked = f);
+    } else s === "input" || s === "textarea" || s === "select" || r.hasAttribute("contenteditable") ? (i = `${s}:${e}:${n}`, o["data-uid"] = i, r.setAttribute("data-uid", i)) : (i = N(s, e, n), s === "li" && (o["data-uid"] = i, r.setAttribute("data-uid", i)));
+    const a = Array.from(r.childNodes).map((l, d) => R(l, i, d));
     return {
       type: s,
       key: i,
@@ -716,23 +716,23 @@ function L(e, t = "", n = 0) {
   }
   return { type: "#unknown", key: void 0, props: {}, children: [], dom: void 0 };
 }
-function R(e, t, n) {
-  if (!t || !n) return;
+function M(t, e, n) {
+  if (!e || !n) return;
   function r(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(r) : [], s = Array.isArray(n.children) ? n.children.filter(r) : [], i = n.type === "input" || n.type === "select" || n.type === "textarea";
-  if (t.type !== n.type || t.key !== n.key) {
+  const o = Array.isArray(e.children) ? e.children.filter(r) : [], s = Array.isArray(n.children) ? n.children.filter(r) : [], i = n.type === "input" || n.type === "select" || n.type === "textarea";
+  if (e.type !== n.type || e.key !== n.key) {
     const c = g(n);
-    if (c instanceof Node && t.dom instanceof Node && e.contains(t.dom)) {
-      if (N(e, c, t.dom), i && n.props && e.firstChild instanceof HTMLInputElement) {
-        const l = e.firstChild;
+    if (c instanceof Node && e.dom instanceof Node && t.contains(e.dom)) {
+      if (P(t, c, e.dom), i && n.props && t.firstChild instanceof HTMLInputElement) {
+        const l = t.firstChild;
         l.type === "radio" || l.type, l.value = n.props.value, l.setAttribute("value", n.props.value), "checked" in n.props && (l.checked = n.props.checked === !0 || n.props.checked === "true");
       }
     } else if (c instanceof Node)
       if (c) {
-        if (e.appendChild(c), n.dom = c, i && n.props && e.firstChild instanceof HTMLInputElement) {
-          const l = e.firstChild;
+        if (t.appendChild(c), n.dom = c, i && n.props && t.firstChild instanceof HTMLInputElement) {
+          const l = t.firstChild;
           l.type === "radio" ? l.setAttribute("value", n.props.value) : (l.type, l.value = n.props.value, l.setAttribute("value", n.props.value)), "checked" in n.props && (l.checked = n.props.checked === !0 || n.props.checked === "true");
         }
       } else
@@ -741,41 +741,41 @@ function R(e, t, n) {
       n.dom = void 0;
     return;
   }
-  if (i && t.dom instanceof HTMLElement && n.props) {
+  if (i && e.dom instanceof HTMLElement && n.props) {
     for (const [c, l] of Object.entries(n.props))
-      if (c === "value" && e.firstChild instanceof HTMLInputElement)
-        e.firstChild.value = l;
-      else if (c === "checked" && e.firstChild instanceof HTMLInputElement)
-        e.firstChild.checked = l === !0 || l === "true";
-      else if (c in t.dom)
+      if (c === "value" && t.firstChild instanceof HTMLInputElement)
+        t.firstChild.value = l;
+      else if (c === "checked" && t.firstChild instanceof HTMLInputElement)
+        t.firstChild.checked = l === !0 || l === "true";
+      else if (c in e.dom)
         try {
-          t.dom[c] = l;
+          e.dom[c] = l;
         } catch {
         }
       else
-        t.dom.setAttribute(c, l);
+        e.dom.setAttribute(c, l);
     for (let c = n.children.length; c < o.length; c++)
-      o[c] && o[c].dom && t.dom && t.dom.contains(o[c].dom) && t.dom.removeChild(o[c].dom);
+      o[c] && o[c].dom && e.dom && e.dom.contains(o[c].dom) && e.dom.removeChild(o[c].dom);
     return;
   }
-  const a = t.dom;
+  const a = e.dom;
   if (a && a instanceof Element && n.props) {
     const c = a.tagName.toLowerCase() === "input" ? a.getAttribute("type") : void 0, l = a.tagName.includes("-");
-    for (const [u, d] of Object.entries(n.props))
-      if (!(c === "radio" && u === "value")) {
-        if (c === "checkbox" && u === "value") {
-          a.setAttribute("value", d);
+    for (const [d, u] of Object.entries(n.props))
+      if (!(c === "radio" && d === "value")) {
+        if (c === "checkbox" && d === "value") {
+          a.setAttribute("value", u);
           continue;
         }
-        a.setAttribute(u, d);
+        a.setAttribute(d, u);
       }
     if (l)
-      for (const [u, d] of Object.entries(n.props))
-        a.setAttribute(u, d);
-    for (const u of Array.from(a.attributes).map((d) => d.name))
-      if (!(u in n.props)) {
-        if (c === "radio" && u === "value" || c === "checkbox" && u === "value") continue;
-        a.removeAttribute(u);
+      for (const [d, u] of Object.entries(n.props))
+        a.setAttribute(d, u);
+    for (const d of Array.from(a.attributes).map((u) => u.name))
+      if (!(d in n.props)) {
+        if (c === "radio" && d === "value" || c === "checkbox" && d === "value") continue;
+        a.removeAttribute(d);
       }
   }
   if (n.type === "#text") {
@@ -783,7 +783,7 @@ function R(e, t, n) {
       a.nodeValue !== n.props.nodeValue && (a.nodeValue = n.props.nodeValue), n.dom = a;
     else {
       const c = document.createTextNode(n.props.nodeValue ?? "");
-      a && e.contains(a) && a.parentNode === e ? N(e, c, a) : e.appendChild(c), n.dom = c;
+      a && t.contains(a) && a.parentNode === t ? P(t, c, a) : t.appendChild(c), n.dom = c;
     }
     return;
   }
@@ -791,13 +791,13 @@ function R(e, t, n) {
     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 = [];
+    let d = [];
     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))
-        R(a, m, h), p = m.dom;
+        M(a, m, h), p = m.dom;
       else {
         const E = g(h);
         if (p = E instanceof Node ? E : void 0, p) {
@@ -813,29 +813,29 @@ function R(e, t, n) {
           a.insertBefore(p, a.childNodes[f] || null);
         }
       }
-      h.dom = p, p && u.push(p);
+      h.dom = p, p && d.push(p);
     }
     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))
+    for (let f = 0; f < d.length; f++)
+      if (a.childNodes[f] !== d[f]) {
+        if ((d[f] instanceof Element || d[f] instanceof Node) && d[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);
+        a.insertBefore(d[f], a.childNodes[f] || null);
       }
     n.dom = a;
-    const d = new Set(s.map((f) => f.key));
+    const u = 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);
+      (m && !u.has(m) || h >= s.length) && a.removeChild(f);
     });
   }
 }
-const et = (e) => e ? typeof URLSearchParams > "u" ? {} : Object.fromEntries(new URLSearchParams(e)) : {}, b = (e, t) => {
-  for (const n of e) {
-    const r = [], o = n.path.replace(/:[^/]+/g, (a) => (r.push(a.slice(1)), "([^/]+)")), s = new RegExp(`^${o}$`), i = t.match(s);
+const nt = (t) => t ? typeof URLSearchParams > "u" ? {} : Object.fromEntries(new URLSearchParams(t)) : {}, b = (t, e) => {
+  for (const n of t) {
+    const r = [], o = n.path.replace(/:[^/]+/g, (a) => (r.push(a.slice(1)), "([^/]+)")), s = new RegExp(`^${o}$`), i = e.match(s);
     if (i) {
       const a = {};
       return r.forEach((c, l) => {
@@ -844,34 +844,47 @@ const et = (e) => e ? typeof URLSearchParams > "u" ? {} : Object.fromEntries(new
     }
   }
   return { route: null, params: {} };
-};
-function nt(e) {
-  const { routes: t, base: n = "" } = e;
+}, S = {};
+async function rt(t) {
+  if (t.component) return t.component;
+  if (t.load) {
+    if (S[t.path]) return S[t.path];
+    try {
+      const e = await t.load();
+      return S[t.path] = e.default, e.default;
+    } catch {
+      throw new Error(`Failed to load component for route: ${t.path}`);
+    }
+  }
+  throw new Error(`No component or loader defined for route: ${t.path}`);
+}
+function st(t) {
+  const { routes: e, base: n = "" } = t;
   let r, o, s, i, a, c, l;
   if (typeof window < "u" && typeof document < "u") {
     r = () => {
-      const d = new URL(window.location.href), f = d.pathname.replace(n, "") || "/", h = et(d.search);
+      const u = new URL(window.location.href), f = u.pathname.replace(n, "") || "/", h = nt(u.search);
       return { path: f, query: h };
     }, o = r();
-    const u = b(t, o.path);
-    s = $({
+    const d = b(e, o.path);
+    s = j({
       path: o.path,
-      params: u.params,
+      params: d.params,
       query: o.query
     }), i = () => {
-      const d = r(), 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({}, "", n + d), i();
-    }, c = (d) => {
-      window.history.replaceState({}, "", n + d), i();
+      const u = r(), f = b(e, u.path), h = s.getState();
+      h.path = u.path, h.params = f.params, h.query = u.query;
+    }, window.addEventListener("popstate", i), a = (u) => {
+      window.history.pushState({}, "", n + u), i();
+    }, c = (u) => {
+      window.history.replaceState({}, "", n + u), i();
     }, l = () => window.history.back();
   } else {
     r = () => ({ path: "/", query: {} }), o = r();
-    const u = b(t, o.path);
-    s = $({
+    const d = b(e, o.path);
+    s = j({
       path: o.path,
-      params: u.params,
+      params: d.params,
       query: o.query
     }), i = () => {
     }, a = () => {
@@ -885,99 +898,100 @@ function nt(e) {
     replace: c,
     back: l,
     subscribe: s.subscribe,
-    matchRoute: (u) => b(t, u),
-    getCurrent: () => s.getState()
+    matchRoute: (d) => b(e, d),
+    getCurrent: () => s.getState(),
+    resolveRouteComponent: rt
   };
 }
-function ft(e) {
-  const t = nt(e);
-  return typeof window < "u" && (window.__routerInstance = t), t;
+function pt(t) {
+  const e = st(t);
+  return typeof window < "u" && (window.__routerInstance = e), e;
 }
-function ht(e, t) {
-  return b(e, t);
+function mt(t, e) {
+  return b(t, e);
 }
-function M(e, t) {
-  const n = [], r = t ? Object.keys(t) : [], o = { ...e };
+function $(t, e) {
+  const n = [], r = e ? Object.keys(e) : [], o = { ...t };
   let s = null;
-  function i(u) {
-    return n.push(u), () => {
-      const d = n.indexOf(u);
-      d !== -1 && n.splice(d, 1);
+  function i(d) {
+    return n.push(d), () => {
+      const u = n.indexOf(d);
+      u !== -1 && n.splice(u, 1);
     };
   }
-  function a(u) {
-    Object.assign(s, u), n.forEach((d) => d(s));
+  function a(d) {
+    Object.assign(s, d), n.forEach((u) => u(s));
   }
   const c = /* @__PURE__ */ new WeakMap();
-  function l(u) {
-    if (c.has(u)) return c.get(u);
-    const d = new Proxy(u, {
+  function l(d) {
+    if (c.has(d)) return c.get(d);
+    const u = new Proxy(d, {
       get(f, h, m) {
         if (h === "subscribe") return i;
         if (h === "set") return a;
-        if (t && r.includes(h))
-          return t[h](s);
+        if (e && r.includes(h))
+          return e[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 && r.includes(h))
+        if (e && r.includes(h))
           return !1;
         const C = f[h], E = Reflect.set(f, h, m, p);
-        return C !== m && n.forEach((W) => W(s)), E;
+        return C !== m && n.forEach((F) => F(s)), E;
       },
       deleteProperty(f, h) {
-        if (t && r.includes(h))
+        if (e && r.includes(h))
           return !1;
         const m = Reflect.deleteProperty(f, h);
         return n.forEach((p) => p(s)), m;
       }
     });
-    return c.set(u, d), d;
+    return c.set(d, u), u;
   }
   return s = l(o), s;
 }
 const _ = [];
-function pt(e) {
-  _.push(e);
+function yt(t) {
+  _.push(t);
 }
-function A(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) => A(o, t));
-  Object.getPrototypeOf(e) !== Object.prototype && Object.getPrototypeOf(e) !== null && Object.setPrototypeOf(e, null);
+function A(t, e = /* @__PURE__ */ new WeakSet()) {
+  if (t === null || typeof t != "object" || e.has(t)) return t;
+  if (e.add(t), Array.isArray(t)) return t.map((o) => A(o, e));
+  Object.getPrototypeOf(t) !== Object.prototype && Object.getPrototypeOf(t) !== null && Object.setPrototypeOf(t, null);
   const n = ["__proto__", "constructor", "prototype"], r = /* @__PURE__ */ Object.create(null);
-  for (const o of Object.keys(e))
-    n.includes(o) || (r[o] = A(e[o], t));
+  for (const o of Object.keys(t))
+    n.includes(o) || (r[o] = A(t[o], e));
   return r;
 }
-function S(e) {
-  return !!e && typeof e.then == "function";
+function O(t) {
+  return !!t && typeof t.then == "function";
 }
-let z;
-typeof HTMLElement < "u" && (z = class extends HTMLElement {
+let W;
+typeof HTMLElement < "u" && (W = 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);
+    const t = ["__proto__", "constructor", "prototype"];
+    this.config.reflect.forEach((e) => {
+      if (t.includes(e)) {
+        this.removeAttribute(e);
         return;
       }
-      const n = this.stateObj[t];
-      ["string", "number", "boolean"].includes(typeof n) ? n == null ? this.removeAttribute(t) : this.setAttribute(t, String(n)) : this.removeAttribute(t);
+      const n = this.stateObj[e];
+      ["string", "number", "boolean"].includes(typeof n) ? n == null ? this.removeAttribute(e) : this.setAttribute(e, String(n)) : this.removeAttribute(e);
     });
   }
   /**
    * 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();
+  setTemplate(t) {
+    const e = this.config;
+    typeof t == "function" ? e.template = t : e.template = () => t, this.render();
   }
   _hasError = !1;
   _mountedCalled = !1;
@@ -989,47 +1003,47 @@ typeof HTMLElement < "u" && (z = class extends HTMLElement {
   /**
    * Override removeEventListener to support auto-wired config handler removal
    */
-  removeEventListener(e, t, n) {
-    super.removeEventListener(e, t, n), this._autoWiredHandlers[e] && (this._autoWiredHandlers[e] = this._autoWiredHandlers[e].filter((r) => r === t ? (super.removeEventListener(e, r, n), !1) : !0), this._autoWiredHandlers[e].length === 0 && delete this._autoWiredHandlers[e]);
+  removeEventListener(t, e, n) {
+    super.removeEventListener(t, e, n), this._autoWiredHandlers[t] && (this._autoWiredHandlers[t] = this._autoWiredHandlers[t].filter((r) => r === e ? (super.removeEventListener(t, r, n), !1) : !0), this._autoWiredHandlers[t].length === 0 && delete this._autoWiredHandlers[t]);
   }
   /**
    * 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])
+    const t = this.stateObj || {};
+    return Object.keys(t).filter(
+      (e) => ["string", "number", "boolean"].includes(typeof t[e])
     );
   }
   /**
    * Called when an observed attribute changes. Syncs attribute to state and triggers render.
    */
-  attributeChangedCallback(e, t, n) {
-    if (!(e === "__proto__" || e === "constructor" || e === "prototype") && this.stateObj && e in this.stateObj) {
-      const r = typeof this.config?.state?.[e];
+  attributeChangedCallback(t, e, n) {
+    if (!(t === "__proto__" || t === "constructor" || t === "prototype") && this.stateObj && t in this.stateObj) {
+      const r = typeof this.config?.state?.[t];
       let o = n;
       if (n === null)
         o = void 0;
       else if (r === "number")
         if (o === void 0 || o === "")
-          o = this.config?.state?.[e];
+          o = this.config?.state?.[t];
         else {
           const s = Number(o);
-          o = isNaN(s) ? this.config?.state?.[e] : s;
+          o = isNaN(s) ? this.config?.state?.[t] : s;
         }
       else r === "boolean" && (o = o === "true");
-      o = A(o), this.stateObj[e] !== o && (this.config?.debug && console.log("[runtime] state update:", { name: e, value: o }), this.stateObj[e] = o, this.render());
+      o = A(o), this.stateObj[t] !== o && (this.config?.debug && console.log("[runtime] state update:", { name: t, value: o }), this.stateObj[t] = o, this.render());
     }
   }
   /**
    * 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 n = e, r = String(this.stateObj[t]), o = document.activeElement === n;
+    this.shadowRoot && (this.shadowRoot.querySelectorAll("input[data-model]").forEach((t) => {
+      const e = t.getAttribute("data-model");
+      if (!e || !this.stateObj || typeof this.stateObj[e] > "u") return;
+      const n = t, r = String(this.stateObj[e]), o = document.activeElement === n;
       n._hasDirtyListener || (n.addEventListener("input", () => {
         n._isDirty = !0;
       }), n.addEventListener("blur", () => {
@@ -1043,18 +1057,18 @@ typeof HTMLElement < "u" && (z = class extends HTMLElement {
    * 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")
+    this.shadowRoot && (this.shadowRoot.querySelectorAll('input[type="radio"][data-model]').forEach((t) => {
+      const e = t.getAttribute("data-model");
+      if (!e || !this.stateObj || typeof this.stateObj[e] > "u")
         return;
-      const n = e, r = String(this.stateObj[t]);
+      const n = t, r = String(this.stateObj[e]);
       n.checked = n.value === r;
-    }), this.shadowRoot.querySelectorAll("input[data-model]").forEach((e) => {
-      const t = e.getAttribute("data-model");
-      if (!t || !this.stateObj || typeof this.stateObj[t] > "u") return;
-      const n = e, r = String(this.stateObj[t]);
+    }), this.shadowRoot.querySelectorAll("input[data-model]").forEach((t) => {
+      const e = t.getAttribute("data-model");
+      if (!e || !this.stateObj || typeof this.stateObj[e] > "u") return;
+      const n = t, r = String(this.stateObj[e]);
       if (n.type === "checkbox") {
-        const o = this.stateObj[t];
+        const o = this.stateObj[e];
         if (Array.isArray(o))
           n.checked = o.includes(n.value);
         else {
@@ -1062,42 +1076,42 @@ typeof HTMLElement < "u" && (z = class extends HTMLElement {
           s !== null || i !== null ? String(o) === s ? n.checked = !0 : String(o) === i ? n.checked = !1 : o === !0 ? n.checked = !0 : n.checked = !1 : n.checked = o === !0 || o === "true" || o === 1;
         }
       } else n.type === "radio" || (n.value = r);
-    }), this.shadowRoot.querySelectorAll("textarea[data-model]").forEach((e) => {
-      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]));
+    }), this.shadowRoot.querySelectorAll("textarea[data-model]").forEach((t) => {
+      const e = t.getAttribute("data-model");
+      !e || !this.stateObj || typeof this.stateObj[e] > "u" || (t.value = String(this.stateObj[e]));
+    }), this.shadowRoot.querySelectorAll("select[data-model]").forEach((t) => {
+      const e = t.getAttribute("data-model");
+      !e || !this.stateObj || typeof this.stateObj[e] > "u" || (t.value = String(this.stateObj[e]));
     }));
   }
   /**
    * 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 n = t.match(/^([a-zA-Z0-9_]+)\[(\d+)\]\.([a-zA-Z0-9_]+)$/);
+    this.shadowRoot && this.shadowRoot.querySelectorAll("input[data-bind]").forEach((t) => {
+      const e = t.getAttribute("data-bind");
+      if (!e) return;
+      t._listItemModelListener && (t.removeEventListener("input", t._listItemModelListener), t.removeEventListener("change", t._listItemModelListener), delete t._listItemModelListener);
+      const n = e.match(/^([a-zA-Z0-9_]+)\[(\d+)\]\.([a-zA-Z0-9_]+)$/);
       if (n) {
         const [, o, s, i] = n, a = parseInt(s, 10), c = this.stateObj[o];
-        e instanceof HTMLInputElement && e.type === "checkbox" && (e.checked = !!(Array.isArray(c) && c[a] && c[a][i]));
-        const l = (u) => {
-          !Array.isArray(c) || !c[a] || (e instanceof HTMLInputElement && e.type === "checkbox" ? c[a][i] = e.checked : c[a][i] = e.value);
+        t instanceof HTMLInputElement && t.type === "checkbox" && (t.checked = !!(Array.isArray(c) && c[a] && c[a][i]));
+        const l = (d) => {
+          !Array.isArray(c) || !c[a] || (t instanceof HTMLInputElement && t.type === "checkbox" ? c[a][i] = t.checked : c[a][i] = t.value);
         };
-        e.addEventListener("input", l), e.addEventListener("change", l), e._listItemModelListener = l;
+        t.addEventListener("input", l), t.addEventListener("change", l), t._listItemModelListener = l;
         return;
       }
-      const r = t.match(/^([a-zA-Z0-9_]+)\.([a-zA-Z0-9_]+)((?:\|[a-zA-Z0-9_]+)*)$/);
+      const r = e.match(/^([a-zA-Z0-9_]+)\.([a-zA-Z0-9_]+)((?:\|[a-zA-Z0-9_]+)*)$/);
       if (r) {
-        const [, o, s, i] = r, 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) => {
+        const [, o, s, i] = r, a = this.stateObj[o], c = i ? i.split("|").map((d) => d.trim()).filter(Boolean) : [];
+        t instanceof HTMLInputElement && t.type === "checkbox" ? t.checked = !!(a && a[s]) : t instanceof HTMLInputElement && (t.value = a ? String(a[s] ?? "") : "");
+        const l = (d) => {
           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;
+          let u;
+          t instanceof HTMLInputElement && t.type === "checkbox" ? u = t.checked : (u = t.value, c.includes("number") && (u = Number(u)), c.includes("trim") && typeof u == "string" && (u = u.trim())), a[s] = u;
         };
-        e.addEventListener("input", l), e.addEventListener("change", l), e._listItemModelListener = l;
+        t.addEventListener("input", l), t.addEventListener("change", l), t._listItemModelListener = l;
       }
     });
   }
@@ -1105,19 +1119,19 @@ typeof HTMLElement < "u" && (z = class extends HTMLElement {
    * Attach controlled input listeners to sync DOM value to state
    */
   attachControlledInputListeners() {
-    const e = this.shadowRoot;
-    e && (e.querySelectorAll("[data-model]").forEach((t) => {
-      const n = t.getAttribute("data-model");
-      n && (t._dataModelBound || (B(t, this.stateObj, n), t._dataModelBound = !0));
-    }), e.querySelectorAll("[data-model]").forEach((t) => {
-      const [n] = t.getAttribute("data-model")?.split("|").map((r) => r.trim()) ?? [];
+    const t = this.shadowRoot;
+    t && (t.querySelectorAll("[data-model]").forEach((e) => {
+      const n = e.getAttribute("data-model");
+      n && (e._dataModelBound || (X(e, this.stateObj, n), e._dataModelBound = !0));
+    }), t.querySelectorAll("[data-model]").forEach((e) => {
+      const [n] = e.getAttribute("data-model")?.split("|").map((r) => r.trim()) ?? [];
       if (!(!n || !(n in this.stateObj)))
-        if (t instanceof HTMLInputElement)
-          if (t.type === "checkbox") {
-            const r = this.stateObj[n], o = t.getAttribute("data-true-value"), s = t.getAttribute("data-false-value");
-            Array.isArray(r) ? t.checked = r.includes(t.value) : o !== null || s !== null ? String(r) === o ? t.checked = !0 : String(r) === s ? t.checked = !1 : r === !0 ? t.checked = !0 : t.checked = !1 : t.checked = r === !0 || r === "true" || r === 1;
-          } else t.type === "radio" ? t.checked = t.value === String(this.stateObj[n]) : t.value = String(this.stateObj[n] ?? "");
-        else (t instanceof HTMLTextAreaElement || t instanceof HTMLSelectElement) && (t.value = String(this.stateObj[n] ?? ""));
+        if (e instanceof HTMLInputElement)
+          if (e.type === "checkbox") {
+            const r = this.stateObj[n], o = e.getAttribute("data-true-value"), s = e.getAttribute("data-false-value");
+            Array.isArray(r) ? e.checked = r.includes(e.value) : o !== null || s !== null ? String(r) === o ? e.checked = !0 : String(r) === s ? e.checked = !1 : r === !0 ? e.checked = !0 : e.checked = !1 : e.checked = r === !0 || r === "true" || r === 1;
+          } else e.type === "radio" ? e.checked = e.value === String(this.stateObj[n]) : e.value = String(this.stateObj[n] ?? "");
+        else (e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement) && (e.value = String(this.stateObj[n] ?? ""));
     }));
   }
   config;
@@ -1137,13 +1151,13 @@ typeof HTMLElement < "u" && (z = class extends HTMLElement {
   }
   initializeConfig() {
     if (this.config) return;
-    const e = this.tagName.toLowerCase(), n = (window.__componentRegistry || {})[e];
+    const t = this.tagName.toLowerCase(), n = (window.__componentRegistry || {})[t];
     if (!n || typeof n != "object")
       throw new Error("Invalid component config: must be an object");
     if (!n.state || typeof n.state != "object")
       throw new Error("Invalid component config: state must be an object");
     this.config = n;
-    const r = n.computed ? M(n.state, n.computed) : M(n.state);
+    const r = n.computed ? $(n.state, n.computed) : $(n.state);
     if (this.stateObj = r, typeof this.stateObj.subscribe == "function" && this.unsubscribes.push(this.stateObj.subscribe(() => {
       this.scheduleRender();
     })), this.api = {
@@ -1184,7 +1198,7 @@ typeof HTMLElement < "u" && (z = class extends HTMLElement {
     if (this.hasAttribute("data-hydrated") ? this.processRefs() : this.render(), !this._mountedCalled && typeof this.config.onMounted == "function")
       try {
         const s = this.config.onMounted(this.api.state, this.api);
-        S(s) ? s.catch((i) => {
+        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;
@@ -1195,23 +1209,23 @@ typeof HTMLElement < "u" && (z = class extends HTMLElement {
   }
   connectedCallback() {
     if (this.initializeConfig(), this.stateObj) {
-      for (const e of this.getAttributeNames())
-        if (e in this.stateObj) {
-          const t = typeof this.config?.state?.[e];
-          let n = this.getAttribute(e);
-          t === "number" ? n = Number(n) : t === "boolean" && (n = n === "true"), this.stateObj[e] = n === null ? void 0 : n;
+      for (const t of this.getAttributeNames())
+        if (t in this.stateObj) {
+          const e = typeof this.config?.state?.[t];
+          let n = this.getAttribute(t);
+          e === "number" ? n = Number(n) : e === "boolean" && (n = n === "true"), this.stateObj[t] = n === null ? void 0 : n;
         }
     }
     if (!this._mountedCalled && typeof this.config.onMounted == "function")
       try {
-        const e = this.config.onMounted(this.api.state, this.api);
-        S(e) ? e.catch((t) => {
-          typeof this.config.onError == "function" && this.config.onError(t, this.api.state, this.api), this._handleRenderError(t);
+        const t = this.config.onMounted(this.api.state, this.api);
+        O(t) ? t.catch((e) => {
+          typeof this.config.onError == "function" && this.config.onError(e, this.api.state, this.api), this._handleRenderError(e);
         }).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;
+      } catch (t) {
+        typeof this.config.onError == "function" && this.config.onError(t, this.api.state, this.api), this._handleRenderError(t), this._mountedCalled = !0;
       }
     typeof this.render == "function" && this.render();
   }
@@ -1219,20 +1233,20 @@ typeof HTMLElement < "u" && (z = class extends HTMLElement {
    * Lifecycle: called when element is removed from DOM.
    */
   disconnectedCallback() {
-    if (Object.entries(this._autoWiredHandlers).forEach(([e, t]) => {
-      t.forEach((n) => {
-        super.removeEventListener(e, n);
+    if (Object.entries(this._autoWiredHandlers).forEach(([t, e]) => {
+      e.forEach((n) => {
+        super.removeEventListener(t, n);
       });
-    }), this._autoWiredHandlers = {}, this.unsubscribes.forEach((e) => e()), this.unsubscribes = [], this._globalUnsubscribes.forEach((e) => e()), this._globalUnsubscribes = [], !this._unmountedCalled && typeof this.config.onUnmounted == "function")
+    }), this._autoWiredHandlers = {}, this.unsubscribes.forEach((t) => t()), this.unsubscribes = [], this._globalUnsubscribes.forEach((t) => t()), this._globalUnsubscribes = [], !this._unmountedCalled && typeof this.config.onUnmounted == "function")
       try {
-        const e = this.config.onUnmounted(this.api.state, this.api);
-        S(e) ? e.catch((t) => {
-          typeof this.config.onError == "function" && this.config.onError(t, this.api.state, this.api), this._handleRenderError(t);
+        const t = this.config.onUnmounted(this.api.state, this.api);
+        O(t) ? t.catch((e) => {
+          typeof this.config.onError == "function" && this.config.onError(e, this.api.state, this.api), this._handleRenderError(e);
         }).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;
+      } catch (t) {
+        typeof this.config.onError == "function" && this.config.onError(t, this.api.state, this.api), this._handleRenderError(t), this._unmountedCalled = !0;
       }
     this._mountedCalled = !1, this._unmountedCalled = !1;
   }
@@ -1242,27 +1256,27 @@ typeof HTMLElement < "u" && (z = class extends HTMLElement {
   render() {
     this._hasError = !1, this.syncControlledInputsAndEvents(), setTimeout(() => this.attachControlledInputListeners(), 0);
     try {
-      _.forEach((t) => {
+      _.forEach((e) => {
         try {
-          t.onRender?.(this.stateObj, this.api);
+          e.onRender?.(this.stateObj, this.api);
         } catch (n) {
           this._handleRenderError(n);
         }
-      }), this.config.computed && Object.values(this.config.computed).forEach((t) => {
+      }), this.config.computed && Object.values(this.config.computed).forEach((e) => {
         try {
-          t(this.stateObj);
+          e(this.stateObj);
         } catch (n) {
           this._handleRenderError(n);
         }
       });
-      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)));
+      const t = this.config.template(this.stateObj, this.api);
+      t instanceof Promise ? t.then((e) => {
+        this._hasError || (this._renderTemplateResult(e), this.syncStateToAttributes(), setTimeout(() => this.attachListItemModelListeners(), 0));
+      }).catch((e) => {
+        this._handleRenderError(e);
+      }) : this._hasError || (this._renderTemplateResult(t), this.syncStateToAttributes(), setTimeout(() => this.attachListItemModelListeners(), 0));
+    } catch (t) {
+      this._handleRenderError(t), this.renderError(t instanceof Error ? t : new Error(String(t)));
     }
   }
   /**
@@ -1274,16 +1288,16 @@ typeof HTMLElement < "u" && (z = class extends HTMLElement {
    */
   rebindEventListeners() {
     if (!this.shadowRoot) return;
-    ["data-on-input", "data-on-change", "data-on-blur", "data-on-click"].forEach((t) => {
-      this.shadowRoot.querySelectorAll(`[${t}]`).forEach((n) => {
-        const r = t.replace("data-on-", ""), o = n.getAttribute(t);
+    ["data-on-input", "data-on-change", "data-on-blur", "data-on-click"].forEach((e) => {
+      this.shadowRoot.querySelectorAll(`[${e}]`).forEach((n) => {
+        const r = e.replace("data-on-", ""), o = n.getAttribute(e);
         if (!o || typeof this.config[o] != "function") return;
         n._boundHandlers && n._boundHandlers[r] && n.removeEventListener(r, n._boundHandlers[r]);
         const s = this.config[o], i = (a) => s.call(this, a);
         n.addEventListener(r, i), n._boundHandlers || (n._boundHandlers = {}), n._boundHandlers[r] = i;
       });
-    }), Array.from(this.shadowRoot.children).forEach((t) => {
-      t instanceof HTMLElement && typeof t.rebindEventListeners == "function" && t.rebindEventListeners();
+    }), Array.from(this.shadowRoot.children).forEach((e) => {
+      e instanceof HTMLElement && typeof e.rebindEventListeners == "function" && e.rebindEventListeners();
     });
   }
   /**
@@ -1291,10 +1305,10 @@ typeof HTMLElement < "u" && (z = class extends HTMLElement {
    * Handles VDOM patching, style updates, refs, and event binding.
    * @param templateResult - HTML string or compiled template
    */
-  _renderTemplateResult(e) {
+  _renderTemplateResult(t) {
     if (!this._hasError)
       try {
-        let t = function(n) {
+        let e = function(n) {
           const r = /* @__PURE__ */ new WeakSet();
           function o(s) {
             if (s === null || typeof s != "object" || r.has(s)) return s;
@@ -1306,16 +1320,16 @@ typeof HTMLElement < "u" && (z = class extends HTMLElement {
           }
           return o(n);
         };
-        if (typeof e == "string") {
+        if (typeof t == "string") {
           let n = 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}>`;
+            return c.replace(/<([a-zA-Z0-9]+)([^>]*)>/g, (l, d, u) => {
+              const f = u.replace(/\s+on[a-zA-Z]+\s*=\s*(['"][^'"]*['"]|[^\s>]*)/gi, "");
+              return `<${d}${f}>`;
             });
           }, r = function(c) {
             c.children.forEach(r);
           };
-          const o = n(e), s = tt(o);
+          const o = n(t), s = et(o);
           r(s);
           const i = this.shadowRoot;
           if (!i)
@@ -1326,8 +1340,8 @@ typeof HTMLElement < "u" && (z = class extends HTMLElement {
               (l) => l.nodeType === 1 && l !== a
             );
             if (c) {
-              Array.from(c.childNodes).forEach((d) => {
-                d.nodeType === 1 && d.nodeName === "STYLE" || c.removeChild(d);
+              Array.from(c.childNodes).forEach((u) => {
+                u.nodeType === 1 && u.nodeName === "STYLE" || c.removeChild(u);
               });
               const l = {
                 type: "#fragment",
@@ -1335,12 +1349,12 @@ typeof HTMLElement < "u" && (z = class extends HTMLElement {
                 children: s.children,
                 props: {},
                 key: void 0
-              }, u = this._prevVNode && this._prevVNode.type === "#fragment" ? { ...this._prevVNode, dom: c } : l;
-              R(c, u, l);
+              }, d = this._prevVNode && this._prevVNode.type === "#fragment" ? { ...this._prevVNode, dom: c } : l;
+              M(c, d, l);
             } else
               s.children.forEach((l) => {
-                const u = g(l);
-                u && i.appendChild(u), l.dom = u ?? void 0;
+                const d = g(l);
+                d && i.appendChild(d), l.dom = d ?? void 0;
               });
           } else {
             let c = Array.from(this.shadowRoot.childNodes).find(
@@ -1351,22 +1365,22 @@ typeof HTMLElement < "u" && (z = class extends HTMLElement {
                 const l = g(s);
                 l && (this.shadowRoot.contains(c) && this.shadowRoot.replaceChild(l, c), c = l);
               } else
-                R(c, this._prevVNode, s);
+                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 n = !this.shadowRoot.firstElementChild, r = this.lastCompiledTemplate?.id === e.id;
+          const n = !this.shadowRoot.firstElementChild, r = this.lastCompiledTemplate?.id === t.id;
           if (n) {
-            const o = D(e, this.stateObj, this.api);
+            const o = I(t, this.stateObj, this.api);
             this.shadowRoot.appendChild(o);
           } else if (r && this.shadowRoot.firstElementChild) {
             const o = this.lastState;
-            J(e, this.shadowRoot.firstElementChild, this.stateObj, this.api, o || void 0);
+            Q(t, this.shadowRoot.firstElementChild, this.stateObj, this.api, o || void 0);
           } else {
-            const o = D(e, this.stateObj, this.api);
+            const o = I(t, 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]");
@@ -1374,11 +1388,11 @@ typeof HTMLElement < "u" && (z = class extends HTMLElement {
               i.removeChild(i.firstChild);
             i.appendChild(o);
           }
-          this.lastCompiledTemplate = e;
+          this.lastCompiledTemplate = t;
         }
-        this.lastState = t(this.stateObj), this.updateStyle(), this.processRefs(), this.bindEvents(), this.syncControlledInputsAndEvents();
-      } catch (t) {
-        this._handleRenderError(t);
+        this.lastState = e(this.stateObj), this.updateStyle(), this.processRefs(), this.bindEvents(), this.syncControlledInputsAndEvents();
+      } catch (e) {
+        this._handleRenderError(e);
       }
   }
   /**
@@ -1386,14 +1400,14 @@ typeof HTMLElement < "u" && (z = class extends HTMLElement {
    * 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), _.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")
+  _handleRenderError(t) {
+    if (this._hasError = !0, this.config.debug && console.error(`[runtime] Render error in <${this.tagName.toLowerCase()}>:`, t), _.forEach((e) => e.onError?.(t instanceof Error ? t : new Error(String(t)), this.stateObj, this.api)), "onError" in this.config && typeof this.config.onError == "function")
       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.config.onError(t instanceof Error ? t : new Error(String(t)), this.api.state, this.api);
+      } catch (e) {
+        this.config.debug && console.error("[runtime] Error in onError handler:", e);
       }
-    this.renderError(e instanceof Error ? e : new Error(String(e)));
+    this.renderError(t instanceof Error ? t : new Error(String(t)));
   }
   /**
    * Schedule a render using requestAnimationFrame, batching multiple state changes.
@@ -1407,22 +1421,22 @@ typeof HTMLElement < "u" && (z = class extends HTMLElement {
    * 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;
+    const t = this.shadowRoot.querySelector("style");
+    if (!t || !this.config.style) return;
+    const e = typeof this.config.style == "function" ? this.config.style(this.api.state) : this.config.style;
+    t.textContent = e;
   }
   /**
    * 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, n]) => {
-      const r = this.shadowRoot.querySelector(`[data-ref="${t}"]`);
+    const t = /* @__PURE__ */ new WeakMap();
+    Object.entries(this.config.refs).forEach(([e, n]) => {
+      const r = this.shadowRoot.querySelector(`[data-ref="${e}"]`);
       if (r) {
-        e.has(r) || e.set(r, /* @__PURE__ */ new Set());
-        const o = e.get(r), s = r.addEventListener;
+        t.has(r) || t.set(r, /* @__PURE__ */ new Set());
+        const o = t.get(r), s = r.addEventListener;
         r.addEventListener = function(i, a, c) {
           const l = `${i}`;
           o.has(l) || (o.add(l), s.call(r, i, a, c));
@@ -1441,10 +1455,10 @@ typeof HTMLElement < "u" && (z = class extends HTMLElement {
    */
   bindEvents() {
     if (!this.shadowRoot) return;
-    const e = document.createTreeWalker(this.shadowRoot, NodeFilter.SHOW_ELEMENT);
-    let t = e.nextNode();
-    for (; t; ) {
-      const n = t;
+    const t = document.createTreeWalker(this.shadowRoot, NodeFilter.SHOW_ELEMENT);
+    let e = t.nextNode();
+    for (; e; ) {
+      const n = e;
       Array.from(n.attributes).forEach((r) => {
         if (r.name.startsWith("data-on-")) {
           const o = r.name.slice(8), s = r.value, i = this.config[s];
@@ -1457,28 +1471,28 @@ typeof HTMLElement < "u" && (z = class extends HTMLElement {
           } else
             this.config.debug && console.warn(`[runtime] Handler '${s}' not found on config for event '${o}'`, n);
         }
-      }), t = e.nextNode();
+      }), e = t.nextNode();
     }
   }
   /**
    * 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 : "";
+  renderError(t) {
+    const e = this.config.style ? typeof this.config.style == "function" ? this.config.style(this.api.state) : this.config.style : "";
     this.shadowRoot.innerHTML = `
-        <style>${t}</style>
+        <style>${e}</style>
         <div style="color: red; border: 1px solid red; padding: 1rem; border-radius: 4px;">
           <h3>Error Boundary</h3>
-          <div>Error: ${e.message}</div>
+          <div>Error: ${t.message}</div>
         </div>
       `;
   }
 });
-function rt(e, t) {
-  if (t = A(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 ?? {},
+function it(t, e) {
+  if (e = A(e), e.debug && console.log(`[runtime] Debugging component: ${t}`, e), !t || !e.template) {
+    e && typeof e.onError == "function" && e.onError(new Error("Component requires tag and template"), e.state ?? {}, {
+      state: e.state ?? {},
       emit: () => {
       },
       onGlobal: () => () => {
@@ -1487,15 +1501,15 @@ function rt(e, t) {
       },
       emitGlobal: () => {
       }
-    }), t && t.debug && console.error("[runtime] Malformed config:", { tag: e, config: t });
+    }), e && e.debug && console.error("[runtime] Malformed config:", { tag: t, config: e });
     return;
   }
-  if (_.forEach((u) => {
+  if (_.forEach((d) => {
     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,
+      d.onInit?.(e);
+    } catch (u) {
+      e && typeof e.onError == "function" && e.onError(u instanceof Error ? u : new Error(String(u)), e.state, {
+        state: e.state,
         emit: () => {
         },
         onGlobal: () => () => {
@@ -1504,23 +1518,23 @@ function rt(e, t) {
         },
         emitGlobal: () => {
         }
-      }), t && t.debug && console.error("[runtime] Plugin onInit error:", d);
+      }), e && e.debug && console.error("[runtime] Plugin onInit error:", u);
     }
-  }), (typeof window < "u" && window.VITE_DEV_HMR || typeof import.meta < "u" && void 0) && customElements.get(e))
+  }), (typeof window < "u" && window.VITE_DEV_HMR || typeof import.meta < "u" && void 0) && customElements.get(t))
     try {
-      document.querySelectorAll(e).forEach((u) => u.remove()), window.customElements._definitions && delete window.customElements._definitions[e];
+      document.querySelectorAll(t).forEach((d) => d.remove()), window.customElements._definitions && delete window.customElements._definitions[t];
     } catch {
     }
-  if (customElements.get(e)) {
-    t.debug && console.warn(`[runtime] Component "${e}" already registered`);
+  if (customElements.get(t)) {
+    e.debug && console.warn(`[runtime] Component "${t}" already registered`);
     return;
   }
-  const s = M(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])
+  const s = $(e.state ?? {}, e.computed);
+  e.state = s, e._subscribe = s.subscribe;
+  const i = e.state ?? {}, a = Object.keys(i).filter(
+    (d) => ["string", "number", "boolean"].includes(typeof i[d])
   );
-  class c extends z {
+  class c extends W {
     static get observedAttributes() {
       return a;
     }
@@ -1529,10 +1543,10 @@ function rt(e, t) {
     }
   }
   const l = c;
-  typeof customElements < "u" && !customElements.get(e) && (window.__componentRegistry = window.__componentRegistry || {}, window.__componentRegistry[e] = t, customElements.define(e, l));
+  typeof customElements < "u" && !customElements.get(t) && (window.__componentRegistry = window.__componentRegistry || {}, window.__componentRegistry[t] = e, customElements.define(t, l));
 }
-rt("router-view", {
-  template: (e, t) => {
+it("router-view", {
+  template: (t, e) => {
     const n = window.__routerInstance;
     if (!n) return "<div>Router not initialized.</div>";
     const { path: r } = n.getCurrent(), o = n.matchRoute(r);
@@ -1540,33 +1554,33 @@ rt("router-view", {
   }
 });
 export {
-  $ as Store,
-  lt as classes,
-  at as compile,
-  dt as compileTemplate,
-  rt as component,
-  L as createVNodeFromElement,
-  ct as css,
+  j as Store,
+  ut as classes,
+  lt as compile,
+  ht as compileTemplate,
+  it as component,
+  R as createVNodeFromElement,
+  dt as css,
   A as deepSanitizeObject,
   w as eventBus,
-  it as generateHydrationScript,
-  I as getVNodeKey,
-  ot as html,
-  ft as initRouter,
-  S as isPromise,
-  ht as matchRouteSSR,
+  at as generateHydrationScript,
+  N as getVNodeKey,
+  ct as html,
+  pt as initRouter,
+  O as isPromise,
+  mt as matchRouteSSR,
   g as mountVNode,
-  tt as parseVNodeFromHTML,
-  R as patchVNode,
-  D as renderCompiledTemplate,
-  st as renderComponentsToString,
-  U as renderToString,
+  et as parseVNodeFromHTML,
+  M as patchVNode,
+  I as renderCompiledTemplate,
+  ot as renderComponentsToString,
+  G as renderToString,
   _ as runtimePlugins,
-  N as safeReplaceChild,
-  ut as styles,
-  J as updateCompiledTemplate,
-  B as useDataModel,
-  nt as useRouter,
-  pt as useRuntimePlugin
+  P as safeReplaceChild,
+  ft as styles,
+  Q as updateCompiledTemplate,
+  X as useDataModel,
+  st as useRouter,
+  yt as useRuntimePlugin
 };
 //# sourceMappingURL=custom-elements-runtime.es.js.map