@yahoo/uds-create-config 2.24.0 → 2.25.0

package/dist/native/validation.js

@@ -10,13 +10,40 @@ const TOP_LEVEL_KEYS = new Set([
 	"builtAt",
 	"namespace",
 	"styleEngine",
+	"buildOptions",
 	"defaultModes",
 	"modes",
 	"tokenGroups",
 	"assetGroups",
+	"components",
+	"componentGroups",
 	"linkedSystems"
 ]);
 const LINKED_SYSTEM_PIN_KEYS = new Set(["name", "version"]);
+const BUILD_OPTIONS_KEYS = new Set(["componentsDir"]);
+const COMPONENT_KEYS = new Set([
+	"id",
+	"layers",
+	"props",
+	"defaultProps",
+	"styles",
+	"label",
+	"description"
+]);
+const COMPONENT_CONFIG_KEYS = new Set([
+	"base",
+	"variants",
+	"booleans",
+	"runtimeStates",
+	"values",
+	"description"
+]);
+const LAYER_KEYS = new Set(["kind", "styleProp"]);
+const COMPONENT_GROUP_KEYS = new Set([
+	"components",
+	"label",
+	"description"
+]);
 const GROUP_KEYS = new Set([
 	"tokens",
 	"label",
@@ -76,10 +103,13 @@ function validateSerializedNativeConfig(input, expectedSchemaVersion = 4) {
 	if (input.builtAt !== void 0 && typeof input.builtAt !== "string") push(diagnostics, "INVALID_SCHEMA", ["builtAt"], configDefinition, "builtAt must be a string when present.");
 	validateNamespace(input.namespace, diagnostics);
 	validateStyleEngine(input.styleEngine, diagnostics);
+	validateBuildOptions(input.buildOptions, diagnostics);
 	validateModes(input.modes, diagnostics);
 	validateDefaultModes(input.defaultModes, input.modes, diagnostics);
 	validateAssetGroups(input.assetGroups, diagnostics);
 	validateTokenGroups(input.tokenGroups, diagnostics);
+	validateComponents(input.components, diagnostics);
+	validateComponentGroups(input.componentGroups, input.components, diagnostics);
 	validateLinkedSystems(input.linkedSystems, diagnostics);
 	validateReferences(input, diagnostics);
 	validateModifierOwnership(input, diagnostics);
@@ -104,6 +134,235 @@ function validateLinkedSystems(value, diagnostics) {
 		if (typeof pin.version !== "string" || !EXACT_SEMVER_RE.test(pin.version)) push(diagnostics, "INVALID_SCHEMA", [...path, "version"], definition, "A linked-system pin requires an exact semver version (no ranges).");
 	}
 }
+function validateBuildOptions(value, diagnostics) {
+	if (value === void 0) return;
+	if (!isRecord(value)) {
+		push(diagnostics, "INVALID_SCHEMA", ["buildOptions"], { kind: "config" }, "Native buildOptions must be an object.");
+		return;
+	}
+	reportUnknownKeys(value, BUILD_OPTIONS_KEYS, ["buildOptions"], { kind: "config" }, diagnostics);
+	if (value.componentsDir !== void 0 && (typeof value.componentsDir !== "string" || value.componentsDir.length === 0)) push(diagnostics, "INVALID_SCHEMA", ["buildOptions", "componentsDir"], { kind: "config" }, "Native componentsDir must be a non-empty path string.");
+}
+function validateComponents(value, diagnostics) {
+	if (value === void 0) return;
+	if (!isRecord(value)) {
+		push(diagnostics, "INVALID_SCHEMA", ["components"], { kind: "config" }, "Native components must be a record.");
+		return;
+	}
+	const ids = /* @__PURE__ */ new Map();
+	for (const [componentName, component] of Object.entries(value)) {
+		const path = ["components", componentName];
+		const definition = {
+			kind: "component",
+			name: componentName
+		};
+		if (!isRecord(component)) {
+			push(diagnostics, "INVALID_SCHEMA", path, definition, `Native component "${componentName}" must be an object.`);
+			continue;
+		}
+		reportUnknownKeys(component, COMPONENT_KEYS, path, definition, diagnostics);
+		if (typeof component.id !== "string" || component.id.length === 0) push(diagnostics, "INVALID_SCHEMA", [...path, "id"], definition, `Native component "${componentName}" must declare a stable id.`);
+		else {
+			const owner = ids.get(component.id);
+			if (owner !== void 0) push(diagnostics, "INVALID_SCHEMA", [...path, "id"], definition, `Native component id "${component.id}" is already registered as "${owner}".`);
+			else ids.set(component.id, componentName);
+		}
+		const layerNames = validateComponentLayers(component.layers, [...path, "layers"], definition, diagnostics);
+		validateComponentConfig(component.styles, [...path, "styles"], definition, layerNames, diagnostics);
+		validateComponentProps(component.props, path, definition, diagnostics);
+		validateComponentStyleProps(component, path, definition, diagnostics);
+	}
+}
+function validateComponentStyleProps(component, path, definition, diagnostics) {
+	const props = isRecord(component.props) ? component.props : {};
+	const styles = isRecord(component.styles) ? component.styles : {};
+	for (const [groupName, expectedKind] of [["variants", "variant"], ["booleans", "boolean"]]) {
+		const groups = styles[groupName];
+		if (!isRecord(groups)) continue;
+		for (const [propName, options] of Object.entries(groups)) {
+			const marker = props[propName];
+			if (!isRecord(marker) || marker.__kind !== expectedKind) {
+				push(diagnostics, "INVALID_REFERENCE", [
+					...path,
+					"styles",
+					groupName,
+					propName
+				], definition, `Native ${groupName} styles must target a ${expectedKind} component prop.`);
+				continue;
+			}
+			if (!isRecord(options)) continue;
+			const allowedOptions = expectedKind === "variant" && Array.isArray(marker.values) ? new Set(marker.values.map(String)) : new Set(["true", "false"]);
+			for (const optionName of Object.keys(options)) if (!allowedOptions.has(optionName)) push(diagnostics, "INVALID_REFERENCE", [
+				...path,
+				"styles",
+				groupName,
+				propName,
+				optionName
+			], definition, expectedKind === "variant" ? `Native variant style option "${optionName}" is not declared by prop "${propName}".` : `Native boolean style option "${optionName}" must be true or false.`);
+		}
+	}
+}
+function validateComponentProps(value, componentPath, definition, diagnostics) {
+	if (!isRecord(value)) {
+		push(diagnostics, "INVALID_SCHEMA", [...componentPath, "props"], definition, "Native component props must be a record.");
+		return;
+	}
+	for (const [propName, marker] of Object.entries(value)) {
+		if (!isRecord(marker) || ![
+			"slot",
+			"boolean",
+			"string",
+			"number",
+			"variant"
+		].includes(String(marker.__kind))) {
+			push(diagnostics, "INVALID_SCHEMA", [
+				...componentPath,
+				"props",
+				propName
+			], definition, `Unknown native component prop marker "${String(isRecord(marker) ? marker.__kind : marker)}".`);
+			continue;
+		}
+		if (marker.__kind === "variant") {
+			if (!Array.isArray(marker.values) || marker.values.length === 0 || marker.values.some((option) => typeof option !== "string" && typeof option !== "number" || typeof option === "number" && !Number.isFinite(option))) push(diagnostics, "INVALID_SCHEMA", [
+				...componentPath,
+				"props",
+				propName,
+				"values"
+			], definition, "Native variant props require at least one finite number or string option.");
+			else if (new Set(marker.values.map(String)).size !== marker.values.length) push(diagnostics, "INVALID_SCHEMA", [
+				...componentPath,
+				"props",
+				propName,
+				"values"
+			], definition, "Native variant prop options must remain unique when serialized as object keys.");
+		}
+	}
+}
+function validateComponentLayers(value, path, definition, diagnostics) {
+	const names = /* @__PURE__ */ new Set();
+	if (!isRecord(value) || Object.keys(value).length === 0) {
+		push(diagnostics, "INVALID_SCHEMA", path, definition, "A native component must declare at least one layer.");
+		return names;
+	}
+	for (const [layerName, layer] of Object.entries(value)) {
+		names.add(layerName);
+		const layerPath = [...path, layerName];
+		if (!isRecord(layer)) {
+			push(diagnostics, "INVALID_SCHEMA", layerPath, definition, `Native layer "${layerName}" must be an object.`);
+			continue;
+		}
+		reportUnknownKeys(layer, LAYER_KEYS, layerPath, definition, diagnostics);
+		if (layer.kind !== "view" && layer.kind !== "text" && layer.kind !== "image") push(diagnostics, "INVALID_SCHEMA", [...layerPath, "kind"], definition, `Native layer "${layerName}" must use view, text, or image styles.`);
+		if (layer.styleProp !== void 0 && (typeof layer.styleProp !== "string" || layer.styleProp.length === 0)) push(diagnostics, "INVALID_SCHEMA", [...layerPath, "styleProp"], definition, "A public style prop name must be a non-empty string.");
+	}
+	return names;
+}
+function validateComponentConfig(value, path, definition, layerNames, diagnostics) {
+	if (!isRecord(value)) {
+		push(diagnostics, "INVALID_SCHEMA", path, definition, "Native component styles must be an object.");
+		return;
+	}
+	reportUnknownKeys(value, COMPONENT_CONFIG_KEYS, path, definition, diagnostics);
+	validateLayerStyleMap(value.base, [...path, "base"], definition, layerNames, diagnostics);
+	for (const key of ["variants", "booleans"]) {
+		const groups = value[key];
+		if (groups === void 0) continue;
+		if (!isRecord(groups)) {
+			push(diagnostics, "INVALID_SCHEMA", [...path, key], definition, `${key} must be a record.`);
+			continue;
+		}
+		for (const [propName, values] of Object.entries(groups)) {
+			if (!isRecord(values)) {
+				push(diagnostics, "INVALID_SCHEMA", [
+					...path,
+					key,
+					propName
+				], definition, `${key} styles for "${propName}" must be an option record.`);
+				continue;
+			}
+			for (const [optionName, styles] of Object.entries(values)) validateLayerStyleMap(styles, [
+				...path,
+				key,
+				propName,
+				optionName
+			], definition, layerNames, diagnostics);
+		}
+	}
+	if (value.runtimeStates !== void 0) if (!isRecord(value.runtimeStates)) push(diagnostics, "INVALID_SCHEMA", [...path, "runtimeStates"], definition, "Native runtimeStates must be a record.");
+	else for (const [stateName, styles] of Object.entries(value.runtimeStates)) validateLayerStyleMap(styles, [
+		...path,
+		"runtimeStates",
+		stateName
+	], definition, layerNames, diagnostics);
+	if (value.values !== void 0) if (!isRecord(value.values)) push(diagnostics, "INVALID_SCHEMA", [...path, "values"], definition, "Native named values must be a record.");
+	else for (const [name, namedValue] of Object.entries(value.values)) validateNativeValue(namedValue, [
+		...path,
+		"values",
+		name
+	], definition, diagnostics, true);
+}
+function validateLayerStyleMap(value, path, definition, layerNames, diagnostics) {
+	if (value === void 0) return;
+	if (!isRecord(value)) {
+		push(diagnostics, "INVALID_SCHEMA", path, definition, "Native component styles must be a layer record.");
+		return;
+	}
+	for (const [layerName, styles] of Object.entries(value)) {
+		if (!layerNames.has(layerName)) {
+			push(diagnostics, "INVALID_REFERENCE", [...path, layerName], definition, `Native layer "${layerName}" is not declared by this component.`);
+			continue;
+		}
+		if (!isRecord(styles)) {
+			push(diagnostics, "INVALID_SCHEMA", [...path, layerName], definition, `Styles for layer "${layerName}" must be an object.`);
+			continue;
+		}
+		for (const [property, styleValue] of Object.entries(styles)) validateComponentStyleValue(styleValue, [
+			...path,
+			layerName,
+			property
+		], definition, diagnostics);
+	}
+}
+function validateComponentStyleValue(value, path, definition, diagnostics) {
+	if (Array.isArray(value)) {
+		value.forEach((entry, index) => {
+			validateComponentStyleValue(entry, [...path, index], definition, diagnostics);
+		});
+		return;
+	}
+	if (isRecord(value) && !("__kind" in value)) {
+		for (const [key, nested] of Object.entries(value)) validateComponentStyleValue(nested, [...path, key], definition, diagnostics);
+		return;
+	}
+	validateNativeValue(value, path, definition, diagnostics, true);
+}
+function validateComponentGroups(value, components, diagnostics) {
+	if (value === void 0) return;
+	if (!isRecord(value)) {
+		push(diagnostics, "INVALID_SCHEMA", ["componentGroups"], { kind: "config" }, "Native componentGroups must be a record.");
+		return;
+	}
+	const registered = isRecord(components) ? components : {};
+	for (const [groupName, group] of Object.entries(value)) {
+		const path = ["componentGroups", groupName];
+		const definition = {
+			kind: "componentGroup",
+			name: groupName
+		};
+		if (!isRecord(group)) {
+			push(diagnostics, "INVALID_SCHEMA", path, definition, `Native component group "${groupName}" must be an object.`);
+			continue;
+		}
+		reportUnknownKeys(group, COMPONENT_GROUP_KEYS, path, definition, diagnostics);
+		if (!Array.isArray(group.components) || group.components.length === 0) push(diagnostics, "INVALID_SCHEMA", [...path, "components"], definition, "A native component group must contain at least one component.");
+		else for (const [index, componentName] of group.components.entries()) if (typeof componentName !== "string" || !(componentName in registered)) push(diagnostics, "INVALID_REFERENCE", [
+			...path,
+			"components",
+			index
+		], definition, `Native component "${String(componentName)}" is not registered.`);
+		for (const key of ["label", "description"]) if (group[key] !== void 0 && typeof group[key] !== "string") push(diagnostics, "INVALID_SCHEMA", [...path, key], definition, `${key} must be a string.`);
+	}
+}
 function validateStyleEngine(value, diagnostics) {
 	if (value !== void 0 && value !== "react-native" && value !== "unistyles") push(diagnostics, "INVALID_SCHEMA", ["styleEngine"], { kind: "config" }, "Native styleEngine must be \"react-native\" or \"unistyles\" when present.");
 }
@@ -376,9 +635,9 @@ function validateColorOperand(value, path, definition, diagnostics) {
 	push(diagnostics, "INVALID_NATIVE_VALUE", path, definition, "Native color expressions accept color strings, token references, or nested mix() expressions.");
 }
 function validateReferences(config, diagnostics) {
-	if (!isRecord(config.tokenGroups)) return;
+	const tokenGroups = isRecord(config.tokenGroups) ? config.tokenGroups : {};
 	const tokens = /* @__PURE__ */ new Map();
-	for (const [groupName, group] of Object.entries(config.tokenGroups)) {
+	for (const [groupName, group] of Object.entries(tokenGroups)) {
 		if (!isRecord(group) || !isRecord(group.tokens)) continue;
 		for (const [tokenName, definition] of Object.entries(group.tokens)) {
 			if (!isRecord(definition)) continue;
@@ -403,6 +662,28 @@ function validateReferences(config, diagnostics) {
 		}, tokens, assets, diagnostics);
 		for (const modifiers of contexts) resolveTokenContext(tokenRef, modifiers, modifierLookup, tokens, diagnostics, [], token.path);
 	}
+	for (const [componentName, component] of Object.entries(config.components ?? {})) collectComponentReferences(component, ["components", componentName], {
+		kind: "component",
+		name: componentName
+	}, tokens, assets, diagnostics);
+}
+function collectComponentReferences(value, path, definition, tokens, assets, diagnostics) {
+	if (Array.isArray(value)) {
+		value.forEach((entry, index) => {
+			collectComponentReferences(entry, [...path, index], definition, tokens, assets, diagnostics);
+		});
+		return;
+	}
+	if (!isRecord(value)) return;
+	if (isTokenRef(value)) {
+		if (typeof value.ref === "string" && !tokens.has(value.ref)) push(diagnostics, "UNRESOLVED_TOKEN_REFERENCE", path, definition, `Token reference "${value.ref}" does not resolve within this native config.`);
+		return;
+	}
+	if (isAssetRef(value)) {
+		collectAllReferences(value, path, definition, tokens, assets, diagnostics);
+		return;
+	}
+	for (const [key, nested] of Object.entries(value)) collectComponentReferences(nested, [...path, key], definition, tokens, assets, diagnostics);
 }
 function collectAllReferences(value, path, definition, tokens, assets, diagnostics) {
 	walkValues(value, path, (entry, entryPath) => {

package/dist/native.d.ts

@@ -1,11 +1,12 @@
 import { AssetRef, TokenRef, asset, token } from "./refs.js";
 import { ColorSpace, MixExpr, alpha, mix } from "./colorExpressions.js";
 import { SystemLink, TokenType } from "./types.js";
-import { ModeDefinition, NativeAppearanceModeOption, NativeAssetGroupDefinition, NativeColorExpression, NativeDefaultModes, NativeFontAssetGroupDefinition, NativeFontAssetMember, NativeLiteral, NativeModeDefinition, NativeModeOptionDefinition, NativeSelectableValue, NativeStyleEngine, NativeTokenDefinition, NativeTokenGroupDefinition, NativeTokenValue, NativeViewportModeOption, OperatingSystemInput, OperatingSystemValue, SerializedNativeConfig } from "./native/types.js";
+import { NativeComponentBuilder, NativeComponentDefinition, NativeComponentGroupDefinition, NativeComponentProps, NativeComponentStyleHelpers, NativeComponentStyledBuilder, NativeComponentStyles, NativeLayerDefinition, NativeLayerKind, NativeLayerStyle, NativeLayerStyles, NativeRenderProps, NativeStyleValue, RegisteredNativeComponent, SerializedNativeComponentGroup, defineNativeComponent, defineNativeComponentGroup, nativeLayer } from "./native/components.js";
+import { ModeDefinition, NativeAppearanceModeOption, NativeAssetGroupDefinition, NativeBuildOptions, NativeColorExpression, NativeDefaultModes, NativeFontAssetGroupDefinition, NativeFontAssetMember, NativeLiteral, NativeModeDefinition, NativeModeOptionDefinition, NativeSelectableValue, NativeStyleEngine, NativeTokenDefinition, NativeTokenGroupDefinition, NativeTokenValue, NativeViewportModeOption, OperatingSystemInput, OperatingSystemValue, SerializedNativeConfig } from "./native/types.js";
 import { NativeAssetGroupBuilder, NativeFontAssetGroupConfig, defineAssetGroup } from "./native/assets.js";
 import { defineMode } from "./native/modes.js";
 import { NativeConfigDiagnostic, NativeConfigDiagnosticCode, validateSerializedNativeConfig } from "./native/validation.js";
 import { NativeConfig, NativeConfigValidationError } from "./native/NativeConfig.js";
 import { isOperatingSystemValue, operatingSystem } from "./native/values.js";
 import { DefinedNativeTokenGroup, defineTokenGroup } from "./native/index.js";
-export { AssetRef, ColorSpace, DefinedNativeTokenGroup, MixExpr, ModeDefinition, NativeAppearanceModeOption, NativeAssetGroupBuilder, NativeAssetGroupDefinition, NativeColorExpression, NativeConfig, NativeConfigDiagnostic, NativeConfigDiagnosticCode, NativeConfigValidationError, NativeDefaultModes, NativeFontAssetGroupConfig, NativeFontAssetGroupDefinition, NativeFontAssetMember, NativeLiteral, NativeModeDefinition, NativeModeOptionDefinition, NativeSelectableValue, NativeStyleEngine, NativeTokenDefinition, NativeTokenGroupDefinition, NativeTokenValue, NativeViewportModeOption, OperatingSystemInput, OperatingSystemValue, SerializedNativeConfig, SystemLink, TokenRef, TokenType, alpha, asset, defineAssetGroup, defineMode, defineTokenGroup, isOperatingSystemValue, mix, operatingSystem, token, validateSerializedNativeConfig };
+export { AssetRef, ColorSpace, DefinedNativeTokenGroup, MixExpr, ModeDefinition, NativeAppearanceModeOption, NativeAssetGroupBuilder, NativeAssetGroupDefinition, NativeBuildOptions, NativeColorExpression, NativeComponentBuilder, NativeComponentDefinition, NativeComponentGroupDefinition, NativeComponentProps, NativeComponentStyleHelpers, NativeComponentStyledBuilder, NativeComponentStyles, NativeConfig, NativeConfigDiagnostic, NativeConfigDiagnosticCode, NativeConfigValidationError, NativeDefaultModes, NativeFontAssetGroupConfig, NativeFontAssetGroupDefinition, NativeFontAssetMember, NativeLayerDefinition, NativeLayerKind, NativeLayerStyle, NativeLayerStyles, NativeLiteral, NativeModeDefinition, NativeModeOptionDefinition, NativeRenderProps, NativeSelectableValue, NativeStyleEngine, NativeStyleValue, NativeTokenDefinition, NativeTokenGroupDefinition, NativeTokenValue, NativeViewportModeOption, OperatingSystemInput, OperatingSystemValue, RegisteredNativeComponent, SerializedNativeComponentGroup, SerializedNativeConfig, SystemLink, TokenRef, TokenType, alpha, asset, defineAssetGroup, defineMode, defineNativeComponent, defineNativeComponentGroup, defineTokenGroup, isOperatingSystemValue, mix, nativeLayer, operatingSystem, token, validateSerializedNativeConfig };

package/dist/native.js

@@ -1,9 +1,10 @@
 import { asset, token } from "./refs.js";
 import { alpha, mix } from "./colorExpressions.js";
 import { defineAssetGroup } from "./native/assets.js";
+import { defineNativeComponent, defineNativeComponentGroup, nativeLayer } from "./native/components.js";
 import { defineMode } from "./native/modes.js";
 import { isOperatingSystemValue, operatingSystem } from "./native/values.js";
 import { validateSerializedNativeConfig } from "./native/validation.js";
 import { NativeConfig, NativeConfigValidationError } from "./native/NativeConfig.js";
 import { defineTokenGroup } from "./native/index.js";
-export { NativeConfig, NativeConfigValidationError, alpha, asset, defineAssetGroup, defineMode, defineTokenGroup, isOperatingSystemValue, mix, operatingSystem, token, validateSerializedNativeConfig };
+export { NativeConfig, NativeConfigValidationError, alpha, asset, defineAssetGroup, defineMode, defineNativeComponent, defineNativeComponentGroup, defineTokenGroup, isOperatingSystemValue, mix, nativeLayer, operatingSystem, token, validateSerializedNativeConfig };

package/dist/renderer/wrapRegistry.js

@@ -22,16 +22,16 @@ import { wrapVoidElements } from "./wrappers/void-elements.js";
 * seen the element.
 */
 function wrapRegistry(reg, descriptor, assetMembersBySlug) {
-	return aliasHtmlTypes(wrapInlineStyleProps(wrapNormalizeHex(wrapEventBridge(wrapVoidElements(wrapComponentTypedSlots(wrapSlotResolution({
+	return aliasHtmlTypes(wrapInlineStyleProps(wrapNormalizeHex(wrapEventBridge(wrapComponentTypedSlots(wrapSlotResolution(wrapVoidElements({
 		...reg,
 		Fragment: reg.Fragment ?? FragmentRenderer,
 		Slot: reg.Slot ?? SlotRenderer
-	}), {
-		componentSlots: descriptor?.componentSlots,
-		assetMembersBySlug
-	}), {
+	}, {
 		voidComponents: descriptor?.voidComponents,
 		noChildrenComponents: descriptor?.noChildrenComponents
+	})), {
+		componentSlots: descriptor?.componentSlots,
+		assetMembersBySlug
 	}))), {
 		cssPropertyToStyleProp: descriptor?.cssPropertyToStyleProp,
 		layoutComponents: descriptor?.layoutComponents,