@yahoo/uds-v5-wip 0.0.1

package/dist/config/dist/preset-merge.js

@@ -0,0 +1,165 @@
+import { validateComponentVariants } from "./component-resolution.js";
+//#region ../config/dist/preset-merge.js
+const defaultComponentDefinitionMergeStrategy = {
+	tokens: "preserve",
+	modes: "merge",
+	modifiers: "merge",
+	motion: "merge",
+	components: "merge",
+	globalStyles: "merge",
+	examples: "merge"
+};
+function flattenAtomic(atomic) {
+	const entries = [];
+	for (const group of atomic) for (const property of group.properties) for (const token of group.tokens) entries.push({
+		property,
+		cssPrefix: group.cssPrefix,
+		token
+	});
+	return entries;
+}
+function tokenKey(entry) {
+	return `${entry.property}|${entry.cssPrefix ?? ""}|${entry.token.name}`;
+}
+function mergeAtomic(base, incoming, mode) {
+	if (incoming.length === 0) return base;
+	if (base.length === 0) return incoming;
+	const baseEntries = flattenAtomic(base);
+	const incomingEntries = flattenAtomic(incoming);
+	const merged = /* @__PURE__ */ new Map();
+	for (const entry of baseEntries) merged.set(tokenKey(entry), entry);
+	for (const entry of incomingEntries) {
+		const key = tokenKey(entry);
+		if (mode === "preserve" && merged.has(key)) continue;
+		merged.set(key, entry);
+	}
+	const regrouped = /* @__PURE__ */ new Map();
+	for (const entry of merged.values()) {
+		const groupKey = `${entry.property}|${entry.cssPrefix ?? ""}`;
+		const existing = regrouped.get(groupKey);
+		if (existing) {
+			existing.tokens.push(entry.token);
+			continue;
+		}
+		regrouped.set(groupKey, {
+			properties: [entry.property],
+			...entry.cssPrefix ? { cssPrefix: entry.cssPrefix } : {},
+			tokens: [entry.token]
+		});
+	}
+	return Array.from(regrouped.values());
+}
+function mergeModes(base, incoming, mode) {
+	if (incoming.length === 0) return base;
+	if (base.length === 0) return incoming;
+	const result = [...base];
+	for (const nextGroup of incoming) {
+		const idx = result.findIndex((g) => g.name === nextGroup.name);
+		if (idx === -1) {
+			result.push(nextGroup);
+			continue;
+		}
+		if (mode === "preserve") continue;
+		if (mode === "override") {
+			result[idx] = nextGroup;
+			continue;
+		}
+		const current = result[idx];
+		const optionMap = new Map(current.options.map((opt) => [opt.modifier, opt]));
+		for (const opt of nextGroup.options) optionMap.set(opt.modifier, opt);
+		result[idx] = {
+			...current,
+			options: Array.from(optionMap.values())
+		};
+	}
+	return result;
+}
+function mergeModifiers(base, incoming, mode) {
+	if (incoming.length === 0) return base;
+	if (base.length === 0) return incoming;
+	const result = new Map(base.map((m) => [m.modifier, m]));
+	for (const def of incoming) {
+		if (mode === "preserve" && result.has(def.modifier)) continue;
+		result.set(def.modifier, def);
+	}
+	return Array.from(result.values());
+}
+function isPlainObject(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function deepMerge(base, incoming) {
+	const out = { ...base };
+	for (const [key, value] of Object.entries(incoming)) {
+		const current = out[key];
+		if (isPlainObject(current) && isPlainObject(value)) out[key] = deepMerge(current, value);
+		else out[key] = value;
+	}
+	return out;
+}
+function mergeRecordByKey(base, incoming, mode) {
+	if (mode === "merge") {
+		const merged = { ...base };
+		for (const [key, value] of Object.entries(incoming)) {
+			const current = merged[key];
+			if (isPlainObject(current) && isPlainObject(value)) merged[key] = deepMerge(current, value);
+			else merged[key] = value;
+		}
+		return merged;
+	}
+	if (mode === "preserve") return {
+		...incoming,
+		...base
+	};
+	return {
+		...base,
+		...incoming
+	};
+}
+function mergeRemotionConfig(base, incoming) {
+	if (!incoming) return base;
+	if (!base) return incoming;
+	return {
+		components: {
+			...base.components,
+			...incoming.components
+		},
+		transitions: {
+			...base.transitions ?? {},
+			...incoming.transitions ?? {}
+		},
+		effects: {
+			...base.effects ?? {},
+			...incoming.effects ?? {}
+		}
+	};
+}
+function applyPresetToData(base, preset, strategy) {
+	const s = {
+		...defaultComponentDefinitionMergeStrategy,
+		...strategy
+	};
+	const mergedExamples = base.examples || preset.examples ? mergeRecordByKey(base.examples ?? {}, preset.examples ?? {}, s.examples) : void 0;
+	const mergedPrinciples = base.designPrinciples || preset.designPrinciples ? [...base.designPrinciples ?? [], ...preset.designPrinciples ?? []] : void 0;
+	const mergedArbitraryTokens = base.arbitraryTokens || preset.arbitraryTokens ? [...base.arbitraryTokens ?? [], ...preset.arbitraryTokens ?? []] : void 0;
+	const merged = {
+		...base,
+		modes: mergeModes(base.modes, preset.modes, s.modes),
+		modifiers: mergeModifiers(base.modifiers, preset.modifiers, s.modifiers),
+		atomic: mergeAtomic(base.atomic, preset.atomic, s.tokens),
+		macros: {
+			...base.macros,
+			...preset.macros
+		},
+		motion: mergeRecordByKey(base.motion, preset.motion, s.motion),
+		components: mergeRecordByKey(base.components, preset.components, s.components),
+		globalStyles: mergeRecordByKey(base.globalStyles, preset.globalStyles, s.globalStyles),
+		remotion: mergeRemotionConfig(base.remotion, preset.remotion),
+		arbitraryTokens: mergedArbitraryTokens,
+		examples: mergedExamples,
+		designPrinciples: mergedPrinciples
+	};
+	validateComponentVariants(merged.components);
+	return merged;
+}
+//#endregion
+export { applyPresetToData, deepMerge, mergeAtomic };

package/dist/config/dist/serialize.d.ts

@@ -0,0 +1,57 @@
+import { ArbitraryTokenGroup, AtomicToken, ExampleDef, ModeGroup, ModifierDef, MotionPresetsDef, UdsConfig } from "./createConfig.js";
+
+//#region ../config/dist/serialize.d.ts
+//#region src/serialize.d.ts
+type ModifierNameShape = `_${string}`;
+type TokenRef = {
+  $ref: string;
+};
+interface SerializedConfig {
+  modes: ModeGroup[];
+  modifiers?: ModifierDef[];
+  atomic: AtomicToken<ModifierNameShape>[];
+  macros?: Record<string, Record<string, Record<string, unknown>>>;
+  arbitraryTokens?: ArbitraryTokenGroup[];
+  motion?: MotionPresetsDef;
+  components: SerializedComponentsDef;
+  globalStyles?: Record<string, Record<string, SerializedValue>>;
+  examples?: Record<string, ExampleDef>;
+  preflight: boolean;
+  prefix: string;
+}
+type SerializedValue = string | TokenRef | {
+  [key: string]: SerializedValue;
+};
+type SerializedSlotStyles = Record<string, SerializedValue>;
+type SerializedComponentConfig = {
+  base: Record<string, SerializedSlotStyles>;
+  variants?: Record<string, Record<string, Record<string, SerializedSlotStyles>>>;
+  compoundVariants?: Array<{
+    conditions: Record<string, string>;
+    styles: Record<string, SerializedSlotStyles>;
+  }>;
+  defaultVariants?: Record<string, string>;
+};
+type SerializedComponentsDef = Record<string, SerializedComponentConfig>;
+/**
+ * Build a reverse map from `var(--prefix-xxx-yyy)` strings back to
+ * `propName.tokenName` reference paths.
+ */
+declare function buildReverseMap(atomic: AtomicToken<ModifierNameShape>[], configPrefix: string): Map<string, string>;
+/**
+ * Serialize a UdsConfig for database storage.
+ *
+ * Walks component slot styles and replaces known `var()` strings with
+ * `{ $ref: "propName.tokenName" }` markers so the authoring intent survives
+ * a round-trip through JSON.
+ */
+declare function serializeConfig(config: UdsConfig): SerializedConfig;
+/**
+ * Deserialize stored config data back into a UdsConfig builder.
+ *
+ * Resolves `$ref` markers back to `var()` strings using the atomic token
+ * definitions, then reconstructs the builder chain.
+ */
+declare function deserializeConfig(data: SerializedConfig): UdsConfig; //#endregion
+//#endregion
+export { SerializedConfig, TokenRef, buildReverseMap, deserializeConfig, serializeConfig };

package/dist/config/dist/serialize.js

@@ -0,0 +1,153 @@
+import { safeTokenName } from "../../utils/dist/string-utils/cssVar.js";
+import "../../utils/dist/index.js";
+import { getConfigurablePropMapping } from "../../core/dist/propMappings.js";
+import "../../core/dist/index.js";
+import { buildTokenReference, resolveConfig, uds } from "./createConfig.js";
+//#region ../config/dist/serialize.js
+/**
+* Config serialization for lossless round-tripping through a database.
+*
+* serializeConfig:   UdsConfig → SerializedConfig  (var() → $ref markers)
+* deserializeConfig: SerializedConfig → UdsConfig   ($ref markers → var())
+*/
+function isTokenRef(val) {
+	return typeof val === "object" && val !== null && "$ref" in val && typeof val.$ref === "string";
+}
+/**
+* Build a reverse map from `var(--prefix-xxx-yyy)` strings back to
+* `propName.tokenName` reference paths.
+*/
+function buildReverseMap(atomic, configPrefix) {
+	const map = /* @__PURE__ */ new Map();
+	for (const token of atomic) for (const prop of token.properties) {
+		const varPrefix = token.cssPrefix ?? getConfigurablePropMapping(prop)?.defaultVarPrefix;
+		if (!varPrefix) continue;
+		for (const t of token.tokens) {
+			const safeName = safeTokenName(t.name);
+			const varRef = `var(${configPrefix ? `--${configPrefix}-${varPrefix}-${safeName}` : `--${varPrefix}-${safeName}`})`;
+			map.set(varRef, `${prop}.${t.name}`);
+		}
+	}
+	return map;
+}
+/**
+* Walk an object, transforming every string leaf with `fn`.
+* Nested objects (pseudo-state blocks like `_hover: { ... }`) are recursed.
+*/
+function walkStrings(obj, fn) {
+	const result = {};
+	for (const [key, val] of Object.entries(obj)) if (typeof val === "string") result[key] = fn(val);
+	else if (typeof val === "object" && val !== null && !Array.isArray(val)) result[key] = walkStrings(val, fn);
+	else result[key] = val;
+	return result;
+}
+/**
+* Walk a serialized value, resolving `$ref` markers back to strings.
+* Regular string values are passed through unchanged.
+*/
+function resolveRefs(obj, tokenRef) {
+	const result = {};
+	for (const [key, val] of Object.entries(obj)) if (isTokenRef(val)) {
+		const dotIdx = val.$ref.indexOf(".");
+		const prop = val.$ref.slice(0, dotIdx);
+		const name = val.$ref.slice(dotIdx + 1);
+		result[key] = tokenRef[prop]?.[name] ?? `$ref(${val.$ref})`;
+	} else if (typeof val === "object" && val !== null && !Array.isArray(val)) result[key] = resolveRefs(val, tokenRef);
+	else result[key] = val;
+	return result;
+}
+/**
+* Serialize a UdsConfig for database storage.
+*
+* Walks component slot styles and replaces known `var()` strings with
+* `{ $ref: "propName.tokenName" }` markers so the authoring intent survives
+* a round-trip through JSON.
+*/
+function serializeConfig(config) {
+	const data = resolveConfig(config);
+	const reverseMap = buildReverseMap(data.atomic, data.prefix);
+	const replaceVars = (val) => {
+		const ref = reverseMap.get(val);
+		return ref ? { $ref: ref } : val;
+	};
+	const components = {};
+	for (const [compName, compConfig] of Object.entries(data.components)) {
+		const serialized = { base: {} };
+		for (const [slot, styles] of Object.entries(compConfig.base ?? {})) serialized.base[slot] = walkStrings(styles, replaceVars);
+		if (compConfig.variants) {
+			serialized.variants = {};
+			for (const [axis, values] of Object.entries(compConfig.variants)) {
+				serialized.variants[axis] = {};
+				for (const [value, slotOverrides] of Object.entries(values)) {
+					serialized.variants[axis][value] = {};
+					for (const [slot, styles] of Object.entries(slotOverrides)) serialized.variants[axis][value][slot] = walkStrings(styles, replaceVars);
+				}
+			}
+		}
+		if (compConfig.defaultVariants) serialized.defaultVariants = compConfig.defaultVariants;
+		components[compName] = serialized;
+	}
+	const globalStyles = {};
+	if (data.globalStyles) for (const [selector, styles] of Object.entries(data.globalStyles)) globalStyles[selector] = walkStrings(styles, replaceVars);
+	return {
+		modes: data.modes,
+		modifiers: data.modifiers.length > 0 ? data.modifiers : void 0,
+		atomic: data.atomic,
+		macros: Object.keys(data.macros).length > 0 ? data.macros : void 0,
+		arbitraryTokens: data.arbitraryTokens && data.arbitraryTokens.length > 0 ? data.arbitraryTokens : void 0,
+		motion: Object.keys(data.motion).length > 0 ? data.motion : void 0,
+		components,
+		globalStyles: Object.keys(globalStyles).length > 0 ? globalStyles : void 0,
+		examples: data.examples && Object.keys(data.examples).length > 0 ? data.examples : void 0,
+		preflight: data.preflight,
+		prefix: data.prefix
+	};
+}
+/**
+* Deserialize stored config data back into a UdsConfig builder.
+*
+* Resolves `$ref` markers back to `var()` strings using the atomic token
+* definitions, then reconstructs the builder chain.
+*/
+function deserializeConfig(data) {
+	const tokenRef = buildTokenReference(data.atomic, data.prefix);
+	const components = {};
+	for (const [compName, compConfig] of Object.entries(data.components)) {
+		const resolved = { base: {} };
+		const base = {};
+		for (const [slot, styles] of Object.entries(compConfig.base ?? {})) base[slot] = resolveRefs(styles, tokenRef);
+		resolved.base = base;
+		if (compConfig.variants) {
+			const variants = {};
+			for (const [axis, values] of Object.entries(compConfig.variants)) {
+				variants[axis] = {};
+				for (const [value, slotOverrides] of Object.entries(values)) {
+					variants[axis][value] = {};
+					for (const [slot, styles] of Object.entries(slotOverrides)) variants[axis][value][slot] = resolveRefs(styles, tokenRef);
+				}
+			}
+			resolved.variants = variants;
+		}
+		if (compConfig.defaultVariants) resolved.defaultVariants = compConfig.defaultVariants;
+		components[compName] = resolved;
+	}
+	let config = uds;
+	if (data.prefix) config = config.prefix(data.prefix);
+	config = config.preflight(data.preflight);
+	if (data.modes.length > 0) config = config.defineModes(data.modes);
+	if (data.modifiers && data.modifiers.length > 0) config = config.defineModifiers(data.modifiers);
+	if (data.atomic.length > 0) config = config.defineAtomicTokens(data.atomic);
+	if (data.arbitraryTokens && data.arbitraryTokens.length > 0) config = config.defineArbitraryTokens(data.arbitraryTokens);
+	if (data.macros && Object.keys(data.macros).length > 0) config = config.defineMacro(data.macros);
+	if (data.motion && Object.keys(data.motion).length > 0) config = config.defineMotion(data.motion);
+	if (Object.keys(components).length > 0) config = config.defineComponents(components);
+	if (data.globalStyles && Object.keys(data.globalStyles).length > 0) {
+		const globalStyles = {};
+		for (const [selector, styles] of Object.entries(data.globalStyles)) globalStyles[selector] = resolveRefs(styles, tokenRef);
+		config = config.defineGlobalStyles(globalStyles);
+	}
+	if (data.examples) for (const [name, examples] of Object.entries(data.examples)) config = config.defineExample(name, examples);
+	return config;
+}
+//#endregion
+export { buildReverseMap, deserializeConfig, serializeConfig };

package/dist/config-utils/dist/componentConfig.d.ts

@@ -0,0 +1,10 @@
+//#region ../config-utils/dist/componentConfig.d.ts
+//#region src/componentConfig.d.ts
+interface ComponentConfigLike {
+  variants?: Record<string, Record<string, unknown>>;
+  defaultVariants?: Record<string, unknown> | null | undefined;
+}
+declare function getComponentVariantAxes(componentConfig: ComponentConfigLike | null | undefined): Set<string>;
+declare function getComponentDefaultVariants(defaultVariants: ComponentConfigLike['defaultVariants']): Record<string, string>; //#endregion
+//#endregion
+export { ComponentConfigLike, getComponentDefaultVariants, getComponentVariantAxes };

package/dist/config-utils/dist/componentConfig.js

@@ -0,0 +1,11 @@
+//#region ../config-utils/dist/componentConfig.js
+function getComponentVariantAxes(componentConfig) {
+	return new Set(Object.keys(componentConfig?.variants ?? {}));
+}
+function getComponentDefaultVariants(defaultVariants) {
+	const normalized = {};
+	for (const [axis, axisValue] of Object.entries(defaultVariants ?? {})) if (typeof axisValue === "string") normalized[axis] = axisValue;
+	return normalized;
+}
+//#endregion
+export { getComponentDefaultVariants, getComponentVariantAxes };

package/dist/config-utils.d.ts

@@ -0,0 +1,2 @@
+import { ComponentConfigLike, getComponentDefaultVariants, getComponentVariantAxes } from "./config-utils/dist/componentConfig.js";
+export { ComponentConfigLike, getComponentDefaultVariants, getComponentVariantAxes };

package/dist/config-utils.js

@@ -0,0 +1,2 @@
+import { getComponentDefaultVariants, getComponentVariantAxes } from "./config-utils/dist/componentConfig.js";
+export { getComponentDefaultVariants, getComponentVariantAxes };