@yahoo/uds-create-config 5.17.6 → 5.18.0

package/dist/configs/build-options.d.ts

@@ -7,7 +7,8 @@ declare const BUILD_DEFAULTS: {
   readonly registryDir: "src/uds/registry"; /** Where a system that declares no `inputDir` keeps its sources, for what sits beside them. */
   readonly inputRoot: "src/uds"; /** The prefix a system's sources are imported by: `@/uds/components/card`. */
   readonly sourceAlias: "@/uds"; /** The prefix its build output is imported by: `#uds/components/card`. */
-  readonly outputAlias: "#uds";
+  readonly outputAlias: "#uds"; /** The React major the app runs, which decides how an emitted component takes its `ref`. */
+  readonly react: 19;
 };
 //#endregion
 export { BUILD_DEFAULTS };

package/dist/configs/build-options.js

@@ -34,7 +34,9 @@ const BUILD_DEFAULTS = {
 	/** The prefix a system's sources are imported by: `@/uds/components/card`. */
 	sourceAlias: "@/uds",
 	/** The prefix its build output is imported by: `#uds/components/card`. */
-	outputAlias: "#uds"
+	outputAlias: "#uds",
+	/** The React major the app runs, which decides how an emitted component takes its `ref`. */
+	react: 19
 };
 const buildFields = z.strictObject({
 	/**
@@ -113,6 +115,21 @@ const buildFields = z.strictObject({
 		title: "Registry directory",
 		description: `Where \`uds install\` places the sources of linked systems, relative to the config. Unset, \`registry/\` beside the system's components: \`${BUILD_DEFAULTS.registryDir}\` unless \`inputDir\` names another root.`,
 		default: BUILD_DEFAULTS.registryDir
+	}).optional(),
+	/**
+	* The React major the app this repo builds for runs — see `appBuildReact` in the CLI.
+	*
+	* React 19 hands a function component its call site's `ref` as a prop, and every emitted module
+	* relies on that: the ref rides the props bag onto the root like any other attribute. React 18
+	* strips it before the component runs, so for 18 each web module is wrapped in `forwardRef` and the
+	* ref goes back into the bag. Declared rather than detected from the installed React, so a build
+	* says the same thing on every machine. Only a repo's own `uds build` and `uds dev` read it; what
+	* Create builds runs on Create's React.
+	*/
+	react: z.union([z.literal(18), z.literal(19)]).meta({
+		title: "React version",
+		description: `The React major the app this repo builds for runs. \`18\` wraps each emitted web component in \`forwardRef\`, so a call site's \`ref\` reaches its element. Unset, \`${BUILD_DEFAULTS.react}\`.`,
+		default: BUILD_DEFAULTS.react
 	}).optional()
 });
 //#endregion

package/dist/configs/react-native-system.d.ts

@@ -39,6 +39,7 @@ declare const ReactNativeSystemDefinition: ConfigClass<{
       sourceAlias: _$zod.ZodOptional<_$zod.ZodString>;
       outputAlias: _$zod.ZodOptional<_$zod.ZodString>;
       registryDir: _$zod.ZodOptional<_$zod.ZodString>;
+      react: _$zod.ZodOptional<_$zod.ZodUnion<readonly [_$zod.ZodLiteral<18>, _$zod.ZodLiteral<19>]>>;
     }, _$zod_v4_core0.$strict>>;
     css: _$zod.ZodOptional<_$zod.ZodObject<{
       prefix: _$zod.ZodOptional<_$zod.ZodUnion<readonly [_$zod.ZodString, _$zod.ZodObject<{

package/dist/configs/system.js

@@ -60,6 +60,7 @@ import { systemIncludeMigration } from "../migrations/20261005225949_system_incl
 import { motionVariantsAndLayoutMigration } from "../migrations/20261006125609_motion_variants_and_layout.js";
 import { systemScriptsMigration } from "../migrations/20261007182932_system_scripts.js";
 import { styleNumbersNameNumericValuesMigration } from "../migrations/20261007210309_style_numbers_name_numeric_values.js";
+import { buildReactMigration } from "../migrations/20261008181849_build_react.js";
 const System = defineConfig({
 	name: WEB_CONFIG_NAME,
 	description: "A design system: the values, primitives and compositions an app is built from. A ref is written `{ \"__ref\": \"<kind>:<path>\" }`, so a token is `{ \"__ref\": \"token:<group>/<name>\" }` and a token group is `{ \"__ref\": \"token:<group>\" }`. Build it in this order. Tokens first, in groups by purpose (colors, spacing, radii, type sizes), since everything else names them. Then style properties, each with `values` holding one ref to the token group whose members it accepts (`{ \"__ref\": \"token:color\" }`), so a prop takes token names rather than raw CSS; add a string keyword only for a value no token holds. A style rule's bag holds a prop's values (`\"padding\": \"4\"`, `\"bg\": \"brand\"`), never raw CSS. Then a few primitive components, one layer each, whose props are style properties (a box for layout and surface, a text for type, a pressable for interaction). Then every other component composed from those primitives: its layers name a primitive or an element, its anatomy places them (a node renders a layer, a tag or `Slot` where a slot prop's content lands; `children` is the edge list; `visible` is `{ \"$state\": \"<prop>\" }`; a prop shown in a nested layer is a `forward` route, and `$state` never sits in a node's props), and its style rules set style-property values per layer, keyed by prop values when a variant changes them. Modes (a dark mode is `{ type: \"selector\", value: \".dark\" }`) change token values through a token's `overrides`, so a component never restyles for a mode; modifiers (hover, focus, disabled) name a state, and a style rule applies under one as a `_hover` block inside a layer bag. Composites bundle style values that recur. Last, register canvas roles: the canvas draws with them, one entity per tool (`frame` for the layout primitive, `text` for the text primitive, `image`) whose entries name the components that tool inserts, and a tool whose role is unregistered is disabled. Give each component a `preview` entry under `*` so it shows content, and never write a CSS property name where a style-property name belongs.",
@@ -131,5 +132,6 @@ if (!registeredSchemaMigrations().has(20261005225949)) registerSchemaMigrations(
 if (!registeredSchemaMigrations().has(20261006125609)) registerSchemaMigrations(motionVariantsAndLayoutMigration);
 if (!registeredSchemaMigrations().has(20261007182932)) registerSchemaMigrations(systemScriptsMigration);
 if (!registeredSchemaMigrations().has(20261007210309)) registerSchemaMigrations(styleNumbersNameNumericValuesMigration);
+if (!registeredSchemaMigrations().has(20261008181849)) registerSchemaMigrations(buildReactMigration);
 //#endregion
 export { System };

package/dist/entities/native/NativeSettings.d.ts

@@ -30,6 +30,7 @@ declare const NativeSettings: EntityClass<z.ZodObject<Omit<{
     sourceAlias: z.ZodOptional<z.ZodString>;
     outputAlias: z.ZodOptional<z.ZodString>;
     registryDir: z.ZodOptional<z.ZodString>;
+    react: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<18>, z.ZodLiteral<19>]>>;
   }, z.core.$strict>>;
   css: z.ZodOptional<z.ZodObject<{
     prefix: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodObject<{

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

@@ -23,6 +23,7 @@ declare const BuildSectionDefinition: SubEntityClass<z.ZodObject<{
   sourceAlias: z.ZodOptional<z.ZodString>;
   outputAlias: z.ZodOptional<z.ZodString>;
   registryDir: z.ZodOptional<z.ZodString>;
+  react: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<18>, z.ZodLiteral<19>]>>;
 }, z.core.$strict>>;
 interface BuildSectionClass extends Named<typeof BuildSectionDefinition> {}
 declare const BuildSection: BuildSectionClass;
@@ -105,6 +106,7 @@ declare const SettingsDefinition: EntityClass<z.ZodObject<{
     sourceAlias: z.ZodOptional<z.ZodString>;
     outputAlias: z.ZodOptional<z.ZodString>;
     registryDir: z.ZodOptional<z.ZodString>;
+    react: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<18>, z.ZodLiteral<19>]>>;
   }, z.core.$strict>>;
   css: z.ZodOptional<z.ZodObject<{
     prefix: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodObject<{

package/dist/framework/Config.d.ts

@@ -73,7 +73,7 @@ interface RecordedSource {
  * The dense-counter `2` a short-lived scheme stamped before the chain existed reads as the mint
  * that replaced it (see `detectedWireVersion`).
  */
-declare const SERIALIZED_CONFIG_VERSION = 20261007210309;
+declare const SERIALIZED_CONFIG_VERSION = 20261008181849;
 interface SerializedConfig {
   /** See {@link SERIALIZED_CONFIG_VERSION}. Always written; a stored artifact may lack it. */
   readonly version: number;

package/dist/framework/Config.js

@@ -5425,7 +5425,7 @@ var Config = class Config {
 	*  links from the provided sources. A declared `linkedKind` with no provided source throws. */
 	hydrateFrom(stored, options) {
 		const claimed = schemaVersionOf(stored);
-		if (claimed > 20261007210309) throw new SchemaVersionTooNew(claimed);
+		if (claimed > 20261008181849) throw new SchemaVersionTooNew(claimed);
 		const wire = upgradeSerializedConfig(stored);
 		if (!Array.isArray(wire.ownedKinds) || typeof wire.items !== "object" || wire.items === null) throw new ConfigFormatError(`Config "${stored.name ?? "system-config"}" cannot be hydrated: this is not a serialized config-v2 config (no "ownedKinds"/"items"). A pre-cutover build artifact converts through the registered cutover migration — import the config type's module (e.g. \`configs/system\`) before hydrating, or port the repo once with \`uds migrate\`.`);
 		const leftover = wire.options;

package/dist/framework/schema-version.d.ts

@@ -15,7 +15,7 @@ import { Patch, SerializedConfig } from "./Config.js";
  * sets this constant to its own older timestamp; the merge ref then carries a registered migration
  * newer than the constant, and the assertion fails until the author re-mints.
  */
-declare const CURRENT_SCHEMA_VERSION = 20261007210309;
+declare const CURRENT_SCHEMA_VERSION = 20261008181849;
 /** What the walkers need to see of an envelope — loose on purpose, so a typed `SerializedConfig`
  *  and a raw old-shape record both flow in without casts. */
 interface VersionStamped {

package/dist/framework/schema-version.js

@@ -13,7 +13,7 @@ import { ConfigFormatError } from "./rejection.js";
 * sets this constant to its own older timestamp; the merge ref then carries a registered migration
 * newer than the constant, and the assertion fails until the author re-mints.
 */
-const CURRENT_SCHEMA_VERSION = 20261007210309;
+const CURRENT_SCHEMA_VERSION = 20261008181849;
 /** The mint that moved `options` into the `settings` kind — restated here, rather than imported
 *  from the migration that owns it, because that migration imports this module. */
 const SETTINGS_AS_KIND_VERSION = 20260908171448;
@@ -45,7 +45,7 @@ function registerSchemaMigrations(...migrations) {
 	for (const migration of migrations) {
 		if (migration.version !== 1 && !isMintTimestamp(migration.version)) throw new Error(`Schema migration version ${migration.version} is not a mint timestamp — mint one with \`date +%Y%m%d%H%M%S\`, like a supabase migration.`);
 		if (REGISTERED.has(migration.version)) throw new Error(`A schema migration at version ${migration.version} is already registered.`);
-		if (migration.version > 20261007210309) throw new Error(`Schema migration ${migration.version} is newer than CURRENT_SCHEMA_VERSION (${CURRENT_SCHEMA_VERSION}) — a stale branch merged, or the mint forgot to bump the constant. Re-mint: set CURRENT_SCHEMA_VERSION to the newest migration version.`);
+		if (migration.version > 20261008181849) throw new Error(`Schema migration ${migration.version} is newer than CURRENT_SCHEMA_VERSION (${CURRENT_SCHEMA_VERSION}) — a stale branch merged, or the mint forgot to bump the constant. Re-mint: set CURRENT_SCHEMA_VERSION to the newest migration version.`);
 		REGISTERED.set(migration.version, migration);
 	}
 }
@@ -102,7 +102,7 @@ function pendingFor(version, target, options) {
 * Already-current input passes through untouched — same reference, so hot paths pay nothing.
 */
 function upgradeSerializedConfig(json, options) {
-	const target = options?.target ?? 20261007210309;
+	const target = options?.target ?? 20261008181849;
 	const version = detectedWireVersion(json);
 	if (version > target) throw new SchemaVersionTooNew(version, target);
 	const raw = json;
@@ -160,7 +160,7 @@ function upgradedSources(json, options) {
 * meaning under the current schema and replay skips it — reported by the caller, not swallowed here.
 */
 function upgradePatch(patch, writtenAt, options) {
-	const target = options?.target ?? 20261007210309;
+	const target = options?.target ?? 20261008181849;
 	if (writtenAt > target) throw new SchemaVersionTooNew(writtenAt, target);
 	let current = patch;
 	for (const migration of pendingFor(writtenAt, target, options)) {
@@ -179,7 +179,7 @@ function upgradePatch(patch, writtenAt, options) {
 * stamp would cause.
 */
 function upgradeDraftEntries(draft, options) {
-	const target = options?.target ?? 20261007210309;
+	const target = options?.target ?? 20261008181849;
 	const entries = [];
 	const held = [];
 	const retired = [];

package/dist/migrations/20261008181849_build_react.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Additions only, so the envelope passes through as it is:
+ *
+ * - A system's `settings.build` may name `react`: the React major (`18` or `19`) the app this repo
+ *   builds for runs. `18` has a local build wrap each emitted web component in `forwardRef`.
+ */
+import type { SchemaMigration } from '../framework/schema-version';
+export declare const BUILD_REACT_VERSION = 20261008181849;
+export declare const buildReactMigration: SchemaMigration;

package/dist/migrations/20261008181849_build_react.js

@@ -0,0 +1,10 @@
+//#region src/migrations/20261008181849_build_react.ts
+const BUILD_REACT_VERSION = 20261008181849;
+const buildReactMigration = {
+	version: BUILD_REACT_VERSION,
+	up(json) {
+		return json;
+	}
+};
+//#endregion
+export { BUILD_REACT_VERSION, buildReactMigration };

package/dist/renderer/runtimeComponent.js

@@ -112,18 +112,27 @@ function runtimeComponent(componentRef, scope) {
 		const rebuilding = status === "loading";
 		const failed = status === "failed";
 		const error = failed ? store?.error?.(componentRef) : void 0;
-		useEffect(() => store?.activate(componentRef), [store, rebuilding]);
+		useEffect(() => store?.activate(componentRef), [
+			store,
+			componentRef,
+			rebuilding
+		]);
 		useEffect(() => {
 			if (!reportRebuild || !rebuilding) return;
 			reportRebuild(componentRef, 1);
 			return () => reportRebuild(componentRef, -1);
-		}, [reportRebuild, rebuilding]);
+		}, [
+			reportRebuild,
+			componentRef,
+			rebuilding
+		]);
 		useEffect(() => {
 			if (!reportFailure || !failed) return;
 			reportFailure(componentRef, error, 1);
 			return () => reportFailure(componentRef, error, -1);
 		}, [
 			reportFailure,
+			componentRef,
 			failed,
 			error
 		]);