@jasonshimmy/custom-elements-runtime 3.1.3 → 3.2.1

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

@@ -1 +1 @@
-{"version":3,"file":"custom-elements-runtime.transitions.cjs.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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"}
+{"version":3,"file":"custom-elements-runtime.transitions.cjs.js","names":[],"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"],"mappings":"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"}

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

@@ -1,7 +1,6 @@
-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 */
+import { i as O } from "./css-utils-CC43BbEy.js";
+import { anchorBlock as P } from "./custom-elements-runtime.directives.es.js";
+var F = {
   fade: {
     enterFrom: "opacity-0",
     enterActive: "transition-opacity duration-300 ease-out",
@@ -10,7 +9,6 @@ const F = {
     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",
@@ -19,7 +17,6 @@ const F = {
     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",
@@ -28,7 +25,6 @@ const F = {
     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",
@@ -37,7 +33,6 @@ const F = {
     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",
@@ -46,7 +41,6 @@ const F = {
     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",
@@ -55,7 +49,6 @@ const F = {
     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",
@@ -64,7 +57,6 @@ const F = {
     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",
@@ -73,7 +65,6 @@ const F = {
     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",
@@ -82,7 +73,6 @@ const F = {
     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",
@@ -92,51 +82,26 @@ const F = {
     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;
+function I(t, i) {
+  const { preset: e, show: u, mode: l = "default", duration: k, appear: x = !1, css: E = !0, name: L, enterFrom: d, enterActive: f, enterTo: y, leaveFrom: r, leaveActive: s, leaveTo: c, 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 = {
+  e && F[e] ? (a = { ...F[e] }, d && (a.enterFrom = d), f && (a.enterActive = f), y && (a.enterTo = y), r && (a.leaveFrom = r), s && (a.leaveActive = s), c && (a.leaveTo = c)) : a = {
     enterFrom: d,
     enterActive: f,
-    enterTo: p,
+    enterTo: y,
     leaveFrom: r,
-    leaveActive: c,
-    leaveTo: v
+    leaveActive: s,
+    leaveTo: c
   };
-  const $ = e && typeof l == "function" ? l() : l, S = L || (o ? `transition-${o}` : "transition"), C = O(
-    e ? $ : [],
-    S
-  );
+  const $ = u && typeof i == "function" ? i() : i, S = L || (e ? `transition-${e}` : "transition"), C = P(u ? $ : [], S);
   return C._transition = {
     name: S,
     classes: a,
-    mode: s,
+    mode: l,
     duration: k,
     appear: x,
     css: E,
-    state: e ? "visible" : "hidden",
+    state: u ? "visible" : "hidden",
     hooks: {
       onBeforeEnter: m,
       onEnter: A,
@@ -149,80 +114,49 @@ function H(t, l) {
     }
   }, 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,
+function J(t, i) {
+  const { tag: e = "div", moveClass: u = "transition-transform duration-300", preset: l, show: k = !0, mode: x = "default", duration: E, appear: L = !1, css: d = !0, name: f, class: y, style: r, enterFrom: s, enterActive: c, 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 n;
+  l && F[l] ? (n = { ...F[l] }, s && (n.enterFrom = s), c && (n.enterActive = c), m && (n.enterTo = m), A && (n.leaveFrom = A), T && (n.leaveActive = T), h && (n.leaveTo = h)) : n = {
+    enterFrom: s,
+    enterActive: c,
     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 _ = f || (l ? `transition-group-${l}` : "transition-group"), g = [];
+  for (const o of k ? i : []) if (o && typeof o == "object" && o.tag === "#anchor") {
+    const K = Array.isArray(o.children) ? o.children : [];
+    for (const p of K) if (p && typeof p == "object") {
+      const N = {
+        ...p,
+        key: o.key || p.key,
+        props: {
+          ...p.props,
+          _anchorKey: o.key
+        }
+      };
+      g.push(N);
+    } else g.push(p);
+  } else g.push(o);
   const G = (() => {
     if (r)
-      return typeof r == "string" ? r : Object.entries(r).map(([n, K]) => `${n}: ${K}`).join("; ");
+      return typeof r == "string" ? r : Object.entries(r).map(([o, K]) => `${o}: ${K}`).join("; ");
   })();
   return {
-    tag: o,
+    tag: e,
     children: g,
     key: _,
     props: {
       attrs: {
-        ...p ? { class: p } : {},
+        ...y ? { class: y } : {},
         ...G ? { style: G } : {}
       },
       _transitionGroup: {
         name: _,
-        classes: i,
-        moveClass: e,
+        classes: n,
+        moveClass: u,
         mode: x,
         duration: E,
         appear: L,
@@ -241,42 +175,43 @@ function I(t, l) {
     }
   };
 }
-function J(t) {
+function V(t) {
   return { ...t };
 }
-let y = null;
-function V() {
-  if (!y) {
+var v = null;
+function q() {
+  if (!v) {
     if (typeof CSSStyleSheet > "u")
-      return y = {
+      return v = {
         cssRules: [],
         replaceSync: () => {
         },
         toString: () => ""
-      }, y;
+      }, v;
     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);
+    const i = O(`<div class="${t.join(" ")}"></div>`);
     try {
-      y = new CSSStyleSheet(), y.replaceSync(o);
+      v = new CSSStyleSheet(), v.replaceSync(i);
     } catch {
-      y = {
+      v = {
         cssRules: [],
         replaceSync: () => {
         },
-        toString: () => o || ""
+        toString: () => i || ""
       };
     }
   }
-  return y;
+  return v;
 }
 export {
-  H as Transition,
-  I as TransitionGroup,
-  J as createTransitionPreset,
-  V as getTransitionStyleSheet,
+  I as Transition,
+  J as TransitionGroup,
+  V as createTransitionPreset,
+  q as getTransitionStyleSheet,
   F as transitionPresets
 };
-//# sourceMappingURL=custom-elements-runtime.transitions.es.js.map
+
+//# 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":["../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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"}
+{"version":3,"file":"custom-elements-runtime.transitions.es.js","names":[],"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"],"mappings":"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"}

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

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