@yahoo/uds-create-config 4.17.0 → 4.18.0

package/dist/entities/system/token-values.js

@@ -0,0 +1,154 @@
+import { isRef, kindOf, pathOf, ref, splitRef } from "../../framework/utils/refs.js";
+import { parseRootFontSize } from "../../css/root-font-size.js";
+import { CSS_DEFAULTS, Settings } from "./Settings.js";
+import { createSliceMemo } from "../../framework/memo.js";
+import { cssVar, resolveTokenValue } from "../../framework/projections.js";
+//#region src/entities/system/token-values.ts
+/**
+* A token as a VALUE a module can compute with.
+*
+* The stylesheet carries every token as a custom property, which is all a style prop needs. A render
+* that hands a token to something outside the stylesheet — a third-party prop that wants a number, a
+* layout measured in JS — needs the value itself, and the config is the only place it can come from
+* without a hand-written table that drifts. This is that answer, computed once per build: a render
+* reads it as `Token.ref('spacing/2.5').px()`, which the build resolves in place, and the emitted
+* `components/_tokens.ts` module carries the tables a read through a prop needs. The readers are typed
+* per path off {@link RegisteredTokenValues}, which the emitted `uds-env.d.ts` fills in.
+*
+* A token has a value only when nothing changes it: a token with an override, or aliasing one, is
+* whatever the viewer's mode or state says on the page, so it is only ever reachable as its `var()`.
+*/
+const NUMERIC = /^(-?(?:\d+(?:\.\d*)?|\.\d+))(px|rem|ms|s)?$/;
+function tokenValueEntry({ value, rem }) {
+	if (typeof value === "number") return {
+		css: String(value),
+		px: value
+	};
+	const css = value.trim();
+	const match = NUMERIC.exec(css);
+	if (!match) return { css };
+	const amount = Number(match[1]);
+	switch (match[2]) {
+		case void 0:
+		case "px": return {
+			css,
+			px: amount
+		};
+		case "rem": return rem === void 0 ? { css } : {
+			css,
+			px: amount * rem
+		};
+		case "ms": return {
+			css,
+			ms: amount
+		};
+		case "s": return {
+			css,
+			ms: amount * 1e3
+		};
+		default: return { css };
+	}
+}
+/** The root font size of the page this config's sheet is for, as stated or the browser's own. A
+*  stored value already passed the setting's own check, so it parses. */
+function rootFontSize(config) {
+	const css = Settings.get(config)?.css?.rem ?? CSS_DEFAULTS.rem;
+	return parseRootFontSize(css) ?? {
+		css,
+		px: void 0
+	};
+}
+/**
+* Every token this config lists, in list order, as {@link TokenValueRow}s.
+*
+* Keyed on the token and settings slices, plus the attached sources every memo keys on: a token edit
+* or a `rem` change recomputes, a component edit does not. A source's values reach here through the
+* closure the artifact recorded whether or not the source is attached, so the two answer the same.
+*/
+const tokenValueRows = createSliceMemo({
+	kinds: ["token", "settings"],
+	compute: (config) => {
+		const rem = rootFontSize(config).px;
+		return config.list("token").map((token) => {
+			const { path } = token;
+			const slash = path.indexOf("/");
+			const owner = config.configFor(ref("token", path)) ?? config;
+			return {
+				path,
+				group: slash > 0 ? path.slice(0, slash) : path,
+				alias: slash > 0 ? path.slice(slash + 1) : path,
+				variable: cssVar(owner, "token", path),
+				state: stateOf({
+					config,
+					path,
+					rem
+				})
+			};
+		});
+	}
+});
+function stateOf({ config, path, rem }) {
+	if (modeDecides(config, path)) return { kind: "conditional" };
+	const resolved = resolveTokenValue(config, path);
+	if (resolved === void 0) return { kind: "unresolved" };
+	return {
+		kind: "value",
+		value: tokenValueEntry({
+			value: resolved,
+			rem
+		})
+	};
+}
+/** Path → its row, over the same memo as {@link tokenValueRows}. */
+const tokenValueIndex = createSliceMemo({
+	kinds: ["token", "settings"],
+	compute: (config) => new Map(tokenValueRows(config).map((row) => [row.path, row]))
+});
+/** A bare path or a ref string, as a `token:` ref string. */
+function tokenTarget(target) {
+	return typeof target === "string" && !target.includes(":") ? `token:${target}` : target;
+}
+/**
+* One token's row by ref or path, qualified or not. A qualified target is read in the source it
+* names, so the row spells that source's variable and value; an unqualified one is this config's,
+* including a row this config derived from a link.
+*/
+function tokenValueRow({ config, target }) {
+	const { path, source } = splitRef(tokenTarget(target));
+	const owner = source === void 0 ? config : config.sourceFor(source);
+	return owner ? tokenValueIndex(owner).get(path) : void 0;
+}
+/**
+* Whether a `token:` target names something this config can answer for — an item, qualified or not,
+* or a group. A group is what a read whose path a prop completes is an edge to.
+*/
+function tokenExists({ config, target }) {
+	const { path, qualifiedPath } = splitRef(tokenTarget(target));
+	if (config.resolve("token", qualifiedPath)) return true;
+	return config.groups("token").some((group) => group.path === path);
+}
+/**
+* Whether a token's value depends on a modifier: it carries an override itself, or it aliases a token
+* that does, however many hops away. Chased through the config each alias was authored in, the way
+* `resolveTokenValue` chases the value.
+*/
+function modeDecides(config, path, seen = /* @__PURE__ */ new Set()) {
+	const body = config.resolve("token", path)?.toJSON();
+	if (!body) return false;
+	if (body.overrides && Object.keys(body.overrides).length > 0) return true;
+	const { value } = body;
+	if (!isRef(value) || kindOf(value) !== "token") return false;
+	if (seen.has(value.__ref)) return false;
+	seen.add(value.__ref);
+	const source = config.configFor(value);
+	return source ? modeDecides(source, pathOf(value), seen) : false;
+}
+/** The reader names, which is what the build recognizes on a `Token.ref(…)`. */
+const TOKEN_READERS = [
+	"var",
+	"value",
+	"px",
+	"ms"
+];
+//#endregion
+export { TOKEN_READERS, rootFontSize, tokenExists, tokenValueRow, tokenValueRows };

package/dist/framework/Config.d.ts

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

package/dist/framework/Config.js

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

package/dist/framework/defineEntity.d.ts

@@ -355,4 +355,4 @@ type OpInput<E extends {
   input: infer I extends z.ZodTypeAny;
 } ? z.input<I> : never;
 //#endregion
-export { EntityClass, GroupComputedInput, ItemOf, OpInput, defineEntity };
+export { EntityClass, GroupComputedInput, ItemOf, KindRef, OpInput, defineEntity };

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

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

package/dist/framework/schema-version.js

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

package/dist/framework/utils/identifier.d.ts

@@ -0,0 +1,8 @@
+//#region src/framework/utils/identifier.d.ts
+/** What may be written as one JavaScript identifier — a prop name, an export, a binding. */
+/** Whether `name` has the shape of an identifier. A reserved word has the shape and still cannot be
+ *  bound; {@link isReservedWord} is that question. */
+declare function isIdentifier(name: string): boolean;
+declare function isReservedWord(name: string): boolean;
+//#endregion
+export { isIdentifier, isReservedWord };

package/dist/framework/utils/identifier.js

@@ -0,0 +1,62 @@
+//#region src/framework/utils/identifier.ts
+/** What may be written as one JavaScript identifier — a prop name, an export, a binding. */
+const IDENTIFIER = /^[A-Za-z_$][\w$]*$/;
+/** Words the language keeps, in every context or in a module: a binding cannot be named one. */
+const RESERVED = new Set([
+	"await",
+	"break",
+	"case",
+	"catch",
+	"class",
+	"const",
+	"continue",
+	"debugger",
+	"default",
+	"delete",
+	"do",
+	"else",
+	"enum",
+	"export",
+	"extends",
+	"false",
+	"finally",
+	"for",
+	"function",
+	"if",
+	"implements",
+	"import",
+	"in",
+	"instanceof",
+	"interface",
+	"let",
+	"new",
+	"null",
+	"package",
+	"private",
+	"protected",
+	"public",
+	"return",
+	"static",
+	"super",
+	"switch",
+	"this",
+	"throw",
+	"true",
+	"try",
+	"typeof",
+	"var",
+	"void",
+	"while",
+	"with",
+	"yield"
+]);
+/** Whether `name` has the shape of an identifier. A reserved word has the shape and still cannot be
+*  bound; {@link isReservedWord} is that question. */
+function isIdentifier(name) {
+	return IDENTIFIER.test(name);
+}
+function isReservedWord(name) {
+	return RESERVED.has(name);
+}
+//#endregion
+export { isIdentifier, isReservedWord };

package/dist/index.d.ts

@@ -45,6 +45,7 @@ import { AnySystemConfig, isNativeConfig, isSystemConfig } from "./configs/platf
 import { AiChat, AiFlow, AiFlowOrigin, AiGeneration, AiMessage, AiMultiAgentMode, Canvas, CanvasConfig, Node, Page, SystemSource, createCanvasConfig } from "./configs/CanvasConfig.js";
 import { DocumentationLibrary } from "./configs/documentation.js";
 import { CssPropertyEntry } from "./css/properties.generated.js";
+import { RootFontSize, parseRootFontSize } from "./css/root-font-size.js";
 import { ResolveValueTypeInput, ValueType, resolveValueType, sniffValueType } from "./css/value-type.js";
 import { CSS_PROPERTY_NAMES, CSS_WIDE_KEYWORDS, cssProperty, cssValueIssue, isCssProperty } from "./css/values.js";
 import { Documentation } from "./entities/documentation/Documentation.js";
@@ -57,6 +58,8 @@ import { ColorValue, DERIVED_COLOR_SPACE, DerivedColor, Gradient, alpha, darken,
 import { NativeToken, nativeTokenValue } from "./entities/native/NativeToken.js";
 import { CANVAS_ROLES, CanvasRole, CanvasRoleName } from "./entities/system/CanvasRole.js";
 import { StyleValue } from "./entities/system/style-bag.js";
+import { RegisteredTokenValues, TOKEN_READERS, TokenGroupReader, TokenReader, TokenReaders, TokenValueEntry, TokenValueRow, TokenValueState, rootFontSize, tokenExists, tokenValueRow, tokenValueRows } from "./entities/system/token-values.js";
+import { OverrideCondition, Token, TokenBody, TokenRefPath, TokenReference, defineOverride, overrideCondition, overrideKey, overrideKeyModifiers, overrideModifiers } from "./entities/system/Token.js";
 import { AsInput, AuthoredComponent, AuthoredProp, ComponentBuilder, ComponentPropsOf, GlyphComponent, LayerElement, LayerMap, PropCondition, PropDecl, PropMap, RegisteredMembers, RenderArgs, StyleRuleInput, defineComponent } from "./entities/system/defineComponent.js";
 import { AuthoredPropBody, Component, ComponentBody, ComponentElementBody, ComponentPropBody, ComponentReference, ComponentStyleBody, ElementVisibility, ElementVisibilityInput, ExtendedComponentRef, ProjectedVisibility, VariantValueBody, VariantValues, blankComponentBody, canonicalWhen, forwardedNames, layerRef, ownValues, ownsItsValues, valueRef } from "./entities/system/Component.js";
 import { Composite } from "./entities/system/Composite.js";
@@ -75,7 +78,6 @@ import { Operation } from "./entities/system/Operation.js";
 import { Package } from "./entities/system/Package.js";
 import { DeclaredRuntimeModule, declaredRuntimeModules } from "./entities/system/runtime-modules.js";
 import { BuildSection, CSS_DEFAULTS, CssPrefix, CssSection, PLAYGROUND_DEFAULTS, PlaygroundSection, Settings, SystemSection, classPrefixOf, cssPrefixes, varPrefixOf } from "./entities/system/Settings.js";
-import { OverrideCondition, Token, TokenBody, defineOverride, overrideCondition, overrideKey, overrideKeyModifiers, overrideModifiers } from "./entities/system/Token.js";
 import { Tool } from "./entities/system/Tool.js";
 import { TokenBinding, TokenMatch, matchTokens, searchTokens, tokenBinding } from "./entities/system/token-index.js";
 import { AnatomyIssue, AnatomyIssueKind, AnatomyReport, DiffOptions, RenderedNode, SIZE_TOLERANCE_PX, STYLE_PROPERTIES, anatomyIssueKey, diffRendered, normalizeStyleValue, renderedSignatureOf, snapshotHtml } from "./framework/anatomy-check.js";
@@ -96,9 +98,10 @@ import { ConfigSession, ConfigSessionOptions, ConfigSink, ConfigSource, DraftSou
 import { SignatureOptions, renderSignature, signatureOf } from "./framework/signature.js";
 import { DanglingDirective, DanglingRef, LeafAddress, MisdeclaredOverlay, OverlayVerb, RedundantQualifier, UnadoptedDirective, UnreadableBorrow, UnstatableCondition, classifyOverlay, danglingDirectives, danglingSourcedRefs, leafAddresses, leafVerb, misdeclaredOverlays, overlayVerb, redundantQualifiers, unadoptedDirectives, unreadableBorrows, unstatableConditions, valueAt } from "./framework/source-integrity.js";
 import { applyPathDelta, isPlainObject, namedFields, pathDelta, pathSegments, setAtPath, touchedFields } from "./framework/utils/field-path.js";
+import { isIdentifier, isReservedWord } from "./framework/utils/identifier.js";
 import { EXPORT_MEMBER, packageKey, packageName } from "./framework/utils/package-path.js";
 import { SpecNode, validateSpec } from "./framework/validate-spec.js";
 import { valueLeavesOf, valueSchemaOf } from "./framework/value-domain.js";
 import { views } from "./framework/views-facade.js";
 import { RN_STYLE_KEYS } from "./react-native/style-keys.generated.js";
-export { AI_LANES, ANATOMY_MARKER, AiChat, AiFlow, type AiFlowOrigin, AiGeneration, type AiLane, AiMessage, type AiMultiAgentMode, type AnatomyIssue, type AnatomyIssueKind, type AnatomyReport, type AnySystemConfig, type AsInput, type AttachedSources, type Authored, type AuthoredComponent, type AuthoredProp, type AuthoredPropBody, type AuthoringSignatureOptions, BUILD_DEFAULTS, type BreakOutcome, type BreakPlan, type BreakPlanInput, type BreakPlanRow, type BreakReach, BuildSection, CANVAS_ROLES, CONFIG_OPERATION_KIND, CSS_DEFAULTS, CSS_PROPERTY_NAMES, CSS_WIDE_KEYWORDS, CURRENT_SCHEMA_VERSION, Canvas, CanvasConfig, CanvasRole, type CanvasRoleName, CanvasSection, type CaptureToSpecOptions, type CaptureToSpecResult, type CapturedChild, type CapturedElement, CapturedNode, type CapturedNodeJson, type Spec as CapturedSpec, type SpecElement as CapturedSpecElement, type CapturedText, type Cell, type CellSlot, type Change, type ChangeHook, type ChangeTarget, type ChildrenPolicy, type ClassGrammar, type Collection, type ColorValue, Component, type ComponentBody, type ComponentBuilder, type ComponentContractOf, type ComponentElementBody, type ComponentModuleSource, type ComponentPropBody, type ComponentPropsOf, type ComponentReference, type ComponentRegistryImport, type ComponentRegistryImportBinding, type ComponentRuleClass, type ComponentSpec, type ComponentSpecs, type ComponentStyleBody, type ComposedValue, type ComposedValueAuthoring, type ComposedValueForm, Composite, type ComputedFields, type ComputedFunctions, type ComputedInput, type ComputedMap, type ComputedValue, Config, type ConfigClass, type ConfigEdit, ConfigFormatError, type ConfigInstance, type ConfigIssue, type ConfigIssueCode, type ConfigKind, type ConfigOp, ConfigRejection, ConfigSession, type ConfigSessionOptions, type ConfigSink, type ConfigSource, type CopyPlan, type CopyPlanInput, type CopyPlanRow, type CreateInput, type CssGrammar, type CssPrefix, type CssPropertyEntry, CssSection, DERIVED_COLOR_SPACE, DERIVED_MUTATIONS, type DanglingDirective, type DanglingLocalRef, type DanglingRef, type DeclaredRuntimeModule, type DeletePlan, type DeriveMembers, type DerivedColor, type DerivedEntityClass, type DerivedOp, Device, type DiffOptions, Documentation, DocumentationLibrary, type DomLikeElement, type DraftSource, ENTITY_PATH_MESSAGE, EXPORT_MEMBER, type Edition, type ElementVisibility, type ElementVisibilityInput, Entity, type EntityAddress, type EntityChange, type EntityClass, type EntityKind, type EntityMap, type ExpandOptions, type ExpansionResult, type ExtendedComponentRef, type ExtendedRef, type FieldsSchema, File, Font, FontFile, type ForwardClaims, GROUP, GUIDANCE_LANES, GlobalStyle, type GlyphComponent, type GlyphSource, type GoverningCondition, type Gradient, type GroupBody, Guidance, type GuidanceLane, type GuidanceScope, type GuidanceSegment, GuidanceStyle, type GuidanceStyleBody, type HasSnapshot, type HydrationOptions, ICON_METADATA_FORMATS, Icon, type IconAnswer, type IconGlyph, type IconHook, type IconLibrary, type IconMemberMetadata, type IconMetadataAdapter, type IconMetadataDeclaration, type IconMetadataFile, type IconMetadataFormat, type IconTool, type IconVariantAs, type IdentifiedOp, type InferredRename, type Instance, type InstanceSlot, type InstanceSpec, type ItemOf, type KindSignature, type KindSlice, LINK_SLUG, LINK_SLUG_MESSAGE, type LayerElement, type LayerMap, type LayerStyleOptions, type LeafAddress, type LinkArrival, type LinkDeclaration, type LinkPaths, type LinkPlan, type LinkPlanInput, LinkedSystem, type LinkedSystemResolver, type LinkedSystemState, type ListOptions, type LiveConfig, type LocalOverlay, MINTED, MODIFIER_CATEGORIES, type MisdeclaredOverlay, Modifier, type ModifierCategory, type ModifierGroupMeta, Motion, NATIVE_ACTIVATIONS, type NativeActivation, NativeModifier, NativeSettings, NativeStyleProperty, NativeToken, Node, type OpHandler, type OpInput, Operation, type OverlayVerb, type OverrideCondition, type OwnedRecords, PLAYGROUND_DEFAULTS, Package, Page, type Patch, type PathOf, type PinDirective, type PinOptions, type PinOptionsField, type Plan, type PlanImpact, type PlanOp, PlaygroundSection, type PreviewElement, type PreviewMatrix, type ProjectedVisibility, type PropCondition, type PropDecl, type PropDeclaration, type PropMap, RN_STYLE_KEYS, ReactNativeSystem, type ReactNativeSystemConfig, type RebaseConflict, type RebaseOrigin, type RebaseResult, type RecordedSource, type RedundantQualifier, type Ref, type RefGraph, type RefGraphEntry, type RefIndex, type RefIndexChange, type RefMember, type RefTarget, type RegisteredComponentContracts, type RegisteredEntities, type RegisteredMembers, type RegisteredModifiers, type RegisteredPaths, type RegisteredStyleProps, type RenamePlan, type RenderArgs, type RenderElement, type RenderSpec, type RenderedNode, type RenderedTarget, type RepeatRow, type RepeatSpec, type ResolveContext, type ResolveValueTypeInput, type ResolvedSource, SCRIPT_EXTENSIONS, SERIALIZED_CONFIG_VERSION, SIZE_TOLERANCE_PX, STYLE_PROPERTIES, STYLE_PROP_VALUE_FORMS, STYLE_PROP_VALUE_LEAVES, type SchemaEntry, type SchemaMigration, SchemaVersionTooNew, type SerializedConfig, type SerializedSourceAnswer, Settings, type SignatureOptions, type SkippedOp, type Slot, type SlotCell, type SlotTarget, Snapshot, type Source, type SourceAnswer, type SourceChange, type SourceMap, type SourceResolution, type SourceResolutionSchemas, type SourceResolver, type SourceRowState, type SourceState, type SourceUnavailable, type SourcesBySlug, type SourcesOf, type SpecNode, type SplitStyleProps, type StampedPatch, type StoredConfig, type StoredPreviewCondition, type StylePropEntry, type StylePropLeaf, type StylePropValue, type StylePropValueCtx, type StylePropValueKind, StyleProperty, type StylePropertyItem, type StyleRuleInput, type StyleValue, type SubEntityClass, type SubPatch, type SurfaceCompositeProp, type SurfaceProp, type SurfacePropCondition, type SurfacePropKind, type SurfaceScalarProp, type SurfaceSlotProp, type SurfaceStylePropertyProp, type SurfaceVariantProp, System, type SystemConfig, SystemSection, SystemSource, type TimingValue, Token, type TokenBinding, type TokenBody, type TokenMatch, Tool, type Transition, type TransitionSegment, type TraverseOptions, type TreeNode, UNCONDITIONAL_PREVIEW_KEY, UNREACHABLE, type UnadoptedDirective, type UnknownStyleLeaf, type UnlinkPlan, type UnlinkPlanInput, type UnreadableBorrow, type UnstatableCondition, type UpgradedDraft, type UserSchemas, VOID_ELEMENTS, type ValueOf, type ValueType, type VariantValueBody, type VariantValues, type VisibilityOperator, type VisibilityTerm, WEB_ACTIVATIONS, type WalkOptions, type WebActivation, addressOf, alpha, anatomyElementComponent, anatomyIssueKey, anatomyTextProp, applyPathDelta, authoredBag, authoredValue, authoringSignatures, baseOf, blankComponentBody, borrowedGroup, borrowedItem, boundElementType, brandGroup, buildRefGraph, buildRefIndex, canonicalWhen, capturedFromDom, changeOf, changeValueAt, changesOf, childrenPolicy, classGrammar, className, classPrefixOf, classifyOverlay, classifyStylePropValue, collectRefs, componentClassBase, componentCompositeClasses, componentLayerClass, componentModuleFilePaths, componentModuleKey, componentModuleSource, componentMotionClasses, componentPropClasses, componentRegistryImports, componentRuleClasses, componentSpec, composedValueAuthoring, composedValueFormOf, composedValueForms, composedValueSchemas, createCanvasConfig, createSliceMemo, cssPrefixes, cssPropValue, cssProperty, cssPropertyNames, cssValueIssue, cssVar, cssVarRef, danglingDirectives, danglingLocalRefs, danglingSourcedRefs, darken, declaredField, declaredPropDefaults, declaredPropRouting, declaredRuntimeModules, defineComponent, defineConfig, defineDerivedEntity, defineEntity, defineOverride, defineSubEntity, deriveCreateSchema, deriveSpec, deriveUpdateSchema, describeBody, describePatch, detectedWireVersion, diffRendered, editOp, elementFromCaptured, entityRefOf, entryKeyOf, expandComponent, expandSpec, fieldKeys, fontFamilyStack, forceModeAttribute, forceModeAttributeOf, forceModeProp, forceModePropGroup, forceModePropValue, forceModeProps, forceStateAttribute, forwardClaims, forwardedLayers, forwardedNames, forwardsOf, globalStyleName, glyphComponentOf, glyphExportNames, glyphLibrariesOf, glyphPropsOf, glyphSourcesOf, glyphType, graftPreviewElements, guidanceReaches, guidanceScopeOf, guidanceTextOf, iconCategories, iconLibraries, iconLibrary, iconMemberMetadata, iconMetadata, iconMetadataDeclaration, iconMetadataFile, iconMetadataFileJsonSchema, iconMetadataFormat, iconResolver, iconToolAxisOptions, iconToolLibraries, iconToolOf, iconVariantAs, inferredRenames, inputOf, instanceHolding, instanceSpec, intoName, isAuthored, isBinaryAsset, isComposedValue, isConfigFormatError, isConfigRejection, isCssProperty, isDeclaredElementProp, isDerivedColor, isEntityPath, isExtendedRef, isForceModeProp, isGradient, isGroupBody, isLinkSlug, isMintedRow, isNativeConfig, isPlainObject, isPreviewElement, isRef, isSystemConfig, isTransition, kebabComponent, keyedPreviewConditions, kindOf, kindsOf, layerRef, layerRoutedProps, layerStyles, layerTextProp, leafAddresses, leafVerb, leavesOfStylePropValue, librariesBoundBy, libraryHolding, lighten, linearGradient, liveStateProps, matchEntities, matchTokens, memberFromLeaf, memberLeaves, memberOf, memberRef, memberVariantOptions, memoryConfigSource, misdeclaredOverlays, mix, modeAxes, modifierAxes, modifierAxis, modifierCategory, modifierGroupFields, modifierInvariants, modifierLeaf, modifierUtilitiesUsed, motionClassName, nameIconsInTree, namedFields, nativeTokenValue, negatedCssValue, normalizeName, normalizeStyleValue, opOf, opVerb, opacityPercentage, opsForKind, orRef, overlayVerb, overrideCondition, overrideKey, overrideKeyModifiers, overrideModifiers, ownValues, ownerOf, ownsItsValues, packageKey, packageName, partsOf, pathDelta, pathOf, pathSegments, placedGlyphElement, planBreak, planCopy, planLink, planUnlink, previewConditionalProps, previewConditions, previewDefaults, previewMatrix, previewSpec, propApplies, propInto, propOwner, propRegistryRef, propValueDomain, propValueFromAxis, propsIntoLayer, readStatePointer, redundantQualifiers, ref, refGraphOf, refLeaf, refListOf, refSchema, refTo, registerSchemaMigrations, renderComposedValue, renderDerivedColor, renderGradient, renderSignature, renderStyleValue, renderTransition, renderedElement, renderedSignatureOf, renderedTarget, resolutionSchema, resolveComponentProps, resolveFieldValue, resolveIconLibraries, resolveInputDir, resolveOutDir, resolveRegistryDir, resolveTokenValue, resolveTokenValueUnder, resolveValue, resolveValueType, resolveVisibility, resolvedSource, rewriteRefNamespace, rewriteRefSource, rewriteRefs, rnStyleKey, rootLayerOf, routeOf, routedBag, routedProp, routedPropIn, routesContent, ruleApplies, ruleCondition, runChangeHooks, schemaVersionOf, searchEntities, searchTokens, setAtPath, signatureOf, slotTargetsOf, snapshotHtml, sniffValueType, sourceEntries, sourceOf, sourceOfGroup, sourceOfItem, sourceRowStates, sourceSlugFor, sourceUnavailable, sourceUnreachable, sourceVarPrefix, specFromCapture, specToNodePatches, specWithResolvedVisibility, splitRef, splitStyleProps, stamp, statePointerProp, storedPreview, styleAliasesOf, styleDeclarations, stylePropClassBase, stylePropClassName, stylePropClasses, stylePropEntries, stylePropLeafForToken, stylePropNegates, stylePropTokenGroup, stylePropTokenPath, stylePropTokenValues, stylePropValueFormOf, stylePropValueFromLeaf, stylePropValueLeaves, stylePropValueSchema, stylePropValues, stylePropertiesWriting, stylePropertyAccepts, stylePropertyFor, stylePropertyPathFor, styleRuleMotionClasses, suggestLinkSlug, summarizeChanges, surfaceProp, surfaceProps, tablerExportName, toCssPropertyName, tokenBinding, touchedFields, transition, unadoptedDirectives, unconditionalPreviewProps, unknownStyleLeaves, unreadableBorrows, unstatableConditions, updateRefIndex, upgradeDraftEntries, upgradePatch, upgradeSerializedConfig, validateComponentProps, validateSpec, valueAt, valueForwardsOf, valueLeavesOf, valueRef, valueSchemaOf, varPrefixOf, views, visibilityStateProps, visibilityTerms, withoutTruthyTerm, wrappedElementKey };
+export { AI_LANES, ANATOMY_MARKER, AiChat, AiFlow, type AiFlowOrigin, AiGeneration, type AiLane, AiMessage, type AiMultiAgentMode, type AnatomyIssue, type AnatomyIssueKind, type AnatomyReport, type AnySystemConfig, type AsInput, type AttachedSources, type Authored, type AuthoredComponent, type AuthoredProp, type AuthoredPropBody, type AuthoringSignatureOptions, BUILD_DEFAULTS, type BreakOutcome, type BreakPlan, type BreakPlanInput, type BreakPlanRow, type BreakReach, BuildSection, CANVAS_ROLES, CONFIG_OPERATION_KIND, CSS_DEFAULTS, CSS_PROPERTY_NAMES, CSS_WIDE_KEYWORDS, CURRENT_SCHEMA_VERSION, Canvas, CanvasConfig, CanvasRole, type CanvasRoleName, CanvasSection, type CaptureToSpecOptions, type CaptureToSpecResult, type CapturedChild, type CapturedElement, CapturedNode, type CapturedNodeJson, type Spec as CapturedSpec, type SpecElement as CapturedSpecElement, type CapturedText, type Cell, type CellSlot, type Change, type ChangeHook, type ChangeTarget, type ChildrenPolicy, type ClassGrammar, type Collection, type ColorValue, Component, type ComponentBody, type ComponentBuilder, type ComponentContractOf, type ComponentElementBody, type ComponentModuleSource, type ComponentPropBody, type ComponentPropsOf, type ComponentReference, type ComponentRegistryImport, type ComponentRegistryImportBinding, type ComponentRuleClass, type ComponentSpec, type ComponentSpecs, type ComponentStyleBody, type ComposedValue, type ComposedValueAuthoring, type ComposedValueForm, Composite, type ComputedFields, type ComputedFunctions, type ComputedInput, type ComputedMap, type ComputedValue, Config, type ConfigClass, type ConfigEdit, ConfigFormatError, type ConfigInstance, type ConfigIssue, type ConfigIssueCode, type ConfigKind, type ConfigOp, ConfigRejection, ConfigSession, type ConfigSessionOptions, type ConfigSink, type ConfigSource, type CopyPlan, type CopyPlanInput, type CopyPlanRow, type CreateInput, type CssGrammar, type CssPrefix, type CssPropertyEntry, CssSection, DERIVED_COLOR_SPACE, DERIVED_MUTATIONS, type DanglingDirective, type DanglingLocalRef, type DanglingRef, type DeclaredRuntimeModule, type DeletePlan, type DeriveMembers, type DerivedColor, type DerivedEntityClass, type DerivedOp, Device, type DiffOptions, Documentation, DocumentationLibrary, type DomLikeElement, type DraftSource, ENTITY_PATH_MESSAGE, EXPORT_MEMBER, type Edition, type ElementVisibility, type ElementVisibilityInput, Entity, type EntityAddress, type EntityChange, type EntityClass, type EntityKind, type EntityMap, type ExpandOptions, type ExpansionResult, type ExtendedComponentRef, type ExtendedRef, type FieldsSchema, File, Font, FontFile, type ForwardClaims, GROUP, GUIDANCE_LANES, GlobalStyle, type GlyphComponent, type GlyphSource, type GoverningCondition, type Gradient, type GroupBody, Guidance, type GuidanceLane, type GuidanceScope, type GuidanceSegment, GuidanceStyle, type GuidanceStyleBody, type HasSnapshot, type HydrationOptions, ICON_METADATA_FORMATS, Icon, type IconAnswer, type IconGlyph, type IconHook, type IconLibrary, type IconMemberMetadata, type IconMetadataAdapter, type IconMetadataDeclaration, type IconMetadataFile, type IconMetadataFormat, type IconTool, type IconVariantAs, type IdentifiedOp, type InferredRename, type Instance, type InstanceSlot, type InstanceSpec, type ItemOf, type KindSignature, type KindSlice, LINK_SLUG, LINK_SLUG_MESSAGE, type LayerElement, type LayerMap, type LayerStyleOptions, type LeafAddress, type LinkArrival, type LinkDeclaration, type LinkPaths, type LinkPlan, type LinkPlanInput, LinkedSystem, type LinkedSystemResolver, type LinkedSystemState, type ListOptions, type LiveConfig, type LocalOverlay, MINTED, MODIFIER_CATEGORIES, type MisdeclaredOverlay, Modifier, type ModifierCategory, type ModifierGroupMeta, Motion, NATIVE_ACTIVATIONS, type NativeActivation, NativeModifier, NativeSettings, NativeStyleProperty, NativeToken, Node, type OpHandler, type OpInput, Operation, type OverlayVerb, type OverrideCondition, type OwnedRecords, PLAYGROUND_DEFAULTS, Package, Page, type Patch, type PathOf, type PinDirective, type PinOptions, type PinOptionsField, type Plan, type PlanImpact, type PlanOp, PlaygroundSection, type PreviewElement, type PreviewMatrix, type ProjectedVisibility, type PropCondition, type PropDecl, type PropDeclaration, type PropMap, RN_STYLE_KEYS, ReactNativeSystem, type ReactNativeSystemConfig, type RebaseConflict, type RebaseOrigin, type RebaseResult, type RecordedSource, type RedundantQualifier, type Ref, type RefGraph, type RefGraphEntry, type RefIndex, type RefIndexChange, type RefMember, type RefTarget, type RegisteredComponentContracts, type RegisteredEntities, type RegisteredMembers, type RegisteredModifiers, type RegisteredPaths, type RegisteredStyleProps, type RegisteredTokenValues, type RenamePlan, type RenderArgs, type RenderElement, type RenderSpec, type RenderedNode, type RenderedTarget, type RepeatRow, type RepeatSpec, type ResolveContext, type ResolveValueTypeInput, type ResolvedSource, type RootFontSize, SCRIPT_EXTENSIONS, SERIALIZED_CONFIG_VERSION, SIZE_TOLERANCE_PX, STYLE_PROPERTIES, STYLE_PROP_VALUE_FORMS, STYLE_PROP_VALUE_LEAVES, type SchemaEntry, type SchemaMigration, SchemaVersionTooNew, type SerializedConfig, type SerializedSourceAnswer, Settings, type SignatureOptions, type SkippedOp, type Slot, type SlotCell, type SlotTarget, Snapshot, type Source, type SourceAnswer, type SourceChange, type SourceMap, type SourceResolution, type SourceResolutionSchemas, type SourceResolver, type SourceRowState, type SourceState, type SourceUnavailable, type SourcesBySlug, type SourcesOf, type SpecNode, type SplitStyleProps, type StampedPatch, type StoredConfig, type StoredPreviewCondition, type StylePropEntry, type StylePropLeaf, type StylePropValue, type StylePropValueCtx, type StylePropValueKind, StyleProperty, type StylePropertyItem, type StyleRuleInput, type StyleValue, type SubEntityClass, type SubPatch, type SurfaceCompositeProp, type SurfaceProp, type SurfacePropCondition, type SurfacePropKind, type SurfaceScalarProp, type SurfaceSlotProp, type SurfaceStylePropertyProp, type SurfaceVariantProp, System, type SystemConfig, SystemSection, SystemSource, TOKEN_READERS, type TimingValue, Token, type TokenBinding, type TokenBody, type TokenGroupReader, type TokenMatch, type TokenReader, type TokenReaders, type TokenRefPath, type TokenReference, type TokenValueEntry, type TokenValueRow, type TokenValueState, Tool, type Transition, type TransitionSegment, type TraverseOptions, type TreeNode, UNCONDITIONAL_PREVIEW_KEY, UNREACHABLE, type UnadoptedDirective, type UnknownStyleLeaf, type UnlinkPlan, type UnlinkPlanInput, type UnreadableBorrow, type UnstatableCondition, type UpgradedDraft, type UserSchemas, VOID_ELEMENTS, type ValueOf, type ValueType, type VariantValueBody, type VariantValues, type VisibilityOperator, type VisibilityTerm, WEB_ACTIVATIONS, type WalkOptions, type WebActivation, addressOf, alpha, anatomyElementComponent, anatomyIssueKey, anatomyTextProp, applyPathDelta, authoredBag, authoredValue, authoringSignatures, baseOf, blankComponentBody, borrowedGroup, borrowedItem, boundElementType, brandGroup, buildRefGraph, buildRefIndex, canonicalWhen, capturedFromDom, changeOf, changeValueAt, changesOf, childrenPolicy, classGrammar, className, classPrefixOf, classifyOverlay, classifyStylePropValue, collectRefs, componentClassBase, componentCompositeClasses, componentLayerClass, componentModuleFilePaths, componentModuleKey, componentModuleSource, componentMotionClasses, componentPropClasses, componentRegistryImports, componentRuleClasses, componentSpec, composedValueAuthoring, composedValueFormOf, composedValueForms, composedValueSchemas, createCanvasConfig, createSliceMemo, cssPrefixes, cssPropValue, cssProperty, cssPropertyNames, cssValueIssue, cssVar, cssVarRef, danglingDirectives, danglingLocalRefs, danglingSourcedRefs, darken, declaredField, declaredPropDefaults, declaredPropRouting, declaredRuntimeModules, defineComponent, defineConfig, defineDerivedEntity, defineEntity, defineOverride, defineSubEntity, deriveCreateSchema, deriveSpec, deriveUpdateSchema, describeBody, describePatch, detectedWireVersion, diffRendered, editOp, elementFromCaptured, entityRefOf, entryKeyOf, expandComponent, expandSpec, fieldKeys, fontFamilyStack, forceModeAttribute, forceModeAttributeOf, forceModeProp, forceModePropGroup, forceModePropValue, forceModeProps, forceStateAttribute, forwardClaims, forwardedLayers, forwardedNames, forwardsOf, globalStyleName, glyphComponentOf, glyphExportNames, glyphLibrariesOf, glyphPropsOf, glyphSourcesOf, glyphType, graftPreviewElements, guidanceReaches, guidanceScopeOf, guidanceTextOf, iconCategories, iconLibraries, iconLibrary, iconMemberMetadata, iconMetadata, iconMetadataDeclaration, iconMetadataFile, iconMetadataFileJsonSchema, iconMetadataFormat, iconResolver, iconToolAxisOptions, iconToolLibraries, iconToolOf, iconVariantAs, inferredRenames, inputOf, instanceHolding, instanceSpec, intoName, isAuthored, isBinaryAsset, isComposedValue, isConfigFormatError, isConfigRejection, isCssProperty, isDeclaredElementProp, isDerivedColor, isEntityPath, isExtendedRef, isForceModeProp, isGradient, isGroupBody, isIdentifier, isLinkSlug, isMintedRow, isNativeConfig, isPlainObject, isPreviewElement, isRef, isReservedWord, isSystemConfig, isTransition, kebabComponent, keyedPreviewConditions, kindOf, kindsOf, layerRef, layerRoutedProps, layerStyles, layerTextProp, leafAddresses, leafVerb, leavesOfStylePropValue, librariesBoundBy, libraryHolding, lighten, linearGradient, liveStateProps, matchEntities, matchTokens, memberFromLeaf, memberLeaves, memberOf, memberRef, memberVariantOptions, memoryConfigSource, misdeclaredOverlays, mix, modeAxes, modifierAxes, modifierAxis, modifierCategory, modifierGroupFields, modifierInvariants, modifierLeaf, modifierUtilitiesUsed, motionClassName, nameIconsInTree, namedFields, nativeTokenValue, negatedCssValue, normalizeName, normalizeStyleValue, opOf, opVerb, opacityPercentage, opsForKind, orRef, overlayVerb, overrideCondition, overrideKey, overrideKeyModifiers, overrideModifiers, ownValues, ownerOf, ownsItsValues, packageKey, packageName, parseRootFontSize, partsOf, pathDelta, pathOf, pathSegments, placedGlyphElement, planBreak, planCopy, planLink, planUnlink, previewConditionalProps, previewConditions, previewDefaults, previewMatrix, previewSpec, propApplies, propInto, propOwner, propRegistryRef, propValueDomain, propValueFromAxis, propsIntoLayer, readStatePointer, redundantQualifiers, ref, refGraphOf, refLeaf, refListOf, refSchema, refTo, registerSchemaMigrations, renderComposedValue, renderDerivedColor, renderGradient, renderSignature, renderStyleValue, renderTransition, renderedElement, renderedSignatureOf, renderedTarget, resolutionSchema, resolveComponentProps, resolveFieldValue, resolveIconLibraries, resolveInputDir, resolveOutDir, resolveRegistryDir, resolveTokenValue, resolveTokenValueUnder, resolveValue, resolveValueType, resolveVisibility, resolvedSource, rewriteRefNamespace, rewriteRefSource, rewriteRefs, rnStyleKey, rootFontSize, rootLayerOf, routeOf, routedBag, routedProp, routedPropIn, routesContent, ruleApplies, ruleCondition, runChangeHooks, schemaVersionOf, searchEntities, searchTokens, setAtPath, signatureOf, slotTargetsOf, snapshotHtml, sniffValueType, sourceEntries, sourceOf, sourceOfGroup, sourceOfItem, sourceRowStates, sourceSlugFor, sourceUnavailable, sourceUnreachable, sourceVarPrefix, specFromCapture, specToNodePatches, specWithResolvedVisibility, splitRef, splitStyleProps, stamp, statePointerProp, storedPreview, styleAliasesOf, styleDeclarations, stylePropClassBase, stylePropClassName, stylePropClasses, stylePropEntries, stylePropLeafForToken, stylePropNegates, stylePropTokenGroup, stylePropTokenPath, stylePropTokenValues, stylePropValueFormOf, stylePropValueFromLeaf, stylePropValueLeaves, stylePropValueSchema, stylePropValues, stylePropertiesWriting, stylePropertyAccepts, stylePropertyFor, stylePropertyPathFor, styleRuleMotionClasses, suggestLinkSlug, summarizeChanges, surfaceProp, surfaceProps, tablerExportName, toCssPropertyName, tokenBinding, tokenExists, tokenValueRow, tokenValueRows, touchedFields, transition, unadoptedDirectives, unconditionalPreviewProps, unknownStyleLeaves, unreadableBorrows, unstatableConditions, updateRefIndex, upgradeDraftEntries, upgradePatch, upgradeSerializedConfig, validateComponentProps, validateSpec, valueAt, valueForwardsOf, valueLeavesOf, valueRef, valueSchemaOf, varPrefixOf, views, visibilityStateProps, visibilityTerms, withoutTruthyTerm, wrappedElementKey };

package/dist/index.js

@@ -3,6 +3,8 @@ import { CapturedNode, capturedFromDom, elementFromCaptured } from "./capture/ca
 import { ENTITY_PATH_MESSAGE, MINTED, collectRefs, entityRefOf, isEntityPath, isExtendedRef, isMintedRow, isRef, kindOf, memberOf, memberRef, orRef, pathOf, ref, refLeaf, refSchema, refTo, rewriteRefNamespace, rewriteRefSource, rewriteRefs, sourceOf, splitRef } from "./framework/utils/refs.js";
 import { VOID_ELEMENTS, childrenPolicy, forwardsOf, ownerOf, partsOf, renderedElement, renderedTarget, rootLayerOf } from "./entities/system/element.js";
 import { BUILD_DEFAULTS } from "./configs/build-options.js";
+import { resolveValueType, sniffValueType } from "./css/value-type.js";
+import { parseRootFontSize } from "./css/root-font-size.js";
 import { CONFIG_OPERATION_KIND } from "./framework/config-operation-kind.js";
 import { ConfigFormatError, ConfigRejection, isConfigFormatError, isConfigRejection } from "./framework/rejection.js";
 import { describePatch } from "./framework/plan.js";
@@ -22,6 +24,7 @@ import { CSS_PROPERTY_NAMES, CSS_WIDE_KEYWORDS, cssProperty, cssValueIssue, isCs
 import { valueLeavesOf, valueSchemaOf } from "./framework/value-domain.js";
 import { Composite } from "./entities/system/Composite.js";
 import { MODIFIER_CATEGORIES, Modifier, WEB_ACTIVATIONS, modeAxes, modifierAxes, modifierAxis, modifierCategory, modifierGroupFields, modifierInvariants, modifierLeaf } from "./entities/system/Modifier.js";
+import { isIdentifier, isReservedWord } from "./framework/utils/identifier.js";
 import { STYLE_PROP_VALUE_FORMS, STYLE_PROP_VALUE_LEAVES, StyleProperty, classifyStylePropValue, cssPropertyNames, leavesOfStylePropValue, stylePropValueFormOf, stylePropValueSchema, toCssPropertyName } from "./entities/system/StyleProperty.js";
 import { createSliceMemo } from "./framework/memo.js";
 import { UNCONDITIONAL_PREVIEW_KEY, storedPreview, unconditionalPreviewProps } from "./framework/preview-store.js";
@@ -33,6 +36,8 @@ import { ANATOMY_MARKER, anatomyElementComponent, anatomyTextProp, boundElementT
 import { instanceHolding } from "./spec/instance.js";
 import { Package } from "./entities/system/Package.js";
 import { File, SCRIPT_EXTENSIONS, isBinaryAsset } from "./entities/system/File.js";
+import { TOKEN_READERS, rootFontSize, tokenExists, tokenValueRow, tokenValueRows } from "./entities/system/token-values.js";
+import { Token, defineOverride, overrideCondition, overrideKey, overrideKeyModifiers, overrideModifiers } from "./entities/system/Token.js";
 import { Component, blankComponentBody, canonicalWhen, forwardedNames, layerRef, ownValues, ownsItsValues, valueRef } from "./entities/system/Component.js";
 import { forwardClaims, forwardedLayers, intoName, propApplies, propRegistryRef, routedProp, routedPropIn, routesContent, surfaceProp, surfaceProps } from "./framework/prop-surface.js";
 import { classGrammar } from "./capture/class-grammar.js";
@@ -69,7 +74,6 @@ import { planCopy, sourceEntries } from "./entities/system/copy-plan.js";
 import { planBreak, planLink, planUnlink, sourceRowStates } from "./entities/system/link-plan.js";
 import { LINK_SLUG, LINK_SLUG_MESSAGE, LinkedSystem, borrowedGroup, borrowedItem, isLinkSlug, resolvedSource, sourceOfGroup, sourceOfItem, sourceSlugFor, sourceUnavailable, suggestLinkSlug } from "./entities/system/LinkedSystem.js";
 import { Motion } from "./entities/system/Motion.js";
-import { Token, defineOverride, overrideCondition, overrideKey, overrideKeyModifiers, overrideModifiers } from "./entities/system/Token.js";
 import { danglingLocalRefs, unknownStyleLeaves } from "./framework/ref-integrity.js";
 import { System } from "./configs/system.js";
 import { AiChat, AiFlow, AiGeneration, AiMessage, Canvas, CanvasConfig, Node, Page, SystemSource, createCanvasConfig } from "./configs/CanvasConfig.js";
@@ -81,7 +85,6 @@ import { RN_STYLE_KEYS } from "./react-native/style-keys.generated.js";
 import { NativeStyleProperty, rnStyleKey } from "./entities/native/NativeStyleProperty.js";
 import { NativeToken, nativeTokenValue } from "./entities/native/NativeToken.js";
 import { ReactNativeSystem } from "./configs/react-native-system.js";
-import { resolveValueType, sniffValueType } from "./css/value-type.js";
 import { defineComponent } from "./entities/system/defineComponent.js";
 import { declaredRuntimeModules } from "./entities/system/runtime-modules.js";
 import { matchEntities, normalizeName, searchEntities } from "./framework/entity-search.js";
@@ -95,4 +98,4 @@ import { inferredRenames } from "./framework/rename-inference.js";
 import { ConfigSession, memoryConfigSource } from "./framework/session.js";
 import { EXPORT_MEMBER, packageKey, packageName } from "./framework/utils/package-path.js";
 import { validateSpec } from "./framework/validate-spec.js";
-export { AI_LANES, ANATOMY_MARKER, AiChat, AiFlow, AiGeneration, AiMessage, BUILD_DEFAULTS, BuildSection, CANVAS_ROLES, CONFIG_OPERATION_KIND, CSS_DEFAULTS, CSS_PROPERTY_NAMES, CSS_WIDE_KEYWORDS, CURRENT_SCHEMA_VERSION, Canvas, CanvasConfig, CanvasRole, CanvasSection, CapturedNode, Component, Composite, Config, ConfigFormatError, ConfigRejection, ConfigSession, CssSection, DERIVED_COLOR_SPACE, DERIVED_MUTATIONS, Device, Documentation, DocumentationLibrary, ENTITY_PATH_MESSAGE, EXPORT_MEMBER, Entity, File, Font, FontFile, GROUP, GUIDANCE_LANES, GlobalStyle, Guidance, GuidanceStyle, ICON_METADATA_FORMATS, Icon, LINK_SLUG, LINK_SLUG_MESSAGE, LinkedSystem, MINTED, MODIFIER_CATEGORIES, Modifier, Motion, NATIVE_ACTIVATIONS, NativeModifier, NativeSettings, NativeStyleProperty, NativeToken, Node, Operation, PLAYGROUND_DEFAULTS, Package, Page, PlaygroundSection, RN_STYLE_KEYS, ReactNativeSystem, SCRIPT_EXTENSIONS, SERIALIZED_CONFIG_VERSION, SIZE_TOLERANCE_PX, STYLE_PROPERTIES, STYLE_PROP_VALUE_FORMS, STYLE_PROP_VALUE_LEAVES, SchemaVersionTooNew, Settings, Snapshot, StyleProperty, System, SystemSection, SystemSource, Token, Tool, UNCONDITIONAL_PREVIEW_KEY, UNREACHABLE, VOID_ELEMENTS, WEB_ACTIVATIONS, addressOf, alpha, anatomyElementComponent, anatomyIssueKey, anatomyTextProp, applyPathDelta, authoredBag, authoredValue, authoringSignatures, baseOf, blankComponentBody, borrowedGroup, borrowedItem, boundElementType, brandGroup, buildRefGraph, buildRefIndex, canonicalWhen, capturedFromDom, changeOf, changeValueAt, changesOf, childrenPolicy, classGrammar, className, classPrefixOf, classifyOverlay, classifyStylePropValue, collectRefs, componentClassBase, componentCompositeClasses, componentLayerClass, componentModuleFilePaths, componentModuleKey, componentModuleSource, componentMotionClasses, componentPropClasses, componentRegistryImports, componentRuleClasses, componentSpec, composedValueAuthoring, composedValueFormOf, composedValueForms, composedValueSchemas, createCanvasConfig, createSliceMemo, cssPrefixes, cssPropValue, cssProperty, cssPropertyNames, cssValueIssue, cssVar, cssVarRef, danglingDirectives, danglingLocalRefs, danglingSourcedRefs, darken, declaredField, declaredPropDefaults, declaredPropRouting, declaredRuntimeModules, defineComponent, defineConfig, defineDerivedEntity, defineEntity, defineOverride, defineSubEntity, deriveCreateSchema, deriveSpec, deriveUpdateSchema, describeBody, describePatch, detectedWireVersion, diffRendered, editOp, elementFromCaptured, entityRefOf, entryKeyOf, expandComponent, expandSpec, fieldKeys, fontFamilyStack, forceModeAttribute, forceModeAttributeOf, forceModeProp, forceModePropGroup, forceModePropValue, forceModeProps, forceStateAttribute, forwardClaims, forwardedLayers, forwardedNames, forwardsOf, globalStyleName, glyphComponentOf, glyphExportNames, glyphLibrariesOf, glyphPropsOf, glyphSourcesOf, glyphType, graftPreviewElements, guidanceReaches, guidanceScopeOf, guidanceTextOf, iconCategories, iconLibraries, iconLibrary, iconMemberMetadata, iconMetadata, iconMetadataDeclaration, iconMetadataFile, iconMetadataFileJsonSchema, iconMetadataFormat, iconResolver, iconToolAxisOptions, iconToolLibraries, iconToolOf, iconVariantAs, inferredRenames, inputOf, instanceHolding, instanceSpec, intoName, isAuthored, isBinaryAsset, isComposedValue, isConfigFormatError, isConfigRejection, isCssProperty, isDeclaredElementProp, isDerivedColor, isEntityPath, isExtendedRef, isForceModeProp, isGradient, isGroupBody, isLinkSlug, isMintedRow, isNativeConfig, isPlainObject, isPreviewElement, isRef, isSystemConfig, isTransition, kebabComponent, keyedPreviewConditions, kindOf, kindsOf, layerRef, layerRoutedProps, layerStyles, layerTextProp, leafAddresses, leafVerb, leavesOfStylePropValue, librariesBoundBy, libraryHolding, lighten, linearGradient, liveStateProps, matchEntities, matchTokens, memberFromLeaf, memberLeaves, memberOf, memberRef, memberVariantOptions, memoryConfigSource, misdeclaredOverlays, mix, modeAxes, modifierAxes, modifierAxis, modifierCategory, modifierGroupFields, modifierInvariants, modifierLeaf, modifierUtilitiesUsed, motionClassName, nameIconsInTree, namedFields, nativeTokenValue, negatedCssValue, normalizeName, normalizeStyleValue, opOf, opVerb, opacityPercentage, opsForKind, orRef, overlayVerb, overrideCondition, overrideKey, overrideKeyModifiers, overrideModifiers, ownValues, ownerOf, ownsItsValues, packageKey, packageName, partsOf, pathDelta, pathOf, pathSegments, placedGlyphElement, planBreak, planCopy, planLink, planUnlink, previewConditionalProps, previewConditions, previewDefaults, previewMatrix, previewSpec, propApplies, propInto, propOwner, propRegistryRef, propValueDomain, propValueFromAxis, propsIntoLayer, readStatePointer, redundantQualifiers, ref, refGraphOf, refLeaf, refListOf, refSchema, refTo, registerSchemaMigrations, renderComposedValue, renderDerivedColor, renderGradient, renderSignature, renderStyleValue, renderTransition, renderedElement, renderedSignatureOf, renderedTarget, resolutionSchema, resolveComponentProps, resolveFieldValue, resolveIconLibraries, resolveInputDir, resolveOutDir, resolveRegistryDir, resolveTokenValue, resolveTokenValueUnder, resolveValue, resolveValueType, resolveVisibility, resolvedSource, rewriteRefNamespace, rewriteRefSource, rewriteRefs, rnStyleKey, rootLayerOf, routeOf, routedBag, routedProp, routedPropIn, routesContent, ruleApplies, ruleCondition, runChangeHooks, schemaVersionOf, searchEntities, searchTokens, setAtPath, signatureOf, slotTargetsOf, snapshotHtml, sniffValueType, sourceEntries, sourceOf, sourceOfGroup, sourceOfItem, sourceRowStates, sourceSlugFor, sourceUnavailable, sourceUnreachable, sourceVarPrefix, specFromCapture, specToNodePatches, specWithResolvedVisibility, splitRef, splitStyleProps, stamp, statePointerProp, storedPreview, styleAliasesOf, styleDeclarations, stylePropClassBase, stylePropClassName, stylePropClasses, stylePropEntries, stylePropLeafForToken, stylePropNegates, stylePropTokenGroup, stylePropTokenPath, stylePropTokenValues, stylePropValueFormOf, stylePropValueFromLeaf, stylePropValueLeaves, stylePropValueSchema, stylePropValues, stylePropertiesWriting, stylePropertyAccepts, stylePropertyFor, stylePropertyPathFor, styleRuleMotionClasses, suggestLinkSlug, summarizeChanges, surfaceProp, surfaceProps, tablerExportName, toCssPropertyName, tokenBinding, touchedFields, transition, unadoptedDirectives, unconditionalPreviewProps, unknownStyleLeaves, unreadableBorrows, unstatableConditions, updateRefIndex, upgradeDraftEntries, upgradePatch, upgradeSerializedConfig, validateComponentProps, validateSpec, valueAt, valueForwardsOf, valueLeavesOf, valueRef, valueSchemaOf, varPrefixOf, views, visibilityStateProps, visibilityTerms, withoutTruthyTerm, wrappedElementKey };
+export { AI_LANES, ANATOMY_MARKER, AiChat, AiFlow, AiGeneration, AiMessage, BUILD_DEFAULTS, BuildSection, CANVAS_ROLES, CONFIG_OPERATION_KIND, CSS_DEFAULTS, CSS_PROPERTY_NAMES, CSS_WIDE_KEYWORDS, CURRENT_SCHEMA_VERSION, Canvas, CanvasConfig, CanvasRole, CanvasSection, CapturedNode, Component, Composite, Config, ConfigFormatError, ConfigRejection, ConfigSession, CssSection, DERIVED_COLOR_SPACE, DERIVED_MUTATIONS, Device, Documentation, DocumentationLibrary, ENTITY_PATH_MESSAGE, EXPORT_MEMBER, Entity, File, Font, FontFile, GROUP, GUIDANCE_LANES, GlobalStyle, Guidance, GuidanceStyle, ICON_METADATA_FORMATS, Icon, LINK_SLUG, LINK_SLUG_MESSAGE, LinkedSystem, MINTED, MODIFIER_CATEGORIES, Modifier, Motion, NATIVE_ACTIVATIONS, NativeModifier, NativeSettings, NativeStyleProperty, NativeToken, Node, Operation, PLAYGROUND_DEFAULTS, Package, Page, PlaygroundSection, RN_STYLE_KEYS, ReactNativeSystem, SCRIPT_EXTENSIONS, SERIALIZED_CONFIG_VERSION, SIZE_TOLERANCE_PX, STYLE_PROPERTIES, STYLE_PROP_VALUE_FORMS, STYLE_PROP_VALUE_LEAVES, SchemaVersionTooNew, Settings, Snapshot, StyleProperty, System, SystemSection, SystemSource, TOKEN_READERS, Token, Tool, UNCONDITIONAL_PREVIEW_KEY, UNREACHABLE, VOID_ELEMENTS, WEB_ACTIVATIONS, addressOf, alpha, anatomyElementComponent, anatomyIssueKey, anatomyTextProp, applyPathDelta, authoredBag, authoredValue, authoringSignatures, baseOf, blankComponentBody, borrowedGroup, borrowedItem, boundElementType, brandGroup, buildRefGraph, buildRefIndex, canonicalWhen, capturedFromDom, changeOf, changeValueAt, changesOf, childrenPolicy, classGrammar, className, classPrefixOf, classifyOverlay, classifyStylePropValue, collectRefs, componentClassBase, componentCompositeClasses, componentLayerClass, componentModuleFilePaths, componentModuleKey, componentModuleSource, componentMotionClasses, componentPropClasses, componentRegistryImports, componentRuleClasses, componentSpec, composedValueAuthoring, composedValueFormOf, composedValueForms, composedValueSchemas, createCanvasConfig, createSliceMemo, cssPrefixes, cssPropValue, cssProperty, cssPropertyNames, cssValueIssue, cssVar, cssVarRef, danglingDirectives, danglingLocalRefs, danglingSourcedRefs, darken, declaredField, declaredPropDefaults, declaredPropRouting, declaredRuntimeModules, defineComponent, defineConfig, defineDerivedEntity, defineEntity, defineOverride, defineSubEntity, deriveCreateSchema, deriveSpec, deriveUpdateSchema, describeBody, describePatch, detectedWireVersion, diffRendered, editOp, elementFromCaptured, entityRefOf, entryKeyOf, expandComponent, expandSpec, fieldKeys, fontFamilyStack, forceModeAttribute, forceModeAttributeOf, forceModeProp, forceModePropGroup, forceModePropValue, forceModeProps, forceStateAttribute, forwardClaims, forwardedLayers, forwardedNames, forwardsOf, globalStyleName, glyphComponentOf, glyphExportNames, glyphLibrariesOf, glyphPropsOf, glyphSourcesOf, glyphType, graftPreviewElements, guidanceReaches, guidanceScopeOf, guidanceTextOf, iconCategories, iconLibraries, iconLibrary, iconMemberMetadata, iconMetadata, iconMetadataDeclaration, iconMetadataFile, iconMetadataFileJsonSchema, iconMetadataFormat, iconResolver, iconToolAxisOptions, iconToolLibraries, iconToolOf, iconVariantAs, inferredRenames, inputOf, instanceHolding, instanceSpec, intoName, isAuthored, isBinaryAsset, isComposedValue, isConfigFormatError, isConfigRejection, isCssProperty, isDeclaredElementProp, isDerivedColor, isEntityPath, isExtendedRef, isForceModeProp, isGradient, isGroupBody, isIdentifier, isLinkSlug, isMintedRow, isNativeConfig, isPlainObject, isPreviewElement, isRef, isReservedWord, isSystemConfig, isTransition, kebabComponent, keyedPreviewConditions, kindOf, kindsOf, layerRef, layerRoutedProps, layerStyles, layerTextProp, leafAddresses, leafVerb, leavesOfStylePropValue, librariesBoundBy, libraryHolding, lighten, linearGradient, liveStateProps, matchEntities, matchTokens, memberFromLeaf, memberLeaves, memberOf, memberRef, memberVariantOptions, memoryConfigSource, misdeclaredOverlays, mix, modeAxes, modifierAxes, modifierAxis, modifierCategory, modifierGroupFields, modifierInvariants, modifierLeaf, modifierUtilitiesUsed, motionClassName, nameIconsInTree, namedFields, nativeTokenValue, negatedCssValue, normalizeName, normalizeStyleValue, opOf, opVerb, opacityPercentage, opsForKind, orRef, overlayVerb, overrideCondition, overrideKey, overrideKeyModifiers, overrideModifiers, ownValues, ownerOf, ownsItsValues, packageKey, packageName, parseRootFontSize, partsOf, pathDelta, pathOf, pathSegments, placedGlyphElement, planBreak, planCopy, planLink, planUnlink, previewConditionalProps, previewConditions, previewDefaults, previewMatrix, previewSpec, propApplies, propInto, propOwner, propRegistryRef, propValueDomain, propValueFromAxis, propsIntoLayer, readStatePointer, redundantQualifiers, ref, refGraphOf, refLeaf, refListOf, refSchema, refTo, registerSchemaMigrations, renderComposedValue, renderDerivedColor, renderGradient, renderSignature, renderStyleValue, renderTransition, renderedElement, renderedSignatureOf, renderedTarget, resolutionSchema, resolveComponentProps, resolveFieldValue, resolveIconLibraries, resolveInputDir, resolveOutDir, resolveRegistryDir, resolveTokenValue, resolveTokenValueUnder, resolveValue, resolveValueType, resolveVisibility, resolvedSource, rewriteRefNamespace, rewriteRefSource, rewriteRefs, rnStyleKey, rootFontSize, rootLayerOf, routeOf, routedBag, routedProp, routedPropIn, routesContent, ruleApplies, ruleCondition, runChangeHooks, schemaVersionOf, searchEntities, searchTokens, setAtPath, signatureOf, slotTargetsOf, snapshotHtml, sniffValueType, sourceEntries, sourceOf, sourceOfGroup, sourceOfItem, sourceRowStates, sourceSlugFor, sourceUnavailable, sourceUnreachable, sourceVarPrefix, specFromCapture, specToNodePatches, specWithResolvedVisibility, splitRef, splitStyleProps, stamp, statePointerProp, storedPreview, styleAliasesOf, styleDeclarations, stylePropClassBase, stylePropClassName, stylePropClasses, stylePropEntries, stylePropLeafForToken, stylePropNegates, stylePropTokenGroup, stylePropTokenPath, stylePropTokenValues, stylePropValueFormOf, stylePropValueFromLeaf, stylePropValueLeaves, stylePropValueSchema, stylePropValues, stylePropertiesWriting, stylePropertyAccepts, stylePropertyFor, stylePropertyPathFor, styleRuleMotionClasses, suggestLinkSlug, summarizeChanges, surfaceProp, surfaceProps, tablerExportName, toCssPropertyName, tokenBinding, tokenExists, tokenValueRow, tokenValueRows, touchedFields, transition, unadoptedDirectives, unconditionalPreviewProps, unknownStyleLeaves, unreadableBorrows, unstatableConditions, updateRefIndex, upgradeDraftEntries, upgradePatch, upgradeSerializedConfig, validateComponentProps, validateSpec, valueAt, valueForwardsOf, valueLeavesOf, valueRef, valueSchemaOf, varPrefixOf, views, visibilityStateProps, visibilityTerms, withoutTruthyTerm, wrappedElementKey };

package/dist/migrations/2.0.0/raw-css.js

@@ -1,5 +1,5 @@
-import generate from "css-tree/generator";
 import parse from "css-tree/parser";
+import generate from "css-tree/generator";
 import { tokenTypes, tokenize } from "css-tree/tokenizer";
 //#region src/migrations/2.0.0/raw-css.ts
 function parseRawCss(css) {

package/dist/migrations/2.0.0/v1-artifact.d.ts

@@ -17,8 +17,8 @@ import { cellAt } from "../../spec/cell.js";
 import { instanceAt } from "../../spec/instance.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 { DocumentRename } from "../../spec/rewrite-refs.js";
 import * as _$zod from "zod";
 import * as _$zod_v4_core0 from "zod/v4/core";
@@ -222,6 +222,7 @@ declare function loadV1Artifact(studio: V1Artifact, options?: LoadV1Options): Co
       }, _$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<{
@@ -229,7 +230,7 @@ declare function loadV1Artifact(studio: V1Artifact, options?: LoadV1Options): Co
       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<{
+  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<{
@@ -242,7 +243,9 @@ declare function loadV1Artifact(studio: V1Artifact, options?: LoadV1Options): Co
     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>;
@@ -411,6 +414,22 @@ declare function loadV1Artifact(studio: V1Artifact, options?: LoadV1Options): Co
       __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", {
@@ -583,6 +602,22 @@ declare function loadV1Artifact(studio: V1Artifact, options?: LoadV1Options): Co
           __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: ({
@@ -1631,8 +1666,8 @@ declare function loadV1Artifact(studio: V1Artifact, options?: LoadV1Options): Co
     }, _$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/migrations/2.0.0/v1-artifact.js

@@ -6,6 +6,7 @@ import { Composite } from "../../entities/system/Composite.js";
 import { Modifier } from "../../entities/system/Modifier.js";
 import { StyleProperty } from "../../entities/system/StyleProperty.js";
 import { cssVar } from "../../framework/projections.js";
+import { Token, overrideKey } from "../../entities/system/Token.js";
 import { Component, canonicalWhen } from "../../entities/system/Component.js";
 import { Icon } from "../../entities/system/Icon.js";
 import { stableStringify } from "../../framework/utils/content-key.js";
@@ -13,7 +14,6 @@ import { CanvasRole } from "../../entities/system/CanvasRole.js";
 import { GlobalStyle, globalStyleName } from "../../entities/system/GlobalStyle.js";
 import { Guidance } from "../../entities/system/Guidance.js";
 import { Motion } from "../../entities/system/Motion.js";
-import { Token, overrideKey } from "../../entities/system/Token.js";
 import { danglingLocalRefs } from "../../framework/ref-integrity.js";
 import { parseRawCss } from "./raw-css.js";
 import { System } from "../../configs/system.js";

package/dist/migrations/20260923160425_render_token_refs.d.ts

@@ -0,0 +1,14 @@
+/**
+ * A stored component gains `tokenRefs`: the tokens its render reads as values
+ * (`Token.ref('spacing/2.5').px()`), baked from the source the way `file` is. Each is an ordinary
+ * ref, so the graph sees the read: a rename reaches it, a delete names the component, and a link's
+ * closure carries the token. The `css` settings gain `rem`, the page's root font size as CSS. A
+ * component or settings stored before this version has neither and means what it meant.
+ *
+ * Additive; nothing stored before this version reshapes.
+ *
+ * Deletable once no stored artifact predates it.
+ */
+import type { SchemaMigration } from '../framework/schema-version';
+export declare const RENDER_TOKEN_REFS_VERSION = 20260923160425;
+export declare const renderTokenRefsMigration: SchemaMigration;