@yahoo/uds-v5-wip 1.61.0 → 1.62.0

package/dist/utils/dist/index.js

@@ -3,6 +3,7 @@ import "./array-utils/closestItem.js";
 import "./array-utils/removeItem.js";
 import "./math-utils/clamp.js";
 import "./motion-utils/interpolate.js";
+import "./motion-utils/resolveMotionState.js";
 import "./object-utils/entries.js";
 import "./object-utils/flattenObj.js";
 import "./object-utils/fromEntries.js";

package/dist/utils/dist/motion-utils/resolveMotionState.d.ts

@@ -0,0 +1,35 @@
+//#region ../utils/dist/motion-utils/resolveMotionState.d.ts
+//#region src/motion-utils/resolveMotionState.d.ts
+/**
+ * Runtime helper for codegen's `__rms(stateKeyframe, index)` calls in
+ * multi-layer authoring sources that use `interpolate(...)` markers
+ * inside per-state motion keyframes. Given a state keyframe object
+ * whose values are either scalars or `interpolate({ output, extrapolate })`
+ * markers, resolves each marker against `index` and returns a plain
+ * keyframe object ready to spread onto `motion.<x>` props.
+ *
+ * Inlined `InterpolateMarker` shape rather than imported from
+ * `@uds/config` so this stays a small leaf runtime helper.
+ */
+interface InterpolateMarker {
+  __type: 'interpolate';
+  output: number[];
+  extrapolate: 'clamp' | 'extend' | 'identity';
+}
+/**
+ * Resolve a single `interpolate({ output, extrapolate })` marker against
+ * an integer-ish `index`. Output is a discrete lookup by index for
+ * `index < output.length`; beyond that, `extrapolate` chooses the
+ * extension rule (clamp / linear-extend / identity).
+ */
+declare function resolveInterpolate(marker: InterpolateMarker, index: number): number;
+/**
+ * Resolve every InterpolateMarker in a state keyframe object against
+ * `index`, leaving non-marker values unchanged. Used by codegen-emitted
+ * `__rms(...)` call sites — see
+ * `packages/codegen/src/build/get-styles/motion-transform.ts` for the
+ * call-site generation.
+ */
+declare function resolveMotionState(stateKeyframe: Record<string, unknown>, index: number): Record<string, unknown>; //#endregion
+//#endregion
+export { resolveInterpolate, resolveMotionState };

package/dist/utils/dist/motion-utils/resolveMotionState.js

@@ -0,0 +1,33 @@
+//#region ../utils/dist/motion-utils/resolveMotionState.js
+function isInterpolateMarker(value) {
+	return typeof value === "object" && value !== null && value.__type === "interpolate";
+}
+/**
+* Resolve a single `interpolate({ output, extrapolate })` marker against
+* an integer-ish `index`. Output is a discrete lookup by index for
+* `index < output.length`; beyond that, `extrapolate` chooses the
+* extension rule (clamp / linear-extend / identity).
+*/
+function resolveInterpolate(marker, index) {
+	const { output, extrapolate } = marker;
+	if (index < output.length) return output[index];
+	if (extrapolate === "clamp") return output[output.length - 1];
+	if (extrapolate === "identity") return index;
+	const last = output[output.length - 1];
+	return last + (last - (output[output.length - 2] ?? last)) * (index - (output.length - 1));
+}
+/**
+* Resolve every InterpolateMarker in a state keyframe object against
+* `index`, leaving non-marker values unchanged. Used by codegen-emitted
+* `__rms(...)` call sites — see
+* `packages/codegen/src/build/get-styles/motion-transform.ts` for the
+* call-site generation.
+*/
+function resolveMotionState(stateKeyframe, index) {
+	const resolved = {};
+	for (const [key, value] of Object.entries(stateKeyframe)) if (isInterpolateMarker(value)) resolved[key] = resolveInterpolate(value, index);
+	else resolved[key] = value;
+	return resolved;
+}
+//#endregion
+export { resolveInterpolate, resolveMotionState };

package/dist/utils/dist/string-utils/componentClassName.d.ts

@@ -1,19 +1,52 @@
 //#region ../utils/dist/string-utils/componentClassName.d.ts
 //#region src/string-utils/componentClassName.d.ts
 /**
- * Build the base class name for a component slot.
+ * The four class-name accessors for a single component, with the config
+ * prefix + component name bound. The single source of truth for "what does
+ * this component's CSS class look like" — the resolved `Component` exposes
+ * one (`component.derived.classNames`) and the codegen emitters read it
+ * instead of re-deriving names, so the emitted CSS selectors and the
+ * generated TSX `className` strings can never drift.
+ */
+interface ComponentClassNames {
+  layer(layer: string): string;
+  variant(layer: string, axis: string, value: string): string;
+  defaultProp(layer: string, prop: string): string;
+  compound(layer: string, conditions: Record<string, string>): string;
+}
+/**
+ * Build the {@link ComponentClassNames} accessor set for a component, binding
+ * `prefix` + `name` so callers supply only the per-class arguments. The prefix
+ * is applied here (once), wrapping the unprefixed shape the helpers below
+ * define — so the helpers stay the single definition of the class-name *shape*
+ * and this factory is the single definition of *namespacing*.
+ */
+declare function componentClassNames(prefix: string, name: string): ComponentClassNames;
+/**
+ * Build the base class name for a component layer.
  *
- * @example componentSlotClass('Switch', 'root') // "switch-root"
+ * @example componentLayerClass('Switch', 'root') // "switch-root"
  */
-declare function componentSlotClass(componentName: string, slot: string): string;
+declare function componentLayerClass(componentName: string, layer: string): string;
 /**
- * Build the variant class name for a component slot.
+ * Build the variant class name for a component layer.
  *
  * @example componentVariantClass('Switch', 'root', 'size', 'lg') // "switch-root--size-lg"
  */
-declare function componentVariantClass(componentName: string, slot: string, axis: string, value: string): string;
+declare function componentVariantClass(componentName: string, layer: string, axis: string, value: string): string;
+/**
+ * Build the class name carrying a component's own `defaultProps` styling for a
+ * prop, on a layer. Emitted in `@layer base` (so it loses to an embedding
+ * component's anatomy in `@layer components`) and applied by the generated impl
+ * only when the prop is absent — so an embedded sub-component's default
+ * `variant`/`color` no longer overrides the parent's anatomy, while an explicit
+ * prop still wins via its atomic/variant class in a later layer.
+ *
+ * @example componentDefaultClass('Text', 'root', 'color') // "text-root-color-default"
+ */
+declare function componentDefaultClass(componentName: string, layer: string, prop: string): string;
 /**
- * Build the compound-variant class name for a component slot.
+ * Build the compound-variant class name for a component layer.
  *
  * Conditions are sorted by key to guarantee a stable, deterministic name.
  *
@@ -21,6 +54,6 @@ declare function componentVariantClass(componentName: string, slot: string, axis
  * componentCompoundClass('Switch', 'root', { size: 'lg', color: 'primary' })
  * // "switch-root--color-primary_size-lg"
  */
-declare function componentCompoundClass(componentName: string, slot: string, conditions: Record<string, string>): string; //#endregion
+declare function componentCompoundClass(componentName: string, layer: string, conditions: Record<string, string>): string; //#endregion
 //#endregion
-export { componentCompoundClass, componentSlotClass, componentVariantClass };
+export { ComponentClassNames, componentClassNames, componentCompoundClass, componentDefaultClass, componentLayerClass, componentVariantClass };

package/dist/utils/dist/string-utils/componentClassName.js

@@ -1,23 +1,60 @@
 import { kebabCase } from "./kebabCase.js";
 //#region ../utils/dist/string-utils/componentClassName.js
 /**
-* Build the base class name for a component slot.
+* Prepend the configured prefix to a component class-name body, mirroring how
+* CSS variables are namespaced (`--<prefix>-…`). An empty prefix yields the
+* bare, unprefixed form — parallel to the CSS-variable path's empty-prefix
+* handling — so `prefix: ''` opts every component class out of namespacing.
+*/
+function withPrefix(prefix, body) {
+	return prefix ? `${prefix}-${body}` : body;
+}
+/**
+* Build the {@link ComponentClassNames} accessor set for a component, binding
+* `prefix` + `name` so callers supply only the per-class arguments. The prefix
+* is applied here (once), wrapping the unprefixed shape the helpers below
+* define — so the helpers stay the single definition of the class-name *shape*
+* and this factory is the single definition of *namespacing*.
+*/
+function componentClassNames(prefix, name) {
+	return {
+		layer: (layer) => withPrefix(prefix, componentLayerClass(name, layer)),
+		variant: (layer, axis, value) => withPrefix(prefix, componentVariantClass(name, layer, axis, value)),
+		defaultProp: (layer, prop) => withPrefix(prefix, componentDefaultClass(name, layer, prop)),
+		compound: (layer, conditions) => withPrefix(prefix, componentCompoundClass(name, layer, conditions))
+	};
+}
+/**
+* Build the base class name for a component layer.
 *
-* @example componentSlotClass('Switch', 'root') // "switch-root"
+* @example componentLayerClass('Switch', 'root') // "switch-root"
 */
-function componentSlotClass(componentName, slot) {
-	return `${kebabCase(componentName)}-${slot}`;
+function componentLayerClass(componentName, layer) {
+	return `${kebabCase(componentName)}-${layer}`;
 }
 /**
-* Build the variant class name for a component slot.
+* Build the variant class name for a component layer.
 *
 * @example componentVariantClass('Switch', 'root', 'size', 'lg') // "switch-root--size-lg"
 */
-function componentVariantClass(componentName, slot, axis, value) {
-	return `${kebabCase(componentName)}-${slot}--${axis}-${value}`;
+function componentVariantClass(componentName, layer, axis, value) {
+	return `${kebabCase(componentName)}-${layer}--${axis}-${value}`;
+}
+/**
+* Build the class name carrying a component's own `defaultProps` styling for a
+* prop, on a layer. Emitted in `@layer base` (so it loses to an embedding
+* component's anatomy in `@layer components`) and applied by the generated impl
+* only when the prop is absent — so an embedded sub-component's default
+* `variant`/`color` no longer overrides the parent's anatomy, while an explicit
+* prop still wins via its atomic/variant class in a later layer.
+*
+* @example componentDefaultClass('Text', 'root', 'color') // "text-root-color-default"
+*/
+function componentDefaultClass(componentName, layer, prop) {
+	return `${kebabCase(componentName)}-${layer}-${prop}-default`;
 }
 /**
-* Build the compound-variant class name for a component slot.
+* Build the compound-variant class name for a component layer.
 *
 * Conditions are sorted by key to guarantee a stable, deterministic name.
 *
@@ -25,9 +62,9 @@ function componentVariantClass(componentName, slot, axis, value) {
 * componentCompoundClass('Switch', 'root', { size: 'lg', color: 'primary' })
 * // "switch-root--color-primary_size-lg"
 */
-function componentCompoundClass(componentName, slot, conditions) {
+function componentCompoundClass(componentName, layer, conditions) {
 	const suffix = Object.entries(conditions).sort(([a], [b]) => a.localeCompare(b)).map(([a, v]) => `${a}-${v}`).join("_");
-	return `${kebabCase(componentName)}-${slot}--${suffix}`;
+	return `${kebabCase(componentName)}-${layer}--${suffix}`;
 }
 //#endregion
-export { componentCompoundClass, componentSlotClass, componentVariantClass };
+export { componentClassNames, componentCompoundClass, componentDefaultClass, componentLayerClass, componentVariantClass };

package/dist/utils.d.ts

@@ -3,6 +3,7 @@ import { closestItem } from "./utils/dist/array-utils/closestItem.js";
 import { removeItem } from "./utils/dist/array-utils/removeItem.js";
 import { clamp } from "./utils/dist/math-utils/clamp.js";
 import { interpolate } from "./utils/dist/motion-utils/interpolate.js";
+import { resolveInterpolate, resolveMotionState } from "./utils/dist/motion-utils/resolveMotionState.js";
 import { entries } from "./utils/dist/object-utils/entries.js";
 import { flattenObj } from "./utils/dist/object-utils/flattenObj.js";
 import { fromEntries } from "./utils/dist/object-utils/fromEntries.js";
@@ -11,7 +12,7 @@ import { mapKeys } from "./utils/dist/object-utils/mapKeys.js";
 import { mapValues } from "./utils/dist/object-utils/mapValues.js";
 import { arrayToUnion } from "./utils/dist/string-utils/arrayToUnion.js";
 import { capitalize } from "./utils/dist/string-utils/capitalize.js";
-import { componentCompoundClass, componentSlotClass, componentVariantClass } from "./utils/dist/string-utils/componentClassName.js";
+import { ComponentClassNames, componentClassNames, componentCompoundClass, componentDefaultClass, componentLayerClass, componentVariantClass } from "./utils/dist/string-utils/componentClassName.js";
 import { createTemplate, interfaceTemplate, template, typeTemplate } from "./utils/dist/string-utils/createTemplate.js";
 import { KebabCase, kebabCase } from "./utils/dist/string-utils/kebabCase.js";
 import { CssVar, CssVarName, cssVar, cssVarDeclarations, cssVarName, safeTokenName } from "./utils/dist/string-utils/cssVar.js";
@@ -21,4 +22,4 @@ import { indent } from "./utils/dist/string-utils/indent.js";
 import { join } from "./utils/dist/string-utils/join.js";
 import { split } from "./utils/dist/string-utils/split.js";
 import { tsProperties, tsTypes } from "./utils/dist/string-utils/tsProperties.js";
-export { ComponentStyleDefaultsInput, CssVar, CssVarName, KebabCase, applyComponentStyleDefaults, arrayToUnion, capitalize, clamp, closestItem, componentCompoundClass, componentSlotClass, componentVariantClass, createTemplate, cssVar, cssVarDeclarations, cssVarName, cssVars, dedent, dedentTS, entries, flattenObj, fromEntries, indent, interfaceTemplate, interpolate, join, kebabCase, keys, mapKeys, mapValues, removeItem, safeTokenName, split, template, tsProperties, tsTypes, typeTemplate };
+export { ComponentClassNames, ComponentStyleDefaultsInput, CssVar, CssVarName, KebabCase, applyComponentStyleDefaults, arrayToUnion, capitalize, clamp, closestItem, componentClassNames, componentCompoundClass, componentDefaultClass, componentLayerClass, componentVariantClass, createTemplate, cssVar, cssVarDeclarations, cssVarName, cssVars, dedent, dedentTS, entries, flattenObj, fromEntries, indent, interfaceTemplate, interpolate, join, kebabCase, keys, mapKeys, mapValues, removeItem, resolveInterpolate, resolveMotionState, safeTokenName, split, template, tsProperties, tsTypes, typeTemplate };

package/dist/utils.js

@@ -3,6 +3,7 @@ import { closestItem } from "./utils/dist/array-utils/closestItem.js";
 import { removeItem } from "./utils/dist/array-utils/removeItem.js";
 import { clamp } from "./utils/dist/math-utils/clamp.js";
 import { interpolate } from "./utils/dist/motion-utils/interpolate.js";
+import { resolveInterpolate, resolveMotionState } from "./utils/dist/motion-utils/resolveMotionState.js";
 import { entries } from "./utils/dist/object-utils/entries.js";
 import { flattenObj } from "./utils/dist/object-utils/flattenObj.js";
 import { fromEntries } from "./utils/dist/object-utils/fromEntries.js";
@@ -12,7 +13,7 @@ import { mapValues } from "./utils/dist/object-utils/mapValues.js";
 import { arrayToUnion } from "./utils/dist/string-utils/arrayToUnion.js";
 import { capitalize } from "./utils/dist/string-utils/capitalize.js";
 import { kebabCase } from "./utils/dist/string-utils/kebabCase.js";
-import { componentCompoundClass, componentSlotClass, componentVariantClass } from "./utils/dist/string-utils/componentClassName.js";
+import { componentClassNames, componentCompoundClass, componentDefaultClass, componentLayerClass, componentVariantClass } from "./utils/dist/string-utils/componentClassName.js";
 import { createTemplate, interfaceTemplate, template, typeTemplate } from "./utils/dist/string-utils/createTemplate.js";
 import { cssVar, cssVarDeclarations, cssVarName, safeTokenName } from "./utils/dist/string-utils/cssVar.js";
 import { cssVars } from "./utils/dist/string-utils/cssVars.js";
@@ -22,4 +23,4 @@ import { join } from "./utils/dist/string-utils/join.js";
 import { split } from "./utils/dist/string-utils/split.js";
 import { tsProperties, tsTypes } from "./utils/dist/string-utils/tsProperties.js";
 import "./utils/dist/index.js";
-export { applyComponentStyleDefaults, arrayToUnion, capitalize, clamp, closestItem, componentCompoundClass, componentSlotClass, componentVariantClass, createTemplate, cssVar, cssVarDeclarations, cssVarName, cssVars, dedent, dedentTS, entries, flattenObj, fromEntries, indent, interfaceTemplate, interpolate, join, kebabCase, keys, mapKeys, mapValues, removeItem, safeTokenName, split, template, tsProperties, tsTypes, typeTemplate };
+export { applyComponentStyleDefaults, arrayToUnion, capitalize, clamp, closestItem, componentClassNames, componentCompoundClass, componentDefaultClass, componentLayerClass, componentVariantClass, createTemplate, cssVar, cssVarDeclarations, cssVarName, cssVars, dedent, dedentTS, entries, flattenObj, fromEntries, indent, interfaceTemplate, interpolate, join, kebabCase, keys, mapKeys, mapValues, removeItem, resolveInterpolate, resolveMotionState, safeTokenName, split, template, tsProperties, tsTypes, typeTemplate };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yahoo/uds-v5-wip",
-  "version": "1.61.0",
+  "version": "1.62.0",
   "description": "Universal Design System",
   "license": "MIT",
   "type": "module",
@@ -65,8 +65,8 @@
     "@babel/traverse": "^7.29.0",
     "@babel/types": "^7.29.0",
     "@modelcontextprotocol/sdk": "^1.27.1",
-    "@uds/cli": "npm:@yahoo/uds-v5-wip-cli@1.61.0",
-    "@uds/types": "npm:@yahoo/uds-v5-wip-types@1.61.0",
+    "@uds/cli": "npm:@yahoo/uds-v5-wip-cli@1.62.0",
+    "@uds/types": "npm:@yahoo/uds-v5-wip-types@1.62.0",
     "clsx": "^2.1.1",
     "react-day-picker": "^9.14.0",
     "unplugin": "^3.0.0",

package/dist/codegen/dist/loader/getLoaderArtifacts.js

@@ -1,2 +0,0 @@
-import "../../../utils/dist/index.js";
-import "../../../config/dist/index.js";

package/dist/config/dist/bindRender.d.ts

@@ -1,16 +0,0 @@
-import { LayerBundle, LayerInput } from "./component-config.js";
-
-//#region ../config/dist/bindRender.d.ts
-//#region src/bindRender.d.ts
-/**
- * Arguments handed to the user's render function. `props` is keyed by
- * the component's layer names; `children` is React's standard
- * children. Extra incoming props that aren't claimed by the config
- * arrive on the same object.
- */
-interface CreateComponentRenderArgs<TLayers extends Record<string, LayerInput>> {
-  props: { [K in keyof TLayers]: LayerBundle };
-  [key: string]: unknown;
-} //#endregion
-//#endregion
-export { CreateComponentRenderArgs };

package/dist/config/dist/bindRender.js

@@ -1,310 +0,0 @@
-import { buildStylePropClassName } from "./className.js";
-import { kebabCase } from "../../utils/dist/string-utils/kebabCase.js";
-import { componentCompoundClass, componentSlotClass, componentVariantClass } from "../../utils/dist/string-utils/componentClassName.js";
-import "../../utils/dist/index.js";
-import { getRegisteredComposite, getRegisteredStyleProp } from "./runtime-registry.js";
-//#region ../config/dist/bindRender.js
-/**
-* **NEW-API ONLY** — internal runtime for `defineComponent`-authored
-* configs. Binds a config to a React render function and walks the
-* `layers` / `props` blocks on every render to produce `LayerBundle`s.
-*
-* Does NOT touch any legacy `createComponent` / `defineComponents`
-* code path. The legacy `createComponent` factory lives in
-* `@uds/components` and has its own runtime (className composition
-* via `getStyles` / `processStyleProps`).
-*
-* Render-time behavior:
-*
-*  1. The framework walks each entry in `config.layers` and builds a
-*     `LayerBundle` per layer — a `className` string plus any HTML
-*     attrs / forwarded props. Primitive layers with `defaultProps`
-*     pick up the deterministic `componentName-layerName` @utility
-*     class (the same one codegen emits from those defaults).
-*
-*  2. Incoming JSX props are partitioned per the `props` config:
-*     style-prop bindings → contribute classes to a specific layer's
-*     bundle; composite bindings → expand to multiple layers' bundles;
-*     surface forwards → land verbatim on the target layer's bundle;
-*     bool/enum markers → contribute data-attrs or per-layer overrides.
-*
-*  3. The render function receives `{ props, children, ...rest }` where
-*     `props.<layer>` is the computed bundle for that layer and
-*     `...rest` carries any props that weren't claimed by the config.
-*
-* Exported surface: `bindRender` (consumed by `defineComponent.ts`).
-*/
-/**
-* Type-guard: a `StylePropMarker` is the helper-emitted binding with
-* `__kind: 'styleProp'`, `layer`, and `ref` (bare registered style-
-* prop name). Authored via `styleProp(ref).on(layer)`.
-*/
-function isStylePropMarker(binding) {
-	return typeof binding === "object" && binding !== null && binding.__kind === "styleProp" && typeof binding.ref === "string" && typeof binding.layer === "string";
-}
-/**
-* Type-guard: a `StringMarker` carries only `__kind: 'string'`.
-* Authored via `string()` — parallel to `bool()`, but the JSX value
-* is a string written verbatim into `data-<kebab-name>="<value>"` on
-* every layer's bundle.
-*/
-function isStringMarker(binding) {
-	return typeof binding === "object" && binding !== null && binding.__kind === "string";
-}
-/**
-* Type-guard: an `EnumMarker` carries the `__kind: 'enum'` brand and a
-* `values` map (axis-value → per-layer style map). Authored via
-* `enums({...})` in the `props` block of a verbose-form
-* `defineComponent` call.
-*/
-function isEnumMarker(binding) {
-	return typeof binding === "object" && binding !== null && binding.__kind === "enum";
-}
-/**
-* Type-guard: a `BoolMarker` carries only the `__kind: 'bool'` brand.
-* Authored via `bool()` in the `props` block (e.g. `loading: bool()`).
-*/
-function isBoolMarker(binding) {
-	return typeof binding === "object" && binding !== null && binding.__kind === "bool";
-}
-/**
-* Type-guard: a `SlotMarker` carries `__kind: 'slot'`, a `layer` name,
-* and optionally an `as` target. Authored via `slot('layer')` or
-* `slot('layer', { as: 'propName' })`.
-*/
-function isSlotMarker(binding) {
-	return typeof binding === "object" && binding !== null && binding.__kind === "slot" && typeof binding.layer === "string";
-}
-/**
-* Type-guard: a `CompositeMarker` carries `__kind: 'composite'` and a
-* brace-ref `ref` field pointing at a registered composite group.
-* Authored via `composite('{textVariant}')` in the `props` block —
-* the implicit-root-layer shorthand for composite bindings.
-*/
-function isCompositeMarker(binding) {
-	return typeof binding === "object" && binding !== null && binding.__kind === "composite" && typeof binding.ref === "string";
-}
-/**
-* Type-guard: a layer value is a component value (a `defineComponent`
-* result). Recognized by the `__config` brand attached to every bound
-* component. Stand-alone primitives (a `string` tag, `{ tag, attrs }`)
-* never carry `__config` so the discriminator is unambiguous.
-*/
-function isComposedComponentValue(value) {
-	return typeof value === "function" && "__config" in value;
-}
-/**
-* Append a className to a layer bundle, joining with a space if a class
-* was already accumulated. Empty / falsy contributions are dropped.
-*/
-function appendClassName(bundle, className) {
-	if (!className) return;
-	const existing = bundle.className;
-	bundle.className = existing ? `${existing} ${className}` : className;
-}
-/**
-* Build an initial `LayerBundle` for a layer.
-*
-*  - `PrimitiveLayer.attrs` — locked HTML attrs (`role="alert"`,
-*    `aria-live="polite"`, …) seeded onto the bundle so the rendered
-*    element carries them.
-*  - Bare-tag string layers (`'div'`), bare component-value layers
-*    (`{ root: Card }`) — bundle starts empty; per-layer base styles
-*    come from the config's top-level `base: { <layer>: {...} }`
-*    block in a later pass.
-*/
-function buildLayerBundle(layer, _layerName, _componentName) {
-	const bundle = {};
-	if (layer === null || layer === void 0) return bundle;
-	if (isComposedComponentValue(layer)) return bundle;
-	if (typeof layer !== "object") return bundle;
-	if ("tag" in layer) {
-		const { attrs } = layer;
-		if (attrs) for (const [key, value] of Object.entries(attrs)) bundle[key] = value;
-	}
-	return bundle;
-}
-/**
-* Internal: bind a config to a render function and return a React.FC.
-* Shared by `createComponent` (public, type-explicit two-arg form) and
-* `defineComponent` (primitive auto-render + chained `.render()`).
-*/
-function bindRender(config, render, options) {
-	const Component = (incomingProps) => {
-		const componentName = config.__componentName;
-		const configDefaults = config.defaultProps;
-		const effectiveProps = configDefaults ? {
-			...configDefaults,
-			...incomingProps
-		} : incomingProps;
-		const bundles = {};
-		for (const [layerName, layerValue] of Object.entries(config.layers)) bundles[layerName] = buildLayerBundle(layerValue, layerName, componentName);
-		const baseBlock = config.base;
-		if (baseBlock && componentName) for (const layerName of Object.keys(baseBlock)) {
-			const target = bundles[layerName];
-			if (!target) continue;
-			appendClassName(target, componentSlotClass(componentName, layerName));
-		}
-		const claimedKeys = /* @__PURE__ */ new Set();
-		const propsBlock = config.props;
-		if (propsBlock) for (const [jsxPropKey, binding] of Object.entries(propsBlock)) {
-			const incoming = effectiveProps[jsxPropKey];
-			if (isStylePropMarker(binding)) {
-				claimedKeys.add(jsxPropKey);
-				if (incoming === void 0 || incoming === null || incoming === false) continue;
-				const styleProp = getRegisteredStyleProp(binding.ref);
-				if (!styleProp) continue;
-				const target = bundles[binding.layer];
-				if (!target) continue;
-				const className = buildStylePropClassName(styleProp, incoming);
-				if (className) appendClassName(target, className);
-				continue;
-			}
-			if (isEnumMarker(binding)) {
-				claimedKeys.add(jsxPropKey);
-				if (incoming === void 0 || incoming === null || !componentName) continue;
-				const valueKey = String(incoming);
-				const perLayerStyles = binding.values[valueKey];
-				if (typeof perLayerStyles !== "object" || perLayerStyles === null) continue;
-				for (const layerName of Object.keys(perLayerStyles)) {
-					const target = bundles[layerName];
-					if (!target) continue;
-					appendClassName(target, componentVariantClass(componentName, layerName, jsxPropKey, valueKey));
-				}
-				continue;
-			}
-			if (isSlotMarker(binding)) {
-				if (!binding.layer) continue;
-				claimedKeys.add(jsxPropKey);
-				if (incoming === void 0 || incoming === null) continue;
-				const target = bundles[binding.layer];
-				if (!target) continue;
-				target[binding.prop ?? "children"] = incoming;
-				continue;
-			}
-			if (isCompositeMarker(binding)) {
-				claimedKeys.add(jsxPropKey);
-				if (incoming === void 0 || incoming === null) continue;
-				const refName = binding.ref;
-				if (!refName) continue;
-				const composite = getRegisteredComposite(refName);
-				if (!composite) continue;
-				const valueKey = String(incoming);
-				if (!composite.styles[valueKey]) continue;
-				const rootBundle = bundles.root;
-				if (!rootBundle) continue;
-				appendClassName(rootBundle, `${refName}-${valueKey.replace(/\./g, "_").replace(/\//g, "-")}`);
-				continue;
-			}
-			if (isBoolMarker(binding)) {
-				claimedKeys.add(jsxPropKey);
-				if (!incoming) continue;
-				const attrName = `data-${kebabCase(jsxPropKey)}`;
-				for (const layerName of Object.keys(bundles)) {
-					const target = bundles[layerName];
-					if (target) target[attrName] = "true";
-				}
-				continue;
-			}
-			if (isStringMarker(binding)) {
-				claimedKeys.add(jsxPropKey);
-				if (incoming === void 0 || incoming === null || incoming === "") continue;
-				const attrName = `data-${kebabCase(jsxPropKey)}`;
-				const attrValue = String(incoming);
-				for (const layerName of Object.keys(bundles)) {
-					const target = bundles[layerName];
-					if (target) target[attrName] = attrValue;
-				}
-			}
-		}
-		const compoundProps = config.compoundProps;
-		if (compoundProps && componentName) for (const entry of compoundProps) {
-			const conditions = {};
-			let match = true;
-			for (const [conditionKey, conditionValue] of Object.entries(entry.when)) {
-				const incoming = effectiveProps[conditionKey];
-				if (incoming === void 0 || incoming === null) {
-					match = false;
-					break;
-				}
-				const incomingStr = String(incoming);
-				if (incomingStr !== String(conditionValue)) {
-					match = false;
-					break;
-				}
-				conditions[conditionKey] = incomingStr;
-			}
-			if (!match) continue;
-			for (const [layerName, layerOverride] of Object.entries(entry.layers)) {
-				const target = bundles[layerName];
-				if (!target) continue;
-				if (layerOverride?.__kind === "hidden") {
-					target.__hidden = true;
-					continue;
-				}
-				appendClassName(target, componentCompoundClass(componentName, layerName, conditions));
-			}
-		}
-		const layerPropsValue = effectiveProps.layerProps;
-		if (typeof layerPropsValue === "object" && layerPropsValue !== null && !Array.isArray(layerPropsValue)) {
-			claimedKeys.add("layerProps");
-			for (const [layerName, overrides] of Object.entries(layerPropsValue)) {
-				if (typeof overrides !== "object" || overrides === null || Array.isArray(overrides)) continue;
-				const bundle = bundles[layerName];
-				if (!bundle) continue;
-				for (const [propKey, propValue] of Object.entries(overrides)) {
-					if (propKey.startsWith("_")) {
-						if (typeof propValue !== "object" || propValue === null) continue;
-						const variantName = propKey.slice(1);
-						for (const [innerKey, innerValue] of Object.entries(propValue)) {
-							const styleProp = getRegisteredStyleProp(innerKey);
-							if (!styleProp) continue;
-							const className = buildStylePropClassName(styleProp, innerValue);
-							if (className) appendClassName(bundle, `${variantName}:${className}`);
-						}
-						continue;
-					}
-					const styleProp = getRegisteredStyleProp(propKey);
-					if (styleProp) {
-						if (propValue === void 0 || propValue === null || propValue === false) continue;
-						const className = buildStylePropClassName(styleProp, propValue);
-						if (className) appendClassName(bundle, className);
-						continue;
-					}
-					if (propKey === "className" && typeof propValue === "string") {
-						appendClassName(bundle, propValue);
-						continue;
-					}
-					bundle[propKey] = propValue;
-				}
-			}
-		}
-		const rootBundleForMods = bundles.root;
-		for (const [key, value] of Object.entries(effectiveProps)) {
-			if (!key.startsWith("_")) continue;
-			if (claimedKeys.has(key)) continue;
-			claimedKeys.add(key);
-			if (!rootBundleForMods) continue;
-			if (typeof value !== "object" || value === null) continue;
-			const variantName = key.slice(1);
-			for (const [innerKey, innerValue] of Object.entries(value)) {
-				const styleProp = getRegisteredStyleProp(innerKey);
-				if (!styleProp) continue;
-				const baseClass = buildStylePropClassName(styleProp, innerValue);
-				if (!baseClass) continue;
-				appendClassName(rootBundleForMods, `${variantName}:${baseClass}`);
-			}
-		}
-		const passthrough = {};
-		for (const [key, value] of Object.entries(effectiveProps)) if (!claimedKeys.has(key)) passthrough[key] = value;
-		return render({
-			...passthrough,
-			props: bundles
-		});
-	};
-	const displayName = options?.displayName || render.displayName || render.name?.trim() || void 0;
-	if (displayName) Component.displayName = displayName;
-	return Component;
-}
-//#endregion
-export { bindRender };