@yahoo/uds-create-config 5.32.2 → 5.32.4

package/dist/entities/system/Component.js

@@ -1,5 +1,5 @@
 import { reject, rejectData } from "../../framework/rejection.js";
-import { canonicalCondition, collectRefs, isRef, kindOf, memberRef, pathOf, ref, refLeaf, refSchema, splitRef } from "../../framework/utils/refs.js";
+import { canonicalCondition, collectRefs, isRef, kindOf, memberRef, pathOf, ref, refLeaf, refSchema, sourceOf, splitRef } from "../../framework/utils/refs.js";
 import { isPlainObject } from "../../framework/utils/field-path.js";
 import { pathInput } from "../../framework/schemas.js";
 import { derivedColor, gradient, oklchColor } from "./color.js";
@@ -8,6 +8,7 @@ import { defineEntity } from "../../framework/defineEntity.js";
 import { defineSubEntity, orList } from "../../framework/defineSubEntity.js";
 import { childrenPolicy, forwardedPropName } from "./element.js";
 import { interactionKey, interactionModifiers } from "../../framework/interaction-conditions.js";
+import { translateLinkedStyleBags } from "./linked-style-values.js";
 import { listedIn } from "../../framework/utils/enumerated.js";
 import { valueSchemaOf } from "../../framework/value-domain.js";
 import { Package } from "./Package.js";
@@ -600,13 +601,21 @@ function declaringInto(config, layers, decl) {
 	const minted = (route) => {
 		if (!isRef(route.target)) return route;
 		const element = layers?.[pathOf(route.target)];
-		if (!isRef(element)) return route;
+		if (element === void 0 || element === null) return route;
 		const name = intoName(route.into);
-		const owner = propOwner(config, pathOf(element), name);
-		if (!owner || isRef(route.into) && pathOf(route.into) === owner) return route;
+		if (!isRef(element) || kindOf(element) !== "component") return route.into === name ? route : {
+			...route,
+			into: name
+		};
+		const ownerConfig = config.configFor(element);
+		if (!ownerConfig) return route;
+		const owner = propOwner(ownerConfig, pathOf(element), name);
+		if (!owner && !isRef(route.into)) return route;
+		const into = memberRef("component", owner ?? pathOf(element), "props", name, sourceOf(element));
+		if (isRef(route.into) && route.into.__ref === into.__ref) return route;
 		return {
 			...route,
-			into: memberRef("component", owner, "props", name)
+			into
 		};
 	};
 	const first = minted(decl);
@@ -1808,7 +1817,7 @@ const componentBags = (data) => {
 		if (!isPlainRecord(layers)) continue;
 		for (const [layer, bag] of Object.entries(layers)) collectBag(bag, (next) => {
 			layers[layer] = next;
-		}, out);
+		}, out, body?.layers?.[layer]);
 	}
 	for (const node of Object.values(body?.anatomy ?? {})) {
 		if (!isPlainRecord(node)) continue;
@@ -1823,6 +1832,19 @@ const componentBags = (data) => {
 };
 const ComponentEntity = defineEntity({
 	kind: "component",
+	rebaseLinkedBody: (args) => translateLinkedStyleBags({
+		...args,
+		bags: componentBags,
+		owner: args.path
+	}),
+	prepareLinkedBody: ({ body, config }) => {
+		if (!isPlainObject(body.props)) return body;
+		const layers = isPlainObject(body.layers) ? body.layers : void 0;
+		return {
+			...body,
+			props: Object.fromEntries(Object.entries(body.props).map(([name, decl]) => [name, declaringInto(config, layers, decl)]))
+		};
+	},
 	fields: componentFields,
 	groupFields: z.object({ icon: z.string().optional() }),
 	subEntities: {

package/dist/entities/system/Composite.js

@@ -1,4 +1,5 @@
 import { defineEntity } from "../../framework/defineEntity.js";
+import { translateLinkedStyleBags } from "./linked-style-values.js";
 import { Style, bagNameEdges, bagRewriteName, collectBag } from "./style-bag.js";
 import { z } from "zod";
 //#region src/entities/system/Composite.ts
@@ -13,6 +14,10 @@ const compositeBags = (data) => {
 };
 const Composite = defineEntity({
 	kind: "composite",
+	rebaseLinkedBody: (args) => translateLinkedStyleBags({
+		...args,
+		bags: compositeBags
+	}),
 	label: "Composite style",
 	labelPlural: "Composite styles",
 	fields: z.object({ styles: Style.describe("The style values the composite bundles. Each declaration is a member, so an editor writes one key at a time.") }),

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

@@ -30,8 +30,8 @@ type WebActivation = (typeof WEB_ACTIVATIONS)[number];
  */
 declare const modifierGroupFields: z.ZodObject<{
   type: z.ZodOptional<z.ZodEnum<{
-    mode: "mode";
     state: "state";
+    mode: "mode";
   }>>;
   default: z.ZodOptional<z.ZodObject<{
     __ref: z.ZodString;
@@ -53,8 +53,8 @@ declare const ModifierDefinition: EntityClass<z.ZodObject<{
   declarations: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
 }, z.core.$strip>, z.ZodObject<{
   type: z.ZodOptional<z.ZodEnum<{
-    mode: "mode";
     state: "state";
+    mode: "mode";
   }>>;
   default: z.ZodOptional<z.ZodObject<{
     __ref: z.ZodString;

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

@@ -11,9 +11,9 @@ import { z } from "zod";
  */
 declare const inlineJsMotion: z.ZodObject<{
   transition: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+  initial: z.ZodOptional<z.ZodUnion<readonly [z.ZodRecord<z.ZodString, z.ZodUnknown>, z.ZodString, z.ZodArray<z.ZodString>, z.ZodLiteral<false>]>>;
   exit: z.ZodOptional<z.ZodUnion<readonly [z.ZodRecord<z.ZodString, z.ZodUnknown>, z.ZodString, z.ZodArray<z.ZodString>]>>;
   layout: z.ZodOptional<z.ZodUnion<readonly [z.ZodBoolean, z.ZodLiteral<"position">, z.ZodLiteral<"size">, z.ZodLiteral<"preserve-aspect">]>>;
-  initial: z.ZodOptional<z.ZodUnion<readonly [z.ZodRecord<z.ZodString, z.ZodUnknown>, z.ZodString, z.ZodArray<z.ZodString>, z.ZodLiteral<false>]>>;
   variants: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodRecord<z.ZodString, z.ZodUnknown>>>;
   animate: z.ZodOptional<z.ZodUnion<readonly [z.ZodRecord<z.ZodString, z.ZodUnknown>, z.ZodString, z.ZodArray<z.ZodString>]>>;
   whileHover: z.ZodOptional<z.ZodUnion<readonly [z.ZodRecord<z.ZodString, z.ZodUnknown>, z.ZodString, z.ZodArray<z.ZodString>]>>;

package/dist/entities/system/Settings.js

@@ -2,8 +2,8 @@ import { splitRef } from "../../framework/utils/refs.js";
 import { defineEntity } from "../../framework/defineEntity.js";
 import { defineSubEntity } from "../../framework/defineSubEntity.js";
 import { createSliceMemo } from "../../framework/memo.js";
-import { buildFields } from "../../configs/build-options.js";
 import { parseRootFontSize } from "../../css/root-font-size.js";
+import { buildFields } from "../../configs/build-options.js";
 import { resolveInputDir } from "../../framework/registry-dir.js";
 import { safelistSchema } from "./safelist.js";
 import { z } from "zod";

package/dist/entities/system/Token.js

@@ -3,9 +3,9 @@ import { composedValueSchemas } from "./composed-values.js";
 import { defineEntity } from "../../framework/defineEntity.js";
 import { defineSubEntity, orList } from "../../framework/defineSubEntity.js";
 import { Font } from "./Font.js";
-import { Modifier } from "./Modifier.js";
-import { spellTokenRead } from "./token-values.js";
 import { WEB_CONFIG_NAME } from "../../configs/platform.js";
+import { spellTokenRead } from "./token-values.js";
+import { Modifier } from "./Modifier.js";
 import { authoringPhantom } from "../../framework/utils/authoring-phantom.js";
 import { prepareLinkedTokenBody } from "./linked-token-values.js";
 import { z } from "zod";
@@ -119,12 +119,13 @@ function defineOverride(value) {
 const Override = defineOverride(tokenValue);
 const TokenEntity = defineEntity({
 	kind: "token",
-	prepareLinkedBody: ({ path, body, source, config }) => prepareLinkedTokenBody({
+	prepareLinkedBody: ({ path, body, source, config, extend }) => prepareLinkedTokenBody({
 		path,
 		body,
 		source,
 		config,
-		destinationPlatform: WEB_CONFIG_NAME
+		destinationPlatform: WEB_CONFIG_NAME,
+		extend
 	}),
 	fields: z.object({
 		value: tokenValue.describe("The base value: a literal, a ref to another token, or a composed value such as a gradient."),

package/dist/entities/system/component-module.js

@@ -1,8 +1,8 @@
 import { isRef, kindOf, pathOf, ref, routedSource, sourceHops, splitRef } from "../../framework/utils/refs.js";
 import { createSliceMemo } from "../../framework/memo.js";
+import { isNativeConfig } from "../../configs/platform.js";
 import { Settings, classPrefixOf, prefixed, varPrefixOf } from "./Settings.js";
 import { File } from "./File.js";
-import { isNativeConfig } from "../../configs/platform.js";
 import { Component } from "./Component.js";
 import { contentKey } from "../../framework/utils/content-key.js";
 //#region src/entities/system/component-module.ts

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

@@ -380,6 +380,18 @@ type LayerBag<Self, K extends PropertyKey> = Self extends ((props: infer Props)
  */
 type SlotValueOf<D, Self, K extends PropertyKey, View extends SlotView> = View extends 'render' ? OwnSlotValue<D, 'render'> | null : string extends K ? // An open prop map (`PropMap` itself, read at a constraint) names no prop in particular, so
 OwnSlotValue<D, 'consumer'> | null : OwnSlotValue<D, 'consumer'> | SlotCodeValue<D, Self, K> | null;
+/** A forward's address in authored and stored contracts. Ownership refs identify the prop;
+ * the effective layer map still decides which element receives it. */
+type ForwardPath<D> = D extends {
+  type: 'forward';
+  target: infer Target;
+} ? Target extends string ? Target : Target extends readonly [infer First extends string, ...unknown[]] ? First : Target extends {
+  readonly __ref: `layer:${infer Layer}`;
+} ? D extends {
+  into: infer Into;
+} ? Into extends string ? `${Layer}/${Into}` : Into extends {
+  readonly __ref: `component:${string}#props/${infer Prop}`;
+} ? `${Layer}/${Prop}` : never : `${Layer}/children` : never : never;
 /** The declaration arms of {@link ValueOf}, after the two ref arms. */
 type ValueOfDeclaration<D, Self, K extends PropertyKey, View extends SlotView> = D extends {
   type: 'variant';
@@ -395,10 +407,7 @@ type ValueOfDeclaration<D, Self, K extends PropertyKey, View extends SlotView> =
 } ? SlotValueOf<D, Self, K, View> : D extends {
   type: 'forward';
   text: true;
-} ? string : D extends {
-  type: 'forward';
-  target: `${string}/children` | readonly [`${string}/children`, ...unknown[]];
-} ? ReactNode : unknown;
+} ? string : [ForwardPath<D>] extends [never] ? unknown : ForwardPath<D> extends `${string}/children` ? ReactNode : unknown;
 /**
  * A prop type's DECLARED props — everything but its index signature.
  *
@@ -422,10 +431,7 @@ type DeclaredProps<P, L extends LayerMap = LayerMap, Self = unknown, View extend
 type RoutedValueOf<L extends LayerMap, D, Self = unknown, K extends PropertyKey = never, View extends SlotView = 'consumer'> = D extends {
   type: 'forward';
   text: true;
-} ? string : D extends {
-  type: 'forward';
-  target: `${infer Layer}/${infer Prop}` | readonly [`${infer Layer}/${infer Prop}`, ...unknown[]];
-} ? Prop extends 'children' ? ReactNode : Layer extends keyof L ? Prop extends keyof ElementPropsOf<L[Layer]> ? ElementPropsOf<L[Layer]>[Prop] : unknown : unknown : ValueOf<D, Self, K, View>;
+} ? string : [ForwardPath<D>] extends [never] ? ValueOf<D, Self, K, View> : ForwardPath<D> extends `${infer Layer}/${infer Prop}` ? Prop extends 'children' ? ReactNode : Layer extends keyof L ? Prop extends keyof ElementPropsOf<L[Layer]> ? ElementPropsOf<L[Layer]>[Prop] : unknown : unknown : ValueOf<D, Self, K, View>;
 /**
  * The props the rendered ELEMENT contributes, `ref` included.
  *

package/dist/entities/system/linked-flex-values.d.ts

@@ -0,0 +1,19 @@
+import { z } from "zod";
+
+//#region src/entities/system/linked-flex-values.d.ts
+/** Native has no flex shorthand string. Its equivalent is these three style declarations. */
+declare const nativeFlexValue: z.ZodObject<{
+  flexGrow: z.ZodNumber;
+  flexShrink: z.ZodNumber;
+  flexBasis: z.ZodUnion<readonly [z.ZodNumber, z.ZodLiteral<"auto">, z.ZodString]>;
+}, z.core.$strict>;
+type NativeFlexValue = z.infer<typeof nativeFlexValue>;
+declare function isNativeFlexValue(value: unknown): value is NativeFlexValue;
+/** The supported CSS flex grammar, resolved to RN longhands without losing its basis or shrink. */
+declare function webFlexToNative(value: string | number, remBase?: number): NativeFlexValue;
+/** RN numeric flex is not CSS numeric flex: Yoga's native defaults use shrink=0, and positive
+ * numbers use a 0pt basis. Negative flex supplies shrink while retaining auto basis.
+ * See Yoga Node::resolveFlexGrow/resolveFlexShrink/processFlexBasis with useWebDefaults=false. */
+declare function nativeFlexToWeb(value: NativeFlexValue | number): string;
+//#endregion
+export { NativeFlexValue, isNativeFlexValue, nativeFlexToWeb, webFlexToNative };

package/dist/entities/system/linked-flex-values.js

@@ -0,0 +1,77 @@
+import { z } from "zod";
+//#region src/entities/system/linked-flex-values.ts
+/** Native has no flex shorthand string. Its equivalent is these three style declarations. */
+const nativeFlexValue = z.strictObject({
+	flexGrow: z.number().nonnegative(),
+	flexShrink: z.number().nonnegative(),
+	flexBasis: z.union([
+		z.number().nonnegative(),
+		z.literal("auto"),
+		z.string().regex(/^(?:\d+(?:\.\d+)?|\.\d+)%$/)
+	])
+});
+function isNativeFlexValue(value) {
+	return typeof value === "object" && value !== null && "flexGrow" in value && nativeFlexValue.safeParse(value).success;
+}
+const NUMBER = /^(?:\d+(?:\.\d+)?|\.\d+)$/;
+/** The supported CSS flex grammar, resolved to RN longhands without losing its basis or shrink. */
+function webFlexToNative(value, remBase) {
+	const text = String(value).trim();
+	if (text === "none") return {
+		flexGrow: 0,
+		flexShrink: 0,
+		flexBasis: "auto"
+	};
+	if (text === "auto") return {
+		flexGrow: 1,
+		flexShrink: 1,
+		flexBasis: "auto"
+	};
+	if (text === "initial") return {
+		flexGrow: 0,
+		flexShrink: 1,
+		flexBasis: "auto"
+	};
+	const parts = text.split(/\s+/);
+	let grow = 1;
+	let shrink = 1;
+	let basis = "0%";
+	if (parts.length <= 3 && NUMBER.test(parts[0] ?? "")) {
+		grow = Number(parts.shift());
+		if (parts.length && NUMBER.test(parts[0] ?? "")) shrink = Number(parts.shift());
+		if (parts.length === 1) basis = parts.shift() ?? "";
+	} else if (parts.length === 1) basis = parts.shift() ?? "";
+	if (parts.length === 0) {
+		if (basis === "auto" || /^(?:\d+(?:\.\d+)?|\.\d+)%$/.test(basis)) return {
+			flexGrow: grow,
+			flexShrink: shrink,
+			flexBasis: basis
+		};
+		const length = /^(\d+(?:\.\d+)?|\.\d+)(px|rem)?$/.exec(basis);
+		if (length && (length[2] || Number(length[1]) === 0)) {
+			if (length[2] !== "rem" || remBase !== void 0) return {
+				flexGrow: grow,
+				flexShrink: shrink,
+				flexBasis: Number(length[1]) * (length[2] === "rem" ? remBase : 1)
+			};
+		}
+	}
+	throw new Error(`[uds] Cannot translate Web flex ${JSON.stringify(value)} to native. Use none, auto, initial, or numeric grow/shrink with an auto, percentage, px, or fixed-rem basis.`);
+}
+/** RN numeric flex is not CSS numeric flex: Yoga's native defaults use shrink=0, and positive
+* numbers use a 0pt basis. Negative flex supplies shrink while retaining auto basis.
+* See Yoga Node::resolveFlexGrow/resolveFlexShrink/processFlexBasis with useWebDefaults=false. */
+function nativeFlexToWeb(value) {
+	const { flexGrow, flexShrink, flexBasis } = typeof value !== "number" ? value : value > 0 ? {
+		flexGrow: value,
+		flexShrink: 0,
+		flexBasis: 0
+	} : {
+		flexGrow: 0,
+		flexShrink: -value,
+		flexBasis: "auto"
+	};
+	return `${flexGrow} ${flexShrink} ${typeof flexBasis === "number" ? `${flexBasis}px` : flexBasis}`;
+}
+//#endregion
+export { isNativeFlexValue, nativeFlexToWeb, nativeFlexValue, webFlexToNative };

package/dist/entities/system/linked-style-values.d.ts

@@ -0,0 +1,11 @@
+import type { Config } from '../../framework/Config';
+import type { BagSites } from './style-bag';
+/** Translate inherited literals before merging the destination's own style overrides. Refs keep
+ * their identity: the linked-token adapter handles their values and mode overrides. */
+export declare function translateLinkedStyleBags({ body, source, config, bags, owner, }: {
+    body: Record<string, unknown>;
+    source?: Config;
+    config: Config;
+    bags: BagSites;
+    owner?: string;
+}): Record<string, unknown>;

package/dist/entities/system/linked-style-values.js

@@ -0,0 +1,47 @@
+import { isRef, pathOf } from "../../framework/utils/refs.js";
+import { NATIVE_CONFIG_NAME } from "../../configs/platform.js";
+import { isNativeFlexValue, nativeFlexToWeb, webFlexToNative } from "./linked-flex-values.js";
+import { rootFontSize } from "./token-values.js";
+import { stylePropEntries, stylePropertyPathFor } from "../../framework/projections.js";
+//#region src/entities/system/linked-style-values.ts
+/** Translate inherited literals before merging the destination's own style overrides. Refs keep
+* their identity: the linked-token adapter handles their values and mode overrides. */
+function translateLinkedStyleBags({ body, source, config, bags, owner }) {
+	if (!source || source.name === config.name) return body;
+	if (!["system-config", "react-native-system"].includes(source.name)) return body;
+	if (!["system-config", "react-native-system"].includes(config.name)) return body;
+	const native = config.name === NATIVE_CONFIG_NAME;
+	const translate = (bag, element) => Object.fromEntries(Object.entries(bag).map(([key, raw]) => {
+		if (key.startsWith("_")) return [key, raw];
+		const propPath = stylePropertyPathFor({
+			config: source,
+			key,
+			through: [isRef(element) ? pathOf(element) : typeof element === "string" ? element : owner]
+		});
+		const properties = propPath ? source.resolve("style-property", propPath)?.toJSON().properties : void 0;
+		if (!propPath || !Array.isArray(properties) || properties.length !== 1 || isRef(raw)) return [key, raw];
+		const property = String(properties[0]).replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+		if (![
+			"flex",
+			"flexGrow",
+			"flexShrink"
+		].includes(property)) return [key, raw];
+		const alias = stylePropEntries(source, propPath).find((entry) => entry.leaf === String(raw));
+		if (alias?.declarations) return [key, raw];
+		const resolved = alias ? alias.numeric && /^(?:\d+(?:\.\d+)?|\.\d+)$/.test(alias.value) ? Number(alias.value) : alias.value : raw;
+		const value = typeof resolved === "string" && resolved.startsWith("[") && resolved.endsWith("]") ? resolved.slice(1, -1) : resolved;
+		if (property === "flex") {
+			if (native && (typeof value === "string" || typeof value === "number")) return [key, webFlexToNative(value, rootFontSize(source).px)];
+			if (!native && (typeof value === "number" || isNativeFlexValue(value))) return [key, `[${nativeFlexToWeb(value)}]`];
+		} else if (typeof value === "string" || typeof value === "number") {
+			if (!/^(?:\d+(?:\.\d+)?|\.\d+)$/.test(String(value)) || !Number.isFinite(Number(value))) throw new Error(`[uds] Cannot translate ${property} ${JSON.stringify(value)}: expected a non-negative unitless number.`);
+			return [key, native ? Number(value) : `[${value}]`];
+		}
+		return [key, raw];
+	}));
+	const translated = structuredClone(body);
+	for (const site of [...bags(translated)].reverse()) site.write(translate(site.bag, site.element));
+	return translated;
+}
+//#endregion
+export { translateLinkedStyleBags };

package/dist/entities/system/linked-token-values.d.ts

@@ -1,5 +1,6 @@
 import { Config } from "../../framework/Config.js";
 import { NATIVE_CONFIG_NAME, WEB_CONFIG_NAME } from "../../configs/platform.js";
+import { NativeFlexValue } from "./linked-flex-values.js";
 
 //#region src/entities/system/linked-token-values.d.ts
 type Platform = typeof WEB_CONFIG_NAME | typeof NATIVE_CONFIG_NAME;
@@ -11,24 +12,26 @@ declare function convertLinkedTokenValue({
   remBase
 }: {
   path: string;
-  value: string | number | boolean;
+  value: string | number | boolean | NativeFlexValue;
   sourcePlatform: string;
   destinationPlatform: Platform; /** The pinned web source's fixed root size, only needed for web rem → native points. */
   remBase?: number;
-}): string | number | boolean;
+}): string | number | boolean | NativeFlexValue;
 /** The one adapter for base and mode values before a linked body is parsed by its destination. */
 declare function prepareLinkedTokenBody({
   path,
   body,
   source,
   config,
-  destinationPlatform
+  destinationPlatform,
+  extend
 }: {
   path: string;
   body: Record<string, unknown>;
   source: Config; /** The config whose refs the body spells; a source's own body spells them in the source. */
   config: Config;
   destinationPlatform: Platform;
+  extend?: Record<string, unknown>;
 }): Record<string, unknown>;
 //#endregion
 export { convertLinkedTokenValue, prepareLinkedTokenBody };

package/dist/entities/system/linked-token-values.js

@@ -1,9 +1,10 @@
 import { hasRefMarker } from "../../framework/utils/refs.js";
 import { isCalc } from "./calc.js";
 import { isOklchColor } from "./color.js";
-import { literalValueOf } from "../../framework/projections.js";
-import { rootFontSize } from "./token-values.js";
 import "../../configs/platform.js";
+import { isNativeFlexValue, nativeFlexToWeb, webFlexToNative } from "./linked-flex-values.js";
+import { rootFontSize } from "./token-values.js";
+import { literalValueOf } from "../../framework/projections.js";
 //#region src/entities/system/linked-token-values.ts
 /**
 * Adapt a linked token for the system reading it. The source keeps its authored value; only the
@@ -12,10 +13,12 @@ import "../../configs/platform.js";
 */
 const LENGTH_GROUPS = new Set([
 	"spacing",
+	"size",
 	"radius",
 	"borderRadius",
 	"iconSize",
 	"borderWidth",
+	"outlineOffset",
 	"fontSize",
 	"fontLineHeight",
 	"fontLetterSpacing"
@@ -23,7 +26,9 @@ const LENGTH_GROUPS = new Set([
 const NUMBER_GROUPS = new Set([
 	"opacity",
 	"zIndex",
-	"fontWeight"
+	"fontWeight",
+	"flexGrow",
+	"flexShrink"
 ]);
 const LENGTH = /^(-?(?:\d+(?:\.\d+)?|\.\d+))(px|rem)$/;
 const NUMBER = /^-?(?:\d+(?:\.\d+)?|\.\d+)$/;
@@ -33,9 +38,16 @@ const OKLCH = /^oklch\(\s*(-?[\d.]+)(%?)\s+(-?[\d.]+)(%?)\s+(-?[\d.]+|none)(?:de
 function convertLinkedTokenValue({ path, value, sourcePlatform, destinationPlatform, remBase }) {
 	if (sourcePlatform === destinationPlatform) return value;
 	const group = path.split("/")[0];
+	if (group === "flex") {
+		if (destinationPlatform === "react-native-system") {
+			if (isNativeFlexValue(value)) return value;
+			if (typeof value === "string" || typeof value === "number") return webFlexToNative(value, remBase);
+		} else if (sourcePlatform === "react-native-system" && (typeof value === "number" || isNativeFlexValue(value))) return nativeFlexToWeb(value);
+	}
 	if (destinationPlatform === "react-native-system") {
 		if (LENGTH_GROUPS.has(group)) {
 			if (typeof value === "number") return value;
+			if (group === "size" && typeof value === "string" && /^-?(?:\d+(?:\.\d+)?|\.\d+)%$/.test(value)) return value;
 			const match = typeof value === "string" ? LENGTH.exec(value) : null;
 			if (!match) throw unsupported("native", path, value, "a px or rem length");
 			if (match[2] === "rem" && remBase === void 0) throw new Error(`[uds] Linked native token "${path}" has value ${JSON.stringify(value)}, but its source has no fixed root font size for rem conversion.`);
@@ -60,7 +72,7 @@ function convertLinkedTokenValue({ path, value, sourcePlatform, destinationPlatf
 	return value;
 }
 /** The one adapter for base and mode values before a linked body is parsed by its destination. */
-function prepareLinkedTokenBody({ path, body, source, config, destinationPlatform }) {
+function prepareLinkedTokenBody({ path, body, source, config, destinationPlatform, extend }) {
 	if (source.name === destinationPlatform) return body;
 	const remBase = source.name === "system-config" ? rootFontSize(source).px : void 0;
 	const convert = (value) => {
@@ -69,7 +81,7 @@ function prepareLinkedTokenBody({ path, body, source, config, destinationPlatfor
 			value,
 			remBase
 		}) : value;
-		return typeof literal === "string" || typeof literal === "number" || typeof literal === "boolean" ? convertLinkedTokenValue({
+		return typeof literal === "string" || typeof literal === "number" || typeof literal === "boolean" || isNativeFlexValue(literal) ? convertLinkedTokenValue({
 			path,
 			value: literal,
 			sourcePlatform: source.name,
@@ -80,10 +92,10 @@ function prepareLinkedTokenBody({ path, body, source, config, destinationPlatfor
 	const overrides = body.overrides;
 	return {
 		...body,
-		value: convert(body.value),
+		value: extend && Object.hasOwn(extend, "value") ? body.value : convert(body.value),
 		...overrides && typeof overrides === "object" && !Array.isArray(overrides) ? { overrides: Object.fromEntries(Object.entries(overrides).map(([key, raw]) => [key, raw && typeof raw === "object" && !Array.isArray(raw) ? {
 			...raw,
-			value: convert(raw.value)
+			value: Object.hasOwn((extend?.overrides)?.[key] ?? {}, "value") ? raw.value : convert(raw.value)
 		} : raw])) } : {}
 	};
 }

package/dist/entities/system/motion-presets.js

@@ -1,11 +1,11 @@
 import { collectRefs, isRef, kindOf, pathOf } from "../../framework/utils/refs.js";
 import { composedValueFormOf } from "./composed-values.js";
 import { createSliceMemo } from "../../framework/memo.js";
+import { tokenValueRow } from "./token-values.js";
 import { MOTION_EASING_NAMES, bezierPoints, motionOfCssKeyword } from "./easings.js";
 import { inlineMotions } from "./motion-variants.js";
 import { isReducedMotion } from "./reduced-motion.js";
 import { jsMotionPropFields } from "./Motion.js";
-import { tokenValueRow } from "./token-values.js";
 import { renderValue } from "./value-render.js";
 //#region src/entities/system/motion-presets.ts
 /** A time spelled in CSS, which `motion/react` reads in seconds. */

package/dist/framework/Config.d.ts

@@ -1415,12 +1415,14 @@ declare class Config {
     kind,
     path,
     body,
-    extend
+    extend,
+    source
   }: {
     kind: string;
     path: string;
     body: Record<string, unknown>;
     extend: Record<string, unknown>;
+    source?: Config;
   }): Record<string, unknown>;
   /** The body of the entity a re-pointed path names, or `undefined` when there is none to read. */
   private redirectedBody;

package/dist/framework/Config.js

@@ -2074,7 +2074,8 @@ var Config = class Config {
 					kind: patch.kind,
 					path: pathOf(extension),
 					body: current.source,
-					extend: current.overlay
+					extend: current.overlay,
+					source: this.configFor(extension)
 				}) : resolved.toJSON();
 				const materialized = snapshot.withChanges([itemChange(entry, patch.kind, patch.path, inherited)]);
 				const changed = this.applySub(materialized, patch, materialized.get(patch.kind, patch.path) ?? resolved, mode);
@@ -2164,7 +2165,8 @@ var Config = class Config {
 				kind: patch.kind,
 				path: pathOf(extension),
 				body: current.source,
-				extend: current.overlay
+				extend: current.overlay,
+				source: this.configFor(extension)
 			}) : resolved.toJSON(), delta, isField);
 			const local = { ...current ? current.overlay : extension.extend };
 			for (const field of touched) if (Object.hasOwn(delta, field) && delta[field] === null) delete local[field];
@@ -2176,7 +2178,8 @@ var Config = class Config {
 				kind: patch.kind,
 				path: pathOf(extension),
 				body: sourceBody,
-				extend: local
+				extend: local,
+				source: this.configFor(extension)
 			});
 			const createSchema = wholeBodySchema(entry, { config: this });
 			let merged = candidate;
@@ -2926,13 +2929,15 @@ var Config = class Config {
 			kind,
 			path: pathOf(extension),
 			body: inherited,
-			extend: extension.extend ?? {}
+			extend: extension.extend ?? {},
+			source
 		});
 		return this.entityOf(kind)?.prepareLinkedBody?.({
 			path: pathOf(extension),
 			body: merged,
 			source,
-			config: this
+			config: this,
+			extend: extension.extend ?? {}
 		}) ?? merged;
 	}
 	/**
@@ -2947,7 +2952,7 @@ var Config = class Config {
 	* nothing. The pin's invariants refuse the last two when they're written, and the build reports a
 	* missing target (`brokenLinkRedirects`).
 	*/
-	laidLinkedBody({ kind, path, body, extend }) {
+	laidLinkedBody({ kind, path, body, extend, source }) {
 		const { target, rest } = redirectOf(extend);
 		const base = target === void 0 ? body : this.redirectedBody({
 			kind,
@@ -2958,7 +2963,9 @@ var Config = class Config {
 			entry: this.entityOf(kind),
 			path,
 			body: base,
-			extend: rest
+			extend: rest,
+			config: this,
+			source: target === void 0 ? source : this.configFor({ __ref: target })
 		}), rest);
 	}
 	/** The body of the entity a re-pointed path names, or `undefined` when there is none to read. */
@@ -3892,7 +3899,8 @@ var Config = class Config {
 			kind,
 			path,
 			body: theirs,
-			extend: laid
+			extend: laid,
+			source: this.sourceFor(slug)
 		});
 		return laid ? {
 			...theirs,
@@ -5111,7 +5119,8 @@ var Config = class Config {
 					source: slug,
 					owns: (name) => source.ownedKinds().includes(name)
 				}),
-				extend: extension.extend
+				extend: extension.extend,
+				source
 			});
 			visitEntity(kind, body, false, linked);
 			visitBags(kind, body, linked);
@@ -6035,11 +6044,13 @@ function redirectOf(extend) {
 }
 /** A source's body as an extension reads it before its `extend` merges in: the kind's
 *  {@link EntityKind.rebaseLinkedBody}, where it declares one. */
-function rebasedLinkedBody({ entry, path, body, extend }) {
+function rebasedLinkedBody({ entry, path, body, extend, source, config }) {
 	return entry?.rebaseLinkedBody?.({
 		path,
 		body,
-		extend
+		extend,
+		source,
+		config
 	}) ?? body;
 }
 function overlayBody({ overlay, theirs }) {

package/dist/framework/projections.js

@@ -6,9 +6,9 @@ import { modifierCategory } from "../entities/system/modifier-axis.js";
 import { forwardedPropName, forwardsOf, rootLayerOf } from "../entities/system/element.js";
 import { createSliceMemo } from "./memo.js";
 import { fontFamilyStack } from "../entities/system/Font.js";
+import { classPrefixOf, prefixed, varPrefixOf } from "../entities/system/Settings.js";
 import { listedIn } from "./utils/enumerated.js";
 import "../entities/system/Modifier.js";
-import { classPrefixOf, prefixed, varPrefixOf } from "../entities/system/Settings.js";
 import { StyleProperty, leavesOfStylePropValue, numberUnitRefusal } from "../entities/system/StyleProperty.js";
 import { componentStates } from "./component-states.js";
 import { isConditionalPreview, storedPreview, unconditionalPreviewProps } from "./preview-store.js";