@pyreon/unistyle 0.34.0 → 0.36.0

package/lib/index.js

@@ -1,6 +1,7 @@
-import { nativeCompat, provide } from "@pyreon/core";
-import { ThemeContext } from "@pyreon/styler";
+import { h, nativeCompat, provide } from "@pyreon/core";
+import { ThemeContext, css, normalizeCSS, sheet, useThemeAccessor } from "@pyreon/styler";
 import { Provider as Provider$1, config, context, isEmpty, set } from "@pyreon/ui-core";
+import { renderEffect } from "@pyreon/reactivity";
 
 //#region src/responsive/breakpoints.ts
 const breakpoints = {
@@ -739,54 +740,114 @@ function resolveVarPass(s, registry) {
 }
 
 //#endregion
-//#region src/styles/alignContent.ts
-const ALIGN_CONTENT_MAP_SHARED = {
-	center: "center",
-	spaceBetween: "space-between",
-	spaceAround: "space-around",
-	block: "stretch"
-};
-const ALIGN_CONTENT_MAP_X = {
-	left: "flex-start",
-	right: "flex-end",
-	...ALIGN_CONTENT_MAP_SHARED
-};
-const ALIGN_CONTENT_MAP_Y = {
-	top: "flex-start",
-	bottom: "flex-end",
-	...ALIGN_CONTENT_MAP_SHARED
-};
-const ALIGN_CONTENT_DIRECTION = {
-	inline: "row",
-	reverseInline: "row-reverse",
-	rows: "column",
-	reverseRows: "column-reverse"
-};
-const alignContent = (attrs) => {
-	const { direction, alignX, alignY } = attrs;
-	if (isEmpty(attrs) || !direction || !alignX || !alignY) return null;
-	const isReverted = direction === "inline" || direction === "reverseInline";
-	const dir = ALIGN_CONTENT_DIRECTION[direction];
-	const x = ALIGN_CONTENT_MAP_X[alignX];
-	const y = ALIGN_CONTENT_MAP_Y[alignY];
-	return `flex-direction: ${dir}; align-items: ${isReverted ? y : x}; justify-content: ${isReverted ? x : y};`;
-};
-
-//#endregion
-//#region src/styles/extendCss.ts
-const simpleCss = (strings, ...values) => {
-	let result = "";
-	for (let i = 0; i < strings.length; i++) {
-		result += strings[i];
-		if (i < values.length) result += String(values[i] ?? "");
+//#region src/cpse.ts
+/**
+* Custom-Property Style Extraction (CPSE) — Phase 0 proof-of-concept primitive.
+*
+* See `.claude/audits/custom-property-style-extraction-2026-06-22.md` for the
+* full RFC. The thesis: decouple a style prop's **CSS-rule identity** from its
+* **value identity**. Instead of baking the resolved value into the rule —
+*
+*     gap: 2.25rem            // value-DEPENDENT rule → a new rule + a
+*                             // `styler.resolve` per distinct value
+*                             // (cost O(distinct value tuples), proven by
+*                             //  styler/__tests__/static-styler-resolve-cost)
+*
+* — emit a value-AGNOSTIC rule that reads a custom property, and deliver the
+* value per-instance as an inline custom property —
+*
+*     gap: var(--u-<hash>)    // ONE shared rule, resolved ONCE per
+*                             // definition; cost O(component definitions)
+*     style="--u-<hash>: 2.25rem"   // per-instance, no resolve / no hash /
+*                                   //  no new rule
+*
+* This makes styling cost **flat in app cardinality** and gives **dynamic
+* (signal-driven) values for free** (update the inline custom property — no
+* `styler.resolve`, no rule churn).
+*
+* Phase 0 scope: a single declaration / single property, to PROVE the
+* mechanism (1 rule + 1 resolve for N distinct values; computed-style parity
+* with the value-baked path; nesting-safe). Phases 1-4 (RFC §5) generalize
+* across the 170+ unistyle property mappings, responsive arrays (per-breakpoint
+* vars + media queries), the dynamic path, and rocketstyle integration.
+*
+* Self-contained: depends only on unistyle's own `value()` conversion + an
+* inline FNV-1a. Does NOT import `@pyreon/styler` (keeps the primitive
+* layer-pure; only the measurement TESTS reach for the styler counters).
+*/
+const fnv1a = (s) => {
+	let h = 2166136261;
+	for (let i = 0; i < s.length; i++) {
+		h ^= s.charCodeAt(i);
+		h = Math.imul(h, 16777619);
 	}
-	return result;
-};
-const extendCss = (styles) => {
-	if (!styles) return "";
-	if (typeof styles === "function") return styles(simpleCss);
-	return styles;
+	return (h >>> 0).toString(36);
 };
+/**
+* Extract one style declaration into a value-agnostic rule + a per-instance
+* custom-property value.
+*
+* @param property CSS property name (already in CSS-spec form, e.g. `gap`).
+* @param rawValue The author-supplied value (`36`, `"1rem"`, `"var(--x)"`, …).
+* @param rootSize px→rem base (defaults to 16, matching `value()`).
+*/
+function extractStyleVar(property, rawValue, rootSize = 16) {
+	const varName = cpseVarName(property);
+	const converted = value(rawValue, rootSize);
+	return {
+		rule: `${property}:var(${varName})`,
+		varName,
+		varValue: converted == null ? null : String(converted)
+	};
+}
+/**
+* Canonical CPSE custom-property name for a CSS property (+ optional
+* breakpoint suffix for the responsive path). Stable + collision-free across
+* distinct property names; shared across components for the same property
+* (intended — every instance sets its own inline value, §nesting test).
+*/
+function cpseVarName(property, breakpoint) {
+	return breakpoint ? `--u-${fnv1a(property)}-${breakpoint}` : `--u-${fnv1a(property)}`;
+}
+const STRUCTURAL = /[{}&@]|url\(/;
+/**
+* Rewrite every flat `prop: value;` declaration in a resolved CSS fragment to
+* the value-agnostic `prop: var(--u-<hash>[-bp]);` form, writing each value
+* into `varsOut`. Returns the rewritten fragment. Fragments carrying any
+* structure (selectors, at-rules, nesting, url()) are returned UNCHANGED.
+*
+* This operates on `processDescriptor`'s ALREADY-RESOLVED output, so it
+* inherits every unit-conversion / shorthand correctness for free and stays
+* general across the whole property map.
+*
+* @param frag       a resolved CSS fragment, e.g. `"gap: 2.25rem;"` or
+*                   `"margin: 1rem 2rem;"` (possibly several `;`-separated).
+* @param varsOut    sink: `varName → value` for the per-instance inline props.
+* @param breakpoint optional suffix so per-breakpoint values get distinct vars.
+*/
+function cpseRewrite(frag, varsOut, breakpoint) {
+	if (!frag || STRUCTURAL.test(frag)) return frag;
+	let out = "";
+	for (const decl of frag.split(";")) {
+		const trimmed = decl.trim();
+		if (!trimmed) continue;
+		const colon = trimmed.indexOf(":");
+		if (colon < 1) {
+			out += `${trimmed};`;
+			continue;
+		}
+		const prop = trimmed.slice(0, colon).trim();
+		const val = trimmed.slice(colon + 1).trim();
+		if (!val || val.startsWith("var(") || !/^[a-z][a-z-]*$/.test(prop)) {
+			out += `${trimmed};`;
+			continue;
+		}
+		const varName = cpseVarName(prop, breakpoint);
+		varsOut[varName] = val;
+		out += `${prop}:var(${varName});`;
+	}
+	return out;
+}
 
 //#endregion
 //#region src/styles/shorthands/borderRadius.ts
@@ -2391,7 +2452,7 @@ for (let i = 0; i < propertyMap.length; i++) {
 * pseudo-selectors, and @layer wrapping.
 */
 const _seen = /* @__PURE__ */ new Set();
-const styles = ({ theme: t, css, rootSize }) => {
+const styles = ({ theme: t, css, rootSize, extractVars, breakpoint }) => {
 	if (process.env.NODE_ENV !== "production") _countSink.__pyreon_count__?.("unistyle.styles");
 	const calc = (...params) => values(params, rootSize);
 	const shorthand = edge(rootSize);
@@ -2405,14 +2466,18 @@ const styles = ({ theme: t, css, rootSize }) => {
 			if (_seen.has(idx)) continue;
 			_seen.add(idx);
 			if (process.env.NODE_ENV !== "production") _countSink.__pyreon_count__?.("unistyle.descriptor");
-			fragments.push(processDescriptor(propertyMap[idx], t, css, calc, shorthand, borderRadiusFn));
+			let frag = processDescriptor(propertyMap[idx], t, css, calc, shorthand, borderRadiusFn);
+			if (extractVars && typeof frag === "string") frag = cpseRewrite(frag, extractVars, breakpoint);
+			fragments.push(frag);
 		}
 	}
 	if (fragments.length === 0 && Object.keys(t).length > 0) {
 		if (process.env.NODE_ENV !== "production") _countSink.__pyreon_count__?.("unistyle.descriptor.fallback-scan");
 		for (const d of propertyMap) {
 			if (process.env.NODE_ENV !== "production") _countSink.__pyreon_count__?.("unistyle.descriptor");
-			fragments.push(processDescriptor(d, t, css, calc, shorthand, borderRadiusFn));
+			let frag = processDescriptor(d, t, css, calc, shorthand, borderRadiusFn);
+			if (extractVars && typeof frag === "string") frag = cpseRewrite(frag, extractVars, breakpoint);
+			fragments.push(frag);
 		}
 	}
 	return css`
@@ -2421,5 +2486,205 @@ const styles = ({ theme: t, css, rootSize }) => {
 };
 
 //#endregion
-export { ALIGN_CONTENT_DIRECTION, ALIGN_CONTENT_MAP_X, ALIGN_CONTENT_MAP_Y, CSS_VARS_DEFAULT_EXCLUDE, Provider, alignContent, breakpoints, context, createMediaQueries, enrichTheme, extendCss, makeItResponsive, normalizeTheme, resolveCssVarReferences, sortBreakpoints, stripUnit, styles, themeToCssVars, transformTheme, value, values };
+//#region src/cpse-styled.tsx
+const RESERVED = /* @__PURE__ */ new Set([
+	"styles",
+	"rootSize",
+	"breakpoints",
+	"class",
+	"ref",
+	"children"
+]);
+const DEFAULT_BREAKPOINTS = {
+	xs: 0,
+	sm: 576,
+	md: 768,
+	lg: 992,
+	xl: 1200
+};
+/** A value is responsive if it's a mobile-first array or a breakpoint object
+* (a `var(--x)` / plain string is NOT — strings are scalar). */
+const isResponsiveValue = (v) => Array.isArray(v) || v != null && typeof v === "object";
+const isResponsiveTheme = (t) => {
+	for (const k in t) if (isResponsiveValue(t[k])) return true;
+	return false;
+};
+/** Expand a responsive theme into per-breakpoint flat themes (only the
+* breakpoints that actually carry a value). Mobile-first arrays map index→
+* sorted-breakpoint; breakpoint objects map by key; scalars land on the base. */
+function expandResponsive(t, sorted) {
+	const perBp = /* @__PURE__ */ new Map();
+	const put = (bp, prop, val) => {
+		let m = perBp.get(bp);
+		if (!m) {
+			m = {};
+			perBp.set(bp, m);
+		}
+		m[prop] = val;
+	};
+	const rec = t;
+	for (const prop in rec) {
+		const v = rec[prop];
+		if (Array.isArray(v)) {
+			for (let i = 0; i < v.length && i < sorted.length; i++) if (v[i] != null) put(sorted[i], prop, v[i]);
+		} else if (v != null && typeof v === "object") for (const bp in v) {
+			const bv = v[bp];
+			if (sorted.includes(bp) && bv != null) put(bp, prop, bv);
+		}
+		else put(sorted[0], prop, v);
+	}
+	return perBp;
+}
+function cpseStyled(tag) {
+	const classByShape = /* @__PURE__ */ new Map();
+	/**
+	* Compute the per-instance var map (always) and the value-agnostic className
+	* (resolved + inserted only on the first sighting of a shape). Returns both.
+	* `styles({ extractVars })` writes vars synchronously while building fragments,
+	* so vars are ready without the expensive `String(...)` (→ `styler.resolve`)
+	* + insert — those run only on a cache miss.
+	*/
+	const resolve = (styleTheme, rootSize, breakpoints) => {
+		const vars = {};
+		if (!isResponsiveTheme(styleTheme)) {
+			const result = styles({
+				theme: styleTheme,
+				css,
+				rootSize,
+				extractVars: vars
+			});
+			const shapeKey = `flat:${Object.keys(styleTheme).sort().join("|")}`;
+			let className = classByShape.get(shapeKey);
+			if (className === void 0) {
+				const text = normalizeCSS(String(result));
+				className = text.length > 0 ? sheet.insert(text) : "";
+				classByShape.set(shapeKey, className);
+			}
+			return {
+				className,
+				vars
+			};
+		}
+		const sorted = sortBreakpoints(breakpoints);
+		const perBp = expandResponsive(styleTheme, sorted);
+		const mq = createMediaQueries({
+			breakpoints,
+			rootSize,
+			css
+		});
+		const frags = [];
+		const shapeParts = [];
+		for (const bp of sorted) {
+			const flat = perBp.get(bp);
+			if (!flat || Object.keys(flat).length === 0) continue;
+			const decl = String(styles({
+				theme: flat,
+				css,
+				rootSize,
+				extractVars: vars,
+				breakpoint: bp
+			}));
+			frags.push(String(mq[bp]`${decl}`));
+			shapeParts.push(`${bp}:${Object.keys(flat).sort().join(",")}`);
+		}
+		const shapeKey = `resp:${shapeParts.join("|")}`;
+		let className = classByShape.get(shapeKey);
+		if (className === void 0) {
+			const text = normalizeCSS(frags.join("\n"));
+			className = text.length > 0 ? sheet.insert(text) : "";
+			classByShape.set(shapeKey, className);
+		}
+		return {
+			className,
+			vars
+		};
+	};
+	return (props) => {
+		const theme = useThemeAccessor()() ?? {};
+		const rootSize = props.rootSize ?? theme.rootSize ?? 16;
+		const breakpoints = props.breakpoints ?? theme.breakpoints ?? DEFAULT_BREAKPOINTS;
+		const stylesProp = props.styles;
+		const isDynamic = typeof stylesProp === "function";
+		const getTheme = () => isDynamic ? stylesProp() : stylesProp ?? {};
+		const first = resolve(getTheme(), rootSize, breakpoints);
+		const className = props.class ? `${first.className} ${props.class}` : first.className;
+		const rest = {};
+		for (const k in props) if (!RESERVED.has(k)) rest[k] = props[k];
+		let el = null;
+		const applyVars = (vars) => {
+			if (!el) return;
+			for (const k in vars) el.style.setProperty(k, vars[k]);
+		};
+		const ref = (node) => {
+			el = node;
+			if (el) applyVars(first.vars);
+			const userRef = props.ref;
+			if (typeof userRef === "function") userRef(node);
+			else if (userRef && typeof userRef === "object") userRef.current = node;
+		};
+		if (isDynamic) renderEffect(() => {
+			applyVars(resolve(getTheme(), rootSize, breakpoints).vars);
+		});
+		const children = props.children != null ? [props.children] : [];
+		return h(tag, {
+			class: className,
+			style: first.vars,
+			ref,
+			...rest
+		}, ...children);
+	};
+}
+
+//#endregion
+//#region src/styles/alignContent.ts
+const ALIGN_CONTENT_MAP_SHARED = {
+	center: "center",
+	spaceBetween: "space-between",
+	spaceAround: "space-around",
+	block: "stretch"
+};
+const ALIGN_CONTENT_MAP_X = {
+	left: "flex-start",
+	right: "flex-end",
+	...ALIGN_CONTENT_MAP_SHARED
+};
+const ALIGN_CONTENT_MAP_Y = {
+	top: "flex-start",
+	bottom: "flex-end",
+	...ALIGN_CONTENT_MAP_SHARED
+};
+const ALIGN_CONTENT_DIRECTION = {
+	inline: "row",
+	reverseInline: "row-reverse",
+	rows: "column",
+	reverseRows: "column-reverse"
+};
+const alignContent = (attrs) => {
+	const { direction, alignX, alignY } = attrs;
+	if (isEmpty(attrs) || !direction || !alignX || !alignY) return null;
+	const isReverted = direction === "inline" || direction === "reverseInline";
+	const dir = ALIGN_CONTENT_DIRECTION[direction];
+	const x = ALIGN_CONTENT_MAP_X[alignX];
+	const y = ALIGN_CONTENT_MAP_Y[alignY];
+	return `flex-direction: ${dir}; align-items: ${isReverted ? y : x}; justify-content: ${isReverted ? x : y};`;
+};
+
+//#endregion
+//#region src/styles/extendCss.ts
+const simpleCss = (strings, ...values) => {
+	let result = "";
+	for (let i = 0; i < strings.length; i++) {
+		result += strings[i];
+		if (i < values.length) result += String(values[i] ?? "");
+	}
+	return result;
+};
+const extendCss = (styles) => {
+	if (!styles) return "";
+	if (typeof styles === "function") return styles(simpleCss);
+	return styles;
+};
+
+//#endregion
+export { ALIGN_CONTENT_DIRECTION, ALIGN_CONTENT_MAP_X, ALIGN_CONTENT_MAP_Y, CSS_VARS_DEFAULT_EXCLUDE, Provider, alignContent, breakpoints, context, cpseRewrite, cpseStyled, cpseVarName, createMediaQueries, enrichTheme, extendCss, extractStyleVar, makeItResponsive, normalizeTheme, resolveCssVarReferences, sortBreakpoints, stripUnit, styles, themeToCssVars, transformTheme, value, values };
 //# sourceMappingURL=index.js.map