@jasonshimmy/custom-elements-runtime 0.0.1-beta.0

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

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