@tenphi/tasty 2.0.3 → 2.0.4

package/dist/hooks/useCounterStyle.js

@@ -1,65 +0,0 @@
-import { hashString } from "../utils/hash.js";
-import { formatCounterStyleRule } from "../counter-style/index.js";
-import { getGlobalInjector } from "../config.js";
-import { getStyleTarget, pushRSCCSS } from "../rsc-cache.js";
-//#region src/hooks/useCounterStyle.ts
-let clientCounterStyleCounter = 0;
-const clientContentToName = /* @__PURE__ */ new Map();
-/**
-* 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 target = getStyleTarget();
-	if (target.mode === "ssr") {
-		const actualName = target.collector.allocateCounterStyleName(options?.name);
-		const css = formatCounterStyleRule(actualName, descriptors);
-		target.collector.collectCounterStyle(actualName, css);
-		return actualName;
-	}
-	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 = options?.name ?? `cs${hashString(serializedContent)}`;
-		const css = formatCounterStyleRule(actualName, descriptors);
-		pushRSCCSS(target.cache, key, css);
-		target.cache.generatedNames.set(key, actualName);
-		return actualName;
-	}
-	const serializedContent = JSON.stringify(descriptors);
-	const cacheKey = `${options?.name ?? ""}:${serializedContent}`;
-	const existingName = clientContentToName.get(cacheKey);
-	if (existingName) return existingName;
-	const name = options?.name ?? `cs${clientCounterStyleCounter++}`;
-	clientContentToName.set(cacheKey, name);
-	getGlobalInjector().counterStyle(name, descriptors, { root: options?.root });
-	return name;
-}
-//#endregion
-export { useCounterStyle };
-
-//# sourceMappingURL=useCounterStyle.js.map

package/dist/hooks/useCounterStyle.js.map

@@ -1 +0,0 @@
-{"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';\nimport { hashString } from '../utils/hash';\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 = options?.name ?? `cs${hashString(serializedContent)}`;\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":";;;;;AAWA,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,aAAa,SAAS,QAAQ,KAAK,WAAW,kBAAkB;EACtE,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.d.ts

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

package/dist/hooks/useFontFace.js

@@ -1,66 +0,0 @@
-import { fontFaceContentHash, formatFontFaceRule } from "../font-face/index.js";
-import { getGlobalInjector } from "../config.js";
-import { getStyleTarget, pushRSCCSS } from "../rsc-cache.js";
-//#region src/hooks/useFontFace.ts
-/**
-* Inject CSS @font-face rules.
-* Permanent — no cleanup on unmount. Deduplicates by content hash.
-*
-* Works in all environments: client, SSR with collector, and React Server Components.
-*
-* @param family - The font-family name
-* @param input - Single descriptor object or array of descriptors (for multiple weights/styles)
-* @param options - Optional settings (e.g. Shadow DOM root)
-*
-* @example Single weight
-* ```tsx
-* function App() {
-*   useFontFace('Brand Sans', {
-*     src: 'url("/fonts/brand-sans.woff2") format("woff2")',
-*     fontWeight: '400 700',
-*     fontDisplay: 'swap',
-*   });
-*
-*   return <div style={{ fontFamily: '"Brand Sans", sans-serif' }}>Hello</div>;
-* }
-* ```
-*
-* @example Multiple weights
-* ```tsx
-* function App() {
-*   useFontFace('Brand Sans', [
-*     { src: 'url("/fonts/brand-regular.woff2") format("woff2")', fontWeight: 400, fontDisplay: 'swap' },
-*     { src: 'url("/fonts/brand-bold.woff2") format("woff2")', fontWeight: 700, fontDisplay: 'swap' },
-*   ]);
-*
-*   return <div style={{ fontFamily: '"Brand Sans", sans-serif' }}>Hello</div>;
-* }
-* ```
-*/
-function useFontFace(family, input, options) {
-	if (!family) return;
-	const descriptors = Array.isArray(input) ? input : [input];
-	const target = getStyleTarget();
-	if (target.mode === "ssr") {
-		for (const desc of descriptors) {
-			const hash = fontFaceContentHash(family, desc);
-			const css = formatFontFaceRule(family, desc);
-			target.collector.collectFontFace(hash, css);
-		}
-		return;
-	}
-	if (target.mode === "rsc") {
-		for (const desc of descriptors) {
-			const hash = fontFaceContentHash(family, desc);
-			const css = formatFontFaceRule(family, desc);
-			pushRSCCSS(target.cache, `__ff:${hash}`, css);
-		}
-		return;
-	}
-	const injector = getGlobalInjector();
-	for (const desc of descriptors) injector.fontFace(family, desc, { root: options?.root });
-}
-//#endregion
-export { useFontFace };
-
-//# sourceMappingURL=useFontFace.js.map

package/dist/hooks/useFontFace.js.map

@@ -1 +0,0 @@
-{"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

@@ -1,46 +0,0 @@
-import { Styles } from "../styles/types.js";
-
-//#region src/hooks/useGlobalStyles.d.ts
-interface UseGlobalStylesOptions {
-  /**
-   * 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;
-}
-/**
- * Inject global styles for a given selector.
- * Useful for styling elements by selector without generating classNames.
- *
- * SSR-aware: when a ServerStyleCollector is available, CSS is collected
- * during the render phase instead of being injected into the DOM.
- *
- * Works in all environments: client, SSR with collector, and React Server Components.
- *
- * Injected styles are permanent — they are not cleaned up on component unmount.
- * Use the `id` option for update tracking when styles change over the
- * component lifecycle.
- *
- * @param selector - CSS selector to apply styles to (e.g., '.my-class', ':root', 'body')
- * @param styles - Tasty styles object
- * @param options - Optional settings including `id` for update tracking
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   useGlobalStyles('.card', {
- *     padding: '2x',
- *     radius: '1r',
- *     fill: '#white',
- *   });
- *
- *   return <div className="card">Content</div>;
- * }
- * ```
- */
-declare function useGlobalStyles(selector: string, styles?: Styles, options?: UseGlobalStylesOptions): void;
-//#endregion
-export { useGlobalStyles };
-//# sourceMappingURL=useGlobalStyles.d.ts.map

package/dist/hooks/useGlobalStyles.js

@@ -1,88 +0,0 @@
-import { hashString } from "../utils/hash.js";
-import { renderStyles } from "../pipeline/index.js";
-import { getConfig } from "../config.js";
-import { injectGlobal } from "../injector/index.js";
-import { getStyleTarget, pushRSCCSS } from "../rsc-cache.js";
-import { collectAutoInferredProperties, collectAutoInferredPropertiesRSC } from "../ssr/collect-auto-properties.js";
-import { resolveRecipes } from "../utils/resolve-recipes.js";
-import { formatGlobalRules } from "../ssr/format-global-rules.js";
-//#region src/hooks/useGlobalStyles.ts
-const clientGlobalEntries = /* @__PURE__ */ new Map();
-/**
-* Inject global styles for a given selector.
-* Useful for styling elements by selector without generating classNames.
-*
-* SSR-aware: when a ServerStyleCollector is available, CSS is collected
-* during the render phase instead of being injected into the DOM.
-*
-* Works in all environments: client, SSR with collector, and React Server Components.
-*
-* Injected styles are permanent — they are not cleaned up on component unmount.
-* Use the `id` option for update tracking when styles change over the
-* component lifecycle.
-*
-* @param selector - CSS selector to apply styles to (e.g., '.my-class', ':root', 'body')
-* @param styles - Tasty styles object
-* @param options - Optional settings including `id` for update tracking
-*
-* @example
-* ```tsx
-* function MyComponent() {
-*   useGlobalStyles('.card', {
-*     padding: '2x',
-*     radius: '1r',
-*     fill: '#white',
-*   });
-*
-*   return <div className="card">Content</div>;
-* }
-* ```
-*/
-function useGlobalStyles(selector, styles, options) {
-	if (!styles) return;
-	if (!selector) {
-		console.warn("[Tasty] useGlobalStyles: selector is required and cannot be empty. Styles will not be injected.");
-		return;
-	}
-	const target = getStyleTarget();
-	if (target.mode === "client") {
-		const slotKey = options?.id ?? selector;
-		const stylesKey = JSON.stringify(styles);
-		const existing = clientGlobalEntries.get(slotKey);
-		if (existing && existing.stylesKey === stylesKey) return;
-	}
-	const resolvedStyles = resolveRecipes(styles);
-	const styleResults = renderStyles(resolvedStyles, selector);
-	if (styleResults.length === 0) return;
-	if (target.mode === "ssr") {
-		target.collector.collectInternals();
-		const css = formatGlobalRules(styleResults);
-		if (css) {
-			const key = options?.id ? `global:${options.id}` : `global:${selector}:${hashString(css)}`;
-			target.collector.collectGlobalStyles(key, css);
-		}
-		if (getConfig().autoPropertyTypes !== false) collectAutoInferredProperties(styleResults, target.collector, resolvedStyles);
-		return;
-	}
-	if (target.mode === "rsc") {
-		const css = formatGlobalRules(styleResults);
-		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 existing = clientGlobalEntries.get(slotKey);
-	if (existing) existing.dispose();
-	const { dispose } = injectGlobal(styleResults);
-	clientGlobalEntries.set(slotKey, {
-		stylesKey: JSON.stringify(styles),
-		dispose
-	});
-}
-//#endregion
-export { useGlobalStyles };
-
-//# sourceMappingURL=useGlobalStyles.js.map

package/dist/hooks/useGlobalStyles.js.map

@@ -1 +0,0 @@
-{"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.d.ts

@@ -1,58 +0,0 @@
-import { KeyframesSteps } from "../injector/types.js";
-
-//#region src/hooks/useKeyframes.d.ts
-interface UseKeyframesOptions {
-  name?: string;
-  root?: Document | ShadowRoot;
-}
-/**
- * Inject CSS @keyframes and return the generated animation name.
- * Deduplicates by content — identical steps always return the same name.
- *
- * Works in all environments: client, SSR with collector, and React Server Components.
- *
- * @example Basic usage - steps object is the dependency
- * ```tsx
- * function MyComponent() {
- *   const bounce = useKeyframes({
- *     '0%': { transform: 'scale(1)' },
- *     '50%': { transform: 'scale(1.1)' },
- *     '100%': { transform: 'scale(1)' },
- *   });
- *
- *   return <div style={{ animation: `${bounce} 1s infinite` }}>Bouncing</div>;
- * }
- * ```
- *
- * @example With custom name
- * ```tsx
- * function MyComponent() {
- *   const fadeIn = useKeyframes(
- *     { from: { opacity: 0 }, to: { opacity: 1 } },
- *     { name: 'fadeIn' }
- *   );
- *
- *   return <div style={{ animation: `${fadeIn} 0.3s ease-out` }}>Fading in</div>;
- * }
- * ```
- *
- * @example Factory function with dependencies
- * ```tsx
- * function MyComponent({ scale }: { scale: number }) {
- *   const pulse = useKeyframes(
- *     () => ({
- *       '0%': { transform: 'scale(1)' },
- *       '100%': { transform: `scale(${scale})` },
- *     }),
- *     [scale]
- *   );
- *
- *   return <div style={{ animation: `${pulse} 1s infinite` }}>Pulsing</div>;
- * }
- * ```
- */
-declare function useKeyframes(steps: KeyframesSteps, options?: UseKeyframesOptions): string;
-declare function useKeyframes(factory: () => KeyframesSteps, deps: readonly unknown[], options?: UseKeyframesOptions): string;
-//#endregion
-export { useKeyframes };
-//# sourceMappingURL=useKeyframes.d.ts.map

package/dist/hooks/useKeyframes.js

@@ -1,55 +0,0 @@
-import { hashString } from "../utils/hash.js";
-import { keyframes } from "../injector/index.js";
-import { getStyleTarget, pushRSCCSS } from "../rsc-cache.js";
-import { formatKeyframesCSS } from "../ssr/format-keyframes.js";
-import { depsEqual } from "../utils/deps-equal.js";
-//#region src/hooks/useKeyframes.ts
-const clientContentToName = /* @__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;
-	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 "";
-	if (target.mode === "ssr") {
-		const actualName = target.collector.allocateKeyframeName(opts?.name);
-		const css = formatKeyframesCSS(actualName, steps);
-		target.collector.collectKeyframes(actualName, css);
-		return actualName;
-	}
-	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${hashString(serializedContent)}`;
-		const css = formatKeyframesCSS(actualName, steps);
-		pushRSCCSS(target.cache, key, css);
-		target.cache.generatedNames.set(key, actualName);
-		return actualName;
-	}
-	const serializedContent = JSON.stringify(steps);
-	const cacheKey = `${opts?.name ?? ""}:${serializedContent}`;
-	const cachedName = clientContentToName.get(cacheKey);
-	if (cachedName) return cachedName;
-	const name = keyframes(steps, {
-		name: opts?.name,
-		root: opts?.root
-	}).toString();
-	clientContentToName.set(cacheKey, name);
-	if (deps && opts?.name) factoryDepsCache.set(opts.name, {
-		deps,
-		name
-	});
-	return name;
-}
-//#endregion
-export { useKeyframes };
-
-//# sourceMappingURL=useKeyframes.js.map

package/dist/hooks/useKeyframes.js.map

@@ -1 +0,0 @@
-{"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';\nimport { hashString } from '../utils/hash';\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${hashString(serializedContent)}`;\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":";;;;;;AAYA,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,WAAW,kBAAkB;EAClE,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"}

package/dist/hooks/useProperty.d.ts

@@ -1,81 +0,0 @@
-//#region src/hooks/useProperty.d.ts
-interface UsePropertyOptions {
-  /**
-   * CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>').
-   * For color tokens (#name), this is auto-set to '<color>' and cannot be overridden.
-   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax
-   */
-  syntax?: string;
-  /**
-   * Whether the property inherits from parent elements
-   * @default true
-   */
-  inherits?: boolean;
-  /**
-   * Initial value for the property.
-   * For color tokens (#name), this defaults to 'transparent' if not specified.
-   */
-  initialValue?: string | number;
-  /**
-   * Shadow root or document to inject into
-   */
-  root?: Document | ShadowRoot;
-}
-/**
- * Register a CSS @property custom property.
- * This enables advanced features like animating custom properties.
- *
- * Note: @property rules are global and persistent once defined.
- * The function ensures the property is only registered once per root.
- *
- * Accepts tasty token syntax for the property name:
- * - `$name` → defines `--name`
- * - `#name` → defines `--name-color` (auto-sets syntax: '<color>', defaults initialValue: 'transparent')
- * - `--name` → defines `--name` (legacy format)
- *
- * Works in all environments: client, SSR with collector, and React Server Components.
- *
- * @param name - The property token ($name, #name) or CSS property name (--name)
- * @param options - Property configuration
- *
- * @example Basic property with token syntax
- * ```tsx
- * function Spinner() {
- *   useProperty('$rotation', {
- *     syntax: '<angle>',
- *     inherits: false,
- *     initialValue: '0deg',
- *   });
- *
- *   return <div className="spinner" />;
- * }
- * ```
- *
- * @example Color property with token syntax (auto-sets syntax)
- * ```tsx
- * function MyComponent() {
- *   useProperty('#theme', {
- *     initialValue: 'red', // syntax: '<color>' is auto-set
- *   });
- *
- *   // Now --theme-color can be animated with CSS transitions
- *   return <div style={{ '--theme-color': 'blue' } as React.CSSProperties}>Colored</div>;
- * }
- * ```
- *
- * @example Legacy format (still supported)
- * ```tsx
- * function ResizableBox() {
- *   useProperty('--box-size', {
- *     syntax: '<length>',
- *     initialValue: '100px',
- *   });
- *
- *   return <div style={{ width: 'var(--box-size)' }} />;
- * }
- * ```
- */
-declare function useProperty(name: string, options?: UsePropertyOptions): void;
-//#endregion
-export { UsePropertyOptions, useProperty };
-//# sourceMappingURL=useProperty.d.ts.map

package/dist/hooks/useProperty.js

@@ -1,96 +0,0 @@
-import { getGlobalInjector } from "../config.js";
-import { getStyleTarget, pushRSCCSS } from "../rsc-cache.js";
-import { formatPropertyCSS } from "../ssr/format-property.js";
-//#region src/hooks/useProperty.ts
-/**
-* Register a CSS @property custom property.
-* This enables advanced features like animating custom properties.
-*
-* Note: @property rules are global and persistent once defined.
-* The function ensures the property is only registered once per root.
-*
-* Accepts tasty token syntax for the property name:
-* - `$name` → defines `--name`
-* - `#name` → defines `--name-color` (auto-sets syntax: '<color>', defaults initialValue: 'transparent')
-* - `--name` → defines `--name` (legacy format)
-*
-* Works in all environments: client, SSR with collector, and React Server Components.
-*
-* @param name - The property token ($name, #name) or CSS property name (--name)
-* @param options - Property configuration
-*
-* @example Basic property with token syntax
-* ```tsx
-* function Spinner() {
-*   useProperty('$rotation', {
-*     syntax: '<angle>',
-*     inherits: false,
-*     initialValue: '0deg',
-*   });
-*
-*   return <div className="spinner" />;
-* }
-* ```
-*
-* @example Color property with token syntax (auto-sets syntax)
-* ```tsx
-* function MyComponent() {
-*   useProperty('#theme', {
-*     initialValue: 'red', // syntax: '<color>' is auto-set
-*   });
-*
-*   // Now --theme-color can be animated with CSS transitions
-*   return <div style={{ '--theme-color': 'blue' } as React.CSSProperties}>Colored</div>;
-* }
-* ```
-*
-* @example Legacy format (still supported)
-* ```tsx
-* function ResizableBox() {
-*   useProperty('--box-size', {
-*     syntax: '<length>',
-*     initialValue: '100px',
-*   });
-*
-*   return <div style={{ width: 'var(--box-size)' }} />;
-* }
-* ```
-*/
-function useProperty(name, options) {
-	if (!name) {
-		console.warn(`[Tasty] useProperty: property name is required`);
-		return;
-	}
-	const target = getStyleTarget();
-	if (target.mode === "ssr") {
-		target.collector.collectInternals();
-		const css = formatPropertyCSS(name, {
-			syntax: options?.syntax,
-			inherits: options?.inherits,
-			initialValue: options?.initialValue
-		});
-		if (css) target.collector.collectProperty(name, css);
-		return;
-	}
-	if (target.mode === "rsc") {
-		const css = formatPropertyCSS(name, {
-			syntax: options?.syntax,
-			inherits: options?.inherits,
-			initialValue: options?.initialValue
-		});
-		if (css) pushRSCCSS(target.cache, `__prop:${name}`, css);
-		return;
-	}
-	const injector = getGlobalInjector();
-	if (injector.isPropertyDefined(name, { root: options?.root })) return;
-	injector.property(name, {
-		syntax: options?.syntax,
-		inherits: options?.inherits,
-		initialValue: options?.initialValue,
-		root: options?.root
-	});
-}
-//#endregion
-export { useProperty };
-
-//# sourceMappingURL=useProperty.js.map