@yahoo/uds-create-config 4.16.0 → 4.18.0

package/dist/configs/CanvasConfig.d.ts

@@ -14,7 +14,9 @@ import { instanceAt } from "../spec/instance.js";
 import { ReactNativeSystem } from "./react-native-system.js";
 import { System } from "./system.js";
 import { AnySystemConfig } from "./platform.js";
+import { ComposedValue } from "../entities/system/composed-values.js";
 import { StyleValue } from "../entities/system/style-bag.js";
+import { OverrideCondition, TokenRefPath, TokenReference } from "../entities/system/Token.js";
 import { ComponentElementBody, ComponentReference, ComponentStyleBody } from "../entities/system/Component.js";
 import { z } from "zod";
 
@@ -322,6 +324,22 @@ declare const Node: EntityClass<z.ZodObject<{
       __ref: z.ZodString;
     }, z.core.$strip>>;
     export: z.ZodOptional<z.ZodString>;
+    tokenRefs: z.ZodOptional<z.ZodArray<Omit<EntityClass<z.ZodObject<{
+      value: z.ZodType<string | number | Ref | ComposedValue, unknown, z.core.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+      type: z.ZodOptional<z.ZodString>;
+      overrides: z.ZodOptional<SubEntityClass<z.ZodObject<{
+        on: z.ZodType<OverrideCondition, unknown, z.core.$ZodTypeInternals<OverrideCondition, unknown>>;
+        value: z.ZodType<string | number | Ref | ComposedValue, unknown, z.core.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+      }, z.core.$strip>>>;
+    }, z.core.$strip>, z.ZodObject<{
+      cssPrefix: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>, "token", {
+      readonly create: {
+        readonly description: `Create a token at \`<group>/<name>\` \u2014 \`data.value\` is the CSS value. The first path segment is its group, and a style property takes a whole group as one ref (\`${string}\`), so put the tokens one prop should offer in one group rather than listing values on the prop.`;
+      };
+    }, Record<never, never>, false, Record<never, never>, Record<never, never>>, "ref"> & {
+      readonly ref: <const Path extends TokenRefPath>(path: Path) => TokenReference<Path>;
+    }>>;
   }, z.core.$strict>, z.ZodObject<{
     icon: z.ZodOptional<z.ZodString>;
   }, z.core.$strip>, "component", {
@@ -494,6 +512,22 @@ declare const Node: EntityClass<z.ZodObject<{
           __ref: z.ZodString;
         }, z.core.$strip>>;
         export: z.ZodOptional<z.ZodString>;
+        tokenRefs: z.ZodOptional<z.ZodArray<Omit<EntityClass<z.ZodObject<{
+          value: z.ZodType<string | number | Ref | ComposedValue, unknown, z.core.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+          type: z.ZodOptional<z.ZodString>;
+          overrides: z.ZodOptional<SubEntityClass<z.ZodObject<{
+            on: z.ZodType<OverrideCondition, unknown, z.core.$ZodTypeInternals<OverrideCondition, unknown>>;
+            value: z.ZodType<string | number | Ref | ComposedValue, unknown, z.core.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+          }, z.core.$strip>>>;
+        }, z.core.$strip>, z.ZodObject<{
+          cssPrefix: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>, "token", {
+          readonly create: {
+            readonly description: `Create a token at \`<group>/<name>\` \u2014 \`data.value\` is the CSS value. The first path segment is its group, and a style property takes a whole group as one ref (\`${string}\`), so put the tokens one prop should offer in one group rather than listing values on the prop.`;
+          };
+        }, Record<never, never>, false, Record<never, never>, Record<never, never>>, "ref"> & {
+          readonly ref: <const Path extends TokenRefPath>(path: Path) => TokenReference<Path>;
+        }>>;
       }, z.core.$strict>;
       readonly description: "Create a component at a new qualified `path`. For a component with nothing in it yet, one to design on the canvas before it has props or variants, use `create-blank` with only a `path` instead of authoring a minimal body here. When its complete body is known, include all layers, anatomy, props, defaults, and styles in this one operation. `data.layers` maps each stable layer name to the element it renders and must include `root` — a tag for a primitive (`{ \"layers\": { \"root\": \"div\" } }`), and for anything built on top, a ref to a primitive (`{ \"root\": { \"__ref\": \"component:Box\" }, \"label\": { \"__ref\": \"component:Text\" } }`), which is what lets the layer take that primitive's style props. A primitive exposes style props as `{ \"type\": \"styleProperty\", \"value\": { \"__ref\": \"style-property:bg\" } }` and declares `children: { \"type\": \"slot\", \"text\": true }` when it holds content — without the slot, nothing nested inside it renders. A composed component exposes a layer's props at its own top level through `forwards`, keyed by layer: `{ \"forwards\": { \"root\": \"*\" } }` passes every prop the root's element takes (so `<Button width=\"full\">` reaches the root's `width`), and a list of member refs (`[{ \"__ref\": \"component:Box#props/width\" }]`, each naming the component that declares the prop) passes only those. A prop a layer already exposes is forwarded, never redeclared in `props`; a `props` entry of `{ \"type\": \"forward\" }` is the reverse route, one of this component's props into a layer's. `anatomy` is the tree the build would read off a render: each node renders a layer (`{ \"__ref\": \"layer:<name>\" }`), an intrinsic tag, or `Slot` (`{ \"element\": \"Slot\", \"props\": { \"name\": \"children\" } }`, where a slot prop's content lands — but a declared slot fills `root` by default, so a primitive still declares its `children` slot prop yet needs no `Slot` node or `children` entry for it, and a `Slot` node is only for landing that content in a nested layer); `children` lists sibling node keys from the `root` node, never a prop name; `text` is a fixed string; `visible` is a condition on a prop (`{ \"$state\": \"<prop>\" }`, or with `eq`); content shown in a nested layer is a route, `children: { \"type\": \"forward\", \"target\": \"label/children\" }`. `$state` appears only in `visible` and in an `element` a prop chooses, never as a prop value. A glyph is a node of its own, `{ \"element\": { \"__ref\": \"icon:<library>/<Name>\" } }`, listed in the `children` of the layer node that holds it, never a prop value. Text a prop supplies to a text layer is never a node either: declare the prop `{ \"type\": \"forward\", \"target\": \"<layer>/children\" }` and the layer shows it; a `Slot` node goes only under a layer that takes nodes. A style rule is `\"styles\": { \"*\": { \"when\": null, \"layers\": { \"root\": { \"bg\": \"surface\" } } } }`, keyed by a name, with each layer's bag under `layers`. A composed component carries its own styles: give it an unconditional (`\"*\"`) rule that lays out and surfaces it through the system's style properties — spacing, alignment and gap on the container, a background and color where it has one — rather than leaning on the bare primitives, which paint flat. Style a layer only with the style props the primitive it renders exposes, set to the values those props accept: `component/get` on the primitive lists both, so read it and choose from that rather than reaching for a CSS name or value the system has no style property for. Set `preview` (`{ \"*\": { \"when\": null, \"props\": { \"children\": \"Example\" } } }`) or `defaultProps` so the component previews with content; a root that takes children renders empty otherwise. A style rule's layer bag is keyed by style-prop name (`fontWeight`, `color`), never by CSS property name, and each value is one of that prop's values.";
       readonly example: ({
@@ -1834,6 +1868,22 @@ declare const CanvasConfig: ConfigClass<{
         __ref: z.ZodString;
       }, z.core.$strip>>;
       export: z.ZodOptional<z.ZodString>;
+      tokenRefs: z.ZodOptional<z.ZodArray<Omit<EntityClass<z.ZodObject<{
+        value: z.ZodType<string | number | Ref | ComposedValue, unknown, z.core.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+        type: z.ZodOptional<z.ZodString>;
+        overrides: z.ZodOptional<SubEntityClass<z.ZodObject<{
+          on: z.ZodType<OverrideCondition, unknown, z.core.$ZodTypeInternals<OverrideCondition, unknown>>;
+          value: z.ZodType<string | number | Ref | ComposedValue, unknown, z.core.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+        }, z.core.$strip>>>;
+      }, z.core.$strip>, z.ZodObject<{
+        cssPrefix: z.ZodOptional<z.ZodString>;
+      }, z.core.$strip>, "token", {
+        readonly create: {
+          readonly description: `Create a token at \`<group>/<name>\` \u2014 \`data.value\` is the CSS value. The first path segment is its group, and a style property takes a whole group as one ref (\`${string}\`), so put the tokens one prop should offer in one group rather than listing values on the prop.`;
+        };
+      }, Record<never, never>, false, Record<never, never>, Record<never, never>>, "ref"> & {
+        readonly ref: <const Path extends TokenRefPath>(path: Path) => TokenReference<Path>;
+      }>>;
     }, z.core.$strict>, z.ZodObject<{
       icon: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>, "component", {
@@ -2006,6 +2056,22 @@ declare const CanvasConfig: ConfigClass<{
             __ref: z.ZodString;
           }, z.core.$strip>>;
           export: z.ZodOptional<z.ZodString>;
+          tokenRefs: z.ZodOptional<z.ZodArray<Omit<EntityClass<z.ZodObject<{
+            value: z.ZodType<string | number | Ref | ComposedValue, unknown, z.core.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+            type: z.ZodOptional<z.ZodString>;
+            overrides: z.ZodOptional<SubEntityClass<z.ZodObject<{
+              on: z.ZodType<OverrideCondition, unknown, z.core.$ZodTypeInternals<OverrideCondition, unknown>>;
+              value: z.ZodType<string | number | Ref | ComposedValue, unknown, z.core.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+            }, z.core.$strip>>>;
+          }, z.core.$strip>, z.ZodObject<{
+            cssPrefix: z.ZodOptional<z.ZodString>;
+          }, z.core.$strip>, "token", {
+            readonly create: {
+              readonly description: `Create a token at \`<group>/<name>\` \u2014 \`data.value\` is the CSS value. The first path segment is its group, and a style property takes a whole group as one ref (\`${string}\`), so put the tokens one prop should offer in one group rather than listing values on the prop.`;
+            };
+          }, Record<never, never>, false, Record<never, never>, Record<never, never>>, "ref"> & {
+            readonly ref: <const Path extends TokenRefPath>(path: Path) => TokenReference<Path>;
+          }>>;
         }, z.core.$strict>;
         readonly description: "Create a component at a new qualified `path`. For a component with nothing in it yet, one to design on the canvas before it has props or variants, use `create-blank` with only a `path` instead of authoring a minimal body here. When its complete body is known, include all layers, anatomy, props, defaults, and styles in this one operation. `data.layers` maps each stable layer name to the element it renders and must include `root` — a tag for a primitive (`{ \"layers\": { \"root\": \"div\" } }`), and for anything built on top, a ref to a primitive (`{ \"root\": { \"__ref\": \"component:Box\" }, \"label\": { \"__ref\": \"component:Text\" } }`), which is what lets the layer take that primitive's style props. A primitive exposes style props as `{ \"type\": \"styleProperty\", \"value\": { \"__ref\": \"style-property:bg\" } }` and declares `children: { \"type\": \"slot\", \"text\": true }` when it holds content — without the slot, nothing nested inside it renders. A composed component exposes a layer's props at its own top level through `forwards`, keyed by layer: `{ \"forwards\": { \"root\": \"*\" } }` passes every prop the root's element takes (so `<Button width=\"full\">` reaches the root's `width`), and a list of member refs (`[{ \"__ref\": \"component:Box#props/width\" }]`, each naming the component that declares the prop) passes only those. A prop a layer already exposes is forwarded, never redeclared in `props`; a `props` entry of `{ \"type\": \"forward\" }` is the reverse route, one of this component's props into a layer's. `anatomy` is the tree the build would read off a render: each node renders a layer (`{ \"__ref\": \"layer:<name>\" }`), an intrinsic tag, or `Slot` (`{ \"element\": \"Slot\", \"props\": { \"name\": \"children\" } }`, where a slot prop's content lands — but a declared slot fills `root` by default, so a primitive still declares its `children` slot prop yet needs no `Slot` node or `children` entry for it, and a `Slot` node is only for landing that content in a nested layer); `children` lists sibling node keys from the `root` node, never a prop name; `text` is a fixed string; `visible` is a condition on a prop (`{ \"$state\": \"<prop>\" }`, or with `eq`); content shown in a nested layer is a route, `children: { \"type\": \"forward\", \"target\": \"label/children\" }`. `$state` appears only in `visible` and in an `element` a prop chooses, never as a prop value. A glyph is a node of its own, `{ \"element\": { \"__ref\": \"icon:<library>/<Name>\" } }`, listed in the `children` of the layer node that holds it, never a prop value. Text a prop supplies to a text layer is never a node either: declare the prop `{ \"type\": \"forward\", \"target\": \"<layer>/children\" }` and the layer shows it; a `Slot` node goes only under a layer that takes nodes. A style rule is `\"styles\": { \"*\": { \"when\": null, \"layers\": { \"root\": { \"bg\": \"surface\" } } } }`, keyed by a name, with each layer's bag under `layers`. A composed component carries its own styles: give it an unconditional (`\"*\"`) rule that lays out and surfaces it through the system's style properties — spacing, alignment and gap on the container, a background and color where it has one — rather than leaning on the bare primitives, which paint flat. Style a layer only with the style props the primitive it renders exposes, set to the values those props accept: `component/get` on the primitive lists both, so read it and choose from that rather than reaching for a CSS name or value the system has no style property for. Set `preview` (`{ \"*\": { \"when\": null, \"props\": { \"children\": \"Example\" } } }`) or `defaultProps` so the component previews with content; a root that takes children renders empty otherwise. A style rule's layer bag is keyed by style-prop name (`fontWeight`, `color`), never by CSS property name, and each value is one of that prop's values.";
         readonly example: ({
@@ -3611,6 +3677,22 @@ declare function createCanvasConfig(system: AnySystemConfig): ConfigInstance<{
         __ref: z.ZodString;
       }, z.core.$strip>>;
       export: z.ZodOptional<z.ZodString>;
+      tokenRefs: z.ZodOptional<z.ZodArray<Omit<EntityClass<z.ZodObject<{
+        value: z.ZodType<string | number | Ref | ComposedValue, unknown, z.core.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+        type: z.ZodOptional<z.ZodString>;
+        overrides: z.ZodOptional<SubEntityClass<z.ZodObject<{
+          on: z.ZodType<OverrideCondition, unknown, z.core.$ZodTypeInternals<OverrideCondition, unknown>>;
+          value: z.ZodType<string | number | Ref | ComposedValue, unknown, z.core.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+        }, z.core.$strip>>>;
+      }, z.core.$strip>, z.ZodObject<{
+        cssPrefix: z.ZodOptional<z.ZodString>;
+      }, z.core.$strip>, "token", {
+        readonly create: {
+          readonly description: `Create a token at \`<group>/<name>\` \u2014 \`data.value\` is the CSS value. The first path segment is its group, and a style property takes a whole group as one ref (\`${string}\`), so put the tokens one prop should offer in one group rather than listing values on the prop.`;
+        };
+      }, Record<never, never>, false, Record<never, never>, Record<never, never>>, "ref"> & {
+        readonly ref: <const Path extends TokenRefPath>(path: Path) => TokenReference<Path>;
+      }>>;
     }, z.core.$strict>, z.ZodObject<{
       icon: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>, "component", {
@@ -3783,6 +3865,22 @@ declare function createCanvasConfig(system: AnySystemConfig): ConfigInstance<{
             __ref: z.ZodString;
           }, z.core.$strip>>;
           export: z.ZodOptional<z.ZodString>;
+          tokenRefs: z.ZodOptional<z.ZodArray<Omit<EntityClass<z.ZodObject<{
+            value: z.ZodType<string | number | Ref | ComposedValue, unknown, z.core.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+            type: z.ZodOptional<z.ZodString>;
+            overrides: z.ZodOptional<SubEntityClass<z.ZodObject<{
+              on: z.ZodType<OverrideCondition, unknown, z.core.$ZodTypeInternals<OverrideCondition, unknown>>;
+              value: z.ZodType<string | number | Ref | ComposedValue, unknown, z.core.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+            }, z.core.$strip>>>;
+          }, z.core.$strip>, z.ZodObject<{
+            cssPrefix: z.ZodOptional<z.ZodString>;
+          }, z.core.$strip>, "token", {
+            readonly create: {
+              readonly description: `Create a token at \`<group>/<name>\` \u2014 \`data.value\` is the CSS value. The first path segment is its group, and a style property takes a whole group as one ref (\`${string}\`), so put the tokens one prop should offer in one group rather than listing values on the prop.`;
+            };
+          }, Record<never, never>, false, Record<never, never>, Record<never, never>>, "ref"> & {
+            readonly ref: <const Path extends TokenRefPath>(path: Path) => TokenReference<Path>;
+          }>>;
         }, z.core.$strict>;
         readonly description: "Create a component at a new qualified `path`. For a component with nothing in it yet, one to design on the canvas before it has props or variants, use `create-blank` with only a `path` instead of authoring a minimal body here. When its complete body is known, include all layers, anatomy, props, defaults, and styles in this one operation. `data.layers` maps each stable layer name to the element it renders and must include `root` — a tag for a primitive (`{ \"layers\": { \"root\": \"div\" } }`), and for anything built on top, a ref to a primitive (`{ \"root\": { \"__ref\": \"component:Box\" }, \"label\": { \"__ref\": \"component:Text\" } }`), which is what lets the layer take that primitive's style props. A primitive exposes style props as `{ \"type\": \"styleProperty\", \"value\": { \"__ref\": \"style-property:bg\" } }` and declares `children: { \"type\": \"slot\", \"text\": true }` when it holds content — without the slot, nothing nested inside it renders. A composed component exposes a layer's props at its own top level through `forwards`, keyed by layer: `{ \"forwards\": { \"root\": \"*\" } }` passes every prop the root's element takes (so `<Button width=\"full\">` reaches the root's `width`), and a list of member refs (`[{ \"__ref\": \"component:Box#props/width\" }]`, each naming the component that declares the prop) passes only those. A prop a layer already exposes is forwarded, never redeclared in `props`; a `props` entry of `{ \"type\": \"forward\" }` is the reverse route, one of this component's props into a layer's. `anatomy` is the tree the build would read off a render: each node renders a layer (`{ \"__ref\": \"layer:<name>\" }`), an intrinsic tag, or `Slot` (`{ \"element\": \"Slot\", \"props\": { \"name\": \"children\" } }`, where a slot prop's content lands — but a declared slot fills `root` by default, so a primitive still declares its `children` slot prop yet needs no `Slot` node or `children` entry for it, and a `Slot` node is only for landing that content in a nested layer); `children` lists sibling node keys from the `root` node, never a prop name; `text` is a fixed string; `visible` is a condition on a prop (`{ \"$state\": \"<prop>\" }`, or with `eq`); content shown in a nested layer is a route, `children: { \"type\": \"forward\", \"target\": \"label/children\" }`. `$state` appears only in `visible` and in an `element` a prop chooses, never as a prop value. A glyph is a node of its own, `{ \"element\": { \"__ref\": \"icon:<library>/<Name>\" } }`, listed in the `children` of the layer node that holds it, never a prop value. Text a prop supplies to a text layer is never a node either: declare the prop `{ \"type\": \"forward\", \"target\": \"<layer>/children\" }` and the layer shows it; a `Slot` node goes only under a layer that takes nodes. A style rule is `\"styles\": { \"*\": { \"when\": null, \"layers\": { \"root\": { \"bg\": \"surface\" } } } }`, keyed by a name, with each layer's bag under `layers`. A composed component carries its own styles: give it an unconditional (`\"*\"`) rule that lays out and surfaces it through the system's style properties — spacing, alignment and gap on the container, a background and color where it has one — rather than leaning on the bare primitives, which paint flat. Style a layer only with the style props the primitive it renders exposes, set to the values those props accept: `component/get` on the primitive lists both, so read it and choose from that rather than reaching for a CSS name or value the system has no style property for. Set `preview` (`{ \"*\": { \"when\": null, \"props\": { \"children\": \"Example\" } } }`) or `defaultProps` so the component previews with content; a root that takes children renders empty otherwise. A style rule's layer bag is keyed by style-prop name (`fontWeight`, `color`), never by CSS property name, and each value is one of that prop's values.";
         readonly example: ({

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

@@ -15,10 +15,11 @@ import { StoredPreviewCondition } from "../framework/preview-store.js";
 import { listSlots, namedSlots, slotHostedBy, slotOf } from "../spec/slot.js";
 import { cellAt } from "../spec/cell.js";
 import { instanceAt } from "../spec/instance.js";
-import { DerivedColor, Gradient } from "../entities/system/color.js";
+import { ComposedValue } from "../entities/system/composed-values.js";
+import { DerivedColor } from "../entities/system/color.js";
 import { StyleValue } from "../entities/system/style-bag.js";
+import { OverrideCondition, TokenRefPath, TokenReference } from "../entities/system/Token.js";
 import { ComponentElementBody, ComponentReference, ComponentStyleBody } from "../entities/system/Component.js";
-import { OverrideCondition } from "../entities/system/Token.js";
 import * as _$zod from "zod";
 import * as _$zod_v4_core0 from "zod/v4/core";
 
@@ -50,6 +51,7 @@ declare const ReactNativeSystem: ConfigClass<{
       }, _$zod_v4_core0.$strict>]>>;
       scope: _$zod.ZodOptional<_$zod.ZodString>;
       preflight: _$zod.ZodOptional<_$zod.ZodBoolean>;
+      rem: _$zod.ZodOptional<_$zod.ZodString>;
       safelist: _$zod.ZodOptional<_$zod.ZodArray<_$zod.ZodString>>;
     }, _$zod_v4_core0.$strict>>;
     playground: _$zod.ZodOptional<_$zod.ZodObject<{
@@ -62,11 +64,11 @@ declare const ReactNativeSystem: ConfigClass<{
     }, _$zod_v4_core0.$strict>>;
   }, _$zod_v4_core0.$strip>, _$zod.ZodObject<Omit<Record<never, never>, never> & {}, _$zod_v4_core0.$strip>, "settings", Record<never, never>, Record<never, never>, true, Record<never, never>, Record<never, never>>;
   tokens: EntityClass<_$zod.ZodObject<Omit<{
-    value: _$zod.ZodType<string | number | Ref | DerivedColor | Gradient, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | DerivedColor | Gradient, unknown>>;
+    value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
     type: _$zod.ZodOptional<_$zod.ZodString>;
     overrides: _$zod.ZodOptional<SubEntityClass<_$zod.ZodObject<{
       on: _$zod.ZodType<OverrideCondition, unknown, _$zod_v4_core0.$ZodTypeInternals<OverrideCondition, unknown>>;
-      value: _$zod.ZodType<string | number | Ref | DerivedColor | Gradient, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | DerivedColor | Gradient, unknown>>;
+      value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
     }, _$zod_v4_core0.$strip>>>;
   }, "value" | "overrides"> & {
     value: _$zod.ZodType<string | number | boolean | Ref | DerivedColor, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | boolean | Ref | DerivedColor, unknown>>;
@@ -249,6 +251,22 @@ declare const ReactNativeSystem: ConfigClass<{
       __ref: _$zod.ZodString;
     }, _$zod_v4_core0.$strip>>;
     export: _$zod.ZodOptional<_$zod.ZodString>;
+    tokenRefs: _$zod.ZodOptional<_$zod.ZodArray<Omit<EntityClass<_$zod.ZodObject<{
+      value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+      type: _$zod.ZodOptional<_$zod.ZodString>;
+      overrides: _$zod.ZodOptional<SubEntityClass<_$zod.ZodObject<{
+        on: _$zod.ZodType<OverrideCondition, unknown, _$zod_v4_core0.$ZodTypeInternals<OverrideCondition, unknown>>;
+        value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+      }, _$zod_v4_core0.$strip>>>;
+    }, _$zod_v4_core0.$strip>, _$zod.ZodObject<{
+      cssPrefix: _$zod.ZodOptional<_$zod.ZodString>;
+    }, _$zod_v4_core0.$strip>, "token", {
+      readonly create: {
+        readonly description: `Create a token at \`<group>/<name>\` \u2014 \`data.value\` is the CSS value. The first path segment is its group, and a style property takes a whole group as one ref (\`${string}\`), so put the tokens one prop should offer in one group rather than listing values on the prop.`;
+      };
+    }, Record<never, never>, false, Record<never, never>, Record<never, never>>, "ref"> & {
+      readonly ref: <const Path extends TokenRefPath>(path: Path) => TokenReference<Path>;
+    }>>;
   }, _$zod_v4_core0.$strict>, _$zod.ZodObject<{
     icon: _$zod.ZodOptional<_$zod.ZodString>;
   }, _$zod_v4_core0.$strip>, "component", {
@@ -421,6 +439,22 @@ declare const ReactNativeSystem: ConfigClass<{
           __ref: _$zod.ZodString;
         }, _$zod_v4_core0.$strip>>;
         export: _$zod.ZodOptional<_$zod.ZodString>;
+        tokenRefs: _$zod.ZodOptional<_$zod.ZodArray<Omit<EntityClass<_$zod.ZodObject<{
+          value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+          type: _$zod.ZodOptional<_$zod.ZodString>;
+          overrides: _$zod.ZodOptional<SubEntityClass<_$zod.ZodObject<{
+            on: _$zod.ZodType<OverrideCondition, unknown, _$zod_v4_core0.$ZodTypeInternals<OverrideCondition, unknown>>;
+            value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+          }, _$zod_v4_core0.$strip>>>;
+        }, _$zod_v4_core0.$strip>, _$zod.ZodObject<{
+          cssPrefix: _$zod.ZodOptional<_$zod.ZodString>;
+        }, _$zod_v4_core0.$strip>, "token", {
+          readonly create: {
+            readonly description: `Create a token at \`<group>/<name>\` \u2014 \`data.value\` is the CSS value. The first path segment is its group, and a style property takes a whole group as one ref (\`${string}\`), so put the tokens one prop should offer in one group rather than listing values on the prop.`;
+          };
+        }, Record<never, never>, false, Record<never, never>, Record<never, never>>, "ref"> & {
+          readonly ref: <const Path extends TokenRefPath>(path: Path) => TokenReference<Path>;
+        }>>;
       }, _$zod_v4_core0.$strict>;
       readonly description: "Create a component at a new qualified `path`. For a component with nothing in it yet, one to design on the canvas before it has props or variants, use `create-blank` with only a `path` instead of authoring a minimal body here. When its complete body is known, include all layers, anatomy, props, defaults, and styles in this one operation. `data.layers` maps each stable layer name to the element it renders and must include `root` — a tag for a primitive (`{ \"layers\": { \"root\": \"div\" } }`), and for anything built on top, a ref to a primitive (`{ \"root\": { \"__ref\": \"component:Box\" }, \"label\": { \"__ref\": \"component:Text\" } }`), which is what lets the layer take that primitive's style props. A primitive exposes style props as `{ \"type\": \"styleProperty\", \"value\": { \"__ref\": \"style-property:bg\" } }` and declares `children: { \"type\": \"slot\", \"text\": true }` when it holds content — without the slot, nothing nested inside it renders. A composed component exposes a layer's props at its own top level through `forwards`, keyed by layer: `{ \"forwards\": { \"root\": \"*\" } }` passes every prop the root's element takes (so `<Button width=\"full\">` reaches the root's `width`), and a list of member refs (`[{ \"__ref\": \"component:Box#props/width\" }]`, each naming the component that declares the prop) passes only those. A prop a layer already exposes is forwarded, never redeclared in `props`; a `props` entry of `{ \"type\": \"forward\" }` is the reverse route, one of this component's props into a layer's. `anatomy` is the tree the build would read off a render: each node renders a layer (`{ \"__ref\": \"layer:<name>\" }`), an intrinsic tag, or `Slot` (`{ \"element\": \"Slot\", \"props\": { \"name\": \"children\" } }`, where a slot prop's content lands — but a declared slot fills `root` by default, so a primitive still declares its `children` slot prop yet needs no `Slot` node or `children` entry for it, and a `Slot` node is only for landing that content in a nested layer); `children` lists sibling node keys from the `root` node, never a prop name; `text` is a fixed string; `visible` is a condition on a prop (`{ \"$state\": \"<prop>\" }`, or with `eq`); content shown in a nested layer is a route, `children: { \"type\": \"forward\", \"target\": \"label/children\" }`. `$state` appears only in `visible` and in an `element` a prop chooses, never as a prop value. A glyph is a node of its own, `{ \"element\": { \"__ref\": \"icon:<library>/<Name>\" } }`, listed in the `children` of the layer node that holds it, never a prop value. Text a prop supplies to a text layer is never a node either: declare the prop `{ \"type\": \"forward\", \"target\": \"<layer>/children\" }` and the layer shows it; a `Slot` node goes only under a layer that takes nodes. A style rule is `\"styles\": { \"*\": { \"when\": null, \"layers\": { \"root\": { \"bg\": \"surface\" } } } }`, keyed by a name, with each layer's bag under `layers`. A composed component carries its own styles: give it an unconditional (`\"*\"`) rule that lays out and surfaces it through the system's style properties — spacing, alignment and gap on the container, a background and color where it has one — rather than leaning on the bare primitives, which paint flat. Style a layer only with the style props the primitive it renders exposes, set to the values those props accept: `component/get` on the primitive lists both, so read it and choose from that rather than reaching for a CSS name or value the system has no style property for. Set `preview` (`{ \"*\": { \"when\": null, \"props\": { \"children\": \"Example\" } } }`) or `defaultProps` so the component previews with content; a root that takes children renders empty otherwise. A style rule's layer bag is keyed by style-prop name (`fontWeight`, `color`), never by CSS property name, and each value is one of that prop's values.";
       readonly example: ({
@@ -1468,8 +1502,8 @@ declare const ReactNativeSystem: ConfigClass<{
     value: _$zod.ZodUnion<readonly [_$zod.ZodString, _$zod.ZodNumber]>;
   }, _$zod_v4_core0.$strip>, _$zod.ZodObject<{
     type: _$zod.ZodOptional<_$zod.ZodEnum<{
-      state: "state";
       mode: "mode";
+      state: "state";
     }>>;
     default: _$zod.ZodOptional<_$zod.ZodObject<{
       __ref: _$zod.ZodString;
@@ -2204,6 +2238,7 @@ declare const ReactNativeSystem: ConfigClass<{
         }, _$zod_v4_core0.$strict>]>>;
         scope: _$zod.ZodOptional<_$zod.ZodString>;
         preflight: _$zod.ZodOptional<_$zod.ZodBoolean>;
+        rem: _$zod.ZodOptional<_$zod.ZodString>;
         safelist: _$zod.ZodOptional<_$zod.ZodArray<_$zod.ZodString>>;
       }, _$zod_v4_core0.$strict>>;
       playground: _$zod.ZodOptional<_$zod.ZodObject<{
@@ -2216,11 +2251,11 @@ declare const ReactNativeSystem: ConfigClass<{
       }, _$zod_v4_core0.$strict>>;
     }, _$zod_v4_core0.$strip>, _$zod.ZodObject<Omit<Record<never, never>, never> & {}, _$zod_v4_core0.$strip>, "settings", Record<never, never>, Record<never, never>, true, Record<never, never>, Record<never, never>>;
     tokens: EntityClass<_$zod.ZodObject<Omit<{
-      value: _$zod.ZodType<string | number | Ref | DerivedColor | Gradient, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | DerivedColor | Gradient, unknown>>;
+      value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
       type: _$zod.ZodOptional<_$zod.ZodString>;
       overrides: _$zod.ZodOptional<SubEntityClass<_$zod.ZodObject<{
         on: _$zod.ZodType<OverrideCondition, unknown, _$zod_v4_core0.$ZodTypeInternals<OverrideCondition, unknown>>;
-        value: _$zod.ZodType<string | number | Ref | DerivedColor | Gradient, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | DerivedColor | Gradient, unknown>>;
+        value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
       }, _$zod_v4_core0.$strip>>>;
     }, "value" | "overrides"> & {
       value: _$zod.ZodType<string | number | boolean | Ref | DerivedColor, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | boolean | Ref | DerivedColor, unknown>>;
@@ -2403,6 +2438,22 @@ declare const ReactNativeSystem: ConfigClass<{
         __ref: _$zod.ZodString;
       }, _$zod_v4_core0.$strip>>;
       export: _$zod.ZodOptional<_$zod.ZodString>;
+      tokenRefs: _$zod.ZodOptional<_$zod.ZodArray<Omit<EntityClass<_$zod.ZodObject<{
+        value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+        type: _$zod.ZodOptional<_$zod.ZodString>;
+        overrides: _$zod.ZodOptional<SubEntityClass<_$zod.ZodObject<{
+          on: _$zod.ZodType<OverrideCondition, unknown, _$zod_v4_core0.$ZodTypeInternals<OverrideCondition, unknown>>;
+          value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+        }, _$zod_v4_core0.$strip>>>;
+      }, _$zod_v4_core0.$strip>, _$zod.ZodObject<{
+        cssPrefix: _$zod.ZodOptional<_$zod.ZodString>;
+      }, _$zod_v4_core0.$strip>, "token", {
+        readonly create: {
+          readonly description: `Create a token at \`<group>/<name>\` \u2014 \`data.value\` is the CSS value. The first path segment is its group, and a style property takes a whole group as one ref (\`${string}\`), so put the tokens one prop should offer in one group rather than listing values on the prop.`;
+        };
+      }, Record<never, never>, false, Record<never, never>, Record<never, never>>, "ref"> & {
+        readonly ref: <const Path extends TokenRefPath>(path: Path) => TokenReference<Path>;
+      }>>;
     }, _$zod_v4_core0.$strict>, _$zod.ZodObject<{
       icon: _$zod.ZodOptional<_$zod.ZodString>;
     }, _$zod_v4_core0.$strip>, "component", {
@@ -2575,6 +2626,22 @@ declare const ReactNativeSystem: ConfigClass<{
             __ref: _$zod.ZodString;
           }, _$zod_v4_core0.$strip>>;
           export: _$zod.ZodOptional<_$zod.ZodString>;
+          tokenRefs: _$zod.ZodOptional<_$zod.ZodArray<Omit<EntityClass<_$zod.ZodObject<{
+            value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+            type: _$zod.ZodOptional<_$zod.ZodString>;
+            overrides: _$zod.ZodOptional<SubEntityClass<_$zod.ZodObject<{
+              on: _$zod.ZodType<OverrideCondition, unknown, _$zod_v4_core0.$ZodTypeInternals<OverrideCondition, unknown>>;
+              value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+            }, _$zod_v4_core0.$strip>>>;
+          }, _$zod_v4_core0.$strip>, _$zod.ZodObject<{
+            cssPrefix: _$zod.ZodOptional<_$zod.ZodString>;
+          }, _$zod_v4_core0.$strip>, "token", {
+            readonly create: {
+              readonly description: `Create a token at \`<group>/<name>\` \u2014 \`data.value\` is the CSS value. The first path segment is its group, and a style property takes a whole group as one ref (\`${string}\`), so put the tokens one prop should offer in one group rather than listing values on the prop.`;
+            };
+          }, Record<never, never>, false, Record<never, never>, Record<never, never>>, "ref"> & {
+            readonly ref: <const Path extends TokenRefPath>(path: Path) => TokenReference<Path>;
+          }>>;
         }, _$zod_v4_core0.$strict>;
         readonly description: "Create a component at a new qualified `path`. For a component with nothing in it yet, one to design on the canvas before it has props or variants, use `create-blank` with only a `path` instead of authoring a minimal body here. When its complete body is known, include all layers, anatomy, props, defaults, and styles in this one operation. `data.layers` maps each stable layer name to the element it renders and must include `root` — a tag for a primitive (`{ \"layers\": { \"root\": \"div\" } }`), and for anything built on top, a ref to a primitive (`{ \"root\": { \"__ref\": \"component:Box\" }, \"label\": { \"__ref\": \"component:Text\" } }`), which is what lets the layer take that primitive's style props. A primitive exposes style props as `{ \"type\": \"styleProperty\", \"value\": { \"__ref\": \"style-property:bg\" } }` and declares `children: { \"type\": \"slot\", \"text\": true }` when it holds content — without the slot, nothing nested inside it renders. A composed component exposes a layer's props at its own top level through `forwards`, keyed by layer: `{ \"forwards\": { \"root\": \"*\" } }` passes every prop the root's element takes (so `<Button width=\"full\">` reaches the root's `width`), and a list of member refs (`[{ \"__ref\": \"component:Box#props/width\" }]`, each naming the component that declares the prop) passes only those. A prop a layer already exposes is forwarded, never redeclared in `props`; a `props` entry of `{ \"type\": \"forward\" }` is the reverse route, one of this component's props into a layer's. `anatomy` is the tree the build would read off a render: each node renders a layer (`{ \"__ref\": \"layer:<name>\" }`), an intrinsic tag, or `Slot` (`{ \"element\": \"Slot\", \"props\": { \"name\": \"children\" } }`, where a slot prop's content lands — but a declared slot fills `root` by default, so a primitive still declares its `children` slot prop yet needs no `Slot` node or `children` entry for it, and a `Slot` node is only for landing that content in a nested layer); `children` lists sibling node keys from the `root` node, never a prop name; `text` is a fixed string; `visible` is a condition on a prop (`{ \"$state\": \"<prop>\" }`, or with `eq`); content shown in a nested layer is a route, `children: { \"type\": \"forward\", \"target\": \"label/children\" }`. `$state` appears only in `visible` and in an `element` a prop chooses, never as a prop value. A glyph is a node of its own, `{ \"element\": { \"__ref\": \"icon:<library>/<Name>\" } }`, listed in the `children` of the layer node that holds it, never a prop value. Text a prop supplies to a text layer is never a node either: declare the prop `{ \"type\": \"forward\", \"target\": \"<layer>/children\" }` and the layer shows it; a `Slot` node goes only under a layer that takes nodes. A style rule is `\"styles\": { \"*\": { \"when\": null, \"layers\": { \"root\": { \"bg\": \"surface\" } } } }`, keyed by a name, with each layer's bag under `layers`. A composed component carries its own styles: give it an unconditional (`\"*\"`) rule that lays out and surfaces it through the system's style properties — spacing, alignment and gap on the container, a background and color where it has one — rather than leaning on the bare primitives, which paint flat. Style a layer only with the style props the primitive it renders exposes, set to the values those props accept: `component/get` on the primitive lists both, so read it and choose from that rather than reaching for a CSS name or value the system has no style property for. Set `preview` (`{ \"*\": { \"when\": null, \"props\": { \"children\": \"Example\" } } }`) or `defaultProps` so the component previews with content; a root that takes children renders empty otherwise. A style rule's layer bag is keyed by style-prop name (`fontWeight`, `color`), never by CSS property name, and each value is one of that prop's values.";
         readonly example: ({
@@ -3622,8 +3689,8 @@ declare const ReactNativeSystem: ConfigClass<{
       value: _$zod.ZodUnion<readonly [_$zod.ZodString, _$zod.ZodNumber]>;
     }, _$zod_v4_core0.$strip>, _$zod.ZodObject<{
       type: _$zod.ZodOptional<_$zod.ZodEnum<{
-        state: "state";
         mode: "mode";
+        state: "state";
       }>>;
       default: _$zod.ZodOptional<_$zod.ZodObject<{
         __ref: _$zod.ZodString;

package/dist/configs/system.d.ts

@@ -15,10 +15,10 @@ import { StoredPreviewCondition } from "../framework/preview-store.js";
 import { listSlots, namedSlots, slotHostedBy, slotOf } from "../spec/slot.js";
 import { cellAt } from "../spec/cell.js";
 import { instanceAt } from "../spec/instance.js";
-import { DerivedColor, Gradient } from "../entities/system/color.js";
+import { ComposedValue } from "../entities/system/composed-values.js";
 import { StyleValue } from "../entities/system/style-bag.js";
+import { OverrideCondition, TokenRefPath, TokenReference } from "../entities/system/Token.js";
 import { ComponentElementBody, ComponentReference, ComponentStyleBody } from "../entities/system/Component.js";
-import { OverrideCondition } from "../entities/system/Token.js";
 import * as _$zod from "zod";
 import * as _$zod_v4_core0 from "zod/v4/core";
 
@@ -48,6 +48,7 @@ declare const System: ConfigClass<{
       }, _$zod_v4_core0.$strict>]>>;
       scope: _$zod.ZodOptional<_$zod.ZodString>;
       preflight: _$zod.ZodOptional<_$zod.ZodBoolean>;
+      rem: _$zod.ZodOptional<_$zod.ZodString>;
       safelist: _$zod.ZodOptional<_$zod.ZodArray<_$zod.ZodString>>;
     }, _$zod_v4_core0.$strict>>;
     playground: _$zod.ZodOptional<_$zod.ZodObject<{
@@ -55,12 +56,12 @@ declare const System: ConfigClass<{
       port: _$zod.ZodOptional<_$zod.ZodNumber>;
     }, _$zod_v4_core0.$strict>>;
   }, _$zod_v4_core0.$strict>, _$zod.ZodObject<Record<never, never>, _$zod_v4_core0.$strip>, "settings", Record<never, never>, Record<never, never>, true, Record<never, never>, Record<never, never>>;
-  tokens: EntityClass<_$zod.ZodObject<{
-    value: _$zod.ZodType<string | number | Ref | DerivedColor | Gradient, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | DerivedColor | Gradient, unknown>>;
+  tokens: Omit<EntityClass<_$zod.ZodObject<{
+    value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
     type: _$zod.ZodOptional<_$zod.ZodString>;
     overrides: _$zod.ZodOptional<SubEntityClass<_$zod.ZodObject<{
       on: _$zod.ZodType<OverrideCondition, unknown, _$zod_v4_core0.$ZodTypeInternals<OverrideCondition, unknown>>;
-      value: _$zod.ZodType<string | number | Ref | DerivedColor | Gradient, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | DerivedColor | Gradient, unknown>>;
+      value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
     }, _$zod_v4_core0.$strip>>>;
   }, _$zod_v4_core0.$strip>, _$zod.ZodObject<{
     cssPrefix: _$zod.ZodOptional<_$zod.ZodString>;
@@ -68,7 +69,9 @@ declare const System: ConfigClass<{
     readonly create: {
       readonly description: `Create a token at \`<group>/<name>\` \u2014 \`data.value\` is the CSS value. The first path segment is its group, and a style property takes a whole group as one ref (\`${string}\`), so put the tokens one prop should offer in one group rather than listing values on the prop.`;
     };
-  }, Record<never, never>, false, Record<never, never>, Record<never, never>>;
+  }, Record<never, never>, false, Record<never, never>, Record<never, never>>, "ref"> & {
+    readonly ref: <const Path extends TokenRefPath>(path: Path) => TokenReference<Path>;
+  };
   components: Omit<EntityClass<_$zod.ZodObject<{
     layers: SubEntityClass<_$zod.ZodUnion<readonly [_$zod.ZodString, _$zod.ZodLazy<_$zod.ZodType<Ref, unknown, _$zod_v4_core0.$ZodTypeInternals<Ref, unknown>>>, EntityClass<_$zod.ZodObject<{
       version: _$zod.ZodOptional<_$zod.ZodString>;
@@ -237,6 +240,22 @@ declare const System: ConfigClass<{
       __ref: _$zod.ZodString;
     }, _$zod_v4_core0.$strip>>;
     export: _$zod.ZodOptional<_$zod.ZodString>;
+    tokenRefs: _$zod.ZodOptional<_$zod.ZodArray<Omit<EntityClass<_$zod.ZodObject<{
+      value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+      type: _$zod.ZodOptional<_$zod.ZodString>;
+      overrides: _$zod.ZodOptional<SubEntityClass<_$zod.ZodObject<{
+        on: _$zod.ZodType<OverrideCondition, unknown, _$zod_v4_core0.$ZodTypeInternals<OverrideCondition, unknown>>;
+        value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+      }, _$zod_v4_core0.$strip>>>;
+    }, _$zod_v4_core0.$strip>, _$zod.ZodObject<{
+      cssPrefix: _$zod.ZodOptional<_$zod.ZodString>;
+    }, _$zod_v4_core0.$strip>, "token", {
+      readonly create: {
+        readonly description: `Create a token at \`<group>/<name>\` \u2014 \`data.value\` is the CSS value. The first path segment is its group, and a style property takes a whole group as one ref (\`${string}\`), so put the tokens one prop should offer in one group rather than listing values on the prop.`;
+      };
+    }, Record<never, never>, false, Record<never, never>, Record<never, never>>, "ref"> & {
+      readonly ref: <const Path extends TokenRefPath>(path: Path) => TokenReference<Path>;
+    }>>;
   }, _$zod_v4_core0.$strict>, _$zod.ZodObject<{
     icon: _$zod.ZodOptional<_$zod.ZodString>;
   }, _$zod_v4_core0.$strip>, "component", {
@@ -409,6 +428,22 @@ declare const System: ConfigClass<{
           __ref: _$zod.ZodString;
         }, _$zod_v4_core0.$strip>>;
         export: _$zod.ZodOptional<_$zod.ZodString>;
+        tokenRefs: _$zod.ZodOptional<_$zod.ZodArray<Omit<EntityClass<_$zod.ZodObject<{
+          value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+          type: _$zod.ZodOptional<_$zod.ZodString>;
+          overrides: _$zod.ZodOptional<SubEntityClass<_$zod.ZodObject<{
+            on: _$zod.ZodType<OverrideCondition, unknown, _$zod_v4_core0.$ZodTypeInternals<OverrideCondition, unknown>>;
+            value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+          }, _$zod_v4_core0.$strip>>>;
+        }, _$zod_v4_core0.$strip>, _$zod.ZodObject<{
+          cssPrefix: _$zod.ZodOptional<_$zod.ZodString>;
+        }, _$zod_v4_core0.$strip>, "token", {
+          readonly create: {
+            readonly description: `Create a token at \`<group>/<name>\` \u2014 \`data.value\` is the CSS value. The first path segment is its group, and a style property takes a whole group as one ref (\`${string}\`), so put the tokens one prop should offer in one group rather than listing values on the prop.`;
+          };
+        }, Record<never, never>, false, Record<never, never>, Record<never, never>>, "ref"> & {
+          readonly ref: <const Path extends TokenRefPath>(path: Path) => TokenReference<Path>;
+        }>>;
       }, _$zod_v4_core0.$strict>;
       readonly description: "Create a component at a new qualified `path`. For a component with nothing in it yet, one to design on the canvas before it has props or variants, use `create-blank` with only a `path` instead of authoring a minimal body here. When its complete body is known, include all layers, anatomy, props, defaults, and styles in this one operation. `data.layers` maps each stable layer name to the element it renders and must include `root` — a tag for a primitive (`{ \"layers\": { \"root\": \"div\" } }`), and for anything built on top, a ref to a primitive (`{ \"root\": { \"__ref\": \"component:Box\" }, \"label\": { \"__ref\": \"component:Text\" } }`), which is what lets the layer take that primitive's style props. A primitive exposes style props as `{ \"type\": \"styleProperty\", \"value\": { \"__ref\": \"style-property:bg\" } }` and declares `children: { \"type\": \"slot\", \"text\": true }` when it holds content — without the slot, nothing nested inside it renders. A composed component exposes a layer's props at its own top level through `forwards`, keyed by layer: `{ \"forwards\": { \"root\": \"*\" } }` passes every prop the root's element takes (so `<Button width=\"full\">` reaches the root's `width`), and a list of member refs (`[{ \"__ref\": \"component:Box#props/width\" }]`, each naming the component that declares the prop) passes only those. A prop a layer already exposes is forwarded, never redeclared in `props`; a `props` entry of `{ \"type\": \"forward\" }` is the reverse route, one of this component's props into a layer's. `anatomy` is the tree the build would read off a render: each node renders a layer (`{ \"__ref\": \"layer:<name>\" }`), an intrinsic tag, or `Slot` (`{ \"element\": \"Slot\", \"props\": { \"name\": \"children\" } }`, where a slot prop's content lands — but a declared slot fills `root` by default, so a primitive still declares its `children` slot prop yet needs no `Slot` node or `children` entry for it, and a `Slot` node is only for landing that content in a nested layer); `children` lists sibling node keys from the `root` node, never a prop name; `text` is a fixed string; `visible` is a condition on a prop (`{ \"$state\": \"<prop>\" }`, or with `eq`); content shown in a nested layer is a route, `children: { \"type\": \"forward\", \"target\": \"label/children\" }`. `$state` appears only in `visible` and in an `element` a prop chooses, never as a prop value. A glyph is a node of its own, `{ \"element\": { \"__ref\": \"icon:<library>/<Name>\" } }`, listed in the `children` of the layer node that holds it, never a prop value. Text a prop supplies to a text layer is never a node either: declare the prop `{ \"type\": \"forward\", \"target\": \"<layer>/children\" }` and the layer shows it; a `Slot` node goes only under a layer that takes nodes. A style rule is `\"styles\": { \"*\": { \"when\": null, \"layers\": { \"root\": { \"bg\": \"surface\" } } } }`, keyed by a name, with each layer's bag under `layers`. A composed component carries its own styles: give it an unconditional (`\"*\"`) rule that lays out and surfaces it through the system's style properties — spacing, alignment and gap on the container, a background and color where it has one — rather than leaning on the bare primitives, which paint flat. Style a layer only with the style props the primitive it renders exposes, set to the values those props accept: `component/get` on the primitive lists both, so read it and choose from that rather than reaching for a CSS name or value the system has no style property for. Set `preview` (`{ \"*\": { \"when\": null, \"props\": { \"children\": \"Example\" } } }`) or `defaultProps` so the component previews with content; a root that takes children renders empty otherwise. A style rule's layer bag is keyed by style-prop name (`fontWeight`, `color`), never by CSS property name, and each value is one of that prop's values.";
       readonly example: ({
@@ -1457,8 +1492,8 @@ declare const System: ConfigClass<{
     }, _$zod_v4_core0.$strip>, _$zod.ZodObject<Record<never, never>, _$zod_v4_core0.$strip>, "composite", Record<never, never>, Record<never, never>, false, Record<never, never>, Record<never, never>>>]>;
   }, _$zod_v4_core0.$strip>, _$zod.ZodObject<{
     type: _$zod.ZodOptional<_$zod.ZodEnum<{
-      state: "state";
       mode: "mode";
+      state: "state";
     }>>;
     default: _$zod.ZodOptional<_$zod.ZodObject<{
       __ref: _$zod.ZodString;
@@ -2074,6 +2109,7 @@ declare const System: ConfigClass<{
         }, _$zod_v4_core0.$strict>]>>;
         scope: _$zod.ZodOptional<_$zod.ZodString>;
         preflight: _$zod.ZodOptional<_$zod.ZodBoolean>;
+        rem: _$zod.ZodOptional<_$zod.ZodString>;
         safelist: _$zod.ZodOptional<_$zod.ZodArray<_$zod.ZodString>>;
       }, _$zod_v4_core0.$strict>>;
       playground: _$zod.ZodOptional<_$zod.ZodObject<{
@@ -2081,12 +2117,12 @@ declare const System: ConfigClass<{
         port: _$zod.ZodOptional<_$zod.ZodNumber>;
       }, _$zod_v4_core0.$strict>>;
     }, _$zod_v4_core0.$strict>, _$zod.ZodObject<Record<never, never>, _$zod_v4_core0.$strip>, "settings", Record<never, never>, Record<never, never>, true, Record<never, never>, Record<never, never>>;
-    tokens: EntityClass<_$zod.ZodObject<{
-      value: _$zod.ZodType<string | number | Ref | DerivedColor | Gradient, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | DerivedColor | Gradient, unknown>>;
+    tokens: Omit<EntityClass<_$zod.ZodObject<{
+      value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
       type: _$zod.ZodOptional<_$zod.ZodString>;
       overrides: _$zod.ZodOptional<SubEntityClass<_$zod.ZodObject<{
         on: _$zod.ZodType<OverrideCondition, unknown, _$zod_v4_core0.$ZodTypeInternals<OverrideCondition, unknown>>;
-        value: _$zod.ZodType<string | number | Ref | DerivedColor | Gradient, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | DerivedColor | Gradient, unknown>>;
+        value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
       }, _$zod_v4_core0.$strip>>>;
     }, _$zod_v4_core0.$strip>, _$zod.ZodObject<{
       cssPrefix: _$zod.ZodOptional<_$zod.ZodString>;
@@ -2094,7 +2130,9 @@ declare const System: ConfigClass<{
       readonly create: {
         readonly description: `Create a token at \`<group>/<name>\` \u2014 \`data.value\` is the CSS value. The first path segment is its group, and a style property takes a whole group as one ref (\`${string}\`), so put the tokens one prop should offer in one group rather than listing values on the prop.`;
       };
-    }, Record<never, never>, false, Record<never, never>, Record<never, never>>;
+    }, Record<never, never>, false, Record<never, never>, Record<never, never>>, "ref"> & {
+      readonly ref: <const Path extends TokenRefPath>(path: Path) => TokenReference<Path>;
+    };
     components: Omit<EntityClass<_$zod.ZodObject<{
       layers: SubEntityClass<_$zod.ZodUnion<readonly [_$zod.ZodString, _$zod.ZodLazy<_$zod.ZodType<Ref, unknown, _$zod_v4_core0.$ZodTypeInternals<Ref, unknown>>>, EntityClass<_$zod.ZodObject<{
         version: _$zod.ZodOptional<_$zod.ZodString>;
@@ -2263,6 +2301,22 @@ declare const System: ConfigClass<{
         __ref: _$zod.ZodString;
       }, _$zod_v4_core0.$strip>>;
       export: _$zod.ZodOptional<_$zod.ZodString>;
+      tokenRefs: _$zod.ZodOptional<_$zod.ZodArray<Omit<EntityClass<_$zod.ZodObject<{
+        value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+        type: _$zod.ZodOptional<_$zod.ZodString>;
+        overrides: _$zod.ZodOptional<SubEntityClass<_$zod.ZodObject<{
+          on: _$zod.ZodType<OverrideCondition, unknown, _$zod_v4_core0.$ZodTypeInternals<OverrideCondition, unknown>>;
+          value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+        }, _$zod_v4_core0.$strip>>>;
+      }, _$zod_v4_core0.$strip>, _$zod.ZodObject<{
+        cssPrefix: _$zod.ZodOptional<_$zod.ZodString>;
+      }, _$zod_v4_core0.$strip>, "token", {
+        readonly create: {
+          readonly description: `Create a token at \`<group>/<name>\` \u2014 \`data.value\` is the CSS value. The first path segment is its group, and a style property takes a whole group as one ref (\`${string}\`), so put the tokens one prop should offer in one group rather than listing values on the prop.`;
+        };
+      }, Record<never, never>, false, Record<never, never>, Record<never, never>>, "ref"> & {
+        readonly ref: <const Path extends TokenRefPath>(path: Path) => TokenReference<Path>;
+      }>>;
     }, _$zod_v4_core0.$strict>, _$zod.ZodObject<{
       icon: _$zod.ZodOptional<_$zod.ZodString>;
     }, _$zod_v4_core0.$strip>, "component", {
@@ -2435,6 +2489,22 @@ declare const System: ConfigClass<{
             __ref: _$zod.ZodString;
           }, _$zod_v4_core0.$strip>>;
           export: _$zod.ZodOptional<_$zod.ZodString>;
+          tokenRefs: _$zod.ZodOptional<_$zod.ZodArray<Omit<EntityClass<_$zod.ZodObject<{
+            value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+            type: _$zod.ZodOptional<_$zod.ZodString>;
+            overrides: _$zod.ZodOptional<SubEntityClass<_$zod.ZodObject<{
+              on: _$zod.ZodType<OverrideCondition, unknown, _$zod_v4_core0.$ZodTypeInternals<OverrideCondition, unknown>>;
+              value: _$zod.ZodType<string | number | Ref | ComposedValue, unknown, _$zod_v4_core0.$ZodTypeInternals<string | number | Ref | ComposedValue, unknown>>;
+            }, _$zod_v4_core0.$strip>>>;
+          }, _$zod_v4_core0.$strip>, _$zod.ZodObject<{
+            cssPrefix: _$zod.ZodOptional<_$zod.ZodString>;
+          }, _$zod_v4_core0.$strip>, "token", {
+            readonly create: {
+              readonly description: `Create a token at \`<group>/<name>\` \u2014 \`data.value\` is the CSS value. The first path segment is its group, and a style property takes a whole group as one ref (\`${string}\`), so put the tokens one prop should offer in one group rather than listing values on the prop.`;
+            };
+          }, Record<never, never>, false, Record<never, never>, Record<never, never>>, "ref"> & {
+            readonly ref: <const Path extends TokenRefPath>(path: Path) => TokenReference<Path>;
+          }>>;
         }, _$zod_v4_core0.$strict>;
         readonly description: "Create a component at a new qualified `path`. For a component with nothing in it yet, one to design on the canvas before it has props or variants, use `create-blank` with only a `path` instead of authoring a minimal body here. When its complete body is known, include all layers, anatomy, props, defaults, and styles in this one operation. `data.layers` maps each stable layer name to the element it renders and must include `root` — a tag for a primitive (`{ \"layers\": { \"root\": \"div\" } }`), and for anything built on top, a ref to a primitive (`{ \"root\": { \"__ref\": \"component:Box\" }, \"label\": { \"__ref\": \"component:Text\" } }`), which is what lets the layer take that primitive's style props. A primitive exposes style props as `{ \"type\": \"styleProperty\", \"value\": { \"__ref\": \"style-property:bg\" } }` and declares `children: { \"type\": \"slot\", \"text\": true }` when it holds content — without the slot, nothing nested inside it renders. A composed component exposes a layer's props at its own top level through `forwards`, keyed by layer: `{ \"forwards\": { \"root\": \"*\" } }` passes every prop the root's element takes (so `<Button width=\"full\">` reaches the root's `width`), and a list of member refs (`[{ \"__ref\": \"component:Box#props/width\" }]`, each naming the component that declares the prop) passes only those. A prop a layer already exposes is forwarded, never redeclared in `props`; a `props` entry of `{ \"type\": \"forward\" }` is the reverse route, one of this component's props into a layer's. `anatomy` is the tree the build would read off a render: each node renders a layer (`{ \"__ref\": \"layer:<name>\" }`), an intrinsic tag, or `Slot` (`{ \"element\": \"Slot\", \"props\": { \"name\": \"children\" } }`, where a slot prop's content lands — but a declared slot fills `root` by default, so a primitive still declares its `children` slot prop yet needs no `Slot` node or `children` entry for it, and a `Slot` node is only for landing that content in a nested layer); `children` lists sibling node keys from the `root` node, never a prop name; `text` is a fixed string; `visible` is a condition on a prop (`{ \"$state\": \"<prop>\" }`, or with `eq`); content shown in a nested layer is a route, `children: { \"type\": \"forward\", \"target\": \"label/children\" }`. `$state` appears only in `visible` and in an `element` a prop chooses, never as a prop value. A glyph is a node of its own, `{ \"element\": { \"__ref\": \"icon:<library>/<Name>\" } }`, listed in the `children` of the layer node that holds it, never a prop value. Text a prop supplies to a text layer is never a node either: declare the prop `{ \"type\": \"forward\", \"target\": \"<layer>/children\" }` and the layer shows it; a `Slot` node goes only under a layer that takes nodes. A style rule is `\"styles\": { \"*\": { \"when\": null, \"layers\": { \"root\": { \"bg\": \"surface\" } } } }`, keyed by a name, with each layer's bag under `layers`. A composed component carries its own styles: give it an unconditional (`\"*\"`) rule that lays out and surfaces it through the system's style properties — spacing, alignment and gap on the container, a background and color where it has one — rather than leaning on the bare primitives, which paint flat. Style a layer only with the style props the primitive it renders exposes, set to the values those props accept: `component/get` on the primitive lists both, so read it and choose from that rather than reaching for a CSS name or value the system has no style property for. Set `preview` (`{ \"*\": { \"when\": null, \"props\": { \"children\": \"Example\" } } }`) or `defaultProps` so the component previews with content; a root that takes children renders empty otherwise. A style rule's layer bag is keyed by style-prop name (`fontWeight`, `color`), never by CSS property name, and each value is one of that prop's values.";
         readonly example: ({
@@ -3483,8 +3553,8 @@ declare const System: ConfigClass<{
       }, _$zod_v4_core0.$strip>, _$zod.ZodObject<Record<never, never>, _$zod_v4_core0.$strip>, "composite", Record<never, never>, Record<never, never>, false, Record<never, never>, Record<never, never>>>]>;
     }, _$zod_v4_core0.$strip>, _$zod.ZodObject<{
       type: _$zod.ZodOptional<_$zod.ZodEnum<{
-        state: "state";
         mode: "mode";
+        state: "state";
       }>>;
       default: _$zod.ZodOptional<_$zod.ZodObject<{
         __ref: _$zod.ZodString;

package/dist/configs/system.js

@@ -5,6 +5,7 @@ import { Modifier } from "../entities/system/Modifier.js";
 import { StyleProperty } from "../entities/system/StyleProperty.js";
 import { Package } from "../entities/system/Package.js";
 import { File } from "../entities/system/File.js";
+import { Token } from "../entities/system/Token.js";
 import { Component } from "../entities/system/Component.js";
 import { Icon } from "../entities/system/Icon.js";
 import { Device } from "../entities/system/Device.js";
@@ -19,7 +20,6 @@ import { GuidanceStyle } from "../entities/system/GuidanceStyle.js";
 import { WEB_CONFIG_NAME } from "./platform.js";
 import { LinkedSystem } from "../entities/system/LinkedSystem.js";
 import { Motion } from "../entities/system/Motion.js";
-import { Token } from "../entities/system/Token.js";
 import { loadV1Artifact } from "../migrations/2.0.0/v1-artifact.js";
 import { settingsAsKindMigration } from "../migrations/20260908171448_settings_as_kind.js";
 import { visibleStatePointerMigration } from "../migrations/20260908194245_visible_state_pointer.js";
@@ -37,6 +37,8 @@ import { iconLibraryWithoutComponentMigration } from "../migrations/202609210440
 import { iconLibrariesMigration } from "../migrations/20260922013625_icon_libraries.js";
 import { iconCanvasToolMigration } from "../migrations/20260923005318_icon_canvas_tool.js";
 import { computedValuesAndRepeatedNodesMigration } from "../migrations/20260923112910_computed_values_and_repeated_nodes.js";
+import { transitionTokenValueMigration } from "../migrations/20260923144958_transition_token_value.js";
+import { renderTokenRefsMigration } from "../migrations/20260923160425_render_token_refs.js";
 //#region src/configs/system.ts
 /**
 * `System` — the design-system config TYPE. Declares the exact kinds a design system owns (tokens,
@@ -94,5 +96,7 @@ if (!registeredSchemaMigrations().has(20260921044042)) registerSchemaMigrations(
 if (!registeredSchemaMigrations().has(20260922013625)) registerSchemaMigrations(iconLibrariesMigration);
 if (!registeredSchemaMigrations().has(20260923005318)) registerSchemaMigrations(iconCanvasToolMigration);
 if (!registeredSchemaMigrations().has(20260923112910)) registerSchemaMigrations(computedValuesAndRepeatedNodesMigration);
+if (!registeredSchemaMigrations().has(20260923144958)) registerSchemaMigrations(transitionTokenValueMigration);
+if (!registeredSchemaMigrations().has(20260923160425)) registerSchemaMigrations(renderTokenRefsMigration);
 //#endregion
 export { System };