@jasonshimmy/custom-elements-runtime 2.8.2 → 3.1.0

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

@@ -1,10 +1,282 @@
-import "./custom-elements-runtime.directives.es.js";
-import { T as r, e as a, f as i, b as n, t as o } from "./transitions-DMJXs_tY.js";
+import { anchorBlock as O } from "./custom-elements-runtime.directives.es.js";
+import { p as P } from "./css-utils-Cg4o1MqY.js";
+const F = {
+  /** Simple fade in/out */
+  fade: {
+    enterFrom: "opacity-0",
+    enterActive: "transition-opacity duration-300 ease-out",
+    enterTo: "opacity-100",
+    leaveFrom: "opacity-100",
+    leaveActive: "transition-opacity duration-200 ease-in",
+    leaveTo: "opacity-0"
+  },
+  /** Slide in from right */
+  "slide-right": {
+    enterFrom: "translate-x-[100%] opacity-0",
+    enterActive: "transition-all duration-300 ease-out",
+    enterTo: "translate-x-[0%] opacity-100",
+    leaveFrom: "translate-x-[0%] opacity-100",
+    leaveActive: "transition-all duration-200 ease-in",
+    leaveTo: "translate-x-[100%] opacity-0"
+  },
+  /** Slide in from left */
+  "slide-left": {
+    enterFrom: "translate-x-[-100%] opacity-0",
+    enterActive: "transition-all duration-300 ease-out",
+    enterTo: "translate-x-[0%] opacity-100",
+    leaveFrom: "translate-x-[0%] opacity-100",
+    leaveActive: "transition-all duration-200 ease-in",
+    leaveTo: "translate-x-[-100%] opacity-0"
+  },
+  /** Slide up from bottom */
+  "slide-up": {
+    enterFrom: "translate-y-[100%] opacity-0",
+    enterActive: "transition-all duration-300 ease-out",
+    enterTo: "translate-y-[0%] opacity-100",
+    leaveFrom: "translate-y-[0%] opacity-100",
+    leaveActive: "transition-all duration-200 ease-in",
+    leaveTo: "translate-y-[100%] opacity-0"
+  },
+  /** Slide down from top */
+  "slide-down": {
+    enterFrom: "translate-y-[-100%] opacity-0",
+    enterActive: "transition-all duration-300 ease-out",
+    enterTo: "translate-y-[0%] opacity-100",
+    leaveFrom: "translate-y-[0%] opacity-100",
+    leaveActive: "transition-all duration-200 ease-in",
+    leaveTo: "translate-y-[-100%] opacity-0"
+  },
+  /** Scale up from center */
+  scale: {
+    enterFrom: "scale-95 opacity-0",
+    enterActive: "transition-all duration-200 ease-out",
+    enterTo: "scale-100 opacity-100",
+    leaveFrom: "scale-100 opacity-100",
+    leaveActive: "transition-all duration-150 ease-in",
+    leaveTo: "scale-95 opacity-0"
+  },
+  /** Scale down to center */
+  "scale-down": {
+    enterFrom: "scale-105 opacity-0",
+    enterActive: "transition-all duration-200 ease-out",
+    enterTo: "scale-100 opacity-100",
+    leaveFrom: "scale-100 opacity-100",
+    leaveActive: "transition-all duration-150 ease-in",
+    leaveTo: "scale-105 opacity-0"
+  },
+  /** Bounce effect */
+  bounce: {
+    enterFrom: "scale-0 opacity-0",
+    enterActive: "transition-all duration-500 ease-out",
+    enterTo: "scale-100 opacity-100",
+    leaveFrom: "scale-100 opacity-100",
+    leaveActive: "transition-all duration-200 ease-in",
+    leaveTo: "scale-0 opacity-0"
+  },
+  /** Zoom and fade */
+  zoom: {
+    enterFrom: "scale-0 opacity-0",
+    enterActive: "transition-all duration-300 ease-out",
+    enterTo: "scale-100 opacity-100",
+    leaveFrom: "scale-100 opacity-100",
+    leaveActive: "transition-all duration-200 ease-in",
+    leaveTo: "scale-0 opacity-0"
+  },
+  /** Flip in */
+  flip: {
+    enterFrom: "rotate-[90deg] opacity-0",
+    enterActive: "transition-all duration-400 ease-out",
+    enterTo: "rotate-[0deg] opacity-100",
+    leaveFrom: "rotate-[0deg] opacity-100",
+    leaveActive: "transition-all duration-300 ease-in",
+    leaveTo: "rotate-[90deg] opacity-0"
+  }
+};
+function H(t, l) {
+  const {
+    preset: o,
+    show: e,
+    mode: s = "default",
+    duration: k,
+    appear: x = !1,
+    css: E = !0,
+    name: L,
+    enterFrom: d,
+    enterActive: f,
+    enterTo: p,
+    leaveFrom: r,
+    leaveActive: c,
+    leaveTo: v,
+    onBeforeEnter: m,
+    onEnter: A,
+    onAfterEnter: T,
+    onEnterCancelled: h,
+    onBeforeLeave: b,
+    onLeave: j,
+    onAfterLeave: w,
+    onLeaveCancelled: B
+  } = t;
+  let a;
+  o && F[o] ? (a = { ...F[o] }, d && (a.enterFrom = d), f && (a.enterActive = f), p && (a.enterTo = p), r && (a.leaveFrom = r), c && (a.leaveActive = c), v && (a.leaveTo = v)) : a = {
+    enterFrom: d,
+    enterActive: f,
+    enterTo: p,
+    leaveFrom: r,
+    leaveActive: c,
+    leaveTo: v
+  };
+  const $ = e && typeof l == "function" ? l() : l, S = L || (o ? `transition-${o}` : "transition"), C = O(
+    e ? $ : [],
+    S
+  );
+  return C._transition = {
+    name: S,
+    classes: a,
+    mode: s,
+    duration: k,
+    appear: x,
+    css: E,
+    state: e ? "visible" : "hidden",
+    hooks: {
+      onBeforeEnter: m,
+      onEnter: A,
+      onAfterEnter: T,
+      onEnterCancelled: h,
+      onBeforeLeave: b,
+      onLeave: j,
+      onAfterLeave: w,
+      onLeaveCancelled: B
+    }
+  }, C;
+}
+function I(t, l) {
+  const {
+    tag: o = "div",
+    moveClass: e = "transition-transform duration-300",
+    preset: s,
+    show: k = !0,
+    mode: x = "default",
+    duration: E,
+    appear: L = !1,
+    css: d = !0,
+    name: f,
+    class: p,
+    style: r,
+    enterFrom: c,
+    enterActive: v,
+    enterTo: m,
+    leaveFrom: A,
+    leaveActive: T,
+    leaveTo: h,
+    onBeforeEnter: b,
+    onEnter: j,
+    onAfterEnter: w,
+    onEnterCancelled: B,
+    onBeforeLeave: a,
+    onLeave: $,
+    onAfterLeave: S,
+    onLeaveCancelled: C
+  } = t;
+  let i;
+  s && F[s] ? (i = { ...F[s] }, c && (i.enterFrom = c), v && (i.enterActive = v), m && (i.enterTo = m), A && (i.leaveFrom = A), T && (i.leaveActive = T), h && (i.leaveTo = h)) : i = {
+    enterFrom: c,
+    enterActive: v,
+    enterTo: m,
+    leaveFrom: A,
+    leaveActive: T,
+    leaveTo: h
+  };
+  const _ = f || (s ? `transition-group-${s}` : "transition-group"), g = [];
+  for (const n of k ? l : [])
+    if (n && typeof n == "object" && n.tag === "#anchor") {
+      const K = Array.isArray(n.children) ? n.children : [];
+      for (const u of K)
+        if (u && typeof u == "object") {
+          const N = {
+            ...u,
+            key: n.key || u.key,
+            props: {
+              ...u.props,
+              _anchorKey: n.key
+              // Preserve original anchor key
+            }
+          };
+          g.push(N);
+        } else
+          g.push(u);
+    } else
+      g.push(n);
+  const G = (() => {
+    if (r)
+      return typeof r == "string" ? r : Object.entries(r).map(([n, K]) => `${n}: ${K}`).join("; ");
+  })();
+  return {
+    tag: o,
+    children: g,
+    key: _,
+    props: {
+      attrs: {
+        ...p ? { class: p } : {},
+        ...G ? { style: G } : {}
+      },
+      _transitionGroup: {
+        name: _,
+        classes: i,
+        moveClass: e,
+        mode: x,
+        duration: E,
+        appear: L,
+        css: d,
+        hooks: {
+          onBeforeEnter: b,
+          onEnter: j,
+          onAfterEnter: w,
+          onEnterCancelled: B,
+          onBeforeLeave: a,
+          onLeave: $,
+          onAfterLeave: S,
+          onLeaveCancelled: C
+        }
+      }
+    }
+  };
+}
+function J(t) {
+  return { ...t };
+}
+let y = null;
+function V() {
+  if (!y) {
+    if (typeof CSSStyleSheet > "u")
+      return y = {
+        cssRules: [],
+        replaceSync: () => {
+        },
+        toString: () => ""
+      }, y;
+    const t = [];
+    Object.values(F).forEach((e) => {
+      e.enterFrom && t.push(e.enterFrom), e.enterActive && t.push(e.enterActive), e.enterTo && t.push(e.enterTo), e.leaveFrom && t.push(e.leaveFrom), e.leaveActive && t.push(e.leaveActive), e.leaveTo && t.push(e.leaveTo);
+    });
+    const l = `<div class="${t.join(" ")}"></div>`, o = P(l);
+    try {
+      y = new CSSStyleSheet(), y.replaceSync(o);
+    } catch {
+      y = {
+        cssRules: [],
+        replaceSync: () => {
+        },
+        toString: () => o || ""
+      };
+    }
+  }
+  return y;
+}
 export {
-  r as Transition,
-  a as TransitionGroup,
-  i as createTransitionPreset,
-  n as getTransitionStyleSheet,
-  o as transitionPresets
+  H as Transition,
+  I as TransitionGroup,
+  J as createTransitionPreset,
+  V as getTransitionStyleSheet,
+  F as transitionPresets
 };
 //# sourceMappingURL=custom-elements-runtime.transitions.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"custom-elements-runtime.transitions.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"custom-elements-runtime.transitions.es.js","sources":["../src/lib/transitions.ts"],"sourcesContent":["/**\n * Transitions module (top-level). This file provides the public Transition\n * and TransitionGroup APIs. It is an explicit entry used by the build so\n * consumers can import transitions separately: `.../transitions`.\n */\n/**\n * Transitions Module\n * Vue-like transition system integrated with JIT CSS\n * Provides Transition and TransitionGroup components for enter/leave animations\n */\n\nimport { anchorBlock } from './directives';\nimport type { VNode } from './runtime/types';\nimport { processJITCSS } from './runtime/render-bridge';\n\n/* --- Types --- */\n\n/**\n * Transition class names for different animation phases\n * All values should be JIT CSS utility classes\n */\nexport interface TransitionClasses {\n  /** Classes applied at the start of enter transition */\n  enterFrom?: string;\n  /** Classes applied during entire enter transition */\n  enterActive?: string;\n  /** Classes applied at the end of enter transition */\n  enterTo?: string;\n  /** Classes applied at the start of leave transition */\n  leaveFrom?: string;\n  /** Classes applied during entire leave transition */\n  leaveActive?: string;\n  /** Classes applied at the end of leave transition */\n  leaveTo?: string;\n}\n\n/**\n * Lifecycle hooks for transition events\n */\nexport interface TransitionHooks {\n  /** Called before enter transition starts */\n  onBeforeEnter?: (el: HTMLElement) => void;\n  /** Called during enter transition (with done callback for manual control) */\n  onEnter?: (el: HTMLElement, done: () => void) => void;\n  /** Called after enter transition completes */\n  onAfterEnter?: (el: HTMLElement) => void;\n  /** Called if enter transition is cancelled */\n  onEnterCancelled?: (el: HTMLElement) => void;\n  /** Called before leave transition starts */\n  onBeforeLeave?: (el: HTMLElement) => void;\n  /** Called during leave transition (with done callback for manual control) */\n  onLeave?: (el: HTMLElement, done: () => void) => void;\n  /** Called after leave transition completes */\n  onAfterLeave?: (el: HTMLElement) => void;\n  /** Called if leave transition is cancelled */\n  onLeaveCancelled?: (el: HTMLElement) => void;\n}\n\n/**\n * Options for Transition component\n */\nexport interface TransitionOptions extends TransitionClasses, TransitionHooks {\n  /** Preset name (fade, slide-right, scale, etc.) */\n  preset?: keyof typeof transitionPresets;\n  /** Whether to show the content */\n  show: boolean;\n  /** Transition mode: default, out-in (leave before enter), in-out (enter before leave) */\n  mode?: 'default' | 'out-in' | 'in-out';\n  /** Custom duration override (ms) */\n  duration?: number | { enter: number; leave: number };\n  /** Whether to apply transition on initial render */\n  appear?: boolean;\n  /** Whether to use CSS transitions (true) or JS-only hooks (false) */\n  css?: boolean;\n  /** Optional name for debugging */\n  name?: string;\n}\n\n/**\n * Options for TransitionGroup component\n */\nexport interface TransitionGroupOptions extends Omit<\n  TransitionOptions,\n  'show'\n> {\n  /** HTML tag for the wrapper element */\n  tag?: string;\n  /** Class applied during move transitions (when items reorder) */\n  moveClass?: string;\n  /** Whether to show the group (defaults to true for TransitionGroup) */\n  show?: boolean;\n  /** CSS classes to apply to the wrapper element (e.g., 'flex gap-4' or 'grid grid-cols-3') */\n  class?: string;\n  /** Inline styles to apply to the wrapper element */\n  style?: string | Record<string, string>;\n}\n\n/* --- Transition Presets --- */\n\n/**\n * Pre-defined transition presets using JIT CSS classes\n * Users can reference these by name or define custom classes\n */\nexport const transitionPresets = {\n  /** Simple fade in/out */\n  fade: {\n    enterFrom: 'opacity-0',\n    enterActive: 'transition-opacity duration-300 ease-out',\n    enterTo: 'opacity-100',\n    leaveFrom: 'opacity-100',\n    leaveActive: 'transition-opacity duration-200 ease-in',\n    leaveTo: 'opacity-0',\n  },\n\n  /** Slide in from right */\n  'slide-right': {\n    enterFrom: 'translate-x-[100%] opacity-0',\n    enterActive: 'transition-all duration-300 ease-out',\n    enterTo: 'translate-x-[0%] opacity-100',\n    leaveFrom: 'translate-x-[0%] opacity-100',\n    leaveActive: 'transition-all duration-200 ease-in',\n    leaveTo: 'translate-x-[100%] opacity-0',\n  },\n\n  /** Slide in from left */\n  'slide-left': {\n    enterFrom: 'translate-x-[-100%] opacity-0',\n    enterActive: 'transition-all duration-300 ease-out',\n    enterTo: 'translate-x-[0%] opacity-100',\n    leaveFrom: 'translate-x-[0%] opacity-100',\n    leaveActive: 'transition-all duration-200 ease-in',\n    leaveTo: 'translate-x-[-100%] opacity-0',\n  },\n\n  /** Slide up from bottom */\n  'slide-up': {\n    enterFrom: 'translate-y-[100%] opacity-0',\n    enterActive: 'transition-all duration-300 ease-out',\n    enterTo: 'translate-y-[0%] opacity-100',\n    leaveFrom: 'translate-y-[0%] opacity-100',\n    leaveActive: 'transition-all duration-200 ease-in',\n    leaveTo: 'translate-y-[100%] opacity-0',\n  },\n\n  /** Slide down from top */\n  'slide-down': {\n    enterFrom: 'translate-y-[-100%] opacity-0',\n    enterActive: 'transition-all duration-300 ease-out',\n    enterTo: 'translate-y-[0%] opacity-100',\n    leaveFrom: 'translate-y-[0%] opacity-100',\n    leaveActive: 'transition-all duration-200 ease-in',\n    leaveTo: 'translate-y-[-100%] opacity-0',\n  },\n\n  /** Scale up from center */\n  scale: {\n    enterFrom: 'scale-95 opacity-0',\n    enterActive: 'transition-all duration-200 ease-out',\n    enterTo: 'scale-100 opacity-100',\n    leaveFrom: 'scale-100 opacity-100',\n    leaveActive: 'transition-all duration-150 ease-in',\n    leaveTo: 'scale-95 opacity-0',\n  },\n\n  /** Scale down to center */\n  'scale-down': {\n    enterFrom: 'scale-105 opacity-0',\n    enterActive: 'transition-all duration-200 ease-out',\n    enterTo: 'scale-100 opacity-100',\n    leaveFrom: 'scale-100 opacity-100',\n    leaveActive: 'transition-all duration-150 ease-in',\n    leaveTo: 'scale-105 opacity-0',\n  },\n\n  /** Bounce effect */\n  bounce: {\n    enterFrom: 'scale-0 opacity-0',\n    enterActive: 'transition-all duration-500 ease-out',\n    enterTo: 'scale-100 opacity-100',\n    leaveFrom: 'scale-100 opacity-100',\n    leaveActive: 'transition-all duration-200 ease-in',\n    leaveTo: 'scale-0 opacity-0',\n  },\n\n  /** Zoom and fade */\n  zoom: {\n    enterFrom: 'scale-0 opacity-0',\n    enterActive: 'transition-all duration-300 ease-out',\n    enterTo: 'scale-100 opacity-100',\n    leaveFrom: 'scale-100 opacity-100',\n    leaveActive: 'transition-all duration-200 ease-in',\n    leaveTo: 'scale-0 opacity-0',\n  },\n\n  /** Flip in */\n  flip: {\n    enterFrom: 'rotate-[90deg] opacity-0',\n    enterActive: 'transition-all duration-400 ease-out',\n    enterTo: 'rotate-[0deg] opacity-100',\n    leaveFrom: 'rotate-[0deg] opacity-100',\n    leaveActive: 'transition-all duration-300 ease-in',\n    leaveTo: 'rotate-[90deg] opacity-0',\n  },\n} as const;\n\n/* --- Core Functions --- */\n\n/**\n * Transition component - wraps content with enter/leave animations\n *\n * @example\n * ```ts\n * // Using a preset\n * ${Transition({ preset: 'fade', show: isVisible.value }, html`<div>Content</div>`)}\n *\n * // Using custom JIT classes\n * ${Transition({\n *   show: isVisible.value,\n *   enterFrom: 'opacity-0 scale-95',\n *   enterActive: 'transition-all duration-300',\n *   enterTo: 'opacity-100 scale-100',\n *   leaveFrom: 'opacity-100 scale-100',\n *   leaveActive: 'transition-all duration-200',\n *   leaveTo: 'opacity-0 scale-95'\n * }, html`<div>Content</div>`)}\n *\n * // With lifecycle hooks\n * ${Transition({\n *   preset: 'slide-right',\n *   show: isVisible.value,\n *   onAfterEnter: (el) => console.log('Entered!'),\n *   onAfterLeave: (el) => console.log('Left!')\n * }, html`<div>Content</div>`)}\n *\n * // Lazy factory — only evaluated when show is true (avoids constructing\n * // expensive VNode trees when the content is hidden)\n * ${Transition({ show: isVisible.value }, () => html`<div>Expensive content</div>`)}\n * ```\n */\nexport function Transition(\n  options: TransitionOptions,\n  content: VNode | VNode[] | (() => VNode | VNode[]),\n): VNode {\n  const {\n    preset,\n    show,\n    mode = 'default',\n    duration,\n    appear = false,\n    css = true,\n    name,\n    enterFrom,\n    enterActive,\n    enterTo,\n    leaveFrom,\n    leaveActive,\n    leaveTo,\n    onBeforeEnter,\n    onEnter,\n    onAfterEnter,\n    onEnterCancelled,\n    onBeforeLeave,\n    onLeave,\n    onAfterLeave,\n    onLeaveCancelled,\n  } = options;\n\n  // Resolve classes from preset or explicit values\n  let transitionClasses: TransitionClasses;\n  if (preset && transitionPresets[preset]) {\n    transitionClasses = { ...transitionPresets[preset] };\n    // Allow overriding preset classes\n    if (enterFrom) transitionClasses.enterFrom = enterFrom;\n    if (enterActive) transitionClasses.enterActive = enterActive;\n    if (enterTo) transitionClasses.enterTo = enterTo;\n    if (leaveFrom) transitionClasses.leaveFrom = leaveFrom;\n    if (leaveActive) transitionClasses.leaveActive = leaveActive;\n    if (leaveTo) transitionClasses.leaveTo = leaveTo;\n  } else {\n    transitionClasses = {\n      enterFrom,\n      enterActive,\n      enterTo,\n      leaveFrom,\n      leaveActive,\n      leaveTo,\n    };\n  }\n\n  // Resolve content: only call the factory when show is true so that expensive\n  // VNode trees (e.g. those that trigger calender builds or heavy computeds)\n  // are never constructed while the transition is hidden. Leave animations\n  // operate on existing DOM nodes and do not require the content VNode.\n  const resolvedContent: VNode | VNode[] =\n    show && typeof content === 'function'\n      ? content()\n      : (content as VNode | VNode[]);\n\n  // Create anchor block with transition metadata\n  const transitionKey =\n    name || (preset ? `transition-${preset}` : 'transition');\n  const transitionVNode = anchorBlock(\n    show ? resolvedContent : [],\n    transitionKey,\n  );\n\n  // Attach metadata for VDOM to consume during patching\n  (transitionVNode as VNode & { _transition?: unknown })._transition = {\n    name: transitionKey,\n    classes: transitionClasses,\n    mode,\n    duration,\n    appear,\n    css,\n    state: show ? 'visible' : 'hidden',\n    hooks: {\n      onBeforeEnter,\n      onEnter,\n      onAfterEnter,\n      onEnterCancelled,\n      onBeforeLeave,\n      onLeave,\n      onAfterLeave,\n      onLeaveCancelled,\n    },\n  };\n\n  return transitionVNode;\n}\n\n/**\n * TransitionGroup component - animates lists with enter/leave/move transitions\n *\n * @example\n * ```ts\n * // Basic usage\n * ${TransitionGroup({\n *   preset: 'slide-right',\n *   tag: 'ul',\n *   moveClass: 'transition-transform duration-300'\n * }, each(items.value, (item) => html`\n *   <li key=\"${item.id}\">${item.text}</li>\n * `))}\n *\n * // With flex layout\n * ${TransitionGroup({\n *   preset: 'fade',\n *   class: 'flex gap-4 flex-wrap'\n * }, each(items.value, (item) => html`\n *   <div key=\"${item.id}\" class=\"shrink-0\">${item.text}</div>\n * `))}\n *\n * // With grid layout\n * ${TransitionGroup({\n *   preset: 'scale',\n *   class: 'grid grid-cols-3 gap-4'\n * }, each(items.value, (item) => html`\n *   <div key=\"${item.id}\">${item.text}</div>\n * `))}\n * ```\n */\nexport function TransitionGroup(\n  options: TransitionGroupOptions,\n  children: VNode[],\n): VNode {\n  const {\n    tag = 'div',\n    moveClass = 'transition-transform duration-300',\n    preset,\n    show = true,\n    mode = 'default',\n    duration,\n    appear = false,\n    css = true,\n    name,\n    class: className,\n    style,\n    enterFrom,\n    enterActive,\n    enterTo,\n    leaveFrom,\n    leaveActive,\n    leaveTo,\n    onBeforeEnter,\n    onEnter,\n    onAfterEnter,\n    onEnterCancelled,\n    onBeforeLeave,\n    onLeave,\n    onAfterLeave,\n    onLeaveCancelled,\n  } = options;\n\n  // Resolve classes from preset or explicit values\n  let transitionClasses: TransitionClasses;\n  if (preset && transitionPresets[preset]) {\n    transitionClasses = { ...transitionPresets[preset] };\n    // Allow overriding preset classes\n    if (enterFrom) transitionClasses.enterFrom = enterFrom;\n    if (enterActive) transitionClasses.enterActive = enterActive;\n    if (enterTo) transitionClasses.enterTo = enterTo;\n    if (leaveFrom) transitionClasses.leaveFrom = leaveFrom;\n    if (leaveActive) transitionClasses.leaveActive = leaveActive;\n    if (leaveTo) transitionClasses.leaveTo = leaveTo;\n  } else {\n    transitionClasses = {\n      enterFrom,\n      enterActive,\n      enterTo,\n      leaveFrom,\n      leaveActive,\n      leaveTo,\n    };\n  }\n\n  // Create wrapper element with transition group metadata\n  const groupKey =\n    name || (preset ? `transition-group-${preset}` : 'transition-group');\n\n  // Flatten anchor block children to enable proper keyed diffing\n  // When each() is used, it creates anchor blocks. We need to extract the actual elements\n  // and give them keys from their anchor blocks for proper reordering\n  const flattenedChildren: VNode[] = [];\n  for (const child of show ? children : []) {\n    if (child && typeof child === 'object' && child.tag === '#anchor') {\n      // Extract children from anchor block\n      const anchorChildren = Array.isArray(child.children)\n        ? child.children\n        : [];\n      for (const anchorChild of anchorChildren) {\n        if (anchorChild && typeof anchorChild === 'object') {\n          // Use anchor block's key for the child element\n          const keyedChild = {\n            ...anchorChild,\n            key: child.key || anchorChild.key,\n            props: {\n              ...anchorChild.props,\n              _anchorKey: child.key, // Preserve original anchor key\n            },\n          };\n          flattenedChildren.push(keyedChild);\n        } else {\n          flattenedChildren.push(anchorChild);\n        }\n      }\n    } else {\n      flattenedChildren.push(child);\n    }\n  }\n\n  // Serialize style object to a CSS string for the attrs record so it matches\n  // the expected primitive attribute value types.\n  const styleAttr = (() => {\n    if (!style) return undefined;\n    if (typeof style === 'string') return style;\n    return Object.entries(style)\n      .map(([k, v]) => `${k}: ${v}`)\n      .join('; ');\n  })();\n\n  return {\n    tag,\n    children: flattenedChildren,\n    key: groupKey,\n    props: {\n      attrs: {\n        ...(className ? { class: className } : {}),\n        ...(styleAttr ? { style: styleAttr } : {}),\n      },\n      _transitionGroup: {\n        name: groupKey,\n        classes: transitionClasses,\n        moveClass,\n        mode,\n        duration,\n        appear,\n        css,\n        hooks: {\n          onBeforeEnter,\n          onEnter,\n          onAfterEnter,\n          onEnterCancelled,\n          onBeforeLeave,\n          onLeave,\n          onAfterLeave,\n          onLeaveCancelled,\n        },\n      },\n    },\n  };\n}\n\n/**\n * Helper to create custom transition presets\n *\n * @example\n * ```ts\n * const customFade = createTransitionPreset({\n *   enterFrom: 'opacity-0',\n *   enterActive: 'transition-opacity duration-500 ease-out',\n *   enterTo: 'opacity-100',\n *   leaveFrom: 'opacity-100',\n *   leaveActive: 'transition-opacity duration-300 ease-in',\n *   leaveTo: 'opacity-0'\n * });\n *\n * ${Transition({ ...customFade, show: visible.value }, content)}\n * ```\n */\nexport function createTransitionPreset(\n  classes: TransitionClasses,\n): TransitionClasses {\n  return { ...classes };\n}\n\n/**\n * Pre-generate CSS for all transition preset classes\n * This ensures the JIT CSS system has the styles ready when transitions are used\n */\nlet transitionStyleSheet: CSSStyleSheet | null = null;\n\n/**\n * Get the global transition stylesheet (creates it if needed)\n */\nexport function getTransitionStyleSheet(): CSSStyleSheet {\n  if (!transitionStyleSheet) {\n    // If constructable stylesheets aren't available (SSR / old browsers),\n    // return a no-op stub to avoid throwing during import or server render.\n    if (typeof CSSStyleSheet === 'undefined') {\n      transitionStyleSheet = {\n        cssRules: [],\n        replaceSync: () => {},\n        toString: () => '',\n      } as unknown as CSSStyleSheet;\n      return transitionStyleSheet;\n    }\n\n    const allClasses: string[] = [];\n\n    // Collect all classes from presets\n    Object.values(transitionPresets).forEach((preset) => {\n      if (preset.enterFrom) allClasses.push(preset.enterFrom);\n      if (preset.enterActive) allClasses.push(preset.enterActive);\n      if (preset.enterTo) allClasses.push(preset.enterTo);\n      if (preset.leaveFrom) allClasses.push(preset.leaveFrom);\n      if (preset.leaveActive) allClasses.push(preset.leaveActive);\n      if (preset.leaveTo) allClasses.push(preset.leaveTo);\n    });\n\n    // Create a fake HTML string with all transition classes\n    const fakeHtml = `<div class=\"${allClasses.join(' ')}\"></div>`;\n\n    // Trigger JIT CSS generation (no-op if JIT CSS engine is not loaded)\n    const generatedCSS = processJITCSS(fakeHtml);\n\n    // Create stylesheet\n    try {\n      transitionStyleSheet = new CSSStyleSheet();\n      transitionStyleSheet.replaceSync(generatedCSS);\n    } catch {\n      // If creating a constructable stylesheet fails for any reason,\n      // fallback to a stub to avoid breaking SSR or older environments.\n      transitionStyleSheet = {\n        cssRules: [],\n        replaceSync: () => {},\n        toString: () => generatedCSS || '',\n      } as unknown as CSSStyleSheet;\n    }\n  }\n\n  return transitionStyleSheet;\n}\n\n"],"names":["transitionPresets","Transition","options","content","preset","show","mode","duration","appear","css","name","enterFrom","enterActive","enterTo","leaveFrom","leaveActive","leaveTo","onBeforeEnter","onEnter","onAfterEnter","onEnterCancelled","onBeforeLeave","onLeave","onAfterLeave","onLeaveCancelled","transitionClasses","resolvedContent","transitionKey","transitionVNode","anchorBlock","TransitionGroup","children","tag","moveClass","className","style","groupKey","flattenedChildren","child","anchorChildren","anchorChild","keyedChild","styleAttr","k","v","createTransitionPreset","classes","transitionStyleSheet","getTransitionStyleSheet","allClasses","fakeHtml","generatedCSS","processJITCSS"],"mappings":"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"}

package/dist/custom-elements-runtime.vite-plugin.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("node:fs"),S=require("node:path"),h=require("./style-D40DsIqJ.cjs"),w="virtual:cer-jit-css",y="\0virtual:cer-jit-css";function m(e,r){r&&Object.keys(r).length>0&&h.enableJITCSS(r);const t=process.cwd(),n=[];for(const l of e){const o=d.globSync(l,{cwd:t}).map(i=>S.resolve(t,i));n.push(...o)}const c=[...new Set(n)],a=new Set;for(const l of c)try{const o=d.readFileSync(l,"utf-8"),i=h.extractClassesFromHTML(o);for(const s of i)a.add(s)}catch{}if(a.size===0)return"";const g=`<div class="${[...a].join(" ")}"></div>`;return h.jitCSS(g)}const b="virtual:cer-ssr-config",I="\0virtual:cer-ssr-config";function T(e){const r=[];if(e.content&&e.content.length>0&&r.push(p({content:e.content,output:e.output,virtualModule:e.virtualModule,extendedColors:e.extendedColors,customColors:e.customColors,disableVariants:e.disableVariants})),e.ssr){const t=e.ssr,n={dsd:t.dsd??!0,dsdPolyfill:t.dsdPolyfill??!0,...t.jit?{jit:t.jit}:{}};r.push({name:"cer-ssr-config",resolveId(c){if(c===b)return I},load(c){if(c===I)return`export default ${JSON.stringify(n)};`}})}return r}function p(e){const{content:r,output:t,virtualModule:n=!0,extendedColors:c,customColors:a,disableVariants:g}=e,l={extendedColors:c,customColors:a,disableVariants:g};let o="",i=null;return{name:"cer-jit-css",buildStart(){const s=process.cwd(),v=new Set;for(const f of r)d.globSync(f,{cwd:s}).forEach(u=>v.add(S.resolve(s,u)));if(i=v,o=m(r,l),t){const f=S.resolve(process.cwd(),t);d.mkdirSync(S.dirname(f),{recursive:!0}),d.writeFileSync(f,o,"utf-8")}},resolveId(s){if(n&&s===w)return y},load(s){if(s===y)return`export default ${JSON.stringify(o)};`},handleHotUpdate({file:s,server:v}){if(i?.has(s)??!1){if(o=m(r,l),t){const u=S.resolve(process.cwd(),t);d.writeFileSync(u,o,"utf-8")}if(n){const u=v,C=u.moduleGraph.getModuleById(y);C&&u.reloadModule(C)}}}}}exports.cerJITCSS=p;exports.cerPlugin=T;
+//# sourceMappingURL=custom-elements-runtime.vite-plugin.cjs.js.map

package/dist/custom-elements-runtime.vite-plugin.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-elements-runtime.vite-plugin.cjs.js","sources":["../src/lib/vite-plugin.ts"],"sourcesContent":["/**\n * Vite plugins for build-time JIT CSS generation and SSR configuration.\n *\n * Two plugins are exported:\n *\n * - **`cerJITCSS`** — Scans source files for utility class names and emits\n *   pre-generated CSS, eliminating all runtime parsing cost for projects with\n *   static class lists.\n *\n * - **`cerPlugin`** — All-in-one plugin combining `cerJITCSS` with SSR\n *   configuration. Exposes a `virtual:cer-ssr-config` module containing the\n *   resolved SSR render options so server entry files can import and use them\n *   without duplication.\n *\n * @example cerJITCSS only\n * ```ts\n * // vite.config.ts\n * import { defineConfig } from 'vite';\n * import { cerJITCSS } from '@jasonshimmy/custom-elements-runtime/vite-plugin';\n *\n * export default defineConfig({\n *   plugins: [\n *     cerJITCSS({\n *       content: ['./src/**\\/*.{ts,tsx,html}'],\n *       output: 'src/generated-jit.css',\n *       extendedColors: true,\n *     }),\n *   ],\n * });\n * ```\n *\n * @example cerPlugin with SSR\n * ```ts\n * // vite.config.ts\n * import { defineConfig } from 'vite';\n * import { cerPlugin } from '@jasonshimmy/custom-elements-runtime/vite-plugin';\n *\n * export default defineConfig({\n *   plugins: [\n *     cerPlugin({\n *       content: ['./src/**\\/*.{ts,tsx,html}'],\n *       ssr: {\n *         dsd: true,\n *         jit: { extendedColors: true },\n *       },\n *     }),\n *   ],\n * });\n * ```\n *\n * Then in your server entry:\n * ```ts\n * import ssrConfig from 'virtual:cer-ssr-config';\n * import { renderToStringWithJITCSS } from '@jasonshimmy/custom-elements-runtime/ssr';\n *\n * const { htmlWithStyles } = renderToStringWithJITCSS(appVNode, ssrConfig);\n * ```\n */\n\nimport type { Plugin } from 'vite';\nimport { readFileSync, writeFileSync, mkdirSync, globSync } from 'node:fs';\nimport { resolve, dirname } from 'node:path';\nimport {\n  jitCSS,\n  enableJITCSS,\n  extractClassesFromHTML,\n  type JITCSSOptions,\n} from './runtime/style';\n\n// --- Re-export extractClassesFromHTML for plugin consumers ---\n\n/**\n * Options for the `cerJITCSS` Vite plugin.\n */\nexport interface CerJITCSSPluginOptions extends JITCSSOptions {\n  /**\n   * Glob patterns (relative to `process.cwd()`) that identify which source\n   * files the plugin should scan for utility class names.\n   *\n   * @example `['./src/**\\/*.{ts,html}', './index.html']`\n   */\n  content: string[];\n  /**\n   * File path (relative to `process.cwd()`) where the generated CSS will\n   * be written. When omitted the plugin only emits a virtual module.\n   */\n  output?: string;\n  /**\n   * Whether to emit a virtual module `virtual:cer-jit-css` that resolves to\n   * the generated CSS text. Defaults to `true`.\n   */\n  virtualModule?: boolean;\n}\n\nconst VIRTUAL_ID = 'virtual:cer-jit-css';\nconst RESOLVED_VIRTUAL_ID = '\\0virtual:cer-jit-css';\n\nfunction generateFromFiles(\n  contentPatterns: string[],\n  jitOptions: JITCSSOptions,\n): string {\n  if (jitOptions && Object.keys(jitOptions).length > 0) {\n    enableJITCSS(jitOptions);\n  }\n\n  const cwd = process.cwd();\n  const files: string[] = [];\n\n  for (const pattern of contentPatterns) {\n    const matches = globSync(pattern, { cwd }).map((f) => resolve(cwd, f));\n    files.push(...matches);\n  }\n\n  // Deduplicate files\n  const uniqueFiles = [...new Set(files)];\n\n  // Aggregate all class names across all files\n  const allClasses = new Set<string>();\n\n  for (const file of uniqueFiles) {\n    try {\n      const content = readFileSync(file, 'utf-8');\n      const classes = extractClassesFromHTML(content);\n      for (const cls of classes) allClasses.add(cls);\n    } catch {\n      // Skip unreadable files\n    }\n  }\n\n  if (allClasses.size === 0) return '';\n\n  // Build a fake HTML string containing all discovered classes so jitCSS()\n  // can process the full set in one pass.\n  const fakeHTML = `<div class=\"${[...allClasses].join(' ')}\"></div>`;\n  return jitCSS(fakeHTML);\n}\n\n// ---------------------------------------------------------------------------\n// cerPlugin — combined JIT CSS + SSR configuration plugin\n// ---------------------------------------------------------------------------\n\n/**\n * SSR render options exposed via `virtual:cer-ssr-config`.\n */\nexport interface CerSSROptions {\n  /**\n   * Emit Declarative Shadow DOM output for registered custom elements.\n   * @default true\n   */\n  dsd?: boolean;\n  /**\n   * Append the DSD polyfill `<script>` for browsers without native support.\n   * @default true\n   */\n  dsdPolyfill?: boolean;\n  /**\n   * JIT CSS options forwarded to the SSR render pass.\n   */\n  jit?: JITCSSOptions;\n}\n\n/**\n * Options for the combined {@link cerPlugin}.\n */\nexport interface CerPluginOptions extends Partial<CerJITCSSPluginOptions> {\n  /**\n   * SSR configuration. When provided, a `virtual:cer-ssr-config` module is\n   * registered so server entry files can import the resolved render options:\n   *\n   * ```ts\n   * import ssrConfig from 'virtual:cer-ssr-config';\n   * import { renderToStringWithJITCSS } from '@jasonshimmy/custom-elements-runtime/ssr';\n   *\n   * const { htmlWithStyles } = renderToStringWithJITCSS(appVNode, ssrConfig);\n   * ```\n   */\n  ssr?: CerSSROptions;\n}\n\nconst VIRTUAL_SSR_ID = 'virtual:cer-ssr-config';\nconst RESOLVED_VIRTUAL_SSR_ID = '\\0virtual:cer-ssr-config';\n\n/**\n * All-in-one Vite plugin combining build-time JIT CSS generation with SSR\n * configuration. Returns an array of plugins so it can be spread directly\n * into the `plugins` array without nesting.\n *\n * @example\n * ```ts\n * // vite.config.ts\n * export default defineConfig({\n *   plugins: [\n *     cerPlugin({\n *       content: ['./src/**\\/*.{ts,html}'],\n *       ssr: { dsd: true, jit: { extendedColors: true } },\n *     }),\n *   ],\n * });\n * ```\n */\nexport function cerPlugin(options: CerPluginOptions): Plugin[] {\n  const plugins: Plugin[] = [];\n\n  // JIT CSS plugin — only added when a `content` glob is provided\n  if (options.content && options.content.length > 0) {\n    plugins.push(\n      cerJITCSS({\n        content: options.content,\n        output: options.output,\n        virtualModule: options.virtualModule,\n        extendedColors: options.extendedColors,\n        customColors: options.customColors,\n        disableVariants: options.disableVariants,\n      }),\n    );\n  }\n\n  // SSR config virtual module — registered whenever `ssr` is provided\n  if (options.ssr) {\n    const ssrConfig = options.ssr;\n    const resolvedConfig = {\n      dsd: ssrConfig.dsd ?? true,\n      dsdPolyfill: ssrConfig.dsdPolyfill ?? true,\n      ...(ssrConfig.jit ? { jit: ssrConfig.jit } : {}),\n    };\n\n    plugins.push({\n      name: 'cer-ssr-config',\n      resolveId(id: string) {\n        if (id === VIRTUAL_SSR_ID) return RESOLVED_VIRTUAL_SSR_ID;\n        return undefined;\n      },\n      load(id: string) {\n        if (id === RESOLVED_VIRTUAL_SSR_ID) {\n          return `export default ${JSON.stringify(resolvedConfig)};`;\n        }\n        return undefined;\n      },\n    });\n  }\n\n  return plugins;\n}\n\n// ---------------------------------------------------------------------------\n// cerJITCSS — build-time JIT CSS plugin\n// ---------------------------------------------------------------------------\n\n/**\n * Vite plugin that performs a build-time scan of source files and emits\n * pre-generated JIT CSS as a file and/or `virtual:cer-jit-css` module.\n */\nexport function cerJITCSS(options: CerJITCSSPluginOptions): Plugin {\n  const {\n    content,\n    output,\n    virtualModule = true,\n    extendedColors,\n    customColors,\n    disableVariants,\n  } = options;\n\n  const jitOptions: JITCSSOptions = {\n    extendedColors,\n    customColors,\n    disableVariants,\n  };\n\n  let generatedCSS = '';\n  // Resolved file set built in buildStart and reused in handleHotUpdate to\n  // avoid re-running globSync for every HMR file-change event.\n  let watchedFiles: Set<string> | null = null;\n\n  return {\n    name: 'cer-jit-css',\n\n    buildStart() {\n      const cwd = process.cwd();\n      const resolved = new Set<string>();\n      for (const pattern of content) {\n        globSync(pattern, { cwd }).forEach((f) => resolved.add(resolve(cwd, f)));\n      }\n      watchedFiles = resolved;\n\n      generatedCSS = generateFromFiles(content, jitOptions);\n\n      if (output) {\n        const outputPath = resolve(process.cwd(), output);\n        mkdirSync(dirname(outputPath), { recursive: true });\n        writeFileSync(outputPath, generatedCSS, 'utf-8');\n      }\n    },\n\n    resolveId(id: string) {\n      if (virtualModule && id === VIRTUAL_ID) {\n        return RESOLVED_VIRTUAL_ID;\n      }\n      return undefined;\n    },\n\n    load(id: string) {\n      if (id === RESOLVED_VIRTUAL_ID) {\n        return `export default ${JSON.stringify(generatedCSS)};`;\n      }\n      return undefined;\n    },\n\n    handleHotUpdate({ file, server }: { file: string; server: unknown }) {\n      // Re-generate when a watched source file changes.\n      // Use the cached file set from buildStart to avoid re-globbing.\n      const isWatched = watchedFiles?.has(file) ?? false;\n\n      if (!isWatched) return;\n\n      generatedCSS = generateFromFiles(content, jitOptions);\n\n      if (output) {\n        const outputPath = resolve(process.cwd(), output);\n        writeFileSync(outputPath, generatedCSS, 'utf-8');\n      }\n\n      if (virtualModule) {\n        // Invalidate the virtual module so HMR triggers a reload\n        const viteServer = server as {\n          moduleGraph: { getModuleById: (id: string) => unknown };\n          reloadModule: (mod: unknown) => void;\n        };\n        const mod = viteServer.moduleGraph.getModuleById(RESOLVED_VIRTUAL_ID);\n        if (mod) viteServer.reloadModule(mod);\n      }\n    },\n  };\n}\n"],"names":["VIRTUAL_ID","RESOLVED_VIRTUAL_ID","generateFromFiles","contentPatterns","jitOptions","enableJITCSS","cwd","files","pattern","matches","globSync","f","resolve","uniqueFiles","allClasses","file","content","readFileSync","classes","extractClassesFromHTML","cls","fakeHTML","jitCSS","VIRTUAL_SSR_ID","RESOLVED_VIRTUAL_SSR_ID","cerPlugin","options","plugins","cerJITCSS","ssrConfig","resolvedConfig","id","output","virtualModule","extendedColors","customColors","disableVariants","generatedCSS","watchedFiles","resolved","outputPath","mkdirSync","dirname","writeFileSync","server","viteServer","mod"],"mappings":"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"}

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

@@ -0,0 +1,105 @@
+import { globSync as I, mkdirSync as w, writeFileSync as g, readFileSync as y } from "node:fs";
+import { resolve as S, dirname as j } from "node:path";
+import { e as V, b, j as L } from "./style-BmyOIMcU.js";
+const R = "virtual:cer-jit-css", m = "\0virtual:cer-jit-css";
+function p(t, r) {
+  r && Object.keys(r).length > 0 && V(r);
+  const e = process.cwd(), n = [];
+  for (const i of t) {
+    const o = I(i, { cwd: e }).map((l) => S(e, l));
+    n.push(...o);
+  }
+  const c = [...new Set(n)], d = /* @__PURE__ */ new Set();
+  for (const i of c)
+    try {
+      const o = y(i, "utf-8"), l = b(o);
+      for (const s of l) d.add(s);
+    } catch {
+    }
+  if (d.size === 0) return "";
+  const v = `<div class="${[...d].join(" ")}"></div>`;
+  return L(v);
+}
+const T = "virtual:cer-ssr-config", C = "\0virtual:cer-ssr-config";
+function D(t) {
+  const r = [];
+  if (t.content && t.content.length > 0 && r.push(
+    _({
+      content: t.content,
+      output: t.output,
+      virtualModule: t.virtualModule,
+      extendedColors: t.extendedColors,
+      customColors: t.customColors,
+      disableVariants: t.disableVariants
+    })
+  ), t.ssr) {
+    const e = t.ssr, n = {
+      dsd: e.dsd ?? !0,
+      dsdPolyfill: e.dsdPolyfill ?? !0,
+      ...e.jit ? { jit: e.jit } : {}
+    };
+    r.push({
+      name: "cer-ssr-config",
+      resolveId(c) {
+        if (c === T) return C;
+      },
+      load(c) {
+        if (c === C)
+          return `export default ${JSON.stringify(n)};`;
+      }
+    });
+  }
+  return r;
+}
+function _(t) {
+  const {
+    content: r,
+    output: e,
+    virtualModule: n = !0,
+    extendedColors: c,
+    customColors: d,
+    disableVariants: v
+  } = t, i = {
+    extendedColors: c,
+    customColors: d,
+    disableVariants: v
+  };
+  let o = "", l = null;
+  return {
+    name: "cer-jit-css",
+    buildStart() {
+      const s = process.cwd(), f = /* @__PURE__ */ new Set();
+      for (const a of r)
+        I(a, { cwd: s }).forEach((u) => f.add(S(s, u)));
+      if (l = f, o = p(r, i), e) {
+        const a = S(process.cwd(), e);
+        w(j(a), { recursive: !0 }), g(a, o, "utf-8");
+      }
+    },
+    resolveId(s) {
+      if (n && s === R)
+        return m;
+    },
+    load(s) {
+      if (s === m)
+        return `export default ${JSON.stringify(o)};`;
+    },
+    handleHotUpdate({ file: s, server: f }) {
+      if (l?.has(s) ?? !1) {
+        if (o = p(r, i), e) {
+          const u = S(process.cwd(), e);
+          g(u, o, "utf-8");
+        }
+        if (n) {
+          const u = f, h = u.moduleGraph.getModuleById(m);
+          h && u.reloadModule(h);
+        }
+      }
+    }
+  };
+}
+export {
+  _ as cerJITCSS,
+  D as cerPlugin
+};
+//# sourceMappingURL=custom-elements-runtime.vite-plugin.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"custom-elements-runtime.vite-plugin.es.js","sources":["../src/lib/vite-plugin.ts"],"sourcesContent":["/**\n * Vite plugins for build-time JIT CSS generation and SSR configuration.\n *\n * Two plugins are exported:\n *\n * - **`cerJITCSS`** — Scans source files for utility class names and emits\n *   pre-generated CSS, eliminating all runtime parsing cost for projects with\n *   static class lists.\n *\n * - **`cerPlugin`** — All-in-one plugin combining `cerJITCSS` with SSR\n *   configuration. Exposes a `virtual:cer-ssr-config` module containing the\n *   resolved SSR render options so server entry files can import and use them\n *   without duplication.\n *\n * @example cerJITCSS only\n * ```ts\n * // vite.config.ts\n * import { defineConfig } from 'vite';\n * import { cerJITCSS } from '@jasonshimmy/custom-elements-runtime/vite-plugin';\n *\n * export default defineConfig({\n *   plugins: [\n *     cerJITCSS({\n *       content: ['./src/**\\/*.{ts,tsx,html}'],\n *       output: 'src/generated-jit.css',\n *       extendedColors: true,\n *     }),\n *   ],\n * });\n * ```\n *\n * @example cerPlugin with SSR\n * ```ts\n * // vite.config.ts\n * import { defineConfig } from 'vite';\n * import { cerPlugin } from '@jasonshimmy/custom-elements-runtime/vite-plugin';\n *\n * export default defineConfig({\n *   plugins: [\n *     cerPlugin({\n *       content: ['./src/**\\/*.{ts,tsx,html}'],\n *       ssr: {\n *         dsd: true,\n *         jit: { extendedColors: true },\n *       },\n *     }),\n *   ],\n * });\n * ```\n *\n * Then in your server entry:\n * ```ts\n * import ssrConfig from 'virtual:cer-ssr-config';\n * import { renderToStringWithJITCSS } from '@jasonshimmy/custom-elements-runtime/ssr';\n *\n * const { htmlWithStyles } = renderToStringWithJITCSS(appVNode, ssrConfig);\n * ```\n */\n\nimport type { Plugin } from 'vite';\nimport { readFileSync, writeFileSync, mkdirSync, globSync } from 'node:fs';\nimport { resolve, dirname } from 'node:path';\nimport {\n  jitCSS,\n  enableJITCSS,\n  extractClassesFromHTML,\n  type JITCSSOptions,\n} from './runtime/style';\n\n// --- Re-export extractClassesFromHTML for plugin consumers ---\n\n/**\n * Options for the `cerJITCSS` Vite plugin.\n */\nexport interface CerJITCSSPluginOptions extends JITCSSOptions {\n  /**\n   * Glob patterns (relative to `process.cwd()`) that identify which source\n   * files the plugin should scan for utility class names.\n   *\n   * @example `['./src/**\\/*.{ts,html}', './index.html']`\n   */\n  content: string[];\n  /**\n   * File path (relative to `process.cwd()`) where the generated CSS will\n   * be written. When omitted the plugin only emits a virtual module.\n   */\n  output?: string;\n  /**\n   * Whether to emit a virtual module `virtual:cer-jit-css` that resolves to\n   * the generated CSS text. Defaults to `true`.\n   */\n  virtualModule?: boolean;\n}\n\nconst VIRTUAL_ID = 'virtual:cer-jit-css';\nconst RESOLVED_VIRTUAL_ID = '\\0virtual:cer-jit-css';\n\nfunction generateFromFiles(\n  contentPatterns: string[],\n  jitOptions: JITCSSOptions,\n): string {\n  if (jitOptions && Object.keys(jitOptions).length > 0) {\n    enableJITCSS(jitOptions);\n  }\n\n  const cwd = process.cwd();\n  const files: string[] = [];\n\n  for (const pattern of contentPatterns) {\n    const matches = globSync(pattern, { cwd }).map((f) => resolve(cwd, f));\n    files.push(...matches);\n  }\n\n  // Deduplicate files\n  const uniqueFiles = [...new Set(files)];\n\n  // Aggregate all class names across all files\n  const allClasses = new Set<string>();\n\n  for (const file of uniqueFiles) {\n    try {\n      const content = readFileSync(file, 'utf-8');\n      const classes = extractClassesFromHTML(content);\n      for (const cls of classes) allClasses.add(cls);\n    } catch {\n      // Skip unreadable files\n    }\n  }\n\n  if (allClasses.size === 0) return '';\n\n  // Build a fake HTML string containing all discovered classes so jitCSS()\n  // can process the full set in one pass.\n  const fakeHTML = `<div class=\"${[...allClasses].join(' ')}\"></div>`;\n  return jitCSS(fakeHTML);\n}\n\n// ---------------------------------------------------------------------------\n// cerPlugin — combined JIT CSS + SSR configuration plugin\n// ---------------------------------------------------------------------------\n\n/**\n * SSR render options exposed via `virtual:cer-ssr-config`.\n */\nexport interface CerSSROptions {\n  /**\n   * Emit Declarative Shadow DOM output for registered custom elements.\n   * @default true\n   */\n  dsd?: boolean;\n  /**\n   * Append the DSD polyfill `<script>` for browsers without native support.\n   * @default true\n   */\n  dsdPolyfill?: boolean;\n  /**\n   * JIT CSS options forwarded to the SSR render pass.\n   */\n  jit?: JITCSSOptions;\n}\n\n/**\n * Options for the combined {@link cerPlugin}.\n */\nexport interface CerPluginOptions extends Partial<CerJITCSSPluginOptions> {\n  /**\n   * SSR configuration. When provided, a `virtual:cer-ssr-config` module is\n   * registered so server entry files can import the resolved render options:\n   *\n   * ```ts\n   * import ssrConfig from 'virtual:cer-ssr-config';\n   * import { renderToStringWithJITCSS } from '@jasonshimmy/custom-elements-runtime/ssr';\n   *\n   * const { htmlWithStyles } = renderToStringWithJITCSS(appVNode, ssrConfig);\n   * ```\n   */\n  ssr?: CerSSROptions;\n}\n\nconst VIRTUAL_SSR_ID = 'virtual:cer-ssr-config';\nconst RESOLVED_VIRTUAL_SSR_ID = '\\0virtual:cer-ssr-config';\n\n/**\n * All-in-one Vite plugin combining build-time JIT CSS generation with SSR\n * configuration. Returns an array of plugins so it can be spread directly\n * into the `plugins` array without nesting.\n *\n * @example\n * ```ts\n * // vite.config.ts\n * export default defineConfig({\n *   plugins: [\n *     cerPlugin({\n *       content: ['./src/**\\/*.{ts,html}'],\n *       ssr: { dsd: true, jit: { extendedColors: true } },\n *     }),\n *   ],\n * });\n * ```\n */\nexport function cerPlugin(options: CerPluginOptions): Plugin[] {\n  const plugins: Plugin[] = [];\n\n  // JIT CSS plugin — only added when a `content` glob is provided\n  if (options.content && options.content.length > 0) {\n    plugins.push(\n      cerJITCSS({\n        content: options.content,\n        output: options.output,\n        virtualModule: options.virtualModule,\n        extendedColors: options.extendedColors,\n        customColors: options.customColors,\n        disableVariants: options.disableVariants,\n      }),\n    );\n  }\n\n  // SSR config virtual module — registered whenever `ssr` is provided\n  if (options.ssr) {\n    const ssrConfig = options.ssr;\n    const resolvedConfig = {\n      dsd: ssrConfig.dsd ?? true,\n      dsdPolyfill: ssrConfig.dsdPolyfill ?? true,\n      ...(ssrConfig.jit ? { jit: ssrConfig.jit } : {}),\n    };\n\n    plugins.push({\n      name: 'cer-ssr-config',\n      resolveId(id: string) {\n        if (id === VIRTUAL_SSR_ID) return RESOLVED_VIRTUAL_SSR_ID;\n        return undefined;\n      },\n      load(id: string) {\n        if (id === RESOLVED_VIRTUAL_SSR_ID) {\n          return `export default ${JSON.stringify(resolvedConfig)};`;\n        }\n        return undefined;\n      },\n    });\n  }\n\n  return plugins;\n}\n\n// ---------------------------------------------------------------------------\n// cerJITCSS — build-time JIT CSS plugin\n// ---------------------------------------------------------------------------\n\n/**\n * Vite plugin that performs a build-time scan of source files and emits\n * pre-generated JIT CSS as a file and/or `virtual:cer-jit-css` module.\n */\nexport function cerJITCSS(options: CerJITCSSPluginOptions): Plugin {\n  const {\n    content,\n    output,\n    virtualModule = true,\n    extendedColors,\n    customColors,\n    disableVariants,\n  } = options;\n\n  const jitOptions: JITCSSOptions = {\n    extendedColors,\n    customColors,\n    disableVariants,\n  };\n\n  let generatedCSS = '';\n  // Resolved file set built in buildStart and reused in handleHotUpdate to\n  // avoid re-running globSync for every HMR file-change event.\n  let watchedFiles: Set<string> | null = null;\n\n  return {\n    name: 'cer-jit-css',\n\n    buildStart() {\n      const cwd = process.cwd();\n      const resolved = new Set<string>();\n      for (const pattern of content) {\n        globSync(pattern, { cwd }).forEach((f) => resolved.add(resolve(cwd, f)));\n      }\n      watchedFiles = resolved;\n\n      generatedCSS = generateFromFiles(content, jitOptions);\n\n      if (output) {\n        const outputPath = resolve(process.cwd(), output);\n        mkdirSync(dirname(outputPath), { recursive: true });\n        writeFileSync(outputPath, generatedCSS, 'utf-8');\n      }\n    },\n\n    resolveId(id: string) {\n      if (virtualModule && id === VIRTUAL_ID) {\n        return RESOLVED_VIRTUAL_ID;\n      }\n      return undefined;\n    },\n\n    load(id: string) {\n      if (id === RESOLVED_VIRTUAL_ID) {\n        return `export default ${JSON.stringify(generatedCSS)};`;\n      }\n      return undefined;\n    },\n\n    handleHotUpdate({ file, server }: { file: string; server: unknown }) {\n      // Re-generate when a watched source file changes.\n      // Use the cached file set from buildStart to avoid re-globbing.\n      const isWatched = watchedFiles?.has(file) ?? false;\n\n      if (!isWatched) return;\n\n      generatedCSS = generateFromFiles(content, jitOptions);\n\n      if (output) {\n        const outputPath = resolve(process.cwd(), output);\n        writeFileSync(outputPath, generatedCSS, 'utf-8');\n      }\n\n      if (virtualModule) {\n        // Invalidate the virtual module so HMR triggers a reload\n        const viteServer = server as {\n          moduleGraph: { getModuleById: (id: string) => unknown };\n          reloadModule: (mod: unknown) => void;\n        };\n        const mod = viteServer.moduleGraph.getModuleById(RESOLVED_VIRTUAL_ID);\n        if (mod) viteServer.reloadModule(mod);\n      }\n    },\n  };\n}\n"],"names":["VIRTUAL_ID","RESOLVED_VIRTUAL_ID","generateFromFiles","contentPatterns","jitOptions","enableJITCSS","cwd","files","pattern","matches","globSync","f","resolve","uniqueFiles","allClasses","file","content","readFileSync","classes","extractClassesFromHTML","cls","fakeHTML","jitCSS","VIRTUAL_SSR_ID","RESOLVED_VIRTUAL_SSR_ID","cerPlugin","options","plugins","cerJITCSS","ssrConfig","resolvedConfig","id","output","virtualModule","extendedColors","customColors","disableVariants","generatedCSS","watchedFiles","resolved","outputPath","mkdirSync","dirname","writeFileSync","server","viteServer","mod"],"mappings":"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"}

package/dist/dom-jit-css.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Non-Shadow DOM JIT CSS runtime scanner.
+ *
+ * Watches real DOM elements for class changes and injects utility CSS into
+ * a shared `<style>` element (or constructable stylesheet) in the host document.
+ *
+ * @example
+ * ```ts
+ * import { createDOMJITCSS } from '@jasonshimmy/custom-elements-runtime/dom-jit-css';
+ *
+ * // Watch the full document body
+ * const jit = createDOMJITCSS();
+ * jit.mount();
+ *
+ * // Watch a specific container element
+ * const jit = createDOMJITCSS({ root: document.getElementById('app')! });
+ * jit.mount();
+ *
+ * // Tear down when no longer needed
+ * jit.destroy();
+ * ```
+ *
+ * ## `data-jitcss` attribute semantics
+ *
+ * | Attribute value                                        | Behaviour                                                         |
+ * | ------------------------------------------------------ | ----------------------------------------------------------------- |
+ * | `data-jitcss` (no value) or `data-jitcss="container"` | Scopes the observer to that element and its subtree               |
+ * | `data-jitcss="self"`                                   | Only processes classes on that exact element, not descendants     |
+ * | `data-jitcss="global"`                                 | Observer covers `document.body` (useful on `<html>` or `<body>`)  |
+ *
+ * When `createDOMJITCSS()` is called with no `root`, it auto-detects all
+ * `[data-jitcss]` elements and registers an observer for each.
+ */
+import { type JITCSSOptions } from './runtime/style';
+/**
+ * Options for `createDOMJITCSS()`.
+ */
+export interface DOMJITCSSOptions extends JITCSSOptions {
+    /**
+     * The root element to observe. Defaults to auto-detecting `[data-jitcss]`
+     * elements, then falling back to `document.body`.
+     */
+    root?: Element | ShadowRoot | null;
+    /**
+     * ID of the `<style>` element injected into the document head.
+     * Defaults to `'cer-dom-jit-css'`.
+     */
+    styleId?: string;
+}
+/** Public handle returned by `createDOMJITCSS()`. */
+export interface DOMJITCSSHandle {
+    /** Start observing the DOM and injecting utility CSS. */
+    mount(): void;
+    /** Stop observing and remove the injected stylesheet. */
+    destroy(): void;
+    /** Get the number of unique classes processed so far. */
+    readonly processedCount: number;
+}
+/**
+ * Create a DOM JIT CSS instance that watches class attribute changes and
+ * injects CSS utility rules into the document.
+ *
+ * @param options - Configuration options.
+ * @returns A handle with `mount()` and `destroy()` methods.
+ */
+export declare function createDOMJITCSS(options?: DOMJITCSSOptions): DOMJITCSSHandle;

package/dist/event-bus.d.ts

@@ -10,6 +10,8 @@ export declare class GlobalEventBus extends EventTarget {
     private handlers;
     private static instance;
     private eventCounters;
+    private nativeUnsubscribers;
+    private readonly MAX_EVENT_COUNTERS;
     /**
      * Returns the singleton instance of GlobalEventBus
      */
@@ -62,7 +64,7 @@ export declare class GlobalEventBus extends EventTarget {
      */
     getActiveEvents(): string[];
     /**
-     * Clear all event handlers (useful for testing or cleanup).
+     * Clear all event handlers and native EventTarget listeners (useful for testing or cleanup).
      */
     clear(): void;
     /**