@yahoo/uds-create-config 5.15.1 → 5.16.0

package/dist/capture/class-grammar.js

@@ -54,7 +54,7 @@ function classGrammar(config) {
 			const list = byCss.get(property) ?? [];
 			list.push(matchFor({
 				path: entity.path,
-				arbitrary: body.arbitrary === true,
+				arbitrary: Boolean(body.arbitrary),
 				negates: body.negates === true
 			}));
 			byCss.set(property, list);

package/dist/configs/react-native-system.d.ts

@@ -95,7 +95,37 @@ declare const ReactNativeSystemDefinition: ConfigClass<{
     values: _$zod.ZodOptional<_$zod.ZodArray<_$zod.ZodType<StylePropValue, unknown, _$zod_v4_core0.$ZodTypeInternals<StylePropValue, unknown>>>>;
     responsive: _$zod.ZodDefault<_$zod.ZodBoolean>;
     classPrefix: _$zod.ZodOptional<_$zod.ZodString>;
-    arbitrary: _$zod.ZodDefault<_$zod.ZodBoolean>;
+    arbitrary: _$zod.ZodDefault<_$zod.ZodUnion<readonly [_$zod.ZodBoolean, _$zod.ZodEnum<{
+      ch: "ch";
+      dvh: "dvh";
+      dvw: "dvw";
+      em: "em";
+      ex: "ex";
+      lvh: "lvh";
+      lvw: "lvw";
+      px: "px";
+      rem: "rem";
+      svh: "svh";
+      svw: "svw";
+      vh: "vh";
+      vmax: "vmax";
+      vmin: "vmin";
+      vw: "vw";
+      "%": "%";
+      deg: "deg";
+      rad: "rad";
+      turn: "turn";
+      s: "s";
+      ms: "ms";
+      fr: "fr";
+      unitless: "unitless";
+      lh: "lh";
+      rlh: "rlh";
+      cqw: "cqw";
+      cqh: "cqh";
+      cqi: "cqi";
+      cqb: "cqb";
+    }>]>>;
     negates: _$zod.ZodDefault<_$zod.ZodBoolean>;
     selector: _$zod.ZodOptional<_$zod.ZodString>;
     alpha: _$zod.ZodOptional<_$zod.ZodString>;

package/dist/configs/system.js

@@ -59,6 +59,7 @@ import { addAndSubtractMigration } from "../migrations/20261005220312_add_and_su
 import { systemIncludeMigration } from "../migrations/20261005225949_system_include.js";
 import { motionVariantsAndLayoutMigration } from "../migrations/20261006125609_motion_variants_and_layout.js";
 import { systemScriptsMigration } from "../migrations/20261007182932_system_scripts.js";
+import { styleNumbersNameNumericValuesMigration } from "../migrations/20261007210309_style_numbers_name_numeric_values.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.",
@@ -129,5 +130,6 @@ if (!registeredSchemaMigrations().has(20261005220312)) registerSchemaMigrations(
 if (!registeredSchemaMigrations().has(20261005225949)) registerSchemaMigrations(systemIncludeMigration);
 if (!registeredSchemaMigrations().has(20261006125609)) registerSchemaMigrations(motionVariantsAndLayoutMigration);
 if (!registeredSchemaMigrations().has(20261007182932)) registerSchemaMigrations(systemScriptsMigration);
+if (!registeredSchemaMigrations().has(20261007210309)) registerSchemaMigrations(styleNumbersNameNumericValuesMigration);
 //#endregion
 export { System };

package/dist/entities/native/NativeStyleProperty.d.ts

@@ -168,7 +168,37 @@ declare const NativeStyleProperty: EntityClass<z.ZodObject<Omit<{
   values: z.ZodOptional<z.ZodArray<z.ZodType<StylePropValue, unknown, z.core.$ZodTypeInternals<StylePropValue, unknown>>>>;
   responsive: z.ZodDefault<z.ZodBoolean>;
   classPrefix: z.ZodOptional<z.ZodString>;
-  arbitrary: z.ZodDefault<z.ZodBoolean>;
+  arbitrary: z.ZodDefault<z.ZodUnion<readonly [z.ZodBoolean, z.ZodEnum<{
+    ch: "ch";
+    dvh: "dvh";
+    dvw: "dvw";
+    em: "em";
+    ex: "ex";
+    lvh: "lvh";
+    lvw: "lvw";
+    px: "px";
+    rem: "rem";
+    svh: "svh";
+    svw: "svw";
+    vh: "vh";
+    vmax: "vmax";
+    vmin: "vmin";
+    vw: "vw";
+    "%": "%";
+    deg: "deg";
+    rad: "rad";
+    turn: "turn";
+    s: "s";
+    ms: "ms";
+    fr: "fr";
+    unitless: "unitless";
+    lh: "lh";
+    rlh: "rlh";
+    cqw: "cqw";
+    cqh: "cqh";
+    cqi: "cqi";
+    cqb: "cqb";
+  }>]>>;
   negates: z.ZodDefault<z.ZodBoolean>;
   selector: z.ZodOptional<z.ZodString>;
   alpha: z.ZodOptional<z.ZodString>;

package/dist/entities/system/Component.js

@@ -13,7 +13,7 @@ import { Package } from "./Package.js";
 import { bindPreviewGlyphs, glyphLeafOf } from "./glyph-identity.js";
 import { Style, addBagKeyIssues, anatomyPropValue, bagNameEdges, bagRewriteName, bindBagTokens, collectBag, isPlainRecord, openBag, styleValue } from "./style-bag.js";
 import { storedPreview } from "../../framework/preview-store.js";
-import { glyphPropsOf, propOwner, propValueDomain, refListOf, resolveComponentProps, stylePropValueLeaves, validateComponentProps } from "../../framework/projections.js";
+import { glyphPropsOf, propOwner, propValueDomain, refListOf, resolveComponentProps, stylePropNumberUnit, 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";
@@ -668,12 +668,15 @@ function styleBagValue({ config, declaration, name = "<prop>", glyphLibraries })
 		gradient,
 		shadowValue,
 		refSchema
-	], { error: () => {
+	], { error: (issue) => {
 		const leaves = stylePropValueLeaves(config, property);
+		if (typeof issue.input === "number" && leaves.includes(String(issue.input))) return `\`${name}\`: \`${issue.input}\` names a value as a string, so write \`'${issue.input}'\`. A number names only a value the style property declares as a number.`;
 		const shown = leaves.slice(0, 12).map((leaf) => `\`${leaf}\``);
 		const more = leaves.length > 12 ? `, … (${leaves.length} in all)` : "";
-		const arbitrary = (config.resolve("style-property", property)?.toJSON())?.arbitrary === true ? ", or a bracketed literal such as `[13px]`" : "";
-		return `\`${name}\` takes one of ${shown.join(", ")}${more}${arbitrary}, or a token ref. A value the system has no token for is added to the style property's \`values\` first.`;
+		const arbitrary = (config.resolve("style-property", property)?.toJSON())?.arbitrary ? ", or a bracketed literal such as `[13px]`" : "";
+		const unit = stylePropNumberUnit(config, property);
+		const number = unit === void 0 ? "" : unit === "unitless" ? ", or a number" : `, or a number of \`${unit}\` such as \`600\``;
+		return `\`${name}\` takes one of ${shown.join(", ")}${more}${arbitrary}${number}, or a token ref. A value the system has no token for is added to the style property's \`values\` first.`;
 	} });
 }
 /**

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

@@ -82,6 +82,10 @@ interface StylePropLeaf {
   readonly atRules?: Record<string, Record<string, string>>;
   /** The class the value is written as, when it names its own. */
   readonly className?: string;
+  /** The value was declared as a NUMBER — a numeric literal (`values: [1, 2]`) or alias
+   *  (`{ alias: 3, … }`) — so it is written as one (`columns={3}`). A leaf without it is a string
+   *  however it reads: a token named `4` is `spacing="4"`. */
+  readonly numeric?: true;
 }
 /** One entry a ref names: the leaf it is called and the qualified path it stores. */
 interface RefMember {
@@ -129,6 +133,13 @@ interface TokenVariableAsText {
  * follows it. A variable no token declares, such as a third-party library's, isn't one.
  */
 declare function tokenVariablesAsText(config: Config): TokenVariableAsText[];
+/**
+ * The units a style property can read a bare number in (`arbitrary: 'px'`), and `unitless` for a
+ * property whose CSS takes a plain number (`line-height`, `opacity`). A closed list, so
+ * `arbitrary: 'pxx'` is refused rather than written into every declaration the prop makes.
+ */
+declare const STYLE_PROP_NUMBER_UNITS: readonly ["unitless", "px", "rem", "em", "%", "ch", "ex", "lh", "rlh", "vw", "vh", "vmin", "vmax", "svw", "svh", "lvw", "lvh", "dvw", "dvh", "cqw", "cqh", "cqi", "cqb", "fr", "ms", "s", "deg", "rad", "turn"];
+type StylePropNumberUnit = (typeof STYLE_PROP_NUMBER_UNITS)[number];
 /** StyleProperty (`flex/direction`) — a prop a component can expose, mapped to a CSS
  *  property with an allowed value set. Grouping (`flex`) is emergent from the path. */
 declare const StylePropertyEntity: EntityClass<z.ZodObject<{
@@ -136,7 +147,37 @@ declare const StylePropertyEntity: EntityClass<z.ZodObject<{
   values: z.ZodOptional<z.ZodArray<z.ZodType<StylePropValue, unknown, z.core.$ZodTypeInternals<StylePropValue, unknown>>>>;
   responsive: z.ZodDefault<z.ZodBoolean>;
   classPrefix: z.ZodOptional<z.ZodString>;
-  arbitrary: z.ZodDefault<z.ZodBoolean>;
+  arbitrary: z.ZodDefault<z.ZodUnion<readonly [z.ZodBoolean, z.ZodEnum<{
+    ch: "ch";
+    dvh: "dvh";
+    dvw: "dvw";
+    em: "em";
+    ex: "ex";
+    lvh: "lvh";
+    lvw: "lvw";
+    px: "px";
+    rem: "rem";
+    svh: "svh";
+    svw: "svw";
+    vh: "vh";
+    vmax: "vmax";
+    vmin: "vmin";
+    vw: "vw";
+    "%": "%";
+    deg: "deg";
+    rad: "rad";
+    turn: "turn";
+    s: "s";
+    ms: "ms";
+    fr: "fr";
+    unitless: "unitless";
+    lh: "lh";
+    rlh: "rlh";
+    cqw: "cqw";
+    cqh: "cqh";
+    cqi: "cqi";
+    cqb: "cqb";
+  }>]>>;
   negates: z.ZodDefault<z.ZodBoolean>;
   selector: z.ZodOptional<z.ZodString>;
   alpha: z.ZodOptional<z.ZodString>;
@@ -168,4 +209,4 @@ declare function cssPropertyNames(styleProp: {
   readonly properties: readonly string[];
 }): string[];
 //#endregion
-export { RefMember, STYLE_PROP_VALUE_FORMS, STYLE_PROP_VALUE_LEAVES, StylePropLeaf, StylePropValue, StylePropValueCtx, StylePropValueKind, StyleProperty, StylePropertyClass, TokenVariableAsText, classifyStylePropValue, cssPropertyNames, leavesOfStylePropValue, stylePropValueFormOf, stylePropValueSchema, toCssPropertyName, tokenVariablesAsText };
+export { RefMember, STYLE_PROP_NUMBER_UNITS, STYLE_PROP_VALUE_FORMS, STYLE_PROP_VALUE_LEAVES, StylePropLeaf, StylePropNumberUnit, StylePropValue, StylePropValueCtx, StylePropValueKind, StyleProperty, StylePropertyClass, TokenVariableAsText, classifyStylePropValue, cssPropertyNames, leavesOfStylePropValue, stylePropValueFormOf, stylePropValueSchema, toCssPropertyName, tokenVariablesAsText };

package/dist/entities/system/StyleProperty.js

@@ -158,6 +158,10 @@ const STYLE_PROP_VALUE_FORMS = {
 	})
 };
 const KINDS = Object.keys(STYLE_PROP_VALUE_FORMS);
+/** `{ numeric: true }` for an alias declared as a number. */
+function numericOf(alias) {
+	return typeof alias === "number" ? { numeric: true } : {};
+}
 /** The value half of a flag as leaves carry it. */
 function flagValue(value, members) {
 	if (typeof value === "string") return [{ value }];
@@ -180,7 +184,8 @@ const STYLE_PROP_VALUE_LEAVES = {
 	}],
 	number: (entry) => [{
 		leaf: String(entry),
-		value: String(entry)
+		value: String(entry),
+		numeric: true
 	}],
 	token: (entry, members) => members(entry).map(({ leaf, path }) => ({
 		leaf,
@@ -202,18 +207,21 @@ const STYLE_PROP_VALUE_LEAVES = {
 	aliasToken: (entry, members) => members(entry.value).map(({ path }) => ({
 		leaf: String(entry.alias),
 		value: path,
-		...classNameOf(entry)
+		...classNameOf(entry),
+		...numericOf(entry.alias)
 	})),
 	aliasLiteral: (entry) => [{
 		leaf: String(entry.alias),
 		value: entry.value,
-		...classNameOf(entry)
+		...classNameOf(entry),
+		...numericOf(entry.alias)
 	}],
 	aliasDeclarations: (entry) => [{
 		leaf: String(entry.alias),
 		value: "",
 		...splitDeclarations(entry.value),
-		...classNameOf(entry)
+		...classNameOf(entry),
+		...numericOf(entry.alias)
 	}]
 };
 /** A bag's declarations as text, each ref as its marker. */
@@ -434,6 +442,66 @@ const tokenPathsByValue = createSliceMemo({
 		return tokens;
 	}
 });
+/**
+* The units a style property can read a bare number in (`arbitrary: 'px'`), and `unitless` for a
+* property whose CSS takes a plain number (`line-height`, `opacity`). A closed list, so
+* `arbitrary: 'pxx'` is refused rather than written into every declaration the prop makes.
+*/
+const STYLE_PROP_NUMBER_UNITS = [
+	"unitless",
+	"px",
+	"rem",
+	"em",
+	"%",
+	"ch",
+	"ex",
+	"lh",
+	"rlh",
+	"vw",
+	"vh",
+	"vmin",
+	"vmax",
+	"svw",
+	"svh",
+	"lvw",
+	"lvh",
+	"dvw",
+	"dvh",
+	"cqw",
+	"cqh",
+	"cqi",
+	"cqb",
+	"fr",
+	"ms",
+	"s",
+	"deg",
+	"rad",
+	"turn"
+];
+/**
+* Why a prop can't read a bare number in a unit, or `undefined` when it can. A bare number is written
+* as an inline declaration on each of the prop's `properties`, so a prop needs some, and one with a
+* `selector` or `declarations` of its own would paint wrong that way. A field left out of `body` isn't
+* judged, so an update is checked by only the fields it carries.
+*/
+function numberUnitRefusal(body) {
+	if (body.properties !== void 0 && body.properties.length === 0) return "A prop that takes a number writes it to its `properties`, and this one sets none.";
+	if (body.selector || Object.keys(body.declarations ?? {}).length > 0) return "A number is written inline on the element, so a prop with a `selector` or its own `declarations` cannot take one. Use `arbitrary: true` for its off-scale values.";
+}
+/**
+* A check refusing an `arbitrary` unit the rest of the body can't honour ({@link numberUnitRefusal}).
+* An update carries only the fields it sets, so a field it leaves out is judged by the stored body,
+* which the emitters guard themselves (`bodyNumberUnit`).
+*/
+const numberFitsBody = (body) => (ctx) => {
+	if (typeof ctx.value !== "string") return;
+	const refusal = numberUnitRefusal(body ?? {});
+	if (refusal) ctx.issues.push({
+		code: "custom",
+		input: ctx.value,
+		message: refusal
+	});
+};
 /** A check refusing a ref to a token or group nothing declares: it offers no values, and the prop
 *  paints nothing. */
 const namesDeclaredTokens = (config) => (ctx) => {
@@ -493,7 +561,19 @@ const styleFields = ({ config, body, linked } = {}) => z.object({
 	* to the prop's own path, which is the common case.
 	*/
 	classPrefix: z.string().optional().describe("The class-name segment the prop contributes. Defaults to the prop's own path; `''` for self-describing values."),
-	arbitrary: z.boolean().default(false).describe("Whether the prop also accepts a bracketed literal such as `[13px]`. Defaults to `false`."),
+	/**
+	* The prop's open side: what it takes beside the fixed list in `values`. `true` takes a bracketed
+	* literal (`[13px]`, `[#abc]`). A unit also takes a bare number, read in that unit: `'px'` makes
+	* `maxWidth={600}` paint `max-width: 600px` as `[600px]` would, and `'unitless'` writes the
+	* number as it is (`lineHeight={1.5}`). Any other unit is still a literal (`[40rem]`).
+	*
+	* One field, since a bare number is one more way to write an off-list value. Which unit a number
+	* means is the prop's API, so it is declared rather than read off the CSS grammar. On a prop with
+	* a unit the type decides: a number is the unit, and a value named by a number is the string
+	* (`spacing="4"` is the scale's step, `spacing={4}` is `4px`). A number the prop declares as a
+	* value (`values: [1, 2]`, `{ alias: 3, … }`) is still that value.
+	*/
+	arbitrary: (config ? z.union([z.boolean(), z.enum(STYLE_PROP_NUMBER_UNITS)]).check(numberFitsBody(body)) : z.union([z.boolean(), z.enum(STYLE_PROP_NUMBER_UNITS)])).default(false).describe("What the prop takes beside its `values`: `true` takes a bracketed literal (`[13px]`); a unit also takes a bare number in it (`'px'` makes `600` paint `600px`, `'unitless'` writes `1.5` as it is). A number the prop declares as a value (`{ alias: 3, … }`) is still that value, and a token's name is a string: `spacing=\"4\"` is the step, `spacing={4}` a length. Defaults to `false`."),
 	/**
 	* The prop applies the NEGATION of its value — `offsetX="3"` paints `margin-inline: calc(var(…) *
 	* -1)`.
@@ -578,4 +658,4 @@ function cssPropertyNames(styleProp) {
 	return styleProp.properties.map(toCssPropertyName);
 }
 //#endregion
-export { STYLE_PROP_VALUE_FORMS, STYLE_PROP_VALUE_LEAVES, StyleProperty, classifyStylePropValue, cssPropertyNames, leavesOfStylePropValue, stylePropValueFormOf, stylePropValueSchema, toCssPropertyName, tokenVariablesAsText };
+export { STYLE_PROP_NUMBER_UNITS, STYLE_PROP_VALUE_FORMS, STYLE_PROP_VALUE_LEAVES, StyleProperty, classifyStylePropValue, cssPropertyNames, leavesOfStylePropValue, numberUnitRefusal, stylePropValueFormOf, stylePropValueSchema, toCssPropertyName, tokenVariablesAsText };

package/dist/framework/Config.d.ts

@@ -73,7 +73,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 = 20261007182932;
+declare const SERIALIZED_CONFIG_VERSION = 20261007210309;
 interface SerializedConfig {
   /** See {@link SERIALIZED_CONFIG_VERSION}. Always written; a stored artifact may lack it. */
   readonly version: number;
@@ -1245,6 +1245,17 @@ declare class Config {
    * the whole config; the index already knows the answer.
    */
   private cascadeRename;
+  /**
+   * A style property's unit changed: every stored bag that sets it a bare number is rewritten as what it
+   * painted before (`pinBodyStyleNumbers`), so the change doesn't reread what's already written. `gap: 6`
+   * named the token `'6'` until `gap` took `px`, and `maxWidth: 4` was `4px` until it lost its unit. The
+   * rewritten form — the value's name, or its bracket literal — paints the same under either reading,
+   * so a replay lands on the same bodies.
+   *
+   * Like {@link cascadeRename}, only the components the ref index says set the property are visited;
+   * canvas roles hold props by name, so each is read.
+   */
+  private pinNumberReading;
   /**
    * Rename one key inside every record that is keyed by the renamed collection — a style rule's
    * `when`, which names the props it conditions on.

package/dist/framework/Config.js

@@ -9,7 +9,7 @@ import { isComposedValue } from "../entities/system/composed-values.js";
 import { borrowedSlug, classifyOverlay } from "./source-integrity.js";
 import { kindBorrowable, titleCase } from "./registry.js";
 import { isGroupBody } from "./utils/group.js";
-import { authoredBag } from "./projections.js";
+import { authoredBag, pinBodyStyleNumbers, stylePropNumberUnit } from "./projections.js";
 import { isAuthoringPhantom, phantomsIn } from "./utils/authoring-phantom.js";
 import { addressOf, editOp, inputOf, opVerb } from "./config-op.js";
 import { configSchemas } from "./config-ops.js";
@@ -1617,7 +1617,12 @@ var Config = class Config {
 	}
 	/** The next snapshot for one patch, validated. Pure in `snapshot`; reads metadata off `this`. */
 	computeApply(snapshot, incoming, mode = "write", checked = true) {
-		const next = this.computeApplyPatch(snapshot, incoming, mode);
+		const unitChange = incoming.kind === "style-property" && incoming.operation === "update" ? {
+			path: incoming.path,
+			was: stylePropNumberUnit(this.viewOf(snapshot), incoming.path)
+		} : void 0;
+		let next = this.computeApplyPatch(snapshot, incoming, mode);
+		if (unitChange) next = this.pinNumberReading(next, unitChange.path, unitChange.was);
 		const view = this.viewOf(next);
 		if (checked) view.assertInvariants(incoming.kind);
 		else view.assertUniqueLeaves(incoming.kind);
@@ -2272,6 +2277,44 @@ var Config = class Config {
 		return snapshot.withChanges(changes);
 	}
 	/**
+	* A style property's unit changed: every stored bag that sets it a bare number is rewritten as what it
+	* painted before (`pinBodyStyleNumbers`), so the change doesn't reread what's already written. `gap: 6`
+	* named the token `'6'` until `gap` took `px`, and `maxWidth: 4` was `4px` until it lost its unit. The
+	* rewritten form — the value's name, or its bracket literal — paints the same under either reading,
+	* so a replay lands on the same bodies.
+	*
+	* Like {@link cascadeRename}, only the components the ref index says set the property are visited;
+	* canvas roles hold props by name, so each is read.
+	*/
+	pinNumberReading(after, path, was) {
+		const view = this.viewOf(after);
+		if (was === stylePropNumberUnit(view, path)) return after;
+		const reading = new Map([[path, was]]);
+		const changes = [];
+		const visit = (kind, itemPath) => {
+			const entry = this.entityOf(kind);
+			const target = after.slice(kind).items.get(itemPath);
+			if (!entry || !target) return;
+			const body = target.toJSON();
+			const pinned = pinBodyStyleNumbers(view, kind, body, reading, itemPath);
+			if (pinned === body) return;
+			let keys = isExtendedRef(pinned) ? ["__ref", "extend"] : entry.fieldKeys;
+			if (isMintedRow(pinned)) keys = [...keys, MINTED];
+			changes.push({
+				kind,
+				target: "item",
+				path: itemPath,
+				value: new Entity(itemPath, pinned, keys)
+			});
+		};
+		for (const dependent of this.referrersOf(after, "style-property", path)) {
+			const { kind, qualifiedPath } = splitRef(dependent);
+			if (kind === "component") visit(kind, qualifiedPath);
+		}
+		if (this.entityOf("canvas-role")) for (const rolePath of after.slice("canvas-role").items.keys()) visit("canvas-role", rolePath);
+		return changes.length > 0 ? after.withChanges(changes) : after;
+	}
+	/**
 	* Rename one key inside every record that is keyed by the renamed collection — a style rule's
 	* `when`, which names the props it conditions on.
 	*
@@ -5382,7 +5425,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 > 20261007182932) throw new SchemaVersionTooNew(claimed);
+		if (claimed > 20261007210309) 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

@@ -281,6 +281,16 @@ declare function arbitraryClassName({
   readonly path: string; /** The authored value, brackets included. */
   readonly value: string;
 }): string;
+/**
+ * The bracket literal an off-scale value is written as where it needs a class, not an inline style:
+ * under a modifier, whose condition an inline style can't hold. A bracket literal on a prop that takes
+ * one is itself, and a bare number in the prop's unit is its literal (`600` with `arbitrary: 'px'` is
+ * `[600px]`). `undefined` for a value a declared class paints, or one nothing does.
+ *
+ * The canvas split, the build's class extractor and the emitted runtime all name the class this gives,
+ * so the element wears the class the sheet has a rule for.
+ */
+declare function stylePropOffScaleLiteral(config: Config, path: string, value: unknown): string | undefined;
 /** What a prop bag amounts to once styling is taken out of it. */
 interface SplitStyleProps {
   /** The classes the bag's style props produce, space-joined. */
@@ -304,10 +314,14 @@ interface SplitStyleProps {
 declare function splitStyleProps({
   config,
   bag,
-  through
+  through,
+  underModifier
 }: {
   readonly config: Config;
   readonly bag: Record<string, unknown>;
+  /** The bag is a modifier's block. An inline style can't hold its condition, so an off-scale value
+   *  is its arbitrary class (see {@link stylePropOffScaleLiteral}) rather than a declaration. */
+  readonly underModifier?: boolean;
   /** The definitions this bag's keys resolve against, in precedence order — see
    *  {@link stylePropertyPathFor}. `<VStack gap="4">` wears `uds-gap-y-4`. Empty for a bag with no
    *  owning component, where a key names its own property. */
@@ -347,4 +361,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, layerJsMotionPresets, 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, stylePropOffScaleLiteral, stylePropOwnClasses, styleRuleMotionClasses };

package/dist/framework/class-names.js

@@ -3,7 +3,7 @@ import { forwardsOf, rootLayerOf } from "../entities/system/element.js";
 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 { authoredValue, className, isCustomPropertyKey, negatedCssValue, renderStyleValue, resolveComponentProps, stylePropEntries, stylePropLeafForToken, stylePropNumberLeaf, stylePropNumberUnit, 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
@@ -725,6 +725,25 @@ function arbitraryClassName({ config, path, value }) {
 	return `${stylePropClassBase(config, path)}-[${inner}]`;
 }
 /**
+* The bracket literal an off-scale value is written as where it needs a class, not an inline style:
+* under a modifier, whose condition an inline style can't hold. A bracket literal on a prop that takes
+* one is itself, and a bare number in the prop's unit is its literal (`600` with `arbitrary: 'px'` is
+* `[600px]`). `undefined` for a value a declared class paints, or one nothing does.
+*
+* The canvas split, the build's class extractor and the emitted runtime all name the class this gives,
+* so the element wears the class the sheet has a rule for.
+*/
+function stylePropOffScaleLiteral(config, path, value) {
+	const { arbitrary } = config.resolve("style-property", path)?.toJSON() ?? {};
+	if (!arbitrary) return void 0;
+	if (typeof value === "string") return offScale(value) === void 0 ? void 0 : value;
+	if (typeof value !== "number" || !Number.isFinite(value)) return void 0;
+	if (stylePropNumberLeaf(config, path, value) !== void 0) return void 0;
+	const unit = stylePropNumberUnit(config, path);
+	if (unit === void 0) return void 0;
+	return `[${value}${unit === "unitless" ? "" : unit}]`;
+}
+/**
 * Split a prop bag into a class string and the props that aren't styling.
 *
 * This is the same dispatch the emitted `_style-props` runtime performs, over a live config instead
@@ -737,19 +756,20 @@ function arbitraryClassName({ config, path, value }) {
 * ({@link arbitraryNeedsClass}); an explicit `style` the caller passed still wins, since that's the
 * escape hatch of last resort.
 */
-function splitStyleProps({ config, bag, through }) {
+function splitStyleProps({ config, bag, through, underModifier = false }) {
 	const classes = [];
 	const rest = {};
 	const style = {};
 	const modifiers = new Map(config.list("modifier").map((modifier) => [`_${modifier.leaf}`, modifier.leaf]));
-	for (const [key, value] of Object.entries(bag)) {
+	for (const [key, authored] of Object.entries(bag)) {
 		const modifier = modifiers.get(key);
 		if (modifier) {
-			if (value && typeof value === "object" && !Array.isArray(value)) {
+			if (authored && typeof authored === "object" && !Array.isArray(authored)) {
 				const inner = splitStyleProps({
 					config,
-					bag: value,
-					through
+					bag: authored,
+					through,
+					underModifier: true
 				});
 				for (const cls of inner.className.split(" ").filter(Boolean)) classes.push(`${modifier}:${cls}`);
 			}
@@ -763,11 +783,27 @@ function splitStyleProps({ config, bag, through }) {
 		}) ?? key;
 		const prop = config.resolve("style-property", name);
 		if (!prop) {
-			rest[key] = value;
+			rest[key] = authored;
 			continue;
 		}
-		if (value === void 0 || value === null) continue;
+		if (authored === void 0 || authored === null) continue;
 		const { arbitrary, properties = [], negates } = prop.toJSON();
+		const value = typeof authored === "number" ? stylePropOffScaleLiteral(config, name, authored) ?? authored : authored;
+		if (underModifier && typeof value === "string" && arbitrary) {
+			if (offScale(value) !== void 0) {
+				classes.push(arbitraryClassName({
+					config,
+					path: name,
+					value
+				}));
+				continue;
+			}
+		}
+		if (typeof value === "number") {
+			const leaf = stylePropNumberLeaf(config, name, value);
+			if (leaf !== void 0) classes.push(stylePropClassName(config, name, leaf));
+			continue;
+		}
 		const off = arbitrary ? offScale(value) : void 0;
 		if (off !== void 0 && arbitraryNeedsClass(config, name)) {
 			classes.push(arbitraryClassName({
@@ -970,4 +1006,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, layerJsMotionPresets, 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, stylePropOffScaleLiteral, stylePropOwnClasses, styleRuleMotionClasses };