@tenphi/tasty 0.0.0-snapshot.05c1c22

package/dist/debug.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"debug.js","names":[],"sources":["../src/debug.ts"],"sourcesContent":["/* eslint-disable no-console */\nimport { CHUNK_NAMES } from './chunks/definitions';\nimport { getCssTextForNode, injector } from './injector';\nimport type { CacheMetrics, RootRegistry } from './injector/types';\nimport { isDevEnv } from './utils/is-dev-env';\n\ndeclare global {\n  interface Window {\n    tastyDebug?: typeof tastyDebug;\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype CSSTarget =\n  | 'all'\n  | 'global'\n  | 'active'\n  | 'unused'\n  | 'page'\n  | string\n  | string[]\n  | Element;\n\ninterface DebugOptions {\n  root?: Document | ShadowRoot;\n  /** Suppress console logging and return data only (default: false) */\n  raw?: boolean;\n}\n\ninterface CssOptions extends DebugOptions {\n  prettify?: boolean;\n  /** Read from stored source CSS (dev-mode only) instead of live CSSOM */\n  source?: boolean;\n}\n\ninterface ChunkInfo {\n  className: string;\n  chunkName: string | null;\n}\n\ninterface InspectResult {\n  element?: Element | null;\n  classes: string[];\n  chunks: ChunkInfo[];\n  css: string;\n  size: number;\n  rules: number;\n}\n\ninterface CacheStatus {\n  classes: {\n    active: string[];\n    unused: string[];\n    all: string[];\n  };\n  metrics: CacheMetrics | null;\n}\n\ninterface ChunkBreakdown {\n  byChunk: Record<\n    string,\n    { classes: string[]; cssSize: number; ruleCount: number }\n  >;\n  totalChunkTypes: number;\n  totalClasses: number;\n}\n\ninterface Summary {\n  activeClasses: string[];\n  unusedClasses: string[];\n  totalStyledClasses: string[];\n\n  activeCSSSize: number;\n  unusedCSSSize: number;\n  globalCSSSize: number;\n  rawCSSSize: number;\n  keyframesCSSSize: number;\n  propertyCSSSize: number;\n  totalCSSSize: number;\n\n  activeRuleCount: number;\n  unusedRuleCount: number;\n  globalRuleCount: number;\n  rawRuleCount: number;\n  keyframesRuleCount: number;\n  propertyRuleCount: number;\n  totalRuleCount: number;\n\n  metrics: CacheMetrics | null;\n  definedProperties: string[];\n  definedKeyframes: { name: string; refCount: number }[];\n  chunkBreakdown: ChunkBreakdown;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction fmtSize(bytes: number): string {\n  return bytes > 1024 ? `${(bytes / 1024).toFixed(1)}KB` : `${bytes}B`;\n}\n\nfunction countRules(css: string): number {\n  return (css.match(/\\{[^}]*\\}/g) || []).length;\n}\n\nfunction sortTastyClasses(classes: Iterable<string>): string[] {\n  return Array.from(classes).sort(\n    (a, b) => parseInt(a.slice(1)) - parseInt(b.slice(1)),\n  );\n}\n\nfunction getRegistry(\n  root: Document | ShadowRoot = document,\n): RootRegistry | undefined {\n  return injector.instance._sheetManager?.getRegistry(root);\n}\n\nfunction getUnusedClasses(root: Document | ShadowRoot = document): string[] {\n  const registry = getRegistry(root);\n  if (!registry) return [];\n  const result: string[] = [];\n  for (const [cls, rc] of registry.refCounts as Map<string, number>) {\n    if (rc === 0) result.push(cls);\n  }\n  return sortTastyClasses(result);\n}\n\nfunction findDomTastyClasses(root: Document | ShadowRoot = document): string[] {\n  const classes = new Set<string>();\n  const elements = (root as Document).querySelectorAll?.('[class]') || [];\n  elements.forEach((el) => {\n    const attr = el.getAttribute('class');\n    if (attr) {\n      for (const cls of attr.split(/\\s+/)) {\n        if (/^t\\d+$/.test(cls)) classes.add(cls);\n      }\n    }\n  });\n  return sortTastyClasses(classes);\n}\n\n// ---------------------------------------------------------------------------\n// prettifyCSS — readable output for nested at-rules & comma selectors\n// ---------------------------------------------------------------------------\n\nfunction prettifyCSS(css: string): string {\n  if (!css || !css.trim()) return '';\n\n  const out: string[] = [];\n  let depth = 0;\n  const indent = () => '  '.repeat(depth);\n\n  let normalized = css.replace(/\\s+/g, ' ').trim();\n  // Ensure braces are surrounded by spaces for splitting\n  normalized = normalized.replace(/\\s*\\{\\s*/g, ' { ');\n  normalized = normalized.replace(/\\s*\\}\\s*/g, ' } ');\n  normalized = normalized.replace(/;\\s*/g, '; ');\n\n  const tokens = normalized.split(/\\s+/);\n  let buf = '';\n\n  for (const t of tokens) {\n    if (t === '{') {\n      // buf contains the selector / at-rule header\n      const header = buf.trim();\n      if (header) {\n        // Split comma-separated selectors onto their own lines\n        // but only if the comma is outside parentheses\n        const parts = splitOutsideParens(header, ',');\n        if (parts.length > 1) {\n          out.push(\n            parts\n              .map((p, idx) =>\n                idx === 0\n                  ? `${indent()}${p.trim()},`\n                  : `${indent()}${p.trim()}${idx < parts.length - 1 ? ',' : ''}`,\n              )\n              .join('\\n') + ' {',\n          );\n        } else {\n          out.push(`${indent()}${header} {`);\n        }\n      } else {\n        out.push(`${indent()}{`);\n      }\n      depth++;\n      buf = '';\n    } else if (t === '}') {\n      // Flush any trailing declarations\n      if (buf.trim()) {\n        for (const decl of buf.split(';').filter((s) => s.trim())) {\n          out.push(`${indent()}${decl.trim()};`);\n        }\n        buf = '';\n      }\n      depth = Math.max(0, depth - 1);\n      out.push(`${indent()}}`);\n    } else if (t.endsWith(';')) {\n      buf += ` ${t}`;\n      const full = buf.trim();\n      if (full) out.push(`${indent()}${full}`);\n      buf = '';\n    } else {\n      buf += ` ${t}`;\n    }\n  }\n  if (buf.trim()) out.push(buf.trim());\n\n  return out\n    .filter((l) => l.trim())\n    .join('\\n')\n    .replace(/\\n{3,}/g, '\\n\\n')\n    .trim();\n}\n\n/** Split `str` by `sep` only when not inside parentheses */\nfunction splitOutsideParens(str: string, sep: string): string[] {\n  const parts: string[] = [];\n  let depth = 0;\n  let start = 0;\n  for (let i = 0; i < str.length; i++) {\n    const ch = str[i];\n    if (ch === '(') depth++;\n    else if (ch === ')') depth--;\n    else if (depth === 0 && str.startsWith(sep, i)) {\n      parts.push(str.slice(start, i));\n      start = i + sep.length;\n    }\n  }\n  parts.push(str.slice(start));\n  return parts;\n}\n\n// ---------------------------------------------------------------------------\n// Chunk helpers\n// ---------------------------------------------------------------------------\n\nfunction extractChunkName(cacheKey: string): string | null {\n  for (const part of cacheKey.split('\\0')) {\n    if (part.startsWith('[states:')) continue;\n    if (!part.includes(':') && part.length > 0) return part;\n  }\n  return null;\n}\n\nfunction getChunkForClass(\n  className: string,\n  root: Document | ShadowRoot = document,\n): string | null {\n  const registry = getRegistry(root);\n  if (!registry) return null;\n  for (const [key, cn] of registry.cacheKeyToClassName) {\n    if (cn === className) return extractChunkName(key);\n  }\n  return null;\n}\n\nfunction buildChunkBreakdown(\n  root: Document | ShadowRoot = document,\n): ChunkBreakdown {\n  const registry = getRegistry(root);\n  if (!registry) return { byChunk: {}, totalChunkTypes: 0, totalClasses: 0 };\n\n  const byChunk: ChunkBreakdown['byChunk'] = {};\n  for (const [cacheKey, className] of registry.cacheKeyToClassName) {\n    const chunk = extractChunkName(cacheKey) || 'unknown';\n    if (!byChunk[chunk])\n      byChunk[chunk] = { classes: [], cssSize: 0, ruleCount: 0 };\n    byChunk[chunk].classes.push(className);\n    const css = injector.instance.getCssTextForClasses([className], { root });\n    byChunk[chunk].cssSize += css.length;\n    byChunk[chunk].ruleCount += countRules(css);\n  }\n\n  for (const entry of Object.values(byChunk)) {\n    entry.classes = sortTastyClasses(entry.classes);\n  }\n\n  const totalClasses = Object.values(byChunk).reduce(\n    (s, e) => s + e.classes.length,\n    0,\n  );\n  return {\n    byChunk,\n    totalChunkTypes: Object.keys(byChunk).length,\n    totalClasses,\n  };\n}\n\n// ---------------------------------------------------------------------------\n// Global-type CSS helper (internal only)\n// ---------------------------------------------------------------------------\n\nfunction getGlobalTypeCSS(\n  type: 'global' | 'raw' | 'keyframes' | 'property',\n  root: Document | ShadowRoot = document,\n): { css: string; ruleCount: number; size: number } {\n  const registry = getRegistry(root);\n  if (!registry) return { css: '', ruleCount: 0, size: 0 };\n\n  const chunks: string[] = [];\n  let rc = 0;\n\n  if (type === 'keyframes') {\n    for (const [, entry] of registry.keyframesCache) {\n      const info = entry.info;\n      const sheet = registry.sheets[info.sheetIndex];\n      const ss = sheet?.sheet?.sheet;\n      if (ss && info.ruleIndex < ss.cssRules.length) {\n        const rule = ss.cssRules[info.ruleIndex];\n        if (rule) {\n          chunks.push(rule.cssText);\n          rc++;\n        }\n      } else if (info.cssText) {\n        chunks.push(info.cssText);\n        rc++;\n      }\n    }\n  } else {\n    const prefix =\n      type === 'global' ? 'global:' : type === 'raw' ? 'raw:' : 'property:';\n    for (const [key, ri] of registry.globalRules) {\n      if (!key.startsWith(prefix)) continue;\n      const sheet = registry.sheets[ri.sheetIndex];\n      const ss = sheet?.sheet?.sheet;\n      if (ss) {\n        const start = Math.max(0, ri.ruleIndex);\n        const end = Math.min(\n          ss.cssRules.length - 1,\n          (ri.endRuleIndex as number) ?? ri.ruleIndex,\n        );\n        if (start >= 0 && end >= start && start < ss.cssRules.length) {\n          for (let i = start; i <= end; i++) {\n            const rule = ss.cssRules[i];\n            if (rule) {\n              chunks.push(rule.cssText);\n              rc++;\n            }\n          }\n        }\n      } else if (ri.cssText?.length) {\n        chunks.push(...ri.cssText);\n        rc += ri.cssText.length;\n      }\n    }\n  }\n\n  const raw = chunks.join('\\n');\n  return { css: prettifyCSS(raw), ruleCount: rc, size: raw.length };\n}\n\n// ---------------------------------------------------------------------------\n// Source CSS (dev-mode RuleInfo.cssText)\n// ---------------------------------------------------------------------------\n\nfunction getSourceCssForClasses(\n  classNames: string[],\n  root: Document | ShadowRoot = document,\n): string | null {\n  const registry = getRegistry(root);\n  if (!registry) return null;\n\n  const chunks: string[] = [];\n  let found = false;\n  for (const cls of classNames) {\n    const info = registry.rules.get(cls);\n    if (info?.cssText?.length) {\n      chunks.push(...info.cssText);\n      found = true;\n    }\n  }\n  return found ? chunks.join('\\n') : null;\n}\n\n// ---------------------------------------------------------------------------\n// Definitions helper (internal)\n// ---------------------------------------------------------------------------\n\nfunction getDefs(root: Document | ShadowRoot = document) {\n  const registry = getRegistry(root);\n  let properties: string[] = [];\n  if (registry?.injectedProperties) {\n    properties = Array.from(\n      (registry.injectedProperties as Map<string, string>).keys(),\n    ).sort();\n  }\n\n  const keyframes: { name: string; refCount: number }[] = [];\n  if (registry) {\n    for (const entry of registry.keyframesCache.values()) {\n      keyframes.push({ name: entry.name, refCount: entry.refCount });\n    }\n    keyframes.sort((a, b) => a.name.localeCompare(b.name));\n  }\n\n  return { properties, keyframes };\n}\n\n// ---------------------------------------------------------------------------\n// Chunk display order\n// ---------------------------------------------------------------------------\n\nconst CHUNK_ORDER = [\n  CHUNK_NAMES.COMBINED,\n  CHUNK_NAMES.APPEARANCE,\n  CHUNK_NAMES.FONT,\n  CHUNK_NAMES.DIMENSION,\n  CHUNK_NAMES.DISPLAY,\n  CHUNK_NAMES.LAYOUT,\n  CHUNK_NAMES.POSITION,\n  CHUNK_NAMES.MISC,\n  CHUNK_NAMES.SUBCOMPONENTS,\n];\n\n// ---------------------------------------------------------------------------\n// tastyDebug API\n// ---------------------------------------------------------------------------\n\nexport const tastyDebug = {\n  css(target: CSSTarget, opts?: CssOptions): string {\n    const {\n      root = document,\n      prettify = true,\n      raw = false,\n      source = false,\n    } = opts || {};\n    let css = '';\n\n    if (source && typeof target === 'string' && /^t\\d+$/.test(target)) {\n      const src = getSourceCssForClasses([target], root);\n      if (src) {\n        css = src;\n      } else {\n        if (!raw) {\n          console.warn(\n            'tastyDebug: source CSS not available (requires dev mode or TASTY_DEBUG=true). Falling back to live CSSOM.',\n          );\n        }\n        css = injector.instance.getCssTextForClasses([target], { root });\n      }\n    } else if (source && Array.isArray(target)) {\n      const src = getSourceCssForClasses(target, root);\n      if (src) {\n        css = src;\n      } else {\n        if (!raw) {\n          console.warn(\n            'tastyDebug: source CSS not available. Falling back to live CSSOM.',\n          );\n        }\n        css = injector.instance.getCssTextForClasses(target, { root });\n      }\n    } else if (typeof target === 'string') {\n      if (target === 'all') {\n        css = injector.instance.getCssText({ root });\n      } else if (target === 'global') {\n        css = getGlobalTypeCSS('global', root).css;\n        return css; // already prettified\n      } else if (target === 'active') {\n        const active = findDomTastyClasses(root);\n        css = injector.instance.getCssTextForClasses(active, { root });\n      } else if (target === 'unused') {\n        const unused = getUnusedClasses(root);\n        css = injector.instance.getCssTextForClasses(unused, { root });\n      } else if (target === 'page') {\n        css = getPageCSS(root);\n      } else if (/^t\\d+$/.test(target)) {\n        css = injector.instance.getCssTextForClasses([target], { root });\n      } else {\n        const el = (root as Document).querySelector?.(target);\n        if (el) css = getCssTextForNode(el, { root });\n      }\n    } else if (Array.isArray(target)) {\n      css = injector.instance.getCssTextForClasses(target, { root });\n    } else if (target instanceof Element) {\n      css = getCssTextForNode(target, { root });\n    }\n\n    const result = prettify ? prettifyCSS(css) : css;\n\n    if (!raw) {\n      const label = Array.isArray(target) ? `[${target.join(', ')}]` : target;\n      const rc = countRules(css);\n      console.group(`CSS for ${label} (${rc} rules, ${fmtSize(css.length)})`);\n      console.log(result || '(empty)');\n      console.groupEnd();\n    }\n\n    return result;\n  },\n\n  inspect(target: string | Element, opts?: DebugOptions): InspectResult {\n    const { root = document, raw = false } = opts || {};\n    const element =\n      typeof target === 'string'\n        ? (root as Document).querySelector?.(target)\n        : target;\n\n    if (!element) {\n      const empty: InspectResult = {\n        element: null,\n        classes: [],\n        chunks: [],\n        css: '',\n        size: 0,\n        rules: 0,\n      };\n      if (!raw) console.warn('tastyDebug.inspect: element not found');\n      return empty;\n    }\n\n    const classList = element.getAttribute('class') || '';\n    const tastyClasses = classList\n      .split(/\\s+/)\n      .filter((cls) => /^t\\d+$/.test(cls));\n\n    const chunks: ChunkInfo[] = tastyClasses.map((className) => ({\n      className,\n      chunkName: getChunkForClass(className, root),\n    }));\n\n    const css = getCssTextForNode(element, { root });\n    const rules = countRules(css);\n\n    const result: InspectResult = {\n      element,\n      classes: tastyClasses,\n      chunks,\n      css: prettifyCSS(css),\n      size: css.length,\n      rules,\n    };\n\n    if (!raw) {\n      const tag = element.tagName.toLowerCase();\n      const id = element.id ? `#${element.id}` : '';\n      console.group(\n        `inspect ${tag}${id} — ${tastyClasses.length} classes, ${rules} rules, ${fmtSize(css.length)}`,\n      );\n      if (chunks.length) {\n        console.log(\n          'Chunks:',\n          chunks.map((c) => `${c.className}→${c.chunkName || '?'}`).join(', '),\n        );\n      }\n      console.groupCollapsed('CSS');\n      console.log(result.css || '(empty)');\n      console.groupEnd();\n      console.groupEnd();\n    }\n\n    return result;\n  },\n\n  summary(opts?: DebugOptions): Summary {\n    const { root = document, raw = false } = opts || {};\n\n    const activeClasses = findDomTastyClasses(root);\n    const unusedClasses = getUnusedClasses(root);\n    const totalStyledClasses = [...activeClasses, ...unusedClasses];\n\n    const activeCSS = injector.instance.getCssTextForClasses(activeClasses, {\n      root,\n    });\n    const unusedCSS = injector.instance.getCssTextForClasses(unusedClasses, {\n      root,\n    });\n    const allCSS = injector.instance.getCssText({ root });\n\n    const activeRuleCount = countRules(activeCSS);\n    const unusedRuleCount = countRules(unusedCSS);\n\n    const globalData = getGlobalTypeCSS('global', root);\n    const rawData = getGlobalTypeCSS('raw', root);\n    const kfData = getGlobalTypeCSS('keyframes', root);\n    const propData = getGlobalTypeCSS('property', root);\n\n    const totalRuleCount =\n      activeRuleCount +\n      unusedRuleCount +\n      globalData.ruleCount +\n      rawData.ruleCount +\n      kfData.ruleCount +\n      propData.ruleCount;\n\n    const metrics = injector.instance.getMetrics({ root });\n    const defs = getDefs(root);\n    const chunkBreakdown = buildChunkBreakdown(root);\n\n    const summary: Summary = {\n      activeClasses,\n      unusedClasses,\n      totalStyledClasses,\n      activeCSSSize: activeCSS.length,\n      unusedCSSSize: unusedCSS.length,\n      globalCSSSize: globalData.size,\n      rawCSSSize: rawData.size,\n      keyframesCSSSize: kfData.size,\n      propertyCSSSize: propData.size,\n      totalCSSSize: allCSS.length,\n      activeRuleCount,\n      unusedRuleCount,\n      globalRuleCount: globalData.ruleCount,\n      rawRuleCount: rawData.ruleCount,\n      keyframesRuleCount: kfData.ruleCount,\n      propertyRuleCount: propData.ruleCount,\n      totalRuleCount,\n      metrics,\n      definedProperties: defs.properties,\n      definedKeyframes: defs.keyframes,\n      chunkBreakdown,\n    };\n\n    if (!raw) {\n      console.group('Tasty Summary');\n      console.log(\n        `Active:   ${activeClasses.length} classes, ${activeRuleCount} rules, ${fmtSize(activeCSS.length)}`,\n      );\n      console.log(\n        `Unused:   ${unusedClasses.length} classes, ${unusedRuleCount} rules, ${fmtSize(unusedCSS.length)}`,\n      );\n      console.log(\n        `Global:   ${globalData.ruleCount} rules, ${fmtSize(globalData.size)}`,\n      );\n      if (rawData.ruleCount)\n        console.log(\n          `Raw:      ${rawData.ruleCount} rules, ${fmtSize(rawData.size)}`,\n        );\n      if (kfData.ruleCount)\n        console.log(\n          `Keyframes: ${kfData.ruleCount} rules, ${fmtSize(kfData.size)}`,\n        );\n      if (propData.ruleCount)\n        console.log(\n          `@property: ${propData.ruleCount} rules, ${fmtSize(propData.size)}`,\n        );\n      console.log(\n        `Total:    ${totalStyledClasses.length} classes, ${totalRuleCount} rules, ${fmtSize(allCSS.length)}`,\n      );\n\n      if (metrics) {\n        const total = metrics.hits + metrics.misses;\n        const rate = total > 0 ? ((metrics.hits / total) * 100).toFixed(1) : 0;\n        console.log(`Cache:    ${rate}% hit rate (${total} lookups)`);\n      }\n\n      if (chunkBreakdown.totalChunkTypes > 0) {\n        console.groupCollapsed(\n          `Chunks (${chunkBreakdown.totalChunkTypes} types, ${chunkBreakdown.totalClasses} classes)`,\n        );\n        for (const name of CHUNK_ORDER) {\n          const d = chunkBreakdown.byChunk[name];\n          if (d)\n            console.log(\n              `  ${name}: ${d.classes.length} cls, ${d.ruleCount} rules, ${fmtSize(d.cssSize)}`,\n            );\n        }\n        for (const [name, d] of Object.entries(chunkBreakdown.byChunk)) {\n          if (!CHUNK_ORDER.includes(name as (typeof CHUNK_ORDER)[number]))\n            console.log(\n              `  ${name}: ${d.classes.length} cls, ${d.ruleCount} rules, ${fmtSize(d.cssSize)}`,\n            );\n        }\n        console.groupEnd();\n      }\n\n      if (defs.properties.length || defs.keyframes.length) {\n        console.log(\n          `Defs:     ${defs.properties.length} @property, ${defs.keyframes.length} @keyframes`,\n        );\n      }\n\n      console.groupEnd();\n    }\n\n    return summary;\n  },\n\n  chunks(opts?: DebugOptions): ChunkBreakdown {\n    const { root = document, raw = false } = opts || {};\n    const breakdown = buildChunkBreakdown(root);\n\n    if (!raw) {\n      console.group(\n        `Chunks (${breakdown.totalChunkTypes} types, ${breakdown.totalClasses} classes)`,\n      );\n      for (const name of CHUNK_ORDER) {\n        const d = breakdown.byChunk[name];\n        if (d)\n          console.log(\n            `  ${name}: ${d.classes.length} cls, ${d.ruleCount} rules, ${fmtSize(d.cssSize)}`,\n          );\n      }\n      for (const [name, d] of Object.entries(breakdown.byChunk)) {\n        if (!CHUNK_ORDER.includes(name as (typeof CHUNK_ORDER)[number]))\n          console.log(\n            `  ${name}: ${d.classes.length} cls, ${d.ruleCount} rules, ${fmtSize(d.cssSize)}`,\n          );\n      }\n      console.groupEnd();\n    }\n\n    return breakdown;\n  },\n\n  cache(opts?: DebugOptions): CacheStatus {\n    const { root = document, raw = false } = opts || {};\n    const active = findDomTastyClasses(root);\n    const unused = getUnusedClasses(root);\n    const metrics = injector.instance.getMetrics({ root });\n\n    const status: CacheStatus = {\n      classes: { active, unused, all: [...active, ...unused] },\n      metrics,\n    };\n\n    if (!raw) {\n      console.group('Cache');\n      console.log(`Active: ${active.length}, Unused: ${unused.length}`);\n      if (metrics) {\n        const total = metrics.hits + metrics.misses;\n        const rate = total > 0 ? ((metrics.hits / total) * 100).toFixed(1) : 0;\n        console.log(\n          `Hits: ${metrics.hits}, Misses: ${metrics.misses}, Rate: ${rate}%`,\n        );\n      }\n      console.groupEnd();\n    }\n\n    return status;\n  },\n\n  cleanup(opts?: { root?: Document | ShadowRoot }): void {\n    injector.instance.cleanup(opts?.root);\n  },\n\n  help(): void {\n    console.log(`tastyDebug API:\n  .summary()            — overview (classes, rules, sizes)\n  .css(\"active\")        — CSS for classes in DOM\n  .css(\"t42\")           — CSS for a specific class\n  .css(\"t42\",{source:1})— original CSS before browser parsing (dev only)\n  .css(\".selector\")     — CSS for a DOM element\n  .inspect(\".selector\") — element details (classes, chunks, rules)\n  .chunks()             — style chunk breakdown\n  .cache()              — cache status and metrics\n  .cleanup()            — force unused style cleanup\nOptions: { raw: true } suppresses logging, { root: shadowRoot } targets Shadow DOM`);\n  },\n\n  install(): void {\n    if (typeof window !== 'undefined' && window.tastyDebug !== tastyDebug) {\n      window.tastyDebug = tastyDebug;\n      console.log('tastyDebug installed. Run tastyDebug.help() for commands.');\n    }\n  },\n};\n\n// ---------------------------------------------------------------------------\n// Page CSS (minimal, kept internal)\n// ---------------------------------------------------------------------------\n\nfunction getPageCSS(root: Document | ShadowRoot = document): string {\n  const chunks: string[] = [];\n  try {\n    if ('styleSheets' in root) {\n      for (const sheet of Array.from((root as Document).styleSheets)) {\n        try {\n          if (sheet.cssRules)\n            chunks.push(\n              Array.from(sheet.cssRules)\n                .map((r) => r.cssText)\n                .join('\\n'),\n            );\n        } catch {\n          /* cross-origin */\n        }\n      }\n    }\n  } catch {\n    /* ignore */\n  }\n  return chunks.join('\\n');\n}\n\n// ---------------------------------------------------------------------------\n// Auto-install in development\n// ---------------------------------------------------------------------------\n\nif (typeof window !== 'undefined' && isDevEnv()) {\n  tastyDebug.install();\n}\n"],"mappings":"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"}

package/dist/font-face/index.js

@@ -0,0 +1,63 @@
+//#region src/font-face/index.ts
+const FONT_FACE_KEY = "@fontFace";
+/**
+* Check if styles object has local @fontFace definition.
+*/
+function hasLocalFontFace(styles) {
+	return FONT_FACE_KEY in styles;
+}
+/**
+* Extract local @fontFace from styles object.
+* Returns null if no local font faces (fast path).
+*/
+function extractLocalFontFace(styles) {
+	const fontFace = styles[FONT_FACE_KEY];
+	if (!fontFace || typeof fontFace !== "object") return null;
+	return fontFace;
+}
+const FONT_FACE_DESCRIPTOR_MAP = {
+	fontWeight: "font-weight",
+	fontStyle: "font-style",
+	fontStretch: "font-stretch",
+	fontDisplay: "font-display",
+	unicodeRange: "unicode-range",
+	ascentOverride: "ascent-override",
+	descentOverride: "descent-override",
+	lineGapOverride: "line-gap-override",
+	sizeAdjust: "size-adjust",
+	fontFeatureSettings: "font-feature-settings",
+	fontVariationSettings: "font-variation-settings"
+};
+/**
+* Format the inner declarations of a @font-face rule (no wrapper).
+* Used by the injector which needs selector and declarations separately.
+*/
+function formatFontFaceDeclarations(family, descriptors) {
+	const parts = [];
+	parts.push(`font-family: "${family}";`);
+	parts.push(`src: ${descriptors.src};`);
+	for (const [key, cssName] of Object.entries(FONT_FACE_DESCRIPTOR_MAP)) {
+		const value = descriptors[key];
+		if (value !== void 0) parts.push(`${cssName}: ${value};`);
+	}
+	return parts.join(" ");
+}
+/**
+* Format a single @font-face rule as CSS.
+*/
+function formatFontFaceRule(family, descriptors) {
+	return `@font-face { ${formatFontFaceDeclarations(family, descriptors)} }`;
+}
+/**
+* Generate a content hash for deduplication of a single font-face rule.
+*/
+function fontFaceContentHash(family, descriptors) {
+	return JSON.stringify({
+		family,
+		...descriptors
+	});
+}
+//#endregion
+export { extractLocalFontFace, fontFaceContentHash, formatFontFaceDeclarations, formatFontFaceRule, hasLocalFontFace };
+
+//# sourceMappingURL=index.js.map

package/dist/font-face/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/font-face/index.ts"],"sourcesContent":["/**\n * Font Face Utilities\n *\n * Utilities for extracting and processing CSS @font-face definitions in styles.\n * Font-face rules are permanent once injected and do not need cleanup.\n */\n\nimport type { FontFaceDescriptors, FontFaceInput } from '../injector/types';\nimport type { Styles } from '../styles/types';\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst FONT_FACE_KEY = '@fontFace';\n\n// ============================================================================\n// Extraction Functions\n// ============================================================================\n\n/**\n * Check if styles object has local @fontFace definition.\n */\nexport function hasLocalFontFace(styles: Styles): boolean {\n  return FONT_FACE_KEY in styles;\n}\n\n/**\n * Extract local @fontFace from styles object.\n * Returns null if no local font faces (fast path).\n */\nexport function extractLocalFontFace(\n  styles: Styles,\n): Record<string, FontFaceInput> | null {\n  const fontFace = styles[FONT_FACE_KEY];\n  if (!fontFace || typeof fontFace !== 'object') {\n    return null;\n  }\n  return fontFace as Record<string, FontFaceInput>;\n}\n\n// ============================================================================\n// CSS Formatting\n// ============================================================================\n\nconst FONT_FACE_DESCRIPTOR_MAP: Record<string, string> = {\n  fontWeight: 'font-weight',\n  fontStyle: 'font-style',\n  fontStretch: 'font-stretch',\n  fontDisplay: 'font-display',\n  unicodeRange: 'unicode-range',\n  ascentOverride: 'ascent-override',\n  descentOverride: 'descent-override',\n  lineGapOverride: 'line-gap-override',\n  sizeAdjust: 'size-adjust',\n  fontFeatureSettings: 'font-feature-settings',\n  fontVariationSettings: 'font-variation-settings',\n};\n\n/**\n * Format the inner declarations of a @font-face rule (no wrapper).\n * Used by the injector which needs selector and declarations separately.\n */\nexport function formatFontFaceDeclarations(\n  family: string,\n  descriptors: FontFaceDescriptors,\n): string {\n  const parts: string[] = [];\n\n  parts.push(`font-family: \"${family}\";`);\n  parts.push(`src: ${descriptors.src};`);\n\n  for (const [key, cssName] of Object.entries(FONT_FACE_DESCRIPTOR_MAP)) {\n    const value = descriptors[key as keyof FontFaceDescriptors];\n    if (value !== undefined) {\n      parts.push(`${cssName}: ${value};`);\n    }\n  }\n\n  return parts.join(' ');\n}\n\n/**\n * Format a single @font-face rule as CSS.\n */\nexport function formatFontFaceRule(\n  family: string,\n  descriptors: FontFaceDescriptors,\n): string {\n  return `@font-face { ${formatFontFaceDeclarations(family, descriptors)} }`;\n}\n\n/**\n * Format all @font-face rules for a family (handles single or array form).\n * Returns an array of CSS strings, one per rule.\n */\nexport function formatFontFaceRules(\n  family: string,\n  input: FontFaceInput,\n): string[] {\n  const descriptors = Array.isArray(input) ? input : [input];\n  return descriptors.map((desc) => formatFontFaceRule(family, desc));\n}\n\n/**\n * Generate a content hash for deduplication of a single font-face rule.\n */\nexport function fontFaceContentHash(\n  family: string,\n  descriptors: FontFaceDescriptors,\n): string {\n  return JSON.stringify({ family, ...descriptors });\n}\n"],"mappings":";AAcA,MAAM,gBAAgB;;;;AAStB,SAAgB,iBAAiB,QAAyB;AACxD,QAAO,iBAAiB;;;;;;AAO1B,SAAgB,qBACd,QACsC;CACtC,MAAM,WAAW,OAAO;AACxB,KAAI,CAAC,YAAY,OAAO,aAAa,SACnC,QAAO;AAET,QAAO;;AAOT,MAAM,2BAAmD;CACvD,YAAY;CACZ,WAAW;CACX,aAAa;CACb,aAAa;CACb,cAAc;CACd,gBAAgB;CAChB,iBAAiB;CACjB,iBAAiB;CACjB,YAAY;CACZ,qBAAqB;CACrB,uBAAuB;CACxB;;;;;AAMD,SAAgB,2BACd,QACA,aACQ;CACR,MAAM,QAAkB,EAAE;AAE1B,OAAM,KAAK,iBAAiB,OAAO,IAAI;AACvC,OAAM,KAAK,QAAQ,YAAY,IAAI,GAAG;AAEtC,MAAK,MAAM,CAAC,KAAK,YAAY,OAAO,QAAQ,yBAAyB,EAAE;EACrE,MAAM,QAAQ,YAAY;AAC1B,MAAI,UAAU,KAAA,EACZ,OAAM,KAAK,GAAG,QAAQ,IAAI,MAAM,GAAG;;AAIvC,QAAO,MAAM,KAAK,IAAI;;;;;AAMxB,SAAgB,mBACd,QACA,aACQ;AACR,QAAO,gBAAgB,2BAA2B,QAAQ,YAAY,CAAC;;;;;AAkBzE,SAAgB,oBACd,QACA,aACQ;AACR,QAAO,KAAK,UAAU;EAAE;EAAQ,GAAG;EAAa,CAAC"}

package/dist/hooks/index.d.ts

@@ -0,0 +1,7 @@
+import { UseStylesOptions, UseStylesResult, useStyles } from "./useStyles.js";
+import { useGlobalStyles } from "./useGlobalStyles.js";
+import { useRawCSS } from "./useRawCSS.js";
+import { useKeyframes } from "./useKeyframes.js";
+import { UsePropertyOptions, useProperty } from "./useProperty.js";
+import { useFontFace } from "./useFontFace.js";
+import { useCounterStyle } from "./useCounterStyle.js";

package/dist/hooks/resolve-ssr-collector.js

@@ -0,0 +1,14 @@
+import { getRegisteredSSRCollector } from "../ssr/ssr-collector-ref.js";
+//#region src/hooks/resolve-ssr-collector.ts
+/**
+* Resolve the SSR collector from React context or AsyncLocalStorage.
+* Returns null on the client (no collector available).
+*/
+function resolveSSRCollector(reactContext) {
+	if (reactContext) return reactContext;
+	return getRegisteredSSRCollector();
+}
+//#endregion
+export { resolveSSRCollector };
+
+//# sourceMappingURL=resolve-ssr-collector.js.map

package/dist/hooks/resolve-ssr-collector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-ssr-collector.js","names":[],"sources":["../../src/hooks/resolve-ssr-collector.ts"],"sourcesContent":["import type { ServerStyleCollector } from '../ssr/collector';\nimport { getRegisteredSSRCollector } from '../ssr/ssr-collector-ref';\n\n/**\n * Resolve the SSR collector from React context or AsyncLocalStorage.\n * Returns null on the client (no collector available).\n */\nexport function resolveSSRCollector(\n  reactContext: ServerStyleCollector | null,\n): ServerStyleCollector | null {\n  if (reactContext) return reactContext;\n  return getRegisteredSSRCollector();\n}\n"],"mappings":";;;;;;AAOA,SAAgB,oBACd,cAC6B;AAC7B,KAAI,aAAc,QAAO;AACzB,QAAO,2BAA2B"}

package/dist/hooks/useCounterStyle.d.ts

@@ -0,0 +1,50 @@
+import { CounterStyleDescriptors } from "../injector/types.js";
+
+//#region src/hooks/useCounterStyle.d.ts
+interface UseCounterStyleOptions {
+  name?: string;
+  root?: Document | ShadowRoot;
+}
+/**
+ * Hook to inject a CSS @counter-style rule and return the generated name.
+ * Permanent — no cleanup on unmount. Deduplicates by name.
+ *
+ * @example Basic usage
+ * ```tsx
+ * function EmojiList() {
+ *   const styleName = useCounterStyle({
+ *     system: 'cyclic',
+ *     symbols: '"👍"',
+ *     suffix: '" "',
+ *   }, { name: 'thumbs' });
+ *
+ *   return (
+ *     <ol style={{ listStyleType: styleName }}>
+ *       <li>First</li>
+ *       <li>Second</li>
+ *     </ol>
+ *   );
+ * }
+ * ```
+ *
+ * @example Factory function with dependencies
+ * ```tsx
+ * function DynamicList({ marker }: { marker: string }) {
+ *   const styleName = useCounterStyle(
+ *     () => ({
+ *       system: 'cyclic',
+ *       symbols: `"${marker}"`,
+ *       suffix: '" "',
+ *     }),
+ *     [marker],
+ *   );
+ *
+ *   return <ol style={{ listStyleType: styleName }}>...</ol>;
+ * }
+ * ```
+ */
+declare function useCounterStyle(descriptors: CounterStyleDescriptors, options?: UseCounterStyleOptions): string;
+declare function useCounterStyle(factory: () => CounterStyleDescriptors, deps: readonly unknown[], options?: UseCounterStyleOptions): string;
+//#endregion
+export { useCounterStyle };
+//# sourceMappingURL=useCounterStyle.d.ts.map

package/dist/hooks/useCounterStyle.js

@@ -0,0 +1,46 @@
+import { formatCounterStyleRule } from "../counter-style/index.js";
+import { getGlobalInjector } from "../config.js";
+import { resolveSSRCollector } from "./resolve-ssr-collector.js";
+import { TastySSRContext } from "../ssr/context.js";
+import { useContext, useInsertionEffect, useMemo } from "react";
+//#region src/hooks/useCounterStyle.ts
+let clientCounterStyleCounter = 0;
+function useCounterStyle(descriptorsOrFactory, depsOrOptions, options) {
+	const ssrCollector = resolveSSRCollector(useContext(TastySSRContext));
+	const isFactory = typeof descriptorsOrFactory === "function";
+	const deps = isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : void 0;
+	const opts = isFactory ? options : depsOrOptions;
+	const inputKey = useMemo(() => isFactory ? null : JSON.stringify(descriptorsOrFactory), [isFactory ? null : descriptorsOrFactory]);
+	const descriptorsData = useMemo(() => {
+		const descriptors = isFactory ? descriptorsOrFactory() : descriptorsOrFactory;
+		if (!descriptors || !descriptors.system) return null;
+		return descriptors;
+	}, isFactory ? deps ?? [] : [inputKey]);
+	const name = useMemo(() => {
+		if (!descriptorsData) return "";
+		if (ssrCollector) {
+			const actualName = ssrCollector.allocateCounterStyleName(opts?.name);
+			const css = formatCounterStyleRule(actualName, descriptorsData);
+			ssrCollector.collectCounterStyle(actualName, css);
+			return actualName;
+		}
+		return opts?.name ?? `cs${clientCounterStyleCounter++}`;
+	}, [
+		descriptorsData,
+		opts?.name,
+		ssrCollector
+	]);
+	useInsertionEffect(() => {
+		if (!descriptorsData || !name) return;
+		getGlobalInjector().counterStyle(name, descriptorsData, { root: opts?.root });
+	}, [
+		descriptorsData,
+		name,
+		opts?.root
+	]);
+	return name;
+}
+//#endregion
+export { useCounterStyle };
+
+//# sourceMappingURL=useCounterStyle.js.map

package/dist/hooks/useCounterStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCounterStyle.js","names":[],"sources":["../../src/hooks/useCounterStyle.ts"],"sourcesContent":["import { useContext, useInsertionEffect, useMemo } from 'react';\n\nimport { getGlobalInjector } from '../config';\nimport { formatCounterStyleRule } from '../counter-style';\nimport type { CounterStyleDescriptors } from '../injector/types';\nimport { resolveSSRCollector } from './resolve-ssr-collector';\nimport { TastySSRContext } from '../ssr/context';\n\ninterface UseCounterStyleOptions {\n  name?: string;\n  root?: Document | ShadowRoot;\n}\n\nlet clientCounterStyleCounter = 0;\n\n/**\n * Hook to inject a CSS @counter-style rule and return the generated name.\n * Permanent — no cleanup on unmount. Deduplicates by name.\n *\n * @example Basic usage\n * ```tsx\n * function EmojiList() {\n *   const styleName = useCounterStyle({\n *     system: 'cyclic',\n *     symbols: '\"👍\"',\n *     suffix: '\" \"',\n *   }, { name: 'thumbs' });\n *\n *   return (\n *     <ol style={{ listStyleType: styleName }}>\n *       <li>First</li>\n *       <li>Second</li>\n *     </ol>\n *   );\n * }\n * ```\n *\n * @example Factory function with dependencies\n * ```tsx\n * function DynamicList({ marker }: { marker: string }) {\n *   const styleName = useCounterStyle(\n *     () => ({\n *       system: 'cyclic',\n *       symbols: `\"${marker}\"`,\n *       suffix: '\" \"',\n *     }),\n *     [marker],\n *   );\n *\n *   return <ol style={{ listStyleType: styleName }}>...</ol>;\n * }\n * ```\n */\n\n// Overload 1: Static descriptors\nexport function useCounterStyle(\n  descriptors: CounterStyleDescriptors,\n  options?: UseCounterStyleOptions,\n): string;\n\n// Overload 2: Factory function with dependencies\nexport function useCounterStyle(\n  factory: () => CounterStyleDescriptors,\n  deps: readonly unknown[],\n  options?: UseCounterStyleOptions,\n): string;\n\n// Implementation\nexport function useCounterStyle(\n  descriptorsOrFactory:\n    | CounterStyleDescriptors\n    | (() => CounterStyleDescriptors),\n  depsOrOptions?: readonly unknown[] | UseCounterStyleOptions,\n  options?: UseCounterStyleOptions,\n): string {\n  const ssrContextValue = useContext(TastySSRContext);\n  const ssrCollector = resolveSSRCollector(ssrContextValue);\n\n  const isFactory = typeof descriptorsOrFactory === 'function';\n\n  const deps =\n    isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : undefined;\n  const opts = isFactory\n    ? options\n    : (depsOrOptions as UseCounterStyleOptions | undefined);\n\n  // Stable key for the static path — avoids re-triggering when caller\n  // passes an inline object literal with the same content.\n  const inputKey = useMemo(\n    () => (isFactory ? null : JSON.stringify(descriptorsOrFactory)),\n    [isFactory ? null : descriptorsOrFactory],\n  );\n\n  const descriptorsData = useMemo(\n    () => {\n      const descriptors = isFactory\n        ? (descriptorsOrFactory as () => CounterStyleDescriptors)()\n        : (descriptorsOrFactory as CounterStyleDescriptors);\n\n      if (!descriptors || !descriptors.system) {\n        return null;\n      }\n\n      return descriptors;\n    },\n\n    isFactory ? (deps ?? []) : [inputKey],\n  );\n\n  const name = useMemo(() => {\n    if (!descriptorsData) {\n      return '';\n    }\n\n    // SSR path: format and collect, return name without DOM injection\n    if (ssrCollector) {\n      const actualName = ssrCollector.allocateCounterStyleName(opts?.name);\n      const css = formatCounterStyleRule(actualName, descriptorsData);\n      ssrCollector.collectCounterStyle(actualName, css);\n      return actualName;\n    }\n\n    // Client path: return the name (injection happens in useInsertionEffect)\n    return opts?.name ?? `cs${clientCounterStyleCounter++}`;\n  }, [descriptorsData, opts?.name, ssrCollector]);\n\n  // Client path: inject via DOM\n  useInsertionEffect(() => {\n    if (!descriptorsData || !name) return;\n\n    const injector = getGlobalInjector();\n    injector.counterStyle(name, descriptorsData, { root: opts?.root });\n  }, [descriptorsData, name, opts?.root]);\n\n  return name;\n}\n"],"mappings":";;;;;;AAaA,IAAI,4BAA4B;AAuDhC,SAAgB,gBACd,sBAGA,eACA,SACQ;CAER,MAAM,eAAe,oBADG,WAAW,gBAAgB,CACM;CAEzD,MAAM,YAAY,OAAO,yBAAyB;CAElD,MAAM,OACJ,aAAa,MAAM,QAAQ,cAAc,GAAG,gBAAgB,KAAA;CAC9D,MAAM,OAAO,YACT,UACC;CAIL,MAAM,WAAW,cACR,YAAY,OAAO,KAAK,UAAU,qBAAqB,EAC9D,CAAC,YAAY,OAAO,qBAAqB,CAC1C;CAED,MAAM,kBAAkB,cAChB;EACJ,MAAM,cAAc,YACf,sBAAwD,GACxD;AAEL,MAAI,CAAC,eAAe,CAAC,YAAY,OAC/B,QAAO;AAGT,SAAO;IAGT,YAAa,QAAQ,EAAE,GAAI,CAAC,SAAS,CACtC;CAED,MAAM,OAAO,cAAc;AACzB,MAAI,CAAC,gBACH,QAAO;AAIT,MAAI,cAAc;GAChB,MAAM,aAAa,aAAa,yBAAyB,MAAM,KAAK;GACpE,MAAM,MAAM,uBAAuB,YAAY,gBAAgB;AAC/D,gBAAa,oBAAoB,YAAY,IAAI;AACjD,UAAO;;AAIT,SAAO,MAAM,QAAQ,KAAK;IACzB;EAAC;EAAiB,MAAM;EAAM;EAAa,CAAC;AAG/C,0BAAyB;AACvB,MAAI,CAAC,mBAAmB,CAAC,KAAM;AAEd,qBAAmB,CAC3B,aAAa,MAAM,iBAAiB,EAAE,MAAM,MAAM,MAAM,CAAC;IACjE;EAAC;EAAiB;EAAM,MAAM;EAAK,CAAC;AAEvC,QAAO"}

package/dist/hooks/useFontFace.d.ts

@@ -0,0 +1,43 @@
+import { FontFaceInput } from "../injector/types.js";
+
+//#region src/hooks/useFontFace.d.ts
+interface UseFontFaceOptions {
+  root?: Document | ShadowRoot;
+}
+/**
+ * Hook to inject CSS @font-face rules.
+ * Permanent — no cleanup on unmount. Deduplicates by content hash.
+ *
+ * @param family - The font-family name
+ * @param input - Single descriptor object or array of descriptors (for multiple weights/styles)
+ * @param options - Optional settings (e.g. Shadow DOM root)
+ *
+ * @example Single weight
+ * ```tsx
+ * function App() {
+ *   useFontFace('Brand Sans', {
+ *     src: 'url("/fonts/brand-sans.woff2") format("woff2")',
+ *     fontWeight: '400 700',
+ *     fontDisplay: 'swap',
+ *   });
+ *
+ *   return <div style={{ fontFamily: '"Brand Sans", sans-serif' }}>Hello</div>;
+ * }
+ * ```
+ *
+ * @example Multiple weights
+ * ```tsx
+ * function App() {
+ *   useFontFace('Brand Sans', [
+ *     { src: 'url("/fonts/brand-regular.woff2") format("woff2")', fontWeight: 400, fontDisplay: 'swap' },
+ *     { src: 'url("/fonts/brand-bold.woff2") format("woff2")', fontWeight: 700, fontDisplay: 'swap' },
+ *   ]);
+ *
+ *   return <div style={{ fontFamily: '"Brand Sans", sans-serif' }}>Hello</div>;
+ * }
+ * ```
+ */
+declare function useFontFace(family: string, input: FontFaceInput, options?: UseFontFaceOptions): void;
+//#endregion
+export { useFontFace };
+//# sourceMappingURL=useFontFace.d.ts.map

package/dist/hooks/useFontFace.js

@@ -0,0 +1,70 @@
+import { fontFaceContentHash, formatFontFaceRule } from "../font-face/index.js";
+import { getGlobalInjector } from "../config.js";
+import { resolveSSRCollector } from "./resolve-ssr-collector.js";
+import { TastySSRContext } from "../ssr/context.js";
+import { useContext, useInsertionEffect, useMemo } from "react";
+//#region src/hooks/useFontFace.ts
+/**
+* Hook to inject CSS @font-face rules.
+* Permanent — no cleanup on unmount. Deduplicates by content hash.
+*
+* @param family - The font-family name
+* @param input - Single descriptor object or array of descriptors (for multiple weights/styles)
+* @param options - Optional settings (e.g. Shadow DOM root)
+*
+* @example Single weight
+* ```tsx
+* function App() {
+*   useFontFace('Brand Sans', {
+*     src: 'url("/fonts/brand-sans.woff2") format("woff2")',
+*     fontWeight: '400 700',
+*     fontDisplay: 'swap',
+*   });
+*
+*   return <div style={{ fontFamily: '"Brand Sans", sans-serif' }}>Hello</div>;
+* }
+* ```
+*
+* @example Multiple weights
+* ```tsx
+* function App() {
+*   useFontFace('Brand Sans', [
+*     { src: 'url("/fonts/brand-regular.woff2") format("woff2")', fontWeight: 400, fontDisplay: 'swap' },
+*     { src: 'url("/fonts/brand-bold.woff2") format("woff2")', fontWeight: 700, fontDisplay: 'swap' },
+*   ]);
+*
+*   return <div style={{ fontFamily: '"Brand Sans", sans-serif' }}>Hello</div>;
+* }
+* ```
+*/
+function useFontFace(family, input, options) {
+	const ssrCollector = resolveSSRCollector(useContext(TastySSRContext));
+	const inputKey = useMemo(() => JSON.stringify(input), [input]);
+	useMemo(() => {
+		if (!ssrCollector || !family) return;
+		const descriptors = Array.isArray(input) ? input : [input];
+		for (const desc of descriptors) {
+			const hash = fontFaceContentHash(family, desc);
+			const css = formatFontFaceRule(family, desc);
+			ssrCollector.collectFontFace(hash, css);
+		}
+	}, [
+		ssrCollector,
+		family,
+		inputKey
+	]);
+	useInsertionEffect(() => {
+		if (!family) return;
+		const injector = getGlobalInjector();
+		const descriptors = Array.isArray(input) ? input : [input];
+		for (const desc of descriptors) injector.fontFace(family, desc, { root: options?.root });
+	}, [
+		family,
+		inputKey,
+		options?.root
+	]);
+}
+//#endregion
+export { useFontFace };
+
+//# sourceMappingURL=useFontFace.js.map

package/dist/hooks/useFontFace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFontFace.js","names":[],"sources":["../../src/hooks/useFontFace.ts"],"sourcesContent":["import { useContext, useInsertionEffect, useMemo } from 'react';\n\nimport { getGlobalInjector } from '../config';\nimport { fontFaceContentHash, formatFontFaceRule } from '../font-face';\nimport type { FontFaceDescriptors, FontFaceInput } from '../injector/types';\nimport { resolveSSRCollector } from './resolve-ssr-collector';\nimport { TastySSRContext } from '../ssr/context';\n\ninterface UseFontFaceOptions {\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Hook to inject CSS @font-face rules.\n * Permanent — no cleanup on unmount. Deduplicates by content hash.\n *\n * @param family - The font-family name\n * @param input - Single descriptor object or array of descriptors (for multiple weights/styles)\n * @param options - Optional settings (e.g. Shadow DOM root)\n *\n * @example Single weight\n * ```tsx\n * function App() {\n *   useFontFace('Brand Sans', {\n *     src: 'url(\"/fonts/brand-sans.woff2\") format(\"woff2\")',\n *     fontWeight: '400 700',\n *     fontDisplay: 'swap',\n *   });\n *\n *   return <div style={{ fontFamily: '\"Brand Sans\", sans-serif' }}>Hello</div>;\n * }\n * ```\n *\n * @example Multiple weights\n * ```tsx\n * function App() {\n *   useFontFace('Brand Sans', [\n *     { src: 'url(\"/fonts/brand-regular.woff2\") format(\"woff2\")', fontWeight: 400, fontDisplay: 'swap' },\n *     { src: 'url(\"/fonts/brand-bold.woff2\") format(\"woff2\")', fontWeight: 700, fontDisplay: 'swap' },\n *   ]);\n *\n *   return <div style={{ fontFamily: '\"Brand Sans\", sans-serif' }}>Hello</div>;\n * }\n * ```\n */\nexport function useFontFace(\n  family: string,\n  input: FontFaceInput,\n  options?: UseFontFaceOptions,\n): void {\n  const ssrContextValue = useContext(TastySSRContext);\n  const ssrCollector = resolveSSRCollector(ssrContextValue);\n\n  const inputKey = useMemo(() => JSON.stringify(input), [input]);\n\n  // SSR path: collect @font-face CSS during render\n  useMemo(() => {\n    if (!ssrCollector || !family) return;\n\n    const descriptors: FontFaceDescriptors[] = Array.isArray(input)\n      ? input\n      : [input];\n\n    for (const desc of descriptors) {\n      const hash = fontFaceContentHash(family, desc);\n      const css = formatFontFaceRule(family, desc);\n      ssrCollector.collectFontFace(hash, css);\n    }\n  }, [ssrCollector, family, inputKey]);\n\n  // Client path: inject via DOM\n  useInsertionEffect(() => {\n    if (!family) return;\n\n    const injector = getGlobalInjector();\n    const descriptors: FontFaceDescriptors[] = Array.isArray(input)\n      ? input\n      : [input];\n\n    for (const desc of descriptors) {\n      injector.fontFace(family, desc, { root: options?.root });\n    }\n  }, [family, inputKey, options?.root]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,SAAgB,YACd,QACA,OACA,SACM;CAEN,MAAM,eAAe,oBADG,WAAW,gBAAgB,CACM;CAEzD,MAAM,WAAW,cAAc,KAAK,UAAU,MAAM,EAAE,CAAC,MAAM,CAAC;AAG9D,eAAc;AACZ,MAAI,CAAC,gBAAgB,CAAC,OAAQ;EAE9B,MAAM,cAAqC,MAAM,QAAQ,MAAM,GAC3D,QACA,CAAC,MAAM;AAEX,OAAK,MAAM,QAAQ,aAAa;GAC9B,MAAM,OAAO,oBAAoB,QAAQ,KAAK;GAC9C,MAAM,MAAM,mBAAmB,QAAQ,KAAK;AAC5C,gBAAa,gBAAgB,MAAM,IAAI;;IAExC;EAAC;EAAc;EAAQ;EAAS,CAAC;AAGpC,0BAAyB;AACvB,MAAI,CAAC,OAAQ;EAEb,MAAM,WAAW,mBAAmB;EACpC,MAAM,cAAqC,MAAM,QAAQ,MAAM,GAC3D,QACA,CAAC,MAAM;AAEX,OAAK,MAAM,QAAQ,YACjB,UAAS,SAAS,QAAQ,MAAM,EAAE,MAAM,SAAS,MAAM,CAAC;IAEzD;EAAC;EAAQ;EAAU,SAAS;EAAK,CAAC"}

package/dist/hooks/useGlobalStyles.d.ts

@@ -0,0 +1,30 @@
+import { Styles } from "../styles/types.js";
+
+//#region src/hooks/useGlobalStyles.d.ts
+/**
+ * Hook to inject global styles for a given selector.
+ * Useful for styling elements by selector without generating classNames.
+ *
+ * SSR-aware: when a ServerStyleCollector is available, CSS is collected
+ * during the render phase instead of being injected into the DOM.
+ *
+ * @param selector - CSS selector to apply styles to (e.g., '.my-class', ':root', 'body')
+ * @param styles - Tasty styles object
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   useGlobalStyles('.card', {
+ *     padding: '2x',
+ *     radius: '1r',
+ *     fill: '#white',
+ *   });
+ *
+ *   return <div className="card">Content</div>;
+ * }
+ * ```
+ */
+declare function useGlobalStyles(selector: string, styles?: Styles): void;
+//#endregion
+export { useGlobalStyles };
+//# sourceMappingURL=useGlobalStyles.d.ts.map

package/dist/hooks/useGlobalStyles.js

@@ -0,0 +1,78 @@
+import { renderStyles } from "../pipeline/index.js";
+import { getConfig } from "../config.js";
+import { injectGlobal } from "../injector/index.js";
+import { resolveRecipes } from "../utils/resolve-recipes.js";
+import { collectAutoInferredProperties } from "../ssr/collect-auto-properties.js";
+import { resolveSSRCollector } from "./resolve-ssr-collector.js";
+import { TastySSRContext } from "../ssr/context.js";
+import { formatGlobalRules } from "../ssr/format-global-rules.js";
+import { useContext, useInsertionEffect, useMemo, useRef } from "react";
+//#region src/hooks/useGlobalStyles.ts
+/**
+* Hook to inject global styles for a given selector.
+* Useful for styling elements by selector without generating classNames.
+*
+* SSR-aware: when a ServerStyleCollector is available, CSS is collected
+* during the render phase instead of being injected into the DOM.
+*
+* @param selector - CSS selector to apply styles to (e.g., '.my-class', ':root', 'body')
+* @param styles - Tasty styles object
+*
+* @example
+* ```tsx
+* function MyComponent() {
+*   useGlobalStyles('.card', {
+*     padding: '2x',
+*     radius: '1r',
+*     fill: '#white',
+*   });
+*
+*   return <div className="card">Content</div>;
+* }
+* ```
+*/
+function useGlobalStyles(selector, styles) {
+	const ssrCollector = resolveSSRCollector(useContext(TastySSRContext));
+	const disposeRef = useRef(null);
+	const resolvedStyles = useMemo(() => {
+		if (!styles) return styles;
+		return resolveRecipes(styles);
+	}, [styles]);
+	const styleResults = useMemo(() => {
+		if (!resolvedStyles) return [];
+		if (!selector) {
+			console.warn("[Tasty] useGlobalStyles: selector is required and cannot be empty. Styles will not be injected.");
+			return [];
+		}
+		return renderStyles(resolvedStyles, selector);
+	}, [resolvedStyles, selector]);
+	useMemo(() => {
+		if (!ssrCollector || styleResults.length === 0) return;
+		ssrCollector.collectInternals();
+		const css = formatGlobalRules(styleResults);
+		if (css) {
+			const key = `global:${selector}:${css.length}:${css.slice(0, 64)}`;
+			ssrCollector.collectGlobalStyles(key, css);
+		}
+		if (getConfig().autoPropertyTypes !== false) collectAutoInferredProperties(styleResults, ssrCollector, resolvedStyles);
+	}, [
+		ssrCollector,
+		styleResults,
+		selector
+	]);
+	useInsertionEffect(() => {
+		disposeRef.current?.();
+		if (styleResults.length > 0) {
+			const { dispose } = injectGlobal(styleResults);
+			disposeRef.current = dispose;
+		} else disposeRef.current = null;
+		return () => {
+			disposeRef.current?.();
+			disposeRef.current = null;
+		};
+	}, [styleResults]);
+}
+//#endregion
+export { useGlobalStyles };
+
+//# sourceMappingURL=useGlobalStyles.js.map

package/dist/hooks/useGlobalStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGlobalStyles.js","names":[],"sources":["../../src/hooks/useGlobalStyles.ts"],"sourcesContent":["import { useContext, useInsertionEffect, useMemo, useRef } from 'react';\n\nimport { getConfig } from '../config';\nimport { injectGlobal } from '../injector';\nimport type { StyleResult } from '../pipeline';\nimport { renderStyles } from '../pipeline';\nimport { collectAutoInferredProperties } from '../ssr/collect-auto-properties';\nimport { resolveSSRCollector } from './resolve-ssr-collector';\nimport { TastySSRContext } from '../ssr/context';\nimport { formatGlobalRules } from '../ssr/format-global-rules';\nimport type { Styles } from '../styles/types';\nimport { resolveRecipes } from '../utils/resolve-recipes';\n\n/**\n * Hook to inject global styles for a given selector.\n * Useful for styling elements by selector without generating classNames.\n *\n * SSR-aware: when a ServerStyleCollector is available, CSS is collected\n * during the render phase instead of being injected into the DOM.\n *\n * @param selector - CSS selector to apply styles to (e.g., '.my-class', ':root', 'body')\n * @param styles - Tasty styles object\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   useGlobalStyles('.card', {\n *     padding: '2x',\n *     radius: '1r',\n *     fill: '#white',\n *   });\n *\n *   return <div className=\"card\">Content</div>;\n * }\n * ```\n */\nexport function useGlobalStyles(selector: string, styles?: Styles): void {\n  const ssrContextValue = useContext(TastySSRContext);\n  const ssrCollector = resolveSSRCollector(ssrContextValue);\n\n  const disposeRef = useRef<(() => void) | null>(null);\n\n  // Resolve recipes before rendering (zero overhead if no recipes configured)\n  const resolvedStyles = useMemo(() => {\n    if (!styles) return styles;\n    return resolveRecipes(styles);\n  }, [styles]);\n\n  // Render styles with the provided selector\n  // Note: renderStyles overload with selector string returns StyleResult[] directly\n  const styleResults = useMemo((): StyleResult[] => {\n    if (!resolvedStyles) return [];\n\n    if (!selector) {\n      if (process.env.NODE_ENV !== 'production') {\n        console.warn(\n          '[Tasty] useGlobalStyles: selector is required and cannot be empty. ' +\n            'Styles will not be injected.',\n        );\n      }\n      return [];\n    }\n\n    const result = renderStyles(resolvedStyles, selector);\n    return result as StyleResult[];\n  }, [resolvedStyles, selector]);\n\n  // SSR path: collect CSS during render\n  useMemo(() => {\n    if (!ssrCollector || styleResults.length === 0) return;\n\n    ssrCollector.collectInternals();\n\n    const css = formatGlobalRules(styleResults);\n    if (css) {\n      const key = `global:${selector}:${css.length}:${css.slice(0, 64)}`;\n      ssrCollector.collectGlobalStyles(key, css);\n    }\n\n    if (getConfig().autoPropertyTypes !== false) {\n      collectAutoInferredProperties(styleResults, ssrCollector, resolvedStyles);\n    }\n  }, [ssrCollector, styleResults, selector]);\n\n  // Client path: inject via DOM\n  useInsertionEffect(() => {\n    disposeRef.current?.();\n\n    if (styleResults.length > 0) {\n      const { dispose } = injectGlobal(styleResults);\n      disposeRef.current = dispose;\n    } else {\n      disposeRef.current = null;\n    }\n\n    return () => {\n      disposeRef.current?.();\n      disposeRef.current = null;\n    };\n  }, [styleResults]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAgB,gBAAgB,UAAkB,QAAuB;CAEvE,MAAM,eAAe,oBADG,WAAW,gBAAgB,CACM;CAEzD,MAAM,aAAa,OAA4B,KAAK;CAGpD,MAAM,iBAAiB,cAAc;AACnC,MAAI,CAAC,OAAQ,QAAO;AACpB,SAAO,eAAe,OAAO;IAC5B,CAAC,OAAO,CAAC;CAIZ,MAAM,eAAe,cAA6B;AAChD,MAAI,CAAC,eAAgB,QAAO,EAAE;AAE9B,MAAI,CAAC,UAAU;AAEX,WAAQ,KACN,kGAED;AAEH,UAAO,EAAE;;AAIX,SADe,aAAa,gBAAgB,SAAS;IAEpD,CAAC,gBAAgB,SAAS,CAAC;AAG9B,eAAc;AACZ,MAAI,CAAC,gBAAgB,aAAa,WAAW,EAAG;AAEhD,eAAa,kBAAkB;EAE/B,MAAM,MAAM,kBAAkB,aAAa;AAC3C,MAAI,KAAK;GACP,MAAM,MAAM,UAAU,SAAS,GAAG,IAAI,OAAO,GAAG,IAAI,MAAM,GAAG,GAAG;AAChE,gBAAa,oBAAoB,KAAK,IAAI;;AAG5C,MAAI,WAAW,CAAC,sBAAsB,MACpC,+BAA8B,cAAc,cAAc,eAAe;IAE1E;EAAC;EAAc;EAAc;EAAS,CAAC;AAG1C,0BAAyB;AACvB,aAAW,WAAW;AAEtB,MAAI,aAAa,SAAS,GAAG;GAC3B,MAAM,EAAE,YAAY,aAAa,aAAa;AAC9C,cAAW,UAAU;QAErB,YAAW,UAAU;AAGvB,eAAa;AACX,cAAW,WAAW;AACtB,cAAW,UAAU;;IAEtB,CAAC,aAAa,CAAC"}

package/dist/hooks/useKeyframes.d.ts

@@ -0,0 +1,56 @@
+import { KeyframesSteps } from "../injector/types.js";
+
+//#region src/hooks/useKeyframes.d.ts
+interface UseKeyframesOptions {
+  name?: string;
+  root?: Document | ShadowRoot;
+}
+/**
+ * Hook to inject CSS @keyframes and return the generated animation name.
+ * Handles keyframes injection with proper cleanup on unmount or dependency changes.
+ *
+ * @example Basic usage - steps object is the dependency
+ * ```tsx
+ * function MyComponent() {
+ *   const bounce = useKeyframes({
+ *     '0%': { transform: 'scale(1)' },
+ *     '50%': { transform: 'scale(1.1)' },
+ *     '100%': { transform: 'scale(1)' },
+ *   });
+ *
+ *   return <div style={{ animation: `${bounce} 1s infinite` }}>Bouncing</div>;
+ * }
+ * ```
+ *
+ * @example With custom name
+ * ```tsx
+ * function MyComponent() {
+ *   const fadeIn = useKeyframes(
+ *     { from: { opacity: 0 }, to: { opacity: 1 } },
+ *     { name: 'fadeIn' }
+ *   );
+ *
+ *   return <div style={{ animation: `${fadeIn} 0.3s ease-out` }}>Fading in</div>;
+ * }
+ * ```
+ *
+ * @example Factory function with dependencies
+ * ```tsx
+ * function MyComponent({ scale }: { scale: number }) {
+ *   const pulse = useKeyframes(
+ *     () => ({
+ *       '0%': { transform: 'scale(1)' },
+ *       '100%': { transform: `scale(${scale})` },
+ *     }),
+ *     [scale]
+ *   );
+ *
+ *   return <div style={{ animation: `${pulse} 1s infinite` }}>Pulsing</div>;
+ * }
+ * ```
+ */
+declare function useKeyframes(steps: KeyframesSteps, options?: UseKeyframesOptions): string;
+declare function useKeyframes(factory: () => KeyframesSteps, deps: readonly unknown[], options?: UseKeyframesOptions): string;
+//#endregion
+export { useKeyframes };
+//# sourceMappingURL=useKeyframes.d.ts.map