@yahoo/uds-create-config 5.19.1 → 5.21.0

package/dist/entities/system/Motion.js

@@ -1,23 +1,29 @@
+import { isRef, refSchema } from "../../framework/utils/refs.js";
 import { pathInput } from "../../framework/schemas.js";
 import { defineEntity } from "../../framework/defineEntity.js";
+import { authoredValue } from "../../framework/projections.js";
+import { convertMotion, convertMotionPreset, planMotionConversion } from "./motion-convert.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` so the payload is
-* coupled to how it animates, not loosely optional:
-*  - `css` → `keyframes` REQUIRED (codegen emits `@keyframes` from them); a css preset with
-*    no keyframes — which used to validate and silently emit nothing — is now rejected.
-*  - `js`  → no keyframes; carries the interaction state the client drives, `exit` included,
+* 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 an `AnimatePresence` ancestor when the element unmounts. 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.
-* Illegal cross-runtime mixes (a css preset with `animate`, a js preset with `keyframes`)
-* can't be represented — each member is strict.
+* 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: the first version declared three js fields, so every gesture preset in a real system
-* lost `whileHover`/`whileTap`/`drag` on the way in and animated nothing.
+* Each member declares its whole surface, because `strictObject` drops what it doesn't name and does
+* it silently.
 */
 const values = z.record(z.string(), z.unknown());
 /**
@@ -31,32 +37,20 @@ const gesture = z.union([
 	z.array(z.string())
 ]).optional();
 const RUNTIME = "Which runtime plays the preset, and so which fields apply.";
-const CssMotion = z.strictObject({
-	runtime: z.literal("css").describe(RUNTIME),
-	keyframes: z.record(z.string(), z.record(z.string(), z.unknown())).describe("The CSS keyframes, keyed by offset (`from`, `50%`, `to`)."),
-	duration: z.string().optional().describe("The CSS `animation-duration`, such as `'4s'`."),
-	delay: z.string().optional().describe("The CSS `animation-delay`."),
-	timingFunction: z.string().optional().describe("The CSS `animation-timing-function`."),
-	iterationCount: z.union([z.string(), z.number()]).optional().describe("The CSS `animation-iteration-count`, or `'infinite'`."),
-	direction: z.string().optional().describe("The CSS `animation-direction`."),
-	fillMode: z.string().optional().describe("The CSS `animation-fill-mode`.")
-});
-const JsMotion = z.strictObject({
-	runtime: z.literal("js").describe(RUNTIME),
-	initial: z.union([
-		values,
-		z.string(),
-		z.array(z.string()),
-		z.literal(false)
-	]).optional().describe("The starting values, as `motion/react` reads them, or `false` to start at `animate` without playing on mount."),
-	animate: gesture.describe("The values to animate to."),
-	exit: gesture.describe("The values to animate to as the element leaves."),
-	transition: values.optional().describe("How the animation moves, such as a spring."),
-	whileHover: gesture.describe("Values held while the element is hovered."),
-	whileTap: gesture.describe("Values held while the element is pressed."),
-	whileFocus: gesture.describe("Values held while the element has focus."),
+const initial = z.union([
+	values,
+	z.string(),
+	z.array(z.string()),
+	z.literal(false)
+]).optional().describe("The starting values, as `motion/react` reads them, or `false` to start at `animate` without playing on mount.");
+const animate = gesture.describe("The values to animate to.");
+const exit = gesture.describe("The values to animate to as the element leaves.");
+const whileHover = gesture.describe("Values held while the element is hovered.");
+const whileTap = gesture.describe("Values held while the element is pressed.");
+const whileFocus = gesture.describe("Values held while the element has focus.");
+const variants = z.record(z.string(), values).optional().describe("Named states, each a set of values, that `initial`, `animate`, `exit` and the gestures name.");
+const jsOnly = {
 	whileDrag: gesture.describe("Values held while the element is dragged."),
-	variants: z.record(z.string(), values).optional().describe("Named states, each a set of values, that `initial`, `animate`, `exit` and the gestures name."),
 	layout: z.union([
 		z.boolean(),
 		z.literal("position"),
@@ -66,6 +60,106 @@ const JsMotion = z.strictObject({
 	drag: z.union([z.boolean(), z.string()]).optional().describe("Whether, and along which axis, the element can be dragged."),
 	dragConstraints: z.record(z.string(), z.number()).optional().describe("The box a drag stays within."),
 	dragElastic: z.number().optional().describe("How far past its constraints a drag can stretch.")
+};
+/** The fields only a JS preset has. `layout` measures the element across a render and `drag*`
+*  follows the pointer, and CSS has neither, so a conversion to CSS drops them. */
+const JS_ONLY_FIELDS = Object.keys(jsOnly);
+/**
+* A CSS time: `'150ms'`, `'0.2s'`, or a time token. A bare number is refused, since `motion/react`
+* reads one as seconds and CSS has no unitless time.
+*/
+const cssTime = z.union([z.string(), refSchema]);
+/** A spring's number, or a token that holds one. */
+const springNumber = z.union([z.number(), refSchema]);
+const springEasing = z.strictObject({ spring: z.strictObject({
+	stiffness: springNumber.optional().describe("The spring's stiffness."),
+	damping: springNumber.optional().describe("The spring's damping."),
+	mass: springNumber.optional().describe("The spring's mass."),
+	bounce: springNumber.optional().describe("The spring's bounce, with `duration` or `visualDuration`."),
+	duration: cssTime.optional().describe("With `bounce`, how long the spring takes to settle."),
+	visualDuration: cssTime.optional().describe("With `bounce`, how long the spring takes to reach its target visually.")
+}) }).describe("A spring, which the stylesheet plays as a `linear()` curve sampled from it. Its parameters stay as written, so a spring token's value reaches it and a conversion to JS keeps it a spring.");
+const cssTiming = z.strictObject({
+	duration: cssTime.optional().describe("How long a change takes: `'150ms'`, `'0.2s'`, or a time token. A spring easing sets its own unless this is given."),
+	delay: cssTime.optional().describe("How long a change waits before it starts."),
+	easing: z.union([
+		z.string(),
+		refSchema,
+		springEasing
+	]).optional().describe("The CSS easing (`'ease-out'`, `'cubic-bezier(…)'`), an easing token, or a spring (`{ spring: { stiffness, damping } }`)."),
+	times: z.array(z.number()).optional().describe("Where each keyframe of a value written as a list sits, from 0 to 1, as `motion/react`'s `times`.")
+});
+/**
+* How a CSS preset's states move: one timing for every value, and a value's own under `properties`
+* (`properties: { opacity: { … } }`). A state's own `transition` replaces the preset's for the values
+* it sets.
+*/
+const cssTransition = cssTiming.extend({ properties: z.record(z.string(), cssTiming).optional().describe("A value's own timing, by the value's name (`opacity`, `scale`).") }).describe("How the states move.");
+/**
+* A CSS preset's state: values, with an optional `transition` of its own in the CSS form. A JS
+* state's `transitionEnd` sets values once its animation ends, which a stylesheet can't, so a CSS
+* state refuses it.
+*/
+const cssValues = z.looseObject({ transition: cssTransition.optional() }).refine((state) => !("transitionEnd" in state), {
+	message: "A CSS state has no `transitionEnd`: a stylesheet can't set values once a transition ends.",
+	path: ["transitionEnd"]
+});
+const cssGesture = z.union([
+	cssValues,
+	z.string(),
+	z.array(z.string())
+]).optional();
+const KEYFRAMES_OR_STATE = [
+	"keyframes",
+	"initial",
+	"animate",
+	"exit",
+	"whileHover",
+	"whileTap",
+	"whileFocus",
+	"variants"
+];
+const reducedMotion = z.enum(REDUCED_MOTION_VALUES).optional().describe("How the preset treats the viewer's reduced-motion setting: `'user'` follows the OS, `'always'` reduces, `'never'` plays in full. A layer's own `reducedMotion` in a style rule wins over it.");
+const CssMotion = z.strictObject({
+	runtime: z.literal("css").describe(RUNTIME),
+	keyframes: z.record(z.string(), z.record(z.string(), z.unknown())).optional().describe("The CSS keyframes, keyed by offset (`from`, `50%`, `to`)."),
+	duration: z.string().optional().describe("The keyframes' CSS `animation-duration`, such as `'4s'`."),
+	delay: z.string().optional().describe("The keyframes' CSS `animation-delay`."),
+	timingFunction: z.string().optional().describe("The keyframes' CSS `animation-timing-function`."),
+	iterationCount: z.union([z.string(), z.number()]).optional().describe("The keyframes' CSS `animation-iteration-count`, or `'infinite'`."),
+	direction: z.string().optional().describe("The keyframes' CSS `animation-direction`."),
+	fillMode: z.string().optional().describe("The keyframes' CSS `animation-fill-mode`."),
+	initial: z.union([
+		cssValues,
+		z.string(),
+		z.array(z.string()),
+		z.literal(false)
+	]).optional().describe(initial.description ?? ""),
+	animate: cssGesture.describe(animate.description ?? ""),
+	exit: cssGesture.describe(exit.description ?? ""),
+	transition: cssTransition.optional(),
+	whileHover: cssGesture.describe(whileHover.description ?? ""),
+	whileTap: cssGesture.describe(whileTap.description ?? ""),
+	whileFocus: cssGesture.describe(whileFocus.description ?? ""),
+	variants: z.record(z.string(), cssValues).optional().describe(variants.description ?? ""),
+	reducedMotion
+}).refine((body) => KEYFRAMES_OR_STATE.some((field) => body[field] !== void 0), { message: "A CSS preset needs `keyframes`, or a state to animate (`animate`, `variants`, `whileHover` and the rest)." });
+const JsMotion = z.strictObject({
+	runtime: z.literal("js").describe(RUNTIME),
+	initial,
+	animate,
+	exit,
+	transition: values.optional().describe("How the animation moves, such as a spring."),
+	whileHover,
+	whileTap,
+	whileFocus,
+	whileDrag: jsOnly.whileDrag,
+	variants,
+	layout: jsOnly.layout,
+	drag: jsOnly.drag,
+	dragConstraints: jsOnly.dragConstraints,
+	dragElastic: jsOnly.dragElastic,
+	reducedMotion
 });
 /**
 * A JS preset written in place, as a style rule's `motion` on a layer rather than a `Motion.ref`: the
@@ -76,46 +170,115 @@ const JsMotion = z.strictObject({
 const inlineJsMotion = JsMotion.omit({ runtime: true }).extend({ runtime: z.literal("js").optional().describe(RUNTIME) }).describe("A JS motion preset written in place: `initial`, `animate`, `while*`, `variants`, `transition` and the rest, as `Motion.item` takes them with `runtime: 'js'`.");
 /** 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");
+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.")
+});
+/** 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]),
-	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 JS 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 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`
-				};
-			}
+	rebaseLinkedBody: ({ body, extend }) => {
+		const to = extend.runtime;
+		if (to !== "css" && to !== "js" || body.runtime === to) return body;
+		return convertMotion({
+			body,
+			to
+		}).body ?? body;
+	},
+	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`." }),
+			reach: ({ config, value, element }) => {
+				return (config.resolve("motion", String(authoredValue(config, "motion", value)))?.toJSON())?.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 })
+		}
+	},
+	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
+			})
 		},
-		handler: (input, config) => renameMotionVariant(config, {
-			path: String(input.path),
-			from: String(input.key),
-			to: String(input.to)
-		})
-	} }
+		"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
+			})
+		}
+	}
 });
 //#endregion
-export { Motion, inlineJsMotion, jsMotionPropFields };
+export { JS_ONLY_FIELDS, Motion, inlineJsMotion, jsMotionPropFields };

package/dist/entities/system/css-motion-reach.d.ts

@@ -0,0 +1,62 @@
+import { Config } from "../../framework/Config.js";
+import { MotionConversionNote, MotionRuntime } from "./motion-convert.js";
+
+//#region src/entities/system/css-motion-reach.d.ts
+/** A CSS preset a style rule puts on a layer. */
+interface CssMotionPlacement {
+  readonly component: string;
+  readonly layer: string;
+  readonly preset: string;
+  /**
+   * Whether the layer's element can wear the preset's class: a plain element or a component. A
+   * package's export is handed nothing.
+   */
+  readonly wearable: boolean;
+}
+/** A CSS preset with an `exit` on a layer that can leave the DOM, where CSS can't play it. */
+interface CssMotionExitOnUnmount {
+  readonly component: string;
+  readonly layer: string;
+  readonly preset: string;
+}
+/** A component of a link that swaps presets to CSS, still animating a layer through a JS preset. */
+interface SwappedLinkJsMotion {
+  /** The link's slug. */
+  readonly link: string;
+  readonly component: string;
+  readonly layer: string;
+  readonly preset: string;
+}
+/** A link that sets a borrowed preset's `runtime`, with what converting the source's preset does. */
+interface LinkedMotionSwap {
+  /** The link's slug. */
+  readonly link: string;
+  readonly preset: string;
+  readonly to: MotionRuntime;
+  readonly dropped: readonly MotionConversionNote[];
+  readonly approximated: readonly MotionConversionNote[];
+  /** What the conversion can't represent. A swap with any is refused, so the preset isn't borrowed. */
+  readonly refused: readonly MotionConversionNote[];
+}
+/** Every CSS preset a style rule puts on a layer, and whether the layer's element can wear it. */
+declare function cssMotionPlacements(config: Config): readonly CssMotionPlacement[];
+/**
+ * The CSS presets that share variant names: the ones a component's style rules put on its layers,
+ * joined across a component that renders another, as the JS presets' groups are. A preset passes the
+ * variants its states name only to presets in its own group.
+ */
+declare const cssMotionVariantGroups: (config: Config) => readonly ReadonlySet<string>[];
+/** Every CSS preset with an `exit` that a style rule puts on a layer that can unmount. */
+declare function cssMotionExitsOnUnmount(config: Config): readonly CssMotionExitOnUnmount[];
+/**
+ * Every layer of a linked component that animates through a JS preset, on a link that swaps presets
+ * to CSS. A swap meant to leave `motion/react` out of the bundle keeps it for these.
+ */
+declare function swappedLinkJsMotions(config: Config): readonly SwappedLinkJsMotion[];
+/**
+ * Every borrowed preset a link swaps to the other runtime (`options.motion[path].override.runtime`),
+ * with what converting the source's preset drops, approximates or refuses, for the build to report.
+ */
+declare function linkedMotionSwaps(config: Config): readonly LinkedMotionSwap[];
+//#endregion
+export { CssMotionExitOnUnmount, CssMotionPlacement, LinkedMotionSwap, SwappedLinkJsMotion, cssMotionExitsOnUnmount, cssMotionPlacements, cssMotionVariantGroups, linkedMotionSwaps, swappedLinkJsMotions };

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

@@ -0,0 +1,195 @@
+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 { placedMotions, variantGroupsOf } from "./motion-variants.js";
+import { requiredContentLayers } from "./required-content-layers.js";
+//#region src/entities/system/css-motion-reach.ts
+/**
+* The layers a component renders only under a condition: an anatomy node with a `visible`, or one
+* inside such a node, and a layer whose required content may be missing.
+*/
+function unmountableLayers(config, path) {
+	const { anatomy = {} } = config.resolve("component", path)?.toJSON() ?? {};
+	const parent = /* @__PURE__ */ new Map();
+	for (const [key, node] of Object.entries(anatomy)) {
+		const children = isPlainObject(node) ? node.children : void 0;
+		for (const child of Array.isArray(children) ? children : []) if (typeof child === "string") parent.set(child, key);
+	}
+	const gated = (key) => {
+		for (let at = key; at !== void 0; at = parent.get(at)) {
+			const node = anatomy[at];
+			if (isPlainObject(node) && node.visible !== void 0) return true;
+		}
+		return false;
+	};
+	const out = new Set(requiredContentLayers(config, path).keys());
+	for (const [key, node] of Object.entries(anatomy)) {
+		const element = isPlainObject(node) ? node.element : void 0;
+		if (isRef(element) && kindOf(element) === "layer" && gated(key)) out.add(pathOf(element));
+	}
+	return out;
+}
+/** The preset a layer bag's `motion` names, by path. */
+function namedPreset(value) {
+	if (isRef(value)) return pathOf(value);
+	return typeof value === "string" ? value : void 0;
+}
+/**
+* Whether a layer's element wears a CSS preset's class: a plain element through its class list, and a
+* component through the `motion` value its layer is handed, which the component's style-prop runtime
+* makes the class whether or not it declares a `motion` prop. A package's export is handed nothing.
+*/
+function wears(element) {
+	if (typeof element === "string") return true;
+	return isRef(element) && kindOf(element) === "component";
+}
+const resolvePlacements = createSliceMemo({
+	kinds: ["component", "motion"],
+	compute: (config) => {
+		const out = [];
+		const seen = /* @__PURE__ */ new Set();
+		for (const component of config.list("component")) {
+			const { layers = {}, styles = {} } = component.toJSON();
+			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;
+				const key = `${component.path}\u0000${layer}\u0000${preset}`;
+				if (seen.has(key)) continue;
+				seen.add(key);
+				out.push({
+					component: component.path,
+					layer,
+					preset,
+					wearable: wears(layers[layer])
+				});
+			}
+		}
+		return out;
+	}
+});
+/** Every CSS preset a style rule puts on a layer, and whether the layer's element can wear it. */
+function cssMotionPlacements(config) {
+	return resolvePlacements(config);
+}
+/**
+* The CSS presets that share variant names: the ones a component's style rules put on its layers,
+* joined across a component that renders another, as the JS presets' groups are. A preset passes the
+* variants its states name only to presets in its own group.
+*/
+const cssMotionVariantGroups = createSliceMemo({
+	kinds: ["component", "motion"],
+	compute: (config) => variantGroupsOf({
+		config,
+		placements: cssMotionPlacements(config)
+	})
+});
+const resolveExits = createSliceMemo({
+	kinds: ["component", "motion"],
+	compute: (config) => {
+		const out = [];
+		const seen = /* @__PURE__ */ new Set();
+		for (const component of config.list("component")) {
+			const { styles = {} } = component.toJSON();
+			let unmountable;
+			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();
+				if (body?.runtime !== "css" || body.exit === void 0) continue;
+				unmountable ??= unmountableLayers(config, component.path);
+				if (!unmountable.has(layer)) continue;
+				const key = `${component.path}\u0000${layer}\u0000${preset}`;
+				if (seen.has(key)) continue;
+				seen.add(key);
+				out.push({
+					component: component.path,
+					layer,
+					preset
+				});
+			}
+		}
+		return out;
+	}
+});
+/** Every CSS preset with an `exit` that a style rule puts on a layer that can unmount. */
+function cssMotionExitsOnUnmount(config) {
+	return resolveExits(config);
+}
+/** The links that swap at least one borrowed JS preset to CSS. */
+function swappingLinks(config) {
+	const out = /* @__PURE__ */ new Set();
+	for (const preset of config.list("motion")) {
+		const overlay = config.localOverlay("motion", preset.path);
+		if (overlay?.fields.runtime === "css" && overlay.source?.runtime === "js") out.add(overlay.slug);
+	}
+	return out;
+}
+const resolveSwapped = createSliceMemo({
+	kinds: [
+		"component",
+		"motion",
+		"linked-system"
+	],
+	compute: (config) => {
+		const links = swappingLinks(config);
+		if (links.size === 0) return [];
+		return placedMotions(config).flatMap((entry) => {
+			const link = config.borrowedFrom("component", entry.component);
+			if (link === void 0 || !links.has(link)) return [];
+			return [{
+				link,
+				...entry
+			}];
+		});
+	}
+});
+/**
+* Every layer of a linked component that animates through a JS preset, on a link that swaps presets
+* to CSS. A swap meant to leave `motion/react` out of the bundle keeps it for these.
+*/
+function swappedLinkJsMotions(config) {
+	return resolveSwapped(config);
+}
+const resolveLinkedSwaps = createSliceMemo({
+	kinds: ["linked-system", "motion"],
+	compute: (config) => {
+		const out = [];
+		for (const link of config.list("linked-system")) {
+			const { options } = link.toJSON();
+			for (const [preset, entry] of Object.entries(options?.motion ?? {})) {
+				if (!isPlainObject(entry)) continue;
+				const to = runtimeSet(entry.override) ?? runtimeSet(entry.extend);
+				const body = config.sourceFor(link.path)?.resolve("motion", preset)?.toJSON();
+				if (to === void 0 || !body || body.runtime === to) continue;
+				const { dropped, approximated, refused } = convertMotion({
+					body,
+					to
+				});
+				out.push({
+					link: link.path,
+					preset,
+					to,
+					dropped,
+					approximated,
+					refused
+				});
+			}
+		}
+		return out;
+	}
+});
+const runtimeSet = (body) => {
+	const runtime = isPlainObject(body) ? body.runtime : void 0;
+	return runtime === "css" || runtime === "js" ? runtime : void 0;
+};
+/**
+* Every borrowed preset a link swaps to the other runtime (`options.motion[path].override.runtime`),
+* with what converting the source's preset drops, approximates or refuses, for the build to report.
+*/
+function linkedMotionSwaps(config) {
+	return resolveLinkedSwaps(config);
+}
+//#endregion
+export { cssMotionExitsOnUnmount, cssMotionPlacements, cssMotionVariantGroups, linkedMotionSwaps, swappedLinkJsMotions };

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

@@ -0,0 +1,55 @@
+import { Config } from "../../framework/Config.js";
+import { MotionPresetToken } from "./motion-presets.js";
+
+//#region src/entities/system/css-motion.d.ts
+/** A CSS `transition` timing for one value. */
+interface CssMotionTiming {
+  readonly duration: string;
+  readonly easing: string;
+  readonly delay?: string;
+}
+/** The states a CSS preset changes to. `initial` is where it starts, so nothing transitions to it. */
+declare const CSS_MOTION_STATES: readonly ["animate", "exit", "whileHover", "whileTap", "whileFocus"];
+type CssMotionState = (typeof CSS_MOTION_STATES)[number];
+/** Timings by the value's name as the preset writes it (`scale`, `opacity`). */
+type CssMotionTimings = Readonly<Record<string, CssMotionTiming>>;
+/** One CSS preset's timings, by the destination they apply to. */
+interface CssMotionTransitions {
+  /**
+   * The timing of every value any destination sets, under the preset's own `transition`: what the
+   * element moves on as it returns to its style without the preset's states, such as off hover with
+   * no `animate`.
+   */
+  readonly values: CssMotionTimings;
+  /** For each variant, the timing of each value it sets. */
+  readonly variants: Readonly<Record<string, CssMotionTimings>>;
+  /** For each state written as values rather than a variant name, the timing of each value. */
+  readonly states: Readonly<Partial<Record<CssMotionState, CssMotionTimings>>>;
+}
+/** A value a CSS preset's state animates through a list of keyframes, which a transition plays as
+ *  its last. A list that holds and then moves plays as a delay instead, so it is not one. */
+interface CssMotionKeyframeList {
+  readonly preset: string;
+  /** Where the list sits, as a dotted path: `variants.show.scale`. */
+  readonly at: string;
+}
+/** Every CSS preset that animates states, by path, with the timing of each value per destination. */
+declare function cssMotionTransitions(config: Config): Readonly<Record<string, CssMotionTransitions>>;
+/**
+ * How long a CSS preset's `exit` takes, in milliseconds: the longest of its values' durations and
+ * delays as the element changes to its exit state. `0` for a preset with no exit, and a timing that is
+ * no plain time (a `var()`) counts as none.
+ */
+declare function cssMotionExitDuration({
+  config,
+  preset
+}: {
+  config: Config;
+  preset: string;
+}): number;
+/** Every value a CSS preset's states write as a keyframe list, for the build to report. */
+declare function cssMotionKeyframeLists(config: Config): readonly CssMotionKeyframeList[];
+/** The tokens CSS presets' transitions name that come to no value, and the easings CSS can't spell. */
+declare function cssMotionTokens(config: Config): readonly MotionPresetToken[];
+//#endregion
+export { CSS_MOTION_STATES, CssMotionKeyframeList, CssMotionState, CssMotionTiming, CssMotionTimings, CssMotionTransitions, cssMotionExitDuration, cssMotionKeyframeLists, cssMotionTokens, cssMotionTransitions };