@yahoo/uds-create-config 3.0.6 → 3.0.8

package/dist/configs/CanvasConfig.d.ts

@@ -255,6 +255,10 @@ declare const Node: EntityClass<z.ZodObject<{
     anatomy: z.ZodOptional<SubEntityClass<z.ZodType<ComponentElementBody, unknown, z.core.$ZodTypeInternals<ComponentElementBody, unknown>>>>;
     defaultProps: z.ZodOptional<SubEntityClass<z.ZodType<StyleValue, unknown, z.core.$ZodTypeInternals<StyleValue, unknown>>>>;
     previewProps: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+    previewWhen: z.ZodOptional<z.ZodArray<z.ZodObject<{
+      when: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+      props: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+    }, z.core.$strip>>>;
     file: z.ZodOptional<z.ZodObject<{
       __ref: z.ZodString;
     }, z.core.$strip>>;
@@ -369,6 +373,10 @@ declare const Node: EntityClass<z.ZodObject<{
         anatomy: z.ZodOptional<SubEntityClass<z.ZodType<ComponentElementBody, unknown, z.core.$ZodTypeInternals<ComponentElementBody, unknown>>>>;
         defaultProps: z.ZodOptional<SubEntityClass<z.ZodType<StyleValue, unknown, z.core.$ZodTypeInternals<StyleValue, unknown>>>>;
         previewProps: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+        previewWhen: z.ZodOptional<z.ZodArray<z.ZodObject<{
+          when: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+          props: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+        }, z.core.$strip>>>;
         file: z.ZodOptional<z.ZodObject<{
           __ref: z.ZodString;
         }, z.core.$strip>>;
@@ -1113,6 +1121,10 @@ declare const CanvasConfig: ConfigClass<{
       anatomy: z.ZodOptional<SubEntityClass<z.ZodType<ComponentElementBody, unknown, z.core.$ZodTypeInternals<ComponentElementBody, unknown>>>>;
       defaultProps: z.ZodOptional<SubEntityClass<z.ZodType<StyleValue, unknown, z.core.$ZodTypeInternals<StyleValue, unknown>>>>;
       previewProps: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+      previewWhen: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        when: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+        props: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+      }, z.core.$strip>>>;
       file: z.ZodOptional<z.ZodObject<{
         __ref: z.ZodString;
       }, z.core.$strip>>;
@@ -1227,6 +1239,10 @@ declare const CanvasConfig: ConfigClass<{
           anatomy: z.ZodOptional<SubEntityClass<z.ZodType<ComponentElementBody, unknown, z.core.$ZodTypeInternals<ComponentElementBody, unknown>>>>;
           defaultProps: z.ZodOptional<SubEntityClass<z.ZodType<StyleValue, unknown, z.core.$ZodTypeInternals<StyleValue, unknown>>>>;
           previewProps: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+          previewWhen: z.ZodOptional<z.ZodArray<z.ZodObject<{
+            when: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+            props: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+          }, z.core.$strip>>>;
           file: z.ZodOptional<z.ZodObject<{
             __ref: z.ZodString;
           }, z.core.$strip>>;
@@ -2236,6 +2252,10 @@ declare function createCanvasConfig(system: AnySystemConfig): ConfigInstance<{
       anatomy: z.ZodOptional<SubEntityClass<z.ZodType<ComponentElementBody, unknown, z.core.$ZodTypeInternals<ComponentElementBody, unknown>>>>;
       defaultProps: z.ZodOptional<SubEntityClass<z.ZodType<StyleValue, unknown, z.core.$ZodTypeInternals<StyleValue, unknown>>>>;
       previewProps: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+      previewWhen: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        when: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+        props: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+      }, z.core.$strip>>>;
       file: z.ZodOptional<z.ZodObject<{
         __ref: z.ZodString;
       }, z.core.$strip>>;
@@ -2350,6 +2370,10 @@ declare function createCanvasConfig(system: AnySystemConfig): ConfigInstance<{
           anatomy: z.ZodOptional<SubEntityClass<z.ZodType<ComponentElementBody, unknown, z.core.$ZodTypeInternals<ComponentElementBody, unknown>>>>;
           defaultProps: z.ZodOptional<SubEntityClass<z.ZodType<StyleValue, unknown, z.core.$ZodTypeInternals<StyleValue, unknown>>>>;
           previewProps: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+          previewWhen: z.ZodOptional<z.ZodArray<z.ZodObject<{
+            when: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+            props: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+          }, z.core.$strip>>>;
           file: z.ZodOptional<z.ZodObject<{
             __ref: z.ZodString;
           }, z.core.$strip>>;

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

@@ -182,6 +182,10 @@ declare const ReactNativeSystem: ConfigClass<{
     anatomy: _$zod.ZodOptional<SubEntityClass<_$zod.ZodType<ComponentElementBody, unknown, _$zod_v4_core0.$ZodTypeInternals<ComponentElementBody, unknown>>>>;
     defaultProps: _$zod.ZodOptional<SubEntityClass<_$zod.ZodType<StyleValue, unknown, _$zod_v4_core0.$ZodTypeInternals<StyleValue, unknown>>>>;
     previewProps: _$zod.ZodOptional<_$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>>;
+    previewWhen: _$zod.ZodOptional<_$zod.ZodArray<_$zod.ZodObject<{
+      when: _$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>;
+      props: _$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>;
+    }, _$zod_v4_core0.$strip>>>;
     file: _$zod.ZodOptional<_$zod.ZodObject<{
       __ref: _$zod.ZodString;
     }, _$zod_v4_core0.$strip>>;
@@ -296,6 +300,10 @@ declare const ReactNativeSystem: ConfigClass<{
         anatomy: _$zod.ZodOptional<SubEntityClass<_$zod.ZodType<ComponentElementBody, unknown, _$zod_v4_core0.$ZodTypeInternals<ComponentElementBody, unknown>>>>;
         defaultProps: _$zod.ZodOptional<SubEntityClass<_$zod.ZodType<StyleValue, unknown, _$zod_v4_core0.$ZodTypeInternals<StyleValue, unknown>>>>;
         previewProps: _$zod.ZodOptional<_$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>>;
+        previewWhen: _$zod.ZodOptional<_$zod.ZodArray<_$zod.ZodObject<{
+          when: _$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>;
+          props: _$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>;
+        }, _$zod_v4_core0.$strip>>>;
         file: _$zod.ZodOptional<_$zod.ZodObject<{
           __ref: _$zod.ZodString;
         }, _$zod_v4_core0.$strip>>;
@@ -874,6 +882,7 @@ declare const ReactNativeSystem: ConfigClass<{
       overflow: "overflow";
       padding: "padding";
       width: "width";
+      fontFamily: "fontFamily";
       alignContent: "alignContent";
       alignItems: "alignItems";
       alignSelf: "alignSelf";
@@ -925,7 +934,6 @@ declare const ReactNativeSystem: ConfigClass<{
       flexGrow: "flexGrow";
       flexShrink: "flexShrink";
       flexWrap: "flexWrap";
-      fontFamily: "fontFamily";
       fontSize: "fontSize";
       fontStyle: "fontStyle";
       fontVariant: "fontVariant";
@@ -1041,6 +1049,7 @@ declare const ReactNativeSystem: ConfigClass<{
       postscriptName: _$zod.ZodOptional<_$zod.ZodString>;
     }, _$zod_v4_core0.$strip>>>;
     fallbackStack: _$zod.ZodOptional<_$zod.ZodArray<_$zod.ZodString>>;
+    variable: _$zod.ZodOptional<_$zod.ZodString>;
     isVariableFont: _$zod.ZodOptional<_$zod.ZodBoolean>;
   }, _$zod_v4_core0.$strict>, _$zod.ZodObject<{
     version: _$zod.ZodOptional<_$zod.ZodString>;
@@ -1676,6 +1685,10 @@ declare const ReactNativeSystem: ConfigClass<{
       anatomy: _$zod.ZodOptional<SubEntityClass<_$zod.ZodType<ComponentElementBody, unknown, _$zod_v4_core0.$ZodTypeInternals<ComponentElementBody, unknown>>>>;
       defaultProps: _$zod.ZodOptional<SubEntityClass<_$zod.ZodType<StyleValue, unknown, _$zod_v4_core0.$ZodTypeInternals<StyleValue, unknown>>>>;
       previewProps: _$zod.ZodOptional<_$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>>;
+      previewWhen: _$zod.ZodOptional<_$zod.ZodArray<_$zod.ZodObject<{
+        when: _$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>;
+        props: _$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>;
+      }, _$zod_v4_core0.$strip>>>;
       file: _$zod.ZodOptional<_$zod.ZodObject<{
         __ref: _$zod.ZodString;
       }, _$zod_v4_core0.$strip>>;
@@ -1790,6 +1803,10 @@ declare const ReactNativeSystem: ConfigClass<{
           anatomy: _$zod.ZodOptional<SubEntityClass<_$zod.ZodType<ComponentElementBody, unknown, _$zod_v4_core0.$ZodTypeInternals<ComponentElementBody, unknown>>>>;
           defaultProps: _$zod.ZodOptional<SubEntityClass<_$zod.ZodType<StyleValue, unknown, _$zod_v4_core0.$ZodTypeInternals<StyleValue, unknown>>>>;
           previewProps: _$zod.ZodOptional<_$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>>;
+          previewWhen: _$zod.ZodOptional<_$zod.ZodArray<_$zod.ZodObject<{
+            when: _$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>;
+            props: _$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>;
+          }, _$zod_v4_core0.$strip>>>;
           file: _$zod.ZodOptional<_$zod.ZodObject<{
             __ref: _$zod.ZodString;
           }, _$zod_v4_core0.$strip>>;
@@ -2368,6 +2385,7 @@ declare const ReactNativeSystem: ConfigClass<{
         overflow: "overflow";
         padding: "padding";
         width: "width";
+        fontFamily: "fontFamily";
         alignContent: "alignContent";
         alignItems: "alignItems";
         alignSelf: "alignSelf";
@@ -2419,7 +2437,6 @@ declare const ReactNativeSystem: ConfigClass<{
         flexGrow: "flexGrow";
         flexShrink: "flexShrink";
         flexWrap: "flexWrap";
-        fontFamily: "fontFamily";
         fontSize: "fontSize";
         fontStyle: "fontStyle";
         fontVariant: "fontVariant";
@@ -2535,6 +2552,7 @@ declare const ReactNativeSystem: ConfigClass<{
         postscriptName: _$zod.ZodOptional<_$zod.ZodString>;
       }, _$zod_v4_core0.$strip>>>;
       fallbackStack: _$zod.ZodOptional<_$zod.ZodArray<_$zod.ZodString>>;
+      variable: _$zod.ZodOptional<_$zod.ZodString>;
       isVariableFont: _$zod.ZodOptional<_$zod.ZodBoolean>;
     }, _$zod_v4_core0.$strict>, _$zod.ZodObject<{
       version: _$zod.ZodOptional<_$zod.ZodString>;

package/dist/configs/react-native-system.js

@@ -1,3 +1,4 @@
+import { Font } from "../entities/system/Font.js";
 import { Composite } from "../entities/system/Composite.js";
 import { Package } from "../entities/system/Package.js";
 import { File } from "../entities/system/File.js";
@@ -9,7 +10,6 @@ import { Tool } from "../entities/system/Tool.js";
 import { registerSchemaMigrations, registeredSchemaMigrations } from "../framework/schema-version.js";
 import { defineConfig } from "../framework/defineConfig.js";
 import { CanvasRole } from "../entities/system/CanvasRole.js";
-import { Font } from "../entities/system/Font.js";
 import { Guidance } from "../entities/system/Guidance.js";
 import { NATIVE_CONFIG_NAME } from "./platform.js";
 import { LinkedSystem } from "../entities/system/LinkedSystem.js";

package/dist/configs/system.d.ts

@@ -170,6 +170,10 @@ declare const System: ConfigClass<{
     anatomy: _$zod.ZodOptional<SubEntityClass<_$zod.ZodType<ComponentElementBody, unknown, _$zod_v4_core0.$ZodTypeInternals<ComponentElementBody, unknown>>>>;
     defaultProps: _$zod.ZodOptional<SubEntityClass<_$zod.ZodType<StyleValue, unknown, _$zod_v4_core0.$ZodTypeInternals<StyleValue, unknown>>>>;
     previewProps: _$zod.ZodOptional<_$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>>;
+    previewWhen: _$zod.ZodOptional<_$zod.ZodArray<_$zod.ZodObject<{
+      when: _$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>;
+      props: _$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>;
+    }, _$zod_v4_core0.$strip>>>;
     file: _$zod.ZodOptional<_$zod.ZodObject<{
       __ref: _$zod.ZodString;
     }, _$zod_v4_core0.$strip>>;
@@ -284,6 +288,10 @@ declare const System: ConfigClass<{
         anatomy: _$zod.ZodOptional<SubEntityClass<_$zod.ZodType<ComponentElementBody, unknown, _$zod_v4_core0.$ZodTypeInternals<ComponentElementBody, unknown>>>>;
         defaultProps: _$zod.ZodOptional<SubEntityClass<_$zod.ZodType<StyleValue, unknown, _$zod_v4_core0.$ZodTypeInternals<StyleValue, unknown>>>>;
         previewProps: _$zod.ZodOptional<_$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>>;
+        previewWhen: _$zod.ZodOptional<_$zod.ZodArray<_$zod.ZodObject<{
+          when: _$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>;
+          props: _$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>;
+        }, _$zod_v4_core0.$strip>>>;
         file: _$zod.ZodOptional<_$zod.ZodObject<{
           __ref: _$zod.ZodString;
         }, _$zod_v4_core0.$strip>>;
@@ -892,6 +900,7 @@ declare const System: ConfigClass<{
       postscriptName: _$zod.ZodOptional<_$zod.ZodString>;
     }, _$zod_v4_core0.$strip>>>;
     fallbackStack: _$zod.ZodOptional<_$zod.ZodArray<_$zod.ZodString>>;
+    variable: _$zod.ZodOptional<_$zod.ZodString>;
     isVariableFont: _$zod.ZodOptional<_$zod.ZodBoolean>;
   }, _$zod_v4_core0.$strict>, _$zod.ZodObject<{
     version: _$zod.ZodOptional<_$zod.ZodString>;
@@ -1536,6 +1545,10 @@ declare const System: ConfigClass<{
       anatomy: _$zod.ZodOptional<SubEntityClass<_$zod.ZodType<ComponentElementBody, unknown, _$zod_v4_core0.$ZodTypeInternals<ComponentElementBody, unknown>>>>;
       defaultProps: _$zod.ZodOptional<SubEntityClass<_$zod.ZodType<StyleValue, unknown, _$zod_v4_core0.$ZodTypeInternals<StyleValue, unknown>>>>;
       previewProps: _$zod.ZodOptional<_$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>>;
+      previewWhen: _$zod.ZodOptional<_$zod.ZodArray<_$zod.ZodObject<{
+        when: _$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>;
+        props: _$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>;
+      }, _$zod_v4_core0.$strip>>>;
       file: _$zod.ZodOptional<_$zod.ZodObject<{
         __ref: _$zod.ZodString;
       }, _$zod_v4_core0.$strip>>;
@@ -1650,6 +1663,10 @@ declare const System: ConfigClass<{
           anatomy: _$zod.ZodOptional<SubEntityClass<_$zod.ZodType<ComponentElementBody, unknown, _$zod_v4_core0.$ZodTypeInternals<ComponentElementBody, unknown>>>>;
           defaultProps: _$zod.ZodOptional<SubEntityClass<_$zod.ZodType<StyleValue, unknown, _$zod_v4_core0.$ZodTypeInternals<StyleValue, unknown>>>>;
           previewProps: _$zod.ZodOptional<_$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>>;
+          previewWhen: _$zod.ZodOptional<_$zod.ZodArray<_$zod.ZodObject<{
+            when: _$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>;
+            props: _$zod.ZodRecord<_$zod.ZodString, _$zod.ZodUnknown>;
+          }, _$zod_v4_core0.$strip>>>;
           file: _$zod.ZodOptional<_$zod.ZodObject<{
             __ref: _$zod.ZodString;
           }, _$zod_v4_core0.$strip>>;
@@ -2258,6 +2275,7 @@ declare const System: ConfigClass<{
         postscriptName: _$zod.ZodOptional<_$zod.ZodString>;
       }, _$zod_v4_core0.$strip>>>;
       fallbackStack: _$zod.ZodOptional<_$zod.ZodArray<_$zod.ZodString>>;
+      variable: _$zod.ZodOptional<_$zod.ZodString>;
       isVariableFont: _$zod.ZodOptional<_$zod.ZodBoolean>;
     }, _$zod_v4_core0.$strict>, _$zod.ZodObject<{
       version: _$zod.ZodOptional<_$zod.ZodString>;

package/dist/configs/system.js

@@ -1,3 +1,4 @@
+import { Font } from "../entities/system/Font.js";
 import { Composite } from "../entities/system/Composite.js";
 import { Modifier } from "../entities/system/Modifier.js";
 import { Settings } from "../entities/system/Settings.js";
@@ -12,7 +13,6 @@ import { Tool } from "../entities/system/Tool.js";
 import { registerSchemaMigrations, registeredSchemaMigrations } from "../framework/schema-version.js";
 import { defineConfig } from "../framework/defineConfig.js";
 import { CanvasRole } from "../entities/system/CanvasRole.js";
-import { Font } from "../entities/system/Font.js";
 import { GlobalStyle } from "../entities/system/GlobalStyle.js";
 import { Guidance } from "../entities/system/Guidance.js";
 import { GuidanceStyle } from "../entities/system/GuidanceStyle.js";
@@ -25,6 +25,8 @@ import { settingsAsKindMigration } from "../migrations/20260908171448_settings_a
 import { visibleStatePointerMigration } from "../migrations/20260908194245_visible_state_pointer.js";
 import { iconKnockoutVariantsMigration } from "../migrations/20260909183001_icon_knockout_variants.js";
 import { linkedSystemLinkOpsMigration } from "../migrations/20260910212453_linked_system_link_ops.js";
+import { previewConditionsMigration } from "../migrations/20260912161840_preview_conditions.js";
+import { fontVariableMigration } from "../migrations/20260912164927_font_variable.js";
 //#region src/configs/system.ts
 /**
 * `System` — the design-system config TYPE. Declares the exact kinds a design system owns (tokens,
@@ -70,5 +72,7 @@ if (!registeredSchemaMigrations().has(20260908171448)) registerSchemaMigrations(
 if (!registeredSchemaMigrations().has(20260908194245)) registerSchemaMigrations(visibleStatePointerMigration);
 if (!registeredSchemaMigrations().has(20260909183001)) registerSchemaMigrations(iconKnockoutVariantsMigration);
 if (!registeredSchemaMigrations().has(20260910212453)) registerSchemaMigrations(linkedSystemLinkOpsMigration);
+if (!registeredSchemaMigrations().has(20260912161840)) registerSchemaMigrations(previewConditionsMigration);
+if (!registeredSchemaMigrations().has(20260912164927)) registerSchemaMigrations(fontVariableMigration);
 //#endregion
 export { System };

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

@@ -30,6 +30,7 @@ declare const rnStyleKey: z.ZodEnum<{
   overflow: "overflow";
   padding: "padding";
   width: "width";
+  fontFamily: "fontFamily";
   alignContent: "alignContent";
   alignItems: "alignItems";
   alignSelf: "alignSelf";
@@ -81,7 +82,6 @@ declare const rnStyleKey: z.ZodEnum<{
   flexGrow: "flexGrow";
   flexShrink: "flexShrink";
   flexWrap: "flexWrap";
-  fontFamily: "fontFamily";
   fontSize: "fontSize";
   fontStyle: "fontStyle";
   fontVariant: "fontVariant";
@@ -197,6 +197,7 @@ declare const NativeStyleProperty: EntityClass<z.ZodObject<Omit<{
     overflow: "overflow";
     padding: "padding";
     width: "width";
+    fontFamily: "fontFamily";
     alignContent: "alignContent";
     alignItems: "alignItems";
     alignSelf: "alignSelf";
@@ -248,7 +249,6 @@ declare const NativeStyleProperty: EntityClass<z.ZodObject<Omit<{
     flexGrow: "flexGrow";
     flexShrink: "flexShrink";
     flexWrap: "flexWrap";
-    fontFamily: "fontFamily";
     fontSize: "fontSize";
     fontStyle: "fontStyle";
     fontVariant: "fontVariant";

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

@@ -421,6 +421,10 @@ declare const componentFields: z.ZodObject<{
   anatomy: z.ZodOptional<SubEntityClass<z.ZodType<ComponentElementBody, unknown, z.core.$ZodTypeInternals<ComponentElementBody, unknown>>>>;
   defaultProps: z.ZodOptional<SubEntityClass<z.ZodType<StyleValue, unknown, z.core.$ZodTypeInternals<StyleValue, unknown>>>>;
   previewProps: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+  previewWhen: z.ZodOptional<z.ZodArray<z.ZodObject<{
+    when: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+    props: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+  }, z.core.$strip>>>;
   file: z.ZodOptional<z.ZodObject<{
     __ref: z.ZodString;
   }, z.core.$strip>>;
@@ -540,6 +544,10 @@ declare const ComponentEntity: EntityClass<z.ZodObject<{
   anatomy: z.ZodOptional<SubEntityClass<z.ZodType<ComponentElementBody, unknown, z.core.$ZodTypeInternals<ComponentElementBody, unknown>>>>;
   defaultProps: z.ZodOptional<SubEntityClass<z.ZodType<StyleValue, unknown, z.core.$ZodTypeInternals<StyleValue, unknown>>>>;
   previewProps: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+  previewWhen: z.ZodOptional<z.ZodArray<z.ZodObject<{
+    when: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+    props: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+  }, z.core.$strip>>>;
   file: z.ZodOptional<z.ZodObject<{
     __ref: z.ZodString;
   }, z.core.$strip>>;
@@ -654,6 +662,10 @@ declare const ComponentEntity: EntityClass<z.ZodObject<{
       anatomy: z.ZodOptional<SubEntityClass<z.ZodType<ComponentElementBody, unknown, z.core.$ZodTypeInternals<ComponentElementBody, unknown>>>>;
       defaultProps: z.ZodOptional<SubEntityClass<z.ZodType<StyleValue, unknown, z.core.$ZodTypeInternals<StyleValue, unknown>>>>;
       previewProps: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+      previewWhen: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        when: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+        props: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+      }, z.core.$strip>>>;
       file: z.ZodOptional<z.ZodObject<{
         __ref: z.ZodString;
       }, z.core.$strip>>;

package/dist/entities/system/Component.js

@@ -1207,6 +1207,12 @@ const componentFields = z.strictObject({
 	*  into the tree by invoking a render with them, so a tile's example icon ends up stored as
 	*  part of the component itself. */
 	previewProps: z.record(z.string(), z.unknown()).optional().describe("The props the catalogue tile and the variant matrix render with. A component whose root takes children renders empty until this or `defaultProps` carries some."),
+	/** Preview props that hold under a condition on the cell — see `preview({ when })`. Like
+	*  `previewProps`, read off `.preview()` at build and never authored as data. */
+	previewWhen: z.array(z.object({
+		when: z.record(z.string(), z.unknown()),
+		props: z.record(z.string(), z.unknown())
+	})).optional().describe("Preview props that hold only when the cell matches `when`, in the grammar a style rule uses: `{ \"when\": { \"type\": \"image\" }, \"props\": { \"src\": \"…\" } }`. A condition on a prop no rule styles makes that prop a preview axis with the value named."),
 	/**
 	* The source that implements this component — a ref, because the file is an entity the seal owns.
 	*

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

@@ -40,9 +40,33 @@ declare const Font: EntityClass<z.ZodObject<{
     postscriptName: z.ZodOptional<z.ZodString>;
   }, z.core.$strip>>>;
   fallbackStack: z.ZodOptional<z.ZodArray<z.ZodString>>;
+  variable: z.ZodOptional<z.ZodString>;
   isVariableFont: z.ZodOptional<z.ZodBoolean>;
 }, z.core.$strict>, z.ZodObject<{
   version: z.ZodOptional<z.ZodString>;
 }, z.core.$strict>, "font", Record<never, never>, Record<never, never>, false>;
+/**
+ * The `font-family` value a family stands for: its own name, quoted, then its fallback stack as
+ * authored — `"YA Sans VF", Helvetica Neue, Arial, sans-serif`.
+ *
+ * This is what a `font:` ref DENOTES wherever a value is wanted: a `fontFamily/sans` token valued
+ * `Font.ref('fonts/yas')` emits this string as its custom property, a Studio specimen paints in it,
+ * and a picker matches the active card against it. One derivation, so the three cannot disagree —
+ * and the reason a token's stack is not a second field of its own: the family already knows it.
+ *
+ * The family name is always quoted (a name with spaces needs it; a name without tolerates it), the
+ * fallbacks are not — `sans-serif` is a generic keyword, and quoting one turns it into a family
+ * nothing has. Blank fallbacks are dropped rather than emitted as empty list members.
+ *
+ * A family the host loads under a custom property (`variable`) reads that property FIRST, with the
+ * whole named stack as the property's fallback: `var(--uds-font-family-inter, "Inter", ui-sans-serif,
+ * …)`. The host's face wins where it is defined, and where it is not — a consumer without the loader,
+ * a canvas the host did not wrap — the family by name and its fallbacks paint as they would anyway.
+ */
+declare function fontFamilyStack(font: {
+  readonly fontFamily: string;
+  readonly fallbackStack?: readonly string[] | undefined;
+  readonly variable?: string | undefined;
+}): string;
 //#endregion
-export { Font, FontFile };
+export { Font, FontFile, fontFamilyStack };

package/dist/entities/system/Font.js

@@ -46,11 +46,44 @@ const Font = defineEntity({
 		files: FontFile.optional(),
 		/** Families to fall back to after this one, for a `font-family` stack. */
 		fallbackStack: z.array(z.string()).optional(),
+		/**
+		* A CSS custom property the HOST publishes the loaded face's family under — `next/font`'s
+		* `variable` option (`--uds-font-family-inter`), or any loader that hands the page a variable
+		* rather than a `@font-face`. When set, the family's stack reads the property first and falls
+		* back to the family by name: `var(--uds-font-family-inter, "Inter", ui-sans-serif, …)`. That
+		* is how a token can be `Font.ref(…)` to such a family and still render the host's face, whose
+		* real family name (`__Inter_a1b2c3`) nothing in a config can know.
+		*/
+		variable: z.string().regex(/^--[A-Za-z0-9_-]+$/, "a CSS custom property name: `--name`").optional(),
 		/** Set explicitly; otherwise inferred from a file declaring a weight RANGE. */
 		isVariableFont: z.boolean().optional()
 	}),
 	groupFields: z.strictObject({ version: z.string().optional() }),
 	subEntities: { files: FontFile }
 });
+/**
+* The `font-family` value a family stands for: its own name, quoted, then its fallback stack as
+* authored — `"YA Sans VF", Helvetica Neue, Arial, sans-serif`.
+*
+* This is what a `font:` ref DENOTES wherever a value is wanted: a `fontFamily/sans` token valued
+* `Font.ref('fonts/yas')` emits this string as its custom property, a Studio specimen paints in it,
+* and a picker matches the active card against it. One derivation, so the three cannot disagree —
+* and the reason a token's stack is not a second field of its own: the family already knows it.
+*
+* The family name is always quoted (a name with spaces needs it; a name without tolerates it), the
+* fallbacks are not — `sans-serif` is a generic keyword, and quoting one turns it into a family
+* nothing has. Blank fallbacks are dropped rather than emitted as empty list members.
+*
+* A family the host loads under a custom property (`variable`) reads that property FIRST, with the
+* whole named stack as the property's fallback: `var(--uds-font-family-inter, "Inter", ui-sans-serif,
+* …)`. The host's face wins where it is defined, and where it is not — a consumer without the loader,
+* a canvas the host did not wrap — the family by name and its fallbacks paint as they would anyway.
+*/
+function fontFamilyStack(font) {
+	const family = `"${font.fontFamily.replace(/^['"]|['"]$/g, "")}"`;
+	const fallbacks = (font.fallbackStack ?? []).map((name) => name.trim()).filter((name) => name.length > 0);
+	const named = fallbacks.length > 0 ? `${family}, ${fallbacks.join(", ")}` : family;
+	return font.variable ? `var(${font.variable}, ${named})` : named;
+}
 //#endregion
-export { Font, FontFile };
+export { Font, FontFile, fontFamilyStack };

package/dist/entities/system/Token.js

@@ -2,8 +2,8 @@ import { isRef, pathOf, ref, sourceOf } from "../../framework/utils/refs.js";
 import { defineEntity } from "../../framework/defineEntity.js";
 import { defineSubEntity } from "../../framework/defineSubEntity.js";
 import { derivedColor, gradient } from "./color.js";
-import { Modifier } from "./Modifier.js";
 import { Font } from "./Font.js";
+import { Modifier } from "./Modifier.js";
 import { z } from "zod";
 //#region src/entities/system/Token.ts
 /**

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

@@ -1,8 +1,8 @@
-import { Ref } from "../../framework/utils/refs.js";
+import { Ref as Ref$1 } from "../../framework/utils/refs.js";
 import { Authored } from "../../framework/authoring.js";
 import { StyleValue } from "./style-bag.js";
 import { VariantValues } from "./Component.js";
-import { ComponentPropsWithoutRef, JSX, ReactNode } from "react";
+import { ComponentPropsWithoutRef, ElementType, JSX, ReactNode, Ref } from "react";
 
 //#region src/entities/system/defineComponent.d.ts
 /**
@@ -34,7 +34,7 @@ type PackageElement = ((...args: never[]) => unknown) | (abstract new (...args:
  * it names exposes are gone by the time anything could read them, and a component built on `Pressable`
  * typed `onClick` as nothing at all.
  */
-type LayerElement = string | ComponentElement | Ref | PackageElement;
+type LayerElement = string | ComponentElement | Ref$1 | PackageElement;
 /**
  * A component's layers. `root` is REQUIRED and is the element a consumer addresses: its React props
  * are the component's props, and a component that doesn't declare one has no element to be.
@@ -87,7 +87,7 @@ interface SlotDecl {
    * into a hole. A route into a value prop has nothing to narrow: which values are valid is that prop's
    * own declaration.
    */
-  accepts?: Ref | Ref[];
+  accepts?: Ref$1 | Ref$1[];
   text?: boolean;
   required?: boolean;
 }
@@ -120,14 +120,14 @@ type Forwarded = '*' | readonly string[];
 interface ForwardDecl<Path extends string = string> {
   type: 'forward';
   /** `<layer>/<prop>` as authored; a `layerRef` once stored, with the prop moved to `into`. */
-  target: Path | Ref;
+  target: Path | Ref$1;
   /** STORED only — a member ref at the prop on that layer's element
    *  (`component:Input#props/disabled`). Minted at registration, when the layer's element has a path. */
-  into?: string | Ref;
+  into?: string | Ref$1;
   /** Only where this route LANDS on a hole — it means exactly what {@link SlotDecl.accepts} means.
    *  That the target is a hole is computed from it (`routesContent`), so the rule is checked rather
    *  than trusted, and a route into a value prop is refused by name. */
-  accepts?: Ref | Ref[];
+  accepts?: Ref$1 | Ref$1[];
   text?: boolean;
   required?: boolean;
 }
@@ -151,15 +151,15 @@ interface ForwardDecl<Path extends string = string> {
  */
 type PropDecl<Path extends string = string> = SlotDecl | ForwardDecl<Path> | {
   type: 'variant';
-  value: readonly string[] | VariantValues | Ref;
+  value: readonly string[] | VariantValues | Ref$1;
   required?: boolean;
 } | {
   type: 'styleProperty';
-  value: Ref;
+  value: Ref$1;
   required?: boolean;
 } | {
   type: 'composite';
-  value: Ref;
+  value: Ref$1;
   required?: boolean;
 } | {
   type: 'motion';
@@ -180,7 +180,7 @@ type PropDecl<Path extends string = string> = SlotDecl | ForwardDecl<Path> | {
  * every reader switches on. (v1 did the same in its authoring adapter — it just assumed every bare ref
  * was a style property, where this reads the kind.)
  */
-type AuthoredProp<Path extends string = string> = PropDecl<Path> | Ref | readonly string[];
+type AuthoredProp<Path extends string = string> = PropDecl<Path> | Ref$1 | readonly string[];
 /**
  * A component's prop declarations. `null` is the OMIT tombstone the stored schema already accepts: a
  * component that `.forwards({ root: '*' })` drops one of the base's props by declaring it `null`, which is
@@ -279,7 +279,17 @@ type ElementOf<L extends LayerMap, D> = D extends {
  *
  * Open at the end on purpose: a component's style-prop surface is the system's, not this file's.
  */
-type ComponentPropsOf<L extends LayerMap, P extends PropMap, D = Record<never, never>, E = Record<never, never>, F extends string = never> = Partial<DeclaredProps<P>> & Partial<E> & Omit<ElementPropsOf<ElementOf<L, D>>, keyof P | keyof E> & Omit<ForwardedPropsOf<L, F>, keyof P | keyof E> & Record<string, unknown>;
+type ComponentPropsOf<L extends LayerMap, P extends PropMap, D = Record<never, never>, E = Record<never, never>, F extends string = never> = Without<Partial<DeclaredProps<P>>, keyof E> & Partial<E> & Omit<ElementPropsOf<ElementOf<L, D>>, keyof P | keyof E> & Omit<ForwardedPropsOf<L, F>, keyof P | keyof E> & Record<string, unknown>;
+/**
+ * The element a call site picks with `as`, and the props that element brings — the polymorphic half
+ * of the phantom signature. `<Box<'img', ImgHTMLAttributes<HTMLImageElement>> as="img" src=…>` names
+ * the element (and, optionally, the attribute surface it wants typed) as type arguments, the way v1's
+ * generated components took them. Without it a consumer's `<Box<'button'>>` was "Expected 0 type
+ * arguments" at every site that had compiled for a year.
+ */
+type AsPropsOf<As, P, E> = [As] extends [never] ? Record<never, never> : {
+  as?: As;
+} & ([As] extends [keyof JSX.IntrinsicElements] ? Omit<ComponentPropsWithoutRef<As>, keyof P | keyof E> : Record<never, never>);
 /**
  * The props a component picks up from the layers it FORWARDS.
  *
@@ -305,9 +315,25 @@ type ForwardedPropsOf<L extends LayerMap, F extends string> = [NonRootForward<L,
 type DefaultsOf<P extends PropMap> = Partial<DeclaredProps<P>> & {
   [key: string]: unknown;
 };
+/**
+ * `T` without the keys in `K` — `Omit` that leaves an index signature alone.
+ *
+ * `Omit<T, K>` is `Pick<T, Exclude<keyof T, K>>`, and on a type that is open at the end (`RenderArgs`,
+ * every component's props) `keyof T` is `string`, so the pick collapses every named key to the index
+ * type: `props` came back `unknown` and a render could not read `props.root`. A mapped type with an
+ * `as` clause drops exactly the named keys and keeps the rest as declared.
+ */
+type Without<T, K extends PropertyKey> = string extends K ? T : { [Key in keyof T as Key extends K ? never : Key]: T[Key] };
 /** What a render receives: the generated per-layer bundle, plus the props the component declared. */
 type RenderArgs<L extends LayerMap, P extends PropMap> = {
   readonly props: Record<keyof L & string, Record<string, unknown>>;
+  /**
+   * The ref the emitted module forwards to the render, for the element it chooses to attach it to.
+   * `any` rather than a union of element types: a React ref is contravariant in its element, so
+   * only `any` lets one declared type land on `<svg ref={ref}>` in one component and
+   * `<input ref={ref}>` in another — and which element is the render's decision.
+   */
+  readonly ref?: Ref<any>;
 } & DeclaredProps<P> & Record<string, unknown>;
 interface ComponentBuilder<L extends LayerMap, P extends PropMap,
 /** Props the RENDER takes that the config doesn't describe — React handlers, mostly (`onPress`).
@@ -326,7 +352,13 @@ F extends string = never> extends Authored {
    * A phantom call signature — the authored value is NEVER rendered (the build substitutes the
    * emitted module), but `export type ButtonProps = ComponentProps<typeof Button>` is how a consumer
    * names its props, and that reads this type.
+   *
+   * Two signatures. The GENERIC one takes the element a call site picks (`<Box<'img', Attrs>>`) — see
+   * {@link AsPropsOf}. The plain one stays LAST, because `React.ComponentProps<typeof Box>` infers
+   * from the last overload, and a consumer's `BoxProps` must not widen into a union over every
+   * intrinsic element the moment `as` becomes typeable.
    */
+  <As extends ElementType = never, Extra = Record<never, never>>(props: ComponentPropsOf<L, P, D, E, F> & AsPropsOf<As, P, E> & Partial<Extra>): null;
   (props: ComponentPropsOf<L, P, D, E, F>): null;
   readonly kind: 'component';
   /** The authored body, readable so codegen can pair it with the render found in the source. */
@@ -387,7 +419,7 @@ F extends string = never> extends Authored {
    * it from the source and copies it verbatim, so what it returns is irrelevant; declaring it is
    * what puts it in the file.
    */
-  render<E2 = E>(fn: (args: RenderArgs<L, P> & E2) => unknown): ComponentBuilder<L, P, E2, D, F>;
+  render<E2 = E>(fn: (args: Without<RenderArgs<L, P>, keyof E2> & E2) => unknown): ComponentBuilder<L, P, E2, D, F>;
   /**
    * An optional browser-canvas anatomy for a native component.
    *
@@ -395,7 +427,7 @@ F extends string = never> extends Authored {
    * Use this only when the phone anatomy is a poor fit for a browser canvas (a full-screen safe-area
    * wrapper, for example). Like `render`, it is source-read build input and stores no config data.
    */
-  renderCanvas<E2 extends E = E>(fn: (args: RenderArgs<L, P> & E2) => unknown): ComponentBuilder<L, P, E, D, F>;
+  renderCanvas<E2 extends E = E>(fn: (args: Without<RenderArgs<L, P>, keyof E2> & E2) => unknown): ComponentBuilder<L, P, E, D, F>;
   /**
    * What a preview of this component STARTS from — the props a single tile is rendered with.
    *
@@ -407,10 +439,24 @@ F extends string = never> extends Authored {
    */
   preview(spec: {
     defaultProps?: DefaultsOf<P>;
+    /**
+     * Preview props that hold only under a condition — the same `when` grammar a style rule uses.
+     * The grid is derived from the styles; what it cannot derive is the CONTENT a cell needs at a
+     * given point on an axis: `{ when: { type: 'image' }, props: { src } }` gives the image kind a
+     * photo, `{ when: { invalid: true }, props: { selected: true } }` shows the invalid state checked.
+     * A condition naming a prop no rule styles makes that prop an axis too, with the value named —
+     * so a preview can say a boolean is worth a column the way a rule would.
+     */
+    when?: readonly PreviewCondition<P>[];
   }): ComponentBuilder<L, P, E, D, F>;
   toStored(): Record<string, unknown>;
   assignPath(path: string): void;
 }
+/** Preview props that hold under a condition on the cell's props — see `preview({ when })`. */
+interface PreviewCondition<P extends PropMap = PropMap> {
+  readonly when: Partial<Record<keyof P & string, unknown>>;
+  readonly props: DefaultsOf<P>;
+}
 /** A component under authorship, with its declarations forgotten — what a registry holds. */
 type AuthoredComponent = ComponentBuilder<LayerMap, PropMap, unknown, unknown>;
 interface DefineComponent {

package/dist/entities/system/defineComponent.js

@@ -19,7 +19,12 @@ function build(body) {
 		metadata: (meta) => next(meta),
 		render: () => handle,
 		renderCanvas: () => handle,
-		preview: (spec) => spec?.defaultProps === void 0 ? handle : next({ previewProps: spec.defaultProps }),
+		preview: (spec) => {
+			const patch = {};
+			if (spec?.defaultProps !== void 0) patch.previewProps = spec.defaultProps;
+			if (spec?.when?.length) patch.previewWhen = spec.when;
+			return Object.keys(patch).length === 0 ? handle : next(patch);
+		},
 		toStored: () => toStored(body),
 		assignPath(path) {
 			handle.path = path;
@@ -282,6 +287,10 @@ function toStored(body) {
 		if (previewProps === void 0) delete stored.previewProps;
 		else stored.previewProps = previewProps;
 	}
+	if (Array.isArray(body.previewWhen)) stored.previewWhen = body.previewWhen.map(({ when, props }) => ({
+		when,
+		props: storableProps(props) ?? {}
+	}));
 	if (body.props && typeof body.props === "object") {
 		const props = {};
 		for (const [name, decl] of Object.entries(body.props)) props[name] = storedProp(decl, body.layers);