@vectoriox/iox-ui 5.13.1 → 5.15.0

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

@@ -1071,7 +1071,7 @@ const SPEC_SPRINGS = {
     }
 };
 const SPEC_FONTS = {
-    "Inter": "Inter:wght@400;500;600;700",
+    "Inter": "Inter:wght@300;400;500;600;700",
     "Inter Tight": "Inter+Tight:wght@500;600;700",
     "Manrope": "Manrope:wght@400;500;600;700",
     "IBM Plex Sans": "IBM+Plex+Sans:wght@400;500;600;700",
@@ -1086,12 +1086,21 @@ const SPEC_FONTS = {
     "Figtree": "Figtree:wght@400;500;600;700;800",
     "Google Sans Flex": "Google+Sans+Flex:wght@400;500;600;700",
     "Bricolage Grotesque": "Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700",
-    "Nunito": "Nunito:wght@400;600;700;800",
+    "Nunito": "Nunito:wght@300;400;600;700;800",
     "DM Sans": "DM+Sans:wght@400;500;700",
     "Archivo": "Archivo:wght@400;500;700",
     "Archivo Black": "Archivo+Black",
     "Syne": "Syne:wght@600;700;800",
-    "Space Mono": "Space+Mono:wght@400;700"
+    "Space Mono": "Space+Mono:wght@400;700",
+    "Poppins": "Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400",
+    "Roboto": "Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400",
+    "Lato": "Lato:ital,wght@0,300;0,400;0,700;1,400",
+    "Open Sans": "Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400",
+    "Montserrat": "Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400",
+    "Raleway": "Raleway:wght@300;400;500;600;700",
+    "Playfair Display": "Playfair+Display:ital,wght@0,400;0,500;0,700;1,400",
+    "Oswald": "Oswald:wght@300;400;500;600;700",
+    "Ubuntu": "Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,400"
 };
 const SPEC_SCHEMES = {
     "default": {
@@ -1748,7 +1757,6 @@ const SPEC_FIELD_CLASS_BASELINE = {
 const SPEC_LEGACY_ALIASES = {
     "radius-control": "var(--iox-button-radius)",
     "radius-surface": "var(--iox-card-radius)",
-    "space-control": "var(--iox-button-pad)",
     "space-stack": "var(--iox-space-gap)"
 };
 const SPEC_FLAVOR_PACKS = [
@@ -9498,13 +9506,61 @@ function styleKeyToKebab(key) {
     return key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
 }
 
+/**
+ * Which `--iox-<name>` a piece of COMPONENT CSS may reference (design-system §3b-bis: "component CSS
+ * may reference ONLY tokens defined in this spec"). DS2 shipped seven names nobody defines
+ * (`card-media-gap`, `gallery-overlay`, `dialog-close-bg`…): a token the contract does not define can
+ * never be set by a flavor, so it is a literal wearing a costume. One guard, run over BOTH
+ * renderers' component CSS (iox-ui's spec; the engine's `verify:token-names`).
+ */
+/** The 161 names of the contract's two tiers, plus its legacy aliases. */
+function specTokenNames() {
+    return new Set([
+        ...SPEC_TIERS.semantic.map(t => t.name),
+        ...SPEC_TIERS.component.map(t => t.name),
+        ...Object.keys(SPEC_LEGACY_ALIASES),
+    ]);
+}
+const REFERENCE$1 = /var\(\s*--iox-([a-z0-9-]+)/gi;
+/** Every distinct token a stylesheet READS (`var(--iox-x…)`), in first-seen order. */
+function tokenReferences(css) {
+    return [...new Set(Array.from(css.matchAll(REFERENCE$1), m => m[1]))];
+}
+/** The referenced names that are neither spec tokens nor in `alsoAllowed`. */
+function unknownTokenReferences(css, alsoAllowed = []) {
+    const spec = specTokenNames();
+    const extra = new Set(alsoAllowed);
+    return tokenReferences(css).filter(name => !spec.has(name) && !extra.has(name));
+}
+const LEGACY_SCOPE = /:not\(\s*\.iox-es\s*\)/;
+const RULE = /([^{}]+)\{([^{}]*)\}/g;
+/**
+ * Tokens read by a LEGACY rule — any rule whose selector is scoped `:not(.iox-es)` (the pre-DS2 look
+ * of a node that wears no element style, design-system §3b-bis). Such a rule must read NO token at
+ * all: a token it reads repaints a pre-DS2 page the moment the org's rows are seeded or a flavor is
+ * applied (D5). Returns `selector → names` for each offending rule; comments are ignored.
+ */
+function legacyRuleTokenReferences(css) {
+    const text = String(css ?? '').replace(/\/\*[\s\S]*?\*\//g, '');
+    const out = [];
+    for (const m of text.matchAll(RULE)) {
+        const selector = m[1].trim().replace(/\s+/g, ' ');
+        if (!LEGACY_SCOPE.test(selector))
+            continue;
+        const tokens = tokenReferences(m[2]);
+        if (tokens.length)
+            out.push({ selector, tokens });
+    }
+    return out;
+}
+
 /** What `prefers-reduced-motion: reduce` collapses — the contract's complete list (`a11y.reducedMotion`). */
 const REDUCED_MOTION_OVERRIDES = SPEC_A11Y.reducedMotion;
 /** What `prefers-reduced-transparency: reduce` makes solid — the contract's `a11y.reducedTransparency`. */
 const REDUCED_TRANSPARENCY_OVERRIDES = SPEC_A11Y.reducedTransparency;
 const ROOT = ':root';
 const DEFAULT_SCHEME = 'default';
-const REFERENCE$1 = 'var(';
+const REFERENCE = 'var(';
 const MEDIA_DARK = '(prefers-color-scheme: dark)';
 const ACCESSIBILITY_MEDIA = [
     { query: '(prefers-reduced-motion: reduce)', overrides: REDUCED_MOTION_OVERRIDES },
@@ -9549,6 +9605,16 @@ const PLACEHOLDER = /\{\{\s*([\w-]+)\s*\}\}/g;
 const LIGHT = 'light';
 const DARK = 'dark';
 const modeValue = (t, mode) => (mode === DARK ? darkOf(t) ?? t.value : t.value);
+/** The rows as ONE mode: each row's value in that mode, no dark override left. `auto` (or none) →
+ *  the rows unchanged. */
+function rowsForMode(rows, mode) {
+    if (mode !== LIGHT && mode !== DARK)
+        return [...rows];
+    return rows.map(t => {
+        const { values: _dropped, ...rest } = t;
+        return { ...rest, value: modeValue(t, mode) };
+    });
+}
 /** 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) {
@@ -9614,7 +9680,7 @@ function compileSchemeCss(tokens, scope) {
     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$1))
+        ...rows.filter(t => !(t.name in set) && t.value.includes(REFERENCE))
             .map((t) => [t.name, t.value]),
     ])).filter(Boolean).join('\n');
 }
@@ -9625,7 +9691,7 @@ function darkSchemeRules(rows, scope) {
     const dark = resolveTokenValues(rows, DARK);
     const redeclared = rows.filter(t => {
         const d = darkOf(t);
-        return d !== null && (t.value.includes(REFERENCE$1) || d.includes(REFERENCE$1));
+        return d !== null && (t.value.includes(REFERENCE) || d.includes(REFERENCE));
     });
     return nonDefaultSchemes().map(([id, set]) => {
         const swapped = Object.fromEntries(Object.entries(set).filter(([, v]) => hasPlaceholder(v)));
@@ -9641,10 +9707,14 @@ function presentOverrides(rows, overrides, onlyWithDark) {
 }
 /** The token CSS as the two halves a renderer places around its node rules. */
 function compileTokenCssBlocks(tokens, opts = {}) {
-    const rows = usableTokens(tokens);
+    const rows = rowsForMode(usableTokens(tokens), opts.mode);
     const root = opts.scope ?? ROOT;
+    const present = new Set(rows.map(t => t.name));
+    const unset = opts.isolate
+        ? [...specTokenNames()].filter(name => !present.has(name)).map((name) => [name, 'initial'])
+        : [];
     const base = [
-        rule(root, rows.map((t) => [t.name, t.value])),
+        rule(root, [...unset, ...rows.map((t) => [t.name, t.value])]),
         compileSchemeCss(rows, opts.scope),
         ...ACCESSIBILITY_MEDIA.map(({ query, overrides }) => media(query, [rule(root, presentOverrides(rows, overrides, false), '  ')])),
     ].filter(Boolean).join('\n');
@@ -9676,9 +9746,9 @@ function validateFlavorPack(pack) {
     return errors;
 }
 /**
- * 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`.
+ * Swiss — the retired F1 pack: four tokens (control/surface radius, control/stack spacing) and the
+ * hue opinion F2's brand step read. Three of its rows become the spec's `legacyAliases` on migration;
+ * `space-control` is a v2 token in every pack and takes Crisp's value.
  */
 const SWISS_FLAVOR = {
     id: 'swiss',
@@ -9890,33 +9960,16 @@ function switchElementStyle(target, fromId, toId, baseline = {}) {
 }
 /**
  * The element-style MARKER (design-system §3b-bis, spec `elementStyleMarker`). A node that wears an
- * element style renders `iox-es iox-es-<id>` in BOTH renderers; every piece of component CSS that
- * carries the system look is scoped to it, so a node saved before DS2 (no `elementStyle`) keeps its
- * exact pre-DS2 component CSS no matter which tokens the org holds. This is the ONLY thing a
- * renderer reads `elementStyle` for.
+ * element style renders `iox-es iox-es-<id>` in BOTH renderers, through the one node-class helper
+ * `nodeDesignClasses` (node-classes.ts); every piece of component CSS that carries the system look is
+ * scoped to it, so a node saved before DS2 (no `elementStyle`) keeps its exact pre-DS2 component CSS
+ * no matter which tokens the org holds.
  */
 const ELEMENT_STYLE_MARKER_CLASS = 'iox-es';
-const MARKER_PREFIX = `${ELEMENT_STYLE_MARKER_CLASS}-`;
+const MARKER_PREFIX$1 = `${ELEMENT_STYLE_MARKER_CLASS}-`;
 /** `iox-es-<id>` for a known style, else null — an unknown id never reaches a class attribute. */
 function elementStyleClass(id) {
-    return elementStyleById(id) ? `${MARKER_PREFIX}${id}` : null;
-}
-/** The marker classes a node renders: `'iox-es iox-es-<id>'`, or `''` for a node with no (known) style. */
-function elementStyleClasses(node) {
-    const own = elementStyleClass(node?.elementStyle);
-    return own ? `${ELEMENT_STYLE_MARKER_CLASS} ${own}` : '';
-}
-/** Make an element's marker match `elementStyle` — the live switch on the canvas, and the
- *  component path's one-time stamp. Removes a stale `iox-es-<old>`; touches no other class. */
-function syncElementStyleMarker(el, elementStyle) {
-    if (!el?.classList)
-        return;
-    const stale = Array.from(el.classList).filter(c => c === ELEMENT_STYLE_MARKER_CLASS || c.startsWith(MARKER_PREFIX));
-    for (const c of stale)
-        el.classList.remove(c);
-    const classes = elementStyleClasses({ elementStyle });
-    if (classes)
-        el.classList.add(...classes.split(' '));
+    return elementStyleById(id) ? `${MARKER_PREFIX$1}${id}` : null;
 }
 /**
  * The spec's `headingLevelRule`: changing a Heading's level moves it to the new level's DEFAULT
@@ -9934,6 +9987,117 @@ function applyHeadingLevelRule(target, oldLevel, newLevel, baseline = {}) {
     return switchElementStyle(target, from, to, baseline);
 }
 
+/**
+ * The design-system classes a node renders, in BOTH renderers (builder canvas, engine component
+ * path, engine string path) — ONE helper, so the three can never disagree about which class a node
+ * carries:
+ *
+ * - the element-style MARKER `iox-es iox-es-<id>` (design-system §3b-bis) — component CSS carrying
+ *   the system look is scoped to it, so a node saved before DS2 keeps its pre-DS2 look;
+ * - the section colour scheme `iox-scheme-<id>` (§3c) for a non-default `colorScheme` — the class
+ *   `compileSchemeCss` re-declares tokens on, so everything inside re-resolves.
+ *
+ * Renderers read `elementStyle` and `colorScheme` for exactly this and nothing else.
+ */
+/** The section colour schemes — the contract's `schemes` keys. */
+var ColorScheme;
+(function (ColorScheme) {
+    ColorScheme["Default"] = "default";
+    ColorScheme["Subtle"] = "subtle";
+    ColorScheme["Inverse"] = "inverse";
+    ColorScheme["Accent"] = "accent";
+})(ColorScheme || (ColorScheme = {}));
+/** The content trait (stored in `props`, not a style prop) that picks a node's scheme. */
+const COLOR_SCHEME_TRAIT = 'colorScheme';
+/** The node types that offer a scheme (spec §3c: Section/Container; LinkedContainer is a Container that links). */
+const COLOR_SCHEME_TYPES = ['Section', 'Container', 'LinkedContainer'];
+/** Every scheme in contract order, with the contract's label (Default · Subtle · Inverse · Brand). */
+const COLOR_SCHEMES = Object.keys(SPEC_SCHEMES).map(id => ({ id, label: SPEC_SCHEMES[id].label }));
+const SCHEME_IDS = new Set(Object.keys(SPEC_SCHEMES));
+const SCHEME_PREFIX = 'iox-scheme-';
+const MARKER_PREFIX = `${ELEMENT_STYLE_MARKER_CLASS}-`;
+/** `iox-scheme-<id>` for a known NON-default scheme, else null — an unknown id never reaches a class attribute. */
+function colorSchemeClass(id) {
+    return typeof id === 'string' && id !== ColorScheme.Default && SCHEME_IDS.has(id) ? `${SCHEME_PREFIX}${id}` : null;
+}
+/** A node's `colorScheme`, from `props` (serialized) or its trait (builder). */
+function colorSchemeOf(node) {
+    if (!node)
+        return null;
+    const fromProps = node.props?.[COLOR_SCHEME_TRAIT];
+    if (fromProps !== undefined)
+        return typeof fromProps === 'string' ? fromProps : null;
+    const trait = node.traits?.find(t => t?.name === COLOR_SCHEME_TRAIT)?.default;
+    return typeof trait === 'string' ? trait : null;
+}
+/** True when the node wears a known element style — the marker is on it. */
+function hasElementStyleMarker(node) {
+    return elementStyleClass(node?.elementStyle) !== null;
+}
+/** The classes a node renders: `'iox-es iox-es-card iox-scheme-inverse'`, or `''` for none. */
+function nodeDesignClasses(node) {
+    const marker = elementStyleClass(node?.elementStyle);
+    return [marker ? `${ELEMENT_STYLE_MARKER_CLASS} ${marker}` : '', colorSchemeClass(colorSchemeOf(node)) ?? '']
+        .filter(Boolean).join(' ');
+}
+const isDesignClass = (c) => c === ELEMENT_STYLE_MARKER_CLASS || c.startsWith(MARKER_PREFIX) || c.startsWith(SCHEME_PREFIX);
+/** Make an element's design classes match the node — the live switch on the canvas and the
+ *  component path's one-time stamp. Removes stale ones; touches no other class. */
+function syncNodeDesignClasses(el, node) {
+    if (!el?.classList)
+        return;
+    for (const c of Array.from(el.classList).filter(isDesignClass))
+        el.classList.remove(c);
+    const classes = nodeDesignClasses(node);
+    if (classes)
+        el.classList.add(...classes.split(' '));
+}
+
+/**
+ * Empty images (design-system DS3). A MARKED Image (`.iox-es-media`) with no source renders a box in
+ * the `surface-2` token with its aspect ratio kept — on the canvas with an "Add image" label, on the
+ * live site with nothing in it. An UNMARKED empty Image renders exactly as before (no `src`).
+ *
+ * Why a placeholder `src` instead of a src-less `<img>`: Chromium paints a src-less image as a broken
+ * image (a frame, an icon and the alt text) and ignores `aspect-ratio` once alt text is present, and no
+ * pseudo-element paints on an `<img>`. A real image with no natural size of its own (an SVG with no
+ * width/height) is a proper replaced element: `aspect-ratio`/`object-fit` apply, the background shows
+ * through, and its default object size (300×150) is the SAME for the canvas label and the live blank,
+ * so both renderers lay the box out identically. The fill itself is shared CSS (`iox-design.css`)
+ * keyed on {@link EMPTY_IMAGE_ATTRIBUTE}.
+ */
+/** Set on a marked Image while it has no source — the hook the shared fill rule keys on. */
+const EMPTY_IMAGE_ATTRIBUTE = 'data-iox-empty';
+const svgUri = (svg) => `data:image/svg+xml,${encodeURIComponent(svg)}`;
+/** The live site's blank: an SVG with no intrinsic size and nothing in it. */
+const EMPTY_IMAGE_SRC = svgUri('<svg xmlns="http://www.w3.org/2000/svg"/>');
+const xmlEscape = (s) => s.replace(/[&<>"']/g, c => `&#${c.charCodeAt(0)};`);
+/**
+ * The canvas blank: the same no-size SVG with `label` centred as a chip. The chip carries its own
+ * light ground, so it reads on every flavor's `surface-2`, light or dark; it is builder chrome, never
+ * site content. Width is estimated from the label length (an image cannot measure text).
+ */
+function emptyImageLabelSrc(label) {
+    const text = xmlEscape(label);
+    const width = Math.round(28 + label.length * 7);
+    return svgUri('<svg xmlns="http://www.w3.org/2000/svg"><svg x="50%" y="50%" overflow="visible">'
+        + `<rect x="${-width / 2}" y="-13" width="${width}" height="26" rx="13" fill="#ffffff" fill-opacity="0.92"/>`
+        + '<text x="0" y="0" text-anchor="middle" dominant-baseline="central" font-family="system-ui, -apple-system, \'Segoe UI\', sans-serif" '
+        + `font-size="12" font-weight="500" fill="#1f1d1b">${text}</text></svg></svg>`);
+}
+/**
+ * The `src` a node's Image renders when its own source is empty: the canvas label (when `label` is
+ * given) or the live blank for a MARKED node; `null` — render exactly as before — for an unmarked
+ * node or one that has a source.
+ */
+function emptyImageSrc(node, src, label) {
+    if (src != null && src !== '')
+        return null;
+    if (!hasElementStyleMarker(node))
+        return null;
+    return label ? emptyImageLabelSrc(label) : EMPTY_IMAGE_SRC;
+}
+
 function parseHexColor(hex) {
     const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec((hex ?? '').trim());
     if (!m)
@@ -10273,19 +10437,39 @@ function parseFontFamilies(stack) {
         .map(f => f.trim().replace(/^(['"])(.*)\1$/, '$2').trim())
         .filter(Boolean);
 }
+/** Where Google serves the stylesheets, and the origin the font FILES come from (preconnect). */
+const GOOGLE_FONTS_CSS_ORIGIN = 'https://fonts.googleapis.com';
+const GOOGLE_FONTS_FILE_ORIGIN = 'https://fonts.gstatic.com';
+/** The ONE stylesheet URL for a catalog id — both renderers link exactly this (one per family, T7). */
+function googleFontHref(id) {
+    return `${GOOGLE_FONTS_CSS_ORIGIN}/css2?family=${id}&display=swap`;
+}
+const CATALOG_BY_LOWER = new Map(Object.entries(FONT_CATALOG).map(([family, id]) => [family.toLowerCase(), id]));
+/** The catalog id of a family name (case-insensitive), or null — a system or uploaded face has none. */
+function catalogFontId(family) {
+    return CATALOG_BY_LOWER.get(String(family ?? '').trim().toLowerCase()) ?? null;
+}
+const MONO_ROLE = 'font-mono';
+const ALWAYS_LOADED_ROLES = FONT_FAMILY_TOKENS.filter(role => role !== MONO_ROLE);
+const MONO_REFERENCE = /var\(\s*--iox-font-mono\b/;
 /**
- * The Google css2 ids to load for a token set: every catalog family named by a font role token,
- * one id per family (T7 — one `<link>` per family, so one bad id cannot sink the others).
+ * The Google css2 ids to load for a token set: every catalog family named by the display / body /
+ * label roles, plus mono when referenced (above). One id per family (T7 — one `<link>` per family, so
+ * one bad id cannot sink the others), in role order.
  */
-function fontsForTokens(tokens) {
+function fontsForTokens(tokens, opts = {}) {
+    const rows = (tokens ?? []).filter(t => !!t && typeof t.name === 'string');
+    const monoRead = MONO_REFERENCE.test(opts.usedCss ?? '')
+        || rows.some(t => t.name !== MONO_ROLE && MONO_REFERENCE.test(`${t.value ?? ''} ${t.values?.dark ?? ''}`));
+    const roles = monoRead ? FONT_FAMILY_TOKENS : ALWAYS_LOADED_ROLES;
     const seen = new Set();
     const ids = [];
-    for (const role of FONT_FAMILY_TOKENS) {
-        const row = (tokens ?? []).find(t => t?.name === role);
+    for (const role of roles) {
+        const row = rows.find(t => t.name === role);
         for (const family of parseFontFamilies(row?.value ?? '')) {
-            const id = FONT_CATALOG[family];
-            if (id && !seen.has(family)) {
-                seen.add(family);
+            const id = catalogFontId(family);
+            if (id && !seen.has(id)) {
+                seen.add(id);
                 ids.push(id);
             }
         }
@@ -10430,42 +10614,51 @@ function planFlavorRevert(current, snapshot) {
     }
     return plan;
 }
+const expectationFor = (baseline, row) => !baseline ? undefined : typeof baseline === 'function' ? baseline(row) : baseline.get(row.name);
+const sameValue = (row, e) => row.value === e.value && (row.values?.dark ?? '') === (e.dark ?? '');
 /**
  * The seeding MERGE: desired tokens vs existing rows, deciding create / update / keep. The §10 C2
  * rule — "an upgrade only rewrites untouched rows" — is a comparison against what the PREVIOUS
- * seed wrote (`oldExpected`): a seeded row whose value still equals it is the machine's and may be
- * rewritten; any drift means the author took it over, and their hand wins. A row without a
- * `flavor:` stamp is never touched at all. `group`/`tier` ride every write.
+ * seed wrote (`baseline`): a seeded row whose value still equals it is the machine's and may be
+ * rewritten; any drift means the author took it over, and their hand wins. A row the design did not
+ * write is never touched: no `flavor:` stamp, unless it is a `user` row (a font the author CHOSE in
+ * the design) whose value is exactly what the previous design wrote — that row is the design's own
+ * choice, so a new choice may replace it. `group`/`tier` ride every write; a desired row's own
+ * `source` (a chosen font's `user`) wins over the pack stamp.
  */
-function planFlavorSeed(desired, existing, stamp, oldExpected) {
+function planFlavorSeed(desired, existing, stamp, baseline) {
     const byName = new Map((existing ?? []).map(r => [r.name, r]));
     const plan = { create: [], update: [], kept: [] };
     for (const def of desired ?? []) {
         if (!def?.name)
             continue;
         const row = byName.get(def.name);
+        const source = def.source ?? stamp;
         if (!row) {
             plan.create.push({
                 name: def.name,
                 type: def.type ?? DEFAULT_TOKEN_TYPE,
                 value: def.value,
                 ...(def.values ? { values: def.values } : {}),
-                source: stamp,
+                source,
                 ...classification(def),
             });
             continue;
         }
-        if (!isSeeded(row)) {
+        const old = expectationFor(baseline, row);
+        const designOwned = isSeeded(row) || (row.source === USER_TOKEN_SOURCE && !!old && sameValue(row, old));
+        if (!designOwned) {
             plan.kept.push(def.name);
             continue;
         }
         const sameAsDesired = row.value === def.value && (row.values?.dark ?? '') === (def.values?.dark ?? '');
-        if (sameAsDesired)
-            continue; // already exactly this — nothing to write, nothing kept-against
-        const old = oldExpected?.get(def.name);
-        const untouched = !!old && row.value === old.value && (row.values?.dark ?? '') === (old.dark ?? '');
-        if (untouched && row._id) {
-            plan.update.push({ id: row._id, data: { value: def.value, values: def.values ?? {}, source: stamp, ...classification(def) } });
+        if (sameAsDesired && (row.source ?? '') === source)
+            continue; // already exactly this
+        if (sameAsDesired && isSeeded(row) && source !== USER_TOKEN_SOURCE)
+            continue; // same value, another pack's stamp — nothing to write
+        const untouched = !!old && sameValue(row, old);
+        if ((untouched || sameAsDesired) && row._id) {
+            plan.update.push({ id: row._id, data: { value: def.value, values: def.values ?? {}, source, ...classification(def) } });
         }
         else {
             plan.kept.push(def.name); // edited since seeding (or unverifiable) — the author's hand wins
@@ -10522,30 +10715,254 @@ function springToLinear(stiffness, damping) {
 }
 
 /**
- * Which `--iox-<name>` a piece of COMPONENT CSS may reference (design-system §3b-bis: "component CSS
- * may reference ONLY tokens defined in this spec"). DS2 shipped seven names nobody defines
- * (`card-media-gap`, `gallery-overlay`, `dialog-close-bg`…): a token the contract does not define can
- * never be set by a flavor, so it is a literal wearing a costume. One guard, run over BOTH
- * renderers' component CSS (iox-ui's spec; the engine's `verify:token-names`).
+ * The `settings.design` row (design-system plan §3f), read and written by ONE pair of functions so
+ * the builder, the server's public page read (the engine's mode) and the site build agree on what a
+ * stored row MEANS. The row is the settings collection's generic `config: [{ key, value }]`; values
+ * are strings there (Boolean "true"/"false", Object as JSON), but a reader also accepts the typed
+ * value a client control may have sent.
  */
-/** The 161 names of the contract's two tiers, plus its legacy aliases. */
-function specTokenNames() {
-    return new Set([
-        ...SPEC_TIERS.semantic.map(t => t.name),
-        ...SPEC_TIERS.component.map(t => t.name),
-        ...Object.keys(SPEC_LEGACY_ALIASES),
-    ]);
+/** The look a studio wears until it picks one (DS2's interim seed, and DS6's first-run selection). */
+const DEFAULT_FLAVOR_ID = 'crisp';
+var DesignConfigKey;
+(function (DesignConfigKey) {
+    DesignConfigKey["FlavorId"] = "flavorId";
+    DesignConfigKey["FlavorVersion"] = "flavorVersion";
+    DesignConfigKey["BrandSeed"] = "brandSeed";
+    DesignConfigKey["PairId"] = "pairId";
+    DesignConfigKey["Shape"] = "shape";
+    DesignConfigKey["Density"] = "density";
+    DesignConfigKey["Motion"] = "motion";
+    DesignConfigKey["PillButtons"] = "pillButtons";
+    DesignConfigKey["Mode"] = "mode";
+    DesignConfigKey["Fonts"] = "fonts";
+    DesignConfigKey["Revert"] = "revert";
+})(DesignConfigKey || (DesignConfigKey = {}));
+const MODES = SPEC_AXES.modes;
+const FONT_ROLE_TOKENS = SPEC_FONT_ROLES.map(r => r.token);
+/** The pack for an id; a retired id (Swiss) resolves to the pack that `replaces` it. */
+function flavorPackById(id) {
+    if (!id)
+        return undefined;
+    return SPEC_FLAVORS.find(f => f.id === id) ?? SPEC_FLAVORS.find(f => f.replaces === id);
 }
-const REFERENCE = /var\(\s*--iox-([a-z0-9-]+)/gi;
-/** Every distinct token a stylesheet READS (`var(--iox-x…)`), in first-seen order. */
-function tokenReferences(css) {
-    return [...new Set(Array.from(css.matchAll(REFERENCE), m => m[1]))];
+/** True when `id` names a retired flavor that a v2 pack replaces (Swiss → Crisp). */
+function isRetiredFlavorId(id) {
+    return !!id && !SPEC_FLAVORS.some(f => f.id === id) && SPEC_FLAVORS.some(f => f.replaces === id);
 }
-/** The referenced names that are neither spec tokens nor in `alsoAllowed`. */
-function unknownTokenReferences(css, alsoAllowed = []) {
-    const spec = specTokenNames();
-    const extra = new Set(alsoAllowed);
-    return tokenReferences(css).filter(name => !spec.has(name) && !extra.has(name));
+const defaultPack = () => flavorPackById(DEFAULT_FLAVOR_ID);
+const asString = (v) => (typeof v === 'string' && v.trim() !== '' ? v.trim() : null);
+function asBoolean(v) {
+    if (v === true || v === 'true')
+        return true;
+    if (v === false || v === 'false')
+        return false;
+    return null;
+}
+function asObject(v) {
+    if (v && typeof v === 'object')
+        return v;
+    if (typeof v !== 'string' || v.trim() === '')
+        return null;
+    try {
+        const parsed = JSON.parse(v);
+        return parsed && typeof parsed === 'object' ? parsed : null;
+    }
+    catch {
+        return null;
+    }
+}
+function asFonts(v) {
+    const raw = asObject(v);
+    if (!raw)
+        return undefined;
+    const fonts = {};
+    for (const role of FONT_ROLE_TOKENS) {
+        const family = raw[role];
+        if (typeof family === 'string' && family.trim() !== '')
+            fonts[role] = family.trim();
+    }
+    return Object.keys(fonts).length ? fonts : undefined;
+}
+const keyOf = (table, v) => v !== null && Object.prototype.hasOwnProperty.call(table, v) ? v : null;
+/** A config array → the key/value map (last entry wins, as the settings form writes it). */
+function configMap(config) {
+    const map = new Map();
+    for (const kv of config ?? [])
+        if (kv && typeof kv.key === 'string')
+            map.set(kv.key, kv.value);
+    return map;
+}
+/**
+ * A partial set of choices completed against its pack: every missing or invalid value falls back to
+ * the pack's own default (an unknown pair → the pack's first, a bad seed → the pack's seed).
+ */
+function resolveDesignChoices(partial) {
+    const pack = flavorPackById(partial?.flavorId) ?? defaultPack();
+    const seed = asString(partial?.seed);
+    const pairId = asString(partial?.pairId);
+    const fonts = asFonts(partial?.fonts);
+    return {
+        flavorId: pack.id,
+        seed: seed && parseHexColor(seed) ? seed : pack.seed,
+        pairId: pairId && pack.pairs.some(p => p.id === pairId) ? pairId : pack.pairs[0]?.id ?? '',
+        shape: keyOf(SPEC_AXES.shapes, asString(partial?.shape)) ?? pack.defaults.shape,
+        density: keyOf(SPEC_AXES.densities, asString(partial?.density)) ?? pack.defaults.density,
+        motion: keyOf(SPEC_AXES.motions, asString(partial?.motion)) ?? pack.defaults.motion,
+        pillButtons: asBoolean(partial?.pillButtons) ?? pack.defaults.pillButtons,
+        mode: (MODES.includes(asString(partial?.mode) ?? '') ? asString(partial?.mode) : pack.defaults.mode),
+        ...(fonts ? { fonts } : {}),
+    };
+}
+/** The pack's own defaults for `flavorId` — what picking a card means before anything is tuned. */
+function packDesignChoices(flavorId) {
+    return resolveDesignChoices({ flavorId });
+}
+/** A stored `settings.design` config → the resolved design. No row (or no config) → Crisp's defaults. */
+function readDesignConfig(config, hasRow = !!config) {
+    const map = configMap(config);
+    const storedFlavorId = asString(map.get(DesignConfigKey.FlavorId));
+    const storedSeed = asString(map.get(DesignConfigKey.BrandSeed));
+    const choices = resolveDesignChoices({
+        flavorId: storedFlavorId ?? undefined,
+        seed: storedSeed ?? undefined,
+        pairId: asString(map.get(DesignConfigKey.PairId)) ?? undefined,
+        shape: map.get(DesignConfigKey.Shape),
+        density: map.get(DesignConfigKey.Density),
+        motion: map.get(DesignConfigKey.Motion),
+        pillButtons: asBoolean(map.get(DesignConfigKey.PillButtons)) ?? undefined,
+        mode: map.get(DesignConfigKey.Mode),
+        fonts: map.get(DesignConfigKey.Fonts),
+    });
+    return {
+        choices,
+        storedFlavorId,
+        storedSeed,
+        flavorVersion: asString(map.get(DesignConfigKey.FlavorVersion)),
+        revert: asObject(map.get(DesignConfigKey.Revert)),
+        hasRow,
+    };
+}
+/** The colour mode a stored config compiles in — what the public page read hands the engine. */
+function designModeOf(config) {
+    return readDesignConfig(config).choices.mode;
+}
+/** Resolved choices (+ the revert snapshot) → the config array a settings row stores. */
+function designConfigEntries(choices, flavorVersion, revert) {
+    const c = resolveDesignChoices(choices);
+    return [
+        { key: DesignConfigKey.FlavorId, value: c.flavorId },
+        { key: DesignConfigKey.FlavorVersion, value: String(flavorVersion) },
+        { key: DesignConfigKey.BrandSeed, value: c.seed },
+        { key: DesignConfigKey.PairId, value: c.pairId },
+        { key: DesignConfigKey.Shape, value: c.shape },
+        { key: DesignConfigKey.Density, value: c.density },
+        { key: DesignConfigKey.Motion, value: c.motion },
+        { key: DesignConfigKey.PillButtons, value: String(c.pillButtons) },
+        { key: DesignConfigKey.Mode, value: c.mode },
+        ...(c.fonts ? [{ key: DesignConfigKey.Fonts, value: JSON.stringify(c.fonts) }] : []),
+        ...(revert ? [{ key: DesignConfigKey.Revert, value: JSON.stringify(revert) }] : []),
+    ];
+}
+/** Two choice sets describe the same look (fonts compared by role). */
+function sameDesignChoices(a, b) {
+    const x = resolveDesignChoices(a);
+    const y = resolveDesignChoices(b);
+    return x.flavorId === y.flavorId && x.seed.toLowerCase() === y.seed.toLowerCase() && x.pairId === y.pairId
+        && x.shape === y.shape && x.density === y.density && x.motion === y.motion
+        && x.pillButtons === y.pillButtons && x.mode === y.mode
+        && JSON.stringify(x.fonts ?? {}) === JSON.stringify(y.fonts ?? {});
+}
+
+/**
+ * Applying a look (design-system DS4): the COMPLETE `buildFlavorTokens` set for the chosen
+ * `DesignChoices`, merged into the org's rows by the §10 C2 rule — rewrite only what the previous
+ * seed wrote and nobody touched since, keep the author's rows, report what was kept. And the one
+ * migration the contract names: an org still on Swiss becomes Crisp.
+ * Pure plans; each caller (builder, the server-side site build) applies them with its own transport.
+ */
+const SEED_STAMP = /^flavor:([^@]+)@/;
+const expectations = (rows) => new Map(rows.map(r => [r.name, { value: r.value, ...(r.values?.dark ? { dark: r.values.dark } : {}) }]));
+/** Every row a design writes — `buildFlavorTokens` for its pack. Empty for an unknown pack. */
+function designTokenRows(choices) {
+    const pack = flavorPackById(choices.flavorId);
+    return pack ? buildFlavorTokens(pack, { ...choices, flavorId: pack.id }) : [];
+}
+/** What the F1/F2 Swiss seeding wrote: the four Swiss rows + the brand set derived from its seed. */
+function swissExpectations(seed) {
+    const rows = SWISS_FLAVOR.tokens.map(t => ({ name: t.name, value: t.value, values: t.values }));
+    if (seed) {
+        try {
+            rows.push(...deriveBrandTokens(seed, SWISS_FLAVOR).map(t => ({ name: t.name, value: t.value, values: t.values })));
+        }
+        catch { /* an unparseable stored seed proves nothing about the rows */ }
+    }
+    return expectations(rows);
+}
+/**
+ * What the PREVIOUS design wrote, as a baseline keyed by the row's own stamp: a row Swiss stamped is
+ * judged against what Swiss wrote, every other row against `buildFlavorTokens` of the stored choices
+ * (for an org with no design row, Crisp's defaults — exactly what DS2's interim seed wrote). In a
+ * Swiss org the only v2 rows are that interim seed's, so they are judged against Crisp's DEFAULTS,
+ * never against the brand-seeded Crisp the migration is about to write.
+ */
+function designBaseline(previous) {
+    const retired = isRetiredFlavorId(previous.storedFlavorId);
+    const current = expectations(designTokenRows(retired ? packDesignChoices(previous.choices.flavorId) : previous.choices));
+    const swiss = swissExpectations(retired ? previous.storedSeed : null);
+    return (row) => {
+        const stampedBy = SEED_STAMP.exec(row.source ?? '')?.[1];
+        return stampedBy === SWISS_FLAVOR.id ? swiss.get(row.name) : current.get(row.name);
+    };
+}
+/** Apply `next` over the org's rows, judged against `previous` — the plan FlavorApplyService runs. */
+function planDesignApply(existing, previous, next) {
+    const pack = flavorPackById(next.flavorId);
+    if (!pack)
+        return { create: [], update: [], kept: [] };
+    return planFlavorSeed(designTokenRows(next), existing, flavorSourceStamp(pack.id), designBaseline(previous));
+}
+/** The rows a design is missing by name — the builder-load top-up (never touches an existing row). */
+function missingDesignRows(existing, choices) {
+    const have = new Set((existing ?? []).map(r => r.name));
+    return designTokenRows(choices).filter(r => !have.has(r.name));
+}
+const LEGACY_ALIASES = SPEC_LEGACY_ALIASES;
+/**
+ * Swiss → Crisp (spec `legacyAliases`; D1). Needed when the design row says a retired flavor, or when
+ * there is no design row but the org holds Swiss-stamped alias rows (F1 seeded those before the row
+ * existed). Idempotent: once the row says Crisp nothing is needed, and re-running the plan writes
+ * nothing.
+ *
+ * - The look: `planDesignApply` from Swiss to Crisp — Swiss-stamped rows untouched since Swiss seeded
+ *   them (incl. F2's `surface` / `line` / `accent`) become Crisp's; edited ones are kept.
+ * - The aliases: `radius-control` / `radius-surface` / `space-control` / `space-stack` are rewritten to
+ *   their alias reference ONLY while still machine-owned and untouched, so a node saved since F1 that
+ *   reads `var(--iox-radius-control)` keeps resolving — now to Crisp's button radius.
+ */
+function planSwissMigration(existing, stored) {
+    const swissAliasRows = (existing ?? []).filter(r => r.name in LEGACY_ALIASES && SEED_STAMP.exec(r.source ?? '')?.[1] === SWISS_FLAVOR.id);
+    const needed = isRetiredFlavorId(stored.storedFlavorId) || (!stored.hasRow && swissAliasRows.length > 0);
+    if (!needed)
+        return null;
+    const choices = stored.choices;
+    const previous = isRetiredFlavorId(stored.storedFlavorId) ? stored : { ...stored, storedFlavorId: SWISS_FLAVOR.id };
+    const plan = planDesignApply(existing, previous, choices);
+    const stamp = flavorSourceStamp(choices.flavorId);
+    const swiss = swissExpectations(null);
+    for (const row of (existing ?? []).filter(r => r.name in LEGACY_ALIASES)) {
+        const alias = LEGACY_ALIASES[row.name];
+        if (row.value === alias)
+            continue;
+        const was = swiss.get(row.name);
+        const untouched = SEED_STAMP.test(row.source ?? '') && !!was && row.value === was.value && !row.values?.dark;
+        if (untouched && row._id) {
+            plan.update.push({ id: row._id, data: { value: alias, values: {}, source: stamp } });
+        }
+        else {
+            plan.kept.push(row.name);
+        }
+    }
+    return { choices, plan };
 }
 
 /**
@@ -10563,5 +10980,5 @@ function unknownTokenReferences(css, alsoAllowed = []) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACCENT_TOKEN_NAMES, BUTTON_VARIANT_TO_STYLE, DESIGN_TOKEN_GROUPS, DESIGN_TOKEN_TIERS, DESIGN_TOKEN_TYPES, ELEMENT_STYLES, ELEMENT_STYLE_MARKER_CLASS, 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, applyHeadingLevelRule, buildFlavorTokens, buildFontFaceCss, compileSchemeCss, compileTokenCss, compileTokenCssBlocks, cssString, defaultDesignChoices, defaultElementStyleFor, deriveAccentTokens, deriveBrandTokens, elementStyleById, elementStyleClass, elementStyleClasses, elementStylesFor, flavorSourceStamp, fontsForTokens, isDesignTokenGroup, isDesignTokenTier, isDesignTokenType, oklabToRgb, ownedTraitStatus, parseFontFamilies, parseHexColor, planFlavorRevert, planFlavorSeed, relativeLuminance, resolveTokenReferences, resolveTokenValues, revertAvailable, rgbToOklab, specTokenNames, springToLinear, styleKeyToKebab, switchElementStyle, syncElementStyleMarker, toHexColor, tokenReferences, tokensToDarkVarMap, tokensToVarMap, unknownTokenReferences, userFontStack, validateFlavorPack, wcagContrastRatio };
+export { ACCENT_TOKEN_NAMES, BUTTON_VARIANT_TO_STYLE, COLOR_SCHEMES, COLOR_SCHEME_TRAIT, COLOR_SCHEME_TYPES, ColorScheme, DEFAULT_FLAVOR_ID, DESIGN_TOKEN_GROUPS, DESIGN_TOKEN_TIERS, DESIGN_TOKEN_TYPES, DesignConfigKey, ELEMENT_STYLES, ELEMENT_STYLE_MARKER_CLASS, ELEMENT_STYLE_STATES, EMPTY_IMAGE_ATTRIBUTE, EMPTY_IMAGE_SRC, ElementStyleState, FLAVOR_SPEC_VERSION, FONT_CATALOG, FONT_FAMILY_TOKENS, GOOGLE_FONTS_CSS_ORIGIN, GOOGLE_FONTS_FILE_ORIGIN, 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, applyHeadingLevelRule, buildFlavorTokens, buildFontFaceCss, catalogFontId, colorSchemeClass, colorSchemeOf, compileSchemeCss, compileTokenCss, compileTokenCssBlocks, cssString, defaultDesignChoices, defaultElementStyleFor, deriveAccentTokens, deriveBrandTokens, designBaseline, designConfigEntries, designModeOf, designTokenRows, elementStyleById, elementStyleClass, elementStylesFor, emptyImageLabelSrc, emptyImageSrc, flavorPackById, flavorSourceStamp, fontsForTokens, googleFontHref, hasElementStyleMarker, isDesignTokenGroup, isDesignTokenTier, isDesignTokenType, isRetiredFlavorId, legacyRuleTokenReferences, missingDesignRows, nodeDesignClasses, oklabToRgb, ownedTraitStatus, packDesignChoices, parseFontFamilies, parseHexColor, planDesignApply, planFlavorRevert, planFlavorSeed, planSwissMigration, readDesignConfig, relativeLuminance, resolveDesignChoices, resolveTokenReferences, resolveTokenValues, revertAvailable, rgbToOklab, sameDesignChoices, specTokenNames, springToLinear, styleKeyToKebab, switchElementStyle, syncNodeDesignClasses, toHexColor, tokenReferences, tokensToDarkVarMap, tokensToVarMap, unknownTokenReferences, userFontStack, validateFlavorPack, wcagContrastRatio };
 //# sourceMappingURL=vectoriox-iox-ui-design-core.mjs.map