@yahoo/uds-create-config 2.45.0 → 3.0.1

package/dist/renderer/wrappers/component-slots.d.ts

@@ -1,41 +0,0 @@
-import type { ComponentRegistry } from '@json-render/react';
-import type React from 'react';
-/**
- * Config-derived facts for the aliased `Icon` pattern. A component-typed slot
- * (`slot({ type: 'component' }).accepts(<icon group>)`) saves the picked asset
- * as an inline name string (`"Trophy"`) — not a `$slot` ref — and its render fn
- * expects the icon *component* itself (`({ name: SvgIcon }) => <SvgIcon … />`).
- *
- *  - `componentSlots`: componentName → propName → accepted asset-group slug,
- *    emitted by codegen's `deriveRegistryDescriptor` from each slot's
- *    `authoredType: 'component'` + `acceptsAssetGroup`.
- *  - `assetMembersBySlug`: slug → assetName → member component, built at runtime
- *    by `makeRegistry` from the same live asset groups it keys under their
- *    namespaced asset type. The stored component is the renderable form
- *    (the member rendered through the group's declared system component, e.g.
- *    `<Icon name=… />`, or the bare member when none is declared), so the
- *    author's `<SvgIcon variant size />` draws.
- */
-export interface ComponentTypedSlotsConfig {
-    componentSlots?: Readonly<Record<string, Readonly<Record<string, string>>>>;
-    assetMembersBySlug?: ReadonlyMap<string, ReadonlyMap<string, React.ComponentType>>;
-}
-/**
- * Resolve component-typed slot props from their saved inline asset name to the
- * member component, so the consuming component's render fn receives a callable
- * component (not a rendered `$slot` child routed through `ElementRenderer`).
- *
- * A component-typed prop's only valid value is the inline asset-name string, so
- * this wrapper guarantees the render fn receives a member component or
- * `undefined` — never a rendered element:
- *  - a string resolves to its member component (an unresolvable name — not in
- *    the group — is left as the string so the render fn can guard);
- *  - any non-string, non-undefined value (e.g. a leftover `{ $slot }` ref from a
- *    spec authored before component-typed slots were distinguished) is stripped
- *    to `undefined`, so it can't reach `wrapSlotResolution` and render as an
- *    `ElementRenderer` child the render fn would choke on.
- *
- * It runs OUTSIDE `wrapSlotResolution`, so it sees the raw prop value before any
- * `$slot` resolution. Both lookups absent ⇒ no-op.
- */
-export declare function wrapComponentTypedSlots(reg: ComponentRegistry, { componentSlots, assetMembersBySlug }?: ComponentTypedSlotsConfig): ComponentRegistry;

package/dist/renderer/wrappers/component-slots.js

@@ -1,66 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-//#region src/renderer/wrappers/component-slots.tsx
-/** Local component name of a registry key: `yahoo-os:IconSlotFixture` →
-*  `IconSlotFixture`. Registry keys are `<namespace>:<Name>`; component names
-*  never contain `:`, so split on the first one. Mirrors `wrapVoidElements`. */
-function localName(key) {
-	const colon = key.indexOf(":");
-	return colon === -1 ? key : key.slice(colon + 1);
-}
-/**
-* Resolve component-typed slot props from their saved inline asset name to the
-* member component, so the consuming component's render fn receives a callable
-* component (not a rendered `$slot` child routed through `ElementRenderer`).
-*
-* A component-typed prop's only valid value is the inline asset-name string, so
-* this wrapper guarantees the render fn receives a member component or
-* `undefined` — never a rendered element:
-*  - a string resolves to its member component (an unresolvable name — not in
-*    the group — is left as the string so the render fn can guard);
-*  - any non-string, non-undefined value (e.g. a leftover `{ $slot }` ref from a
-*    spec authored before component-typed slots were distinguished) is stripped
-*    to `undefined`, so it can't reach `wrapSlotResolution` and render as an
-*    `ElementRenderer` child the render fn would choke on.
-*
-* It runs OUTSIDE `wrapSlotResolution`, so it sees the raw prop value before any
-* `$slot` resolution. Both lookups absent ⇒ no-op.
-*/
-function wrapComponentTypedSlots(reg, { componentSlots, assetMembersBySlug } = {}) {
-	if (!componentSlots || !assetMembersBySlug) return reg;
-	const wrapped = { ...reg };
-	for (const key of Object.keys(reg)) {
-		const slotProps = componentSlots[localName(key)];
-		if (!slotProps) continue;
-		const Orig = wrapped[key];
-		if (!Orig) continue;
-		wrapped[key] = function ComponentTypedSlotWrapper(renderProps) {
-			const props = renderProps.element.props;
-			if (!props) return /* @__PURE__ */ jsx(Orig, { ...renderProps });
-			let resolved;
-			for (const [propName, slug] of Object.entries(slotProps)) {
-				const value = props[propName];
-				if (value === void 0) continue;
-				if (typeof value === "string") {
-					const member = assetMembersBySlug.get(slug)?.get(value);
-					if (!member) continue;
-					resolved ??= { ...props };
-					resolved[propName] = member;
-				} else {
-					resolved ??= { ...props };
-					resolved[propName] = void 0;
-				}
-			}
-			if (!resolved) return /* @__PURE__ */ jsx(Orig, { ...renderProps });
-			return /* @__PURE__ */ jsx(Orig, {
-				...renderProps,
-				element: {
-					...renderProps.element,
-					props: resolved
-				}
-			});
-		};
-	}
-	return wrapped;
-}
-//#endregion
-export { wrapComponentTypedSlots };

package/dist/renderer/wrappers/slot-resolution.d.ts

@@ -1,25 +0,0 @@
-import { ComponentRegistry } from "@json-render/react";
-
-//#region src/renderer/wrappers/slot-resolution.d.ts
-/**
- * Resolve `$slot` prop references to rendered React children.
- *
- * Components like `Card` declare named slots in their authoring spec:
- *
- *     props: {
- *       title: slot('header/text'),
- *       footer: slot('footer'),
- *     }
- *
- * Codegen lowers each `slot(...)` to a `{ $slot: 'key' }` marker that
- * surfaces in `element.props`. At render time this wrapper pairs each
- * slot key against the keyed React children passed in by `Renderer`
- * (json-render assigns each rendered child a key derived from its
- * spec element id), pulls the matching child out of the regular
- * children stream, and feeds it through as the resolved prop value.
- * Children whose keys don't match any slot pass through to the
- * component as regular `children`.
- */
-declare function wrapSlotResolution(reg: ComponentRegistry): ComponentRegistry;
-//#endregion
-export { wrapSlotResolution };

package/dist/renderer/wrappers/slot-resolution.js

@@ -1,68 +0,0 @@
-import { isSlotRef } from "../../spec/slot-refs.js";
-import React from "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/renderer/wrappers/slot-resolution.tsx
-/**
-* Resolve `$slot` prop references to rendered React children.
-*
-* Components like `Card` declare named slots in their authoring spec:
-*
-*     props: {
-*       title: slot('header/text'),
-*       footer: slot('footer'),
-*     }
-*
-* Codegen lowers each `slot(...)` to a `{ $slot: 'key' }` marker that
-* surfaces in `element.props`. At render time this wrapper pairs each
-* slot key against the keyed React children passed in by `Renderer`
-* (json-render assigns each rendered child a key derived from its
-* spec element id), pulls the matching child out of the regular
-* children stream, and feeds it through as the resolved prop value.
-* Children whose keys don't match any slot pass through to the
-* component as regular `children`.
-*/
-function wrapSlotResolution(reg) {
-	const wrapped = {};
-	for (const [name, Comp] of Object.entries(reg)) wrapped[name] = function SlotWrapper(renderProps) {
-		const { element, children } = renderProps;
-		const props = element.props;
-		if (!props) return /* @__PURE__ */ jsx(Comp, { ...renderProps });
-		const slotEntries = [];
-		for (const [propName, value] of Object.entries(props)) if (isSlotRef(value)) slotEntries.push([propName, value.$slot]);
-		if (slotEntries.length === 0) return /* @__PURE__ */ jsx(Comp, { ...renderProps });
-		const slotKeySet = /* @__PURE__ */ new Set();
-		for (const [, ref] of slotEntries) {
-			const refs = Array.isArray(ref) ? ref : [ref];
-			for (const r of refs) slotKeySet.add(r);
-		}
-		const childArray = React.Children.toArray(children);
-		const slotChildMap = /* @__PURE__ */ new Map();
-		const regularChildren = [];
-		for (const child of childArray) {
-			if (React.isValidElement(child) && typeof child.key === "string") {
-				const elementKey = child.key.startsWith(".$") ? child.key.slice(2) : child.key;
-				if (slotKeySet.has(elementKey)) {
-					slotChildMap.set(elementKey, child);
-					continue;
-				}
-			}
-			regularChildren.push(child);
-		}
-		const resolvedProps = { ...props };
-		for (const [propName, ref] of slotEntries) if (Array.isArray(ref)) {
-			const resolved = ref.map((key) => slotChildMap.get(key)).filter(Boolean);
-			resolvedProps[propName] = resolved.length > 0 ? resolved : void 0;
-		} else resolvedProps[propName] = slotChildMap.get(ref) ?? void 0;
-		return /* @__PURE__ */ jsx(Comp, {
-			...renderProps,
-			element: {
-				...element,
-				props: resolvedProps
-			},
-			children: regularChildren.length > 0 ? regularChildren : void 0
-		});
-	};
-	return wrapped;
-}
-//#endregion
-export { wrapSlotResolution };

package/dist/renderer/wrappers/void-elements.d.ts

@@ -1,37 +0,0 @@
-import { ComponentRegistry } from "@json-render/react";
-
-//#region src/renderer/wrappers/void-elements.d.ts
-/**
- * Strip `children` from components that must never receive them. Source Specs
- * (author-emitted, AI-emitted, Figma import) sometimes carry a stray
- * `children` prop on such a component; drop it centrally rather than letting
- * it reach the DOM and throw.
- *
- * Two config-derived sets feed this, and they're COMPLEMENTARY, not nested:
- *   - `voidComponents` — root renders a void HTML tag (`img`, `input`). React
- *     throws if a void element gets children. A single-primitive `Image`
- *     lands here even though its `acceptsChildren` is true (a primitive root
- *     "accepts children" for authoring, yet `<img>` still can't take them).
- *   - `noChildrenComponents` — `acceptsChildren === false`: the component
- *     declares no `children` slot, so its render has nowhere to put children.
- *     Catches composed roots (Modal/Banner/Toast) and the labeled form
- *     controls (Checkbox/Input/Radio/Switch) whose root is a `div` — so
- *     `voidComponents` misses them, yet a leaked `children` forwards down
- *     onto the nested void `<input>` and throws (UDS-2907).
- *
- * Both derive from the `Config`, so this stays config-agnostic. Matches on the
- * namespace-stripped local name, so a namespaced registry (`yahoo-os:Image`)
- * is recognized, not just the bare `Image` key. Empty union ⇒ no-op.
- */
-interface VoidElementsConfig {
-  /** Component names whose root renders a void HTML tag (`img`, `input`, …). */
-  voidComponents?: readonly string[];
-  /** Component names that declare no `children` slot (`acceptsChildren === false`). */
-  noChildrenComponents?: readonly string[];
-}
-declare function wrapVoidElements(reg: ComponentRegistry, {
-  voidComponents,
-  noChildrenComponents
-}?: VoidElementsConfig): ComponentRegistry;
-//#endregion
-export { wrapVoidElements };

package/dist/renderer/wrappers/void-elements.js

@@ -1,40 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-//#region src/renderer/wrappers/void-elements.tsx
-/** Local component name of a registry key: `yahoo-os:Image` → `Image`,
-*  `Image` → `Image`. Registry keys are `<namespace>:<Name>`; component names
-*  never contain `:`, so split on the first one. */
-function localName(key) {
-	const colon = key.indexOf(":");
-	return colon === -1 ? key : key.slice(colon + 1);
-}
-function wrapVoidElements(reg, { voidComponents, noChildrenComponents } = {}) {
-	const childless = new Set([...voidComponents ?? [], ...noChildrenComponents ?? []]);
-	if (childless.size === 0) return reg;
-	const wrapped = { ...reg };
-	for (const key of Object.keys(reg)) {
-		if (!childless.has(localName(key))) continue;
-		const Orig = wrapped[key];
-		if (!Orig) continue;
-		wrapped[key] = function VoidElementWrapper(p) {
-			const props = p.element?.props;
-			let next = p;
-			if (props && "children" in props) {
-				const { children: _dropped, ...rest } = props;
-				next = {
-					...p,
-					element: {
-						...p.element,
-						props: rest
-					}
-				};
-			}
-			return /* @__PURE__ */ jsx(Orig, {
-				...next,
-				children: void 0
-			});
-		};
-	}
-	return wrapped;
-}
-//#endregion
-export { wrapVoidElements };

package/dist/spec/layer-props.d.ts

@@ -1,52 +0,0 @@
-import { BaseStyles, CompoundPropsEntry } from "../types.js";
-
-//#region src/spec/layer-props.d.ts
-type RenderedLayerProps = Record<string, Record<string, unknown>>;
-/**
- * Structural view of the component fields style resolution reads. Satisfied by
- * a real `@yahoo/uds-create-config` `Component` (Studio, playground) AND by codegen's
- * capture-time `ProbeComponent` (`extractPreviewSpecs.buildRenderSpec`), so the
- * same resolver bakes styles into the render spec at build time and resolves
- * derived (non-render) values like the layers-panel `display` at render time.
- */
-interface ResolvableComponent {
-  layers: ReadonlyMap<string, unknown>;
-  base?: BaseStyles;
-  props?: Record<string, unknown>;
-  compoundProps?: readonly CompoundPropsEntry[];
-}
-/**
- * Resolve the styles a layer effectively has for a set of prop-axis values and
- * (optionally) one forced interaction state, walking the authoring surfaces
- * codegen reads:
- *
- *   1. `component.base[layer]` — the always-on baseline.
- *   2. `component.props[axis].values[value][layer]` — per axis key in `propValues`.
- *   3. `component.compoundProps[].layers[layer]` — for entries whose `when`
- *       is a subset of `propValues` (multi-axis overrides).
- *   4. State overlay — when `state` names a modifier sub-object (`_hover`) on
- *       the merged surface, its props overlay the base so a static preview
- *       shows that state.
- *
- * `propValues` are plain axis names → values (no reserved keys). `state` is a
- * single forced interaction modifier (`'_hover'`); pass it directly rather than
- * smuggling it into `propValues`. **Modes are intentionally not a parameter** —
- * mode visuals ride a scoped wrapper class (`.dark &`) and flip live, so they
- * are never folded into the static base here.
- */
-declare function resolveAuthoredLayerProps(component: ResolvableComponent | undefined | null, layer: string, propValues: Record<string, unknown>, state?: string | null): Record<string, unknown>;
-/**
- * Resolve per-layer style bags for a set of prop values, mirroring the config's
- * variant resolution. `buildRenderSpec` calls this once per variant combo to
- * bake the bags onto the render spec.
- *
- * `state` is left `null` by the bake path — modifier blocks ride through as
- * nested style props and forced state is applied per cell (the render-spec
- * consumers fold the active modifier into props), so folding it into the base
- * here would be redundant. (Derived callers like the layers panel also pass no
- * state.) `cssVarPrefix` resolves color expressions to a `var(...)`-referencing
- * arbitrary value.
- */
-declare function resolveRenderedLayerProps(component: ResolvableComponent | undefined, propValues: Record<string, unknown>, state?: string | null, cssVarPrefix?: string): RenderedLayerProps;
-//#endregion
-export { ResolvableComponent, resolveAuthoredLayerProps, resolveRenderedLayerProps };

package/dist/spec/layer-props.js

@@ -1,149 +0,0 @@
-import { makeTokenRefToCss } from "../entity-utils.js";
-import { isTokenRef } from "../refs.js";
-import { isColorExpression, resolveColorExpression } from "../colorExpressions.js";
-//#region src/spec/layer-props.ts
-const REST_STATE = "rest";
-const isStateKey = (key) => key.startsWith("_");
-/**
-* Resolve the styles a layer effectively has for a set of prop-axis values and
-* (optionally) one forced interaction state, walking the authoring surfaces
-* codegen reads:
-*
-*   1. `component.base[layer]` — the always-on baseline.
-*   2. `component.props[axis].values[value][layer]` — per axis key in `propValues`.
-*   3. `component.compoundProps[].layers[layer]` — for entries whose `when`
-*       is a subset of `propValues` (multi-axis overrides).
-*   4. State overlay — when `state` names a modifier sub-object (`_hover`) on
-*       the merged surface, its props overlay the base so a static preview
-*       shows that state.
-*
-* `propValues` are plain axis names → values (no reserved keys). `state` is a
-* single forced interaction modifier (`'_hover'`); pass it directly rather than
-* smuggling it into `propValues`. **Modes are intentionally not a parameter** —
-* mode visuals ride a scoped wrapper class (`.dark &`) and flip live, so they
-* are never folded into the static base here.
-*/
-function resolveAuthoredLayerProps(component, layer, propValues, state) {
-	if (!component) return {};
-	const merged = { ...component.base?.[layer] ?? {} };
-	for (const [key, value] of Object.entries(propValues)) {
-		const binding = component.props?.[key];
-		if (!binding || typeof binding !== "object") continue;
-		const layerStyles = pickAxisLayers(binding, value)?.[layer];
-		if (layerStyles) mergeLayerStyles(merged, layerStyles);
-	}
-	if (component.compoundProps) for (const entry of component.compoundProps) {
-		if (!matchesContext(entry.when, propValues)) continue;
-		const layerStyles = entry.layers[layer];
-		if (layerStyles && typeof layerStyles === "object") mergeLayerStyles(merged, layerStyles);
-	}
-	if (state && state !== REST_STATE && isStateKey(state)) {
-		const stateStyles = merged[state];
-		if (stateStyles && typeof stateStyles === "object") Object.assign(merged, stateStyles);
-	}
-	return merged;
-}
-/**
-* Resolve per-layer style bags for a set of prop values, mirroring the config's
-* variant resolution. `buildRenderSpec` calls this once per variant combo to
-* bake the bags onto the render spec.
-*
-* `state` is left `null` by the bake path — modifier blocks ride through as
-* nested style props and forced state is applied per cell (the render-spec
-* consumers fold the active modifier into props), so folding it into the base
-* here would be redundant. (Derived callers like the layers panel also pass no
-* state.) `cssVarPrefix` resolves color expressions to a `var(...)`-referencing
-* arbitrary value.
-*/
-function resolveRenderedLayerProps(component, propValues, state, cssVarPrefix) {
-	if (!component) return {};
-	const layerStyles = {};
-	for (const layerName of component.layers.keys()) layerStyles[layerName] = finalizeLayerProps(resolveAuthoredLayerProps(component, layerName, propValues, state), state, cssVarPrefix);
-	return layerStyles;
-}
-/**
-* Fold the active (selected) state's styles into the flat bag so the static
-* preview shows that state without real interaction, KEEP modifier blocks as
-* nested objects so the component renderer emits their classes (`_hover:bg-x`,
-* `_stackedChildren:ms-[-6px]`) — structural modifiers (child combinators,
-* attrs) apply and interaction states stay live — and bake color expressions
-* into arbitrary style-prop values so they flow through the class system
-* instead of an inline `style`.
-*/
-function finalizeLayerProps(styles, state, cssVarPrefix) {
-	const merged = { ...styles };
-	const stateStyles = state && isStateKey(state) ? styles[state] : void 0;
-	if (stateStyles && typeof stateStyles === "object") Object.assign(merged, stateStyles);
-	return bakeColorValues(merged, makeTokenRefToCss(cssVarPrefix));
-}
-/**
-* Resolve every color expression / token ref in a layer's style map to an
-* arbitrary `[…]` value, recursing into nested modifier blocks. A
-* `color-mix(...)` / `var(--…)` isn't a pre-compiled token class, so the
-* bracket form lets `getClassName` encode it into a class the same way it
-* handles `[16px]` — keeping styling renderer-agnostic (no inline `style` whose
-* `var(...)` the build would tree-shake).
-*/
-function bakeColorValues(styles, tokenRefToCss) {
-	const out = {};
-	for (const [key, value] of Object.entries(styles)) if (isColorExpression(value)) out[key] = `[${resolveColorExpression(value, tokenRefToCss)}]`;
-	else if (isTokenRef(value)) out[key] = `[${tokenRefToCss(value.ref)}]`;
-	else if (value !== null && typeof value === "object" && !Array.isArray(value)) out[key] = bakeColorValues(value, tokenRefToCss);
-	else out[key] = value;
-	return out;
-}
-/**
-* Layer `from` onto `into`, deep-merging interaction-state modifier blocks
-* (`_hover`, `_disabled`, …) instead of replacing them. A variant's
-* `_disabled: { borderColor }` must combine with `base`'s `_disabled: { opacity }`
-* — a shallow `Object.assign` would drop the base opacity, so the
-* secondary+disabled cell loses its dimming. Non-modifier props still
-* shallow-replace (a later authoring surface wins that property outright).
-*/
-function mergeLayerStyles(into, from) {
-	for (const [key, value] of Object.entries(from)) {
-		const existing = into[key];
-		if (isStateKey(key) && isStyleMap(existing) && isStyleMap(value)) into[key] = {
-			...existing,
-			...value
-		};
-		else into[key] = value;
-	}
-}
-/**
-* Pull the per-layer style map keyed by `value` off a `variant` / `boolean`
-* marker. Booleans accept a real boolean or its string form.
-*/
-function pickAxisLayers(binding, value) {
-	if (binding.__kind === "variant") {
-		const values = binding.values;
-		if (!values) return void 0;
-		const entry = values[String(value)];
-		return isStyleMap(entry) ? entry : void 0;
-	}
-	if (binding.__kind === "boolean") {
-		const values = binding.values;
-		if (!values) return void 0;
-		const key = coerceBooleanKey(value);
-		if (key === void 0) return void 0;
-		const entry = values[key];
-		return isStyleMap(entry) ? entry : void 0;
-	}
-}
-function isStyleMap(value) {
-	return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function coerceBooleanKey(value) {
-	if (value === true || value === "true") return "true";
-	if (value === false || value === "false") return "false";
-}
-/**
-* `when` is a subset of `context` when every key in `when` is present in
-* `context` with the same stringified value.
-*/
-function matchesContext(when, context) {
-	for (const [k, v] of Object.entries(when)) if (String(context[k]) !== String(v)) return false;
-	return true;
-}
-//#endregion
-export { resolveAuthoredLayerProps, resolveRenderedLayerProps };

package/dist/spec/preview-controls.d.ts

@@ -1,44 +0,0 @@
-import { Component } from "../Component.js";
-import { Config } from "../Config.js";
-
-//#region src/spec/preview-controls.d.ts
-type PreviewControlKind = 'variant' | 'boolean' | 'string';
-interface PreviewControl {
-  readonly name: string;
-  readonly kind: PreviewControlKind;
-  readonly defaultValue: unknown;
-  /** Selectable values — set for `variant` controls (incl. composite/styleProp). */
-  readonly options?: readonly string[];
-}
-/**
- * The selectable values for a prop, or `undefined` when it isn't option-backed.
- * Resolves by the prop's declared kind: a `variant()`'s declared values, a
- * `composite()`'s registered style keys (e.g. `textVariant` → its variant
- * names), or a `styleProp()`'s token + keyword names. A name that isn't a
- * declared prop falls back to a same-named registered style prop (the Box
- * surface — e.g. `color`/`bg` set only via `preview.defaultProps`).
- */
-declare function propOptions(config: Config, component: Component, name: string): readonly string[] | undefined;
-/**
- * Editable preview controls for a component:
- *
- *   - `variant` → dropdown of declared values
- *   - `composite` → dropdown, options from the registered composite
- *   - `boolean` → toggle; `string` / `number` → text input
- *   - `slot` → text input when string-typed/seeded (`children: 'Badge'`); a
- *     ReactNode slot is omitted (its content is a keyed spec element, not a
- *     scalar prop — it can't be set from a value control)
- *   - `styleProp` / `function` → omitted from the main walk (the Box style
- *     surface would flood; event handlers aren't value-editable)
- *   - any scalar `preview.defaultProps` entry not already covered (e.g.
- *     `children` on a primitive) → text/toggle, or a dropdown when the prop is
- *     option-backed (e.g. a `color` styleProp default → token dropdown)
- *
- * `seed` is the rendered instance's current root props (the authored example /
- * live override); a seed value wins over `defaultProps` for the shown default.
- * Variant/slot stay unset when nothing seeds them so the row reads "Default".
- * Sorted variant-first, then the rest, each group alphabetized.
- */
-declare function derivePreviewControls(config: Config, component: Component, seed?: Record<string, unknown>): PreviewControl[];
-//#endregion
-export { PreviewControl, PreviewControlKind, derivePreviewControls, propOptions };

package/dist/spec/preview-controls.js

@@ -1,139 +0,0 @@
-//#region src/spec/preview-controls.ts
-/**
-* The selectable values for a prop, or `undefined` when it isn't option-backed.
-* Resolves by the prop's declared kind: a `variant()`'s declared values, a
-* `composite()`'s registered style keys (e.g. `textVariant` → its variant
-* names), or a `styleProp()`'s token + keyword names. A name that isn't a
-* declared prop falls back to a same-named registered style prop (the Box
-* surface — e.g. `color`/`bg` set only via `preview.defaultProps`).
-*/
-function propOptions(config, component, name) {
-	const info = component.derived.props.find((p) => p.name === name);
-	if (!info) return optionsForStyleProp(config, name);
-	switch (info.kind) {
-		case "variant": return info.values.map(String);
-		case "composite": {
-			const composite = config.compositeStyles.get(info.compositeName);
-			return composite ? [...composite.styles.keys()] : void 0;
-		}
-		case "styleProp": return optionsForStyleProp(config, info.stylePropName);
-		default: return;
-	}
-}
-function optionsForStyleProp(config, propName) {
-	const styleProp = config.styleProps.get(propName);
-	if (!styleProp) return void 0;
-	const values = [];
-	for (const token of styleProp.derived.tokens) values.push(token.name);
-	for (const key of styleProp.derived.keywords.keys()) if (typeof key === "string") values.push(key);
-	return values.length > 0 ? values : void 0;
-}
-/**
-* Editable preview controls for a component:
-*
-*   - `variant` → dropdown of declared values
-*   - `composite` → dropdown, options from the registered composite
-*   - `boolean` → toggle; `string` / `number` → text input
-*   - `slot` → text input when string-typed/seeded (`children: 'Badge'`); a
-*     ReactNode slot is omitted (its content is a keyed spec element, not a
-*     scalar prop — it can't be set from a value control)
-*   - `styleProp` / `function` → omitted from the main walk (the Box style
-*     surface would flood; event handlers aren't value-editable)
-*   - any scalar `preview.defaultProps` entry not already covered (e.g.
-*     `children` on a primitive) → text/toggle, or a dropdown when the prop is
-*     option-backed (e.g. a `color` styleProp default → token dropdown)
-*
-* `seed` is the rendered instance's current root props (the authored example /
-* live override); a seed value wins over `defaultProps` for the shown default.
-* Variant/slot stay unset when nothing seeds them so the row reads "Default".
-* Sorted variant-first, then the rest, each group alphabetized.
-*/
-function derivePreviewControls(config, component, seed = {}) {
-	const controls = [];
-	const seen = /* @__PURE__ */ new Set();
-	const declaredDefaults = component.defaultProps ?? {};
-	for (const info of component.derived.props) {
-		const control = describeProp(config, component, info, declaredDefaults[info.name], seed[info.name]);
-		if (!control) continue;
-		controls.push(control);
-		seen.add(info.name);
-	}
-	const previewDefaults = component.preview?.defaultProps ?? {};
-	for (const [name, value] of Object.entries(previewDefaults)) {
-		if (seen.has(name)) continue;
-		const options = propOptions(config, component, name);
-		if (options && options.length > 0) {
-			controls.push({
-				name,
-				kind: "variant",
-				defaultValue: seed[name] ?? value,
-				options
-			});
-			seen.add(name);
-			continue;
-		}
-		const kind = scalarKind(value);
-		if (!kind) continue;
-		controls.push({
-			name,
-			kind,
-			defaultValue: seed[name] ?? value
-		});
-		seen.add(name);
-	}
-	return sortPreviewControls(controls);
-}
-function describeProp(config, component, info, declaredDefault, seed) {
-	switch (info.kind) {
-		case "variant": return {
-			name: info.name,
-			kind: "variant",
-			defaultValue: seed ?? declaredDefault ?? void 0,
-			options: info.values.map(String)
-		};
-		case "boolean": return {
-			name: info.name,
-			kind: "boolean",
-			defaultValue: seed ?? declaredDefault ?? false
-		};
-		case "string":
-		case "number": return {
-			name: info.name,
-			kind: "string",
-			defaultValue: seed ?? declaredDefault ?? ""
-		};
-		case "composite": {
-			const options = propOptions(config, component, info.name);
-			if (!options || options.length === 0) return null;
-			return {
-				name: info.name,
-				kind: "variant",
-				defaultValue: seed ?? declaredDefault ?? void 0,
-				options
-			};
-		}
-		case "slot": {
-			const value = seed ?? declaredDefault;
-			if (info.authoredType === "string" || typeof value === "string") return {
-				name: info.name,
-				kind: "string",
-				defaultValue: typeof value === "string" ? value : ""
-			};
-			return null;
-		}
-		default: return null;
-	}
-}
-function scalarKind(value) {
-	if (typeof value === "boolean") return "boolean";
-	if (typeof value === "string" || typeof value === "number") return "string";
-	return null;
-}
-function sortPreviewControls(controls) {
-	const byName = (a, b) => a.name.localeCompare(b.name);
-	const variants = controls.filter((c) => c.kind === "variant").sort(byName);
-	const rest = controls.filter((c) => c.kind !== "variant").sort(byName);
-	return [...variants, ...rest];
-}
-//#endregion
-export { derivePreviewControls, propOptions };