@motion-proto/live-tokens 0.55.0 → 0.56.1

package/dist-plugin/fontPairing/index.js

@@ -0,0 +1,320 @@
+import {
+  readLiveTokensConfig,
+  resolveDataDirs
+} from "../chunk-D3ZVKOR4.js";
+
+// src/editor/core/fonts/fontParse.ts
+function parseGoogleFontsUrl(url2) {
+  let u;
+  try {
+    u = new URL(url2);
+  } catch {
+    return null;
+  }
+  if (!u.hostname.includes("fonts.googleapis.com")) return null;
+  const familyParams = u.searchParams.getAll("family");
+  if (familyParams.length === 0) return null;
+  return familyParams.map((raw) => {
+    const [rawName, spec] = raw.split(":");
+    const name = decodeURIComponent(rawName).replace(/\+/g, " ");
+    const parsed = { name };
+    if (spec) {
+      const axisMatch = spec.match(/(?:ital,)?wght@([^&]+)/);
+      const italics = spec.startsWith("ital,");
+      if (italics) parsed.italics = true;
+      if (axisMatch) {
+        const tokens = axisMatch[1].split(";");
+        const weights = /* @__PURE__ */ new Set();
+        for (const tok of tokens) {
+          const parts = tok.split(",");
+          const wghtStr = parts.length === 2 ? parts[1] : parts[0];
+          if (wghtStr.includes("..")) {
+            const [lo, hi] = wghtStr.split("..").map((n) => parseInt(n, 10));
+            if (!isNaN(lo) && !isNaN(hi)) {
+              for (let w = lo; w <= hi; w += 100) weights.add(w);
+            }
+          } else {
+            const w = parseInt(wghtStr, 10);
+            if (!isNaN(w)) weights.add(w);
+          }
+        }
+        if (weights.size > 0) parsed.weights = [...weights].sort((a, b) => a - b);
+      }
+    }
+    return parsed;
+  });
+}
+function parseFontFaceText(css) {
+  const rules = [...css.matchAll(/@font-face\s*\{([^}]*)\}/g)];
+  const byName = /* @__PURE__ */ new Map();
+  for (const [, body] of rules) {
+    const nameMatch = body.match(/font-family\s*:\s*([^;]+);/i);
+    if (!nameMatch) continue;
+    const name = nameMatch[1].trim().replace(/^['"]|['"]$/g, "");
+    const weightMatch = body.match(/font-weight\s*:\s*([^;]+);/i);
+    const styleMatch = body.match(/font-style\s*:\s*([^;]+);/i);
+    const entry = byName.get(name) ?? { weights: /* @__PURE__ */ new Set(), italics: false };
+    if (weightMatch) {
+      const val = weightMatch[1].trim();
+      const rangeParts = val.split(/\s+/).map((s) => parseInt(s, 10)).filter((n) => !isNaN(n));
+      if (rangeParts.length === 2) {
+        const [lo, hi] = rangeParts;
+        for (let w = lo; w <= hi; w += 100) entry.weights.add(w);
+      } else if (rangeParts.length === 1) {
+        entry.weights.add(rangeParts[0]);
+      }
+    }
+    if (styleMatch && /italic|oblique/i.test(styleMatch[1])) entry.italics = true;
+    byName.set(name, entry);
+  }
+  return [...byName.entries()].map(([name, e]) => ({
+    name,
+    ...e.weights.size > 0 ? { weights: [...e.weights].sort((a, b) => a - b) } : {},
+    ...e.italics ? { italics: true } : {}
+  }));
+}
+
+// src/editor/core/fonts/fontPairing.ts
+var PAIRING = ["--font-display", "--font-sans"];
+function familyIndex(sources) {
+  const familyById = /* @__PURE__ */ new Map();
+  for (const source of sources) {
+    for (const family of source.families) familyById.set(family.id, family);
+  }
+  return familyById;
+}
+function resolvedFaceName(stack, familyById) {
+  for (const slot of stack?.slots ?? []) {
+    if (slot.kind === "project") {
+      const family = familyById.get(slot.familyId);
+      if (family) return family.name;
+      continue;
+    }
+    if (slot.kind === "system") return "System";
+    return slot.value;
+  }
+  return null;
+}
+function fontPairingLabel(stacks, sources) {
+  const familyById = familyIndex(sources);
+  return PAIRING.map((variable) => resolvedFaceName(stacks.find((s) => s.variable === variable), familyById)).filter((label) => label !== null).join(" / ");
+}
+
+// src/editor/core/fonts/applyFontPairing.ts
+var SLOT_ORDER = ["display", "body", "serif", "mono"];
+var SLOT_VARIABLES = {
+  display: "--font-display",
+  body: "--font-sans",
+  serif: "--font-serif",
+  mono: "--font-mono"
+};
+function slugifyFamily(name) {
+  return name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+}
+function weightsFor(face) {
+  if (face.weights) {
+    return { weights: face.weights, ...face.italics ? { italics: true } : {} };
+  }
+  const parsed = parseGoogleFontsUrl(face.url)?.[0];
+  return {
+    ...parsed?.weights ? { weights: parsed.weights } : {},
+    ...face.italics || parsed?.italics ? { italics: true } : {}
+  };
+}
+function sourceFor(face, idPrefix) {
+  const id = `${idPrefix}${slugifyFamily(face.name)}`;
+  return {
+    id,
+    kind: "google",
+    url: face.url,
+    label: "Google Fonts",
+    families: [
+      {
+        id: `${id}:${slugifyFamily(face.name)}`,
+        name: face.name,
+        cssName: `"${face.name}"`,
+        ...weightsFor(face)
+      }
+    ]
+  };
+}
+function rewriteStack(stacks, variable, familyId) {
+  const stack = stacks.find((s) => s.variable === variable);
+  if (!stack) throw new Error(`colors and type have no ${variable} stack to rewrite`);
+  return stacks.map(
+    (s) => s === stack ? { ...s, slots: [{ kind: "project", familyId }, ...s.slots.filter((slot) => slot.kind !== "project")] } : s
+  );
+}
+function applyFontPairing(colorsAndType, pairing, { idPrefix = "src_google_" } = {}) {
+  const slots = SLOT_ORDER.filter((slot) => pairing[slot]);
+  if (slots.length === 0) throw new Error("pairing names no slot to change");
+  const before = colorsAndType.fontStacks ?? [];
+  const beforeSources = colorsAndType.fontSources ?? [];
+  const beforeIndex = familyIndex(beforeSources);
+  const stamped = slots.map((slot) => ({ slot, source: sourceFor(pairing[slot], idPrefix) }));
+  const stampedIds = new Set(stamped.map((s) => s.source.id));
+  let stacks = before;
+  const changes = [];
+  for (const { slot, source } of stamped) {
+    const variable = SLOT_VARIABLES[slot];
+    const from = resolvedFaceName(before.find((s) => s.variable === variable), beforeIndex);
+    stacks = rewriteStack(stacks, variable, source.families[0].id);
+    changes.push({ slot, variable, from, to: source.families[0].name });
+  }
+  const referenced = new Set(
+    stacks.flatMap((s) => s.slots).filter((s) => s.kind === "project").map((s) => s.familyId)
+  );
+  const kept = [...beforeSources.filter((s) => !stampedIds.has(s.id)), ...stamped.map((s) => s.source)];
+  const sources = kept.filter((s) => s.families.some((f) => referenced.has(f.id)));
+  const dropped = kept.filter((s) => !sources.includes(s)).map((s) => ({ id: s.id, names: s.families.map((f) => f.name) }));
+  const next = { ...colorsAndType, fontSources: sources, fontStacks: stacks };
+  const changed = JSON.stringify([beforeSources, before]) !== JSON.stringify([sources, stacks]);
+  return {
+    colorsAndType: next,
+    report: { changes: changes.filter((c) => c.from !== c.to), dropped, changed }
+  };
+}
+
+// src/editor/core/fonts/googleFontsUrl.ts
+var LADDER = [100, 200, 300, 400, 500, 600, 700, 800, 900];
+function familyParam(name) {
+  return name.trim().replace(/\s+/g, "+");
+}
+function url(name, spec) {
+  const family = spec ? `${familyParam(name)}:${spec}` : familyParam(name);
+  return `https://fonts.googleapis.com/css2?family=${family}&display=swap`;
+}
+function discoveryUrl(name) {
+  const pairs = [
+    ...LADDER.map((w) => `0,${w}`),
+    ...LADDER.map((w) => `1,${w}`)
+  ];
+  return url(name, `ital,wght@${pairs.join(";")}`);
+}
+function isContiguous(weights) {
+  return weights.length > 1 && weights.every((w, i) => i === 0 || w - weights[i - 1] === 100);
+}
+function persistUrlFor(name, weights, italics) {
+  if (weights.length === 0 || weights.length === 1 && weights[0] === 400 && !italics) {
+    return url(name);
+  }
+  if (isContiguous(weights)) {
+    const range = `${weights[0]}..${weights[weights.length - 1]}`;
+    return url(name, italics ? `ital,wght@0,${range};1,${range}` : `wght@${range}`);
+  }
+  const spec = italics ? `ital,wght@${[...weights.map((w) => `0,${w}`), ...weights.map((w) => `1,${w}`)].join(";")}` : `wght@${weights.join(";")}`;
+  return url(name, spec);
+}
+function censusFrom(css, requested) {
+  const families = parseFontFaceText(css);
+  if (families.length === 0) {
+    throw new Error(`Google Fonts returned no @font-face rules for "${requested}".`);
+  }
+  const family = families[0];
+  return {
+    name: family.name,
+    weights: family.weights ?? [],
+    italics: family.italics === true
+  };
+}
+async function resolveGoogleFont(name, fetcher) {
+  const probeUrl = discoveryUrl(name);
+  const probe = await fetcher(probeUrl);
+  if (!probe.ok) {
+    throw new Error(
+      `"${name}" is not on Google Fonts (the API answered ${probe.status}). Check the spelling against fonts.google.com.`
+    );
+  }
+  const census = censusFrom(await probe.text(), name);
+  const candidates = [persistUrlFor(census.name, census.weights, census.italics)];
+  const enumerated = census.weights.length > 0 ? url(
+    census.name,
+    census.italics ? `ital,wght@${[...census.weights.map((w) => `0,${w}`), ...census.weights.map((w) => `1,${w}`)].join(";")}` : `wght@${census.weights.join(";")}`
+  ) : null;
+  if (enumerated && !candidates.includes(enumerated)) candidates.push(enumerated);
+  const bare = url(census.name);
+  if (!candidates.includes(bare)) candidates.push(bare);
+  for (const candidate of candidates) {
+    const res = await fetcher(candidate);
+    if (!res.ok) continue;
+    const served = censusFrom(await res.text(), census.name);
+    return {
+      name: census.name,
+      url: candidate,
+      weights: served.weights,
+      italics: served.italics,
+      probeUrl
+    };
+  }
+  throw new Error(`Could not build a working Google Fonts URL for "${census.name}".`);
+}
+
+// src/editor/core/fonts/fontWeightAvailability.ts
+function inferFontFamilyVariable(weightVariable) {
+  return weightVariable.endsWith("-font-weight") ? `${weightVariable.slice(0, -"-font-weight".length)}-font-family` : null;
+}
+
+// src/editor/core/fonts/weightCoverage.ts
+var STACK_REF = /var\(\s*(--font-(?:display|sans|serif|mono))\s*\)/;
+var VAR_REF = /var\(\s*(--[a-z0-9-]+)/i;
+function declarations(css) {
+  const decls = /* @__PURE__ */ new Map();
+  for (const [, name, value] of css.matchAll(/(--[a-z0-9-]+)\s*:\s*([^;{}]+);/gi)) {
+    decls.set(name, value.trim());
+  }
+  return decls;
+}
+function requiredWeights(tokensCss, overrides = {}) {
+  const decls = declarations(tokensCss);
+  for (const [name, value] of Object.entries(overrides)) decls.set(name, String(value).trim());
+  const scale = /* @__PURE__ */ new Map();
+  for (const [name, value] of decls) {
+    if (name.startsWith("--font-weight-") && /^\d+$/.test(value)) scale.set(name, Number(value));
+  }
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const [name, value] of decls) {
+    const familyVariable = inferFontFamilyVariable(name);
+    if (!familyVariable) continue;
+    const stack = decls.get(familyVariable)?.match(STACK_REF)?.[1];
+    if (!stack) continue;
+    const weight = /^\d+$/.test(value) ? Number(value) : scale.get(value.match(VAR_REF)?.[1] ?? "");
+    if (weight === void 0) continue;
+    const key = `${stack}:${weight}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push({ variable: name, stack, weight });
+  }
+  return out;
+}
+function weightCoverage(requirements, faces) {
+  const out = [];
+  for (const [stack, face] of Object.entries(faces)) {
+    const required = [...new Set(requirements.filter((r) => r.stack === stack).map((r) => r.weight))].sort(
+      (a, b) => a - b
+    );
+    out.push({
+      stack,
+      family: face.name,
+      required,
+      available: face.weights,
+      missing: required.filter((w) => !face.weights.includes(w)),
+      italics: face.italics
+    });
+  }
+  return out;
+}
+export {
+  SLOT_ORDER,
+  SLOT_VARIABLES,
+  applyFontPairing,
+  discoveryUrl,
+  fontPairingLabel,
+  persistUrlFor,
+  readLiveTokensConfig,
+  requiredWeights,
+  resolveDataDirs,
+  resolveGoogleFont,
+  slugifyFamily,
+  weightCoverage
+};

package/dist-plugin/generateColorsAndType/index.d.cts

@@ -1,6 +1,6 @@
-import { F as FontSource, c as FontStack, G as GradientDiskToken, O as Oklch, H as HarmonyMode, a as ColorsAndType } from '../index-DpTIRZ2H.cjs';
-export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-DpTIRZ2H.cjs';
+import { F as FontSource, b as FontStack, G as GradientDiskToken, O as Oklch, H as HarmonyMode, C as ColorsAndType } from '../themeTypes-BAqtv4XO.cjs';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-DBN0RPuT.cjs';
+export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.cjs';
 
 /**
  * Pure palette → CSS-variable derivation.

package/dist-plugin/generateColorsAndType/index.d.ts

@@ -1,6 +1,6 @@
-import { F as FontSource, c as FontStack, G as GradientDiskToken, O as Oklch, H as HarmonyMode, a as ColorsAndType } from '../index-DpTIRZ2H.js';
-export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-DpTIRZ2H.js';
+import { F as FontSource, b as FontStack, G as GradientDiskToken, O as Oklch, H as HarmonyMode, C as ColorsAndType } from '../themeTypes-BAqtv4XO.js';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-DBN0RPuT.js';
+export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.js';
 
 /**
  * Pure palette → CSS-variable derivation.

package/dist-plugin/index-4N-Orzzi.d.cts

@@ -0,0 +1,3 @@
+declare const CURRENT_COMPONENT_SCHEMA_VERSION: number;
+
+export { CURRENT_COMPONENT_SCHEMA_VERSION as C };

package/dist-plugin/index-4N-Orzzi.d.ts

@@ -0,0 +1,3 @@
+declare const CURRENT_COMPONENT_SCHEMA_VERSION: number;
+
+export { CURRENT_COMPONENT_SCHEMA_VERSION as C };

package/dist-plugin/{index-DpTIRZ2H.d.cts → themeTypes-BAqtv4XO.d.cts}

@@ -246,6 +246,4 @@ interface ComponentConfig {
     schemaVersion?: number;
 }
 
-declare const CURRENT_COMPONENT_SCHEMA_VERSION: number;
-
-export { type AliasDiskValue as A, CURRENT_COMPONENT_SCHEMA_VERSION as C, type FontSource as F, type GradientDiskToken as G, type HarmonyMode as H, type Oklch as O, type ColorsAndType as a, type ComponentConfig as b, type FontStack as c };
+export type { AliasDiskValue as A, ColorsAndType as C, FontSource as F, GradientDiskToken as G, HarmonyMode as H, Oklch as O, ComponentConfig as a, FontStack as b, FontStackVariable as c };

package/dist-plugin/{index-DpTIRZ2H.d.ts → themeTypes-BAqtv4XO.d.ts}

@@ -246,6 +246,4 @@ interface ComponentConfig {
     schemaVersion?: number;
 }
 
-declare const CURRENT_COMPONENT_SCHEMA_VERSION: number;
-
-export { type AliasDiskValue as A, CURRENT_COMPONENT_SCHEMA_VERSION as C, type FontSource as F, type GradientDiskToken as G, type HarmonyMode as H, type Oklch as O, type ColorsAndType as a, type ComponentConfig as b, type FontStack as c };
+export type { AliasDiskValue as A, ColorsAndType as C, FontSource as F, GradientDiskToken as G, HarmonyMode as H, Oklch as O, ComponentConfig as a, FontStack as b, FontStackVariable as c };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.55.0",
+  "version": "0.56.1",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [
@@ -129,13 +129,14 @@
     "check:docs-content": "node scripts/sync-docs.mjs --check",
     "check:token-contract": "node scripts/check-token-contract.mjs",
     "check:preset-themes": "node scripts/check-preset-themes.mjs",
+    "check:skills": "node scripts/check-skills.mjs",
     "sync:component-defaults": "node scripts/sync-component-defaults.mjs --write",
     "sync:docs": "node scripts/sync-docs.mjs --write",
     "seed:preset-theme": "node scripts/seed-preset-theme.mjs",
     "collapse:theme": "node scripts/collapse-theme-to-default.mjs",
     "check:smoke-install": "bash scripts/smoke-install.sh",
     "check:smoke-create": "bash scripts/smoke-create.sh",
-    "prepublishOnly": "npm run check:no-style-imports && npm run check:no-tooling-imports && npm run check:slot-prose && npm run check:overlay-portal && npm run check:editor-font-isolation && npm run check:component-defaults && npm run check:production-is-default && npm run check:docs-content && npm run build:lib && npm run check:token-contract && npm run check:preset-themes && npm run check:smoke-install && npm run check:smoke-create"
+    "prepublishOnly": "npm run check:no-style-imports && npm run check:no-tooling-imports && npm run check:slot-prose && npm run check:overlay-portal && npm run check:editor-font-isolation && npm run check:component-defaults && npm run check:production-is-default && npm run check:docs-content && npm run build:lib && npm run check:token-contract && npm run check:preset-themes && npm run check:skills && npm run check:smoke-install && npm run check:smoke-create"
   },
   "peerDependencies": {
     "@sveltejs/vite-plugin-svelte": "^7.0",

package/src/editor/core/fonts/applyFontPairing.ts

@@ -0,0 +1,157 @@
+import type {
+  ColorsAndType,
+  FontFamily,
+  FontSource,
+  FontStack,
+  FontStackVariable,
+} from '../themes/themeTypes';
+import { parseGoogleFontsUrl } from './fontParse';
+import { familyIndex, resolvedFaceName } from './fontPairing';
+
+export type PairingSlot = 'display' | 'body' | 'serif' | 'mono';
+
+export interface PairingFace {
+  name: string;
+  url: string;
+  weights?: number[];
+  italics?: boolean;
+}
+
+export type FontPairing = Partial<Record<PairingSlot, PairingFace>>;
+
+export interface PairingChange {
+  slot: PairingSlot;
+  variable: FontStackVariable;
+  from: string | null;
+  to: string;
+}
+
+export interface DroppedSource {
+  id: string;
+  names: string[];
+}
+
+export interface FontPairingReport {
+  changes: PairingChange[];
+  dropped: DroppedSource[];
+  changed: boolean;
+}
+
+export interface FontPairingResult {
+  colorsAndType: ColorsAndType;
+  report: FontPairingReport;
+}
+
+/** Slot order is also the order stamped sources land in `fontSources`;
+ *  `check:preset-themes` reads the preset pair back out positionally. */
+export const SLOT_ORDER: PairingSlot[] = ['display', 'body', 'serif', 'mono'];
+
+export const SLOT_VARIABLES: Record<PairingSlot, FontStackVariable> = {
+  display: '--font-display',
+  body: '--font-sans',
+  serif: '--font-serif',
+  mono: '--font-mono',
+};
+
+export function slugifyFamily(name: string): string {
+  return name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+}
+
+function weightsFor(face: PairingFace): Pick<FontFamily, 'weights' | 'italics'> {
+  if (face.weights) {
+    return { weights: face.weights, ...(face.italics ? { italics: true } : {}) };
+  }
+  const parsed = parseGoogleFontsUrl(face.url)?.[0];
+  return {
+    ...(parsed?.weights ? { weights: parsed.weights } : {}),
+    ...(face.italics || parsed?.italics ? { italics: true } : {}),
+  };
+}
+
+function sourceFor(face: PairingFace, idPrefix: string): FontSource {
+  const id = `${idPrefix}${slugifyFamily(face.name)}`;
+  return {
+    id,
+    kind: 'google',
+    url: face.url,
+    label: 'Google Fonts',
+    families: [
+      {
+        id: `${id}:${slugifyFamily(face.name)}`,
+        name: face.name,
+        cssName: `"${face.name}"`,
+        ...weightsFor(face),
+      },
+    ],
+  };
+}
+
+function rewriteStack(stacks: FontStack[], variable: FontStackVariable, familyId: string): FontStack[] {
+  const stack = stacks.find((s) => s.variable === variable);
+  if (!stack) throw new Error(`colors and type have no ${variable} stack to rewrite`);
+  return stacks.map((s) =>
+    s === stack
+      ? { ...s, slots: [{ kind: 'project' as const, familyId }, ...s.slots.filter((slot) => slot.kind !== 'project')] }
+      : s,
+  );
+}
+
+export interface ApplyFontPairingOptions {
+  /** `src_preset_` for the shipped presets, so `check:preset-themes` can still
+   *  tell a stamped source from one the user added. */
+  idPrefix?: string;
+}
+
+/**
+ * Bind each named slot to a Google Fonts family: stamp the source, put that
+ * family at the head of the slot's stack, and keep every fallback behind it.
+ * Slots the pairing omits are left exactly as they are.
+ */
+export function applyFontPairing(
+  colorsAndType: ColorsAndType,
+  pairing: FontPairing,
+  { idPrefix = 'src_google_' }: ApplyFontPairingOptions = {},
+): FontPairingResult {
+  const slots = SLOT_ORDER.filter((slot) => pairing[slot]);
+  if (slots.length === 0) throw new Error('pairing names no slot to change');
+
+  const before = colorsAndType.fontStacks ?? [];
+  const beforeSources = colorsAndType.fontSources ?? [];
+  const beforeIndex = familyIndex(beforeSources);
+
+  const stamped = slots.map((slot) => ({ slot, source: sourceFor(pairing[slot]!, idPrefix) }));
+  const stampedIds = new Set(stamped.map((s) => s.source.id));
+
+  let stacks = before;
+  const changes: PairingChange[] = [];
+  for (const { slot, source } of stamped) {
+    const variable = SLOT_VARIABLES[slot];
+    const from = resolvedFaceName(before.find((s) => s.variable === variable), beforeIndex);
+    stacks = rewriteStack(stacks, variable, source.families[0].id);
+    changes.push({ slot, variable, from, to: source.families[0].name });
+  }
+
+  // A source displaced from a rewritten stack would still ship as a
+  // render-blocking @import in every consumer's fonts.css, so drop any source
+  // no remaining stack references.
+  const referenced = new Set(
+    stacks
+      .flatMap((s) => s.slots)
+      .filter((s) => s.kind === 'project')
+      .map((s) => s.familyId),
+  );
+  const kept = [...beforeSources.filter((s) => !stampedIds.has(s.id)), ...stamped.map((s) => s.source)];
+  const sources = kept.filter((s) => s.families.some((f) => referenced.has(f.id)));
+  const dropped = kept
+    .filter((s) => !sources.includes(s))
+    .map((s) => ({ id: s.id, names: s.families.map((f) => f.name) }));
+
+  const next: ColorsAndType = { ...colorsAndType, fontSources: sources, fontStacks: stacks };
+  const changed =
+    JSON.stringify([beforeSources, before]) !== JSON.stringify([sources, stacks]);
+
+  return {
+    colorsAndType: next,
+    report: { changes: changes.filter((c) => c.from !== c.to), dropped, changed },
+  };
+}

package/src/editor/core/fonts/fontPairing.ts

@@ -8,7 +8,17 @@ import type { FontFamily, FontSource, FontStack, FontStackVariable } from '../th
 
 const PAIRING: FontStackVariable[] = ['--font-display', '--font-sans'];
 
-function slotLabel(
+export function familyIndex(sources: FontSource[]): Map<string, FontFamily> {
+  const familyById = new Map<string, FontFamily>();
+  for (const source of sources) {
+    for (const family of source.families) familyById.set(family.id, family);
+  }
+  return familyById;
+}
+
+/** The face the page actually shows for one stack: the first slot that
+ *  resolves, named as the user named it. */
+export function resolvedFaceName(
   stack: FontStack | undefined,
   familyById: Map<string, FontFamily>,
 ): string | null {
@@ -25,11 +35,8 @@ function slotLabel(
 }
 
 export function fontPairingLabel(stacks: FontStack[], sources: FontSource[]): string {
-  const familyById = new Map<string, FontFamily>();
-  for (const source of sources) {
-    for (const family of source.families) familyById.set(family.id, family);
-  }
-  return PAIRING.map((variable) => slotLabel(stacks.find((s) => s.variable === variable), familyById))
+  const familyById = familyIndex(sources);
+  return PAIRING.map((variable) => resolvedFaceName(stacks.find((s) => s.variable === variable), familyById))
     .filter((label): label is string => label !== null)
     .join(' / ');
 }