@yahoo/uds-create-config 2.44.0 → 3.0.0

package/dist/Component.js

@@ -1,1061 +0,0 @@
-import { compact } from "./entity-utils.js";
-import { isPlaceable } from "./asset-kind.js";
-import { readSourcePath } from "./captureCallerPath.js";
-import { isAssetGroupRef, isCompositeRef, isStylePropRef, isTokenRef, tag } from "./refs.js";
-import { isColorExpression } from "./colorExpressions.js";
-import { readAssetGroupSlug } from "./defineAssetGroup.js";
-import { serializeElementsDeep } from "./element-marker.js";
-import { isBoolMarker, isMotionMarker, isNumberMarker, isSlotMarker, isStringMarker, isVariantArrayMarker, isVariantMarker } from "./markers.js";
-import { componentClassNames } from "@yahoo/uds-create-utils";
-//#region src/Component.ts
-/**
-* `Component` — a registered component with layers, props, and base
-* styles.
-*
-* Layer instances are purely structural (no derived). Cross-layer
-* derivations live on `Component.derived` because they walk
-* `compoundProps` + `base` together. `derived.propInfo(name)` returns a
-* discriminated union narrowed by `.kind` — that surface replaces
-* Studio's bespoke `componentInfo.ts` walker.
-*
-* `subcomponentOf` / `subcomponents` aren't authored on the component
-* itself — they fall out of a parent's
-* `defineComponent(...).subcomponents({...})` chain when `Config.
-* registerComponents` walks it. They live under `.derived` to keep the
-* authored-vs-derived split clean per the config naming convention.
-*/
-/**
-* Humanize a PascalCase/camelCase component name into a space-separated
-* display label — `"GridItem"` → `"Grid Item"`, `"HStack"` → `"H Stack"`,
-* `"TableHeadCell"` → `"Table Head Cell"`. Used as the default
-* `metadata.label` when an author didn't supply one, so every consumer
-* reads a label off `metadata` uniformly instead of re-deriving a
-* fallback from `name` at each call site.
-*/
-function humanizeComponentName(name) {
-	return name.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2").trim();
-}
-/**
-* Normalize each layer-input authoring form down to the canonical
-* marker shape stored on `Layer.tag`:
-*
-*  - bare string → `TagRef`
-*  - `LayerWithOverrides` (`{ tag, defaultProps?, base?, ... }`) →
-*    the unwrapped `tag` field (recursing once for the bare-string
-*    case nested inside).
-*  - Existing `TagRef` / `ComponentRef` / `ComponentDefinition` value
-*    is passed through unchanged.
-*
-* Centralized here so every Layer constructed downstream sees the
-* marker shape, regardless of how the consumer authored the layer.
-*/
-function normalizeLayerInput(input) {
-	if (input === void 0) return void 0;
-	if (typeof input === "string") return tag(input);
-	if (typeof input === "object" && input !== null && "tag" in input && typeof input.tag !== "undefined" && !("__kind" in input)) {
-		const inner = input.tag;
-		return typeof inner === "string" ? tag(inner) : inner;
-	}
-	return input;
-}
-/**
-* Preserve component identity across the JSON wire when a layer was
-* authored with a registered `ComponentDefinition` value (e.g.
-* `.layers({ root: Box, text: Text })`). Without this, `JSON.stringify`
-* inlines the whole definition and drops the non-enumerable
-* `__componentName` stamp — consumers reading `Layer.tag` from a
-* `Config.fromJSON` round-trip then have no way to tell which
-* registered component the layer references. We emit a `ComponentRef`
-* marker instead so the identity round-trips.
-*/
-function serializeLayerTag(input) {
-	if (typeof input === "object" && input !== null && !("__kind" in input) && "__componentName" in input) {
-		const name = input.__componentName;
-		if (typeof name === "string") return {
-			__kind: "component",
-			ref: name
-		};
-	}
-	return input;
-}
-var Layer = class {
-	name;
-	tag;
-	base;
-	constructor(args) {
-		this.name = args.name;
-		this.tag = normalizeLayerInput(args.tag);
-		this.base = args.base;
-	}
-	/**
-	* What this layer renders, normalized across the tag's representations:
-	*  - `{ kind: 'component', ref }` — renders a registered component (`Box`,
-	*    `Text`), so the layer takes that component's prop surface. The identity
-	*    survives both in memory (a non-enumerable `__componentName` stamp on the
-	*    builder) and on the wire (`{ __kind: 'component', ref }` from `fromJSON`).
-	*  - `{ kind: 'tag', ref }` — renders a bare HTML element (`'div'`).
-	*  - `undefined` — an inline anonymous builder with no registered identity.
-	*/
-	get renders() {
-		const t = this.tag;
-		if (t === void 0) return void 0;
-		if (typeof t === "string") return {
-			kind: "tag",
-			ref: t
-		};
-		const obj = t;
-		if (obj.__kind === "component" && typeof obj.ref === "string") return {
-			kind: "component",
-			ref: obj.ref
-		};
-		if (obj.__kind === "tag" && typeof obj.ref === "string") return {
-			kind: "tag",
-			ref: obj.ref
-		};
-		if (typeof obj.__componentName === "string") return {
-			kind: "component",
-			ref: obj.__componentName
-		};
-	}
-	toJSON() {
-		return {
-			name: this.name,
-			...compact({
-				tag: this.tag,
-				base: this.base
-			})
-		};
-	}
-};
-var Component = class {
-	name;
-	layers;
-	props;
-	base;
-	defaultProps;
-	compoundProps;
-	motion;
-	/** Opt-in forwarded-ref target tag (`.config({ ref: 'button' })`). Drives the
-	*  typed `ref` prop in `@yahoo/uds-create-config` and the codegen forwardRef wrapper. */
-	ref;
-	/** Provenance when this component is linked from another system; `undefined`
-	*  for local components. Unrelated to `ref` above — see `SystemLink`. */
-	link;
-	/** Applied `.extend(patch)` override on a linked component — payload +
-	*  computed inverse. `undefined` for unextended components. */
-	extension;
-	preview;
-	metadata;
-	/**
-	* Absolute path of the file that called `defineComponent('Name', …)`.
-	* Captured via the stack walk in `captureCallerPath` and stashed
-	* non-enumerably on the authored definition; lifted onto the class
-	* here so codegen consumers don't have to thread a separate
-	* `componentSourceMap`. `undefined` when the component was hydrated
-	* from JSON (no original define call) or built outside the `define*`
-	* helpers.
-	*/
-	sourceFilePath;
-	/**
-	* `true` when the authored definition chained `.render(fn)` — the
-	* non-enumerable `__hasRenderFn` flag set by the builder. Codegen
-	* needs this to classify single-layer components that ship a custom
-	* render fn (e.g. Accordion) into the transform path rather than
-	* the inline primitive emitter, so the two paths don't both emit a
-	* wrapper FC with the same name.
-	*/
-	hasRenderFn;
-	/**
-	* The actual `.render(fn)` callback when `hasRenderFn` is `true`.
-	* Lifted from the seed's non-enumerable `__renderFn` so the spec
-	* extractor can invoke it under the mock-react plugin to capture
-	* the component's internal structure as a Spec. Not used at
-	* production render time — the codegen-emitted per-file FC handles
-	* that path.
-	*/
-	renderFn;
-	/** `true` when the authored definition chained `.renderCanvas(fn)` — the
-	*  non-enumerable `__hasRenderCanvasFn` flag. Codegen emits a canvas-only
-	*  overlay artifact for these; spec extraction prefers the canvas fn. */
-	hasCanvasRenderFn;
-	/** The `.renderCanvas(fn)` callback when `hasCanvasRenderFn` is `true`.
-	*  In-memory only (functions never serialize). */
-	canvasRenderFn;
-	/**
-	* Name of the component this one value-extends from
-	* (`defineComponent(Box)` → `'Box'`). Resolved from the non-
-	* enumerable `__extendsFrom.__componentName` chain stamped by
-	* `defineComponent`'s value-extend branch and `Config.registerComponents`'
-	* registration loop. `undefined` for primitives, brace-ref shorthand
-	* forms, and JSON-hydrated configs (the wire format doesn't carry
-	* this relationship).
-	*/
-	extendsFrom;
-	#componentGroup;
-	#subcomponentOf;
-	#subcomponents;
-	#namespaceGetter;
-	#prefixGetter;
-	#componentResolver;
-	#resolveStylePropValueToken;
-	#isStyleProp;
-	/**
-	* Globally-unique lookup key — the spec `type` string a renderer
-	* resolves against the registry. When the owning `Config` has a
-	* namespace set (`Config.configure({ namespace: 'uds' })`), this is
-	* `<namespace>:<name>` (`uds:Badge`); otherwise it's the bare `name`
-	* (un-namespaced configs). Read live via a getter so it reflects the
-	* namespace regardless of whether `configure` ran before or after the
-	* component was registered — mirrors the lazy `prefixGetter` pattern
-	* used for token CSS vars.
-	*
-	* `name` stays the bare authored/display/export identifier; codegen
-	* emits a bare-name alias alongside the canonical key so existing
-	* specs referencing the bare `name` keep resolving.
-	*/
-	get registryKey() {
-		const namespace = this.#namespaceGetter?.();
-		return namespace ? `${namespace}:${this.name}` : this.name;
-	}
-	#derived;
-	constructor(args) {
-		this.name = args.name;
-		this.#namespaceGetter = args.namespaceGetter;
-		this.#prefixGetter = args.prefixGetter;
-		this.#componentResolver = args.componentResolver;
-		this.#resolveStylePropValueToken = args.resolveStylePropValueToken;
-		this.#isStyleProp = args.isStyleProp;
-		const layers = /* @__PURE__ */ new Map();
-		const liftedLayerBase = {};
-		for (const [layerName, tag] of Object.entries(args.definition.layers)) {
-			layers.set(layerName, new Layer({
-				name: layerName,
-				tag
-			}));
-			if (typeof tag === "object" && tag !== null && !("__kind" in tag) && "tag" in tag) {
-				const overrides = tag;
-				const merged = {
-					...overrides.defaultProps,
-					...overrides.base
-				};
-				if (Object.keys(merged).length > 0) liftedLayerBase[layerName] = merged;
-			}
-		}
-		this.layers = layers;
-		const definitionProps = args.definition.props ?? {};
-		this.props = definitionProps.children === null ? {
-			...definitionProps,
-			children: void 0
-		} : definitionProps;
-		const authoredBase = args.definition.base;
-		if (Object.keys(liftedLayerBase).length > 0) {
-			const merged = { ...liftedLayerBase };
-			if (authoredBase) for (const [layerName, layerStyles] of Object.entries(authoredBase)) merged[layerName] = {
-				...merged[layerName] ?? {},
-				...layerStyles
-			};
-			this.base = merged;
-		} else this.base = authoredBase;
-		this.defaultProps = args.definition.defaultProps;
-		this.compoundProps = args.definition.compoundProps;
-		this.motion = args.definition.motion;
-		this.ref = args.definition.ref;
-		this.link = args.definition.link;
-		this.extension = args.definition.extension;
-		const def = args.definition;
-		const previewField = typeof def.preview === "function" ? void 0 : def.preview;
-		this.preview = def.__preview ?? previewField;
-		const metaField = def.metadata;
-		this.metadata = {
-			...metaField,
-			label: metaField?.label ?? humanizeComponentName(this.name)
-		};
-		this.sourceFilePath = readSourcePath(args.definition);
-		this.hasRenderFn = args.definition.__hasRenderFn === true || args.definition.hasRenderFn === true;
-		this.renderFn = args.definition.__renderFn;
-		this.hasCanvasRenderFn = args.definition.__hasRenderCanvasFn === true || args.definition.hasCanvasRenderFn === true;
-		this.canvasRenderFn = args.definition.__renderCanvasFn;
-		const extendsFromSeed = args.definition.__extendsFrom;
-		const extendsFromName = extendsFromSeed && typeof extendsFromSeed === "object" && typeof extendsFromSeed.__componentName === "string" ? extendsFromSeed.__componentName : void 0;
-		this.extendsFrom = extendsFromName ?? args.definition.extendsFrom;
-		this.#componentGroup = args.componentGroup;
-		this.#subcomponentOf = args.subcomponentOf;
-		this.#subcomponents = args.subcomponents;
-	}
-	get derived() {
-		if (!this.#derived) {
-			const propsArray = [];
-			const propsIndex = /* @__PURE__ */ new Map();
-			for (const [propName, binding] of Object.entries(this.props)) {
-				const info = inferPropInfo(propName, binding, this.layers, this.#componentResolver);
-				if (info === void 0) continue;
-				propsArray.push(info);
-				propsIndex.set(propName, info);
-			}
-			const styleUsage = collectStyleUsage(this.base, this.props, this.compoundProps, this.#resolveStylePropValueToken, this.#isStyleProp);
-			const refusesChildren = this.#rootRefusesChildren();
-			this.#derived = {
-				layers: Array.from(this.layers.values()),
-				classNames: componentClassNames(this.#prefixGetter?.() ?? "", this.name),
-				compoundOverrides: buildCompoundOverrides(this.compoundProps),
-				...compact({
-					componentGroup: this.#componentGroup,
-					subcomponentOf: this.#subcomponentOf,
-					subcomponents: this.#subcomponents
-				}),
-				props: propsArray,
-				stylePropNames: propsArray.filter((p) => p.kind === "styleProp").map((p) => p.name),
-				tokenRefs: styleUsage.tokenRefs,
-				stylePropTokenUsages: styleUsage.stylePropTokenUsages,
-				stylePropKeywords: styleUsage.stylePropKeywords,
-				kind: this.#deriveKind(),
-				acceptsChildren: !refusesChildren && derivesAcceptsChildren(this.layers, propsArray),
-				acceptsChildNodes: !refusesChildren && derivesAcceptsChildNodes(this.layers, propsArray),
-				prop(propName) {
-					return propsIndex.get(propName);
-				}
-			};
-		}
-		return this.#derived;
-	}
-	/**
-	* Whether this component's root element can never hold children, making
-	* `acceptsChildren`/`acceptsChildNodes` false regardless of the structural
-	* signals those derivations read. Two authored facts qualify (UDS-3068):
-	*
-	*  - **A void root tag.** A single-primitive-root component whose effective
-	*    tag (own `defaultProps.as`, else the root layer's tag, else the
-	*    value-extends chain's) is a void HTML element (`input`, `img`, …) —
-	*    React throws if such an element receives children, so treating it as a
-	*    container injects drop-target Slots that crash every spec render of it.
-	*    Gated on the single-primitive-root shape: a composed component's render
-	*    decides where children go, so its root tag says nothing about them.
-	*
-	*  - **An explicitly dropped `children` prop.** The authored
-	*    `children: undefined` (the documented pattern for void/value elements —
-	*    Input, Image, Textarea) is detected two ways: authored configs keep the
-	*    key with an `undefined` value, which IS the drop; hydrated configs
-	*    compact the key away, so there it's absence-against-ancestry (the
-	*    merged props lack `children` while an ancestor declares it — only a
-	*    drop can produce that, since value-extension inherits the parent's
-	*    full prop surface). This catches `textarea`, which isn't HTML-void yet
-	*    still rejects element children in React.
-	*/
-	#rootRefusesChildren() {
-		if (hasSinglePrimitiveRoot(this.layers)) {
-			const tag = resolveRootHtmlTag(this, this.#componentResolver, /* @__PURE__ */ new Set());
-			if (tag !== void 0 && VOID_HTML_TAGS.has(tag)) return true;
-		}
-		return droppedInheritedChildren(this, this.#componentResolver);
-	}
-	/** Classify authoring shape: `extends` wins (value-extension is the defining
-	*  trait), then anything with multiple layers or a custom render is
-	*  `multi-layer`, else a bare single-tag `primitive`. */
-	#deriveKind() {
-		if (this.extendsFrom) return "extends";
-		if (this.layers.size > 1 || this.hasRenderFn) return "multi-layer";
-		return "primitive";
-	}
-	toJSON(opts) {
-		const layers = {};
-		for (const [layerName, layer] of this.layers) {
-			if (layer.tag === void 0) continue;
-			layers[layerName] = serializeLayerTag(layer.tag);
-		}
-		let sourceFilePath = this.sourceFilePath;
-		if (sourceFilePath && opts?.projectRoot) sourceFilePath = sourceFilePath.replace(`${opts.projectRoot}/`, "");
-		return {
-			name: this.name,
-			layers,
-			...compact({
-				props: Object.keys(this.props).length > 0 ? serializeAcceptsInProps(this.props, ancestryDeclaresChildren(this, this.#componentResolver)) : void 0,
-				base: this.base,
-				defaultProps: this.defaultProps,
-				compoundProps: this.compoundProps,
-				motion: this.motion,
-				ref: this.ref,
-				link: this.link,
-				extension: this.extension,
-				preview: this.preview ? serializeElementsDeep(this.preview) : void 0,
-				metadata: this.metadata,
-				sourceFilePath,
-				hasRenderFn: this.hasRenderFn || void 0,
-				hasCanvasRenderFn: this.hasCanvasRenderFn || void 0,
-				subcomponentOf: this.#subcomponentOf,
-				subcomponents: this.#subcomponents,
-				extendsFrom: this.extendsFrom
-			})
-		};
-	}
-};
-/**
-* The token + keyword usage a component carries across its styling — one walk
-* of `base`, each prop binding's variant styles, and `compoundProps` overrides,
-* recursing modifier sub-objects (`_hover`) and color expressions. Produces
-* three views the reverse lookups read for "what breaks if I remove this?":
-*  - `tokenRefs` — every qualified token name referenced, from structured
-*    `token('color/brand')` refs (matched at any depth) and shorthand
-*    style-prop values (`bg: 'tertiary'`, resolved via `resolveStylePropValueToken`,
-*    which returns `undefined` for keywords / arbitrary literals).
-*  - `stylePropTokenUsages` — the `(styleProp, token)` pair for each, so a
-*    consumer can tell *which* prop used a token. A token's style prop is the
-*    key it sits under: directly (`bg: token(...)` / `bg: 'tertiary'`) or as a
-*    color-expression value (`bg: darken(token(...))`), whose nested refs are
-*    all attributed to that key.
-*  - `stylePropKeywords` — `(styleProp, value)` pairs for the *non-token*
-*    keyword values a style prop carries (`display=flex`). Disjoint from
-*    `tokenRefs`; `isStyleProp` gates it so layer keys / marker internals
-*    don't read as keywords, and bracketed arbitrary literals are excluded.
-* Internal `__`-prefixed keys (`__kind`, a slot's `__accepts` child defs) are
-* skipped, so a child's usage never bleeds into the parent's sets.
-*/
-function collectStyleUsage(base, props, compoundProps, resolveStylePropValueToken, isStyleProp) {
-	const refs = /* @__PURE__ */ new Set();
-	const pairKeys = /* @__PURE__ */ new Set();
-	const pairs = [];
-	const keywords = /* @__PURE__ */ new Map();
-	const seen = /* @__PURE__ */ new WeakSet();
-	const addPair = (styleProp, token) => {
-		const key = `${styleProp}\x00${token}`;
-		if (pairKeys.has(key)) return;
-		pairKeys.add(key);
-		pairs.push({
-			styleProp,
-			token
-		});
-	};
-	const collectUnder = (node, styleProp) => {
-		if (node === null || typeof node !== "object") return;
-		if (isTokenRef(node)) {
-			refs.add(node.ref);
-			addPair(styleProp, node.ref);
-			return;
-		}
-		for (const value of Object.values(node)) collectUnder(value, styleProp);
-	};
-	const walk = (node) => {
-		if (node === null || typeof node !== "object") return;
-		if (isTokenRef(node)) {
-			refs.add(node.ref);
-			return;
-		}
-		if (seen.has(node)) return;
-		seen.add(node);
-		if (Array.isArray(node)) {
-			for (const item of node) walk(item);
-			return;
-		}
-		for (const [key, value] of Object.entries(node)) {
-			if (key.startsWith("__")) continue;
-			if (typeof value === "string") {
-				const ref = resolveStylePropValueToken?.(key, value);
-				if (ref) {
-					refs.add(ref);
-					addPair(key, ref);
-				} else if (isStyleProp?.(key) && !value.startsWith("[")) {
-					const values = keywords.get(key) ?? /* @__PURE__ */ new Set();
-					values.add(value);
-					keywords.set(key, values);
-				}
-			} else if (isTokenRef(value)) {
-				refs.add(value.ref);
-				addPair(key, value.ref);
-			} else if (isColorExpression(value)) collectUnder(value, key);
-			else walk(value);
-		}
-	};
-	if (base) walk(base);
-	for (const binding of Object.values(props)) walk(binding);
-	for (const entry of compoundProps ?? []) walk(entry.layers);
-	const stylePropKeywords = [...keywords].flatMap(([styleProp, values]) => [...values].map((value) => ({
-		styleProp,
-		value
-	})));
-	return {
-		tokenRefs: [...refs],
-		stylePropTokenUsages: pairs,
-		stylePropKeywords
-	};
-}
-function inferPropInfo(name, binding, layers, resolve) {
-	if (binding === void 0 || binding === null) return void 0;
-	if (typeof binding === "function") return {
-		kind: "function",
-		name,
-		required: false,
-		isEventHandler: name.startsWith("on") && name.length > 2
-	};
-	if (typeof binding !== "object") return void 0;
-	if (isSlotMarker(binding)) return resolveSlotPropInfo(name, binding, layers, resolve);
-	if (isVariantMarker(binding)) {
-		const values = isVariantArrayMarker(binding) ? binding.values : Object.keys(binding.values);
-		return {
-			kind: "variant",
-			name,
-			required: binding.__required === true,
-			values
-		};
-	}
-	if (isBoolMarker(binding)) return {
-		kind: "boolean",
-		name,
-		required: binding.__required === true
-	};
-	if (isStringMarker(binding)) return {
-		kind: "string",
-		name,
-		required: binding.__required === true,
-		...binding.__toggle === true ? { toggle: true } : {}
-	};
-	if (isNumberMarker(binding)) return {
-		kind: "number",
-		name,
-		required: binding.__required === true
-	};
-	if (isMotionMarker(binding)) return {
-		kind: "motion",
-		name,
-		required: binding.__required === true
-	};
-	if (isStylePropRef(binding)) return {
-		kind: "styleProp",
-		name,
-		required: false,
-		stylePropName: binding.ref
-	};
-	const obj = binding;
-	if (obj.__kind === "composite" && typeof obj.ref === "string") return {
-		kind: "composite",
-		name,
-		required: false,
-		compositeName: obj.ref,
-		...typeof obj.layer === "string" ? { layer: obj.layer } : {}
-	};
-}
-/**
-* Build a `kind: 'slot'` `PropInfo` from a `SlotMarker | SlotRef`.
-* Walks the slot's forward chain (when it targets a composed-component
-* layer's slot prop) to resolve:
-*
-*   - `accepts` — outer marker's `__accepts` wins; otherwise inherits
-*     from the innermost descendant slot that declared `.accepts(...)`.
-*   - `valueType` — what the JSX value resolves to at the terminal
-*     binding (the non-slot binding the chain bottoms out at, or
-*     `'ReactNode'` for open/children slots).
-*
-* Cycle protection: `seen` keys on `"layer/layerProp"`.
-*/
-function resolveSlotPropInfo(name, binding, layers, resolve) {
-	const layer = "layer" in binding ? binding.layer : void 0;
-	const layerProp = "layerProp" in binding && binding.layerProp || "children";
-	const required = binding.__required === true;
-	const isEventHandler = layerProp.startsWith("on") && layerProp.length > 2;
-	const chain = walkSlotForwardChain(binding, layers, resolve);
-	const baseValueType = isEventHandler ? "function" : chain.valueType;
-	const authoredType = binding.__valueType ?? (baseValueType === "string" ? "string" : void 0);
-	return {
-		kind: "slot",
-		name,
-		required,
-		layerProp,
-		valueType: baseValueType,
-		...layer !== void 0 ? { layer } : {},
-		...chain.accepts !== void 0 ? { accepts: chain.accepts } : {},
-		...chain.acceptsAssetGroup !== void 0 ? { acceptsAssetGroup: chain.acceptsAssetGroup } : {},
-		...authoredType !== void 0 ? { authoredType } : {},
-		...baseValueType === "variant" && chain.options !== void 0 ? { valueOptions: chain.options } : {},
-		...baseValueType === "composite" && chain.compositeName !== void 0 ? { compositeName: chain.compositeName } : {}
-	};
-}
-/**
-* Walk a slot's forward chain across composed-component layers.
-*
-* The chain ends when we hit a non-slot binding (boolean/variant/string/
-* styleProp/function/etc.), an HTML-element layer (no `__config`), or an
-* open slot with no further layer to follow. A `children`-targeted ref is
-* followed into its layer (a Text leaf resolves to `'string'`, a node
-* container to `'ReactNode'`) rather than short-circuited — only the
-* component's own open `slot()` is treated as a node container outright.
-* `accepts` is collected as the first `__accepts` seen anywhere in the
-* chain (outermost wins, then any inner ancestor that declared one).
-*/
-function walkSlotForwardChain(start, startLayers, resolve) {
-	const startAccepts = resolveAccepts(start.__accepts);
-	let accepts = startAccepts.names;
-	let acceptsAssetGroup = startAccepts.assetGroup;
-	let current = start;
-	let currentLayers = startLayers;
-	let followed = false;
-	const seen = /* @__PURE__ */ new Set();
-	while (true) {
-		const layer = "layer" in current ? current.layer : void 0;
-		const layerProp = "layerProp" in current && current.layerProp || "children";
-		if (!layer) return {
-			valueType: (followed && current.__valueType === "string" ? "string" : void 0) ?? "ReactNode",
-			accepts,
-			acceptsAssetGroup
-		};
-		const key = `${layer}/${layerProp}`;
-		if (seen.has(key)) return {
-			valueType: "ReactNode",
-			accepts,
-			acceptsAssetGroup
-		};
-		seen.add(key);
-		const innerLayers = currentLayers;
-		if (!innerLayers) return {
-			valueType: "ReactNode",
-			accepts,
-			acceptsAssetGroup
-		};
-		const layerTag = innerLayers.get(layer)?.tag;
-		const surface = resolveLayerSurface(layerTag, resolve);
-		if (!surface) return {
-			valueType: layerProp === "children" ? "ReactNode" : "string",
-			accepts,
-			acceptsAssetGroup
-		};
-		const innerBinding = surface.props?.[layerProp];
-		if (innerBinding === void 0) return {
-			valueType: layerProp === "children" ? "ReactNode" : "string",
-			accepts,
-			acceptsAssetGroup
-		};
-		if (isSlotMarker(innerBinding)) {
-			if (accepts === void 0 || acceptsAssetGroup === void 0) {
-				const inner = resolveAccepts(innerBinding.__accepts);
-				if (accepts === void 0) accepts = inner.names;
-				if (acceptsAssetGroup === void 0) acceptsAssetGroup = inner.assetGroup;
-			}
-			current = innerBinding;
-			currentLayers = surface.layers;
-			followed = true;
-			continue;
-		}
-		return {
-			...terminalResult(innerBinding),
-			accepts,
-			acceptsAssetGroup
-		};
-	}
-}
-/**
-* A layer's prop surface + sub-layers, resolved from either an inline
-* composed definition or a registered-component ref. `undefined` for HTML-
-* element layers (`'div'`) and unresolvable refs — the chain stops there.
-*/
-function resolveLayerSurface(layerTag, resolve) {
-	const inlineDef = getComposedLayerDefinition(layerTag);
-	if (inlineDef) return {
-		props: inlineDef.props,
-		layers: toLayerMap(inlineDef.layers)
-	};
-	const ref = componentRefName(layerTag);
-	const comp = ref ? resolve?.(ref) : void 0;
-	if (comp) return {
-		props: comp.props,
-		layers: comp.layers
-	};
-}
-/** Read a registered-component-ref layer tag's target name, from the wire
-*  form (`{ __kind: 'component', ref }`) or the in-memory `__componentName`
-*  stamp. Element/inline layers have neither and return `undefined`. */
-function componentRefName(tag) {
-	if (tag === null || typeof tag !== "object") return void 0;
-	const obj = tag;
-	if (obj.__kind === "component" && typeof obj.ref === "string") return obj.ref;
-	if (typeof obj.__componentName === "string") return obj.__componentName;
-}
-/** Resolve a terminal (non-slot) binding's value kind plus, for a variant, its
-*  selectable values, or for a composite ref its registry name, so tools can
-*  render the matching control (a dropdown / composite picker). */
-function terminalResult(binding) {
-	if (typeof binding === "function") return { valueType: "function" };
-	if (binding === null || typeof binding !== "object") return { valueType: "string" };
-	if (isVariantMarker(binding)) return {
-		valueType: "variant",
-		options: isVariantArrayMarker(binding) ? binding.values : Object.keys(binding.values)
-	};
-	if (isCompositeRef(binding)) return {
-		valueType: "composite",
-		compositeName: binding.ref
-	};
-	if (isBoolMarker(binding)) return { valueType: "boolean" };
-	if (isNumberMarker(binding)) return { valueType: "number" };
-	if (isStringMarker(binding)) return { valueType: "string" };
-	if (isStylePropRef(binding)) return { valueType: "string" };
-	return { valueType: "string" };
-}
-/**
-* Resolve a slot's `__accepts` into the two distinct things a slot can
-* accept: registered component *names* and a placeable asset-group *slug*.
-*
-* Component entries are `ComponentDefinition`s in memory (carrying an
-* authored `name` or the `__componentName` stamp) and bare name strings on
-* the wire; either way `readDefinitionName` reads the name. Asset-group
-* entries are the double-duty group definition in memory and a
-* `{ __kind: 'assetGroup', ref }` marker on the wire; `isAssetGroupRef`
-* catches both and `readAcceptedAssetGroupSlug` reads the slug. The asset
-* branch throws for a non-placeable class (a font group), keyed to the
-* `isPlaceable` capability rather than to any one class — without it a font
-* group would silently contribute nothing and the designer panel would fall
-* back to the all-components picker.
-*
-* `names` is `undefined` (not `[]`) when no component was accepted, so callers
-* can distinguish "unconstrained" from "empty list"; `assetGroup` is the first
-* accepted group's slug (slots target a single group in practice).
-*/
-function resolveAccepts(accepts) {
-	if (!accepts) return {};
-	const names = [];
-	let assetGroup;
-	for (const entry of accepts) {
-		if (isAssetGroupRef(entry)) {
-			assertAcceptedAssetGroupPlaceable(entry);
-			const slug = readAcceptedAssetGroupSlug(entry);
-			if (slug === void 0) throw new Error(UNREGISTERED_ACCEPTED_GROUP_ERROR);
-			if (assetGroup === void 0) assetGroup = slug;
-			continue;
-		}
-		const name = readDefinitionName(entry);
-		if (name) names.push(name);
-	}
-	return {
-		names: names.length > 0 ? names : void 0,
-		assetGroup
-	};
-}
-/**
-* Read an accepted asset group's slug from either form an `__accepts` entry
-* takes: the live double-duty definition (slug on the internal `__slug` slot)
-* or the serialized `{ __kind: 'assetGroup', ref }` wire marker.
-*
-* Crucially this never reads the live definition's `ref` *getter* — that getter
-* throws "read before registration" until `registerAssetGroups` stamps `__slug`,
-* which would turn a recoverable "group not registered" condition into a cryptic
-* crash on the first `derived`/`toJSON` access. The `.ref` fallback is reached
-* only for wire markers (no `assetKind` field); an unregistered *live* group
-* resolves to `undefined` here, and the caller raises a clear error.
-*/
-function readAcceptedAssetGroupSlug(entry) {
-	const live = readAssetGroupSlug(entry);
-	if (live) return live;
-	if (entry !== null && typeof entry === "object" && !("assetKind" in entry)) {
-		const ref = entry.ref;
-		if (typeof ref === "string" && ref.length > 0) return ref;
-	}
-}
-/** Shared message for an accepted asset group whose slug can't be resolved —
-*  it was pointed at by `.accepts(...)` but never registered. */
-const UNREGISTERED_ACCEPTED_GROUP_ERROR = "slot .accepts(<asset group>) references a group that has not been registered — call Config.registerAssetGroups(...) for it before the slot is resolved or serialized.";
-/**
-* Throw for `.accepts(<non-placeable group>)`. Reads the stamped
-* `assetKind` off the accepted group (the double-duty definition
-* object); a bare `{ __kind, ref }` marker carries no class to
-* validate, so it passes through.
-*/
-function assertAcceptedAssetGroupPlaceable(entry, context) {
-	const group = entry;
-	const assetKind = group.assetKind;
-	if (assetKind === void 0) return;
-	if (isPlaceable({ assetKind })) return;
-	const slug = readAssetGroupSlug(entry) ?? group.label ?? "unknown";
-	const where = context ? `component "${context.componentName}" prop "${context.propName}": ` : "";
-	throw new Error(`${where}slot accepts asset group "${slug}" (class "${assetKind}"), which is not placeable — only placeable asset classes (e.g. icons) can fill a slot.`);
-}
-/**
-* Catches a slot that declares `.accepts(<non-placeable group>)` — e.g.
-* a slot wired to accept a font group, which can never fill a slot.
-*
-* This is the *eager* guard: `Config.registerComponents` and
-* `registerComponentGroups` run it once per definition at registration
-* time, so the error surfaces right when the component is registered
-* rather than later, on the first lazy `derived` read buried deep in a
-* render path (where it'd be much harder to trace back to the cause).
-*
-* There's also a *lazy* check inside `resolveAccepts`. We keep both
-* on purpose: this eager walk only sees the top-level definition, so the
-* lazy check is the backstop for bindings it can't reach. (Inner slots
-* of a composed layer aren't a gap — they get validated through their
-* own component's registration.)
-*
-* The same pass enforces the `slot({ type: 'component' })` contract: a
-* component-typed slot resolves to the icon component itself, which is only
-* meaningful when it accepts an asset group, so one declared without an
-* asset-group `.accepts(...)` is a config-load error.
-*
-* Hydration note: the serialized `{ __kind: 'assetGroup', ref }` marker
-* (`serializeAcceptsList`) is enumerable plain JSON, so `isAssetGroupRef`
-* recognizes it browser-side and the placeable group's slug reaches
-* `SlotInfo.acceptsAssetGroup` after a round-trip. The placeability throw,
-* however, does NOT re-fire on the wire form — the marker carries no
-* `assetKind`, so `assertAcceptedAssetGroupPlaceable` returns early. That's
-* fine in practice: `serializeAcceptsList` runs the same throw on the way
-* *out*, so a non-placeable group can never be written to a wire blob this
-* code produces. The browser-side guarantee is the safe-degradation one —
-* an unresolvable or non-icon group yields no `acceptsAssetGroup` and an
-* empty picker, never the all-components fallback — not a re-validation.
-*/
-function assertDefinitionAcceptsPlaceable(componentName, definition) {
-	for (const [propName, binding] of Object.entries(definition.props ?? {})) {
-		if (!isSlotMarker(binding)) continue;
-		const groupRefs = (binding.__accepts ?? []).filter(isAssetGroupRef);
-		for (const entry of groupRefs) assertAcceptedAssetGroupPlaceable(entry, {
-			componentName,
-			propName
-		});
-		if (groupRefs.length > 1) throw new Error(`component "${componentName}" prop "${propName}": a slot can accept at most one asset group (got ${groupRefs.length}).`);
-		const isForwardingRef = "layer" in binding && binding.layer !== void 0;
-		if (binding.__valueType === "component" && groupRefs.length === 0 && !isForwardingRef) throw new Error(`component "${componentName}" prop "${propName}": slot({ type: 'component' }) requires an asset-group .accepts() — it resolves to the asset's component (e.g. the aliased Icon pattern), so it must target a placeable asset group.`);
-	}
-}
-function readDefinitionName(entry) {
-	if (typeof entry === "string") return entry.length > 0 ? entry : void 0;
-	if (entry === null) return void 0;
-	if (typeof entry !== "object" && typeof entry !== "function") return void 0;
-	const direct = entry.name;
-	if (typeof direct === "string" && direct.length > 0) return direct;
-	const stamped = entry.__componentName;
-	if (typeof stamped === "string" && stamped.length > 0) return stamped;
-	const inner = entry.__config;
-	if (inner && typeof inner === "object") return readDefinitionName(inner);
-}
-/**
-* Rewrite each slot binding's `__accepts` to bare component-name strings
-* for the wire. In memory `__accepts` holds whole `ComponentDefinition`
-* references; serializing them verbatim both bloats the JSON (the entire
-* accepted component is deep-cloned into every consumer) and loses the
-* non-enumerable `__componentName` stamp `JSON.stringify` drops — so after
-* a `fromJSON` round-trip the names can't be recovered and the slot reads
-* as unconstrained. Resolving to names here (while the stamp is present)
-* keeps `accepts` intact across the DB round-trip. Non-slot bindings pass
-* through untouched; the marker's methods are non-enumerable and so are
-* already dropped by the spread.
-*
-* Asset-group entries can't be name strings — the group's live FCs are
-* non-enumerable (so they never leak across the wire) and its `__kind`/`ref`
-* tag is likewise non-enumerable, so a verbatim `JSON.stringify` would drop
-* the ref entirely and the slot would rehydrate as unconstrained. They are
-* rewritten to an explicit `{ __kind: 'assetGroup', ref: slug }` marker —
-* plain JSON that `isAssetGroupRef` recognizes on the way back in.
-*/
-function serializeAcceptsInProps(props, ancestryDeclaresChildren = false) {
-	const out = {};
-	for (const [name, binding] of Object.entries(props)) {
-		if (name === "children" && binding === void 0) {
-			if (!ancestryDeclaresChildren) out[name] = null;
-			continue;
-		}
-		if (!isSlotMarker(binding)) {
-			out[name] = binding;
-			continue;
-		}
-		const { __accepts: _drop, ...rest } = binding;
-		const list = serializeAcceptsList(binding.__accepts);
-		out[name] = list ? {
-			...rest,
-			__accepts: list
-		} : rest;
-	}
-	return out;
-}
-/**
-* Serialize a slot's `__accepts` to its wire form: component entries become
-* bare name strings, asset-group entries become `{ __kind: 'assetGroup', ref }`
-* markers. The non-placeability throw fires here too, so a bad group can't slip
-* onto the wire even if a caller serializes before the eager registration
-* guard runs. Returns `undefined` for an empty/absent list so the serializer
-* omits `__accepts` rather than writing `[]`.
-*/
-function serializeAcceptsList(accepts) {
-	if (!accepts) return void 0;
-	const out = [];
-	for (const entry of accepts) {
-		if (isAssetGroupRef(entry)) {
-			assertAcceptedAssetGroupPlaceable(entry);
-			const slug = readAcceptedAssetGroupSlug(entry);
-			if (slug === void 0) throw new Error(UNREGISTERED_ACCEPTED_GROUP_ERROR);
-			out.push({
-				__kind: "assetGroup",
-				ref: slug
-			});
-			continue;
-		}
-		const componentName = readDefinitionName(entry);
-		if (componentName) out.push(componentName);
-	}
-	return out.length > 0 ? out : void 0;
-}
-/**
-* Pull the inner `ComponentDefinition` off a layer tag value when the
-* layer was authored as a composed-component reference. HTML-element
-* layers (`tag('div')` / bare `'div'`) and `ComponentRef` markers
-* return `undefined` — the chain walk stops there.
-*/
-function getComposedLayerDefinition(tagValue) {
-	if (tagValue === void 0 || tagValue === null) return void 0;
-	if (typeof tagValue === "string") return void 0;
-	if (typeof tagValue !== "object" && typeof tagValue !== "function") return;
-	const obj = tagValue;
-	if (obj.__kind === "tag" || obj.__kind === "component") return void 0;
-	if (obj.__config && typeof obj.__config === "object") return obj.__config;
-	if (obj.layers && typeof obj.layers === "object") return tagValue;
-}
-/** Build a `Map<layerName, Layer>` from a definition's authored layers. */
-function toLayerMap(layersDef) {
-	if (!layersDef) return void 0;
-	const out = /* @__PURE__ */ new Map();
-	for (const [layerName, layerTag] of Object.entries(layersDef)) out.set(layerName, new Layer({
-		name: layerName,
-		tag: layerTag
-	}));
-	return out;
-}
-/**
-* A single primitive root layer (`{ root: 'div' }` or `{ root: tag('div') }`)
-* — render forwards children straight to the element, so the component holds
-* arbitrary node children.
-*/
-function hasSinglePrimitiveRoot(layers) {
-	if (layers.size !== 1) return false;
-	const t = layers.get("root")?.tag;
-	if (typeof t === "string") return true;
-	if (typeof t === "object" && t !== null) return t.__kind === "tag";
-	return false;
-}
-/**
-* HTML void elements — tags that must never receive children (React throws).
-* Mirrors the HTML spec's void-element list; codegen's registry descriptor
-* derives its `voidComponents` set from the same tags.
-*/
-const VOID_HTML_TAGS = new Set([
-	"area",
-	"base",
-	"br",
-	"col",
-	"embed",
-	"hr",
-	"img",
-	"input",
-	"link",
-	"meta",
-	"param",
-	"source",
-	"track",
-	"wbr"
-]);
-/**
-* The HTML tag a component's root element renders as: own `defaultProps.as`
-* wins (the `Box as="input"` value-extension pattern), else the root layer's
-* tag, else the value-extends chain's answer. Undefined when nothing resolves
-* (composed roots, unknown parents) — callers treat that as "no tag fact".
-* The `seen` guard stops extends cycles.
-*
-* Mirrors codegen's `resolveHtmlTag` (getReactArtifacts.ts), which reads the
-* same facts off `derived.layers[*].renders` — keep the precedence order
-* (`as` → root tag → extends chain) in sync.
-*/
-function resolveRootHtmlTag(component, resolve, seen) {
-	if (seen.has(component.name)) return void 0;
-	seen.add(component.name);
-	const as = component.defaultProps?.as;
-	if (typeof as === "string") return as;
-	const t = component.layers.get("root")?.tag;
-	if (typeof t === "string") return t;
-	if (typeof t === "object" && t !== null) {
-		const marker = t;
-		if (marker.__kind === "tag" && typeof marker.ref === "string") return marker.ref;
-	}
-	const parent = component.extendsFrom && resolve ? resolve(component.extendsFrom) : void 0;
-	return parent ? resolveRootHtmlTag(parent, resolve, seen) : void 0;
-}
-/**
-* Whether the author dropped an inherited `children` prop (`children:
-* undefined` in a value-extension — Input/Image/Textarea dropping Box's
-* slot). On the wire the drop has two shapes (see `serializeAcceptsInProps`):
-* declared-parent drops compact away and are reconstructed here by the
-* ancestry fallback; structural-surface drops ride as `children: null`,
-* which the constructor restores to the authored own-key-`undefined` shape.
-*/
-function droppedInheritedChildren(component, resolve) {
-	if (Object.hasOwn(component.props, "children")) return component.props.children === void 0;
-	return ancestryDeclaresChildren(component, resolve);
-}
-/**
-* Whether any component up the value-extension chain declares a `children`
-* prop. Shared by the hydrator's fallback above and the serializer's choice
-* of wire shape, so the two sides can't drift apart.
-*/
-function ancestryDeclaresChildren(component, resolve) {
-	if (!resolve) return false;
-	const seen = new Set([component.name]);
-	let parentName = component.extendsFrom;
-	while (parentName && !seen.has(parentName)) {
-		seen.add(parentName);
-		const parent = resolve(parentName);
-		if (!parent) return false;
-		if (parent.props.children !== void 0) return true;
-		parentName = parent.extendsFrom;
-	}
-	return false;
-}
-/**
-* `acceptsChildren` is true when either:
-*   - the component has a single primitive root layer, OR
-*   - the component declares a `children` slot prop (`children: slot(...)`).
-*
-* Composed-component roots and multi-layer configs without a children
-* slot do NOT accept children — the auto-render has nowhere to put
-* them. This stays value-kind-agnostic: a string-label `children` (Button)
-* still counts as "accepts children" for codegen/prop purposes. Tools that
-* need "accepts *droppable layers*" should use {@link derivesAcceptsChildNodes}.
-*
-* Keyed on the prop NAMED `children`, not on any slot whose forward target is
-* a layer's children surface. A component like Checkbox (`label:
-* slot('label/children')`) routes its LABEL prop into a text layer — that
-* says nothing about the component's own children: it has no destination for
-* them and its render drops them. Counting such forwards used to mark every
-* labeled form control (and Modal/Banner/Toast, via their title/description
-* slots) as children-accepting, which fed the AI catalog the Button-style
-* "put the text in props.children" hint and produced Specs whose `children`
-* leak onto a void `<input>` at render (UDS-2907).
-*/
-function derivesAcceptsChildren(layers, props) {
-	if (hasSinglePrimitiveRoot(layers)) return true;
-	for (const info of props) if (info.kind === "slot" && info.name === "children") return true;
-	return false;
-}
-/**
-* `acceptsChildNodes` narrows {@link derivesAcceptsChildren} to children that
-* are *renderable nodes* — the ones a layer-reparent tool can drop into. A
-* single primitive root qualifies (it forwards `ReactNode` children), as does
-* a `children` slot — unless the author declared the children surface to be
-* data rather than nodes: `slot({ type: 'string' })` (a text label like
-* Button's) or any non-slot marker (`children: string()` on a Text that
-* value-extends Box, `number()`, `boolean()`, `variant([...])`). The decision
-* keys on the *authored intent*, not the resolved `valueType` (a string label
-* still resolves to `'ReactNode'`, so `valueType` alone can't distinguish
-* the two).
-*/
-function derivesAcceptsChildNodes(layers, props) {
-	let hasNodeChildrenSlot = false;
-	for (const info of props) {
-		if (info.name !== "children") continue;
-		if (info.kind !== "slot") return false;
-		if (info.authoredType === "string") return false;
-		hasNodeChildrenSlot = true;
-	}
-	if (hasSinglePrimitiveRoot(layers)) return true;
-	return hasNodeChildrenSlot;
-}
-function buildCompoundOverrides(entries) {
-	const out = {};
-	if (!entries) return out;
-	for (const entry of entries) for (const [layerName, override] of Object.entries(entry.layers)) {
-		if (!out[layerName]) out[layerName] = {};
-		Object.assign(out[layerName], override);
-	}
-	return out;
-}
-//#endregion
-export { Component, Layer, VOID_HTML_TAGS, assertDefinitionAcceptsPlaceable };