@yahoo/uds-create-config 5.40.4 → 5.41.1

package/dist/entities/system/Motion.js

@@ -1,29 +1,20 @@
 import { isRef, refSchema } from "../../framework/utils/refs.js";
+import { METADATA_KEYS } from "../../framework/utils/field-schema.js";
 import { pathInput } from "../../framework/schemas.js";
 import { defineEntity } from "../../framework/defineEntity.js";
+import { isNativeConfig } from "../../configs/platform.js";
 import { authoredValue } from "../../framework/projections.js";
-import { convertMotion, convertMotionPreset, planMotionConversion } from "./motion-convert.js";
+import { convertMotion } from "./motion-convert.js";
+import { cssMotionValue, motionTransition, reanimatedMotion, webMotionBody } from "./motion-types.js";
 import { renameMotionVariant } from "./motion-variants.js";
 import { cssMotionVariantGroups } from "./css-motion-reach.js";
 import { REDUCED_MOTION_ATTRIBUTE, REDUCED_MOTION_VALUES } from "./reduced-motion.js";
 import { z } from "zod";
 //#region src/entities/system/Motion.ts
 /**
-* Motion (`fade/in`) — an animation preset, discriminated by `runtime`:
-*  - `css` → played by the stylesheet. Either `keyframes`, which codegen emits as `@keyframes`, or
-*    states (`variants`, `initial`, `animate`, `exit`, `whileHover`, `whileTap`, `whileFocus`) with a
-*    `transition` written as CSS, or both. The states mean what a JS preset's do.
-*  - `js`  → played by `motion/react`: the interaction state the client drives, `exit` included,
-*    which runs under a `Presence` ancestor when the element unmounts (the build makes it motion's
-*    `AnimatePresence`). Each state is a set of values or the name of one of the preset's
-*    `variants`, and `layout` animates the element's own size and position as they change.
-* Each takes only its own fields. `motion/convert` rewrites a preset from one to the other, and a
-* link's `{ override: { runtime: 'css' } }` converts the source's preset as it reads
-* (`motion-convert.ts`). A CSS preset with neither keyframes nor a state is refused, since it would
-* emit nothing.
-*
-* Each member declares its whole surface, because `strictObject` drops what it doesn't name and does
-* it silently.
+* Named motion implementations use `{ type, value }`. A type owns its payload and execution path;
+* selecting another implementation is an explicit reference override, never an implicit conversion.
+* `runtime` bodies below are the compatibility schema for existing configs and sealed sources.
 */
 const values = z.record(z.string(), z.unknown());
 /**
@@ -36,7 +27,7 @@ const gesture = z.union([
 	z.string(),
 	z.array(z.string())
 ]).optional();
-const RUNTIME = "Which runtime plays the preset, and so which fields apply.";
+const RUNTIME = "Deprecated compatibility format. New presets use type and value.";
 const initial = z.union([
 	values,
 	z.string(),
@@ -171,30 +162,41 @@ const inlineJsMotion = JsMotion.omit({ runtime: true }).extend({ runtime: z.lite
 /** The fields of a JS preset that `motion.create` reads as props, in schema order. The emitter
 *  reads this rather than restating the schema, so a field added here reaches every emitted preset. */
 const jsMotionPropFields = Object.keys(JsMotion.shape).filter((field) => field !== "runtime" && field !== "reducedMotion");
-const convertInput = z.object({
-	path: pathInput("motion"),
-	to: z.enum(["css", "js"]).describe("The runtime to convert the preset to.")
+const legacyType = z.undefined();
+legacyType._zod.toJSONSchema = () => ({ not: {} });
+const LegacyMotion = z.strictObject({
+	...CssMotion.shape,
+	...JsMotion.shape,
+	type: legacyType.optional().describe("Absent for a legacy preset; new presets select their implementation with type."),
+	runtime: z.enum(["css", "js"]).describe(RUNTIME)
+}).superRefine((body, context) => {
+	const legacy = Object.fromEntries(Object.entries(body).filter(([key]) => key !== "type" && !METADATA_KEYS.includes(key)));
+	const parsed = (body.runtime === "css" ? CssMotion : JsMotion).safeParse(legacy);
+	if (!parsed.success) for (const issue of parsed.error.issues) context.addIssue({
+		code: "custom",
+		message: issue.message,
+		path: issue.path
+	});
 });
-/** A real preset converted to the runtime it isn't, so the example runs; none when there is none. */
-const convertExample = ({ config }) => {
-	for (const preset of config.list("motion")) {
-		const body = preset.toJSON();
-		const to = body.runtime === "js" ? "css" : "js";
-		if (convertMotion({
-			body,
-			to
-		}).refused.length === 0) return {
-			path: preset.path,
-			to
-		};
-	}
-};
 const Motion = defineEntity({
 	kind: "motion",
 	label: "Motion",
 	labelPlural: "Motion presets",
-	fields: z.discriminatedUnion("runtime", [CssMotion, JsMotion]),
+	fields: z.discriminatedUnion("type", [
+		reanimatedMotion,
+		z.strictObject({
+			type: z.literal("css").describe("The animation implementation that reads this preset."),
+			value: cssMotionValue.describe("CSS keyframes and transition/animation longhands; interaction targets belong in component styles."),
+			reducedMotion
+		}),
+		z.strictObject({
+			type: z.literal("motion/react").describe("The animation implementation that reads this preset."),
+			value: JsMotion.omit({ runtime: true }).extend({ transition: motionTransition.optional() }).describe("Motion states, gestures, variants and serializable transitions.")
+		}),
+		LegacyMotion
+	]),
 	rebaseLinkedBody: ({ body, extend }) => {
+		if (body.type !== void 0 || extend.type !== void 0) return body;
 		const to = extend.runtime;
 		if (to !== "css" && to !== "js" || body.runtime === to) return body;
 		return convertMotion({
@@ -204,81 +206,59 @@ const Motion = defineEntity({
 	},
 	layerKeys: {
 		motion: {
-			schema: (declared) => z.union([declared ?? z.union([refSchema, z.string()]), inlineJsMotion], { error: "a layer's `motion` is a preset (`Motion.ref('<path>')`) or a JS preset written in place — `{ \"whileHover\": { \"scale\": 1.05 }, \"transition\": { … } }`, the fields `Motion.item` takes with `runtime: 'js'`. A CSS preset is named with `Motion.item`." }),
+			schema: (declared) => z.union([
+				declared ?? z.union([refSchema, z.string()]),
+				inlineJsMotion,
+				z.literal(false)
+			], { error: "a layer's `motion` is a preset (`Motion.ref('<path>')`) or a JS preset written in place — `{ \"whileHover\": { \"scale\": 1.05 }, \"transition\": { … } }`, the fields `Motion.item` takes with `runtime: 'js'`. A CSS preset is named with `Motion.item`." }),
 			reach: ({ config, value, element }) => {
-				return (config.resolve("motion", String(authoredValue(config, "motion", value)))?.toJSON())?.runtime === "css" && isRef(element) ? "prop" : "none";
+				if (isNativeConfig(config)) return "prop";
+				const preset = config.resolve("motion", String(authoredValue(config, "motion", value)))?.toJSON();
+				if (preset?.type === "react-native-reanimated") throw new Error("No UDS web motion integration for react-native-reanimated. Select a supported preset or disable motion.");
+				return preset && webMotionBody(preset).runtime === "css" && isRef(element) ? "prop" : "none";
 			},
 			propType: "motion"
 		},
 		reducedMotion: {
 			schema: () => z.enum(REDUCED_MOTION_VALUES).describe("How the layer's motion, and the motion inside it, treats the viewer's reduced-motion setting: `'user'` follows the OS, `'always'` reduces, `'never'` plays in full."),
-			reach: () => ({ attribute: REDUCED_MOTION_ATTRIBUTE })
+			reach: ({ config }) => isNativeConfig(config) ? "prop" : { attribute: REDUCED_MOTION_ATTRIBUTE }
 		}
 	},
-	schemas: {
-		/**
-		* A variant name is a string the presets that animate together match by, not a ref, so nothing
-		* cascades it. Renaming one in a single preset's `variants` leaves its own states and every inner
-		* layer that answers it naming the old one, which animates to nothing and says nothing.
-		*/
-		"rename-variant": {
-			input: z.object({
-				path: pathInput("motion"),
-				key: z.string().min(1),
-				to: z.string().min(1)
-			}),
-			readOnly: false,
-			label: "Rename variant",
-			description: "Rename one of a preset's `variants` (`key` → `to`) wherever the name is used: the preset's own `variants` and states (`initial`, `animate`, `exit`, `while*`), and every preset that animates with it, since a root's gestures name the variants its inner layers' presets declare. \"Animates with\" is the presets of the same runtime a component's style rules put on its layers, joined across a component that renders another. Refused when a preset in that set already declares `to`.",
-			scope: "item",
-			title: (entity) => `Rename ${entity} variant`,
-			example: ({ config }) => {
-				for (const preset of config.list("motion")) {
-					const variants = preset.toJSON().variants;
-					const [key] = Object.keys(variants ?? {});
-					if (key !== void 0) return {
-						path: preset.path,
-						key,
-						to: `${key}-renamed`
-					};
-				}
-			},
-			handler: (input, config) => renameMotionVariant(config, {
-				path: String(input.path),
-				from: String(input.key),
-				to: String(input.to),
-				groupOf: (config, preset) => cssMotionVariantGroups(config).find((group) => group.has(preset)) ?? new Set([preset])
-			})
-		},
-		convert: {
-			input: convertInput,
-			readOnly: false,
-			label: "Convert runtime",
-			description: "Rewrite a preset for the other runtime. `to: 'css'` keeps its states and writes its transition as CSS timing, a spring as `{ spring: { … } }`, and drops what CSS has no counterpart for: `layout`, `drag*`, `whileDrag`, a state's `transitionEnd`, and a transition's orchestration (`when`, `delayChildren`, `staggerChildren`). `to: 'js'` does the reverse. Refused when the preset holds something the other runtime can't represent, such as a repeat for CSS or a `linear()` easing for JS. A preset borrowed from a linked system takes `runtime` on the link instead, so it keeps following the source. `convert-plan` lists what would be dropped, approximated or refused.",
-			scope: "item",
-			title: (entity) => `Convert ${entity}`,
-			example: convertExample,
-			handler: (input, config) => convertMotionPreset({
-				config,
-				path: String(input.path),
-				to: input.to
-			})
+	schemas: { 
+	/**
+	* A variant name is a string the presets that animate together match by, not a ref, so nothing
+	* cascades it. Renaming one in a single preset's `variants` leaves its own states and every inner
+	* layer that answers it naming the old one, which animates to nothing and says nothing.
+	*/
+"rename-variant": {
+		input: z.object({
+			path: pathInput("motion"),
+			key: z.string().min(1),
+			to: z.string().min(1)
+		}),
+		readOnly: false,
+		label: "Rename variant",
+		description: "Rename one of a preset's `variants` (`key` → `to`) wherever the name is used: the preset's own `variants` and states (`initial`, `animate`, `exit`, `while*`), and every preset that animates with it, since a root's gestures name the variants its inner layers' presets declare. \"Animates with\" is the presets of the same runtime a component's style rules put on its layers, joined across a component that renders another. Refused when a preset in that set already declares `to`.",
+		scope: "item",
+		title: (entity) => `Rename ${entity} variant`,
+		example: ({ config }) => {
+			for (const preset of config.list("motion")) {
+				const variants = webMotionBody(preset.toJSON()).variants;
+				const [key] = Object.keys(variants ?? {});
+				if (key !== void 0) return {
+					path: preset.path,
+					key,
+					to: `${key}-renamed`
+				};
+			}
 		},
-		"convert-plan": {
-			input: convertInput,
-			readOnly: true,
-			label: "Plan a conversion",
-			description: "What `convert` with the same input would drop, approximate or refuse, field by field, and whether it writes to a link. Writes nothing.",
-			scope: "item",
-			title: (entity) => `Plan converting ${entity}`,
-			example: convertExample,
-			handler: (input, config) => planMotionConversion({
-				config,
-				path: String(input.path),
-				to: input.to
-			})
-		}
-	}
+		handler: (input, config) => renameMotionVariant(config, {
+			path: String(input.path),
+			from: String(input.key),
+			to: String(input.to),
+			groupOf: (config, preset) => cssMotionVariantGroups(config).find((group) => group.has(preset)) ?? new Set([preset])
+		})
+	} }
 });
 //#endregion
 export { JS_ONLY_FIELDS, Motion, inlineJsMotion, jsMotionPropFields };

package/dist/entities/system/css-motion-reach.js

@@ -2,6 +2,7 @@ import { isRef, kindOf, pathOf } from "../../framework/utils/refs.js";
 import { isPlainObject } from "../../framework/utils/field-path.js";
 import { createSliceMemo } from "../../framework/memo.js";
 import { convertMotion } from "./motion-convert.js";
+import { webMotionBody } from "./motion-types.js";
 import { placedMotions, variantGroupsOf } from "./motion-variants.js";
 import { requiredContentLayers } from "./required-content-layers.js";
 //#region src/entities/system/css-motion-reach.ts
@@ -54,7 +55,7 @@ const resolvePlacements = createSliceMemo({
 			for (const entry of Object.values(styles)) for (const [layer, bag] of Object.entries(entry?.layers ?? {})) {
 				const preset = namedPreset(isPlainObject(bag) ? bag.motion : void 0);
 				if (preset === void 0) continue;
-				if ((config.resolve("motion", preset)?.toJSON())?.runtime !== "css" || !(layer in layers)) continue;
+				if (motionBodyAt(config, preset)?.runtime !== "css" || !(layer in layers)) continue;
 				const key = `${component.path}\u0000${layer}\u0000${preset}`;
 				if (seen.has(key)) continue;
 				seen.add(key);
@@ -96,7 +97,7 @@ const resolveExits = createSliceMemo({
 			for (const entry of Object.values(styles)) for (const [layer, bag] of Object.entries(entry?.layers ?? {})) {
 				const preset = namedPreset(isPlainObject(bag) ? bag.motion : void 0);
 				if (preset === void 0) continue;
-				const body = config.resolve("motion", preset)?.toJSON();
+				const body = motionBodyAt(config, preset);
 				if (body?.runtime !== "css" || body.exit === void 0) continue;
 				unmountable ??= unmountableLayers(config, component.path);
 				if (!unmountable.has(layer)) continue;
@@ -191,5 +192,9 @@ const runtimeSet = (body) => {
 function linkedMotionSwaps(config) {
 	return resolveLinkedSwaps(config);
 }
+function motionBodyAt(config, path) {
+	const body = config.resolve("motion", path)?.toJSON();
+	return body ? webMotionBody(body) : void 0;
+}
 //#endregion
 export { cssMotionExitsOnUnmount, cssMotionPlacements, cssMotionVariantGroups, linkedMotionSwaps, swappedLinkJsMotions };

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

@@ -1,6 +1,7 @@
 import { isPlainObject } from "../../framework/utils/field-path.js";
 import { createSliceMemo } from "../../framework/memo.js";
 import { cssEasing, easingCurve, linearEasing, springTiming } from "./css-timing.js";
+import { webMotionBody } from "./motion-types.js";
 import { stateVariantNames } from "./motion-variants.js";
 import { resolvePresetValue } from "./motion-presets.js";
 //#region src/entities/system/css-motion.ts
@@ -394,8 +395,8 @@ const resolveCssMotionPresets = createSliceMemo({
 			tokens.push(entry);
 		};
 		for (const preset of config.list("motion")) {
-			const body = preset.toJSON();
-			if (body.runtime !== "css") continue;
+			const body = webMotionBody(preset.toJSON());
+			if (preset.toJSON().runtime !== "css") continue;
 			if (!hasStates(body)) continue;
 			lists.push(...keyframeLists({
 				preset: preset.path,
@@ -428,7 +429,7 @@ function cssMotionTransitions(config) {
 */
 function cssMotionExitDuration({ config, preset }) {
 	const transitions = cssMotionTransitions(config)[preset];
-	const exit = (config.resolve("motion", preset)?.toJSON())?.exit;
+	const exit = motionBodyAt(config, preset)?.exit;
 	if (!transitions || exit === void 0) return 0;
 	const timings = isPlainObject(exit) ? [transitions.states.exit ?? {}] : stateVariantNames(exit).map((name) => transitions.variants[name] ?? {});
 	return Math.max(0, ...timings.flatMap((group) => Object.values(group).map((timing) => (milliseconds(timing.duration) ?? 0) + (milliseconds(timing.delay) ?? 0))));
@@ -441,5 +442,9 @@ function cssMotionKeyframeLists(config) {
 function cssMotionTokens(config) {
 	return resolveCssMotionPresets(config).tokens;
 }
+function motionBodyAt(config, path) {
+	const body = config.resolve("motion", path)?.toJSON();
+	return body ? webMotionBody(body) : void 0;
+}
 //#endregion
 export { CSS_MOTION_STATES, cssMotionExitDuration, cssMotionKeyframeLists, cssMotionTokens, cssMotionTransitions };

package/dist/entities/system/motion-convert.d.ts

@@ -1,4 +1,23 @@
 //#region src/entities/system/motion-convert.d.ts
+/**
+ * A motion preset rewritten for the other runtime: a JS preset as the CSS preset that plays closest
+ * to it, and a CSS preset as a JS one. Retained only for existing links that set a borrowed
+ * legacy preset's runtime. Explicit type/value presets never enter this compatibility path.
+ *
+ * The states (`variants`, `initial`, `animate`, `exit`, `while*`) mean the same in both runtimes, so
+ * they carry over as they are, and what changes is the timing:
+ *
+ *  - JS → CSS. A spring stays a spring (`easing: { spring: { … } }`), a tween's `duration` becomes a
+ *    CSS time, its `ease` a CSS easing, and a value's own transition goes under `properties`. What CSS
+ *    has no counterpart for is dropped: `layout`, `drag*` and `whileDrag`, a state's `transitionEnd`,
+ *    and a transition's orchestration (`when`, `delayChildren`, `staggerChildren`). A repeat is refused,
+ *    since a transition plays once.
+ *  - CSS → JS. The same in reverse. An easing `motion/react` can't read (`linear()`, `steps()`, a
+ *    `var()`) is refused, and so are `@keyframes` that aren't one list of values per property.
+ *
+ * What a conversion approximates is played differently than written: a list of easings, one per
+ * keyframe, and a keyframe list CSS plays only as its last value.
+ */
 /** One field a conversion leaves out, plays differently, or can't carry over. */
 interface MotionConversionNote {
   /** Where the field sits, as a dotted path: `transition.opacity.repeat`. */
@@ -25,18 +44,5 @@ declare function convertMotion({
   body: Body;
   to: MotionRuntime;
 }): MotionConversion;
-/** What `motion/convert-plan` answers: the conversion `motion/convert` would make, and where it
- *  would write it. */
-interface MotionConversionPlan {
-  readonly path: string;
-  readonly to: MotionRuntime;
-  /** The linked system the preset is borrowed from, whose link the conversion is written to. */
-  readonly link?: string;
-  readonly dropped: readonly MotionConversionNote[];
-  readonly approximated: readonly MotionConversionNote[];
-  readonly refused: readonly MotionConversionNote[];
-  /** Why the conversion would be refused. `undefined` when it would go through. */
-  readonly blocked?: string;
-}
 //#endregion
-export { MotionConversion, MotionConversionNote, MotionConversionPlan, MotionRuntime, convertMotion };
+export { MotionConversion, MotionConversionNote, MotionRuntime, convertMotion };

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

@@ -1,10 +1,28 @@
-import { reject } from "../../framework/rejection.js";
 import { isRef } from "../../framework/utils/refs.js";
 import { isPlainObject } from "../../framework/utils/field-path.js";
 import { MOTION_EASING_NAMES, bezierPoints, motionOfCssKeyword } from "./easings.js";
 import { cssEasing } from "./css-timing.js";
 import { JS_ONLY_FIELDS } from "./Motion.js";
 //#region src/entities/system/motion-convert.ts
+/**
+* A motion preset rewritten for the other runtime: a JS preset as the CSS preset that plays closest
+* to it, and a CSS preset as a JS one. Retained only for existing links that set a borrowed
+* legacy preset's runtime. Explicit type/value presets never enter this compatibility path.
+*
+* The states (`variants`, `initial`, `animate`, `exit`, `while*`) mean the same in both runtimes, so
+* they carry over as they are, and what changes is the timing:
+*
+*  - JS → CSS. A spring stays a spring (`easing: { spring: { … } }`), a tween's `duration` becomes a
+*    CSS time, its `ease` a CSS easing, and a value's own transition goes under `properties`. What CSS
+*    has no counterpart for is dropped: `layout`, `drag*` and `whileDrag`, a state's `transitionEnd`,
+*    and a transition's orchestration (`when`, `delayChildren`, `staggerChildren`). A repeat is refused,
+*    since a transition plays once.
+*  - CSS → JS. The same in reverse. An easing `motion/react` can't read (`linear()`, `steps()`, a
+*    `var()`) is refused, and so are `@keyframes` that aren't one list of values per property.
+*
+* What a conversion approximates is played differently than written: a list of easings, one per
+* keyframe, and a keyframe list CSS plays only as its last value.
+*/
 /** The states both runtimes share. */
 const STATES = [
 	"initial",
@@ -53,6 +71,13 @@ var Notes = class {
 /** `body` as the `to` runtime takes it, with what the conversion left out, changed or refused. */
 function convertMotion({ body, to }) {
 	const notes = new Notes();
+	if (body.type !== void 0) {
+		notes.refused.push({
+			at: "type",
+			reason: "Typed presets use explicit replacement refs; automatic conversion is a legacy operation."
+		});
+		return { ...notes };
+	}
 	if (body.runtime === to) return {
 		body,
 		...notes
@@ -457,61 +482,5 @@ function offsetOf(offset) {
 	return value >= 0 && value <= 1 ? value : void 0;
 }
 const camelCase = (property) => property.startsWith("--") ? property : property.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
-/** What converting the preset at `path` would do, without doing it. */
-function planMotionConversion({ config, path, to }) {
-	const body = config.resolve("motion", path)?.toJSON();
-	if (!body) reject("NOT_FOUND", `There is no motion preset "${path}".`);
-	const link = config.borrowedFrom("motion", path);
-	const conversion = convertMotion({
-		body,
-		to
-	});
-	return {
-		path,
-		to,
-		...link === void 0 ? {} : { link },
-		dropped: conversion.dropped,
-		approximated: conversion.approximated,
-		refused: conversion.refused,
-		...conversion.refused.length > 0 ? { blocked: refusal({
-			path,
-			to,
-			refused: conversion.refused
-		}) } : {}
-	};
-}
-/**
-* The preset at `path` rewritten for `to`. A preset of this config's own is replaced by its
-* conversion. One borrowed from a linked system takes `runtime: to` on the link, which converts the
-* source's preset as it reads, so it keeps following what the source changes.
-*/
-function convertMotionPreset({ config, path, to }) {
-	const plan = planMotionConversion({
-		config,
-		path,
-		to
-	});
-	if (plan.blocked !== void 0) reject("UNSUPPORTED", plan.blocked);
-	const body = config.resolve("motion", path)?.toJSON();
-	if (body.runtime === to) return config;
-	if (plan.link !== void 0) return config.apply({
-		kind: "motion",
-		operation: "update",
-		path,
-		data: { runtime: to }
-	});
-	return config.apply({
-		kind: "motion",
-		operation: "replace",
-		path,
-		data: convertMotion({
-			body,
-			to
-		}).body
-	});
-}
-function refusal({ path, to, refused }) {
-	return `"${path}" can't be converted to ${to === "css" ? "CSS" : "JS"}. ${refused.map((note) => `\`${note.at}\`: ${note.reason}`).join(" ")}`;
-}
 //#endregion
-export { convertMotion, convertMotionPreset, planMotionConversion };
+export { convertMotion };

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

@@ -3,6 +3,7 @@ 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 { webMotionBody } from "./motion-types.js";
 import { inlineMotions } from "./motion-variants.js";
 import { isReducedMotion } from "./reduced-motion.js";
 import { jsMotionPropFields } from "./Motion.js";
@@ -221,8 +222,8 @@ const resolveJsMotionPresets = createSliceMemo({
 		const inline = {};
 		const tokens = [];
 		for (const preset of config.list("motion")) {
-			const body = preset.toJSON();
-			if (body.runtime !== "js") continue;
+			const body = webMotionBody(preset.toJSON());
+			if (body.type !== "motion/react") continue;
 			presets[preset.path] = resolveBody(config, preset.path, body, tokens);
 		}
 		for (const entry of inlineMotions(config).valid) inline[entry.id] = resolveBody(config, entry.id, entry.body, tokens);
@@ -267,7 +268,7 @@ const presetReducedMotions = createSliceMemo({
 	compute: (config) => {
 		const out = {};
 		for (const preset of config.list("motion")) {
-			const { reducedMotion } = preset.toJSON();
+			const { reducedMotion } = webMotionBody(preset.toJSON());
 			if (isReducedMotion(reducedMotion)) out[preset.path] = reducedMotion;
 		}
 		for (const entry of inlineMotions(config).valid) if (isReducedMotion(entry.body.reducedMotion)) out[entry.id] = entry.body.reducedMotion;

package/dist/entities/system/motion-types.d.ts

@@ -0,0 +1,7 @@
+import { z } from "zod";
+
+//#region src/entities/system/motion-types.d.ts
+/** Read a typed preset's payload without translating between implementations. */
+declare function webMotionBody(body: Record<string, unknown>): Record<string, unknown>;
+//#endregion
+export { webMotionBody };

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

@@ -0,0 +1,132 @@
+import { refTo } from "../../framework/utils/refs.js";
+import { isCssProperty } from "../../css/values.js";
+import { reanimatedStyle } from "./reanimated-motion.js";
+import { z } from "zod";
+//#region src/entities/system/motion-types.ts
+const number = z.union([z.number(), refTo("token")]);
+const positive = z.union([z.number().positive(), refTo("token")]);
+const nonnegative = z.union([z.number().nonnegative(), refTo("token")]);
+/** Compatibility for the initial hook-based experiment; new presets use reanimatedStyle. */
+const legacyReanimatedValue = z.discriminatedUnion("method", [z.strictObject({
+	method: z.literal("withTiming"),
+	config: z.strictObject({ duration: nonnegative.optional() })
+}), z.strictObject({
+	method: z.literal("withSpring"),
+	config: z.strictObject({
+		stiffness: positive.optional(),
+		damping: nonnegative.optional(),
+		mass: positive.optional(),
+		overshootClamping: z.boolean().optional(),
+		energyThreshold: positive.optional(),
+		velocity: number.optional()
+	})
+})]);
+const reanimatedMotion = z.strictObject({
+	type: z.literal("react-native-reanimated").describe("The animation implementation that reads this preset."),
+	value: z.union([reanimatedStyle, legacyReanimatedValue]).describe("Serializable Reanimated transitions and keyframes, or a legacy timing/spring preset."),
+	reducedMotion: z.enum([
+		"user",
+		"always",
+		"never"
+	]).optional().describe("Whether native motion follows the OS preference, is always reduced, or is never reduced.")
+});
+/** CSS keyframes and CSS animation longhands. No Framer gesture or transition vocabulary. */
+const cssMotionValue = z.strictObject({
+	keyframes: z.record(z.string(), z.record(z.string().refine((key) => isCssProperty(key) || key.startsWith("--"), "Expected a CSS property; use translate instead of x/y."), z.union([
+		z.string(),
+		z.number(),
+		refTo("token")
+	]))).optional(),
+	transitionProperty: z.string().optional(),
+	transitionDuration: z.string().optional(),
+	transitionDelay: z.string().optional(),
+	transitionTimingFunction: z.string().optional(),
+	transitionBehavior: z.enum(["normal", "allow-discrete"]).optional(),
+	animationDuration: z.string().optional(),
+	animationDelay: z.string().optional(),
+	animationTimingFunction: z.string().optional(),
+	animationIterationCount: z.union([z.number(), z.literal("infinite")]).optional(),
+	animationDirection: z.enum([
+		"normal",
+		"reverse",
+		"alternate",
+		"alternate-reverse"
+	]).optional(),
+	animationFillMode: z.enum([
+		"none",
+		"forwards",
+		"backwards",
+		"both"
+	]).optional()
+});
+/** Read a typed preset's payload without translating between implementations. */
+function webMotionBody(body) {
+	if (body.type === void 0) return {
+		...body,
+		type: body.runtime === "js" ? "motion/react" : body.runtime
+	};
+	return {
+		...body.value,
+		type: body.type,
+		runtime: body.type === "motion/react" ? "js" : body.type,
+		...body.reducedMotion === void 0 ? {} : { reducedMotion: body.reducedMotion }
+	};
+}
+/** Serializable subset of Motion's transition options, with seconds for time values. */
+const transitionOptions = z.strictObject({
+	type: z.union([z.enum([
+		"tween",
+		"spring",
+		"inertia"
+	]), z.literal(false)]).optional(),
+	duration: nonnegative.optional(),
+	delay: number.optional(),
+	ease: z.union([
+		z.string(),
+		z.tuple([
+			z.number(),
+			z.number(),
+			z.number(),
+			z.number()
+		]),
+		refTo("token"),
+		z.array(z.union([z.string(), z.tuple([
+			z.number(),
+			z.number(),
+			z.number(),
+			z.number()
+		])]))
+	]).optional(),
+	times: z.array(z.number()).optional(),
+	repeat: nonnegative.optional(),
+	repeatType: z.enum([
+		"loop",
+		"reverse",
+		"mirror"
+	]).optional(),
+	repeatDelay: nonnegative.optional(),
+	stiffness: positive.optional(),
+	damping: nonnegative.optional(),
+	mass: positive.optional(),
+	velocity: number.optional(),
+	bounce: number.optional(),
+	visualDuration: nonnegative.optional(),
+	restSpeed: nonnegative.optional(),
+	restDelta: nonnegative.optional(),
+	when: z.enum(["beforeChildren", "afterChildren"]).optional(),
+	delayChildren: number.optional(),
+	staggerChildren: number.optional(),
+	staggerDirection: z.union([z.literal(1), z.literal(-1)]).optional()
+});
+const motionTransition = transitionOptions.loose().superRefine((value, ctx) => {
+	for (const [key, options] of Object.entries(value)) {
+		if (key in transitionOptions.shape) continue;
+		if (!transitionOptions.safeParse(options).success) ctx.addIssue({
+			code: "custom",
+			path: [key],
+			message: "Expected per-property Motion transition options."
+		});
+	}
+});
+//#endregion
+export { cssMotionValue, motionTransition, reanimatedMotion, webMotionBody };