@yahoo/uds-create-config 5.5.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;
@@ -1092,6 +1092,13 @@ declare class Config {
    * batch wrote once it has landed, every kind after a registration. Never called on hydration.
    */
   private assertInvariants;
+  /**
+   * One sentence per item of `kind` that extends itself through local extensions — `A` extending `B`
+   * extending `A`. Each base resolves only once the one it extends has, so a loop has no body at all,
+   * and a read answers nothing for every item on it. Refused where it's written instead, naming the
+   * loop. An extension through a linked system can't close one: the source is its own config.
+   */
+  private extensionCycles;
   /** The {@link EntityKind.uniqueLeaves} half of {@link assertInvariants} alone. */
   private assertUniqueLeaves;
   /** One sentence per leaf that two items of `kind` hold, since a leaf has to name one item. */

package/dist/framework/Config.js

@@ -1618,10 +1618,41 @@ var Config = class Config {
 		const kinds = kind === void 0 ? [...this.state.entities.keys()] : [kind];
 		for (const name of kinds) {
 			const entry = this.entityOf(name);
-			const problems = [...entry?.uniqueLeaves ? this.duplicateLeaves(name) : [], ...entry?.invariants?.(this) ?? []];
+			const problems = [
+				...entry?.uniqueLeaves ? this.duplicateLeaves(name) : [],
+				...this.extensionCycles(name),
+				...entry?.invariants?.(this) ?? []
+			];
 			if (problems.length > 0) rejectData(`Invalid ${name}: ${problems.join(" ")}`);
 		}
 	}
+	/**
+	* One sentence per item of `kind` that extends itself through local extensions — `A` extending `B`
+	* extending `A`. Each base resolves only once the one it extends has, so a loop has no body at all,
+	* and a read answers nothing for every item on it. Refused where it's written instead, naming the
+	* loop. An extension through a linked system can't close one: the source is its own config.
+	*/
+	extensionCycles(kind) {
+		const items = this.state.snapshot.slice(kind).items;
+		const localBase = (path) => {
+			const stored = items.get(path)?.toJSON();
+			if (!isExtendedRef(stored) || sourceOf(stored) !== void 0) return;
+			return pathOf(stored);
+		};
+		const problems = [];
+		for (const path of items.keys()) {
+			const chain = [path];
+			for (let base = localBase(path); base !== void 0; base = localBase(base)) {
+				if (base === path) {
+					problems.push(`"${path}" extends itself (${[...chain, path].join(" → ")}); an extension needs a base that doesn't extend it.`);
+					break;
+				}
+				if (chain.includes(base)) break;
+				chain.push(base);
+			}
+		}
+		return problems;
+	}
 	/** The {@link EntityKind.uniqueLeaves} half of {@link assertInvariants} alone. */
 	assertUniqueLeaves(kind) {
 		if (!this.entityOf(kind)?.uniqueLeaves) return;
@@ -3600,6 +3631,7 @@ var Config = class Config {
 				const extension = stored.toJSON();
 				if (!isExtendedRef(extension)) continue;
 				if (slug !== void 0 && sourceOf(extension) !== slug) continue;
+				if (only === void 0 && sourceOf(extension) === void 0) continue;
 				const resolved = this.resolveExtension({
 					kind,
 					path,
@@ -5314,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;
@@ -5596,7 +5628,6 @@ function comparableBody(value) {
 function extensionChange(entry, kind, path, raw, validate = false) {
 	if (kindOf(raw) !== kind) rejectData(`Invalid ${kind} extension: base ref "${raw.__ref}" names ${kindOf(raw)}, not ${kind}`);
 	if (memberOf(raw) !== void 0) rejectData(`Invalid ${kind} extension: base ref "${raw.__ref}" names a member; an item extension needs a whole-entity ref`);
-	if (sourceOf(raw) === void 0) rejectData(`Invalid ${kind} extension: base ref "${raw.__ref}" is local; extend a ref through a declared linked system`);
 	let delta = raw.extend;
 	if (validate === "author") {
 		const parsed = dataSchema(entry.schemas, "update")?.safeParse(delta);

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 };