@yahoo/uds-create-config 5.5.0 → 5.7.0

package/dist/configs/system.js

@@ -4,6 +4,7 @@ import { Composite } from "../entities/system/Composite.js";
 import { Modifier } from "../entities/system/Modifier.js";
 import { Settings } from "../entities/system/Settings.js";
 import { StyleProperty } from "../entities/system/StyleProperty.js";
+import { Motion } from "../entities/system/Motion.js";
 import { File } from "../entities/system/File.js";
 import { WEB_CONFIG_NAME } from "./platform.js";
 import { Token } from "../entities/system/Token.js";
@@ -19,7 +20,6 @@ import { GlobalStyle } from "../entities/system/GlobalStyle.js";
 import { Guidance } from "../entities/system/Guidance.js";
 import { GuidanceStyle } from "../entities/system/GuidanceStyle.js";
 import { LinkedSystem } from "../entities/system/LinkedSystem.js";
-import { Motion } from "../entities/system/Motion.js";
 import { loadV1Artifact } from "../migrations/2.0.0/v1-artifact.js";
 import { settingsAsKindMigration } from "../migrations/20260908171448_settings_as_kind.js";
 import { visibleStatePointerMigration } from "../migrations/20260908194245_visible_state_pointer.js";
@@ -57,6 +57,7 @@ import { oklchAndEmitFieldsMigration } from "../migrations/20261001162046_oklch_
 import { globalStyleOnMigration } from "../migrations/20261005212405_global_style_on.js";
 import { addAndSubtractMigration } from "../migrations/20261005220312_add_and_subtract.js";
 import { systemIncludeMigration } from "../migrations/20261005225949_system_include.js";
+import { motionVariantsAndLayoutMigration } from "../migrations/20261006125609_motion_variants_and_layout.js";
 const System = defineConfig({
 	name: WEB_CONFIG_NAME,
 	description: "A design system: the values, primitives and compositions an app is built from. A ref is written `{ \"__ref\": \"<kind>:<path>\" }`, so a token is `{ \"__ref\": \"token:<group>/<name>\" }` and a token group is `{ \"__ref\": \"token:<group>\" }`. Build it in this order. Tokens first, in groups by purpose (colors, spacing, radii, type sizes), since everything else names them. Then style properties, each with `values` holding one ref to the token group whose members it accepts (`{ \"__ref\": \"token:color\" }`), so a prop takes token names rather than raw CSS; add a string keyword only for a value no token holds. A style rule's bag holds a prop's values (`\"padding\": \"4\"`, `\"bg\": \"brand\"`), never raw CSS. Then a few primitive components, one layer each, whose props are style properties (a box for layout and surface, a text for type, a pressable for interaction). Then every other component composed from those primitives: its layers name a primitive or an element, its anatomy places them (a node renders a layer, a tag or `Slot` where a slot prop's content lands; `children` is the edge list; `visible` is `{ \"$state\": \"<prop>\" }`; a prop shown in a nested layer is a `forward` route, and `$state` never sits in a node's props), and its style rules set style-property values per layer, keyed by prop values when a variant changes them. Modes (a dark mode is `{ type: \"selector\", value: \".dark\" }`) change token values through a token's `overrides`, so a component never restyles for a mode; modifiers (hover, focus, disabled) name a state, and a style rule applies under one as a `_hover` block inside a layer bag. Composites bundle style values that recur. Last, register canvas roles: the canvas draws with them, one entity per tool (`frame` for the layout primitive, `text` for the text primitive, `image`) whose entries name the components that tool inserts, and a tool whose role is unregistered is disabled. Give each component a `preview` entry under `*` so it shows content, and never write a CSS property name where a style-property name belongs.",
@@ -125,5 +126,6 @@ if (!registeredSchemaMigrations().has(20261001162046)) registerSchemaMigrations(
 if (!registeredSchemaMigrations().has(20261005212405)) registerSchemaMigrations(globalStyleOnMigration);
 if (!registeredSchemaMigrations().has(20261005220312)) registerSchemaMigrations(addAndSubtractMigration);
 if (!registeredSchemaMigrations().has(20261005225949)) registerSchemaMigrations(systemIncludeMigration);
+if (!registeredSchemaMigrations().has(20261006125609)) registerSchemaMigrations(motionVariantsAndLayoutMigration);
 //#endregion
 export { System };

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

@@ -874,8 +874,11 @@ type ComponentReference<Contract = ComponentContractOf<string>, Path extends str
 type ExtensionDefaults<Contract, Delta> = {
   readonly defaultProps?: DefaultsOf<ResolvedProps<Contract, Delta>>;
 };
-/** Style rules as a list, the form `defineComponent.styles` takes, in the stored form: keyed by each
- *  rule's condition. Two rules with the same condition are one rule, the later one. */
+/**
+ * Two style rules with the same condition, as the one rule they are: each layer's bag merged, the
+ * later rule's keys winning ({@link mergeRuleBags}). The list form of `styles` keys rules by their
+ * condition, so a second `{ when: { disabled: true } }` would otherwise replace the first whole.
+ */
 /** A component body as `register` takes one. */
 type ComponentCreateInput = CreateInput<typeof componentFields>;
 /** `Component.item`'s body: the stored fields, with `styles` also taking the rule list

package/dist/entities/system/Component.js

@@ -15,6 +15,7 @@ import { Style, addBagKeyIssues, anatomyPropValue, bagNameEdges, bagRewriteName,
 import { storedPreview } from "../../framework/preview-store.js";
 import { glyphPropsOf, propOwner, propValueDomain, refListOf, resolveComponentProps, stylePropValueLeaves, validateComponentProps } from "../../framework/projections.js";
 import { carriesContent, intoName, isValueSlot, renderBoundProp, routedPropIn, routesContent } from "../../framework/prop-surface.js";
+import { inlineJsMotion } from "./Motion.js";
 import { slotAnatomyPropOf, slotTargetsOf, withoutTruthyTerm } from "../../framework/render-spec.js";
 import { listSlots, namedSlots, slotHostedBy, slotOf, slotsFor } from "../../spec/slot.js";
 import { cellAt } from "../../spec/cell.js";
@@ -730,6 +731,7 @@ function buildBagFor(config, layerElement) {
 		}).optional();
 	}
 	shape.as ??= z.string().optional();
+	shape.motion = z.union([shape.motion ?? 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`." }).optional();
 	let bag;
 	const nested = z.lazy(() => bag).optional();
 	for (const mod of config.list("modifier")) shape[`_${mod.leaf}`] = nested;
@@ -1541,7 +1543,7 @@ const componentFields = z.strictObject({
 	* forwards nothing rather than being quietly translated.
 	*/
 	forwards: Forward.optional(),
-	styles: orList(StyleRule).optional(),
+	styles: orList(StyleRule, { merge: mergeStyleRules }).optional(),
 	/** The props the render reads that the component neither declares nor forwards — its render
 	*  extras (`.render<{ swatchColor?: string }>()`). Read off the render at build like `anatomy`,
 	*  never authored as data. The module consumes them; a component painted out of its anatomy has
@@ -2344,14 +2346,52 @@ subtree: z.boolean().default(true) }).optional()
 	]
 });
 const baseComponentRef = ComponentEntity.ref.bind(ComponentEntity);
+/**
+* Two layer bags of rules with one condition, as one: the later bag's keys win, key by key, and a
+* modifier block (`_hover`) is merged the same way inside. Rules apply in order and a later one wins
+* on the property it sets, so this is what the two said; replacing the earlier bag dropped every key
+* only it set.
+*/
+function mergeRuleBags(earlier, later) {
+	const out = { ...earlier };
+	for (const [key, value] of Object.entries(later)) {
+		const before = out[key];
+		out[key] = key.startsWith("_") && typeof before === "object" && before !== null && !Array.isArray(before) && typeof value === "object" && value !== null && !Array.isArray(value) ? mergeRuleBags(before, value) : value;
+	}
+	return out;
+}
+/**
+* Two style rules with the same condition, as the one rule they are: each layer's bag merged, the
+* later rule's keys winning ({@link mergeRuleBags}). The list form of `styles` keys rules by their
+* condition, so a second `{ when: { disabled: true } }` would otherwise replace the first whole.
+*/
+function mergeStyleRules(earlier, later) {
+	const layers = { ...earlier.layers ?? {} };
+	for (const [layer, bag] of Object.entries(later.layers ?? {})) {
+		const before = layers[layer];
+		layers[layer] = typeof before === "object" && before !== null ? mergeRuleBags(before, bag ?? {}) : bag;
+	}
+	return {
+		...earlier,
+		...later,
+		layers
+	};
+}
 /** Style rules as a list, the form `defineComponent.styles` takes, in the stored form: keyed by each
-*  rule's condition. Two rules with the same condition are one rule, the later one. */
+*  rule's condition. Two rules with the same condition are one rule ({@link mergeStyleRules}), in the
+*  later one's place. */
 function storedStyleRules(rules) {
 	const styles = {};
-	for (const rule of rules) styles[canonicalWhen(rule.when)] = {
-		when: rule.when ?? null,
-		layers: rule.layers
-	};
+	for (const rule of rules) {
+		const key = canonicalWhen(rule.when);
+		const stored = {
+			when: rule.when ?? null,
+			layers: rule.layers
+		};
+		const earlier = styles[key];
+		delete styles[key];
+		styles[key] = earlier ? mergeStyleRules(earlier, stored) : stored;
+	}
 	return styles;
 }
 function componentItem(def) {

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

@@ -3,6 +3,28 @@ import { Named } from "../../framework/named.js";
 import { z } from "zod";
 
 //#region src/entities/system/Motion.d.ts
+/**
+ * A JS preset written in place, as a style rule's `motion` on a layer rather than a `Motion.ref`: the
+ * same fields, with `runtime` optional since in place it can only be `js`. A CSS preset is a class
+ * the stylesheet emits under the preset's name, so one written in place has nothing to emit as; name
+ * it with `Motion.item` instead.
+ */
+declare const inlineJsMotion: z.ZodObject<{
+  transition: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+  exit: z.ZodOptional<z.ZodUnion<readonly [z.ZodRecord<z.ZodString, z.ZodUnknown>, z.ZodString, z.ZodArray<z.ZodString>]>>;
+  layout: z.ZodOptional<z.ZodUnion<readonly [z.ZodBoolean, z.ZodLiteral<"position">, z.ZodLiteral<"size">, z.ZodLiteral<"preserve-aspect">]>>;
+  initial: z.ZodOptional<z.ZodUnion<readonly [z.ZodRecord<z.ZodString, z.ZodUnknown>, z.ZodString, z.ZodArray<z.ZodString>, z.ZodLiteral<false>]>>;
+  variants: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodRecord<z.ZodString, z.ZodUnknown>>>;
+  animate: z.ZodOptional<z.ZodUnion<readonly [z.ZodRecord<z.ZodString, z.ZodUnknown>, z.ZodString, z.ZodArray<z.ZodString>]>>;
+  whileHover: z.ZodOptional<z.ZodUnion<readonly [z.ZodRecord<z.ZodString, z.ZodUnknown>, z.ZodString, z.ZodArray<z.ZodString>]>>;
+  whileTap: z.ZodOptional<z.ZodUnion<readonly [z.ZodRecord<z.ZodString, z.ZodUnknown>, z.ZodString, z.ZodArray<z.ZodString>]>>;
+  whileFocus: z.ZodOptional<z.ZodUnion<readonly [z.ZodRecord<z.ZodString, z.ZodUnknown>, z.ZodString, z.ZodArray<z.ZodString>]>>;
+  whileDrag: z.ZodOptional<z.ZodUnion<readonly [z.ZodRecord<z.ZodString, z.ZodUnknown>, z.ZodString, z.ZodArray<z.ZodString>]>>;
+  drag: z.ZodOptional<z.ZodUnion<readonly [z.ZodBoolean, z.ZodString]>>;
+  dragConstraints: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodNumber>>;
+  dragElastic: z.ZodOptional<z.ZodNumber>;
+  runtime: z.ZodOptional<z.ZodLiteral<"js">>;
+}, z.core.$strict>;
 /** 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. */
 declare const jsMotionPropFields: readonly string[];
@@ -17,19 +39,29 @@ declare const MotionDefinition: EntityClass<z.ZodDiscriminatedUnion<[z.ZodObject
   fillMode: z.ZodOptional<z.ZodString>;
 }, z.core.$strict>, z.ZodObject<{
   runtime: z.ZodLiteral<"js">;
-  initial: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
-  animate: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
-  exit: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+  initial: z.ZodOptional<z.ZodUnion<readonly [z.ZodRecord<z.ZodString, z.ZodUnknown>, z.ZodString, z.ZodArray<z.ZodString>, z.ZodLiteral<false>]>>;
+  animate: z.ZodOptional<z.ZodUnion<readonly [z.ZodRecord<z.ZodString, z.ZodUnknown>, z.ZodString, z.ZodArray<z.ZodString>]>>;
+  exit: z.ZodOptional<z.ZodUnion<readonly [z.ZodRecord<z.ZodString, z.ZodUnknown>, z.ZodString, z.ZodArray<z.ZodString>]>>;
   transition: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
-  whileHover: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
-  whileTap: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
-  whileFocus: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
-  whileDrag: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+  whileHover: z.ZodOptional<z.ZodUnion<readonly [z.ZodRecord<z.ZodString, z.ZodUnknown>, z.ZodString, z.ZodArray<z.ZodString>]>>;
+  whileTap: z.ZodOptional<z.ZodUnion<readonly [z.ZodRecord<z.ZodString, z.ZodUnknown>, z.ZodString, z.ZodArray<z.ZodString>]>>;
+  whileFocus: z.ZodOptional<z.ZodUnion<readonly [z.ZodRecord<z.ZodString, z.ZodUnknown>, z.ZodString, z.ZodArray<z.ZodString>]>>;
+  whileDrag: z.ZodOptional<z.ZodUnion<readonly [z.ZodRecord<z.ZodString, z.ZodUnknown>, z.ZodString, z.ZodArray<z.ZodString>]>>;
+  variants: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodRecord<z.ZodString, z.ZodUnknown>>>;
+  layout: z.ZodOptional<z.ZodUnion<readonly [z.ZodBoolean, z.ZodLiteral<"position">, z.ZodLiteral<"size">, z.ZodLiteral<"preserve-aspect">]>>;
   drag: z.ZodOptional<z.ZodUnion<readonly [z.ZodBoolean, z.ZodString]>>;
   dragConstraints: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodNumber>>;
   dragElastic: z.ZodOptional<z.ZodNumber>;
-}, z.core.$strict>], "runtime">, z.ZodObject<Record<never, never>, z.core.$strip>, "motion", {}, Record<never, never>, false, Record<never, never>, Record<never, never>>;
+}, z.core.$strict>], "runtime">, z.ZodObject<Record<never, never>, z.core.$strip>, "motion", {
+  readonly 'rename-variant': {
+    readonly input: z.ZodObject<{
+      path: z.ZodType<string, string | undefined, z.core.$ZodTypeInternals<string, string | undefined>>;
+      key: z.ZodString;
+      to: z.ZodString;
+    }, z.core.$strip>;
+  };
+}, Record<never, never>, false, Record<never, never>, Record<never, never>>;
 interface MotionClass extends Named<typeof MotionDefinition> {}
 declare const Motion: MotionClass;
 //#endregion
-export { Motion, MotionClass, jsMotionPropFields };
+export { Motion, MotionClass, inlineJsMotion, jsMotionPropFields };

package/dist/entities/system/Motion.js

@@ -1,4 +1,6 @@
+import { pathInput } from "../../framework/schemas.js";
 import { defineEntity } from "../../framework/defineEntity.js";
+import { renameMotionVariant } from "./motion-variants.js";
 import { z } from "zod";
 //#region src/entities/system/Motion.ts
 /**
@@ -7,7 +9,9 @@ import { z } from "zod";
 *  - `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,
-*    which runs under an `AnimatePresence` ancestor when the element unmounts.
+*    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.
 *
@@ -15,7 +19,17 @@ import { z } from "zod";
 * 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.
 */
-const gesture = z.record(z.string(), z.unknown()).optional();
+const values = z.record(z.string(), z.unknown());
+/**
+* A state: the values themselves, or the name of a variant — or several, applied in order — which
+* `motion/react` looks up in the preset's `variants` and, for a child that declares none of its own
+* gestures, in the variants its parent is animating to.
+*/
+const gesture = z.union([
+	values,
+	z.string(),
+	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),
@@ -29,18 +43,37 @@ const CssMotion = z.strictObject({
 });
 const JsMotion = z.strictObject({
 	runtime: z.literal("js").describe(RUNTIME),
-	initial: gesture.describe("The starting values, as `motion/react` reads them."),
+	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: gesture.describe("How the animation moves, such as a spring."),
+	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."),
 	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"),
+		z.literal("size"),
+		z.literal("preserve-aspect")
+	]).optional().describe("Animates the element to its new size and position when they change, such as a height that follows its content."),
 	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.")
 });
+/**
+* A JS preset written in place, as a style rule's `motion` on a layer rather than a `Motion.ref`: the
+* same fields, with `runtime` optional since in place it can only be `js`. A CSS preset is a class
+* the stylesheet emits under the preset's name, so one written in place has nothing to emit as; name
+* it with `Motion.item` instead.
+*/
+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");
@@ -48,7 +81,41 @@ const Motion = defineEntity({
 	kind: "motion",
 	label: "Motion",
 	labelPlural: "Motion presets",
-	fields: z.discriminatedUnion("runtime", [CssMotion, JsMotion])
+	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`
+				};
+			}
+		},
+		handler: (input, config) => renameMotionVariant(config, {
+			path: String(input.path),
+			from: String(input.key),
+			to: String(input.to)
+		})
+	} }
 });
 //#endregion
-export { Motion, jsMotionPropFields };
+export { Motion, inlineJsMotion, jsMotionPropFields };

package/dist/entities/system/Token.js

@@ -4,9 +4,9 @@ import { defineEntity } from "../../framework/defineEntity.js";
 import { defineSubEntity } from "../../framework/defineSubEntity.js";
 import { Font } from "./Font.js";
 import { Modifier } from "./Modifier.js";
+import { spellTokenRead } from "./token-values.js";
 import { WEB_CONFIG_NAME } from "../../configs/platform.js";
 import { authoringPhantom } from "../../framework/utils/authoring-phantom.js";
-import { spellTokenRead } from "./token-values.js";
 import { prepareLinkedTokenBody } from "./linked-token-values.js";
 import { z } from "zod";
 //#region src/entities/system/Token.ts

package/dist/entities/system/defineComponent.js

@@ -1,7 +1,7 @@
 import { canonicalCondition, isRef, kindOf, memberRef, pathOf } from "../../framework/utils/refs.js";
 import { glyphIdentityOf, glyphPackageRefOf, isComponentType } from "./glyph-identity.js";
 import "../../framework/preview-store.js";
-import { Component, canonicalWhen, layerRef } from "./Component.js";
+import { Component, layerRef, storedStyleRules } from "./Component.js";
 //#region src/entities/system/defineComponent.ts
 function build(body) {
 	const handle = (() => null);
@@ -364,14 +364,9 @@ function toStored(body) {
 	if (body.forwards && typeof body.forwards === "object") stored.forwards = storedForwards(body.forwards, body.layers);
 	const rules = body.styles;
 	if (!Array.isArray(rules)) return stored;
-	const styles = {};
-	for (const rule of rules) styles[canonicalWhen(rule.when)] = {
-		when: rule.when ?? null,
-		layers: rule.layers
-	};
 	return {
 		...stored,
-		styles
+		styles: storedStyleRules(rules)
 	};
 }
 /**

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

@@ -2,8 +2,8 @@ import { hasRefMarker } from "../../framework/utils/refs.js";
 import { isCalc } from "./calc.js";
 import { isOklchColor } from "./color.js";
 import { literalValueOf } from "../../framework/projections.js";
-import "../../configs/platform.js";
 import { rootFontSize } from "./token-values.js";
+import "../../configs/platform.js";
 //#region src/entities/system/linked-token-values.ts
 /**
 * Adapt a linked token for the system reading it. The source keeps its authored value; only the

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

@@ -0,0 +1,32 @@
+import { Config } from "../../framework/Config.js";
+
+//#region src/entities/system/motion-presets.d.ts
+/**
+ * A value a JS preset holds that `motion/react` cannot be handed as written: a token a mode or state
+ * decides (`conditional`), which a preset animates as its base value; a token that comes to nothing a
+ * preset can carry (`unresolved`); or an `ease` that is no easing `motion/react` reads (`easing`),
+ * from a token or written in place. The last two leave the field out.
+ */
+interface MotionPresetToken {
+  readonly preset: string;
+  /** The field the value sits under, as a dotted path: `transition.stiffness`. */
+  readonly at: string;
+  /** The token the value comes from; absent for an `ease` written in place. */
+  readonly token?: string;
+  readonly problem: 'conditional' | 'unresolved' | 'easing';
+}
+/**
+ * Every JS-runtime preset, by path, as the props the wrapper spreads onto the animated component.
+ * A token a preset names reaches `motion/react` as its value — `Token.ref('springStiffness/snappy')`
+ * as `400`, a `200ms` duration as `0.2` — since it reads numbers and seconds, not variables.
+ */
+declare function jsMotionPresets(config: Config): Record<string, Record<string, unknown>>;
+/** Every JS preset a style rule writes in place, by its id, resolved as {@link jsMotionPresets} are. */
+declare function inlineMotionProps(config: Config): Record<string, Record<string, unknown>>;
+/** Whether anything in the system animates through `motion/react`: a JS preset, named or written in
+ *  place in a style rule. */
+declare function hasJsMotion(config: Config): boolean;
+/** The tokens JS presets name that a preset cannot carry as one value, for the build to report. */
+declare function motionPresetTokens(config: Config): MotionPresetToken[];
+//#endregion
+export { MotionPresetToken, hasJsMotion, inlineMotionProps, jsMotionPresets, motionPresetTokens };

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

@@ -0,0 +1,239 @@
+import { collectRefs, isRef, kindOf, pathOf } from "../../framework/utils/refs.js";
+import { composedValueFormOf } from "./composed-values.js";
+import { createSliceMemo } from "../../framework/memo.js";
+import { inlineMotions } from "./motion-variants.js";
+import { jsMotionPropFields } from "./Motion.js";
+import { tokenValueRow } from "./token-values.js";
+import { renderValue } from "./value-render.js";
+//#region src/entities/system/motion-presets.ts
+/** A time spelled in CSS, which `motion/react` reads in seconds. */
+const CSS_TIME = /^(-?(?:\d+(?:\.\d*)?|\.\d+))(ms|s)$/;
+/** A bare number, which a token's value is often written as a string of. */
+const BARE_NUMBER = /^-?(?:\d+(?:\.\d*)?|\.\d+)$/;
+/**
+* One token's value as `motion/react` reads it: a time in seconds, a bare number as a number, and
+* anything else as its CSS, which `motion/react` reads for a length or a colour (`'8px'`, `'#fff'`).
+*/
+function motionValue(css) {
+	if (typeof css === "number") return css;
+	const text = css.trim();
+	const time = CSS_TIME.exec(text);
+	if (time) return time[2] === "ms" ? Number(time[1]) / 1e3 : Number(time[1]);
+	return BARE_NUMBER.test(text) ? Number(text) : text;
+}
+/** The easings `motion/react` names for itself, which a preset may write as they are. */
+const MOTION_EASINGS = new Set([
+	"linear",
+	"easeIn",
+	"easeOut",
+	"easeInOut",
+	"circIn",
+	"circOut",
+	"circInOut",
+	"backIn",
+	"backOut",
+	"backInOut",
+	"anticipate"
+]);
+/** CSS's easing keywords, as `motion/react` spells them. `ease` has no name there, so it is its curve. */
+const CSS_EASINGS = {
+	linear: "linear",
+	"ease-in": "easeIn",
+	"ease-out": "easeOut",
+	"ease-in-out": "easeInOut",
+	ease: [
+		.25,
+		.1,
+		.25,
+		1
+	]
+};
+const CUBIC_BEZIER = /^cubic-bezier\(\s*([^,\s]+)\s*,\s*([^,\s]+)\s*,\s*([^,\s]+)\s*,\s*([^,\s)]+)\s*\)$/;
+/**
+* An `ease` as `motion/react` reads it: one of its own names, a CSS keyword as its name, a
+* `cubic-bezier(a, b, c, d)` as `[a, b, c, d]`, a curve already written as four numbers, or a list of
+* any of those (one per keyframe). `undefined` for anything else, which `motion/react` would ignore.
+*/
+function motionEasing(value) {
+	if (typeof value === "string") {
+		const text = value.trim();
+		if (MOTION_EASINGS.has(text)) return text;
+		if (Object.hasOwn(CSS_EASINGS, text)) {
+			const easing = CSS_EASINGS[text];
+			return Array.isArray(easing) ? [...easing] : easing;
+		}
+		const curve = CUBIC_BEZIER.exec(text);
+		if (!curve) return void 0;
+		const points = curve.slice(1).map(Number);
+		return points.every(Number.isFinite) ? points : void 0;
+	}
+	if (Array.isArray(value)) {
+		if (value.length === 4 && value.every((n) => typeof n === "number")) return value;
+		const easings = value.map(motionEasing);
+		return easings.length > 0 && easings.every((e) => e !== void 0) ? easings : void 0;
+	}
+}
+/**
+* A preset's value with every token it names resolved, or `undefined` when one of them resolves to
+* nothing. Values and keyframe lists are walked; a ref, a string with refs in it and a composed value
+* are each read to their literal. A token a mode decides is read as its base value and reported.
+*/
+function resolvePresetValue({ config, value, at, report }) {
+	const refs = collectRefs(value).filter((target) => kindOf(target) === "token");
+	const container = Array.isArray(value) || typeof value === "object" && value !== null && !isRef(value) && !composedValueFormOf(value);
+	if (refs.length === 0 && !container) return { value };
+	if (isRef(value)) {
+		const row = tokenValueRow({
+			config,
+			target: value.__ref
+		});
+		if (row?.state.kind === "value") return { value: motionValue(row.state.value.css) };
+	}
+	if (Array.isArray(value)) {
+		const items = [];
+		for (const [index, item] of value.entries()) {
+			const resolved = resolvePresetValue({
+				config,
+				value: item,
+				at: `${at}.${index}`,
+				report
+			});
+			if (!resolved) return void 0;
+			items.push(resolved.value);
+		}
+		return { value: items };
+	}
+	if (typeof value === "object" && value !== null && !isRef(value) && !composedValueFormOf(value)) {
+		const fields = {};
+		for (const [key, inner] of Object.entries(value)) {
+			const resolved = resolvePresetValue({
+				config,
+				value: inner,
+				at: `${at}.${key}`,
+				report
+			});
+			if (!resolved) continue;
+			if (key !== "ease") {
+				fields[key] = resolved.value;
+				continue;
+			}
+			const easing = motionEasing(resolved.value);
+			if (easing !== void 0) {
+				fields[key] = easing;
+				continue;
+			}
+			const tokens = collectRefs(inner).filter((target) => kindOf(target) === "token");
+			if (tokens.length === 0) report({
+				at: `${at}.${key}`,
+				problem: "easing"
+			});
+			for (const target of tokens) report({
+				at: `${at}.${key}`,
+				token: pathOf(target),
+				problem: "easing"
+			});
+		}
+		return { value: fields };
+	}
+	for (const target of refs) if (tokenValueRow({
+		config,
+		target
+	})?.state.kind === "conditional") report({
+		at,
+		token: pathOf(target),
+		problem: "conditional"
+	});
+	const literal = renderValue({
+		config,
+		value,
+		refs: "literal"
+	});
+	if (literal === void 0) {
+		const missing = refs.filter((target) => {
+			const kind = tokenValueRow({
+				config,
+				target
+			})?.state.kind;
+			return kind === void 0 || kind === "unresolved";
+		});
+		for (const target of missing.length > 0 ? missing : refs) report({
+			at,
+			token: pathOf(target),
+			problem: "unresolved"
+		});
+		return;
+	}
+	return { value: motionValue(literal) };
+}
+/** One preset body as the props `motion.create` reads, reporting under `preset` what it could not carry. */
+function resolveBody(config, preset, body, tokens) {
+	const props = {};
+	for (const field of jsMotionPropFields) {
+		if (body[field] === void 0) continue;
+		const resolved = resolvePresetValue({
+			config,
+			value: body[field],
+			at: field,
+			report: (problem) => tokens.push({
+				preset,
+				...problem
+			})
+		});
+		if (resolved) props[field] = resolved.value;
+	}
+	return props;
+}
+/**
+* Every JS preset as the props `motion.create` reads, with the tokens they name resolved, and the
+* tokens that could not be handed over as one value: the named presets by path, and the ones a style
+* rule writes in place by the id `inlineMotionId` gives them.
+*/
+const resolveJsMotionPresets = createSliceMemo({
+	kinds: [
+		"motion",
+		"component",
+		"token",
+		"settings",
+		"font"
+	],
+	compute: (config) => {
+		const presets = {};
+		const inline = {};
+		const tokens = [];
+		for (const preset of config.list("motion")) {
+			const body = preset.toJSON();
+			if (body.runtime !== "js") continue;
+			presets[preset.path] = resolveBody(config, preset.path, body, tokens);
+		}
+		for (const entry of inlineMotions(config).valid) inline[entry.id] = resolveBody(config, entry.id, entry.body, tokens);
+		return {
+			presets,
+			inline,
+			tokens
+		};
+	}
+});
+/**
+* Every JS-runtime preset, by path, as the props the wrapper spreads onto the animated component.
+* A token a preset names reaches `motion/react` as its value — `Token.ref('springStiffness/snappy')`
+* as `400`, a `200ms` duration as `0.2` — since it reads numbers and seconds, not variables.
+*/
+function jsMotionPresets(config) {
+	return resolveJsMotionPresets(config).presets;
+}
+/** Every JS preset a style rule writes in place, by its id, resolved as {@link jsMotionPresets} are. */
+function inlineMotionProps(config) {
+	return resolveJsMotionPresets(config).inline;
+}
+/** Whether anything in the system animates through `motion/react`: a JS preset, named or written in
+*  place in a style rule. */
+function hasJsMotion(config) {
+	const { presets, inline } = resolveJsMotionPresets(config);
+	return Object.keys(presets).length > 0 || Object.keys(inline).length > 0;
+}
+/** The tokens JS presets name that a preset cannot carry as one value, for the build to report. */
+function motionPresetTokens(config) {
+	return resolveJsMotionPresets(config).tokens;
+}
+//#endregion
+export { hasJsMotion, inlineMotionProps, jsMotionPresets, motionPresetTokens };