@yahoo/uds-create-config 5.61.0 → 5.62.0

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

@@ -65,6 +65,15 @@ declare const ReactNativeSystemDefinition: ConfigClass<{
         off: "off";
         warn: "warn";
       }>>>;
+      ignore: _$zod.ZodOptional<_$zod.ZodArray<_$zod.ZodObject<{
+        rule: _$zod.ZodString;
+        component: _$zod.ZodOptional<_$zod.ZodString>;
+        token: _$zod.ZodOptional<_$zod.ZodString>;
+        layer: _$zod.ZodOptional<_$zod.ZodString>;
+        prop: _$zod.ZodOptional<_$zod.ZodString>;
+        when: _$zod.ZodOptional<_$zod.ZodString>;
+        reason: _$zod.ZodString;
+      }, _$zod_v4_core0.$strict>>>;
     }, _$zod_v4_core0.$strict>>;
   }, "css" | "playground" | "canvas"> & {
     canvas: _$zod.ZodOptional<_$zod.ZodObject<{

package/dist/configs/system.js

@@ -32,6 +32,7 @@ import { linkTypeMigration } from "../migrations/20261022184639_link_type.js";
 import { conditionalDefaultsMigration } from "../migrations/20261023152030_conditional_defaults.js";
 import { timingValueMigration } from "../migrations/20261026125912_timing_value.js";
 import { variantValuesListWithBodiesMigration } from "../migrations/20261027184442_variant_values_list_with_bodies.js";
+import { lintIgnoreMigration } from "../migrations/20261027205147_lint_ignore.js";
 import { CanvasRole } from "../entities/system/CanvasRole.js";
 import { GlobalStyle } from "../entities/system/GlobalStyle.js";
 import { Guidance } from "../entities/system/Guidance.js";
@@ -197,5 +198,6 @@ if (!registeredSchemaMigrations().has(20261022184639)) registerSchemaMigrations(
 if (!registeredSchemaMigrations().has(20261023152030)) registerSchemaMigrations(conditionalDefaultsMigration);
 if (!registeredSchemaMigrations().has(20261026125912)) registerSchemaMigrations(timingValueMigration);
 if (!registeredSchemaMigrations().has(20261027184442)) registerSchemaMigrations(variantValuesListWithBodiesMigration);
+if (!registeredSchemaMigrations().has(20261027205147)) registerSchemaMigrations(lintIgnoreMigration);
 //#endregion
 export { System };

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

@@ -54,6 +54,15 @@ declare const NativeSettings: EntityClass<z.ZodObject<Omit<{
       off: "off";
       warn: "warn";
     }>>>;
+    ignore: z.ZodOptional<z.ZodArray<z.ZodObject<{
+      rule: z.ZodString;
+      component: z.ZodOptional<z.ZodString>;
+      token: z.ZodOptional<z.ZodString>;
+      layer: z.ZodOptional<z.ZodString>;
+      prop: z.ZodOptional<z.ZodString>;
+      when: z.ZodOptional<z.ZodString>;
+      reason: z.ZodString;
+    }, z.core.$strict>>>;
   }, z.core.$strict>>;
 }, "css" | "playground" | "canvas"> & {
   canvas: z.ZodOptional<z.ZodObject<{

package/dist/entities/native/NativeStyleProperty.js

@@ -13,13 +13,14 @@ import { z } from "zod";
 * `marginHorizontal`) would be our judgment, hand-maintained — the native catalog authors native
 * names directly. `classPrefix` is removed: it names emitted CSS classes, and native emits none.
 */
-const camelize = (property) => property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+/** A CSS property as React Native spells it (`background-color` → `backgroundColor`). */
+const rnStyleName = (property) => property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
 /** One React Native style key, as RN's own types declare them. */
 const rnStyleKey = z.enum(RN_STYLE_KEYS);
 const NativeStyleProperty = StyleProperty.extend({
 	entityName: "NativeStyleProperty",
 	fields: {
-		properties: z.array(z.string().transform(camelize).pipe(rnStyleKey)),
+		properties: z.array(z.string().transform(rnStyleName).pipe(rnStyleKey)),
 		values: z.array(stylePropValueSchema()).check((ctx) => {
 			ctx.value.forEach((entry, index) => {
 				const bag = entry.value;
@@ -46,4 +47,4 @@ const NativeStyleProperty = StyleProperty.extend({
 	}
 });
 //#endregion
-export { NativeStyleProperty, rnStyleKey };
+export { NativeStyleProperty, rnStyleKey, rnStyleName };

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

@@ -104,6 +104,15 @@ declare const LintSectionDefinition: SubEntityClass<z.ZodObject<{
     off: "off";
     warn: "warn";
   }>>>;
+  ignore: z.ZodOptional<z.ZodArray<z.ZodObject<{
+    rule: z.ZodString;
+    component: z.ZodOptional<z.ZodString>;
+    token: z.ZodOptional<z.ZodString>;
+    layer: z.ZodOptional<z.ZodString>;
+    prop: z.ZodOptional<z.ZodString>;
+    when: z.ZodOptional<z.ZodString>;
+    reason: z.ZodString;
+  }, z.core.$strict>>>;
 }, z.core.$strict>>;
 interface LintSectionClass extends Named<typeof LintSectionDefinition> {}
 declare const LintSection: LintSectionClass;
@@ -150,6 +159,15 @@ declare const SettingsDefinition: EntityClass<z.ZodObject<{
       off: "off";
       warn: "warn";
     }>>>;
+    ignore: z.ZodOptional<z.ZodArray<z.ZodObject<{
+      rule: z.ZodString;
+      component: z.ZodOptional<z.ZodString>;
+      token: z.ZodOptional<z.ZodString>;
+      layer: z.ZodOptional<z.ZodString>;
+      prop: z.ZodOptional<z.ZodString>;
+      when: z.ZodOptional<z.ZodString>;
+      reason: z.ZodString;
+    }, z.core.$strict>>>;
   }, z.core.$strict>>;
 }, z.core.$strict>, z.ZodObject<Record<never, never>, z.core.$strip>, "settings", {}, {
   /**

package/dist/entities/system/Settings.js

@@ -171,22 +171,41 @@ const PlaygroundSection = defineSubEntity({
 	singleton: true,
 	fields: playgroundFields
 });
-const lintFields = z.strictObject({ 
-/**
-* How loud each authoring lint rule is, by rule or by group — `{ editability: 'off',
-* 'inline-style-on-layer': 'error' }`. A rule's own entry wins over its group's; a rule named
-* neither way takes its default, a warning for most. A group never turns on a rule that is off by
-* default. Keyed by name rather than an enum, so a rule the build adds later needs no new schema; a
-* name that is no rule or group is reported, not refused.
-*/
-rules: z.record(z.string(), z.enum([
-	"off",
-	"warn",
-	"error"
-])).meta({
-	title: "Rules",
-	description: "A severity — `'off'`, `'warn'` or `'error'` — per authoring lint rule or per group of them (`portability`, `editability`, `maintainability`, `compatibility`, `nursery`): `{ editability: 'off' }` for a system only edited in its source, never through Create or the MCP tools. A `nursery` rule runs only when named on its own. A rule's own entry wins over its group's. Unset, most rules warn. An `'error'` makes `uds lint` exit with status 1, so a CI step that runs it fails. One site is quieted with `// uds-lint-ignore <rule>: <why>` on its line or the line above."
-}).optional() });
+const lintFields = z.strictObject({
+	/**
+	* How loud each authoring lint rule is, by rule or by group — `{ editability: 'off',
+	* 'inline-style-on-layer': 'error' }`. A rule's own entry wins over its group's; a rule named
+	* neither way takes its default, a warning for most. A group never turns on a rule that is off by
+	* default. Keyed by name rather than an enum, so a rule the build adds later needs no new schema; a
+	* name that is no rule or group is reported, not refused.
+	*/
+	rules: z.record(z.string(), z.enum([
+		"off",
+		"warn",
+		"error"
+	])).meta({
+		title: "Rules",
+		description: "A severity — `'off'`, `'warn'` or `'error'` — per authoring lint rule or per group of them (`portability`, `editability`, `maintainability`, `compatibility`, `nursery`): `{ editability: 'off' }` for a system only edited in its source, never through Create or the MCP tools. A `nursery` rule runs only when named on its own. A rule's own entry wins over its group's. Unset, most rules warn. An `'error'` makes `uds lint` exit with status 1, so a CI step that runs it fails. One site is quieted with `// uds-lint-ignore <rule>: <why>` on its line or the line above."
+	}).optional(),
+	/**
+	* Findings the system has decided to keep, each with why: Create's "Ignore", and the config-side
+	* twin of a `// uds-lint-ignore` comment, for a site Create edits rather than one a line spells. An
+	* entry quiets its rule on the component (and the layer, style key and rule it names, when it names
+	* them), so a later edit that moves a line doesn't drop it.
+	*/
+	ignore: z.array(z.strictObject({
+		rule: z.string(),
+		component: z.string().optional(),
+		token: z.string().optional(),
+		layer: z.string().optional(),
+		prop: z.string().optional(),
+		when: z.string().optional(),
+		reason: z.string().min(1)
+	})).meta({
+		title: "Ignored findings",
+		description: "Findings kept on purpose, each with its reason: a rule on a component, narrowed to a layer, a style key and the rule it is written in when those are given, or on a token. `uds lint` and Create both leave them out."
+	}).optional()
+});
 const LintSection = defineSubEntity({
 	name: "lint",
 	label: "Lint",

package/dist/framework/Config.d.ts

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

package/dist/framework/Config.js

@@ -6257,7 +6257,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 > 20261027184442) throw new SchemaVersionTooNew(claimed);
+		if (claimed > 20261027205147) 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.`);
 		const leftover = wire.options;

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

@@ -26,6 +26,16 @@ interface LayerStyleOptions {
    */
   readonly forced?: readonly string[];
 }
+/** One resolved style value, and the style rule that wrote it, by its key in `styles` (`*`, `size=sm`). */
+interface LayerDeclaration {
+  readonly value: unknown;
+  readonly rule: string;
+}
+/**
+ * The resolved style bag per layer, for the props an instance was given, with the rule each value
+ * came from: what a lint reports at, and writes a fix into.
+ */
+declare function layerDeclarations(config: Config, path: string, props?: Record<string, unknown>, options?: LayerStyleOptions): Record<string, Record<string, LayerDeclaration>>;
 /**
  * The resolved style bag per layer, for the props an instance was given.
  *
@@ -34,4 +44,4 @@ interface LayerStyleOptions {
  */
 declare function layerStyles(config: Config, path: string, props?: Record<string, unknown>, options?: LayerStyleOptions): Record<string, Record<string, unknown>>;
 //#endregion
-export { LayerStyleOptions, compareComponentRules, layerStyles, ruleApplies };
+export { LayerDeclaration, LayerStyleOptions, compareComponentRules, layerDeclarations, layerStyles, ruleApplies };

package/dist/framework/layer-styles.js

@@ -107,26 +107,21 @@ function ruleSpecificity(when) {
 	return Number(keys.length > interactions) + interactions;
 }
 /**
-* The resolved style bag per layer, for the props an instance was given.
-*
-* Layers with nothing to say are absent rather than empty, so a caller can tell "no styling" from
-* "styled with nothing".
+* A component's rules with each one's declarations already collected, per config and forced
+* modifiers: every cell of a matrix reads the same rules, and only which of them apply changes.
 */
-function layerStyles(config, path, props = {}, options = {}) {
-	const body = config.resolve("component", path)?.toJSON();
-	const { styles = {} } = body ?? {};
-	const state = {
-		...defaultsFor({
-			body,
-			given: props
-		}),
-		...props
-	};
-	const forced = (options.forced ?? []).map((name) => name.replace(/^_/, ""));
-	for (const name of forced) state[`_${name}`] = true;
-	const declarations = [];
-	Object.values(styles).forEach((rule, index) => {
-		if (!ruleApplies(rule.when, state)) return;
+const prepared = /* @__PURE__ */ new WeakMap();
+function preparedRules({ config, path, styles, forced }) {
+	let byComponent = prepared.get(config);
+	if (!byComponent) {
+		byComponent = /* @__PURE__ */ new Map();
+		prepared.set(config, byComponent);
+	}
+	const key = `${path}\n${forced.join(",")}`;
+	const hit = byComponent.get(key);
+	if (hit) return hit;
+	const rules = Object.values(styles).map((rule, index) => {
+		const collected = [];
 		for (const [layer, bag] of Object.entries(rule.layers ?? {})) collectBag({
 			bag: resolvedBag({
 				config,
@@ -134,23 +129,72 @@ function layerStyles(config, path, props = {}, options = {}) {
 			}),
 			forced,
 			specificity: ruleSpecificity(rule.when),
-			push: (key, value, specificity) => declarations.push({
+			push: (name, value, specificity) => collected.push({
 				layer,
-				key,
+				key: name,
 				value,
 				specificity,
 				rule: index,
-				order: declarations.length
+				order: collected.length
 			})
 		});
+		return {
+			when: rule.when,
+			collected
+		};
 	});
+	const answer = {
+		keys: Object.keys(styles),
+		rules
+	};
+	byComponent.set(key, answer);
+	return answer;
+}
+/**
+* The resolved style bag per layer, for the props an instance was given, with the rule each value
+* came from: what a lint reports at, and writes a fix into.
+*/
+function layerDeclarations(config, path, props = {}, options = {}) {
+	const body = config.resolve("component", path)?.toJSON();
+	const { styles = {} } = body ?? {};
+	const state = {
+		...defaultsFor({
+			body,
+			given: props
+		}),
+		...props
+	};
+	const forced = (options.forced ?? []).map((name) => name.replace(/^_/, ""));
+	for (const name of forced) state[`_${name}`] = true;
+	const { keys, rules } = preparedRules({
+		config,
+		path,
+		styles,
+		forced
+	});
+	const declarations = [];
+	for (const { when, collected } of rules) if (ruleApplies(when, state)) declarations.push(...collected);
 	declarations.sort((a, b) => a.specificity - b.specificity || a.rule - b.rule || a.order - b.order);
 	const out = {};
-	for (const { layer, key, value } of declarations) {
+	for (const { layer, key, value, rule } of declarations) {
 		out[layer] ??= {};
-		out[layer][key] = value;
+		out[layer][key] = {
+			value,
+			rule: keys[rule] ?? "*"
+		};
 	}
 	return out;
 }
+/**
+* The resolved style bag per layer, for the props an instance was given.
+*
+* Layers with nothing to say are absent rather than empty, so a caller can tell "no styling" from
+* "styled with nothing".
+*/
+function layerStyles(config, path, props = {}, options = {}) {
+	const out = {};
+	for (const [layer, bag] of Object.entries(layerDeclarations(config, path, props, options))) out[layer] = Object.fromEntries(Object.entries(bag).map(([key, { value }]) => [key, value]));
+	return out;
+}
 //#endregion
-export { compareComponentRules, conditionHolds, layerStyles, ruleApplies, ruleSpecificity };
+export { compareComponentRules, conditionHolds, layerDeclarations, layerStyles, ruleApplies, ruleSpecificity };

package/dist/framework/prop-surface.js

@@ -366,14 +366,29 @@ function surfaceProps(config, componentPath, seen = /* @__PURE__ */ new Set()) {
 *
 * `seen` guards a forward that routes to a forward that routes back: the chain is data, so nothing
 * stops an author writing a loop, and the surface is read on every panel render.
+*
+* A route that ends on a prop nothing declares (a Text layer's `href`, a tag layer's `aria-label`)
+* still reaches the element at runtime, so it surfaces as a plain string: there is no declaration to
+* say otherwise, and the alternative is a prop with no control at all. An event handler (`onClick`)
+* is never declared on the far end either, and takes a function, so it stays hidden.
 */
 function boundProp(config, layers, decl, seen) {
 	const propName = intoName(decl.into);
-	const target = isRef(decl.into) ? pathOf(decl.into) : refPath(layers?.[refPath(decl.target) ?? ""]);
-	if (!target) return void 0;
+	const element = layers?.[refPath(decl.target) ?? ""];
+	const undeclared = /^on[A-Z]/.test(propName) ? void 0 : {
+		name: propName,
+		kind: "string",
+		required: false
+	};
+	const target = isRef(decl.into) ? pathOf(decl.into) : refPath(element);
+	if (!target) return typeof element === "string" ? undeclared : void 0;
 	const key = `${target}#${propName}`;
 	if (seen.has(key)) return void 0;
-	return surfaceProps(config, target, new Set([...seen, key])).find((prop) => prop.name === propName);
+	const far = surfaceProps(config, target, new Set([...seen, key])).find((prop) => prop.name === propName);
+	if (far) return far;
+	const farBody = Component.get(config, target)?.toJSON();
+	if (!farBody) return void 0;
+	return propName in resolveComponentProps(config, target) || propName in (farBody.props ?? {}) ? void 0 : undeclared;
 }
 /** One prop by name, or `undefined` when the component doesn't expose it. */
 function surfaceProp(config, componentPath, name) {

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

package/dist/framework/utils/color.d.ts

@@ -0,0 +1,14 @@
+//#region src/framework/utils/color.d.ts
+/**
+ * CSS colors as numbers, and the WCAG contrast between two. Nothing here reads a config: it is the
+ * arithmetic the lint's contrast check and Create's canvas share.
+ */
+type Rgba = readonly [number, number, number, number];
+/** A CSS color as sRGB 0–1 and alpha, for the forms tokens hold: hex, `rgb()`, `hsl()`, `oklch()`. */
+declare function parseColor(text: string): Rgba | undefined;
+/** WCAG relative luminance of an sRGB 0–1 color. */
+declare function luminance([r, g, b]: Rgba): number;
+/** The WCAG contrast of text over an opaque background, the text's alpha laid over it. */
+declare function contrastRatio(text: Rgba, background: Rgba): number;
+//#endregion
+export { Rgba, contrastRatio, luminance, parseColor };

package/dist/framework/utils/color.js

@@ -0,0 +1,130 @@
+//#region src/framework/utils/color.ts
+/** A CSS color as sRGB 0–1 and alpha, for the forms tokens hold: hex, `rgb()`, `hsl()`, `oklch()`. */
+function parseColor(text) {
+	const value = text.trim().toLowerCase();
+	const hex = /^#([0-9a-f]{3,8})$/.exec(value)?.[1];
+	if (hex) {
+		const full = hex.length <= 4 ? hex.split("").map((one) => one + one).join("") : hex;
+		if (full.length !== 6 && full.length !== 8) return void 0;
+		const channel = (at) => Number.parseInt(full.slice(at, at + 2), 16) / 255;
+		return [
+			channel(0),
+			channel(2),
+			channel(4),
+			full.length === 8 ? channel(6) : 1
+		];
+	}
+	const fn = /^(rgba?|hsla?|oklch)\((.*)\)$/.exec(value);
+	if (!fn) {
+		if (value === "white") return [
+			1,
+			1,
+			1,
+			1
+		];
+		if (value === "black") return [
+			0,
+			0,
+			0,
+			1
+		];
+		return;
+	}
+	const [main = "", alphaPart] = (fn[2] ?? "").split("/");
+	const parts = main.replace(/,/g, " ").trim().split(/\s+/);
+	const commaAlpha = parts.length === 4 ? parts.pop() : void 0;
+	const number = (part, scale = 1) => {
+		if (part === void 0) return NaN;
+		return part.endsWith("%") ? Number(part.slice(0, -1)) / 100 * scale : Number(part.replace(/deg$/, ""));
+	};
+	const alphaText = (alphaPart ?? commaAlpha)?.trim();
+	const alpha = alphaText === void 0 ? 1 : number(alphaText, 1);
+	let rgb;
+	if (fn[1]?.startsWith("rgb")) rgb = [
+		0,
+		1,
+		2
+	].map((at) => number(parts[at], 255) / 255);
+	else if (fn[1]?.startsWith("hsl")) {
+		const h = (number(parts[0]) % 360 + 360) % 360 / 360;
+		const s = number(parts[1], 1);
+		const l = number(parts[2], 1);
+		const hue = (t) => {
+			const p = l < .5 ? l * (1 + s) : l + s - l * s;
+			const q = 2 * l - p;
+			const x = (t % 1 + 1) % 1;
+			if (x < 1 / 6) return q + (p - q) * 6 * x;
+			if (x < 1 / 2) return p;
+			if (x < 2 / 3) return q + (p - q) * (2 / 3 - x) * 6;
+			return q;
+		};
+		rgb = [
+			hue(h + 1 / 3),
+			hue(h),
+			hue(h - 1 / 3)
+		];
+	} else {
+		const lightness = number(parts[0], 1);
+		const chroma = number(parts[1], .4);
+		const angle = number(parts[2]) * Math.PI / 180;
+		const a = chroma * Math.cos(angle);
+		const b = chroma * Math.sin(angle);
+		const l_ = (lightness + .3963377774 * a + .2158037573 * b) ** 3;
+		const m_ = (lightness - .1055613458 * a - .0638541728 * b) ** 3;
+		const s_ = (lightness - .0894841775 * a - 1.291485548 * b) ** 3;
+		rgb = [
+			4.0767416621 * l_ - 3.3077115913 * m_ + .2309699292 * s_,
+			-1.2684380046 * l_ + 2.6097574011 * m_ - .3413193965 * s_,
+			-.0041960863 * l_ - .7034186147 * m_ + 1.707614701 * s_
+		].map((c) => {
+			const clamped = Math.min(1, Math.max(0, c));
+			return clamped <= .0031308 ? 12.92 * clamped : 1.055 * clamped ** (1 / 2.4) - .055;
+		});
+	}
+	if ([...rgb, alpha].some((one) => Number.isNaN(one))) return void 0;
+	return [...rgb, alpha];
+}
+/** WCAG relative luminance of an sRGB 0–1 color. */
+function luminance([r, g, b]) {
+	const linear = (c) => c <= .04045 ? c / 12.92 : ((c + .055) / 1.055) ** 2.4;
+	return .2126 * linear(r) + .7152 * linear(g) + .0722 * linear(b);
+}
+/** The WCAG contrast of text over an opaque background, the text's alpha laid over it. */
+function contrastRatio(text, background) {
+	const alpha = text[3];
+	const over = [
+		0,
+		1,
+		2
+	].map((at) => text[at] * alpha + background[at] * (1 - alpha));
+	const a = luminance([
+		over[0],
+		over[1],
+		over[2],
+		1
+	]);
+	const b = luminance(background);
+	return (Math.max(a, b) + .05) / (Math.min(a, b) + .05);
+}
+/** Hue in degrees and saturation 0–1 of an sRGB color, as HSL reads them. */
+function hueOf([r, g, b]) {
+	const max = Math.max(r, g, b);
+	const min = Math.min(r, g, b);
+	const delta = max - min;
+	const lightness = (max + min) / 2;
+	if (delta === 0) return {
+		hue: 0,
+		saturation: 0
+	};
+	const saturation = delta / (1 - Math.abs(2 * lightness - 1));
+	let hue;
+	if (max === r) hue = (g - b) / delta % 6;
+	else if (max === g) hue = (b - r) / delta + 2;
+	else hue = (r - g) / delta + 4;
+	return {
+		hue: (hue * 60 + 360) % 360,
+		saturation
+	};
+}
+//#endregion
+export { contrastRatio, hueOf, luminance, parseColor };

package/dist/framework/utils/css-length.d.ts

@@ -0,0 +1,12 @@
+//#region src/framework/utils/css-length.d.ts
+/**
+ * A CSS length or a bare number as written (`12`, `-1.5px`, `.5rem`): its number and unit, or
+ * `undefined` for anything else (`50%`, `auto`). The number's pattern matches each string one way, so
+ * a long run of digits can't make it backtrack.
+ */
+declare function parseCssLength(text: string): {
+  readonly number: number;
+  readonly unit: 'px' | 'rem' | '';
+} | undefined;
+//#endregion
+export { parseCssLength };

package/dist/framework/utils/css-length.js

@@ -0,0 +1,16 @@
+//#region src/framework/utils/css-length.ts
+/**
+* A CSS length or a bare number as written (`12`, `-1.5px`, `.5rem`): its number and unit, or
+* `undefined` for anything else (`50%`, `auto`). The number's pattern matches each string one way, so
+* a long run of digits can't make it backtrack.
+*/
+function parseCssLength(text) {
+	const match = /^(-?(?:\d+(?:\.\d+)?|\.\d+))(px|rem)?$/.exec(text.trim());
+	if (!match) return void 0;
+	return {
+		number: Number(match[1]),
+		unit: match[2] ?? ""
+	};
+}
+//#endregion
+export { parseCssLength };