@jasonshimmy/custom-elements-runtime 2.8.1 → 3.0.0

package/dist/hooks-DyShDHKo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks-DyShDHKo.js","sources":["../src/lib/runtime/hooks.ts"],"sourcesContent":["/**\n * Context-based hooks for functional components\n * Provides React-like hooks with perfect TypeScript inference\n */\n\nimport { isReactiveState } from './reactive';\nimport { toKebab } from './helpers';\nimport { devWarn, devError } from './logger';\nimport { isDiscoveryRender as _isDiscoveryRenderFn } from './discovery-state';\nimport { sanitizeCSS, minifyCSS } from './css-utils';\nimport type { JITCSSOptions } from './style';\n\n// Re-export JITCSSOptions as a type-only re-export so consumers can still\n// import it from './runtime/hooks' without creating a runtime dependency on style.ts.\nexport type { JITCSSOptions };\n\n// Re-export discovery helpers so consumers continue to use the same import path.\nexport { beginDiscoveryRender, endDiscoveryRender } from './discovery-state';\n\n/**\n * Returns true while a discovery render is in progress.\n * Used by `html` and other primitives to short-circuit side effects.\n * @internal\n */\nexport function isDiscoveryRender(): boolean {\n  return _isDiscoveryRenderFn();\n}\n\n// Global state to track current component context during render\n// Narrowed internal type for currentComponentContext to expose _hookCallbacks\ninterface InternalHookCallbacks {\n  onConnected?: Array<(context?: unknown) => void>;\n  onDisconnected?: Array<(context?: unknown) => void>;\n  onAttributeChanged?: Array<\n    (name: string, oldValue: string | null, newValue: string | null) => void\n  >;\n  onError?: Array<(err: unknown) => void>;\n  props?: Record<string, unknown>;\n  style?: () => string;\n  expose?: Record<string, unknown>;\n}\n\ntype InternalComponentContext = Record<string, unknown> & {\n  _hookCallbacks?: InternalHookCallbacks;\n  _computedStyle?: string;\n};\n\nlet currentComponentContext: InternalComponentContext | null = null;\n\n/** Symbol key used to store provides map on a component's context object. */\nconst PROVIDES_KEY = Symbol('cer:provides');\n\n/**\n * Set the current component context (called internally during render)\n * @internal\n */\nexport function setCurrentComponentContext(\n  context: Record<string, unknown>,\n): void {\n  currentComponentContext = context;\n}\n\n/**\n * Clear the current component context (called internally after render)\n * @internal\n */\nexport function clearCurrentComponentContext(): void {\n  currentComponentContext = null;\n}\n\n// ---------- Discovery render probe ----------\n// The actual state and helpers live in discovery-state.ts to avoid\n// circular dependencies with reactive.ts. The re-exports above forward\n// beginDiscoveryRender / endDiscoveryRender / isDiscoveryRender from that\n// module so all existing import sites remain unchanged.\n\n/**\n * Get the current component context. Useful for advanced composable patterns\n * that need to access or pass the context explicitly.\n * @internal\n */\nexport function getCurrentComponentContext(): Record<string, unknown> | null {\n  return currentComponentContext;\n}\n\n/**\n * Get the emit function for the current component\n * Must be called during component render\n *\n * @example\n * ```ts\n * component('my-button', () => {\n *   const { label } = useProps({ label: 'Click me' });\n *   const emit = useEmit();\n *\n *   return html`\n *     <button @click=\"${() => emit('button-click', { label })}\">\n *       ${label}\n *     </button>\n *   `;\n * });\n * ```\n */\nexport function useEmit(): (\n  eventName: string,\n  detail?: unknown,\n  options?: CustomEventInit,\n) => boolean {\n  if (!currentComponentContext) {\n    throw new Error('useEmit must be called during component render');\n  }\n\n  // During discovery render, return a no-op function — no real host exists.\n  if (_isDiscoveryRenderFn()) {\n    return () => false;\n  }\n\n  // Capture and validate the emit function from the current context\n  const emitCandidate = (currentComponentContext as { emit?: unknown }).emit;\n  if (typeof emitCandidate !== 'function') {\n    throw new Error(\n      'useEmit requires an emit function on the component context',\n    );\n  }\n  const emitFn = emitCandidate as (\n    eventName: string,\n    detail?: unknown,\n    options?: CustomEventInit,\n  ) => boolean;\n\n  return (eventName: string, detail?: unknown, options?: CustomEventInit) => {\n    return emitFn(eventName, detail, options);\n  };\n}\n\n/**\n * Initialize hook callbacks storage on context if not exists\n * Uses Object.defineProperty to avoid triggering reactive updates\n */\nfunction ensureHookCallbacks(context: Record<string, unknown>): void {\n  if (!context._hookCallbacks) {\n    Object.defineProperty(context, '_hookCallbacks', {\n      value: {},\n      writable: true,\n      enumerable: false,\n      configurable: true,\n    });\n  }\n}\n\n/**\n * Register a callback to be called when component is connected to DOM\n *\n * @example\n * ```ts\n * component('my-component', () => {\n *   useOnConnected(() => {\n *     console.log('Component mounted!');\n *   });\n *\n *   return html`<div>Hello World</div>`;\n * });\n * ```\n */\nexport function useOnConnected(callback: () => void): void {\n  if (!currentComponentContext) {\n    throw new Error('useOnConnected must be called during component render');\n  }\n\n  // During discovery render, skip registering lifecycle callbacks — the\n  // discoveryContext is ephemeral and its hooks are never invoked.\n  if (_isDiscoveryRenderFn()) return;\n\n  ensureHookCallbacks(currentComponentContext as InternalComponentContext);\n  const hooks = currentComponentContext._hookCallbacks as InternalHookCallbacks;\n  if (!hooks.onConnected) hooks.onConnected = [];\n  hooks.onConnected.push(callback);\n}\n\n/**\n * Register a callback to be called when component is disconnected from DOM\n *\n * @example\n * ```ts\n * component('my-component', () => {\n *   useOnDisconnected(() => {\n *     console.log('Component unmounted!');\n *   });\n *\n *   return html`<div>Goodbye World</div>`;\n * });\n * ```\n */\nexport function useOnDisconnected(callback: () => void): void {\n  if (!currentComponentContext) {\n    throw new Error('useOnDisconnected must be called during component render');\n  }\n\n  // During discovery render, skip registering lifecycle callbacks.\n  if (_isDiscoveryRenderFn()) return;\n\n  ensureHookCallbacks(currentComponentContext as InternalComponentContext);\n  const hooks = currentComponentContext._hookCallbacks as InternalHookCallbacks;\n  if (!hooks.onDisconnected) hooks.onDisconnected = [];\n  hooks.onDisconnected.push(callback);\n}\n\n/**\n * Register a callback to be called when an attribute changes\n *\n * @example\n * ```ts\n * component('my-component', () => {\n *   useOnAttributeChanged((name, oldValue, newValue) => {\n *     console.log(`Attribute ${name} changed from ${oldValue} to ${newValue}`);\n *   });\n *\n *   return html`<div>Attribute watcher</div>`;\n * });\n * ```\n */\nexport function useOnAttributeChanged(\n  callback: (\n    name: string,\n    oldValue: string | null,\n    newValue: string | null,\n  ) => void,\n): void {\n  if (!currentComponentContext) {\n    throw new Error(\n      'useOnAttributeChanged must be called during component render',\n    );\n  }\n\n  // During discovery render, skip registering lifecycle callbacks.\n  if (_isDiscoveryRenderFn()) return;\n\n  ensureHookCallbacks(currentComponentContext as InternalComponentContext);\n  const hooks = currentComponentContext._hookCallbacks as InternalHookCallbacks;\n  if (!hooks.onAttributeChanged) hooks.onAttributeChanged = [];\n  hooks.onAttributeChanged.push(callback);\n}\n\n/**\n * Register a callback to be called when an error occurs\n *\n * @example\n * ```ts\n * component('my-component', () => {\n *   useOnError((error) => {\n *     console.error('Component error:', error);\n *   });\n *\n *   return html`<div>Error handler</div>`;\n * });\n * ```\n */\nexport function useOnError(callback: (error: Error) => void): void {\n  if (!currentComponentContext) {\n    throw new Error('useOnError must be called during component render');\n  }\n\n  // During discovery render, skip registering lifecycle callbacks.\n  if (_isDiscoveryRenderFn()) return;\n\n  ensureHookCallbacks(currentComponentContext as InternalComponentContext);\n  const hooks = currentComponentContext._hookCallbacks as InternalHookCallbacks;\n  if (!hooks.onError) hooks.onError = [];\n  // Wrap to normalize to Error. If the user's handler itself throws, log it in\n  // dev mode so it doesn't vanish silently — the original error is already handled.\n  hooks.onError.push((err: unknown) => {\n    try {\n      if (err instanceof Error) callback(err);\n      else callback(new Error(String(err)));\n    } catch (handlerErr) {\n      devError('[useOnError] The error handler itself threw an exception:', handlerErr);\n    }\n  });\n}\n\n/**\n * Register prop defaults for the component. Can be called during render.\n * Stores the prop defaults on `context._hookCallbacks.props` so the runtime\n * can pick them up when building the component config.\n *\n * Example:\n * ```ts\n * component('my-comp', () => {\n *   useProps({ modelValue: false, label: 'Hello' });\n *   return html`<div/>`;\n * });\n * ```\n */\nexport function useProps<T extends Record<string, unknown>>(defaults: T): T {\n  if (!currentComponentContext) {\n    throw new Error('useProps must be called during component render');\n  }\n\n  ensureHookCallbacks(currentComponentContext as InternalComponentContext);\n  const hooks = currentComponentContext._hookCallbacks as InternalHookCallbacks;\n  hooks.props = {\n    ...(hooks.props || {}),\n    ...defaults,\n  };\n\n  const ctx = currentComponentContext;\n  // Define dynamic getters for declared props so the context property\n  // always reflects the host element's property (or reactive ref.value)\n  try {\n    const declaredKeys = Object.keys(defaults || {});\n    for (const key of declaredKeys) {\n      if (typeof key !== 'string' || key.startsWith('_')) continue;\n      const existing = Object.getOwnPropertyDescriptor(ctx, key);\n      // Only define if not present or configurable (allow overriding)\n      if (existing && !existing.configurable) continue;\n      try {\n        // Preserve any existing concrete value on the context in a closure.\n        // This avoids recursive getters when we later reference ctx[key].\n        const hasOwn = Object.prototype.hasOwnProperty.call(ctx, key);\n        let localValue: unknown = hasOwn\n          ? (ctx as Record<string, unknown>)[key]\n          : undefined;\n\n        Object.defineProperty(ctx, key, {\n          configurable: true,\n          enumerable: true,\n          get() {\n            try {\n              const host = (ctx && (ctx as { _host?: HTMLElement })._host) as\n                | HTMLElement\n                | undefined;\n              if (host) {\n                // First, check for attribute value (attributes should take precedence)\n                const kebabKey = toKebab(key);\n                const attrValue = host.getAttribute(kebabKey);\n                if (attrValue !== null) {\n                  const defaultType = typeof defaults[key];\n                  if (defaultType === 'boolean') {\n                    // Standalone boolean attributes have empty string value\n                    return attrValue === '' || attrValue === 'true';\n                  }\n                  if (defaultType === 'number') {\n                    return Number(attrValue);\n                  }\n                  return attrValue;\n                }\n\n                // If no attribute, check if host has a property value set\n                if (\n                  typeof (host as unknown as Record<string, unknown>)[key] !==\n                  'undefined'\n                ) {\n                  const fromHost = (host as unknown as Record<string, unknown>)[\n                    key\n                  ];\n                  // prefer host value when present\n                  // If the host provided a ReactiveState instance or a wrapper\n                  // with a .value, unwrap it here so destructured props and\n                  // useProps return the primitive/current value consistently.\n                  if (isReactiveState(fromHost)) {\n                    return (fromHost as { value: unknown }).value;\n                  }\n                  if (\n                    fromHost &&\n                    typeof fromHost === 'object' &&\n                    'value' in fromHost &&\n                    !(fromHost instanceof Node)\n                  ) {\n                    return (fromHost as { value?: unknown }).value;\n                  }\n                  // For string-typed declared props, avoid returning host\n                  // object-like properties (for example `element.style` which\n                  // is a CSSStyleDeclaration). Prefer attribute value or the\n                  // local default instead of returning a non-primitive host\n                  // property into templates which expect primitives.\n                  const defaultType = typeof defaults[key];\n                  if (\n                    defaultType === 'string' &&\n                    fromHost &&\n                    typeof fromHost === 'object'\n                  ) {\n                    // fallthrough to localValue\n                  } else {\n                    // For boolean defaults, treat empty string (standalone attribute) or 'true' as true.\n                    if (\n                      defaultType === 'boolean' &&\n                      typeof fromHost === 'string'\n                    ) {\n                      return fromHost === '' || fromHost === 'true';\n                    }\n                    return fromHost;\n                  }\n                }\n              }\n            } catch {\n              // ignore host read failures and fall back to context\n            }\n            return localValue;\n          },\n          set(v: unknown) {\n            // allow test/runtime code to set context props during render/init\n            localValue = v;\n          },\n        });\n      } catch {\n        // ignore\n      }\n    }\n  } catch {\n    // ignore\n  }\n  // Return a Proxy that always reads the latest value from the component\n  // context so accesses are reactive. Also unwrap functional refs ({ value })\n  // and coerce string attribute values to boolean/number when defaults\n  // indicate such types.\n  const result = new Proxy({} as Record<string, unknown>, {\n    get(_target, prop: string) {\n      if (typeof prop !== 'string') return undefined;\n      const def = (defaults as Record<string, unknown>)[prop];\n\n      // If a host element is available, prefer reading from attributes first,\n      // then from properties. This ensures that HTML attributes take precedence\n      // over default property values (like the standard \"title\" attribute).\n      try {\n        const host = (ctx && (ctx as { _host?: HTMLElement })._host) as\n          | HTMLElement\n          | undefined;\n        if (host) {\n          // Check attribute first (only if host is an actual HTMLElement)\n          if (\n            host instanceof HTMLElement ||\n            (typeof (host as { getAttribute?: (name: string) => string | null })\n              .getAttribute === 'function' &&\n              typeof (host as { hasAttribute?: (name: string) => boolean })\n                .hasAttribute === 'function')\n          ) {\n            const kebabKey = prop.replace(/([A-Z])/g, '-$1').toLowerCase();\n            const attrValue = (\n              host as { getAttribute: (name: string) => string | null }\n            ).getAttribute(kebabKey);\n            if (attrValue !== null) {\n              // Attribute exists - convert based on default type\n              if (typeof def === 'boolean') {\n                return attrValue === '' || attrValue === 'true';\n              }\n              if (typeof def === 'number') {\n                return Number(attrValue);\n              }\n              return attrValue;\n            }\n          }\n\n          // No attribute - check property value\n          const hostValue = (host as unknown as Record<string, unknown>)[prop];\n          // Only use host value if it's explicitly set (not undefined AND not empty string for string defaults)\n          // Empty strings on standard HTML properties (like 'title') should fall through to defaults\n          if (typeof hostValue !== 'undefined' && hostValue !== '') {\n            // If the declared default is a string, avoid returning raw DOM\n            // object-like properties (such as element.style which is a CSSStyleDeclaration)\n            // since templates expect primitives and serializing objects can\n            // cause DOMExceptions. However, wrapper-like objects that expose\n            // a `.value` property (or ReactiveState instances) should be\n            // unwrapped and returned even for string defaults.\n            const isWrapperLike =\n              hostValue &&\n              typeof hostValue === 'object' &&\n              'value' in hostValue &&\n              !(hostValue instanceof Node);\n            if (\n              typeof def === 'string' &&\n              hostValue &&\n              typeof hostValue === 'object' &&\n              !isWrapperLike &&\n              !isReactiveState(hostValue)\n            ) {\n              // treat as not present and fall through to ctx/default\n            } else {\n              // Special handling for boolean props: if default is false and hostValue is empty string,\n              // treat it as if the property wasn't set (use default false)\n              if (\n                typeof def === 'boolean' &&\n                def === false &&\n                hostValue === ''\n              ) {\n                return def;\n              }\n\n              // Unwrap ReactiveState instances and wrapper-like objects coming\n              // from the host so useProps mirrors applyProps/destructured props\n              // behavior and returns primitive/current values.\n              if (isReactiveState(hostValue)) {\n                return (hostValue as { value: unknown }).value;\n              }\n              if (isWrapperLike) {\n                return (hostValue as { value: unknown }).value;\n              }\n\n              // Primitive on host - return directly (but coerce strings if default provided).\n              // Use the same rule as the attribute path: empty string (standalone attribute\n              // presence) or the literal string 'true' coerce to true; everything else is false.\n              if (typeof def === 'boolean' && typeof hostValue === 'string') {\n                return hostValue === '' || hostValue === 'true';\n              }\n              if (\n                typeof def === 'number' &&\n                typeof hostValue === 'string' &&\n                !Number.isNaN(Number(hostValue))\n              )\n                return Number(hostValue);\n              return hostValue;\n            }\n          }\n        }\n      } catch {\n        // ignore host read failures and fall back to context\n      }\n\n      // Fall back to reading from the component context itself.\n      const raw = ctx[prop];\n      // Treat empty-string on context as boolean true (attribute presence)\n      // EXCEPT when the default is false - in that case, empty string means \"not set\"\n      if (typeof def === 'boolean' && raw === '') {\n        if (def === false) {\n          // For boolean props with default false, empty string means use the default\n          return def;\n        }\n        // For boolean props with default true, empty string means attribute presence = true\n        return true;\n      }\n      // If the context stores a ReactiveState or wrapper, unwrap it here\n      // so components using useProps receive the primitive/current value\n      // when the source is the component context itself. Host-provided\n      // ReactiveState instances are preserved above; this path is only\n      // for ctx values and defaults.\n      if (isReactiveState(raw)) return (raw as { value: unknown }).value;\n      if (\n        raw &&\n        typeof raw === 'object' &&\n        'value' in raw &&\n        !(raw instanceof Node)\n      )\n        return (raw as { value: unknown }).value;\n      if (raw != null && raw !== '') {\n        if (typeof def === 'boolean' && typeof raw === 'string') {\n          return raw === 'true';\n        }\n        if (\n          typeof def === 'number' &&\n          typeof raw === 'string' &&\n          !Number.isNaN(Number(raw))\n        )\n          return Number(raw);\n        return raw;\n      }\n      return def;\n    },\n    has(_target, prop: string) {\n      return typeof prop === 'string' && (prop in ctx || prop in defaults);\n    },\n    ownKeys() {\n      return Array.from(\n        new Set([...Object.keys(defaults), ...Object.keys(ctx || {})]),\n      );\n    },\n    getOwnPropertyDescriptor() {\n      return { configurable: true, enumerable: true } as PropertyDescriptor;\n    },\n  });\n\n  return result as T;\n}\n\n/**\n * Register prop defaults and return a stable props object for use inside render.\n * The returned object reads values from the current component context at render\n * time and falls back to the provided defaults. This keeps prop access stable\n * in production builds and avoids reliance on parsing the render function.\n *\n * Must be called during render. Example:\n * const props = useProps({ modelValue: false });\n */\n// (useProps now returns the props object directly)\n\n/**\n * Register a style function that will be called during each render\n * to provide reactive styles for the component\n *\n * @example\n * ```ts\n * import { css } from '@lib/style';\n *\n * component('my-component', () => {\n *   const { theme } = useProps({ theme: 'light' });\n *\n *   useStyle(() => css`\n *     :host {\n *       background: ${theme === 'light' ? 'white' : 'black'};\n *       color: ${theme === 'light' ? 'black' : 'white'};\n *     }\n *   `);\n *\n *   return html`<div>Styled component</div>`;\n * });\n * ```\n */\nexport function useStyle(callback: () => string): void {\n  if (!currentComponentContext) {\n    throw new Error('useStyle must be called during component render');\n  }\n\n  // During discovery render, skip style computation — no real DOM to style.\n  if (_isDiscoveryRenderFn()) return;\n\n  ensureHookCallbacks(currentComponentContext);\n\n  // Execute the callback immediately during render to capture the current style\n  // This ensures reactive state is read during the render phase, not during style application\n  try {\n    const computedStyle = callback();\n\n    // Store the computed style using Object.defineProperty to avoid triggering reactive updates\n    Object.defineProperty(currentComponentContext, '_computedStyle', {\n      value: computedStyle,\n      writable: true,\n      enumerable: false,\n      configurable: true,\n    });\n  } catch (error) {\n    devWarn('Error in useStyle callback:', error);\n    Object.defineProperty(currentComponentContext, '_computedStyle', {\n      value: '',\n      writable: true,\n      enumerable: false,\n      configurable: true,\n    });\n  }\n}\n\n/**\n * Cache of globally-injected stylesheets keyed by their CSS content.\n * Prevents duplicate `<style>` injections when the same `useGlobalStyle()`\n * factory runs across multiple component instances.\n */\nconst _globalStyleSheets = new Map<string, CSSStyleSheet>();\n\n/**\n * Inject CSS into `document.adoptedStyleSheets`, escaping the Shadow DOM\n * boundary. Suitable for `@font-face` declarations, `:root` variable overrides,\n * and global scroll/scroll-bar styling. Deduplicated by CSS content so calling\n * this in multiple component instances is safe.\n *\n * **Use sparingly** — this intentionally breaks Shadow DOM encapsulation.\n * A dev-mode warning is emitted to make the escape hatch visible.\n *\n * @example\n * ```ts\n * component('app-root', () => {\n *   useGlobalStyle(() => css`\n *     @font-face {\n *       font-family: 'Inter';\n *       src: url('/fonts/inter.woff2') format('woff2');\n *     }\n *     :root {\n *       --app-font: 'Inter', sans-serif;\n *     }\n *   `);\n *   return html`<slot></slot>`;\n * });\n * ```\n */\nexport function useGlobalStyle(styleFactory: () => string): void {\n  if (typeof document === 'undefined' || typeof CSSStyleSheet === 'undefined') {\n    return; // SSR / no-DOM environment — skip silently\n  }\n  devWarn(\n    '[useGlobalStyle] Injecting global styles from a component. ' +\n      'This escapes Shadow DOM encapsulation — use sparingly.',\n  );\n  const raw = styleFactory();\n  const style = minifyCSS(sanitizeCSS(raw));\n  if (!style || _globalStyleSheets.has(style)) return;\n  try {\n    const sheet = new CSSStyleSheet();\n    sheet.replaceSync(style);\n    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];\n    _globalStyleSheets.set(style, sheet);\n  } catch {\n    // Fallback: inject a <style> element in <head>\n    const el = document.createElement('style');\n    el.textContent = style;\n    (document.head ?? document.documentElement).appendChild(el);\n  }\n}\n\n/**\n * Design token definitions accepted by `useDesignTokens()`.\n * Map high-level token names to CSS custom property overrides.\n */\nexport interface DesignTokens {\n  /** Override the primary color scale root (sets --cer-color-primary-500) */\n  primary?: string;\n  /** Override the secondary color scale root */\n  secondary?: string;\n  /** Override the neutral color scale root */\n  neutral?: string;\n  /** Override the success color root */\n  success?: string;\n  /** Override the info color root */\n  info?: string;\n  /** Override the warning color root */\n  warning?: string;\n  /** Override the error color root */\n  error?: string;\n  /** Override the sans-serif font family */\n  fontSans?: string;\n  /** Override the serif font family */\n  fontSerif?: string;\n  /** Override the monospace font family */\n  fontMono?: string;\n  /** Additional arbitrary CSS custom property overrides */\n  [key: string]: string | undefined;\n}\n\n/**\n * Apply design tokens to `:host` as CSS custom property overrides.\n * Must be called during component render. This is a typed, validated\n * alternative to writing `useStyle(() => css\\`:host { ... }\\`)` by hand.\n *\n * Semantic color tokens (e.g. `primary: '#6366f1'`) set the `*-500` shade\n * for that scale. Use arbitrary `'--cer-color-primary-500'` keys to override\n * individual shades.\n *\n * @example\n * ```ts\n * component('app-root', () => {\n *   useDesignTokens({\n *     primary: '#6366f1',\n *     fontSans: '\"Inter\", sans-serif',\n *     '--cer-color-neutral-900': '#0a0a0a',\n *   });\n *   return html`<slot></slot>`;\n * });\n * ```\n */\nexport function useDesignTokens(tokens: DesignTokens): void {\n  if (!currentComponentContext) {\n    throw new Error('useDesignTokens must be called during component render');\n  }\n\n  if (_isDiscoveryRenderFn()) return;\n\n  const declarations: string[] = [];\n  const semanticColorMap: Record<string, string> = {\n    primary: '--cer-color-primary-500',\n    secondary: '--cer-color-secondary-500',\n    neutral: '--cer-color-neutral-500',\n    success: '--cer-color-success-500',\n    info: '--cer-color-info-500',\n    warning: '--cer-color-warning-500',\n    error: '--cer-color-error-500',\n  };\n  const fontMap: Record<string, string> = {\n    fontSans: '--cer-font-sans',\n    fontSerif: '--cer-font-serif',\n    fontMono: '--cer-font-mono',\n  };\n\n  for (const [key, value] of Object.entries(tokens)) {\n    if (value === undefined) continue;\n    if (key in semanticColorMap) {\n      declarations.push(`${semanticColorMap[key]}:${value}`);\n    } else if (key in fontMap) {\n      declarations.push(`${fontMap[key]}:${value}`);\n    } else if (key.startsWith('--')) {\n      declarations.push(`${key}:${value}`);\n    }\n  }\n\n  if (declarations.length === 0) return;\n\n  const cssText = `:host{${declarations.join(';')}}`;\n\n  // Append to any existing computed style\n  const ctx = currentComponentContext as { _computedStyle?: string };\n  const existing = ctx._computedStyle ?? '';\n  const combined = existing ? `${existing}\\n${cssText}` : cssText;\n\n  Object.defineProperty(currentComponentContext, '_computedStyle', {\n    value: combined,\n    writable: true,\n    enumerable: false,\n    configurable: true,\n  });\n}\n\n// ---------- provide / inject ----------\n\n/**\n * Store a value under a key so that descendant components can retrieve it\n * with `inject()`. Must be called during component render.\n *\n * @example\n * ```ts\n * component('theme-provider', () => {\n *   provide('theme', 'dark');\n *   return html`<slot></slot>`;\n * });\n * ```\n */\nexport function provide<T>(key: string | symbol, value: T): void {\n  if (!currentComponentContext) {\n    throw new Error('provide must be called during component render');\n  }\n\n  // During discovery render, skip provide — the ephemeral context is discarded.\n  if (_isDiscoveryRenderFn()) return;\n\n  const ctx = currentComponentContext as Record<string | symbol, unknown>;\n  if (!ctx[PROVIDES_KEY]) {\n    Object.defineProperty(ctx, PROVIDES_KEY, {\n      value: new Map<string | symbol, unknown>(),\n      writable: false,\n      enumerable: false,\n      configurable: true,\n    });\n  }\n  (ctx[PROVIDES_KEY] as Map<string | symbol, unknown>).set(key, value);\n}\n\n/**\n * Retrieve a value provided by an ancestor component. Traverses the shadow\n * DOM tree upward through ShadowRoot host elements looking for the nearest\n * `provide()` call with the matching key. Returns `defaultValue` (or\n * `undefined`) when no provider is found. Must be called during render.\n *\n * @example\n * ```ts\n * component('themed-button', () => {\n *   const theme = inject<string>('theme', 'light');\n *   return html`<button class=\"btn-${theme}\">Click</button>`;\n * });\n * ```\n */\nexport function inject<T>(\n  key: string | symbol,\n  defaultValue?: T,\n): T | undefined {\n  if (!currentComponentContext) {\n    throw new Error('inject must be called during component render');\n  }\n\n  // During discovery render, the host tree is not yet mounted — return the\n  // default value to allow prop detection to continue without DOM traversal.\n  if (_isDiscoveryRenderFn()) return defaultValue;\n\n  try {\n    const host = (currentComponentContext as { _host?: HTMLElement })._host;\n    if (host) {\n      let node: Node | null = host.parentNode as Node | null;\n      if (!node) node = host.getRootNode() as Node | null;\n\n      // Depth counter prevents infinite loops in detached subtrees where\n      // getRootNode() may return a subtree root instead of `document`.\n      let depth = 0;\n      const MAX_DEPTH = 50;\n\n      while (node && depth < MAX_DEPTH) {\n        depth++;\n        if (node instanceof ShadowRoot) {\n          const shadowHost = node.host;\n          const hostCtx = (\n            shadowHost as unknown as {\n              context?: Record<string | symbol, unknown>;\n            }\n          ).context;\n          if (hostCtx) {\n            const provides = hostCtx[PROVIDES_KEY] as\n              | Map<string | symbol, unknown>\n              | undefined;\n            if (provides?.has(key)) {\n              return provides.get(key) as T;\n            }\n          }\n          const next: Node | null = shadowHost.parentNode as Node | null;\n          node = next ?? (shadowHost.getRootNode() as Node | null);\n          if (node === document || node === shadowHost) break;\n        } else {\n          // Also check light-DOM ancestor elements that may be custom components\n          // with provides (e.g. a consumer that is a slotted child of a provider).\n          if (node instanceof Element) {\n            const elCtx = (\n              node as unknown as {\n                context?: Record<string | symbol, unknown>;\n              }\n            ).context;\n            if (elCtx) {\n              const provides = elCtx[PROVIDES_KEY] as\n                | Map<string | symbol, unknown>\n                | undefined;\n              if (provides?.has(key)) {\n                return provides.get(key) as T;\n              }\n            }\n          }\n          const prevNode = node;\n          const next: Node | null = (node as Node).parentNode as Node | null;\n          node = next ?? ((node as Node).getRootNode?.() as Node | null);\n          // Guard against infinite loops: if getRootNode() returns the same\n          // node (disconnected element with no ancestors), stop traversal.\n          if (node === document || node === prevNode) break;\n        }\n      }\n    }\n  } catch {\n    // ignore traversal errors - fall through to default\n  }\n\n  return defaultValue;\n}\n\n// ---------- createComposable ----------\n\n/**\n * Execute a function that calls hooks (useOnConnected, useOnDisconnected, etc.)\n * using an explicit component context rather than requiring the call to happen\n * directly inside a render function. This enables composable utility functions\n * that register lifecycle callbacks from outside the render body.\n *\n * @example\n * ```ts\n * function useLogger(label: string) {\n *   return createComposable(() => {\n *     useOnConnected(() => console.log(`${label} connected`));\n *     useOnDisconnected(() => console.log(`${label} disconnected`));\n *   });\n * }\n *\n * component('my-comp', () => {\n *   const stopLogger = useLogger('my-comp');\n *   stopLogger(context); // pass the component context explicitly\n *   return html`<div>Hello</div>`;\n * });\n * ```\n *\n * More commonly, use it as a direct wrapper inside render:\n * ```ts\n * component('my-comp', () => {\n *   // Accepts context automatically from getCurrentComponentContext()\n *   createComposable(() => {\n *     useOnConnected(() => console.log('connected from composable'));\n *   })();\n *   return html`<div>Hello</div>`;\n * });\n * ```\n */\nexport function createComposable<T>(\n  fn: () => T,\n): (ctx?: Record<string, unknown>) => T {\n  return (ctx?: Record<string, unknown>) => {\n    const targetCtx = ctx ?? currentComponentContext;\n    if (!targetCtx) {\n      throw new Error(\n        'createComposable: no component context available. Pass a context explicitly or call inside a render function.',\n      );\n    }\n\n    const prev = currentComponentContext;\n    setCurrentComponentContext(targetCtx);\n    try {\n      return fn();\n    } finally {\n      // Restore the previous context (supports nested composables)\n      if (prev) {\n        setCurrentComponentContext(prev);\n      } else {\n        clearCurrentComponentContext();\n      }\n    }\n  };\n}\n\n/**\n * Expose a public interface from the current component so that parent\n * components holding a template ref to this element can call its methods\n * or read its properties. Must be called during component render.\n *\n * @example\n * ```ts\n * component('my-counter', () => {\n *   const count = ref(0);\n *   useExpose({ increment: () => count.value++, get count() { return count.value; } });\n *   return html`<div>${count.value}</div>`;\n * });\n *\n * // Parent: counterRef.value.increment()\n * ```\n */\nexport function useExpose<T extends Record<string, unknown>>(exposed: T): void {\n  if (!currentComponentContext) {\n    throw new Error('useExpose must be called during component render');\n  }\n\n  // During discovery render, skip — no real host to expose properties on\n  if (_isDiscoveryRenderFn()) return;\n\n  ensureHookCallbacks(currentComponentContext);\n  const hooks = currentComponentContext._hookCallbacks as InternalHookCallbacks;\n  hooks.expose = { ...(hooks.expose ?? {}), ...exposed };\n\n  // Apply exposed properties onto the host element immediately if available\n  const host = (currentComponentContext as { _host?: HTMLElement })._host;\n  if (host) {\n    for (const [key, value] of Object.entries(exposed)) {\n      try {\n        (host as unknown as Record<string, unknown>)[key] = value;\n      } catch {\n        // ignore non-writable properties\n      }\n    }\n  }\n}\n\n/**\n * Access named slots provided to the current component. Returns helpers to\n * check slot presence and retrieve slotted elements. Must be called during\n * component render.\n *\n * @example\n * ```ts\n * component('my-card', () => {\n *   const slots = useSlots();\n *   return html`\n *     <div class=\"card\">\n *       <slot></slot>\n *       ${slots.has('footer') ? html`<footer><slot name=\"footer\"></slot></footer>` : ''}\n *     </div>\n *   `;\n * });\n * ```\n */\nexport function useSlots(): {\n  has(name?: string): boolean;\n  getNodes(name?: string): Element[];\n  names(): string[];\n} {\n  if (!currentComponentContext) {\n    throw new Error('useSlots must be called during component render');\n  }\n\n  // During discovery render, return empty no-op slot object\n  if (_isDiscoveryRenderFn()) {\n    return { has: () => false, getNodes: () => [], names: () => [] };\n  }\n\n  const host = (currentComponentContext as { _host?: HTMLElement })._host;\n\n  // Single-pass collection: group children by slot name once, reuse for all methods.\n  const getSlotMap = (): Map<string, Element[]> => {\n    const map = new Map<string, Element[]>();\n    if (!host) return map;\n    for (const child of host.children) {\n      const key = child.getAttribute('slot') ?? 'default';\n      const bucket = map.get(key);\n      if (bucket) {\n        bucket.push(child);\n      } else {\n        map.set(key, [child]);\n      }\n    }\n    return map;\n  };\n\n  return {\n    /**\n     * Returns true if the named slot (or the default slot when name is\n     * omitted) has at least one slotted child element.\n     */\n    has(name?: string): boolean {\n      if (!host) return false;\n      const slotName = !name || name === 'default' ? 'default' : name;\n      const bucket = getSlotMap().get(slotName);\n      return bucket !== undefined && bucket.length > 0;\n    },\n    /**\n     * Returns all child elements assigned to the named slot (or the default\n     * slot when name is omitted).\n     */\n    getNodes(name?: string): Element[] {\n      if (!host) return [];\n      const slotName = !name || name === 'default' ? 'default' : name;\n      return getSlotMap().get(slotName) ?? [];\n    },\n    /** Returns the names of all slots that have content, including 'default'. */\n    names(): string[] {\n      if (!host) return [];\n      return Array.from(getSlotMap().keys());\n    },\n  };\n}\n\n/**\n * A writable ref that reads from a component prop and emits `update:<propName>`\n * when its value is set, enabling two-way binding with a parent's `:model` or\n * `:model:<propName>` directive.\n *\n * Also recognised by the vdom `:model` directive as a reactive value so it can\n * be passed directly to native inputs inside the child template.\n */\nexport interface ModelRef<T> {\n  /** The current prop value. Reactive — reads trigger re-renders. */\n  value: T;\n}\n\n/**\n * Define a two-way binding model for a component prop, similar to Vue's\n * `defineModel()`. It combines `useProps` + `useEmit` into a single ergonomic\n * API so child components don't need to wire the plumbing manually.\n *\n * The returned `ModelRef` object:\n * - **reads** `.value` → returns the current prop value (reactive)\n * - **writes** `.value = x` → emits `update:<propName>` so the parent's\n *   `:model` / `:model:<propName>` directive can update its reactive state\n *\n * The object is also recognised by the vdom `:model` directive, so you can\n * pass it directly to a native input's `:model` binding inside the child\n * template and the two-way sync is wired up automatically.\n *\n * @example\n * ```ts\n * // Default model — maps to the parent's :model=\"...\"\n * component('my-input', () => {\n *   const model = defineModel('');\n *\n *   return html`\n *     <input :model=\"${model}\" />\n *   `;\n * });\n *\n * // Named model — maps to the parent's :model:title=\"...\"\n * component('my-field', () => {\n *   const title = defineModel('title', '');\n *   const count = defineModel('count', 0);\n *\n *   return html`\n *     <input :model=\"${title}\" />\n *     <input type=\"number\" :model=\"${count}\" />\n *   `;\n * });\n * ```\n *\n * @param args - Either:\n *   - No arguments → `modelValue` prop, no default.\n *   - One argument → treated as the **default value** for the `modelValue` prop;\n *     type is inferred from the value.\n *   - Two arguments → first is the **prop name**, second is the **default value**;\n *     type is inferred from the default value.\n */\nexport function defineModel<T = unknown>(): ModelRef<T | undefined>;\nexport function defineModel<T>(defaultValue: T): ModelRef<T>;\nexport function defineModel<T>(propName: string, defaultValue: T): ModelRef<T>;\nexport function defineModel<T = unknown>(\n  ...args: [] | [T] | [string, T]\n): ModelRef<T | undefined> {\n  if (!currentComponentContext) {\n    throw new Error('defineModel must be called during component render');\n  }\n\n  const propName = args.length === 2 ? (args[0] as string) : 'modelValue';\n  const initialDefault =\n    args.length === 2\n      ? (args[1] as T)\n      : args.length === 1\n        ? (args[0] as T)\n        : undefined;\n\n  // Register the prop so the runtime discovers it during the discovery render\n  // and includes it in the component's observed attributes / prop definitions.\n  const props = useProps({\n    [propName]: initialDefault,\n  } as Record<string, unknown>);\n\n  // Capture the emit function once — during a discovery render this is a no-op.\n  const isDiscovery = _isDiscoveryRenderFn();\n  const emitFn = isDiscovery\n    ? null\n    : (() => {\n        const candidate = (currentComponentContext as { emit?: unknown }).emit;\n        if (typeof candidate !== 'function') return null;\n        return candidate as (\n          eventName: string,\n          detail?: unknown,\n          options?: CustomEventInit,\n        ) => boolean;\n      })();\n\n  // The model ref is marked with the ReactiveState symbol so that\n  // processModelDirective treats it as a reactive value and wires up\n  // `:model` on native inputs inside the child template correctly.\n  const modelRef: ModelRef<T> = {\n    get value(): T {\n      return props[propName] as T;\n    },\n    set value(newValue: T) {\n      if (emitFn) {\n        emitFn(`update:${propName}`, newValue);\n      }\n    },\n  };\n\n  try {\n    const key = Symbol.for('@cer/ReactiveState');\n    Object.defineProperty(modelRef, key, {\n      value: true,\n      enumerable: false,\n      configurable: false,\n    });\n  } catch {\n    // ignore exotic runtimes\n  }\n\n  return modelRef;\n}\n"],"names":["isDiscoveryRender","_isDiscoveryRenderFn","currentComponentContext","PROVIDES_KEY","setCurrentComponentContext","context","clearCurrentComponentContext","getCurrentComponentContext","useEmit","emitCandidate","emitFn","eventName","detail","options","ensureHookCallbacks","useOnConnected","callback","hooks","useOnDisconnected","useOnAttributeChanged","useOnError","err","handlerErr","devError","useProps","defaults","ctx","declaredKeys","key","existing","localValue","host","kebabKey","toKebab","attrValue","defaultType","fromHost","isReactiveState","v","_target","prop","def","hostValue","isWrapperLike","raw","useStyle","computedStyle","error","devWarn","_globalStyleSheets","useGlobalStyle","styleFactory","style","minifyCSS","sanitizeCSS","sheet","el","useDesignTokens","tokens","declarations","semanticColorMap","fontMap","value","cssText","combined","provide","inject","defaultValue","node","depth","MAX_DEPTH","shadowHost","hostCtx","provides","elCtx","prevNode","createComposable","fn","targetCtx","prev","useExpose","exposed","useSlots","getSlotMap","map","child","bucket","name","slotName","defineModel","args","propName","initialDefault","props","candidate","modelRef","newValue"],"mappings":"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"}

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 export { component } from './runtime/component';
-export { useEmit, useOnConnected, useOnDisconnected, useOnAttributeChanged, useOnError, useStyle, useProps, defineModel, provide, inject, createComposable, useExpose, useSlots, getCurrentComponentContext, } from './runtime/hooks';
-export type { ModelRef } from './runtime/hooks';
+export { useEmit, useOnConnected, useOnDisconnected, useOnAttributeChanged, useOnError, useStyle, useDesignTokens, useGlobalStyle, useProps, defineModel, provide, inject, createComposable, useExpose, useSlots, getCurrentComponentContext, } from './runtime/hooks';
+export type { ModelRef, JITCSSOptions, DesignTokens } from './runtime/hooks';
 export { ref, computed, watch, watchEffect, isReactiveState, } from './runtime/reactive';
 export { ReactiveState } from './runtime/reactive';
 export { html } from './runtime/template-compiler';
-export { css } from './runtime/style';
+export { css } from './runtime/css-utils';
 export { unsafeHTML, decodeEntities } from './runtime/helpers';
 export type { VNode } from './runtime/types';
 export { setDevMode, devLog } from './runtime/logger';

package/dist/jit-css.d.ts

@@ -0,0 +1,30 @@
+/**
+ * JIT CSS entry point — opt-in import for the full JIT CSS engine.
+ *
+ * @example
+ * ```ts
+ * import {
+ *   useJITCSS,
+ *   enableJITCSS,
+ * } from '@jasonshimmy/custom-elements-runtime/jit-css';
+ * ```
+ */
+export { useJITCSS } from './runtime/jit-hooks';
+export { useDesignTokens, useGlobalStyle } from './runtime/hooks';
+export type { JITCSSOptions, DesignTokens } from './runtime/hooks';
+export { enableJITCSS, disableJITCSS, isJITCSSEnabled, isJITCSSEnabledFor, registerJITCSSComponent, getJITCSSOptions, jitCSS, extractClassesFromHTML, parseColorClass, parseColorWithOpacity, parseGradientColorStop, parseSpacing, parseArbitrary, utilityMap, selectorVariants, mediaVariants, containerVariants, colors, } from './runtime/style';
+/**
+ * A no-op identity function that signals to development tools (IDE
+ * autocomplete, linters, PurgeCSS-style scanners) that the string contains
+ * JIT CSS utility class names.
+ *
+ * At runtime this is simply `return className` — zero overhead.
+ *
+ * @example
+ * ```ts
+ * import { cls } from '@jasonshimmy/custom-elements-runtime/jit-css';
+ *
+ * const containerClasses = cls('flex items-center gap-4 bg-primary-500 text-white');
+ * ```
+ */
+export declare function cls(className: string): string;

package/dist/namespace-helpers-CnpZ5__p.js

@@ -0,0 +1,45 @@
+const A = {
+  xlink: "http://www.w3.org/1999/xlink",
+  xml: "http://www.w3.org/XML/1998/namespace"
+};
+function w(s, t, r) {
+  try {
+    if (!t || !t.includes(":")) {
+      s.setAttribute(t, r);
+      return;
+    }
+    const n = t.indexOf(":"), c = t.substring(0, n), i = t.substring(n + 1), o = A[c];
+    o ? s.setAttributeNS(o, i, r) : s.setAttribute(t, r);
+  } catch {
+    try {
+      s.setAttribute(t, r);
+    } catch {
+    }
+  }
+}
+function a(s, t) {
+  try {
+    if (!t || !t.includes(":")) {
+      s.removeAttribute(t);
+      return;
+    }
+    const r = t.indexOf(":"), n = t.substring(0, r), c = t.substring(r + 1), i = A[n];
+    i ? s.removeAttributeNS(i, c) : s.removeAttribute(t);
+  } catch {
+    try {
+      s.removeAttribute(t);
+    } catch {
+    }
+  }
+}
+const e = "http://www.w3.org/2000/svg", u = "http://www.w3.org/1998/Math/MathML", b = {
+  svg: e,
+  math: u
+};
+export {
+  e as S,
+  b as T,
+  a as r,
+  w as s
+};
+//# sourceMappingURL=namespace-helpers-CnpZ5__p.js.map

package/dist/namespace-helpers-CnpZ5__p.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"namespace-helpers-CnpZ5__p.js","sources":["../src/lib/runtime/namespace-helpers.ts"],"sourcesContent":["/**\n * Namespace-aware attribute helpers.\n * Provides small, fast utilities to set/remove attributes using the\n * appropriate namespace when an attribute uses a known prefix (e.g. xlink:href).\n */\n\nconst ATTR_NAMESPACE_MAP: Record<string, string> = {\n  xlink: 'http://www.w3.org/1999/xlink',\n  xml: 'http://www.w3.org/XML/1998/namespace',\n};\n\n/**\n * Set attribute using namespace when the key contains a known prefix.\n */\nexport function setAttributeSmart(\n  el: Element,\n  key: string,\n  value: string,\n): void {\n  try {\n    if (!key || !key.includes(':')) {\n      el.setAttribute(key, value);\n      return;\n    }\n    const idx = key.indexOf(':');\n    const prefix = key.substring(0, idx);\n    const local = key.substring(idx + 1);\n    const ns = ATTR_NAMESPACE_MAP[prefix];\n    if (ns) el.setAttributeNS(ns, local, value);\n    else el.setAttribute(key, value);\n  } catch {\n    try {\n      // Fallback to un-namespaced setAttribute on error\n      el.setAttribute(key, value);\n    } catch {\n      /* swallow */\n    }\n  }\n}\n\n/**\n * Remove attribute using namespace when the key contains a known prefix.\n */\nexport function removeAttributeSmart(el: Element, key: string): void {\n  try {\n    if (!key || !key.includes(':')) {\n      el.removeAttribute(key);\n      return;\n    }\n    const idx = key.indexOf(':');\n    const prefix = key.substring(0, idx);\n    const local = key.substring(idx + 1);\n    const ns = ATTR_NAMESPACE_MAP[prefix];\n    if (ns) el.removeAttributeNS(ns, local);\n    else el.removeAttribute(key);\n  } catch {\n    try {\n      el.removeAttribute(key);\n    } catch {\n      /* swallow */\n    }\n  }\n}\n\nexport const __TEST_ONLY_ATTR_NS_MAP = ATTR_NAMESPACE_MAP;\n\n// Common element namespace URIs and a small tag->namespace map used by\n// both the client renderer and the SSR serializer. Exporting these from\n// this module keeps namespace knowledge centralized and prevents\n// accidental duplication between runtime and SSR code.\nexport const SVG_NS = 'http://www.w3.org/2000/svg';\nexport const MATHML_NS = 'http://www.w3.org/1998/Math/MathML';\n\nexport const TAG_NAMESPACE_MAP: Record<string, string> = {\n  svg: SVG_NS,\n  math: MATHML_NS,\n};\n"],"names":["ATTR_NAMESPACE_MAP","setAttributeSmart","el","key","value","idx","prefix","local","ns","removeAttributeSmart","SVG_NS","MATHML_NS","TAG_NAMESPACE_MAP"],"mappings":"AAMA,MAAMA,IAA6C;AAAA,EACjD,OAAO;AAAA,EACP,KAAK;AACP;AAKO,SAASC,EACdC,GACAC,GACAC,GACM;AACN,MAAI;AACF,QAAI,CAACD,KAAO,CAACA,EAAI,SAAS,GAAG,GAAG;AAC9B,MAAAD,EAAG,aAAaC,GAAKC,CAAK;AAC1B;AAAA,IACF;AACA,UAAMC,IAAMF,EAAI,QAAQ,GAAG,GACrBG,IAASH,EAAI,UAAU,GAAGE,CAAG,GAC7BE,IAAQJ,EAAI,UAAUE,IAAM,CAAC,GAC7BG,IAAKR,EAAmBM,CAAM;AACpC,IAAIE,IAAIN,EAAG,eAAeM,GAAID,GAAOH,CAAK,IACrCF,EAAG,aAAaC,GAAKC,CAAK;AAAA,EACjC,QAAQ;AACN,QAAI;AAEF,MAAAF,EAAG,aAAaC,GAAKC,CAAK;AAAA,IAC5B,QAAQ;AAAA,IAER;AAAA,EACF;AACF;AAKO,SAASK,EAAqBP,GAAaC,GAAmB;AACnE,MAAI;AACF,QAAI,CAACA,KAAO,CAACA,EAAI,SAAS,GAAG,GAAG;AAC9B,MAAAD,EAAG,gBAAgBC,CAAG;AACtB;AAAA,IACF;AACA,UAAME,IAAMF,EAAI,QAAQ,GAAG,GACrBG,IAASH,EAAI,UAAU,GAAGE,CAAG,GAC7BE,IAAQJ,EAAI,UAAUE,IAAM,CAAC,GAC7BG,IAAKR,EAAmBM,CAAM;AACpC,IAAIE,IAAIN,EAAG,kBAAkBM,GAAID,CAAK,IACjCL,EAAG,gBAAgBC,CAAG;AAAA,EAC7B,QAAQ;AACN,QAAI;AACF,MAAAD,EAAG,gBAAgBC,CAAG;AAAA,IACxB,QAAQ;AAAA,IAER;AAAA,EACF;AACF;AAQO,MAAMO,IAAS,8BACTC,IAAY,sCAEZC,IAA4C;AAAA,EACvD,KAAKF;AAAA,EACL,MAAMC;AACR;"}

package/dist/namespace-helpers-CyIDtI97.cjs

@@ -0,0 +1,2 @@
+"use strict";const A={xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace"};function u(r,t,s){try{if(!t||!t.includes(":")){r.setAttribute(t,s);return}const i=t.indexOf(":"),c=t.substring(0,i),n=t.substring(i+1),o=A[c];o?r.setAttributeNS(o,n,s):r.setAttribute(t,s)}catch{try{r.setAttribute(t,s)}catch{}}}function b(r,t){try{if(!t||!t.includes(":")){r.removeAttribute(t);return}const s=t.indexOf(":"),i=t.substring(0,s),c=t.substring(s+1),n=A[i];n?r.removeAttributeNS(n,c):r.removeAttribute(t)}catch{try{r.removeAttribute(t)}catch{}}}const e="http://www.w3.org/2000/svg",w="http://www.w3.org/1998/Math/MathML",S={svg:e,math:w};exports.SVG_NS=e;exports.TAG_NAMESPACE_MAP=S;exports.removeAttributeSmart=b;exports.setAttributeSmart=u;
+//# sourceMappingURL=namespace-helpers-CyIDtI97.cjs.map

package/dist/namespace-helpers-CyIDtI97.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"namespace-helpers-CyIDtI97.cjs","sources":["../src/lib/runtime/namespace-helpers.ts"],"sourcesContent":["/**\n * Namespace-aware attribute helpers.\n * Provides small, fast utilities to set/remove attributes using the\n * appropriate namespace when an attribute uses a known prefix (e.g. xlink:href).\n */\n\nconst ATTR_NAMESPACE_MAP: Record<string, string> = {\n  xlink: 'http://www.w3.org/1999/xlink',\n  xml: 'http://www.w3.org/XML/1998/namespace',\n};\n\n/**\n * Set attribute using namespace when the key contains a known prefix.\n */\nexport function setAttributeSmart(\n  el: Element,\n  key: string,\n  value: string,\n): void {\n  try {\n    if (!key || !key.includes(':')) {\n      el.setAttribute(key, value);\n      return;\n    }\n    const idx = key.indexOf(':');\n    const prefix = key.substring(0, idx);\n    const local = key.substring(idx + 1);\n    const ns = ATTR_NAMESPACE_MAP[prefix];\n    if (ns) el.setAttributeNS(ns, local, value);\n    else el.setAttribute(key, value);\n  } catch {\n    try {\n      // Fallback to un-namespaced setAttribute on error\n      el.setAttribute(key, value);\n    } catch {\n      /* swallow */\n    }\n  }\n}\n\n/**\n * Remove attribute using namespace when the key contains a known prefix.\n */\nexport function removeAttributeSmart(el: Element, key: string): void {\n  try {\n    if (!key || !key.includes(':')) {\n      el.removeAttribute(key);\n      return;\n    }\n    const idx = key.indexOf(':');\n    const prefix = key.substring(0, idx);\n    const local = key.substring(idx + 1);\n    const ns = ATTR_NAMESPACE_MAP[prefix];\n    if (ns) el.removeAttributeNS(ns, local);\n    else el.removeAttribute(key);\n  } catch {\n    try {\n      el.removeAttribute(key);\n    } catch {\n      /* swallow */\n    }\n  }\n}\n\nexport const __TEST_ONLY_ATTR_NS_MAP = ATTR_NAMESPACE_MAP;\n\n// Common element namespace URIs and a small tag->namespace map used by\n// both the client renderer and the SSR serializer. Exporting these from\n// this module keeps namespace knowledge centralized and prevents\n// accidental duplication between runtime and SSR code.\nexport const SVG_NS = 'http://www.w3.org/2000/svg';\nexport const MATHML_NS = 'http://www.w3.org/1998/Math/MathML';\n\nexport const TAG_NAMESPACE_MAP: Record<string, string> = {\n  svg: SVG_NS,\n  math: MATHML_NS,\n};\n"],"names":["ATTR_NAMESPACE_MAP","setAttributeSmart","el","key","value","idx","prefix","local","ns","removeAttributeSmart","SVG_NS","MATHML_NS","TAG_NAMESPACE_MAP"],"mappings":"aAMA,MAAMA,EAA6C,CACjD,MAAO,+BACP,IAAK,sCACP,EAKO,SAASC,EACdC,EACAC,EACAC,EACM,CACN,GAAI,CACF,GAAI,CAACD,GAAO,CAACA,EAAI,SAAS,GAAG,EAAG,CAC9BD,EAAG,aAAaC,EAAKC,CAAK,EAC1B,MACF,CACA,MAAMC,EAAMF,EAAI,QAAQ,GAAG,EACrBG,EAASH,EAAI,UAAU,EAAGE,CAAG,EAC7BE,EAAQJ,EAAI,UAAUE,EAAM,CAAC,EAC7BG,EAAKR,EAAmBM,CAAM,EAChCE,EAAIN,EAAG,eAAeM,EAAID,EAAOH,CAAK,EACrCF,EAAG,aAAaC,EAAKC,CAAK,CACjC,MAAQ,CACN,GAAI,CAEFF,EAAG,aAAaC,EAAKC,CAAK,CAC5B,MAAQ,CAER,CACF,CACF,CAKO,SAASK,EAAqBP,EAAaC,EAAmB,CACnE,GAAI,CACF,GAAI,CAACA,GAAO,CAACA,EAAI,SAAS,GAAG,EAAG,CAC9BD,EAAG,gBAAgBC,CAAG,EACtB,MACF,CACA,MAAME,EAAMF,EAAI,QAAQ,GAAG,EACrBG,EAASH,EAAI,UAAU,EAAGE,CAAG,EAC7BE,EAAQJ,EAAI,UAAUE,EAAM,CAAC,EAC7BG,EAAKR,EAAmBM,CAAM,EAChCE,EAAIN,EAAG,kBAAkBM,EAAID,CAAK,EACjCL,EAAG,gBAAgBC,CAAG,CAC7B,MAAQ,CACN,GAAI,CACFD,EAAG,gBAAgBC,CAAG,CACxB,MAAQ,CAER,CACF,CACF,CAQO,MAAMO,EAAS,6BACTC,EAAY,qCAEZC,EAA4C,CACvD,IAAKF,EACL,KAAMC,CACR"}

package/dist/router/types.d.ts

@@ -42,8 +42,8 @@ export interface Route {
     beforeEnter?: (to: RouteState, from: RouteState) => GuardResult;
     /** Guard that runs right before navigation commits — can cancel or redirect */
     onEnter?: (to: RouteState, from: RouteState) => GuardResult;
-    /** Hook that runs after navigation completes — cannot cancel */
-    afterEnter?: (to: RouteState, from: RouteState) => void;
+    /** Hook that runs after navigation completes — cannot cancel. May return a Promise. */
+    afterEnter?: (to: RouteState, from: RouteState) => void | Promise<void>;
 }
 /**
  * Props interface for the router-link component.
@@ -129,6 +129,8 @@ export interface Router {
     base: string;
     /** Scroll to a fragment/hash element */
     scrollToFragment: (frag?: string) => Promise<boolean>;
+    /** Destroy the router instance, removing event listeners. Call before reinitializing. */
+    destroy: () => void;
     /** Internal scroll state cleanup (optional) */
     _cleanupScrollState?: () => void;
 }

package/dist/runtime/css-utils.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Pure CSS utility functions — no JIT dependencies, no module-level side effects.
+ *
+ * Extracted so that render.ts and hooks.ts can import lightweight CSS helpers
+ * without pulling the entire JIT CSS engine into every consumer's bundle.
+ */
+/**
+ * CSS template literal tag
+ */
+export declare function css(strings: TemplateStringsArray, ...values: unknown[]): string;
+/**
+ * CSS minification utility (basic)
+ */
+export declare function minifyCSS(input: string): string;
+/**
+ * Sanitize CSS to prevent injection attacks (XSS, javascript: URLs, expression(), etc.)
+ */
+export declare function sanitizeCSS(input: string): string;
+/**
+ * Polyfill for CSS.escape() for SSR environments.
+ * Based on https://drafts.csswg.org/cssom/#serialize-an-identifier
+ */
+export declare function cssEscape(value: string): string;
+/** Escape a class name and prefix it with a dot for use in CSS selectors. */
+export declare function escapeClassName(name: string): string;
+/** Escape a string for use in a RegExp. */
+export declare function escapeRegExp(str: string): string;
+export declare const baseReset: string;
+/** Default spacing unit used by the JIT spacing scale. */
+export declare const spacing = "0.25rem";
+export declare function getBaseResetSheet(): CSSStyleSheet;
+/** Reset the base reset sheet singleton (for HMR). @internal */
+export declare function _resetBaseResetSheet(): void;

package/dist/runtime/discovery-state.d.ts

@@ -19,6 +19,9 @@ export declare function isDiscoveryRender(): boolean;
  * Mark the start of a discovery render pass.
  * Call this immediately before invoking the render function for the first time
  * (before `useProps` prop-name collection).
+ *
+ * Emits a dev warning when called while a discovery render is already active
+ * so that nested or mismatched begin/end pairs are surfaced during development.
  * @internal
  */
 export declare function beginDiscoveryRender(): void;

package/dist/runtime/hooks.d.ts

@@ -2,6 +2,8 @@
  * Context-based hooks for functional components
  * Provides React-like hooks with perfect TypeScript inference
  */
+import type { JITCSSOptions } from './style';
+export type { JITCSSOptions };
 export { beginDiscoveryRender, endDiscoveryRender } from './discovery-state';
 /**
  * Returns true while a discovery render is in progress.
@@ -150,6 +152,82 @@ export declare function useProps<T extends Record<string, unknown>>(defaults: T)
  * ```
  */
 export declare function useStyle(callback: () => string): void;
+/**
+ * Inject CSS into `document.adoptedStyleSheets`, escaping the Shadow DOM
+ * boundary. Suitable for `@font-face` declarations, `:root` variable overrides,
+ * and global scroll/scroll-bar styling. Deduplicated by CSS content so calling
+ * this in multiple component instances is safe.
+ *
+ * **Use sparingly** — this intentionally breaks Shadow DOM encapsulation.
+ * A dev-mode warning is emitted to make the escape hatch visible.
+ *
+ * @example
+ * ```ts
+ * component('app-root', () => {
+ *   useGlobalStyle(() => css`
+ *     @font-face {
+ *       font-family: 'Inter';
+ *       src: url('/fonts/inter.woff2') format('woff2');
+ *     }
+ *     :root {
+ *       --app-font: 'Inter', sans-serif;
+ *     }
+ *   `);
+ *   return html`<slot></slot>`;
+ * });
+ * ```
+ */
+export declare function useGlobalStyle(styleFactory: () => string): void;
+/**
+ * Design token definitions accepted by `useDesignTokens()`.
+ * Map high-level token names to CSS custom property overrides.
+ */
+export interface DesignTokens {
+    /** Override the primary color scale root (sets --cer-color-primary-500) */
+    primary?: string;
+    /** Override the secondary color scale root */
+    secondary?: string;
+    /** Override the neutral color scale root */
+    neutral?: string;
+    /** Override the success color root */
+    success?: string;
+    /** Override the info color root */
+    info?: string;
+    /** Override the warning color root */
+    warning?: string;
+    /** Override the error color root */
+    error?: string;
+    /** Override the sans-serif font family */
+    fontSans?: string;
+    /** Override the serif font family */
+    fontSerif?: string;
+    /** Override the monospace font family */
+    fontMono?: string;
+    /** Additional arbitrary CSS custom property overrides */
+    [key: string]: string | undefined;
+}
+/**
+ * Apply design tokens to `:host` as CSS custom property overrides.
+ * Must be called during component render. This is a typed, validated
+ * alternative to writing `useStyle(() => css\`:host { ... }\`)` by hand.
+ *
+ * Semantic color tokens (e.g. `primary: '#6366f1'`) set the `*-500` shade
+ * for that scale. Use arbitrary `'--cer-color-primary-500'` keys to override
+ * individual shades.
+ *
+ * @example
+ * ```ts
+ * component('app-root', () => {
+ *   useDesignTokens({
+ *     primary: '#6366f1',
+ *     fontSans: '"Inter", sans-serif',
+ *     '--cer-color-neutral-900': '#0a0a0a',
+ *   });
+ *   return html`<slot></slot>`;
+ * });
+ * ```
+ */
+export declare function useDesignTokens(tokens: DesignTokens): void;
 /**
  * Store a value under a key so that descendant components can retrieve it
  * with `inject()`. Must be called during component render.

package/dist/runtime/jit-hooks.d.ts

@@ -0,0 +1,28 @@
+/**
+ * JIT CSS hooks — lives in a separate module so that hooks.ts does not
+ * statically import style.ts. Consumers who never call `useJITCSS` will
+ * have the entire JIT engine tree-shaken out of their bundle.
+ */
+import { type JITCSSOptions } from './style';
+/**
+ * Configure the JIT CSS engine for the current session.
+ * This is a convenience wrapper around `enableJITCSS()` that can be called
+ * inside a component render function or at module initialisation time.
+ *
+ * @example
+ * ```ts
+ * component('my-component', () => {
+ *   // Enable extended Tailwind colors so bg-blue-500, text-violet-700, etc. generate CSS
+ *   useJITCSS({ extendedColors: true });
+ *   return html`<div class="bg-blue-500 text-white">Hello</div>`;
+ * });
+ * ```
+ *
+ * @example
+ * ```ts
+ * // At app entry – enable once for all components
+ * useJITCSS({ extendedColors: true, customColors: { brand: { '500': '#e63946' } } });
+ * ```
+ */
+export declare function useJITCSS(options?: JITCSSOptions): void;
+export type { JITCSSOptions };

package/dist/runtime/render-bridge.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Lazy render bridge — populated by style.ts when the JIT engine is imported.
+ *
+ * render.ts always imports this module (so it is always bundled), but
+ * style.ts (the full JIT engine, ~24 KB gzip) is only bundled when the
+ * consumer explicitly imports JIT CSS symbols such as `enableJITCSS` or
+ * `useJITCSS`. When style.ts IS imported it registers itself here so that
+ * render.ts can call back into the JIT engine without a static dependency.
+ *
+ * Result: consumers that never use JIT CSS get zero JIT code in their bundle.
+ */
+type JITChecker = (root: ShadowRoot) => boolean;
+type JITProcessor = (html: string) => string;
+type ProseSheetGetter = () => CSSStyleSheet | null;
+/**
+ * Register the JIT CSS engine with the render pipeline.
+ * Called by style.ts at module load time so renders automatically get
+ * JIT processing without render.ts needing to import style.ts directly.
+ * @internal
+ */
+export declare function _registerRenderBridge(checker: JITChecker, processor: JITProcessor, proseGetter: ProseSheetGetter): void;
+/**
+ * Returns true when JIT CSS should run for the given shadow root.
+ * Returns false if the JIT engine is not loaded.
+ */
+export declare function isJITCSSActiveFor(root: ShadowRoot): boolean;
+/**
+ * Run JIT CSS processing over the aggregated HTML string.
+ * Returns empty string if the JIT engine is not loaded.
+ */
+export declare function processJITCSS(html: string): string;
+/**
+ * Get the prose stylesheet singleton.
+ * Returns null if the JIT engine is not loaded or no prose classes detected.
+ */
+export declare function getProseStyleSheet(): CSSStyleSheet | null;
+export {};

package/dist/runtime/scheduler.d.ts

@@ -28,7 +28,6 @@ declare class UpdateScheduler {
      */
     private scheduleFlush;
     /**
-     * Execute all pending updates with priority ordering
      * Execute all pending updates with priority ordering
      */
     private flush;
@@ -61,7 +60,8 @@ declare class UpdateScheduler {
      */
     private performPeriodicCleanup;
     /**
-     * Emergency cleanup when pending updates exceed safe limits
+     * Emergency cleanup when pending updates exceed safe limits.
+     * @param queue - The specific map to trim; defaults to the normal queue.
      */
     private performEmergencyCleanup;
     /**
@@ -94,8 +94,7 @@ declare class UpdateScheduler {
 }
 export declare const updateScheduler: UpdateScheduler;
 /**
- * Schedule a DOM update to be batched with optional component identity and priority
- * Schedule a DOM update to be batched with optional component identity and priority
+ * Schedule a DOM update to be batched with optional component identity and priority.
  */
 export declare function scheduleDOMUpdate(update: () => void, componentId?: string): void;
 /**

package/dist/runtime/secure-expression-evaluator.d.ts

@@ -7,7 +7,6 @@
  */
 declare class SecureExpressionEvaluator {
     private static cache;
-    private static maxCacheSize;
     private static dangerousPatterns;
     static evaluate(expression: string, context: Record<string, unknown>): unknown;
     private static createEvaluator;

package/dist/runtime/style.d.ts

@@ -1,24 +1,92 @@
-/**
- * Optimized JIT CSS implementation with reduced bloat and enhanced utilities
- */
-/**
- * CSS template literal
- */
-export declare function css(strings: TemplateStringsArray, ...values: unknown[]): string;
-/**
- * CSS minification utility (basic)
- */
-export declare function minifyCSS(css: string): string;
-export declare function getBaseResetSheet(): CSSStyleSheet;
 export declare function getProseSheet(): CSSStyleSheet | null;
 export declare function registerProseSize(size: string): void;
-export declare function sanitizeCSS(css: string): string;
-export declare const baseReset: string;
 export type CSSMap = Record<string, string>;
+/**
+ * Options for configuring the JIT CSS engine.
+ *
+ * @example
+ * ```ts
+ * import { enableJITCSS } from '@jasonshimmy/custom-elements-runtime';
+ * enableJITCSS({ extendedColors: true });
+ * ```
+ */
+export interface JITCSSOptions {
+    /**
+     * Include the extended Tailwind color palette (slate, gray, red, orange, blue, violet, rose, etc.).
+     * Pass `true` to include all 21 color families, or an array of specific family names to include only
+     * those (e.g. `['slate', 'blue', 'red']`). A targeted list reduces `_activeColors` size and improves
+     * JIT match performance when only a few extended families are needed.
+     */
+    extendedColors?: boolean | string[];
+    /** Custom color palette entries to add to the JIT engine */
+    customColors?: Record<string, Record<string, string>>;
+    /** Disable specific variant groups for smaller output */
+    disableVariants?: Array<'responsive' | 'dark' | 'motion' | 'print' | 'container'>;
+}
 type SelectorVariantMap = Record<string, (selector: string, body: string) => string>;
 type MediaVariantMap = Record<string, string>;
 export declare const colors: Record<string, Record<string, string>>;
-export declare const spacing = "0.25rem";
+/**
+ * Returns `true` when the JIT CSS engine is globally active.
+ * The render engine uses this to skip the JIT pass for projects that do not
+ * use utility classes.
+ */
+export declare function isJITCSSEnabled(): boolean;
+/**
+ * Returns `true` when JIT CSS should run for the given shadow root.
+ * JIT CSS is active if the global flag is set (`enableJITCSS()`) OR if the
+ * specific shadow root was registered via `registerJITCSSComponent()`
+ * (i.e. the component called `useJITCSS()` in its render function).
+ * @internal — used by render.ts
+ */
+export declare function isJITCSSEnabledFor(root: ShadowRoot): boolean;
+/**
+ * Register a shadow root for per-component JIT CSS opt-in.
+ * Called by `useJITCSS()` when invoked inside a component render function.
+ * Optionally processes colour / variant options for this render pass.
+ * @internal
+ */
+export declare function registerJITCSSComponent(root: ShadowRoot, options?: JITCSSOptions): void;
+/**
+ * Configure the JIT CSS engine globally.
+ * Call once at app startup to set options that apply to all components.
+ *
+ * Calling this function also activates the JIT CSS engine if it has been
+ * disabled (e.g. by `disableJITCSS()`).
+ *
+ * @example
+ * ```ts
+ * import { enableJITCSS } from '@jasonshimmy/custom-elements-runtime';
+ *
+ * // Enable extended Tailwind color palette (bg-blue-500, text-violet-700, etc.)
+ * enableJITCSS({ extendedColors: true });
+ *
+ * // Add custom colors
+ * enableJITCSS({ customColors: { brand: { '500': '#e63946', '600': '#c1121f' } } });
+ * ```
+ */
+export declare function enableJITCSS(options?: JITCSSOptions): void;
+/**
+ * Disable the JIT CSS engine globally. Útil for projects that use only
+ * `useStyle()` and want to avoid any JIT parsing overhead.
+ *
+ * @example
+ * ```ts
+ * import { disableJITCSS } from '@jasonshimmy/custom-elements-runtime';
+ * disableJITCSS(); // JIT CSS will not run for any component
+ * ```
+ */
+export declare function disableJITCSS(): void;
+/**
+ * Get the current global JIT CSS options.
+ * @internal
+ */
+export declare function getJITCSSOptions(): JITCSSOptions;
+/**
+ * Reset JIT CSS to default state (semantic colors only). Intended for tests.
+ * @internal
+ */
+export declare function _resetJITCSS(): void;
 export declare const spacingProps: Record<string, string[]>;
 export declare const utilityMap: CSSMap;
 /**
@@ -52,18 +120,8 @@ export declare function parseGradientColorStop(className: string): string | null
 export declare function parseOpacity(className: string): string | null;
 export declare function parseArbitrary(className: string): string | null;
 export declare function parseArbitraryVariant(token: string): string | null;
-/**
- * Polyfill for CSS.escape() for SSR environments
- * Based on https://drafts.csswg.org/cssom/#serialize-an-identifier
- */
-export declare function cssEscape(value: string): string;
-export declare function escapeClassName(name: string): string;
-export declare function escapeRegExp(str: string): string;
 export declare function extractClassesFromHTML(html: string): string[];
-export declare const jitCssCache: Map<string, {
-    css: string;
-    timestamp: number;
-}>;
+export declare const jitCssCache: Map<string, string>;
 export declare const JIT_CSS_THROTTLE_MS = 16;
 export declare function jitCSS(html: string): string;
 export {};