@jasonshimmy/custom-elements-runtime 3.0.0 → 3.1.1

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

@@ -1,16 +1,20 @@
-import { u as b, a as T, b as k, g as x, i as A } from "./hooks-DyShDHKo.js";
-import { c as te, d as ne, e as oe, p as re, f as se, h as ae, j as ie, k as ce, l as le, m as ue, n as he, o as de } from "./hooks-DyShDHKo.js";
-import { r as m, a as I } from "./helpers-CweFZFWU.js";
-import { R as me, c as pe, d as ye, f as ge, i as ve, n as Ce, s as we, u as Se, w as _e, b as Re } from "./helpers-CweFZFWU.js";
-import { c as v, h as l, v as p } from "./template-compiler-B5uN1EQw.js";
-import { c as He } from "./css-utils-Cg4o1MqY.js";
-import { d as y, a as D } from "./logger-BvkEbVM4.js";
-import { b as Le, s as be } from "./logger-BvkEbVM4.js";
+import { r as f, u as L, a as T, b as k, c as x, g as A, i as D } from "./hooks-xWZhQHco.js";
+import { R as te, d as ne, e as oe, f as re, h as se, j as ae, k as ie, l as ce, n as le, p as ue, s as de, m as he, o as me, q as fe, t as pe, v as ye, w as ge, x as ve, y as Ce, z as we, A as Ee, B as Se } from "./hooks-xWZhQHco.js";
+import { c as v, h as l, v as p } from "./template-compiler-ZhSg1yPh.js";
+import { c as Re } from "./css-utils-Cg4o1MqY.js";
+import { d as y, a as I } from "./logger-BvkEbVM4.js";
+import { b as Me, s as be } from "./logger-BvkEbVM4.js";
+function W(e = document) {
+  if (typeof CustomEvent > "u") return;
+  (e instanceof Document ? e.documentElement : e).dispatchEvent(
+    new CustomEvent("cer:hydrate", { bubbles: !0, composed: !0 })
+  );
+}
 const O = 100, U = 3e4;
-function K(e, t, o) {
+function z(e, t, o) {
   return o === "jitCacheHitRate" ? e < t * 0.5 ? "critical" : e < t ? "warning" : "healthy" : e > t * 2 ? "critical" : e > t ? "warning" : "healthy";
 }
-function z(e) {
+function K(e) {
   const t = [];
   return e.memoryUsage?.status !== "healthy" && t.push(
     "Consider reducing component complexity or implementing better memory cleanup"
@@ -42,9 +46,9 @@ function j() {
   function i() {
     n("activeComponents", 0, 1e3), n("componentCreateRate", 0, 50), n("componentErrorRate", 0, 0.1), n("memoryUsage", 0, 50 * 1024 * 1024), n("memoryGrowthRate", 0, 1024 * 1024), n("averageRenderTime", 0, 16), n("slowRenderCount", 0, 10), n("jitCacheHitRate", 100, 80), n("activeReactiveStates", 0, 5e3), n("dependencyUpdates", 0, 100), n("memoryLeakIndicator", 0, 0.1);
   }
-  function h(r, s) {
+  function d(r, s) {
     const a = e.get(r);
-    a && (a.value = s, a.lastUpdated = Date.now(), a.history.push(s), a.history.length > O && a.history.shift(), a.status = K(s, a.threshold, r));
+    a && (a.value = s, a.lastUpdated = Date.now(), a.history.push(s), a.history.length > O && a.history.shift(), a.status = z(s, a.threshold, r));
   }
   function c() {
     const r = {};
@@ -55,17 +59,17 @@ function j() {
       overall: s,
       metrics: r,
       timestamp: Date.now(),
-      recommendations: z(r)
+      recommendations: K(r)
     };
   }
-  function d() {
+  function h() {
     if ("memory" in performance && performance.memory) {
       const r = performance.memory;
-      h("memoryUsage", r.usedJSHeapSize);
+      d("memoryUsage", r.usedJSHeapSize);
       const s = e.get("memoryUsage");
       if (s && s.history.length > 1) {
         const a = s.history[s.history.length - 2], u = s.history[s.history.length - 1];
-        h("memoryGrowthRate", Math.max(0, u - a));
+        d("memoryGrowthRate", Math.max(0, u - a));
       }
     }
   }
@@ -77,24 +81,24 @@ function j() {
         y("Error in health monitor listener:", a);
       }
   }
-  function S() {
-    d();
+  function E() {
+    h();
     const r = c();
     w(r), r.overall === "critical" ? y(
       "🚨 Runtime Health: Critical issues detected",
       r.recommendations
-    ) : r.overall === "warning" && D(
+    ) : r.overall === "warning" && I(
       "⚠️ Runtime Health: Performance warnings",
       r.recommendations
     );
   }
-  function _() {
-    typeof window > "u" || (o = setInterval(S, U));
+  function S() {
+    typeof window > "u" || (o = setInterval(E, U));
   }
-  function R() {
+  function _() {
     o !== null && (clearInterval(o), o = null);
   }
-  function E(r) {
+  function R(r) {
     t.add(r);
   }
   function H(r) {
@@ -104,22 +108,22 @@ function j() {
     const s = e.get(r);
     return s ? [...s.history] : [];
   }
-  function L() {
+  function b() {
     for (const r of e.values()) r.history = [];
   }
-  return i(), _(), {
-    updateMetric: h,
+  return i(), S(), {
+    updateMetric: d,
     getHealthReport: c,
-    addListener: E,
+    addListener: R,
     removeListener: H,
-    stop: R,
+    stop: _,
     getMetricHistory: M,
-    clearHistory: L
+    clearHistory: b
   };
 }
-let f = null;
+let m = null;
 function C() {
-  return f || (f = j()), f;
+  return m || (m = j()), m;
 }
 function V(e, t) {
   C().updateMetric(e, t);
@@ -173,16 +177,16 @@ function $() {
     }
   };
 }
-function P() {
-  customElements.get("cer-suspense") || v("cer-suspense", () => {
+function q() {
+  typeof customElements < "u" && customElements.get("cer-suspense") || v("cer-suspense", () => {
     const { pending: e } = k({ pending: !1 });
     return e ? l`<slot name="fallback"><span>Loading…</span></slot>` : l`<slot></slot>`;
   });
 }
-function q() {
-  customElements.get("cer-error-boundary") || v("cer-error-boundary", () => {
-    const e = m(!1), t = m("");
-    return b((o) => {
+function P() {
+  typeof customElements < "u" && customElements.get("cer-error-boundary") || v("cer-error-boundary", () => {
+    const e = f(!1), t = f("");
+    return L((o) => {
       e.value = !0, t.value = o.message;
     }), T({
       _cerHandleChildError: (o) => {
@@ -200,19 +204,19 @@ function q() {
   });
 }
 function Z() {
-  P(), q(), N();
+  q(), P(), N();
 }
 function F(e) {
   if (typeof document > "u")
     return { portal: () => {
     }, destroy: () => {
     } };
-  if (A())
+  if (D())
     return { portal: () => {
     }, destroy: () => {
     } };
-  if (x()) {
-    const o = I.getOrCreateState(null), n = o.peek();
+  if (A()) {
+    const o = x.getOrCreateState(null), n = o.peek();
     if (n !== null)
       return n;
     const i = g(e, () => o.initSilent(null));
@@ -233,8 +237,8 @@ function g(e, t) {
   const i = {};
   return {
     portal(c) {
-      const d = c == null ? [] : Array.isArray(c) ? c : [c];
-      p(n, d, void 0, i);
+      const h = c == null ? [] : Array.isArray(c) ? c : [c];
+      p(n, h, void 0, i);
     },
     destroy() {
       try {
@@ -246,46 +250,47 @@ function g(e, t) {
   };
 }
 export {
-  me as ReactiveState,
+  te as ReactiveState,
   v as component,
-  pe as computed,
-  te as createComposable,
+  ne as computed,
+  oe as createComposable,
   j as createHealthMonitor,
-  He as css,
-  ye as decodeEntities,
-  ne as defineModel,
-  Le as devLog,
-  ge as flushDOMUpdates,
-  x as getCurrentComponentContext,
+  Re as css,
+  re as decodeEntities,
+  se as defineModel,
+  Me as devLog,
+  ae as flushDOMUpdates,
+  A as getCurrentComponentContext,
   C as getHealthMonitor,
   X as getHealthStatus,
   l as html,
-  oe as inject,
-  ve as isReactiveState,
-  Ce as nextTick,
-  re as provide,
-  m as ref,
+  W as hydrateApp,
+  ie as inject,
+  ce as isReactiveState,
+  le as nextTick,
+  ue as provide,
+  f as ref,
   Z as registerBuiltinComponents,
-  q as registerErrorBoundary,
+  P as registerErrorBoundary,
   N as registerKeepAlive,
-  P as registerSuspense,
-  we as scheduleWithPriority,
+  q as registerSuspense,
+  de as scheduleWithPriority,
   be as setDevMode,
-  Se as unsafeHTML,
+  he as unsafeHTML,
   V as updateHealthMetric,
-  se as useDesignTokens,
-  ae as useEmit,
+  me as useDesignTokens,
+  fe as useEmit,
   T as useExpose,
-  ie as useGlobalStyle,
-  ce as useOnAttributeChanged,
-  le as useOnConnected,
-  ue as useOnDisconnected,
-  b as useOnError,
+  pe as useGlobalStyle,
+  ye as useOnAttributeChanged,
+  ge as useOnConnected,
+  ve as useOnDisconnected,
+  L as useOnError,
   k as useProps,
-  he as useSlots,
-  de as useStyle,
+  Ce as useSlots,
+  we as useStyle,
   F as useTeleport,
-  _e as watch,
-  Re as watchEffect
+  Ee as watch,
+  Se as watchEffect
 };
 //# sourceMappingURL=custom-elements-runtime.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"custom-elements-runtime.es.js","sources":["../src/lib/runtime/monitoring/health-monitor.ts","../src/lib/keep-alive.ts","../src/lib/runtime/builtin-components.ts","../src/lib/teleport.ts"],"sourcesContent":["/**\n * Runtime Health Monitoring System\n * Tracks framework health metrics and provides early warning for potential issues\n */\n\nimport { devWarn, devError } from '../logger';\n\ninterface HealthMetric {\n  name: string;\n  value: number;\n  threshold: number;\n  status: 'healthy' | 'warning' | 'critical';\n  lastUpdated: number;\n  history: number[];\n}\n\ninterface HealthReport {\n  overall: 'healthy' | 'warning' | 'critical';\n  metrics: Record<string, HealthMetric>;\n  timestamp: number;\n  recommendations: string[];\n}\nexport type { HealthReport };\n\n/**\n * Public interface for a health monitor instance.\n * All state is managed internally via closures — no class syntax.\n */\nexport interface HealthMonitorInstance {\n  /** Update a specific health metric value */\n  updateMetric(name: string, value: number): void;\n  /** Get the current health report */\n  getHealthReport(): HealthReport;\n  /** Add a listener to be notified when a health check runs */\n  addListener(listener: (report: HealthReport) => void): void;\n  /** Remove a previously registered listener */\n  removeListener(listener: (report: HealthReport) => void): void;\n  /** Stop the periodic health monitoring timer */\n  stop(): void;\n  /** Get historical values for a specific metric */\n  getMetricHistory(name: string): number[];\n  /** Clear all metric history */\n  clearHistory(): void;\n}\n\nconst MAX_HISTORY_SIZE = 100;\nconst CHECK_INTERVAL = 30_000; // 30 seconds\n\nfunction calcStatus(\n  value: number,\n  threshold: number,\n  metricName: string,\n): 'healthy' | 'warning' | 'critical' {\n  if (metricName === 'jitCacheHitRate') {\n    if (value < threshold * 0.5) return 'critical';\n    if (value < threshold) return 'warning';\n    return 'healthy';\n  }\n  if (value > threshold * 2) return 'critical';\n  if (value > threshold) return 'warning';\n  return 'healthy';\n}\n\nfunction buildRecommendations(metrics: Record<string, HealthMetric>): string[] {\n  const out: string[] = [];\n  if (metrics.memoryUsage?.status !== 'healthy')\n    out.push(\n      'Consider reducing component complexity or implementing better memory cleanup',\n    );\n  if (metrics.averageRenderTime?.status !== 'healthy')\n    out.push(\n      'Optimize component render functions - consider lazy loading or virtualization',\n    );\n  if (metrics.jitCacheHitRate?.status !== 'healthy')\n    out.push(\n      'JIT CSS cache performance is poor - review CSS patterns for optimization',\n    );\n  if (metrics.componentErrorRate?.status !== 'healthy')\n    out.push(\n      'High component error rate detected - review error handling and component logic',\n    );\n  if (metrics.activeReactiveStates?.status !== 'healthy')\n    out.push(\n      'High number of reactive states - consider state consolidation or cleanup',\n    );\n  if (metrics.memoryLeakIndicator?.status !== 'healthy')\n    out.push(\n      'Potential memory leak detected - review component cleanup and event listener management',\n    );\n  return out;\n}\n\n/**\n * Create a new health monitor instance.\n * All mutable state lives in closures — no `class` or `this`.\n */\nexport function createHealthMonitor(): HealthMonitorInstance {\n  const metricsMap = new Map<string, HealthMetric>();\n  const listeners = new Set<(report: HealthReport) => void>();\n  let intervalId: ReturnType<typeof setInterval> | null = null;\n\n  function addMetric(name: string, value: number, threshold: number): void {\n    metricsMap.set(name, {\n      name,\n      value,\n      threshold,\n      status: 'healthy',\n      lastUpdated: Date.now(),\n      history: [],\n    });\n  }\n\n  function initializeMetrics(): void {\n    addMetric('activeComponents', 0, 1000);\n    addMetric('componentCreateRate', 0, 50);\n    addMetric('componentErrorRate', 0, 0.1);\n    addMetric('memoryUsage', 0, 50 * 1024 * 1024);\n    addMetric('memoryGrowthRate', 0, 1024 * 1024);\n    addMetric('averageRenderTime', 0, 16);\n    addMetric('slowRenderCount', 0, 10);\n    addMetric('jitCacheHitRate', 100, 80);\n    addMetric('activeReactiveStates', 0, 5000);\n    addMetric('dependencyUpdates', 0, 100);\n    addMetric('memoryLeakIndicator', 0, 0.1);\n  }\n\n  function updateMetric(name: string, value: number): void {\n    const metric = metricsMap.get(name);\n    if (!metric) return;\n    metric.value = value;\n    metric.lastUpdated = Date.now();\n    metric.history.push(value);\n    if (metric.history.length > MAX_HISTORY_SIZE) metric.history.shift();\n    metric.status = calcStatus(value, metric.threshold, name);\n  }\n\n  function getHealthReport(): HealthReport {\n    const snapshot: Record<string, HealthMetric> = {};\n    let overall: 'healthy' | 'warning' | 'critical' = 'healthy';\n    for (const [name, metric] of metricsMap) {\n      snapshot[name] = { ...metric };\n      if (metric.status === 'critical') overall = 'critical';\n      else if (metric.status === 'warning' && overall === 'healthy')\n        overall = 'warning';\n    }\n    return {\n      overall,\n      metrics: snapshot,\n      timestamp: Date.now(),\n      recommendations: buildRecommendations(snapshot),\n    };\n  }\n\n  function updateMemoryMetrics(): void {\n    if (\n      'memory' in performance &&\n      (performance as Record<string, unknown>).memory\n    ) {\n      const mem = (performance as Record<string, unknown>).memory as {\n        usedJSHeapSize: number;\n      };\n      updateMetric('memoryUsage', mem.usedJSHeapSize);\n      const m = metricsMap.get('memoryUsage');\n      if (m && m.history.length > 1) {\n        const prev = m.history[m.history.length - 2];\n        const curr = m.history[m.history.length - 1];\n        updateMetric('memoryGrowthRate', Math.max(0, curr - prev));\n      }\n    }\n  }\n\n  function notifyListeners(report: HealthReport): void {\n    for (const listener of listeners) {\n      try {\n        listener(report);\n      } catch (e) {\n        devError('Error in health monitor listener:', e);\n      }\n    }\n  }\n\n  function performHealthCheck(): void {\n    updateMemoryMetrics();\n    const report = getHealthReport();\n    notifyListeners(report);\n    if (report.overall === 'critical')\n      devError(\n        '🚨 Runtime Health: Critical issues detected',\n        report.recommendations,\n      );\n    else if (report.overall === 'warning')\n      devWarn(\n        '⚠️ Runtime Health: Performance warnings',\n        report.recommendations,\n      );\n  }\n\n  function startMonitoring(): void {\n    if (typeof window === 'undefined') return;\n    intervalId = setInterval(performHealthCheck, CHECK_INTERVAL);\n  }\n\n  function stop(): void {\n    if (intervalId !== null) {\n      clearInterval(intervalId);\n      intervalId = null;\n    }\n  }\n\n  function addListener(listener: (report: HealthReport) => void): void {\n    listeners.add(listener);\n  }\n  function removeListener(listener: (report: HealthReport) => void): void {\n    listeners.delete(listener);\n  }\n  function getMetricHistory(name: string): number[] {\n    const m = metricsMap.get(name);\n    return m ? [...m.history] : [];\n  }\n  function clearHistory(): void {\n    for (const m of metricsMap.values()) m.history = [];\n  }\n\n  initializeMetrics();\n  startMonitoring();\n\n  return {\n    updateMetric,\n    getHealthReport,\n    addListener,\n    removeListener,\n    stop,\n    getMetricHistory,\n    clearHistory,\n  };\n}\n\n// Global singleton\nlet _monitor: HealthMonitorInstance | null = null;\n\n/**\n * Get the global health monitor singleton instance.\n */\nexport function getHealthMonitor(): HealthMonitorInstance {\n  if (!_monitor) _monitor = createHealthMonitor();\n  return _monitor;\n}\n\n/**\n * Update a health metric from anywhere in the framework.\n */\nexport function updateHealthMetric(name: string, value: number): void {\n  getHealthMonitor().updateMetric(name, value);\n}\n\n/**\n * Get the current health status report.\n */\nexport function getHealthStatus(): HealthReport {\n  return getHealthMonitor().getHealthReport();\n}\n","/**\n * keep-alive.ts\n *\n * Preserves component state when a component is removed from and later\n * re-inserted into the DOM. By default, custom elements lose all JavaScript\n * state when `disconnectedCallback` fires. `cer-keep-alive` intercepts\n * that lifecycle and keeps the child element alive in memory, re-attaching\n * it when a matching component is re-inserted.\n *\n * ## Usage\n *\n * Wrap any custom element with `<cer-keep-alive>`:\n * ```html\n * <cer-keep-alive>\n *   <my-counter></my-counter>\n * </cer-keep-alive>\n * ```\n *\n * Or register it programmatically:\n * ```ts\n * import { registerKeepAlive } from '@jasonshimmy/custom-elements-runtime';\n * registerKeepAlive(); // registers <cer-keep-alive> globally\n * ```\n *\n * ## How it works\n *\n * `cer-keep-alive` uses a slotted layout. When a slotted child component is\n * about to leave the DOM (via a re-render of a parent), KeepAlive intercepts\n * `slotchange` events and preserves the detached child element in an internal\n * cache keyed by tag name. When the same tag re-appears in the slot, the\n * cached element is re-inserted, restoring all JavaScript state.\n *\n * ## Limitations\n *\n * - The first slot child per tag name is cached. Multiple children with the\n *   same tag use separate cache entries keyed by their `id` attribute.\n * - Only components registered with the same tag name are matched.\n * - Cache entries can be manually evicted with `clearCache()`.\n */\n\n/** Cache key = tagName[:id] */\ntype CacheKey = string;\n\n/**\n * Register the `<cer-keep-alive>` custom element.\n * Safe to call multiple times — subsequent calls are no-ops.\n *\n * @example\n * ```ts\n * import { registerKeepAlive } from '@jasonshimmy/custom-elements-runtime';\n * registerKeepAlive();\n * ```\n */\nexport function registerKeepAlive(): void {\n  if (\n    typeof window === 'undefined' ||\n    typeof customElements === 'undefined' ||\n    customElements.get('cer-keep-alive')\n  ) {\n    return;\n  }\n\n  customElements.define('cer-keep-alive', createKeepAliveClass());\n}\n\nfunction createKeepAliveClass(): CustomElementConstructor {\n  return class CerKeepAlive extends HTMLElement {\n    /** Preserved component instances keyed by tag[:id]. */\n    private _cache = new Map<CacheKey, Element>();\n    private _slot: HTMLSlotElement | null = null;\n    private _slotListener: (() => void) | null = null;\n\n    connectedCallback(): void {\n      if (!this.shadowRoot) {\n        this.attachShadow({ mode: 'open' });\n      }\n\n      if (!this.shadowRoot!.querySelector('slot')) {\n        this.shadowRoot!.innerHTML = '<slot></slot>';\n      }\n\n      this._slot = this.shadowRoot!.querySelector('slot');\n      if (this._slot) {\n        this._slotListener = () => this._handleSlotChange();\n        this._slot.addEventListener('slotchange', this._slotListener);\n        // Process current slotted content\n        this._handleSlotChange();\n      }\n    }\n\n    disconnectedCallback(): void {\n      if (this._slot && this._slotListener) {\n        this._slot.removeEventListener('slotchange', this._slotListener);\n      }\n      this._slotListener = null;\n    }\n\n    /**\n     * Evict a cached element by its cache key (`tagName` or `tagName:id`).\n     * The evicted element is disconnected and removed from the cache.\n     */\n    clearCache(key?: CacheKey): void {\n      if (key) {\n        this._cache.delete(key);\n      } else {\n        this._cache.clear();\n      }\n    }\n\n    private _handleSlotChange(): void {\n      if (!this._slot) return;\n\n      const slottedElements = this._slot.assignedElements({ flatten: true });\n\n      for (const child of slottedElements) {\n        const cacheKey = this._buildCacheKey(child);\n\n        if (!this._cache.has(cacheKey)) {\n          // New element — cache it so we can restore it later\n          this._cache.set(cacheKey, child);\n        } else {\n          const cached = this._cache.get(cacheKey)!;\n          if (cached !== child) {\n            // A different instance appeared for the same slot.\n            // Replace it with the cached instance to restore state.\n            try {\n              child.parentNode?.replaceChild(cached, child);\n            } catch {\n              // If replacement fails, update the cache with the new element\n              this._cache.set(cacheKey, child);\n            }\n          }\n        }\n      }\n    }\n\n    private _buildCacheKey(el: Element): CacheKey {\n      const tag = el.tagName.toLowerCase();\n      const id = el.getAttribute('id');\n      return id ? `${tag}:${id}` : tag;\n    }\n  };\n}\n","/**\n * Built-in utility components provided by the custom-elements runtime.\n *\n * These components are registered automatically when this module is imported.\n * They are designed to be minimal, tree-shakeable, and zero-dependency.\n *\n * Included components:\n * - `<cer-suspense>` — Shows a fallback while async work is pending\n * - `<cer-error-boundary>` — Catches render errors and shows a fallback UI\n * - `<cer-keep-alive>` — Preserves component state across DOM removal/re-insertion\n */\n\nimport { component } from './component';\nimport { html } from './template-compiler';\nimport { ref } from './reactive';\nimport { useProps, useOnError, useExpose } from './hooks';\nimport { registerKeepAlive } from '../keep-alive';\n\n// ── cer-suspense ──────────────────────────────────────────────────────────────\n\n/**\n * A built-in component that conditionally renders either the default slot\n * content or the `fallback` slot content, controlled by the `pending` prop.\n *\n * Use the `pending` attribute/property to signal that async work is in\n * progress; the component will swap to the `fallback` slot until `pending`\n * becomes falsy.\n *\n * @example\n * ```html\n * <cer-suspense pending>\n *   <!-- shown when pending=false -->\n *   <my-async-content></my-async-content>\n *\n *   <!-- shown while pending=true -->\n *   <div slot=\"fallback\">Loading…</div>\n * </cer-suspense>\n * ```\n *\n * @example Programmatic usage\n * ```ts\n * component('my-data-loader', () => {\n *   const pending = ref(true);\n *   useOnConnected(async () => {\n *     await fetchData();\n *     pending.value = false;\n *   });\n *   return html`\n *     <cer-suspense pending=\"${pending.value}\">\n *       <my-data-view></my-data-view>\n *       <div slot=\"fallback\">Loading data…</div>\n *     </cer-suspense>\n *   `;\n * });\n * ```\n */\nexport function registerSuspense(): void {\n  if (customElements.get('cer-suspense')) return;\n\n  component('cer-suspense', () => {\n    const { pending } = useProps({ pending: false });\n\n    return pending\n      ? html`<slot name=\"fallback\"><span>Loading…</span></slot>`\n      : html`<slot></slot>`;\n  });\n}\n\n// ── cer-error-boundary ────────────────────────────────────────────────────────\n\n/**\n * A built-in component that catches errors thrown during child component\n * rendering and displays a fallback UI instead of crashing the page.\n *\n * Errors are caught via the `useOnError` lifecycle hook. Once an error is\n * caught the component switches to showing the `fallback` named slot (or a\n * default \"Something went wrong\" message if no fallback slot is provided).\n *\n * Call the custom `reset()` method on the element to clear the error and\n * attempt re-rendering the default slot.\n *\n * @example\n * ```html\n * <cer-error-boundary>\n *   <my-risky-component></my-risky-component>\n *\n *   <div slot=\"fallback\">\n *     <p>Something went wrong. <button onclick=\"this.closest('cer-error-boundary').reset()\">Retry</button></p>\n *   </div>\n * </cer-error-boundary>\n * ```\n */\nexport function registerErrorBoundary(): void {\n  if (customElements.get('cer-error-boundary')) return;\n\n  component('cer-error-boundary', () => {\n    const hasError = ref(false);\n    const errorMessage = ref('');\n\n    useOnError((err: Error) => {\n      hasError.value = true;\n      errorMessage.value = err.message;\n    });\n\n    // Expose a reset() method so parent templates can call\n    // `errorBoundaryRef.value.reset()` to clear the error and retry.\n    // Also expose an internal `_cerHandleChildError` receiver so that the\n    // component runtime can propagate uncaught errors from slotted child\n    // components up to the nearest ancestor <cer-error-boundary>.\n    useExpose({\n      _cerHandleChildError: (err: unknown) => {\n        // Use peek() to read the current value without registering a reactive\n        // dependency — the child component's render context may be active when\n        // this handler runs, and we must not accidentally subscribe the child\n        // to this boundary's internal state.\n        if (!hasError.peek()) {\n          hasError.value = true;\n          errorMessage.value = err instanceof Error ? err.message : String(err);\n        }\n      },\n      reset: () => {\n        hasError.value = false;\n        errorMessage.value = '';\n      },\n    });\n\n    return hasError.value\n      ? html`<slot name=\"fallback\"\n          ><div role=\"alert\">\n            <strong>Something went wrong.</strong>\n            ${errorMessage.value ? html`<p>${errorMessage.value}</p>` : html``}\n          </div></slot\n        >`\n      : html`<slot></slot>`;\n  });\n}\n\n// ── Auto-register all components ─────────────────────────────────────────────\n\n/**\n * Register all built-in components (`cer-suspense`, `cer-error-boundary`,\n * `cer-keep-alive`).\n * Safe to call multiple times — each registration is guarded by a\n * `customElements.get()` check.\n */\nexport function registerBuiltinComponents(): void {\n  registerSuspense();\n  registerErrorBoundary();\n  registerKeepAlive();\n}\n","/**\n * teleport.ts\n *\n * Renders virtual DOM content into an arbitrary DOM target located outside\n * the current component's Shadow Root. Useful for modals, tooltips, popovers,\n * and any UI that must visually escape the component boundary.\n *\n * @example\n * ```ts\n * import { component, html, ref, useOnDisconnected, useTeleport } from '@jasonshimmy/custom-elements-runtime';\n *\n * component('modal-trigger', () => {\n *   const isOpen = ref(false);\n *\n *   // Render modal content into <body> outside the shadow root\n *   const { portal, destroy } = useTeleport('#modal-root');\n *   useOnDisconnected(destroy);\n *\n *   // Call portal() to update the teleported content on each render\n *   if (isOpen.value) {\n *     portal(html`<div class=\"modal\">\n *       <h2>Hello</h2>\n *       <button @click=\"${() => (isOpen.value = false)}\">Close</button>\n *     </div>`);\n *   } else {\n *     portal(null);\n *   }\n *\n *   return html`\n *     <button @click=\"${() => (isOpen.value = true)}\">Open modal</button>\n *   `;\n * });\n * ```\n */\n\nimport type { VNode, VDomRefs } from './runtime/types';\nimport { vdomRenderer } from './runtime/vdom';\nimport { reactiveSystem } from './runtime/reactive';\nimport { getCurrentComponentContext, isDiscoveryRender } from './runtime/hooks';\n\n/** Handle returned by {@link useTeleport} for managing a portal. */\nexport interface TeleportHandle {\n  /**\n   * Render (or clear) content at the teleport target.\n   * Pass `null` or `undefined` to remove previously rendered content.\n   */\n  portal(content: VNode | VNode[] | null | undefined): void;\n\n  /**\n   * Destroy the teleport container and clean up all rendered content.\n   * Call this in `useOnDisconnected` to prevent memory leaks.\n   */\n  destroy(): void;\n}\n\n/**\n * Create a teleport portal that renders content outside the current Shadow Root.\n *\n * @param target - A CSS selector string or an `Element` reference to render into.\n * @returns A {@link TeleportHandle} with `portal()` (update content) and `destroy()` (cleanup).\n *\n * @example\n * ```ts\n * import { component, html, useOnDisconnected, useTeleport } from '@jasonshimmy/custom-elements-runtime';\n *\n * component('my-tooltip', () => {\n *   const { portal, destroy } = useTeleport('body');\n *   useOnDisconnected(destroy);\n *\n *   portal(html`<div class=\"tooltip\">Tooltip content</div>`);\n *   return html`<span>Hover me</span>`;\n * });\n * ```\n */\nexport function useTeleport(target: string | Element): TeleportHandle {\n  // SSR guard\n  if (typeof document === 'undefined') {\n    return { portal: () => {}, destroy: () => {} };\n  }\n\n  // During discovery render the component is not yet mounted — return a no-op\n  // handle so the library can detect props/hooks without side-effects.\n  if (isDiscoveryRender()) {\n    return { portal: () => {}, destroy: () => {} };\n  }\n\n  // If called inside a component render, use the reactive state-index slot\n  // mechanism to ensure the same handle is returned on every re-render of the\n  // same component instance.  Without this, each re-render would create a new\n  // <cer-teleport> container in the target, leaking all but the last one.\n  const ctx = getCurrentComponentContext();\n  if (ctx) {\n    // getOrCreateState uses an incrementing stateIndex that is reset to 0 at\n    // the start of each render, so the same call site always gets the same slot.\n    const slot = reactiveSystem.getOrCreateState<TeleportHandle | null>(null);\n    const existing = slot.peek();\n    if (existing !== null) {\n      return existing;\n    }\n    // First render: create the handle and store it without triggering a\n    // reactive update (initSilent bypasses triggerUpdate).\n    // Pass a slot-invalidation callback so that destroy() clears the slot,\n    // allowing a reconnected component to create a fresh container.\n    const handle = _createTeleportHandle(target, () => slot.initSilent(null));\n    slot.initSilent(handle);\n    return handle;\n  }\n\n  // Outside a component context (e.g. called directly in tests or scripts):\n  // fall through to a non-cached, non-stable handle.\n  return _createTeleportHandle(target);\n}\n\n/** Internal: create a fresh teleport handle pointing at `target`.\n * @param onDestroy - Optional callback invoked after cleanup in destroy(), used\n *   to invalidate a cached slot so the next render creates a fresh handle.\n */\nfunction _createTeleportHandle(\n  target: string | Element,\n  onDestroy?: () => void,\n): TeleportHandle {\n  const targetEl =\n    typeof target === 'string'\n      ? (document.querySelector(target) as Element | null)\n      : target;\n\n  if (!targetEl) {\n    console.warn(\n      `[useTeleport] Target \"${String(target)}\" not found in the document. ` +\n        'Teleported content will not be rendered.',\n    );\n    return { portal: () => {}, destroy: () => {} };\n  }\n\n  // Create a dedicated container so we never clobber sibling content.\n  const container = document.createElement('cer-teleport');\n  container.dataset.cerTeleport = '';\n  targetEl.appendChild(container);\n\n  // Shared refs bag — passed consistently so ref directives work across updates.\n  const refs: VDomRefs = {};\n\n  const handle: TeleportHandle = {\n    portal(content: VNode | VNode[] | null | undefined): void {\n      const nodes: VNode[] =\n        content == null ? [] : Array.isArray(content) ? content : [content];\n      // vdomRenderer stores _prevVNode/_prevDom on the root object for diffing.\n      // Casting to ShadowRoot is safe: we only access properties that exist on\n      // HTMLElement (firstChild, appendChild, replaceChild, childNodes).\n      vdomRenderer(container as unknown as ShadowRoot, nodes, undefined, refs);\n    },\n\n    destroy(): void {\n      // Render empty nodes to clean up event listeners and refs.\n      try {\n        vdomRenderer(container as unknown as ShadowRoot, [], undefined, refs);\n      } catch {\n        /* best-effort cleanup */\n      }\n      if (container.parentNode) {\n        container.parentNode.removeChild(container);\n      }\n      // Invalidate the cached slot so that if the component reconnects and\n      // re-renders, useTeleport() creates a fresh container rather than\n      // reusing this destroyed one.\n      onDestroy?.();\n    },\n  };\n\n  return handle;\n}\n"],"names":["MAX_HISTORY_SIZE","CHECK_INTERVAL","calcStatus","value","threshold","metricName","buildRecommendations","metrics","out","createHealthMonitor","metricsMap","listeners","intervalId","addMetric","name","initializeMetrics","updateMetric","metric","getHealthReport","snapshot","overall","updateMemoryMetrics","mem","m","prev","curr","notifyListeners","report","listener","e","devError","performHealthCheck","devWarn","startMonitoring","stop","addListener","removeListener","getMetricHistory","clearHistory","_monitor","getHealthMonitor","updateHealthMetric","getHealthStatus","registerKeepAlive","createKeepAliveClass","key","slottedElements","child","cacheKey","cached","el","tag","id","registerSuspense","component","pending","useProps","html","registerErrorBoundary","hasError","ref","errorMessage","useOnError","err","useExpose","registerBuiltinComponents","useTeleport","target","isDiscoveryRender","getCurrentComponentContext","slot","reactiveSystem","existing","handle","_createTeleportHandle","onDestroy","targetEl","container","refs","content","nodes","vdomRenderer"],"mappings":"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"}
+{"version":3,"file":"custom-elements-runtime.es.js","sources":["../src/lib/runtime/hydration.ts","../src/lib/runtime/monitoring/health-monitor.ts","../src/lib/keep-alive.ts","../src/lib/runtime/builtin-components.ts","../src/lib/teleport.ts"],"sourcesContent":["/**\n * Client-side hydration helpers.\n *\n * When the server renders with `dsd: true`, each custom element's shadow DOM\n * is already present in the HTML via a Declarative Shadow DOM template. The\n * browser parses that template and attaches the shadow root before any\n * JavaScript runs. When the JS bundle loads, the custom element constructors\n * detect the existing shadow root and skip the `attachShadow()` call, then\n * hydrate (attach reactivity to) the existing DOM on `connectedCallback`.\n *\n * `hydrateApp` is a signal/entry point for this process. In most cases custom\n * elements self-hydrate automatically on connection — this function is useful\n * when you need to explicitly trigger or defer the hydration of a subtree.\n */\n\n/**\n * Trigger hydration for all registered custom elements within `root`.\n *\n * In practice, custom elements self-hydrate as soon as their class definition\n * is registered and the element is connected to the DOM. Call `hydrateApp`\n * after importing and calling `component()` for all your components to signal\n * that the page is ready for reactive activation.\n *\n * @param root - The root element to hydrate. Defaults to `document`.\n *\n * @example\n * ```ts\n * import { component, hydrateApp } from '@jasonshimmy/custom-elements-runtime';\n * import './components'; // registers all components via component()\n *\n * hydrateApp(); // activate all DSD-rendered components on the page\n * ```\n */\nexport function hydrateApp(root: Element | Document = document): void {\n  if (typeof CustomEvent === 'undefined') return;\n  const target =\n    root instanceof Document ? root.documentElement : (root as Element);\n  target.dispatchEvent(\n    new CustomEvent('cer:hydrate', { bubbles: true, composed: true }),\n  );\n}\n","/**\n * Runtime Health Monitoring System\n * Tracks framework health metrics and provides early warning for potential issues\n */\n\nimport { devWarn, devError } from '../logger';\n\ninterface HealthMetric {\n  name: string;\n  value: number;\n  threshold: number;\n  status: 'healthy' | 'warning' | 'critical';\n  lastUpdated: number;\n  history: number[];\n}\n\ninterface HealthReport {\n  overall: 'healthy' | 'warning' | 'critical';\n  metrics: Record<string, HealthMetric>;\n  timestamp: number;\n  recommendations: string[];\n}\nexport type { HealthReport };\n\n/**\n * Public interface for a health monitor instance.\n * All state is managed internally via closures — no class syntax.\n */\nexport interface HealthMonitorInstance {\n  /** Update a specific health metric value */\n  updateMetric(name: string, value: number): void;\n  /** Get the current health report */\n  getHealthReport(): HealthReport;\n  /** Add a listener to be notified when a health check runs */\n  addListener(listener: (report: HealthReport) => void): void;\n  /** Remove a previously registered listener */\n  removeListener(listener: (report: HealthReport) => void): void;\n  /** Stop the periodic health monitoring timer */\n  stop(): void;\n  /** Get historical values for a specific metric */\n  getMetricHistory(name: string): number[];\n  /** Clear all metric history */\n  clearHistory(): void;\n}\n\nconst MAX_HISTORY_SIZE = 100;\nconst CHECK_INTERVAL = 30_000; // 30 seconds\n\nfunction calcStatus(\n  value: number,\n  threshold: number,\n  metricName: string,\n): 'healthy' | 'warning' | 'critical' {\n  if (metricName === 'jitCacheHitRate') {\n    if (value < threshold * 0.5) return 'critical';\n    if (value < threshold) return 'warning';\n    return 'healthy';\n  }\n  if (value > threshold * 2) return 'critical';\n  if (value > threshold) return 'warning';\n  return 'healthy';\n}\n\nfunction buildRecommendations(metrics: Record<string, HealthMetric>): string[] {\n  const out: string[] = [];\n  if (metrics.memoryUsage?.status !== 'healthy')\n    out.push(\n      'Consider reducing component complexity or implementing better memory cleanup',\n    );\n  if (metrics.averageRenderTime?.status !== 'healthy')\n    out.push(\n      'Optimize component render functions - consider lazy loading or virtualization',\n    );\n  if (metrics.jitCacheHitRate?.status !== 'healthy')\n    out.push(\n      'JIT CSS cache performance is poor - review CSS patterns for optimization',\n    );\n  if (metrics.componentErrorRate?.status !== 'healthy')\n    out.push(\n      'High component error rate detected - review error handling and component logic',\n    );\n  if (metrics.activeReactiveStates?.status !== 'healthy')\n    out.push(\n      'High number of reactive states - consider state consolidation or cleanup',\n    );\n  if (metrics.memoryLeakIndicator?.status !== 'healthy')\n    out.push(\n      'Potential memory leak detected - review component cleanup and event listener management',\n    );\n  return out;\n}\n\n/**\n * Create a new health monitor instance.\n * All mutable state lives in closures — no `class` or `this`.\n */\nexport function createHealthMonitor(): HealthMonitorInstance {\n  const metricsMap = new Map<string, HealthMetric>();\n  const listeners = new Set<(report: HealthReport) => void>();\n  let intervalId: ReturnType<typeof setInterval> | null = null;\n\n  function addMetric(name: string, value: number, threshold: number): void {\n    metricsMap.set(name, {\n      name,\n      value,\n      threshold,\n      status: 'healthy',\n      lastUpdated: Date.now(),\n      history: [],\n    });\n  }\n\n  function initializeMetrics(): void {\n    addMetric('activeComponents', 0, 1000);\n    addMetric('componentCreateRate', 0, 50);\n    addMetric('componentErrorRate', 0, 0.1);\n    addMetric('memoryUsage', 0, 50 * 1024 * 1024);\n    addMetric('memoryGrowthRate', 0, 1024 * 1024);\n    addMetric('averageRenderTime', 0, 16);\n    addMetric('slowRenderCount', 0, 10);\n    addMetric('jitCacheHitRate', 100, 80);\n    addMetric('activeReactiveStates', 0, 5000);\n    addMetric('dependencyUpdates', 0, 100);\n    addMetric('memoryLeakIndicator', 0, 0.1);\n  }\n\n  function updateMetric(name: string, value: number): void {\n    const metric = metricsMap.get(name);\n    if (!metric) return;\n    metric.value = value;\n    metric.lastUpdated = Date.now();\n    metric.history.push(value);\n    if (metric.history.length > MAX_HISTORY_SIZE) metric.history.shift();\n    metric.status = calcStatus(value, metric.threshold, name);\n  }\n\n  function getHealthReport(): HealthReport {\n    const snapshot: Record<string, HealthMetric> = {};\n    let overall: 'healthy' | 'warning' | 'critical' = 'healthy';\n    for (const [name, metric] of metricsMap) {\n      snapshot[name] = { ...metric };\n      if (metric.status === 'critical') overall = 'critical';\n      else if (metric.status === 'warning' && overall === 'healthy')\n        overall = 'warning';\n    }\n    return {\n      overall,\n      metrics: snapshot,\n      timestamp: Date.now(),\n      recommendations: buildRecommendations(snapshot),\n    };\n  }\n\n  function updateMemoryMetrics(): void {\n    if (\n      'memory' in performance &&\n      (performance as Record<string, unknown>).memory\n    ) {\n      const mem = (performance as Record<string, unknown>).memory as {\n        usedJSHeapSize: number;\n      };\n      updateMetric('memoryUsage', mem.usedJSHeapSize);\n      const m = metricsMap.get('memoryUsage');\n      if (m && m.history.length > 1) {\n        const prev = m.history[m.history.length - 2];\n        const curr = m.history[m.history.length - 1];\n        updateMetric('memoryGrowthRate', Math.max(0, curr - prev));\n      }\n    }\n  }\n\n  function notifyListeners(report: HealthReport): void {\n    for (const listener of listeners) {\n      try {\n        listener(report);\n      } catch (e) {\n        devError('Error in health monitor listener:', e);\n      }\n    }\n  }\n\n  function performHealthCheck(): void {\n    updateMemoryMetrics();\n    const report = getHealthReport();\n    notifyListeners(report);\n    if (report.overall === 'critical')\n      devError(\n        '🚨 Runtime Health: Critical issues detected',\n        report.recommendations,\n      );\n    else if (report.overall === 'warning')\n      devWarn(\n        '⚠️ Runtime Health: Performance warnings',\n        report.recommendations,\n      );\n  }\n\n  function startMonitoring(): void {\n    if (typeof window === 'undefined') return;\n    intervalId = setInterval(performHealthCheck, CHECK_INTERVAL);\n  }\n\n  function stop(): void {\n    if (intervalId !== null) {\n      clearInterval(intervalId);\n      intervalId = null;\n    }\n  }\n\n  function addListener(listener: (report: HealthReport) => void): void {\n    listeners.add(listener);\n  }\n  function removeListener(listener: (report: HealthReport) => void): void {\n    listeners.delete(listener);\n  }\n  function getMetricHistory(name: string): number[] {\n    const m = metricsMap.get(name);\n    return m ? [...m.history] : [];\n  }\n  function clearHistory(): void {\n    for (const m of metricsMap.values()) m.history = [];\n  }\n\n  initializeMetrics();\n  startMonitoring();\n\n  return {\n    updateMetric,\n    getHealthReport,\n    addListener,\n    removeListener,\n    stop,\n    getMetricHistory,\n    clearHistory,\n  };\n}\n\n// Global singleton\nlet _monitor: HealthMonitorInstance | null = null;\n\n/**\n * Get the global health monitor singleton instance.\n */\nexport function getHealthMonitor(): HealthMonitorInstance {\n  if (!_monitor) _monitor = createHealthMonitor();\n  return _monitor;\n}\n\n/**\n * Update a health metric from anywhere in the framework.\n */\nexport function updateHealthMetric(name: string, value: number): void {\n  getHealthMonitor().updateMetric(name, value);\n}\n\n/**\n * Get the current health status report.\n */\nexport function getHealthStatus(): HealthReport {\n  return getHealthMonitor().getHealthReport();\n}\n","/**\n * keep-alive.ts\n *\n * Preserves component state when a component is removed from and later\n * re-inserted into the DOM. By default, custom elements lose all JavaScript\n * state when `disconnectedCallback` fires. `cer-keep-alive` intercepts\n * that lifecycle and keeps the child element alive in memory, re-attaching\n * it when a matching component is re-inserted.\n *\n * ## Usage\n *\n * Wrap any custom element with `<cer-keep-alive>`:\n * ```html\n * <cer-keep-alive>\n *   <my-counter></my-counter>\n * </cer-keep-alive>\n * ```\n *\n * Or register it programmatically:\n * ```ts\n * import { registerKeepAlive } from '@jasonshimmy/custom-elements-runtime';\n * registerKeepAlive(); // registers <cer-keep-alive> globally\n * ```\n *\n * ## How it works\n *\n * `cer-keep-alive` uses a slotted layout. When a slotted child component is\n * about to leave the DOM (via a re-render of a parent), KeepAlive intercepts\n * `slotchange` events and preserves the detached child element in an internal\n * cache keyed by tag name. When the same tag re-appears in the slot, the\n * cached element is re-inserted, restoring all JavaScript state.\n *\n * ## Limitations\n *\n * - The first slot child per tag name is cached. Multiple children with the\n *   same tag use separate cache entries keyed by their `id` attribute.\n * - Only components registered with the same tag name are matched.\n * - Cache entries can be manually evicted with `clearCache()`.\n */\n\n/** Cache key = tagName[:id] */\ntype CacheKey = string;\n\n/**\n * Register the `<cer-keep-alive>` custom element.\n * Safe to call multiple times — subsequent calls are no-ops.\n *\n * @example\n * ```ts\n * import { registerKeepAlive } from '@jasonshimmy/custom-elements-runtime';\n * registerKeepAlive();\n * ```\n */\nexport function registerKeepAlive(): void {\n  if (\n    typeof window === 'undefined' ||\n    typeof customElements === 'undefined' ||\n    customElements.get('cer-keep-alive')\n  ) {\n    return;\n  }\n\n  customElements.define('cer-keep-alive', createKeepAliveClass());\n}\n\nfunction createKeepAliveClass(): CustomElementConstructor {\n  return class CerKeepAlive extends HTMLElement {\n    /** Preserved component instances keyed by tag[:id]. */\n    private _cache = new Map<CacheKey, Element>();\n    private _slot: HTMLSlotElement | null = null;\n    private _slotListener: (() => void) | null = null;\n\n    connectedCallback(): void {\n      if (!this.shadowRoot) {\n        this.attachShadow({ mode: 'open' });\n      }\n\n      if (!this.shadowRoot!.querySelector('slot')) {\n        this.shadowRoot!.innerHTML = '<slot></slot>';\n      }\n\n      this._slot = this.shadowRoot!.querySelector('slot');\n      if (this._slot) {\n        this._slotListener = () => this._handleSlotChange();\n        this._slot.addEventListener('slotchange', this._slotListener);\n        // Process current slotted content\n        this._handleSlotChange();\n      }\n    }\n\n    disconnectedCallback(): void {\n      if (this._slot && this._slotListener) {\n        this._slot.removeEventListener('slotchange', this._slotListener);\n      }\n      this._slotListener = null;\n    }\n\n    /**\n     * Evict a cached element by its cache key (`tagName` or `tagName:id`).\n     * The evicted element is disconnected and removed from the cache.\n     */\n    clearCache(key?: CacheKey): void {\n      if (key) {\n        this._cache.delete(key);\n      } else {\n        this._cache.clear();\n      }\n    }\n\n    private _handleSlotChange(): void {\n      if (!this._slot) return;\n\n      const slottedElements = this._slot.assignedElements({ flatten: true });\n\n      for (const child of slottedElements) {\n        const cacheKey = this._buildCacheKey(child);\n\n        if (!this._cache.has(cacheKey)) {\n          // New element — cache it so we can restore it later\n          this._cache.set(cacheKey, child);\n        } else {\n          const cached = this._cache.get(cacheKey)!;\n          if (cached !== child) {\n            // A different instance appeared for the same slot.\n            // Replace it with the cached instance to restore state.\n            try {\n              child.parentNode?.replaceChild(cached, child);\n            } catch {\n              // If replacement fails, update the cache with the new element\n              this._cache.set(cacheKey, child);\n            }\n          }\n        }\n      }\n    }\n\n    private _buildCacheKey(el: Element): CacheKey {\n      const tag = el.tagName.toLowerCase();\n      const id = el.getAttribute('id');\n      return id ? `${tag}:${id}` : tag;\n    }\n  };\n}\n","/**\n * Built-in utility components provided by the custom-elements runtime.\n *\n * These components are registered automatically when this module is imported.\n * They are designed to be minimal, tree-shakeable, and zero-dependency.\n *\n * Included components:\n * - `<cer-suspense>` — Shows a fallback while async work is pending\n * - `<cer-error-boundary>` — Catches render errors and shows a fallback UI\n * - `<cer-keep-alive>` — Preserves component state across DOM removal/re-insertion\n */\n\nimport { component } from './component';\nimport { html } from './template-compiler';\nimport { ref } from './reactive';\nimport { useProps, useOnError, useExpose } from './hooks';\nimport { registerKeepAlive } from '../keep-alive';\n\n// ── cer-suspense ──────────────────────────────────────────────────────────────\n\n/**\n * A built-in component that conditionally renders either the default slot\n * content or the `fallback` slot content, controlled by the `pending` prop.\n *\n * Use the `pending` attribute/property to signal that async work is in\n * progress; the component will swap to the `fallback` slot until `pending`\n * becomes falsy.\n *\n * @example\n * ```html\n * <cer-suspense pending>\n *   <!-- shown when pending=false -->\n *   <my-async-content></my-async-content>\n *\n *   <!-- shown while pending=true -->\n *   <div slot=\"fallback\">Loading…</div>\n * </cer-suspense>\n * ```\n *\n * @example Programmatic usage\n * ```ts\n * component('my-data-loader', () => {\n *   const pending = ref(true);\n *   useOnConnected(async () => {\n *     await fetchData();\n *     pending.value = false;\n *   });\n *   return html`\n *     <cer-suspense pending=\"${pending.value}\">\n *       <my-data-view></my-data-view>\n *       <div slot=\"fallback\">Loading data…</div>\n *     </cer-suspense>\n *   `;\n * });\n * ```\n */\nexport function registerSuspense(): void {\n  if (typeof customElements !== 'undefined' && customElements.get('cer-suspense')) return;\n\n  component('cer-suspense', () => {\n    const { pending } = useProps({ pending: false });\n\n    return pending\n      ? html`<slot name=\"fallback\"><span>Loading…</span></slot>`\n      : html`<slot></slot>`;\n  });\n}\n\n// ── cer-error-boundary ────────────────────────────────────────────────────────\n\n/**\n * A built-in component that catches errors thrown during child component\n * rendering and displays a fallback UI instead of crashing the page.\n *\n * Errors are caught via the `useOnError` lifecycle hook. Once an error is\n * caught the component switches to showing the `fallback` named slot (or a\n * default \"Something went wrong\" message if no fallback slot is provided).\n *\n * Call the custom `reset()` method on the element to clear the error and\n * attempt re-rendering the default slot.\n *\n * @example\n * ```html\n * <cer-error-boundary>\n *   <my-risky-component></my-risky-component>\n *\n *   <div slot=\"fallback\">\n *     <p>Something went wrong. <button onclick=\"this.closest('cer-error-boundary').reset()\">Retry</button></p>\n *   </div>\n * </cer-error-boundary>\n * ```\n */\nexport function registerErrorBoundary(): void {\n  if (typeof customElements !== 'undefined' && customElements.get('cer-error-boundary')) return;\n\n  component('cer-error-boundary', () => {\n    const hasError = ref(false);\n    const errorMessage = ref('');\n\n    useOnError((err: Error) => {\n      hasError.value = true;\n      errorMessage.value = err.message;\n    });\n\n    // Expose a reset() method so parent templates can call\n    // `errorBoundaryRef.value.reset()` to clear the error and retry.\n    // Also expose an internal `_cerHandleChildError` receiver so that the\n    // component runtime can propagate uncaught errors from slotted child\n    // components up to the nearest ancestor <cer-error-boundary>.\n    useExpose({\n      _cerHandleChildError: (err: unknown) => {\n        // Use peek() to read the current value without registering a reactive\n        // dependency — the child component's render context may be active when\n        // this handler runs, and we must not accidentally subscribe the child\n        // to this boundary's internal state.\n        if (!hasError.peek()) {\n          hasError.value = true;\n          errorMessage.value = err instanceof Error ? err.message : String(err);\n        }\n      },\n      reset: () => {\n        hasError.value = false;\n        errorMessage.value = '';\n      },\n    });\n\n    return hasError.value\n      ? html`<slot name=\"fallback\"\n          ><div role=\"alert\">\n            <strong>Something went wrong.</strong>\n            ${errorMessage.value ? html`<p>${errorMessage.value}</p>` : html``}\n          </div></slot\n        >`\n      : html`<slot></slot>`;\n  });\n}\n\n// ── Auto-register all components ─────────────────────────────────────────────\n\n/**\n * Register all built-in components (`cer-suspense`, `cer-error-boundary`,\n * `cer-keep-alive`).\n * Safe to call multiple times — each registration is guarded by a\n * `customElements.get()` check.\n */\nexport function registerBuiltinComponents(): void {\n  registerSuspense();\n  registerErrorBoundary();\n  registerKeepAlive();\n}\n","/**\n * teleport.ts\n *\n * Renders virtual DOM content into an arbitrary DOM target located outside\n * the current component's Shadow Root. Useful for modals, tooltips, popovers,\n * and any UI that must visually escape the component boundary.\n *\n * @example\n * ```ts\n * import { component, html, ref, useOnDisconnected, useTeleport } from '@jasonshimmy/custom-elements-runtime';\n *\n * component('modal-trigger', () => {\n *   const isOpen = ref(false);\n *\n *   // Render modal content into <body> outside the shadow root\n *   const { portal, destroy } = useTeleport('#modal-root');\n *   useOnDisconnected(destroy);\n *\n *   // Call portal() to update the teleported content on each render\n *   if (isOpen.value) {\n *     portal(html`<div class=\"modal\">\n *       <h2>Hello</h2>\n *       <button @click=\"${() => (isOpen.value = false)}\">Close</button>\n *     </div>`);\n *   } else {\n *     portal(null);\n *   }\n *\n *   return html`\n *     <button @click=\"${() => (isOpen.value = true)}\">Open modal</button>\n *   `;\n * });\n * ```\n */\n\nimport type { VNode, VDomRefs } from './runtime/types';\nimport { vdomRenderer } from './runtime/vdom';\nimport { reactiveSystem } from './runtime/reactive';\nimport { getCurrentComponentContext, isDiscoveryRender } from './runtime/hooks';\n\n/** Handle returned by {@link useTeleport} for managing a portal. */\nexport interface TeleportHandle {\n  /**\n   * Render (or clear) content at the teleport target.\n   * Pass `null` or `undefined` to remove previously rendered content.\n   */\n  portal(content: VNode | VNode[] | null | undefined): void;\n\n  /**\n   * Destroy the teleport container and clean up all rendered content.\n   * Call this in `useOnDisconnected` to prevent memory leaks.\n   */\n  destroy(): void;\n}\n\n/**\n * Create a teleport portal that renders content outside the current Shadow Root.\n *\n * @param target - A CSS selector string or an `Element` reference to render into.\n * @returns A {@link TeleportHandle} with `portal()` (update content) and `destroy()` (cleanup).\n *\n * @example\n * ```ts\n * import { component, html, useOnDisconnected, useTeleport } from '@jasonshimmy/custom-elements-runtime';\n *\n * component('my-tooltip', () => {\n *   const { portal, destroy } = useTeleport('body');\n *   useOnDisconnected(destroy);\n *\n *   portal(html`<div class=\"tooltip\">Tooltip content</div>`);\n *   return html`<span>Hover me</span>`;\n * });\n * ```\n */\nexport function useTeleport(target: string | Element): TeleportHandle {\n  // SSR guard\n  if (typeof document === 'undefined') {\n    return { portal: () => {}, destroy: () => {} };\n  }\n\n  // During discovery render the component is not yet mounted — return a no-op\n  // handle so the library can detect props/hooks without side-effects.\n  if (isDiscoveryRender()) {\n    return { portal: () => {}, destroy: () => {} };\n  }\n\n  // If called inside a component render, use the reactive state-index slot\n  // mechanism to ensure the same handle is returned on every re-render of the\n  // same component instance.  Without this, each re-render would create a new\n  // <cer-teleport> container in the target, leaking all but the last one.\n  const ctx = getCurrentComponentContext();\n  if (ctx) {\n    // getOrCreateState uses an incrementing stateIndex that is reset to 0 at\n    // the start of each render, so the same call site always gets the same slot.\n    const slot = reactiveSystem.getOrCreateState<TeleportHandle | null>(null);\n    const existing = slot.peek();\n    if (existing !== null) {\n      return existing;\n    }\n    // First render: create the handle and store it without triggering a\n    // reactive update (initSilent bypasses triggerUpdate).\n    // Pass a slot-invalidation callback so that destroy() clears the slot,\n    // allowing a reconnected component to create a fresh container.\n    const handle = _createTeleportHandle(target, () => slot.initSilent(null));\n    slot.initSilent(handle);\n    return handle;\n  }\n\n  // Outside a component context (e.g. called directly in tests or scripts):\n  // fall through to a non-cached, non-stable handle.\n  return _createTeleportHandle(target);\n}\n\n/** Internal: create a fresh teleport handle pointing at `target`.\n * @param onDestroy - Optional callback invoked after cleanup in destroy(), used\n *   to invalidate a cached slot so the next render creates a fresh handle.\n */\nfunction _createTeleportHandle(\n  target: string | Element,\n  onDestroy?: () => void,\n): TeleportHandle {\n  const targetEl =\n    typeof target === 'string'\n      ? (document.querySelector(target) as Element | null)\n      : target;\n\n  if (!targetEl) {\n    console.warn(\n      `[useTeleport] Target \"${String(target)}\" not found in the document. ` +\n        'Teleported content will not be rendered.',\n    );\n    return { portal: () => {}, destroy: () => {} };\n  }\n\n  // Create a dedicated container so we never clobber sibling content.\n  const container = document.createElement('cer-teleport');\n  container.dataset.cerTeleport = '';\n  targetEl.appendChild(container);\n\n  // Shared refs bag — passed consistently so ref directives work across updates.\n  const refs: VDomRefs = {};\n\n  const handle: TeleportHandle = {\n    portal(content: VNode | VNode[] | null | undefined): void {\n      const nodes: VNode[] =\n        content == null ? [] : Array.isArray(content) ? content : [content];\n      // vdomRenderer stores _prevVNode/_prevDom on the root object for diffing.\n      // Casting to ShadowRoot is safe: we only access properties that exist on\n      // HTMLElement (firstChild, appendChild, replaceChild, childNodes).\n      vdomRenderer(container as unknown as ShadowRoot, nodes, undefined, refs);\n    },\n\n    destroy(): void {\n      // Render empty nodes to clean up event listeners and refs.\n      try {\n        vdomRenderer(container as unknown as ShadowRoot, [], undefined, refs);\n      } catch {\n        /* best-effort cleanup */\n      }\n      if (container.parentNode) {\n        container.parentNode.removeChild(container);\n      }\n      // Invalidate the cached slot so that if the component reconnects and\n      // re-renders, useTeleport() creates a fresh container rather than\n      // reusing this destroyed one.\n      onDestroy?.();\n    },\n  };\n\n  return handle;\n}\n"],"names":["hydrateApp","root","MAX_HISTORY_SIZE","CHECK_INTERVAL","calcStatus","value","threshold","metricName","buildRecommendations","metrics","out","createHealthMonitor","metricsMap","listeners","intervalId","addMetric","name","initializeMetrics","updateMetric","metric","getHealthReport","snapshot","overall","updateMemoryMetrics","mem","m","prev","curr","notifyListeners","report","listener","e","devError","performHealthCheck","devWarn","startMonitoring","stop","addListener","removeListener","getMetricHistory","clearHistory","_monitor","getHealthMonitor","updateHealthMetric","getHealthStatus","registerKeepAlive","createKeepAliveClass","key","slottedElements","child","cacheKey","cached","el","tag","id","registerSuspense","component","pending","useProps","html","registerErrorBoundary","hasError","ref","errorMessage","useOnError","err","useExpose","registerBuiltinComponents","useTeleport","target","isDiscoveryRender","getCurrentComponentContext","slot","reactiveSystem","existing","handle","_createTeleportHandle","onDestroy","targetEl","container","refs","content","nodes","vdomRenderer"],"mappings":"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"}

package/dist/custom-elements-runtime.jit-css.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./helpers-DeWjSmOl.cjs"),r=require("./hooks-BrrLKSub.cjs"),e=require("./style-D40DsIqJ.cjs");function a(s){if(o.isDiscoveryRender())return;const t=r.getCurrentComponentContext()?._host?.shadowRoot??null;t?e.registerJITCSSComponent(t,s):e.enableJITCSS(s)}function n(s){return s}exports.useDesignTokens=r.useDesignTokens;exports.useGlobalStyle=r.useGlobalStyle;exports.colors=e.colors;exports.containerVariants=e.containerVariants;exports.disableJITCSS=e.disableJITCSS;exports.enableJITCSS=e.enableJITCSS;exports.extractClassesFromHTML=e.extractClassesFromHTML;exports.getJITCSSOptions=e.getJITCSSOptions;exports.isJITCSSEnabled=e.isJITCSSEnabled;exports.isJITCSSEnabledFor=e.isJITCSSEnabledFor;exports.jitCSS=e.jitCSS;exports.mediaVariants=e.mediaVariants;exports.parseArbitrary=e.parseArbitrary;exports.parseColorClass=e.parseColorClass;exports.parseColorWithOpacity=e.parseColorWithOpacity;exports.parseGradientColorStop=e.parseGradientColorStop;exports.parseSpacing=e.parseSpacing;exports.registerJITCSSComponent=e.registerJITCSSComponent;exports.selectorVariants=e.selectorVariants;exports.utilityMap=e.utilityMap;exports.cls=n;exports.useJITCSS=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./hooks-x8M4knLc.cjs"),e=require("./style-D40DsIqJ.cjs");function o(s){if(t.isDiscoveryRender$1())return;const r=t.getCurrentComponentContext()?._host?.shadowRoot??null;r?e.registerJITCSSComponent(r,s):e.enableJITCSS(s)}function a(s){return s}exports.useDesignTokens=t.useDesignTokens;exports.useGlobalStyle=t.useGlobalStyle;exports.colors=e.colors;exports.containerVariants=e.containerVariants;exports.disableJITCSS=e.disableJITCSS;exports.enableJITCSS=e.enableJITCSS;exports.extractClassesFromHTML=e.extractClassesFromHTML;exports.getJITCSSOptions=e.getJITCSSOptions;exports.isJITCSSEnabled=e.isJITCSSEnabled;exports.isJITCSSEnabledFor=e.isJITCSSEnabledFor;exports.jitCSS=e.jitCSS;exports.mediaVariants=e.mediaVariants;exports.parseArbitrary=e.parseArbitrary;exports.parseColorClass=e.parseColorClass;exports.parseColorWithOpacity=e.parseColorWithOpacity;exports.parseGradientColorStop=e.parseGradientColorStop;exports.parseSpacing=e.parseSpacing;exports.registerJITCSSComponent=e.registerJITCSSComponent;exports.selectorVariants=e.selectorVariants;exports.utilityMap=e.utilityMap;exports.cls=a;exports.useJITCSS=o;
 //# sourceMappingURL=custom-elements-runtime.jit-css.cjs.js.map

package/dist/custom-elements-runtime.jit-css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"custom-elements-runtime.jit-css.cjs.js","sources":["../src/lib/runtime/jit-hooks.ts","../src/lib/jit-css.ts"],"sourcesContent":["/**\n * JIT CSS hooks — lives in a separate module so that hooks.ts does not\n * statically import style.ts. Consumers who never call `useJITCSS` will\n * have the entire JIT engine tree-shaken out of their bundle.\n */\n\nimport { isDiscoveryRender as _isDiscoveryRenderFn } from './discovery-state';\nimport { getCurrentComponentContext } from './hooks';\nimport {\n  enableJITCSS,\n  registerJITCSSComponent,\n  type JITCSSOptions,\n} from './style';\n\n/**\n * Configure the JIT CSS engine for the current session.\n * This is a convenience wrapper around `enableJITCSS()` that can be called\n * inside a component render function or at module initialisation time.\n *\n * @example\n * ```ts\n * component('my-component', () => {\n *   // Enable extended Tailwind colors so bg-blue-500, text-violet-700, etc. generate CSS\n *   useJITCSS({ extendedColors: true });\n *   return html`<div class=\"bg-blue-500 text-white\">Hello</div>`;\n * });\n * ```\n *\n * @example\n * ```ts\n * // At app entry – enable once for all components\n * useJITCSS({ extendedColors: true, customColors: { brand: { '500': '#e63946' } } });\n * ```\n */\nexport function useJITCSS(options?: JITCSSOptions): void {\n  // During discovery renders (component registration phase) there is no real\n  // shadow root. Without this guard, useJITCSS() falls through to\n  // enableJITCSS() and globally enables JIT CSS for every component — exactly\n  // the opt-in behaviour we are trying to prevent.\n  if (_isDiscoveryRenderFn()) return;\n\n  // When called inside a component render function, register this component's\n  // shadow root for per-component JIT CSS opt-in. Context is always set during\n  // a real render; it may be absent (null) or missing _host when called at app\n  // startup level (outside any component context).\n  const host = (getCurrentComponentContext() as { _host?: Element } | null)\n    ?._host;\n  const shadowRoot = host?.shadowRoot ?? null;\n\n  if (shadowRoot) {\n    // Per-component opt-in: register this shadow root only.\n    registerJITCSSComponent(shadowRoot, options);\n  } else {\n    // App-level call (outside component context) — enable for all components\n    // globally, preserving v2 behaviour when called at the entry point.\n    enableJITCSS(options);\n  }\n}\n\nexport type { JITCSSOptions };\n","/**\n * JIT CSS entry point — opt-in import for the full JIT CSS engine.\n *\n * @example\n * ```ts\n * import {\n *   useJITCSS,\n *   enableJITCSS,\n * } from '@jasonshimmy/custom-elements-runtime/jit-css';\n * ```\n */\n\n// Hooks\nexport { useJITCSS } from './runtime/jit-hooks';\nexport { useDesignTokens, useGlobalStyle } from './runtime/hooks';\nexport type { JITCSSOptions, DesignTokens } from './runtime/hooks';\n\n// Global configuration\nexport {\n  enableJITCSS,\n  disableJITCSS,\n  isJITCSSEnabled,\n  isJITCSSEnabledFor,\n  registerJITCSSComponent,\n  getJITCSSOptions,\n  jitCSS,\n  extractClassesFromHTML,\n  parseColorClass,\n  parseColorWithOpacity,\n  parseGradientColorStop,\n  parseSpacing,\n  parseArbitrary,\n  utilityMap,\n  selectorVariants,\n  mediaVariants,\n  containerVariants,\n  colors,\n} from './runtime/style';\n\n/**\n * A no-op identity function that signals to development tools (IDE\n * autocomplete, linters, PurgeCSS-style scanners) that the string contains\n * JIT CSS utility class names.\n *\n * At runtime this is simply `return className` — zero overhead.\n *\n * @example\n * ```ts\n * import { cls } from '@jasonshimmy/custom-elements-runtime/jit-css';\n *\n * const containerClasses = cls('flex items-center gap-4 bg-primary-500 text-white');\n * ```\n */\nexport function cls(className: string): string {\n  return className;\n}\n"],"names":["useJITCSS","options","_isDiscoveryRenderFn","shadowRoot","getCurrentComponentContext","registerJITCSSComponent","enableJITCSS","cls","className"],"mappings":"8LAkCO,SAASA,EAAUC,EAA+B,CAKvD,GAAIC,EAAAA,oBAAwB,OAQ5B,MAAMC,EAFQC,EAAAA,8BACV,OACqB,YAAc,KAEnCD,EAEFE,EAAAA,wBAAwBF,EAAYF,CAAO,EAI3CK,EAAAA,aAAaL,CAAO,CAExB,CCJO,SAASM,EAAIC,EAA2B,CAC7C,OAAOA,CACT"}
+{"version":3,"file":"custom-elements-runtime.jit-css.cjs.js","sources":["../src/lib/runtime/jit-hooks.ts","../src/lib/jit-css.ts"],"sourcesContent":["/**\n * JIT CSS hooks — lives in a separate module so that hooks.ts does not\n * statically import style.ts. Consumers who never call `useJITCSS` will\n * have the entire JIT engine tree-shaken out of their bundle.\n */\n\nimport { isDiscoveryRender as _isDiscoveryRenderFn } from './discovery-state';\nimport { getCurrentComponentContext } from './hooks';\nimport {\n  enableJITCSS,\n  registerJITCSSComponent,\n  type JITCSSOptions,\n} from './style';\n\n/**\n * Configure the JIT CSS engine for the current session.\n * This is a convenience wrapper around `enableJITCSS()` that can be called\n * inside a component render function or at module initialisation time.\n *\n * @example\n * ```ts\n * component('my-component', () => {\n *   // Enable extended Tailwind colors so bg-blue-500, text-violet-700, etc. generate CSS\n *   useJITCSS({ extendedColors: true });\n *   return html`<div class=\"bg-blue-500 text-white\">Hello</div>`;\n * });\n * ```\n *\n * @example\n * ```ts\n * // At app entry – enable once for all components\n * useJITCSS({ extendedColors: true, customColors: { brand: { '500': '#e63946' } } });\n * ```\n */\nexport function useJITCSS(options?: JITCSSOptions): void {\n  // During discovery renders (component registration phase) there is no real\n  // shadow root. Without this guard, useJITCSS() falls through to\n  // enableJITCSS() and globally enables JIT CSS for every component — exactly\n  // the opt-in behaviour we are trying to prevent.\n  if (_isDiscoveryRenderFn()) return;\n\n  // When called inside a component render function, register this component's\n  // shadow root for per-component JIT CSS opt-in. Context is always set during\n  // a real render; it may be absent (null) or missing _host when called at app\n  // startup level (outside any component context).\n  const host = (getCurrentComponentContext() as { _host?: Element } | null)\n    ?._host;\n  const shadowRoot = host?.shadowRoot ?? null;\n\n  if (shadowRoot) {\n    // Per-component opt-in: register this shadow root only.\n    registerJITCSSComponent(shadowRoot, options);\n  } else {\n    // App-level call (outside component context) — enable for all components\n    // globally, preserving v2 behaviour when called at the entry point.\n    enableJITCSS(options);\n  }\n}\n\nexport type { JITCSSOptions };\n","/**\n * JIT CSS entry point — opt-in import for the full JIT CSS engine.\n *\n * @example\n * ```ts\n * import {\n *   useJITCSS,\n *   enableJITCSS,\n * } from '@jasonshimmy/custom-elements-runtime/jit-css';\n * ```\n */\n\n// Hooks\nexport { useJITCSS } from './runtime/jit-hooks';\nexport { useDesignTokens, useGlobalStyle } from './runtime/hooks';\nexport type { JITCSSOptions, DesignTokens } from './runtime/hooks';\n\n// Global configuration\nexport {\n  enableJITCSS,\n  disableJITCSS,\n  isJITCSSEnabled,\n  isJITCSSEnabledFor,\n  registerJITCSSComponent,\n  getJITCSSOptions,\n  jitCSS,\n  extractClassesFromHTML,\n  parseColorClass,\n  parseColorWithOpacity,\n  parseGradientColorStop,\n  parseSpacing,\n  parseArbitrary,\n  utilityMap,\n  selectorVariants,\n  mediaVariants,\n  containerVariants,\n  colors,\n} from './runtime/style';\n\n/**\n * A no-op identity function that signals to development tools (IDE\n * autocomplete, linters, PurgeCSS-style scanners) that the string contains\n * JIT CSS utility class names.\n *\n * At runtime this is simply `return className` — zero overhead.\n *\n * @example\n * ```ts\n * import { cls } from '@jasonshimmy/custom-elements-runtime/jit-css';\n *\n * const containerClasses = cls('flex items-center gap-4 bg-primary-500 text-white');\n * ```\n */\nexport function cls(className: string): string {\n  return className;\n}\n"],"names":["useJITCSS","options","_isDiscoveryRenderFn","shadowRoot","getCurrentComponentContext","registerJITCSSComponent","enableJITCSS","cls","className"],"mappings":"0JAkCO,SAASA,EAAUC,EAA+B,CAKvD,GAAIC,EAAAA,sBAAwB,OAQ5B,MAAMC,EAFQC,EAAAA,8BACV,OACqB,YAAc,KAEnCD,EAEFE,EAAAA,wBAAwBF,EAAYF,CAAO,EAI3CK,EAAAA,aAAaL,CAAO,CAExB,CCJO,SAASM,EAAIC,EAA2B,CAC7C,OAAOA,CACT"}

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

@@ -1,38 +1,37 @@
-import { A as o } from "./helpers-CweFZFWU.js";
-import { g as r } from "./hooks-DyShDHKo.js";
-import { f, j as u } from "./hooks-DyShDHKo.js";
-import { r as e, e as t } from "./style-BmyOIMcU.js";
-import { c as T, a as b, d as g, b as h, g as I, i as J, f as x, j as y, m as j, p as R, h as V, k, l as w, n as A, s as D, u as E } from "./style-BmyOIMcU.js";
-function p(s) {
-  if (o()) return;
-  const a = r()?._host?.shadowRoot ?? null;
-  a ? e(a, s) : t(s);
+import { g as o, Q as e } from "./hooks-xWZhQHco.js";
+import { o as m, t as u } from "./hooks-xWZhQHco.js";
+import { r, e as t } from "./style-BmyOIMcU.js";
+import { c as f, a as T, d as b, b as g, g as h, i as I, f as J, j as x, m as y, p as R, h as V, k as j, l as k, n as w, s as D, u as E } from "./style-BmyOIMcU.js";
+function S(s) {
+  if (e()) return;
+  const a = o()?._host?.shadowRoot ?? null;
+  a ? r(a, s) : t(s);
 }
-function C(s) {
+function p(s) {
   return s;
 }
 export {
-  C as cls,
-  T as colors,
-  b as containerVariants,
-  g as disableJITCSS,
+  p as cls,
+  f as colors,
+  T as containerVariants,
+  b as disableJITCSS,
   t as enableJITCSS,
-  h as extractClassesFromHTML,
-  I as getJITCSSOptions,
-  J as isJITCSSEnabled,
-  x as isJITCSSEnabledFor,
-  y as jitCSS,
-  j as mediaVariants,
+  g as extractClassesFromHTML,
+  h as getJITCSSOptions,
+  I as isJITCSSEnabled,
+  J as isJITCSSEnabledFor,
+  x as jitCSS,
+  y as mediaVariants,
   R as parseArbitrary,
   V as parseColorClass,
-  k as parseColorWithOpacity,
-  w as parseGradientColorStop,
-  A as parseSpacing,
-  e as registerJITCSSComponent,
+  j as parseColorWithOpacity,
+  k as parseGradientColorStop,
+  w as parseSpacing,
+  r as registerJITCSSComponent,
   D as selectorVariants,
-  f as useDesignTokens,
+  m as useDesignTokens,
   u as useGlobalStyle,
-  p as useJITCSS,
+  S as useJITCSS,
   E as utilityMap
 };
 //# sourceMappingURL=custom-elements-runtime.jit-css.es.js.map

package/dist/custom-elements-runtime.jit-css.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"custom-elements-runtime.jit-css.es.js","sources":["../src/lib/runtime/jit-hooks.ts","../src/lib/jit-css.ts"],"sourcesContent":["/**\n * JIT CSS hooks — lives in a separate module so that hooks.ts does not\n * statically import style.ts. Consumers who never call `useJITCSS` will\n * have the entire JIT engine tree-shaken out of their bundle.\n */\n\nimport { isDiscoveryRender as _isDiscoveryRenderFn } from './discovery-state';\nimport { getCurrentComponentContext } from './hooks';\nimport {\n  enableJITCSS,\n  registerJITCSSComponent,\n  type JITCSSOptions,\n} from './style';\n\n/**\n * Configure the JIT CSS engine for the current session.\n * This is a convenience wrapper around `enableJITCSS()` that can be called\n * inside a component render function or at module initialisation time.\n *\n * @example\n * ```ts\n * component('my-component', () => {\n *   // Enable extended Tailwind colors so bg-blue-500, text-violet-700, etc. generate CSS\n *   useJITCSS({ extendedColors: true });\n *   return html`<div class=\"bg-blue-500 text-white\">Hello</div>`;\n * });\n * ```\n *\n * @example\n * ```ts\n * // At app entry – enable once for all components\n * useJITCSS({ extendedColors: true, customColors: { brand: { '500': '#e63946' } } });\n * ```\n */\nexport function useJITCSS(options?: JITCSSOptions): void {\n  // During discovery renders (component registration phase) there is no real\n  // shadow root. Without this guard, useJITCSS() falls through to\n  // enableJITCSS() and globally enables JIT CSS for every component — exactly\n  // the opt-in behaviour we are trying to prevent.\n  if (_isDiscoveryRenderFn()) return;\n\n  // When called inside a component render function, register this component's\n  // shadow root for per-component JIT CSS opt-in. Context is always set during\n  // a real render; it may be absent (null) or missing _host when called at app\n  // startup level (outside any component context).\n  const host = (getCurrentComponentContext() as { _host?: Element } | null)\n    ?._host;\n  const shadowRoot = host?.shadowRoot ?? null;\n\n  if (shadowRoot) {\n    // Per-component opt-in: register this shadow root only.\n    registerJITCSSComponent(shadowRoot, options);\n  } else {\n    // App-level call (outside component context) — enable for all components\n    // globally, preserving v2 behaviour when called at the entry point.\n    enableJITCSS(options);\n  }\n}\n\nexport type { JITCSSOptions };\n","/**\n * JIT CSS entry point — opt-in import for the full JIT CSS engine.\n *\n * @example\n * ```ts\n * import {\n *   useJITCSS,\n *   enableJITCSS,\n * } from '@jasonshimmy/custom-elements-runtime/jit-css';\n * ```\n */\n\n// Hooks\nexport { useJITCSS } from './runtime/jit-hooks';\nexport { useDesignTokens, useGlobalStyle } from './runtime/hooks';\nexport type { JITCSSOptions, DesignTokens } from './runtime/hooks';\n\n// Global configuration\nexport {\n  enableJITCSS,\n  disableJITCSS,\n  isJITCSSEnabled,\n  isJITCSSEnabledFor,\n  registerJITCSSComponent,\n  getJITCSSOptions,\n  jitCSS,\n  extractClassesFromHTML,\n  parseColorClass,\n  parseColorWithOpacity,\n  parseGradientColorStop,\n  parseSpacing,\n  parseArbitrary,\n  utilityMap,\n  selectorVariants,\n  mediaVariants,\n  containerVariants,\n  colors,\n} from './runtime/style';\n\n/**\n * A no-op identity function that signals to development tools (IDE\n * autocomplete, linters, PurgeCSS-style scanners) that the string contains\n * JIT CSS utility class names.\n *\n * At runtime this is simply `return className` — zero overhead.\n *\n * @example\n * ```ts\n * import { cls } from '@jasonshimmy/custom-elements-runtime/jit-css';\n *\n * const containerClasses = cls('flex items-center gap-4 bg-primary-500 text-white');\n * ```\n */\nexport function cls(className: string): string {\n  return className;\n}\n"],"names":["useJITCSS","options","_isDiscoveryRenderFn","shadowRoot","getCurrentComponentContext","registerJITCSSComponent","enableJITCSS","cls","className"],"mappings":";;;;;AAkCO,SAASA,EAAUC,GAA+B;AAKvD,MAAIC,IAAwB;AAQ5B,QAAMC,IAFQC,KACV,OACqB,cAAc;AAEvC,EAAID,IAEFE,EAAwBF,GAAYF,CAAO,IAI3CK,EAAaL,CAAO;AAExB;ACJO,SAASM,EAAIC,GAA2B;AAC7C,SAAOA;AACT;"}
+{"version":3,"file":"custom-elements-runtime.jit-css.es.js","sources":["../src/lib/runtime/jit-hooks.ts","../src/lib/jit-css.ts"],"sourcesContent":["/**\n * JIT CSS hooks — lives in a separate module so that hooks.ts does not\n * statically import style.ts. Consumers who never call `useJITCSS` will\n * have the entire JIT engine tree-shaken out of their bundle.\n */\n\nimport { isDiscoveryRender as _isDiscoveryRenderFn } from './discovery-state';\nimport { getCurrentComponentContext } from './hooks';\nimport {\n  enableJITCSS,\n  registerJITCSSComponent,\n  type JITCSSOptions,\n} from './style';\n\n/**\n * Configure the JIT CSS engine for the current session.\n * This is a convenience wrapper around `enableJITCSS()` that can be called\n * inside a component render function or at module initialisation time.\n *\n * @example\n * ```ts\n * component('my-component', () => {\n *   // Enable extended Tailwind colors so bg-blue-500, text-violet-700, etc. generate CSS\n *   useJITCSS({ extendedColors: true });\n *   return html`<div class=\"bg-blue-500 text-white\">Hello</div>`;\n * });\n * ```\n *\n * @example\n * ```ts\n * // At app entry – enable once for all components\n * useJITCSS({ extendedColors: true, customColors: { brand: { '500': '#e63946' } } });\n * ```\n */\nexport function useJITCSS(options?: JITCSSOptions): void {\n  // During discovery renders (component registration phase) there is no real\n  // shadow root. Without this guard, useJITCSS() falls through to\n  // enableJITCSS() and globally enables JIT CSS for every component — exactly\n  // the opt-in behaviour we are trying to prevent.\n  if (_isDiscoveryRenderFn()) return;\n\n  // When called inside a component render function, register this component's\n  // shadow root for per-component JIT CSS opt-in. Context is always set during\n  // a real render; it may be absent (null) or missing _host when called at app\n  // startup level (outside any component context).\n  const host = (getCurrentComponentContext() as { _host?: Element } | null)\n    ?._host;\n  const shadowRoot = host?.shadowRoot ?? null;\n\n  if (shadowRoot) {\n    // Per-component opt-in: register this shadow root only.\n    registerJITCSSComponent(shadowRoot, options);\n  } else {\n    // App-level call (outside component context) — enable for all components\n    // globally, preserving v2 behaviour when called at the entry point.\n    enableJITCSS(options);\n  }\n}\n\nexport type { JITCSSOptions };\n","/**\n * JIT CSS entry point — opt-in import for the full JIT CSS engine.\n *\n * @example\n * ```ts\n * import {\n *   useJITCSS,\n *   enableJITCSS,\n * } from '@jasonshimmy/custom-elements-runtime/jit-css';\n * ```\n */\n\n// Hooks\nexport { useJITCSS } from './runtime/jit-hooks';\nexport { useDesignTokens, useGlobalStyle } from './runtime/hooks';\nexport type { JITCSSOptions, DesignTokens } from './runtime/hooks';\n\n// Global configuration\nexport {\n  enableJITCSS,\n  disableJITCSS,\n  isJITCSSEnabled,\n  isJITCSSEnabledFor,\n  registerJITCSSComponent,\n  getJITCSSOptions,\n  jitCSS,\n  extractClassesFromHTML,\n  parseColorClass,\n  parseColorWithOpacity,\n  parseGradientColorStop,\n  parseSpacing,\n  parseArbitrary,\n  utilityMap,\n  selectorVariants,\n  mediaVariants,\n  containerVariants,\n  colors,\n} from './runtime/style';\n\n/**\n * A no-op identity function that signals to development tools (IDE\n * autocomplete, linters, PurgeCSS-style scanners) that the string contains\n * JIT CSS utility class names.\n *\n * At runtime this is simply `return className` — zero overhead.\n *\n * @example\n * ```ts\n * import { cls } from '@jasonshimmy/custom-elements-runtime/jit-css';\n *\n * const containerClasses = cls('flex items-center gap-4 bg-primary-500 text-white');\n * ```\n */\nexport function cls(className: string): string {\n  return className;\n}\n"],"names":["useJITCSS","options","_isDiscoveryRenderFn","shadowRoot","getCurrentComponentContext","registerJITCSSComponent","enableJITCSS","cls","className"],"mappings":";;;;AAkCO,SAASA,EAAUC,GAA+B;AAKvD,MAAIC,IAAwB;AAQ5B,QAAMC,IAFQC,KACV,OACqB,cAAc;AAEvC,EAAID,IAEFE,EAAwBF,GAAYF,CAAO,IAI3CK,EAAaL,CAAO;AAExB;ACJO,SAASM,EAAIC,GAA2B;AAC7C,SAAOA;AACT;"}