@yahoo/uds-create-config 5.47.0 → 5.48.0

package/dist/entities/system/Component.js

@@ -1699,7 +1699,7 @@ const componentFields = z.strictObject({
 	/**
 	* What the RENDER knows and a style rule keys on — the field has a value, the image loaded, the
 	* indicator is sliding. Not props: a caller never passes one, so none is part of the component's
-	* API. The render passes them to `states(props, { … })` and spreads the layers it hands back;
+	* API. The render passes them to `states(_props, { … })` and spreads the layers it hands back;
 	* the rules naming one follow the values given, and the root carries each as a `data-<name>`
 	* attribute. Studio and tests force one through the module's internal channel, never a prop.
 	*/
@@ -1707,7 +1707,7 @@ const componentFields = z.strictObject({
 		type: z.literal("variant"),
 		value: z.array(z.string()).min(1),
 		default: z.string().optional()
-	})])).optional().describe("What the render knows and a style rule keys on, by name: `{ \"filled\": { \"type\": \"boolean\" } }`, or `{ \"phase\": { \"type\": \"variant\", \"value\": [\"idle\", \"sliding\"], \"default\": \"idle\" } }`. Not props, so not part of the component's API: the render passes its `props` and the values it knows to `const layers = states(props, { filled: value !== \"\" })` and spreads those layers (`{...layers.root}`) instead of `props`; a rule naming a state in `when` (`{ \"filled\": true }`, `{ \"phase\": \"sliding\" }`) is tested against the values given, and the root carries each as a `data-<name>` attribute. A value a caller controls is a prop instead, which the render reports the state from."),
+	})])).optional().describe("What the render knows and a style rule keys on, by name: `{ \"filled\": { \"type\": \"boolean\" } }`, or `{ \"phase\": { \"type\": \"variant\", \"value\": [\"idle\", \"sliding\"], \"default\": \"idle\" } }`. Not props, so not part of the component's API: the render takes its own as `props: _props`, passes them and the values it knows to `const props = states(_props, { filled: value !== \"\" })`, and spreads those layers (`{...props.root}`); a rule naming a state in `when` (`{ \"filled\": true }`, `{ \"phase\": \"sliding\" }`) is tested against the values given, and the root carries each as a `data-<name>` attribute. A value a caller controls is a prop instead, which the render reports the state from."),
 	/**
 	* Which layers' element props this component also exposes — see {@link Forward}.
 	*

package/dist/entities/system/defineComponent.d.ts

@@ -432,7 +432,20 @@ type DeclaredProps<P, L extends LayerMap = LayerMap, Self = unknown, View extend
 type RoutedValueOf<L extends LayerMap, D, Self = unknown, K extends PropertyKey = never, View extends SlotView = 'consumer'> = D extends {
   type: 'forward';
   text: true;
-} ? string : [ForwardPath<D>] extends [never] ? ValueOf<D, Self, K, View> : ForwardPath<D> extends `${infer Layer}/${infer Prop}` ? Prop extends 'children' ? ReactNode : Layer extends keyof L ? Prop extends keyof ElementPropsOf<L[Layer]> ? ElementPropsOf<L[Layer]>[Prop] : unknown : unknown : ValueOf<D, Self, K, View>;
+} ? string : [ForwardPath<D>] extends [never] ? ValueOf<D, Self, K, View> : D extends {
+  target: readonly (infer Path extends string)[];
+} ? Unboxed<AllOf<Path extends string ? {
+  value: RouteValueOf<L, Path, D, Self, K, View>;
+} : never>> : RouteValueOf<L, ForwardPath<D>, D, Self, K, View>;
+/** What one `layer/prop` route takes: the layer element's prop, its React props for a tag and its
+ *  declared ones for a component; content for `children`. */
+type RouteValueOf<L extends LayerMap, Path, D, Self, K extends PropertyKey, View extends SlotView> = Path extends `${infer Layer}/${infer Prop}` ? Prop extends 'children' ? ReactNode : Layer extends keyof L ? Prop extends keyof ElementPropsOf<L[Layer]> ? ElementPropsOf<L[Layer]>[Prop] : unknown : unknown : ValueOf<D, Self, K, View>;
+type Unboxed<Box> = Box extends {
+  value: infer Value;
+} ? Value : never;
+/** The intersection of a union's members. Each route's type is boxed (`{ value }`) before it goes in,
+ *  so a route that takes `boolean | undefined` stays one member rather than three. */
+type AllOf<U> = (U extends unknown ? (value: U) => void : never) extends ((value: infer Every) => void) ? Every : never;
 /**
  * The props the rendered ELEMENT contributes, `ref` included.
  *
@@ -676,11 +689,12 @@ type StateValues<S> = { [K in keyof S]?: S[K] extends {
   value: readonly (infer V)[];
 } ? V : boolean };
 /**
- * How a render reports its states — `const layers = states(props, { filled: value !== '' })` — and
- * spreads the bundles it hands back: `<Box {...layers.root}>`.
+ * How a render reports its states — `.render(({ props: _props, states }) => { const props =
+ * states(_props, { filled: value !== '' }); … })` — and spreads the bundles it hands back as it would
+ * the render's own: `<Box {...props.root}>`.
  *
- * A pure call, not a hook, so it can sit under a condition. It takes the render's `props` (the
- * bundles at rest, or as Studio or a test forced them) and returns the bundles BUILT FOR those
+ * A pure call, not a hook, so it can sit under a condition. It takes the bundles the render was
+ * handed (at rest, or as Studio or a test forced them) and returns the bundles BUILT FOR those
  * states, a fresh set: every rule naming a state, a prop a rule sets on a layer, the root's
  * `data-<name>` attribute, a portal layer and a nested instance all follow the values given. A
  * forced value still wins over them.
@@ -748,7 +762,8 @@ F extends string = never, /** The states `.states()` declared — what the rende
    * ['idle', 'sliding'], default: 'idle' } }`.
    *
    * Not props, so not part of the component's API: the render passes its `props` and the values it
-   * knows to `const layers = states(props, { filled })` and spreads those layers in `props`' place;
+   * knows to `const props = states(_props, { filled })`, having taken its own as `props: _props`, and
+   * spreads those layers as `props`;
    * a rule naming a state in `when` follows the values given. A value a caller controls is a prop;
    * the render reports the state from it.
    */

package/dist/entities/system/forward-route-invariants.js

@@ -2,7 +2,7 @@ import { isRef, pathOf } from "../../framework/utils/refs.js";
 import { createSliceMemo } from "../../framework/memo.js";
 import { isPlainRecord } from "./style-bag.js";
 import { stylePropEntries } from "../../framework/projections.js";
-import { forwardRoutes, intoName, routedPropIn, routesContent } from "../../framework/prop-surface.js";
+import { forwardRoutes, intoName, routeEnd, routesContent } from "../../framework/prop-surface.js";
 //#region src/entities/system/forward-route-invariants.ts
 /**
 * Why a forward with several routes can't take them, or `undefined` when it can. Every route has to
@@ -21,23 +21,34 @@ function refusedRoutes(config, layers, decl) {
 	}
 	if (routes.some((route) => routesContent(config, layers, route))) return `A forward that carries content takes one route: the same content can't fill ${routes.map(spelled).join(" and ")}. Route a value (a variant, a string) to several layers, or give each layer its own slot.`;
 	const landing = (route) => {
-		const routed = routedPropIn(config, layers, route);
-		if (!routed) return "attribute";
+		const routed = routeEnd(config, layers, route)?.decl;
+		if (!routed) return void 0;
 		const styleProperty = routed.type === "styleProperty" && isRef(routed.value) ? pathOf(routed.value.__ref) : void 0;
 		if (styleProperty !== void 0) return JSON.stringify({
 			type: routed.type,
 			domain: stylePropertyDomain(config, styleProperty)
 		});
+		if (routed.type && SCALAR_TYPES.has(routed.type)) return JSON.stringify({ type: routed.type });
 		return JSON.stringify({
 			type: routed.type,
 			value: routed.value
 		});
 	};
-	const [first, ...rest] = routes;
+	const [first, ...rest] = routes.flatMap((route) => {
+		const landed = landing(route);
+		return landed === void 0 ? [] : [{
+			route,
+			landed
+		}];
+	});
 	if (!first) return void 0;
-	const expected = landing(first);
-	for (const route of rest) if (landing(route) !== expected) return `${spelled(route)} takes different values than ${spelled(first)}, and a forward writes one value to every route. Route it only to props that take the same values, or declare a second prop.`;
+	for (const { route, landed } of rest) if (landed !== first.landed) return `${spelled(route)} takes different values than ${spelled(first.route)}, and a forward writes one value to every route. Route it only to props that take the same values, or declare a second prop.`;
 }
+const SCALAR_TYPES = new Set([
+	"boolean",
+	"string",
+	"number"
+]);
 /**
 * What a style property takes, as one comparable value: each leaf with the token or literal it names,
 * and whether it also takes an off-scale literal. Two properties with the same domain accept exactly

package/dist/framework/prop-surface.js

@@ -544,4 +544,4 @@ function renderBoundProp(value) {
 	return name.length > 0 && !name.includes("/") ? name : void 0;
 }
 //#endregion
-export { carriesContent, codeSlotsOf, forwardClaims, forwardRoutes, forwardedLayers, glyphVariantProp, intoName, isValueSlot, layerPropRoutes, ownTextProp, propApplies, propRegistryRef, renderBindingsOf, renderBoundProp, routedProp, routedPropIn, routesContent, routesIntoText, slotCodeForms, standsInForCode, surfaceProp, surfaceProps };
+export { carriesContent, codeSlotsOf, forwardClaims, forwardRoutes, forwardedLayers, glyphVariantProp, intoName, isValueSlot, layerPropRoutes, ownTextProp, propApplies, propRegistryRef, renderBindingsOf, renderBoundProp, routeEnd, routedProp, routedPropIn, routesContent, routesIntoText, slotCodeForms, standsInForCode, surfaceProp, surfaceProps };

package/dist/native/index.d.ts

@@ -0,0 +1,25 @@
+import * as _$react from "react";
+import { ReactNode } from "react";
+import { ColorValue } from "react-native";
+
+//#region src/native/index.d.ts
+/**
+ * Publish a container's final, resolved foreground. An absent color or `inherit` passes through
+ * the enclosing foreground. Resolve style arrays and interaction callbacks before calling this;
+ * the provider does not select tokens, modes or states, or add a native host element.
+ */
+declare function NativeForegroundProvider({
+  color,
+  children
+}: {
+  color?: ColorValue | null;
+  children?: ReactNode;
+}): _$react.FunctionComponentElement<_$react.ProviderProps<ColorValue | undefined>>;
+/**
+ * Resolve only an explicit `inherit`. Defaults, explicit colors and native opaque colors retain
+ * their identity. Without a provider, inheritance becomes undefined (never an invalid native
+ * `inherit` value). Call this in a component, not inside a Pressable render callback.
+ */
+declare function useNativeForeground(color: ColorValue | undefined): ColorValue | undefined;
+//#endregion
+export { NativeForegroundProvider, useNativeForeground };

package/dist/native/index.js

@@ -0,0 +1,23 @@
+import { createContext, createElement, useContext } from "react";
+//#region src/native/index.ts
+const ForegroundContext = createContext(void 0);
+/**
+* Publish a container's final, resolved foreground. An absent color or `inherit` passes through
+* the enclosing foreground. Resolve style arrays and interaction callbacks before calling this;
+* the provider does not select tokens, modes or states, or add a native host element.
+*/
+function NativeForegroundProvider({ color, children }) {
+	const parent = useContext(ForegroundContext);
+	return createElement(ForegroundContext.Provider, { value: color == null || color === "inherit" ? parent : color }, children);
+}
+/**
+* Resolve only an explicit `inherit`. Defaults, explicit colors and native opaque colors retain
+* their identity. Without a provider, inheritance becomes undefined (never an invalid native
+* `inherit` value). Call this in a component, not inside a Pressable render callback.
+*/
+function useNativeForeground(color) {
+	const parent = useContext(ForegroundContext);
+	return color === "inherit" ? parent : color;
+}
+//#endregion
+export { NativeForegroundProvider, useNativeForeground };