@yahoo/uds-create-config 4.37.0 → 4.37.2

package/dist/configs/system.js

@@ -43,6 +43,7 @@ import { globalStyleDerivedColorsMigration } from "../migrations/20260923163604_
 import { slotCodeFormsMigration } from "../migrations/20260924044539_slot_code_forms.js";
 import { canvasRoleSlotMigration } from "../migrations/20260925143319_canvas_role_slot.js";
 import { linkOnLinkedMigration } from "../migrations/20260928180801_link_on_linked.js";
+import { compositePropLayerMigration } from "../migrations/20260928215509_composite_prop_layer.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.",
@@ -97,5 +98,6 @@ if (!registeredSchemaMigrations().has(20260923163604)) registerSchemaMigrations(
 if (!registeredSchemaMigrations().has(20260924044539)) registerSchemaMigrations(slotCodeFormsMigration);
 if (!registeredSchemaMigrations().has(20260925143319)) registerSchemaMigrations(canvasRoleSlotMigration);
 if (!registeredSchemaMigrations().has(20260928180801)) registerSchemaMigrations(linkOnLinkedMigration);
+if (!registeredSchemaMigrations().has(20260928215509)) registerSchemaMigrations(compositePropLayerMigration);
 //#endregion
 export { System };

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

@@ -176,17 +176,46 @@ declare const propShapeDefinition: z.ZodDiscriminatedUnion<[z.ZodObject<{
   }, z.core.$strip>]>, z.ZodArray<z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodBoolean, z.ZodObject<{
     __ref: z.ZodString;
   }, z.core.$strip>]>>]>>>;
-}, z.core.$strict>, z.ZodObject<{
+}, z.core.$strict>, z.ZodPipe<z.ZodObject<{
   type: z.ZodLiteral<"composite">;
   value: z.ZodObject<{
     __ref: z.ZodString;
   }, z.core.$strip>;
+  layer: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
+    __ref: z.ZodString;
+  }, z.core.$strip>]>>;
   when: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodBoolean, z.ZodObject<{
     __ref: z.ZodString;
   }, z.core.$strip>]>, z.ZodArray<z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodBoolean, z.ZodObject<{
     __ref: z.ZodString;
   }, z.core.$strip>]>>]>>>;
-}, z.core.$strict>, z.ZodObject<{
+}, z.core.$strict>, z.ZodTransform<{
+  type: "composite";
+  value: {
+    __ref: string;
+  };
+  layer?: string | {
+    __ref: string;
+  } | undefined;
+  when?: Record<string, string | number | boolean | {
+    __ref: string;
+  } | (string | number | boolean | {
+    __ref: string;
+  })[]> | undefined;
+}, {
+  type: "composite";
+  value: {
+    __ref: string;
+  };
+  layer?: string | {
+    __ref: string;
+  } | undefined;
+  when?: Record<string, string | number | boolean | {
+    __ref: string;
+  } | (string | number | boolean | {
+    __ref: string;
+  })[]> | undefined;
+}>>, z.ZodObject<{
   type: z.ZodLiteral<"motion">;
   value: z.ZodDefault<z.ZodObject<{
     __ref: z.ZodString;

package/dist/entities/system/Component.js

@@ -360,6 +360,14 @@ function routedTarget(decl) {
 		into: decl.target.slice(separator + 1)
 	};
 }
+/** A composite prop's authored `layer` name as the layer ref it is stored as — see {@link routedTarget}
+*  for why the coercion lives in the schema. */
+function layerAsRef(decl) {
+	return typeof decl.layer === "string" ? {
+		...decl,
+		layer: layerRef(decl.layer)
+	} : decl;
+}
 /** A prop that applies only under a condition on its siblings — the record a style rule's `when`
 *  holds. Open here, where no owner is known; `propSchemaFor` narrows it to the owner's props. */
 const conditionLeaf = z.union([
@@ -415,8 +423,9 @@ function propShapeWith(when) {
 		z.strictObject({
 			type: z.literal("composite"),
 			value: refSchema,
+			layer: z.union([z.string().min(1), refSchema]).optional(),
 			when
-		}),
+		}).transform(layerAsRef),
 		z.strictObject({
 			type: z.literal("motion"),
 			value: refSchema.default({ __ref: "motion:" }),

package/dist/entities/system/component-module.d.ts

@@ -15,9 +15,14 @@ interface ComponentModuleSource {
    *  authored name is `Component.export`, and the two differ for a grouped registration under
    *  another leaf and for a draft rename the source file has not caught up with. */
   readonly exportName: string;
-  /** The ctx-shaped registry export emitted beside the component, `<leaf>Entry`. */
-  readonly entryExportName: string;
 }
+/**
+ * The static an emitted module stamps a component's registry-entry facts on: what
+ * `makeComponentEntry` takes beyond the component (`childless`, `computed`). A static and not an
+ * export, because React Fast Refresh treats a module exporting anything but components as a
+ * full-reload boundary — an `__udsEntries` export made every component edit reload the page.
+ */
+declare const COMPONENT_ENTRY_STATIC = "__udsEntry";
 /** One component export an authored import can resolve through the runtime registry. */
 interface ComponentRegistryImportBinding {
   readonly componentRef: string;
@@ -63,4 +68,4 @@ declare function componentModuleKey(config: Config, filePath: string): string |
  */
 declare function componentModuleSource(config: Config, componentPathOrRef: string | Ref): ComponentModuleSource | undefined;
 //#endregion
-export { ComponentModuleSource, ComponentRegistryImport, ComponentRegistryImportBinding, componentModuleFilePaths, componentModuleKey, componentModuleSource, componentRegistryImports };
+export { COMPONENT_ENTRY_STATIC, ComponentModuleSource, ComponentRegistryImport, ComponentRegistryImportBinding, componentModuleFilePaths, componentModuleKey, componentModuleSource, componentRegistryImports };

package/dist/entities/system/component-module.js

@@ -28,9 +28,14 @@ const WEB_RUNTIME_KINDS = [
 	"motion",
 	"composite"
 ];
-/** The name an emitted module exports a component under: its path's leaf. Codegen's
-*  `componentEntryExportName` is this leaf plus `Entry`; the config package cannot import codegen, so
-*  the leaf is computed here as well. */
+/**
+* The static an emitted module stamps a component's registry-entry facts on: what
+* `makeComponentEntry` takes beyond the component (`childless`, `computed`). A static and not an
+* export, because React Fast Refresh treats a module exporting anything but components as a
+* full-reload boundary — an `__udsEntries` export made every component edit reload the page.
+*/
+const COMPONENT_ENTRY_STATIC = "__udsEntry";
+/** The name an emitted module exports a component under: its path's leaf. */
 function componentModuleExportName(path) {
 	return path.split("/").pop() ?? path;
 }
@@ -258,9 +263,8 @@ function componentModuleSource(config, componentPathOrRef) {
 		componentRef: Component.ref(component.path).__ref,
 		filePath: ref.path,
 		moduleKey,
-		exportName: forward,
-		entryExportName: `${forward}Entry`
+		exportName: forward
 	};
 }
 //#endregion
-export { componentModuleFilePaths, componentModuleKey, componentModuleSource, componentRegistryImports };
+export { COMPONENT_ENTRY_STATIC, componentModuleFilePaths, componentModuleKey, componentModuleSource, componentRegistryImports };

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

@@ -189,6 +189,9 @@ type PropDecl<Path extends string = string> = SlotDecl | ForwardDecl<Path> | {
 } | {
   type: 'composite';
   value: Ref$1;
+  /** The layer the chosen member styles; the root by default. Authored as its name, stored as a
+   *  layer ref. */
+  layer?: string | Ref$1;
   required?: boolean;
   when?: PropCondition;
 } | {

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 = 20260928180801;
+declare const SERIALIZED_CONFIG_VERSION = 20260928215509;
 interface SerializedConfig {
   /** See {@link SERIALIZED_CONFIG_VERSION}. Always written; a stored artifact may lack it. */
   readonly version: number;

package/dist/framework/Config.js

@@ -5135,7 +5135,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 > 20260928180801) throw new SchemaVersionTooNew(claimed);
+		if (claimed > 20260928215509) 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

@@ -84,6 +84,9 @@ interface ComponentRuleClass {
    *  emitted module tests it with `=== true`. */
   readonly when: Record<string, unknown>;
   readonly className: string;
+  /** Set when the class comes from a composite PROP rather than a style rule: the member whose bag
+   *  the class paints. See {@link compositePropRuleClasses}. */
+  readonly composite?: string;
 }
 /**
  * Every conditional class a component's style rules produce.
@@ -137,23 +140,59 @@ declare function componentMotionClasses(config: Config, path: string): Component
  * defaults, because a value the caller didn't set has to read the default — the same rule
  * {@link layerStyles} follows.
  *
- * Keyed by layer even though today it only ever names the ROOT one, so a caller needs no opinion
- * about which layer that is: an instance's own props land where its own props land.
+ * Keyed by layer: a prop lands on the layer it names (the root by default), or on the layer that
+ * forwards it. Each member contributes two classes, the composite's own and the component's rule
+ * class for it; {@link componentRuleClasses} lists the second too, for the module and the sheet, so
+ * a projection reading both skips its `composite` entries.
  */
 declare function componentPropClasses(config: Config, path: string, state?: Record<string, unknown>): Record<string, string[]>;
+/** One composite an instance's props pick, and where it lands. */
+interface PickedComposite {
+  readonly prop: string;
+  readonly layer: string;
+  /** The member's path (`textVariant/title1/emphasized`). */
+  readonly member: string;
+  /** The value as a caller writes it, the member's path under its group (`title1/emphasized`). */
+  readonly value: string;
+}
+/**
+ * The composites an instance's props pick, resolved over the component's defaults: each one beats
+ * the component's own rules on its layer (see {@link compositePropRuleClasses}).
+ *
+ * A projection that paints a component's rule declarations as props, as the component editor's cells
+ * do, needs this to hold that precedence: a rule's `fontSize` painted as a prop would otherwise beat
+ * the member a caller picked, where the stylesheet has the member win.
+ */
+declare function componentPropComposites(config: Config, path: string, state?: Record<string, unknown>): PickedComposite[];
+/**
+ * A style rule's bag with each composite it names written out in place: the member's styles first,
+ * the bag's own keys over them, and the composite's marker (`--<prefix>-composite-<group>`), so
+ * `_on<Group><Member>` still finds it.
+ *
+ * A composite a component's OWN rule names is part of that layer's defaults, the same as a
+ * `fontSize` beside it: the layer's element beats it with its variants, and a key the bag spells
+ * next to it overrides it (`{ textVariant: 'ui6', lineHeight: 'tight' }`). Forwarded to the element
+ * as a prop instead, it arrived as a caller's pick, and a caller's pick beats the element's
+ * variants (see {@link compositePropRuleClasses}), so FormInput's own `ui6` beat the `size="xs"`
+ * it renders its Input at. Only a composite passed as a prop at a call site takes that route.
+ *
+ * `element` is the layer's element. A key is a composite when the element declares it as one, so a
+ * plain-tag layer (which declares nothing) and a key naming no member are left as they are.
+ */
+declare function inlineRuleComposites(config: Config, element: unknown, bag: Record<string, unknown>): Record<string, unknown>;
 /**
  * The props a style rule's bag sends to each layer's ELEMENT rather than to the stylesheet, for one
  * instance. The same split the emitted module makes when it builds a layer's routed bundle.
  *
  * What makes a bag key CSS is that a style property claims it: that value lives in the stylesheet
  * under the rule's condition class. Everything else in the bag is a prop of the layer's element and
- * travels to it as one, whether or not the element declares it: a composite (`variant` on a
- * `Text`-backed layer, which the receiver resolves to its own class), the receiver's own variant or
+ * travels to it as one, whether or not the element declares it: the receiver's own variant or
  * scalar prop (`size: 'sm'` on an Icon layer), or an attribute of a plain element (`as: 'div'`,
  * `type: 'button'`, `aria-hidden`), or a value the rule hands a receiver's forward or slot
  * (`children: 'AI'` on a badge layer, `icon: 'XIcon'` on a button layer), which the emitted module
- * routes the same way. A style property under another name and motion stay out, since the
- * stylesheet and the motion classes already carry them.
+ * routes the same way. A style property under another name, a composite (written into the rule's
+ * declarations, {@link inlineRuleComposites}) and motion stay out, since the stylesheet and the
+ * motion classes already carry them.
  *
  * Forwarding rather than resolving is what makes a layer's styling live-editable at all: a class only
  * exists once a build has emitted the stylesheet, so an edit that makes a NEW style rule paints
@@ -258,4 +297,4 @@ declare function stylePropClasses(config: Config, path: string): Map<string, str
  */
 declare function modifierUtilitiesUsed(config: Config): Set<string>;
 //#endregion
-export { ComponentRuleClass, SplitStyleProps, componentClassBase, componentCompositeClasses, componentLayerClass, componentMotionClasses, componentPropClasses, componentRuleClasses, forceModeAttribute, forceModeAttributeOf, forceModeProp, forceModePropGroup, forceModePropValue, forceModeProps, forceStateAttribute, isForceModeProp, kebabComponent, layerRoutedProps, modifierUtilitiesUsed, motionClassName, ruleCondition, splitStyleProps, stylePropClassBase, stylePropClassName, stylePropClasses, styleRuleMotionClasses };
+export { ComponentRuleClass, PickedComposite, SplitStyleProps, componentClassBase, componentCompositeClasses, componentLayerClass, componentMotionClasses, componentPropClasses, componentPropComposites, componentRuleClasses, forceModeAttribute, forceModeAttributeOf, forceModeProp, forceModePropGroup, forceModePropValue, forceModeProps, forceStateAttribute, inlineRuleComposites, isForceModeProp, kebabComponent, layerRoutedProps, modifierUtilitiesUsed, motionClassName, ruleCondition, splitStyleProps, stylePropClassBase, stylePropClassName, stylePropClasses, styleRuleMotionClasses };

package/dist/framework/class-names.js

@@ -1,7 +1,7 @@
 import { isRef, kindOf, memberOf, pathOf, refLeaf } from "./utils/refs.js";
 import { forwardsOf, rootLayerOf } from "../entities/system/element.js";
 import { createSliceMemo } from "./memo.js";
-import { classPrefixOf } from "../entities/system/Settings.js";
+import { classPrefixOf, varPrefixOf } from "../entities/system/Settings.js";
 import { storedPreview } from "./preview-store.js";
 import { authoredValue, className, negatedCssValue, renderStyleValue, resolveComponentProps, stylePropLeafForToken, stylePropValueLeaves, stylePropertyPathFor } from "./projections.js";
 import { ruleApplies } from "./layer-styles.js";
@@ -156,7 +156,11 @@ function componentRuleClasses(config, path) {
 * that slice is part of the key.
 */
 const ruleClassCache = createSliceMemo({
-	kinds: ["component", "settings"],
+	kinds: [
+		"component",
+		"composite",
+		"settings"
+	],
 	compute: (_config) => /* @__PURE__ */ new Map()
 });
 function computeRuleClasses(config, path) {
@@ -178,6 +182,44 @@ function computeRuleClasses(config, path) {
 			});
 		}
 	}
+	out.push(...compositePropRuleClasses(config, path));
+	return out;
+}
+/**
+* The classes a component's composite PROPS apply: one per member of the bound group, conditional on
+* the prop naming that member — `variant: 'body1'` → `uds-text-root-variant-body1` — on the layer the
+* prop names (the root by default).
+*
+* A composite a caller picks is an explicit choice, not a default the layer starts from, so it has to
+* win over the component's own type. The shared composite class can't: it is emitted before every
+* component rule at the same zero specificity, so a layer that sets `fontSize` itself kept its size
+* whatever preset was asked for (UDS-4610). As a rule class, the member's bag is emitted after the
+* component's `when` rules at their specificity, so it beats the layer's base rules and its variants,
+* and a style-prop utility — a later cascade layer — still beats it.
+*
+* Both kinds {@link compositePropsOf} reads: a prop the component declares (an extension a linking
+* config adds is part of the resolved body), and one it exposes from a component layer through
+* `forwards` — its module takes that value out of the bag, so the receiver never sees it, and the
+* class has to be this component's.
+*/
+function compositePropRuleClasses(config, path) {
+	const declared = compositePropsOf(config, path);
+	if (!declared) return [];
+	const base = componentClassBase(config, path);
+	const out = [];
+	for (const [prop, groupRef, layer] of declared.groups) {
+		const group = pathOf(groupRef);
+		for (const composite of config.list("composite")) {
+			if (!composite.path.startsWith(`${group}/`)) continue;
+			const when = { [prop]: composite.path.slice(group.length + 1) };
+			out.push({
+				layer,
+				when,
+				className: `${base}-${layer}-${ruleCondition(when)}`,
+				composite: composite.path
+			});
+		}
+	}
 	return out;
 }
 /** The MEMBER a bag value names, under the group its prop binds — the value is either the qualified
@@ -290,27 +332,46 @@ function componentMotionClasses(config, path) {
 * defaults, because a value the caller didn't set has to read the default — the same rule
 * {@link layerStyles} follows.
 *
-* Keyed by layer even though today it only ever names the ROOT one, so a caller needs no opinion
-* about which layer that is: an instance's own props land where its own props land.
+* Keyed by layer: a prop lands on the layer it names (the root by default), or on the layer that
+* forwards it. Each member contributes two classes, the composite's own and the component's rule
+* class for it; {@link componentRuleClasses} lists the second too, for the module and the sheet, so
+* a projection reading both skips its `composite` entries.
 */
 function componentPropClasses(config, path, state = {}) {
+	const out = {};
+	for (const { prop, layer, member, value } of componentPropComposites(config, path, state)) {
+		const classes = out[layer] ?? [];
+		classes.push(className(config, "composite", member), `${componentClassBase(config, path)}-${layer}-${ruleCondition({ [prop]: value })}`);
+		out[layer] = classes;
+	}
+	return out;
+}
+/**
+* The composites an instance's props pick, resolved over the component's defaults: each one beats
+* the component's own rules on its layer (see {@link compositePropRuleClasses}).
+*
+* A projection that paints a component's rule declarations as props, as the component editor's cells
+* do, needs this to hold that precedence: a rule's `fontSize` painted as a prop would otherwise beat
+* the member a caller picked, where the stylesheet has the member win.
+*/
+function componentPropComposites(config, path, state = {}) {
 	const declared = compositePropsOf(config, path);
-	if (!declared) return {};
-	const { groups, defaultProps } = declared;
-	if (groups.length === 0) return {};
+	if (!declared || declared.groups.length === 0) return [];
 	const resolved = {
-		...defaultProps,
+		...declared.defaultProps,
 		...state
 	};
-	const out = {};
-	for (const [prop, group, layer] of groups) {
-		const value = resolved[prop];
-		const target = memberNamed(group, value);
-		if (target === void 0) continue;
-		if (!config.resolve("composite", target)) continue;
-		const classes = out[layer] ?? [];
-		classes.push(className(config, "composite", target));
-		out[layer] = classes;
+	const out = [];
+	for (const [prop, group, layer] of declared.groups) {
+		const member = memberNamed(group, resolved[prop]);
+		if (member === void 0) continue;
+		if (!config.resolve("composite", member)) continue;
+		out.push({
+			prop,
+			layer,
+			member,
+			value: member.slice(pathOf(group).length + 1)
+		});
 	}
 	return out;
 }
@@ -329,11 +390,13 @@ function compositePropsOf(config, path, seen = /* @__PURE__ */ new Set()) {
 		let defaultProps = {};
 		for (const [prop, decl] of Object.entries(props)) {
 			if (decl?.type !== "composite") continue;
+			const named = isRef(decl.layer) ? pathOf(decl.layer.__ref) : decl.layer;
+			const layer = typeof named === "string" && named in layers ? named : root;
 			const group = isRef(decl.value) ? decl.value.__ref : void 0;
 			if (group) groups.push([
 				prop,
 				group,
-				root
+				layer
 			]);
 		}
 		const inner = new Set([...seen, path]);
@@ -378,18 +441,68 @@ const compositePropsCache = createSliceMemo({
 	compute: (_config) => /* @__PURE__ */ new Map()
 });
 /**
+* A style rule's bag with each composite it names written out in place: the member's styles first,
+* the bag's own keys over them, and the composite's marker (`--<prefix>-composite-<group>`), so
+* `_on<Group><Member>` still finds it.
+*
+* A composite a component's OWN rule names is part of that layer's defaults, the same as a
+* `fontSize` beside it: the layer's element beats it with its variants, and a key the bag spells
+* next to it overrides it (`{ textVariant: 'ui6', lineHeight: 'tight' }`). Forwarded to the element
+* as a prop instead, it arrived as a caller's pick, and a caller's pick beats the element's
+* variants (see {@link compositePropRuleClasses}), so FormInput's own `ui6` beat the `size="xs"`
+* it renders its Input at. Only a composite passed as a prop at a call site takes that route.
+*
+* `element` is the layer's element. A key is a composite when the element declares it as one, so a
+* plain-tag layer (which declares nothing) and a key naming no member are left as they are.
+*/
+function inlineRuleComposites(config, element, bag) {
+	if (!isRef(element)) return bag;
+	const declared = resolveComponentProps(config, pathOf(element.__ref));
+	let inlined;
+	const rest = {};
+	for (const [key, value] of Object.entries(bag)) {
+		const bound = declared[key]?.type === "composite" ? declared[key].value : void 0;
+		const member = isRef(bound) ? memberNamed(bound.__ref, value) : void 0;
+		const composite = member ? config.resolve("composite", member) : void 0;
+		if (!member || !composite) {
+			rest[key] = value;
+			continue;
+		}
+		const { styles = {} } = composite.toJSON();
+		const at = member.indexOf("/");
+		inlined = mergeStyleBags(inlined ?? {}, {
+			...styles,
+			[`--${varPrefixOf(config)}-composite-${member.slice(0, at)}`]: member.slice(at + 1)
+		});
+	}
+	return inlined ? mergeStyleBags(inlined, rest) : bag;
+}
+/** `over` laid on `base`, with a modifier block (`_md`, `_hover`) merged key by key rather than
+*  replaced, so a bag that adds one breakpoint value keeps the composite's others. */
+function mergeStyleBags(base, over) {
+	const out = { ...base };
+	for (const [key, value] of Object.entries(over)) {
+		const prior = out[key];
+		out[key] = key.startsWith("_") && isPlainBlock(prior) && isPlainBlock(value) ? mergeStyleBags(prior, value) : value;
+	}
+	return out;
+}
+function isPlainBlock(value) {
+	return typeof value === "object" && value !== null && !isRef(value);
+}
+/**
 * The props a style rule's bag sends to each layer's ELEMENT rather than to the stylesheet, for one
 * instance. The same split the emitted module makes when it builds a layer's routed bundle.
 *
 * What makes a bag key CSS is that a style property claims it: that value lives in the stylesheet
 * under the rule's condition class. Everything else in the bag is a prop of the layer's element and
-* travels to it as one, whether or not the element declares it: a composite (`variant` on a
-* `Text`-backed layer, which the receiver resolves to its own class), the receiver's own variant or
+* travels to it as one, whether or not the element declares it: the receiver's own variant or
 * scalar prop (`size: 'sm'` on an Icon layer), or an attribute of a plain element (`as: 'div'`,
 * `type: 'button'`, `aria-hidden`), or a value the rule hands a receiver's forward or slot
 * (`children: 'AI'` on a badge layer, `icon: 'XIcon'` on a button layer), which the emitted module
-* routes the same way. A style property under another name and motion stay out, since the
-* stylesheet and the motion classes already carry them.
+* routes the same way. A style property under another name, a composite (written into the rule's
+* declarations, {@link inlineRuleComposites}) and motion stay out, since the stylesheet and the
+* motion classes already carry them.
 *
 * Forwarding rather than resolving is what makes a layer's styling live-editable at all: a class only
 * exists once a build has emitted the stylesheet, so an edit that makes a NEW style rule paints
@@ -416,7 +529,7 @@ function layerRoutedProps(config, path, state = {}) {
 			}) ?? prop;
 			if (config.resolve("style-property", styleKey)) continue;
 			const decl = declared[prop];
-			if (decl?.type === "styleProperty" || decl?.type === "motion") continue;
+			if (decl?.type === "styleProperty" || decl?.type === "motion" || decl?.type === "composite") continue;
 			out[layer] ??= {};
 			out[layer][prop] = authoredValue(config, prop, value);
 		}
@@ -715,4 +828,4 @@ function classesUsedBy(config, stored, token, bagsOf) {
 	return found;
 }
 //#endregion
-export { componentClassBase, componentCompositeClasses, componentLayerClass, componentMotionClasses, componentPropClasses, componentRuleClasses, forceModeAttribute, forceModeAttributeOf, forceModeProp, forceModePropGroup, forceModePropValue, forceModeProps, forceStateAttribute, isForceModeProp, kebabComponent, layerRoutedProps, modifierUtilitiesUsed, motionClassName, ruleCondition, splitStyleProps, stylePropClassBase, stylePropClassName, stylePropClasses, styleRuleMotionClasses };
+export { componentClassBase, componentCompositeClasses, componentLayerClass, componentMotionClasses, componentPropClasses, componentPropComposites, componentRuleClasses, forceModeAttribute, forceModeAttributeOf, forceModeProp, forceModePropGroup, forceModePropValue, forceModeProps, forceStateAttribute, inlineRuleComposites, isForceModeProp, kebabComponent, layerRoutedProps, modifierUtilitiesUsed, motionClassName, ruleCondition, splitStyleProps, stylePropClassBase, stylePropClassName, stylePropClasses, styleRuleMotionClasses };

package/dist/framework/render-spec.js

@@ -1078,6 +1078,7 @@ function classesFor(config, path, layer, state, extra) {
 	parts.push(...styleRuleMotionClasses(config, path, state)[layer] ?? []);
 	for (const rule of componentRuleClasses(config, path)) {
 		if (rule.layer !== layer) continue;
+		if (rule.composite) continue;
 		if (Object.entries(rule.when).every(([prop, value]) => String(state[prop]) === String(value))) parts.push(rule.className);
 	}
 	parts.push(...extra);

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 = 20260928180801;
+declare const CURRENT_SCHEMA_VERSION = 20260928215509;
 /** 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 = 20260928180801;
+const CURRENT_SCHEMA_VERSION = 20260928215509;
 /** 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 > 20260928180801) 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 > 20260928215509) 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 ?? 20260928180801;
+	const target = options?.target ?? 20260928215509;
 	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 ?? 20260928180801;
+	const target = options?.target ?? 20260928215509;
 	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 ?? 20260928180801;
+	const target = options?.target ?? 20260928215509;
 	const entries = [];
 	const held = [];
 	const retired = [];