@tenphi/tasty 0.0.0-snapshot.b732102 → 0.0.0-snapshot.ba2f94f

package/dist/compute-styles.js

@@ -8,13 +8,13 @@ import { generateChunkCacheKey } from "./chunks/cacheKey.js";
 import { renderStylesForChunk } from "./chunks/renderChunk.js";
 import { counterStyle, fontFace, inject, keyframes, property, touch } from "./injector/index.js";
 import { extractAnimationNamesFromStyles, extractLocalKeyframes, filterUsedKeyframes, hasLocalKeyframes, mergeKeyframes, replaceAnimationNames } from "./keyframes/index.js";
+import { getRegisteredSSRCollector } from "./ssr/ssr-collector-ref.js";
 import { flushPendingCSS, getRSCCache, rscAllocateClassName } from "./rsc-cache.js";
 import { formatPropertyCSS } from "./ssr/format-property.js";
 import { collectAutoInferredProperties } from "./ssr/collect-auto-properties.js";
 import { formatGlobalRules } from "./ssr/format-global-rules.js";
 import { formatKeyframesCSS } from "./ssr/format-keyframes.js";
 import { formatRules } from "./ssr/format-rules.js";
-import { getRegisteredSSRCollector } from "./ssr/ssr-collector-ref.js";
 import { hasKeys } from "./utils/has-keys.js";
 import { resolveRecipes } from "./utils/resolve-recipes.js";
 //#region src/compute-styles.ts
@@ -68,7 +68,7 @@ function collectAncillaryRSC(rscCache, styles) {
 	const parts = [];
 	const usedKf = getUsedKeyframes(styles);
 	if (usedKf) for (const [name, steps] of Object.entries(usedKf)) {
-		const key = `__kf:${name}`;
+		const key = `__kf:${name}:${JSON.stringify(steps)}`;
 		if (!rscCache.emittedKeys.has(key)) {
 			rscCache.emittedKeys.add(key);
 			parts.push(formatKeyframesCSS(name, steps));
@@ -101,7 +101,7 @@ function collectAncillaryRSC(rscCache, styles) {
 	if (hasLocalCounterStyle(styles)) {
 		const localCounterStyle = extractLocalCounterStyle(styles);
 		if (localCounterStyle) for (const [name, descriptors] of Object.entries(localCounterStyle)) {
-			const key = `__cs:${name}`;
+			const key = `__cs:${name}:${JSON.stringify(descriptors)}`;
 			if (!rscCache.emittedKeys.has(key)) {
 				rscCache.emittedKeys.add(key);
 				parts.push(formatCounterStyleRule(name, descriptors));

package/dist/compute-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"compute-styles.js","names":[],"sources":["../src/compute-styles.ts"],"sourcesContent":["/**\n * Hook-free, synchronous style computation.\n *\n * Extracts the core logic from useStyles() into a plain function that can\n * be called during React render without any hooks. Three code paths:\n *\n * 1. SSR collector — styles collected via ServerStyleCollector\n * 2. Client inject — styles injected synchronously into the DOM\n * 3. RSC inline — styles returned as CSS strings for inline <style> emission\n *\n * This enables tasty() components to work as React Server Components.\n */\n\nimport {\n  categorizeStyleKeys,\n  generateChunkCacheKey,\n  renderStylesForChunk,\n} from './chunks';\nimport {\n  getConfig,\n  getGlobalConfigTokens,\n  getGlobalCounterStyle,\n  getEffectiveProperties,\n  getGlobalFontFace,\n  getGlobalKeyframes,\n  hasGlobalKeyframes,\n} from './config';\nimport {\n  counterStyle,\n  fontFace,\n  inject,\n  keyframes,\n  property,\n  touch,\n} from './injector';\nimport type { FontFaceDescriptors, KeyframesSteps } from './injector/types';\nimport {\n  extractLocalCounterStyle,\n  formatCounterStyleRule,\n  hasLocalCounterStyle,\n} from './counter-style';\nimport {\n  extractLocalFontFace,\n  fontFaceContentHash,\n  formatFontFaceRule,\n  hasLocalFontFace,\n} from './font-face';\nimport {\n  extractAnimationNamesFromStyles,\n  extractLocalKeyframes,\n  filterUsedKeyframes,\n  hasLocalKeyframes,\n  mergeKeyframes,\n  replaceAnimationNames,\n} from './keyframes';\nimport type { RenderResult, StyleResult } from './pipeline';\nimport { renderStyles } from './pipeline';\nimport {\n  flushPendingCSS,\n  getRSCCache,\n  rscAllocateClassName,\n} from './rsc-cache';\nimport type { RSCStyleCache } from './rsc-cache';\nimport { extractLocalProperties, hasLocalProperties } from './properties';\nimport { collectAutoInferredProperties } from './ssr/collect-auto-properties';\nimport type { ServerStyleCollector } from './ssr/collector';\nimport { formatGlobalRules } from './ssr/format-global-rules';\nimport { formatKeyframesCSS } from './ssr/format-keyframes';\nimport { formatPropertyCSS } from './ssr/format-property';\nimport { formatRules } from './ssr/format-rules';\nimport { getRegisteredSSRCollector } from './ssr/ssr-collector-ref';\nimport type { Styles } from './styles/types';\nimport { hasKeys } from './utils/has-keys';\nimport { resolveRecipes } from './utils/resolve-recipes';\n\nexport interface ComputeStylesResult {\n  className: string;\n  /** CSS text to emit as an inline <style> tag (RSC mode only). */\n  css?: string;\n}\n\nexport interface ComputeStylesOptions {\n  ssrCollector?: ServerStyleCollector | null;\n}\n\ninterface ProcessedChunk {\n  name: string;\n  styleKeys: string[];\n  cacheKey: string;\n  renderResult: RenderResult;\n  className: string;\n}\n\nconst EMPTY_RESULT: ComputeStylesResult = { className: '' };\n\n// ---------------------------------------------------------------------------\n// RSC (React Server Components) inline style support\n// ---------------------------------------------------------------------------\n\n/**\n * Collect internals CSS for RSC — mirrors ServerStyleCollector.collectInternals().\n * Emitted once per request (tracked via rscCache.internalsEmitted).\n */\nfunction collectInternalsRSC(rscCache: RSCStyleCache): string {\n  if (rscCache.internalsEmitted) return '';\n  rscCache.internalsEmitted = true;\n\n  const parts: string[] = [];\n\n  for (const [token, definition] of Object.entries(getEffectiveProperties())) {\n    const css = formatPropertyCSS(token, definition);\n    if (css) parts.push(css);\n  }\n\n  const tokenStyles = getGlobalConfigTokens();\n  if (tokenStyles && Object.keys(tokenStyles).length > 0) {\n    const tokenRules = renderStyles(tokenStyles, ':root') as StyleResult[];\n    if (tokenRules.length > 0) {\n      const css = formatGlobalRules(tokenRules);\n      if (css) parts.push(css);\n    }\n  }\n\n  const globalFF = getGlobalFontFace();\n  if (globalFF) {\n    for (const [family, input] of Object.entries(globalFF)) {\n      const descriptors: FontFaceDescriptors[] = Array.isArray(input)\n        ? input\n        : [input];\n      for (const desc of descriptors) {\n        parts.push(formatFontFaceRule(family, desc));\n      }\n    }\n  }\n\n  const globalCS = getGlobalCounterStyle();\n  if (globalCS) {\n    for (const [name, descriptors] of Object.entries(globalCS)) {\n      parts.push(formatCounterStyleRule(name, descriptors));\n    }\n  }\n\n  return parts.join('\\n');\n}\n\n/**\n * Collect per-component ancillary CSS (keyframes, @property, font-face,\n * counter-style) for RSC mode.\n */\nfunction collectAncillaryRSC(rscCache: RSCStyleCache, styles: Styles): string {\n  const parts: string[] = [];\n\n  const usedKf = getUsedKeyframes(styles);\n  if (usedKf) {\n    for (const [name, steps] of Object.entries(usedKf)) {\n      const key = `__kf:${name}`;\n      if (!rscCache.emittedKeys.has(key)) {\n        rscCache.emittedKeys.add(key);\n        parts.push(formatKeyframesCSS(name, steps));\n      }\n    }\n  }\n\n  if (hasLocalProperties(styles)) {\n    const localProperties = extractLocalProperties(styles);\n    if (localProperties) {\n      for (const [token, definition] of Object.entries(localProperties)) {\n        const key = `__prop:${token}`;\n        if (!rscCache.emittedKeys.has(key)) {\n          rscCache.emittedKeys.add(key);\n          const css = formatPropertyCSS(token, definition);\n          if (css) parts.push(css);\n        }\n      }\n    }\n  }\n\n  if (hasLocalFontFace(styles)) {\n    const localFontFace = extractLocalFontFace(styles);\n    if (localFontFace) {\n      for (const [family, input] of Object.entries(localFontFace)) {\n        const descriptors: FontFaceDescriptors[] = Array.isArray(input)\n          ? input\n          : [input];\n        for (const desc of descriptors) {\n          const hash = fontFaceContentHash(family, desc);\n          const key = `__ff:${hash}`;\n          if (!rscCache.emittedKeys.has(key)) {\n            rscCache.emittedKeys.add(key);\n            parts.push(formatFontFaceRule(family, desc));\n          }\n        }\n      }\n    }\n  }\n\n  if (hasLocalCounterStyle(styles)) {\n    const localCounterStyle = extractLocalCounterStyle(styles);\n    if (localCounterStyle) {\n      for (const [name, descriptors] of Object.entries(localCounterStyle)) {\n        const key = `__cs:${name}`;\n        if (!rscCache.emittedKeys.has(key)) {\n          rscCache.emittedKeys.add(key);\n          parts.push(formatCounterStyleRule(name, descriptors));\n        }\n      }\n    }\n  }\n\n  return parts.join('\\n');\n}\n\n/**\n * Process all chunks in RSC mode: render CSS to strings, allocate classNames,\n * and return combined { className, css }.\n */\nfunction computeStylesRSC(\n  styles: Styles,\n  chunkMap: Map<string, string[]>,\n): ComputeStylesResult {\n  const rscCache = getRSCCache();\n  const cssParts: string[] = [];\n  const classNames: string[] = [];\n\n  // Flush CSS accumulated by standalone style functions\n  const pendingCSS = flushPendingCSS(rscCache);\n  if (pendingCSS) cssParts.push(pendingCSS);\n\n  const internalsCSS = collectInternalsRSC(rscCache);\n  if (internalsCSS) cssParts.push(internalsCSS);\n\n  for (const [chunkName, chunkStyleKeys] of chunkMap) {\n    if (chunkStyleKeys.length === 0) continue;\n\n    const cacheKey = generateChunkCacheKey(styles, chunkName, chunkStyleKeys);\n    const { className, isNew } = rscAllocateClassName(rscCache, cacheKey);\n    classNames.push(className);\n\n    if (isNew) {\n      const renderResult = renderStylesForChunk(\n        styles,\n        chunkName,\n        chunkStyleKeys,\n      );\n      if (renderResult.rules.length > 0) {\n        const css = formatRules(renderResult.rules, className);\n        if (css) cssParts.push(css);\n      }\n    }\n  }\n\n  const ancillaryCSS = collectAncillaryRSC(rscCache, styles);\n  if (ancillaryCSS) cssParts.push(ancillaryCSS);\n\n  if (classNames.length === 0) return EMPTY_RESULT;\n\n  const css = cssParts.join('\\n');\n\n  return {\n    className: classNames.join(' '),\n    css: css || undefined,\n  };\n}\n\n/**\n * Get keyframes that are actually used in styles.\n * Returns null if no keyframes are used (fast path for zero overhead).\n */\nfunction getUsedKeyframes(\n  styles: Styles,\n): Record<string, KeyframesSteps> | null {\n  const hasLocal = hasLocalKeyframes(styles);\n  const hasGlobal = hasGlobalKeyframes();\n  if (!hasLocal && !hasGlobal) return null;\n\n  const usedNames = extractAnimationNamesFromStyles(styles);\n  if (usedNames.size === 0) return null;\n\n  const local = hasLocal ? extractLocalKeyframes(styles) : null;\n  const global = hasGlobal ? getGlobalKeyframes() : null;\n  const allKeyframes = mergeKeyframes(local, global);\n\n  return filterUsedKeyframes(allKeyframes, usedNames);\n}\n\n/**\n * Process a chunk on the SSR path: allocate via collector, render, collect CSS.\n */\nfunction processChunkSSR(\n  collector: ServerStyleCollector,\n  styles: Styles,\n  chunkName: string,\n  styleKeys: string[],\n): ProcessedChunk | null {\n  if (styleKeys.length === 0) return null;\n\n  const cacheKey = generateChunkCacheKey(styles, chunkName, styleKeys);\n  const { className, isNewAllocation } = collector.allocateClassName(cacheKey);\n\n  if (isNewAllocation) {\n    const renderResult = renderStylesForChunk(styles, chunkName, styleKeys);\n    if (renderResult.rules.length > 0) {\n      collector.collectChunk(cacheKey, className, renderResult.rules);\n      return { name: chunkName, styleKeys, cacheKey, renderResult, className };\n    }\n    return null;\n  }\n\n  return {\n    name: chunkName,\n    styleKeys,\n    cacheKey,\n    renderResult: { rules: [] },\n    className,\n  };\n}\n\n/**\n * Process a chunk on the client: render, allocate className, and inject\n * CSS synchronously. The injector's cache makes this idempotent.\n */\nfunction processChunkSync(\n  styles: Styles,\n  chunkName: string,\n  styleKeys: string[],\n): ProcessedChunk | null {\n  if (styleKeys.length === 0) return null;\n\n  const cacheKey = generateChunkCacheKey(styles, chunkName, styleKeys);\n  const renderResult = renderStylesForChunk(\n    styles,\n    chunkName,\n    styleKeys,\n    cacheKey,\n  );\n  if (renderResult.rules.length === 0) return null;\n\n  const { className } = inject(renderResult.rules, { cacheKey });\n\n  return { name: chunkName, styleKeys, cacheKey, renderResult, className };\n}\n\n/**\n * Inject keyframes synchronously and return a name replacement map.\n * On the client, keyframes are injected into the DOM.\n */\nfunction injectKeyframesSync(\n  usedKeyframes: Record<string, KeyframesSteps>,\n): Map<string, string> | null {\n  let nameMap: Map<string, string> | null = null;\n\n  for (const [name, steps] of Object.entries(usedKeyframes)) {\n    const result = keyframes(steps, { name });\n    const injectedName = result.toString();\n    if (injectedName !== name) {\n      if (!nameMap) nameMap = new Map();\n      nameMap.set(name, injectedName);\n    }\n  }\n\n  return nameMap;\n}\n\n/**\n * Inject chunk rules synchronously, replacing animation names if needed.\n */\nfunction injectChunkRulesSync(\n  chunks: ProcessedChunk[],\n  nameMap: Map<string, string> | null,\n): void {\n  for (const chunk of chunks) {\n    if (chunk.renderResult.rules.length > 0) {\n      const rulesToInject: StyleResult[] = nameMap\n        ? chunk.renderResult.rules.map((rule) => ({\n            ...rule,\n            declarations: replaceAnimationNames(rule.declarations, nameMap!),\n          }))\n        : chunk.renderResult.rules;\n\n      inject(rulesToInject, { cacheKey: chunk.cacheKey });\n    }\n  }\n}\n\n/**\n * Inject all ancillary rules (properties, font-faces, counter-styles) synchronously.\n */\nfunction injectAncillarySync(styles: Styles): void {\n  if (hasLocalProperties(styles)) {\n    const localProperties = extractLocalProperties(styles);\n    if (localProperties) {\n      for (const [token, definition] of Object.entries(localProperties)) {\n        property(token, definition);\n      }\n    }\n  }\n\n  if (hasLocalFontFace(styles)) {\n    const localFontFace = extractLocalFontFace(styles);\n    if (localFontFace) {\n      for (const [family, input] of Object.entries(localFontFace)) {\n        const descriptors: FontFaceDescriptors[] = Array.isArray(input)\n          ? input\n          : [input];\n        for (const desc of descriptors) {\n          fontFace(family, desc);\n        }\n      }\n    }\n  }\n\n  if (hasLocalCounterStyle(styles)) {\n    const localCounterStyle = extractLocalCounterStyle(styles);\n    if (localCounterStyle) {\n      for (const [name, descriptors] of Object.entries(localCounterStyle)) {\n        counterStyle(name, descriptors);\n      }\n    }\n  }\n}\n\n/**\n * Collect all ancillary rules into the SSR collector.\n */\nfunction collectAncillarySSR(\n  collector: ServerStyleCollector,\n  styles: Styles,\n  chunks: ProcessedChunk[],\n): void {\n  const usedKf = getUsedKeyframes(styles);\n  if (usedKf) {\n    for (const [name, steps] of Object.entries(usedKf)) {\n      const css = formatKeyframesCSS(name, steps);\n      collector.collectKeyframes(name, css);\n    }\n  }\n\n  if (hasLocalProperties(styles)) {\n    const localProperties = extractLocalProperties(styles);\n    if (localProperties) {\n      for (const [token, definition] of Object.entries(localProperties)) {\n        const css = formatPropertyCSS(token, definition);\n        if (css) {\n          collector.collectProperty(token, css);\n        }\n      }\n    }\n  }\n\n  if (hasLocalFontFace(styles)) {\n    const localFontFace = extractLocalFontFace(styles);\n    if (localFontFace) {\n      for (const [family, input] of Object.entries(localFontFace)) {\n        const descriptors: FontFaceDescriptors[] = Array.isArray(input)\n          ? input\n          : [input];\n        for (const desc of descriptors) {\n          const hash = fontFaceContentHash(family, desc);\n          const css = formatFontFaceRule(family, desc);\n          collector.collectFontFace(hash, css);\n        }\n      }\n    }\n  }\n\n  if (hasLocalCounterStyle(styles)) {\n    const localCounterStyle = extractLocalCounterStyle(styles);\n    if (localCounterStyle) {\n      for (const [name, descriptors] of Object.entries(localCounterStyle)) {\n        const css = formatCounterStyleRule(name, descriptors);\n        collector.collectCounterStyle(name, css);\n      }\n    }\n  }\n\n  if (getConfig().autoPropertyTypes !== false) {\n    const allRules = chunks.flatMap((c) => c.renderResult.rules);\n    if (allRules.length > 0) {\n      collectAutoInferredProperties(allRules, collector, styles);\n    }\n  }\n}\n\n/**\n * Synchronous, hook-free style computation.\n *\n * Resolves recipes, categorizes style keys into chunks, renders CSS rules,\n * allocates class names, and injects / collects / returns the CSS.\n *\n * Three code paths:\n * 1. SSR collector — discovered via ALS or passed explicitly; CSS collected\n * 2. RSC inline — no collector and no `document`; CSS returned as `result.css`\n *    for the caller to emit as an inline `<style>` tag\n * 3. Client inject — CSS injected synchronously into the DOM (idempotent)\n *\n * @param styles - Tasty styles object (or undefined for no styles)\n * @param options - Optional SSR collector override\n */\nexport function computeStyles(\n  styles: Styles | undefined,\n  options?: ComputeStylesOptions,\n): ComputeStylesResult {\n  if (!styles || !hasKeys(styles as Record<string, unknown>)) {\n    return EMPTY_RESULT;\n  }\n\n  const resolved = resolveRecipes(styles);\n  const chunkMap = categorizeStyleKeys(resolved as Record<string, unknown>);\n\n  const collector =\n    options?.ssrCollector !== undefined\n      ? options.ssrCollector\n      : getRegisteredSSRCollector();\n\n  const chunks: ProcessedChunk[] = [];\n\n  if (collector) {\n    collector.collectInternals();\n\n    for (const [chunkName, chunkStyleKeys] of chunkMap) {\n      const chunk = processChunkSSR(\n        collector,\n        resolved,\n        chunkName,\n        chunkStyleKeys,\n      );\n      if (chunk) chunks.push(chunk);\n    }\n\n    collectAncillarySSR(collector, resolved, chunks);\n  } else if (typeof document === 'undefined') {\n    // RSC path: render CSS to strings for inline <style> emission\n    return computeStylesRSC(resolved, chunkMap);\n  } else {\n    injectAncillarySync(resolved);\n\n    const usedKf = getUsedKeyframes(resolved);\n    const nameMap = usedKf ? injectKeyframesSync(usedKf) : null;\n\n    for (const [chunkName, chunkStyleKeys] of chunkMap) {\n      const chunk = processChunkSync(resolved, chunkName, chunkStyleKeys);\n      if (chunk) chunks.push(chunk);\n    }\n\n    if (nameMap) {\n      injectChunkRulesSync(chunks, nameMap);\n    }\n\n    for (const chunk of chunks) {\n      touch(chunk.className);\n    }\n  }\n\n  if (chunks.length === 0) return EMPTY_RESULT;\n  if (chunks.length === 1) return { className: chunks[0].className };\n\n  return { className: chunks.map((c) => c.className).join(' ') };\n}\n"],"mappings":"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"}
+{"version":3,"file":"compute-styles.js","names":[],"sources":["../src/compute-styles.ts"],"sourcesContent":["/**\n * Hook-free, synchronous style computation.\n *\n * Extracts the core logic from useStyles() into a plain function that can\n * be called during React render without any hooks. Three code paths:\n *\n * 1. SSR collector — styles collected via ServerStyleCollector\n * 2. Client inject — styles injected synchronously into the DOM\n * 3. RSC inline — styles returned as CSS strings for inline <style> emission\n *\n * This enables tasty() components to work as React Server Components.\n */\n\nimport {\n  categorizeStyleKeys,\n  generateChunkCacheKey,\n  renderStylesForChunk,\n} from './chunks';\nimport {\n  getConfig,\n  getGlobalConfigTokens,\n  getGlobalCounterStyle,\n  getEffectiveProperties,\n  getGlobalFontFace,\n  getGlobalKeyframes,\n  hasGlobalKeyframes,\n} from './config';\nimport {\n  counterStyle,\n  fontFace,\n  inject,\n  keyframes,\n  property,\n  touch,\n} from './injector';\nimport type { FontFaceDescriptors, KeyframesSteps } from './injector/types';\nimport {\n  extractLocalCounterStyle,\n  formatCounterStyleRule,\n  hasLocalCounterStyle,\n} from './counter-style';\nimport {\n  extractLocalFontFace,\n  fontFaceContentHash,\n  formatFontFaceRule,\n  hasLocalFontFace,\n} from './font-face';\nimport {\n  extractAnimationNamesFromStyles,\n  extractLocalKeyframes,\n  filterUsedKeyframes,\n  hasLocalKeyframes,\n  mergeKeyframes,\n  replaceAnimationNames,\n} from './keyframes';\nimport type { RenderResult, StyleResult } from './pipeline';\nimport { renderStyles } from './pipeline';\nimport {\n  flushPendingCSS,\n  getRSCCache,\n  rscAllocateClassName,\n} from './rsc-cache';\nimport type { RSCStyleCache } from './rsc-cache';\nimport { extractLocalProperties, hasLocalProperties } from './properties';\nimport { collectAutoInferredProperties } from './ssr/collect-auto-properties';\nimport type { ServerStyleCollector } from './ssr/collector';\nimport { formatGlobalRules } from './ssr/format-global-rules';\nimport { formatKeyframesCSS } from './ssr/format-keyframes';\nimport { formatPropertyCSS } from './ssr/format-property';\nimport { formatRules } from './ssr/format-rules';\nimport { getRegisteredSSRCollector } from './ssr/ssr-collector-ref';\nimport type { Styles } from './styles/types';\nimport { hasKeys } from './utils/has-keys';\nimport { resolveRecipes } from './utils/resolve-recipes';\n\nexport interface ComputeStylesResult {\n  className: string;\n  /** CSS text to emit as an inline <style> tag (RSC mode only). */\n  css?: string;\n}\n\nexport interface ComputeStylesOptions {\n  ssrCollector?: ServerStyleCollector | null;\n}\n\ninterface ProcessedChunk {\n  name: string;\n  styleKeys: string[];\n  cacheKey: string;\n  renderResult: RenderResult;\n  className: string;\n}\n\nconst EMPTY_RESULT: ComputeStylesResult = { className: '' };\n\n// ---------------------------------------------------------------------------\n// RSC (React Server Components) inline style support\n// ---------------------------------------------------------------------------\n\n/**\n * Collect internals CSS for RSC — mirrors ServerStyleCollector.collectInternals().\n * Emitted once per request (tracked via rscCache.internalsEmitted).\n */\nfunction collectInternalsRSC(rscCache: RSCStyleCache): string {\n  if (rscCache.internalsEmitted) return '';\n  rscCache.internalsEmitted = true;\n\n  const parts: string[] = [];\n\n  for (const [token, definition] of Object.entries(getEffectiveProperties())) {\n    const css = formatPropertyCSS(token, definition);\n    if (css) parts.push(css);\n  }\n\n  const tokenStyles = getGlobalConfigTokens();\n  if (tokenStyles && Object.keys(tokenStyles).length > 0) {\n    const tokenRules = renderStyles(tokenStyles, ':root') as StyleResult[];\n    if (tokenRules.length > 0) {\n      const css = formatGlobalRules(tokenRules);\n      if (css) parts.push(css);\n    }\n  }\n\n  const globalFF = getGlobalFontFace();\n  if (globalFF) {\n    for (const [family, input] of Object.entries(globalFF)) {\n      const descriptors: FontFaceDescriptors[] = Array.isArray(input)\n        ? input\n        : [input];\n      for (const desc of descriptors) {\n        parts.push(formatFontFaceRule(family, desc));\n      }\n    }\n  }\n\n  const globalCS = getGlobalCounterStyle();\n  if (globalCS) {\n    for (const [name, descriptors] of Object.entries(globalCS)) {\n      parts.push(formatCounterStyleRule(name, descriptors));\n    }\n  }\n\n  return parts.join('\\n');\n}\n\n/**\n * Collect per-component ancillary CSS (keyframes, @property, font-face,\n * counter-style) for RSC mode.\n */\nfunction collectAncillaryRSC(rscCache: RSCStyleCache, styles: Styles): string {\n  const parts: string[] = [];\n\n  const usedKf = getUsedKeyframes(styles);\n  if (usedKf) {\n    for (const [name, steps] of Object.entries(usedKf)) {\n      const key = `__kf:${name}:${JSON.stringify(steps)}`;\n      if (!rscCache.emittedKeys.has(key)) {\n        rscCache.emittedKeys.add(key);\n        parts.push(formatKeyframesCSS(name, steps));\n      }\n    }\n  }\n\n  if (hasLocalProperties(styles)) {\n    const localProperties = extractLocalProperties(styles);\n    if (localProperties) {\n      for (const [token, definition] of Object.entries(localProperties)) {\n        const key = `__prop:${token}`;\n        if (!rscCache.emittedKeys.has(key)) {\n          rscCache.emittedKeys.add(key);\n          const css = formatPropertyCSS(token, definition);\n          if (css) parts.push(css);\n        }\n      }\n    }\n  }\n\n  if (hasLocalFontFace(styles)) {\n    const localFontFace = extractLocalFontFace(styles);\n    if (localFontFace) {\n      for (const [family, input] of Object.entries(localFontFace)) {\n        const descriptors: FontFaceDescriptors[] = Array.isArray(input)\n          ? input\n          : [input];\n        for (const desc of descriptors) {\n          const hash = fontFaceContentHash(family, desc);\n          const key = `__ff:${hash}`;\n          if (!rscCache.emittedKeys.has(key)) {\n            rscCache.emittedKeys.add(key);\n            parts.push(formatFontFaceRule(family, desc));\n          }\n        }\n      }\n    }\n  }\n\n  if (hasLocalCounterStyle(styles)) {\n    const localCounterStyle = extractLocalCounterStyle(styles);\n    if (localCounterStyle) {\n      for (const [name, descriptors] of Object.entries(localCounterStyle)) {\n        const key = `__cs:${name}:${JSON.stringify(descriptors)}`;\n        if (!rscCache.emittedKeys.has(key)) {\n          rscCache.emittedKeys.add(key);\n          parts.push(formatCounterStyleRule(name, descriptors));\n        }\n      }\n    }\n  }\n\n  return parts.join('\\n');\n}\n\n/**\n * Process all chunks in RSC mode: render CSS to strings, allocate classNames,\n * and return combined { className, css }.\n */\nfunction computeStylesRSC(\n  styles: Styles,\n  chunkMap: Map<string, string[]>,\n): ComputeStylesResult {\n  const rscCache = getRSCCache();\n  const cssParts: string[] = [];\n  const classNames: string[] = [];\n\n  // Flush CSS accumulated by standalone style functions\n  const pendingCSS = flushPendingCSS(rscCache);\n  if (pendingCSS) cssParts.push(pendingCSS);\n\n  const internalsCSS = collectInternalsRSC(rscCache);\n  if (internalsCSS) cssParts.push(internalsCSS);\n\n  for (const [chunkName, chunkStyleKeys] of chunkMap) {\n    if (chunkStyleKeys.length === 0) continue;\n\n    const cacheKey = generateChunkCacheKey(styles, chunkName, chunkStyleKeys);\n    const { className, isNew } = rscAllocateClassName(rscCache, cacheKey);\n    classNames.push(className);\n\n    if (isNew) {\n      const renderResult = renderStylesForChunk(\n        styles,\n        chunkName,\n        chunkStyleKeys,\n      );\n      if (renderResult.rules.length > 0) {\n        const css = formatRules(renderResult.rules, className);\n        if (css) cssParts.push(css);\n      }\n    }\n  }\n\n  const ancillaryCSS = collectAncillaryRSC(rscCache, styles);\n  if (ancillaryCSS) cssParts.push(ancillaryCSS);\n\n  if (classNames.length === 0) return EMPTY_RESULT;\n\n  const css = cssParts.join('\\n');\n\n  return {\n    className: classNames.join(' '),\n    css: css || undefined,\n  };\n}\n\n/**\n * Get keyframes that are actually used in styles.\n * Returns null if no keyframes are used (fast path for zero overhead).\n */\nfunction getUsedKeyframes(\n  styles: Styles,\n): Record<string, KeyframesSteps> | null {\n  const hasLocal = hasLocalKeyframes(styles);\n  const hasGlobal = hasGlobalKeyframes();\n  if (!hasLocal && !hasGlobal) return null;\n\n  const usedNames = extractAnimationNamesFromStyles(styles);\n  if (usedNames.size === 0) return null;\n\n  const local = hasLocal ? extractLocalKeyframes(styles) : null;\n  const global = hasGlobal ? getGlobalKeyframes() : null;\n  const allKeyframes = mergeKeyframes(local, global);\n\n  return filterUsedKeyframes(allKeyframes, usedNames);\n}\n\n/**\n * Process a chunk on the SSR path: allocate via collector, render, collect CSS.\n */\nfunction processChunkSSR(\n  collector: ServerStyleCollector,\n  styles: Styles,\n  chunkName: string,\n  styleKeys: string[],\n): ProcessedChunk | null {\n  if (styleKeys.length === 0) return null;\n\n  const cacheKey = generateChunkCacheKey(styles, chunkName, styleKeys);\n  const { className, isNewAllocation } = collector.allocateClassName(cacheKey);\n\n  if (isNewAllocation) {\n    const renderResult = renderStylesForChunk(styles, chunkName, styleKeys);\n    if (renderResult.rules.length > 0) {\n      collector.collectChunk(cacheKey, className, renderResult.rules);\n      return { name: chunkName, styleKeys, cacheKey, renderResult, className };\n    }\n    return null;\n  }\n\n  return {\n    name: chunkName,\n    styleKeys,\n    cacheKey,\n    renderResult: { rules: [] },\n    className,\n  };\n}\n\n/**\n * Process a chunk on the client: render, allocate className, and inject\n * CSS synchronously. The injector's cache makes this idempotent.\n */\nfunction processChunkSync(\n  styles: Styles,\n  chunkName: string,\n  styleKeys: string[],\n): ProcessedChunk | null {\n  if (styleKeys.length === 0) return null;\n\n  const cacheKey = generateChunkCacheKey(styles, chunkName, styleKeys);\n  const renderResult = renderStylesForChunk(\n    styles,\n    chunkName,\n    styleKeys,\n    cacheKey,\n  );\n  if (renderResult.rules.length === 0) return null;\n\n  const { className } = inject(renderResult.rules, { cacheKey });\n\n  return { name: chunkName, styleKeys, cacheKey, renderResult, className };\n}\n\n/**\n * Inject keyframes synchronously and return a name replacement map.\n * On the client, keyframes are injected into the DOM.\n */\nfunction injectKeyframesSync(\n  usedKeyframes: Record<string, KeyframesSteps>,\n): Map<string, string> | null {\n  let nameMap: Map<string, string> | null = null;\n\n  for (const [name, steps] of Object.entries(usedKeyframes)) {\n    const result = keyframes(steps, { name });\n    const injectedName = result.toString();\n    if (injectedName !== name) {\n      if (!nameMap) nameMap = new Map();\n      nameMap.set(name, injectedName);\n    }\n  }\n\n  return nameMap;\n}\n\n/**\n * Inject chunk rules synchronously, replacing animation names if needed.\n */\nfunction injectChunkRulesSync(\n  chunks: ProcessedChunk[],\n  nameMap: Map<string, string> | null,\n): void {\n  for (const chunk of chunks) {\n    if (chunk.renderResult.rules.length > 0) {\n      const rulesToInject: StyleResult[] = nameMap\n        ? chunk.renderResult.rules.map((rule) => ({\n            ...rule,\n            declarations: replaceAnimationNames(rule.declarations, nameMap!),\n          }))\n        : chunk.renderResult.rules;\n\n      inject(rulesToInject, { cacheKey: chunk.cacheKey });\n    }\n  }\n}\n\n/**\n * Inject all ancillary rules (properties, font-faces, counter-styles) synchronously.\n */\nfunction injectAncillarySync(styles: Styles): void {\n  if (hasLocalProperties(styles)) {\n    const localProperties = extractLocalProperties(styles);\n    if (localProperties) {\n      for (const [token, definition] of Object.entries(localProperties)) {\n        property(token, definition);\n      }\n    }\n  }\n\n  if (hasLocalFontFace(styles)) {\n    const localFontFace = extractLocalFontFace(styles);\n    if (localFontFace) {\n      for (const [family, input] of Object.entries(localFontFace)) {\n        const descriptors: FontFaceDescriptors[] = Array.isArray(input)\n          ? input\n          : [input];\n        for (const desc of descriptors) {\n          fontFace(family, desc);\n        }\n      }\n    }\n  }\n\n  if (hasLocalCounterStyle(styles)) {\n    const localCounterStyle = extractLocalCounterStyle(styles);\n    if (localCounterStyle) {\n      for (const [name, descriptors] of Object.entries(localCounterStyle)) {\n        counterStyle(name, descriptors);\n      }\n    }\n  }\n}\n\n/**\n * Collect all ancillary rules into the SSR collector.\n */\nfunction collectAncillarySSR(\n  collector: ServerStyleCollector,\n  styles: Styles,\n  chunks: ProcessedChunk[],\n): void {\n  const usedKf = getUsedKeyframes(styles);\n  if (usedKf) {\n    for (const [name, steps] of Object.entries(usedKf)) {\n      const css = formatKeyframesCSS(name, steps);\n      collector.collectKeyframes(name, css);\n    }\n  }\n\n  if (hasLocalProperties(styles)) {\n    const localProperties = extractLocalProperties(styles);\n    if (localProperties) {\n      for (const [token, definition] of Object.entries(localProperties)) {\n        const css = formatPropertyCSS(token, definition);\n        if (css) {\n          collector.collectProperty(token, css);\n        }\n      }\n    }\n  }\n\n  if (hasLocalFontFace(styles)) {\n    const localFontFace = extractLocalFontFace(styles);\n    if (localFontFace) {\n      for (const [family, input] of Object.entries(localFontFace)) {\n        const descriptors: FontFaceDescriptors[] = Array.isArray(input)\n          ? input\n          : [input];\n        for (const desc of descriptors) {\n          const hash = fontFaceContentHash(family, desc);\n          const css = formatFontFaceRule(family, desc);\n          collector.collectFontFace(hash, css);\n        }\n      }\n    }\n  }\n\n  if (hasLocalCounterStyle(styles)) {\n    const localCounterStyle = extractLocalCounterStyle(styles);\n    if (localCounterStyle) {\n      for (const [name, descriptors] of Object.entries(localCounterStyle)) {\n        const css = formatCounterStyleRule(name, descriptors);\n        collector.collectCounterStyle(name, css);\n      }\n    }\n  }\n\n  if (getConfig().autoPropertyTypes !== false) {\n    const allRules = chunks.flatMap((c) => c.renderResult.rules);\n    if (allRules.length > 0) {\n      collectAutoInferredProperties(allRules, collector, styles);\n    }\n  }\n}\n\n/**\n * Synchronous, hook-free style computation.\n *\n * Resolves recipes, categorizes style keys into chunks, renders CSS rules,\n * allocates class names, and injects / collects / returns the CSS.\n *\n * Three code paths:\n * 1. SSR collector — discovered via ALS or passed explicitly; CSS collected\n * 2. RSC inline — no collector and no `document`; CSS returned as `result.css`\n *    for the caller to emit as an inline `<style>` tag\n * 3. Client inject — CSS injected synchronously into the DOM (idempotent)\n *\n * @param styles - Tasty styles object (or undefined for no styles)\n * @param options - Optional SSR collector override\n */\nexport function computeStyles(\n  styles: Styles | undefined,\n  options?: ComputeStylesOptions,\n): ComputeStylesResult {\n  if (!styles || !hasKeys(styles as Record<string, unknown>)) {\n    return EMPTY_RESULT;\n  }\n\n  const resolved = resolveRecipes(styles);\n  const chunkMap = categorizeStyleKeys(resolved as Record<string, unknown>);\n\n  const collector =\n    options?.ssrCollector !== undefined\n      ? options.ssrCollector\n      : getRegisteredSSRCollector();\n\n  const chunks: ProcessedChunk[] = [];\n\n  if (collector) {\n    collector.collectInternals();\n\n    for (const [chunkName, chunkStyleKeys] of chunkMap) {\n      const chunk = processChunkSSR(\n        collector,\n        resolved,\n        chunkName,\n        chunkStyleKeys,\n      );\n      if (chunk) chunks.push(chunk);\n    }\n\n    collectAncillarySSR(collector, resolved, chunks);\n  } else if (typeof document === 'undefined') {\n    // RSC path: render CSS to strings for inline <style> emission\n    return computeStylesRSC(resolved, chunkMap);\n  } else {\n    injectAncillarySync(resolved);\n\n    const usedKf = getUsedKeyframes(resolved);\n    const nameMap = usedKf ? injectKeyframesSync(usedKf) : null;\n\n    for (const [chunkName, chunkStyleKeys] of chunkMap) {\n      const chunk = processChunkSync(resolved, chunkName, chunkStyleKeys);\n      if (chunk) chunks.push(chunk);\n    }\n\n    if (nameMap) {\n      injectChunkRulesSync(chunks, nameMap);\n    }\n\n    for (const chunk of chunks) {\n      touch(chunk.className);\n    }\n  }\n\n  if (chunks.length === 0) return EMPTY_RESULT;\n  if (chunks.length === 1) return { className: chunks[0].className };\n\n  return { className: chunks.map((c) => c.className).join(' ') };\n}\n"],"mappings":"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"}

package/dist/hooks/useCounterStyle.d.ts

@@ -29,24 +29,8 @@ interface UseCounterStyleOptions {
  * }
  * ```
  *
- * @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

@@ -1,48 +1,61 @@
 import { formatCounterStyleRule } from "../counter-style/index.js";
 import { getGlobalInjector } from "../config.js";
-import { getRSCCache, isServerEnvironment, pushRSCCSS } from "../rsc-cache.js";
-import { getRegisteredSSRCollector } from "../ssr/ssr-collector-ref.js";
+import { getStyleTarget, pushRSCCSS } from "../rsc-cache.js";
 //#region src/hooks/useCounterStyle.ts
 let clientCounterStyleCounter = 0;
 const clientContentToName = /* @__PURE__ */ new Map();
-const clientDepsCache = /* @__PURE__ */ new Map();
-function useCounterStyle(descriptorsOrFactory, depsOrOptions, options) {
-	const isFactory = typeof descriptorsOrFactory === "function";
-	const deps = isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : void 0;
-	const opts = isFactory ? options : depsOrOptions;
-	if (deps) {
-		const depsKey = JSON.stringify(deps);
-		const cached = clientDepsCache.get(depsKey);
-		if (cached !== void 0) return cached;
-	}
-	const descriptors = isFactory ? descriptorsOrFactory() : descriptorsOrFactory;
+/**
+* Inject a CSS @counter-style rule and return the generated name.
+* Permanent — no cleanup on unmount. Deduplicates by name.
+*
+* Works in all environments: client, SSR with collector, and React Server Components.
+*
+* @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>
+*   );
+* }
+* ```
+*
+*/
+function useCounterStyle(descriptors, options) {
 	if (!descriptors || !descriptors.system) return "";
-	const ssrCollector = getRegisteredSSRCollector();
-	if (ssrCollector) {
-		const actualName = ssrCollector.allocateCounterStyleName(opts?.name);
+	const target = getStyleTarget();
+	if (target.mode === "ssr") {
+		const actualName = target.collector.allocateCounterStyleName(options?.name);
 		const css = formatCounterStyleRule(actualName, descriptors);
-		ssrCollector.collectCounterStyle(actualName, css);
+		target.collector.collectCounterStyle(actualName, css);
 		return actualName;
 	}
-	if (isServerEnvironment()) {
-		const rscCache = getRSCCache();
-		const contentKey = JSON.stringify(descriptors);
-		const key = `__cs:${opts?.name ?? ""}:${contentKey}`;
-		const existingName = rscCache.generatedNames.get(key);
+	if (target.mode === "rsc") {
+		const serializedContent = JSON.stringify(descriptors);
+		const key = `__cs:${options?.name ?? ""}:${serializedContent}`;
+		const existingName = target.cache.generatedNames.get(key);
 		if (existingName) return existingName;
-		const actualName = opts?.name ?? `cs${rscCache.counterStyleCounter++}`;
-		pushRSCCSS(rscCache, key, formatCounterStyleRule(actualName, descriptors));
-		rscCache.generatedNames.set(key, actualName);
+		const actualName = options?.name ?? `cs${target.cache.counterStyleCounter++}`;
+		const css = formatCounterStyleRule(actualName, descriptors);
+		pushRSCCSS(target.cache, key, css);
+		target.cache.generatedNames.set(key, actualName);
 		return actualName;
 	}
-	const contentKey = JSON.stringify(descriptors);
-	const cacheKey = `${opts?.name ?? ""}:${contentKey}`;
+	const serializedContent = JSON.stringify(descriptors);
+	const cacheKey = `${options?.name ?? ""}:${serializedContent}`;
 	const existingName = clientContentToName.get(cacheKey);
 	if (existingName) return existingName;
-	const name = opts?.name ?? `cs${clientCounterStyleCounter++}`;
+	const name = options?.name ?? `cs${clientCounterStyleCounter++}`;
 	clientContentToName.set(cacheKey, name);
-	getGlobalInjector().counterStyle(name, descriptors, { root: opts?.root });
-	if (deps) clientDepsCache.set(JSON.stringify(deps), name);
+	getGlobalInjector().counterStyle(name, descriptors, { root: options?.root });
 	return name;
 }
 //#endregion

package/dist/hooks/useCounterStyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCounterStyle.js","names":[],"sources":["../../src/hooks/useCounterStyle.ts"],"sourcesContent":["import { getGlobalInjector } from '../config';\nimport { formatCounterStyleRule } from '../counter-style';\nimport type { CounterStyleDescriptors } from '../injector/types';\nimport { getRSCCache, isServerEnvironment, pushRSCCSS } from '../rsc-cache';\nimport { getRegisteredSSRCollector } from '../ssr/ssr-collector-ref';\n\ninterface UseCounterStyleOptions {\n  name?: string;\n  root?: Document | ShadowRoot;\n}\n\nlet clientCounterStyleCounter = 0;\n\nconst clientContentToName = new Map<string, string>();\nconst clientDepsCache = new Map<string, string>();\n\n/* @internal — used only for tests */\nexport function _resetCounterStyleCache(): void {\n  clientContentToName.clear();\n  clientDepsCache.clear();\n  clientCounterStyleCounter = 0;\n}\n\n/**\n * Inject a CSS @counter-style rule and return the generated name.\n * Permanent — no cleanup on unmount. Deduplicates by name.\n *\n * Works in all environments: client, SSR with collector, and React Server Components.\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 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  // Fast path: if deps haven't changed, return cached result\n  if (deps) {\n    const depsKey = JSON.stringify(deps);\n    const cached = clientDepsCache.get(depsKey);\n    if (cached !== undefined) return cached;\n  }\n\n  const descriptors = isFactory\n    ? (descriptorsOrFactory as () => CounterStyleDescriptors)()\n    : (descriptorsOrFactory as CounterStyleDescriptors);\n\n  if (!descriptors || !descriptors.system) {\n    return '';\n  }\n\n  const ssrCollector = getRegisteredSSRCollector();\n\n  if (ssrCollector) {\n    const actualName = ssrCollector.allocateCounterStyleName(opts?.name);\n    const css = formatCounterStyleRule(actualName, descriptors);\n    ssrCollector.collectCounterStyle(actualName, css);\n    return actualName;\n  }\n\n  if (isServerEnvironment()) {\n    const rscCache = getRSCCache();\n    const contentKey = JSON.stringify(descriptors);\n    const key = `__cs:${opts?.name ?? ''}:${contentKey}`;\n\n    const existingName = rscCache.generatedNames.get(key);\n    if (existingName) return existingName;\n\n    const actualName = opts?.name ?? `cs${rscCache.counterStyleCounter++}`;\n    const css = formatCounterStyleRule(actualName, descriptors);\n    pushRSCCSS(rscCache, key, css);\n    rscCache.generatedNames.set(key, actualName);\n    return actualName;\n  }\n\n  // Client path: stable name via content-based dedup\n  const contentKey = JSON.stringify(descriptors);\n  const cacheKey = `${opts?.name ?? ''}:${contentKey}`;\n\n  const existingName = clientContentToName.get(cacheKey);\n  if (existingName) {\n    return existingName;\n  }\n\n  const name = opts?.name ?? `cs${clientCounterStyleCounter++}`;\n  clientContentToName.set(cacheKey, name);\n\n  const injector = getGlobalInjector();\n  injector.counterStyle(name, descriptors, { root: opts?.root });\n\n  if (deps) {\n    clientDepsCache.set(JSON.stringify(deps), name);\n  }\n\n  return name;\n}\n"],"mappings":";;;;;AAWA,IAAI,4BAA4B;AAEhC,MAAM,sCAAsB,IAAI,KAAqB;AACrD,MAAM,kCAAkB,IAAI,KAAqB;AAgEjD,SAAgB,gBACd,sBAGA,eACA,SACQ;CACR,MAAM,YAAY,OAAO,yBAAyB;CAElD,MAAM,OACJ,aAAa,MAAM,QAAQ,cAAc,GAAG,gBAAgB,KAAA;CAC9D,MAAM,OAAO,YACT,UACC;AAGL,KAAI,MAAM;EACR,MAAM,UAAU,KAAK,UAAU,KAAK;EACpC,MAAM,SAAS,gBAAgB,IAAI,QAAQ;AAC3C,MAAI,WAAW,KAAA,EAAW,QAAO;;CAGnC,MAAM,cAAc,YACf,sBAAwD,GACxD;AAEL,KAAI,CAAC,eAAe,CAAC,YAAY,OAC/B,QAAO;CAGT,MAAM,eAAe,2BAA2B;AAEhD,KAAI,cAAc;EAChB,MAAM,aAAa,aAAa,yBAAyB,MAAM,KAAK;EACpE,MAAM,MAAM,uBAAuB,YAAY,YAAY;AAC3D,eAAa,oBAAoB,YAAY,IAAI;AACjD,SAAO;;AAGT,KAAI,qBAAqB,EAAE;EACzB,MAAM,WAAW,aAAa;EAC9B,MAAM,aAAa,KAAK,UAAU,YAAY;EAC9C,MAAM,MAAM,QAAQ,MAAM,QAAQ,GAAG,GAAG;EAExC,MAAM,eAAe,SAAS,eAAe,IAAI,IAAI;AACrD,MAAI,aAAc,QAAO;EAEzB,MAAM,aAAa,MAAM,QAAQ,KAAK,SAAS;AAE/C,aAAW,UAAU,KADT,uBAAuB,YAAY,YAAY,CAC7B;AAC9B,WAAS,eAAe,IAAI,KAAK,WAAW;AAC5C,SAAO;;CAIT,MAAM,aAAa,KAAK,UAAU,YAAY;CAC9C,MAAM,WAAW,GAAG,MAAM,QAAQ,GAAG,GAAG;CAExC,MAAM,eAAe,oBAAoB,IAAI,SAAS;AACtD,KAAI,aACF,QAAO;CAGT,MAAM,OAAO,MAAM,QAAQ,KAAK;AAChC,qBAAoB,IAAI,UAAU,KAAK;AAEtB,oBAAmB,CAC3B,aAAa,MAAM,aAAa,EAAE,MAAM,MAAM,MAAM,CAAC;AAE9D,KAAI,KACF,iBAAgB,IAAI,KAAK,UAAU,KAAK,EAAE,KAAK;AAGjD,QAAO"}
+{"version":3,"file":"useCounterStyle.js","names":[],"sources":["../../src/hooks/useCounterStyle.ts"],"sourcesContent":["import { getGlobalInjector } from '../config';\nimport { formatCounterStyleRule } from '../counter-style';\nimport type { CounterStyleDescriptors } from '../injector/types';\nimport { getStyleTarget, pushRSCCSS } from '../rsc-cache';\n\ninterface UseCounterStyleOptions {\n  name?: string;\n  root?: Document | ShadowRoot;\n}\n\nlet clientCounterStyleCounter = 0;\n\nconst clientContentToName = new Map<string, string>();\n\n/* @internal — used only for tests */\nexport function _resetCounterStyleCache(): void {\n  clientContentToName.clear();\n  clientCounterStyleCounter = 0;\n}\n\n/**\n * Inject a CSS @counter-style rule and return the generated name.\n * Permanent — no cleanup on unmount. Deduplicates by name.\n *\n * Works in all environments: client, SSR with collector, and React Server Components.\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 */\nexport function useCounterStyle(\n  descriptors: CounterStyleDescriptors,\n  options?: UseCounterStyleOptions,\n): string {\n  if (!descriptors || !descriptors.system) {\n    return '';\n  }\n\n  const target = getStyleTarget();\n\n  if (target.mode === 'ssr') {\n    const actualName = target.collector.allocateCounterStyleName(options?.name);\n    const css = formatCounterStyleRule(actualName, descriptors);\n    target.collector.collectCounterStyle(actualName, css);\n    return actualName;\n  }\n\n  if (target.mode === 'rsc') {\n    const serializedContent = JSON.stringify(descriptors);\n    const key = `__cs:${options?.name ?? ''}:${serializedContent}`;\n\n    const existingName = target.cache.generatedNames.get(key);\n    if (existingName) return existingName;\n\n    const actualName =\n      options?.name ?? `cs${target.cache.counterStyleCounter++}`;\n    const css = formatCounterStyleRule(actualName, descriptors);\n    pushRSCCSS(target.cache, key, css);\n    target.cache.generatedNames.set(key, actualName);\n    return actualName;\n  }\n\n  // Client path: stable name via content-based dedup\n  const serializedContent = JSON.stringify(descriptors);\n  const cacheKey = `${options?.name ?? ''}:${serializedContent}`;\n\n  const existingName = clientContentToName.get(cacheKey);\n  if (existingName) {\n    return existingName;\n  }\n\n  const name = options?.name ?? `cs${clientCounterStyleCounter++}`;\n  clientContentToName.set(cacheKey, name);\n\n  const injector = getGlobalInjector();\n  injector.counterStyle(name, descriptors, { root: options?.root });\n\n  return name;\n}\n"],"mappings":";;;;AAUA,IAAI,4BAA4B;AAEhC,MAAM,sCAAsB,IAAI,KAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCrD,SAAgB,gBACd,aACA,SACQ;AACR,KAAI,CAAC,eAAe,CAAC,YAAY,OAC/B,QAAO;CAGT,MAAM,SAAS,gBAAgB;AAE/B,KAAI,OAAO,SAAS,OAAO;EACzB,MAAM,aAAa,OAAO,UAAU,yBAAyB,SAAS,KAAK;EAC3E,MAAM,MAAM,uBAAuB,YAAY,YAAY;AAC3D,SAAO,UAAU,oBAAoB,YAAY,IAAI;AACrD,SAAO;;AAGT,KAAI,OAAO,SAAS,OAAO;EACzB,MAAM,oBAAoB,KAAK,UAAU,YAAY;EACrD,MAAM,MAAM,QAAQ,SAAS,QAAQ,GAAG,GAAG;EAE3C,MAAM,eAAe,OAAO,MAAM,eAAe,IAAI,IAAI;AACzD,MAAI,aAAc,QAAO;EAEzB,MAAM,aACJ,SAAS,QAAQ,KAAK,OAAO,MAAM;EACrC,MAAM,MAAM,uBAAuB,YAAY,YAAY;AAC3D,aAAW,OAAO,OAAO,KAAK,IAAI;AAClC,SAAO,MAAM,eAAe,IAAI,KAAK,WAAW;AAChD,SAAO;;CAIT,MAAM,oBAAoB,KAAK,UAAU,YAAY;CACrD,MAAM,WAAW,GAAG,SAAS,QAAQ,GAAG,GAAG;CAE3C,MAAM,eAAe,oBAAoB,IAAI,SAAS;AACtD,KAAI,aACF,QAAO;CAGT,MAAM,OAAO,SAAS,QAAQ,KAAK;AACnC,qBAAoB,IAAI,UAAU,KAAK;AAEtB,oBAAmB,CAC3B,aAAa,MAAM,aAAa,EAAE,MAAM,SAAS,MAAM,CAAC;AAEjE,QAAO"}

package/dist/hooks/useFontFace.js

@@ -1,7 +1,6 @@
 import { fontFaceContentHash, formatFontFaceRule } from "../font-face/index.js";
 import { getGlobalInjector } from "../config.js";
-import { getRSCCache, isServerEnvironment, pushRSCCSS } from "../rsc-cache.js";
-import { getRegisteredSSRCollector } from "../ssr/ssr-collector-ref.js";
+import { getStyleTarget, pushRSCCSS } from "../rsc-cache.js";
 //#region src/hooks/useFontFace.ts
 /**
 * Inject CSS @font-face rules.
@@ -41,21 +40,20 @@ import { getRegisteredSSRCollector } from "../ssr/ssr-collector-ref.js";
 function useFontFace(family, input, options) {
 	if (!family) return;
 	const descriptors = Array.isArray(input) ? input : [input];
-	const ssrCollector = getRegisteredSSRCollector();
-	if (ssrCollector) {
+	const target = getStyleTarget();
+	if (target.mode === "ssr") {
 		for (const desc of descriptors) {
 			const hash = fontFaceContentHash(family, desc);
 			const css = formatFontFaceRule(family, desc);
-			ssrCollector.collectFontFace(hash, css);
+			target.collector.collectFontFace(hash, css);
 		}
 		return;
 	}
-	if (isServerEnvironment()) {
-		const rscCache = getRSCCache();
+	if (target.mode === "rsc") {
 		for (const desc of descriptors) {
 			const hash = fontFaceContentHash(family, desc);
 			const css = formatFontFaceRule(family, desc);
-			pushRSCCSS(rscCache, `__ff:${hash}`, css);
+			pushRSCCSS(target.cache, `__ff:${hash}`, css);
 		}
 		return;
 	}

package/dist/hooks/useFontFace.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFontFace.js","names":[],"sources":["../../src/hooks/useFontFace.ts"],"sourcesContent":["import { getGlobalInjector } from '../config';\nimport { fontFaceContentHash, formatFontFaceRule } from '../font-face';\nimport type { FontFaceDescriptors, FontFaceInput } from '../injector/types';\nimport { getRSCCache, isServerEnvironment, pushRSCCSS } from '../rsc-cache';\nimport { getRegisteredSSRCollector } from '../ssr/ssr-collector-ref';\n\ninterface UseFontFaceOptions {\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Inject CSS @font-face rules.\n * Permanent — no cleanup on unmount. Deduplicates by content hash.\n *\n * Works in all environments: client, SSR with collector, and React Server Components.\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  if (!family) return;\n\n  const descriptors: FontFaceDescriptors[] = Array.isArray(input)\n    ? input\n    : [input];\n\n  const ssrCollector = getRegisteredSSRCollector();\n\n  if (ssrCollector) {\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    return;\n  }\n\n  if (isServerEnvironment()) {\n    const rscCache = getRSCCache();\n    for (const desc of descriptors) {\n      const hash = fontFaceContentHash(family, desc);\n      const css = formatFontFaceRule(family, desc);\n      pushRSCCSS(rscCache, `__ff:${hash}`, css);\n    }\n    return;\n  }\n\n  const injector = getGlobalInjector();\n  for (const desc of descriptors) {\n    injector.fontFace(family, desc, { root: options?.root });\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,SAAgB,YACd,QACA,OACA,SACM;AACN,KAAI,CAAC,OAAQ;CAEb,MAAM,cAAqC,MAAM,QAAQ,MAAM,GAC3D,QACA,CAAC,MAAM;CAEX,MAAM,eAAe,2BAA2B;AAEhD,KAAI,cAAc;AAChB,OAAK,MAAM,QAAQ,aAAa;GAC9B,MAAM,OAAO,oBAAoB,QAAQ,KAAK;GAC9C,MAAM,MAAM,mBAAmB,QAAQ,KAAK;AAC5C,gBAAa,gBAAgB,MAAM,IAAI;;AAEzC;;AAGF,KAAI,qBAAqB,EAAE;EACzB,MAAM,WAAW,aAAa;AAC9B,OAAK,MAAM,QAAQ,aAAa;GAC9B,MAAM,OAAO,oBAAoB,QAAQ,KAAK;GAC9C,MAAM,MAAM,mBAAmB,QAAQ,KAAK;AAC5C,cAAW,UAAU,QAAQ,QAAQ,IAAI;;AAE3C;;CAGF,MAAM,WAAW,mBAAmB;AACpC,MAAK,MAAM,QAAQ,YACjB,UAAS,SAAS,QAAQ,MAAM,EAAE,MAAM,SAAS,MAAM,CAAC"}
+{"version":3,"file":"useFontFace.js","names":[],"sources":["../../src/hooks/useFontFace.ts"],"sourcesContent":["import { getGlobalInjector } from '../config';\nimport { fontFaceContentHash, formatFontFaceRule } from '../font-face';\nimport type { FontFaceDescriptors, FontFaceInput } from '../injector/types';\nimport { getStyleTarget, pushRSCCSS } from '../rsc-cache';\n\ninterface UseFontFaceOptions {\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Inject CSS @font-face rules.\n * Permanent — no cleanup on unmount. Deduplicates by content hash.\n *\n * Works in all environments: client, SSR with collector, and React Server Components.\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  if (!family) return;\n\n  const descriptors: FontFaceDescriptors[] = Array.isArray(input)\n    ? input\n    : [input];\n\n  const target = getStyleTarget();\n\n  if (target.mode === 'ssr') {\n    for (const desc of descriptors) {\n      const hash = fontFaceContentHash(family, desc);\n      const css = formatFontFaceRule(family, desc);\n      target.collector.collectFontFace(hash, css);\n    }\n    return;\n  }\n\n  if (target.mode === 'rsc') {\n    for (const desc of descriptors) {\n      const hash = fontFaceContentHash(family, desc);\n      const css = formatFontFaceRule(family, desc);\n      pushRSCCSS(target.cache, `__ff:${hash}`, css);\n    }\n    return;\n  }\n\n  const injector = getGlobalInjector();\n  for (const desc of descriptors) {\n    injector.fontFace(family, desc, { root: options?.root });\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,SAAgB,YACd,QACA,OACA,SACM;AACN,KAAI,CAAC,OAAQ;CAEb,MAAM,cAAqC,MAAM,QAAQ,MAAM,GAC3D,QACA,CAAC,MAAM;CAEX,MAAM,SAAS,gBAAgB;AAE/B,KAAI,OAAO,SAAS,OAAO;AACzB,OAAK,MAAM,QAAQ,aAAa;GAC9B,MAAM,OAAO,oBAAoB,QAAQ,KAAK;GAC9C,MAAM,MAAM,mBAAmB,QAAQ,KAAK;AAC5C,UAAO,UAAU,gBAAgB,MAAM,IAAI;;AAE7C;;AAGF,KAAI,OAAO,SAAS,OAAO;AACzB,OAAK,MAAM,QAAQ,aAAa;GAC9B,MAAM,OAAO,oBAAoB,QAAQ,KAAK;GAC9C,MAAM,MAAM,mBAAmB,QAAQ,KAAK;AAC5C,cAAW,OAAO,OAAO,QAAQ,QAAQ,IAAI;;AAE/C;;CAGF,MAAM,WAAW,mBAAmB;AACpC,MAAK,MAAM,QAAQ,YACjB,UAAS,SAAS,QAAQ,MAAM,EAAE,MAAM,SAAS,MAAM,CAAC"}

package/dist/hooks/useGlobalStyles.d.ts

@@ -3,9 +3,10 @@ import { Styles } from "../styles/types.js";
 //#region src/hooks/useGlobalStyles.d.ts
 interface UseGlobalStylesOptions {
   /**
-   * Stable identifier for update tracking. When provided, changing the styles
-   * will dispose the previous injection and inject the new one.
-   * Without an id, the selector is used as the slot key.
+   * Stable identifier for update tracking (client-only). When provided,
+   * changing the styles will dispose the previous injection and inject the
+   * new one. Without an id, the selector is used as the slot key.
+   * In RSC mode, renders are single-pass so update tracking does not apply.
    */
   id?: string;
 }

package/dist/hooks/useGlobalStyles.js

@@ -1,10 +1,9 @@
 import { renderStyles } from "../pipeline/index.js";
 import { getConfig } from "../config.js";
 import { injectGlobal } from "../injector/index.js";
-import { getRSCCache, isServerEnvironment, pushRSCCSS } from "../rsc-cache.js";
+import { getStyleTarget, pushRSCCSS } from "../rsc-cache.js";
 import { collectAutoInferredProperties, collectAutoInferredPropertiesRSC } from "../ssr/collect-auto-properties.js";
 import { formatGlobalRules } from "../ssr/format-global-rules.js";
-import { getRegisteredSSRCollector } from "../ssr/ssr-collector-ref.js";
 import { resolveRecipes } from "../utils/resolve-recipes.js";
 import { hashString } from "../utils/hash.js";
 //#region src/hooks/useGlobalStyles.ts
@@ -45,9 +44,8 @@ function useGlobalStyles(selector, styles, options) {
 		console.warn("[Tasty] useGlobalStyles: selector is required and cannot be empty. Styles will not be injected.");
 		return;
 	}
-	const ssrCollector = getRegisteredSSRCollector();
-	const isServer = !ssrCollector && isServerEnvironment();
-	if (!ssrCollector && !isServer) {
+	const target = getStyleTarget();
+	if (target.mode === "client") {
 		const slotKey = options?.id ?? selector;
 		const stylesKey = JSON.stringify(styles);
 		const existing = clientGlobalEntries.get(slotKey);
@@ -56,30 +54,31 @@ function useGlobalStyles(selector, styles, options) {
 	const resolvedStyles = resolveRecipes(styles);
 	const styleResults = renderStyles(resolvedStyles, selector);
 	if (styleResults.length === 0) return;
-	if (ssrCollector) {
-		ssrCollector.collectInternals();
+	if (target.mode === "ssr") {
+		target.collector.collectInternals();
 		const css = formatGlobalRules(styleResults);
 		if (css) {
-			const key = `global:${selector}:${hashString(css)}`;
-			ssrCollector.collectGlobalStyles(key, css);
+			const key = options?.id ? `global:${options.id}` : `global:${selector}:${hashString(css)}`;
+			target.collector.collectGlobalStyles(key, css);
 		}
-		if (getConfig().autoPropertyTypes !== false) collectAutoInferredProperties(styleResults, ssrCollector, resolvedStyles);
+		if (getConfig().autoPropertyTypes !== false) collectAutoInferredProperties(styleResults, target.collector, resolvedStyles);
 		return;
 	}
-	if (isServer) {
-		const rscCache = getRSCCache();
+	if (target.mode === "rsc") {
 		const css = formatGlobalRules(styleResults);
-		if (css) pushRSCCSS(rscCache, options?.id ? `__global:${options.id}` : `__global:${selector}:${hashString(css)}`, css);
-		if (getConfig().autoPropertyTypes !== false) collectAutoInferredPropertiesRSC(styleResults, rscCache, resolvedStyles);
+		if (css) {
+			const key = options?.id ? `__global:${options.id}` : `__global:${selector}:${hashString(css)}`;
+			pushRSCCSS(target.cache, key, css);
+		}
+		if (getConfig().autoPropertyTypes !== false) collectAutoInferredPropertiesRSC(styleResults, target.cache, resolvedStyles);
 		return;
 	}
 	const slotKey = options?.id ?? selector;
-	const stylesKey = JSON.stringify(styles);
 	const existing = clientGlobalEntries.get(slotKey);
 	if (existing) existing.dispose();
 	const { dispose } = injectGlobal(styleResults);
 	clientGlobalEntries.set(slotKey, {
-		stylesKey,
+		stylesKey: JSON.stringify(styles),
 		dispose
 	});
 }

package/dist/hooks/useGlobalStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGlobalStyles.js","names":[],"sources":["../../src/hooks/useGlobalStyles.ts"],"sourcesContent":["import { getConfig } from '../config';\nimport { injectGlobal } from '../injector';\nimport type { StyleResult } from '../pipeline';\nimport { renderStyles } from '../pipeline';\nimport { getRSCCache, isServerEnvironment, pushRSCCSS } from '../rsc-cache';\nimport {\n  collectAutoInferredProperties,\n  collectAutoInferredPropertiesRSC,\n} from '../ssr/collect-auto-properties';\nimport { formatGlobalRules } from '../ssr/format-global-rules';\nimport { getRegisteredSSRCollector } from '../ssr/ssr-collector-ref';\nimport type { Styles } from '../styles/types';\nimport { hashString } from '../utils/hash';\nimport { resolveRecipes } from '../utils/resolve-recipes';\n\ninterface UseGlobalStylesOptions {\n  /**\n   * Stable identifier for update tracking. When provided, changing the styles\n   * will dispose the previous injection and inject the new one.\n   * Without an id, the selector is used as the slot key.\n   */\n  id?: string;\n}\n\ninterface ClientGlobalEntry {\n  stylesKey: string;\n  dispose: () => void;\n}\n\nconst clientGlobalEntries = new Map<string, ClientGlobalEntry>();\n\n/* @internal — used only for tests */\nexport function _resetGlobalStylesCache(): void {\n  clientGlobalEntries.clear();\n}\n\n/**\n * 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 * Works in all environments: client, SSR with collector, and React Server Components.\n *\n * Injected styles are permanent — they are not cleaned up on component unmount.\n * Use the `id` option for update tracking when styles change over the\n * component lifecycle.\n *\n * @param selector - CSS selector to apply styles to (e.g., '.my-class', ':root', 'body')\n * @param styles - Tasty styles object\n * @param options - Optional settings including `id` for update tracking\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(\n  selector: string,\n  styles?: Styles,\n  options?: UseGlobalStylesOptions,\n): void {\n  if (!styles) 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 ssrCollector = getRegisteredSSRCollector();\n  const isServer = !ssrCollector && isServerEnvironment();\n\n  // Client fast path: skip resolveRecipes/renderStyles if styles haven't changed\n  if (!ssrCollector && !isServer) {\n    const slotKey = options?.id ?? selector;\n    const stylesKey = JSON.stringify(styles);\n    const existing = clientGlobalEntries.get(slotKey);\n    if (existing && existing.stylesKey === stylesKey) return;\n  }\n\n  const resolvedStyles = resolveRecipes(styles);\n\n  const styleResults = renderStyles(resolvedStyles, selector) as StyleResult[];\n\n  if (styleResults.length === 0) return;\n\n  if (ssrCollector) {\n    ssrCollector.collectInternals();\n\n    const css = formatGlobalRules(styleResults);\n    if (css) {\n      const key = `global:${selector}:${hashString(css)}`;\n      ssrCollector.collectGlobalStyles(key, css);\n    }\n\n    if (getConfig().autoPropertyTypes !== false) {\n      collectAutoInferredProperties(styleResults, ssrCollector, resolvedStyles);\n    }\n    return;\n  }\n\n  if (isServer) {\n    const rscCache = getRSCCache();\n    const css = formatGlobalRules(styleResults);\n    if (css) {\n      const key = options?.id\n        ? `__global:${options.id}`\n        : `__global:${selector}:${hashString(css)}`;\n      pushRSCCSS(rscCache, key, css);\n    }\n\n    if (getConfig().autoPropertyTypes !== false) {\n      collectAutoInferredPropertiesRSC(styleResults, rscCache, resolvedStyles);\n    }\n    return;\n  }\n\n  // Client path\n  const slotKey = options?.id ?? selector;\n  const stylesKey = JSON.stringify(styles);\n\n  const existing = clientGlobalEntries.get(slotKey);\n  if (existing) {\n    existing.dispose();\n  }\n\n  const { dispose } = injectGlobal(styleResults);\n  clientGlobalEntries.set(slotKey, { stylesKey, dispose });\n}\n"],"mappings":";;;;;;;;;;AA6BA,MAAM,sCAAsB,IAAI,KAAgC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqChE,SAAgB,gBACd,UACA,QACA,SACM;AACN,KAAI,CAAC,OAAQ;AAEb,KAAI,CAAC,UAAU;AAEX,UAAQ,KACN,kGAED;AAEH;;CAGF,MAAM,eAAe,2BAA2B;CAChD,MAAM,WAAW,CAAC,gBAAgB,qBAAqB;AAGvD,KAAI,CAAC,gBAAgB,CAAC,UAAU;EAC9B,MAAM,UAAU,SAAS,MAAM;EAC/B,MAAM,YAAY,KAAK,UAAU,OAAO;EACxC,MAAM,WAAW,oBAAoB,IAAI,QAAQ;AACjD,MAAI,YAAY,SAAS,cAAc,UAAW;;CAGpD,MAAM,iBAAiB,eAAe,OAAO;CAE7C,MAAM,eAAe,aAAa,gBAAgB,SAAS;AAE3D,KAAI,aAAa,WAAW,EAAG;AAE/B,KAAI,cAAc;AAChB,eAAa,kBAAkB;EAE/B,MAAM,MAAM,kBAAkB,aAAa;AAC3C,MAAI,KAAK;GACP,MAAM,MAAM,UAAU,SAAS,GAAG,WAAW,IAAI;AACjD,gBAAa,oBAAoB,KAAK,IAAI;;AAG5C,MAAI,WAAW,CAAC,sBAAsB,MACpC,+BAA8B,cAAc,cAAc,eAAe;AAE3E;;AAGF,KAAI,UAAU;EACZ,MAAM,WAAW,aAAa;EAC9B,MAAM,MAAM,kBAAkB,aAAa;AAC3C,MAAI,IAIF,YAAW,UAHC,SAAS,KACjB,YAAY,QAAQ,OACpB,YAAY,SAAS,GAAG,WAAW,IAAI,IACjB,IAAI;AAGhC,MAAI,WAAW,CAAC,sBAAsB,MACpC,kCAAiC,cAAc,UAAU,eAAe;AAE1E;;CAIF,MAAM,UAAU,SAAS,MAAM;CAC/B,MAAM,YAAY,KAAK,UAAU,OAAO;CAExC,MAAM,WAAW,oBAAoB,IAAI,QAAQ;AACjD,KAAI,SACF,UAAS,SAAS;CAGpB,MAAM,EAAE,YAAY,aAAa,aAAa;AAC9C,qBAAoB,IAAI,SAAS;EAAE;EAAW;EAAS,CAAC"}
+{"version":3,"file":"useGlobalStyles.js","names":[],"sources":["../../src/hooks/useGlobalStyles.ts"],"sourcesContent":["import { getConfig } from '../config';\nimport { injectGlobal } from '../injector';\nimport type { StyleResult } from '../pipeline';\nimport { renderStyles } from '../pipeline';\nimport { getStyleTarget, pushRSCCSS } from '../rsc-cache';\nimport {\n  collectAutoInferredProperties,\n  collectAutoInferredPropertiesRSC,\n} from '../ssr/collect-auto-properties';\nimport { formatGlobalRules } from '../ssr/format-global-rules';\nimport type { Styles } from '../styles/types';\nimport { hashString } from '../utils/hash';\nimport { resolveRecipes } from '../utils/resolve-recipes';\n\ninterface UseGlobalStylesOptions {\n  /**\n   * Stable identifier for update tracking (client-only). When provided,\n   * changing the styles will dispose the previous injection and inject the\n   * new one. Without an id, the selector is used as the slot key.\n   * In RSC mode, renders are single-pass so update tracking does not apply.\n   */\n  id?: string;\n}\n\ninterface ClientGlobalEntry {\n  stylesKey: string;\n  dispose: () => void;\n}\n\nconst clientGlobalEntries = new Map<string, ClientGlobalEntry>();\n\n/* @internal — used only for tests */\nexport function _resetGlobalStylesCache(): void {\n  clientGlobalEntries.clear();\n}\n\n/**\n * 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 * Works in all environments: client, SSR with collector, and React Server Components.\n *\n * Injected styles are permanent — they are not cleaned up on component unmount.\n * Use the `id` option for update tracking when styles change over the\n * component lifecycle.\n *\n * @param selector - CSS selector to apply styles to (e.g., '.my-class', ':root', 'body')\n * @param styles - Tasty styles object\n * @param options - Optional settings including `id` for update tracking\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(\n  selector: string,\n  styles?: Styles,\n  options?: UseGlobalStylesOptions,\n): void {\n  if (!styles) 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 target = getStyleTarget();\n\n  // Client fast path: skip resolveRecipes/renderStyles if styles haven't changed\n  if (target.mode === 'client') {\n    const slotKey = options?.id ?? selector;\n    const stylesKey = JSON.stringify(styles);\n    const existing = clientGlobalEntries.get(slotKey);\n    if (existing && existing.stylesKey === stylesKey) return;\n  }\n\n  const resolvedStyles = resolveRecipes(styles);\n\n  const styleResults = renderStyles(resolvedStyles, selector) as StyleResult[];\n\n  if (styleResults.length === 0) return;\n\n  if (target.mode === 'ssr') {\n    target.collector.collectInternals();\n\n    const css = formatGlobalRules(styleResults);\n    if (css) {\n      const key = options?.id\n        ? `global:${options.id}`\n        : `global:${selector}:${hashString(css)}`;\n      target.collector.collectGlobalStyles(key, css);\n    }\n\n    if (getConfig().autoPropertyTypes !== false) {\n      collectAutoInferredProperties(\n        styleResults,\n        target.collector,\n        resolvedStyles,\n      );\n    }\n    return;\n  }\n\n  if (target.mode === 'rsc') {\n    const css = formatGlobalRules(styleResults);\n    if (css) {\n      const key = options?.id\n        ? `__global:${options.id}`\n        : `__global:${selector}:${hashString(css)}`;\n      pushRSCCSS(target.cache, key, css);\n    }\n\n    if (getConfig().autoPropertyTypes !== false) {\n      collectAutoInferredPropertiesRSC(\n        styleResults,\n        target.cache,\n        resolvedStyles,\n      );\n    }\n    return;\n  }\n\n  // Client path\n  const slotKey = options?.id ?? selector;\n\n  const existing = clientGlobalEntries.get(slotKey);\n  if (existing) {\n    existing.dispose();\n  }\n\n  const { dispose } = injectGlobal(styleResults);\n  clientGlobalEntries.set(slotKey, {\n    stylesKey: JSON.stringify(styles),\n    dispose,\n  });\n}\n"],"mappings":";;;;;;;;;AA6BA,MAAM,sCAAsB,IAAI,KAAgC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqChE,SAAgB,gBACd,UACA,QACA,SACM;AACN,KAAI,CAAC,OAAQ;AAEb,KAAI,CAAC,UAAU;AAEX,UAAQ,KACN,kGAED;AAEH;;CAGF,MAAM,SAAS,gBAAgB;AAG/B,KAAI,OAAO,SAAS,UAAU;EAC5B,MAAM,UAAU,SAAS,MAAM;EAC/B,MAAM,YAAY,KAAK,UAAU,OAAO;EACxC,MAAM,WAAW,oBAAoB,IAAI,QAAQ;AACjD,MAAI,YAAY,SAAS,cAAc,UAAW;;CAGpD,MAAM,iBAAiB,eAAe,OAAO;CAE7C,MAAM,eAAe,aAAa,gBAAgB,SAAS;AAE3D,KAAI,aAAa,WAAW,EAAG;AAE/B,KAAI,OAAO,SAAS,OAAO;AACzB,SAAO,UAAU,kBAAkB;EAEnC,MAAM,MAAM,kBAAkB,aAAa;AAC3C,MAAI,KAAK;GACP,MAAM,MAAM,SAAS,KACjB,UAAU,QAAQ,OAClB,UAAU,SAAS,GAAG,WAAW,IAAI;AACzC,UAAO,UAAU,oBAAoB,KAAK,IAAI;;AAGhD,MAAI,WAAW,CAAC,sBAAsB,MACpC,+BACE,cACA,OAAO,WACP,eACD;AAEH;;AAGF,KAAI,OAAO,SAAS,OAAO;EACzB,MAAM,MAAM,kBAAkB,aAAa;AAC3C,MAAI,KAAK;GACP,MAAM,MAAM,SAAS,KACjB,YAAY,QAAQ,OACpB,YAAY,SAAS,GAAG,WAAW,IAAI;AAC3C,cAAW,OAAO,OAAO,KAAK,IAAI;;AAGpC,MAAI,WAAW,CAAC,sBAAsB,MACpC,kCACE,cACA,OAAO,OACP,eACD;AAEH;;CAIF,MAAM,UAAU,SAAS,MAAM;CAE/B,MAAM,WAAW,oBAAoB,IAAI,QAAQ;AACjD,KAAI,SACF,UAAS,SAAS;CAGpB,MAAM,EAAE,YAAY,aAAa,aAAa;AAC9C,qBAAoB,IAAI,SAAS;EAC/B,WAAW,KAAK,UAAU,OAAO;EACjC;EACD,CAAC"}

package/dist/hooks/useKeyframes.js

@@ -1,41 +1,40 @@
 import { keyframes } from "../injector/index.js";
-import { getRSCCache, isServerEnvironment, pushRSCCSS } from "../rsc-cache.js";
+import { getStyleTarget, pushRSCCSS } from "../rsc-cache.js";
 import { formatKeyframesCSS } from "../ssr/format-keyframes.js";
-import { getRegisteredSSRCollector } from "../ssr/ssr-collector-ref.js";
+import { depsEqual } from "../utils/deps-equal.js";
 //#region src/hooks/useKeyframes.ts
 const clientContentToName = /* @__PURE__ */ new Map();
-const clientDepsCache = /* @__PURE__ */ new Map();
+const factoryDepsCache = /* @__PURE__ */ new Map();
 function useKeyframes(stepsOrFactory, depsOrOptions, options) {
 	const isFactory = typeof stepsOrFactory === "function";
 	const deps = isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : void 0;
 	const opts = isFactory ? options : depsOrOptions;
-	if (deps) {
-		const depsKey = JSON.stringify(deps);
-		const cached = clientDepsCache.get(depsKey);
-		if (cached !== void 0) return cached;
+	const target = getStyleTarget();
+	if (isFactory && deps && opts?.name && target.mode === "client") {
+		const cached = factoryDepsCache.get(opts.name);
+		if (cached && depsEqual(cached.deps, deps)) return cached.name;
 	}
 	const steps = isFactory ? stepsOrFactory() : stepsOrFactory;
 	if (!steps || Object.keys(steps).length === 0) return "";
-	const ssrCollector = getRegisteredSSRCollector();
-	if (ssrCollector) {
-		const actualName = ssrCollector.allocateKeyframeName(opts?.name);
+	if (target.mode === "ssr") {
+		const actualName = target.collector.allocateKeyframeName(opts?.name);
 		const css = formatKeyframesCSS(actualName, steps);
-		ssrCollector.collectKeyframes(actualName, css);
+		target.collector.collectKeyframes(actualName, css);
 		return actualName;
 	}
-	if (isServerEnvironment()) {
-		const rscCache = getRSCCache();
-		const contentHash = JSON.stringify(steps);
-		const key = `__kf:${opts?.name ?? ""}:${contentHash}`;
-		const existingName = rscCache.generatedNames.get(key);
+	if (target.mode === "rsc") {
+		const serializedContent = JSON.stringify(steps);
+		const key = `__kf:${opts?.name ?? ""}:${serializedContent}`;
+		const existingName = target.cache.generatedNames.get(key);
 		if (existingName) return existingName;
-		const actualName = opts?.name ?? `k${rscCache.keyframesCounter++}`;
-		pushRSCCSS(rscCache, key, formatKeyframesCSS(actualName, steps));
-		rscCache.generatedNames.set(key, actualName);
+		const actualName = opts?.name ?? `k${target.cache.keyframesCounter++}`;
+		const css = formatKeyframesCSS(actualName, steps);
+		pushRSCCSS(target.cache, key, css);
+		target.cache.generatedNames.set(key, actualName);
 		return actualName;
 	}
-	const contentHash = JSON.stringify(steps);
-	const cacheKey = `${opts?.name ?? ""}:${contentHash}`;
+	const serializedContent = JSON.stringify(steps);
+	const cacheKey = `${opts?.name ?? ""}:${serializedContent}`;
 	const cachedName = clientContentToName.get(cacheKey);
 	if (cachedName) return cachedName;
 	const name = keyframes(steps, {
@@ -43,7 +42,10 @@ function useKeyframes(stepsOrFactory, depsOrOptions, options) {
 		root: opts?.root
 	}).toString();
 	clientContentToName.set(cacheKey, name);
-	if (deps) clientDepsCache.set(JSON.stringify(deps), name);
+	if (deps && opts?.name) factoryDepsCache.set(opts.name, {
+		deps,
+		name
+	});
 	return name;
 }
 //#endregion

package/dist/hooks/useKeyframes.js.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyframes.js","names":[],"sources":["../../src/hooks/useKeyframes.ts"],"sourcesContent":["import { keyframes } from '../injector';\nimport type { KeyframesSteps } from '../injector/types';\nimport { getRSCCache, isServerEnvironment, pushRSCCSS } from '../rsc-cache';\nimport { formatKeyframesCSS } from '../ssr/format-keyframes';\nimport { getRegisteredSSRCollector } from '../ssr/ssr-collector-ref';\n\ninterface UseKeyframesOptions {\n  name?: string;\n  root?: Document | ShadowRoot;\n}\n\nconst clientContentToName = new Map<string, string>();\nconst clientDepsCache = new Map<string, string>();\n\n/* @internal — used only for tests */\nexport function _resetKeyframesCache(): void {\n  clientContentToName.clear();\n  clientDepsCache.clear();\n}\n\n/**\n * Inject CSS @keyframes and return the generated animation name.\n * Deduplicates by content — identical steps always return the same name.\n *\n * Works in all environments: client, SSR with collector, and React Server Components.\n *\n * @example Basic usage - steps object is the dependency\n * ```tsx\n * function MyComponent() {\n *   const bounce = useKeyframes({\n *     '0%': { transform: 'scale(1)' },\n *     '50%': { transform: 'scale(1.1)' },\n *     '100%': { transform: 'scale(1)' },\n *   });\n *\n *   return <div style={{ animation: `${bounce} 1s infinite` }}>Bouncing</div>;\n * }\n * ```\n *\n * @example With custom name\n * ```tsx\n * function MyComponent() {\n *   const fadeIn = useKeyframes(\n *     { from: { opacity: 0 }, to: { opacity: 1 } },\n *     { name: 'fadeIn' }\n *   );\n *\n *   return <div style={{ animation: `${fadeIn} 0.3s ease-out` }}>Fading in</div>;\n * }\n * ```\n *\n * @example Factory function with dependencies\n * ```tsx\n * function MyComponent({ scale }: { scale: number }) {\n *   const pulse = useKeyframes(\n *     () => ({\n *       '0%': { transform: 'scale(1)' },\n *       '100%': { transform: `scale(${scale})` },\n *     }),\n *     [scale]\n *   );\n *\n *   return <div style={{ animation: `${pulse} 1s infinite` }}>Pulsing</div>;\n * }\n * ```\n */\n\n// Overload 1: Static steps object\nexport function useKeyframes(\n  steps: KeyframesSteps,\n  options?: UseKeyframesOptions,\n): string;\n\n// Overload 2: Factory function with dependencies\nexport function useKeyframes(\n  factory: () => KeyframesSteps,\n  deps: readonly unknown[],\n  options?: UseKeyframesOptions,\n): string;\n\n// Implementation\nexport function useKeyframes(\n  stepsOrFactory: KeyframesSteps | (() => KeyframesSteps),\n  depsOrOptions?: readonly unknown[] | UseKeyframesOptions,\n  options?: UseKeyframesOptions,\n): string {\n  const isFactory = typeof stepsOrFactory === 'function';\n\n  const deps =\n    isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : undefined;\n  const opts = isFactory\n    ? options\n    : (depsOrOptions as UseKeyframesOptions | undefined);\n\n  // Fast path: if deps haven't changed, return cached result\n  if (deps) {\n    const depsKey = JSON.stringify(deps);\n    const cached = clientDepsCache.get(depsKey);\n    if (cached !== undefined) return cached;\n  }\n\n  const steps = isFactory\n    ? (stepsOrFactory as () => KeyframesSteps)()\n    : (stepsOrFactory as KeyframesSteps);\n\n  if (!steps || Object.keys(steps).length === 0) {\n    return '';\n  }\n\n  const ssrCollector = getRegisteredSSRCollector();\n\n  if (ssrCollector) {\n    const actualName = ssrCollector.allocateKeyframeName(opts?.name);\n    const css = formatKeyframesCSS(actualName, steps);\n    ssrCollector.collectKeyframes(actualName, css);\n    return actualName;\n  }\n\n  if (isServerEnvironment()) {\n    const rscCache = getRSCCache();\n    const contentHash = JSON.stringify(steps);\n    const key = `__kf:${opts?.name ?? ''}:${contentHash}`;\n\n    const existingName = rscCache.generatedNames.get(key);\n    if (existingName) return existingName;\n\n    const actualName = opts?.name ?? `k${rscCache.keyframesCounter++}`;\n    const css = formatKeyframesCSS(actualName, steps);\n    pushRSCCSS(rscCache, key, css);\n    rscCache.generatedNames.set(key, actualName);\n    return actualName;\n  }\n\n  // Client path: stable name via content-based dedup\n  const contentHash = JSON.stringify(steps);\n  const cacheKey = `${opts?.name ?? ''}:${contentHash}`;\n\n  const cachedName = clientContentToName.get(cacheKey);\n  if (cachedName) {\n    return cachedName;\n  }\n\n  const result = keyframes(steps, {\n    name: opts?.name,\n    root: opts?.root,\n  });\n\n  const name = result.toString();\n  clientContentToName.set(cacheKey, name);\n\n  if (deps) {\n    clientDepsCache.set(JSON.stringify(deps), name);\n  }\n\n  return name;\n}\n"],"mappings":";;;;;AAWA,MAAM,sCAAsB,IAAI,KAAqB;AACrD,MAAM,kCAAkB,IAAI,KAAqB;AAqEjD,SAAgB,aACd,gBACA,eACA,SACQ;CACR,MAAM,YAAY,OAAO,mBAAmB;CAE5C,MAAM,OACJ,aAAa,MAAM,QAAQ,cAAc,GAAG,gBAAgB,KAAA;CAC9D,MAAM,OAAO,YACT,UACC;AAGL,KAAI,MAAM;EACR,MAAM,UAAU,KAAK,UAAU,KAAK;EACpC,MAAM,SAAS,gBAAgB,IAAI,QAAQ;AAC3C,MAAI,WAAW,KAAA,EAAW,QAAO;;CAGnC,MAAM,QAAQ,YACT,gBAAyC,GACzC;AAEL,KAAI,CAAC,SAAS,OAAO,KAAK,MAAM,CAAC,WAAW,EAC1C,QAAO;CAGT,MAAM,eAAe,2BAA2B;AAEhD,KAAI,cAAc;EAChB,MAAM,aAAa,aAAa,qBAAqB,MAAM,KAAK;EAChE,MAAM,MAAM,mBAAmB,YAAY,MAAM;AACjD,eAAa,iBAAiB,YAAY,IAAI;AAC9C,SAAO;;AAGT,KAAI,qBAAqB,EAAE;EACzB,MAAM,WAAW,aAAa;EAC9B,MAAM,cAAc,KAAK,UAAU,MAAM;EACzC,MAAM,MAAM,QAAQ,MAAM,QAAQ,GAAG,GAAG;EAExC,MAAM,eAAe,SAAS,eAAe,IAAI,IAAI;AACrD,MAAI,aAAc,QAAO;EAEzB,MAAM,aAAa,MAAM,QAAQ,IAAI,SAAS;AAE9C,aAAW,UAAU,KADT,mBAAmB,YAAY,MAAM,CACnB;AAC9B,WAAS,eAAe,IAAI,KAAK,WAAW;AAC5C,SAAO;;CAIT,MAAM,cAAc,KAAK,UAAU,MAAM;CACzC,MAAM,WAAW,GAAG,MAAM,QAAQ,GAAG,GAAG;CAExC,MAAM,aAAa,oBAAoB,IAAI,SAAS;AACpD,KAAI,WACF,QAAO;CAQT,MAAM,OALS,UAAU,OAAO;EAC9B,MAAM,MAAM;EACZ,MAAM,MAAM;EACb,CAAC,CAEkB,UAAU;AAC9B,qBAAoB,IAAI,UAAU,KAAK;AAEvC,KAAI,KACF,iBAAgB,IAAI,KAAK,UAAU,KAAK,EAAE,KAAK;AAGjD,QAAO"}
+{"version":3,"file":"useKeyframes.js","names":[],"sources":["../../src/hooks/useKeyframes.ts"],"sourcesContent":["import { keyframes } from '../injector';\nimport type { KeyframesSteps } from '../injector/types';\nimport { getStyleTarget, pushRSCCSS } from '../rsc-cache';\nimport { formatKeyframesCSS } from '../ssr/format-keyframes';\nimport { depsEqual } from '../utils/deps-equal';\n\ninterface UseKeyframesOptions {\n  name?: string;\n  root?: Document | ShadowRoot;\n}\n\nconst clientContentToName = new Map<string, string>();\n\ninterface FactoryDepsEntry {\n  deps: readonly unknown[];\n  name: string;\n}\n\nconst factoryDepsCache = new Map<string, FactoryDepsEntry>();\n\n/* @internal — used only for tests */\nexport function _resetKeyframesCache(): void {\n  clientContentToName.clear();\n  factoryDepsCache.clear();\n}\n\n/**\n * Inject CSS @keyframes and return the generated animation name.\n * Deduplicates by content — identical steps always return the same name.\n *\n * Works in all environments: client, SSR with collector, and React Server Components.\n *\n * @example Basic usage - steps object is the dependency\n * ```tsx\n * function MyComponent() {\n *   const bounce = useKeyframes({\n *     '0%': { transform: 'scale(1)' },\n *     '50%': { transform: 'scale(1.1)' },\n *     '100%': { transform: 'scale(1)' },\n *   });\n *\n *   return <div style={{ animation: `${bounce} 1s infinite` }}>Bouncing</div>;\n * }\n * ```\n *\n * @example With custom name\n * ```tsx\n * function MyComponent() {\n *   const fadeIn = useKeyframes(\n *     { from: { opacity: 0 }, to: { opacity: 1 } },\n *     { name: 'fadeIn' }\n *   );\n *\n *   return <div style={{ animation: `${fadeIn} 0.3s ease-out` }}>Fading in</div>;\n * }\n * ```\n *\n * @example Factory function with dependencies\n * ```tsx\n * function MyComponent({ scale }: { scale: number }) {\n *   const pulse = useKeyframes(\n *     () => ({\n *       '0%': { transform: 'scale(1)' },\n *       '100%': { transform: `scale(${scale})` },\n *     }),\n *     [scale]\n *   );\n *\n *   return <div style={{ animation: `${pulse} 1s infinite` }}>Pulsing</div>;\n * }\n * ```\n */\n\n// Overload 1: Static steps object\nexport function useKeyframes(\n  steps: KeyframesSteps,\n  options?: UseKeyframesOptions,\n): string;\n\n// Overload 2: Factory function with dependencies\nexport function useKeyframes(\n  factory: () => KeyframesSteps,\n  deps: readonly unknown[],\n  options?: UseKeyframesOptions,\n): string;\n\n// Implementation\nexport function useKeyframes(\n  stepsOrFactory: KeyframesSteps | (() => KeyframesSteps),\n  depsOrOptions?: readonly unknown[] | UseKeyframesOptions,\n  options?: UseKeyframesOptions,\n): string {\n  const isFactory = typeof stepsOrFactory === 'function';\n\n  const deps =\n    isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : undefined;\n  const opts = isFactory\n    ? options\n    : (depsOrOptions as UseKeyframesOptions | undefined);\n\n  const target = getStyleTarget();\n\n  // Client deps cache: skip factory re-evaluation when deps haven't changed\n  if (isFactory && deps && opts?.name && target.mode === 'client') {\n    const cached = factoryDepsCache.get(opts.name);\n    if (cached && depsEqual(cached.deps, deps)) {\n      return cached.name;\n    }\n  }\n\n  const steps = isFactory\n    ? (stepsOrFactory as () => KeyframesSteps)()\n    : (stepsOrFactory as KeyframesSteps);\n\n  if (!steps || Object.keys(steps).length === 0) {\n    return '';\n  }\n\n  if (target.mode === 'ssr') {\n    const actualName = target.collector.allocateKeyframeName(opts?.name);\n    const css = formatKeyframesCSS(actualName, steps);\n    target.collector.collectKeyframes(actualName, css);\n    return actualName;\n  }\n\n  if (target.mode === 'rsc') {\n    const serializedContent = JSON.stringify(steps);\n    const key = `__kf:${opts?.name ?? ''}:${serializedContent}`;\n\n    const existingName = target.cache.generatedNames.get(key);\n    if (existingName) return existingName;\n\n    const actualName = opts?.name ?? `k${target.cache.keyframesCounter++}`;\n    const css = formatKeyframesCSS(actualName, steps);\n    pushRSCCSS(target.cache, key, css);\n    target.cache.generatedNames.set(key, actualName);\n    return actualName;\n  }\n\n  // Client path: stable name via content-based dedup\n  const serializedContent = JSON.stringify(steps);\n  const cacheKey = `${opts?.name ?? ''}:${serializedContent}`;\n\n  const cachedName = clientContentToName.get(cacheKey);\n  if (cachedName) {\n    return cachedName;\n  }\n\n  const result = keyframes(steps, {\n    name: opts?.name,\n    root: opts?.root,\n  });\n\n  const name = result.toString();\n  clientContentToName.set(cacheKey, name);\n\n  if (deps && opts?.name) {\n    factoryDepsCache.set(opts.name, { deps, name });\n  }\n\n  return name;\n}\n"],"mappings":";;;;;AAWA,MAAM,sCAAsB,IAAI,KAAqB;AAOrD,MAAM,mCAAmB,IAAI,KAA+B;AAqE5D,SAAgB,aACd,gBACA,eACA,SACQ;CACR,MAAM,YAAY,OAAO,mBAAmB;CAE5C,MAAM,OACJ,aAAa,MAAM,QAAQ,cAAc,GAAG,gBAAgB,KAAA;CAC9D,MAAM,OAAO,YACT,UACC;CAEL,MAAM,SAAS,gBAAgB;AAG/B,KAAI,aAAa,QAAQ,MAAM,QAAQ,OAAO,SAAS,UAAU;EAC/D,MAAM,SAAS,iBAAiB,IAAI,KAAK,KAAK;AAC9C,MAAI,UAAU,UAAU,OAAO,MAAM,KAAK,CACxC,QAAO,OAAO;;CAIlB,MAAM,QAAQ,YACT,gBAAyC,GACzC;AAEL,KAAI,CAAC,SAAS,OAAO,KAAK,MAAM,CAAC,WAAW,EAC1C,QAAO;AAGT,KAAI,OAAO,SAAS,OAAO;EACzB,MAAM,aAAa,OAAO,UAAU,qBAAqB,MAAM,KAAK;EACpE,MAAM,MAAM,mBAAmB,YAAY,MAAM;AACjD,SAAO,UAAU,iBAAiB,YAAY,IAAI;AAClD,SAAO;;AAGT,KAAI,OAAO,SAAS,OAAO;EACzB,MAAM,oBAAoB,KAAK,UAAU,MAAM;EAC/C,MAAM,MAAM,QAAQ,MAAM,QAAQ,GAAG,GAAG;EAExC,MAAM,eAAe,OAAO,MAAM,eAAe,IAAI,IAAI;AACzD,MAAI,aAAc,QAAO;EAEzB,MAAM,aAAa,MAAM,QAAQ,IAAI,OAAO,MAAM;EAClD,MAAM,MAAM,mBAAmB,YAAY,MAAM;AACjD,aAAW,OAAO,OAAO,KAAK,IAAI;AAClC,SAAO,MAAM,eAAe,IAAI,KAAK,WAAW;AAChD,SAAO;;CAIT,MAAM,oBAAoB,KAAK,UAAU,MAAM;CAC/C,MAAM,WAAW,GAAG,MAAM,QAAQ,GAAG,GAAG;CAExC,MAAM,aAAa,oBAAoB,IAAI,SAAS;AACpD,KAAI,WACF,QAAO;CAQT,MAAM,OALS,UAAU,OAAO;EAC9B,MAAM,MAAM;EACZ,MAAM,MAAM;EACb,CAAC,CAEkB,UAAU;AAC9B,qBAAoB,IAAI,UAAU,KAAK;AAEvC,KAAI,QAAQ,MAAM,KAChB,kBAAiB,IAAI,KAAK,MAAM;EAAE;EAAM;EAAM,CAAC;AAGjD,QAAO"}