@yahoo/uds-create-config 5.6.0 → 5.7.0

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

@@ -0,0 +1,73 @@
+import { Config } from "../../framework/Config.js";
+
+//#region src/entities/system/motion-variants.d.ts
+/**
+ * A JS preset a component's style rule puts on one of its layers — `checkbox: { motion: 'press' }`.
+ * `preset` is the preset's path, or for one written in place the id {@link inlineMotionId} gives it.
+ */
+interface PlacedMotion {
+  readonly component: string;
+  readonly layer: string;
+  readonly preset: string;
+}
+/**
+ * A JS preset written in place as a rule's `motion` on a layer. It has no path, so it is named by
+ * where it sits: the component, the rule's key (its condition, `*` for the unconditional rule) and
+ * the layer. `invalid` holds why a body the build cannot read was left out, for the build to report.
+ */
+interface InlineMotion {
+  readonly id: string;
+  readonly component: string;
+  readonly rule: string;
+  readonly layer: string;
+  readonly body: Record<string, unknown>;
+}
+/** The id an in-place preset goes by — `Btn.root inline [disabled=true]`. Never a preset path, since a
+ *  path holds no space. */
+declare function inlineMotionId(component: string, rule: string, layer: string): string;
+/** Whether a rule's `motion` value is a preset written in place, rather than a ref or a name. */
+declare function isInlineMotion(value: unknown): value is Record<string, unknown>;
+/** Every JS preset a rule writes in place, and every one the build cannot read as a JS preset. */
+declare const inlineMotions: (config: Config) => {
+  readonly valid: readonly InlineMotion[];
+  readonly invalid: readonly (Omit<InlineMotion, 'body'> & {
+    reason: string;
+  })[];
+};
+/** A JS preset's body by its path, or an in-place one's by its id; `undefined` for anything else. */
+declare function jsMotionBody(config: Config, preset: string): Record<string, unknown> | undefined;
+/** The states a preset names a variant in. */
+declare const MOTION_VARIANT_STATES: readonly ["initial", "animate", "exit", "whileHover", "whileTap", "whileFocus", "whileDrag"];
+type Body = Record<string, unknown>;
+/** The variant names one state holds: a name, a list of names, or none (values, `false`). */
+declare function stateVariantNames(value: unknown): string[];
+/** The variants a preset declares. */
+declare function declaredVariants(body: Body | undefined): string[];
+/** Every JS preset a style rule puts on a layer, across the system. */
+declare const placedMotions: (config: Config) => readonly PlacedMotion[];
+/**
+ * The presets that share variant names, each set closed over placement and composition.
+ *
+ * Two presets on one component's layers are in one set. So is a preset a component places and one a
+ * component it renders places, at any depth: the label passes through a component that places nothing
+ * on its way down, so the walk goes through those without joining them. A component that places
+ * nothing joins nothing, which keeps Button and Checkbox apart although both render Box.
+ */
+declare const motionVariantGroups: (config: Config) => readonly ReadonlySet<string>[];
+/** A variant a placed preset declares that nothing animating with it ever names. */
+interface OrphanedMotionVariant {
+  readonly preset: string;
+  readonly variant: string;
+}
+/**
+ * Every variant a placed preset declares that no state in its set names — what a rename of the name
+ * on one side leaves on the other, and what `motion/react` then never animates to, silently.
+ *
+ * Only presets a style rule places are checked: an unplaced preset's variants may answer whatever the
+ * app renders around it, and neither is a set holding a component with a `motion` prop. A placed one
+ * may be driven from outside the system too, by an app ancestor animating to the same name, which is
+ * why this warns and never refuses.
+ */
+declare function orphanedMotionVariants(config: Config): OrphanedMotionVariant[];
+//#endregion
+export { InlineMotion, MOTION_VARIANT_STATES, OrphanedMotionVariant, PlacedMotion, declaredVariants, inlineMotionId, inlineMotions, isInlineMotion, jsMotionBody, motionVariantGroups, orphanedMotionVariants, placedMotions, stateVariantNames };

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

@@ -0,0 +1,270 @@
+import { reject } from "../../framework/rejection.js";
+import { isRef, kindOf, pathOf } from "../../framework/utils/refs.js";
+import { isPlainObject } from "../../framework/utils/field-path.js";
+import { createSliceMemo } from "../../framework/memo.js";
+import { inlineJsMotion } from "./Motion.js";
+//#region src/entities/system/motion-variants.ts
+/** The id an in-place preset goes by — `Btn.root inline [disabled=true]`. Never a preset path, since a
+*  path holds no space. */
+function inlineMotionId(component, rule, layer) {
+	return `${component}.${layer} inline [${rule}]`;
+}
+/** Whether a rule's `motion` value is a preset written in place, rather than a ref or a name. */
+function isInlineMotion(value) {
+	return isPlainObject(value) && !isRef(value);
+}
+/** Every JS preset a rule writes in place, and every one the build cannot read as a JS preset. */
+const inlineMotions = createSliceMemo({
+	kinds: ["component"],
+	compute: (config) => {
+		const valid = [];
+		const invalid = [];
+		for (const component of config.list("component")) {
+			const { styles = {} } = component.toJSON();
+			for (const [rule, entry] of Object.entries(styles)) for (const [layer, bag] of Object.entries(entry?.layers ?? {})) {
+				const value = bag?.motion;
+				if (!isInlineMotion(value)) continue;
+				const id = inlineMotionId(component.path, rule, layer);
+				const parsed = inlineJsMotion.safeParse(value);
+				if (!parsed.success) {
+					invalid.push({
+						id,
+						component: component.path,
+						rule,
+						layer,
+						reason: parsed.error.issues.map((issue) => [issue.path.join("."), issue.message].filter(Boolean).join(": ")).join("; ")
+					});
+					continue;
+				}
+				valid.push({
+					id,
+					component: component.path,
+					rule,
+					layer,
+					body: {
+						...value,
+						runtime: "js"
+					}
+				});
+			}
+		}
+		return {
+			valid,
+			invalid
+		};
+	}
+});
+/** A JS preset's body by its path, or an in-place one's by its id; `undefined` for anything else. */
+function jsMotionBody(config, preset) {
+	const named = config.resolve("motion", preset)?.toJSON();
+	if (named) return named.runtime === "js" ? named : void 0;
+	return inlineMotions(config).valid.find((entry) => entry.id === preset)?.body;
+}
+/** The states a preset names a variant in. */
+const MOTION_VARIANT_STATES = [
+	"initial",
+	"animate",
+	"exit",
+	"whileHover",
+	"whileTap",
+	"whileFocus",
+	"whileDrag"
+];
+const jsBody = (config, path) => jsMotionBody(config, path);
+/** The variant names one state holds: a name, a list of names, or none (values, `false`). */
+function stateVariantNames(value) {
+	if (typeof value === "string") return [value];
+	if (Array.isArray(value)) return value.filter((name) => typeof name === "string");
+	return [];
+}
+/** The variants a preset declares. */
+function declaredVariants(body) {
+	const variants = body?.variants;
+	return variants && typeof variants === "object" ? Object.keys(variants) : [];
+}
+/** Every variant a preset's states name. */
+function namedVariants(body) {
+	if (!body) return [];
+	return MOTION_VARIANT_STATES.flatMap((state) => stateVariantNames(body[state]));
+}
+/** Every JS preset a style rule puts on a layer, across the system. */
+const placedMotions = createSliceMemo({
+	kinds: ["component", "motion"],
+	compute: (config) => {
+		const out = [];
+		for (const component of config.list("component")) {
+			const { styles = {} } = component.toJSON();
+			for (const [rule, entry] of Object.entries(styles)) for (const [layer, bag] of Object.entries(entry?.layers ?? {})) {
+				const named = bag?.motion;
+				const preset = isRef(named) ? pathOf(named.__ref) : typeof named === "string" ? named : isInlineMotion(named) ? inlineMotionId(component.path, rule, layer) : void 0;
+				if (preset === void 0 || !jsBody(config, preset)) continue;
+				out.push({
+					component: component.path,
+					layer,
+					preset
+				});
+			}
+		}
+		return out;
+	}
+});
+/** The components a component's layers render, resolved to the path each lives at. */
+const composedComponents = (config, path) => {
+	const { layers = {} } = config.resolve("component", path)?.toJSON() ?? {};
+	return Object.values(layers).flatMap((element) => isRef(element) && kindOf(element) === "component" ? [config.resolve("component", pathOf(element))?.path ?? pathOf(element)] : []);
+};
+/**
+* The presets that share variant names, each set closed over placement and composition.
+*
+* Two presets on one component's layers are in one set. So is a preset a component places and one a
+* component it renders places, at any depth: the label passes through a component that places nothing
+* on its way down, so the walk goes through those without joining them. A component that places
+* nothing joins nothing, which keeps Button and Checkbox apart although both render Box.
+*/
+const motionVariantGroups = createSliceMemo({
+	kinds: ["component", "motion"],
+	compute: (config) => {
+		const parent = /* @__PURE__ */ new Map();
+		const find = (node) => {
+			let root = node;
+			while (parent.has(root) && parent.get(root) !== root) root = parent.get(root);
+			parent.set(node, root);
+			return root;
+		};
+		const join = (a, b) => {
+			const ra = find(a);
+			const rb = find(b);
+			if (ra !== rb) parent.set(ra, rb);
+		};
+		const placing = /* @__PURE__ */ new Set();
+		for (const { component, preset } of placedMotions(config)) {
+			placing.add(component);
+			join(`c\u0000${component}`, `p\u0000${preset}`);
+		}
+		for (const component of placing) {
+			const seen = new Set([component]);
+			const queue = composedComponents(config, component);
+			while (queue.length > 0) {
+				const next = queue.shift();
+				if (seen.has(next)) continue;
+				seen.add(next);
+				if (placing.has(next)) join(`c\u0000${component}`, `c\u0000${next}`);
+				queue.push(...composedComponents(config, next));
+			}
+		}
+		const groups = /* @__PURE__ */ new Map();
+		for (const node of parent.keys()) {
+			if (node[0] !== "p") continue;
+			const root = find(node);
+			const group = groups.get(root) ?? /* @__PURE__ */ new Set();
+			group.add(node.slice(2));
+			groups.set(root, group);
+		}
+		return [...groups.values()];
+	}
+});
+/** The presets that share variant names with `preset` — itself alone when no rule places it. */
+function motionVariantGroupOf(config, preset) {
+	return motionVariantGroups(config).find((group) => group.has(preset)) ?? new Set([preset]);
+}
+/** A preset's body with one variant name renamed, in its `variants` and in every state naming it. */
+function renamedBody(body, from, to) {
+	const next = { ...body };
+	const variants = body.variants;
+	if (variants && Object.hasOwn(variants, from)) next.variants = Object.fromEntries(Object.entries(variants).map(([name, value]) => [name === from ? to : name, value]));
+	for (const state of MOTION_VARIANT_STATES) {
+		const value = body[state];
+		if (value === from) next[state] = to;
+		else if (Array.isArray(value)) next[state] = value.map((name) => name === from ? to : name);
+	}
+	return next;
+}
+const mentions = (body, name) => declaredVariants(body).includes(name) || namedVariants(body).includes(name);
+/**
+* Rename a variant across every preset that shares names with `path` ({@link motionVariantGroupOf}):
+* the key in each `variants` that declares it, and each state that names it. Refused when `path` is
+* not a JS preset that declares `from`, or when a preset in the set already declares `to`, since the
+* two would become one variant.
+*/
+function renameMotionVariant(config, { path, from, to }) {
+	const own = jsBody(config, path);
+	if (!own) reject("NOT_FOUND", `"${path}" is not a JS motion preset, so it has no variants.`);
+	if (!declaredVariants(own).includes(from)) reject("NOT_FOUND", `"${path}" declares no variant "${from}".`);
+	if (from === to) return config;
+	const group = [...motionVariantGroupOf(config, path)];
+	const taken = group.filter((preset) => declaredVariants(jsBody(config, preset)).includes(to));
+	if (taken.length > 0) reject("ALREADY_EXISTS", `"${to}" is already a variant of ${taken.map((preset) => `"${preset}"`).join(", ")}, which animate${taken.length === 1 ? "s" : ""} with "${path}". Renaming "${from}" onto it would make the two one variant.`);
+	let next = config;
+	for (const preset of group) {
+		const body = jsBody(next, preset);
+		if (!body || !mentions(body, from)) continue;
+		const inline = inlineMotions(next).valid.find((entry) => entry.id === preset);
+		if (!inline) {
+			next = next.apply({
+				kind: "motion",
+				operation: "replace",
+				path: preset,
+				data: renamedBody(body, from, to)
+			});
+			continue;
+		}
+		const component = next.resolve("component", inline.component)?.toJSON();
+		const bag = component?.styles?.[inline.rule]?.layers?.[inline.layer];
+		if (!component || !bag || !isInlineMotion(bag.motion)) continue;
+		next = next.apply({
+			kind: "component",
+			operation: "replace",
+			path: inline.component,
+			data: {
+				...component,
+				styles: {
+					...component.styles,
+					[inline.rule]: {
+						...component.styles?.[inline.rule],
+						layers: {
+							...component.styles?.[inline.rule]?.layers,
+							[inline.layer]: {
+								...bag,
+								motion: renamedBody(bag.motion, from, to)
+							}
+						}
+					}
+				}
+			}
+		});
+	}
+	return next;
+}
+const declaresMotionProp = (config, path) => {
+	const { props = {} } = config.resolve("component", path)?.toJSON() ?? {};
+	return Object.values(props).some((prop) => prop?.type === "motion");
+};
+/**
+* Every variant a placed preset declares that no state in its set names — what a rename of the name
+* on one side leaves on the other, and what `motion/react` then never animates to, silently.
+*
+* Only presets a style rule places are checked: an unplaced preset's variants may answer whatever the
+* app renders around it, and neither is a set holding a component with a `motion` prop. A placed one
+* may be driven from outside the system too, by an app ancestor animating to the same name, which is
+* why this warns and never refuses.
+*/
+function orphanedMotionVariants(config) {
+	const entries = placedMotions(config);
+	const placed = new Set(entries.map((entry) => entry.preset));
+	const open = new Set(entries.filter((entry) => declaresMotionProp(config, entry.component)).map((entry) => entry.preset));
+	const out = [];
+	for (const group of motionVariantGroups(config)) {
+		if ([...group].some((preset) => open.has(preset))) continue;
+		const named = new Set([...group].flatMap((preset) => namedVariants(jsBody(config, preset))));
+		for (const preset of group) {
+			if (!placed.has(preset)) continue;
+			for (const variant of declaredVariants(jsBody(config, preset))) if (!named.has(variant)) out.push({
+				preset,
+				variant
+			});
+		}
+	}
+	return out;
+}
+//#endregion
+export { MOTION_VARIANT_STATES, declaredVariants, inlineMotionId, inlineMotions, isInlineMotion, jsMotionBody, motionVariantGroups, orphanedMotionVariants, placedMotions, renameMotionVariant, stateVariantNames };

package/dist/framework/Config.d.ts

@@ -72,7 +72,7 @@ interface RecordedSource {
  * The dense-counter `2` a short-lived scheme stamped before the chain existed reads as the mint
  * that replaced it (see `detectedWireVersion`).
  */
-declare const SERIALIZED_CONFIG_VERSION = 20261005225949;
+declare const SERIALIZED_CONFIG_VERSION = 20261006125609;
 interface SerializedConfig {
   /** See {@link SERIALIZED_CONFIG_VERSION}. Always written; a stored artifact may lack it. */
   readonly version: number;

package/dist/framework/Config.js

@@ -5346,7 +5346,7 @@ var Config = class Config {
 	*  links from the provided sources. A declared `linkedKind` with no provided source throws. */
 	hydrateFrom(stored, options) {
 		const claimed = schemaVersionOf(stored);
-		if (claimed > 20261005225949) throw new SchemaVersionTooNew(claimed);
+		if (claimed > 20261006125609) throw new SchemaVersionTooNew(claimed);
 		const wire = upgradeSerializedConfig(stored);
 		if (!Array.isArray(wire.ownedKinds) || typeof wire.items !== "object" || wire.items === null) throw new ConfigFormatError(`Config "${stored.name ?? "system-config"}" cannot be hydrated: this is not a serialized config-v2 config (no "ownedKinds"/"items"). A pre-cutover build artifact converts through the registered cutover migration — import the config type's module (e.g. \`configs/system\`) before hydrating, or port the repo once with \`uds migrate\`.`);
 		const leftover = wire.options;

package/dist/framework/class-names.d.ts

@@ -199,6 +199,16 @@ declare function inlineRuleComposites(config: Config, element: unknown, bag: Rec
  * nothing until a rebuild, while a prop json-render applies on the spot.
  */
 declare function layerRoutedProps(config: Config, path: string, state?: Record<string, unknown>): Record<string, Record<string, unknown>>;
+/**
+ * The JS preset each layer animates by, for one instance: the `motion` of the last style rule that
+ * applies and names a JS preset for the layer, the unconditional rule first and the conditional ones
+ * in declaration order, which is the order the emitted module routes them in. A CSS preset is a
+ * class and stays with {@link styleRuleMotionClasses}.
+ *
+ * What lets the canvas play a preset a rule put on a layer before any build: the expansion renders
+ * that layer through motion's factory and hands it the preset's props.
+ */
+declare function layerJsMotionPresets(config: Config, path: string, state?: Record<string, unknown>): Record<string, string>;
 /**
  * The CSS MOTION classes a style rule puts on a layer, for one instance.
  *
@@ -337,4 +347,4 @@ declare function modifierUtilitiesUsed(config: Config): Set<string>;
  */
 declare function splitVariants(cls: string): string[];
 //#endregion
-export { ComponentRuleClass, PickedComposite, SplitStyleProps, arbitraryClassName, arbitraryNeedsClass, classLeaf, classSelector, componentClassBase, componentCompositeClasses, componentLayerClass, componentMotionClasses, componentPropClasses, componentPropComposites, componentRuleClasses, forceModeAttribute, forceModeAttributeOf, forceModeProp, forceModePropGroup, forceModePropValue, forceModeProps, forceStateAttribute, inlineRuleComposites, isForceModeProp, kebabComponent, layerRoutedProps, modifierUtilitiesUsed, motionClassName, ruleCondition, splitStyleProps, splitVariants, stylePropClassBase, stylePropClassName, stylePropClasses, stylePropOwnClasses, styleRuleMotionClasses };
+export { ComponentRuleClass, PickedComposite, SplitStyleProps, arbitraryClassName, arbitraryNeedsClass, classLeaf, classSelector, componentClassBase, componentCompositeClasses, componentLayerClass, componentMotionClasses, componentPropClasses, componentPropComposites, componentRuleClasses, forceModeAttribute, forceModeAttributeOf, forceModeProp, forceModePropGroup, forceModePropValue, forceModeProps, forceStateAttribute, inlineRuleComposites, isForceModeProp, kebabComponent, layerJsMotionPresets, layerRoutedProps, modifierUtilitiesUsed, motionClassName, ruleCondition, splitStyleProps, splitVariants, stylePropClassBase, stylePropClassName, stylePropClasses, stylePropOwnClasses, styleRuleMotionClasses };

package/dist/framework/class-names.js

@@ -4,6 +4,7 @@ import { createSliceMemo } from "./memo.js";
 import { classPrefixOf, prefixed, varPrefixOf } from "../entities/system/Settings.js";
 import { storedPreview } from "./preview-store.js";
 import { authoredValue, className, isCustomPropertyKey, negatedCssValue, renderStyleValue, resolveComponentProps, stylePropEntries, stylePropLeafForToken, stylePropValueLeaves, stylePropertyPathFor } from "./projections.js";
+import { inlineMotionId, isInlineMotion, jsMotionBody } from "../entities/system/motion-variants.js";
 import { ruleApplies } from "./layer-styles.js";
 //#region src/framework/class-names.ts
 /**
@@ -529,6 +530,9 @@ function layerRoutedProps(config, path, state = {}) {
 		const declared = isRef(element) ? resolveComponentProps(config, pathOf(element.__ref)) : {};
 		for (const [prop, value] of Object.entries(bag ?? {})) {
 			if (prop.startsWith("_") || isCustomPropertyKey(prop)) continue;
+			if (prop === "motion") {
+				if ((config.resolve("motion", String(authoredValue(config, prop, value)))?.toJSON())?.runtime !== "css" || !isRef(element)) continue;
+			}
 			const styleKey = stylePropertyPathFor({
 				config,
 				key: prop
@@ -543,6 +547,43 @@ function layerRoutedProps(config, path, state = {}) {
 	return out;
 }
 /**
+* The JS preset each layer animates by, for one instance: the `motion` of the last style rule that
+* applies and names a JS preset for the layer, the unconditional rule first and the conditional ones
+* in declaration order, which is the order the emitted module routes them in. A CSS preset is a
+* class and stays with {@link styleRuleMotionClasses}.
+*
+* What lets the canvas play a preset a rule put on a layer before any build: the expansion renders
+* that layer through motion's factory and hands it the preset's props.
+*/
+function layerJsMotionPresets(config, path, state = {}) {
+	const { styles = {}, defaultProps = {} } = config.resolve("component", path)?.toJSON() ?? {};
+	const resolved = {
+		...defaultProps,
+		...state
+	};
+	const rules = Object.entries(styles);
+	const unconditional = ([, rule]) => !rule.when || Object.keys(rule.when).length === 0;
+	const ordered = [...rules.filter(unconditional), ...rules.filter((entry) => !unconditional(entry))];
+	const out = {};
+	for (const [key, rule] of ordered) {
+		if (!ruleApplies(rule.when, resolved)) continue;
+		for (const [layer, bag] of Object.entries(rule.layers ?? {})) {
+			const named = bag?.motion;
+			if (isInlineMotion(named)) {
+				const id = inlineMotionId(path, key, layer);
+				if (jsMotionBody(config, id)) out[layer] = id;
+				else delete out[layer];
+				continue;
+			}
+			const preset = isRef(named) ? pathOf(named.__ref) : typeof named === "string" ? named : void 0;
+			if (preset === void 0) continue;
+			if ((config.resolve("motion", preset)?.toJSON())?.runtime === "js") out[layer] = preset;
+			else delete out[layer];
+		}
+	}
+	return out;
+}
+/**
 * The CSS MOTION classes a style rule puts on a layer, for one instance.
 *
 * A preset's whole runtime is a class too, and a composite's route (forward it, and let the receiver
@@ -929,4 +970,4 @@ function splitVariants(cls) {
 	return segments;
 }
 //#endregion
-export { arbitraryClassName, arbitraryNeedsClass, classLeaf, classSelector, componentClassBase, componentCompositeClasses, componentLayerClass, componentMotionClasses, componentPropClasses, componentPropComposites, componentRuleClasses, forceModeAttribute, forceModeAttributeOf, forceModeProp, forceModePropGroup, forceModePropValue, forceModeProps, forceStateAttribute, inlineRuleComposites, isForceModeProp, kebabComponent, layerRoutedProps, modifierUtilitiesUsed, motionClassName, ruleCondition, splitStyleProps, splitVariants, stylePropClassBase, stylePropClassName, stylePropClasses, stylePropOwnClasses, styleRuleMotionClasses };
+export { arbitraryClassName, arbitraryNeedsClass, classLeaf, classSelector, componentClassBase, componentCompositeClasses, componentLayerClass, componentMotionClasses, componentPropClasses, componentPropComposites, componentRuleClasses, forceModeAttribute, forceModeAttributeOf, forceModeProp, forceModePropGroup, forceModePropValue, forceModeProps, forceStateAttribute, inlineRuleComposites, isForceModeProp, kebabComponent, layerJsMotionPresets, layerRoutedProps, modifierUtilitiesUsed, motionClassName, ruleCondition, splitStyleProps, splitVariants, stylePropClassBase, stylePropClassName, stylePropClasses, stylePropOwnClasses, styleRuleMotionClasses };

package/dist/framework/defineSubEntity.d.ts

@@ -159,8 +159,13 @@ declare function defineSubEntity<F extends z.ZodTypeAny>(spec: {
  * every way into stored state takes it: `register`, an item's create or update, and op data.
  *
  * Two members with the same key are one member, the later one, as the key derivation on write
- * already treats a record whose keys disagree with their members.
+ * already treats a record whose keys disagree with their members — unless `merge` says how the two
+ * combine, in which case the member is `merge(earlier, later)`, placed where the later one was.
  */
-declare function orList<F extends z.ZodTypeAny>(collection: SubEntityClass<F>): z.ZodUnion<readonly [z.ZodPipe<z.ZodArray<F>, z.ZodTransform<Record<string, z.output<F>>, z.core.output<F>[]>>, SubEntityClass<F>]>;
+declare function orList<F extends z.ZodTypeAny>(collection: SubEntityClass<F>, {
+  merge
+}?: {
+  readonly merge?: (earlier: z.output<F>, later: z.output<F>) => z.output<F>;
+}): z.ZodUnion<readonly [z.ZodPipe<z.ZodArray<F>, z.ZodTransform<Record<string, z.output<F>>, z.core.output<F>[]>>, SubEntityClass<F>]>;
 //#endregion
 export { SubEntityClass, defineSubEntity, orList };

package/dist/framework/defineSubEntity.js

@@ -124,14 +124,22 @@ function defineSubEntity(spec) {
 * every way into stored state takes it: `register`, an item's create or update, and op data.
 *
 * Two members with the same key are one member, the later one, as the key derivation on write
-* already treats a record whose keys disagree with their members.
+* already treats a record whose keys disagree with their members — unless `merge` says how the two
+* combine, in which case the member is `merge(earlier, later)`, placed where the later one was.
 */
-function orList(collection) {
+function orList(collection, { merge } = {}) {
 	const key = collection.key;
 	if (!key) throw new Error(`orList: "${collection.name}" declares no \`key\`, so a list of its members has nothing to be keyed by.`);
 	const listed = z.array(collection.valueType).transform((members) => {
 		const keyed = {};
-		for (const member of members) keyed[key(member)] = member;
+		for (const member of members) {
+			const at = key(member);
+			const earlier = keyed[at];
+			if (earlier !== void 0 && merge) {
+				delete keyed[at];
+				keyed[at] = merge(earlier, member);
+			} else keyed[at] = member;
+		}
 		return keyed;
 	});
 	return z.union([listed, collection]);

package/dist/framework/projections.js

@@ -476,6 +476,7 @@ function authoredValue(config, key, value) {
 function authoredLeaf(config, key, stored) {
 	const path = pathOf(stored);
 	if (kindOf(stored) === "token") return stylePropLeafForToken(config, key, path);
+	if (kindOf(stored) === "motion") return path;
 	const slash = path.indexOf("/");
 	return slash === -1 ? path : path.slice(slash + 1);
 }

package/dist/framework/render-spec.d.ts

@@ -92,6 +92,10 @@ interface ResolveContext {
  * one — since it names a derived thing, not an entity.
  */
 declare function wrappedElementKey(wrapper: string, type: string): string;
+/** The factory a layer renders through when a style rule gives it a JS preset. The registry holds a
+ *  pair of it with every element a layer renders, when the system has a JS preset (codegen's
+ *  registry emitter). */
+declare const MOTION_FACTORY = "package:motion/react#motion";
 /**
  * The node a tree ENTERS at — the one nothing else claims as a child.
  *
@@ -497,4 +501,4 @@ declare function expandSpec(config: Config, spec: RenderSpec, options?: ExpandOp
  */
 declare function expandComponent(config: Config, path: string, props?: Record<string, unknown>, options?: ExpandOptions): ExpansionResult;
 //#endregion
-export { ANATOMY_MARKER, ComponentSpec, ComponentSpecs, ComputedFunctions, ComputedValue, ExpandOptions, ExpansionResult, RenderElement, RenderSpec, RepeatRow, RepeatSpec, ResolveContext, SlotTarget, VisibilityOperator, VisibilityTerm, anatomyElementComponent, anatomyTextProp, boundElementType, componentSpec, deriveSpec, entryKeyOf, expandComponent, expandSpec, instanceSpec, layerTextProp, liveStateProps, previewSpec, propInto, propsIntoLayer, readStatePointer, resolveValue, resolveVisibility, routeOf, routesOf, slotTargetsOf, specWithResolvedVisibility, statePointerProp, valueForwardsOf, visibilityStateProps, visibilityTerms, withoutTruthyTerm, wrappedElementKey };
+export { ANATOMY_MARKER, ComponentSpec, ComponentSpecs, ComputedFunctions, ComputedValue, ExpandOptions, ExpansionResult, MOTION_FACTORY, RenderElement, RenderSpec, RepeatRow, RepeatSpec, ResolveContext, SlotTarget, VisibilityOperator, VisibilityTerm, anatomyElementComponent, anatomyTextProp, boundElementType, componentSpec, deriveSpec, entryKeyOf, expandComponent, expandSpec, instanceSpec, layerTextProp, liveStateProps, previewSpec, propInto, propsIntoLayer, readStatePointer, resolveValue, resolveVisibility, routeOf, routesOf, slotTargetsOf, specWithResolvedVisibility, statePointerProp, valueForwardsOf, visibilityStateProps, visibilityTerms, withoutTruthyTerm, wrappedElementKey };

package/dist/framework/render-spec.js

@@ -5,9 +5,10 @@ import { unconditionalPreviewProps } from "./preview-store.js";
 import { authoredBag, authoredValue, declaredPropDefaults, memberFromLeaf, refListOf, resolveComponentProps, stylePropertyPathFor } from "./projections.js";
 import { slotHostLayer } from "./slot-host.js";
 import { forwardRoutes, forwardedLayers, intoName, isValueSlot, renderBindingsOf, routesContent } from "./prop-surface.js";
+import { inlineMotionProps, jsMotionPresets } from "../entities/system/motion-presets.js";
 import { withRequiredContentHidden } from "../entities/system/required-content-layers.js";
 import { graftPreviewElements } from "../spec/preview-elements.js";
-import { componentLayerClass, componentPropClasses, componentRuleClasses, layerRoutedProps, splitStyleProps, styleRuleMotionClasses } from "./class-names.js";
+import { componentLayerClass, componentPropClasses, componentRuleClasses, layerJsMotionPresets, layerRoutedProps, splitStyleProps, styleRuleMotionClasses } from "./class-names.js";
 //#region src/framework/render-spec.ts
 /** A repeat source that is one prop binding: `{ "$state": "/stops" }`, settled by the cell alone. */
 function isStateSource(source) {
@@ -49,6 +50,15 @@ function unwrapElementKey(key) {
 	if (open === -1 || !key.endsWith(")")) return void 0;
 	return key.slice(open + 1, -1);
 }
+/** The factory a layer renders through when a style rule gives it a JS preset. The registry holds a
+*  pair of it with every element a layer renders, when the system has a JS preset (codegen's
+*  registry emitter). */
+const MOTION_FACTORY = "package:motion/react#motion";
+/** Whether a spec type is already a motion element, which animates by its own props, so a rule's
+*  preset would animate it twice: `package:motion/react#motion.span`, or a factory-wrapped pair. */
+function isMotionElementType(type) {
+	return type.startsWith(`package:motion/react#motion.`) || type.startsWith(`package:motion/react#motion(`);
+}
 /** The type a node renders as, wrapped when the node names a wrapper. */
 function wrappedTypeOf(node, type) {
 	if (type === void 0) return void 0;
@@ -1220,6 +1230,11 @@ function expandInstance(sink, path, instanceProps, content, hint, instanceSlots)
 	});
 	const layerProps = instanceProps.layerProps ?? {};
 	const forwarded = layerRoutedProps(config, path, state);
+	const layerMotions = layerJsMotionPresets(config, path, state);
+	const presetProps = Object.keys(layerMotions).length > 0 ? {
+		...jsMotionPresets(config),
+		...inlineMotionProps(config)
+	} : {};
 	const entryNode = entryKeyOf(anatomy);
 	const rootLayer = rootKeyOf(layers);
 	const hostNode = Object.keys(anatomy).find((key) => layerOf(anatomy[key]?.element) === rootLayer) ?? entryNode;
@@ -1311,6 +1326,9 @@ function expandInstance(sink, path, instanceProps, content, hint, instanceSlots)
 		const bound = boundPropOf(node.element);
 		if (bound) type = boundChoice(config, path, node.element, state[bound]);
 		type = wrappedTypeOf(node, type);
+		const motionWrapped = type !== void 0 ? wrappedElementKey(MOTION_FACTORY, type) : void 0;
+		const motionPreset = layer !== void 0 && !refOf(node.wrapper) && type !== void 0 && motionWrapped !== void 0 && !isMotionElementType(type) && sink.rendered?.has(motionWrapped) ? layerMotions[layer] : void 0;
+		if (motionPreset !== void 0) type = motionWrapped;
 		if (!type) {
 			sink.unresolved.add(bound ? `component:${path}#${key} (${bound})` : `component:${path}#${key}`);
 			return;
@@ -1331,6 +1349,7 @@ function expandInstance(sink, path, instanceProps, content, hint, instanceSlots)
 			"data-uds-component": path,
 			"data-uds-layer": layer,
 			...forwarded[layer],
+			...motionPreset !== void 0 ? presetProps[motionPreset] : {},
 			...Object.fromEntries((valueRoutes.get(layer) ?? []).filter(({ from }) => state[from] !== void 0).map(({ from, into }) => [into, state[from]])),
 			...isRoot ? rest : {},
 			...slot && slotValue !== void 0 ? { [intoName(slot.into)]: slotValue } : {},
@@ -1491,4 +1510,4 @@ function expandComponent(config, path, props = {}, options = {}) {
 	return expandSpec(config, instanceSpec(path, props), options);
 }
 //#endregion
-export { ANATOMY_MARKER, anatomyElementComponent, anatomyTextProp, andListOf, boundElementType, componentSpec, deriveSpec, entryKeyOf, expandComponent, expandSpec, instanceSpec, isExpression, layerTextProp, liveStateProps, previewSpec, propInto, propsIntoLayer, readStatePointer, resolveValue, resolveVisibility, routeOf, routesOf, slotAnatomyPropOf, slotTargetsOf, specWithResolvedVisibility, spelled, statePointerProp, valueForwardsOf, visibilityStateProps, visibilityTerms, withoutTruthyTerm, wrappedElementKey };
+export { ANATOMY_MARKER, MOTION_FACTORY, anatomyElementComponent, anatomyTextProp, andListOf, boundElementType, componentSpec, deriveSpec, entryKeyOf, expandComponent, expandSpec, instanceSpec, isExpression, layerTextProp, liveStateProps, previewSpec, propInto, propsIntoLayer, readStatePointer, resolveValue, resolveVisibility, routeOf, routesOf, slotAnatomyPropOf, slotTargetsOf, specWithResolvedVisibility, spelled, statePointerProp, valueForwardsOf, visibilityStateProps, visibilityTerms, withoutTruthyTerm, wrappedElementKey };

package/dist/framework/schema-version.d.ts

@@ -15,7 +15,7 @@ import { Patch, SerializedConfig } from "./Config.js";
  * sets this constant to its own older timestamp; the merge ref then carries a registered migration
  * newer than the constant, and the assertion fails until the author re-mints.
  */
-declare const CURRENT_SCHEMA_VERSION = 20261005225949;
+declare const CURRENT_SCHEMA_VERSION = 20261006125609;
 /** What the walkers need to see of an envelope — loose on purpose, so a typed `SerializedConfig`
  *  and a raw old-shape record both flow in without casts. */
 interface VersionStamped {

package/dist/framework/schema-version.js

@@ -13,7 +13,7 @@ import { ConfigFormatError } from "./rejection.js";
 * sets this constant to its own older timestamp; the merge ref then carries a registered migration
 * newer than the constant, and the assertion fails until the author re-mints.
 */
-const CURRENT_SCHEMA_VERSION = 20261005225949;
+const CURRENT_SCHEMA_VERSION = 20261006125609;
 /** The mint that moved `options` into the `settings` kind — restated here, rather than imported
 *  from the migration that owns it, because that migration imports this module. */
 const SETTINGS_AS_KIND_VERSION = 20260908171448;
@@ -45,7 +45,7 @@ function registerSchemaMigrations(...migrations) {
 	for (const migration of migrations) {
 		if (migration.version !== 1 && !isMintTimestamp(migration.version)) throw new Error(`Schema migration version ${migration.version} is not a mint timestamp — mint one with \`date +%Y%m%d%H%M%S\`, like a supabase migration.`);
 		if (REGISTERED.has(migration.version)) throw new Error(`A schema migration at version ${migration.version} is already registered.`);
-		if (migration.version > 20261005225949) throw new Error(`Schema migration ${migration.version} is newer than CURRENT_SCHEMA_VERSION (${CURRENT_SCHEMA_VERSION}) — a stale branch merged, or the mint forgot to bump the constant. Re-mint: set CURRENT_SCHEMA_VERSION to the newest migration version.`);
+		if (migration.version > 20261006125609) throw new Error(`Schema migration ${migration.version} is newer than CURRENT_SCHEMA_VERSION (${CURRENT_SCHEMA_VERSION}) — a stale branch merged, or the mint forgot to bump the constant. Re-mint: set CURRENT_SCHEMA_VERSION to the newest migration version.`);
 		REGISTERED.set(migration.version, migration);
 	}
 }
@@ -102,7 +102,7 @@ function pendingFor(version, target, options) {
 * Already-current input passes through untouched — same reference, so hot paths pay nothing.
 */
 function upgradeSerializedConfig(json, options) {
-	const target = options?.target ?? 20261005225949;
+	const target = options?.target ?? 20261006125609;
 	const version = detectedWireVersion(json);
 	if (version > target) throw new SchemaVersionTooNew(version, target);
 	const raw = json;
@@ -160,7 +160,7 @@ function upgradedSources(json, options) {
 * meaning under the current schema and replay skips it — reported by the caller, not swallowed here.
 */
 function upgradePatch(patch, writtenAt, options) {
-	const target = options?.target ?? 20261005225949;
+	const target = options?.target ?? 20261006125609;
 	if (writtenAt > target) throw new SchemaVersionTooNew(writtenAt, target);
 	let current = patch;
 	for (const migration of pendingFor(writtenAt, target, options)) {
@@ -179,7 +179,7 @@ function upgradePatch(patch, writtenAt, options) {
 * stamp would cause.
 */
 function upgradeDraftEntries(draft, options) {
-	const target = options?.target ?? 20261005225949;
+	const target = options?.target ?? 20261006125609;
 	const entries = [];
 	const held = [];
 	const retired = [];