@yahoo/uds-create-config 5.34.3 → 5.35.1

package/dist/spec/bake.js

@@ -0,0 +1,405 @@
+import { kindOf, refLeaf } from "../framework/utils/refs.js";
+import { declaredPropDefaults } from "../framework/projections.js";
+import { graftPreviewElements } from "./preview-elements.js";
+import { instanceSpec } from "../framework/render-spec.js";
+import { canvasCellAt, cellAxes } from "./cell.js";
+import { Component } from "../entities/system/Component.js";
+//#region src/spec/bake.ts
+/** The element an empty slot holds. */
+const EMPTY_SLOT = "Slot";
+/**
+* Each component element with what the cell its props pick gives it, where it sets nothing itself
+* and the component wouldn't render it by itself: a plain value on its props, content for an empty
+* slot as elements. A value or a slot the element sets is its own and stays. Slot content lands as
+* the cell authored it, so a component inside it is not baked in turn.
+*/
+function withCellValues(config, spec) {
+	let elements;
+	for (const key of Object.keys(spec.elements)) {
+		const element = (elements ?? spec.elements)[key];
+		if (!element || typeof element.type !== "string") continue;
+		if (kindOf(element.type) !== "component") continue;
+		const component = Component.get(config, element.type);
+		if (!component) continue;
+		const own = element.props ?? {};
+		const seed = seedAt({
+			config,
+			path: component.path,
+			props: own
+		});
+		let props;
+		let slots;
+		for (const prop of seed.props) {
+			if (own[prop] !== void 0) continue;
+			if (holdsContent(elements ?? spec.elements, element, prop)) continue;
+			const fills = seed.root.slots?.[prop];
+			if (!fills) {
+				props ??= { ...own };
+				props[prop] = seed.root.props?.[prop];
+				continue;
+			}
+			elements ??= { ...spec.elements };
+			const added = [];
+			for (const fill of fills) {
+				const to = graftSubtree({
+					source: seed.spec,
+					from: fill,
+					into: elements,
+					root: key
+				}).get(fill);
+				if (to) added.push(to);
+			}
+			slots ??= { ...element.slots ?? {} };
+			slots[prop] = added;
+		}
+		if (!props && !slots) continue;
+		elements ??= { ...spec.elements };
+		elements[key] = {
+			...element,
+			...props ? { props } : {},
+			...slots ? { slots } : {}
+		};
+	}
+	return elements ? {
+		...spec,
+		elements
+	} : spec;
+}
+/** The component placed at the cell `props` pick, with what that cell bakes in: the seed a slot of
+*  an instance is restored from. */
+function cellSeedSpec({ config, path, props }) {
+	const axes = new Set(cellAxes(config, path));
+	const picked = Object.fromEntries(Object.entries(props).filter(([prop]) => axes.has(prop)));
+	let byKey = bakedByConfig.get(config);
+	if (!byKey) {
+		byKey = /* @__PURE__ */ new Map();
+		bakedByConfig.set(config, byKey);
+	}
+	const key = `${path}\u0000${stable(picked)}`;
+	const hit = byKey.get(key);
+	if (hit) return hit;
+	const made = withCellValues(config, instanceSpec(path, picked));
+	byKey.set(key, made);
+	return made;
+}
+const bakedByConfig = /* @__PURE__ */ new WeakMap();
+const NO_EDITS = [];
+/** The content props a placed element has changed away from what its cell bakes: what a panel
+*  marks edited, and what a reset puts back. The axes that pick the cell are never content. */
+function editedCellContent({ config, spec, elementKey }) {
+	const at = bakedAt({
+		config,
+		spec,
+		elementKey
+	});
+	if (!at) return NO_EDITS;
+	const out = [];
+	for (const prop of at.content) {
+		if (at.shows(spec, prop)) continue;
+		const slot = fillsOf(at.root, prop).length > 0;
+		out.push({
+			prop,
+			slot,
+			cellValue: slot ? void 0 : at.root.props?.[prop]
+		});
+	}
+	return out.length > 0 ? out : NO_EDITS;
+}
+/**
+* After a placed element's props change, the content props it still shows as its old cell bakes
+* them, which take what the new cell bakes. Content that differs from the old cell is the designer's
+* own and stays. Empty unless a prop that picks the cell changed.
+*/
+function followingContent({ config, spec, elementKey, before }) {
+	const now = bakedAt({
+		config,
+		spec,
+		elementKey
+	});
+	if (!now) return NO_PROPS;
+	const after = spec.elements[elementKey]?.props ?? {};
+	if (now.axes.every((prop) => stable(before[prop]) === stable(after[prop]))) return NO_PROPS;
+	const was = bakedAt({
+		config,
+		spec,
+		elementKey,
+		props: before
+	});
+	if (!was) return NO_PROPS;
+	const out = [];
+	for (const prop of new Set([...was.content, ...now.content])) if (was.shows(spec, prop) && !now.shows(spec, prop)) out.push(prop);
+	return out.length > 0 ? out : NO_PROPS;
+}
+const NO_PROPS = [];
+/** `spec` with the content {@link followingContent} names swapped for what the new cell bakes.
+*  Answers `spec` itself when nothing follows. */
+function followCellContent({ config, spec, elementKey, before }) {
+	const props = followingContent({
+		config,
+		spec,
+		elementKey,
+		before
+	});
+	const now = props.length > 0 ? bakedAt({
+		config,
+		spec,
+		elementKey
+	}) : null;
+	if (!now) return spec;
+	let out = spec;
+	for (const prop of props) out = replaceContent({
+		spec: out,
+		elementKey,
+		prop,
+		from: now
+	});
+	return out;
+}
+/** One content prop of a placed element put back to what its cell bakes. */
+function resetCellContent({ config, spec, elementKey, prop }) {
+	const at = bakedAt({
+		config,
+		spec,
+		elementKey
+	});
+	if (!at || at.shows(spec, prop)) return spec;
+	return replaceContent({
+		spec,
+		elementKey,
+		prop,
+		from: at
+	});
+}
+function bakedAt({ config, spec, elementKey, props }) {
+	const element = spec.elements[elementKey];
+	if (!element || typeof element.type !== "string") return null;
+	const component = Component.get(config, element.type);
+	if (!component) return null;
+	const path = component.path;
+	const picking = props ?? element.props ?? {};
+	const baked = cellSeedSpec({
+		config,
+		path,
+		props: picking
+	});
+	const root = baked.elements[baked.root];
+	const axes = cellAxes(config, path);
+	const axisSet = new Set(axes);
+	return {
+		baked,
+		root,
+		axes,
+		content: seedAt({
+			config,
+			path,
+			props: picking
+		}).props.filter((prop) => !axisSet.has(prop)),
+		shows: (against, prop) => {
+			const el = against.elements[elementKey];
+			if (!el) return false;
+			return contentOf(against.elements, el, prop) === contentOf(baked.elements, root, prop);
+		}
+	};
+}
+/** `spec` with `prop`'s content on the element swapped for what `from` bakes. */
+function replaceContent({ spec, elementKey, prop, from }) {
+	const element = spec.elements[elementKey];
+	const elements = { ...spec.elements };
+	const props = { ...element.props ?? {} };
+	const value = from.root.props?.[prop];
+	if (value === void 0) delete props[prop];
+	else props[prop] = value;
+	const asChildren = prop === "children" && (element.children?.length ?? 0) > 0;
+	for (const fill of fillsOf(element, prop)) for (const key of subtreeKeys(spec.elements, fill)) delete elements[key];
+	const grafted = [];
+	for (const fill of from.root.slots?.[prop] ?? []) {
+		const root = graftSubtree({
+			source: from.baked,
+			from: fill,
+			into: elements,
+			root: elementKey
+		}).get(fill);
+		if (root) grafted.push(root);
+	}
+	if (asChildren) elements[elementKey] = {
+		...element,
+		props,
+		children: grafted
+	};
+	else {
+		const slots = { ...element.slots ?? {} };
+		if (grafted.length > 0) slots[prop] = grafted;
+		else delete slots[prop];
+		elements[elementKey] = {
+			...element,
+			props,
+			slots
+		};
+	}
+	return {
+		...spec,
+		elements
+	};
+}
+/** The keys of the subtree at `from`, itself included. */
+function subtreeKeys(elements, from) {
+	const seen = /* @__PURE__ */ new Set();
+	const visit = (key) => {
+		if (seen.has(key) || !elements[key]) return;
+		seen.add(key);
+		const element = elements[key];
+		for (const child of element?.children ?? []) visit(child);
+		for (const fills of Object.values(element?.slots ?? {})) for (const fill of fills) visit(fill);
+	};
+	visit(from);
+	return seen;
+}
+const seedsByConfig = /* @__PURE__ */ new WeakMap();
+function seedAt({ config, path, props }) {
+	const cell = canvasCellAt({
+		config,
+		path,
+		props: withoutStaleValues(config, path, props)
+	});
+	let byKey = seedsByConfig.get(config);
+	if (!byKey) {
+		byKey = /* @__PURE__ */ new Map();
+		seedsByConfig.set(config, byKey);
+	}
+	const key = `${path}\u0000${JSON.stringify(cell.coordinate)}`;
+	const hit = byKey.get(key);
+	if (hit) return hit;
+	const values = {};
+	for (const [prop, value] of Object.entries(cell.props)) if (!givesItself(config, path, prop, value)) values[prop] = value;
+	const spec = graftPreviewElements(instanceSpec(path, values), values);
+	const root = spec.elements[spec.root];
+	const made = {
+		spec,
+		root,
+		props: Object.keys(values).filter((prop) => root.props?.[prop] !== void 0 || (root.slots?.[prop]?.length ?? 0) > 0)
+	};
+	byKey.set(key, made);
+	return made;
+}
+/** Whether the element already holds content for `prop`: slot fills other than an empty `Slot`, or
+*  structural children for `children`. */
+function holdsContent(elements, element, prop) {
+	if (prop === "children" && (element.children?.length ?? 0) > 0) return true;
+	return (element.slots?.[prop] ?? []).some((fill) => elements[fill]?.type !== EMPTY_SLOT);
+}
+/** The keys an element's content for `prop` sits under: its slot fills, or for `children`, its
+*  structural children, where a placed instance keeps them. */
+function fillsOf(element, prop) {
+	if (prop === "children" && (element.children?.length ?? 0) > 0) return element.children ?? [];
+	return element.slots?.[prop] ?? [];
+}
+/** One prop's content on an element, value and slot subtree alike, spelled without element keys so
+*  two placements of the same content compare equal. An empty `Slot` reads as no content. */
+function contentOf(elements, element, prop) {
+	const tree = (key) => {
+		const el = elements[key];
+		if (!el) return null;
+		const slots = {};
+		for (const [slot, fills] of Object.entries(el.slots ?? {})) {
+			if (slot === "children" && (el.children?.length ?? 0) > 0) continue;
+			slots[slot] = fills.map(tree);
+		}
+		return {
+			type: el.type,
+			props: withoutMarkers(el.props),
+			children: ((el.children?.length ?? 0) > 0 ? el.children ?? [] : el.slots?.children ?? []).map(tree),
+			slots
+		};
+	};
+	const fills = fillsOf(element, prop).filter((key) => elements[key]?.type !== EMPTY_SLOT);
+	return stable({
+		value: element.props?.[prop],
+		fills: fills.map(tree)
+	});
+}
+function withoutMarkers(props) {
+	const out = {};
+	for (const [key, value] of Object.entries(props ?? {})) if (!key.startsWith("data-uds-")) out[key] = value;
+	return out;
+}
+/** JSON with object keys sorted, so two equal values spell the same string. */
+function stable(value) {
+	return JSON.stringify(value, (_key, inner) => {
+		if (!inner || typeof inner !== "object" || Array.isArray(inner)) return inner;
+		return Object.fromEntries(Object.entries(inner).sort(([a], [b]) => a.localeCompare(b)));
+	});
+}
+/** Copy the subtree at `from` out of `source` into `into` under fresh keys, its references rewritten
+*  to them. A source key spelled under the source's root is respelled under `root`, the element the
+*  content lands on. Answers each copied key with its new key. */
+function graftSubtree({ source, from, into, root }) {
+	const remap = /* @__PURE__ */ new Map();
+	const visit = (key) => {
+		if (remap.has(key) || !source.elements[key]) return;
+		const base = key.startsWith(source.root) ? `${root}${key.slice(source.root.length)}` : `${root}__${key}`;
+		let candidate = base;
+		for (let n = 1; candidate in into; n++) candidate = `${base}__${n}`;
+		remap.set(key, candidate);
+		into[candidate] = source.elements[key];
+		const element = source.elements[key];
+		for (const child of element?.children ?? []) visit(child);
+		for (const fills of Object.values(element?.slots ?? {})) for (const fill of fills) visit(fill);
+	};
+	visit(from);
+	for (const to of remap.values()) {
+		const element = into[to];
+		into[to] = {
+			...element,
+			...element.children ? { children: element.children.map((key) => remap.get(key) ?? key) } : {},
+			...element.slots ? { slots: Object.fromEntries(Object.entries(element.slots).map(([slot, fills]) => [slot, fills.map((key) => remap.get(key) ?? key)])) } : {}
+		};
+	}
+	return remap;
+}
+/** Whether a component renders `value` for `prop` with nothing set: its own default is that value,
+*  or it has none and the value is an off boolean. */
+function givesItself(config, path, prop, value) {
+	const own = codeDefaults(config, path)[prop];
+	return own === void 0 ? value === false : stable(refLeaf(own)) === stable(refLeaf(value));
+}
+const codeDefaultsByConfig = /* @__PURE__ */ new WeakMap();
+/** What a component gives a prop by itself: its declared defaults under `defaultProps`. */
+function codeDefaults(config, path) {
+	let byPath = codeDefaultsByConfig.get(config);
+	if (!byPath) {
+		byPath = /* @__PURE__ */ new Map();
+		codeDefaultsByConfig.set(config, byPath);
+	}
+	const hit = byPath.get(path);
+	if (hit) return hit;
+	const body = config.resolve("component", path)?.body;
+	const made = {
+		...declaredPropDefaults(body?.props),
+		...body?.defaultProps
+	};
+	byPath.set(path, made);
+	return made;
+}
+/** `props` without a variant value its component no longer declares, so a removed value picks the
+*  cell as unset does. A domain named by a ref (an icon library) is taken as it stands. */
+function withoutStaleValues(config, path, props) {
+	const decls = (config.resolve("component", path)?.body)?.props;
+	let out;
+	for (const [prop, value] of Object.entries(props)) {
+		if (value === void 0 || typeof value === "object") continue;
+		const domain = variantDomain(decls?.[prop]);
+		if (!domain || domain.has(String(value))) continue;
+		out ??= { ...props };
+		delete out[prop];
+	}
+	return out ?? props;
+}
+/** The values a variant declaration allows, or `undefined` when it isn't one this can list. */
+function variantDomain(decl) {
+	const { type, value } = decl ?? {};
+	if (type !== "variant") return void 0;
+	if (Array.isArray(value)) return new Set(value.map((entry) => String(refLeaf(entry))));
+	if (value && typeof value === "object" && !("__ref" in value)) return new Set(Object.keys(value));
+}
+//#endregion
+export { cellSeedSpec, editedCellContent, followCellContent, followingContent, resetCellContent, withCellValues };

package/dist/spec/cell.d.ts

@@ -27,6 +27,7 @@ declare class Cell {
   private memoDefaults;
   private memoConditional;
   private memoProps;
+  private memoContent;
   private memoEntry;
   private memoHolding;
   private memoOwn;
@@ -40,6 +41,16 @@ declare class Cell {
   get conditional(): Record<string, unknown>;
   /** The values in force: the defaults, what holds for the cell, then the coordinate itself. */
   get props(): Record<string, unknown>;
+  /** The preview content the cell shows: the `*` entry, then every entry that holds for it. What a
+   *  drop seeds and a placed instance compares its own content against; no declared or code
+   *  default is in it. */
+  get content(): Record<string, unknown>;
+  /**
+   * Whether this is the component's default on the canvas: the cell "Set as default" chose, where a
+   * drop lands. Every axis the coordinate names matches the default cell's, the coordinate names at
+   * least one, and no modifier is forced. {@link isDefaults} asks about the defaults in code.
+   */
+  isCanvasDefault(modifiers?: readonly string[]): boolean;
   /** The `preview` entry whose condition is exactly this coordinate, or `undefined`. */
   get entry(): IndexedPreviewCondition | undefined;
   /** The conditional `preview` entries that hold for this cell, in stored order. */
@@ -167,5 +178,25 @@ declare function cellAt({
   path: string;
   cell: SlotCell;
 }): Cell;
+/** The props and states whose values pick a cell of a component's grid: its variants, its booleans
+ *  and its states. */
+declare function cellAxes(config: Config, path: string): readonly string[];
+/**
+ * The coordinate of a component's default cell on the canvas: the preview's defaults, with each
+ * boolean prop and each state they leave unset at its rest value, the way the grid spells that cell
+ * (`busy: false`).
+ */
+declare function canvasDefaultCoordinate(config: Config, path: string): Readonly<SlotCell>;
+/** The cell a placed instance's props pick: the default cell's coordinate with the instance's own
+ *  axis values over it. With no props, the default cell itself. */
+declare function canvasCellAt({
+  config,
+  path,
+  props
+}: {
+  config: Config;
+  path: string;
+  props?: Readonly<Record<string, unknown>>;
+}): Cell;
 //#endregion
-export { Cell, CellSlot, GoverningCondition, cellAt };
+export { Cell, CellSlot, GoverningCondition, canvasCellAt, canvasDefaultCoordinate, cellAt, cellAxes };

package/dist/spec/cell.js

@@ -1,4 +1,7 @@
 import { canonicalCondition, refLeaf } from "../framework/utils/refs.js";
+import { createSliceMemo } from "../framework/memo.js";
+import { componentStates } from "../framework/component-states.js";
+import { unconditionalPreviewProps } from "../framework/preview-store.js";
 import { holdingPreviewConditions, previewConditionalProps, previewDefaults } from "../framework/projections.js";
 import { propApplies, surfaceProps } from "../framework/prop-surface.js";
 import { ruleApplies } from "../framework/layer-styles.js";
@@ -32,6 +35,7 @@ var Cell = class {
 	memoDefaults = UNSET;
 	memoConditional = UNSET;
 	memoProps = UNSET;
+	memoContent = UNSET;
 	memoEntry = UNSET;
 	memoHolding = UNSET;
 	memoOwn = UNSET;
@@ -62,6 +66,31 @@ var Cell = class {
 		};
 		return this.memoProps;
 	}
+	/** The preview content the cell shows: the `*` entry, then every entry that holds for it. What a
+	*  drop seeds and a placed instance compares its own content against; no declared or code
+	*  default is in it. */
+	get content() {
+		if (this.memoContent === UNSET) this.memoContent = {
+			...unconditionalPreviewProps(this.config.resolve("component", this.component)?.body) ?? {},
+			...this.conditional
+		};
+		return this.memoContent;
+	}
+	/**
+	* Whether this is the component's default on the canvas: the cell "Set as default" chose, where a
+	* drop lands. Every axis the coordinate names matches the default cell's, the coordinate names at
+	* least one, and no modifier is forced. {@link isDefaults} asks about the defaults in code.
+	*/
+	isCanvasDefault(modifiers = []) {
+		if (modifiers.length > 0) return false;
+		const entries = Object.entries(this.coordinate);
+		if (entries.length === 0) return false;
+		const defaults = canvasDefaultCoordinate(this.config, this.component);
+		return entries.every(([prop, value]) => {
+			const held = defaults[prop];
+			return held !== void 0 && String(held) === String(value);
+		});
+	}
 	/** The `preview` entry whose condition is exactly this coordinate, or `undefined`. */
 	get entry() {
 		if (this.memoEntry === UNSET) this.memoEntry = previewConditionAt({
@@ -357,5 +386,59 @@ function cellAt({ config, path, cell }) {
 	byKey.set(key, made);
 	return made;
 }
+/** The props and states whose values pick a cell of a component's grid: its variants, its booleans
+*  and its states. */
+function cellAxes(config, path) {
+	const cache = canvasCache(config);
+	const hit = cache.axes.get(path);
+	if (hit) return hit;
+	const axes = [];
+	const props = (config.resolve("component", path)?.body)?.props;
+	for (const [prop, decl] of Object.entries(props ?? {})) {
+		const type = decl?.type;
+		if (type === "variant" || type === "boolean") axes.push(prop);
+	}
+	for (const state of componentStates(config, path)) axes.push(state.name);
+	cache.axes.set(path, axes);
+	return axes;
+}
+/**
+* The coordinate of a component's default cell on the canvas: the preview's defaults, with each
+* boolean prop and each state they leave unset at its rest value, the way the grid spells that cell
+* (`busy: false`).
+*/
+function canvasDefaultCoordinate(config, path) {
+	const cache = canvasCache(config);
+	const hit = cache.coordinates.get(path);
+	if (hit) return hit;
+	const coordinate = {};
+	const props = (config.resolve("component", path)?.body)?.props;
+	for (const [prop, decl] of Object.entries(props ?? {})) if (decl?.type === "boolean") coordinate[prop] = false;
+	for (const state of componentStates(config, path)) coordinate[state.name] = state.type === "boolean" ? false : state.default;
+	const defaults = previewDefaults(config, path);
+	for (const axis of cellAxes(config, path)) if (defaults[axis] !== void 0) coordinate[axis] = defaults[axis];
+	const made = coordinate;
+	cache.coordinates.set(path, made);
+	return made;
+}
+/** The cell a placed instance's props pick: the default cell's coordinate with the instance's own
+*  axis values over it. With no props, the default cell itself. */
+function canvasCellAt({ config, path, props }) {
+	const coordinate = { ...canvasDefaultCoordinate(config, path) };
+	for (const axis of cellAxes(config, path)) if (props?.[axis] !== void 0) coordinate[axis] = props[axis];
+	return cellAt({
+		config,
+		path,
+		cell: coordinate
+	});
+}
+/** Per component slice, each component's cell axes and default coordinate asked for so far. */
+const canvasCache = createSliceMemo({
+	kinds: ["component"],
+	compute: (_config) => ({
+		axes: /* @__PURE__ */ new Map(),
+		coordinates: /* @__PURE__ */ new Map()
+	})
+});
 //#endregion
-export { cellAt };
+export { canvasCellAt, canvasDefaultCoordinate, cellAt, cellAxes };