@tenphi/tasty 0.0.0-snapshot.05c1c22

package/dist/properties/property-type-resolver.js

@@ -0,0 +1,90 @@
+import { inferSyntaxFromValue } from "./index.js";
+//#region src/properties/property-type-resolver.ts
+/**
+* PropertyTypeResolver
+*
+* Automatically infers CSS @property types from custom property values.
+* Supports deferred resolution for var() reference chains of arbitrary depth.
+*/
+const CUSTOM_PROP_DECL = /^\s*(--[a-z0-9_-]+)\s*:\s*(.+?)\s*$/i;
+const SINGLE_VAR_REF = /^var\((--[a-z0-9_-]+)\)$/i;
+var PropertyTypeResolver = class {
+	/** propName → the prop it depends on */
+	pendingDeps = /* @__PURE__ */ new Map();
+	/** propName → list of props waiting on it */
+	reverseDeps = /* @__PURE__ */ new Map();
+	/**
+	* Scan CSS declarations and auto-register @property for custom properties
+	* whose types can be inferred from their values.
+	*/
+	scanDeclarations(declarations, isPropertyDefined, registerProperty) {
+		if (!declarations.includes("--")) return;
+		const parts = declarations.split(/;+/);
+		for (const part of parts) {
+			if (!part.trim()) continue;
+			const match = CUSTOM_PROP_DECL.exec(part);
+			if (!match) continue;
+			const propName = match[1];
+			const value = match[2].trim();
+			if (isPropertyDefined(propName)) continue;
+			if (propName.endsWith("-color")) {
+				registerProperty(propName, "<color>", "transparent");
+				continue;
+			}
+			if (propName.endsWith("-line-height")) {
+				registerProperty(propName, "<number> | <length-percentage>", "0");
+				continue;
+			}
+			if (propName.endsWith("-opacity")) {
+				registerProperty(propName, "<number> | <percentage>", "0");
+				continue;
+			}
+			const varMatch = SINGLE_VAR_REF.exec(value);
+			if (varMatch) {
+				const depName = varMatch[1];
+				this.addDependency(propName, depName);
+				continue;
+			}
+			if (this.isComplexValue(value)) continue;
+			const inferred = inferSyntaxFromValue(value);
+			if (!inferred) continue;
+			this.resolve(propName, inferred.syntax, inferred.initialValue, isPropertyDefined, registerProperty);
+		}
+	}
+	addDependency(propName, depName) {
+		if (propName === depName) return;
+		this.pendingDeps.set(propName, depName);
+		let dependents = this.reverseDeps.get(depName);
+		if (!dependents) {
+			dependents = [];
+			this.reverseDeps.set(depName, dependents);
+		}
+		if (!dependents.includes(propName)) dependents.push(propName);
+	}
+	resolve(propName, syntax, initialValue, isPropertyDefined, registerProperty, resolving) {
+		if (!resolving) resolving = /* @__PURE__ */ new Set();
+		if (resolving.has(propName)) return;
+		resolving.add(propName);
+		if (!isPropertyDefined(propName)) registerProperty(propName, syntax, initialValue);
+		const dependents = this.reverseDeps.get(propName);
+		if (dependents) {
+			this.reverseDeps.delete(propName);
+			for (const dependent of dependents) {
+				this.pendingDeps.delete(dependent);
+				if (isPropertyDefined(dependent)) continue;
+				this.resolve(dependent, syntax, initialValue, isPropertyDefined, registerProperty, resolving);
+			}
+		}
+	}
+	isComplexValue(value) {
+		if (value.includes("calc(")) return true;
+		const firstVar = value.indexOf("var(");
+		if (firstVar === -1) return false;
+		if (value.indexOf("var(", firstVar + 4) !== -1) return true;
+		return !SINGLE_VAR_REF.test(value);
+	}
+};
+//#endregion
+export { PropertyTypeResolver };
+
+//# sourceMappingURL=property-type-resolver.js.map

package/dist/properties/property-type-resolver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-type-resolver.js","names":[],"sources":["../../src/properties/property-type-resolver.ts"],"sourcesContent":["/**\n * PropertyTypeResolver\n *\n * Automatically infers CSS @property types from custom property values.\n * Supports deferred resolution for var() reference chains of arbitrary depth.\n */\n\nimport { inferSyntaxFromValue } from './index';\n\nconst CUSTOM_PROP_DECL = /^\\s*(--[a-z0-9_-]+)\\s*:\\s*(.+?)\\s*$/i;\nconst SINGLE_VAR_REF = /^var\\((--[a-z0-9_-]+)\\)$/i;\n\nexport class PropertyTypeResolver {\n  /** propName → the prop it depends on */\n  private pendingDeps = new Map<string, string>();\n  /** propName → list of props waiting on it */\n  private reverseDeps = new Map<string, string[]>();\n\n  /**\n   * Scan CSS declarations and auto-register @property for custom properties\n   * whose types can be inferred from their values.\n   */\n  scanDeclarations(\n    declarations: string,\n    isPropertyDefined: (name: string) => boolean,\n    registerProperty: (\n      name: string,\n      syntax: string,\n      initialValue: string,\n    ) => void,\n  ): void {\n    if (!declarations.includes('--')) return;\n\n    const parts = declarations.split(/;+/);\n\n    for (const part of parts) {\n      if (!part.trim()) continue;\n\n      const match = CUSTOM_PROP_DECL.exec(part);\n      if (!match) continue;\n\n      const propName = match[1];\n      const value = match[2].trim();\n\n      if (isPropertyDefined(propName)) continue;\n\n      // Name-based: --*-color properties are always <color> (from #name tokens)\n      if (propName.endsWith('-color')) {\n        registerProperty(propName, '<color>', 'transparent');\n        continue;\n      }\n\n      // Name-based: --*-line-height accepts numbers, lengths, and percentages\n      if (propName.endsWith('-line-height')) {\n        registerProperty(propName, '<number> | <length-percentage>', '0');\n        continue;\n      }\n\n      // Name-based: --*-opacity accepts numbers and percentages\n      if (propName.endsWith('-opacity')) {\n        registerProperty(propName, '<number> | <percentage>', '0');\n        continue;\n      }\n\n      // Single var() reference → record dependency for deferred resolution\n      const varMatch = SINGLE_VAR_REF.exec(value);\n      if (varMatch) {\n        const depName = varMatch[1];\n        this.addDependency(propName, depName);\n        continue;\n      }\n\n      // Skip complex expressions (calc, multiple var, etc.)\n      if (this.isComplexValue(value)) continue;\n\n      const inferred = inferSyntaxFromValue(value);\n      if (!inferred) continue;\n\n      this.resolve(\n        propName,\n        inferred.syntax,\n        inferred.initialValue,\n        isPropertyDefined,\n        registerProperty,\n      );\n    }\n  }\n\n  private addDependency(propName: string, depName: string): void {\n    if (propName === depName) return;\n\n    this.pendingDeps.set(propName, depName);\n\n    let dependents = this.reverseDeps.get(depName);\n    if (!dependents) {\n      dependents = [];\n      this.reverseDeps.set(depName, dependents);\n    }\n    if (!dependents.includes(propName)) {\n      dependents.push(propName);\n    }\n  }\n\n  private resolve(\n    propName: string,\n    syntax: string,\n    initialValue: string,\n    isPropertyDefined: (name: string) => boolean,\n    registerProperty: (\n      name: string,\n      syntax: string,\n      initialValue: string,\n    ) => void,\n    resolving?: Set<string>,\n  ): void {\n    if (!resolving) resolving = new Set();\n    if (resolving.has(propName)) return;\n    resolving.add(propName);\n\n    if (!isPropertyDefined(propName)) {\n      registerProperty(propName, syntax, initialValue);\n    }\n\n    const dependents = this.reverseDeps.get(propName);\n    if (dependents) {\n      this.reverseDeps.delete(propName);\n\n      for (const dependent of dependents) {\n        this.pendingDeps.delete(dependent);\n\n        if (isPropertyDefined(dependent)) continue;\n\n        this.resolve(\n          dependent,\n          syntax,\n          initialValue,\n          isPropertyDefined,\n          registerProperty,\n          resolving,\n        );\n      }\n    }\n  }\n\n  private isComplexValue(value: string): boolean {\n    if (value.includes('calc(')) return true;\n    const firstVar = value.indexOf('var(');\n    if (firstVar === -1) return false;\n    if (value.indexOf('var(', firstVar + 4) !== -1) return true;\n    return !SINGLE_VAR_REF.test(value);\n  }\n}\n"],"mappings":";;;;;;;;AASA,MAAM,mBAAmB;AACzB,MAAM,iBAAiB;AAEvB,IAAa,uBAAb,MAAkC;;CAEhC,8BAAsB,IAAI,KAAqB;;CAE/C,8BAAsB,IAAI,KAAuB;;;;;CAMjD,iBACE,cACA,mBACA,kBAKM;AACN,MAAI,CAAC,aAAa,SAAS,KAAK,CAAE;EAElC,MAAM,QAAQ,aAAa,MAAM,KAAK;AAEtC,OAAK,MAAM,QAAQ,OAAO;AACxB,OAAI,CAAC,KAAK,MAAM,CAAE;GAElB,MAAM,QAAQ,iBAAiB,KAAK,KAAK;AACzC,OAAI,CAAC,MAAO;GAEZ,MAAM,WAAW,MAAM;GACvB,MAAM,QAAQ,MAAM,GAAG,MAAM;AAE7B,OAAI,kBAAkB,SAAS,CAAE;AAGjC,OAAI,SAAS,SAAS,SAAS,EAAE;AAC/B,qBAAiB,UAAU,WAAW,cAAc;AACpD;;AAIF,OAAI,SAAS,SAAS,eAAe,EAAE;AACrC,qBAAiB,UAAU,kCAAkC,IAAI;AACjE;;AAIF,OAAI,SAAS,SAAS,WAAW,EAAE;AACjC,qBAAiB,UAAU,2BAA2B,IAAI;AAC1D;;GAIF,MAAM,WAAW,eAAe,KAAK,MAAM;AAC3C,OAAI,UAAU;IACZ,MAAM,UAAU,SAAS;AACzB,SAAK,cAAc,UAAU,QAAQ;AACrC;;AAIF,OAAI,KAAK,eAAe,MAAM,CAAE;GAEhC,MAAM,WAAW,qBAAqB,MAAM;AAC5C,OAAI,CAAC,SAAU;AAEf,QAAK,QACH,UACA,SAAS,QACT,SAAS,cACT,mBACA,iBACD;;;CAIL,cAAsB,UAAkB,SAAuB;AAC7D,MAAI,aAAa,QAAS;AAE1B,OAAK,YAAY,IAAI,UAAU,QAAQ;EAEvC,IAAI,aAAa,KAAK,YAAY,IAAI,QAAQ;AAC9C,MAAI,CAAC,YAAY;AACf,gBAAa,EAAE;AACf,QAAK,YAAY,IAAI,SAAS,WAAW;;AAE3C,MAAI,CAAC,WAAW,SAAS,SAAS,CAChC,YAAW,KAAK,SAAS;;CAI7B,QACE,UACA,QACA,cACA,mBACA,kBAKA,WACM;AACN,MAAI,CAAC,UAAW,6BAAY,IAAI,KAAK;AACrC,MAAI,UAAU,IAAI,SAAS,CAAE;AAC7B,YAAU,IAAI,SAAS;AAEvB,MAAI,CAAC,kBAAkB,SAAS,CAC9B,kBAAiB,UAAU,QAAQ,aAAa;EAGlD,MAAM,aAAa,KAAK,YAAY,IAAI,SAAS;AACjD,MAAI,YAAY;AACd,QAAK,YAAY,OAAO,SAAS;AAEjC,QAAK,MAAM,aAAa,YAAY;AAClC,SAAK,YAAY,OAAO,UAAU;AAElC,QAAI,kBAAkB,UAAU,CAAE;AAElC,SAAK,QACH,WACA,QACA,cACA,mBACA,kBACA,UACD;;;;CAKP,eAAuB,OAAwB;AAC7C,MAAI,MAAM,SAAS,QAAQ,CAAE,QAAO;EACpC,MAAM,WAAW,MAAM,QAAQ,OAAO;AACtC,MAAI,aAAa,GAAI,QAAO;AAC5B,MAAI,MAAM,QAAQ,QAAQ,WAAW,EAAE,KAAK,GAAI,QAAO;AACvD,SAAO,CAAC,eAAe,KAAK,MAAM"}

package/dist/ssr/astro.d.ts

@@ -0,0 +1,29 @@
+import { hydrateTastyCache } from "./hydrate.js";
+
+//#region src/ssr/astro.d.ts
+interface TastyMiddlewareOptions {
+  /**
+   * Whether to embed the cache state script for client hydration.
+   * Set to false to skip cache transfer. Default: true.
+   */
+  transferCache?: boolean;
+}
+/**
+ * Create an Astro middleware that collects Tasty styles during SSR.
+ *
+ * All React components rendered during the request (both static
+ * and islands) will have their useStyles() calls captured by the
+ * collector via AsyncLocalStorage. After rendering, the middleware
+ * injects the collected CSS into </head>.
+ *
+ * @example
+ * ```ts
+ * // src/middleware.ts
+ * import { tastyMiddleware } from '@tenphi/tasty/ssr/astro';
+ * export const onRequest = tastyMiddleware();
+ * ```
+ */
+declare function tastyMiddleware(options?: TastyMiddlewareOptions): (_context: unknown, next: () => Promise<Response>) => Promise<Response>;
+//#endregion
+export { TastyMiddlewareOptions, hydrateTastyCache, tastyMiddleware };
+//# sourceMappingURL=astro.d.ts.map

package/dist/ssr/astro.js

@@ -0,0 +1,64 @@
+import { getConfig } from "../config.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/astro.ts
+/**
+* Astro integration for Tasty SSR.
+*
+* Provides tastyMiddleware() for Astro's middleware system.
+* The middleware wraps request handling in a ServerStyleCollector
+* via AsyncLocalStorage, then injects collected CSS into </head>.
+*
+* Import from '@tenphi/tasty/ssr/astro'.
+*/
+registerSSRCollectorGetter(getSSRCollector);
+/**
+* Create an Astro middleware that collects Tasty styles during SSR.
+*
+* All React components rendered during the request (both static
+* and islands) will have their useStyles() calls captured by the
+* collector via AsyncLocalStorage. After rendering, the middleware
+* injects the collected CSS into </head>.
+*
+* @example
+* ```ts
+* // src/middleware.ts
+* import { tastyMiddleware } from '@tenphi/tasty/ssr/astro';
+* export const onRequest = tastyMiddleware();
+* ```
+*/
+function tastyMiddleware(options) {
+	const { transferCache = true } = options ?? {};
+	return async (_context, next) => {
+		const collector = new ServerStyleCollector();
+		const response = await runWithCollector(collector, () => next());
+		const css = collector.getCSS();
+		if (!css) return response;
+		const nonce = getConfig().nonce;
+		const nonceAttr = nonce ? ` nonce="${nonce}"` : "";
+		const html = await response.text();
+		const styleTag = `<style data-tasty-ssr${nonceAttr}>${css}</style>`;
+		let cacheTag = "";
+		if (transferCache) {
+			const cacheState = collector.getCacheState();
+			if (Object.keys(cacheState.entries).length > 0) cacheTag = `<script data-tasty-cache type="application/json"${nonceAttr}>${JSON.stringify(cacheState)}<\/script>`;
+		}
+		const modifiedHtml = html.replace("</head>", `${styleTag}${cacheTag}</head>`);
+		return new Response(modifiedHtml, {
+			status: response.status,
+			headers: response.headers
+		});
+	};
+}
+if (typeof window !== "undefined") {
+	const script = document.querySelector("script[data-tasty-cache]");
+	if (script) try {
+		hydrateTastyCache(JSON.parse(script.textContent));
+	} catch {}
+}
+//#endregion
+export { hydrateTastyCache, tastyMiddleware };
+
+//# sourceMappingURL=astro.js.map

package/dist/ssr/astro.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"astro.js","names":[],"sources":["../../src/ssr/astro.ts"],"sourcesContent":["/**\n * Astro integration for Tasty SSR.\n *\n * Provides tastyMiddleware() for Astro's middleware system.\n * The middleware wraps request handling in a ServerStyleCollector\n * via AsyncLocalStorage, then injects collected CSS into </head>.\n *\n * Import from '@tenphi/tasty/ssr/astro'.\n */\n\nimport { getConfig } from '../config';\nimport { getSSRCollector, runWithCollector } from './async-storage';\nimport { ServerStyleCollector } from './collector';\nimport { hydrateTastyCache } from './hydrate';\nimport { registerSSRCollectorGetter } from './ssr-collector-ref';\n\n// Wire up ALS-based collector discovery so useStyles can find\n// the collector set by tastyMiddleware's runWithCollector().\nregisterSSRCollectorGetter(getSSRCollector);\n\n// Re-export for convenience\nexport { hydrateTastyCache };\n\nexport interface TastyMiddlewareOptions {\n  /**\n   * Whether to embed the cache state script for client hydration.\n   * Set to false to skip cache transfer. Default: true.\n   */\n  transferCache?: boolean;\n}\n\n/**\n * Create an Astro middleware that collects Tasty styles during SSR.\n *\n * All React components rendered during the request (both static\n * and islands) will have their useStyles() calls captured by the\n * collector via AsyncLocalStorage. After rendering, the middleware\n * injects the collected CSS into </head>.\n *\n * @example\n * ```ts\n * // src/middleware.ts\n * import { tastyMiddleware } from '@tenphi/tasty/ssr/astro';\n * export const onRequest = tastyMiddleware();\n * ```\n */\nexport function tastyMiddleware(options?: TastyMiddlewareOptions) {\n  const { transferCache = true } = options ?? {};\n\n  return async (\n    _context: unknown,\n    next: () => Promise<Response>,\n  ): Promise<Response> => {\n    const collector = new ServerStyleCollector();\n\n    const response = await runWithCollector(collector, () => next());\n\n    const css = collector.getCSS();\n    if (!css) return response;\n\n    const nonce = getConfig().nonce;\n    const nonceAttr = nonce ? ` nonce=\"${nonce}\"` : '';\n    const html = await response.text();\n    const styleTag = `<style data-tasty-ssr${nonceAttr}>${css}</style>`;\n\n    let cacheTag = '';\n    if (transferCache) {\n      const cacheState = collector.getCacheState();\n      const hasHydratableStyles = Object.keys(cacheState.entries).length > 0;\n      if (hasHydratableStyles) {\n        cacheTag = `<script data-tasty-cache type=\"application/json\"${nonceAttr}>${JSON.stringify(cacheState)}</script>`;\n      }\n    }\n\n    const modifiedHtml = html.replace(\n      '</head>',\n      `${styleTag}${cacheTag}</head>`,\n    );\n\n    return new Response(modifiedHtml, {\n      status: response.status,\n      headers: response.headers,\n    });\n  };\n}\n\n// Client-side auto-hydration.\n// When imported in the browser, reads the cache state from the DOM\n// and pre-populates the injector before any island hydrates.\nif (typeof window !== 'undefined') {\n  const script = document.querySelector('script[data-tasty-cache]');\n  if (script) {\n    try {\n      const state = JSON.parse(script.textContent!);\n      hydrateTastyCache(state);\n    } catch {\n      // Ignore malformed cache state\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,2BAA2B,gBAAgB;;;;;;;;;;;;;;;;AA4B3C,SAAgB,gBAAgB,SAAkC;CAChE,MAAM,EAAE,gBAAgB,SAAS,WAAW,EAAE;AAE9C,QAAO,OACL,UACA,SACsB;EACtB,MAAM,YAAY,IAAI,sBAAsB;EAE5C,MAAM,WAAW,MAAM,iBAAiB,iBAAiB,MAAM,CAAC;EAEhE,MAAM,MAAM,UAAU,QAAQ;AAC9B,MAAI,CAAC,IAAK,QAAO;EAEjB,MAAM,QAAQ,WAAW,CAAC;EAC1B,MAAM,YAAY,QAAQ,WAAW,MAAM,KAAK;EAChD,MAAM,OAAO,MAAM,SAAS,MAAM;EAClC,MAAM,WAAW,wBAAwB,UAAU,GAAG,IAAI;EAE1D,IAAI,WAAW;AACf,MAAI,eAAe;GACjB,MAAM,aAAa,UAAU,eAAe;AAE5C,OAD4B,OAAO,KAAK,WAAW,QAAQ,CAAC,SAAS,EAEnE,YAAW,mDAAmD,UAAU,GAAG,KAAK,UAAU,WAAW,CAAC;;EAI1G,MAAM,eAAe,KAAK,QACxB,WACA,GAAG,WAAW,SAAS,SACxB;AAED,SAAO,IAAI,SAAS,cAAc;GAChC,QAAQ,SAAS;GACjB,SAAS,SAAS;GACnB,CAAC;;;AAON,IAAI,OAAO,WAAW,aAAa;CACjC,MAAM,SAAS,SAAS,cAAc,2BAA2B;AACjE,KAAI,OACF,KAAI;AAEF,oBADc,KAAK,MAAM,OAAO,YAAa,CACrB;SAClB"}

package/dist/ssr/async-storage.d.ts

@@ -0,0 +1,17 @@
+import { ServerStyleCollector } from "./collector.js";
+
+//#region src/ssr/async-storage.d.ts
+/**
+ * Run a function with a ServerStyleCollector bound to the current
+ * async context. All useStyles() calls within `fn` (and any async
+ * continuations) will find this collector via getSSRCollector().
+ */
+declare function runWithCollector<T>(collector: ServerStyleCollector, fn: () => T): T;
+/**
+ * Retrieve the ServerStyleCollector bound to the current async context.
+ * Returns null when called outside of runWithCollector() or on the client.
+ */
+declare function getSSRCollector(): ServerStyleCollector | null;
+//#endregion
+export { getSSRCollector, runWithCollector };
+//# sourceMappingURL=async-storage.d.ts.map

package/dist/ssr/async-storage.js

@@ -0,0 +1,34 @@
+import { AsyncLocalStorage } from "node:async_hooks";
+//#region src/ssr/async-storage.ts
+/**
+* AsyncLocalStorage integration for SSR collector discovery.
+*
+* Used by Astro middleware and generic framework integrations where
+* the library cannot wrap the React tree with a context provider.
+* The middleware calls runWithCollector() around the render, and
+* useStyles() calls getSSRCollector() to find it.
+*
+* This module imports from 'node:async_hooks' — it must be excluded
+* from client bundles via the build configuration.
+*/
+const tastySSRStorage = new AsyncLocalStorage();
+/**
+* Run a function with a ServerStyleCollector bound to the current
+* async context. All useStyles() calls within `fn` (and any async
+* continuations) will find this collector via getSSRCollector().
+*/
+function runWithCollector(collector, fn) {
+	return tastySSRStorage.run(collector, fn);
+}
+/**
+* Retrieve the ServerStyleCollector bound to the current async context.
+* Returns null when called outside of runWithCollector() or on the client.
+*/
+function getSSRCollector() {
+	if (typeof tastySSRStorage?.getStore !== "function") return null;
+	return tastySSRStorage.getStore() ?? null;
+}
+//#endregion
+export { getSSRCollector, runWithCollector };
+
+//# sourceMappingURL=async-storage.js.map

package/dist/ssr/async-storage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"async-storage.js","names":[],"sources":["../../src/ssr/async-storage.ts"],"sourcesContent":["/**\n * AsyncLocalStorage integration for SSR collector discovery.\n *\n * Used by Astro middleware and generic framework integrations where\n * the library cannot wrap the React tree with a context provider.\n * The middleware calls runWithCollector() around the render, and\n * useStyles() calls getSSRCollector() to find it.\n *\n * This module imports from 'node:async_hooks' — it must be excluded\n * from client bundles via the build configuration.\n */\n\nimport { AsyncLocalStorage } from 'node:async_hooks';\n\nimport type { ServerStyleCollector } from './collector';\n\nconst tastySSRStorage = new AsyncLocalStorage<ServerStyleCollector>();\n\n/**\n * Run a function with a ServerStyleCollector bound to the current\n * async context. All useStyles() calls within `fn` (and any async\n * continuations) will find this collector via getSSRCollector().\n */\nexport function runWithCollector<T>(\n  collector: ServerStyleCollector,\n  fn: () => T,\n): T {\n  return tastySSRStorage.run(collector, fn);\n}\n\n/**\n * Retrieve the ServerStyleCollector bound to the current async context.\n * Returns null when called outside of runWithCollector() or on the client.\n */\nexport function getSSRCollector(): ServerStyleCollector | null {\n  if (typeof tastySSRStorage?.getStore !== 'function') return null;\n  return tastySSRStorage.getStore() ?? null;\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,kBAAkB,IAAI,mBAAyC;;;;;;AAOrE,SAAgB,iBACd,WACA,IACG;AACH,QAAO,gBAAgB,IAAI,WAAW,GAAG;;;;;;AAO3C,SAAgB,kBAA+C;AAC7D,KAAI,OAAO,iBAAiB,aAAa,WAAY,QAAO;AAC5D,QAAO,gBAAgB,UAAU,IAAI"}

package/dist/ssr/collect-auto-properties.js

@@ -0,0 +1,39 @@
+import { parsePropertyToken } from "../properties/index.js";
+import { PropertyTypeResolver } from "../properties/property-type-resolver.js";
+import { formatPropertyCSS } from "./format-property.js";
+//#region src/ssr/collect-auto-properties.ts
+/**
+* Scan rendered rules for custom property declarations and collect
+* auto-inferred @property rules via the SSR collector.
+*
+* @param rules - Rendered style rules containing CSS declarations
+* @param collector - SSR collector to emit @property CSS into
+* @param styles - Original styles object (used to skip explicit @properties)
+*/
+function collectAutoInferredProperties(rules, collector, styles) {
+	const registered = /* @__PURE__ */ new Set();
+	if (styles) {
+		const localProps = styles["@properties"];
+		if (localProps && typeof localProps === "object") for (const token of Object.keys(localProps)) {
+			const parsed = parsePropertyToken(token);
+			if (parsed.isValid) registered.add(parsed.cssName);
+		}
+	}
+	const resolver = new PropertyTypeResolver();
+	for (const rule of rules) {
+		if (!rule.declarations) continue;
+		resolver.scanDeclarations(rule.declarations, (name) => registered.has(name), (name, syntax, initialValue) => {
+			registered.add(name);
+			const css = formatPropertyCSS(name, {
+				syntax,
+				inherits: true,
+				initialValue
+			});
+			if (css) collector.collectProperty(`__auto:${name}`, css);
+		});
+	}
+}
+//#endregion
+export { collectAutoInferredProperties };
+
+//# sourceMappingURL=collect-auto-properties.js.map

package/dist/ssr/collect-auto-properties.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collect-auto-properties.js","names":[],"sources":["../../src/ssr/collect-auto-properties.ts"],"sourcesContent":["/**\n * SSR auto-property inference.\n *\n * Scans rendered CSS declarations for custom properties whose types\n * can be inferred from their values (e.g. `--angle: 30deg` → `<angle>`).\n * Mirrors the client-side auto-inference in StyleInjector.inject().\n */\n\nimport type { StyleResult } from '../pipeline';\nimport { parsePropertyToken } from '../properties';\nimport { PropertyTypeResolver } from '../properties/property-type-resolver';\nimport type { Styles } from '../styles/types';\n\nimport type { ServerStyleCollector } from './collector';\nimport { formatPropertyCSS } from './format-property';\n\n/**\n * Scan rendered rules for custom property declarations and collect\n * auto-inferred @property rules via the SSR collector.\n *\n * @param rules - Rendered style rules containing CSS declarations\n * @param collector - SSR collector to emit @property CSS into\n * @param styles - Original styles object (used to skip explicit @properties)\n */\nexport function collectAutoInferredProperties(\n  rules: StyleResult[],\n  collector: ServerStyleCollector,\n  styles?: Styles,\n): void {\n  const registered = new Set<string>();\n\n  if (styles) {\n    const localProps = styles['@properties'];\n    if (localProps && typeof localProps === 'object') {\n      for (const token of Object.keys(localProps as Record<string, unknown>)) {\n        const parsed = parsePropertyToken(token);\n        if (parsed.isValid) {\n          registered.add(parsed.cssName);\n        }\n      }\n    }\n  }\n\n  const resolver = new PropertyTypeResolver();\n\n  for (const rule of rules) {\n    if (!rule.declarations) continue;\n    resolver.scanDeclarations(\n      rule.declarations,\n      (name) => registered.has(name),\n      (name, syntax, initialValue) => {\n        registered.add(name);\n        const css = formatPropertyCSS(name, {\n          syntax,\n          inherits: true,\n          initialValue,\n        });\n        if (css) {\n          collector.collectProperty(`__auto:${name}`, css);\n        }\n      },\n    );\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAwBA,SAAgB,8BACd,OACA,WACA,QACM;CACN,MAAM,6BAAa,IAAI,KAAa;AAEpC,KAAI,QAAQ;EACV,MAAM,aAAa,OAAO;AAC1B,MAAI,cAAc,OAAO,eAAe,SACtC,MAAK,MAAM,SAAS,OAAO,KAAK,WAAsC,EAAE;GACtE,MAAM,SAAS,mBAAmB,MAAM;AACxC,OAAI,OAAO,QACT,YAAW,IAAI,OAAO,QAAQ;;;CAMtC,MAAM,WAAW,IAAI,sBAAsB;AAE3C,MAAK,MAAM,QAAQ,OAAO;AACxB,MAAI,CAAC,KAAK,aAAc;AACxB,WAAS,iBACP,KAAK,eACJ,SAAS,WAAW,IAAI,KAAK,GAC7B,MAAM,QAAQ,iBAAiB;AAC9B,cAAW,IAAI,KAAK;GACpB,MAAM,MAAM,kBAAkB,MAAM;IAClC;IACA,UAAU;IACV;IACD,CAAC;AACF,OAAI,IACF,WAAU,gBAAgB,UAAU,QAAQ,IAAI;IAGrD"}

package/dist/ssr/collector.d.ts

@@ -0,0 +1,102 @@
+import { StyleResult } from "../pipeline/index.js";
+
+//#region src/ssr/collector.d.ts
+/**
+ * Cache state serialized to the client for hydration.
+ */
+interface SSRCacheState {
+  /** cacheKey → className map, to pre-populate the client registry */
+  entries: Record<string, string>;
+  /** Counter value so client allocations don't collide with server ones */
+  classCounter: number;
+}
+declare class ServerStyleCollector {
+  private chunks;
+  private cacheKeyToClassName;
+  private classCounter;
+  private flushedKeys;
+  private propertyRules;
+  private flushedPropertyKeys;
+  private keyframeRules;
+  private flushedKeyframeKeys;
+  private globalStyles;
+  private flushedGlobalKeys;
+  private rawCSS;
+  private flushedRawKeys;
+  private fontFaceRules;
+  private flushedFontFaceKeys;
+  private counterStyleRules;
+  private flushedCounterStyleKeys;
+  private keyframesCounter;
+  private counterStyleCounter;
+  private internalsCollected;
+  /**
+   * Collect internal @property rules and :root token defaults.
+   * Mirrors markStylesGenerated() from the client-side injector.
+   * Called automatically on first chunk collection; idempotent.
+   */
+  collectInternals(): void;
+  /**
+   * Allocate a className for a cache key, server-side.
+   * Mirrors StyleInjector.allocateClassName but without DOM access.
+   */
+  allocateClassName(cacheKey: string): {
+    className: string;
+    isNewAllocation: boolean;
+  };
+  /**
+   * Record CSS rules for a chunk.
+   * Called by useStyles during server render.
+   */
+  collectChunk(cacheKey: string, className: string, rules: StyleResult[]): void;
+  /**
+   * Record a @property rule. Deduplicated by name.
+   */
+  collectProperty(name: string, css: string): void;
+  /**
+   * Record a @keyframes rule. Deduplicated by name.
+   */
+  collectKeyframes(name: string, css: string): void;
+  /**
+   * Allocate a keyframe name for SSR. Uses provided name or generates one.
+   */
+  allocateKeyframeName(providedName?: string): string;
+  /**
+   * Record a @font-face rule. Deduplicated by key (content hash).
+   */
+  collectFontFace(key: string, css: string): void;
+  /**
+   * Record a @counter-style rule. Deduplicated by name.
+   */
+  collectCounterStyle(name: string, css: string): void;
+  /**
+   * Allocate a counter-style name for SSR. Uses provided name or generates one.
+   */
+  allocateCounterStyleName(providedName?: string): string;
+  /**
+   * Record global styles (from useGlobalStyles). Deduplicated by key.
+   */
+  collectGlobalStyles(key: string, css: string): void;
+  /**
+   * Record raw CSS text (from useRawCSS). Deduplicated by key.
+   */
+  collectRawCSS(key: string, css: string): void;
+  /**
+   * Extract all CSS collected so far as a single string.
+   * Includes @property and @keyframes rules.
+   * Used for non-streaming SSR (renderToString).
+   */
+  getCSS(): string;
+  /**
+   * Flush only newly collected CSS since the last flush.
+   * Used for streaming SSR (renderToPipeableStream + useServerInsertedHTML).
+   */
+  flushCSS(): string;
+  /**
+   * Serialize the cache state for client hydration.
+   */
+  getCacheState(): SSRCacheState;
+}
+//#endregion
+export { SSRCacheState, ServerStyleCollector };
+//# sourceMappingURL=collector.d.ts.map

package/dist/ssr/collector.js

@@ -0,0 +1,226 @@
+import { fontFaceContentHash, formatFontFaceRule } from "../font-face/index.js";
+import { formatCounterStyleRule } from "../counter-style/index.js";
+import { renderStyles } from "../pipeline/index.js";
+import { INTERNAL_PROPERTIES, getGlobalConfigTokens, getGlobalCounterStyle, getGlobalFontFace, getGlobalProperties, hasGlobalProperties } from "../config.js";
+import { formatPropertyCSS } from "./format-property.js";
+import { formatGlobalRules } from "./format-global-rules.js";
+import { formatRules } from "./format-rules.js";
+//#region src/ssr/collector.ts
+/**
+* ServerStyleCollector — server-safe style collector for SSR.
+*
+* Accumulates CSS rules and cache metadata during server rendering.
+* This is the server-side counterpart to StyleInjector: it allocates
+* sequential class names (t0, t1, …), formats CSS rules into text,
+* and serializes the cache state for client hydration.
+*
+* One instance is created per HTTP request. Concurrent requests
+* each get their own collector (via AsyncLocalStorage or React context).
+*/
+function generateClassName(counter) {
+	return `t${counter}`;
+}
+var ServerStyleCollector = class {
+	chunks = /* @__PURE__ */ new Map();
+	cacheKeyToClassName = /* @__PURE__ */ new Map();
+	classCounter = 0;
+	flushedKeys = /* @__PURE__ */ new Set();
+	propertyRules = /* @__PURE__ */ new Map();
+	flushedPropertyKeys = /* @__PURE__ */ new Set();
+	keyframeRules = /* @__PURE__ */ new Map();
+	flushedKeyframeKeys = /* @__PURE__ */ new Set();
+	globalStyles = /* @__PURE__ */ new Map();
+	flushedGlobalKeys = /* @__PURE__ */ new Set();
+	rawCSS = /* @__PURE__ */ new Map();
+	flushedRawKeys = /* @__PURE__ */ new Set();
+	fontFaceRules = /* @__PURE__ */ new Map();
+	flushedFontFaceKeys = /* @__PURE__ */ new Set();
+	counterStyleRules = /* @__PURE__ */ new Map();
+	flushedCounterStyleKeys = /* @__PURE__ */ new Set();
+	keyframesCounter = 0;
+	counterStyleCounter = 0;
+	internalsCollected = false;
+	/**
+	* Collect internal @property rules and :root token defaults.
+	* Mirrors markStylesGenerated() from the client-side injector.
+	* Called automatically on first chunk collection; idempotent.
+	*/
+	collectInternals() {
+		if (this.internalsCollected) return;
+		this.internalsCollected = true;
+		for (const [token, definition] of Object.entries(INTERNAL_PROPERTIES)) {
+			const css = formatPropertyCSS(token, definition);
+			if (css) this.collectProperty(`__internal:${token}`, css);
+		}
+		if (hasGlobalProperties()) {
+			const globalProps = getGlobalProperties();
+			if (globalProps) for (const [token, definition] of Object.entries(globalProps)) {
+				const css = formatPropertyCSS(token, definition);
+				if (css) this.collectProperty(`__global:${token}`, css);
+			}
+		}
+		const tokenStyles = getGlobalConfigTokens();
+		if (tokenStyles && Object.keys(tokenStyles).length > 0) {
+			const tokenRules = renderStyles(tokenStyles, ":root");
+			if (tokenRules.length > 0) {
+				const css = formatGlobalRules(tokenRules);
+				if (css) this.collectGlobalStyles("__global:tokens", css);
+			}
+		}
+		const globalFF = getGlobalFontFace();
+		if (globalFF) for (const [family, input] of Object.entries(globalFF)) {
+			const descriptors = Array.isArray(input) ? input : [input];
+			for (const desc of descriptors) {
+				const hash = fontFaceContentHash(family, desc);
+				const css = formatFontFaceRule(family, desc);
+				this.collectFontFace(hash, css);
+			}
+		}
+		const globalCS = getGlobalCounterStyle();
+		if (globalCS) for (const [name, descriptors] of Object.entries(globalCS)) {
+			const css = formatCounterStyleRule(name, descriptors);
+			this.collectCounterStyle(name, css);
+		}
+	}
+	/**
+	* Allocate a className for a cache key, server-side.
+	* Mirrors StyleInjector.allocateClassName but without DOM access.
+	*/
+	allocateClassName(cacheKey) {
+		const existing = this.cacheKeyToClassName.get(cacheKey);
+		if (existing) return {
+			className: existing,
+			isNewAllocation: false
+		};
+		const className = generateClassName(this.classCounter++);
+		this.cacheKeyToClassName.set(cacheKey, className);
+		return {
+			className,
+			isNewAllocation: true
+		};
+	}
+	/**
+	* Record CSS rules for a chunk.
+	* Called by useStyles during server render.
+	*/
+	collectChunk(cacheKey, className, rules) {
+		if (this.chunks.has(cacheKey)) return;
+		const css = formatRules(rules, className);
+		if (css) this.chunks.set(cacheKey, css);
+	}
+	/**
+	* Record a @property rule. Deduplicated by name.
+	*/
+	collectProperty(name, css) {
+		if (!this.propertyRules.has(name)) this.propertyRules.set(name, css);
+	}
+	/**
+	* Record a @keyframes rule. Deduplicated by name.
+	*/
+	collectKeyframes(name, css) {
+		if (!this.keyframeRules.has(name)) this.keyframeRules.set(name, css);
+	}
+	/**
+	* Allocate a keyframe name for SSR. Uses provided name or generates one.
+	*/
+	allocateKeyframeName(providedName) {
+		return providedName ?? `k${this.keyframesCounter++}`;
+	}
+	/**
+	* Record a @font-face rule. Deduplicated by key (content hash).
+	*/
+	collectFontFace(key, css) {
+		if (!this.fontFaceRules.has(key)) this.fontFaceRules.set(key, css);
+	}
+	/**
+	* Record a @counter-style rule. Deduplicated by name.
+	*/
+	collectCounterStyle(name, css) {
+		if (!this.counterStyleRules.has(name)) this.counterStyleRules.set(name, css);
+	}
+	/**
+	* Allocate a counter-style name for SSR. Uses provided name or generates one.
+	*/
+	allocateCounterStyleName(providedName) {
+		return providedName ?? `cs${this.counterStyleCounter++}`;
+	}
+	/**
+	* Record global styles (from useGlobalStyles). Deduplicated by key.
+	*/
+	collectGlobalStyles(key, css) {
+		if (!this.globalStyles.has(key)) this.globalStyles.set(key, css);
+	}
+	/**
+	* Record raw CSS text (from useRawCSS). Deduplicated by key.
+	*/
+	collectRawCSS(key, css) {
+		if (!this.rawCSS.has(key)) this.rawCSS.set(key, css);
+	}
+	/**
+	* Extract all CSS collected so far as a single string.
+	* Includes @property and @keyframes rules.
+	* Used for non-streaming SSR (renderToString).
+	*/
+	getCSS() {
+		const parts = [];
+		for (const css of this.propertyRules.values()) parts.push(css);
+		for (const css of this.fontFaceRules.values()) parts.push(css);
+		for (const css of this.counterStyleRules.values()) parts.push(css);
+		for (const css of this.rawCSS.values()) parts.push(css);
+		for (const css of this.globalStyles.values()) parts.push(css);
+		for (const css of this.chunks.values()) parts.push(css);
+		for (const css of this.keyframeRules.values()) parts.push(css);
+		return parts.join("\n");
+	}
+	/**
+	* Flush only newly collected CSS since the last flush.
+	* Used for streaming SSR (renderToPipeableStream + useServerInsertedHTML).
+	*/
+	flushCSS() {
+		const parts = [];
+		for (const [name, css] of this.propertyRules) if (!this.flushedPropertyKeys.has(name)) {
+			parts.push(css);
+			this.flushedPropertyKeys.add(name);
+		}
+		for (const [key, css] of this.fontFaceRules) if (!this.flushedFontFaceKeys.has(key)) {
+			parts.push(css);
+			this.flushedFontFaceKeys.add(key);
+		}
+		for (const [key, css] of this.counterStyleRules) if (!this.flushedCounterStyleKeys.has(key)) {
+			parts.push(css);
+			this.flushedCounterStyleKeys.add(key);
+		}
+		for (const [key, css] of this.rawCSS) if (!this.flushedRawKeys.has(key)) {
+			parts.push(css);
+			this.flushedRawKeys.add(key);
+		}
+		for (const [key, css] of this.globalStyles) if (!this.flushedGlobalKeys.has(key)) {
+			parts.push(css);
+			this.flushedGlobalKeys.add(key);
+		}
+		for (const [key, css] of this.chunks) if (!this.flushedKeys.has(key)) {
+			parts.push(css);
+			this.flushedKeys.add(key);
+		}
+		for (const [name, css] of this.keyframeRules) if (!this.flushedKeyframeKeys.has(name)) {
+			parts.push(css);
+			this.flushedKeyframeKeys.add(name);
+		}
+		return parts.join("\n");
+	}
+	/**
+	* Serialize the cache state for client hydration.
+	*/
+	getCacheState() {
+		const entries = {};
+		for (const [cacheKey, className] of this.cacheKeyToClassName) entries[cacheKey] = className;
+		return {
+			entries,
+			classCounter: this.classCounter
+		};
+	}
+};
+//#endregion
+export { ServerStyleCollector };
+
+//# sourceMappingURL=collector.js.map