@yahoo/uds-create-config 5.60.0 → 5.60.2

package/dist/entities/system/Component.js

@@ -2501,7 +2501,7 @@ count: z.number().int().min(1).max(50).optional() }).prefault({})
 			}),
 			readOnly: false,
 			label: "Set layer styles",
-			description: "Set or clear style properties on a component's layers for the instances a reach covers, the way the component editor's \"Apply to\" does. Each change names a `layer`, a style-prop `prop` and a `value` (`null` clears it). `when` pins variant, boolean or state props (`{ \"variant\": \"secondary\" }`) and the change lands in the rule with exactly that condition; leave it out for every instance. `state` is the state the change is made in (`\"hover\"`): an interaction becomes part of the rule's condition, any other modifier nests as a block in the layer's bag. `modifiers` nest further blocks, outermost first (`[\"dark\"]` for dark mode). Writes one `sub-update/styles` per rule touched, creating a rule its condition has none for.",
+			description: "Set or clear style properties on a component's layers for the instances a reach covers, the way the component editor's \"Apply to\" does. Each change names a `layer`, a style-prop `prop` and a `value` (`null` clears it). `when` pins variant, boolean or state props (`{ \"variant\": \"secondary\" }`) and the change lands in the rule with exactly that condition; leave it out for every instance. `state` is the state the change is made in (`\"hover\"`): an interaction becomes part of the rule's condition, any other modifier nests as a block in the layer's bag. `modifiers` nest further blocks, outermost first (`[\"dark\"]` for dark mode). Writes one `sub-update/styles` per rule touched, creating a rule its condition has none for. A clear also removes the value from a broader rule that gives those instances it, and writes it back on the conditions that rule covers and the clear does not, so only the cleared instances change.",
 			scope: "item",
 			title: (entity) => `Set ${entity} layer styles`,
 			handler: (input, config) => {
@@ -2518,6 +2518,7 @@ count: z.number().int().min(1).max(50).optional() }).prefault({})
 					})
 				});
 				return config.run(styleSetEdits({
+					config,
 					path,
 					changes,
 					isInteraction: (modifier) => isInteractionModifier(config, modifier)

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

@@ -17,7 +17,7 @@ import { contentKey } from "../../framework/utils/content-key.js";
 * The shared compiler/runtime contract. Bump whenever codegen can produce different module bytes
 * from identical config-visible inputs (shim contracts, entry shape, transforms, and so on).
 */
-const COMPONENT_MODULE_BUILD_VERSION = 7;
+const COMPONENT_MODULE_BUILD_VERSION = 8;
 /**
 * Generated web runtime inputs shared by every component module. These are intentionally separate
 * from the per-file closure: editing an unrelated component should not invalidate this module, but

package/dist/entities/system/component-style-set.d.ts

@@ -1,4 +1,6 @@
 import { ConfigEdit } from "../../framework/config-op.js";
+import { Config } from "../../framework/Config.js";
+
 //#region src/entities/system/component-style-set.d.ts
 /**
  * One style property set or cleared on one layer of a component, and the cells it reaches.
@@ -17,6 +19,12 @@ interface StyleSetChange {
   readonly when?: Readonly<Record<string, string | number | boolean>>;
   readonly state?: string;
   readonly modifiers?: readonly string[];
+  /**
+   * For a clear: remove only this rule's own entry, and leave the broader rules that give the same
+   * instances the value alone. A set over several cells releases the overrides inside its reach this
+   * way, since the set itself is what those cells should show.
+   */
+  readonly ownRuleOnly?: boolean;
 }
 /**
  * The `sub-update/styles` entries a set of style changes write: one per rule they touch, each a delta
@@ -25,12 +33,21 @@ interface StyleSetChange {
  * A rule's key is its condition, so a change at a condition with no rule yet creates one; `when` is
  * carried on every entry for that reason. A cleared interaction change also clears the address the
  * same change would have had as a nested block, so a value stored that way doesn't outlive the clear.
+ *
+ * With `config`, a clear also reaches the broader rules that give the cleared cells their value: a
+ * clear at `{ variant: 'tertiary', size: 'sm' }` removes the value from the `variant=tertiary` rule
+ * that holds it, and writes it back on the conditions that rule covers and the clear doesn't
+ * (`size=xs`, `size=md`, `size=lg` under tertiary), so only the cleared cells change. A broader rule
+ * whose split couldn't keep every instance it should, including one that leaves a prop unset, is
+ * left alone (see {@link complementOf}). A clear marked `ownRuleOnly` never reaches past its own rule.
  */
 declare function styleSetEdits({
+  config,
   path,
   changes,
   isInteraction
 }: {
+  config?: Config;
   path: string;
   changes: readonly StyleSetChange[]; /** Whether a state is an interaction a rule can be conditioned on, by modifier leaf. */
   isInteraction: (modifier: string) => boolean;

package/dist/entities/system/component-style-set.js

@@ -1,5 +1,7 @@
-import { canonicalCondition } from "../../framework/utils/refs.js";
+import { canonicalCondition, refLeaf } from "../../framework/utils/refs.js";
 import { reject } from "../../framework/rejection.js";
+import { propValueDomain } from "../../framework/projections.js";
+import { ruleSpecificity } from "../../framework/layer-styles.js";
 //#region src/entities/system/component-style-set.ts
 /** A modifier as a style bag keys it: its leaf with a leading `_`. */
 function bagKey(modifier) {
@@ -15,6 +17,83 @@ function addressOf({ layer, modifiers, prop }) {
 		prop
 	].join(".");
 }
+/** A condition value as rules compare it: a value ref reads as its leaf. */
+function leafKey(value) {
+	return String(refLeaf(value));
+}
+/** Whether every pin of `inner` holds in `outer`. */
+function pinsHold({ inner, outer }) {
+	return Object.entries(inner).every(([axis, value]) => axis in outer && leafKey(outer[axis]) === leafKey(value));
+}
+/** Whether two conditions can hold at once: no axis is pinned to different values. */
+function compatible(a, b) {
+	return Object.entries(a).every(([axis, value]) => !(axis in b) || leafKey(b[axis]) === leafKey(value));
+}
+/** The `_`-keyed entries of a condition: the states it holds under, which a split never crosses. */
+function statesOf(condition) {
+	return canonicalCondition(Object.fromEntries(Object.entries(condition).filter(([axis]) => axis.startsWith("_"))));
+}
+function axisPins(condition) {
+	return Object.fromEntries(Object.entries(condition).filter(([axis]) => !axis.startsWith("_")));
+}
+function valueAt({ rule, address }) {
+	let at = rule;
+	for (const segment of address.split(".")) {
+		if (typeof at !== "object" || at === null) return void 0;
+		at = at[segment];
+	}
+	return at;
+}
+/**
+* Every value a variant or boolean prop or state can take, or `undefined` when a split on it can't
+* keep every instance: the values can't be listed, or a variant with no default can be left unset,
+* which no condition on its values matches. A boolean always splits, since an unset one holds its
+* `false` condition (`conditionHolds`).
+*/
+function axisDomains({ config, path }) {
+	const body = config.resolve("component", path)?.toJSON();
+	return (axis) => {
+		const state = body?.states?.[axis];
+		const decl = body?.props?.[axis] ?? state;
+		if (decl?.type === "boolean") return [true, false];
+		const always = body?.defaultProps?.[axis] !== void 0 || state?.default !== void 0 || body?.props?.[axis]?.required === true;
+		if (decl?.type !== "variant" || !always) return void 0;
+		const leaves = propValueDomain(config, decl)?.leaves;
+		return leaves && leaves.length > 0 ? leaves : void 0;
+	};
+}
+/**
+* The conditions under `within` that `selection` doesn't reach, as few as an axis-by-axis split
+* gives: each axis a selected condition pins and `within` doesn't is split into its values, and a
+* branch the selection covers whole, or doesn't touch, stops there. `undefined` when an axis to split
+* on can't keep every instance the selection doesn't reach (see {@link axisDomains}).
+*/
+function complementOf({ within, selection, domainOf }) {
+	const touching = selection.filter((selected) => compatible(selected, within));
+	if (touching.length === 0) return [within];
+	if (touching.some((selected) => pinsHold({
+		inner: selected,
+		outer: within
+	}))) return [];
+	const axis = touching.flatMap((selected) => Object.keys(selected)).find((candidate) => !(candidate in within));
+	if (axis === void 0) return [];
+	const domain = domainOf(axis);
+	if (!domain) return void 0;
+	const out = [];
+	for (const value of domain) {
+		const rest = complementOf({
+			within: {
+				...within,
+				[axis]: value
+			},
+			selection: touching,
+			domainOf
+		});
+		if (!rest) return void 0;
+		out.push(...rest);
+	}
+	return out;
+}
 /**
 * The `sub-update/styles` entries a set of style changes write: one per rule they touch, each a delta
 * of addresses, so nothing a change doesn't name is touched.
@@ -22,9 +101,17 @@ function addressOf({ layer, modifiers, prop }) {
 * A rule's key is its condition, so a change at a condition with no rule yet creates one; `when` is
 * carried on every entry for that reason. A cleared interaction change also clears the address the
 * same change would have had as a nested block, so a value stored that way doesn't outlive the clear.
+*
+* With `config`, a clear also reaches the broader rules that give the cleared cells their value: a
+* clear at `{ variant: 'tertiary', size: 'sm' }` removes the value from the `variant=tertiary` rule
+* that holds it, and writes it back on the conditions that rule covers and the clear doesn't
+* (`size=xs`, `size=md`, `size=lg` under tertiary), so only the cleared cells change. A broader rule
+* whose split couldn't keep every instance it should, including one that leaves a prop unset, is
+* left alone (see {@link complementOf}). A clear marked `ownRuleOnly` never reaches past its own rule.
 */
-function styleSetEdits({ path, changes, isInteraction }) {
+function styleSetEdits({ config, path, changes, isInteraction }) {
 	const rules = /* @__PURE__ */ new Map();
+	const reaching = /* @__PURE__ */ new Set();
 	const ruleAt = (condition) => {
 		const when = Object.keys(condition).length > 0 ? { ...condition } : null;
 		const key = canonicalCondition(when);
@@ -44,14 +131,17 @@ function styleSetEdits({ path, changes, isInteraction }) {
 		const { layer, prop } = change;
 		const clear = change.value === null;
 		if (change.state && isInteraction(bagKey(change.state).slice(1))) {
-			ruleAt({
+			const condition = {
 				...pins,
 				[bagKey(change.state)]: true
-			}).delta[addressOf({
+			};
+			const address = addressOf({
 				layer,
 				modifiers: nested,
 				prop
-			})] = change.value;
+			});
+			ruleAt(condition).delta[address] = change.value;
+			if (clear && !change.ownRuleOnly) reaching.add(`${canonicalCondition(condition)}\n${address}`);
 			if (clear) ruleAt(pins).delta[addressOf({
 				layer,
 				modifiers: [change.state, ...nested],
@@ -59,13 +149,21 @@ function styleSetEdits({ path, changes, isInteraction }) {
 			})] = null;
 			continue;
 		}
-		const modifiers = change.state ? [change.state, ...nested] : nested;
-		ruleAt(pins).delta[addressOf({
+		const address = addressOf({
 			layer,
-			modifiers,
+			modifiers: change.state ? [change.state, ...nested] : nested,
 			prop
-		})] = change.value;
+		});
+		ruleAt(pins).delta[address] = change.value;
+		if (clear && !change.ownRuleOnly) reaching.add(`${canonicalCondition(pins)}\n${address}`);
 	}
+	if (config) releaseBroaderRules({
+		config,
+		path,
+		rules,
+		reaching,
+		ruleAt
+	});
 	return [...rules].filter(([, rule]) => Object.keys(rule.delta).length > 0).map(([key, rule]) => ({
 		kind: "component",
 		operation: "sub-update",
@@ -79,6 +177,77 @@ function styleSetEdits({ path, changes, isInteraction }) {
 	}));
 }
 /**
+* Clears each cleared address from the stored rules broader than the clears that hold it, and writes
+* the value back on the part of each such rule the clears don't cover. Clears of one address under
+* the same states are one selection, so a clear over several cells splits a broader rule once.
+*/
+function releaseBroaderRules({ config, path, rules, reaching, ruleAt }) {
+	const stored = (config.resolve("component", path)?.toJSON())?.styles;
+	if (!stored) return;
+	const selections = /* @__PURE__ */ new Map();
+	for (const [key, { when, delta }] of rules) for (const [address, value] of Object.entries(delta)) {
+		if (value !== null || !reaching.has(`${key}\n${address}`)) continue;
+		const condition = when ?? {};
+		const states = statesOf(condition);
+		const id = `${address}\n${states}`;
+		let selection = selections.get(id);
+		if (!selection) {
+			selection = {
+				address,
+				states,
+				conditions: []
+			};
+			selections.set(id, selection);
+		}
+		selection.conditions.push(axisPins(condition));
+	}
+	const domainOf = axisDomains({
+		config,
+		path
+	});
+	const written = (condition, address) => rules.get(canonicalCondition(condition))?.delta[address] !== void 0;
+	const ranked = Object.values(stored).map((rule, index) => ({
+		rule,
+		when: rule.when ?? {},
+		rank: [ruleSpecificity(rule.when), index]
+	}));
+	const outranks = (a, b) => a.rank[0] > b.rank[0] || a.rank[0] === b.rank[0] && a.rank[1] > b.rank[1];
+	for (const { address, states, conditions } of selections.values()) {
+		const holders = ranked.filter((entry) => statesOf(entry.when) === states && valueAt({
+			rule: entry.rule,
+			address
+		}) !== void 0);
+		for (const holder of holders) {
+			const { when } = holder;
+			if (written(when, address)) continue;
+			const pins = axisPins(when);
+			if (!conditions.some((outer) => pinsHold({
+				inner: pins,
+				outer
+			}))) continue;
+			const kept = complementOf({
+				within: pins,
+				selection: [...conditions, ...holders.filter((other) => outranks(other, holder)).map((other) => axisPins(other.when))],
+				domainOf
+			});
+			if (!kept) continue;
+			const value = valueAt({
+				rule: holder.rule,
+				address
+			});
+			const stateEntries = Object.fromEntries(Object.entries(when).filter(([axis]) => axis.startsWith("_")));
+			ruleAt(when).delta[address] = null;
+			for (const condition of kept) {
+				const at = {
+					...condition,
+					...stateEntries
+				};
+				if (!written(at, address)) ruleAt(at).delta[address] = value;
+			}
+		}
+	}
+}
+/**
 * Refuses a change that names a layer the component doesn't have, a prop the layer can't take, a
 * state or modifier the config doesn't register, or a pin no rule can be conditioned on: only a
 * variant or boolean prop, or a state, conditions a rule.

package/dist/framework/layer-styles.d.ts

@@ -10,8 +10,7 @@ interface StoredRule {
  * unconditional `:where()` rules rank lower. Stable sorting preserves authored order among
  * conditions with different numbers of props. */
 declare function compareComponentRules(left: StoredRule, right: StoredRule): number;
-/** Whether every prop a rule names holds the value it asks for. Compared as strings, because a
- *  condition is canonicalized into the rule's key and a variant value is a string there.
+/** Whether every prop a rule names holds the value it asks for ({@link conditionHolds}).
  *
  *  An interaction (`_hover`, see `interaction-conditions`) holds only when the state says it does —
  *  `{ _hover: true }`, a surface forcing it — whichever layer the rule names: no prop bag is ever

package/dist/framework/layer-styles.js

@@ -29,14 +29,29 @@ import { resolveAppliedComposites } from "../entities/system/applied-composites.
 function compareComponentRules(left, right) {
 	return Number(Object.keys(left.when ?? {}).length > 0) - Number(Object.keys(right.when ?? {}).length > 0);
 }
-/** Whether every prop a rule names holds the value it asks for. Compared as strings, because a
-*  condition is canonicalized into the rule's key and a variant value is a string there.
+/**
+* Whether a prop's value holds a condition's value. Compared as strings, because a condition is
+* canonicalized into the rule's key and a variant value is a string there.
+*
+* A `false` condition also holds for a prop left unset, which renders as off: a rule written for a
+* matrix cell's `loading: false` reaches an instance that never mentions `loading`. The emitted
+* module tests the same way (`loading !== true`).
+*/
+function conditionHolds({ actual, expected }) {
+	const leaf = refLeaf(expected);
+	if (leaf === false && actual == null) return true;
+	return String(actual) === String(leaf);
+}
+/** Whether every prop a rule names holds the value it asks for ({@link conditionHolds}).
 *
 *  An interaction (`_hover`, see `interaction-conditions`) holds only when the state says it does —
 *  `{ _hover: true }`, a surface forcing it — whichever layer the rule names: no prop bag is ever
 *  hovered, so at rest the rule is out. */
 function ruleApplies(when, state) {
-	return Object.entries(when ?? {}).every(([prop, value]) => prop.startsWith("_") ? interactionHolds(state, prop, value) : String(state[prop]) === String(refLeaf(value)));
+	return Object.entries(when ?? {}).every(([prop, value]) => prop.startsWith("_") ? interactionHolds(state, prop, value) : conditionHolds({
+		actual: state[prop],
+		expected: value
+	}));
 }
 /** Whether an interaction holds: forced for the whole component (`_hover: true`, a surface's pin), or
 *  reported for the layer the condition names (`'_hover@close': true`, a live pointer). */
@@ -138,4 +153,4 @@ function layerStyles(config, path, props = {}, options = {}) {
 	return out;
 }
 //#endregion
-export { compareComponentRules, layerStyles, ruleApplies };
+export { compareComponentRules, conditionHolds, layerStyles, ruleApplies, ruleSpecificity };

package/dist/framework/render-spec.js

@@ -10,6 +10,7 @@ import { forwardRoutes, forwardedLayers, intoName, isValueSlot, renderBindingsOf
 import { withRequiredContentHidden } from "../entities/system/required-content-layers.js";
 import { inlineMotionProps, jsMotionPresets } from "../entities/system/motion-presets.js";
 import { graftPreviewElements } from "../spec/preview-elements.js";
+import { conditionHolds } from "./layer-styles.js";
 import { componentLayerClass, componentPropClasses, componentRuleClasses, componentStateAttributes, forcedModifierAttributes, layerJsMotionPresets, layerRoutedProps, splitStyleProps, styleRuleMotionClasses } from "./class-names.js";
 //#region src/framework/render-spec.ts
 /** A repeat source that is one prop binding: `{ "$state": "/stops" }`, settled by the cell alone. */
@@ -1143,7 +1144,10 @@ function ruleKeysFor(config, path, layer, state, pins) {
 	for (const rule of layerRules(config, path)) {
 		const layerKeys = rule.keys.get(layer);
 		if (!layerKeys) continue;
-		if (!rule.props.every(([prop, value]) => String(state[prop]) === String(value))) continue;
+		if (!rule.props.every(([prop, value]) => conditionHolds({
+			actual: state[prop],
+			expected: value
+		}))) continue;
 		if (!rule.modifiers.every(([modifier, value]) => value === true && (pins[modifier] === true || pins[modifier] === "true"))) continue;
 		for (const key of layerKeys) keys.add(key);
 	}
@@ -1163,7 +1167,10 @@ function classesFor(config, path, layer, state, extra) {
 	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);
+		if (Object.entries(rule.when).every(([prop, value]) => conditionHolds({
+			actual: state[prop],
+			expected: value
+		}))) parts.push(rule.className);
 	}
 	parts.push(...extra);
 	return parts.filter(Boolean).join(" ");

package/dist/spec/detach.js

@@ -4,6 +4,7 @@ import { rootLayerOf } from "../entities/system/element.js";
 import { authoredValue, declaredPropDefaults } from "../framework/projections.js";
 import { forwardRoutes, isValueSlot } from "../framework/prop-surface.js";
 import { isPreviewElement } from "./preview-elements.js";
+import { conditionHolds } from "../framework/layer-styles.js";
 import { entryKeyOf, resolveVisibility, slotAnatomyPropOf, slotTargetsOf } from "../framework/render-spec.js";
 import { Component } from "../entities/system/Component.js";
 //#region src/spec/detach.ts
@@ -35,7 +36,10 @@ function anatomyOf(body) {
 /** Whether a rule's condition holds under a prop bag, a ref compared by its leaf. */
 function ruleHolds(when, state) {
 	if (!when) return true;
-	return Object.entries(when).every(([prop, value]) => String(refLeaf(state[prop])) === String(refLeaf(value)));
+	return Object.entries(when).every(([prop, value]) => conditionHolds({
+		actual: refLeaf(state[prop]),
+		expected: value
+	}));
 }
 /** The rules in the order their bags apply: the unconditional ones, then by how many props a
 *  condition pins, so a narrower rule writes over a wider one the way the stylesheet cascades them. */