@jasonshimmy/custom-elements-runtime 0.3.1 → 1.0.0

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

@@ -1,510 +1,956 @@
-function we(e, t) {
-  return O(e ? t : [], "when-block");
+class ut {
+  pendingUpdates = /* @__PURE__ */ new Map();
+  isFlushScheduled = !1;
+  /**
+   * Schedule an update to be executed in the next microtask
+   * Uses component identity to deduplicate multiple render requests for the same component
+   */
+  schedule(t, r) {
+    const n = r || t.toString();
+    this.pendingUpdates.set(n, t), this.isFlushScheduled || (this.isFlushScheduled = !0, typeof globalThis.process < "u" && globalThis.process.env?.NODE_ENV === "test" || typeof window < "u" && (window.__vitest__ || window.Cypress) ? this.flush() : queueMicrotask(() => this.flush()));
+  }
+  /**
+   * Execute all pending updates
+   */
+  flush() {
+    const t = Array.from(this.pendingUpdates.values());
+    this.pendingUpdates.clear(), this.isFlushScheduled = !1;
+    for (const r of t)
+      try {
+        r();
+      } catch (n) {
+        typeof console < "u" && console.error && console.error("Error in batched update:", n);
+      }
+  }
+  /**
+   * Get the number of pending updates
+   */
+  get pendingCount() {
+    return this.pendingUpdates.size;
+  }
 }
-function Ot(e, t) {
-  return e.map((r, i) => {
-    const n = typeof r == "object" ? r?.key ?? r?.id ?? `idx-${i}` : String(r);
-    return O(t(r, i), `each-${n}`);
-  });
+const ft = new ut();
+function le(e, t) {
+  ft.schedule(e, t);
 }
-function Ke() {
-  const e = [];
-  return {
-    when(t, r) {
-      return e.push([t, r]), this;
-    },
-    otherwise(t) {
-      return e.push([!0, t]), this;
-    },
-    done() {
-      return Je(...e);
+const Ue = /* @__PURE__ */ new WeakSet();
+class dt {
+  static cache = /* @__PURE__ */ new WeakMap();
+  static arrayHandlerCache = /* @__PURE__ */ new WeakMap();
+  static objectHandlerCache = /* @__PURE__ */ new WeakMap();
+  /**
+   * Get or create a reactive proxy for an object
+   */
+  static getOrCreateProxy(t, r, n = !1) {
+    const i = this.cache.get(t);
+    if (i)
+      return i;
+    const s = n ? this.getOrCreateArrayHandler(r) : this.getOrCreateObjectHandler(r), o = new Proxy(t, s);
+    try {
+      tt.markAsProxy(o);
+    } catch {
     }
-  };
-}
-function Je(...e) {
-  for (let t = 0; t < e.length; t++) {
-    const [r, i] = e[t];
-    if (r) return [O(i, `whenChain-branch-${t}`)];
+    return this.cache.set(t, o), o;
   }
-  return [O([], "whenChain-empty")];
-}
-function O(e, t) {
-  const r = e ? Array.isArray(e) ? e.filter(Boolean) : [e].filter(Boolean) : [];
-  return {
-    tag: "#anchor",
-    key: t,
-    children: r
-  };
-}
-function Pt(e, t) {
-  return we(!e, t);
-}
-function Mt(e, t) {
-  const r = !e || e.length === 0;
-  return we(r, t);
-}
-function Bt(e, t) {
-  const r = !!(e && e.length > 0);
-  return we(r, t);
-}
-function Wt(e, t, r) {
-  const i = [];
-  return e.forEach((n, s) => {
-    t(n, s) && i.push({ item: n, originalIndex: s });
-  }), i.map(({ item: n, originalIndex: s }, o) => {
-    const a = typeof n == "object" && n != null ? n?.key ?? n?.id ?? `filtered-${s}` : `filtered-${s}`;
-    return O(r(n, s, o), `each-where-${a}`);
-  });
-}
-function It(e, t) {
-  const r = e?.length ?? 0;
-  return r === 0 && t.empty ? O(t.empty, "switch-length-empty") : r === 1 && t.one ? O(t.one(e[0]), "switch-length-one") : t.exactly?.[r] ? O(t.exactly[r](e), `switch-length-${r}`) : r > 1 && t.many ? O(t.many(e), "switch-length-many") : O([], "switch-length-fallback");
-}
-function qt(e, t, r) {
-  const i = /* @__PURE__ */ new Map();
-  return e.forEach((n) => {
-    const s = t(n);
-    i.has(s) || i.set(s, []), i.get(s).push(n);
-  }), Array.from(i.entries()).map(([n, s], o) => O(
-    r(n, s, o),
-    `each-group-${n}`
-  ));
-}
-function zt(e, t, r, i) {
-  const n = r * t, s = Math.min(n + t, e.length);
-  return e.slice(n, s).map((a, c) => {
-    const u = n + c, m = typeof a == "object" && a != null ? a?.key ?? a?.id ?? `page-${u}` : `page-${u}`;
-    return O(i(a, u, c), `each-page-${m}`);
-  });
-}
-function Ht(e, t) {
-  return e.loading && t.loading ? O(t.loading, "promise-loading") : e.error && t.error ? O(t.error(e.error), "promise-error") : e.data !== void 0 && t.success ? O(t.success(e.data), "promise-success") : t.idle ? O(t.idle, "promise-idle") : O([], "promise-fallback");
-}
-function q(e, t) {
-  const r = typeof window < "u" && window.matchMedia?.(e)?.matches;
-  return we(!!r, t);
-}
-const G = {
-  // Responsive breakpoints (matching style.ts)
-  sm: "(min-width:640px)",
-  md: "(min-width:768px)",
-  lg: "(min-width:1024px)",
-  xl: "(min-width:1280px)",
-  "2xl": "(min-width:1536px)",
-  // Dark mode (matching style.ts)
-  dark: "(prefers-color-scheme: dark)"
-}, ze = ["sm", "md", "lg", "xl", "2xl"], Ve = {
-  // Breakpoint-based rendering (matching style.ts exactly)
-  sm: (e) => q(G.sm, e),
-  md: (e) => q(G.md, e),
-  lg: (e) => q(G.lg, e),
-  xl: (e) => q(G.xl, e),
-  "2xl": (e) => q(G["2xl"], e),
-  // Dark mode (matching style.ts)
-  dark: (e) => q(G.dark, e),
-  light: (e) => q("(prefers-color-scheme: light)", e),
-  // Accessibility and interaction preferences
-  touch: (e) => q("(hover: none) and (pointer: coarse)", e),
-  mouse: (e) => q("(hover: hover) and (pointer: fine)", e),
-  reducedMotion: (e) => q("(prefers-reduced-motion: reduce)", e),
-  highContrast: (e) => q("(prefers-contrast: high)", e),
-  // Orientation
-  portrait: (e) => q("(orientation: portrait)", e),
-  landscape: (e) => q("(orientation: landscape)", e)
-};
-function Nt(e, t) {
-  const r = [];
-  e.includes("dark") ? r.push(G.dark) : e.includes("light") && r.push("(prefers-color-scheme: light)");
-  const i = e.filter(
-    (o) => ze.includes(o)
-  ), n = i[i.length - 1];
-  n && n in G && r.push(G[n]);
-  const s = r.length > 0 ? r.join(" and ") : "all";
-  return q(s, t);
-}
-function Dt(e) {
-  const t = [];
-  return e.base && t.push(O(e.base, "responsive-base")), ze.forEach((r) => {
-    const i = e[r];
-    i && t.push(Ve[r](i));
-  }), t;
-}
-function Ut(e) {
-  const t = [];
-  let r = null;
-  return {
-    case(i, n) {
-      const s = typeof i == "function" ? i : (o) => o === i;
-      return t.push({ condition: s, content: n }), this;
-    },
-    when(i, n) {
-      return t.push({ condition: i, content: n }), this;
-    },
-    otherwise(i) {
-      return r = i, this;
-    },
-    done() {
-      for (let i = 0; i < t.length; i++) {
-        const { condition: n, content: s } = t[i];
-        if (n(e))
-          return O(s, `switch-case-${i}`);
-      }
-      return O(r || [], "switch-otherwise");
+  /**
+   * Get or create a cached array handler
+   */
+  static getOrCreateArrayHandler(t) {
+    if (!this.arrayHandlerCache.has(t)) {
+      const r = {
+        get: (n, i, s) => {
+          const o = Reflect.get(n, i, s);
+          return typeof o == "function" && typeof i == "string" && [
+            "push",
+            "pop",
+            "shift",
+            "unshift",
+            "splice",
+            "sort",
+            "reverse",
+            "fill",
+            "copyWithin"
+          ].includes(i) ? function(...u) {
+            const m = o.apply(n, u);
+            return t.triggerUpdate(), m;
+          } : o;
+        },
+        set: (n, i, s) => (n[i] = t.makeReactiveValue(s), t.triggerUpdate(), !0),
+        deleteProperty: (n, i) => (delete n[i], t.triggerUpdate(), !0)
+      };
+      this.arrayHandlerCache.set(t, r);
     }
-  };
-}
-const He = typeof process < "u" && process.env?.NODE_ENV !== "production";
-function Y(e, ...t) {
-  He && console.error(e, ...t);
-}
-function pe(e, ...t) {
-  He && console.warn(e, ...t);
+    return this.arrayHandlerCache.get(t);
+  }
+  /**
+   * Get or create a cached object handler
+   */
+  static getOrCreateObjectHandler(t) {
+    if (!this.objectHandlerCache.has(t)) {
+      const r = {
+        get: (n, i, s) => Reflect.get(n, i, s),
+        set: (n, i, s) => (n[i] = t.makeReactiveValue(s), t.triggerUpdate(), !0),
+        deleteProperty: (n, i) => (delete n[i], t.triggerUpdate(), !0)
+      };
+      this.objectHandlerCache.set(t, r);
+    }
+    return this.objectHandlerCache.get(t);
+  }
+  /**
+   * Check if an object already has a cached proxy
+   */
+  static hasProxy(t) {
+    return this.cache.has(t);
+  }
+  /**
+   * Clear all cached proxies (useful for testing)
+   */
+  static clear() {
+    this.cache = /* @__PURE__ */ new WeakMap(), this.arrayHandlerCache = /* @__PURE__ */ new WeakMap(), this.objectHandlerCache = /* @__PURE__ */ new WeakMap();
+  }
+  /**
+   * Get cache statistics (for debugging)
+   * Note: WeakMap doesn't provide size, so this is limited
+   */
+  static getStats() {
+    return {
+      hasCachedProxies: this.cache instanceof WeakMap
+    };
+  }
 }
-class ne extends EventTarget {
-  handlers = {};
-  static instance;
-  eventCounters = /* @__PURE__ */ new Map();
+class tt {
+  // Cache a stable reactiveContext object keyed by onUpdate -> makeReactive
+  // This allows handler caches in ReactiveProxyCache to reuse handlers
+  // for identical reactive contexts instead of creating a new context object
+  // on each createReactiveProxy call.
+  static contextCache = /* @__PURE__ */ new WeakMap();
   /**
-   * Returns the singleton instance of GlobalEventBus
+   * Create an optimized reactive proxy with minimal overhead
    */
-  static getInstance() {
-    return ne.instance || (ne.instance = new ne()), ne.instance;
+  static createReactiveProxy(t, r, n) {
+    try {
+      if (Ue.has(t)) return t;
+    } catch {
+    }
+    const i = Array.isArray(t);
+    let s = this.contextCache.get(r);
+    s || (s = /* @__PURE__ */ new WeakMap(), this.contextCache.set(r, s));
+    let o = s.get(n);
+    return o || (o = {
+      triggerUpdate: r,
+      makeReactiveValue: n
+    }, s.set(n, o)), dt.getOrCreateProxy(t, o, i);
   }
   /**
-   * Emit a global event with optional data. Includes event storm protection.
-   * @param eventName - Name of the event
-   * @param data - Optional event payload
+   * Mark an object as a proxy (for optimization)
    */
-  emit(t, r) {
-    const i = Date.now(), n = this.eventCounters.get(t);
-    if (!n || i - n.window > 1e3)
-      this.eventCounters.set(t, { count: 1, window: i });
-    else if (n.count++, n.count > 50 && n.count > 100)
-      return;
-    this.dispatchEvent(new CustomEvent(t, {
-      detail: r,
-      bubbles: !1,
-      // Global events don't need to bubble
-      cancelable: !0
-    }));
-    const s = this.handlers[t];
-    s && s.forEach((o) => {
+  static markAsProxy(t) {
+    if (t)
       try {
-        o(r);
-      } catch (a) {
-        Y(`Error in global event handler for "${t}":`, a);
+        Ue.add(t);
+      } catch {
       }
-    });
   }
+}
+class pt {
+  currentComponent = null;
+  componentDependencies = /* @__PURE__ */ new Map();
+  componentRenderFunctions = /* @__PURE__ */ new Map();
+  // Flat storage: compound key `${componentId}:${stateIndex}` -> ReactiveState
+  stateStorage = /* @__PURE__ */ new Map();
+  stateIndexCounter = /* @__PURE__ */ new Map();
+  trackingDisabled = !1;
+  // Per-component last warning timestamp to throttle repeated warnings
+  lastWarningTime = /* @__PURE__ */ new Map();
   /**
-   * Register a handler for a global event. Returns an unsubscribe function.
-   * @param eventName - Name of the event
-   * @param handler - Handler function
+   * Set the current component being rendered for dependency tracking
    */
-  on(t, r) {
-    return this.handlers[t] || (this.handlers[t] = /* @__PURE__ */ new Set()), this.handlers[t].add(r), () => this.off(t, r);
+  setCurrentComponent(t, r) {
+    this.currentComponent = t, this.componentRenderFunctions.set(t, r), this.componentDependencies.has(t) || this.componentDependencies.set(t, /* @__PURE__ */ new Set()), this.stateIndexCounter.set(t, 0);
   }
   /**
-   * Remove a specific handler for a global event.
-   * @param eventName - Name of the event
-   * @param handler - Handler function to remove
+   * Clear the current component after rendering
    */
-  off(t, r) {
-    const i = this.handlers[t];
-    i && i.delete(r);
+  clearCurrentComponent() {
+    this.currentComponent = null;
   }
   /**
-   * Remove all handlers for a specific event.
-   * @param eventName - Name of the event
+   * Temporarily disable dependency tracking
    */
-  offAll(t) {
-    delete this.handlers[t];
+  disableTracking() {
+    this.trackingDisabled = !0;
   }
   /**
-   * Listen for a native CustomEvent. Returns an unsubscribe function.
-   * @param eventName - Name of the event
-   * @param handler - CustomEvent handler
-   * @param options - AddEventListener options
+   * Re-enable dependency tracking
    */
-  listen(t, r, i) {
-    return this.addEventListener(t, r, i), () => this.removeEventListener(t, r);
+  enableTracking() {
+    this.trackingDisabled = !1;
   }
   /**
-   * 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
+   * Check if a component is currently rendering
    */
-  once(t, r) {
-    return new Promise((i) => {
-      const n = this.on(t, (s) => {
-        n(), r(s), i(s);
-      });
-    });
+  isRenderingComponent() {
+    return this.currentComponent !== null;
   }
   /**
-   * Get a list of all active event names with registered handlers.
+   * Return whether we should emit a render-time warning for the current component.
+   * This throttles warnings to avoid spamming the console for legitimate rapid updates.
    */
-  getActiveEvents() {
-    return Object.keys(this.handlers).filter(
-      (t) => this.handlers[t] && this.handlers[t].size > 0
-    );
+  shouldEmitRenderWarning() {
+    if (!this.currentComponent) return !0;
+    const t = this.currentComponent, r = this.lastWarningTime.get(t) || 0, n = Date.now();
+    return n - r < 1e3 ? !1 : (this.lastWarningTime.set(t, n), !0);
   }
   /**
-   * Clear all event handlers (useful for testing or cleanup).
+   * Execute a function with tracking disabled
    */
-  clear() {
-    this.handlers = {};
+  withoutTracking(t) {
+    const r = this.trackingDisabled;
+    this.trackingDisabled = !0;
+    try {
+      return t();
+    } finally {
+      this.trackingDisabled = r;
+    }
   }
   /**
-   * Get the number of handlers registered for a specific event.
-   * @param eventName - Name of the event
+   * Get or create a state instance for the current component
    */
-  getHandlerCount(t) {
-    return this.handlers[t]?.size || 0;
+  getOrCreateState(t) {
+    if (!this.currentComponent)
+      return new De(t);
+    const r = this.currentComponent, n = this.stateIndexCounter.get(r) || 0, i = `${r}:${n}`;
+    if (this.stateIndexCounter.set(r, n + 1), this.stateStorage.has(i))
+      return this.stateStorage.get(i);
+    const s = new De(t);
+    return this.stateStorage.set(i, s), s;
   }
   /**
-   * Get event statistics for debugging.
+   * Track a dependency for the current component
    */
-  getEventStats() {
-    const t = {};
-    for (const [r, i] of this.eventCounters.entries())
-      t[r] = {
-        count: i.count,
-        handlersCount: this.getHandlerCount(r)
-      };
-    return t;
+  trackDependency(t) {
+    this.trackingDisabled || this.currentComponent && (this.componentDependencies.get(this.currentComponent)?.add(t), t.addDependent(this.currentComponent));
   }
   /**
-   * Reset event counters (useful for testing or after resolving issues).
+   * Trigger updates for all components that depend on a state
    */
-  resetEventCounters() {
-    this.eventCounters.clear();
-  }
-}
-const le = ne.getInstance(), Ft = (e, t) => le.emit(e, t), Kt = (e, t) => le.on(e, t), Jt = (e, t) => le.off(e, t), Vt = (e, t) => le.once(e, t), Gt = (e, t, r) => le.listen(e, t, r);
-function Le(e) {
-  let t = { ...e };
-  const r = [];
-  function i(a) {
-    r.push(a), a(t);
+  triggerUpdate(t) {
+    t.getDependents().forEach((r) => {
+      const n = this.componentRenderFunctions.get(r);
+      n && le(n, r);
+    });
   }
-  function n() {
-    return t;
+  /**
+   * Clean up component dependencies when component is destroyed
+   */
+  cleanup(t) {
+    const r = this.componentDependencies.get(t);
+    r && (r.forEach((n) => n.removeDependent(t)), this.componentDependencies.delete(t)), this.componentRenderFunctions.delete(t);
+    for (const n of Array.from(this.stateStorage.keys()))
+      n.startsWith(t + ":") && this.stateStorage.delete(n);
+    this.stateIndexCounter.delete(t);
+  }
+}
+const F = new pt();
+class De {
+  _value;
+  dependents = /* @__PURE__ */ new Set();
+  constructor(t) {
+    this._value = this.makeReactive(t);
+  }
+  get value() {
+    return F.trackDependency(this), this._value;
+  }
+  set value(t) {
+    F.isRenderingComponent() && F.shouldEmitRenderWarning() && console.warn(
+      `🚨 State modification detected during render! This can cause infinite loops.
+  • Move state updates to event handlers
+  • Use useEffect/watch for side effects
+  • Ensure computed properties don't modify state`
+    ), this._value = this.makeReactive(t), F.triggerUpdate(this);
+  }
+  addDependent(t) {
+    this.dependents.add(t);
+  }
+  removeDependent(t) {
+    this.dependents.delete(t);
+  }
+  getDependents() {
+    return this.dependents;
+  }
+  makeReactive(t) {
+    return t === null || typeof t != "object" || t instanceof Node || t instanceof Element || t instanceof HTMLElement ? t : tt.createReactiveProxy(
+      t,
+      () => F.triggerUpdate(this),
+      (r) => this.makeReactive(r)
+    );
   }
-  function s(a) {
-    const c = typeof a == "function" ? a(t) : a;
-    t = { ...t, ...c }, o();
+}
+function or(e) {
+  return F.getOrCreateState(e === void 0 ? null : e);
+}
+function ar(e) {
+  const t = new De(e());
+  return {
+    get value() {
+      return F.trackDependency(t), e();
+    }
+  };
+}
+function cr(e, t, r = {}) {
+  let n = e();
+  r.immediate && t(n, n);
+  const i = `watch-${Math.random().toString(36).substr(2, 9)}`, s = () => {
+    F.setCurrentComponent(i, s);
+    const o = e();
+    F.clearCurrentComponent(), o !== n && (t(o, n), n = o);
+  };
+  return F.setCurrentComponent(i, s), e(), F.clearCurrentComponent(), () => {
+    F.cleanup(i);
+  };
+}
+const be = /* @__PURE__ */ new Map(), we = /* @__PURE__ */ new Map(), ve = /* @__PURE__ */ new Map(), He = 500;
+function te(e) {
+  if (be.has(e))
+    return be.get(e);
+  const t = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+  return be.size < He && be.set(e, t), t;
+}
+function rt(e) {
+  if (we.has(e))
+    return we.get(e);
+  const t = e.replace(/-([a-z])/g, (r, n) => n.toUpperCase());
+  return we.size < He && we.set(e, t), t;
+}
+function ne(e) {
+  if (typeof e == "string") {
+    if (ve.has(e))
+      return ve.get(e);
+    const t = e.replace(
+      /[&<>"']/g,
+      (r) => ({
+        "&": "&amp;",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': "&quot;",
+        "'": "&#39;"
+      })[r]
+    );
+    return t !== e && ve.size < He && ve.set(e, t), t;
   }
-  function o() {
-    r.forEach((a) => a(t));
+  return e;
+}
+function H(e, t) {
+  if (typeof t == "string") {
+    const r = t.split(".").reduce((n, i) => n?.[i], e);
+    return r && typeof r == "object" && r.constructor && r.constructor.name === "ReactiveState" ? r.value : r;
   }
-  return { subscribe: i, getState: n, setState: s };
-}
-function Q(e) {
-  return e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-}
-function Z(e) {
-  return typeof e == "string" ? e.replace(
-    /[&<>"']/g,
-    (t) => ({
-      "&": "&amp;",
-      "<": "&lt;",
-      ">": "&gt;",
-      '"': "&quot;",
-      "'": "&#39;"
-    })[t]
-  ) : e;
-}
-function K(e, t) {
-  return typeof t == "string" ? t.split(".").reduce((r, i) => r?.[i], e) : t;
-}
-function he(e, t, r) {
-  const i = String(t).split("."), n = i.pop();
-  if (!n) return;
-  const s = i.reduce((o, a) => (o[a] == null && (o[a] = {}), o[a]), e);
-  s[n] = r;
-}
-function Ge(e, t, r) {
+  return t;
+}
+function Ce(e, t, r) {
+  const n = String(t).split("."), i = n.pop();
+  if (!i) return;
+  const s = n.reduce((o, a) => (o[a] == null && (o[a] = {}), o[a]), e);
+  s[i] && typeof s[i] == "object" && s[i].constructor && s[i].constructor.name === "ReactiveState" ? s[i].value = r : s[i] = r;
+}
+const nt = typeof process < "u" && process.env?.NODE_ENV !== "production";
+function ie(e, ...t) {
+  nt && console.error(e, ...t);
+}
+function Re(e, ...t) {
+  nt && console.warn(e, ...t);
+}
+function ht(e, t, r) {
   if (r)
-    for (const [i, n] of Object.entries(r)) {
+    for (const [n, i] of Object.entries(r)) {
       let s, o = {};
-      if (Array.isArray(n) ? (s = n[0], o = n[1] || {}) : s = n, t.set(i, {
+      if (Array.isArray(i) ? (s = i[0], o = i[1] || {}) : s = i, t.set(n, {
         callback: s,
         options: o,
-        oldValue: K(e, i)
+        oldValue: H(e, n)
       }), o.immediate)
         try {
-          const a = K(e, i);
+          const a = H(e, n);
           s(a, void 0, e);
         } catch (a) {
-          Y(`Error in immediate watcher for "${i}":`, a);
+          ie(`Error in immediate watcher for "${n}":`, a);
         }
     }
 }
-function Ze(e, t, r, i) {
-  const n = (o, a) => {
+function gt(e, t, r, n) {
+  const i = (o, a) => {
     if (o === a) return !0;
     if (typeof o != typeof a || typeof o != "object" || o === null || a === null) return !1;
     if (Array.isArray(o) && Array.isArray(a))
-      return o.length !== a.length ? !1 : o.every((m, T) => n(m, a[T]));
-    const c = Object.keys(o), u = Object.keys(a);
-    return c.length !== u.length ? !1 : c.every((m) => n(o[m], a[m]));
+      return o.length !== a.length ? !1 : o.every((g, w) => i(g, a[w]));
+    const u = Object.keys(o), m = Object.keys(a);
+    return u.length !== m.length ? !1 : u.every((g) => i(o[g], a[g]));
   }, s = t.get(r);
-  if (s && !n(i, s.oldValue))
+  if (s && !i(n, s.oldValue))
     try {
-      s.callback(i, s.oldValue, e), s.oldValue = i;
+      s.callback(n, s.oldValue, e), s.oldValue = n;
     } catch (o) {
-      Y(`Error in watcher for "${r}":`, o);
+      ie(`Error in watcher for "${r}":`, o);
     }
   for (const [o, a] of t.entries())
     if (a.options.deep && r.startsWith(o + "."))
       try {
-        const c = K(e, o);
-        n(c, a.oldValue) || (a.callback(c, a.oldValue, e), a.oldValue = c);
-      } catch (c) {
-        Y(`Error in deep watcher for "${o}":`, c);
+        const u = H(e, o);
+        i(u, a.oldValue) || (a.callback(u, a.oldValue, e), a.oldValue = u);
+      } catch (u) {
+        ie(`Error in deep watcher for "${o}":`, u);
       }
 }
-function Ye(e, t, r) {
-  if (!t.props) return;
-  function i(n, s) {
-    return s === Boolean ? n === "true" : s === Number ? Number(n) : n;
-  }
-  Object.entries(t.props).forEach(([n, s]) => {
-    if (s.type === Function && typeof e[n] == "function")
+function qe(e, t) {
+  return t === Boolean ? e === "true" : t === Number ? Number(e) : e;
+}
+function mt(e, t, r) {
+  t && Object.entries(t).forEach(([n, i]) => {
+    const s = te(n), o = e.getAttribute(s);
+    if (i.type === Function && typeof e[n] == "function")
       r[n] = e[n];
-    else {
-      const o = Q(n), a = e.getAttribute(o);
-      if (typeof e[n] < "u")
+    else if (typeof e[n] < "u")
+      try {
+        const a = e[n];
+        i.type === Boolean && typeof a == "boolean" || i.type === Number && typeof a == "number" || i.type === Function && typeof a == "function" ? r[n] = a : r[n] = ne(qe(String(a), i.type));
+      } catch {
+        r[n] = e[n];
+      }
+    else o !== null ? r[n] = ne(qe(o, i.type)) : "default" in i && i.default !== void 0 && (r[n] = ne(i.default));
+  });
+}
+function yt(e, t, r) {
+  t.props && mt(e, t.props, r);
+}
+function bt(e, t, r, n) {
+  e.onConnected && !r && (e.onConnected(t), n(!0));
+}
+function wt(e, t, r, n, i, s, o, a) {
+  e.onDisconnected && e.onDisconnected(t), r.forEach((u) => u()), n(), i(), s(!1), o(null), a(!1);
+}
+function vt(e, t, r, n, i) {
+  e.onAttributeChanged && e.onAttributeChanged(t, r, n, i);
+}
+class xt {
+  static cache = /* @__PURE__ */ new Map();
+  static maxCacheSize = 1e3;
+  // Dangerous patterns to block
+  static dangerousPatterns = [
+    /constructor/i,
+    /prototype/i,
+    /__proto__/i,
+    /function/i,
+    /eval/i,
+    /import/i,
+    /require/i,
+    /window/i,
+    /document/i,
+    /global/i,
+    /process/i,
+    /setTimeout/i,
+    /setInterval/i,
+    /fetch/i,
+    /XMLHttpRequest/i
+  ];
+  static evaluate(t, r) {
+    const n = this.cache.get(t);
+    if (n) {
+      if (!n.isSecure) {
+        Re("Blocked cached dangerous expression:", t);
+        return;
+      }
+      return n.evaluator(r);
+    }
+    const i = this.createEvaluator(t);
+    if (this.cache.size >= this.maxCacheSize) {
+      const s = this.cache.keys().next().value;
+      s && this.cache.delete(s);
+    }
+    if (this.cache.set(t, i), !i.isSecure) {
+      Re("Blocked dangerous expression:", t);
+      return;
+    }
+    return i.evaluator(r);
+  }
+  static createEvaluator(t) {
+    if (this.hasDangerousPatterns(t))
+      return { evaluator: () => {
+      }, isSecure: !1 };
+    if (t.length > 1e3)
+      return { evaluator: () => {
+      }, isSecure: !1 };
+    try {
+      return { evaluator: this.createSafeEvaluator(t), isSecure: !0 };
+    } catch (r) {
+      return Re("Failed to create evaluator for expression:", t, r), { evaluator: () => {
+      }, isSecure: !1 };
+    }
+  }
+  static hasDangerousPatterns(t) {
+    return this.dangerousPatterns.some((r) => r.test(t));
+  }
+  static createSafeEvaluator(t) {
+    if (t.trim().startsWith("{") && t.trim().endsWith("}"))
+      return this.createObjectEvaluator(t);
+    if (/^ctx\.[a-zA-Z0-9_\.]+$/.test(t.trim())) {
+      const r = t.trim().slice(4);
+      return (n) => H(n, r);
+    }
+    return t.includes("ctx") || /[+\-*/%<>=&|?:\[\]]/.test(t) ? this.createSimpleEvaluator(t) : (r) => H(r, t);
+  }
+  static createObjectEvaluator(t) {
+    const r = t.trim().slice(1, -1), n = this.parseObjectProperties(r);
+    return (i) => {
+      const s = {};
+      for (const { key: o, value: a } of n)
         try {
-          const c = e[n];
-          s.type === Boolean && typeof c == "boolean" || s.type === Number && typeof c == "number" || s.type === Function && typeof c == "function" ? r[n] = c : r[n] = Z(i(String(c), s.type));
+          if (a.startsWith("ctx.")) {
+            const u = a.slice(4);
+            s[o] = H(i, u);
+          } else
+            s[o] = this.evaluateSimpleValue(a, i);
         } catch {
-          r[n] = e[n];
+          s[o] = void 0;
         }
-      else a !== null ? r[n] = Z(i(a, s.type)) : "default" in s && s.default !== void 0 && (r[n] = Z(s.default));
+      return s;
+    };
+  }
+  static parseObjectProperties(t) {
+    const r = [], n = t.split(",");
+    for (const i of n) {
+      const s = i.indexOf(":");
+      if (s === -1) continue;
+      const o = i.slice(0, s).trim(), a = i.slice(s + 1).trim(), u = o.replace(/^['"]|['"]$/g, "");
+      r.push({ key: u, value: a });
     }
-  });
-}
-function Qe(e, t, r, i) {
-  e.onConnected && !r && (e.onConnected(t), i(!0));
-}
-function Xe(e, t, r, i, n, s, o, a) {
-  e.onDisconnected && e.onDisconnected(t), r.forEach((c) => c()), i(), n(), s(!1), o(null), a(!1);
+    return r;
+  }
+  static createSimpleEvaluator(t) {
+    return (r) => {
+      try {
+        let n = t;
+        const i = [];
+        n = n.replace(/("[^"\\]*(?:\\.[^"\\]*)*"|'[^'\\]*(?:\\.[^'\\]*)*')/g, (w) => `<<#${i.push(w) - 1}#>>`);
+        const s = n.match(/ctx\.[\w.]+/g) || [];
+        for (const w of s) {
+          const h = w.slice(4), l = H(r, h);
+          if (l === void 0) return;
+          const d = i.push(JSON.stringify(l)) - 1;
+          n = n.replace(new RegExp(w.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g"), `<<#${d}#>>`);
+        }
+        const o = /\b[a-zA-Z_][a-zA-Z0-9_]*(?:\.[a-zA-Z_][a-zA-Z0-9_]*)+\b/g, a = n.match(o) || [];
+        for (const w of a) {
+          if (w.startsWith("ctx.")) continue;
+          const h = H(r, w);
+          if (h === void 0) return;
+          const l = i.push(JSON.stringify(h)) - 1;
+          n = n.replace(new RegExp(w.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g"), `<<#${l}#>>`);
+        }
+        const u = /\b([a-zA-Z_][a-zA-Z0-9_]*)\b/g;
+        let m;
+        const g = /* @__PURE__ */ new Set();
+        for (; (m = u.exec(n)) !== null; ) {
+          const w = m[1];
+          if (["true", "false", "null", "undefined"].includes(w) || /^[0-9]+$/.test(w) || w === "ctx" || g.has(w)) continue;
+          g.add(w);
+          const h = H(r, w);
+          if (h === void 0) return;
+          const l = JSON.stringify(h), d = i.push(l) - 1;
+          w.includes(".") ? n = n.replace(new RegExp(w.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g"), `<<#${d}#>>`) : n = n.replace(new RegExp("\\b" + w.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "\\b", "g"), `<<#${d}#>>`);
+        }
+        n = n.replace(/<<#(\d+)#>>/g, (w, h) => i[Number(h)]);
+        try {
+          return this.evaluateBasicExpression(n);
+        } catch {
+          return;
+        }
+      } catch {
+        return;
+      }
+    };
+  }
+  /**
+   * Evaluate a very small, safe expression grammar without using eval/Function.
+   * Supports: numbers, string literals, true/false, null, arrays, unary !,
+   * arithmetic (+ - * / %), comparisons, logical && and ||, parentheses, and ternary `a ? b : c`.
+   */
+  static evaluateBasicExpression(t) {
+    const r = this.tokenize(t);
+    let n = 0;
+    function i() {
+      return r[n];
+    }
+    function s(c) {
+      const p = r[n++];
+      if (c && !p)
+        throw new Error(`Unexpected token EOF, expected ${c}`);
+      if (c && p && p.type !== c && p.value !== c)
+        throw new Error(`Unexpected token ${p.type}/${p.value}, expected ${c}`);
+      return p;
+    }
+    function o() {
+      return a();
+    }
+    function a() {
+      let c = u();
+      if (i() && i().value === "?") {
+        s("?");
+        const p = o();
+        s(":");
+        const y = o();
+        return c ? p : y;
+      }
+      return c;
+    }
+    function u() {
+      let c = m();
+      for (; i() && i().value === "||"; ) {
+        s("OP");
+        const p = m();
+        c = c || p;
+      }
+      return c;
+    }
+    function m() {
+      let c = g();
+      for (; i() && i().value === "&&"; ) {
+        s("OP");
+        const p = g();
+        c = c && p;
+      }
+      return c;
+    }
+    function g() {
+      let c = w();
+      for (; i() && ["==", "!=", "===", "!=="].includes(i().value); ) {
+        const p = s("OP").value, y = w();
+        switch (p) {
+          case "==":
+            c = c == y;
+            break;
+          case "!=":
+            c = c != y;
+            break;
+          case "===":
+            c = c === y;
+            break;
+          case "!==":
+            c = c !== y;
+            break;
+        }
+      }
+      return c;
+    }
+    function w() {
+      let c = h();
+      for (; i() && [">", "<", ">=", "<="].includes(i().value); ) {
+        const p = s("OP").value, y = h();
+        switch (p) {
+          case ">":
+            c = c > y;
+            break;
+          case "<":
+            c = c < y;
+            break;
+          case ">=":
+            c = c >= y;
+            break;
+          case "<=":
+            c = c <= y;
+            break;
+        }
+      }
+      return c;
+    }
+    function h() {
+      let c = l();
+      for (; i() && (i().value === "+" || i().value === "-"); ) {
+        const p = s("OP").value, y = l();
+        c = p === "+" ? c + y : c - y;
+      }
+      return c;
+    }
+    function l() {
+      let c = d();
+      for (; i() && (i().value === "*" || i().value === "/" || i().value === "%"); ) {
+        const p = s("OP").value, y = d();
+        switch (p) {
+          case "*":
+            c = c * y;
+            break;
+          case "/":
+            c = c / y;
+            break;
+          case "%":
+            c = c % y;
+            break;
+        }
+      }
+      return c;
+    }
+    function d() {
+      return i() && i().value === "!" ? (s("OP"), !d()) : i() && i().value === "-" ? (s("OP"), -d()) : v();
+    }
+    function v() {
+      const c = i();
+      if (c) {
+        if (c.type === "NUMBER")
+          return s("NUMBER"), Number(c.value);
+        if (c.type === "STRING")
+          return s("STRING"), c.value.slice(1, -1);
+        if (c.type === "IDENT")
+          return s("IDENT"), c.value === "true" ? !0 : c.value === "false" ? !1 : c.value === "null" ? null : void 0;
+        if (c.value === "[") {
+          s("PUNC");
+          const p = [];
+          for (; i() && i().value !== "]"; )
+            p.push(o()), i() && i().value === "," && s("PUNC");
+          return s("PUNC"), p;
+        }
+        if (c.value === "(") {
+          s("PUNC");
+          const p = o();
+          return s("PUNC"), p;
+        }
+        throw new Error("Unexpected token in expression");
+      }
+    }
+    return o();
+  }
+  static tokenize(t) {
+    const r = [], n = /\s*(=>|===|!==|==|!=|>=|<=|\|\||&&|[()?:,\[\]]|\+|-|\*|\/|%|>|<|!|\d+\.?\d*|"[^"]*"|'[^']*'|[a-zA-Z_][a-zA-Z0-9_]*|\S)\s*/g;
+    let i;
+    for (; (i = n.exec(t)) !== null; ) {
+      const s = i[1];
+      s && (/^\d/.test(s) ? r.push({ type: "NUMBER", value: s }) : /^"/.test(s) || /^'/.test(s) ? r.push({ type: "STRING", value: s }) : /^[a-zA-Z_]/.test(s) ? r.push({ type: "IDENT", value: s }) : /^[()?:,\[\]]$/.test(s) ? r.push({ type: "PUNC", value: s }) : r.push({ type: "OP", value: s }));
+    }
+    return r;
+  }
+  static evaluateSimpleValue(t, r) {
+    if (t === "true") return !0;
+    if (t === "false") return !1;
+    if (!isNaN(Number(t))) return Number(t);
+    if (t.startsWith("ctx.")) {
+      const n = t.slice(4);
+      return H(r, n);
+    }
+    return t.startsWith('"') && t.endsWith('"') || t.startsWith("'") && t.endsWith("'") ? t.slice(1, -1) : t;
+  }
+  static clearCache() {
+    this.cache.clear();
+  }
+  static getCacheSize() {
+    return this.cache.size;
+  }
 }
-function et(e, t, r, i, n) {
-  e.onAttributeChanged && e.onAttributeChanged(t, r, i, n);
+class se {
+  static cleanupFunctions = /* @__PURE__ */ new WeakMap();
+  /**
+   * Add an event listener with automatic cleanup tracking
+   */
+  static addListener(t, r, n, i) {
+    t.addEventListener(r, n, i);
+    const o = { event: r, handler: n, options: i, cleanup: () => t.removeEventListener(r, n, i), addedAt: Date.now() };
+    this.cleanupFunctions.has(t) || this.cleanupFunctions.set(t, []);
+    const a = this.cleanupFunctions.get(t);
+    a.push(o), this.cleanupFunctions.get(t).__metaList = a;
+  }
+  /**
+   * Remove a specific event listener
+   */
+  static removeListener(t, r, n, i) {
+    t.removeEventListener(r, n, i);
+    const s = this.cleanupFunctions.get(t);
+    if (s) {
+      const o = s.__metaList || null;
+      if (o) {
+        const a = o.findIndex((u) => u.event === r && u.handler === n && JSON.stringify(u.options) === JSON.stringify(i));
+        if (a >= 0) {
+          try {
+            o[a].cleanup();
+          } catch {
+          }
+          o.splice(a, 1);
+        }
+        o.length === 0 && this.cleanupFunctions.delete(t);
+      } else {
+        const a = s.findIndex(() => !0);
+        a >= 0 && (s.splice(a, 1), s.length === 0 && this.cleanupFunctions.delete(t));
+      }
+    }
+  }
+  /**
+   * Clean up all event listeners for an element
+   */
+  static cleanup(t) {
+    const r = this.cleanupFunctions.get(t);
+    r && ((r.__metaList || r).forEach((i) => {
+      try {
+        typeof i == "function" ? i() : i && typeof i.cleanup == "function" && i.cleanup();
+      } catch (s) {
+        console.error("Error during event cleanup:", s);
+      }
+    }), this.cleanupFunctions.delete(t));
+  }
+  /**
+   * Clean up all tracked event listeners (useful for testing)
+   */
+  static cleanupAll() {
+    try {
+      this.cleanupFunctions = /* @__PURE__ */ new WeakMap();
+    } catch (t) {
+      console.error("Error during global cleanup:", t);
+    }
+  }
+  /**
+   * Check if an element has any tracked event listeners
+   */
+  static hasListeners(t) {
+    const r = this.cleanupFunctions.get(t), n = r ? r.__metaList || r : void 0;
+    return !!(n && n.length > 0);
+  }
+  /**
+   * Get the number of tracked event listeners for an element
+   */
+  static getListenerCount(t) {
+    const r = this.cleanupFunctions.get(t), n = r ? r.__metaList || r : void 0;
+    return n ? n.length : 0;
+  }
 }
-function te(e, t) {
+function ce(e, t) {
   if (t && e instanceof HTMLElement) {
+    se.cleanup(e);
     for (const r in t)
       t[r] === e && delete t[r];
     for (const r of Array.from(e.childNodes))
-      te(r, t);
+      ce(r, t);
   }
 }
-function tt(e, t, r, i, n, s, o, a) {
+function de(e, t, r) {
+  if (typeof e == "string") return;
+  const n = e.props?.reactiveRef ?? (e.props?.props && e.props.props.reactiveRef), i = e.props?.ref ?? (e.props?.props && e.props.props.ref);
+  n ? n.value = t : i && r && (r[i] = t);
+}
+function kt(e, t, r, n, i, s, o, a) {
   if (!s) return;
-  const c = t.includes("lazy"), u = t.includes("trim"), m = t.includes("number"), T = () => K(s._state || s, e), p = T();
-  let l = "text";
-  o instanceof HTMLInputElement ? l = i?.type || o.type || "text" : o instanceof HTMLSelectElement ? l = "select" : o instanceof HTMLTextAreaElement && (l = "textarea");
-  const w = o instanceof HTMLInputElement || o instanceof HTMLTextAreaElement || o instanceof HTMLSelectElement, d = w ? l === "checkbox" || l === "radio" ? "checked" : "value" : a ?? "modelValue";
-  if (l === "checkbox")
-    if (Array.isArray(p))
-      r[d] = p.includes(String(o?.getAttribute("value") ?? i?.value ?? ""));
+  const u = t.includes("lazy"), m = t.includes("trim"), g = t.includes("number"), w = e && typeof e == "object" && "value" in e && typeof e.value < "u", h = () => {
+    if (w) {
+      const C = e.value;
+      return a && typeof C == "object" && C !== null ? C[a] : C;
+    }
+    return H(s._state || s, e);
+  }, l = h();
+  let d = "text";
+  o instanceof HTMLInputElement ? d = n?.type || o.type || "text" : o instanceof HTMLSelectElement ? d = "select" : o instanceof HTMLTextAreaElement && (d = "textarea");
+  const v = o instanceof HTMLInputElement || o instanceof HTMLTextAreaElement || o instanceof HTMLSelectElement, c = v ? d === "checkbox" || d === "radio" ? "checked" : "value" : a ?? "modelValue";
+  if (d === "checkbox")
+    if (Array.isArray(l))
+      r[c] = l.includes(String(o?.getAttribute("value") ?? n?.value ?? ""));
     else {
-      const x = o?.getAttribute("true-value") ?? !0;
-      r[d] = p === x;
+      const C = o?.getAttribute("true-value") ?? !0;
+      r[c] = l === C;
     }
-  else if (l === "radio")
-    r[d] = p === (i?.value ?? "");
-  else if (l === "select")
+  else if (d === "radio")
+    r[c] = l === (n?.value ?? "");
+  else if (d === "select")
     if (o && o.hasAttribute("multiple") && o instanceof HTMLSelectElement) {
-      const x = Array.isArray(p) ? p.map(String) : [];
+      const C = Array.isArray(l) ? l.map(String) : [];
       setTimeout(() => {
-        Array.from(o.options).forEach((f) => {
-          f.selected = x.includes(f.value);
+        Array.from(o.options).forEach((k) => {
+          k.selected = C.includes(k.value);
         });
-      }, 0), r[d] = Array.isArray(p) ? p : [];
+      }, 0), r[c] = Array.isArray(l) ? l : [];
     } else
-      r[d] = p;
+      r[c] = l;
   else {
-    r[d] = p;
+    r[c] = l;
     try {
-      const x = Q(d);
-      i && (i[x] = p);
+      const C = te(c);
+      n && (n[C] = l);
     } catch {
     }
   }
-  const g = c || l === "checkbox" || l === "radio" || l === "select" ? "change" : "input", y = (x) => {
-    if (x.isComposing || n._isComposing) return;
-    const f = typeof globalThis.process < "u" && globalThis.process.env?.NODE_ENV === "test" || typeof window < "u" && window.__vitest__;
-    if (x.isTrusted === !1 && !f) return;
-    const b = x.target;
-    if (!b || b._modelUpdating) return;
-    let h = b.value;
-    if (l === "checkbox") {
-      const E = T();
-      if (Array.isArray(E)) {
-        const C = b.getAttribute("value") ?? "", A = Array.from(E);
-        if (b.checked)
-          A.includes(C) || A.push(C);
+  const p = u || d === "checkbox" || d === "radio" || d === "select" ? "change" : "input", y = (C) => {
+    if (C.isComposing || i._isComposing) return;
+    const k = typeof globalThis.process < "u" && globalThis.process.env?.NODE_ENV === "test" || typeof window < "u" && window.__vitest__;
+    if (C.isTrusted === !1 && !k) return;
+    const f = C.target;
+    if (!f || f._modelUpdating) return;
+    let x = f.value;
+    if (d === "checkbox") {
+      const R = h();
+      if (Array.isArray(R)) {
+        const T = f.getAttribute("value") ?? "", $ = Array.from(R);
+        if (f.checked)
+          $.includes(T) || $.push(T);
         else {
-          const P = A.indexOf(C);
-          P > -1 && A.splice(P, 1);
+          const P = $.indexOf(T);
+          P > -1 && $.splice(P, 1);
         }
-        h = A;
+        x = $;
       } else {
-        const C = b.getAttribute("true-value") ?? !0, A = b.getAttribute("false-value") ?? !1;
-        h = b.checked ? C : A;
+        const T = f.getAttribute("true-value") ?? !0, $ = f.getAttribute("false-value") ?? !1;
+        x = f.checked ? T : $;
       }
-    } else if (l === "radio")
-      h = b.getAttribute("value") ?? b.value;
-    else if (l === "select" && b.multiple)
-      h = Array.from(b.selectedOptions).map((E) => E.value);
-    else if (u && typeof h == "string" && (h = h.trim()), m) {
-      const E = Number(h);
-      isNaN(E) || (h = E);
-    }
-    const _ = s._state || s, $ = K(_, e);
-    if (Array.isArray(h) && Array.isArray($) ? JSON.stringify([...h].sort()) !== JSON.stringify([...$].sort()) : h !== $) {
-      b._modelUpdating = !0;
+    } else if (d === "radio")
+      x = f.getAttribute("value") ?? f.value;
+    else if (d === "select" && f.multiple)
+      x = Array.from(f.selectedOptions).map((R) => R.value);
+    else if (m && typeof x == "string" && (x = x.trim()), g) {
+      const R = Number(x);
+      isNaN(R) || (x = R);
+    }
+    const A = s._state || s, _ = h();
+    if (Array.isArray(x) && Array.isArray(_) ? JSON.stringify([...x].sort()) !== JSON.stringify([..._].sort()) : x !== _) {
+      f._modelUpdating = !0;
       try {
-        if (he(_, e, h), s._requestRender && s._requestRender(), s._triggerWatchers && s._triggerWatchers(e, h), b) {
-          const E = `update:${Q(d)}`, C = new CustomEvent(E, {
-            detail: h,
+        if (w)
+          if (a && typeof e.value == "object" && e.value !== null) {
+            const R = { ...e.value };
+            R[a] = x, e.value = R;
+          } else
+            e.value = x;
+        else
+          Ce(A, e, x);
+        if (s._requestRender && s._requestRender(), s._triggerWatchers) {
+          const R = w ? "reactiveState" : e;
+          s._triggerWatchers(R, x);
+        }
+        if (f) {
+          const R = `update:${te(c)}`, T = new CustomEvent(R, {
+            detail: x,
             bubbles: !0,
             composed: !0
           });
-          b.dispatchEvent(C);
+          f.dispatchEvent(T);
         }
       } finally {
-        setTimeout(() => b._modelUpdating = !1, 0);
+        setTimeout(() => f._modelUpdating = !1, 0);
       }
     }
   };
-  if (w) {
-    if (n[g]) {
-      const x = n[g];
-      o && o.removeEventListener(g, x);
+  if (v) {
+    if (i[p]) {
+      const C = i[p];
+      o && se.removeListener(o, p, C);
     }
-    n[g] = y;
+    i[p] = y;
   } else {
-    const x = `update:${Q(d)}`;
-    if (n[x]) {
-      const f = n[x];
-      o && o.removeEventListener(x, f);
-    }
-    n[x] = (f) => {
-      const b = s._state || s, h = f.detail !== void 0 ? f.detail : f.target?.value, _ = K(b, e);
-      if (Array.isArray(h) && Array.isArray(_) ? JSON.stringify([...h].sort()) !== JSON.stringify([..._].sort()) : h !== _) {
-        he(b, e, h), s._requestRender && s._requestRender(), s._triggerWatchers && s._triggerWatchers(e, h);
-        const S = f.target;
+    const C = `update:${te(c)}`;
+    if (i[C]) {
+      const k = i[C];
+      o && se.removeListener(o, C, k);
+    }
+    i[C] = (k) => {
+      const f = s._state || s, x = k.detail !== void 0 ? k.detail : k.target?.value, A = H(f, e);
+      if (Array.isArray(x) && Array.isArray(A) ? JSON.stringify([...x].sort()) !== JSON.stringify([...A].sort()) : x !== A) {
+        Ce(f, e, x), s._requestRender && s._requestRender(), s._triggerWatchers && s._triggerWatchers(e, x);
+        const S = k.target;
         if (S) {
-          S[d] = h;
+          S[c] = x;
           try {
-            const E = Q(d);
-            typeof h == "boolean" ? h ? S.setAttribute(E, "true") : S.setAttribute(E, "false") : S.setAttribute(E, String(h));
+            const R = te(c);
+            typeof x == "boolean" ? x ? S.setAttribute(R, "true") : S.setAttribute(R, "false") : S.setAttribute(R, String(x));
           } catch {
           }
           queueMicrotask(() => {
@@ -514,143 +960,111 @@ function tt(e, t, r, i, n, s, o, a) {
       }
     };
   }
-  (l === "text" || l === "textarea") && (n.compositionstart = (() => n._isComposing = !0), n.compositionend = (x) => {
-    n._isComposing = !1;
-    const f = x.target;
-    f && setTimeout(() => {
-      const b = f.value, h = s._state || s, _ = K(h, e);
-      let $ = b;
-      if (u && ($ = $.trim()), m) {
-        const E = Number($);
-        isNaN(E) || ($ = E);
+  (d === "text" || d === "textarea") && (i.compositionstart = (() => i._isComposing = !0), i.compositionend = (C) => {
+    i._isComposing = !1;
+    const k = C.target;
+    k && setTimeout(() => {
+      const f = k.value, x = s._state || s, A = H(x, e);
+      let _ = f;
+      if (m && (_ = _.trim()), g) {
+        const R = Number(_);
+        isNaN(R) || (_ = R);
       }
-      if (Array.isArray($) && Array.isArray(_) ? JSON.stringify([...$].sort()) !== JSON.stringify([..._].sort()) : $ !== _) {
-        f._modelUpdating = !0;
+      if (Array.isArray(_) && Array.isArray(A) ? JSON.stringify([..._].sort()) !== JSON.stringify([...A].sort()) : _ !== A) {
+        k._modelUpdating = !0;
         try {
-          he(h, e, $), s._requestRender && s._requestRender(), s._triggerWatchers && s._triggerWatchers(e, $);
+          Ce(x, e, _), s._requestRender && s._requestRender(), s._triggerWatchers && s._triggerWatchers(e, _);
         } finally {
-          setTimeout(() => f._modelUpdating = !1, 0);
+          setTimeout(() => k._modelUpdating = !1, 0);
         }
       }
     }, 0);
   });
 }
-function Ne(e) {
+function it(e) {
   const t = e.slice(2);
   return t ? t.charAt(0).toLowerCase() + t.slice(1) : "";
 }
-function rt(e, t, r, i) {
+function Ct(e, t, r, n) {
   if (typeof e == "object" && e !== null)
-    for (const [n, s] of Object.entries(e))
-      n.startsWith("data-") || n.startsWith("aria-") || n === "class" ? r[n] = s : t[n] = s;
+    for (const [i, s] of Object.entries(e))
+      i.startsWith("data-") || i.startsWith("aria-") || i === "class" ? r[i] = s : t[i] = s;
   else if (typeof e == "string") {
-    if (!i) return;
+    if (!n) return;
     try {
-      const n = xe(e, i);
-      if (typeof n == "object" && n !== null) {
-        for (const [s, o] of Object.entries(n))
+      const i = he(e, n);
+      if (typeof i == "object" && i !== null) {
+        for (const [s, o] of Object.entries(i))
           s.startsWith("data-") || s.startsWith("aria-") || s === "class" ? r[s] = o : t[s] = o;
         return;
       } else {
-        r[e] = n;
+        r[e] = i;
         return;
       }
     } catch {
-      const n = K(i, e);
-      r[e] = n;
+      const i = H(n, e);
+      r[e] = i;
     }
   }
 }
-function nt(e, t, r) {
-  let i;
+function _t(e, t, r) {
+  let n;
   if (typeof e == "string") {
     if (!r) return;
-    i = xe(e, r);
+    n = he(e, r);
   } else
-    i = e;
-  const n = t.style || "";
-  let s = n;
-  if (i) {
-    if (n) {
-      const o = n.split(";").map((c) => c.trim()).filter(Boolean), a = o.findIndex(
-        (c) => c.startsWith("display:")
+    n = e;
+  const i = t.style || "";
+  let s = i;
+  if (n) {
+    if (i) {
+      const o = i.split(";").map((u) => u.trim()).filter(Boolean), a = o.findIndex(
+        (u) => u.startsWith("display:")
       );
       a >= 0 && o[a] === "display: none" && (o.splice(a, 1), s = o.length > 0 ? o.join("; ") + ";" : "");
     }
-  } else if (n) {
-    const o = n.split(";").filter(Boolean), a = o.findIndex(
-      (c) => c.trim().startsWith("display:")
+  } else if (i) {
+    const o = i.split(";").filter(Boolean), a = o.findIndex(
+      (u) => u.trim().startsWith("display:")
     );
     a >= 0 ? o[a] = "display: none" : o.push("display: none"), s = o.join("; ");
   } else
     s = "display: none";
-  s !== n && (s ? t.style = s : delete t.style);
+  s !== i && (s ? t.style = s : delete t.style);
 }
-function xe(e, t) {
-  if ([
-    /constructor/i,
-    /prototype/i,
-    /__proto__/i,
-    /function/i,
-    /eval/i,
-    /import/i,
-    /require/i,
-    /window/i,
-    /document/i,
-    /global/i,
-    /process/i
-  ].some((i) => i.test(e))) {
-    pe("Potentially dangerous expression blocked:", e);
-    return;
-  }
-  if (e.trim().startsWith("{") && e.trim().endsWith("}"))
-    try {
-      const i = Object.keys(t), n = i.map((a) => t[a]), s = e.replace(/ctx\./g, "");
-      if (s.length > 1e3) {
-        pe("Expression too long, blocked for security:", e);
-        return;
-      }
-      return new Function(...i, `return ${s}`)(...n);
-    } catch (i) {
-      pe("Failed to evaluate expression:", e, i);
-      return;
-    }
-  if (e.startsWith("ctx.")) {
-    const i = e.slice(4);
-    return K(t, i);
-  }
-  return K(t, e);
+function he(e, t) {
+  return xt.evaluate(e, t);
 }
-function it(e, t, r) {
-  let i;
+function Et(e, t, r) {
+  let n;
   if (typeof e == "string") {
     if (!r) return;
-    i = xe(e, r);
+    n = he(e, r);
   } else
-    i = e;
-  let n = [];
-  typeof i == "string" ? n = [i] : Array.isArray(i) ? n = i.filter(Boolean) : typeof i == "object" && i !== null && (n = Object.entries(i).filter(([, a]) => !!a).flatMap(([a]) => a.split(/\s+/).filter(Boolean)));
-  const s = t.class || "", o = s ? `${s} ${n.join(" ")}`.trim() : n.join(" ");
+    n = e;
+  let i = [];
+  typeof n == "string" ? i = [n] : Array.isArray(n) ? i = n.filter(Boolean) : typeof n == "object" && n !== null && (i = Object.entries(n).filter(([, a]) => !!a).flatMap(([a]) => a.split(/\s+/).filter(Boolean)));
+  const s = t.class || "", o = s ? `${s} ${i.join(" ")}`.trim() : i.join(" ");
   o && (t.class = o);
 }
-function st(e, t, r) {
-  let i;
+function St(e, t, r) {
+  let n;
   if (typeof e == "string") {
     if (!r) return;
-    i = xe(e, r);
+    n = he(e, r);
   } else
-    i = e;
-  let n = "";
-  if (typeof i == "string")
-    n = i;
-  else if (i && typeof i == "object") {
+    n = e;
+  let i = "";
+  if (typeof n == "string")
+    i = n;
+  else if (n && typeof n == "object") {
     const o = [];
-    for (const [a, c] of Object.entries(i))
-      if (c != null && c !== "") {
-        const u = a.replace(
+    for (const [a, u] of Object.entries(n))
+      if (u != null && u !== "") {
+        const m = a.replace(
           /[A-Z]/g,
-          (p) => `-${p.toLowerCase()}`
-        ), m = [
+          (h) => `-${h.toLowerCase()}`
+        ), g = [
           "width",
           "height",
           "top",
@@ -676,24 +1090,29 @@ function st(e, t, r) {
           "min-height",
           "max-height"
         ];
-        let T = String(c);
-        typeof c == "number" && m.includes(u) && (T = `${c}px`), o.push(`${u}: ${T}`);
+        let w = String(u);
+        typeof u == "number" && g.includes(m) && (w = `${u}px`), o.push(`${m}: ${w}`);
       }
-    n = o.join("; ") + (o.length > 0 ? ";" : "");
+    i = o.join("; ") + (o.length > 0 ? ";" : "");
   }
   const s = t.style || "";
-  t.style = s + (s && !s.endsWith(";") ? "; " : "") + n;
+  t.style = s + (s && !s.endsWith(";") ? "; " : "") + i;
 }
-function De(e, t, r, i) {
-  const n = {}, s = { ...i || {} }, o = {};
-  for (const [a, c] of Object.entries(e)) {
-    const { value: u, modifiers: m, arg: T } = c;
+function $t(e, t, r) {
+  let n = e;
+  typeof e == "string" && r && (n = he(e, r)), n && typeof n == "object" && n.constructor?.name === "ReactiveState" ? t.reactiveRef = n : t.ref = n;
+}
+function st(e, t, r, n) {
+  const i = {}, s = { ...n || {} }, o = {};
+  for (const [a, u] of Object.entries(e)) {
+    const { value: m, modifiers: g, arg: w } = u;
     if (a === "model" || a.startsWith("model:")) {
-      const p = a.split(":"), l = p.length > 1 ? p[1] : T;
-      tt(
-        typeof u == "string" ? u : String(u),
+      const h = a.split(":"), l = h.length > 1 ? h[1] : w;
+      kt(
         m,
-        n,
+        // Pass the original value (could be string or reactive state object)
+        g,
+        i,
         s,
         o,
         t,
@@ -704,29 +1123,32 @@ function De(e, t, r, i) {
     }
     switch (a) {
       case "bind":
-        rt(u, n, s, t);
+        Ct(m, i, s, t);
         break;
       case "show":
-        nt(u, s, t);
+        _t(m, s, t);
         break;
       case "class":
-        it(u, s, t);
+        Et(m, s, t);
         break;
       case "style":
-        st(u, s, t);
+        St(m, s, t);
+        break;
+      case "ref":
+        $t(m, i, t);
         break;
     }
   }
-  return { props: n, attrs: s, listeners: o };
+  return { props: i, attrs: s, listeners: o };
 }
-function je(e, t) {
+function Ie(e, t) {
   if (Array.isArray(e)) {
     const s = /* @__PURE__ */ new Set();
     return e.map((o) => {
       if (!o || typeof o != "object") return o;
       let a = o.props?.key ?? o.key;
       if (!a) {
-        const T = o.tag || "node", l = [
+        const w = o.tag || "node", l = [
           // attrs (kebab-case)
           o.props?.attrs?.id,
           o.props?.attrs?.name,
@@ -736,25 +1158,25 @@ function je(e, t) {
           o.props?.props?.name,
           o.props?.props?.dataKey,
           o.props?.props?.["data-key"]
-        ].find((w) => w != null) ?? "";
-        a = l ? `${t}:${T}:${l}` : `${t}:${T}`;
+        ].find((d) => d != null) ?? "";
+        a = l ? `${t}:${w}:${l}` : `${t}:${w}`;
       }
-      let c = a, u = 1;
-      for (; s.has(c); )
-        c = `${a}#${u++}`;
-      s.add(c);
-      let m = o.children;
-      return Array.isArray(m) && (m = je(m, c)), { ...o, key: c, children: m };
+      let u = a, m = 1;
+      for (; s.has(u); )
+        u = `${a}#${m++}`;
+      s.add(u);
+      let g = o.children;
+      return Array.isArray(g) && (g = Ie(g, u)), { ...o, key: u, children: g };
     });
   }
   const r = e;
-  let i = r.props?.key ?? r.key ?? t, n = r.children;
-  return Array.isArray(n) && (n = je(n, i)), { ...r, key: i, children: n };
+  let n = r.props?.key ?? r.key ?? t, i = r.children;
+  return Array.isArray(i) && (i = Ie(i, n)), { ...r, key: n, children: i };
 }
-function Re(e, t, r, i) {
-  const n = r.directives ?? {}, s = De(
-    n,
+function Fe(e, t, r, n) {
+  const i = r.directives ?? {}, s = st(
     i,
+    n,
     e,
     r.attrs
   ), o = {
@@ -765,38 +1187,39 @@ function Re(e, t, r, i) {
     ...t.attrs,
     ...r.attrs,
     ...s.attrs
-  }, c = t.props ?? {}, u = o, m = r?.isCustomElement ?? t?.isCustomElement ?? !1;
-  let T = !1;
-  for (const w in { ...c, ...u }) {
-    const v = c[w], d = u[w];
-    if (v !== d)
-      if (T = !0, w === "value" && (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement))
-        e.value !== d && (e.value = d ?? "");
-      else if (w === "checked" && e instanceof HTMLInputElement)
-        e.checked = !!d;
-      else if (w.startsWith("on") && typeof d == "function") {
-        const g = Ne(w);
-        typeof v == "function" && e.removeEventListener(g, v), e.addEventListener(g, d);
-      } else if (d == null)
-        e.removeAttribute(w);
-      else if ((r?.isCustomElement ?? t?.isCustomElement ?? !1) || w in e)
+  }, u = t.props ?? {}, m = o, g = r?.isCustomElement ?? t?.isCustomElement ?? !1;
+  let w = !1;
+  for (const d in { ...u, ...m }) {
+    const v = u[d], b = m[d];
+    if (v !== b)
+      if (w = !0, d === "value" && (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement))
+        e.value !== b && (e.value = b ?? "");
+      else if (d === "checked" && e instanceof HTMLInputElement)
+        e.checked = !!b;
+      else if (d.startsWith("on") && typeof b == "function") {
+        const c = it(d);
+        typeof v == "function" && se.removeListener(e, c, v), se.addListener(e, c, b);
+      } else if (b == null)
+        e.removeAttribute(d);
+      else if ((r?.isCustomElement ?? t?.isCustomElement ?? !1) || d in e)
         try {
-          e[w] = d;
+          e[d] = b;
         } catch {
         }
       else
-        d === !1 && e.removeAttribute(w);
+        b === !1 && e.removeAttribute(d);
   }
-  for (const [w, v] of Object.entries(
+  for (const [d, v] of Object.entries(
     s.listeners || {}
   ))
-    e.addEventListener(w, v);
-  const p = t.attrs ?? {}, l = a;
-  for (const w in { ...p, ...l }) {
-    const v = p[w], d = l[w];
-    if (v !== d)
-      if (T = !0, d == null || d === !1) {
-        if (e.removeAttribute(w), w === "value") {
+    se.addListener(e, d, v);
+  const h = t.attrs ?? {}, l = a;
+  for (const d in { ...h, ...l }) {
+    const v = h[d], b = l[d];
+    let c = v, p = b;
+    if (v && typeof v == "object" && v.constructor?.name === "ReactiveState" && (c = v.value), b && typeof b == "object" && b.constructor?.name === "ReactiveState" && (p = b.value), c !== p)
+      if (w = !0, p == null || p === !1) {
+        if (e.removeAttribute(d), d === "value") {
           if (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement)
             try {
               e.value = "";
@@ -813,61 +1236,69 @@ function Re(e, t, r, i) {
             } catch {
             }
         }
-        if (w === "checked" && e instanceof HTMLInputElement)
+        if (d === "checked" && e instanceof HTMLInputElement)
           try {
             e.checked = !1;
           } catch {
           }
-        if (w === "disabled")
+        if (d === "disabled")
           try {
             e.disabled = !1;
           } catch {
           }
       } else {
-        if (w === "value") {
+        if (d === "value") {
           if (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement) {
             try {
-              e.value = d ?? "";
+              e.value = p ?? "";
             } catch {
-              e.setAttribute(w, String(d));
+              e.setAttribute(d, String(p));
             }
             continue;
           } else if (e instanceof HTMLSelectElement) {
             try {
-              e.value = d ?? "";
+              e.value = p ?? "";
             } catch {
             }
             continue;
           } else if (e instanceof HTMLProgressElement) {
             try {
-              e.value = Number(d);
+              e.value = Number(p);
             } catch {
             }
             continue;
           }
         }
-        if (w === "checked" && e instanceof HTMLInputElement) {
+        if (d === "checked" && e instanceof HTMLInputElement) {
           try {
-            e.checked = !!d;
+            e.checked = !!p;
           } catch {
           }
           continue;
         }
-        if (w === "style") {
-          e.setAttribute(w, String(d));
+        if (d === "style") {
+          e.setAttribute(d, String(p));
           continue;
         }
-        if (!(e.namespaceURI === "http://www.w3.org/2000/svg") && w in e)
+        const y = e.namespaceURI === "http://www.w3.org/2000/svg";
+        if (g && !y && d.includes("-")) {
+          const C = rt(d);
+          try {
+            e[C] = p;
+          } catch {
+            e.setAttribute(d, String(p));
+          }
+        } else if (!y && d in e)
           try {
-            e[w] = d;
+            e[d] = p;
           } catch {
-            e.setAttribute(w, String(d));
+            e.setAttribute(d, String(p));
           }
         else
-          e.setAttribute(w, String(d));
+          e.setAttribute(d, String(p));
       }
   }
-  if (m && T)
+  if (g && w)
     try {
       if (typeof e._applyProps == "function")
         try {
@@ -878,114 +1309,130 @@ function Re(e, t, r, i) {
     } catch {
     }
 }
-function U(e, t, r) {
+function X(e, t, r) {
   if (typeof e == "string")
     return document.createTextNode(e);
   if (e.tag === "#text") {
-    const p = document.createTextNode(
+    const h = document.createTextNode(
       typeof e.children == "string" ? e.children : ""
     );
-    return e.key != null && (p.key = e.key), p;
+    return e.key != null && (h.key = e.key), h;
   }
   if (e.tag === "#anchor") {
-    const p = e, l = Array.isArray(p.children) ? p.children : [], w = document.createTextNode(""), v = document.createTextNode("");
-    p.key != null && (w.key = `${p.key}:start`, v.key = `${p.key}:end`), p._startNode = w, p._endNode = v;
-    const d = document.createDocumentFragment();
-    d.appendChild(w);
-    for (const g of l) {
-      const y = U(g, t);
-      d.appendChild(y);
-    }
-    return d.appendChild(v), d;
-  }
-  const i = document.createElement(e.tag);
-  e.key != null && (i.key = e.key);
-  const { props: n = {}, attrs: s = {}, directives: o = {} } = e.props ?? {}, a = De(o, t, i, s), c = {
-    ...n,
+    const h = e, l = Array.isArray(h.children) ? h.children : [], d = document.createTextNode(""), v = document.createTextNode("");
+    h.key != null && (d.key = `${h.key}:start`, v.key = `${h.key}:end`), h._startNode = d, h._endNode = v;
+    const b = document.createDocumentFragment();
+    b.appendChild(d);
+    for (const c of l) {
+      const p = X(c, t);
+      b.appendChild(p);
+    }
+    return b.appendChild(v), b;
+  }
+  const n = document.createElement(e.tag);
+  e.key != null && (n.key = e.key);
+  const { props: i = {}, attrs: s = {}, directives: o = {} } = e.props ?? {}, a = st(o, t, n, s), u = {
+    ...i,
     ...a.props
-  }, u = {
+  }, m = {
     ...s,
     ...a.attrs
-  }, m = i.namespaceURI === "http://www.w3.org/2000/svg";
-  for (const p in u) {
-    const l = u[p];
-    if (!(typeof p != "string" || /\[object Object\]/.test(p))) {
+  }, g = n.namespaceURI === "http://www.w3.org/2000/svg";
+  for (const h in m) {
+    const l = m[h];
+    if (!(typeof h != "string" || /\[object Object\]/.test(h))) {
       if (typeof l == "boolean")
-        l && i.setAttribute(p, "");
+        l && n.setAttribute(h, "");
       else if (l != null)
-        if (!m && p === "value" && (i instanceof HTMLInputElement || i instanceof HTMLTextAreaElement || i instanceof HTMLSelectElement || i instanceof HTMLProgressElement))
+        if (!g && h === "value" && (n instanceof HTMLInputElement || n instanceof HTMLTextAreaElement || n instanceof HTMLSelectElement || n instanceof HTMLProgressElement))
           try {
-            i instanceof HTMLProgressElement ? i.value = Number(l) : i.value = l ?? "";
+            n instanceof HTMLProgressElement ? n.value = Number(l) : n.value = l ?? "";
           } catch {
-            i.setAttribute(p, String(l));
+            n.setAttribute(h, String(l));
           }
-        else if (!m && p === "checked" && i instanceof HTMLInputElement)
+        else if (!g && h === "checked" && n instanceof HTMLInputElement)
           try {
-            i.checked = !!l;
+            n.checked = !!l;
           } catch {
-            i.setAttribute(p, String(l));
+            n.setAttribute(h, String(l));
           }
-        else if (!m && p in i)
+        else if (!g && h in n)
           try {
-            i[p] = l;
+            n[h] = l;
           } catch {
-            i.setAttribute(p, String(l));
+            n.setAttribute(h, String(l));
           }
-        else
-          i.setAttribute(p, String(l));
-    }
-  }
-  for (const p in c) {
-    const l = c[p];
-    if (!(typeof p != "string" || /\[object Object\]/.test(p)))
-      if (p === "value" && (i instanceof HTMLInputElement || i instanceof HTMLTextAreaElement || i instanceof HTMLSelectElement))
-        i.value = l ?? "";
-      else if (p === "checked" && i instanceof HTMLInputElement)
-        i.checked = !!l;
-      else if (p.startsWith("on") && typeof l == "function")
-        i.addEventListener(Ne(p), l);
+        else if ((e.props?.isCustomElement ?? !1) && !g && h.includes("-")) {
+          const v = rt(h);
+          try {
+            n[v] = l;
+          } catch {
+            n.setAttribute(h, String(l));
+          }
+        } else
+          n.setAttribute(h, String(l));
+    }
+  }
+  for (const h in u) {
+    const l = u[h];
+    if (!(typeof h != "string" || /\[object Object\]/.test(h)))
+      if (h === "value" && (n instanceof HTMLInputElement || n instanceof HTMLTextAreaElement || n instanceof HTMLSelectElement)) {
+        const d = typeof l == "object" && l !== null && typeof l.value < "u" ? l.value : l;
+        n.value = d ?? "";
+      } else if (h === "checked" && n instanceof HTMLInputElement) {
+        const d = typeof l == "object" && l !== null && typeof l.value < "u" ? l.value : l;
+        n.checked = !!d;
+      } else if (h.startsWith("on") && typeof l == "function")
+        se.addListener(n, it(h), l);
       else {
-        if (p.startsWith("on") && l === void 0)
+        if (h.startsWith("on") && l === void 0)
           continue;
         if (l == null || l === !1)
-          i.removeAttribute(p);
-        else if ((e.props?.isCustomElement ?? !1) || p in i)
+          n.removeAttribute(h);
+        else if ((e.props?.isCustomElement ?? !1) || h in n)
           try {
-            i[p] = l;
+            const v = typeof l == "object" && l !== null && typeof l.value < "u" ? l.value : l;
+            n[h] = v;
           } catch {
           }
       }
   }
-  for (const [p, l] of Object.entries(
+  for (const [h, l] of Object.entries(
     a.listeners || {}
   ))
-    i.addEventListener(p, l);
-  const T = e.props?.ref ?? (e.props?.props && e.props.props.ref);
-  typeof e != "string" && T && r && (r[T] = i);
+    se.addListener(n, h, l);
+  const w = {
+    ...e,
+    props: {
+      ...e.props,
+      ...a.props
+    }
+  };
+  de(w, n, r);
   try {
-    if (typeof i._applyProps == "function")
+    if (typeof n._applyProps == "function")
       try {
-        i._applyProps(i._cfg);
+        n._applyProps(n._cfg);
       } catch {
       }
-    typeof i.requestRender == "function" ? i.requestRender() : typeof i._render == "function" && i._render(i._cfg);
+    typeof n.requestRender == "function" ? n.requestRender() : typeof n._render == "function" && n._render(n._cfg);
   } catch {
   }
   if (Array.isArray(e.children))
-    for (const p of e.children)
-      i.appendChild(U(p, t, r));
-  else typeof e.children == "string" && (i.textContent = e.children);
+    for (const h of e.children)
+      n.appendChild(X(h, t, r));
+  else typeof e.children == "string" && (n.textContent = e.children);
   try {
-    if (i instanceof HTMLSelectElement && u && u.hasOwnProperty("value"))
+    if (n instanceof HTMLSelectElement && m && m.hasOwnProperty("value"))
       try {
-        i.value = u.value ?? "";
+        n.value = m.value ?? "";
       } catch {
       }
   } catch {
   }
-  return i;
+  return n;
 }
-function ot(e, t, r, i, n) {
+function At(e, t, r, n, i) {
   if (typeof r == "string") {
     e.textContent !== r && (e.textContent = r);
     return;
@@ -994,104 +1441,104 @@ function ot(e, t, r, i, n) {
   const s = Array.from(e.childNodes), o = Array.isArray(t) ? t : [], a = /* @__PURE__ */ new Map();
   for (const l of o)
     l && l.key != null && a.set(l.key, l);
-  const c = /* @__PURE__ */ new Map();
+  const u = /* @__PURE__ */ new Map();
   for (const l of s) {
-    const w = l.key;
-    w != null && c.set(w, l);
+    const d = l.key;
+    d != null && u.set(d, l);
   }
-  const u = /* @__PURE__ */ new Set();
-  let m = e.firstChild;
-  function T(l, w) {
+  const m = /* @__PURE__ */ new Set();
+  let g = e.firstChild;
+  function w(l, d) {
     let v = l;
-    for (; v && (u.add(v), v !== w); )
+    for (; v && (m.add(v), v !== d); )
       v = v.nextSibling;
   }
-  function p(l, w, v, d) {
-    const g = [];
-    let y = l.nextSibling;
-    for (; y && y !== w; )
-      g.push(y), y = y.nextSibling;
-    const x = Array.isArray(v) ? v : [];
-    if (d.some((b) => b && b.key != null) || x.some((b) => b && b.key != null)) {
-      const b = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new Map();
-      for (const S of x)
-        S && S.key != null && b.set(S.key, S);
-      for (const S of g) {
-        const E = S.key;
-        E != null && h.set(E, S);
+  function h(l, d, v, b) {
+    const c = [];
+    let p = l.nextSibling;
+    for (; p && p !== d; )
+      c.push(p), p = p.nextSibling;
+    const y = Array.isArray(v) ? v : [];
+    if (b.some((k) => k && k.key != null) || y.some((k) => k && k.key != null)) {
+      const k = /* @__PURE__ */ new Map(), f = /* @__PURE__ */ new Map();
+      for (const _ of y)
+        _ && _.key != null && k.set(_.key, _);
+      for (const _ of c) {
+        const S = _.key;
+        S != null && f.set(S, _);
       }
-      const _ = /* @__PURE__ */ new Set();
-      let $ = l.nextSibling;
-      for (const S of d) {
-        let E;
-        if (S.key != null && h.has(S.key)) {
-          const C = b.get(S.key);
-          E = ge(
-            h.get(S.key),
-            C,
-            S,
-            i
-          ), _.add(E), E !== $ && e.contains(E) && e.insertBefore(E, $);
+      const x = /* @__PURE__ */ new Set();
+      let A = l.nextSibling;
+      for (const _ of b) {
+        let S;
+        if (_.key != null && f.has(_.key)) {
+          const R = k.get(_.key);
+          S = _e(
+            f.get(_.key),
+            R,
+            _,
+            n
+          ), x.add(S), S !== A && e.contains(S) && e.insertBefore(S, A);
         } else
-          E = U(S, i), e.insertBefore(E, $), _.add(E);
-        $ = E.nextSibling;
+          S = X(_, n), e.insertBefore(S, A), x.add(S);
+        A = S.nextSibling;
       }
-      for (const S of g)
-        !_.has(S) && e.contains(S) && e.removeChild(S);
+      for (const _ of c)
+        !x.has(_) && e.contains(_) && e.removeChild(_);
     } else {
-      const b = Math.min(
-        x.length,
-        d.length
+      const k = Math.min(
+        y.length,
+        b.length
       );
-      for (let h = 0; h < b; h++) {
-        const _ = x[h], $ = d[h], S = ge(g[h], _, $, i);
-        S !== g[h] && (e.insertBefore(S, g[h]), e.removeChild(g[h]));
+      for (let f = 0; f < k; f++) {
+        const x = y[f], A = b[f], _ = _e(c[f], x, A, n);
+        _ !== c[f] && (e.insertBefore(_, c[f]), e.removeChild(c[f]));
       }
-      for (let h = b; h < d.length; h++)
-        e.insertBefore(U(d[h], i), w);
-      for (let h = b; h < g.length; h++)
-        e.removeChild(g[h]);
+      for (let f = k; f < b.length; f++)
+        e.insertBefore(X(b[f], n), d);
+      for (let f = k; f < c.length; f++)
+        e.removeChild(c[f]);
     }
   }
   for (const l of r) {
-    let w;
+    let d;
     if (l.tag === "#anchor") {
-      const v = l.key, d = `${v}:start`, g = `${v}:end`;
-      let y = c.get(d), x = c.get(g);
-      const f = Array.isArray(l.children) ? l.children : [];
-      if (y || (y = document.createTextNode(""), y.key = d), x || (x = document.createTextNode(""), x.key = g), l._startNode = y, l._endNode = x, !e.contains(y) || !e.contains(x)) {
-        e.insertBefore(y, m);
-        for (const b of f)
-          e.insertBefore(U(b, i), m);
-        e.insertBefore(x, m);
+      const v = l.key, b = `${v}:start`, c = `${v}:end`;
+      let p = u.get(b), y = u.get(c);
+      const C = Array.isArray(l.children) ? l.children : [];
+      if (p || (p = document.createTextNode(""), p.key = b), y || (y = document.createTextNode(""), y.key = c), l._startNode = p, l._endNode = y, !e.contains(p) || !e.contains(y)) {
+        e.insertBefore(p, g);
+        for (const k of C)
+          e.insertBefore(X(k, n), g);
+        e.insertBefore(y, g);
       } else
-        p(
+        h(
+          p,
           y,
-          x,
           a.get(v)?.children,
-          f
+          C
         );
-      T(y, x), m = x.nextSibling;
+      w(p, y), g = y.nextSibling;
       continue;
     }
-    if (l.key != null && c.has(l.key)) {
+    if (l.key != null && u.has(l.key)) {
       const v = a.get(l.key);
-      w = ge(
-        c.get(l.key),
+      d = _e(
+        u.get(l.key),
         v,
         l,
-        i,
-        n
-      ), u.add(w), w !== m && e.contains(w) && (m && !e.contains(m) && (m = null), e.insertBefore(w, m));
+        n,
+        i
+      ), m.add(d), d !== g && e.contains(d) && (g && !e.contains(g) && (g = null), e.insertBefore(d, g));
     } else
-      w = U(l, i, n), m && !e.contains(m) && (m = null), e.insertBefore(w, m), u.add(w);
-    m = w.nextSibling;
+      d = X(l, n, i), g && !e.contains(g) && (g = null), e.insertBefore(d, g), m.add(d);
+    g = d.nextSibling;
   }
   for (const l of s)
-    !u.has(l) && e.contains(l) && (te(l, n), e.removeChild(l));
+    !m.has(l) && e.contains(l) && (ce(l, i), e.removeChild(l));
 }
-function ge(e, t, r, i, n) {
-  if (t && typeof t != "string" && t.props?.ref && n && te(e, n), t === r) return e;
+function _e(e, t, r, n, i) {
+  if (t && typeof t != "string" && t.props?.ref && i && ce(e, i), t === r) return e;
   if (typeof r == "string") {
     if (e.nodeType === Node.TEXT_NODE)
       return e.textContent !== r && (e.textContent = r), e;
@@ -1101,97 +1548,97 @@ function ge(e, t, r, i, n) {
     }
   }
   if (r && typeof r != "string" && r.tag === "#anchor") {
-    const o = r, a = Array.isArray(o.children) ? o.children : [], c = o._startNode ?? document.createTextNode(""), u = o._endNode ?? document.createTextNode("");
-    o.key != null && (c.key = `${o.key}:start`, u.key = `${o.key}:end`), o._startNode = c, o._endNode = u;
-    const m = document.createDocumentFragment();
-    m.appendChild(c);
-    for (const T of a) {
-      const p = U(T, i);
-      m.appendChild(p);
+    const o = r, a = Array.isArray(o.children) ? o.children : [], u = o._startNode ?? document.createTextNode(""), m = o._endNode ?? document.createTextNode("");
+    o.key != null && (u.key = `${o.key}:start`, m.key = `${o.key}:end`), o._startNode = u, o._endNode = m;
+    const g = document.createDocumentFragment();
+    g.appendChild(u);
+    for (const w of a) {
+      const h = X(w, n);
+      g.appendChild(h);
     }
-    return m.appendChild(u), e.parentNode?.replaceChild(m, e), c;
+    return g.appendChild(m), e.parentNode?.replaceChild(g, e), u;
   }
   if (!r) {
-    te(e, n);
+    ce(e, i);
     const o = document.createComment("removed");
     return e.parentNode?.replaceChild(o, e), o;
   }
   if (!t || typeof t == "string") {
-    te(e, n);
-    const o = U(r, i, n);
-    return typeof r != "string" && r.props?.ref && n && (n[r.props.ref] = o), e.parentNode?.replaceChild(o, e), o;
+    ce(e, i);
+    const o = X(r, n, i);
+    return de(r, o, i), e.parentNode?.replaceChild(o, e), o;
   }
   if (r.tag === "#anchor") {
-    const o = Array.isArray(r.children) ? r.children : [], a = r._startNode ?? document.createTextNode(""), c = r._endNode ?? document.createTextNode("");
-    r.key != null && (a.key = `${r.key}:start`, c.key = `${r.key}:end`), r._startNode = a, r._endNode = c;
-    const u = document.createDocumentFragment();
-    u.appendChild(a);
-    for (const m of o)
-      u.appendChild(U(m, i));
-    return u.appendChild(c), e.parentNode?.replaceChild(u, e), a;
+    const o = Array.isArray(r.children) ? r.children : [], a = r._startNode ?? document.createTextNode(""), u = r._endNode ?? document.createTextNode("");
+    r.key != null && (a.key = `${r.key}:start`, u.key = `${r.key}:end`), r._startNode = a, r._endNode = u;
+    const m = document.createDocumentFragment();
+    m.appendChild(a);
+    for (const g of o)
+      m.appendChild(X(g, n));
+    return m.appendChild(u), e.parentNode?.replaceChild(m, e), a;
   }
   if (typeof t != "string" && typeof r != "string" && t.tag === r.tag && t.key === r.key) {
     const o = e;
-    return Re(o, t.props || {}, r.props || {}, i), ot(o, t.children, r.children, i, n), typeof r != "string" && r.props?.ref && n && (n[r.props.ref] = o), o;
+    return Fe(o, t.props || {}, r.props || {}, n), At(o, t.children, r.children, n, i), de(r, o, i), o;
   }
   if (typeof t != "string" && typeof r != "string" && t.tag === r.tag && (t.tag && String(t.tag).includes("-") || r.props && r.props.isCustomElement || t.props && t.props.isCustomElement))
     try {
       const a = e;
-      return Re(a, t.props || {}, r.props || {}, i), typeof r != "string" && r.props?.ref && n && (n[r.props.ref] = a), a;
+      return Fe(a, t.props || {}, r.props || {}, n), de(r, a, i), a;
     } catch {
     }
-  te(e, n);
-  const s = U(r, i, n);
-  return typeof r != "string" && r.props?.ref && n && (n[r.props.ref] = s), e.parentNode?.replaceChild(s, e), s;
+  ce(e, i);
+  const s = X(r, n, i);
+  return de(r, s, i), e.parentNode?.replaceChild(s, e), s;
 }
-function at(e, t, r, i) {
-  let n;
-  Array.isArray(t) ? t.length === 1 ? (n = t[0], n && typeof n == "object" && n.key == null && (n = { ...n, key: "__root__" })) : n = { tag: "div", key: "__root__", children: t } : (n = t, n && typeof n == "object" && n.key == null && (n = { ...n, key: "__root__" })), n && typeof n == "object" && n.tag === "#anchor" && (n = {
+function Rt(e, t, r, n) {
+  let i;
+  Array.isArray(t) ? t.length === 1 ? (i = t[0], i && typeof i == "object" && i.key == null && (i = { ...i, key: "__root__" })) : i = { tag: "div", key: "__root__", children: t } : (i = t, i && typeof i == "object" && i.key == null && (i = { ...i, key: "__root__" })), i && typeof i == "object" && i.tag === "#anchor" && (i = {
     tag: "div",
     key: "__anchor_root__",
     props: { attrs: { "data-anchor-block-root": "", key: "__anchor_root__" } },
-    children: [n]
-  }), n = je(n, String(n.key ?? "root"));
+    children: [i]
+  }), i = Ie(i, String(i.key ?? "root"));
   const s = e._prevVNode ?? null, o = e._prevDom ?? e.firstChild ?? null;
   let a;
-  s && o ? typeof s != "string" && typeof n != "string" && s.tag === n.tag && s.key === n.key ? a = ge(o, s, n, r, i) : (a = U(n, r, i), e.replaceChild(a, o)) : (a = U(n, r, i), e.firstChild ? e.replaceChild(a, e.firstChild) : e.appendChild(a));
-  const c = [];
-  for (let u = 0; u < e.childNodes.length; u++) {
-    const m = e.childNodes[u];
-    m !== a && m.nodeName !== "STYLE" && (te(m, i), c.push(m));
+  s && o ? typeof s != "string" && typeof i != "string" && s.tag === i.tag && s.key === i.key ? a = _e(o, s, i, r, n) : (a = X(i, r, n), e.replaceChild(a, o)) : (a = X(i, r, n), e.firstChild ? e.replaceChild(a, e.firstChild) : e.appendChild(a));
+  const u = [];
+  for (let m = 0; m < e.childNodes.length; m++) {
+    const g = e.childNodes[m];
+    g !== a && g.nodeName !== "STYLE" && (ce(g, n), u.push(g));
   }
-  c.forEach((u) => e.removeChild(u)), e._prevVNode = n, e._prevDom = a;
+  u.forEach((m) => e.removeChild(m)), e._prevVNode = i, e._prevDom = a;
 }
-function ke(e) {
-  if (typeof e == "string") return Z(e);
+function Te(e) {
+  if (typeof e == "string") return ne(e);
   if (e.tag === "#text")
-    return typeof e.children == "string" ? Z(e.children) : "";
+    return typeof e.children == "string" ? ne(e.children) : "";
   if (e.tag === "#anchor")
-    return (Array.isArray(e.children) ? e.children.filter(Boolean) : []).map(ke).join("");
+    return (Array.isArray(e.children) ? e.children.filter(Boolean) : []).map(Te).join("");
   let t = "";
-  e.props && e.props.attrs && (t = Object.entries(e.props.attrs).map(([n, s]) => ` ${n}="${Z(String(s))}"`).join(""));
+  e.props && e.props.attrs && (t = Object.entries(e.props.attrs).map(([i, s]) => ` ${i}="${ne(String(s))}"`).join(""));
   let r = "";
-  e.props && (r = Object.entries(e.props).filter(([n]) => n !== "attrs" && n !== "directives" && n !== "ref" && n !== "key").map(([n, s]) => ` ${n}="${Z(String(s))}"`).join(""));
-  const i = Array.isArray(e.children) ? e.children.filter(Boolean).map(ke).join("") : typeof e.children == "string" ? Z(e.children) : e.children ? ke(e.children) : "";
-  return `<${e.tag}${t}${r}>${i}</${e.tag}>`;
+  e.props && (r = Object.entries(e.props).filter(([i]) => i !== "attrs" && i !== "directives" && i !== "ref" && i !== "key").map(([i, s]) => ` ${i}="${ne(String(s))}"`).join(""));
+  const n = Array.isArray(e.children) ? e.children.filter(Boolean).map(Te).join("") : typeof e.children == "string" ? ne(e.children) : e.children ? Te(e.children) : "";
+  return `<${e.tag}${t}${r}>${n}</${e.tag}>`;
 }
-function Ue(e, ...t) {
+function Tt(e, ...t) {
   let r = "";
-  for (let i = 0; i < e.length; i++)
-    r += e[i], i < t.length && (r += t[i]);
+  for (let n = 0; n < e.length; n++)
+    r += e[n], n < t.length && (r += t[n]);
   return r;
 }
-function Fe(e) {
+function ot(e) {
   return e.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\s+/g, " ").replace(/\s*([{}:;,>+~])\s*/g, "$1").replace(/;}/g, "}").trim();
 }
-let ue = null;
-function Oe() {
-  return ue || (ue = new CSSStyleSheet(), ue.replaceSync(Fe(lt))), ue;
+let xe = null;
+function Ke() {
+  return xe || (xe = new CSSStyleSheet(), xe.replaceSync(ot(Pt))), xe;
 }
-function ct(e) {
+function Ot(e) {
   return e.replace(/url\s*\(\s*['"]?javascript:[^)]*\)/gi, "").replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, "").replace(/expression\s*\([^)]*\)/gi, "");
 }
-const lt = Ue`
+const Pt = Tt`
   :host, *, ::before, ::after {
     all: isolate;
     box-sizing: border-box;
@@ -1249,7 +1696,7 @@ const lt = Ue`
   sup { top: -.5em }
   [disabled], [aria-disabled=true] { cursor: not-allowed }
   [hidden] { display: none }
-`, ft = {
+`, Lt = {
   neutral: {
     50: "#fafafa",
     100: "#f4f4f5",
@@ -1345,17 +1792,17 @@ const lt = Ue`
   black: { DEFAULT: "#000000" },
   transparent: { DEFAULT: "transparent" },
   current: { DEFAULT: "currentColor" }
-}, ut = Object.fromEntries(
-  Object.entries(ft).map(([e, t]) => [
+}, jt = Object.fromEntries(
+  Object.entries(Lt).map(([e, t]) => [
     e,
     Object.fromEntries(
-      Object.entries(t).map(([r, i]) => [
+      Object.entries(t).map(([r, n]) => [
         r,
-        `var(--color-${e}${r === "DEFAULT" ? "" : `-${r}`}, ${i})`
+        `var(--color-${e}${r === "DEFAULT" ? "" : `-${r}`}, ${n})`
       ])
     )
   ])
-), _e = {
+), Oe = {
   /* Display */
   block: "display:block;",
   inline: "display:inline;",
@@ -1570,7 +2017,7 @@ const lt = Ue`
   "z-30": "z-index:30;",
   "z-40": "z-index:40;",
   "z-50": "z-index:50;"
-}, dt = "0.25rem", Pe = {
+}, Mt = "0.25rem", Ve = {
   m: ["margin"],
   mx: ["margin-inline"],
   my: ["margin-block"],
@@ -1602,34 +2049,34 @@ const lt = Ue`
   "gap-x": ["column-gap"],
   "gap-y": ["row-gap"]
 };
-function D(e, t) {
-  let r = 0, i = 0;
-  for (let n = 0; n < e.length; n++) {
-    const s = e[n];
+function G(e, t) {
+  let r = 0, n = 0;
+  for (let i = 0; i < e.length; i++) {
+    const s = e[i];
     if (s === "[") r++;
     else if (s === "]" && r > 0) r--;
-    else if (s === "(") i++;
-    else if (s === ")" && i > 0) i--;
-    else if (r === 0 && i === 0 && (s === ">" || s === "+" || s === "~" || s === " "))
-      return e.slice(0, n) + t + e.slice(n);
+    else if (s === "(") n++;
+    else if (s === ")" && n > 0) n--;
+    else if (r === 0 && n === 0 && (s === ">" || s === "+" || s === "~" || s === " "))
+      return e.slice(0, i) + t + e.slice(i);
   }
   return e + t;
 }
-const pt = {
+const Nt = {
   before: (e, t) => `${e}::before{${t}}`,
   after: (e, t) => `${e}::after{${t}}`,
-  hover: (e, t) => `${D(e, ":hover")}{${t}}`,
-  focus: (e, t) => `${D(e, ":focus")}{${t}}`,
-  active: (e, t) => `${D(e, ":active")}{${t}}`,
-  disabled: (e, t) => `${D(e, ":disabled")}{${t}}`,
-  visited: (e, t) => `${D(e, ":visited")}{${t}}`,
-  checked: (e, t) => `${D(e, ":checked")}{${t}}`,
-  first: (e, t) => `${D(e, ":first-child")}{${t}}`,
-  last: (e, t) => `${D(e, ":last-child")}{${t}}`,
-  odd: (e, t) => `${D(e, ":nth-child(odd)")}{${t}}`,
-  even: (e, t) => `${D(e, ":nth-child(even)")}{${t}}`,
-  "focus-within": (e, t) => `${D(e, ":focus-within")}{${t}}`,
-  "focus-visible": (e, t) => `${D(e, ":focus-visible")}{${t}}`,
+  hover: (e, t) => `${G(e, ":hover")}{${t}}`,
+  focus: (e, t) => `${G(e, ":focus")}{${t}}`,
+  active: (e, t) => `${G(e, ":active")}{${t}}`,
+  disabled: (e, t) => `${G(e, ":disabled")}{${t}}`,
+  visited: (e, t) => `${G(e, ":visited")}{${t}}`,
+  checked: (e, t) => `${G(e, ":checked")}{${t}}`,
+  first: (e, t) => `${G(e, ":first-child")}{${t}}`,
+  last: (e, t) => `${G(e, ":last-child")}{${t}}`,
+  odd: (e, t) => `${G(e, ":nth-child(odd)")}{${t}}`,
+  even: (e, t) => `${G(e, ":nth-child(even)")}{${t}}`,
+  "focus-within": (e, t) => `${G(e, ":focus-within")}{${t}}`,
+  "focus-visible": (e, t) => `${G(e, ":focus-visible")}{${t}}`,
   "group-hover": (e, t) => `.group:hover ${e}{${t}}`,
   "group-focus": (e, t) => `.group:focus ${e}{${t}}`,
   "group-active": (e, t) => `.group:active ${e}{${t}}`,
@@ -1638,7 +2085,7 @@ const pt = {
   "peer-focus": (e, t) => `.peer:focus ~ ${e}{${t}}`,
   "peer-checked": (e, t) => `.peer:checked ~ ${e}{${t}}`,
   "peer-disabled": (e, t) => `.peer:disabled ~ ${e}{${t}}`
-}, Ee = {
+}, Pe = {
   // Responsive
   sm: "(min-width:640px)",
   md: "(min-width:768px)",
@@ -1647,23 +2094,23 @@ const pt = {
   "2xl": "(min-width:1536px)",
   // Dark mode (now plain string)
   dark: "(prefers-color-scheme: dark)"
-}, $e = ["sm", "md", "lg", "xl", "2xl"];
-function Se(e) {
-  const t = e.startsWith("-"), i = (t ? e.slice(1) : e).split("-");
-  if (i.length < 2) return null;
-  const n = i.slice(0, -1).join("-"), s = i[i.length - 1], o = parseFloat(s);
-  if (Number.isNaN(o) || !Pe[n]) return null;
+}, Le = ["sm", "md", "lg", "xl", "2xl"];
+function je(e) {
+  const t = e.startsWith("-"), n = (t ? e.slice(1) : e).split("-");
+  if (n.length < 2) return null;
+  const i = n.slice(0, -1).join("-"), s = n[n.length - 1], o = parseFloat(s);
+  if (Number.isNaN(o) || !Ve[i]) return null;
   const a = t ? "-" : "";
-  return Pe[n].map((c) => `${c}:calc(${a}${dt} * ${o});`).join("");
+  return Ve[i].map((u) => `${u}:calc(${a}${Mt} * ${o});`).join("");
 }
-function Me(e) {
-  const t = e.replace("#", ""), r = parseInt(t, 16), i = r >> 16 & 255, n = r >> 8 & 255, s = r & 255;
-  return `${i} ${n} ${s}`;
+function Je(e) {
+  const t = e.replace("#", ""), r = parseInt(t, 16), n = r >> 16 & 255, i = r >> 8 & 255, s = r & 255;
+  return `${n} ${i} ${s}`;
 }
-function ht(e) {
+function Wt(e) {
   const t = /^(bg|text|border|decoration|shadow|outline|caret|accent|fill|stroke)-([a-z]+)-?(\d{2,3}|DEFAULT)?$/.exec(e);
   if (!t) return null;
-  const [, r, i, n = "DEFAULT"] = t, s = ut[i]?.[n];
+  const [, r, n, i = "DEFAULT"] = t, s = jt[n]?.[i];
   if (!s) return null;
   if (r === "shadow") return `--ce-shadow-color:${s};`;
   const a = {
@@ -1679,55 +2126,55 @@ function ht(e) {
   }[r];
   return a ? `${a}:${s};` : null;
 }
-function gt(e) {
+function zt(e) {
   const [t, r] = e.split("/");
   if (!r) return { base: t };
-  const i = parseInt(r, 10);
-  return isNaN(i) || i < 0 || i > 100 ? { base: t } : { base: t, opacity: i / 100 };
+  const n = parseInt(r, 10);
+  return isNaN(n) || n < 0 || n > 100 ? { base: t } : { base: t, opacity: n / 100 };
 }
-function Ce(e) {
-  const { base: t, opacity: r } = gt(e), i = ht(t);
-  if (i) {
+function Me(e) {
+  const { base: t, opacity: r } = zt(e), n = Wt(t);
+  if (n) {
     if (r !== void 0) {
-      const s = /#([0-9a-f]{6})/i.exec(i);
+      const s = /#([0-9a-f]{6})/i.exec(n);
       if (s) {
-        const o = Me(s[0]);
-        return i.replace(/#([0-9a-f]{6})/i, `rgb(${o} / ${r})`);
+        const o = Je(s[0]);
+        return n.replace(/#([0-9a-f]{6})/i, `rgb(${o} / ${r})`);
       }
     }
-    return i;
+    return n;
   }
-  const n = me(t);
-  if (n && r !== void 0) {
-    const s = /#([0-9a-f]{6})/i.exec(n);
+  const i = Ee(t);
+  if (i && r !== void 0) {
+    const s = /#([0-9a-f]{6})/i.exec(i);
     if (s) {
-      const o = Me(s[0]);
-      return n.replace(/#([0-9a-f]{6})/i, `rgb(${o} / ${r})`);
+      const o = Je(s[0]);
+      return i.replace(/#([0-9a-f]{6})/i, `rgb(${o} / ${r})`);
     }
   }
-  return n;
+  return i;
 }
-function Ae(e) {
+function Ne(e) {
   const t = /^opacity-(\d{1,3})$/.exec(e);
   if (!t) return null;
   const r = parseInt(t[1], 10);
   return r < 0 || r > 100 ? null : `opacity:${r / 100};`;
 }
-function me(e) {
+function Ee(e) {
   if (e.startsWith("[") && e.endsWith("]") && !e.includes("-[")) {
-    const n = e.slice(1, -1).trim().match(/^([a-zA-Z][a-zA-Z0-9-]*)\s*:(.*)$/);
-    if (n) {
-      const s = n[1].trim();
-      let o = n[2].trim();
+    const i = e.slice(1, -1).trim().match(/^([a-zA-Z][a-zA-Z0-9-]*)\s*:(.*)$/);
+    if (i) {
+      const s = i[1].trim();
+      let o = i[2].trim();
       return o = o.replace(/url\('\s*([^']*?)\s*'\)/g, 'url("$1")'), o = o.replace(/^'([^']*)'$/g, '"$1"'), `${s}:${o};`;
     }
     return null;
   }
   const t = e.indexOf("-["), r = e.endsWith("]");
   if (t > 0 && r) {
-    const i = e.slice(0, t);
-    let n = e.slice(t + 2, -1);
-    n = n.replace(/_/g, " ");
+    const n = e.slice(0, t);
+    let i = e.slice(t + 2, -1);
+    i = i.replace(/_/g, " ");
     const s = {
       bg: "background-color",
       text: "color",
@@ -1770,14 +2217,14 @@ function me(e) {
       leading: "line-height",
       z: "z-index"
     };
-    if (i === "rotate")
-      return `transform:rotate(${n});`;
-    const o = s[i] ?? i.replace(/_/g, "-");
-    if (o && n) return `${o}:${n};`;
+    if (n === "rotate")
+      return `transform:rotate(${i});`;
+    const o = s[n] ?? n.replace(/_/g, "-");
+    if (o && i) return `${o}:${i};`;
   }
   return null;
 }
-function mt(e) {
+function Dt(e) {
   if (e.startsWith("[") && e.endsWith("]")) {
     const r = e.slice(1, -1);
     return r.includes("&") ? r : e;
@@ -1789,44 +2236,44 @@ function mt(e) {
   }
   return null;
 }
-function yt(e) {
+function It(e) {
   return e.replace(/([!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g, "\\$1");
 }
-function bt(e) {
+function Ht(e) {
   const t = /class\s*=\s*(['"])(.*?)\1/g, r = [];
-  let i;
-  for (; i = t.exec(e); ) {
-    const n = i[2].split(/\s+/).filter(Boolean);
-    n.length && r.push(...n);
+  let n;
+  for (; n = t.exec(e); ) {
+    const i = n[2].split(/\s+/).filter(Boolean);
+    i.length && r.push(...i);
   }
   return r.filter(Boolean);
 }
-const Be = /* @__PURE__ */ new Map(), wt = 16;
-function xt(e) {
-  const t = Date.now(), r = Be.get(e);
-  if (r && t - r.timestamp < wt) return r.css;
-  const i = bt(e), n = new Set(i), s = [], o = [], a = [], c = [], u = {};
-  function m(d, g = !1) {
-    const y = (g ? "dark|" : "") + d;
-    if (y in u) return u[y];
-    const x = w(d, g);
-    return u[y] = x, x;
-  }
-  function T(d) {
-    const g = d.some((x) => $e.includes(x)), y = d.includes("dark");
-    return d.length === 0 ? 1 : !g && !y ? 2 : g && !y ? 3 : 4;
-  }
-  function p(d) {
-    const g = [];
-    let y = "", x = 0, f = 0;
-    for (let b = 0; b < d.length; b++) {
-      const h = d[b];
-      h === "[" ? x++ : h === "]" && x > 0 ? x-- : h === "(" ? f++ : h === ")" && f > 0 && f--, h === ":" && x === 0 && f === 0 ? (g.push(y), y = "") : y += h;
-    }
-    return y && g.push(y), g;
-  }
-  function l(d) {
-    switch (d) {
+const Ze = /* @__PURE__ */ new Map(), Bt = 16;
+function Ut(e) {
+  const t = Date.now(), r = Ze.get(e);
+  if (r && t - r.timestamp < Bt) return r.css;
+  const n = Ht(e), i = new Set(n), s = [], o = [], a = [], u = [], m = {};
+  function g(b, c = !1) {
+    const p = (c ? "dark|" : "") + b;
+    if (p in m) return m[p];
+    const y = d(b, c);
+    return m[p] = y, y;
+  }
+  function w(b) {
+    const c = b.some((y) => Le.includes(y)), p = b.includes("dark");
+    return b.length === 0 ? 1 : !c && !p ? 2 : c && !p ? 3 : 4;
+  }
+  function h(b) {
+    const c = [];
+    let p = "", y = 0, C = 0;
+    for (let k = 0; k < b.length; k++) {
+      const f = b[k];
+      f === "[" ? y++ : f === "]" && y > 0 ? y-- : f === "(" ? C++ : f === ")" && C > 0 && C--, f === ":" && y === 0 && C === 0 ? (c.push(p), p = "") : p += f;
+    }
+    return p && c.push(p), c;
+  }
+  function l(b) {
+    switch (b) {
       case "hover":
         return ":hover";
       case "focus":
@@ -1855,245 +2302,234 @@ function xt(e) {
         return null;
     }
   }
-  function w(d, g = !1) {
-    const y = p(d);
-    let x = !1;
-    const f = y.find((k) => (k.startsWith("!") && (x = !0, k = k.slice(1)), _e[k] || Se(k) || Ae(k) || Ce(k) || me(k)));
+  function d(b, c = !1) {
+    const p = h(b);
+    let y = !1;
+    const C = p.find((E) => (E.startsWith("!") && (y = !0, E = E.slice(1)), Oe[E] || je(E) || Ne(E) || Me(E) || Ee(E)));
+    if (!C) return null;
+    const k = C.replace(/^!/, ""), f = Oe[k] ?? je(k) ?? Ne(k) ?? Me(k) ?? Ee(k);
     if (!f) return null;
-    const b = f.replace(/^!/, ""), h = _e[b] ?? Se(b) ?? Ae(b) ?? Ce(b) ?? me(b);
-    if (!h) return null;
-    const _ = y.indexOf(f);
-    let $ = _ >= 0 ? y.slice(0, _) : [];
-    g && ($ = $.filter((k) => k !== "dark"));
-    const S = `.${yt(d)}`, E = "__SUBJECT__", C = x ? h.replace(/;$/, " !important;") : h;
-    let A = E;
-    const P = [];
-    for (const k of $)
-      k.startsWith("group-") ? (A = `.group:${k.slice(6)} ${A}`, P.push(k)) : k.startsWith("peer-") && (A = A.replace(E, `.peer:${k.slice(5)}~${E}`), P.push(k));
-    $ = $.filter((k) => !P.includes(k));
-    const X = [], ie = [];
-    let M = null;
-    for (const k of $) {
-      if (k === "dark" || $e.includes(k)) continue;
-      const W = mt(k);
-      if (W) {
-        M = W;
+    const x = p.indexOf(C);
+    let A = x >= 0 ? p.slice(0, x) : [];
+    c && (A = A.filter((E) => E !== "dark"));
+    const _ = `.${It(b)}`, S = "__SUBJECT__", R = y ? f.replace(/;$/, " !important;") : f;
+    let T = S;
+    const $ = [];
+    for (const E of A)
+      E.startsWith("group-") ? (T = `.group:${E.slice(6)} ${T}`, $.push(E)) : E.startsWith("peer-") && (T = T.replace(S, `.peer:${E.slice(5)}~${S}`), $.push(E));
+    A = A.filter((E) => !$.includes(E));
+    const P = [], B = [];
+    let J = null;
+    for (const E of A) {
+      if (E === "dark" || Le.includes(E)) continue;
+      const U = Dt(E);
+      if (U) {
+        J = U;
         continue;
       }
-      const R = l(k);
-      if (R) {
-        M ? ie.push(R) : X.push(R);
+      const D = l(E);
+      if (D) {
+        J ? B.push(D) : P.push(D);
         continue;
       }
-      const B = pt[k];
-      typeof B == "function" && (A = B(A, C).split("{")[0]);
-    }
-    function F(k, W) {
-      if (!W) return k;
-      let R = 0, B = 0;
-      if (k.length && (k[0] === ">" || k[0] === "+" || k[0] === "~" || k[0] === " ")) {
-        let j = 1;
-        for (; j < k.length && k[j] === " "; ) j++;
-        for (; j < k.length; j++) {
-          const L = k[j];
-          if (L === "[" ? R++ : L === "]" && R > 0 ? R-- : L === "(" ? B++ : L === ")" && B > 0 && B--, R === 0 && B === 0 && (k[j] === ">" || k[j] === "+" || k[j] === "~" || k[j] === " "))
-            return k.slice(0, j) + W + k.slice(j);
+      const z = Nt[E];
+      typeof z == "function" && (T = z(T, R).split("{")[0]);
+    }
+    function ye(E, U) {
+      if (!U) return E;
+      let D = 0, z = 0;
+      if (E.length && (E[0] === ">" || E[0] === "+" || E[0] === "~" || E[0] === " ")) {
+        let O = 1;
+        for (; O < E.length && E[O] === " "; ) O++;
+        for (; O < E.length; O++) {
+          const I = E[O];
+          if (I === "[" ? D++ : I === "]" && D > 0 ? D-- : I === "(" ? z++ : I === ")" && z > 0 && z--, D === 0 && z === 0 && (E[O] === ">" || E[O] === "+" || E[O] === "~" || E[O] === " "))
+            return E.slice(0, O) + U + E.slice(O);
         }
-        return k + W;
+        return E + U;
       }
-      for (let j = 0; j < k.length; j++) {
-        const L = k[j];
-        if (L === "[" ? R++ : L === "]" && R > 0 ? R-- : L === "(" ? B++ : L === ")" && B > 0 && B--, R === 0 && B === 0 && (L === ">" || L === "+" || L === "~" || L === " "))
-          return k.slice(0, j) + W + k.slice(j);
+      for (let O = 0; O < E.length; O++) {
+        const I = E[O];
+        if (I === "[" ? D++ : I === "]" && D > 0 ? D-- : I === "(" ? z++ : I === ")" && z > 0 && z--, D === 0 && z === 0 && (I === ">" || I === "+" || I === "~" || I === " "))
+          return E.slice(0, O) + U + E.slice(O);
       }
-      return k + W;
-    }
-    const H = X.join(""), N = ie.join("");
-    if (M)
-      if (M.includes("&")) {
-        const k = M.indexOf("&"), W = M.slice(0, k), R = M.slice(k + 1), B = E + H, j = A;
-        if (X.length === 0)
-          A = j.replace(E, W + B + N + R);
+      return E + U;
+    }
+    const K = P.join(""), L = B.join("");
+    if (J)
+      if (J.includes("&")) {
+        const E = J.indexOf("&"), U = J.slice(0, E), D = J.slice(E + 1), z = S + K, O = T;
+        if (P.length === 0)
+          T = O.replace(S, U + z + L + D);
         else {
-          const L = F(R, N);
-          A = j.replace(E, W + B + L);
+          const I = ye(D, L);
+          T = O.replace(S, U + z + I);
         }
       } else
-        A = A.replace(E, `${M}${E + H}`), N && (A = A.replace(E, `${E}${N}`));
+        T = T.replace(S, `${J}${S + K}`), L && (T = T.replace(S, `${S}${L}`));
     else
-      A = E + H + N;
-    A = A.replace(new RegExp(E, "g"), S);
-    let I = `${A}{${C}}`;
-    const z = $.filter((k) => $e.includes(k)), J = z.length ? z[z.length - 1] : null, se = $.includes("dark");
-    return g && J ? I = `@media (prefers-color-scheme: dark) and ${Ee[J]}{${I}}` : g ? I = `@media (prefers-color-scheme: dark){${I}}` : se && J ? I = `@media (prefers-color-scheme: dark) and ${Ee[J]}{${I}}` : se ? I = `@media (prefers-color-scheme: dark){${I}}` : J && (I = `@media ${Ee[J]}{${I}}`), I;
-  }
-  for (const d of n) {
-    const g = p(d), y = g.find(
-      (h) => _e[h] || Se(h) || Ae(h) || Ce(h) || me(h)
+      T = S + K + L;
+    T = T.replace(new RegExp(S, "g"), _);
+    let j = `${T}{${R}}`;
+    const V = A.filter((E) => Le.includes(E)), Z = V.length ? V[V.length - 1] : null, W = A.includes("dark");
+    return c && Z ? j = `@media (prefers-color-scheme: dark) and ${Pe[Z]}{${j}}` : c ? j = `@media (prefers-color-scheme: dark){${j}}` : W && Z ? j = `@media (prefers-color-scheme: dark) and ${Pe[Z]}{${j}}` : W ? j = `@media (prefers-color-scheme: dark){${j}}` : Z && (j = `@media ${Pe[Z]}{${j}}`), j;
+  }
+  for (const b of i) {
+    const c = h(b), p = c.find(
+      (f) => Oe[f] || je(f) || Ne(f) || Me(f) || Ee(f)
     );
-    if (!y) continue;
-    const x = g.indexOf(y), f = x >= 0 ? g.slice(0, x) : [], b = T(f);
-    if (b === 4) {
-      const h = m(d, !0);
-      h && c.push(h);
+    if (!p) continue;
+    const y = c.indexOf(p), C = y >= 0 ? c.slice(0, y) : [], k = w(C);
+    if (k === 4) {
+      const f = g(b, !0);
+      f && u.push(f);
     } else {
-      const h = m(d);
-      h && (b === 1 ? s.push(h) : b === 2 ? o.push(h) : b === 3 && a.push(h));
+      const f = g(b);
+      f && (k === 1 ? s.push(f) : k === 2 ? o.push(f) : k === 3 && a.push(f));
     }
   }
-  const v = [...s, ...o, ...a, ...c].join("");
-  return Be.set(e, { css: v, timestamp: t }), v;
+  const v = [...s, ...o, ...a, ...u].join("");
+  return Ze.set(e, { css: v, timestamp: t }), v;
 }
-const ce = [];
-function vt(e, t, r, i, n, s, o, a) {
+const pe = [];
+function qt(e, t, r, n, i, s, o, a) {
   if (e) {
-    ce.push(r);
+    pe.push(r);
     try {
-      if (t.loadingTemplate && r.isLoading) {
-        re(e, t.loadingTemplate(r), r, i, n);
-        return;
-      }
-      if (t.errorTemplate && r.hasError) {
-        r.error instanceof Error && re(e, t.errorTemplate(r.error, r), r, i, n);
-        return;
-      }
-      const c = t.render(r);
-      if (c instanceof Promise) {
-        s(!0), c.then((u) => {
-          s(!1), o(null), re(e, u, r, i, n), a(e.innerHTML);
-        }).catch((u) => {
-          s(!1), o(u), t.errorTemplate && re(e, t.errorTemplate(u, r), r, i, n);
-        }), t.loadingTemplate && re(e, t.loadingTemplate(r), r, i, n);
+      const u = t.render(r);
+      if (u instanceof Promise) {
+        s(!0), u.then((m) => {
+          s(!1), o(null), Ge(e, m, r, n, i), a(e.innerHTML);
+        }).catch((m) => {
+          s(!1), o(m);
+        });
         return;
       }
-      re(e, c, r, i, n), a(e.innerHTML);
+      Ge(e, u, r, n, i), a(e.innerHTML);
     } finally {
-      ce.pop();
+      pe.pop();
     }
   }
 }
-function re(e, t, r, i, n) {
-  e && (at(
+function Ge(e, t, r, n, i) {
+  e && (Rt(
     e,
     Array.isArray(t) ? t : [t],
     r,
-    i
-  ), n(e.innerHTML));
+    n
+  ), i(e.innerHTML));
 }
-function kt(e, t, r, i, n, s, o) {
+function Ft(e, t, r, n, i, s, o) {
   if (s !== null && clearTimeout(s), Date.now() - t < 16) {
-    if (n(r + 1), r > 10) {
-      o(null);
+    if (i(r + 1), r === 15)
+      console.warn(
+        `⚠️ Component is re-rendering rapidly. This might indicate:
+  Common causes:
+  • Event handler calling a function immediately: @click="\${fn()}" should be @click="\${fn}"
+  • State modification during render
+  • Missing dependencies in computed/watch
+  Component rendering will be throttled to prevent browser freeze.`
+      );
+    else if (r > 20) {
+      console.error(
+        `🛑 Infinite loop detected in component render:
+  • This might be caused by state updates during render
+  • Ensure all state modifications are done in event handlers or effects
+Stopping runaway component render to prevent browser freeze`
+      ), o(null);
       return;
     }
   } else
-    n(0);
-  const c = setTimeout(() => {
-    i(Date.now()), e(), o(null);
-  }, 0);
-  o(c);
+    i(0);
+  const m = setTimeout(() => {
+    n(Date.now()), e(), o(null);
+  }, r > 10 ? 100 : 0);
+  o(m);
 }
-function _t(e, t, r, i, n, s) {
+function Kt(e, t, r, n, i) {
   if (!e) return;
-  const o = xt(i);
-  if (!t.style && (!o || o.trim() === "")) {
-    s(null), e.adoptedStyleSheets = [Oe()];
+  const s = Ut(r);
+  if ((!s || s.trim() === "") && !t._computedStyle) {
+    i(null), e.adoptedStyleSheets = [Ke()];
     return;
   }
-  let a = "";
-  t.style && (typeof t.style == "string" ? a = t.style : typeof t.style == "function" && (a = t.style(r)));
-  let c = ct(`${a}
-${o}
+  let o = "";
+  t._computedStyle && (o = t._computedStyle);
+  let a = Ot(`${o}
+${s}
 `);
-  c = Fe(c);
+  a = ot(a);
   let u = n;
-  u || (u = new CSSStyleSheet()), (u.cssRules.length === 0 || u.toString() !== c) && u.replaceSync(c), e.adoptedStyleSheets = [Oe(), u], s(u);
+  u || (u = new CSSStyleSheet()), (u.cssRules.length === 0 || u.toString() !== a) && u.replaceSync(a), e.adoptedStyleSheets = [Ke(), u], i(u);
+}
+let N = null;
+function Vt(e) {
+  N = e;
+}
+function Jt() {
+  N = null;
+}
+function lr() {
+  if (!N)
+    throw new Error("useEmit must be called during component render");
+  const e = N.emit;
+  return (t, r) => e(t, r);
+}
+function ge(e) {
+  e._hookCallbacks || Object.defineProperty(e, "_hookCallbacks", {
+    value: {},
+    writable: !0,
+    enumerable: !1,
+    configurable: !1
+  });
 }
-class Et {
-  pendingUpdates = /* @__PURE__ */ new Map();
-  isFlushScheduled = !1;
-  /**
-   * Schedule an update to be executed in the next microtask
-   * Uses component identity to deduplicate multiple render requests for the same component
-   */
-  schedule(t, r) {
-    const i = r || t.toString();
-    this.pendingUpdates.set(i, t), this.isFlushScheduled || (this.isFlushScheduled = !0, typeof globalThis.process < "u" && globalThis.process.env?.NODE_ENV === "test" || typeof window < "u" && (window.__vitest__ || window.Cypress) ? this.flush() : queueMicrotask(() => this.flush()));
-  }
-  /**
-   * Execute all pending updates
-   */
-  flush() {
-    const t = Array.from(this.pendingUpdates.values());
-    this.pendingUpdates.clear(), this.isFlushScheduled = !1;
-    for (const r of t)
-      try {
-        r();
-      } catch (i) {
-        typeof console < "u" && console.error && console.error("Error in batched update:", i);
-      }
-  }
-  /**
-   * Get the number of pending updates
-   */
-  get pendingCount() {
-    return this.pendingUpdates.size;
+function ur(e) {
+  if (!N)
+    throw new Error("useOnConnected must be called during component render");
+  ge(N), N._hookCallbacks.onConnected = e;
+}
+function fr(e) {
+  if (!N)
+    throw new Error("useOnDisconnected must be called during component render");
+  ge(N), N._hookCallbacks.onDisconnected = e;
+}
+function dr(e) {
+  if (!N)
+    throw new Error("useOnAttributeChanged must be called during component render");
+  ge(N), N._hookCallbacks.onAttributeChanged = e;
+}
+function pr(e) {
+  if (!N)
+    throw new Error("useOnError must be called during component render");
+  ge(N), N._hookCallbacks.onError = e;
+}
+function hr(e) {
+  if (!N)
+    throw new Error("useStyle must be called during component render");
+  ge(N);
+  try {
+    const t = e();
+    Object.defineProperty(N, "_computedStyle", {
+      value: t,
+      writable: !0,
+      enumerable: !1,
+      configurable: !0
+    });
+  } catch (t) {
+    console.warn("Error in useStyle callback:", t), Object.defineProperty(N, "_computedStyle", {
+      value: "",
+      writable: !0,
+      enumerable: !1,
+      configurable: !0
+    });
   }
 }
-const $t = new Et();
-function oe(e, t) {
-  $t.schedule(e, t);
-}
-const be = /* @__PURE__ */ new Map(), We = Symbol.for("cer.registry");
+const $e = /* @__PURE__ */ new Map(), Xe = Symbol.for("cer.registry");
 if (typeof window < "u") {
   const e = globalThis;
-  e[We] || (e[We] = be);
-}
-function Ie(e, t, r) {
-  let i = Q(e);
-  i.includes("-") || (i = `cer-${i}`);
-  let n;
-  typeof t == "function" ? n = { ...r, render: t } : n = t, typeof n.onError != "function" && (n.onError = (s, o) => {
-    Y(`[${i}] Error:`, s, o);
-  });
-  try {
-    const s = /* @__PURE__ */ new Set([
-      "refs",
-      "requestRender",
-      "error",
-      "hasError",
-      "isLoading",
-      "emit"
-    ]), o = [];
-    if (n.state && typeof n.state == "object" && Object.keys(n.state).forEach((a) => {
-      s.has(a) && o.push(a);
-    }), n.props && typeof n.props == "object" && Object.keys(n.props).forEach((a) => {
-      s.has(a) && o.push(a);
-    }), n.computed && typeof n.computed == "object" && Object.keys(n.computed).forEach((a) => {
-      s.has(a) && o.push(a);
-    }), o.length > 0) {
-      const a = Array.from(new Set(o));
-      pe(
-        `[${i}] Reserved runtime context keys used in component config: ${a.join(", ")}. These names are provided by the runtime (for example: refs, error, emit). Rename your state/prop/computed keys (e.g. 'error' -> 'errorMessage') to avoid collisions and TypeScript type conflicts.`
-      );
-    }
-  } catch {
-  }
-  if (be.set(i, n), typeof window < "u")
-    if (!customElements.get(i))
-      customElements.define(i, St(i, n));
-    else
-      try {
-        document.querySelectorAll(i).forEach((s) => {
-          try {
-            typeof s._cfg < "u" && (s._cfg = n), typeof s._render == "function" && s._render(n);
-          } catch {
-          }
-        });
-      } catch {
-      }
+  e[Xe] || (e[Xe] = $e);
 }
-function St(e, t) {
+function Zt(e, t) {
   if (!t.render)
     throw new Error(
       "Component must have a render function"
@@ -2138,7 +2574,7 @@ function St(e, t) {
     _templateLoading = !1;
     _templateError = null;
     constructor() {
-      super(), this.attachShadow({ mode: "open" }), this._cfg = be.get(e) || t, this._componentId = `${e}-${Math.random().toString(36).substr(2, 9)}`;
+      super(), this.attachShadow({ mode: "open" }), this._cfg = $e.get(e) || t, this._componentId = `${e}-${Math.random().toString(36).substr(2, 9)}`;
       const r = this._initContext(t);
       Object.defineProperty(r, "refs", {
         value: this._refs,
@@ -2155,14 +2591,19 @@ function St(e, t) {
         writable: !1,
         enumerable: !1,
         configurable: !1
+      }), Object.defineProperty(r, "_componentId", {
+        value: this._componentId,
+        writable: !1,
+        enumerable: !1,
+        configurable: !1
       }), Object.defineProperty(r, "_triggerWatchers", {
-        value: (n, s) => this._triggerWatchers(n, s),
+        value: (i, s) => this._triggerWatchers(i, s),
         writable: !1,
         enumerable: !1,
         configurable: !1
       }), this.context = r, Object.defineProperty(this.context, "emit", {
-        value: (n, s, o) => {
-          const a = new CustomEvent(n, {
+        value: (i, s, o) => {
+          const a = new CustomEvent(i, {
             detail: s,
             bubbles: !0,
             composed: !0,
@@ -2174,28 +2615,28 @@ function St(e, t) {
         enumerable: !1,
         configurable: !1
       });
-      const i = be.get(e) || t;
-      Object.keys(i).forEach((n) => {
-        const s = i[n];
-        typeof s == "function" && (this.context[n] = (...o) => s(...o, this.context));
-      }), this._applyComputed(i), i.props && Object.keys(i.props).forEach((n) => {
-        let s = this[n];
-        Object.defineProperty(this, n, {
+      const n = $e.get(e) || t;
+      Object.keys(n).forEach((i) => {
+        const s = n[i];
+        typeof s == "function" && (this.context[i] = (...o) => s(...o, this.context));
+      }), this._applyComputed(n), n.props && Object.keys(n.props).forEach((i) => {
+        let s = this[i];
+        Object.defineProperty(this, i, {
           get() {
             return s;
           },
           set(o) {
             const a = s;
-            s = o, this.context[n] = o, this._initializing || (this._applyProps(i), a !== o && this._requestRender());
+            s = o, this.context[i] = o, this._initializing || (this._applyProps(n), a !== o && this._requestRender());
           },
           enumerable: !0,
           configurable: !0
         });
-      }), this._initializing = !1, this._initWatchers(i), this._render(i);
+      }), this._initializing = !1, this._initWatchers(n), this._applyProps(n), this._render(n);
     }
     connectedCallback() {
       this._runLogicWithinErrorBoundary(t, () => {
-        this._applyProps(t), Qe(
+        this._applyProps(t), this._requestRender(), bt(
           t,
           this.context,
           this._mounted,
@@ -2207,7 +2648,7 @@ function St(e, t) {
     }
     disconnectedCallback() {
       this._runLogicWithinErrorBoundary(t, () => {
-        Xe(
+        wt(
           t,
           this.context,
           this._listeners,
@@ -2229,51 +2670,40 @@ function St(e, t) {
         );
       });
     }
-    attributeChangedCallback(r, i, n) {
+    attributeChangedCallback(r, n, i) {
       this._runLogicWithinErrorBoundary(t, () => {
-        this._applyProps(t), et(
+        this._applyProps(t), n !== i && this._requestRender(), vt(
           t,
           r,
-          i,
           n,
+          i,
           this.context
         );
       });
     }
     static get observedAttributes() {
-      return t.props ? Object.keys(t.props).map(Q) : [];
+      return t.props ? Object.keys(t.props).map(te) : [];
     }
     _applyComputed(r) {
-      this._runLogicWithinErrorBoundary(t, () => {
-        r.computed && Object.entries(r.computed).forEach(([i, n]) => {
-          Object.defineProperty(this.context, i, {
-            get: () => {
-              const s = n(this.context);
-              return Z(s);
-            },
-            enumerable: !0
-          });
-        });
-      });
     }
     // --- Render ---
     _render(r) {
       this._runLogicWithinErrorBoundary(r, () => {
-        vt(
+        qt(
           this.shadowRoot,
           r,
           this.context,
           this._refs,
-          (i) => {
-            this._lastHtmlStringForJitCSS = i, typeof this.onHtmlStringUpdate == "function" && this.onHtmlStringUpdate(i);
+          (n) => {
+            this._lastHtmlStringForJitCSS = n, typeof this.onHtmlStringUpdate == "function" && this.onHtmlStringUpdate(n);
           },
-          (i) => {
-            this._templateLoading = i, typeof this.onLoadingStateChange == "function" && this.onLoadingStateChange(i);
+          (n) => {
+            this._templateLoading = n, typeof this.onLoadingStateChange == "function" && this.onLoadingStateChange(n);
           },
-          (i) => {
-            this._templateError = i, typeof this.onErrorStateChange == "function" && this.onErrorStateChange(i);
+          (n) => {
+            this._templateError = n, typeof this.onErrorStateChange == "function" && this.onErrorStateChange(n);
           },
-          (i) => this._applyStyle(r, i)
+          (n) => this._applyStyle(r, n)
         );
       });
     }
@@ -2282,8 +2712,8 @@ function St(e, t) {
     }
     _requestRender() {
       this._runLogicWithinErrorBoundary(this._cfg, () => {
-        oe(() => {
-          kt(
+        le(() => {
+          Ft(
             () => this._render(this._cfg),
             this._lastRenderTime,
             this._renderCount,
@@ -2302,40 +2732,36 @@ function St(e, t) {
       });
     }
     // --- Style ---
-    _applyStyle(r, i) {
+    _applyStyle(r, n) {
       this._runLogicWithinErrorBoundary(r, () => {
-        _t(
+        Kt(
           this.shadowRoot,
-          r,
           this.context,
-          i,
+          n,
           this._styleSheet,
-          (n) => {
-            this._styleSheet = n;
+          (i) => {
+            this._styleSheet = i;
           }
         );
       });
     }
     // --- Error Boundary function ---
-    _runLogicWithinErrorBoundary(r, i) {
+    _runLogicWithinErrorBoundary(r, n) {
       this._hasError && (this._hasError = !1);
       try {
-        i();
-      } catch (n) {
-        this._hasError = !0, r.onError && r.onError(n, this.context), r.errorFallback && this.shadowRoot && (this.shadowRoot.innerHTML = r.errorFallback(
-          n,
-          this.context
-        ));
+        n();
+      } catch (i) {
+        this._hasError = !0, r.onError && r.onError(i, this.context);
       }
     }
     // --- State, props, computed ---
     _initContext(r) {
       try {
-        let i = function(s, o = "") {
+        let n = function(s, o = "") {
           return Array.isArray(s) ? new Proxy(s, {
-            get(a, c, u) {
-              const m = Reflect.get(a, c, u);
-              return typeof m == "function" && typeof c == "string" && [
+            get(a, u, m) {
+              const g = Reflect.get(a, u, m);
+              return typeof g == "function" && typeof u == "string" && [
                 "push",
                 "pop",
                 "shift",
@@ -2343,177 +2769,303 @@ function St(e, t) {
                 "splice",
                 "sort",
                 "reverse"
-              ].includes(c) ? function(...p) {
-                const l = m.apply(a, p);
-                if (!n._initializing) {
-                  const w = o || "root";
-                  n._triggerWatchers(w, a), oe(() => n._render(r), n._componentId);
+              ].includes(u) ? function(...h) {
+                const l = g.apply(a, h);
+                if (!i._initializing) {
+                  const d = o || "root";
+                  i._triggerWatchers(d, a), le(() => i._render(r), i._componentId);
                 }
                 return l;
-              } : m;
+              } : g;
             },
-            set(a, c, u) {
-              if (a[c] = u, !n._initializing) {
-                const m = o ? `${o}.${String(c)}` : String(c);
-                n._triggerWatchers(m, u), oe(() => n._render(r), n._componentId);
+            set(a, u, m) {
+              if (a[u] = m, !i._initializing) {
+                const g = o ? `${o}.${String(u)}` : String(u);
+                i._triggerWatchers(g, m), le(() => i._render(r), i._componentId);
               }
               return !0;
             },
-            deleteProperty(a, c) {
-              if (delete a[c], !n._initializing) {
-                const u = o ? `${o}.${String(c)}` : String(c);
-                n._triggerWatchers(u, void 0), oe(() => n._render(r), n._componentId);
+            deleteProperty(a, u) {
+              if (delete a[u], !i._initializing) {
+                const m = o ? `${o}.${String(u)}` : String(u);
+                i._triggerWatchers(m, void 0), le(() => i._render(r), i._componentId);
               }
               return !0;
             }
-          }) : s && typeof s == "object" ? (Object.keys(s).forEach((a) => {
-            const c = o ? `${o}.${a}` : a;
-            s[a] = i(s[a], c);
+          }) : s && typeof s == "object" ? s.constructor && s.constructor.name === "ReactiveState" ? s : (Object.keys(s).forEach((a) => {
+            const u = o ? `${o}.${a}` : a;
+            s[a] = n(s[a], u);
           }), new Proxy(s, {
-            set(a, c, u) {
-              const m = o ? `${o}.${String(c)}` : String(c);
-              return a[c] = i(u, m), n._initializing || (n._triggerWatchers(
-                m,
-                a[c]
-              ), oe(() => n._render(r), n._componentId)), !0;
+            set(a, u, m) {
+              const g = o ? `${o}.${String(u)}` : String(u);
+              return a[u] = n(m, g), i._initializing || (i._triggerWatchers(
+                g,
+                a[u]
+              ), le(() => i._render(r), i._componentId)), !0;
             },
-            get(a, c, u) {
-              return Reflect.get(a, c, u);
+            get(a, u, m) {
+              return Reflect.get(a, u, m);
             }
           })) : s;
         };
-        const n = this;
-        return i({ ...r.state });
+        const i = this;
+        return n({
+          // For functional components, state is managed by state() function calls
+          // Include prop defaults in initial reactive context so prop updates trigger reactivity
+          ...r.props ? Object.fromEntries(
+            Object.entries(r.props).map(([s, o]) => [s, o.default])
+          ) : {}
+        });
       } catch {
         return {};
       }
     }
     _initWatchers(r) {
       this._runLogicWithinErrorBoundary(r, () => {
-        Ge(
+        ht(
           this.context,
           this._watchers,
-          r.watch || {}
+          {}
+          // Watchers are now handled by the watch() function in functional API
         );
       });
     }
-    _triggerWatchers(r, i) {
-      Ze(this.context, this._watchers, r, i);
+    _triggerWatchers(r, n) {
+      gt(this.context, this._watchers, r, n);
     }
     _applyProps(r) {
       this._runLogicWithinErrorBoundary(r, () => {
         try {
-          Ye(this, r, this.context);
-        } catch (i) {
-          this._hasError = !0, r.onError && r.onError(i, this.context), r.errorFallback && this.shadowRoot && (this.shadowRoot.innerHTML = r.errorFallback(i, this.context));
+          yt(this, r, this.context);
+        } catch (n) {
+          this._hasError = !0, r.onError && r.onError(n, this.context);
+        }
+      });
+    }
+  };
+}
+function Ye(e, t) {
+  let r = te(e);
+  r.includes("-") || (r = `cer-${r}`);
+  let n = {};
+  if (typeof window < "u")
+    try {
+      const a = t.toString().match(/\(\s*{\s*([^}]+)\s*}/);
+      if (a) {
+        const m = a[1].split(",").map((g) => g.trim());
+        for (const g of m) {
+          const w = g.indexOf("=");
+          if (w !== -1) {
+            const h = g.substring(0, w).trim(), l = g.substring(w + 1).trim();
+            try {
+              l === "true" ? n[h] = !0 : l === "false" ? n[h] = !1 : l === "[]" ? n[h] = [] : l === "{}" ? n[h] = {} : /^\d+$/.test(l) ? n[h] = parseInt(l) : /^'.*'$/.test(l) || /^".*"$/.test(l) ? n[h] = l.slice(1, -1) : n[h] = l;
+            } catch {
+              n[h] = "";
+            }
+          } else {
+            const h = g.split(":")[0].trim();
+            h && !h.includes("}") && (n[h] = "");
+          }
         }
+      }
+    } catch {
+    }
+  let i = {};
+  const s = {
+    // Generate props config from defaults
+    props: Object.fromEntries(
+      Object.entries(n).map(([o, a]) => [o, { type: typeof a == "boolean" ? Boolean : typeof a == "number" ? Number : typeof a == "string" ? String : Function, default: a }])
+    ),
+    // Add lifecycle hooks from the stored functions
+    onConnected: (o) => {
+      i.onConnected && i.onConnected();
+    },
+    onDisconnected: (o) => {
+      i.onDisconnected && i.onDisconnected();
+    },
+    onAttributeChanged: (o, a, u, m) => {
+      i.onAttributeChanged && i.onAttributeChanged(o, a, u);
+    },
+    onError: (o, a) => {
+      i.onError && o && i.onError(o);
+    },
+    render: (o) => {
+      const a = o._componentId || `${r}-${Math.random().toString(36).substr(2, 9)}`;
+      F.setCurrentComponent(a, () => {
+        o.requestRender && o.requestRender();
       });
+      try {
+        Vt(o);
+        const u = Object.keys(n).length > 0;
+        let m;
+        if (u) {
+          const g = {};
+          Object.keys(n).forEach((w) => {
+            g[w] = o[w] ?? n[w];
+          }), m = t(g);
+        } else
+          m = t();
+        if (o._hookCallbacks) {
+          const g = o._hookCallbacks;
+          g.onConnected && (i.onConnected = g.onConnected), g.onDisconnected && (i.onDisconnected = g.onDisconnected), g.onAttributeChanged && (i.onAttributeChanged = g.onAttributeChanged), g.onError && (i.onError = g.onError), g.style && (o._styleCallback = g.style);
+        }
+        return m;
+      } finally {
+        Jt(), F.clearCurrentComponent();
+      }
     }
   };
+  $e.set(r, s), typeof window < "u" && (customElements.get(r) || customElements.define(r, Zt(r, s)));
+}
+class Gt {
+  map = /* @__PURE__ */ new Map();
+  maxSize;
+  constructor(t) {
+    this.maxSize = t;
+  }
+  get(t) {
+    const r = this.map.get(t);
+    if (r !== void 0)
+      return this.map.delete(t), this.map.set(t, r), r;
+  }
+  set(t, r) {
+    if (this.map.has(t) && this.map.delete(t), this.map.set(t, r), this.map.size > this.maxSize) {
+      const n = this.map.keys().next().value;
+      n !== void 0 && this.map.delete(n);
+    }
+  }
+  has(t) {
+    return this.map.has(t);
+  }
+  clear() {
+    this.map.clear();
+  }
 }
-function ae(e, t = {}, r, i) {
-  const n = i ?? t.key;
-  return { tag: e, key: n, props: t, children: r };
+const We = new Gt(500);
+function Xt(e, t) {
+  if (e == null) {
+    console.warn(
+      `⚠️ Event handler for '@${t}' is ${e}. This will prevent the event from working. Use a function reference instead: @${t}="\${functionName}"`
+    );
+    return;
+  }
+  typeof e != "function" && console.warn(
+    `🚨 Potential infinite loop detected! Event handler for '@${t}' appears to be the result of a function call (${typeof e}) instead of a function reference. Change @${t}="\${functionName()}" to @${t}="\${functionName}" to pass the function reference instead of calling it immediately.`
+  ), e === void 0 && typeof e != "function" && console.warn(
+    `💡 Tip: If your event handler function returns undefined, make sure you're passing the function reference, not calling it. Use @${t}="\${fn}" not @${t}="\${fn()}"`
+  );
+}
+function fe(e, t = {}, r, n) {
+  const i = n ?? t.key;
+  return { tag: e, key: i, props: t, children: r };
 }
-function ye(e) {
+function Se(e) {
   return !!e && typeof e == "object" && (e.type === "AnchorBlock" || e.tag === "#anchor");
 }
-function de(e) {
-  return typeof e == "object" && e !== null && "tag" in e && !ye(e);
+function ke(e) {
+  return typeof e == "object" && e !== null && "tag" in e && !Se(e);
 }
-function Ct(e, t) {
+function Yt(e, t) {
   return e.key != null ? e : { ...e, key: t };
 }
-function At(e, t = [], r = {}) {
-  const i = {}, n = {}, s = {}, o = [], a = /([:@#]?)([a-zA-Z0-9-:\.]+)=("([^"\\]*(\\.[^"\\]*)*)"|'([^'\\]*(\\.[^'\\]*)*)')/g;
-  let c;
-  for (; c = a.exec(e); ) {
-    const u = c[1], m = c[2], T = (c[4] || c[6]) ?? "", p = T.match(/^{{(\d+)}}$/);
-    let l = p ? t[Number(p[1])] ?? null : T;
-    p || (l === "true" ? l = !0 : l === "false" ? l = !1 : l === "null" ? l = null : isNaN(Number(l)) || (l = Number(l)));
-    const w = ["model", "bind", "show", "class", "style"];
-    if (u === ":") {
-      const [v, d] = m.split(":"), [g, ...y] = v.split(".");
-      if (w.includes(g)) {
-        const x = [...y], f = g === "model" && d ? `model:${d}` : g;
-        s[f] = {
+function Qt(e, t = [], r = {}) {
+  const n = {}, i = {}, s = {}, o = [], a = /([:@#]?)([a-zA-Z0-9-:\.]+)=("([^"\\]*(\\.[^"\\]*)*)"|'([^'\\]*(\\.[^'\\]*)*)')/g;
+  let u;
+  for (; u = a.exec(e); ) {
+    const m = u[1], g = u[2], w = (u[4] || u[6]) ?? "", h = w.match(/^{{(\d+)}}$/);
+    let l = h ? t[Number(h[1])] ?? null : w;
+    h || (l === "true" ? l = !0 : l === "false" ? l = !1 : l === "null" ? l = null : isNaN(Number(l)) || (l = Number(l)));
+    const d = ["model", "bind", "show", "class", "style", "ref"];
+    if (m === ":") {
+      const [v, b] = g.split(":"), [c, ...p] = v.split(".");
+      if (d.includes(c)) {
+        const y = [...p], C = c === "model" && b ? `model:${b}` : c;
+        s[C] = {
           value: l,
-          modifiers: x,
-          arg: d
+          modifiers: y,
+          arg: b
         };
-      } else
-        n[m] = l, o.push(m);
-    } else if (u === "@") {
-      const [v, ...d] = m.split("."), g = d, y = typeof l == "function" ? l : typeof r[l] == "function" ? r[l] : void 0;
-      if (y) {
-        const x = (b) => {
-          if (g.includes("prevent") && b.preventDefault(), g.includes("stop") && b.stopPropagation(), !(g.includes("self") && b.target !== b.currentTarget))
-            return g.includes("once") && b.currentTarget?.removeEventListener(v, x), y(b);
-        }, f = "on" + v.charAt(0).toUpperCase() + v.slice(1);
-        i[f] = x;
+      } else {
+        let y = l;
+        y && typeof y == "object" && y.constructor?.name === "ReactiveState" && (y = y.value), i[g] = y, o.push(g);
       }
-    } else m === "ref" ? i.ref = l : n[m] = l;
+    } else if (m === "@") {
+      const [v, ...b] = g.split("."), c = b;
+      Xt(l, v);
+      const p = typeof l == "function" ? l : typeof r[l] == "function" ? r[l] : void 0;
+      if (p) {
+        const y = (k) => {
+          if (c.includes("prevent") && k.preventDefault(), c.includes("stop") && k.stopPropagation(), !(c.includes("self") && k.target !== k.currentTarget))
+            return c.includes("once") && k.currentTarget?.removeEventListener(v, y), p(k);
+        }, C = "on" + v.charAt(0).toUpperCase() + v.slice(1);
+        n[C] = y;
+      }
+    } else g === "ref" ? n.ref = l : i[g] = l;
   }
-  return { props: i, attrs: n, directives: s, bound: o };
+  return { props: n, attrs: i, directives: s, bound: o };
 }
-function Tt(e, t, r) {
-  const i = ce.length > 0 ? ce[ce.length - 1] : void 0, n = r ?? i;
-  function s(f, b) {
-    return ae("#text", {}, f, b);
+function er(e, t, r) {
+  const n = pe.length > 0 ? pe[pe.length - 1] : void 0, i = r ?? n, s = !r && t.length === 0, o = s ? e.join("<!--TEMPLATE_DELIM-->") : null;
+  if (s && o) {
+    const f = We.get(o);
+    if (f) return f;
   }
-  let o = "";
+  function a(f, x) {
+    return fe("#text", {}, f, x);
+  }
+  let u = "";
   for (let f = 0; f < e.length; f++)
-    o += e[f], f < t.length && (o += `{{${f}}}`);
-  const a = /<!--[\s\S]*?-->|<\/?([a-zA-Z0-9-]+)((?:\s+[^\s=>/]+(?:\s*=\s*(?:"(?:\\.|[^"])*"|'(?:\\.|[^'])*'|[^\s>]+))?)*)\s*\/?>|{{(\d+)}}|([^<]+)/g, c = [];
-  let u, m = [], T = null, p = {}, l, w = 0, v = [];
-  function d(f) {
-    !f || typeof f != "object" || ye(f) || (f.props || f.attrs ? (f.props && (p.props || (p.props = {}), Object.assign(p.props, f.props)), f.attrs && (p.attrs || (p.attrs = {}), Object.keys(f.attrs).forEach((b) => {
-      if (b === "style" && p.attrs.style) {
-        const h = p.attrs.style.replace(
+    u += e[f], f < t.length && (u += `{{${f}}}`);
+  const m = /<!--[\s\S]*?-->|<\/?([a-zA-Z0-9-]+)((?:\s+[^\s=>/]+(?:\s*=\s*(?:"(?:\\.|[^"])*"|'(?:\\.|[^'])*'|[^\s>]+))?)*)\s*\/?>|{{(\d+)}}|([^<]+)/g, g = [];
+  let w, h = [], l = null, d = {}, v, b = 0, c = [];
+  function p(f) {
+    !f || typeof f != "object" || Se(f) || (f.props || f.attrs ? (f.props && (d.props || (d.props = {}), Object.assign(d.props, f.props)), f.attrs && (d.attrs || (d.attrs = {}), Object.keys(f.attrs).forEach((x) => {
+      if (x === "style" && d.attrs.style) {
+        const A = d.attrs.style.replace(
           /;?\s*$/,
           ""
         ), _ = f.attrs.style.replace(/^;?\s*/, "");
-        p.attrs.style = h + "; " + _;
-      } else if (b === "class" && p.attrs.class) {
-        const h = p.attrs.class.trim().split(/\s+/).filter(Boolean), _ = f.attrs.class.trim().split(/\s+/).filter(Boolean), $ = [
-          .../* @__PURE__ */ new Set([...h, ..._])
+        d.attrs.style = A + "; " + _;
+      } else if (x === "class" && d.attrs.class) {
+        const A = d.attrs.class.trim().split(/\s+/).filter(Boolean), _ = f.attrs.class.trim().split(/\s+/).filter(Boolean), S = [
+          .../* @__PURE__ */ new Set([...A, ..._])
         ];
-        p.attrs.class = $.join(" ");
+        d.attrs.class = S.join(" ");
       } else
-        p.attrs[b] = f.attrs[b];
-    }))) : (p.props || (p.props = {}), Object.assign(p.props, f)));
-  }
-  function g(f, b) {
-    const h = T ? m : v;
-    if (ye(f)) {
-      const _ = f.key ?? b;
-      let $ = f.children;
-      h.push({
+        d.attrs[x] = f.attrs[x];
+    }))) : (d.props || (d.props = {}), Object.assign(d.props, f)));
+  }
+  function y(f, x) {
+    const A = l ? h : c;
+    if (Se(f)) {
+      const _ = f.key ?? x;
+      let S = f.children;
+      A.push({
         ...f,
         key: _,
-        children: $
+        children: S
       });
       return;
     }
-    if (de(f)) {
-      h.push(Ct(f, void 0));
+    if (ke(f)) {
+      A.push(Yt(f, void 0));
       return;
     }
     if (Array.isArray(f)) {
       if (f.length === 0) return;
       for (let _ = 0; _ < f.length; _++) {
-        const $ = f[_];
-        ye($) || de($) || Array.isArray($) ? g($, `${b}-${_}`) : $ !== null && typeof $ == "object" ? d($) : h.push(s(String($), `${b}-${_}`));
+        const S = f[_];
+        Se(S) || ke(S) || Array.isArray(S) ? y(S, `${x}-${_}`) : S !== null && typeof S == "object" ? p(S) : A.push(a(String(S), `${x}-${_}`));
       }
       return;
     }
     if (f !== null && typeof f == "object") {
-      d(f);
+      p(f);
       return;
     }
-    h.push(s(String(f), b));
+    A.push(a(String(f), x));
   }
-  const y = /* @__PURE__ */ new Set([
+  const C = /* @__PURE__ */ new Set([
     "area",
     "base",
     "br",
@@ -2529,24 +3081,24 @@ function Tt(e, t, r) {
     "track",
     "wbr"
   ]);
-  for (; u = a.exec(o); )
-    if (!(u[0].startsWith("<!--") && u[0].endsWith("-->"))) {
-      if (u[1]) {
-        const f = u[1], b = u[0][1] === "/", h = u[0][u[0].length - 2] === "/" || y.has(f), {
+  for (; w = m.exec(u); )
+    if (!(w[0].startsWith("<!--") && w[0].endsWith("-->"))) {
+      if (w[1]) {
+        const f = w[1], x = w[0][1] === "/", A = w[0][w[0].length - 2] === "/" || C.has(f), {
           props: _,
-          attrs: $,
-          directives: S,
-          bound: E
-        } = At(u[2] || "", t, n), C = { props: {}, attrs: {} };
-        for (const A in _) C.props[A] = _[A];
-        for (const A in $) C.attrs[A] = $[A];
-        if (C.attrs && Object.prototype.hasOwnProperty.call(C.attrs, "key") && !(C.props && Object.prototype.hasOwnProperty.call(C.props, "key")))
+          attrs: S,
+          directives: R,
+          bound: T
+        } = Qt(w[2] || "", t, i), $ = { props: {}, attrs: {} };
+        for (const P in _) $.props[P] = _[P];
+        for (const P in S) $.attrs[P] = S[P];
+        if ($.attrs && Object.prototype.hasOwnProperty.call($.attrs, "key") && !($.props && Object.prototype.hasOwnProperty.call($.props, "key")))
           try {
-            C.props.key = C.attrs.key;
+            $.props.key = $.attrs.key;
           } catch {
           }
         try {
-          const A = {
+          const P = {
             input: ["value", "checked", "disabled", "readonly", "required", "placeholder", "maxlength", "minlength"],
             textarea: ["value", "disabled", "readonly", "required", "placeholder", "maxlength", "minlength"],
             select: ["value", "disabled", "required", "multiple"],
@@ -2555,370 +3107,671 @@ function Tt(e, t, r) {
             audio: ["muted", "autoplay", "controls", "loop"],
             img: ["src", "alt", "width", "height"],
             button: ["type", "name", "value", "disabled", "autofocus", "form"]
-          }, P = f.toLowerCase(), X = A[P] ?? [];
-          if (C.attrs)
-            for (const M of X)
-              E && E.includes(M) && M in C.attrs && !(C.props && M in C.props) && (C.props[M] = C.attrs[M], delete C.attrs[M]);
-          if ((f.includes("-") || !!n?.__customElements?.has?.(f)) && E && C.attrs) {
-            const M = /* @__PURE__ */ new Set(["id", "name", "data-key", "key"]);
-            for (const F of E)
-              if (F in C.attrs && !(C.props && F in C.props)) {
-                const H = F.includes("-") ? F.split("-").map((N, I) => I === 0 ? N : N.charAt(0).toUpperCase() + N.slice(1)).join("") : F;
-                C.props[H] = C.attrs[F], M.has(F) || delete C.attrs[F];
+          }, B = f.toLowerCase(), J = P[B] ?? [];
+          if ($.attrs) {
+            for (const K of J)
+              if (T && T.includes(K) && K in $.attrs && !($.props && K in $.props)) {
+                let L = $.attrs[K];
+                L && typeof L == "object" && L.constructor?.name === "ReactiveState" && (L = L.value), $.props[K] = L, delete $.attrs[K];
+              }
+          }
+          if ((f.includes("-") || !!i?.__customElements?.has?.(f)) && ($.isCustomElement = !0, T && $.attrs)) {
+            const K = /* @__PURE__ */ new Set(["id", "name", "data-key", "key"]);
+            for (const L of T)
+              if (L in $.attrs && !($.props && L in $.props)) {
+                const j = L.includes("-") ? L.split("-").map((Z, W) => W === 0 ? Z : Z.charAt(0).toUpperCase() + Z.slice(1)).join("") : L;
+                let V = $.attrs[L];
+                V && typeof V == "object" && V.constructor?.name === "ReactiveState" && (V = V.value), $.props[j] = V, K.has(L) || delete $.attrs[L];
               }
-            C.isCustomElement = !0;
           }
         } catch {
         }
-        if (S && Object.keys(S).some((A) => A === "model" || A.startsWith("model:")))
+        if (R && Object.keys(R).some((P) => P === "model" || P.startsWith("model:")))
           try {
-            const A = Symbol.for("cer.registry"), P = globalThis[A], X = !!(P && typeof P.has == "function" && P.has(f)), ie = !!(n && (n.__customElements instanceof Set && n.__customElements.has(f) || Array.isArray(n.__isCustomElements) && n.__isCustomElements.includes(f)));
-            if (!!(f.includes("-") || ie || X))
-              for (const H of Object.keys(S)) {
-                if (H !== "model" && !H.startsWith("model:")) continue;
-                const N = S[H], I = N.arg ?? (H.includes(":") ? H.split(":", 2)[1] : void 0), z = N.value, J = I ?? "modelValue", se = K, k = he, W = n ? n._state || n : void 0;
-                let R;
-                typeof z == "string" && n ? R = se(W, z) : R = z, C.props[J] = R;
+            const P = Symbol.for("cer.registry"), B = globalThis[P], J = !!(B && typeof B.has == "function" && B.has(f)), ye = !!(i && (i.__customElements instanceof Set && i.__customElements.has(f) || Array.isArray(i.__isCustomElements) && i.__isCustomElements.includes(f)));
+            if (!!(f.includes("-") || ye || J))
+              for (const j of Object.keys(R)) {
+                if (j !== "model" && !j.startsWith("model:")) continue;
+                const V = R[j], Z = V.arg ?? (j.includes(":") ? j.split(":", 2)[1] : void 0), W = V.value, E = Z ?? "modelValue", U = H, D = Ce, z = i ? i._state || i : void 0;
+                let O;
+                typeof W == "string" && i ? O = U(z, W) : (O = W, O && typeof O == "object" && O.constructor?.name === "ReactiveState" && (O = O.value)), $.props[E] = O;
                 try {
-                  const L = Q(J);
-                  C.attrs || (C.attrs = {}), R !== void 0 && (C.attrs[L] = R);
+                  const re = te(E);
+                  $.attrs || ($.attrs = {}), O !== void 0 && ($.attrs[re] = O);
                 } catch {
                 }
-                C.isCustomElement = !0;
-                const B = `update:${Q(J)}`, j = "on" + B.charAt(0).toUpperCase() + B.slice(1);
-                C.props[j] = function(L) {
-                  const fe = L.detail !== void 0 ? L.detail : L.target ? L.target.value : void 0;
-                  if (!W) return;
-                  const ve = se(W, typeof z == "string" ? z : String(z));
-                  (Array.isArray(fe) && Array.isArray(ve) ? JSON.stringify([...fe].sort()) !== JSON.stringify([...ve].sort()) : fe !== ve) && (k(W, typeof z == "string" ? z : String(z), fe), n?.requestRender ? n.requestRender() : n?._requestRender && n._requestRender());
-                }, delete S[H];
+                $.isCustomElement = !0;
+                const Be = `update:${te(E)}`.replace(/-([a-z])/g, (re, Y) => Y.toUpperCase()), ct = "on" + Be.charAt(0).toUpperCase() + Be.slice(1);
+                $.props[ct] = function(re) {
+                  const Y = re.detail !== void 0 ? re.detail : re.target ? re.target.value : void 0;
+                  if (z)
+                    if (W && typeof W == "object" && W.constructor?.name === "ReactiveState") {
+                      const oe = W.value;
+                      (Array.isArray(Y) && Array.isArray(oe) ? JSON.stringify([...Y].sort()) !== JSON.stringify([...oe].sort()) : Y !== oe) && (W.value = Y, i?.requestRender ? i.requestRender() : i?._requestRender && i._requestRender());
+                    } else {
+                      const oe = U(z, typeof W == "string" ? W : String(W));
+                      (Array.isArray(Y) && Array.isArray(oe) ? JSON.stringify([...Y].sort()) !== JSON.stringify([...oe].sort()) : Y !== oe) && (D(z, typeof W == "string" ? W : String(W), Y), i?.requestRender ? i.requestRender() : i?._requestRender && i._requestRender());
+                    }
+                }, delete R[j];
               }
           } catch {
           }
-        if (Object.keys(S).length > 0 && (C.directives = { ...S }), b) {
-          const A = ae(
-            T,
-            p,
-            m.length === 1 && de(m[0]) && m[0].tag === "#text" ? typeof m[0].children == "string" ? m[0].children : "" : m.length ? m : void 0,
-            l
-          ), P = c.pop();
-          P ? (T = P.tag, p = P.props, l = P.key, m = P.children, m.push(A)) : (v.push(A), T = null, p = {}, l = void 0, m = []);
-        } else h ? T ? m.push(ae(f, C, void 0, void 0)) : v.push(ae(f, C, void 0, void 0)) : (T && c.push({
-          tag: T,
-          props: p,
-          children: m,
-          key: l
-        }), T = f, p = C, m = []);
-      } else if (typeof u[3] < "u") {
-        const f = Number(u[3]), b = t[f], h = `interp-${f}`;
-        g(b, h);
-      } else if (u[4]) {
-        const f = u[4], b = T ? m : v, h = f.split(/({{\d+}})/);
-        for (const _ of h) {
+        if (Object.keys(R).length > 0 && ($.directives = { ...R }), x) {
+          const P = fe(
+            l,
+            d,
+            h.length === 1 && ke(h[0]) && h[0].tag === "#text" ? typeof h[0].children == "string" ? h[0].children : "" : h.length ? h : void 0,
+            v
+          ), B = g.pop();
+          B ? (l = B.tag, d = B.props, v = B.key, h = B.children, h.push(P)) : (c.push(P), l = null, d = {}, v = void 0, h = []);
+        } else A ? l ? h.push(fe(f, $, void 0, void 0)) : c.push(fe(f, $, void 0, void 0)) : (l && g.push({
+          tag: l,
+          props: d,
+          children: h,
+          key: v
+        }), l = f, d = $, h = []);
+      } else if (typeof w[3] < "u") {
+        const f = Number(w[3]), x = t[f], A = `interp-${f}`;
+        y(x, A);
+      } else if (w[4]) {
+        const f = w[4], x = l ? h : c, A = f.split(/({{\d+}})/);
+        for (const _ of A) {
           if (!_) continue;
-          const $ = _.match(/^{{(\d+)}}$/);
-          if ($) {
-            const S = Number($[1]), E = t[S], C = `interp-${S}`;
-            g(E, C);
+          const S = _.match(/^{{(\d+)}}$/);
+          if (S) {
+            const R = Number(S[1]), T = t[R], $ = `interp-${R}`;
+            y(T, $);
           } else {
-            const S = `text-${w++}`;
-            b.push(s(_, S));
+            const R = `text-${b++}`;
+            x.push(a(_, R));
           }
         }
       }
     }
-  const x = v.filter((f) => de(f) && f.tag === "#text" ? typeof f.children == "string" && f.children.trim() !== "" : !0);
-  return x.length === 1 ? x[0] : x.length > 1 ? x : ae("div", {}, "", "fallback-root");
+  const k = c.filter((f) => ke(f) && f.tag === "#text" ? typeof f.children == "string" && f.children.trim() !== "" : !0);
+  if (k.length === 1) {
+    const f = k[0];
+    return s && o && We.set(o, f), f;
+  } else if (k.length > 1) {
+    const f = k;
+    return s && o && We.set(o, f), f;
+  }
+  return fe("div", {}, "", "fallback-root");
+}
+function ae(e, ...t) {
+  const r = t[t.length - 1], n = typeof r == "object" && r && !Array.isArray(r) ? r : void 0;
+  return er(e, t, n);
+}
+function Ae(e, t) {
+  return M(e ? t : [], "when-block");
+}
+function gr(e, t) {
+  return e.map((r, n) => {
+    const i = typeof r == "object" ? r?.key ?? r?.id ?? `idx-${n}` : String(r);
+    return M(t(r, n), `each-${i}`);
+  });
+}
+function tr() {
+  const e = [];
+  return {
+    when(t, r) {
+      return e.push([t, r]), this;
+    },
+    otherwise(t) {
+      return e.push([!0, t]), this;
+    },
+    done() {
+      return rr(...e);
+    }
+  };
+}
+function rr(...e) {
+  for (let t = 0; t < e.length; t++) {
+    const [r, n] = e[t];
+    if (r) return [M(n, `whenChain-branch-${t}`)];
+  }
+  return [M([], "whenChain-empty")];
+}
+function M(e, t) {
+  const r = e ? Array.isArray(e) ? e.filter(Boolean) : [e].filter(Boolean) : [];
+  return {
+    tag: "#anchor",
+    key: t,
+    children: r
+  };
+}
+function mr(e, t) {
+  return Ae(!e, t);
+}
+function yr(e, t) {
+  const r = !e || e.length === 0;
+  return Ae(r, t);
+}
+function br(e, t) {
+  const r = !!(e && e.length > 0);
+  return Ae(r, t);
+}
+function wr(e, t, r) {
+  const n = [];
+  return e.forEach((i, s) => {
+    t(i, s) && n.push({ item: i, originalIndex: s });
+  }), n.map(({ item: i, originalIndex: s }, o) => {
+    const a = typeof i == "object" && i != null ? i?.key ?? i?.id ?? `filtered-${s}` : `filtered-${s}`;
+    return M(r(i, s, o), `each-where-${a}`);
+  });
+}
+function vr(e, t) {
+  const r = e?.length ?? 0;
+  return r === 0 && t.empty ? M(t.empty, "switch-length-empty") : r === 1 && t.one ? M(t.one(e[0]), "switch-length-one") : t.exactly?.[r] ? M(t.exactly[r](e), `switch-length-${r}`) : r > 1 && t.many ? M(t.many(e), "switch-length-many") : M([], "switch-length-fallback");
+}
+function xr(e, t, r) {
+  const n = /* @__PURE__ */ new Map();
+  return e.forEach((i) => {
+    const s = t(i);
+    n.has(s) || n.set(s, []), n.get(s).push(i);
+  }), Array.from(n.entries()).map(([i, s], o) => M(
+    r(i, s, o),
+    `each-group-${i}`
+  ));
+}
+function kr(e, t, r, n) {
+  const i = r * t, s = Math.min(i + t, e.length);
+  return e.slice(i, s).map((a, u) => {
+    const m = i + u, g = typeof a == "object" && a != null ? a?.key ?? a?.id ?? `page-${m}` : `page-${m}`;
+    return M(n(a, m, u), `each-page-${g}`);
+  });
+}
+function Cr(e, t) {
+  return e.loading && t.loading ? M(t.loading, "promise-loading") : e.error && t.error ? M(t.error(e.error), "promise-error") : e.data !== void 0 && t.success ? M(t.success(e.data), "promise-success") : t.idle ? M(t.idle, "promise-idle") : M([], "promise-fallback");
+}
+function q(e, t) {
+  const r = typeof window < "u" && window.matchMedia?.(e)?.matches;
+  return Ae(!!r, t);
+}
+const ee = {
+  // Responsive breakpoints (matching style.ts)
+  sm: "(min-width:640px)",
+  md: "(min-width:768px)",
+  lg: "(min-width:1024px)",
+  xl: "(min-width:1280px)",
+  "2xl": "(min-width:1536px)",
+  // Dark mode (matching style.ts)
+  dark: "(prefers-color-scheme: dark)"
+}, at = ["sm", "md", "lg", "xl", "2xl"], nr = {
+  // Breakpoint-based rendering (matching style.ts exactly)
+  sm: (e) => q(ee.sm, e),
+  md: (e) => q(ee.md, e),
+  lg: (e) => q(ee.lg, e),
+  xl: (e) => q(ee.xl, e),
+  "2xl": (e) => q(ee["2xl"], e),
+  // Dark mode (matching style.ts)
+  dark: (e) => q(ee.dark, e),
+  light: (e) => q("(prefers-color-scheme: light)", e),
+  // Accessibility and interaction preferences
+  touch: (e) => q("(hover: none) and (pointer: coarse)", e),
+  mouse: (e) => q("(hover: hover) and (pointer: fine)", e),
+  reducedMotion: (e) => q("(prefers-reduced-motion: reduce)", e),
+  highContrast: (e) => q("(prefers-contrast: high)", e),
+  // Orientation
+  portrait: (e) => q("(orientation: portrait)", e),
+  landscape: (e) => q("(orientation: landscape)", e)
+};
+function _r(e, t) {
+  const r = [];
+  e.includes("dark") ? r.push(ee.dark) : e.includes("light") && r.push("(prefers-color-scheme: light)");
+  const n = e.filter(
+    (o) => at.includes(o)
+  ), i = n[n.length - 1];
+  i && i in ee && r.push(ee[i]);
+  const s = r.length > 0 ? r.join(" and ") : "all";
+  return q(s, t);
+}
+function Er(e) {
+  const t = [];
+  return e.base && t.push(M(e.base, "responsive-base")), at.forEach((r) => {
+    const n = e[r];
+    n && t.push(nr[r](n));
+  }), t;
+}
+function Sr(e) {
+  const t = [];
+  let r = null;
+  return {
+    case(n, i) {
+      const s = typeof n == "function" ? n : (o) => o === n;
+      return t.push({ condition: s, content: i }), this;
+    },
+    when(n, i) {
+      return t.push({ condition: n, content: i }), this;
+    },
+    otherwise(n) {
+      return r = n, this;
+    },
+    done() {
+      for (let n = 0; n < t.length; n++) {
+        const { condition: i, content: s } = t[n];
+        if (i(e))
+          return M(s, `switch-case-${n}`);
+      }
+      return M(r || [], "switch-otherwise");
+    }
+  };
+}
+class ue extends EventTarget {
+  handlers = {};
+  static instance;
+  eventCounters = /* @__PURE__ */ new Map();
+  /**
+   * Returns the singleton instance of GlobalEventBus
+   */
+  static getInstance() {
+    return ue.instance || (ue.instance = new ue()), ue.instance;
+  }
+  /**
+   * Emit a global event with optional data. Includes event storm protection.
+   * @param eventName - Name of the event
+   * @param data - Optional event payload
+   */
+  emit(t, r) {
+    const n = Date.now(), i = this.eventCounters.get(t);
+    if (!i || n - i.window > 1e3)
+      this.eventCounters.set(t, { count: 1, window: n });
+    else if (i.count++, i.count > 50 && i.count > 100)
+      return;
+    this.dispatchEvent(new CustomEvent(t, {
+      detail: r,
+      bubbles: !1,
+      // Global events don't need to bubble
+      cancelable: !0
+    }));
+    const s = this.handlers[t];
+    s && s.forEach((o) => {
+      try {
+        o(r);
+      } catch (a) {
+        ie(`Error in global event handler for "${t}":`, a);
+      }
+    });
+  }
+  /**
+   * Register a handler for a global event. Returns an unsubscribe function.
+   * @param eventName - Name of the event
+   * @param handler - Handler function
+   */
+  on(t, r) {
+    return this.handlers[t] || (this.handlers[t] = /* @__PURE__ */ new Set()), this.handlers[t].add(r), () => this.off(t, r);
+  }
+  /**
+   * Remove a specific handler for a global event.
+   * @param eventName - Name of the event
+   * @param handler - Handler function to remove
+   */
+  off(t, r) {
+    const n = this.handlers[t];
+    n && n.delete(r);
+  }
+  /**
+   * 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, r, n) {
+    return this.addEventListener(t, r, n), () => this.removeEventListener(t, r);
+  }
+  /**
+   * Register a one-time event handler. Returns a promise that resolves with the event data.
+   * @param eventName - Name of the event
+   * @param handler - Handler function
+   */
+  once(t, r) {
+    return new Promise((n) => {
+      const i = this.on(t, (s) => {
+        i(), r(s), n(s);
+      });
+    });
+  }
+  /**
+   * 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 [r, n] of this.eventCounters.entries())
+      t[r] = {
+        count: n.count,
+        handlersCount: this.getHandlerCount(r)
+      };
+    return t;
+  }
+  /**
+   * Reset event counters (useful for testing or after resolving issues).
+   */
+  resetEventCounters() {
+    this.eventCounters.clear();
+  }
 }
-function ee(e, ...t) {
-  const r = t[t.length - 1], i = typeof r == "object" && r && !Array.isArray(r) ? r : void 0;
-  return Tt(e, t, i);
+const me = ue.getInstance(), $r = (e, t) => me.emit(e, t), Ar = (e, t) => me.on(e, t), Rr = (e, t) => me.off(e, t), Tr = (e, t) => me.once(e, t), Or = (e, t, r) => me.listen(e, t, r);
+function Qe(e) {
+  let t = { ...e };
+  const r = [];
+  function n(a) {
+    r.push(a), a(t);
+  }
+  function i() {
+    return t;
+  }
+  function s(a) {
+    const u = typeof a == "function" ? a(t) : a;
+    t = { ...t, ...u }, o();
+  }
+  function o() {
+    r.forEach((a) => a(t));
+  }
+  return { subscribe: n, getState: i, setState: s };
 }
-const qe = (e) => e ? typeof URLSearchParams > "u" ? {} : Object.fromEntries(new URLSearchParams(e)) : {}, V = (e, t) => {
+const et = (e) => e ? typeof URLSearchParams > "u" ? {} : Object.fromEntries(new URLSearchParams(e)) : {}, Q = (e, t) => {
   for (const r of e) {
-    const i = [], n = r.path.replace(/:[^/]+/g, (a) => (i.push(a.slice(1)), "([^/]+)")), s = new RegExp(`^${n}$`), o = t.match(s);
+    const n = [], i = r.path.replace(/:[^/]+/g, (a) => (n.push(a.slice(1)), "([^/]+)")), s = new RegExp(`^${i}$`), o = t.match(s);
     if (o) {
       const a = {};
-      return i.forEach((c, u) => {
-        a[c] = o[u + 1];
+      return n.forEach((u, m) => {
+        a[u] = o[m + 1];
       }), { route: r, params: a };
     }
   }
   return { route: null, params: {} };
-}, Te = {};
-async function jt(e) {
+}, ze = {};
+async function ir(e) {
   if (e.component) return e.component;
   if (e.load) {
-    if (Te[e.path]) return Te[e.path];
+    if (ze[e.path]) return ze[e.path];
     try {
       const t = await e.load();
-      return Te[e.path] = t.default, t.default;
+      return ze[e.path] = t.default, t.default;
     } catch {
       throw new Error(`Failed to load component for route: ${e.path}`);
     }
   }
   throw new Error(`No component or loader defined for route: ${e.path}`);
 }
-function Lt(e) {
-  const { routes: t, base: r = "", initialUrl: i } = e;
-  let n, s, o, a, c, u, m;
-  const T = async (v, d) => {
-    const g = t.find((y) => V([y], v.path).route !== null);
-    if (g?.beforeEnter)
+function sr(e) {
+  const { routes: t, base: r = "", initialUrl: n } = e;
+  let i, s, o, a, u, m, g;
+  const w = async (v, b) => {
+    const c = t.find((p) => Q([p], v.path).route !== null);
+    if (c?.beforeEnter)
       try {
-        const y = await g.beforeEnter(v, d);
-        return typeof y == "string" ? (await w(y, !0), !1) : y !== !1;
-      } catch (y) {
-        return Y("beforeEnter error", y), !1;
+        const p = await c.beforeEnter(v, b);
+        return typeof p == "string" ? (await d(p, !0), !1) : p !== !1;
+      } catch (p) {
+        return ie("beforeEnter error", p), !1;
       }
     return !0;
-  }, p = async (v, d) => {
-    const g = t.find((y) => V([y], v.path).route !== null);
-    if (g?.onEnter)
+  }, h = async (v, b) => {
+    const c = t.find((p) => Q([p], v.path).route !== null);
+    if (c?.onEnter)
       try {
-        const y = await g.onEnter(v, d);
-        return typeof y == "string" ? (await w(y, !0), !1) : y !== !1;
-      } catch (y) {
-        return Y("onEnter error", y), !1;
+        const p = await c.onEnter(v, b);
+        return typeof p == "string" ? (await d(p, !0), !1) : p !== !1;
+      } catch (p) {
+        return ie("onEnter error", p), !1;
       }
     return !0;
-  }, l = (v, d) => {
-    const g = t.find((y) => V([y], v.path).route !== null);
-    if (g?.afterEnter)
+  }, l = (v, b) => {
+    const c = t.find((p) => Q([p], v.path).route !== null);
+    if (c?.afterEnter)
       try {
-        g.afterEnter(v, d);
-      } catch (y) {
-        Y("afterEnter error", y);
+        c.afterEnter(v, b);
+      } catch (p) {
+        ie("afterEnter error", p);
       }
-  }, w = async (v, d = !1) => {
+  }, d = async (v, b = !1) => {
     try {
-      const g = {
+      const c = {
         path: v.replace(r, "") || "/",
         query: {}
-      }, y = V(t, g.path);
-      if (!y) throw new Error(`No route found for ${g.path}`);
-      const x = o.getState(), f = {
-        path: g.path,
-        params: y.params,
-        query: g.query
+      }, p = Q(t, c.path);
+      if (!p) throw new Error(`No route found for ${c.path}`);
+      const y = o.getState(), C = {
+        path: c.path,
+        params: p.params,
+        query: c.query
       };
-      if (!await T(f, x) || !await p(f, x)) return;
-      typeof window < "u" && typeof document < "u" && (d ? window.history.replaceState({}, "", r + v) : window.history.pushState({}, "", r + v)), o.setState(f), l(f, x);
-    } catch (g) {
-      Y("Navigation error:", g);
+      if (!await w(C, y) || !await h(C, y)) return;
+      typeof window < "u" && typeof document < "u" && (b ? window.history.replaceState({}, "", r + v) : window.history.pushState({}, "", r + v)), o.setState(C), l(C, y);
+    } catch (c) {
+      ie("Navigation error:", c);
     }
   };
-  if (typeof window < "u" && typeof document < "u") {
-    n = () => {
-      const d = new URL(window.location.href), g = d.pathname.replace(r, "") || "/", y = qe(d.search);
-      return { path: g, query: y };
-    }, s = n();
-    const v = V(t, s.path);
-    o = Le({
+  if (typeof window < "u" && typeof document < "u" && typeof n > "u") {
+    i = () => {
+      const b = new URL(window.location.href), c = b.pathname.replace(r, "") || "/", p = et(b.search);
+      return { path: c, query: p };
+    }, s = i();
+    const v = Q(t, s.path);
+    o = Qe({
       path: s.path,
       params: v.params,
       query: s.query
-    }), a = async (d = !1) => {
-      const g = n();
-      await w(g.path, d);
-    }, window.addEventListener("popstate", () => a(!0)), c = (d) => w(d, !1), u = (d) => w(d, !0), m = () => window.history.back();
+    }), a = async (b = !1) => {
+      const c = i();
+      await d(c.path, b);
+    }, window.addEventListener("popstate", () => a(!0)), u = (b) => d(b, !1), m = (b) => d(b, !0), g = () => window.history.back();
   } else {
-    n = () => {
-      const g = new URL(i || "/", "http://localhost"), y = g.pathname.replace(r, "") || "/", x = qe(g.search);
-      return { path: y, query: x };
-    }, s = n();
-    const v = V(t, s.path);
-    o = Le({
+    i = () => {
+      const c = new URL(n || "/", "http://localhost"), p = c.pathname.replace(r, "") || "/", y = et(c.search);
+      return { path: p, query: y };
+    }, s = i();
+    const v = Q(t, s.path);
+    o = Qe({
       path: s.path,
       params: v.params,
       query: s.query
     }), a = async () => {
-      const g = n();
-      await d(g.path);
+      const c = i();
+      await b(c.path);
     };
-    const d = async (g) => {
+    const b = async (c) => {
       try {
-        const y = {
-          path: g.replace(r, "") || "/",
+        const p = {
+          path: c.replace(r, "") || "/",
           query: {}
-        }, x = V(t, y.path);
-        if (!x) throw new Error(`No route found for ${y.path}`);
-        const f = o.getState(), b = {
-          path: y.path,
-          params: x.params,
-          query: y.query
-        }, h = t.find((_) => V([_], b.path).route !== null);
-        if (h?.beforeEnter)
+        }, y = Q(t, p.path);
+        if (!y) throw new Error(`No route found for ${p.path}`);
+        const C = o.getState(), k = {
+          path: p.path,
+          params: y.params,
+          query: p.query
+        }, f = t.find((x) => Q([x], k.path).route !== null);
+        if (f?.beforeEnter)
           try {
-            const _ = await h.beforeEnter(b, f);
-            if (typeof _ == "string") {
-              await d(_);
+            const x = await f.beforeEnter(k, C);
+            if (typeof x == "string") {
+              await b(x);
               return;
             }
-            if (_ === !1) return;
+            if (x === !1) return;
           } catch {
             return;
           }
-        if (h?.onEnter)
+        if (f?.onEnter)
           try {
-            const _ = await h.onEnter(b, f);
-            if (typeof _ == "string") {
-              await d(_);
+            const x = await f.onEnter(k, C);
+            if (typeof x == "string") {
+              await b(x);
               return;
             }
-            if (_ === !1) return;
+            if (x === !1) return;
           } catch {
             return;
           }
-        if (o.setState(b), h?.afterEnter)
+        if (o.setState(k), f?.afterEnter)
           try {
-            h.afterEnter(b, f);
+            f.afterEnter(k, C);
           } catch {
           }
       } catch {
       }
     };
-    c = async (g) => d(g), u = async (g) => d(g), m = () => {
+    u = async (c) => b(c), m = async (c) => b(c), g = () => {
     };
   }
   return {
     store: o,
-    push: c,
-    replace: u,
-    back: m,
+    push: u,
+    replace: m,
+    back: g,
     subscribe: o.subscribe,
-    matchRoute: (v) => V(t, v),
+    matchRoute: (v) => Q(t, v),
     getCurrent: () => o.getState(),
-    resolveRouteComponent: jt
+    resolveRouteComponent: ir
   };
 }
-function Zt(e, t) {
-  return V(e, t);
-}
-function Yt(e) {
-  const t = Lt(e);
-  return Ie("router-view", {
-    async render() {
-      if (!t) return ee`<div>Router not initialized.</div>`;
-      const r = t.getCurrent(), { path: i } = r, n = t.matchRoute(i);
-      if (!n.route) return ee`<div>Not found</div>`;
-      try {
-        const s = await t.resolveRouteComponent(n.route);
-        if (typeof s == "string")
-          return { tag: s, props: {}, children: [] };
-        if (typeof s == "function") {
-          const o = s(), a = o instanceof Promise ? await o : o;
-          return typeof a == "string" ? { tag: a, props: {}, children: [] } : a;
-        }
-        return ee`<div>Invalid route component</div>`;
-      } catch {
-        return ee`<div>Invalid route component</div>`;
-      }
-    },
-    onConnected(r) {
+function Pr(e, t) {
+  return Q(e, t);
+}
+function Lr(e) {
+  const t = sr(e);
+  return Ye("router-view", (r = {}, n = {}) => {
+    const { onConnected: i } = n;
+    if (i && i(() => {
       t && typeof t.subscribe == "function" && t.subscribe(() => {
-        typeof r.requestRender == "function" && r.requestRender();
       });
-    }
-  }), Ie("router-link", {
-    state: {},
-    props: {
-      to: { type: String, default: "" },
-      tag: { type: String, default: "a" },
-      replace: { type: Boolean, default: !1 },
-      exact: { type: Boolean, default: !1 },
-      activeClass: { type: String, default: "active" },
-      exactActiveClass: { type: String, default: "exact-active" },
-      ariaCurrentValue: { type: String, default: "page" },
-      disabled: { type: Boolean, default: !1 },
-      external: { type: Boolean, default: !1 },
-      class: { type: String, default: "" },
-      style: { type: String, default: Ue`
-        [aria-disabled="true"] {
-          pointer-events: none;
-          opacity: 0.5;
-        }
-      ` }
-    },
-    style: (r) => r.style,
-    render: (r) => {
-      const i = t.getCurrent(), n = r.to, s = r.exact, o = r.exactActiveClass, a = r.activeClass, c = r.ariaCurrentValue, u = r.tag, m = r.disabled, T = r.external, p = i.path === n, l = s ? p : i && typeof i.path == "string" ? i.path.startsWith(n) : !1, w = p ? `aria-current="${c}"` : "", v = (r.class || "").split(/\s+/).filter(Boolean), d = {};
-      for (const b of v) d[b] = !0;
-      const g = {
-        ...d,
-        // Also include the configurable names (may duplicate the above)
-        [a]: l,
-        [o]: p
-      }, y = u === "button", x = m ? y ? 'disabled aria-disabled="true" tabindex="-1"' : 'aria-disabled="true" tabindex="-1"' : "", f = T && (u === "a" || !u) ? 'target="_blank" rel="noopener noreferrer"' : "";
-      return ee`
-        ${Ke().when(y, ee`
-            <button
-              part="button"
-              :class="${g}"
-              ${w}
-              ${x}
-              ${f}
-              @click="navigate"
-            ><slot></slot></button>
-          `).otherwise(ee`
-            <a
-              part="link"
-              href="${n}"
-              :class="${g}"
-              ${w}
-              ${x}
-              ${f}
-              @click="navigate"
-            ><slot></slot></a>
-          `).done()}
-      `;
-    },
-    navigate: (r, i) => {
-      if (i.disabled) {
-        r.preventDefault();
+    }), !t) return ae`<div>Router not initialized.</div>`;
+    const s = t.getCurrent(), { path: o } = s, a = t.matchRoute(o);
+    return a.route ? t.resolveRouteComponent(a.route).then((u) => {
+      if (typeof u == "string")
+        return { tag: u, props: {}, children: [] };
+      if (typeof u == "function") {
+        const m = u();
+        return (m instanceof Promise ? m : Promise.resolve(m)).then((w) => typeof w == "string" ? { tag: w, props: {}, children: [] } : w);
+      }
+      return ae`<div>Invalid route component</div>`;
+    }).catch(() => ae`<div>Invalid route component</div>`) : ae`<div>Not found</div>`;
+  }), Ye("router-link", (r = {}, n = {}) => {
+    const {
+      to: i = "",
+      tag: s = "a",
+      replace: o = !1,
+      exact: a = !1,
+      activeClass: u = "active",
+      exactActiveClass: m = "exact-active",
+      ariaCurrentValue: g = "page",
+      disabled: w = !1,
+      external: h = !1,
+      class: l = ""
+    } = r, d = t.getCurrent(), v = d.path === i, b = a ? v : d && typeof d.path == "string" ? d.path.startsWith(i) : !1, c = v ? `aria-current="${g}"` : "", p = (l || "").split(/\s+/).filter(Boolean), y = {};
+    for (const _ of p) y[_] = !0;
+    const C = {
+      ...y,
+      // Also include the configurable names (may duplicate the above)
+      [u]: b,
+      [m]: v
+    }, k = s === "button", f = w ? k ? 'disabled aria-disabled="true" tabindex="-1"' : 'aria-disabled="true" tabindex="-1"' : "", x = h && (s === "a" || !s) ? 'target="_blank" rel="noopener noreferrer"' : "", A = (_) => {
+      if (w) {
+        _.preventDefault();
         return;
       }
-      i.external && (i.tag === "a" || !i.tag) || (r.preventDefault(), i.replace ? t.replace(i.to) : t.push(i.to));
-    }
+      h && (s === "a" || !s) || (_.preventDefault(), o ? t.replace(i) : t.push(i));
+    };
+    return ae`
+      ${tr().when(k, ae`
+          <button
+            part="button"
+            :class="${C}"
+            ${c}
+            ${f}
+            ${x}
+            @click="${A}"
+          ><slot></slot></button>
+        `).otherwise(ae`
+          <a
+            part="link"
+            href="${i}"
+            :class="${C}"
+            ${c}
+            ${f}
+            ${x}
+            @click="${A}"
+          ><slot></slot></a>
+        `).done()}
+    `;
   }), t;
 }
 export {
-  ne as GlobalEventBus,
-  O as anchorBlock,
-  Ie as component,
-  Le as createStore,
-  Ue as css,
-  Ot as each,
-  qt as eachGroup,
-  zt as eachPage,
-  Wt as eachWhere,
-  Ft as emit,
-  le as eventBus,
-  ee as html,
-  Yt as initRouter,
-  Gt as listen,
-  Ke as match,
-  V as matchRoute,
-  Zt as matchRouteSSR,
-  G as mediaVariants,
-  Jt as off,
-  Kt as on,
-  Vt as once,
-  qe as parseQuery,
-  ke as renderToString,
-  jt as resolveRouteComponent,
-  Ve as responsive,
-  ze as responsiveOrder,
-  Dt as responsiveSwitch,
-  Ut as switchOn,
-  It as switchOnLength,
-  Ht as switchOnPromise,
-  Pt as unless,
-  Lt as useRouter,
-  we as when,
-  Mt as whenEmpty,
+  ue as GlobalEventBus,
+  M as anchorBlock,
+  Ye as component,
+  ar as computed,
+  Qe as createStore,
+  Tt as css,
+  gr as each,
+  xr as eachGroup,
+  kr as eachPage,
+  wr as eachWhere,
+  $r as emit,
+  me as eventBus,
+  ae as html,
+  Lr as initRouter,
+  Or as listen,
+  tr as match,
+  Q as matchRoute,
+  Pr as matchRouteSSR,
+  ee as mediaVariants,
+  Rr as off,
+  Ar as on,
+  Tr as once,
+  et as parseQuery,
+  or as ref,
+  Te as renderToString,
+  ir as resolveRouteComponent,
+  nr as responsive,
+  at as responsiveOrder,
+  Er as responsiveSwitch,
+  Sr as switchOn,
+  vr as switchOnLength,
+  Cr as switchOnPromise,
+  mr as unless,
+  lr as useEmit,
+  dr as useOnAttributeChanged,
+  ur as useOnConnected,
+  fr as useOnDisconnected,
+  pr as useOnError,
+  sr as useRouter,
+  hr as useStyle,
+  cr as watch,
+  Ae as when,
+  yr as whenEmpty,
   q as whenMedia,
-  Bt as whenNotEmpty,
-  Nt as whenVariants
+  br as whenNotEmpty,
+  _r as whenVariants
 };
 //# sourceMappingURL=custom-elements-runtime.es.js.map