@yahoo/uds-create-config 4.53.2 → 4.55.0

package/dist/capture/capture-to-spec.js

@@ -1,4 +1,5 @@
 import { isRef, pathOf } from "../framework/utils/refs.js";
+import { StyleProperty } from "../entities/system/StyleProperty.js";
 import { LAYER_PROPS, authoredValue } from "../framework/projections.js";
 import { intoName } from "../framework/prop-surface.js";
 import { Component } from "../entities/system/Component.js";
@@ -31,7 +32,8 @@ const SKIP_INLINE_PROPERTY = new Set([
 	"border-image-outset",
 	"border-image-repeat"
 ]);
-/** Browser defaults a shorthand such as `border: none` expands into. */
+/** Browser defaults a shorthand such as `border: none` expands into. One is still read when it
+*  overrides a property the component's own rules set, as `max-height: none` lifts a panel's cap. */
 const SKIP_INLINE_VALUE = new Set([
 	"none",
 	"initial",
@@ -180,6 +182,7 @@ var Converter = class {
 	unresolvedIcons = 0;
 	counter = 0;
 	childCap;
+	ruled = /* @__PURE__ */ new Map();
 	constructor(options, grammar) {
 		this.options = options;
 		this.grammar = grammar;
@@ -459,7 +462,7 @@ var Converter = class {
 		const stamped = stampedProps(el);
 		if (grammar) this.propsFromClasses(el, grammar, props);
 		Object.assign(props, stamped);
-		if (grammar) this.propsFromInlineStyle(el, grammar, props);
+		if (grammar) this.propsFromInlineStyle(el, grammar, props, path);
 		const layerProps = stampedLayerProps({
 			el,
 			layers: this.layerNames(path)
@@ -613,14 +616,27 @@ var Converter = class {
 	* an off-scale `[value]` only on a property that takes one. Rendering plumbing (box sizing,
 	* transitions, browser defaults) is not a prop and is skipped.
 	*/
-	propsFromInlineStyle(el, grammar, props) {
-		this.propsFromDeclarations(inlineDeclarations(el), grammar, props);
+	propsFromInlineStyle(el, grammar, props, path) {
+		this.propsFromDeclarations(inlineDeclarations(el), grammar, props, path === void 0 ? void 0 : this.ruledProperties(path));
+	}
+	/** The CSS properties a component's own style rules write on its root layer. */
+	ruledProperties(path) {
+		const known = this.ruled.get(path);
+		if (known) return known;
+		const out = /* @__PURE__ */ new Set();
+		const rules = Object.values(Component.get(this.options.config, path)?.styles ?? {});
+		for (const rule of rules) for (const prop of Object.keys(rule.layers?.root ?? {})) {
+			if (prop.startsWith("_")) continue;
+			for (const property of StyleProperty.get(this.options.config, prop)?.properties ?? []) out.add(property);
+		}
+		this.ruled.set(path, out);
+		return out;
 	}
 	/** {@link propsFromInlineStyle} over declarations the caller supplies. */
-	propsFromDeclarations(declarations, grammar, props) {
+	propsFromDeclarations(declarations, grammar, props, ruled) {
 		for (const [property, raw] of declarations.flatMap(gridAreaLines)) {
 			let value = normalizeCssValue(raw);
-			if (!value || SKIP_INLINE_PROPERTY.has(property) || SKIP_INLINE_VALUE.has(value)) continue;
+			if (!value || SKIP_INLINE_PROPERTY.has(property) || SKIP_INLINE_VALUE.has(value) && !ruled?.has(property)) continue;
 			if (property === "position" && value === "fixed") value = "absolute";
 			if (VIEWPORT_VALUE.test(value) && !WHOLE_VIEWPORT.test(value)) value = frameUnits(value, this.options.width, this.options.height);
 			if (this.propFromDeclaration({

package/dist/capture/class-grammar.js

@@ -1,5 +1,5 @@
 import { isRef, pathOf } from "../framework/utils/refs.js";
-import { className, cssVarRef, resolveComponentProps, resolveTokenValue, stylePropEntries } from "../framework/projections.js";
+import { className, renderStyleValue, resolveComponentProps, resolveTokenValue, stylePropEntries } from "../framework/projections.js";
 import { intoName, routesContent, routesIntoText } from "../framework/prop-surface.js";
 import { componentLayerClass, componentRuleClasses, stylePropClasses } from "../framework/class-names.js";
 //#region src/capture/class-grammar.ts
@@ -25,9 +25,8 @@ function classGrammar(config) {
 		if (known) return known;
 		known = /* @__PURE__ */ new Map();
 		for (const entry of stylePropEntries(config, path)) {
-			const spellings = [];
+			const spellings = [normalizeCssValue(renderStyleValue(config, entry.value))];
 			if (config.resolve("token", entry.value)) {
-				spellings.push(normalizeCssValue(cssVarRef(config, "token", entry.value)));
 				const literal = resolveTokenValue(config, entry.value);
 				if (typeof literal === "string") spellings.push(normalizeCssValue(literal));
 			} else spellings.push(normalizeCssValue(String(entry.value)));

package/dist/configs/platform.d.ts

@@ -3,6 +3,13 @@ import { ReactNativeSystemConfig } from "./react-native-system.js";
 import { SystemConfig } from "./system.js";
 
 //#region src/configs/platform.d.ts
+/**
+ * The names `System` and `ReactNativeSystem` declare themselves under. Held here rather than read
+ * off the classes so this module imports nothing at runtime: an entity module can ask which platform
+ * a config is without pulling in the config type that registers it, which would close an import cycle.
+ */
+declare const WEB_CONFIG_NAME = "system-config";
+declare const NATIVE_CONFIG_NAME = "react-native-system";
 /**
  * A design system of either platform — what a holder declares when it draws on a system and has no
  * reason to care which platform it is: the canvas, a session, a pipeline step.
@@ -12,4 +19,4 @@ declare function isNativeConfig(config: Config): boolean;
 /** Whether a config is a design system at all, of either platform. A canvas config is not. */
 declare function isSystemConfig(config: Config): config is AnySystemConfig;
 //#endregion
-export { AnySystemConfig, isNativeConfig, isSystemConfig };
+export { AnySystemConfig, NATIVE_CONFIG_NAME, WEB_CONFIG_NAME, isNativeConfig, isSystemConfig };

package/dist/configs/react-native-system.d.ts

@@ -1,12 +1,12 @@
 import { Ref } from "../framework/utils/ref-grammar.js";
 import { SubEntityClass } from "../framework/defineSubEntity.js";
 import { ComputedInput } from "../framework/registry.js";
+import { DerivedColor } from "../entities/system/color.js";
+import { ComposedValue } from "../entities/system/composed-values.js";
 import { EntityClass } from "../framework/defineEntity.js";
 import { ConfigClass } from "../framework/defineConfig.js";
 import { Named } from "../framework/named.js";
 import { PackageClass } from "../entities/system/Package.js";
-import { DerivedColor } from "../entities/system/color.js";
-import { ComposedValue } from "../entities/system/composed-values.js";
 import { OverrideCondition } from "../entities/system/Token.js";
 import { StylePropValue } from "../entities/system/StyleProperty.js";
 import { ComponentClass } from "../entities/system/Component.js";
@@ -70,7 +70,13 @@ declare const ReactNativeSystemDefinition: ConfigClass<{
       on: _$zod.ZodType<OverrideCondition, unknown, _$zod_v4_core0.$ZodTypeInternals<OverrideCondition, unknown>>;
       value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
     }, _$zod_v4_core0.$strip>>>;
-  }, "value" | "overrides"> & {
+    utility: _$zod.ZodOptional<_$zod.ZodBoolean>;
+    property: _$zod.ZodOptional<_$zod.ZodObject<{
+      syntax: _$zod.ZodOptional<_$zod.ZodString>;
+      inherits: _$zod.ZodOptional<_$zod.ZodBoolean>;
+    }, _$zod_v4_core0.$strict>>;
+    cssVariable: _$zod.ZodOptional<_$zod.ZodUnion<readonly [_$zod.ZodString, _$zod.ZodLiteral<false>]>>;
+  }, "value" | "property" | "overrides" | "cssVariable"> & {
     value: _$zod.ZodType<string | number | boolean | Ref | DerivedColor, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | boolean | Ref | DerivedColor, unknown>>;
     overrides: _$zod.ZodOptional<SubEntityClass<_$zod.ZodObject<{
       on: _$zod.ZodType<OverrideCondition, unknown, _$zod_v4_core0.$ZodTypeInternals<OverrideCondition, unknown>>;
@@ -78,7 +84,8 @@ declare const ReactNativeSystemDefinition: ConfigClass<{
     }, _$zod_v4_core0.$strip>>>;
   }, _$zod_v4_core0.$strip>, _$zod.ZodObject<Omit<{
     cssPrefix: _$zod.ZodOptional<_$zod.ZodString>;
-  }, "cssPrefix"> & {}, _$zod_v4_core0.$strip>, "token", {}, Record<never, never>, false, Record<never, never>, Record<never, never>>;
+    cssVariables: _$zod.ZodOptional<_$zod.ZodBoolean>;
+  }, "cssPrefix" | "cssVariables"> & {}, _$zod_v4_core0.$strip>, "token", {}, Record<never, never>, false, Record<never, never>, Record<never, never>>;
   components: ComponentClass;
   modifiers: NativeModifierClass;
   styleProps: EntityClass<_$zod.ZodObject<Omit<{
@@ -88,19 +95,24 @@ declare const ReactNativeSystemDefinition: ConfigClass<{
     classPrefix: _$zod.ZodOptional<_$zod.ZodString>;
     arbitrary: _$zod.ZodDefault<_$zod.ZodBoolean>;
     negates: _$zod.ZodDefault<_$zod.ZodBoolean>;
+    selector: _$zod.ZodOptional<_$zod.ZodString>;
+    alpha: _$zod.ZodOptional<_$zod.ZodString>;
+    declarations: _$zod.ZodOptional<_$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnion<readonly [_$zod.ZodString, _$zod.ZodObject<{
+      __ref: _$zod.ZodString;
+    }, _$zod_v4_core0.$strip>]>>>;
     opacityOf: _$zod.ZodOptional<_$zod.ZodLazy<_$zod.ZodType<Ref, unknown, _$zod_v4_core0.$ZodTypeInternals<Ref, unknown>>>>;
-  }, "values" | "properties" | "classPrefix"> & {
+  }, "values" | "alpha" | "properties" | "declarations" | "classPrefix" | "selector"> & {
     properties: _$zod.ZodArray<_$zod.ZodPipe<_$zod.ZodPipe<_$zod.ZodString, _$zod.ZodTransform<string, string>>, _$zod.ZodEnum<{
-      filter: "filter";
       transform: "transform";
-      position: "position";
+      filter: "filter";
+      left: "left";
+      right: "right";
       color: "color";
       inset: "inset";
+      position: "position";
       end: "end";
       start: "start";
       bottom: "bottom";
-      left: "left";
-      right: "right";
       top: "top";
       flex: "flex";
       cursor: "cursor";

package/dist/configs/react-native-system.js

@@ -2,6 +2,7 @@ import { Font } from "../entities/system/Font.js";
 import { Package } from "../entities/system/Package.js";
 import { Composite } from "../entities/system/Composite.js";
 import { File } from "../entities/system/File.js";
+import { NATIVE_CONFIG_NAME } from "./platform.js";
 import { Component } from "../entities/system/Component.js";
 import { Icon } from "../entities/system/Icon.js";
 import { Device } from "../entities/system/Device.js";
@@ -11,7 +12,6 @@ import { registerSchemaMigrations, registeredSchemaMigrations } from "../framewo
 import { defineConfig } from "../framework/defineConfig.js";
 import { CanvasRole } from "../entities/system/CanvasRole.js";
 import { Guidance } from "../entities/system/Guidance.js";
-import { NATIVE_CONFIG_NAME } from "./platform.js";
 import { LinkedSystem } from "../entities/system/LinkedSystem.js";
 import { settingsAsKindMigration } from "../migrations/20260908171448_settings_as_kind.js";
 import { visibleStatePointerMigration } from "../migrations/20260908194245_visible_state_pointer.js";

package/dist/configs/system.js

@@ -5,6 +5,7 @@ import { Modifier } from "../entities/system/Modifier.js";
 import { Settings } from "../entities/system/Settings.js";
 import { StyleProperty } from "../entities/system/StyleProperty.js";
 import { File } from "../entities/system/File.js";
+import { WEB_CONFIG_NAME } from "./platform.js";
 import { Token } from "../entities/system/Token.js";
 import { Component } from "../entities/system/Component.js";
 import { Icon } from "../entities/system/Icon.js";
@@ -17,7 +18,6 @@ import { CanvasRole } from "../entities/system/CanvasRole.js";
 import { GlobalStyle } from "../entities/system/GlobalStyle.js";
 import { Guidance } from "../entities/system/Guidance.js";
 import { GuidanceStyle } from "../entities/system/GuidanceStyle.js";
-import { WEB_CONFIG_NAME } from "./platform.js";
 import { LinkedSystem } from "../entities/system/LinkedSystem.js";
 import { Motion } from "../entities/system/Motion.js";
 import { loadV1Artifact } from "../migrations/2.0.0/v1-artifact.js";
@@ -53,6 +53,7 @@ import { canvasToolIconsAndDescriptionsMigration } from "../migrations/202609301
 import { styleRulesAsListMigration } from "../migrations/20261001112308_style_rules_as_list.js";
 import { motionExitAndElementDuplicateMigration } from "../migrations/20261001130958_motion_exit_and_element_duplicate.js";
 import { layerStyleAndForwardOpsMigration } from "../migrations/20261001131000_layer_style_and_forward_ops.js";
+import { oklchAndEmitFieldsMigration } from "../migrations/20261001162046_oklch_and_emit_fields.js";
 const System = defineConfig({
 	name: WEB_CONFIG_NAME,
 	description: "A design system: the values, primitives and compositions an app is built from. A ref is written `{ \"__ref\": \"<kind>:<path>\" }`, so a token is `{ \"__ref\": \"token:<group>/<name>\" }` and a token group is `{ \"__ref\": \"token:<group>\" }`. Build it in this order. Tokens first, in groups by purpose (colors, spacing, radii, type sizes), since everything else names them. Then style properties, each with `values` holding one ref to the token group whose members it accepts (`{ \"__ref\": \"token:color\" }`), so a prop takes token names rather than raw CSS; add a string keyword only for a value no token holds. A style rule's bag holds a prop's values (`\"padding\": \"4\"`, `\"bg\": \"brand\"`), never raw CSS. Then a few primitive components, one layer each, whose props are style properties (a box for layout and surface, a text for type, a pressable for interaction). Then every other component composed from those primitives: its layers name a primitive or an element, its anatomy places them (a node renders a layer, a tag or `Slot` where a slot prop's content lands; `children` is the edge list; `visible` is `{ \"$state\": \"<prop>\" }`; a prop shown in a nested layer is a `forward` route, and `$state` never sits in a node's props), and its style rules set style-property values per layer, keyed by prop values when a variant changes them. Modes (a dark mode is `{ type: \"selector\", value: \".dark\" }`) change token values through a token's `overrides`, so a component never restyles for a mode; modifiers (hover, focus, disabled) name a state, and a style rule applies under one as a `_hover` block inside a layer bag. Composites bundle style values that recur. Last, register canvas roles: the canvas draws with them, one entity per tool (`frame` for the layout primitive, `text` for the text primitive, `image`) whose entries name the components that tool inserts, and a tool whose role is unregistered is disabled. Give each component a `preview` entry under `*` so it shows content, and never write a CSS property name where a style-property name belongs.",
@@ -117,5 +118,6 @@ if (!registeredSchemaMigrations().has(20260930183521)) registerSchemaMigrations(
 if (!registeredSchemaMigrations().has(20261001112308)) registerSchemaMigrations(styleRulesAsListMigration);
 if (!registeredSchemaMigrations().has(20261001130958)) registerSchemaMigrations(motionExitAndElementDuplicateMigration);
 if (!registeredSchemaMigrations().has(20261001131e3)) registerSchemaMigrations(layerStyleAndForwardOpsMigration);
+if (!registeredSchemaMigrations().has(20261001162046)) registerSchemaMigrations(oklchAndEmitFieldsMigration);
 //#endregion
 export { System };

package/dist/css/value-type.js

@@ -1,4 +1,21 @@
+import { evaluateCalc, isDivide, isMultiply } from "../entities/system/calc.js";
+import { isDerivedColor, isGradient, isOklchColor } from "../entities/system/color.js";
+import { isShadow as isShadow$1 } from "../entities/system/shadow.js";
 //#region src/css/value-type.ts
+/**
+* What KIND of CSS value a literal is.
+*
+* A token's `type` is an open string it may declare, and most don't — a raw palette is authored as
+* bare hex values with no type at all. Everything that wants to treat a token as a colour (a
+* swatch, a picker, the emitted type augmentation, the AI's catalogue) then has nothing to go on,
+* so the inference lives here: beside the entity, once, rather than re-derived by each surface that
+* needs it.
+*
+* The classification is deliberately shallow. It reads the SHAPE of a literal — a leading `#`, a
+* known unit suffix, a recognised function head — and punts when nothing matches, because a wrong
+* confident answer is worse than none: a cell that decides a value is a colour renders a swatch and
+* a colour picker over something that isn't one.
+*/
 /** Function heads that introduce a colour. */
 const COLOR_FUNCTIONS = [
 	"rgb(",
@@ -71,6 +88,13 @@ function startsWithAny(value, heads) {
 * "some string".
 */
 function sniffValueType(value) {
+	if (isOklchColor(value) || isDerivedColor(value)) return "color";
+	if (isGradient(value)) return "gradient";
+	if (isShadow$1(value)) return "shadow";
+	if (isMultiply(value) || isDivide(value)) {
+		const literal = evaluateCalc(value, (part) => typeof part === "object" ? void 0 : part);
+		return literal === void 0 ? void 0 : sniffValueType(String(literal));
+	}
 	if (typeof value !== "string") return void 0;
 	const trimmed = value.trim().toLowerCase();
 	if (!trimmed) return void 0;

package/dist/entities/documentation/Documentation.d.ts

@@ -15,8 +15,8 @@ declare const DocumentationDefinition: EntityClass<z.ZodObject<{
     uds: "uds";
   }>>;
   platform: z.ZodOptional<z.ZodEnum<{
-    mobile: "mobile";
     web: "web";
+    mobile: "mobile";
   }>>;
 }, z.core.$strict>, z.ZodObject<Record<never, never>, z.core.$strip>, "documentation", {
   readonly search: {

package/dist/entities/native/NativeStyleProperty.d.ts

@@ -6,16 +6,16 @@ import { z } from "zod";
 //#region src/entities/native/NativeStyleProperty.d.ts
 /** One React Native style key, as RN's own types declare them. */
 declare const rnStyleKey: z.ZodEnum<{
-  filter: "filter";
   transform: "transform";
-  position: "position";
+  filter: "filter";
+  left: "left";
+  right: "right";
   color: "color";
   inset: "inset";
+  position: "position";
   end: "end";
   start: "start";
   bottom: "bottom";
-  left: "left";
-  right: "right";
   top: "top";
   flex: "flex";
   cursor: "cursor";
@@ -170,19 +170,24 @@ declare const NativeStyleProperty: EntityClass<z.ZodObject<Omit<{
   classPrefix: z.ZodOptional<z.ZodString>;
   arbitrary: z.ZodDefault<z.ZodBoolean>;
   negates: z.ZodDefault<z.ZodBoolean>;
+  selector: z.ZodOptional<z.ZodString>;
+  alpha: z.ZodOptional<z.ZodString>;
+  declarations: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
+    __ref: z.ZodString;
+  }, z.core.$strip>]>>>;
   opacityOf: z.ZodOptional<z.ZodLazy<z.ZodType<Ref, unknown, z.core.$ZodTypeInternals<Ref, unknown>>>>;
-}, "values" | "properties" | "classPrefix"> & {
+}, "values" | "alpha" | "properties" | "declarations" | "classPrefix" | "selector"> & {
   properties: z.ZodArray<z.ZodPipe<z.ZodPipe<z.ZodString, z.ZodTransform<string, string>>, z.ZodEnum<{
-    filter: "filter";
     transform: "transform";
-    position: "position";
+    filter: "filter";
+    left: "left";
+    right: "right";
     color: "color";
     inset: "inset";
+    position: "position";
     end: "end";
     start: "start";
     bottom: "bottom";
-    left: "left";
-    right: "right";
     top: "top";
     flex: "flex";
     cursor: "cursor";

package/dist/entities/native/NativeStyleProperty.js

@@ -20,8 +20,29 @@ const NativeStyleProperty = StyleProperty.extend({
 	entityName: "NativeStyleProperty",
 	fields: {
 		properties: z.array(z.string().transform(camelize).pipe(rnStyleKey)),
-		values: z.array(stylePropValueSchema()).optional(),
-		classPrefix: null
+		values: z.array(stylePropValueSchema()).check((ctx) => {
+			ctx.value.forEach((entry, index) => {
+				const bag = entry.value;
+				if (typeof bag !== "object" || bag === null) return;
+				for (const key of Object.keys(bag)) {
+					if (!key.startsWith("@")) continue;
+					ctx.issues.push({
+						code: "custom",
+						input: entry,
+						path: [
+							index,
+							"value",
+							key
+						],
+						message: `\`${key}\` is a CSS at-rule, which React Native has no counterpart for.`
+					});
+				}
+			});
+		}).optional(),
+		classPrefix: null,
+		selector: null,
+		declarations: null,
+		alpha: null
 	}
 });
 //#endregion

package/dist/entities/native/NativeToken.d.ts

@@ -1,9 +1,9 @@
 import { Ref } from "../../framework/utils/ref-grammar.js";
 import { Ref as Ref$1 } from "../../framework/utils/refs.js";
 import { SubEntityClass } from "../../framework/defineSubEntity.js";
-import { EntityClass } from "../../framework/defineEntity.js";
 import { DerivedColor } from "../system/color.js";
 import { ComposedValue } from "../system/composed-values.js";
+import { EntityClass } from "../../framework/defineEntity.js";
 import { OverrideCondition } from "../system/Token.js";
 import { z } from "zod";
 
@@ -16,7 +16,13 @@ declare const NativeToken: EntityClass<z.ZodObject<Omit<{
     on: z.ZodType<OverrideCondition, unknown, z.core.$ZodTypeInternals<OverrideCondition, unknown>>;
     value: z.ZodType<string | number | Ref | ComposedValue, unknown, z.core.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
   }, z.core.$strip>>>;
-}, "value" | "overrides"> & {
+  utility: z.ZodOptional<z.ZodBoolean>;
+  property: z.ZodOptional<z.ZodObject<{
+    syntax: z.ZodOptional<z.ZodString>;
+    inherits: z.ZodOptional<z.ZodBoolean>;
+  }, z.core.$strict>>;
+  cssVariable: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodLiteral<false>]>>;
+}, "value" | "property" | "overrides" | "cssVariable"> & {
   value: z.ZodType<string | number | boolean | Ref | DerivedColor, unknown, z.core.$ZodTypeInternals<string | number | boolean | Ref | DerivedColor, unknown>>;
   overrides: z.ZodOptional<SubEntityClass<z.ZodObject<{
     on: z.ZodType<OverrideCondition, unknown, z.core.$ZodTypeInternals<OverrideCondition, unknown>>;
@@ -24,6 +30,7 @@ declare const NativeToken: EntityClass<z.ZodObject<Omit<{
   }, z.core.$strip>>>;
 }, z.core.$strip>, z.ZodObject<Omit<{
   cssPrefix: z.ZodOptional<z.ZodString>;
-}, "cssPrefix"> & {}, z.core.$strip>, "token", {}, Record<never, never>, false, Record<never, never>, Record<never, never>>;
+  cssVariables: z.ZodOptional<z.ZodBoolean>;
+}, "cssPrefix" | "cssVariables"> & {}, z.core.$strip>, "token", {}, Record<never, never>, false, Record<never, never>, Record<never, never>>;
 //#endregion
 export { NativeToken, nativeTokenValue };

package/dist/entities/native/NativeToken.js

@@ -1,5 +1,8 @@
-import { derivedColor } from "../system/color.js";
+import { refSchema } from "../../framework/utils/refs.js";
+import { oklchColor } from "../system/color.js";
 import { Font } from "../system/Font.js";
+import { NATIVE_CONFIG_NAME } from "../../configs/platform.js";
+import { prepareLinkedTokenBody } from "../system/linked-token-values.js";
 import { Token, defineOverride } from "../system/Token.js";
 import { z } from "zod";
 //#region src/entities/native/NativeToken.ts
@@ -26,13 +29,33 @@ const nativeTokenString = z.union([
 	z.literal("transparent"),
 	z.literal("none")
 ]);
+/** A derived colour whose operands are colours the native theme can flatten: no gradient, at any
+*  depth. */
+const nativeDerivedColor = z.lazy(() => z.strictObject({
+	op: z.enum([
+		"darken",
+		"lighten",
+		"alpha",
+		"mix"
+	]),
+	color: nativeColorOperand,
+	amount: z.number(),
+	with: nativeColorOperand.optional(),
+	space: z.string().optional()
+}));
+const nativeColorOperand = z.lazy(() => z.union([
+	z.string(),
+	refSchema,
+	oklchColor,
+	nativeDerivedColor
+]));
 const nativeTokenValue = z.union([
 	z.number(),
 	z.boolean(),
 	nativeTokenString,
 	Token,
 	Font,
-	derivedColor
+	nativeDerivedColor
 ]);
 /** `Token`'s Override over the native value domain: the same condition and the same derived key. */
 const NativeOverride = defineOverride(nativeTokenValue);
@@ -40,10 +63,22 @@ const NativeToken = Token.extend({
 	entityName: "NativeToken",
 	fields: {
 		value: nativeTokenValue,
-		overrides: NativeOverride.optional()
+		overrides: NativeOverride.optional(),
+		cssVariable: null,
+		property: null
 	},
 	subEntities: { overrides: NativeOverride },
-	groupFields: { cssPrefix: null }
+	groupFields: {
+		cssPrefix: null,
+		cssVariables: null
+	},
+	prepareLinkedBody: ({ path, body, source, config }) => prepareLinkedTokenBody({
+		path,
+		body,
+		source,
+		config,
+		destinationPlatform: NATIVE_CONFIG_NAME
+	})
 });
 //#endregion
 export { NativeToken, nativeTokenValue };

package/dist/entities/system/Component.js

@@ -2,7 +2,7 @@ import { reject, rejectData } from "../../framework/rejection.js";
 import { canonicalCondition, isRef, kindOf, memberRef, pathOf, ref, refLeaf, refSchema, splitRef } from "../../framework/utils/refs.js";
 import { isPlainObject } from "../../framework/utils/field-path.js";
 import { pathInput } from "../../framework/schemas.js";
-import { derivedColor, gradient } from "./color.js";
+import { derivedColor, gradient, oklchColor } from "./color.js";
 import { shadowValue } from "./shadow.js";
 import { defineEntity } from "../../framework/defineEntity.js";
 import { defineSubEntity, orList } from "../../framework/defineSubEntity.js";
@@ -662,6 +662,7 @@ function styleBagValue({ config, declaration, name = "<prop>", glyphLibraries })
 	const property = pathOf(bound.__ref);
 	return z.union([
 		domain,
+		oklchColor,
 		derivedColor,
 		gradient,
 		shadowValue,

package/dist/entities/system/GlobalStyle.d.ts

@@ -1,6 +1,6 @@
+import { DerivedColor, OklchColor } from "./color.js";
 import { EntityClass } from "../../framework/defineEntity.js";
 import { Named } from "../../framework/named.js";
-import { DerivedColor } from "./color.js";
 import { z } from "zod";
 
 //#region src/entities/system/GlobalStyle.d.ts
@@ -10,7 +10,7 @@ import { z } from "zod";
  *  cascades into the rule and a mode override reaches it, where a baked `rgba()` would not. */
 type Declared = string | number | {
   __ref: string;
-} | DerivedColor | {
+} | OklchColor | DerivedColor | {
   [key: string]: Declared;
 };
 declare const GlobalStyleDefinition: EntityClass<z.ZodObject<{

package/dist/entities/system/GlobalStyle.js

@@ -1,5 +1,5 @@
 import { refSchema } from "../../framework/utils/refs.js";
-import { derivedColor } from "./color.js";
+import { derivedColor, oklchColor } from "./color.js";
 import { defineEntity } from "../../framework/defineEntity.js";
 import { z } from "zod";
 //#region src/entities/system/GlobalStyle.ts
@@ -23,6 +23,7 @@ const declared = z.lazy(() => z.union([
 	z.string(),
 	z.number(),
 	refSchema,
+	oklchColor,
 	derivedColor,
 	z.record(z.string(), declared)
 ]));

package/dist/entities/system/Modifier.d.ts

@@ -41,11 +41,13 @@ type ModifierGroupMeta = z.infer<typeof modifierGroupFields> & {
 };
 declare const ModifierDefinition: EntityClass<z.ZodObject<{
   type: z.ZodEnum<{
-    composite: "composite";
     selector: "selector";
+    composite: "composite";
     "media-query": "media-query";
   }>;
   value: z.ZodUnion<readonly [z.ZodString, z.ZodLazy<CompositeClass>]>;
+  media: z.ZodOptional<z.ZodString>;
+  declarations: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
 }, z.core.$strip>, z.ZodObject<{
   type: z.ZodOptional<z.ZodEnum<{
     mode: "mode";

package/dist/entities/system/Modifier.js

@@ -36,7 +36,9 @@ const Modifier = defineEntity({
 	kind: "modifier",
 	fields: z.object({
 		type: z.enum(WEB_ACTIVATIONS).describe("How the modifier activates, such as `selector` or `media`."),
-		value: z.union([z.string(), z.lazy(() => Composite)]).describe("The selector or query it activates on, or a composite ref.")
+		value: z.union([z.string(), z.lazy(() => Composite)]).describe("The selector or query it activates on, or a composite ref."),
+		media: z.string().min(1).optional().describe("A media query a selector modifier also needs, as `hover` applies only under `(hover: hover)` so a tap on a touch screen does not leave it stuck."),
+		declarations: z.record(z.string(), z.string()).optional().describe("Declarations every rule under the modifier sets first, as `before` sets `content: var(--tw-content)` so the pseudo-element renders.")
 	}).check((ctx) => {
 		const { type, value } = ctx.value;
 		const wantsRef = type === "composite";

package/dist/entities/system/Settings.d.ts

@@ -60,6 +60,14 @@ declare function cssPrefixes(value: CssPrefix | undefined): {
   classNames: string;
   variables: string;
 };
+/** `name` under a prefix — `uds-flex`, or `flex` when the prefix is empty. */
+declare function prefixed({
+  prefix,
+  name
+}: {
+  readonly prefix: string;
+  readonly name: string;
+}): string;
 /**
  * The prefix on every emitted class (`uds`). Shared with codegen, which builds class names that must
  * agree with the ones the projections produce.
@@ -123,4 +131,4 @@ declare const SettingsDefinition: EntityClass<z.ZodObject<{
 interface SettingsClass extends Named<typeof SettingsDefinition> {}
 declare const Settings: SettingsClass;
 //#endregion
-export { BuildSection, BuildSectionClass, CSS_DEFAULTS, CssPrefix, CssSection, CssSectionClass, PLAYGROUND_DEFAULTS, PlaygroundSection, PlaygroundSectionClass, Settings, SettingsClass, SystemSection, SystemSectionClass, classPrefixOf, cssPrefixes, varPrefixOf };
+export { BuildSection, BuildSectionClass, CSS_DEFAULTS, CssPrefix, CssSection, CssSectionClass, PLAYGROUND_DEFAULTS, PlaygroundSection, PlaygroundSectionClass, Settings, SettingsClass, SystemSection, SystemSectionClass, classPrefixOf, cssPrefixes, prefixed, varPrefixOf };

package/dist/entities/system/Settings.js

@@ -96,7 +96,7 @@ const cssFields = z.strictObject({
 	/** The files the app's stylesheet is shaken against, as globs from the config's directory. */
 	content: z.array(z.string().min(1)).meta({
 		title: "Content",
-		description: "The files the build reads for the classes an app uses, as globs relative to the config's directory: `src/**/*.{ts,tsx}`, `app/**/*.tsx`, or a prebuilt package's output such as `node_modules/@acme/widgets/dist/**/*.{js,mjs}`. `.ts`, `.tsx`, `.js`, `.jsx`, `.mjs` and `.cjs` files are read, compiled JSX included. Set, it replaces the default. Unset, `src/**/*.{ts,tsx}`.",
+		description: "The files the build reads for the classes an app uses, as globs relative to the config's directory: `src/**/*.{ts,tsx}`, `app/**/*.tsx`, or a prebuilt package's output such as `node_modules/@acme/widgets/dist/**/*.{js,mjs}`. `.ts`, `.tsx`, `.js`, `.jsx`, `.mjs` and `.cjs` files are read for the components they render, compiled JSX included, and every file a glob names — `.html`, `.vue`, `.md` and the rest — for the classes its text spells, as in `class=\"md:flex\"`. Set, it replaces the default. Unset, `src/**/*.{ts,tsx}`.",
 		default: ["src/**/*.{ts,tsx}"]
 	}).optional(),
 	/** What the stylesheet keeps whether or not a scanned file uses it — for a value built at runtime,
@@ -124,6 +124,10 @@ function cssPrefixes(value) {
 	};
 	return value;
 }
+/** `name` under a prefix — `uds-flex`, or `flex` when the prefix is empty. */
+function prefixed({ prefix, name }) {
+	return prefix ? `${prefix}-${name}` : name;
+}
 /**
 * The prefix on every emitted class (`uds`). Shared with codegen, which builds class names that must
 * agree with the ones the projections produce.
@@ -246,4 +250,4 @@ const Settings = defineEntity({
 inputDir: ({ member, config }) => resolveInputDir(member.build) ?? derivedInputDir(config) }
 });
 //#endregion
-export { BuildSection, CSS_DEFAULTS, CssSection, PLAYGROUND_DEFAULTS, PlaygroundSection, Settings, SystemSection, classPrefixOf, cssPrefixes, varPrefixOf };
+export { BuildSection, CSS_DEFAULTS, CssSection, PLAYGROUND_DEFAULTS, PlaygroundSection, Settings, SystemSection, classPrefixOf, cssPrefixes, prefixed, varPrefixOf };