@yahoo/uds-create-config 2.45.0 → 3.0.1

package/dist/css/value-type.d.ts

@@ -0,0 +1,48 @@
+//#region src/css/value-type.d.ts
+/**
+ * What KIND of CSS value a literal is.
+ *
+ * A token's `type` is an open string it may declare, and most don't — a raw palette is authored as
+ * bare hex values with no type at all. Everything that wants to treat a token as a colour (a
+ * swatch, a picker, the emitted type augmentation, the AI's catalogue) then has nothing to go on,
+ * so the inference lives here: beside the entity, once, rather than re-derived by each surface that
+ * needs it.
+ *
+ * The classification is deliberately shallow. It reads the SHAPE of a literal — a leading `#`, a
+ * known unit suffix, a recognised function head — and punts when nothing matches, because a wrong
+ * confident answer is worse than none: a cell that decides a value is a colour renders a swatch and
+ * a colour picker over something that isn't one.
+ */
+/** Recognised value kinds. Open-ended by design — a token's `type` is a string, not a closed set. */
+type ValueType = 'color' | 'length' | 'percentage' | 'angle' | 'time' | 'ratio' | 'shadow' | 'gradient' | 'easing-function' | 'number' | 'string';
+/**
+ * The type a literal looks like, or `undefined` when nothing matches.
+ *
+ * `undefined` is a real answer, not a failure: `var(--foo)` names another value rather than being
+ * one, and a bare keyword like `min-content` is a CSS-wide identifier the shape can't place beyond
+ * "some string".
+ */
+declare function sniffValueType(value: unknown): ValueType | undefined;
+interface ResolveValueTypeInput {
+  /** The type the token DECLARES, if any. */
+  readonly type?: string | null;
+  /** The token's resolved literal — a ref should be chased before it gets here. */
+  readonly value?: unknown;
+}
+/**
+ * A token's effective value type: what it DECLARES, else what its literal looks like.
+ *
+ * The declared type wins because it is an authoring decision — without it a token deliberately
+ * typed `string` could not hold a value that merely looks like a colour. The sniff answers for
+ * everything else, which is most of a raw palette.
+ *
+ * `undefined` when neither can say: an undeclared token whose value names something rather than
+ * being something (`var(--foo)`, an unchased ref) has no type to report, and inventing one would
+ * put a swatch on a value nobody can paint.
+ */
+declare function resolveValueType({
+  type,
+  value
+}: ResolveValueTypeInput): string | undefined;
+//#endregion
+export { ResolveValueTypeInput, ValueType, resolveValueType, sniffValueType };

package/dist/css/value-type.js

@@ -0,0 +1,131 @@
+//#region src/css/value-type.ts
+/** Function heads that introduce a colour. */
+const COLOR_FUNCTIONS = [
+	"rgb(",
+	"rgba(",
+	"hsl(",
+	"hsla(",
+	"hwb(",
+	"lab(",
+	"lch(",
+	"oklab(",
+	"oklch(",
+	"color(",
+	"color-mix("
+];
+/** Function heads that introduce a gradient. */
+const GRADIENT_FUNCTIONS = [
+	"linear-gradient(",
+	"radial-gradient(",
+	"conic-gradient(",
+	"repeating-linear-gradient(",
+	"repeating-radial-gradient(",
+	"repeating-conic-gradient("
+];
+/** Function heads that introduce an easing curve. */
+const EASING_FUNCTIONS = [
+	"cubic-bezier(",
+	"steps(",
+	"linear("
+];
+/** Absolute and relative length units, longest-first so `rem` wins over `em`. */
+const LENGTH_UNITS = [
+	"ch",
+	"cm",
+	"dvh",
+	"dvw",
+	"em",
+	"ex",
+	"in",
+	"lvh",
+	"lvw",
+	"mm",
+	"pc",
+	"pt",
+	"px",
+	"q",
+	"rem",
+	"svh",
+	"svw",
+	"vh",
+	"vmax",
+	"vmin",
+	"vw"
+];
+const NUMBER = /^-?(?:\d+(?:\.\d*)?|\.\d+)$/;
+const WITH_UNIT = /^-?(?:\d+(?:\.\d*)?|\.\d+)([a-z%]+)$/;
+/** `16 / 9`, and the space-less `16/9`. */
+const RATIO = /^\d+(\.\d+)?\s*\/\s*\d+(\.\d+)?$/;
+function startsWithAny(value, heads) {
+	return heads.some((head) => value.startsWith(head));
+}
+/**
+* The type a literal looks like, or `undefined` when nothing matches.
+*
+* `undefined` is a real answer, not a failure: `var(--foo)` names another value rather than being
+* one, and a bare keyword like `min-content` is a CSS-wide identifier the shape can't place beyond
+* "some string".
+*/
+function sniffValueType(value) {
+	if (typeof value !== "string") return void 0;
+	const trimmed = value.trim().toLowerCase();
+	if (!trimmed) return void 0;
+	if (trimmed.startsWith("var(")) return void 0;
+	if (trimmed.startsWith("#")) return "color";
+	if (startsWithAny(trimmed, GRADIENT_FUNCTIONS)) return "gradient";
+	if (startsWithAny(trimmed, COLOR_FUNCTIONS)) return "color";
+	if (startsWithAny(trimmed, EASING_FUNCTIONS)) return "easing-function";
+	if (RATIO.test(trimmed)) return "ratio";
+	if (NUMBER.test(trimmed)) return "number";
+	const unit = WITH_UNIT.exec(trimmed)?.[1];
+	if (unit === "%") return "percentage";
+	if (unit === "deg" || unit === "rad" || unit === "grad" || unit === "turn") return "angle";
+	if (unit === "s" || unit === "ms") return "time";
+	if (unit && LENGTH_UNITS.includes(unit)) return "length";
+	if (isShadow(trimmed)) return "shadow";
+	return "string";
+}
+/**
+* A shadow: at least two space-separated lengths, optionally followed by a colour, and optionally
+* led by `inset`. Enough to distinguish `0 1px 2px rgba(…)` from a keyword without a real parser.
+*/
+function isShadow(value) {
+	const parts = splitTopLevel(value.startsWith("inset ") ? value.slice(6) : value);
+	if (parts.length < 3) return false;
+	return parts.filter((part) => NUMBER.test(part) || WITH_UNIT.test(part)).length >= 2;
+}
+/** Split on whitespace, keeping bracketed groups intact. */
+function splitTopLevel(value) {
+	const parts = [];
+	let depth = 0;
+	let current = "";
+	for (const char of value) {
+		if (char === "(") depth++;
+		if (char === ")") depth--;
+		if (depth === 0 && /\s/.test(char)) {
+			if (current) parts.push(current);
+			current = "";
+			continue;
+		}
+		current += char;
+	}
+	if (current) parts.push(current);
+	return parts;
+}
+/**
+* A token's effective value type: what it DECLARES, else what its literal looks like.
+*
+* The declared type wins because it is an authoring decision — without it a token deliberately
+* typed `string` could not hold a value that merely looks like a colour. The sniff answers for
+* everything else, which is most of a raw palette.
+*
+* `undefined` when neither can say: an undeclared token whose value names something rather than
+* being something (`var(--foo)`, an unchased ref) has no type to report, and inventing one would
+* put a swatch on a value nobody can paint.
+*/
+function resolveValueType({ type, value }) {
+	if (type) return type;
+	return sniffValueType(value);
+}
+//#endregion
+export { resolveValueType, sniffValueType };

package/dist/css/values.d.ts

@@ -0,0 +1,33 @@
+import { CssGrammar } from "../framework/Config.js";
+import { CssPropertyEntry } from "./properties.generated.js";
+
+//#region src/css/values.d.ts
+/** The keywords every property takes, which the grammars leave out. */
+declare const CSS_WIDE_KEYWORDS: ReadonlySet<string>;
+/** Every property the table knows, in CSS spelling, sorted. */
+declare const CSS_PROPERTY_NAMES: readonly string[];
+/** The CSS property behind a name in either spelling, if it is one. */
+declare function cssProperty(name: string): CssPropertyEntry | undefined;
+/** Whether a name, in JSX or CSS spelling, is a CSS property. Vendor-prefixed names are not. */
+declare function isCssProperty(name: string): boolean;
+/**
+ * Why a literal is not a value the CSS property takes: `undefined` when it is, a message when it is
+ * refused, or `'unknown'` for a value nothing here can judge.
+ *
+ * The table holds keywords and single-class literals. A shorthand (`all 200ms ease`), a function
+ * (`rgb(…)`, `calc(…)`), a property outside the table and a class with no literal spelling
+ * (`custom-ident`) are beyond it and go to `grammar` when one is given: a verdict there accepts or
+ * refuses, and no verdict leaves the value `'unknown'`, never refused. The table's own answer is never
+ * put to the grammar.
+ */
+declare function cssValueIssue({
+  property,
+  value,
+  grammar
+}: {
+  property: string;
+  value: string | number;
+  grammar?: CssGrammar;
+}): string | undefined;
+//#endregion
+export { CSS_PROPERTY_NAMES, CSS_WIDE_KEYWORDS, cssProperty, cssValueIssue, isCssProperty };

package/dist/css/values.js

@@ -0,0 +1,116 @@
+import { ref } from "../framework/utils/refs.js";
+import { CSS_PROPERTIES } from "./properties.generated.js";
+//#region src/css/values.ts
+/** A token ref as a model writes it, spelled from the ref itself so the prose can't drift. */
+const spelled = (path) => JSON.stringify(ref("token", path));
+/** `borderRadius` → `border-radius`: the CSS spelling of a JSX name. */
+const kebabCase = (name) => name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
+/** The keywords every property takes, which the grammars leave out. */
+const CSS_WIDE_KEYWORDS = new Set([
+	"inherit",
+	"initial",
+	"unset",
+	"revert",
+	"revert-layer"
+]);
+/** Every property the table knows, in CSS spelling, sorted. */
+const CSS_PROPERTY_NAMES = Object.keys(CSS_PROPERTIES).sort((a, b) => a.localeCompare(b));
+/** The CSS property behind a name in either spelling, if it is one. */
+function cssProperty(name) {
+	const css = kebabCase(name);
+	return Object.hasOwn(CSS_PROPERTIES, css) ? CSS_PROPERTIES[css] : void 0;
+}
+/** Whether a name, in JSX or CSS spelling, is a CSS property. Vendor-prefixed names are not. */
+function isCssProperty(name) {
+	return cssProperty(name) !== void 0;
+}
+const NUMBER = String.raw`[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?`;
+const LENGTH_UNITS = "px|em|rem|ex|rex|cap|rcap|ch|rch|ic|ric|lh|rlh|vw|vh|vi|vb|vmin|vmax|svw|svh|svi|svb|svmin|svmax|lvw|lvh|lvi|lvb|lvmin|lvmax|dvw|dvh|dvi|dvb|dvmin|dvmax|cqw|cqh|cqi|cqb|cqmin|cqmax|cm|mm|q|in|pt|pc";
+const dimension = (units) => new RegExp(`^${NUMBER}(?:${units})$`, "i");
+/**
+* The literal spelling of each value class, for the classes that have one. A class outside this table
+* (`url`, `image`, `custom-ident`, `dashed-ident`) is spelled by a function or by any identifier, so a
+* value that matches nothing else is not refused, only unjudged.
+*/
+const LITERALS = {
+	length: new RegExp(`^(?:${NUMBER}(?:${LENGTH_UNITS})|[+-]?0+)$`, "i"),
+	percentage: new RegExp(`^${NUMBER}%$`),
+	"length-percentage": new RegExp(`^(?:${NUMBER}(?:${LENGTH_UNITS}|%)|[+-]?0+)$`, "i"),
+	number: new RegExp(`^${NUMBER}$`),
+	integer: /^[+-]?\d+$/,
+	color: /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i,
+	time: dimension("ms|s"),
+	angle: dimension("deg|grad|rad|turn"),
+	flex: dimension("fr"),
+	string: /^(?:"[^"]*"|'[^']*')$/
+};
+/** How a refusal names each class, with a spelling the writer can copy. */
+const CLASS_NOUNS = {
+	length: "a length (`4px`, `0.5rem`)",
+	percentage: "a percentage (`50%`)",
+	"length-percentage": "a length or a percentage (`4px`, `50%`)",
+	number: "a number (`1.5`)",
+	integer: "an integer (`3`)",
+	color: "a hex color (`#1DB954`)",
+	time: "a time (`200ms`)",
+	angle: "an angle (`45deg`)",
+	flex: "a flex fraction (`1fr`)",
+	string: "a quoted string"
+};
+const SHOWN_KEYWORDS = 12;
+function takes(entry) {
+	const parts = [];
+	if (entry.keywords.length > 0) {
+		const shown = entry.keywords.slice(0, SHOWN_KEYWORDS).map((keyword) => `\`${keyword}\``).join(", ");
+		const rest = entry.keywords.length - SHOWN_KEYWORDS;
+		parts.push(rest > 0 ? `one of ${shown} (${rest} more)` : `one of ${shown}`);
+	}
+	for (const cls of entry.classes) {
+		const noun = CLASS_NOUNS[cls];
+		if (noun) parts.push(noun);
+	}
+	return parts.join(", or ");
+}
+/** How a refusal points at the token form, whichever check refused. */
+const TOKEN_HINT = ` A scale step or a color is a token: reference it as \`${spelled("<group>/<name>")}\`, or its group, \`${spelled("<group>")}\`, to offer every token in it.`;
+/**
+* Why a literal is not a value the CSS property takes: `undefined` when it is, a message when it is
+* refused, or `'unknown'` for a value nothing here can judge.
+*
+* The table holds keywords and single-class literals. A shorthand (`all 200ms ease`), a function
+* (`rgb(…)`, `calc(…)`), a property outside the table and a class with no literal spelling
+* (`custom-ident`) are beyond it and go to `grammar` when one is given: a verdict there accepts or
+* refuses, and no verdict leaves the value `'unknown'`, never refused. The table's own answer is never
+* put to the grammar.
+*/
+function cssValueIssue({ property, value, grammar }) {
+	const css = kebabCase(property);
+	const text = String(value).trim();
+	if (CSS_WIDE_KEYWORDS.has(text)) return void 0;
+	const unjudged = () => {
+		const verdict = grammar?.({
+			property: css,
+			value: text
+		});
+		if (verdict === void 0) return "unknown";
+		if (verdict) return void 0;
+		return `\`${text}\` is not a value \`${css}\` takes: it does not match the property's grammar.${TOKEN_HINT}`;
+	};
+	const entry = cssProperty(property);
+	if (!entry) return unjudged();
+	if (/[\s,/(]/.test(text)) return unjudged();
+	const lower = text.toLowerCase();
+	if (entry.keywords.some((keyword) => keyword.toLowerCase() === lower)) return;
+	let judged = true;
+	for (const cls of entry.classes) {
+		const literal = LITERALS[cls];
+		if (!literal) judged = false;
+		else if (literal.test(text)) return void 0;
+	}
+	if (!judged) return unjudged();
+	if (/^-[a-z]/i.test(text)) return unjudged();
+	const accepted = takes(entry);
+	return `\`${text}\` is not a value \`${css}\` takes.${accepted ? ` It takes ${accepted}.` : ""}${TOKEN_HINT}`;
+}
+//#endregion
+export { CSS_PROPERTY_NAMES, CSS_WIDE_KEYWORDS, cssProperty, cssValueIssue, isCssProperty, kebabCase };

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

@@ -0,0 +1,25 @@
+import { EntityClass } from "../../framework/defineEntity.js";
+import { z } from "zod";
+
+//#region src/entities/native/NativeModifier.d.ts
+declare const NATIVE_ACTIVATIONS: readonly ["appearance", "min-width", "operating-system", "state"];
+type NativeActivation = (typeof NATIVE_ACTIVATIONS)[number];
+declare const NativeModifier: EntityClass<z.ZodObject<{
+  type: z.ZodEnum<{
+    appearance: "appearance";
+    "min-width": "min-width";
+    state: "state";
+    "operating-system": "operating-system";
+  }>;
+  value: z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>;
+}, z.core.$strip>, z.ZodObject<{
+  type: z.ZodOptional<z.ZodEnum<{
+    mode: "mode";
+    state: "state";
+  }>>;
+  default: z.ZodOptional<z.ZodObject<{
+    __ref: z.ZodString;
+  }, z.core.$strip>>;
+}, z.core.$strip>, "modifier", Record<never, never>, Record<never, never>, false>;
+//#endregion
+export { NATIVE_ACTIVATIONS, NativeActivation, NativeModifier };

package/dist/entities/native/NativeModifier.js

@@ -0,0 +1,41 @@
+import { defineEntity } from "../../framework/defineEntity.js";
+import { modifierAxis, modifierGroupFields, modifierInvariants } from "../system/Modifier.js";
+import { z } from "zod";
+//#region src/entities/native/NativeModifier.ts
+/**
+* The native variant of `Modifier`. Web's `selector`/`media-query` split is a CSS concept; a native
+* condition is one the OS or a component reports: the appearance (light/dark), a viewport width
+* floor, the operating system itself, or a runtime state a component reports (`pressed`, in
+* Pressable's vocabulary rather than a pseudo-class). An iOS/Android difference is an ordinary
+* modifier riding an `operating-system` option; both ship in one binary, so the choice happens at
+* runtime and codegen's job is `Platform.select()`.
+*/
+const NATIVE_ACTIVATIONS = [
+	"appearance",
+	"min-width",
+	"operating-system",
+	"state"
+];
+const NativeModifier = defineEntity({
+	kind: "modifier",
+	entityName: "NativeModifier",
+	fields: z.object({
+		type: z.enum(NATIVE_ACTIVATIONS),
+		value: z.union([z.string(), z.number()])
+	}),
+	groupFields: modifierGroupFields,
+	uniqueLeaves: true,
+	invariants: (config) => {
+		const problems = modifierInvariants(config);
+		for (const item of config.list("modifier")) {
+			const axis = modifierAxis(config, item.path);
+			const { type } = item.toJSON();
+			const wants = type === "state" ? "state" : "mode";
+			if (!axis) problems.push(`Native modifier "${item.path}" belongs to no typed group; a native condition is either an option of a \`mode\` group or a member of a \`state\` group.`);
+			else if (axis.type !== wants) problems.push(`Native modifier "${item.path}" activates by \`${type}\`, which belongs under a group typed \`${wants}\`, not "${axis.group}" (\`${axis.type}\`).`);
+		}
+		return problems;
+	}
+});
+//#endregion
+export { NATIVE_ACTIVATIONS, NativeModifier };

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

@@ -0,0 +1,44 @@
+import { SubEntityClass } from "../../framework/defineSubEntity.js";
+import { EntityClass } from "../../framework/defineEntity.js";
+import { z } from "zod";
+
+//#region src/entities/native/NativeSettings.d.ts
+/** The `canvas` section — how the browser canvas renders a native system. */
+declare const CanvasSection: SubEntityClass<z.ZodObject<{
+  packageAliases: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
+}, z.core.$strict>>;
+/**
+ * `NativeSettings` — the settings of a `ReactNativeSystem`. The same kind as `Settings`, so a reader
+ * asks `Settings.get(config)` on either; the shape differs: no `css` and no `playground`, since a
+ * native system emits no stylesheet and serves no playground, so a native config declaring either is
+ * refused rather than silently carrying a web concept it cannot honor. `canvas` is added.
+ */
+declare const NativeSettings: EntityClass<z.ZodObject<Omit<{
+  system: z.ZodOptional<z.ZodObject<{
+    id: z.ZodOptional<z.ZodString>;
+  }, z.core.$strict>>;
+  build: z.ZodOptional<z.ZodObject<{
+    inputDir: z.ZodOptional<z.ZodString>;
+    outDir: z.ZodOptional<z.ZodString>;
+    registryDir: z.ZodOptional<z.ZodString>;
+  }, z.core.$strict>>;
+  css: z.ZodOptional<z.ZodObject<{
+    prefix: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
+      classNames: z.ZodString;
+      variables: z.ZodString;
+    }, z.core.$strict>]>>;
+    scope: z.ZodOptional<z.ZodString>;
+    preflight: z.ZodOptional<z.ZodBoolean>;
+    safelist: z.ZodOptional<z.ZodArray<z.ZodString>>;
+  }, z.core.$strict>>;
+  playground: z.ZodOptional<z.ZodObject<{
+    pagesDir: z.ZodOptional<z.ZodString>;
+    port: z.ZodOptional<z.ZodNumber>;
+  }, z.core.$strict>>;
+}, "css" | "playground" | "canvas"> & {
+  canvas: z.ZodOptional<z.ZodObject<{
+    packageAliases: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
+  }, z.core.$strict>>;
+}, z.core.$strip>, z.ZodObject<Omit<Record<never, never>, never> & {}, z.core.$strip>, "settings", Record<never, never>, Record<never, never>, true>;
+//#endregion
+export { CanvasSection, NativeSettings };

package/dist/entities/native/NativeSettings.js

@@ -0,0 +1,39 @@
+import { defineSubEntity } from "../../framework/defineSubEntity.js";
+import { Settings } from "../system/Settings.js";
+import { z } from "zod";
+//#region src/entities/native/NativeSettings.ts
+const canvasFields = z.strictObject({ 
+/** Browser-canvas-only package replacements, by package name. Values resolve from the config
+*  directory; phone and application builds continue importing the real package. */
+packageAliases: z.record(z.string(), z.string()).meta({
+	title: "Package aliases",
+	description: "Packages the browser canvas swaps for a local module, by package name. Paths resolve from the config directory. Phone and app builds keep the real package."
+}).optional() });
+/** The `canvas` section — how the browser canvas renders a native system. */
+const CanvasSection = defineSubEntity({
+	name: "canvas",
+	label: "Canvas",
+	singleton: true,
+	fields: canvasFields
+});
+/**
+* `NativeSettings` — the settings of a `ReactNativeSystem`. The same kind as `Settings`, so a reader
+* asks `Settings.get(config)` on either; the shape differs: no `css` and no `playground`, since a
+* native system emits no stylesheet and serves no playground, so a native config declaring either is
+* refused rather than silently carrying a web concept it cannot honor. `canvas` is added.
+*/
+const NativeSettings = Settings.extend({
+	entityName: "NativeSettings",
+	fields: {
+		css: null,
+		playground: null,
+		canvas: canvasFields.meta({ title: "Canvas" }).optional()
+	},
+	subEntities: {
+		css: null,
+		playground: null,
+		canvas: CanvasSection
+	}
+});
+//#endregion
+export { CanvasSection, NativeSettings };