@vectoriox/iox-ui 5.11.0 → 5.12.0

package/design-core/index.d.ts

@@ -8193,10 +8193,17 @@ declare const REDUCED_TRANSPARENCY_OVERRIDES: Readonly<Record<string, string>>;
 declare function tokensToVarMap(tokens: ReadonlyArray<DesignTokenLike> | null | undefined): Record<string, string>;
 /** Only the tokens that carry a dark override, as `{ 'iox-name': darkValue }`. */
 declare function tokensToDarkVarMap(tokens: ReadonlyArray<DesignTokenLike> | null | undefined): Record<string, string>;
-type Mode = 'light' | 'dark';
+/** A compiled colour mode — the contract's modes minus `auto`, which is a compile CHOICE, not values. */
+type ResolvedMode = Exclude<DesignMode, 'auto'>;
 /** Every token's ROOT value in one mode, with `var(--iox-…)` references resolved against the same
  *  set (recursively; a reference cycle or an unknown token is left as written). */
-declare function resolveTokenValues(tokens: ReadonlyArray<DesignTokenLike> | null | undefined, mode?: Mode): Record<string, string>;
+declare function resolveTokenValues(tokens: ReadonlyArray<DesignTokenLike> | null | undefined, mode?: ResolvedMode): Record<string, string>;
+/**
+ * `value` with every `var(--iox-…)` replaced by that token's resolved root value in `mode` — what
+ * the Style panel's Detach writes, so the node keeps exactly what it showed as a literal. An unknown
+ * token falls back to its declared fallback, else stays as written.
+ */
+declare function resolveTokenReferences(value: string, tokens: ReadonlyArray<DesignTokenLike> | null | undefined, mode?: ResolvedMode): string;
 /**
  * Section colour schemes (design-system plan §3c). Two rules, both about WHERE a custom property
  * resolves:
@@ -8217,17 +8224,11 @@ declare function compileTokenCssBlocks(tokens: ReadonlyArray<DesignTokenLike> |
 declare function compileTokenCss(tokens: ReadonlyArray<DesignTokenLike> | null | undefined, opts?: TokenCssOptions): string;
 
 /**
- * Flavors (flavors-and-theming-plan.md, F1): the design language a studio launches with,
- * expressed as data. THE invariant — a flavor never writes a literal into a node; it writes
- * tokens, and element defaults that REFERENCE tokens. To that end a pack's `defaults` map
- * holds TOKEN NAMES, not CSS values: the resolver builds `var(--iox-<name>, <packValue>)`,
- * so smuggling a literal in is impossible by construction, and the validator only has to
- * check that every referenced token exists.
- *
- * The fallback is the bootstrap: until F2 seeds the org's `designtokens` rows, no `--iox-*`
- * var is defined anywhere, and `var(--iox-radius-control, 4px)` must still paint identically
- * in the builder canvas and the SSR page. Once tokens ARE seeded (or re-themed), the var wins
- * over the fallback everywhere — which is exactly the §3 propagation story.
+ * Flavors v1 (flavors-and-theming-plan.md, F1–F2): a pack is its TOKENS plus the accent hue
+ * opinion the brand derivation reads. The per-type `defaults` map and its resolvers are gone
+ * (design-system plan §3e, DS2): a new element is born wearing an ELEMENT STYLE
+ * (`element-styles.ts`), which references tokens and is flavor-independent. Swiss survives only
+ * until DS4 migrates orgs to Crisp.
  */
 interface FlavorTokenDef {
     name: string;
@@ -8247,36 +8248,121 @@ interface FlavorPack {
     label: string;
     blurb: string;
     tokens: FlavorTokenDef[];
-    /** type → styleTrait → TOKEN NAME (never a CSS value — see the module header). */
-    defaults: Record<string, Record<string, string>>;
     /** F2: the accent's hue rotation (degrees in OKLab) from the brand seed — a pack opinion. */
     accentHueDeg?: number;
 }
-/** trait → `var(--iox-<token>, <packValue>)` for one node type. Unknown type → {}. */
-declare function resolveFlavorDefaults(type: string, pack: FlavorPack | null | undefined): Record<string, string>;
+/** A pack's own sanity: every token row names itself and carries a value. Returns errors. */
+declare function validateFlavorPack(pack: FlavorPack): string[];
+/**
+ * Swiss — the F1 pack: four tokens (control/surface radius, control/stack spacing) and the hue
+ * opinion F2's brand step reads. Kept until DS4 migrates `flavorId: swiss` orgs to Crisp; its four
+ * rows are the spec's `legacyAliases`.
+ */
+declare const SWISS_FLAVOR: FlavorPack;
+
 /**
- * The ENGINE's half of the cascade: kebab `prop: var(…)` declarations for every pack default
- * the node's persisted styleProps does NOT set. Appended beside renderDefaultDeclarations —
- * same guard-on-undefined discipline, so a node saved post-F1 (var already serialised via the
- * builder's trait defaults) is untouched, and a legacy node picks the pack default up at
- * render time. Node styleProps always wins.
+ * Element styles — the author's "classes" (design-system plan §3b). A named look is an EXACT trait
+ * map written into a node; every value is a `var(--iox-…)` reference or a flavor-independent
+ * keyword, so a re-theme rewrites token rows and every node wearing the style follows. No renderer
+ * reads `elementStyle`: it records which look a node wears, for the panel row, Reset, adopt and AI.
+ *
+ * Works on two node shapes through one minimal interface, so the builder (a ComponentNode whose
+ * values live in `styleTraits[].traits[].default`) and the server-side composer (a plain serialized
+ * layout node with `styleProps`) share every function here.
  */
-declare function flavorDefaultDeclarations(type: string, styleProps: Record<string, any> | null | undefined, pack: FlavorPack | null | undefined): string[];
+declare enum ElementStyleState {
+    Hover = "hover",
+    Active = "active",
+    Focus = "focus"
+}
+declare const ELEMENT_STYLE_STATES: ReadonlyArray<ElementStyleState>;
+interface ElementStyle {
+    readonly id: string;
+    readonly label: string;
+    readonly group: string;
+    readonly appliesTo: ReadonlyArray<string>;
+    readonly base: Readonly<Record<string, string>>;
+    readonly hover?: Readonly<Record<string, string>>;
+    readonly active?: Readonly<Record<string, string>>;
+    readonly focus?: Readonly<Record<string, string>>;
+}
+declare const ELEMENT_STYLES: ReadonlyArray<ElementStyle>;
+/** Legacy `Button.variant` → the element style it maps to (adopt, DS7). */
+declare const BUTTON_VARIANT_TO_STYLE: Readonly<Record<string, string>>;
+interface PalettePreset {
+    readonly label: string;
+    readonly type: string;
+    readonly elementStyle: string;
+    readonly traits?: Readonly<Record<string, string>>;
+    readonly styleProps: Readonly<Record<string, string>>;
+}
+/** Palette entries that are a Container wearing an element style (Card · Panel · Navigation bar). */
+declare const PALETTE_PRESETS: ReadonlyArray<PalettePreset>;
+declare function elementStyleById(id: string | null | undefined): ElementStyle | undefined;
+/** The styles a node of `type` may wear — the Style panel's select. */
+declare function elementStylesFor(type: string): ElementStyle[];
+/** The minimal shape both a builder node and a serialized layout node satisfy. */
+interface ElementStyleTraitLike {
+    name: string;
+    default?: unknown;
+}
+interface ElementStyleTarget {
+    type: string;
+    elementStyle?: string;
+    /** Builder shape: values live in `trait.default`. Wins when present. */
+    styleTraits?: ReadonlyArray<{
+        traits: ElementStyleTraitLike[];
+    }>;
+    /** Serialized shape: a flat map. Created on first write when the target has no `styleTraits`. */
+    styleProps?: Record<string, unknown>;
+    stateStyles?: Partial<Record<string, Record<string, unknown>>>;
+}
+/** One trait an element style owns: a base trait, or a trait inside a pseudo-state. */
+interface OwnedTrait {
+    trait: string;
+    state?: ElementStyleState;
+}
+declare enum OwnedTraitLink {
+    /** The node still holds the style's value. */
+    Linked = "linked",
+    /** The author replaced it on this node. */
+    Changed = "changed"
+}
+interface OwnedTraitStatus extends OwnedTrait {
+    expected: string;
+    actual: unknown;
+    status: OwnedTraitLink;
+}
+interface ApplyElementStyleResult {
+    applied: boolean;
+    /** Base traits the target has no slot for — a builder node silently drops these, so a spec
+     *  asserts this list is empty for every style × every type it applies to. */
+    unknownTraits: string[];
+}
+interface SwitchElementStyleResult {
+    applied: boolean;
+    /** Traits the old style owned whose value the author had changed — kept, never overwritten. */
+    kept: OwnedTrait[];
+}
+/** Write the style's exact base map and its hover/active/focus maps into the target. */
+declare function applyElementStyle(target: ElementStyleTarget, id: string): ApplyElementStyleResult;
 /**
- * The CI gate (flavors plan §10 C4): a pack may only name types and traits that exist in the
- * live component registry, and tokens it defines itself. Returns human-readable errors; a
- * consumer spec feeds it the REAL registry and asserts [].
+ * The element style a NEW node of `type` is born wearing (the spec's `defaultElementStyle`), or null
+ * when the type has none. `traits` is the node's own trait values (props) — a Heading's default
+ * follows its `level`; a Heading with no level matches no rule.
  */
-declare function validateFlavorPack(pack: FlavorPack, knownTraitsByType: Record<string, ReadonlySet<string> | string[]>): string[];
+declare function defaultElementStyleFor(type: string, traits?: Readonly<Record<string, unknown>>): string | null;
+/** Per owned trait: does the node still hold the style's value (linked) or the author's (changed)? */
+declare function ownedTraitStatus(target: ElementStyleTarget, id: string): OwnedTraitStatus[];
 /**
- * Swiss — the default pack (flavors plan §8: "the flavor that can never embarrass anyone").
- * Deliberately SMALL at F1: radius + control padding on the clickables, surface radius on Card.
- * Colour, type and motion arrive with the brand step (F2) — a colour default here would repaint
- * legacy pages before anyone chose anything.
+ * Move a node from one style to another, rewriting ONLY what the old style owned:
+ * - an owned trait still holding the old style's value is released — a base trait goes back to
+ *   `baseline[trait]` (the type's unstyled value; deleted when the baseline has none), a state trait
+ *   is removed from its state map;
+ * - an owned trait the author changed is KEPT, and the new style does not overwrite it.
+ * Then the new style is written. Traits neither style owns are never touched.
  */
-declare const SWISS_FLAVOR: FlavorPack;
-/** What both renderers use until F2 lets an org choose. */
-declare const DEFAULT_FLAVOR: FlavorPack;
+declare function switchElementStyle(target: ElementStyleTarget, fromId: string | null | undefined, toId: string, baseline?: Readonly<Record<string, unknown>>): SwitchElementStyleResult;
 
 /**
  * BRAND DERIVATION (flavors plan §6, F2): one colour in, an asserted accessible ramp out.
@@ -8456,5 +8542,5 @@ declare function parseFontFamilies(stack: string): string[];
  */
 declare function fontsForTokens(tokens: ReadonlyArray<DesignTokenLike> | null | undefined): string[];
 
-export { ACCENT_TOKEN_NAMES, DEFAULT_FLAVOR, DESIGN_TOKEN_GROUPS, DESIGN_TOKEN_TIERS, DESIGN_TOKEN_TYPES, FLAVOR_SPEC_VERSION, FONT_CATALOG, FONT_FAMILY_TOKENS, REDUCED_MOTION_OVERRIDES, REDUCED_TRANSPARENCY_OVERRIDES, REVERT_WINDOW_MS, SPEC_A11Y, SPEC_AXES, SPEC_BUTTON_VARIANT_TO_STYLE, SPEC_CONTRAST, SPEC_DEFAULT_ELEMENT_STYLE, SPEC_ELEMENT_STYLES, SPEC_FIELD_CLASS_BASELINE, SPEC_FLAVORS, SPEC_FLAVOR_PACKS, SPEC_FONTS, SPEC_FONT_ROLES, SPEC_LEGACY_ALIASES, SPEC_PALETTE_PRESETS, SPEC_SCHEMES, SPEC_SPRINGS, SPEC_TIERS, SPEC_TIER_IDS, SPEC_TOKEN_TYPES, SWISS_FLAVOR, USER_TOKEN_SOURCE, WCAG_AA_TEXT, apcaLc, buildFlavorTokens, buildFontFaceCss, compileSchemeCss, compileTokenCss, compileTokenCssBlocks, cssString, defaultDesignChoices, deriveAccentTokens, deriveBrandTokens, flavorDefaultDeclarations, flavorSourceStamp, fontsForTokens, isDesignTokenGroup, isDesignTokenTier, isDesignTokenType, oklabToRgb, parseFontFamilies, parseHexColor, planFlavorRevert, planFlavorSeed, relativeLuminance, resolveFlavorDefaults, resolveTokenValues, revertAvailable, rgbToOklab, springToLinear, styleKeyToKebab, toHexColor, tokensToDarkVarMap, tokensToVarMap, userFontStack, validateFlavorPack, wcagContrastRatio };
-export type { AccentBackgrounds, AccentTokenName, DensityId, DesignChoices, DesignMode, DesignTokenGroup, DesignTokenLike, DesignTokenRow, DesignTokenTier, DesignTokenType, FlavorPack, FlavorPackV2, FlavorRevertPlan, FlavorRevertSnapshot, FlavorSeedPlan, FlavorSpecToken, FlavorTokenDef, FontDescriptor, FontFormat, FontPair, FontRoleToken, FontStyle, LinearSpring, MotionId, OkLab, Rgb, SchemeId, ShapeId, StoredDesignTokenRow, TokenCssBlocks, TokenCssOptions };
+export { ACCENT_TOKEN_NAMES, BUTTON_VARIANT_TO_STYLE, DESIGN_TOKEN_GROUPS, DESIGN_TOKEN_TIERS, DESIGN_TOKEN_TYPES, ELEMENT_STYLES, ELEMENT_STYLE_STATES, ElementStyleState, FLAVOR_SPEC_VERSION, FONT_CATALOG, FONT_FAMILY_TOKENS, OwnedTraitLink, PALETTE_PRESETS, REDUCED_MOTION_OVERRIDES, REDUCED_TRANSPARENCY_OVERRIDES, REVERT_WINDOW_MS, SPEC_A11Y, SPEC_AXES, SPEC_BUTTON_VARIANT_TO_STYLE, SPEC_CONTRAST, SPEC_DEFAULT_ELEMENT_STYLE, SPEC_ELEMENT_STYLES, SPEC_FIELD_CLASS_BASELINE, SPEC_FLAVORS, SPEC_FLAVOR_PACKS, SPEC_FONTS, SPEC_FONT_ROLES, SPEC_LEGACY_ALIASES, SPEC_PALETTE_PRESETS, SPEC_SCHEMES, SPEC_SPRINGS, SPEC_TIERS, SPEC_TIER_IDS, SPEC_TOKEN_TYPES, SWISS_FLAVOR, USER_TOKEN_SOURCE, WCAG_AA_TEXT, apcaLc, applyElementStyle, buildFlavorTokens, buildFontFaceCss, compileSchemeCss, compileTokenCss, compileTokenCssBlocks, cssString, defaultDesignChoices, defaultElementStyleFor, deriveAccentTokens, deriveBrandTokens, elementStyleById, elementStylesFor, flavorSourceStamp, fontsForTokens, isDesignTokenGroup, isDesignTokenTier, isDesignTokenType, oklabToRgb, ownedTraitStatus, parseFontFamilies, parseHexColor, planFlavorRevert, planFlavorSeed, relativeLuminance, resolveTokenReferences, resolveTokenValues, revertAvailable, rgbToOklab, springToLinear, styleKeyToKebab, switchElementStyle, toHexColor, tokensToDarkVarMap, tokensToVarMap, userFontStack, validateFlavorPack, wcagContrastRatio };
+export type { AccentBackgrounds, AccentTokenName, ApplyElementStyleResult, DensityId, DesignChoices, DesignMode, DesignTokenGroup, DesignTokenLike, DesignTokenRow, DesignTokenTier, DesignTokenType, ElementStyle, ElementStyleTarget, ElementStyleTraitLike, FlavorPack, FlavorPackV2, FlavorRevertPlan, FlavorRevertSnapshot, FlavorSeedPlan, FlavorSpecToken, FlavorTokenDef, FontDescriptor, FontFormat, FontPair, FontRoleToken, FontStyle, LinearSpring, MotionId, OkLab, OwnedTrait, OwnedTraitStatus, PalettePreset, ResolvedMode, Rgb, SchemeId, ShapeId, StoredDesignTokenRow, SwitchElementStyleResult, TokenCssBlocks, TokenCssOptions };

package/fesm2022/vectoriox-iox-ui-design-core.mjs

@@ -9526,10 +9526,12 @@ function tokensToDarkVarMap(tokens) {
 }
 const TOKEN_REF = /var\(\s*--iox-([\w-]+)\s*(?:,([^()]*))?\)/g;
 const PLACEHOLDER = /\{\{\s*([\w-]+)\s*\}\}/g;
-const modeValue = (t, mode) => (mode === 'dark' ? darkOf(t) ?? t.value : t.value);
+const LIGHT = 'light';
+const DARK = 'dark';
+const modeValue = (t, mode) => (mode === DARK ? darkOf(t) ?? t.value : t.value);
 /** Every token's ROOT value in one mode, with `var(--iox-…)` references resolved against the same
  *  set (recursively; a reference cycle or an unknown token is left as written). */
-function resolveTokenValues(tokens, mode = 'light') {
+function resolveTokenValues(tokens, mode = LIGHT) {
     const raw = new Map(usableTokens(tokens).map(t => [t.name, modeValue(t, mode)]));
     const out = {};
     const resolve = (name, trail) => {
@@ -9548,6 +9550,15 @@ function resolveTokenValues(tokens, mode = 'light') {
     }
     return out;
 }
+/**
+ * `value` with every `var(--iox-…)` replaced by that token's resolved root value in `mode` — what
+ * the Style panel's Detach writes, so the node keeps exactly what it showed as a literal. An unknown
+ * token falls back to its declared fallback, else stays as written.
+ */
+function resolveTokenReferences(value, tokens, mode = LIGHT) {
+    const resolved = resolveTokenValues(tokens, mode);
+    return value.replace(TOKEN_REF, (ref, name, fallback) => resolved[name] ?? (fallback !== undefined ? fallback.trim() : ref));
+}
 /** A scheme value with its `{{token}}` placeholders replaced by resolved root values — or null
  *  when a placeholder names a token the set does not have (the declaration is then omitted). */
 function substitute(template, resolved) {
@@ -9580,7 +9591,7 @@ function compileSchemeCss(tokens, scope) {
     const rows = usableTokens(tokens);
     if (!rows.length)
         return '';
-    const resolved = resolveTokenValues(rows, 'light');
+    const resolved = resolveTokenValues(rows, LIGHT);
     return nonDefaultSchemes().map(([id, set]) => rule(schemeSelector(id, scope), [
         ...schemeEntries(set, resolved),
         ...rows.filter(t => !(t.name in set) && t.value.includes(REFERENCE))
@@ -9590,8 +9601,8 @@ function compileSchemeCss(tokens, scope) {
 /** The dark twin of both scheme rules: a re-declared token with a dark value would otherwise pin
  *  the LIGHT value inside the section, and a `{{token}}` swap was resolved from LIGHT values. */
 function darkSchemeRules(rows, scope) {
-    const light = resolveTokenValues(rows, 'light');
-    const dark = resolveTokenValues(rows, 'dark');
+    const light = resolveTokenValues(rows, LIGHT);
+    const dark = resolveTokenValues(rows, DARK);
     const redeclared = rows.filter(t => {
         const d = darkOf(t);
         return d !== null && (t.value.includes(REFERENCE) || d.includes(REFERENCE));
@@ -9633,74 +9644,21 @@ function compileTokenCss(tokens, opts = {}) {
     return [base, dark].filter(Boolean).join('\n');
 }
 
-/** trait → `var(--iox-<token>, <packValue>)` for one node type. Unknown type → {}. */
-function resolveFlavorDefaults(type, pack) {
-    const map = pack?.defaults?.[type];
-    if (!map)
-        return {};
-    const byName = new Map((pack.tokens ?? []).map(t => [t.name, t.value]));
-    const out = {};
-    for (const [trait, tokenName] of Object.entries(map)) {
-        const fallback = byName.get(tokenName);
-        if (fallback === undefined)
-            continue; // validator fails the build; runtime stays safe
-        out[trait] = `var(--iox-${tokenName}, ${fallback})`;
-    }
-    return out;
-}
-/**
- * The ENGINE's half of the cascade: kebab `prop: var(…)` declarations for every pack default
- * the node's persisted styleProps does NOT set. Appended beside renderDefaultDeclarations —
- * same guard-on-undefined discipline, so a node saved post-F1 (var already serialised via the
- * builder's trait defaults) is untouched, and a legacy node picks the pack default up at
- * render time. Node styleProps always wins.
- */
-function flavorDefaultDeclarations(type, styleProps, pack) {
-    const sp = styleProps ?? {};
-    const out = [];
-    for (const [trait, value] of Object.entries(resolveFlavorDefaults(type, pack))) {
-        if (sp[trait] === undefined)
-            out.push(`${styleKeyToKebab(trait)}: ${value}`);
-    }
-    return out;
-}
-/**
- * The CI gate (flavors plan §10 C4): a pack may only name types and traits that exist in the
- * live component registry, and tokens it defines itself. Returns human-readable errors; a
- * consumer spec feeds it the REAL registry and asserts [].
- */
-function validateFlavorPack(pack, knownTraitsByType) {
+/** A pack's own sanity: every token row names itself and carries a value. Returns errors. */
+function validateFlavorPack(pack) {
     const errors = [];
-    const tokenNames = new Set((pack.tokens ?? []).map(t => t.name));
     for (const t of pack.tokens ?? []) {
         if (!t.name)
             errors.push(`${pack.id}: token with empty name`);
         if (!t.value)
             errors.push(`${pack.id}: token "${t.name}" has no value`);
     }
-    for (const [type, traits] of Object.entries(pack.defaults ?? {})) {
-        const known = knownTraitsByType[type];
-        if (!known) {
-            errors.push(`${pack.id}: unknown component type "${type}"`);
-            continue;
-        }
-        const knownSet = known instanceof Set ? known : new Set(known);
-        for (const [trait, tokenName] of Object.entries(traits)) {
-            if (!knownSet.has(trait))
-                errors.push(`${pack.id}: "${type}" has no style trait "${trait}"`);
-            if (!tokenNames.has(tokenName))
-                errors.push(`${pack.id}: "${type}.${trait}" references undefined token "${tokenName}"`);
-            if (/[:(]|^#|\d/.test(tokenName))
-                errors.push(`${pack.id}: "${type}.${trait}" must name a token, not a value ("${tokenName}")`);
-        }
-    }
     return errors;
 }
 /**
- * Swiss — the default pack (flavors plan §8: "the flavor that can never embarrass anyone").
- * Deliberately SMALL at F1: radius + control padding on the clickables, surface radius on Card.
- * Colour, type and motion arrive with the brand step (F2) — a colour default here would repaint
- * legacy pages before anyone chose anything.
+ * Swiss — the F1 pack: four tokens (control/surface radius, control/stack spacing) and the hue
+ * opinion F2's brand step reads. Kept until DS4 migrates `flavorId: swiss` orgs to Crisp; its four
+ * rows are the spec's `legacyAliases`.
  */
 const SWISS_FLAVOR = {
     id: 'swiss',
@@ -9713,20 +9671,203 @@ const SWISS_FLAVOR = {
         { name: 'space-control', value: '10px 18px', type: 'spacing', group: 'space' },
         { name: 'space-stack', value: '12px', type: 'spacing', group: 'space' },
     ],
-    defaults: {
-        Button: { borderRadius: 'radius-control', padding: 'space-control' },
-        ButtonBlock: { borderRadius: 'radius-control', padding: 'space-control' },
-        Card: { borderRadius: 'radius-surface' },
-    },
-    // F2: Swiss turns the seed toward a cool counterpoint. NOTE deliberately: the brand tokens
-    // deriveBrandTokens() emits are SEEDED per org — they do not join `defaults` here, because a
-    // colour default repaints legacy nodes whose saved styleProps lack the key (the engine fills
-    // missing keys from config defaults). Coloured element defaults are a Swiss v2 upgrade
-    // decision (§10 C2), taken with the picker in front of the author — never a side effect.
+    // F2: Swiss turns the seed toward a cool counterpoint.
     accentHueDeg: 150,
 };
-/** What both renderers use until F2 lets an org choose. */
-const DEFAULT_FLAVOR = SWISS_FLAVOR;
+
+/**
+ * Element styles — the author's "classes" (design-system plan §3b). A named look is an EXACT trait
+ * map written into a node; every value is a `var(--iox-…)` reference or a flavor-independent
+ * keyword, so a re-theme rewrites token rows and every node wearing the style follows. No renderer
+ * reads `elementStyle`: it records which look a node wears, for the panel row, Reset, adopt and AI.
+ *
+ * Works on two node shapes through one minimal interface, so the builder (a ComponentNode whose
+ * values live in `styleTraits[].traits[].default`) and the server-side composer (a plain serialized
+ * layout node with `styleProps`) share every function here.
+ */
+var ElementStyleState;
+(function (ElementStyleState) {
+    ElementStyleState["Hover"] = "hover";
+    ElementStyleState["Active"] = "active";
+    ElementStyleState["Focus"] = "focus";
+})(ElementStyleState || (ElementStyleState = {}));
+const ELEMENT_STYLE_STATES = [ElementStyleState.Hover, ElementStyleState.Active, ElementStyleState.Focus];
+const ELEMENT_STYLES = SPEC_ELEMENT_STYLES;
+/** Legacy `Button.variant` → the element style it maps to (adopt, DS7). */
+const BUTTON_VARIANT_TO_STYLE = SPEC_BUTTON_VARIANT_TO_STYLE;
+/** Palette entries that are a Container wearing an element style (Card · Panel · Navigation bar). */
+const PALETTE_PRESETS = SPEC_PALETTE_PRESETS;
+const BY_ID = new Map(ELEMENT_STYLES.map(s => [s.id, s]));
+function elementStyleById(id) {
+    return id ? BY_ID.get(id) : undefined;
+}
+/** The styles a node of `type` may wear — the Style panel's select. */
+function elementStylesFor(type) {
+    return ELEMENT_STYLES.filter(s => s.appliesTo.includes(type));
+}
+var OwnedTraitLink;
+(function (OwnedTraitLink) {
+    /** The node still holds the style's value. */
+    OwnedTraitLink["Linked"] = "linked";
+    /** The author replaced it on this node. */
+    OwnedTraitLink["Changed"] = "changed";
+})(OwnedTraitLink || (OwnedTraitLink = {}));
+const usesTraits = (t) => Array.isArray(t.styleTraits);
+function findTrait(target, name) {
+    for (const group of target.styleTraits ?? []) {
+        const hit = group.traits.find(tr => tr.name === name);
+        if (hit)
+            return hit;
+    }
+    return undefined;
+}
+function readBase(target, name) {
+    return usesTraits(target) ? findTrait(target, name)?.default : target.styleProps?.[name];
+}
+/** False when a builder node has no such trait — the value would be dropped. */
+function writeBase(target, name, value) {
+    if (usesTraits(target)) {
+        const trait = findTrait(target, name);
+        if (!trait)
+            return false;
+        trait.default = value;
+        return true;
+    }
+    target.styleProps = target.styleProps ?? {};
+    if (value === undefined)
+        delete target.styleProps[name];
+    else
+        target.styleProps[name] = value;
+    return true;
+}
+function readState(target, state, name) {
+    return target.stateStyles?.[state]?.[name];
+}
+function writeState(target, state, name, value) {
+    target.stateStyles = target.stateStyles ?? {};
+    target.stateStyles[state] = { ...(target.stateStyles[state] ?? {}), [name]: value };
+}
+function deleteState(target, state, name) {
+    const map = target.stateStyles?.[state];
+    if (!map)
+        return;
+    const { [name]: _drop, ...rest } = map;
+    if (Object.keys(rest).length)
+        target.stateStyles[state] = rest;
+    else
+        delete target.stateStyles[state];
+}
+/** Every (state, trait, value) a style owns, base first. */
+function ownedEntries(style) {
+    const out = [];
+    for (const [trait, value] of Object.entries(style.base))
+        out.push({ trait, value });
+    for (const state of ELEMENT_STYLE_STATES) {
+        for (const [trait, value] of Object.entries(style[state] ?? {}))
+            out.push({ trait, state, value });
+    }
+    return out;
+}
+const sameOwned = (a, b) => a.trait === b.trait && a.state === b.state;
+function writeEntries(target, style, skip = []) {
+    const unknown = [];
+    for (const entry of ownedEntries(style)) {
+        if (skip.some(s => sameOwned(s, entry)))
+            continue;
+        if (entry.state)
+            writeState(target, entry.state, entry.trait, entry.value);
+        else if (!writeBase(target, entry.trait, entry.value))
+            unknown.push(entry.trait);
+    }
+    target.elementStyle = style.id;
+    return unknown;
+}
+/** Write the style's exact base map and its hover/active/focus maps into the target. */
+function applyElementStyle(target, id) {
+    const style = elementStyleById(id);
+    if (!style)
+        return { applied: false, unknownTraits: [] };
+    return { applied: true, unknownTraits: writeEntries(target, style) };
+}
+const RULE_KEY = /^(\w+)(?:\[(\w+)=([^\]]+)\])?$/;
+const RANGE = /^([a-z]*)(\d+)\.\.\1(\d+)$/;
+function expandValues(raw) {
+    const range = RANGE.exec(raw);
+    if (!range)
+        return [raw];
+    const [, prefix, from, to] = range;
+    const out = [];
+    for (let n = Number(from); n <= Number(to); n++)
+        out.push(`${prefix}${n}`);
+    return out;
+}
+const DEFAULT_RULES = Object.entries(SPEC_DEFAULT_ELEMENT_STYLE).map(([key, style]) => {
+    const m = RULE_KEY.exec(key);
+    if (!m)
+        throw new Error(`defaultElementStyle: unreadable key "${key}"`);
+    const [, type, prop, raw] = m;
+    return prop ? { type, prop, values: expandValues(raw), style } : { type, style };
+});
+/**
+ * The element style a NEW node of `type` is born wearing (the spec's `defaultElementStyle`), or null
+ * when the type has none. `traits` is the node's own trait values (props) — a Heading's default
+ * follows its `level`; a Heading with no level matches no rule.
+ */
+function defaultElementStyleFor(type, traits = {}) {
+    for (const rule of DEFAULT_RULES) {
+        if (rule.type !== type)
+            continue;
+        if (!rule.prop)
+            return rule.style;
+        if (rule.values.includes(String(traits[rule.prop])))
+            return rule.style;
+    }
+    return null;
+}
+/** Per owned trait: does the node still hold the style's value (linked) or the author's (changed)? */
+function ownedTraitStatus(target, id) {
+    const style = elementStyleById(id);
+    if (!style)
+        return [];
+    return ownedEntries(style).map(({ trait, state, value }) => {
+        const actual = state ? readState(target, state, trait) : readBase(target, trait);
+        return {
+            trait, ...(state ? { state } : {}), expected: value, actual,
+            status: actual === value ? OwnedTraitLink.Linked : OwnedTraitLink.Changed,
+        };
+    });
+}
+/**
+ * Move a node from one style to another, rewriting ONLY what the old style owned:
+ * - an owned trait still holding the old style's value is released — a base trait goes back to
+ *   `baseline[trait]` (the type's unstyled value; deleted when the baseline has none), a state trait
+ *   is removed from its state map;
+ * - an owned trait the author changed is KEPT, and the new style does not overwrite it.
+ * Then the new style is written. Traits neither style owns are never touched.
+ */
+function switchElementStyle(target, fromId, toId, baseline = {}) {
+    const to = elementStyleById(toId);
+    if (!to)
+        return { applied: false, kept: [] };
+    const kept = [];
+    const from = elementStyleById(fromId);
+    if (from) {
+        for (const status of ownedTraitStatus(target, from.id)) {
+            const ref = status.state ? { trait: status.trait, state: status.state } : { trait: status.trait };
+            if (status.status === OwnedTraitLink.Changed) {
+                if (status.actual !== undefined)
+                    kept.push(ref);
+                continue;
+            }
+            if (ref.state)
+                deleteState(target, ref.state, ref.trait);
+            else
+                writeBase(target, ref.trait, baseline[ref.trait]);
+        }
+    }
+    writeEntries(target, to, kept);
+    return { applied: true, kept };
+}
 
 function parseHexColor(hex) {
     const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec((hex ?? '').trim());
@@ -10330,5 +10471,5 @@ function springToLinear(stiffness, damping) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACCENT_TOKEN_NAMES, DEFAULT_FLAVOR, DESIGN_TOKEN_GROUPS, DESIGN_TOKEN_TIERS, DESIGN_TOKEN_TYPES, FLAVOR_SPEC_VERSION, FONT_CATALOG, FONT_FAMILY_TOKENS, REDUCED_MOTION_OVERRIDES, REDUCED_TRANSPARENCY_OVERRIDES, REVERT_WINDOW_MS, SPEC_A11Y, SPEC_AXES, SPEC_BUTTON_VARIANT_TO_STYLE, SPEC_CONTRAST, SPEC_DEFAULT_ELEMENT_STYLE, SPEC_ELEMENT_STYLES, SPEC_FIELD_CLASS_BASELINE, SPEC_FLAVORS, SPEC_FLAVOR_PACKS, SPEC_FONTS, SPEC_FONT_ROLES, SPEC_LEGACY_ALIASES, SPEC_PALETTE_PRESETS, SPEC_SCHEMES, SPEC_SPRINGS, SPEC_TIERS, SPEC_TIER_IDS, SPEC_TOKEN_TYPES, SWISS_FLAVOR, USER_TOKEN_SOURCE, WCAG_AA_TEXT, apcaLc, buildFlavorTokens, buildFontFaceCss, compileSchemeCss, compileTokenCss, compileTokenCssBlocks, cssString, defaultDesignChoices, deriveAccentTokens, deriveBrandTokens, flavorDefaultDeclarations, flavorSourceStamp, fontsForTokens, isDesignTokenGroup, isDesignTokenTier, isDesignTokenType, oklabToRgb, parseFontFamilies, parseHexColor, planFlavorRevert, planFlavorSeed, relativeLuminance, resolveFlavorDefaults, resolveTokenValues, revertAvailable, rgbToOklab, springToLinear, styleKeyToKebab, toHexColor, tokensToDarkVarMap, tokensToVarMap, userFontStack, validateFlavorPack, wcagContrastRatio };
+export { ACCENT_TOKEN_NAMES, BUTTON_VARIANT_TO_STYLE, DESIGN_TOKEN_GROUPS, DESIGN_TOKEN_TIERS, DESIGN_TOKEN_TYPES, ELEMENT_STYLES, ELEMENT_STYLE_STATES, ElementStyleState, FLAVOR_SPEC_VERSION, FONT_CATALOG, FONT_FAMILY_TOKENS, OwnedTraitLink, PALETTE_PRESETS, REDUCED_MOTION_OVERRIDES, REDUCED_TRANSPARENCY_OVERRIDES, REVERT_WINDOW_MS, SPEC_A11Y, SPEC_AXES, SPEC_BUTTON_VARIANT_TO_STYLE, SPEC_CONTRAST, SPEC_DEFAULT_ELEMENT_STYLE, SPEC_ELEMENT_STYLES, SPEC_FIELD_CLASS_BASELINE, SPEC_FLAVORS, SPEC_FLAVOR_PACKS, SPEC_FONTS, SPEC_FONT_ROLES, SPEC_LEGACY_ALIASES, SPEC_PALETTE_PRESETS, SPEC_SCHEMES, SPEC_SPRINGS, SPEC_TIERS, SPEC_TIER_IDS, SPEC_TOKEN_TYPES, SWISS_FLAVOR, USER_TOKEN_SOURCE, WCAG_AA_TEXT, apcaLc, applyElementStyle, buildFlavorTokens, buildFontFaceCss, compileSchemeCss, compileTokenCss, compileTokenCssBlocks, cssString, defaultDesignChoices, defaultElementStyleFor, deriveAccentTokens, deriveBrandTokens, elementStyleById, elementStylesFor, flavorSourceStamp, fontsForTokens, isDesignTokenGroup, isDesignTokenTier, isDesignTokenType, oklabToRgb, ownedTraitStatus, parseFontFamilies, parseHexColor, planFlavorRevert, planFlavorSeed, relativeLuminance, resolveTokenReferences, resolveTokenValues, revertAvailable, rgbToOklab, springToLinear, styleKeyToKebab, switchElementStyle, toHexColor, tokensToDarkVarMap, tokensToVarMap, userFontStack, validateFlavorPack, wcagContrastRatio };
 //# sourceMappingURL=vectoriox-iox-ui-design-core.mjs.map