@yahoo/uds-v5-wip 1.60.0 → 1.61.0

package/dist/config.js

@@ -1,22 +1,17 @@
-import { defaultColors } from "./config/dist/consts/defaultColors.js";
-import { buildTokenReference, createConfigBuilder, darker, lighter, resolveConfig } from "./config/dist/createConfig.js";
+import { buildStylePropClassName } from "./config/dist/className.js";
+import { bool, composite, enums, hidden, slot, string, styleProp, token, tokenGroup } from "./config/dist/component-config.js";
+import { PROPERTY_ACCEPTED_TYPES, isTokenAcceptedByProperty } from "./config/dist/propertyAcceptedTypes.js";
+import { darken, isTokenWithModifier, lighten, resolveTokenValue, resolveTokenWithModifier } from "./config/dist/refs.js";
+import { sniffTokenTypeFromValue } from "./config/dist/sniffTokenType.js";
+import { detectTokenValueType, getColorOpacityMap, resolveStyleProp } from "./config/dist/resolveStyleProp.js";
+import { buildCompositeStylesReference, buildTokenReference, convertModesInputToGroups, createConfigBuilder, darker, interpolate, lighter, rem, resolveConfig, uds } from "./config/dist/createConfig.js";
+import { createStyler } from "./config/dist/createStyler.js";
+import { defineComponent } from "./config/dist/defineComponent.js";
+import { defineCompositeStyle } from "./config/dist/defineCompositeStyle.js";
+import { definePreview } from "./config/dist/definePreview.js";
+import { defineStyleProp } from "./config/dist/defineStyleProp.js";
+import { applyCompoundProps, isLayerHidden, resolveCompoundProps } from "./config/dist/resolveCompoundProps.js";
 import { buildReverseMap, deserializeConfig, serializeConfig } from "./config/dist/serialize.js";
+import { BUILT_IN_PSEUDO, buildStylePropRuntime, processStyleProps } from "./config/dist/style-prop-runtime.js";
 import "./config/dist/index.js";
-import { defaultPreset as defaultPreset$1 } from "./presets/dist/defaultPreset.js";
-import "./presets/dist/index.js";
-//#region src/config.ts
-/** biome-ignore-all lint/suspicious/noExplicitAny: necessary for dynamic builder */
-const uds = createConfigBuilder({
-	atomic: [],
-	modes: [],
-	modifiers: [],
-	compositeStyles: {},
-	motion: {},
-	components: {},
-	globalStyles: {},
-	preflight: true,
-	prefix: "uds"
-});
-const defaultPreset = defaultPreset$1;
-//#endregion
-export { buildReverseMap, buildTokenReference, createConfigBuilder, darker, defaultColors, defaultPreset, deserializeConfig, lighter, resolveConfig, serializeConfig, uds };
+export { BUILT_IN_PSEUDO, PROPERTY_ACCEPTED_TYPES, applyCompoundProps, bool, buildCompositeStylesReference, buildReverseMap, buildStylePropClassName, buildStylePropRuntime, buildTokenReference, composite, convertModesInputToGroups, createConfigBuilder, createStyler, darken, darker, defineComponent, defineCompositeStyle, definePreview, defineStyleProp, deserializeConfig, detectTokenValueType, enums, getColorOpacityMap, hidden, interpolate, isLayerHidden, isTokenAcceptedByProperty, isTokenWithModifier, lighten, lighter, processStyleProps, rem, resolveCompoundProps, resolveConfig, resolveStyleProp, resolveTokenValue, resolveTokenWithModifier, serializeConfig, slot, sniffTokenTypeFromValue, string, styleProp, token, tokenGroup, uds };

package/dist/loader/dist/_virtual/_rolldown/runtime.js

@@ -1,6 +1,5 @@
 import { createRequire } from "node:module";
 //#region ../loader/dist/_virtual/_rolldown/runtime.js
-var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 //#endregion
-export { __commonJSMin, __require };
+export { __require };

package/dist/loader/dist/index.d.ts

@@ -0,0 +1,2 @@
+import { transformLoader } from "./loader.js";
+import { UdsPluginOptions, udsPlugin } from "./unplugin.js";

package/dist/loader/dist/index.js

@@ -0,0 +1,3 @@
+import "./loader.js";
+import "./transform-runner.js";
+import "./unplugin.js";

package/dist/loader/dist/loader/artifacts.js

@@ -37,7 +37,7 @@ const manifestLoader = createCachedJsonLoaderWithSeed();
 const transformDataLoader = createCachedJsonLoaderWithSeed();
 const loadManifest = manifestLoader.load;
 manifestLoader.seed;
-const loadTransformData = transformDataLoader.load;
+transformDataLoader.load;
 transformDataLoader.seed;
 //#endregion
-export { loadManifest, loadTransformData };
+export { loadManifest };

package/dist/loader/dist/loader/babel-utils.js

@@ -1,29 +1 @@
-import * as t from "@babel/types";
-//#region ../loader/dist/loader/babel-utils.js
-/** JSX function names used by compiled JSX (React, etc.) */
-const COMPILED_JSX_NAMES = new Set([
-	"jsx",
-	"jsxs",
-	"jsxDEV",
-	"_jsx",
-	"_jsxs",
-	"_jsxDEV"
-]);
-/**
-* Check whether a callee expression is a compiled JSX call.
-*
-* Matches:
-* - Direct identifiers: `jsx(...)`, `_jsxs(...)`, `jsxDEV(...)`, etc.
-* - Member expressions: `React.jsx(...)`, `_reactJsxRuntime.jsxs(...)`, etc.
-*/
-function isCompiledJsxCallee(node) {
-	if (!node) return false;
-	if (t.isIdentifier(node)) return COMPILED_JSX_NAMES.has(node.name);
-	if (t.isMemberExpression(node) || t.isOptionalMemberExpression(node)) {
-		if (!node.computed && t.isIdentifier(node.property)) return COMPILED_JSX_NAMES.has(node.property.name);
-		if (node.computed && t.isStringLiteral(node.property)) return COMPILED_JSX_NAMES.has(node.property.value);
-	}
-	return false;
-}
-//#endregion
-export { isCompiledJsxCallee };
+import "@babel/types";

package/dist/loader/dist/loader/internal-meta.js

@@ -1,4 +1,5 @@
 import path from "node:path";
+import * as t from "@babel/types";
 //#region ../loader/dist/loader/internal-meta.js
 function hashToNumericId(value) {
 	let hash = 2166136261;
@@ -18,5 +19,41 @@ function buildUdsId(meta) {
 function buildSourceRef(resourcePath, projectRoot, location) {
 	return `${path.relative(projectRoot, resourcePath).replaceAll(path.sep, "/")}:${location.line}:${location.column + 1}`;
 }
+function getJsxStringAttributeValue(nodePath, attrName) {
+	const attribute = nodePath.node.attributes.find((attr) => attr.type === "JSXAttribute" && attr.name?.type === "JSXIdentifier" && attr.name.name === attrName && attr.value?.type === "StringLiteral");
+	if (!attribute || attribute.value?.type !== "StringLiteral") return null;
+	return attribute.value.value;
+}
+function upsertInternalStringProp(nodePath, propName, value) {
+	const existing = nodePath.node.attributes.find((attr) => attr.type === "JSXAttribute" && attr.name?.type === "JSXIdentifier" && attr.name.name === propName);
+	if (existing) {
+		existing.value = t.stringLiteral(value);
+		return;
+	}
+	nodePath.node.attributes.push(t.jsxAttribute(t.jsxIdentifier(propName), t.stringLiteral(value)));
+}
+/**
+* Inject `data-uds-id` + `data-uds-source` metadata onto a JSX
+* opening element so the devtools panel / anatomy view can locate
+* each element back to its source position.
+*/
+function injectInternalUdsProps(nodePath, resourcePath, projectRoot, fallback = {}) {
+	const effectiveResourcePath = resourcePath || nodePath?.hub?.file?.opts?.filename || "";
+	if (!effectiveResourcePath) return;
+	const start = nodePath.node.loc?.start;
+	if (!start?.line || start.column === void 0) return;
+	const sourceRef = buildSourceRef(effectiveResourcePath, projectRoot, {
+		line: start.line,
+		column: start.column
+	});
+	const udsId = buildUdsId({
+		componentName: getJsxStringAttributeValue(nodePath, "data-uds-component") ?? fallback.componentName,
+		slotName: getJsxStringAttributeValue(nodePath, "data-uds-slot") ?? fallback.slotName,
+		sourceRef
+	});
+	if (!udsId) return;
+	upsertInternalStringProp(nodePath, "data-uds-id", udsId);
+	upsertInternalStringProp(nodePath, "data-uds-source", sourceRef);
+}
 //#endregion
-export { buildSourceRef, buildUdsId };
+export { injectInternalUdsProps };

package/dist/loader/dist/loader/lower-new-api-primitive.js

@@ -1,29 +1,127 @@
 //#region ../loader/dist/loader/lower-new-api-primitive.js
 /**
+* Convert a token name to its class-name-safe form. Mirrors
+* `safeTokenName` from `@uds/utils`: `.` → `_`, `/` → `-`. Inlined
+* here so the loader stays free of cross-package runtime imports for
+* a one-line transform.
+*
+*     toSafeTokenName('1.5')          // → '1_5'
+*     toSafeTokenName('always/black') // → 'always-black'
+*     toSafeTokenName('brand')        // → 'brand'
+*/
+function toSafeTokenName(value) {
+	return value.replace(/\./g, "_").replace(/\//g, "-");
+}
+/**
 * Build the className a binding emits for a given value. Mirrors the
 * codegen convention in `packages/codegen/src/css/prepareCss.ts`:
 *
-*  - `classPrefix === ''` / `'no-prefix'` → value IS the class.
+*  - `classPrefix === ''` → value IS the class.
 *  - Bracketed arbitrary values (`'[#abc]'`) → preserved verbatim
 *    (`bg-[#abc]`).
-*  - Otherwise → `${classPrefix}-${value}`.
+*  - Boolean `true` (passed in as the string `'true'`) → bare
+*    `classPrefix` (`<Box border>` / `<Box border={true}>` →
+*    `'border'`, not `'border-true'`).
+*  - Blessed token / literal / alias (in `binding.blessedValues`) →
+*    `${classPrefix}-${value}`.
+*  - Otherwise, if the prop accepts arbitrary values
+*    (`binding.acceptsArbitrary`) → `${classPrefix}-[value]`
+*    (auto-bracket so the consumer can write `fontSize="0.8125rem"`
+*    instead of `fontSize="[0.8125rem]"`).
+*  - Otherwise (when blessed/arbitrary metadata is absent — test
+*    fixtures) fall back to `${classPrefix}-${value}`.
+*
+* Returns `undefined` when no class should be emitted — caller drops
+* the contribution. Boolean `false` lands here.
+*/
+function buildClassName(binding, value) {
+	if (value === "false") return void 0;
+	if (value === "true") return binding.classPrefix || void 0;
+	const isNoPrefix = binding.classPrefix === "";
+	if (value.startsWith("[") && value.endsWith("]")) {
+		if (isNoPrefix) return value.slice(1, -1);
+		return `${binding.classPrefix}-${value}`;
+	}
+	if (isNoPrefix) return value;
+	if (!(binding.blessedValues !== void 0 || binding.acceptsArbitrary !== void 0)) return `${binding.classPrefix}-${toSafeTokenName(value)}`;
+	if (binding.blessedValues?.includes(value)) return `${binding.classPrefix}-${toSafeTokenName(value)}`;
+	if (binding.acceptsArbitrary) return `${binding.classPrefix}-[${value}]`;
+}
+/**
+* Read a JS expression node as a literal string when statically
+* resolvable. Mirrors `readStaticString` but operates on a bare
+* expression (used by the branch-compiler below to drill into
+* ternary / `&&` branches that aren't wrapped in JSX containers).
+*
+* Returns `undefined` for any non-literal form.
+*/
+function readStaticStringFromExpression(expr) {
+	if (!expr) return void 0;
+	if (expr.type === "StringLiteral") return expr.value;
+	if (expr.type === "NumericLiteral") return String(expr.value);
+	if (expr.type === "BooleanLiteral") return String(expr.value);
+	if (expr.type === "TemplateLiteral" && expr.expressions.length === 0 && expr.quasis.length === 1) return expr.quasis[0].value.cooked ?? expr.quasis[0].value.raw;
+	if (expr.type === "Identifier" && expr.name === "undefined") return "";
+	if (expr.type === "NullLiteral") return "";
+}
+/**
+* Try to compile a dynamic JSX expression into a className expression
+* with pre-resolved per-branch class names. Mirrors the legacy
+* `tryCompileStaticBranchExpression` in `style-transform.ts` so the
+* new-API lowering matches existing behavior for the common ternary /
+* `&&` patterns:
+*
+*     bg={isActive ? 'primary' : undefined}
+*     → isActive ? 'bg-primary' : ''
+*
+*     color={isActive && 'on-primary'}
+*     → isActive && 'color-on-primary'
+*
+* Returns `null` when the expression isn't a statically-resolvable
+* branch shape — caller bails on lowering for that prop. (Variables,
+* function calls, member access of dynamic values: those need runtime
+* resolution.)
 */
-function buildClassName(classPrefix, noPrefix, value) {
-	if (noPrefix) return value;
-	return `${classPrefix}-${value}`;
+function tryCompileBranchClassExpression(expr, binding, t) {
+	if (expr.type === "ConditionalExpression") {
+		const consequentValue = readStaticStringFromExpression(expr.consequent);
+		const alternateValue = readStaticStringFromExpression(expr.alternate);
+		const compileLeafValue = (value) => value === "" ? "" : buildClassName(binding, value) ?? "";
+		const compiledConsequent = consequentValue !== void 0 ? t.stringLiteral(compileLeafValue(consequentValue)) : tryCompileBranchClassExpression(expr.consequent, binding, t);
+		const compiledAlternate = alternateValue !== void 0 ? t.stringLiteral(compileLeafValue(alternateValue)) : tryCompileBranchClassExpression(expr.alternate, binding, t);
+		if (compiledConsequent && compiledAlternate) return t.conditionalExpression(t.cloneNode(expr.test), compiledConsequent, compiledAlternate);
+		return null;
+	}
+	if (expr.type === "LogicalExpression" && expr.operator === "&&") {
+		const rightValue = readStaticStringFromExpression(expr.right);
+		if (rightValue !== void 0) {
+			const className = buildClassName(binding, rightValue) ?? "";
+			return t.logicalExpression("&&", t.cloneNode(expr.left), t.stringLiteral(className));
+		}
+		return null;
+	}
+	return null;
 }
 /**
 * Read a JSX attribute value as a literal string when statically
-* resolvable. Handles `attr="x"`, `attr={"x"}`, and template-literal
-* expressions with no interpolations. Returns `undefined` for any
-* dynamic form so the caller can bail.
+* resolvable. Handles:
+*
+*  - `attr="x"`  → `"x"`
+*  - `attr={"x"}` / `attr={\`x\`}` (no interpolations) → `"x"`
+*  - `attr={2}` (numeric literal) → `"2"`
+*  - `attr={true}` / `attr={false}` (boolean literal) → `"true"` / `"false"`
+*  - `attr` with no value (boolean prop shorthand) → `"true"`
+*
+* Returns `undefined` for any dynamic form so the caller can bail.
 */
 function readStaticString(value) {
-	if (!value) return void 0;
+	if (!value) return "true";
 	if (value.type === "StringLiteral") return value.value;
 	if (value.type === "JSXExpressionContainer") {
 		const expr = value.expression;
 		if (expr.type === "StringLiteral") return expr.value;
+		if (expr.type === "NumericLiteral") return String(expr.value);
+		if (expr.type === "BooleanLiteral") return String(expr.value);
 		if (expr.type === "TemplateLiteral" && expr.expressions.length === 0 && expr.quasis.length === 1) return expr.quasis[0].value.cooked ?? expr.quasis[0].value.raw;
 	}
 }
@@ -42,6 +140,7 @@ function readStaticString(value) {
 function lowerNewApiPrimitiveJsx(openingElement, closingElement, entry, t) {
 	let tag = entry.tag;
 	const classNames = [...entry.defaultClassNames];
+	const dynamicClassExprs = [];
 	const passthroughAttrs = [];
 	let existingClassName = null;
 	for (const attr of openingElement.attributes ?? []) {
@@ -60,16 +159,68 @@ function lowerNewApiPrimitiveJsx(openingElement, closingElement, entry, t) {
 		}
 		const binding = entry.propBindings[attrName];
 		if (binding) {
-			const value = readStaticString(attr.value);
-			if (value === void 0) return false;
-			classNames.push(buildClassName(binding.classPrefix, binding.noPrefix, value));
+			const staticValue = readStaticString(attr.value);
+			if (staticValue !== void 0) {
+				const className = buildClassName(binding, staticValue);
+				if (className !== void 0) classNames.push(className);
+				continue;
+			}
+			if (attr.value?.type === "JSXExpressionContainer") {
+				const compiled = tryCompileBranchClassExpression(attr.value.expression, binding, t);
+				if (compiled) {
+					dynamicClassExprs.push(compiled);
+					continue;
+				}
+			}
+			return false;
+		}
+		if (attrName.startsWith("_")) {
+			const variantPrefix = entry.modifiersTwMap?.[attrName];
+			if (!variantPrefix) continue;
+			const objectExpr = attr.value?.type === "JSXExpressionContainer" ? attr.value.expression : void 0;
+			if (!objectExpr || objectExpr.type !== "ObjectExpression") return false;
+			let bailed = false;
+			for (const property of objectExpr.properties) {
+				if (property.type !== "ObjectProperty" || property.computed) {
+					bailed = true;
+					break;
+				}
+				const key = property.key?.type === "Identifier" ? property.key.name : property.key?.type === "StringLiteral" ? property.key.value : void 0;
+				if (!key) {
+					bailed = true;
+					break;
+				}
+				const value = readStaticString(property.value);
+				if (value === void 0) {
+					bailed = true;
+					break;
+				}
+				const innerBinding = entry.propBindings[key];
+				if (!innerBinding) {
+					bailed = true;
+					break;
+				}
+				const innerClass = buildClassName(innerBinding, value);
+				if (innerClass !== void 0) classNames.push(`${variantPrefix}${innerClass}`);
+			}
+			if (bailed) return false;
 			continue;
 		}
 		passthroughAttrs.push(attr);
 	}
 	const boundClassName = classNames.join(" ");
 	let classNameAttr = null;
-	if (existingClassName === null && boundClassName.length > 0) classNameAttr = t.jsxAttribute(t.jsxIdentifier("className"), t.stringLiteral(boundClassName));
+	if (dynamicClassExprs.length > 0) {
+		const parts = [];
+		if (boundClassName.length > 0) parts.push(t.stringLiteral(boundClassName));
+		for (const expr of dynamicClassExprs) parts.push(expr);
+		if (existingClassName !== null) {
+			if (existingClassName.type === "StringLiteral") parts.push(t.stringLiteral(existingClassName.value));
+			else if (existingClassName.type === "JSXExpressionContainer") parts.push(t.cloneNode(existingClassName.expression));
+		}
+		const joinExpr = t.callExpression(t.memberExpression(t.callExpression(t.memberExpression(t.arrayExpression(parts), t.identifier("filter")), [t.identifier("Boolean")]), t.identifier("join")), [t.stringLiteral(" ")]);
+		classNameAttr = t.jsxAttribute(t.jsxIdentifier("className"), t.jsxExpressionContainer(joinExpr));
+	} else if (existingClassName === null && boundClassName.length > 0) classNameAttr = t.jsxAttribute(t.jsxIdentifier("className"), t.stringLiteral(boundClassName));
 	else if (existingClassName !== null) if (existingClassName.type === "StringLiteral") {
 		const merged = boundClassName ? `${existingClassName.value} ${boundClassName}` : existingClassName.value;
 		classNameAttr = t.jsxAttribute(t.jsxIdentifier("className"), t.stringLiteral(merged));
@@ -81,8 +232,19 @@ function lowerNewApiPrimitiveJsx(openingElement, closingElement, entry, t) {
 		const finalExpr = boundClassName ? t.binaryExpression("+", t.binaryExpression("+", expr, t.stringLiteral(" ")), t.stringLiteral(boundClassName)) : expr;
 		classNameAttr = t.jsxAttribute(t.jsxIdentifier("className"), t.jsxExpressionContainer(finalExpr));
 	} else return false;
+	const anatomyAttrs = [];
+	if (entry.componentName) {
+		const alreadyHasSlot = passthroughAttrs.some((a) => a.type === "JSXAttribute" && a.name?.name === "data-uds-slot");
+		const alreadyHasComponent = passthroughAttrs.some((a) => a.type === "JSXAttribute" && a.name?.name === "data-uds-component");
+		if (!alreadyHasSlot) anatomyAttrs.push(t.jsxAttribute(t.jsxIdentifier("data-uds-slot"), t.stringLiteral("root")));
+		if (!alreadyHasComponent) anatomyAttrs.push(t.jsxAttribute(t.jsxIdentifier("data-uds-component"), t.stringLiteral(entry.componentName)));
+	}
 	openingElement.name = t.jsxIdentifier(tag);
-	openingElement.attributes = classNameAttr ? [classNameAttr, ...passthroughAttrs] : passthroughAttrs;
+	openingElement.attributes = [
+		...classNameAttr ? [classNameAttr] : [],
+		...passthroughAttrs,
+		...anatomyAttrs
+	];
 	if (closingElement) closingElement.name = t.jsxIdentifier(tag);
 	return true;
 }

package/dist/loader/dist/loader.d.ts

@@ -1,7 +1,35 @@
 import { LoaderDefinitionFunction } from "webpack";
 
 //#region ../loader/dist/loader.d.ts
+//#region src/loader.d.ts
+/**
+ * The UDS loader's only build-time job. Three responsibilities, one
+ * Babel pass:
+ *
+ *  1. **Import rewrite** — when the source imports a registered
+ *     component from an aliased local path (e.g.
+ *     `@/uds/components/box`), rewrite the import source to
+ *     `'#uds/components'` so it resolves to the codegen-emitted
+ *     `.uds/components.tsx` barrel. The authoring file
+ *     (`apps/<app>/src/uds/components/<name>.tsx`) is only read by
+ *     codegen — production renders the downleveled FC.
+ *
+ *  2. **Static primitive JSX lowering** — when a JSX site references a
+ *     registered primitive (`type: 'primitive'` + non-empty
+ *     `propBindings` in the manifest), try `lowerNewApiPrimitiveJsx`
+ *     to bake a literal `className="bg-primary"` into the output.
+ *     Skips the codegen FC's runtime className concatenation entirely
+ *     in the all-static case. Falls through to the runtime FC when
+ *     lowering bails.
+ *
+ *  3. **Dev-mode metadata** — inject `data-uds-id` + `data-uds-source`
+ *     attrs onto every UDS JSX site so devtools can map elements
+ *     back to source positions. Off in production.
+ *
+ * Anything else (motion wiring, composite expansion, slot resolution,
+ * styler tracking) is owned by codegen and intentionally absent here.
+ */
 declare const transformLoader: LoaderDefinitionFunction;
-declare const normal: LoaderDefinitionFunction<{}, {}>;
+declare const normal: LoaderDefinitionFunction<{}, {}>; //#endregion
 //#endregion
 export { normal, transformLoader };