@tenphi/tasty 0.8.0 → 0.10.0

package/dist/ssr/collector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collector.js","names":[],"sources":["../../src/ssr/collector.ts"],"sourcesContent":["/**\n * ServerStyleCollector — server-safe style collector for SSR.\n *\n * Accumulates CSS rules and cache metadata during server rendering.\n * This is the server-side counterpart to StyleInjector: it allocates\n * sequential class names (t0, t1, …), formats CSS rules into text,\n * and serializes the cache state for client hydration.\n *\n * One instance is created per HTTP request. Concurrent requests\n * each get their own collector (via AsyncLocalStorage or React context).\n */\n\nimport {\n  getGlobalProperties,\n  hasGlobalProperties,\n  INTERNAL_PROPERTIES,\n  INTERNAL_TOKENS,\n} from '../config';\nimport type { StyleResult } from '../pipeline';\nimport { formatPropertyCSS } from './format-property';\nimport { formatRules } from './format-rules';\n\n/**\n * Cache state serialized to the client for hydration.\n */\nexport interface SSRCacheState {\n  /** cacheKey → className map, to pre-populate the client registry */\n  entries: Record<string, string>;\n  /** Counter value so client allocations don't collide with server ones */\n  classCounter: number;\n}\n\nfunction generateClassName(counter: number): string {\n  return `t${counter}`;\n}\n\nexport class ServerStyleCollector {\n  private chunks = new Map<string, string>();\n  private cacheKeyToClassName = new Map<string, string>();\n  private classCounter = 0;\n  private flushedKeys = new Set<string>();\n  private propertyRules = new Map<string, string>();\n  private flushedPropertyKeys = new Set<string>();\n  private keyframeRules = new Map<string, string>();\n  private flushedKeyframeKeys = new Set<string>();\n  private globalStyles = new Map<string, string>();\n  private flushedGlobalKeys = new Set<string>();\n  private rawCSS = new Map<string, string>();\n  private flushedRawKeys = new Set<string>();\n  private keyframesCounter = 0;\n  private internalsCollected = false;\n\n  /**\n   * Collect internal @property rules and :root token defaults.\n   * Mirrors markStylesGenerated() from the client-side injector.\n   * Called automatically on first chunk collection; idempotent.\n   */\n  collectInternals(): void {\n    if (this.internalsCollected) return;\n    this.internalsCollected = true;\n\n    for (const [token, definition] of Object.entries(INTERNAL_PROPERTIES)) {\n      const css = formatPropertyCSS(token, definition);\n      if (css) {\n        this.collectProperty(`__internal:${token}`, css);\n      }\n    }\n\n    if (hasGlobalProperties()) {\n      const globalProps = getGlobalProperties();\n      if (globalProps) {\n        for (const [token, definition] of Object.entries(globalProps)) {\n          const css = formatPropertyCSS(token, definition);\n          if (css) {\n            this.collectProperty(`__global:${token}`, css);\n          }\n        }\n      }\n    }\n\n    const tokenEntries = Object.entries(INTERNAL_TOKENS);\n    if (tokenEntries.length > 0) {\n      const declarations = tokenEntries\n        .map(([name, value]) => `${name}: ${value}`)\n        .join('; ');\n      this.collectProperty(\n        '__internal:root-tokens',\n        `:root { ${declarations} }`,\n      );\n    }\n  }\n\n  /**\n   * Allocate a className for a cache key, server-side.\n   * Mirrors StyleInjector.allocateClassName but without DOM access.\n   */\n  allocateClassName(cacheKey: string): {\n    className: string;\n    isNewAllocation: boolean;\n  } {\n    const existing = this.cacheKeyToClassName.get(cacheKey);\n    if (existing) {\n      return { className: existing, isNewAllocation: false };\n    }\n\n    const className = generateClassName(this.classCounter++);\n    this.cacheKeyToClassName.set(cacheKey, className);\n\n    return { className, isNewAllocation: true };\n  }\n\n  /**\n   * Record CSS rules for a chunk.\n   * Called by useStyles during server render.\n   */\n  collectChunk(\n    cacheKey: string,\n    className: string,\n    rules: StyleResult[],\n  ): void {\n    if (this.chunks.has(cacheKey)) return;\n    const css = formatRules(rules, className);\n    if (css) {\n      this.chunks.set(cacheKey, css);\n    }\n  }\n\n  /**\n   * Record a @property rule. Deduplicated by name.\n   */\n  collectProperty(name: string, css: string): void {\n    if (!this.propertyRules.has(name)) {\n      this.propertyRules.set(name, css);\n    }\n  }\n\n  /**\n   * Record a @keyframes rule. Deduplicated by name.\n   */\n  collectKeyframes(name: string, css: string): void {\n    if (!this.keyframeRules.has(name)) {\n      this.keyframeRules.set(name, css);\n    }\n  }\n\n  /**\n   * Allocate a keyframe name for SSR. Uses provided name or generates one.\n   */\n  allocateKeyframeName(providedName?: string): string {\n    return providedName ?? `k${this.keyframesCounter++}`;\n  }\n\n  /**\n   * Record global styles (from useGlobalStyles). Deduplicated by key.\n   */\n  collectGlobalStyles(key: string, css: string): void {\n    if (!this.globalStyles.has(key)) {\n      this.globalStyles.set(key, css);\n    }\n  }\n\n  /**\n   * Record raw CSS text (from useRawCSS). Deduplicated by key.\n   */\n  collectRawCSS(key: string, css: string): void {\n    if (!this.rawCSS.has(key)) {\n      this.rawCSS.set(key, css);\n    }\n  }\n\n  /**\n   * Extract all CSS collected so far as a single string.\n   * Includes @property and @keyframes rules.\n   * Used for non-streaming SSR (renderToString).\n   */\n  getCSS(): string {\n    const parts: string[] = [];\n\n    for (const css of this.propertyRules.values()) {\n      parts.push(css);\n    }\n\n    for (const css of this.rawCSS.values()) {\n      parts.push(css);\n    }\n\n    for (const css of this.globalStyles.values()) {\n      parts.push(css);\n    }\n\n    for (const css of this.chunks.values()) {\n      parts.push(css);\n    }\n\n    for (const css of this.keyframeRules.values()) {\n      parts.push(css);\n    }\n\n    return parts.join('\\n');\n  }\n\n  /**\n   * Flush only newly collected CSS since the last flush.\n   * Used for streaming SSR (renderToPipeableStream + useServerInsertedHTML).\n   */\n  flushCSS(): string {\n    const parts: string[] = [];\n\n    for (const [name, css] of this.propertyRules) {\n      if (!this.flushedPropertyKeys.has(name)) {\n        parts.push(css);\n        this.flushedPropertyKeys.add(name);\n      }\n    }\n\n    for (const [key, css] of this.rawCSS) {\n      if (!this.flushedRawKeys.has(key)) {\n        parts.push(css);\n        this.flushedRawKeys.add(key);\n      }\n    }\n\n    for (const [key, css] of this.globalStyles) {\n      if (!this.flushedGlobalKeys.has(key)) {\n        parts.push(css);\n        this.flushedGlobalKeys.add(key);\n      }\n    }\n\n    for (const [key, css] of this.chunks) {\n      if (!this.flushedKeys.has(key)) {\n        parts.push(css);\n        this.flushedKeys.add(key);\n      }\n    }\n\n    for (const [name, css] of this.keyframeRules) {\n      if (!this.flushedKeyframeKeys.has(name)) {\n        parts.push(css);\n        this.flushedKeyframeKeys.add(name);\n      }\n    }\n\n    return parts.join('\\n');\n  }\n\n  /**\n   * Serialize the cache state for client hydration.\n   */\n  getCacheState(): SSRCacheState {\n    const entries: Record<string, string> = {};\n    for (const [cacheKey, className] of this.cacheKeyToClassName) {\n      entries[cacheKey] = className;\n    }\n    return { entries, classCounter: this.classCounter };\n  }\n}\n"],"mappings":"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"}

package/dist/ssr/context.d.ts

@@ -0,0 +1,8 @@
+import { ServerStyleCollector } from "./collector.js";
+import * as react from "react";
+
+//#region src/ssr/context.d.ts
+declare const TastySSRContext: react.Context<ServerStyleCollector | null>;
+//#endregion
+export { TastySSRContext };
+//# sourceMappingURL=context.d.ts.map

package/dist/ssr/context.js

@@ -0,0 +1,14 @@
+import { createContext } from "react";
+
+//#region src/ssr/context.ts
+/**
+* React context for SSR collector discovery.
+*
+* Used by Next.js TastyRegistry to provide the ServerStyleCollector
+* to useStyles() via React context (the streaming-compatible path).
+*/
+const TastySSRContext = createContext(null);
+
+//#endregion
+export { TastySSRContext };
+//# sourceMappingURL=context.js.map

package/dist/ssr/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../src/ssr/context.ts"],"sourcesContent":["/**\n * React context for SSR collector discovery.\n *\n * Used by Next.js TastyRegistry to provide the ServerStyleCollector\n * to useStyles() via React context (the streaming-compatible path).\n */\n\nimport { createContext } from 'react';\n\nimport type { ServerStyleCollector } from './collector';\n\nexport const TastySSRContext = createContext<ServerStyleCollector | null>(null);\n"],"mappings":";;;;;;;;;AAWA,MAAa,kBAAkB,cAA2C,KAAK"}

package/dist/ssr/format-global-rules.js

@@ -0,0 +1,22 @@
+//#region src/ssr/format-global-rules.ts
+/**
+* Format an array of global StyleResult rules into a CSS text string.
+*
+* Rules already have their full selectors applied by renderStyles().
+* Handles rootPrefix prepending and at-rule wrapping.
+*/
+function formatGlobalRules(rules) {
+	if (rules.length === 0) return "";
+	const cssRules = [];
+	for (const rule of rules) {
+		const baseRule = `${rule.rootPrefix ? `${rule.rootPrefix} ${rule.selector}` : rule.selector} { ${rule.declarations} }`;
+		let fullRule = baseRule;
+		if (rule.atRules && rule.atRules.length > 0) fullRule = rule.atRules.reduce((css, atRule) => `${atRule} { ${css} }`, baseRule);
+		cssRules.push(fullRule);
+	}
+	return cssRules.join("\n");
+}
+
+//#endregion
+export { formatGlobalRules };
+//# sourceMappingURL=format-global-rules.js.map

package/dist/ssr/format-global-rules.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-global-rules.js","names":[],"sources":["../../src/ssr/format-global-rules.ts"],"sourcesContent":["/**\n * Format global CSS rules for SSR output.\n *\n * Unlike formatRules() which applies className-based specificity doubling,\n * this function formats rules that already have their full selectors\n * (from renderStyles called with a selector string).\n */\n\nimport type { StyleResult } from '../pipeline';\n\n/**\n * Format an array of global StyleResult rules into a CSS text string.\n *\n * Rules already have their full selectors applied by renderStyles().\n * Handles rootPrefix prepending and at-rule wrapping.\n */\nexport function formatGlobalRules(rules: StyleResult[]): string {\n  if (rules.length === 0) return '';\n\n  const cssRules: string[] = [];\n\n  for (const rule of rules) {\n    const selector = rule.rootPrefix\n      ? `${rule.rootPrefix} ${rule.selector}`\n      : rule.selector;\n\n    const baseRule = `${selector} { ${rule.declarations} }`;\n\n    let fullRule = baseRule;\n    if (rule.atRules && rule.atRules.length > 0) {\n      fullRule = rule.atRules.reduce(\n        (css, atRule) => `${atRule} { ${css} }`,\n        baseRule,\n      );\n    }\n\n    cssRules.push(fullRule);\n  }\n\n  return cssRules.join('\\n');\n}\n"],"mappings":";;;;;;;AAgBA,SAAgB,kBAAkB,OAA8B;AAC9D,KAAI,MAAM,WAAW,EAAG,QAAO;CAE/B,MAAM,WAAqB,EAAE;AAE7B,MAAK,MAAM,QAAQ,OAAO;EAKxB,MAAM,WAAW,GAJA,KAAK,aAClB,GAAG,KAAK,WAAW,GAAG,KAAK,aAC3B,KAAK,SAEoB,KAAK,KAAK,aAAa;EAEpD,IAAI,WAAW;AACf,MAAI,KAAK,WAAW,KAAK,QAAQ,SAAS,EACxC,YAAW,KAAK,QAAQ,QACrB,KAAK,WAAW,GAAG,OAAO,KAAK,IAAI,KACpC,SACD;AAGH,WAAS,KAAK,SAAS;;AAGzB,QAAO,SAAS,KAAK,KAAK"}

package/dist/ssr/format-keyframes.js

@@ -0,0 +1,70 @@
+import { createStyle } from "../styles/createStyle.js";
+import { STYLE_HANDLER_MAP } from "../styles/index.js";
+
+//#region src/ssr/format-keyframes.ts
+/**
+* Convert keyframes steps to a CSS string.
+* Replicates SheetManager.stepsToCSS() without the class instance.
+*/
+function stepsToCSS(steps) {
+	const rules = [];
+	for (const [key, value] of Object.entries(steps)) {
+		if (typeof value === "string") {
+			rules.push(`${key} { ${value.trim()} }`);
+			continue;
+		}
+		const styleMap = value || {};
+		const styleNames = Object.keys(styleMap).sort();
+		const handlerQueue = [];
+		const seenHandlers = /* @__PURE__ */ new Set();
+		styleNames.forEach((styleName) => {
+			let handlers = STYLE_HANDLER_MAP[styleName];
+			if (!handlers) handlers = STYLE_HANDLER_MAP[styleName] = [createStyle(styleName)];
+			handlers.forEach((handler) => {
+				if (!seenHandlers.has(handler)) {
+					seenHandlers.add(handler);
+					handlerQueue.push(handler);
+				}
+			});
+		});
+		const declarationPairs = [];
+		handlerQueue.forEach((handler) => {
+			const result = handler(handler.__lookupStyles.reduce((acc, name) => {
+				const v = styleMap[name];
+				if (v !== void 0) acc[name] = v;
+				return acc;
+			}, {}));
+			if (!result) return;
+			(Array.isArray(result) ? result : [result]).forEach((cssMap) => {
+				if (!cssMap || typeof cssMap !== "object") return;
+				const { $: _$, ...props } = cssMap;
+				Object.entries(props).forEach(([prop, val]) => {
+					if (val == null || val === "") return;
+					if (Array.isArray(val)) val.forEach((v) => {
+						if (v != null && v !== "") declarationPairs.push({
+							prop,
+							value: String(v)
+						});
+					});
+					else declarationPairs.push({
+						prop,
+						value: String(val)
+					});
+				});
+			});
+		});
+		const declarations = declarationPairs.map((d) => `${d.prop}: ${d.value}`).join("; ");
+		rules.push(`${key} { ${declarations.trim()} }`);
+	}
+	return rules.join(" ");
+}
+/**
+* Format a @keyframes rule as a CSS string.
+*/
+function formatKeyframesCSS(name, steps) {
+	return `@keyframes ${name} { ${stepsToCSS(steps)} }`;
+}
+
+//#endregion
+export { formatKeyframesCSS };
+//# sourceMappingURL=format-keyframes.js.map

package/dist/ssr/format-keyframes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-keyframes.js","names":[],"sources":["../../src/ssr/format-keyframes.ts"],"sourcesContent":["/**\n * Format @keyframes CSS rules for SSR output.\n *\n * Replicates the stepsToCSS logic from SheetManager but as a\n * standalone function that doesn't need DOM access.\n */\n\nimport type { KeyframesSteps } from '../injector/types';\nimport { createStyle, STYLE_HANDLER_MAP } from '../styles';\nimport type { CSSMap, StyleHandler, StyleValueStateMap } from '../utils/styles';\n\n/**\n * Convert keyframes steps to a CSS string.\n * Replicates SheetManager.stepsToCSS() without the class instance.\n */\nfunction stepsToCSS(steps: KeyframesSteps): string {\n  const rules: string[] = [];\n\n  for (const [key, value] of Object.entries(steps)) {\n    if (typeof value === 'string') {\n      rules.push(`${key} { ${value.trim()} }`);\n      continue;\n    }\n\n    const styleMap = (value || {}) as StyleValueStateMap;\n    const styleNames = Object.keys(styleMap).sort();\n    const handlerQueue: StyleHandler[] = [];\n    const seenHandlers = new Set<StyleHandler>();\n\n    styleNames.forEach((styleName) => {\n      let handlers = STYLE_HANDLER_MAP[styleName];\n      if (!handlers) {\n        handlers = STYLE_HANDLER_MAP[styleName] = [createStyle(styleName)];\n      }\n\n      handlers.forEach((handler) => {\n        if (!seenHandlers.has(handler)) {\n          seenHandlers.add(handler);\n          handlerQueue.push(handler);\n        }\n      });\n    });\n\n    const declarationPairs: { prop: string; value: string }[] = [];\n\n    handlerQueue.forEach((handler) => {\n      const lookup = handler.__lookupStyles;\n      const filteredMap = lookup.reduce<StyleValueStateMap>((acc, name) => {\n        const v = styleMap[name];\n        if (v !== undefined) acc[name] = v;\n        return acc;\n      }, {});\n\n      const result = handler(filteredMap);\n      if (!result) return;\n\n      const results = Array.isArray(result) ? result : [result];\n      results.forEach((cssMap) => {\n        if (!cssMap || typeof cssMap !== 'object') return;\n        const { $: _$, ...props } = cssMap as CSSMap;\n\n        Object.entries(props).forEach(([prop, val]) => {\n          if (val == null || val === '') return;\n\n          if (Array.isArray(val)) {\n            val.forEach((v) => {\n              if (v != null && v !== '') {\n                declarationPairs.push({ prop, value: String(v) });\n              }\n            });\n          } else {\n            declarationPairs.push({ prop, value: String(val) });\n          }\n        });\n      });\n    });\n\n    const declarations = declarationPairs\n      .map((d) => `${d.prop}: ${d.value}`)\n      .join('; ');\n\n    rules.push(`${key} { ${declarations.trim()} }`);\n  }\n\n  return rules.join(' ');\n}\n\n/**\n * Format a @keyframes rule as a CSS string.\n */\nexport function formatKeyframesCSS(\n  name: string,\n  steps: KeyframesSteps,\n): string {\n  const cssSteps = stepsToCSS(steps);\n  return `@keyframes ${name} { ${cssSteps} }`;\n}\n"],"mappings":";;;;;;;;AAeA,SAAS,WAAW,OAA+B;CACjD,MAAM,QAAkB,EAAE;AAE1B,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,MAAM,EAAE;AAChD,MAAI,OAAO,UAAU,UAAU;AAC7B,SAAM,KAAK,GAAG,IAAI,KAAK,MAAM,MAAM,CAAC,IAAI;AACxC;;EAGF,MAAM,WAAY,SAAS,EAAE;EAC7B,MAAM,aAAa,OAAO,KAAK,SAAS,CAAC,MAAM;EAC/C,MAAM,eAA+B,EAAE;EACvC,MAAM,+BAAe,IAAI,KAAmB;AAE5C,aAAW,SAAS,cAAc;GAChC,IAAI,WAAW,kBAAkB;AACjC,OAAI,CAAC,SACH,YAAW,kBAAkB,aAAa,CAAC,YAAY,UAAU,CAAC;AAGpE,YAAS,SAAS,YAAY;AAC5B,QAAI,CAAC,aAAa,IAAI,QAAQ,EAAE;AAC9B,kBAAa,IAAI,QAAQ;AACzB,kBAAa,KAAK,QAAQ;;KAE5B;IACF;EAEF,MAAM,mBAAsD,EAAE;AAE9D,eAAa,SAAS,YAAY;GAQhC,MAAM,SAAS,QAPA,QAAQ,eACI,QAA4B,KAAK,SAAS;IACnE,MAAM,IAAI,SAAS;AACnB,QAAI,MAAM,OAAW,KAAI,QAAQ;AACjC,WAAO;MACN,EAAE,CAAC,CAE6B;AACnC,OAAI,CAAC,OAAQ;AAGb,IADgB,MAAM,QAAQ,OAAO,GAAG,SAAS,CAAC,OAAO,EACjD,SAAS,WAAW;AAC1B,QAAI,CAAC,UAAU,OAAO,WAAW,SAAU;IAC3C,MAAM,EAAE,GAAG,IAAI,GAAG,UAAU;AAE5B,WAAO,QAAQ,MAAM,CAAC,SAAS,CAAC,MAAM,SAAS;AAC7C,SAAI,OAAO,QAAQ,QAAQ,GAAI;AAE/B,SAAI,MAAM,QAAQ,IAAI,CACpB,KAAI,SAAS,MAAM;AACjB,UAAI,KAAK,QAAQ,MAAM,GACrB,kBAAiB,KAAK;OAAE;OAAM,OAAO,OAAO,EAAE;OAAE,CAAC;OAEnD;SAEF,kBAAiB,KAAK;MAAE;MAAM,OAAO,OAAO,IAAI;MAAE,CAAC;MAErD;KACF;IACF;EAEF,MAAM,eAAe,iBAClB,KAAK,MAAM,GAAG,EAAE,KAAK,IAAI,EAAE,QAAQ,CACnC,KAAK,KAAK;AAEb,QAAM,KAAK,GAAG,IAAI,KAAK,aAAa,MAAM,CAAC,IAAI;;AAGjD,QAAO,MAAM,KAAK,IAAI;;;;;AAMxB,SAAgB,mBACd,MACA,OACQ;AAER,QAAO,cAAc,KAAK,KADT,WAAW,MAAM,CACM"}

package/dist/ssr/format-property.js

@@ -0,0 +1,48 @@
+import { colorInitialValueToRgb, getEffectiveDefinition } from "../properties/index.js";
+import { parseStyle } from "../utils/styles.js";
+
+//#region src/ssr/format-property.ts
+/**
+* Format a single @property rule as a CSS string.
+*
+* Returns the full `@property --name { ... }` text, or empty string
+* if the token is invalid. For color properties, also returns
+* the companion `-rgb` property.
+*/
+function formatPropertyCSS(token, definition) {
+	const result = getEffectiveDefinition(token, definition);
+	if (!result.isValid) return "";
+	const rules = [];
+	rules.push(buildPropertyRule(result.cssName, result.definition));
+	if (result.isColor) {
+		const rgbCssName = `${result.cssName}-rgb`;
+		const rgbInitial = colorInitialValueToRgb(result.definition.initialValue);
+		rules.push(buildPropertyRule(rgbCssName, {
+			syntax: "<number>+",
+			inherits: result.definition.inherits,
+			initialValue: rgbInitial
+		}));
+	}
+	return rules.join("\n");
+}
+function buildPropertyRule(cssName, definition) {
+	const parts = [];
+	if (definition.syntax != null) {
+		let syntax = String(definition.syntax).trim();
+		if (!/^['"]/u.test(syntax)) syntax = `"${syntax}"`;
+		parts.push(`syntax: ${syntax};`);
+	}
+	const inherits = definition.inherits ?? true;
+	parts.push(`inherits: ${inherits ? "true" : "false"};`);
+	if (definition.initialValue != null) {
+		let initialValueStr;
+		if (typeof definition.initialValue === "number") initialValueStr = String(definition.initialValue);
+		else initialValueStr = parseStyle(definition.initialValue).output;
+		parts.push(`initial-value: ${initialValueStr};`);
+	}
+	return `@property ${cssName} { ${parts.join(" ").trim()} }`;
+}
+
+//#endregion
+export { formatPropertyCSS };
+//# sourceMappingURL=format-property.js.map

package/dist/ssr/format-property.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-property.js","names":[],"sources":["../../src/ssr/format-property.ts"],"sourcesContent":["/**\n * Format @property CSS rules for SSR output.\n *\n * Replicates the CSS construction from StyleInjector.property()\n * but returns a CSS string instead of inserting into the DOM.\n */\n\nimport type { PropertyDefinition } from '../injector/types';\nimport { colorInitialValueToRgb, getEffectiveDefinition } from '../properties';\nimport type { StyleValue } from '../utils/styles';\nimport { parseStyle } from '../utils/styles';\n\n/**\n * Format a single @property rule as a CSS string.\n *\n * Returns the full `@property --name { ... }` text, or empty string\n * if the token is invalid. For color properties, also returns\n * the companion `-rgb` property.\n */\nexport function formatPropertyCSS(\n  token: string,\n  definition: PropertyDefinition,\n): string {\n  const result = getEffectiveDefinition(token, definition);\n  if (!result.isValid) return '';\n\n  const rules: string[] = [];\n\n  rules.push(buildPropertyRule(result.cssName, result.definition));\n\n  if (result.isColor) {\n    const rgbCssName = `${result.cssName}-rgb`;\n    const rgbInitial = colorInitialValueToRgb(result.definition.initialValue);\n    rules.push(\n      buildPropertyRule(rgbCssName, {\n        syntax: '<number>+',\n        inherits: result.definition.inherits,\n        initialValue: rgbInitial,\n      }),\n    );\n  }\n\n  return rules.join('\\n');\n}\n\nfunction buildPropertyRule(\n  cssName: string,\n  definition: PropertyDefinition,\n): string {\n  const parts: string[] = [];\n\n  if (definition.syntax != null) {\n    let syntax = String(definition.syntax).trim();\n    if (!/^['\"]/u.test(syntax)) syntax = `\"${syntax}\"`;\n    parts.push(`syntax: ${syntax};`);\n  }\n\n  const inherits = definition.inherits ?? true;\n  parts.push(`inherits: ${inherits ? 'true' : 'false'};`);\n\n  if (definition.initialValue != null) {\n    let initialValueStr: string;\n    if (typeof definition.initialValue === 'number') {\n      initialValueStr = String(definition.initialValue);\n    } else {\n      initialValueStr = parseStyle(\n        definition.initialValue as StyleValue,\n      ).output;\n    }\n    parts.push(`initial-value: ${initialValueStr};`);\n  }\n\n  const declarations = parts.join(' ').trim();\n  return `@property ${cssName} { ${declarations} }`;\n}\n"],"mappings":";;;;;;;;;;;AAmBA,SAAgB,kBACd,OACA,YACQ;CACR,MAAM,SAAS,uBAAuB,OAAO,WAAW;AACxD,KAAI,CAAC,OAAO,QAAS,QAAO;CAE5B,MAAM,QAAkB,EAAE;AAE1B,OAAM,KAAK,kBAAkB,OAAO,SAAS,OAAO,WAAW,CAAC;AAEhE,KAAI,OAAO,SAAS;EAClB,MAAM,aAAa,GAAG,OAAO,QAAQ;EACrC,MAAM,aAAa,uBAAuB,OAAO,WAAW,aAAa;AACzE,QAAM,KACJ,kBAAkB,YAAY;GAC5B,QAAQ;GACR,UAAU,OAAO,WAAW;GAC5B,cAAc;GACf,CAAC,CACH;;AAGH,QAAO,MAAM,KAAK,KAAK;;AAGzB,SAAS,kBACP,SACA,YACQ;CACR,MAAM,QAAkB,EAAE;AAE1B,KAAI,WAAW,UAAU,MAAM;EAC7B,IAAI,SAAS,OAAO,WAAW,OAAO,CAAC,MAAM;AAC7C,MAAI,CAAC,SAAS,KAAK,OAAO,CAAE,UAAS,IAAI,OAAO;AAChD,QAAM,KAAK,WAAW,OAAO,GAAG;;CAGlC,MAAM,WAAW,WAAW,YAAY;AACxC,OAAM,KAAK,aAAa,WAAW,SAAS,QAAQ,GAAG;AAEvD,KAAI,WAAW,gBAAgB,MAAM;EACnC,IAAI;AACJ,MAAI,OAAO,WAAW,iBAAiB,SACrC,mBAAkB,OAAO,WAAW,aAAa;MAEjD,mBAAkB,WAChB,WAAW,aACZ,CAAC;AAEJ,QAAM,KAAK,kBAAkB,gBAAgB,GAAG;;AAIlD,QAAO,aAAa,QAAQ,KADP,MAAM,KAAK,IAAI,CAAC,MAAM,CACG"}

package/dist/ssr/format-rules.js

@@ -0,0 +1,70 @@
+//#region src/ssr/format-rules.ts
+/**
+* Resolve selectors for a rule, applying className-based specificity doubling
+* and rootPrefix handling. Mirrors the logic in StyleInjector.inject().
+*/
+function resolveSelector(rule, className) {
+	let selector = rule.selector;
+	if (rule.needsClassName) {
+		const selectorParts = selector ? selector.split("|||") : [""];
+		const classPrefix = `.${className}.${className}`;
+		selector = selectorParts.map((part) => {
+			const classSelector = part ? `${classPrefix}${part}` : classPrefix;
+			if (rule.rootPrefix) return `${rule.rootPrefix} ${classSelector}`;
+			return classSelector;
+		}).join(", ");
+	}
+	return selector;
+}
+/**
+* Group rules by selector + at-rules and merge their declarations.
+* Mirrors the grouping logic in SheetManager.insertRule().
+*/
+function groupRules(rules) {
+	const groupMap = /* @__PURE__ */ new Map();
+	const order = [];
+	const atKey = (at) => at && at.length ? at.join("|") : "";
+	for (const r of rules) {
+		const key = `${atKey(r.atRules)}||${r.selector}`;
+		const existing = groupMap.get(key);
+		if (existing) existing.declarations = existing.declarations ? `${existing.declarations} ${r.declarations}` : r.declarations;
+		else {
+			groupMap.set(key, {
+				selector: r.selector,
+				atRules: r.atRules,
+				declarations: r.declarations
+			});
+			order.push(key);
+		}
+	}
+	return order.map((key) => groupMap.get(key));
+}
+/**
+* Format an array of StyleResult rules into a CSS text string.
+*
+* Applies className-based specificity doubling (.cls.cls),
+* groups rules by selector + at-rules, and wraps with at-rule blocks.
+*
+* Produces the same CSS text as SheetManager.insertRule() would insert
+* into the DOM, but as a plain string suitable for SSR output.
+*/
+function formatRules(rules, className) {
+	if (rules.length === 0) return "";
+	const grouped = groupRules(rules.map((rule) => ({
+		selector: resolveSelector(rule, className),
+		declarations: rule.declarations,
+		atRules: rule.atRules
+	})));
+	const cssRules = [];
+	for (const rule of grouped) {
+		const baseRule = `${rule.selector} { ${rule.declarations} }`;
+		let fullRule = baseRule;
+		if (rule.atRules && rule.atRules.length > 0) fullRule = rule.atRules.reduce((css, atRule) => `${atRule} { ${css} }`, baseRule);
+		cssRules.push(fullRule);
+	}
+	return cssRules.join("\n");
+}
+
+//#endregion
+export { formatRules };
+//# sourceMappingURL=format-rules.js.map

package/dist/ssr/format-rules.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-rules.js","names":[],"sources":["../../src/ssr/format-rules.ts"],"sourcesContent":["/**\n * Shared CSS rule formatting utility.\n *\n * Extracted from SheetManager to allow both the DOM-based injector (client)\n * and the ServerStyleCollector (server) to produce identical CSS text\n * from StyleResult arrays.\n */\n\nimport type { StyleResult } from '../pipeline';\n\n/**\n * Resolve selectors for a rule, applying className-based specificity doubling\n * and rootPrefix handling. Mirrors the logic in StyleInjector.inject().\n */\nfunction resolveSelector(rule: StyleResult, className: string): string {\n  let selector = rule.selector;\n\n  if (rule.needsClassName) {\n    const selectorParts = selector ? selector.split('|||') : [''];\n    const classPrefix = `.${className}.${className}`;\n\n    selector = selectorParts\n      .map((part) => {\n        const classSelector = part ? `${classPrefix}${part}` : classPrefix;\n\n        if (rule.rootPrefix) {\n          return `${rule.rootPrefix} ${classSelector}`;\n        }\n        return classSelector;\n      })\n      .join(', ');\n  }\n\n  return selector;\n}\n\n/**\n * Group rules by selector + at-rules and merge their declarations.\n * Mirrors the grouping logic in SheetManager.insertRule().\n */\nfunction groupRules(\n  rules: { selector: string; declarations: string; atRules?: string[] }[],\n): { selector: string; declarations: string; atRules?: string[] }[] {\n  const groupMap = new Map<\n    string,\n    { selector: string; atRules?: string[]; declarations: string }\n  >();\n  const order: string[] = [];\n\n  const atKey = (at?: string[]) => (at && at.length ? at.join('|') : '');\n\n  for (const r of rules) {\n    const key = `${atKey(r.atRules)}||${r.selector}`;\n    const existing = groupMap.get(key);\n    if (existing) {\n      existing.declarations = existing.declarations\n        ? `${existing.declarations} ${r.declarations}`\n        : r.declarations;\n    } else {\n      groupMap.set(key, {\n        selector: r.selector,\n        atRules: r.atRules,\n        declarations: r.declarations,\n      });\n      order.push(key);\n    }\n  }\n\n  return order.map((key) => groupMap.get(key)!);\n}\n\n/**\n * Format an array of StyleResult rules into a CSS text string.\n *\n * Applies className-based specificity doubling (.cls.cls),\n * groups rules by selector + at-rules, and wraps with at-rule blocks.\n *\n * Produces the same CSS text as SheetManager.insertRule() would insert\n * into the DOM, but as a plain string suitable for SSR output.\n */\nexport function formatRules(rules: StyleResult[], className: string): string {\n  if (rules.length === 0) return '';\n\n  const resolvedRules = rules.map((rule) => ({\n    selector: resolveSelector(rule, className),\n    declarations: rule.declarations,\n    atRules: rule.atRules,\n  }));\n\n  const grouped = groupRules(resolvedRules);\n  const cssRules: string[] = [];\n\n  for (const rule of grouped) {\n    const baseRule = `${rule.selector} { ${rule.declarations} }`;\n\n    let fullRule = baseRule;\n    if (rule.atRules && rule.atRules.length > 0) {\n      fullRule = rule.atRules.reduce(\n        (css, atRule) => `${atRule} { ${css} }`,\n        baseRule,\n      );\n    }\n\n    cssRules.push(fullRule);\n  }\n\n  return cssRules.join('\\n');\n}\n"],"mappings":";;;;;AAcA,SAAS,gBAAgB,MAAmB,WAA2B;CACrE,IAAI,WAAW,KAAK;AAEpB,KAAI,KAAK,gBAAgB;EACvB,MAAM,gBAAgB,WAAW,SAAS,MAAM,MAAM,GAAG,CAAC,GAAG;EAC7D,MAAM,cAAc,IAAI,UAAU,GAAG;AAErC,aAAW,cACR,KAAK,SAAS;GACb,MAAM,gBAAgB,OAAO,GAAG,cAAc,SAAS;AAEvD,OAAI,KAAK,WACP,QAAO,GAAG,KAAK,WAAW,GAAG;AAE/B,UAAO;IACP,CACD,KAAK,KAAK;;AAGf,QAAO;;;;;;AAOT,SAAS,WACP,OACkE;CAClE,MAAM,2BAAW,IAAI,KAGlB;CACH,MAAM,QAAkB,EAAE;CAE1B,MAAM,SAAS,OAAmB,MAAM,GAAG,SAAS,GAAG,KAAK,IAAI,GAAG;AAEnE,MAAK,MAAM,KAAK,OAAO;EACrB,MAAM,MAAM,GAAG,MAAM,EAAE,QAAQ,CAAC,IAAI,EAAE;EACtC,MAAM,WAAW,SAAS,IAAI,IAAI;AAClC,MAAI,SACF,UAAS,eAAe,SAAS,eAC7B,GAAG,SAAS,aAAa,GAAG,EAAE,iBAC9B,EAAE;OACD;AACL,YAAS,IAAI,KAAK;IAChB,UAAU,EAAE;IACZ,SAAS,EAAE;IACX,cAAc,EAAE;IACjB,CAAC;AACF,SAAM,KAAK,IAAI;;;AAInB,QAAO,MAAM,KAAK,QAAQ,SAAS,IAAI,IAAI,CAAE;;;;;;;;;;;AAY/C,SAAgB,YAAY,OAAsB,WAA2B;AAC3E,KAAI,MAAM,WAAW,EAAG,QAAO;CAQ/B,MAAM,UAAU,WANM,MAAM,KAAK,UAAU;EACzC,UAAU,gBAAgB,MAAM,UAAU;EAC1C,cAAc,KAAK;EACnB,SAAS,KAAK;EACf,EAAE,CAEsC;CACzC,MAAM,WAAqB,EAAE;AAE7B,MAAK,MAAM,QAAQ,SAAS;EAC1B,MAAM,WAAW,GAAG,KAAK,SAAS,KAAK,KAAK,aAAa;EAEzD,IAAI,WAAW;AACf,MAAI,KAAK,WAAW,KAAK,QAAQ,SAAS,EACxC,YAAW,KAAK,QAAQ,QACrB,KAAK,WAAW,GAAG,OAAO,KAAK,IAAI,KACpC,SACD;AAGH,WAAS,KAAK,SAAS;;AAGzB,QAAO,SAAS,KAAK,KAAK"}

package/dist/ssr/hydrate.d.ts

@@ -0,0 +1,22 @@
+import { SSRCacheState } from "./collector.js";
+
+//#region src/ssr/hydrate.d.ts
+declare global {
+  interface Window {
+    __TASTY_SSR_CACHE__?: SSRCacheState;
+  }
+}
+/**
+ * Pre-populate the client-side style cache from the server's SSR state.
+ *
+ * Call this before ReactDOM.hydrateRoot() or ensure it runs before
+ * any tasty() component renders on the client.
+ *
+ * When called without arguments, reads state from:
+ * 1. `window.__TASTY_SSR_CACHE__` (streaming — populated by inline scripts)
+ * 2. `<script data-tasty-cache>` (non-streaming — JSON payload)
+ */
+declare function hydrateTastyCache(state?: SSRCacheState): void;
+//#endregion
+export { hydrateTastyCache };
+//# sourceMappingURL=hydrate.d.ts.map

package/dist/ssr/hydrate.js

@@ -0,0 +1,50 @@
+import { getGlobalInjector } from "../config.js";
+
+//#region src/ssr/hydrate.ts
+/**
+* Client-side cache hydration for SSR.
+*
+* Pre-populates the client injector's cacheKeyToClassName map from the
+* server's serialized state. This ensures that useStyles() returns
+* cache hits during hydration, skipping the entire rendering pipeline.
+*/
+/**
+* Pre-populate the client-side style cache from the server's SSR state.
+*
+* Call this before ReactDOM.hydrateRoot() or ensure it runs before
+* any tasty() component renders on the client.
+*
+* When called without arguments, reads state from:
+* 1. `window.__TASTY_SSR_CACHE__` (streaming — populated by inline scripts)
+* 2. `<script data-tasty-cache>` (non-streaming — JSON payload)
+*/
+function hydrateTastyCache(state) {
+	if (typeof document === "undefined") return;
+	if (!state) {
+		state = (typeof window !== "undefined" ? window.__TASTY_SSR_CACHE__ : null) ?? void 0;
+		if (!state) {
+			const script = document.querySelector("script[data-tasty-cache]");
+			if (script) try {
+				state = JSON.parse(script.textContent);
+			} catch {
+				return;
+			}
+		}
+	}
+	if (!state) return;
+	const registry = getGlobalInjector()._sheetManager.getRegistry(document);
+	registry.classCounter = Math.max(registry.classCounter, state.classCounter);
+	for (const [cacheKey, className] of Object.entries(state.entries)) {
+		registry.cacheKeyToClassName.set(cacheKey, className);
+		registry.rules.set(className, {
+			className,
+			ruleIndex: -2,
+			sheetIndex: -2
+		});
+		registry.refCounts.set(className, 0);
+	}
+}
+
+//#endregion
+export { hydrateTastyCache };
+//# sourceMappingURL=hydrate.js.map

package/dist/ssr/hydrate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hydrate.js","names":[],"sources":["../../src/ssr/hydrate.ts"],"sourcesContent":["/**\n * Client-side cache hydration for SSR.\n *\n * Pre-populates the client injector's cacheKeyToClassName map from the\n * server's serialized state. This ensures that useStyles() returns\n * cache hits during hydration, skipping the entire rendering pipeline.\n */\n\nimport { getGlobalInjector } from '../config';\nimport type { SSRCacheState } from './collector';\n\ndeclare global {\n  interface Window {\n    __TASTY_SSR_CACHE__?: SSRCacheState;\n  }\n}\n\n/**\n * Pre-populate the client-side style cache from the server's SSR state.\n *\n * Call this before ReactDOM.hydrateRoot() or ensure it runs before\n * any tasty() component renders on the client.\n *\n * When called without arguments, reads state from:\n * 1. `window.__TASTY_SSR_CACHE__` (streaming — populated by inline scripts)\n * 2. `<script data-tasty-cache>` (non-streaming — JSON payload)\n */\nexport function hydrateTastyCache(state?: SSRCacheState): void {\n  if (typeof document === 'undefined') return;\n\n  if (!state) {\n    state =\n      (typeof window !== 'undefined' ? window.__TASTY_SSR_CACHE__ : null) ??\n      undefined;\n    if (!state) {\n      const script = document.querySelector('script[data-tasty-cache]');\n      if (script) {\n        try {\n          state = JSON.parse(script.textContent!) as SSRCacheState;\n        } catch {\n          return;\n        }\n      }\n    }\n  }\n\n  if (!state) return;\n\n  const injector = getGlobalInjector();\n  const registry = injector._sheetManager.getRegistry(document);\n\n  registry.classCounter = Math.max(registry.classCounter, state.classCounter);\n\n  for (const [cacheKey, className] of Object.entries(state.entries)) {\n    registry.cacheKeyToClassName.set(cacheKey, className);\n    registry.rules.set(className, {\n      className,\n      ruleIndex: -2,\n      sheetIndex: -2,\n    });\n    registry.refCounts.set(className, 0);\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA2BA,SAAgB,kBAAkB,OAA6B;AAC7D,KAAI,OAAO,aAAa,YAAa;AAErC,KAAI,CAAC,OAAO;AACV,WACG,OAAO,WAAW,cAAc,OAAO,sBAAsB,SAC9D;AACF,MAAI,CAAC,OAAO;GACV,MAAM,SAAS,SAAS,cAAc,2BAA2B;AACjE,OAAI,OACF,KAAI;AACF,YAAQ,KAAK,MAAM,OAAO,YAAa;WACjC;AACN;;;;AAMR,KAAI,CAAC,MAAO;CAGZ,MAAM,WADW,mBAAmB,CACV,cAAc,YAAY,SAAS;AAE7D,UAAS,eAAe,KAAK,IAAI,SAAS,cAAc,MAAM,aAAa;AAE3E,MAAK,MAAM,CAAC,UAAU,cAAc,OAAO,QAAQ,MAAM,QAAQ,EAAE;AACjE,WAAS,oBAAoB,IAAI,UAAU,UAAU;AACrD,WAAS,MAAM,IAAI,WAAW;GAC5B;GACA,WAAW;GACX,YAAY;GACb,CAAC;AACF,WAAS,UAAU,IAAI,WAAW,EAAE"}

package/dist/ssr/index.d.ts

@@ -0,0 +1,5 @@
+import { SSRCacheState, ServerStyleCollector } from "./collector.js";
+import { hydrateTastyCache } from "./hydrate.js";
+import { TastySSRContext } from "./context.js";
+import { getSSRCollector, runWithCollector } from "./async-storage.js";
+export { type SSRCacheState, ServerStyleCollector, TastySSRContext, getSSRCollector, hydrateTastyCache, runWithCollector };

package/dist/ssr/index.js

@@ -0,0 +1,12 @@
+import { TastySSRContext } from "./context.js";
+import { registerSSRCollectorGetter } from "./ssr-collector-ref.js";
+import { ServerStyleCollector } from "./collector.js";
+import { getSSRCollector, runWithCollector } from "./async-storage.js";
+import { hydrateTastyCache } from "./hydrate.js";
+
+//#region src/ssr/index.ts
+registerSSRCollectorGetter(getSSRCollector);
+
+//#endregion
+export { ServerStyleCollector, TastySSRContext, getSSRCollector, hydrateTastyCache, runWithCollector };
+//# sourceMappingURL=index.js.map

package/dist/ssr/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/ssr/index.ts"],"sourcesContent":["/**\n * SSR entry point for @tenphi/tasty.\n *\n * Provides the core SSR infrastructure: ServerStyleCollector,\n * React context, AsyncLocalStorage integration, and cache hydration.\n *\n * Import from '@tenphi/tasty/ssr'.\n */\n\n// Core collector\nexport { ServerStyleCollector } from './collector';\nexport type { SSRCacheState } from './collector';\n\n// React context for Next.js streaming\nexport { TastySSRContext } from './context';\n\n// AsyncLocalStorage integration for Astro / generic frameworks\nexport { runWithCollector, getSSRCollector } from './async-storage';\n\n// Client-side cache hydration\nexport { hydrateTastyCache } from './hydrate';\n\n// Register the ALS getter so useStyles can find the collector\n// without importing 'node:async_hooks' in the browser bundle.\nimport { getSSRCollector } from './async-storage';\nimport { registerSSRCollectorGetter } from './ssr-collector-ref';\n\nregisterSSRCollectorGetter(getSSRCollector);\n"],"mappings":";;;;;;;AA2BA,2BAA2B,gBAAgB"}

package/dist/ssr/next.d.ts

@@ -0,0 +1,45 @@
+import { ServerStyleCollector } from "./collector.js";
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/ssr/next.d.ts
+interface TastyRegistryProps {
+  children: ReactNode;
+  /**
+   * Whether to embed the cache state script for client hydration.
+   * Set to false to skip cache transfer (useful when cache size
+   * exceeds the hydration benefit). Default: true.
+   */
+  transferCache?: boolean;
+}
+/**
+ * Next.js App Router registry for Tasty SSR.
+ *
+ * Wraps the component tree with a ServerStyleCollector and flushes
+ * collected CSS into the HTML stream via useServerInsertedHTML.
+ *
+ * @example
+ * ```tsx
+ * // app/tasty-registry.tsx
+ * 'use client';
+ * import { TastyRegistry } from '@tenphi/tasty/ssr/next';
+ * export default function TastyStyleRegistry({ children }) {
+ *   return <TastyRegistry>{children}</TastyRegistry>;
+ * }
+ *
+ * // app/layout.tsx
+ * import TastyStyleRegistry from './tasty-registry';
+ * export default function RootLayout({ children }) {
+ *   return <html><body>
+ *     <TastyStyleRegistry>{children}</TastyStyleRegistry>
+ *   </body></html>;
+ * }
+ * ```
+ */
+declare function TastyRegistry({
+  children,
+  transferCache
+}: TastyRegistryProps): react.FunctionComponentElement<react.ProviderProps<ServerStyleCollector | null>>;
+//#endregion
+export { TastyRegistry, TastyRegistryProps };
+//# sourceMappingURL=next.d.ts.map

package/dist/ssr/next.js

@@ -0,0 +1,71 @@
+'use client';
+
+import { getConfig } from "../config.js";
+import { TastySSRContext } from "./context.js";
+import { ServerStyleCollector } from "./collector.js";
+import { hydrateTastyCache } from "./hydrate.js";
+import { Fragment, createElement, useState } from "react";
+import { useServerInsertedHTML } from "next/navigation";
+
+//#region src/ssr/next.ts
+/**
+* Next.js integration for Tasty SSR.
+*
+* Provides TastyRegistry for App Router (streaming via useServerInsertedHTML)
+* and createTastySSRDocument for Pages Router (non-streaming).
+*
+* Import from '@tenphi/tasty/ssr/next'.
+*/
+if (typeof window !== "undefined" && window.__TASTY_SSR_CACHE__) hydrateTastyCache(window.__TASTY_SSR_CACHE__);
+/**
+* Next.js App Router registry for Tasty SSR.
+*
+* Wraps the component tree with a ServerStyleCollector and flushes
+* collected CSS into the HTML stream via useServerInsertedHTML.
+*
+* @example
+* ```tsx
+* // app/tasty-registry.tsx
+* 'use client';
+* import { TastyRegistry } from '@tenphi/tasty/ssr/next';
+* export default function TastyStyleRegistry({ children }) {
+*   return <TastyRegistry>{children}</TastyRegistry>;
+* }
+*
+* // app/layout.tsx
+* import TastyStyleRegistry from './tasty-registry';
+* export default function RootLayout({ children }) {
+*   return <html><body>
+*     <TastyStyleRegistry>{children}</TastyStyleRegistry>
+*   </body></html>;
+* }
+* ```
+*/
+function TastyRegistry({ children, transferCache = true }) {
+	const isClient = typeof window !== "undefined";
+	const [collector] = useState(() => isClient ? null : new ServerStyleCollector());
+	const nonce = getConfig().nonce;
+	useServerInsertedHTML(() => {
+		if (!collector) return null;
+		const css = collector.flushCSS();
+		const cacheState = collector.getCacheState();
+		if (!css) return null;
+		const styleEl = createElement("style", {
+			key: "tasty-ssr-styles",
+			"data-tasty-ssr": "",
+			nonce,
+			dangerouslySetInnerHTML: { __html: css }
+		});
+		if (!transferCache) return styleEl;
+		return createElement(Fragment, null, styleEl, createElement("script", {
+			key: "tasty-ssr-cache",
+			nonce,
+			dangerouslySetInnerHTML: { __html: `(window.__TASTY_SSR_CACHE__=window.__TASTY_SSR_CACHE__||{entries:{},classCounter:0});Object.assign(window.__TASTY_SSR_CACHE__.entries,${JSON.stringify(cacheState.entries)});window.__TASTY_SSR_CACHE__.classCounter=${cacheState.classCounter};` }
+		}));
+	});
+	return createElement(TastySSRContext.Provider, { value: collector }, children);
+}
+
+//#endregion
+export { TastyRegistry };
+//# sourceMappingURL=next.js.map

package/dist/ssr/next.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"next.js","names":[],"sources":["../../src/ssr/next.ts"],"sourcesContent":["/**\n * Next.js integration for Tasty SSR.\n *\n * Provides TastyRegistry for App Router (streaming via useServerInsertedHTML)\n * and createTastySSRDocument for Pages Router (non-streaming).\n *\n * Import from '@tenphi/tasty/ssr/next'.\n */\n\n'use client';\n\n/// <reference path=\"./next-navigation.d.ts\" />\n\nimport { createElement, Fragment, useState, type ReactNode } from 'react';\nimport { useServerInsertedHTML } from 'next/navigation';\n\nimport { getConfig } from '../config';\nimport { ServerStyleCollector } from './collector';\nimport { TastySSRContext } from './context';\nimport { hydrateTastyCache } from './hydrate';\n\n// Auto-hydrate on module load (client only).\n// When this module is imported by the TastyRegistry client component,\n// the streaming cache scripts have already populated __TASTY_SSR_CACHE__.\nif (typeof window !== 'undefined' && window.__TASTY_SSR_CACHE__) {\n  hydrateTastyCache(window.__TASTY_SSR_CACHE__);\n}\n\nexport interface TastyRegistryProps {\n  children: ReactNode;\n  /**\n   * Whether to embed the cache state script for client hydration.\n   * Set to false to skip cache transfer (useful when cache size\n   * exceeds the hydration benefit). Default: true.\n   */\n  transferCache?: boolean;\n}\n\n/**\n * Next.js App Router registry for Tasty SSR.\n *\n * Wraps the component tree with a ServerStyleCollector and flushes\n * collected CSS into the HTML stream via useServerInsertedHTML.\n *\n * @example\n * ```tsx\n * // app/tasty-registry.tsx\n * 'use client';\n * import { TastyRegistry } from '@tenphi/tasty/ssr/next';\n * export default function TastyStyleRegistry({ children }) {\n *   return <TastyRegistry>{children}</TastyRegistry>;\n * }\n *\n * // app/layout.tsx\n * import TastyStyleRegistry from './tasty-registry';\n * export default function RootLayout({ children }) {\n *   return <html><body>\n *     <TastyStyleRegistry>{children}</TastyStyleRegistry>\n *   </body></html>;\n * }\n * ```\n */\nexport function TastyRegistry({\n  children,\n  transferCache = true,\n}: TastyRegistryProps) {\n  const isClient = typeof window !== 'undefined';\n\n  const [collector] = useState(() =>\n    isClient ? null : new ServerStyleCollector(),\n  );\n  const nonce = getConfig().nonce;\n\n  useServerInsertedHTML(() => {\n    if (!collector) return null;\n\n    const css = collector.flushCSS();\n    const cacheState = collector.getCacheState();\n\n    if (!css) return null;\n\n    const styleEl = createElement('style', {\n      key: 'tasty-ssr-styles',\n      'data-tasty-ssr': '',\n      nonce,\n      dangerouslySetInnerHTML: { __html: css },\n    });\n\n    if (!transferCache) return styleEl;\n\n    const scriptEl = createElement('script', {\n      key: 'tasty-ssr-cache',\n      nonce,\n      dangerouslySetInnerHTML: {\n        __html:\n          `(window.__TASTY_SSR_CACHE__=window.__TASTY_SSR_CACHE__||{entries:{},classCounter:0});` +\n          `Object.assign(window.__TASTY_SSR_CACHE__.entries,${JSON.stringify(cacheState.entries)});` +\n          `window.__TASTY_SSR_CACHE__.classCounter=${cacheState.classCounter};`,\n      },\n    });\n\n    return createElement(Fragment, null, styleEl, scriptEl);\n  });\n\n  return createElement(\n    TastySSRContext.Provider,\n    { value: collector },\n    children,\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAwBA,IAAI,OAAO,WAAW,eAAe,OAAO,oBAC1C,mBAAkB,OAAO,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;AAqC/C,SAAgB,cAAc,EAC5B,UACA,gBAAgB,QACK;CACrB,MAAM,WAAW,OAAO,WAAW;CAEnC,MAAM,CAAC,aAAa,eAClB,WAAW,OAAO,IAAI,sBAAsB,CAC7C;CACD,MAAM,QAAQ,WAAW,CAAC;AAE1B,6BAA4B;AAC1B,MAAI,CAAC,UAAW,QAAO;EAEvB,MAAM,MAAM,UAAU,UAAU;EAChC,MAAM,aAAa,UAAU,eAAe;AAE5C,MAAI,CAAC,IAAK,QAAO;EAEjB,MAAM,UAAU,cAAc,SAAS;GACrC,KAAK;GACL,kBAAkB;GAClB;GACA,yBAAyB,EAAE,QAAQ,KAAK;GACzC,CAAC;AAEF,MAAI,CAAC,cAAe,QAAO;AAa3B,SAAO,cAAc,UAAU,MAAM,SAXpB,cAAc,UAAU;GACvC,KAAK;GACL;GACA,yBAAyB,EACvB,QACE,yIACoD,KAAK,UAAU,WAAW,QAAQ,CAAC,4CAC5C,WAAW,aAAa,IACtE;GACF,CAAC,CAEqD;GACvD;AAEF,QAAO,cACL,gBAAgB,UAChB,EAAE,OAAO,WAAW,EACpB,SACD"}

package/dist/ssr/ssr-collector-ref.js

@@ -0,0 +1,12 @@
+//#region src/ssr/ssr-collector-ref.ts
+let _getSSRCollector = null;
+function registerSSRCollectorGetter(fn) {
+	_getSSRCollector = fn;
+}
+function getRegisteredSSRCollector() {
+	return _getSSRCollector ? _getSSRCollector() : null;
+}
+
+//#endregion
+export { getRegisteredSSRCollector, registerSSRCollectorGetter };
+//# sourceMappingURL=ssr-collector-ref.js.map

package/dist/ssr/ssr-collector-ref.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ssr-collector-ref.js","names":[],"sources":["../../src/ssr/ssr-collector-ref.ts"],"sourcesContent":["/**\n * Global reference to the SSR collector getter function.\n *\n * This indirection avoids importing 'node:async_hooks' in the browser bundle.\n * The SSR entry point sets this ref when loaded on the server. The useStyles\n * hook calls it if set; on the client it stays null and is never called.\n */\n\nimport type { ServerStyleCollector } from './collector';\n\ntype SSRCollectorGetter = () => ServerStyleCollector | null;\n\nlet _getSSRCollector: SSRCollectorGetter | null = null;\n\nexport function registerSSRCollectorGetter(fn: SSRCollectorGetter): void {\n  _getSSRCollector = fn;\n}\n\nexport function getRegisteredSSRCollector(): ServerStyleCollector | null {\n  return _getSSRCollector ? _getSSRCollector() : null;\n}\n"],"mappings":";AAYA,IAAI,mBAA8C;AAElD,SAAgB,2BAA2B,IAA8B;AACvE,oBAAmB;;AAGrB,SAAgB,4BAAyD;AACvE,QAAO,mBAAmB,kBAAkB,GAAG"}

package/dist/styles/predefined.d.ts

@@ -16,7 +16,6 @@ import { presetStyle } from "./preset.js";
 import { radiusStyle } from "./radius.js";
 import { scrollbarStyle } from "./scrollbar.js";
 import { shadowStyle } from "./shadow.js";
-import { styledScrollbarStyle } from "./styledScrollbar.js";
 import { transitionStyle } from "./transition.js";
 import { widthStyle } from "./width.js";
 
@@ -64,7 +63,6 @@ declare const styleHandlers: {
   readonly radius: typeof radiusStyle;
   readonly scrollbar: typeof scrollbarStyle;
   readonly shadow: typeof shadowStyle;
-  readonly styledScrollbar: typeof styledScrollbarStyle;
   readonly transition: typeof transitionStyle;
   readonly width: typeof widthStyle;
 };

package/dist/styles/predefined.js

@@ -18,7 +18,6 @@ import { presetStyle } from "./preset.js";
 import { radiusStyle } from "./radius.js";
 import { scrollbarStyle } from "./scrollbar.js";
 import { shadowStyle } from "./shadow.js";
-import { styledScrollbarStyle } from "./styledScrollbar.js";
 import { transitionStyle } from "./transition.js";
 import { widthStyle } from "./width.js";
 
@@ -96,7 +95,6 @@ function predefine() {
 		justifyStyle,
 		presetStyle,
 		outlineStyle,
-		styledScrollbarStyle,
 		scrollbarStyle,
 		fadeStyle,
 		insetStyle
@@ -231,7 +229,6 @@ const styleHandlers = {
 	radius: wrapHandler(radiusStyle),
 	scrollbar: wrapHandler(scrollbarStyle),
 	shadow: wrapHandler(shadowStyle),
-	styledScrollbar: wrapHandler(styledScrollbarStyle),
 	transition: wrapHandler(transitionStyle),
 	width: wrapHandler(widthStyle)
 };