@yahoo/uds-create-config 5.76.0 → 5.77.0

package/dist/capture/class-grammar.js

@@ -1,19 +1,59 @@
 import { isRef, pathOf } from "../framework/utils/refs.js";
 import { className, renderStyleValue, resolveComponentProps, resolveTokenValue, stylePropEntries } from "../framework/projections.js";
 import { intoName, routesContent, routesIntoText } from "../framework/prop-surface.js";
-import { componentLayerClass, componentRuleClasses, stylePropClasses } from "../framework/class-names.js";
+import { arbitraryClassName, componentLayerClass, componentRuleClasses, stylePropClasses } from "../framework/class-names.js";
 //#region src/capture/class-grammar.ts
 const VIEWPORT_UNIT = /\d(vh|vw|dvh|dvw|svh|svw|lvh|lvw|vmin|vmax)\b/;
 /** `0px` → `0`, collapsed spaces, lowercase keywords; what two spellings of one value share. */
+/** CSS properties whose value is a colour. */
+const COLOR_PROPERTY = /(^|-)(color|fill|stroke)$|^background$/;
+/** Whether an off-scale value is a colour (`#f00`, `rgb(…)`, a named colour), not a length or a number. */
+function isColorValue(value) {
+	const v = value.trim().toLowerCase();
+	if (/^(#|rgba?\(|hsla?\(|oklch\(|oklab\(|lab\(|lch\(|color\(|color-mix\()/.test(v)) return true;
+	if (/^(color|colour):/.test(v)) return true;
+	if (/^[-\d.]/.test(v) || /^(calc|min|max|clamp|var)\(/.test(v)) return false;
+	return /^[a-z]+$/.test(v) && v !== "auto" && v !== "none";
+}
 function normalizeCssValue(value) {
 	return value.trim().replace(/\s+/g, " ").replace(/(^|[\s,(])0(?:px|rem|em|%)(?=$|[\s,)])/g, "$10").toLowerCase();
 }
 function classGrammar(config) {
 	const styleProps = /* @__PURE__ */ new Map();
-	for (const entity of config.list("style-property")) for (const [leaf, cls] of stylePropClasses(config, entity.path)) if (!styleProps.has(cls)) styleProps.set(cls, {
-		path: entity.path,
-		leaf
-	});
+	const arbitraryStems = /* @__PURE__ */ new Map();
+	for (const entity of config.list("style-property")) {
+		for (const [leaf, cls] of stylePropClasses(config, entity.path)) if (!styleProps.has(cls)) styleProps.set(cls, {
+			path: entity.path,
+			leaf
+		});
+		if (entity.toJSON().arbitrary) {
+			const stem = arbitraryClassName({
+				config,
+				path: entity.path,
+				value: "[x]"
+			}).slice(0, -3);
+			arbitraryStems.set(stem, [...arbitraryStems.get(stem) ?? [], entity.path]);
+		}
+	}
+	const arbitraryMatch = (cls) => {
+		const open = cls.indexOf("[");
+		if (open <= 0) return void 0;
+		const close = cls.indexOf("]", open);
+		if (close === -1) return void 0;
+		const rest = cls.slice(close + 1);
+		if (rest !== "" && !/^\/(?:\[[^\]]+\]|[\w.-]+)$/.test(rest)) return void 0;
+		const paths = arbitraryStems.get(cls.slice(0, open)) ?? [];
+		const inner = cls.slice(open + 1, close);
+		if (!inner || paths.length === 0) return void 0;
+		return {
+			path: paths.length === 1 ? paths[0] : paths.find((each) => writesColor(each) === isColorValue(inner)) ?? paths[0],
+			leaf: `[${inner}]`
+		};
+	};
+	function writesColor(path) {
+		const { properties = [] } = config.resolve("style-property", path)?.toJSON() ?? {};
+		return properties.some((property) => COLOR_PROPERTY.test(property));
+	}
 	const composites = config.list("composite").map((entity) => ({
 		path: entity.path,
 		cls: className(config, "composite", entity.path)
@@ -126,7 +166,7 @@ function classGrammar(config) {
 		};
 	};
 	return {
-		styleProp: (cls) => styleProps.get(cls),
+		styleProp: (cls) => styleProps.get(cls) ?? arbitraryMatch(cls),
 		stylePropsFor: (cssProperty) => byCss.get(cssProperty.toLowerCase()) ?? [],
 		viewportLeaf(path, leaf) {
 			return (valuesOf(path).get(leaf) ?? []).some((v) => VIEWPORT_UNIT.test(v));

package/dist/entities/system/Component.js

@@ -2183,7 +2183,7 @@ const ComponentEntity = defineEntity({
 			input: z.object({ path: pathInput("component") }),
 			readOnly: false,
 			label: "Create blank",
-			description: "Create an empty component at a new qualified `path`, to design on the canvas first: one `div` root layer and the node that renders it, with no props, no variants, no slot, no styles and no preview content. This is exactly what Studio's \"+\" creates. Takes only `path`. Use it for \"a new component\", \"a blank component\" or \"start a component from nothing\"; `create` is for a component whose body is already known.",
+			description: "Create an empty component at a new qualified `path`, to design on the canvas first: one `div` root layer and the node that renders it, with no props, no variants, no slot, no styles and no preview content. This is exactly what Create's \"+\" creates. Takes only `path`. Use it for \"a new component\", \"a blank component\" or \"start a component from nothing\"; `create` is for a component whose body is already known.",
 			scope: "item",
 			creates: true,
 			title: (entity) => `Create blank ${entity}`,
@@ -2202,7 +2202,7 @@ const ComponentEntity = defineEntity({
 			example: ({ config }) => forwardsCreateExample(config)
 		},
 		"sub-upsert/forwards": { description: `Set what one layer forwards, added when absent and replaced whole when present. ${FORWARDS_DESCRIPTION}` },
-		"sub-update/forwards": { description: `Replace what one layer forwards: the member is \`'*'\` or a list, so \`data\` is the whole new value. ${FORWARDS_DESCRIPTION}` },
+		"sub-update/forwards": { description: `Replace what one layer forwards: the member is a list of prop names, so \`data\` is the whole new list. ${FORWARDS_DESCRIPTION}` },
 		/**
 		* Add an element to a composition — a layer and the node that targets it, together.
 		*
@@ -2500,7 +2500,7 @@ count: z.number().int().min(1).max(50).optional() }).prefault({})
 			}),
 			readOnly: false,
 			label: "Forward layer props",
-			description: "Expose a layer's props at the component's top level (\"forward everything from the root but icon\", \"also forward width\"): `props` is `\"*\"` for every prop the layer's element takes, or a list added to what the layer forwards now, or that replaces it with `replace`; `except` leaves props out of either. A prop the element lacks, one the component declares itself, and one a sibling layer already forwards are refused. Read `component/get` for what a layer forwards now.",
+			description: "Expose a layer's props at the component's top level (\"also forward width\", \"forward onClick from the root\"): `props` is a list of prop names, added to what the layer forwards now, or replacing it with `replace`. A prop the element lacks, one the component declares itself, and one a sibling layer already forwards are refused. Read `component/get` for what a layer forwards now.",
 			scope: "item",
 			title: (entity) => `Forward ${entity} layer props`,
 			handler: (input, config) => {

package/dist/framework/defineDerivedEntity.js

@@ -14,7 +14,7 @@ import { z } from "zod";
 *    non-serializable projection (a zod schema, a function). Each fn declares its own provenance.
 *
 * A derived kind self-derives on registration, sourcing from the config it's registered into;
-* `Config.register` routes it by whether the KIND is derived. See `docs/config-v2.md`.
+* `Config.register` routes it by whether the kind is derived.
 */
 /** What `extend` accepts. Checked at runtime because `extend` is shadowed: an unrecognized key is a
 *  typo, or a zod raw shape reaching this method expecting zod's `extend`. Either should say so

package/dist/index.js

@@ -66,11 +66,11 @@ import { styleSetEdits } from "./entities/system/component-style-set.js";
 import { convertLinkedTokenValue, prepareLinkedTokenBody } from "./entities/system/linked-token-values.js";
 import { Token, defineOverride, overrideCondition, overrideKey, overrideKeyModifiers, overrideModifiers } from "./entities/system/Token.js";
 import { Component, SLOT_CODE_FORMS, blankComponentBody, canonicalWhen, forwardedNames, layerRef, ownValues, ownsItsValues, valueRef } from "./entities/system/Component.js";
+import { Icon, iconVariantAs } from "./entities/system/Icon.js";
+import { glyphExportNames, glyphType, iconCategories, iconLibraries, iconLibrary, iconToolLibraries, isDeclaredElementProp, librariesBoundBy, libraryHolding, memberVariantOptions, placedGlyphElement, resolveIconLibraries } from "./entities/system/icon-library.js";
 import { CapturedNode, capturedFromDom, elementFromCaptured } from "./capture/captured-tree.js";
 import { classGrammar } from "./capture/class-grammar.js";
 import { specFromCapture } from "./capture/capture-to-spec.js";
-import { Icon, iconVariantAs } from "./entities/system/Icon.js";
-import { glyphExportNames, glyphType, iconCategories, iconLibraries, iconLibrary, iconToolLibraries, isDeclaredElementProp, librariesBoundBy, libraryHolding, memberVariantOptions, placedGlyphElement, resolveIconLibraries } from "./entities/system/icon-library.js";
 import { glyphSourcesOf, iconResolver, nameIconsInTree } from "./capture/icon-resolver.js";
 import { PLACED_NODE_KEY, specToNodePatches } from "./entities/canvas/node-patches.js";
 import { Device } from "./entities/system/Device.js";