@tenphi/tasty 1.3.0 → 1.4.0

package/dist/hooks/useGlobalStyles.js.map

@@ -1 +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"}
+{"version":3,"file":"useGlobalStyles.js","names":[],"sources":["../../src/hooks/useGlobalStyles.ts"],"sourcesContent":["import { 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 { formatGlobalRules } from '../ssr/format-global-rules';\nimport { getRegisteredSSRCollector } from '../ssr/ssr-collector-ref';\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 ssrCollector = getRegisteredSSRCollector();\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAAgB,gBAAgB,UAAkB,QAAuB;CACvE,MAAM,eAAe,2BAA2B;CAEhD,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.js

@@ -1,11 +1,10 @@
 import { keyframes } from "../injector/index.js";
 import { formatKeyframesCSS } from "../ssr/format-keyframes.js";
-import { TastySSRContext } from "../ssr/context.js";
-import { resolveSSRCollector } from "./resolve-ssr-collector.js";
-import { useContext, useInsertionEffect, useMemo, useRef } from "react";
+import { getRegisteredSSRCollector } from "../ssr/ssr-collector-ref.js";
+import { useInsertionEffect, useMemo, useRef } from "react";
 //#region src/hooks/useKeyframes.ts
 function useKeyframes(stepsOrFactory, depsOrOptions, options) {
-	const ssrCollector = resolveSSRCollector(useContext(TastySSRContext));
+	const ssrCollector = getRegisteredSSRCollector();
 	const isFactory = typeof stepsOrFactory === "function";
 	const deps = isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : void 0;
 	const opts = isFactory ? options : depsOrOptions;

package/dist/hooks/useKeyframes.js.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyframes.js","names":[],"sources":["../../src/hooks/useKeyframes.ts"],"sourcesContent":["import { useContext, useInsertionEffect, useMemo, useRef } from 'react';\n\nimport { keyframes } from '../injector';\nimport type { KeyframesResult, KeyframesSteps } from '../injector/types';\nimport { resolveSSRCollector } from './resolve-ssr-collector';\nimport { TastySSRContext } from '../ssr/context';\nimport { formatKeyframesCSS } from '../ssr/format-keyframes';\n\ninterface UseKeyframesOptions {\n  name?: string;\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Hook to inject CSS @keyframes and return the generated animation name.\n * Handles keyframes injection with proper cleanup on unmount or dependency changes.\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 ssrContextValue = useContext(TastySSRContext);\n  const ssrCollector = resolveSSRCollector(ssrContextValue);\n\n  // Detect which overload is being used\n  const isFactory = typeof stepsOrFactory === 'function';\n\n  // Parse arguments based on overload\n  const deps =\n    isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : undefined;\n  const opts = isFactory\n    ? options\n    : (depsOrOptions as UseKeyframesOptions | undefined);\n\n  // Memoize the keyframes steps to get a stable reference\n  const stepsData = useMemo(\n    () => {\n      const steps = isFactory\n        ? (stepsOrFactory as () => KeyframesSteps)()\n        : (stepsOrFactory as KeyframesSteps);\n\n      if (!steps || Object.keys(steps).length === 0) {\n        return null;\n      }\n\n      return steps;\n    },\n\n    isFactory ? (deps ?? []) : [stepsOrFactory],\n  );\n\n  // Store keyframes results for cleanup (client only)\n  const renderResultRef = useRef<KeyframesResult | null>(null);\n  const effectResultRef = useRef<KeyframesResult | null>(null);\n\n  const name = useMemo(() => {\n    if (!stepsData) {\n      return '';\n    }\n\n    // SSR path: format and collect, return name without DOM injection\n    if (ssrCollector) {\n      const actualName = ssrCollector.allocateKeyframeName(opts?.name);\n      const css = formatKeyframesCSS(actualName, stepsData);\n      ssrCollector.collectKeyframes(actualName, css);\n      return actualName;\n    }\n\n    // Client path: inject keyframes synchronously for immediate name availability\n    renderResultRef.current?.dispose();\n    renderResultRef.current = null;\n\n    const result = keyframes(stepsData, {\n      name: opts?.name,\n      root: opts?.root,\n    });\n\n    renderResultRef.current = result;\n\n    return result.toString();\n  }, [stepsData, opts?.name, opts?.root, ssrCollector]);\n\n  // Client path: handle Strict Mode double-invocation and cleanup\n  useInsertionEffect(() => {\n    effectResultRef.current?.dispose();\n    effectResultRef.current = null;\n\n    if (stepsData) {\n      const result = keyframes(stepsData, {\n        name: opts?.name,\n        root: opts?.root,\n      });\n      effectResultRef.current = result;\n    }\n\n    return () => {\n      effectResultRef.current?.dispose();\n      effectResultRef.current = null;\n      renderResultRef.current?.dispose();\n      renderResultRef.current = null;\n    };\n  }, [stepsData, opts?.name, opts?.root]);\n\n  return name;\n}\n"],"mappings":";;;;;;AAwEA,SAAgB,aACd,gBACA,eACA,SACQ;CAER,MAAM,eAAe,oBADG,WAAW,gBAAgB,CACM;CAGzD,MAAM,YAAY,OAAO,mBAAmB;CAG5C,MAAM,OACJ,aAAa,MAAM,QAAQ,cAAc,GAAG,gBAAgB,KAAA;CAC9D,MAAM,OAAO,YACT,UACC;CAGL,MAAM,YAAY,cACV;EACJ,MAAM,QAAQ,YACT,gBAAyC,GACzC;AAEL,MAAI,CAAC,SAAS,OAAO,KAAK,MAAM,CAAC,WAAW,EAC1C,QAAO;AAGT,SAAO;IAGT,YAAa,QAAQ,EAAE,GAAI,CAAC,eAAe,CAC5C;CAGD,MAAM,kBAAkB,OAA+B,KAAK;CAC5D,MAAM,kBAAkB,OAA+B,KAAK;CAE5D,MAAM,OAAO,cAAc;AACzB,MAAI,CAAC,UACH,QAAO;AAIT,MAAI,cAAc;GAChB,MAAM,aAAa,aAAa,qBAAqB,MAAM,KAAK;GAChE,MAAM,MAAM,mBAAmB,YAAY,UAAU;AACrD,gBAAa,iBAAiB,YAAY,IAAI;AAC9C,UAAO;;AAIT,kBAAgB,SAAS,SAAS;AAClC,kBAAgB,UAAU;EAE1B,MAAM,SAAS,UAAU,WAAW;GAClC,MAAM,MAAM;GACZ,MAAM,MAAM;GACb,CAAC;AAEF,kBAAgB,UAAU;AAE1B,SAAO,OAAO,UAAU;IACvB;EAAC;EAAW,MAAM;EAAM,MAAM;EAAM;EAAa,CAAC;AAGrD,0BAAyB;AACvB,kBAAgB,SAAS,SAAS;AAClC,kBAAgB,UAAU;AAE1B,MAAI,UAKF,iBAAgB,UAJD,UAAU,WAAW;GAClC,MAAM,MAAM;GACZ,MAAM,MAAM;GACb,CAAC;AAIJ,eAAa;AACX,mBAAgB,SAAS,SAAS;AAClC,mBAAgB,UAAU;AAC1B,mBAAgB,SAAS,SAAS;AAClC,mBAAgB,UAAU;;IAE3B;EAAC;EAAW,MAAM;EAAM,MAAM;EAAK,CAAC;AAEvC,QAAO"}
+{"version":3,"file":"useKeyframes.js","names":[],"sources":["../../src/hooks/useKeyframes.ts"],"sourcesContent":["import { useInsertionEffect, useMemo, useRef } from 'react';\n\nimport { keyframes } from '../injector';\nimport type { KeyframesResult, KeyframesSteps } from '../injector/types';\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\n/**\n * Hook to inject CSS @keyframes and return the generated animation name.\n * Handles keyframes injection with proper cleanup on unmount or dependency changes.\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 ssrCollector = getRegisteredSSRCollector();\n\n  // Detect which overload is being used\n  const isFactory = typeof stepsOrFactory === 'function';\n\n  // Parse arguments based on overload\n  const deps =\n    isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : undefined;\n  const opts = isFactory\n    ? options\n    : (depsOrOptions as UseKeyframesOptions | undefined);\n\n  // Memoize the keyframes steps to get a stable reference\n  const stepsData = useMemo(\n    () => {\n      const steps = isFactory\n        ? (stepsOrFactory as () => KeyframesSteps)()\n        : (stepsOrFactory as KeyframesSteps);\n\n      if (!steps || Object.keys(steps).length === 0) {\n        return null;\n      }\n\n      return steps;\n    },\n\n    isFactory ? (deps ?? []) : [stepsOrFactory],\n  );\n\n  // Store keyframes results for cleanup (client only)\n  const renderResultRef = useRef<KeyframesResult | null>(null);\n  const effectResultRef = useRef<KeyframesResult | null>(null);\n\n  const name = useMemo(() => {\n    if (!stepsData) {\n      return '';\n    }\n\n    // SSR path: format and collect, return name without DOM injection\n    if (ssrCollector) {\n      const actualName = ssrCollector.allocateKeyframeName(opts?.name);\n      const css = formatKeyframesCSS(actualName, stepsData);\n      ssrCollector.collectKeyframes(actualName, css);\n      return actualName;\n    }\n\n    // Client path: inject keyframes synchronously for immediate name availability\n    renderResultRef.current?.dispose();\n    renderResultRef.current = null;\n\n    const result = keyframes(stepsData, {\n      name: opts?.name,\n      root: opts?.root,\n    });\n\n    renderResultRef.current = result;\n\n    return result.toString();\n  }, [stepsData, opts?.name, opts?.root, ssrCollector]);\n\n  // Client path: handle Strict Mode double-invocation and cleanup\n  useInsertionEffect(() => {\n    effectResultRef.current?.dispose();\n    effectResultRef.current = null;\n\n    if (stepsData) {\n      const result = keyframes(stepsData, {\n        name: opts?.name,\n        root: opts?.root,\n      });\n      effectResultRef.current = result;\n    }\n\n    return () => {\n      effectResultRef.current?.dispose();\n      effectResultRef.current = null;\n      renderResultRef.current?.dispose();\n      renderResultRef.current = null;\n    };\n  }, [stepsData, opts?.name, opts?.root]);\n\n  return name;\n}\n"],"mappings":";;;;;AAuEA,SAAgB,aACd,gBACA,eACA,SACQ;CACR,MAAM,eAAe,2BAA2B;CAGhD,MAAM,YAAY,OAAO,mBAAmB;CAG5C,MAAM,OACJ,aAAa,MAAM,QAAQ,cAAc,GAAG,gBAAgB,KAAA;CAC9D,MAAM,OAAO,YACT,UACC;CAGL,MAAM,YAAY,cACV;EACJ,MAAM,QAAQ,YACT,gBAAyC,GACzC;AAEL,MAAI,CAAC,SAAS,OAAO,KAAK,MAAM,CAAC,WAAW,EAC1C,QAAO;AAGT,SAAO;IAGT,YAAa,QAAQ,EAAE,GAAI,CAAC,eAAe,CAC5C;CAGD,MAAM,kBAAkB,OAA+B,KAAK;CAC5D,MAAM,kBAAkB,OAA+B,KAAK;CAE5D,MAAM,OAAO,cAAc;AACzB,MAAI,CAAC,UACH,QAAO;AAIT,MAAI,cAAc;GAChB,MAAM,aAAa,aAAa,qBAAqB,MAAM,KAAK;GAChE,MAAM,MAAM,mBAAmB,YAAY,UAAU;AACrD,gBAAa,iBAAiB,YAAY,IAAI;AAC9C,UAAO;;AAIT,kBAAgB,SAAS,SAAS;AAClC,kBAAgB,UAAU;EAE1B,MAAM,SAAS,UAAU,WAAW;GAClC,MAAM,MAAM;GACZ,MAAM,MAAM;GACb,CAAC;AAEF,kBAAgB,UAAU;AAE1B,SAAO,OAAO,UAAU;IACvB;EAAC;EAAW,MAAM;EAAM,MAAM;EAAM;EAAa,CAAC;AAGrD,0BAAyB;AACvB,kBAAgB,SAAS,SAAS;AAClC,kBAAgB,UAAU;AAE1B,MAAI,UAKF,iBAAgB,UAJD,UAAU,WAAW;GAClC,MAAM,MAAM;GACZ,MAAM,MAAM;GACb,CAAC;AAIJ,eAAa;AACX,mBAAgB,SAAS,SAAS;AAClC,mBAAgB,UAAU;AAC1B,mBAAgB,SAAS,SAAS;AAClC,mBAAgB,UAAU;;IAE3B;EAAC;EAAW,MAAM;EAAM,MAAM;EAAK,CAAC;AAEvC,QAAO"}

package/dist/hooks/useProperty.js

@@ -1,8 +1,7 @@
 import { getGlobalInjector } from "../config.js";
 import { formatPropertyCSS } from "../ssr/format-property.js";
-import { TastySSRContext } from "../ssr/context.js";
-import { resolveSSRCollector } from "./resolve-ssr-collector.js";
-import { useContext, useInsertionEffect, useMemo } from "react";
+import { getRegisteredSSRCollector } from "../ssr/ssr-collector-ref.js";
+import { useInsertionEffect, useMemo } from "react";
 //#region src/hooks/useProperty.ts
 /**
 * Hook to register a CSS @property custom property.
@@ -57,7 +56,7 @@ import { useContext, useInsertionEffect, useMemo } from "react";
 * ```
 */
 function useProperty(name, options) {
-	const ssrCollector = resolveSSRCollector(useContext(TastySSRContext));
+	const ssrCollector = getRegisteredSSRCollector();
 	const optionsKey = useMemo(() => {
 		if (!options) return "";
 		return JSON.stringify({

package/dist/hooks/useProperty.js.map

@@ -1 +1 @@
-{"version":3,"file":"useProperty.js","names":[],"sources":["../../src/hooks/useProperty.ts"],"sourcesContent":["import { useContext, useInsertionEffect, useMemo } from 'react';\n\nimport { getGlobalInjector } from '../config';\nimport { resolveSSRCollector } from './resolve-ssr-collector';\nimport { TastySSRContext } from '../ssr/context';\nimport { formatPropertyCSS } from '../ssr/format-property';\n\nexport interface UsePropertyOptions {\n  /**\n   * CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>').\n   * For color tokens (#name), this is auto-set to '<color>' and cannot be overridden.\n   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax\n   */\n  syntax?: string;\n  /**\n   * Whether the property inherits from parent elements\n   * @default true\n   */\n  inherits?: boolean;\n  /**\n   * Initial value for the property.\n   * For color tokens (#name), this defaults to 'transparent' if not specified.\n   */\n  initialValue?: string | number;\n  /**\n   * Shadow root or document to inject into\n   */\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Hook to register a CSS @property custom property.\n * This enables advanced features like animating custom properties.\n *\n * Note: @property rules are global and persistent once defined.\n * The hook ensures the property is only registered once per root.\n *\n * Accepts tasty token syntax for the property name:\n * - `$name` → defines `--name`\n * - `#name` → defines `--name-color` (auto-sets syntax: '<color>', defaults initialValue: 'transparent')\n * - `--name` → defines `--name` (legacy format)\n *\n * @param name - The property token ($name, #name) or CSS property name (--name)\n * @param options - Property configuration\n *\n * @example Basic property with token syntax\n * ```tsx\n * function Spinner() {\n *   useProperty('$rotation', {\n *     syntax: '<angle>',\n *     inherits: false,\n *     initialValue: '0deg',\n *   });\n *\n *   return <div className=\"spinner\" />;\n * }\n * ```\n *\n * @example Color property with token syntax (auto-sets syntax)\n * ```tsx\n * function MyComponent() {\n *   useProperty('#theme', {\n *     initialValue: 'red', // syntax: '<color>' is auto-set\n *   });\n *\n *   // Now --theme-color can be animated with CSS transitions\n *   return <div style={{ '--theme-color': 'blue' } as React.CSSProperties}>Colored</div>;\n * }\n * ```\n *\n * @example Legacy format (still supported)\n * ```tsx\n * function ResizableBox() {\n *   useProperty('--box-size', {\n *     syntax: '<length>',\n *     initialValue: '100px',\n *   });\n *\n *   return <div style={{ width: 'var(--box-size)' }} />;\n * }\n * ```\n */\nexport function useProperty(name: string, options?: UsePropertyOptions): void {\n  const ssrContextValue = useContext(TastySSRContext);\n  const ssrCollector = resolveSSRCollector(ssrContextValue);\n\n  // Memoize the options to create a stable dependency\n  const optionsKey = useMemo(() => {\n    if (!options) return '';\n    return JSON.stringify({\n      syntax: options.syntax,\n      inherits: options.inherits,\n      initialValue: options.initialValue,\n    });\n  }, [options?.syntax, options?.inherits, options?.initialValue]);\n\n  // SSR path: collect @property CSS during render\n  useMemo(() => {\n    if (!ssrCollector || !name) return;\n\n    ssrCollector.collectInternals();\n\n    const css = formatPropertyCSS(name, {\n      syntax: options?.syntax,\n      inherits: options?.inherits,\n      initialValue: options?.initialValue,\n    });\n    if (css) {\n      ssrCollector.collectProperty(name, css);\n    }\n  }, [ssrCollector, name, optionsKey]);\n\n  // Client path: inject via DOM\n  useInsertionEffect(() => {\n    if (!name) {\n      if (process.env.NODE_ENV !== 'production') {\n        console.warn(`[Tasty] useProperty: property name is required`);\n      }\n      return;\n    }\n\n    const injector = getGlobalInjector();\n\n    if (injector.isPropertyDefined(name, { root: options?.root })) {\n      return;\n    }\n\n    injector.property(name, {\n      syntax: options?.syntax,\n      inherits: options?.inherits,\n      initialValue: options?.initialValue,\n      root: options?.root,\n    });\n  }, [name, optionsKey, options?.root]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFA,SAAgB,YAAY,MAAc,SAAoC;CAE5E,MAAM,eAAe,oBADG,WAAW,gBAAgB,CACM;CAGzD,MAAM,aAAa,cAAc;AAC/B,MAAI,CAAC,QAAS,QAAO;AACrB,SAAO,KAAK,UAAU;GACpB,QAAQ,QAAQ;GAChB,UAAU,QAAQ;GAClB,cAAc,QAAQ;GACvB,CAAC;IACD;EAAC,SAAS;EAAQ,SAAS;EAAU,SAAS;EAAa,CAAC;AAG/D,eAAc;AACZ,MAAI,CAAC,gBAAgB,CAAC,KAAM;AAE5B,eAAa,kBAAkB;EAE/B,MAAM,MAAM,kBAAkB,MAAM;GAClC,QAAQ,SAAS;GACjB,UAAU,SAAS;GACnB,cAAc,SAAS;GACxB,CAAC;AACF,MAAI,IACF,cAAa,gBAAgB,MAAM,IAAI;IAExC;EAAC;EAAc;EAAM;EAAW,CAAC;AAGpC,0BAAyB;AACvB,MAAI,CAAC,MAAM;AAEP,WAAQ,KAAK,iDAAiD;AAEhE;;EAGF,MAAM,WAAW,mBAAmB;AAEpC,MAAI,SAAS,kBAAkB,MAAM,EAAE,MAAM,SAAS,MAAM,CAAC,CAC3D;AAGF,WAAS,SAAS,MAAM;GACtB,QAAQ,SAAS;GACjB,UAAU,SAAS;GACnB,cAAc,SAAS;GACvB,MAAM,SAAS;GAChB,CAAC;IACD;EAAC;EAAM;EAAY,SAAS;EAAK,CAAC"}
+{"version":3,"file":"useProperty.js","names":[],"sources":["../../src/hooks/useProperty.ts"],"sourcesContent":["import { useInsertionEffect, useMemo } from 'react';\n\nimport { getGlobalInjector } from '../config';\nimport { formatPropertyCSS } from '../ssr/format-property';\nimport { getRegisteredSSRCollector } from '../ssr/ssr-collector-ref';\n\nexport interface UsePropertyOptions {\n  /**\n   * CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>').\n   * For color tokens (#name), this is auto-set to '<color>' and cannot be overridden.\n   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax\n   */\n  syntax?: string;\n  /**\n   * Whether the property inherits from parent elements\n   * @default true\n   */\n  inherits?: boolean;\n  /**\n   * Initial value for the property.\n   * For color tokens (#name), this defaults to 'transparent' if not specified.\n   */\n  initialValue?: string | number;\n  /**\n   * Shadow root or document to inject into\n   */\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Hook to register a CSS @property custom property.\n * This enables advanced features like animating custom properties.\n *\n * Note: @property rules are global and persistent once defined.\n * The hook ensures the property is only registered once per root.\n *\n * Accepts tasty token syntax for the property name:\n * - `$name` → defines `--name`\n * - `#name` → defines `--name-color` (auto-sets syntax: '<color>', defaults initialValue: 'transparent')\n * - `--name` → defines `--name` (legacy format)\n *\n * @param name - The property token ($name, #name) or CSS property name (--name)\n * @param options - Property configuration\n *\n * @example Basic property with token syntax\n * ```tsx\n * function Spinner() {\n *   useProperty('$rotation', {\n *     syntax: '<angle>',\n *     inherits: false,\n *     initialValue: '0deg',\n *   });\n *\n *   return <div className=\"spinner\" />;\n * }\n * ```\n *\n * @example Color property with token syntax (auto-sets syntax)\n * ```tsx\n * function MyComponent() {\n *   useProperty('#theme', {\n *     initialValue: 'red', // syntax: '<color>' is auto-set\n *   });\n *\n *   // Now --theme-color can be animated with CSS transitions\n *   return <div style={{ '--theme-color': 'blue' } as React.CSSProperties}>Colored</div>;\n * }\n * ```\n *\n * @example Legacy format (still supported)\n * ```tsx\n * function ResizableBox() {\n *   useProperty('--box-size', {\n *     syntax: '<length>',\n *     initialValue: '100px',\n *   });\n *\n *   return <div style={{ width: 'var(--box-size)' }} />;\n * }\n * ```\n */\nexport function useProperty(name: string, options?: UsePropertyOptions): void {\n  const ssrCollector = getRegisteredSSRCollector();\n\n  // Memoize the options to create a stable dependency\n  const optionsKey = useMemo(() => {\n    if (!options) return '';\n    return JSON.stringify({\n      syntax: options.syntax,\n      inherits: options.inherits,\n      initialValue: options.initialValue,\n    });\n  }, [options?.syntax, options?.inherits, options?.initialValue]);\n\n  // SSR path: collect @property CSS during render\n  useMemo(() => {\n    if (!ssrCollector || !name) return;\n\n    ssrCollector.collectInternals();\n\n    const css = formatPropertyCSS(name, {\n      syntax: options?.syntax,\n      inherits: options?.inherits,\n      initialValue: options?.initialValue,\n    });\n    if (css) {\n      ssrCollector.collectProperty(name, css);\n    }\n  }, [ssrCollector, name, optionsKey]);\n\n  // Client path: inject via DOM\n  useInsertionEffect(() => {\n    if (!name) {\n      if (process.env.NODE_ENV !== 'production') {\n        console.warn(`[Tasty] useProperty: property name is required`);\n      }\n      return;\n    }\n\n    const injector = getGlobalInjector();\n\n    if (injector.isPropertyDefined(name, { root: options?.root })) {\n      return;\n    }\n\n    injector.property(name, {\n      syntax: options?.syntax,\n      inherits: options?.inherits,\n      initialValue: options?.initialValue,\n      root: options?.root,\n    });\n  }, [name, optionsKey, options?.root]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiFA,SAAgB,YAAY,MAAc,SAAoC;CAC5E,MAAM,eAAe,2BAA2B;CAGhD,MAAM,aAAa,cAAc;AAC/B,MAAI,CAAC,QAAS,QAAO;AACrB,SAAO,KAAK,UAAU;GACpB,QAAQ,QAAQ;GAChB,UAAU,QAAQ;GAClB,cAAc,QAAQ;GACvB,CAAC;IACD;EAAC,SAAS;EAAQ,SAAS;EAAU,SAAS;EAAa,CAAC;AAG/D,eAAc;AACZ,MAAI,CAAC,gBAAgB,CAAC,KAAM;AAE5B,eAAa,kBAAkB;EAE/B,MAAM,MAAM,kBAAkB,MAAM;GAClC,QAAQ,SAAS;GACjB,UAAU,SAAS;GACnB,cAAc,SAAS;GACxB,CAAC;AACF,MAAI,IACF,cAAa,gBAAgB,MAAM,IAAI;IAExC;EAAC;EAAc;EAAM;EAAW,CAAC;AAGpC,0BAAyB;AACvB,MAAI,CAAC,MAAM;AAEP,WAAQ,KAAK,iDAAiD;AAEhE;;EAGF,MAAM,WAAW,mBAAmB;AAEpC,MAAI,SAAS,kBAAkB,MAAM,EAAE,MAAM,SAAS,MAAM,CAAC,CAC3D;AAGF,WAAS,SAAS,MAAM;GACtB,QAAQ,SAAS;GACjB,UAAU,SAAS;GACnB,cAAc,SAAS;GACvB,MAAM,SAAS;GAChB,CAAC;IACD;EAAC;EAAM;EAAY,SAAS;EAAK,CAAC"}

package/dist/hooks/useRawCSS.js

@@ -1,10 +1,9 @@
 import { injectRawCSS } from "../injector/index.js";
-import { TastySSRContext } from "../ssr/context.js";
-import { resolveSSRCollector } from "./resolve-ssr-collector.js";
-import { useContext, useInsertionEffect, useMemo, useRef } from "react";
+import { getRegisteredSSRCollector } from "../ssr/ssr-collector-ref.js";
+import { useInsertionEffect, useMemo, useRef } from "react";
 //#region src/hooks/useRawCSS.ts
 function useRawCSS(cssOrFactory, depsOrOptions, options) {
-	const ssrCollector = resolveSSRCollector(useContext(TastySSRContext));
+	const ssrCollector = getRegisteredSSRCollector();
 	const isFactory = typeof cssOrFactory === "function";
 	const deps = isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : void 0;
 	const opts = isFactory ? options : depsOrOptions;

package/dist/hooks/useRawCSS.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRawCSS.js","names":[],"sources":["../../src/hooks/useRawCSS.ts"],"sourcesContent":["import { useContext, useInsertionEffect, useMemo, useRef } from 'react';\n\nimport { injectRawCSS } from '../injector';\nimport { resolveSSRCollector } from './resolve-ssr-collector';\nimport { TastySSRContext } from '../ssr/context';\n\ninterface UseRawCSSOptions {\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Hook to inject raw CSS text directly without parsing.\n * This is a low-overhead alternative for injecting global CSS that doesn't need tasty processing.\n *\n * The CSS is inserted into a separate style element (data-tasty-raw) to avoid conflicts\n * with tasty's chunked style sheets.\n *\n * @example Static CSS string\n * ```tsx\n * function GlobalStyles() {\n *   useRawCSS(`\n *     body {\n *       margin: 0;\n *       padding: 0;\n *       font-family: sans-serif;\n *     }\n *   `);\n *\n *   return null;\n * }\n * ```\n *\n * @example Factory function with dependencies (like useMemo)\n * ```tsx\n * function ThemeStyles({ theme }: { theme: 'light' | 'dark' }) {\n *   useRawCSS(() => `\n *     :root {\n *       --bg-color: ${theme === 'dark' ? '#1a1a1a' : '#ffffff'};\n *       --text-color: ${theme === 'dark' ? '#ffffff' : '#1a1a1a'};\n *     }\n *   `, [theme]);\n *\n *   return null;\n * }\n * ```\n *\n * @example With options\n * ```tsx\n * function ShadowStyles({ shadowRoot }) {\n *   useRawCSS(() => `.scoped { color: red; }`, [], { root: shadowRoot });\n *   return null;\n * }\n * ```\n */\n\n// Overload 1: Static CSS string\nexport function useRawCSS(css: string, options?: UseRawCSSOptions): void;\n\n// Overload 2: Factory function with dependencies\nexport function useRawCSS(\n  factory: () => string,\n  deps: readonly unknown[],\n  options?: UseRawCSSOptions,\n): void;\n\n// Implementation\nexport function useRawCSS(\n  cssOrFactory: string | (() => string),\n  depsOrOptions?: readonly unknown[] | UseRawCSSOptions,\n  options?: UseRawCSSOptions,\n): void {\n  const ssrContextValue = useContext(TastySSRContext);\n  const ssrCollector = resolveSSRCollector(ssrContextValue);\n\n  // Detect which overload is being used\n  const isFactory = typeof cssOrFactory === 'function';\n\n  // Parse arguments based on overload\n  const deps =\n    isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : undefined;\n  const opts = isFactory\n    ? options\n    : (depsOrOptions as UseRawCSSOptions | undefined);\n\n  // Memoize CSS - for factory functions, use provided deps; for strings, use the string itself\n  const css = useMemo(\n    () =>\n      isFactory ? (cssOrFactory as () => string)() : (cssOrFactory as string),\n\n    isFactory ? (deps ?? []) : [cssOrFactory],\n  );\n\n  // SSR path: collect raw CSS during render\n  useMemo(() => {\n    if (!ssrCollector || !css.trim()) return;\n\n    const key = `raw:${css.length}:${css.slice(0, 64)}`;\n    ssrCollector.collectRawCSS(key, css);\n  }, [ssrCollector, css]);\n\n  const disposeRef = useRef<(() => void) | null>(null);\n\n  // Client path: inject via DOM\n  useInsertionEffect(() => {\n    disposeRef.current?.();\n\n    if (!css.trim()) {\n      disposeRef.current = null;\n      return;\n    }\n\n    const { dispose } = injectRawCSS(css, opts);\n    disposeRef.current = dispose;\n\n    return () => {\n      disposeRef.current?.();\n      disposeRef.current = null;\n    };\n  }, [css, opts?.root]);\n}\n"],"mappings":";;;;;AAkEA,SAAgB,UACd,cACA,eACA,SACM;CAEN,MAAM,eAAe,oBADG,WAAW,gBAAgB,CACM;CAGzD,MAAM,YAAY,OAAO,iBAAiB;CAG1C,MAAM,OACJ,aAAa,MAAM,QAAQ,cAAc,GAAG,gBAAgB,KAAA;CAC9D,MAAM,OAAO,YACT,UACC;CAGL,MAAM,MAAM,cAER,YAAa,cAA+B,GAAI,cAElD,YAAa,QAAQ,EAAE,GAAI,CAAC,aAAa,CAC1C;AAGD,eAAc;AACZ,MAAI,CAAC,gBAAgB,CAAC,IAAI,MAAM,CAAE;EAElC,MAAM,MAAM,OAAO,IAAI,OAAO,GAAG,IAAI,MAAM,GAAG,GAAG;AACjD,eAAa,cAAc,KAAK,IAAI;IACnC,CAAC,cAAc,IAAI,CAAC;CAEvB,MAAM,aAAa,OAA4B,KAAK;AAGpD,0BAAyB;AACvB,aAAW,WAAW;AAEtB,MAAI,CAAC,IAAI,MAAM,EAAE;AACf,cAAW,UAAU;AACrB;;EAGF,MAAM,EAAE,YAAY,aAAa,KAAK,KAAK;AAC3C,aAAW,UAAU;AAErB,eAAa;AACX,cAAW,WAAW;AACtB,cAAW,UAAU;;IAEtB,CAAC,KAAK,MAAM,KAAK,CAAC"}
+{"version":3,"file":"useRawCSS.js","names":[],"sources":["../../src/hooks/useRawCSS.ts"],"sourcesContent":["import { useInsertionEffect, useMemo, useRef } from 'react';\n\nimport { injectRawCSS } from '../injector';\nimport { getRegisteredSSRCollector } from '../ssr/ssr-collector-ref';\n\ninterface UseRawCSSOptions {\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Hook to inject raw CSS text directly without parsing.\n * This is a low-overhead alternative for injecting global CSS that doesn't need tasty processing.\n *\n * The CSS is inserted into a separate style element (data-tasty-raw) to avoid conflicts\n * with tasty's chunked style sheets.\n *\n * @example Static CSS string\n * ```tsx\n * function GlobalStyles() {\n *   useRawCSS(`\n *     body {\n *       margin: 0;\n *       padding: 0;\n *       font-family: sans-serif;\n *     }\n *   `);\n *\n *   return null;\n * }\n * ```\n *\n * @example Factory function with dependencies (like useMemo)\n * ```tsx\n * function ThemeStyles({ theme }: { theme: 'light' | 'dark' }) {\n *   useRawCSS(() => `\n *     :root {\n *       --bg-color: ${theme === 'dark' ? '#1a1a1a' : '#ffffff'};\n *       --text-color: ${theme === 'dark' ? '#ffffff' : '#1a1a1a'};\n *     }\n *   `, [theme]);\n *\n *   return null;\n * }\n * ```\n *\n * @example With options\n * ```tsx\n * function ShadowStyles({ shadowRoot }) {\n *   useRawCSS(() => `.scoped { color: red; }`, [], { root: shadowRoot });\n *   return null;\n * }\n * ```\n */\n\n// Overload 1: Static CSS string\nexport function useRawCSS(css: string, options?: UseRawCSSOptions): void;\n\n// Overload 2: Factory function with dependencies\nexport function useRawCSS(\n  factory: () => string,\n  deps: readonly unknown[],\n  options?: UseRawCSSOptions,\n): void;\n\n// Implementation\nexport function useRawCSS(\n  cssOrFactory: string | (() => string),\n  depsOrOptions?: readonly unknown[] | UseRawCSSOptions,\n  options?: UseRawCSSOptions,\n): void {\n  const ssrCollector = getRegisteredSSRCollector();\n\n  // Detect which overload is being used\n  const isFactory = typeof cssOrFactory === 'function';\n\n  // Parse arguments based on overload\n  const deps =\n    isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : undefined;\n  const opts = isFactory\n    ? options\n    : (depsOrOptions as UseRawCSSOptions | undefined);\n\n  // Memoize CSS - for factory functions, use provided deps; for strings, use the string itself\n  const css = useMemo(\n    () =>\n      isFactory ? (cssOrFactory as () => string)() : (cssOrFactory as string),\n\n    isFactory ? (deps ?? []) : [cssOrFactory],\n  );\n\n  // SSR path: collect raw CSS during render\n  useMemo(() => {\n    if (!ssrCollector || !css.trim()) return;\n\n    const key = `raw:${css.length}:${css.slice(0, 64)}`;\n    ssrCollector.collectRawCSS(key, css);\n  }, [ssrCollector, css]);\n\n  const disposeRef = useRef<(() => void) | null>(null);\n\n  // Client path: inject via DOM\n  useInsertionEffect(() => {\n    disposeRef.current?.();\n\n    if (!css.trim()) {\n      disposeRef.current = null;\n      return;\n    }\n\n    const { dispose } = injectRawCSS(css, opts);\n    disposeRef.current = dispose;\n\n    return () => {\n      disposeRef.current?.();\n      disposeRef.current = null;\n    };\n  }, [css, opts?.root]);\n}\n"],"mappings":";;;;AAiEA,SAAgB,UACd,cACA,eACA,SACM;CACN,MAAM,eAAe,2BAA2B;CAGhD,MAAM,YAAY,OAAO,iBAAiB;CAG1C,MAAM,OACJ,aAAa,MAAM,QAAQ,cAAc,GAAG,gBAAgB,KAAA;CAC9D,MAAM,OAAO,YACT,UACC;CAGL,MAAM,MAAM,cAER,YAAa,cAA+B,GAAI,cAElD,YAAa,QAAQ,EAAE,GAAI,CAAC,aAAa,CAC1C;AAGD,eAAc;AACZ,MAAI,CAAC,gBAAgB,CAAC,IAAI,MAAM,CAAE;EAElC,MAAM,MAAM,OAAO,IAAI,OAAO,GAAG,IAAI,MAAM,GAAG,GAAG;AACjD,eAAa,cAAc,KAAK,IAAI;IACnC,CAAC,cAAc,IAAI,CAAC;CAEvB,MAAM,aAAa,OAA4B,KAAK;AAGpD,0BAAyB;AACvB,aAAW,WAAW;AAEtB,MAAI,CAAC,IAAI,MAAM,EAAE;AACf,cAAW,UAAU;AACrB;;EAGF,MAAM,EAAE,YAAY,aAAa,KAAK,KAAK;AAC3C,aAAW,UAAU;AAErB,eAAa;AACX,cAAW,WAAW;AACtB,cAAW,UAAU;;IAEtB,CAAC,KAAK,MAAM,KAAK,CAAC"}

package/dist/hooks/useStyles.d.ts

@@ -15,11 +15,11 @@ interface UseStylesResult {
   className: string;
 }
 /**
- * Hook to generate CSS classes from Tasty styles.
- * Thin wrapper around `computeStyles()` that adds React context-based
- * SSR collector discovery for backward compatibility with TastyRegistry.
+ * Generate CSS classes from Tasty styles.
+ * Thin re-export of `computeStyles()` kept for backward compatibility.
  *
- * For hook-free usage (e.g. in server components), use `computeStyles()` directly.
+ * Unlike a React hook, this is a plain function and can be called
+ * from both client components and React Server Components.
  *
  * @example
  * ```tsx

package/dist/hooks/useStyles.js

@@ -1,13 +1,11 @@
 import { computeStyles } from "../compute-styles.js";
-import { TastySSRContext } from "../ssr/context.js";
-import { useContext } from "react";
 //#region src/hooks/useStyles.ts
 /**
-* Hook to generate CSS classes from Tasty styles.
-* Thin wrapper around `computeStyles()` that adds React context-based
-* SSR collector discovery for backward compatibility with TastyRegistry.
+* Generate CSS classes from Tasty styles.
+* Thin re-export of `computeStyles()` kept for backward compatibility.
 *
-* For hook-free usage (e.g. in server components), use `computeStyles()` directly.
+* Unlike a React hook, this is a plain function and can be called
+* from both client components and React Server Components.
 *
 * @example
 * ```tsx
@@ -23,7 +21,7 @@ import { useContext } from "react";
 * ```
 */
 function useStyles(styles) {
-	return computeStyles(styles, { ssrCollector: useContext(TastySSRContext) });
+	return computeStyles(styles);
 }
 //#endregion
 export { useStyles };

package/dist/hooks/useStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStyles.js","names":[],"sources":["../../src/hooks/useStyles.ts"],"sourcesContent":["import { useContext } from 'react';\n\nimport { computeStyles } from '../compute-styles';\nimport type { ServerStyleCollector } from '../ssr/collector';\nimport { TastySSRContext } from '../ssr/context';\nimport type { Styles } from '../styles/types';\n\n/**\n * Tasty styles object to generate CSS classes for.\n * Can be undefined or empty object for no styles.\n */\nexport type UseStylesOptions = Styles | undefined;\n\nexport interface UseStylesResult {\n  /**\n   * Generated className(s) to apply to the element.\n   * Can be empty string if no styles are provided.\n   * With chunking enabled, may contain multiple space-separated class names.\n   */\n  className: string;\n}\n\n/**\n * Hook to generate CSS classes from Tasty styles.\n * Thin wrapper around `computeStyles()` that adds React context-based\n * SSR collector discovery for backward compatibility with TastyRegistry.\n *\n * For hook-free usage (e.g. in server components), use `computeStyles()` directly.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { className } = useStyles({\n *     padding: '2x',\n *     fill: '#purple',\n *     radius: '1r',\n *   });\n *\n *   return <div className={className}>Styled content</div>;\n * }\n * ```\n */\nexport function useStyles(styles: UseStylesOptions): UseStylesResult {\n  const ssrContextValue: ServerStyleCollector | null =\n    useContext(TastySSRContext);\n\n  return computeStyles(styles, {\n    ssrCollector: ssrContextValue,\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0CA,SAAgB,UAAU,QAA2C;AAInE,QAAO,cAAc,QAAQ,EAC3B,cAHA,WAAW,gBAAgB,EAI5B,CAAC"}
+{"version":3,"file":"useStyles.js","names":[],"sources":["../../src/hooks/useStyles.ts"],"sourcesContent":["import { computeStyles } from '../compute-styles';\nimport type { Styles } from '../styles/types';\n\n/**\n * Tasty styles object to generate CSS classes for.\n * Can be undefined or empty object for no styles.\n */\nexport type UseStylesOptions = Styles | undefined;\n\nexport interface UseStylesResult {\n  /**\n   * Generated className(s) to apply to the element.\n   * Can be empty string if no styles are provided.\n   * With chunking enabled, may contain multiple space-separated class names.\n   */\n  className: string;\n}\n\n/**\n * Generate CSS classes from Tasty styles.\n * Thin re-export of `computeStyles()` kept for backward compatibility.\n *\n * Unlike a React hook, this is a plain function and can be called\n * from both client components and React Server Components.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { className } = useStyles({\n *     padding: '2x',\n *     fill: '#purple',\n *     radius: '1r',\n *   });\n *\n *   return <div className={className}>Styled content</div>;\n * }\n * ```\n */\nexport function useStyles(styles: UseStylesOptions): UseStylesResult {\n  return computeStyles(styles);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsCA,SAAgB,UAAU,QAA2C;AACnE,QAAO,cAAc,OAAO"}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { CacheMetrics, CounterStyleDescriptors, DisposeFunction, FontFaceDescriptors, FontFaceInput, InjectResult, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule } from "./injector/types.js";
+import { CacheMetrics, CounterStyleDescriptors, DisposeFunction, FontFaceDescriptors, FontFaceInput, GCConfig, GCOptions, InjectResult, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule, StyleUsage } from "./injector/types.js";
 import { CSSProperties } from "./utils/css-types.js";
 import { Bucket, ParserOptions, ProcessedStyle, StyleDetails, StyleDetailsPart, UnitHandler } from "./parser/types.js";
 import { StyleParser } from "./parser/parser.js";
@@ -29,7 +29,7 @@ import { useCounterStyle } from "./hooks/useCounterStyle.js";
 import { getDisplayName } from "./utils/get-display-name.js";
 import { styleHandlers } from "./styles/predefined.js";
 import { ComputeStylesOptions, ComputeStylesResult, computeStyles } from "./compute-styles.js";
-import { PropertyOptions, cleanup, counterStyle, createInjector, destroy, fontFace, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property } from "./injector/index.js";
+import { PropertyOptions, cleanup, counterStyle, createInjector, destroy, fontFace, gc, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, maybeGC, property, touch } from "./injector/index.js";
 import { filterBaseProps } from "./utils/filter-base-props.js";
 import { color } from "./utils/colors.js";
 import { _modAttrs } from "./utils/mod-attrs.js";
@@ -47,5 +47,5 @@ declare module './utils/css-types' {
   interface CSSProperties extends CSSProperties$1 {}
 }
 //#endregion
-export { type AllBaseProps, type AllBasePropsWithMods, AtRuleContext, BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, type BaseProps, type BasePropsWithoutChildren, BaseStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, BlockStyleProps, Bucket, CHUNK_NAMES, COLOR_STYLES, CONTAINER_STYLES, CSSMap, CSSProperties, CUSTOM_UNITS, CacheMetrics, ChunkInfo, ChunkName, ColorSpace, ColorStyleProps, ComputeStylesOptions, ComputeStylesResult, ConditionNode, ConfigTokenValue, ConfigTokens, ContainerStyleProps, CounterStyleDescriptors, DIMENSION_STYLES, DIRECTIONS, DimensionStyleProps, DisposeFunction, Element, type ElementsDefinition, FLOW_STYLES, FlowStyleProps, FontFaceDescriptors, FontFaceInput, GlobalStyledProps, INNER_STYLES, InjectResult, InnerStyleProps, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, type ModPropDef, type ModPropsInput, ModValue, Mods, NoType, NotSelector, OUTER_STYLES, OuterStyleProps, POSITION_STYLES, ParseStateKeyOptions, ParsedAdvancedState, ParsedColor, ParserOptions, PositionStyleProps, ProcessedStyle, PropertyDefinition, PropertyOptions, Props, RawCSSResult, RawStyleHandler, RecipeStyles, RenderResult, type ResolveModPropDef, type ResolveModProps, type ResolveTokenProps, RootRegistry, RuleInfo, STYLE_TO_CHUNK, Selector, SheetInfo, SheetManager, ShortGridStyles, StateParserContext, StyleDetails, StyleDetailsPart, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleInjector, StyleInjectorConfig, StyleMap, StyleParser, StylePropValue, StyleResult, StyleRule, StyleValue, StyleValueStateMap, Styles, StylesInterface, StylesWithoutSelectors, type SubElementDefinition, type SubElementProps, SuffixForSelector, TEXT_STYLES, TagName, TastyConfig, type TastyElementOptions, type TastyElementProps, TastyExtensionConfig, TastyNamedColors, TastyPlugin, TastyPluginFactory, TastyPresetNames, type TastyProps, TastyThemeNames, TextStyleProps, type TokenPropsInput, TokenValue, Tokens, TypographyPreset, UnitHandler, type UsePropertyOptions, type UseStylesOptions, type UseStylesResult, type VariantMap, type WithVariant, categorizeStyleKeys, cleanup, color, computeStyles, configure, counterStyle, createInjector, createStateParserContext, customFunc, deprecationWarning, destroy, dotize, filterBaseProps, filterMods, fontFace, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, getGlobalCounterStyle, getGlobalFontFace, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getNamedColorHex, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateKey, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleHandlers, tasty, tastyDebug, useCounterStyle, useFontFace, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };
+export { type AllBaseProps, type AllBasePropsWithMods, AtRuleContext, BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, type BaseProps, type BasePropsWithoutChildren, BaseStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, BlockStyleProps, Bucket, CHUNK_NAMES, COLOR_STYLES, CONTAINER_STYLES, CSSMap, CSSProperties, CUSTOM_UNITS, CacheMetrics, ChunkInfo, ChunkName, ColorSpace, ColorStyleProps, ComputeStylesOptions, ComputeStylesResult, ConditionNode, ConfigTokenValue, ConfigTokens, ContainerStyleProps, CounterStyleDescriptors, DIMENSION_STYLES, DIRECTIONS, DimensionStyleProps, DisposeFunction, Element, type ElementsDefinition, FLOW_STYLES, FlowStyleProps, FontFaceDescriptors, FontFaceInput, GCConfig, GCOptions, GlobalStyledProps, INNER_STYLES, InjectResult, InnerStyleProps, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, type ModPropDef, type ModPropsInput, ModValue, Mods, NoType, NotSelector, OUTER_STYLES, OuterStyleProps, POSITION_STYLES, ParseStateKeyOptions, ParsedAdvancedState, ParsedColor, ParserOptions, PositionStyleProps, ProcessedStyle, PropertyDefinition, PropertyOptions, Props, RawCSSResult, RawStyleHandler, RecipeStyles, RenderResult, type ResolveModPropDef, type ResolveModProps, type ResolveTokenProps, RootRegistry, RuleInfo, STYLE_TO_CHUNK, Selector, SheetInfo, SheetManager, ShortGridStyles, StateParserContext, StyleDetails, StyleDetailsPart, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleInjector, StyleInjectorConfig, StyleMap, StyleParser, StylePropValue, StyleResult, StyleRule, StyleUsage, StyleValue, StyleValueStateMap, Styles, StylesInterface, StylesWithoutSelectors, type SubElementDefinition, type SubElementProps, SuffixForSelector, TEXT_STYLES, TagName, TastyConfig, type TastyElementOptions, type TastyElementProps, TastyExtensionConfig, TastyNamedColors, TastyPlugin, TastyPluginFactory, TastyPresetNames, type TastyProps, TastyThemeNames, TextStyleProps, type TokenPropsInput, TokenValue, Tokens, TypographyPreset, UnitHandler, type UsePropertyOptions, type UseStylesOptions, type UseStylesResult, type VariantMap, type WithVariant, categorizeStyleKeys, cleanup, color, computeStyles, configure, counterStyle, createInjector, createStateParserContext, customFunc, deprecationWarning, destroy, dotize, filterBaseProps, filterMods, fontFace, gc, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, getGlobalCounterStyle, getGlobalFontFace, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getNamedColorHex, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, maybeGC, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateKey, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleHandlers, tasty, tastyDebug, touch, useCounterStyle, useFontFace, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -13,7 +13,7 @@ import { isSelector, renderStyles } from "./pipeline/index.js";
 import { configure, getConfig, getGlobalCounterStyle, getGlobalFontFace, getGlobalKeyframes, getGlobalRecipes, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, isConfigLocked, isTestEnvironment, resetConfig } from "./config.js";
 import { CHUNK_NAMES, STYLE_TO_CHUNK, categorizeStyleKeys } from "./chunks/definitions.js";
 import { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from "./styles/list.js";
-import { cleanup, counterStyle, createInjector, destroy, fontFace, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property } from "./injector/index.js";
+import { cleanup, counterStyle, createInjector, destroy, fontFace, gc, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, maybeGC, property, touch } from "./injector/index.js";
 import { mergeStyles } from "./utils/merge-styles.js";
 import { resolveRecipes } from "./utils/resolve-recipes.js";
 import { computeStyles } from "./compute-styles.js";
@@ -33,4 +33,4 @@ import { useKeyframes } from "./hooks/useKeyframes.js";
 import { useProperty } from "./hooks/useProperty.js";
 import { useFontFace } from "./hooks/useFontFace.js";
 import { useCounterStyle } from "./hooks/useCounterStyle.js";
-export { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, Bucket, CHUNK_NAMES, COLOR_STYLES, CONTAINER_STYLES, CUSTOM_UNITS, DIMENSION_STYLES, DIRECTIONS, Element, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, STYLE_TO_CHUNK, SheetManager, StyleInjector, StyleParser, TEXT_STYLES, categorizeStyleKeys, cleanup, color, computeStyles, configure, counterStyle, createInjector, createStateParserContext, customFunc, deprecationWarning, destroy, dotize, filterBaseProps, filterMods, fontFace, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, getGlobalCounterStyle, getGlobalFontFace, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getNamedColorHex, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateKey, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleHandlers, tasty, tastyDebug, useCounterStyle, useFontFace, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };
+export { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, Bucket, CHUNK_NAMES, COLOR_STYLES, CONTAINER_STYLES, CUSTOM_UNITS, DIMENSION_STYLES, DIRECTIONS, Element, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, STYLE_TO_CHUNK, SheetManager, StyleInjector, StyleParser, TEXT_STYLES, categorizeStyleKeys, cleanup, color, computeStyles, configure, counterStyle, createInjector, createStateParserContext, customFunc, deprecationWarning, destroy, dotize, filterBaseProps, filterMods, fontFace, gc, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, getGlobalCounterStyle, getGlobalFontFace, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getNamedColorHex, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, maybeGC, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateKey, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleHandlers, tasty, tastyDebug, touch, useCounterStyle, useFontFace, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };

package/dist/injector/index.d.ts

@@ -1,4 +1,4 @@
-import { CacheMetrics, CounterStyleDescriptors, DisposeFunction, FontFaceDescriptors, FontFaceInput, GlobalInjectResult, InjectResult, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule } from "./types.js";
+import { CacheMetrics, CounterStyleDescriptors, DisposeFunction, FontFaceDescriptors, FontFaceInput, GCConfig, GCOptions, GlobalInjectResult, InjectResult, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule, StyleUsage } from "./types.js";
 import { StyleResult } from "../pipeline/index.js";
 import { SheetManager } from "./sheet-manager.js";
 import { StyleInjector } from "./injector.js";
@@ -143,6 +143,27 @@ declare function getCssTextForNode(node: ParentNode | Element | DocumentFragment
  * Force cleanup of unused rules
  */
 declare function cleanup(root?: Document | ShadowRoot): void;
+/**
+ * Record a render-time usage hit for one or more classNames.
+ * Used internally by computeStyles and tasty() to track style popularity for GC.
+ */
+declare function touch(className: string, options?: {
+  root?: Document | ShadowRoot;
+}): void;
+/**
+ * Synchronous garbage collection of unused styles.
+ * Scans the DOM for live classNames (never evicts them), then evicts
+ * absent styles whose age exceeds their popularity-weighted TTL.
+ *
+ * @returns Number of styles evicted.
+ */
+declare function gc(options?: GCOptions): number;
+/**
+ * Event-driven GC with cooldown.
+ * Skips if called within the configured cooldown of the last run.
+ * Schedules via requestIdleCallback when available.
+ */
+declare function maybeGC(options?: GCOptions): void;
 /**
  * Check if we're currently running in a test environment
  */
@@ -162,5 +183,5 @@ declare function destroy(root?: Document | ShadowRoot): void;
  */
 declare function createInjector(config?: Partial<StyleInjectorConfig>): StyleInjector;
 //#endregion
-export { PropertyOptions, cleanup, counterStyle, createInjector, destroy, fontFace, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property };
+export { PropertyOptions, cleanup, counterStyle, createInjector, destroy, fontFace, gc, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, maybeGC, property, touch };
 //# sourceMappingURL=index.d.ts.map

package/dist/injector/index.js

@@ -133,6 +133,32 @@ function cleanup(root) {
 	return getGlobalInjector().cleanup(root);
 }
 /**
+* Record a render-time usage hit for one or more classNames.
+* Used internally by computeStyles and tasty() to track style popularity for GC.
+*/
+function touch(className, options) {
+	if (!getConfig().gc) return;
+	getGlobalInjector().touch(className, options);
+}
+/**
+* Synchronous garbage collection of unused styles.
+* Scans the DOM for live classNames (never evicts them), then evicts
+* absent styles whose age exceeds their popularity-weighted TTL.
+*
+* @returns Number of styles evicted.
+*/
+function gc(options) {
+	return getGlobalInjector().gc(options);
+}
+/**
+* Event-driven GC with cooldown.
+* Skips if called within the configured cooldown of the last run.
+* Schedules via requestIdleCallback when available.
+*/
+function maybeGC(options) {
+	return getGlobalInjector().maybeGC(options);
+}
+/**
 * Check if we're currently running in a test environment
 */
 function getIsTestEnvironment() {
@@ -161,6 +187,6 @@ function createInjector(config = {}) {
 	});
 }
 //#endregion
-export { cleanup, counterStyle, createInjector, destroy, fontFace, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, property };
+export { cleanup, counterStyle, createInjector, destroy, fontFace, gc, getCssText, getCssTextForNode, getIsTestEnvironment, getRawCSSText, inject, injectGlobal, injectRawCSS, injector, isPropertyDefined, keyframes, maybeGC, property, touch };
 
 //# sourceMappingURL=index.js.map

package/dist/injector/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/injector/index.ts"],"sourcesContent":["import {\n  getConfig,\n  getGlobalInjector,\n  isTestEnvironment,\n  markStylesGenerated,\n} from '../config';\nimport type { StyleResult } from '../pipeline';\n\nimport { StyleInjector } from './injector';\nimport type {\n  CounterStyleDescriptors,\n  FontFaceDescriptors,\n  GlobalInjectResult,\n  InjectResult,\n  KeyframesResult,\n  KeyframesSteps,\n  StyleInjectorConfig,\n} from './types';\n\n/**\n * Inject styles and return className with dispose function\n */\nexport function inject(\n  rules: StyleResult[],\n  options?: { root?: Document | ShadowRoot; cacheKey?: string },\n): InjectResult {\n  const injector = getGlobalInjector();\n\n  markStylesGenerated();\n\n  return injector.inject(rules, options);\n}\n\n/**\n * Inject global rules that should not reserve tasty class names\n */\nexport function injectGlobal(\n  rules: StyleResult[],\n  options?: { root?: Document | ShadowRoot },\n): GlobalInjectResult {\n  return getGlobalInjector().injectGlobal(rules, options);\n}\n\n/**\n * Inject raw CSS text directly without parsing\n * This is a low-overhead method for injecting raw CSS that doesn't need tasty processing.\n * The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking.\n *\n * @example\n * ```tsx\n * // Inject raw CSS\n * const { dispose } = injectRawCSS(`\n *   body { margin: 0; padding: 0; }\n *   .my-class { color: red; }\n * `);\n *\n * // Later, remove the injected CSS\n * dispose();\n * ```\n */\nexport function injectRawCSS(\n  css: string,\n  options?: { root?: Document | ShadowRoot },\n): { dispose: () => void } {\n  return getGlobalInjector().injectRawCSS(css, options);\n}\n\n/**\n * Get raw CSS text for SSR\n */\nexport function getRawCSSText(options?: {\n  root?: Document | ShadowRoot;\n}): string {\n  return getGlobalInjector().getRawCSSText(options);\n}\n\n/**\n * Inject keyframes and return object with toString() and dispose()\n */\nexport function keyframes(\n  steps: KeyframesSteps,\n  nameOrOptions?: string | { root?: Document | ShadowRoot; name?: string },\n): KeyframesResult {\n  return getGlobalInjector().keyframes(steps, nameOrOptions);\n}\n\nexport interface PropertyOptions {\n  /**\n   * CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>')\n   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax\n   */\n  syntax?: string;\n  /**\n   * Whether the property inherits from parent elements\n   * @default true\n   */\n  inherits?: boolean;\n  /**\n   * Initial value for the property\n   */\n  initialValue?: string | number;\n  /**\n   * Shadow root or document to inject into\n   */\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Define a CSS @property custom property.\n * This enables advanced features like animating custom properties.\n *\n * Note: @property rules are global and persistent once defined.\n * Re-registering the same property name is a no-op.\n *\n * @param name - The custom property name (must start with --)\n * @param options - Property configuration\n *\n * @example\n * ```ts\n * // Define a color property that can be animated\n * property('--my-color', {\n *   syntax: '<color>',\n *   initialValue: 'red',\n * });\n *\n * // Define an angle property\n * property('--rotation', {\n *   syntax: '<angle>',\n *   inherits: false,\n *   initialValue: '0deg',\n * });\n * ```\n */\nexport function property(name: string, options?: PropertyOptions): void {\n  return getGlobalInjector().property(name, options);\n}\n\n/**\n * Check if a CSS @property has already been defined\n *\n * @param name - The custom property name to check\n * @param options - Options including root\n */\nexport function isPropertyDefined(\n  name: string,\n  options?: { root?: Document | ShadowRoot },\n): boolean {\n  return getGlobalInjector().isPropertyDefined(name, options);\n}\n\n/**\n * Inject a CSS @font-face rule.\n *\n * Permanent and global — no dispose or ref-counting.\n * Deduplicates by content hash (family + descriptors).\n */\nexport function fontFace(\n  family: string,\n  descriptors: FontFaceDescriptors,\n  options?: { root?: Document | ShadowRoot },\n): void {\n  return getGlobalInjector().fontFace(family, descriptors, options);\n}\n\n/**\n * Inject a CSS @counter-style rule.\n *\n * Permanent and global — no dispose or ref-counting.\n * Deduplicates by name (first definition wins).\n */\nexport function counterStyle(\n  name: string,\n  descriptors: CounterStyleDescriptors,\n  options?: { root?: Document | ShadowRoot },\n): void {\n  return getGlobalInjector().counterStyle(name, descriptors, options);\n}\n\n/**\n * Get CSS text from all sheets (for SSR)\n */\nexport function getCssText(options?: { root?: Document | ShadowRoot }): string {\n  return getGlobalInjector().getCssText(options);\n}\n\n/**\n * Collect only CSS used by a rendered subtree (like jest-styled-components).\n * Pass the container returned by render(...).\n */\nexport function getCssTextForNode(\n  node: ParentNode | Element | DocumentFragment,\n  options?: { root?: Document | ShadowRoot },\n): string {\n  // Collect tasty-generated class names (t<number>) from the subtree\n  const classSet = new Set<string>();\n\n  const readClasses = (el: Element) => {\n    const cls = el.getAttribute('class');\n    if (!cls) return;\n    for (const token of cls.split(/\\s+/)) {\n      if (/^t\\d+$/.test(token)) classSet.add(token);\n    }\n  };\n\n  // Include node itself if it's an Element\n  if ((node as Element).getAttribute) {\n    readClasses(node as Element);\n  }\n  // Walk descendants\n  const elements = (node as ParentNode).querySelectorAll\n    ? (node as ParentNode).querySelectorAll('[class]')\n    : ([] as unknown as NodeListOf<Element>);\n  if (elements) elements.forEach(readClasses);\n\n  return getGlobalInjector().getCssTextForClasses(classSet, options);\n}\n\n/**\n * Force cleanup of unused rules\n */\nexport function cleanup(root?: Document | ShadowRoot): void {\n  return getGlobalInjector().cleanup(root);\n}\n\n/**\n * Check if we're currently running in a test environment\n */\nexport function getIsTestEnvironment(): boolean {\n  return isTestEnvironment();\n}\n\n/**\n * Get the global injector instance for debugging\n */\nexport const injector = {\n  get instance() {\n    return getGlobalInjector();\n  },\n};\n\n/**\n * Destroy all resources and clean up\n */\nexport function destroy(root?: Document | ShadowRoot): void {\n  return getGlobalInjector().destroy(root);\n}\n\n/**\n * Create a new isolated injector instance\n */\nexport function createInjector(\n  config: Partial<StyleInjectorConfig> = {},\n): StyleInjector {\n  const defaultConfig = getConfig();\n\n  const fullConfig: StyleInjectorConfig = {\n    ...defaultConfig,\n    // Auto-enable forceTextInjection in test environments\n    forceTextInjection: config.forceTextInjection ?? isTestEnvironment(),\n    ...config,\n  };\n\n  return new StyleInjector(fullConfig);\n}\n\n// Re-export types\nexport type {\n  StyleInjectorConfig,\n  InjectResult,\n  DisposeFunction,\n  RuleInfo,\n  SheetInfo,\n  RootRegistry,\n  StyleRule,\n  KeyframesInfo,\n  KeyframesResult,\n  KeyframesSteps,\n  KeyframesCacheEntry,\n  CacheMetrics,\n  RawCSSResult,\n  PropertyDefinition,\n  FontFaceDescriptors,\n  FontFaceInput,\n  CounterStyleDescriptors,\n} from './types';\n\nexport { StyleInjector } from './injector';\nexport { SheetManager } from './sheet-manager';\n"],"mappings":";;;;;;;AAsBA,SAAgB,OACd,OACA,SACc;CACd,MAAM,WAAW,mBAAmB;AAEpC,sBAAqB;AAErB,QAAO,SAAS,OAAO,OAAO,QAAQ;;;;;AAMxC,SAAgB,aACd,OACA,SACoB;AACpB,QAAO,mBAAmB,CAAC,aAAa,OAAO,QAAQ;;;;;;;;;;;;;;;;;;;AAoBzD,SAAgB,aACd,KACA,SACyB;AACzB,QAAO,mBAAmB,CAAC,aAAa,KAAK,QAAQ;;;;;AAMvD,SAAgB,cAAc,SAEnB;AACT,QAAO,mBAAmB,CAAC,cAAc,QAAQ;;;;;AAMnD,SAAgB,UACd,OACA,eACiB;AACjB,QAAO,mBAAmB,CAAC,UAAU,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkD5D,SAAgB,SAAS,MAAc,SAAiC;AACtE,QAAO,mBAAmB,CAAC,SAAS,MAAM,QAAQ;;;;;;;;AASpD,SAAgB,kBACd,MACA,SACS;AACT,QAAO,mBAAmB,CAAC,kBAAkB,MAAM,QAAQ;;;;;;;;AAS7D,SAAgB,SACd,QACA,aACA,SACM;AACN,QAAO,mBAAmB,CAAC,SAAS,QAAQ,aAAa,QAAQ;;;;;;;;AASnE,SAAgB,aACd,MACA,aACA,SACM;AACN,QAAO,mBAAmB,CAAC,aAAa,MAAM,aAAa,QAAQ;;;;;AAMrE,SAAgB,WAAW,SAAoD;AAC7E,QAAO,mBAAmB,CAAC,WAAW,QAAQ;;;;;;AAOhD,SAAgB,kBACd,MACA,SACQ;CAER,MAAM,2BAAW,IAAI,KAAa;CAElC,MAAM,eAAe,OAAgB;EACnC,MAAM,MAAM,GAAG,aAAa,QAAQ;AACpC,MAAI,CAAC,IAAK;AACV,OAAK,MAAM,SAAS,IAAI,MAAM,MAAM,CAClC,KAAI,SAAS,KAAK,MAAM,CAAE,UAAS,IAAI,MAAM;;AAKjD,KAAK,KAAiB,aACpB,aAAY,KAAgB;CAG9B,MAAM,WAAY,KAAoB,mBACjC,KAAoB,iBAAiB,UAAU,GAC/C,EAAE;AACP,KAAI,SAAU,UAAS,QAAQ,YAAY;AAE3C,QAAO,mBAAmB,CAAC,qBAAqB,UAAU,QAAQ;;;;;AAMpE,SAAgB,QAAQ,MAAoC;AAC1D,QAAO,mBAAmB,CAAC,QAAQ,KAAK;;;;;AAM1C,SAAgB,uBAAgC;AAC9C,QAAO,mBAAmB;;;;;AAM5B,MAAa,WAAW,EACtB,IAAI,WAAW;AACb,QAAO,mBAAmB;GAE7B;;;;AAKD,SAAgB,QAAQ,MAAoC;AAC1D,QAAO,mBAAmB,CAAC,QAAQ,KAAK;;;;;AAM1C,SAAgB,eACd,SAAuC,EAAE,EAC1B;AAUf,QAAO,IAAI,cAP6B;EACtC,GAHoB,WAAW;EAK/B,oBAAoB,OAAO,sBAAsB,mBAAmB;EACpE,GAAG;EACJ,CAEmC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/injector/index.ts"],"sourcesContent":["import {\n  getConfig,\n  getGlobalInjector,\n  isTestEnvironment,\n  markStylesGenerated,\n} from '../config';\nimport type { StyleResult } from '../pipeline';\n\nimport { StyleInjector } from './injector';\nimport type {\n  CounterStyleDescriptors,\n  FontFaceDescriptors,\n  GCOptions,\n  GlobalInjectResult,\n  InjectResult,\n  KeyframesResult,\n  KeyframesSteps,\n  StyleInjectorConfig,\n} from './types';\n\n/**\n * Inject styles and return className with dispose function\n */\nexport function inject(\n  rules: StyleResult[],\n  options?: { root?: Document | ShadowRoot; cacheKey?: string },\n): InjectResult {\n  const injector = getGlobalInjector();\n\n  markStylesGenerated();\n\n  return injector.inject(rules, options);\n}\n\n/**\n * Inject global rules that should not reserve tasty class names\n */\nexport function injectGlobal(\n  rules: StyleResult[],\n  options?: { root?: Document | ShadowRoot },\n): GlobalInjectResult {\n  return getGlobalInjector().injectGlobal(rules, options);\n}\n\n/**\n * Inject raw CSS text directly without parsing\n * This is a low-overhead method for injecting raw CSS that doesn't need tasty processing.\n * The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking.\n *\n * @example\n * ```tsx\n * // Inject raw CSS\n * const { dispose } = injectRawCSS(`\n *   body { margin: 0; padding: 0; }\n *   .my-class { color: red; }\n * `);\n *\n * // Later, remove the injected CSS\n * dispose();\n * ```\n */\nexport function injectRawCSS(\n  css: string,\n  options?: { root?: Document | ShadowRoot },\n): { dispose: () => void } {\n  return getGlobalInjector().injectRawCSS(css, options);\n}\n\n/**\n * Get raw CSS text for SSR\n */\nexport function getRawCSSText(options?: {\n  root?: Document | ShadowRoot;\n}): string {\n  return getGlobalInjector().getRawCSSText(options);\n}\n\n/**\n * Inject keyframes and return object with toString() and dispose()\n */\nexport function keyframes(\n  steps: KeyframesSteps,\n  nameOrOptions?: string | { root?: Document | ShadowRoot; name?: string },\n): KeyframesResult {\n  return getGlobalInjector().keyframes(steps, nameOrOptions);\n}\n\nexport interface PropertyOptions {\n  /**\n   * CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>')\n   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax\n   */\n  syntax?: string;\n  /**\n   * Whether the property inherits from parent elements\n   * @default true\n   */\n  inherits?: boolean;\n  /**\n   * Initial value for the property\n   */\n  initialValue?: string | number;\n  /**\n   * Shadow root or document to inject into\n   */\n  root?: Document | ShadowRoot;\n}\n\n/**\n * Define a CSS @property custom property.\n * This enables advanced features like animating custom properties.\n *\n * Note: @property rules are global and persistent once defined.\n * Re-registering the same property name is a no-op.\n *\n * @param name - The custom property name (must start with --)\n * @param options - Property configuration\n *\n * @example\n * ```ts\n * // Define a color property that can be animated\n * property('--my-color', {\n *   syntax: '<color>',\n *   initialValue: 'red',\n * });\n *\n * // Define an angle property\n * property('--rotation', {\n *   syntax: '<angle>',\n *   inherits: false,\n *   initialValue: '0deg',\n * });\n * ```\n */\nexport function property(name: string, options?: PropertyOptions): void {\n  return getGlobalInjector().property(name, options);\n}\n\n/**\n * Check if a CSS @property has already been defined\n *\n * @param name - The custom property name to check\n * @param options - Options including root\n */\nexport function isPropertyDefined(\n  name: string,\n  options?: { root?: Document | ShadowRoot },\n): boolean {\n  return getGlobalInjector().isPropertyDefined(name, options);\n}\n\n/**\n * Inject a CSS @font-face rule.\n *\n * Permanent and global — no dispose or ref-counting.\n * Deduplicates by content hash (family + descriptors).\n */\nexport function fontFace(\n  family: string,\n  descriptors: FontFaceDescriptors,\n  options?: { root?: Document | ShadowRoot },\n): void {\n  return getGlobalInjector().fontFace(family, descriptors, options);\n}\n\n/**\n * Inject a CSS @counter-style rule.\n *\n * Permanent and global — no dispose or ref-counting.\n * Deduplicates by name (first definition wins).\n */\nexport function counterStyle(\n  name: string,\n  descriptors: CounterStyleDescriptors,\n  options?: { root?: Document | ShadowRoot },\n): void {\n  return getGlobalInjector().counterStyle(name, descriptors, options);\n}\n\n/**\n * Get CSS text from all sheets (for SSR)\n */\nexport function getCssText(options?: { root?: Document | ShadowRoot }): string {\n  return getGlobalInjector().getCssText(options);\n}\n\n/**\n * Collect only CSS used by a rendered subtree (like jest-styled-components).\n * Pass the container returned by render(...).\n */\nexport function getCssTextForNode(\n  node: ParentNode | Element | DocumentFragment,\n  options?: { root?: Document | ShadowRoot },\n): string {\n  // Collect tasty-generated class names (t<number>) from the subtree\n  const classSet = new Set<string>();\n\n  const readClasses = (el: Element) => {\n    const cls = el.getAttribute('class');\n    if (!cls) return;\n    for (const token of cls.split(/\\s+/)) {\n      if (/^t\\d+$/.test(token)) classSet.add(token);\n    }\n  };\n\n  // Include node itself if it's an Element\n  if ((node as Element).getAttribute) {\n    readClasses(node as Element);\n  }\n  // Walk descendants\n  const elements = (node as ParentNode).querySelectorAll\n    ? (node as ParentNode).querySelectorAll('[class]')\n    : ([] as unknown as NodeListOf<Element>);\n  if (elements) elements.forEach(readClasses);\n\n  return getGlobalInjector().getCssTextForClasses(classSet, options);\n}\n\n/**\n * Force cleanup of unused rules\n */\nexport function cleanup(root?: Document | ShadowRoot): void {\n  return getGlobalInjector().cleanup(root);\n}\n\n/**\n * Record a render-time usage hit for one or more classNames.\n * Used internally by computeStyles and tasty() to track style popularity for GC.\n */\nexport function touch(\n  className: string,\n  options?: { root?: Document | ShadowRoot },\n): void {\n  if (!getConfig().gc) return;\n  getGlobalInjector().touch(className, options);\n}\n\n/**\n * Synchronous garbage collection of unused styles.\n * Scans the DOM for live classNames (never evicts them), then evicts\n * absent styles whose age exceeds their popularity-weighted TTL.\n *\n * @returns Number of styles evicted.\n */\nexport function gc(options?: GCOptions): number {\n  return getGlobalInjector().gc(options);\n}\n\n/**\n * Event-driven GC with cooldown.\n * Skips if called within the configured cooldown of the last run.\n * Schedules via requestIdleCallback when available.\n */\nexport function maybeGC(options?: GCOptions): void {\n  return getGlobalInjector().maybeGC(options);\n}\n\n/**\n * Check if we're currently running in a test environment\n */\nexport function getIsTestEnvironment(): boolean {\n  return isTestEnvironment();\n}\n\n/**\n * Get the global injector instance for debugging\n */\nexport const injector = {\n  get instance() {\n    return getGlobalInjector();\n  },\n};\n\n/**\n * Destroy all resources and clean up\n */\nexport function destroy(root?: Document | ShadowRoot): void {\n  return getGlobalInjector().destroy(root);\n}\n\n/**\n * Create a new isolated injector instance\n */\nexport function createInjector(\n  config: Partial<StyleInjectorConfig> = {},\n): StyleInjector {\n  const defaultConfig = getConfig();\n\n  const fullConfig: StyleInjectorConfig = {\n    ...defaultConfig,\n    // Auto-enable forceTextInjection in test environments\n    forceTextInjection: config.forceTextInjection ?? isTestEnvironment(),\n    ...config,\n  };\n\n  return new StyleInjector(fullConfig);\n}\n\n// Re-export types\nexport type {\n  StyleInjectorConfig,\n  InjectResult,\n  DisposeFunction,\n  RuleInfo,\n  SheetInfo,\n  RootRegistry,\n  StyleRule,\n  KeyframesInfo,\n  KeyframesResult,\n  KeyframesSteps,\n  KeyframesCacheEntry,\n  CacheMetrics,\n  RawCSSResult,\n  PropertyDefinition,\n  FontFaceDescriptors,\n  FontFaceInput,\n  CounterStyleDescriptors,\n  StyleUsage,\n  GCConfig,\n  GCOptions,\n} from './types';\n\nexport { StyleInjector } from './injector';\nexport { SheetManager } from './sheet-manager';\n"],"mappings":";;;;;;;AAuBA,SAAgB,OACd,OACA,SACc;CACd,MAAM,WAAW,mBAAmB;AAEpC,sBAAqB;AAErB,QAAO,SAAS,OAAO,OAAO,QAAQ;;;;;AAMxC,SAAgB,aACd,OACA,SACoB;AACpB,QAAO,mBAAmB,CAAC,aAAa,OAAO,QAAQ;;;;;;;;;;;;;;;;;;;AAoBzD,SAAgB,aACd,KACA,SACyB;AACzB,QAAO,mBAAmB,CAAC,aAAa,KAAK,QAAQ;;;;;AAMvD,SAAgB,cAAc,SAEnB;AACT,QAAO,mBAAmB,CAAC,cAAc,QAAQ;;;;;AAMnD,SAAgB,UACd,OACA,eACiB;AACjB,QAAO,mBAAmB,CAAC,UAAU,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkD5D,SAAgB,SAAS,MAAc,SAAiC;AACtE,QAAO,mBAAmB,CAAC,SAAS,MAAM,QAAQ;;;;;;;;AASpD,SAAgB,kBACd,MACA,SACS;AACT,QAAO,mBAAmB,CAAC,kBAAkB,MAAM,QAAQ;;;;;;;;AAS7D,SAAgB,SACd,QACA,aACA,SACM;AACN,QAAO,mBAAmB,CAAC,SAAS,QAAQ,aAAa,QAAQ;;;;;;;;AASnE,SAAgB,aACd,MACA,aACA,SACM;AACN,QAAO,mBAAmB,CAAC,aAAa,MAAM,aAAa,QAAQ;;;;;AAMrE,SAAgB,WAAW,SAAoD;AAC7E,QAAO,mBAAmB,CAAC,WAAW,QAAQ;;;;;;AAOhD,SAAgB,kBACd,MACA,SACQ;CAER,MAAM,2BAAW,IAAI,KAAa;CAElC,MAAM,eAAe,OAAgB;EACnC,MAAM,MAAM,GAAG,aAAa,QAAQ;AACpC,MAAI,CAAC,IAAK;AACV,OAAK,MAAM,SAAS,IAAI,MAAM,MAAM,CAClC,KAAI,SAAS,KAAK,MAAM,CAAE,UAAS,IAAI,MAAM;;AAKjD,KAAK,KAAiB,aACpB,aAAY,KAAgB;CAG9B,MAAM,WAAY,KAAoB,mBACjC,KAAoB,iBAAiB,UAAU,GAC/C,EAAE;AACP,KAAI,SAAU,UAAS,QAAQ,YAAY;AAE3C,QAAO,mBAAmB,CAAC,qBAAqB,UAAU,QAAQ;;;;;AAMpE,SAAgB,QAAQ,MAAoC;AAC1D,QAAO,mBAAmB,CAAC,QAAQ,KAAK;;;;;;AAO1C,SAAgB,MACd,WACA,SACM;AACN,KAAI,CAAC,WAAW,CAAC,GAAI;AACrB,oBAAmB,CAAC,MAAM,WAAW,QAAQ;;;;;;;;;AAU/C,SAAgB,GAAG,SAA6B;AAC9C,QAAO,mBAAmB,CAAC,GAAG,QAAQ;;;;;;;AAQxC,SAAgB,QAAQ,SAA2B;AACjD,QAAO,mBAAmB,CAAC,QAAQ,QAAQ;;;;;AAM7C,SAAgB,uBAAgC;AAC9C,QAAO,mBAAmB;;;;;AAM5B,MAAa,WAAW,EACtB,IAAI,WAAW;AACb,QAAO,mBAAmB;GAE7B;;;;AAKD,SAAgB,QAAQ,MAAoC;AAC1D,QAAO,mBAAmB,CAAC,QAAQ,KAAK;;;;;AAM1C,SAAgB,eACd,SAAuC,EAAE,EAC1B;AAUf,QAAO,IAAI,cAP6B;EACtC,GAHoB,WAAW;EAK/B,oBAAoB,OAAO,sBAAsB,mBAAmB;EACpE,GAAG;EACJ,CAEmC"}

package/dist/injector/injector.d.ts

@@ -1,4 +1,4 @@
-import { CacheMetrics, CounterStyleDescriptors, FontFaceDescriptors, GlobalInjectResult, InjectResult, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, StyleInjectorConfig } from "./types.js";
+import { CacheMetrics, CounterStyleDescriptors, FontFaceDescriptors, GCOptions, GlobalInjectResult, InjectResult, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, StyleInjectorConfig } from "./types.js";
 import { StyleResult } from "../pipeline/index.js";
 import { SheetManager } from "./sheet-manager.js";
 
@@ -6,8 +6,10 @@ import { SheetManager } from "./sheet-manager.js";
 declare class StyleInjector {
   private sheetManager;
   private config;
-  private cleanupScheduled;
   private globalRuleCounter;
+  private lastGCTime;
+  private backgroundSweepTimeout;
+  private pendingGCHandle;
   /** @internal — exposed for debug utilities only */
   get _sheetManager(): SheetManager;
   constructor(config?: StyleInjectorConfig);
@@ -60,7 +62,7 @@ declare class StyleInjector {
     root?: Document | ShadowRoot;
   }): InjectResult | null;
   /**
-   * Dispose of a className
+   * Dispose of a className (decrements refCount only).
    */
   private dispose;
   /**
@@ -156,6 +158,33 @@ declare class StyleInjector {
    * Dispose keyframes
    */
   private disposeKeyframes;
+  private static readonly TOUCH_THROTTLE_MS;
+  private static readonly TASTY_CLASS_RE;
+  /**
+   * Record a render-time usage hit for one or more classNames.
+   * Handles space-separated multi-chunk classNames.
+   * No-op on the server.
+   */
+  touch(className: string, options?: {
+    root?: Document | ShadowRoot;
+  }): void;
+  /**
+   * Synchronous garbage collection.
+   *
+   * 1. Scans the DOM for live tasty classNames (safety guard).
+   * 2. Scores each non-live className via popularity-weighted TTL.
+   * 3. Marks evictable styles with refCount = 0 and deletes them.
+   * 4. Optionally enforces a hard `cacheCapacity` cap.
+   *
+   * @returns Number of styles evicted.
+   */
+  gc(options?: GCOptions): number;
+  /**
+   * Event-driven GC with cooldown.
+   * Skips if called within `cooldown` ms of the last run.
+   * Schedules the actual GC via `requestIdleCallback` when available.
+   */
+  maybeGC(options?: GCOptions): void;
   /**
    * Destroy all resources for a root
    */