@motion-proto/live-tokens 0.47.0 → 0.48.0

package/src/editor/component-editor/scaffolding/TokenLayout.svelte

@@ -16,34 +16,13 @@
     setComponentAliasLinked,
     clearComponentAliasLinked,
   } from '../../core/store/editorStore';
+  import { rawKind, type TokenKind } from '../../core/components/aliasKinds';
   import { getEditorContext } from './editorContext';
   import type { Token } from './types';
 
   /** Selector kind. `padding-split` is `padding` whose per-side variables exist;
       it renders the four-sided field group instead of the single-value row. */
-  type Kind =
-    | 'surface'
-    | 'border'
-    | 'border-width'
-    | 'radius'
-    | 'divider-width'
-    | 'divider-height'
-    | 'divider-inset'
-    | 'dot-size'
-    | 'blur'
-    | 'scale'
-    | 'shadow'
-    | 'font-family'
-    | 'font-weight'
-    | 'font-size'
-    | 'line-height'
-    | 'letter-spacing'
-    | 'padding'
-    | 'padding-split'
-    | 'gap'
-    | 'duration'
-    | 'easing'
-    | 'text-color';
+  type Kind = TokenKind | 'padding-split';
 
   type Entry = { kind: Kind; token: Token };
 
@@ -82,42 +61,6 @@
     onchange,
   }: Props = $props();
 
-  /** Suffix/prefix patterns mapped to kinds — single source of truth used by `rawKind`.
-      Order matters: `-text` must run before `-border`/`-surface` because `--text-*`
-      would otherwise match `surface`/`border` if any pattern overlapped. Variables
-      that don't match any pattern fall through to `text-color` (renders as a palette
-      picker). Tokens with unconventional suffixes should be renamed. */
-  const KIND_PATTERNS: Array<{ kind: Kind; matches: (v: string) => boolean }> = [
-    { kind: 'font-family',    matches: (v) => v.endsWith('-font-family') },
-    { kind: 'font-weight',    matches: (v) => v.endsWith('-font-weight') },
-    { kind: 'font-size',      matches: (v) => v.endsWith('-font-size') || v.endsWith('-icon-size') || v.endsWith('-thumb-size') },
-    { kind: 'line-height',    matches: (v) => v.endsWith('-line-height') },
-    { kind: 'letter-spacing', matches: (v) => v.endsWith('-letter-spacing') },
-    { kind: 'text-color',     matches: (v) => v.endsWith('-text') || v.startsWith('--text-') },
-    { kind: 'radius',         matches: (v) => v.endsWith('-radius') || v.startsWith('--radius-') },
-    { kind: 'divider-width',  matches: (v) => v.endsWith('-divider-width') || v.endsWith('-divider-thickness') },
-    { kind: 'divider-height', matches: (v) => v.endsWith('-divider-height') || v.endsWith('-track-height') },
-    { kind: 'divider-inset',  matches: (v) => v.endsWith('-divider-inset') },
-    { kind: 'dot-size',       matches: (v) => v.endsWith('-dot-size') },
-    { kind: 'blur',           matches: (v) => v.endsWith('-blur') || v.startsWith('--blur-') },
-    { kind: 'scale',          matches: (v) => v.endsWith('-scale') || v.startsWith('--scale-') },
-    { kind: 'shadow',         matches: (v) => v.endsWith('-shadow') || v.startsWith('--shadow-') },
-    { kind: 'padding',        matches: (v) => v.endsWith('-padding') || v.endsWith('-margin') },
-    { kind: 'gap',            matches: (v) => v.endsWith('-gap') },
-    { kind: 'duration',       matches: (v) => v.endsWith('-duration') || v.startsWith('--duration-') },
-    { kind: 'easing',         matches: (v) => v.endsWith('-easing') || v.startsWith('--ease-') },
-    { kind: 'border-width',   matches: (v) => v.endsWith('-border-width') || v.endsWith('-accent-width') || v.endsWith('-hairline-thickness') || v.startsWith('--border-width-') },
-    { kind: 'border',         matches: (v) => v.endsWith('-border') || v.startsWith('--border-') },
-    { kind: 'surface',        matches: (v) => v.endsWith('-surface') || v.startsWith('--surface-') },
-  ];
-
-  function rawKind(variable: string): Kind {
-    for (const { kind, matches } of KIND_PATTERNS) {
-      if (matches(variable)) return kind;
-    }
-    return 'text-color';
-  }
-
   /** Fixed internal order for tokens within a layout. `padding-split` co-orders with `padding`. */
   const baseKindOrder: Kind[] = [
     'font-family',

package/src/editor/component-editor/scaffolding/VariantGroup.svelte

@@ -169,7 +169,7 @@
     const dstTypeGroups = typeGroups[toState] ?? [];
 
     mutate(`copy ${fromVariant}/${fromState} → ${name}/${toState}`, (s) => {
-      const slice = s.components[component!] ?? (s.components[component!] = { activeFile: 'default', aliases: {}, config: {} });
+      const slice = s.components[component!] ?? (s.components[component!] = { aliases: {}, config: {} });
       const dstVarsTouched: string[] = [];
       /** Resolve a variable's effective value as a CSS string: the override if
           set, otherwise its declared default. Returns null if neither exists.

package/src/editor/core/components/adjustAliases.ts

@@ -0,0 +1,180 @@
+import { matchesKind } from './aliasKinds';
+import type { AliasDiskValue, ComponentConfig } from '../themes/themeTypes';
+
+export type AdjustKind = 'radius' | 'padding' | 'gap' | 'border-width';
+
+export interface AdjustOp {
+  /** Component id; omitted applies the op to every config. */
+  target?: string;
+  kind: AdjustKind;
+  set?: string;
+  shift?: number;
+  /** Radius shifts only: admits `--radius-full` as the ladder's top rung. */
+  full?: boolean;
+}
+
+export type SkipReason = 'raw-value' | 'off-ladder' | 'clamped' | 'pill-preserved';
+
+export interface AliasChange {
+  variable: string;
+  from: string;
+  to: string;
+}
+
+export interface AliasSkip {
+  variable: string;
+  value: AliasDiskValue;
+  reason: SkipReason;
+}
+
+export interface ComponentReport {
+  component: string;
+  changes: AliasChange[];
+  skips: AliasSkip[];
+}
+
+export interface AdjustReport {
+  components: ComponentReport[];
+}
+
+export interface AdjustResult {
+  configs: Record<string, ComponentConfig>;
+  report: AdjustReport;
+}
+
+const RADIUS_FULL = '--radius-full';
+
+const RADIUS_RUNGS = [
+  '--radius-none', '--radius-sm', '--radius-md', '--radius-lg', '--radius-xl',
+  '--radius-2xl', '--radius-3xl', '--radius-4xl',
+];
+
+/** The editor picker's 12-step subset (`UIPaddingSelector`), not the full
+    `--space-*` scale: every value this engine writes must stay re-editable
+    by hand in the picker. */
+const SPACE_RUNGS = [
+  '--space-0', '--space-2', '--space-4', '--space-6', '--space-8', '--space-10',
+  '--space-12', '--space-16', '--space-20', '--space-24', '--space-32', '--space-48',
+];
+
+const SPACE_FAMILY = [...SPACE_RUNGS, '--space-40', '--space-64', '--space-96', '--space-128'];
+
+const BORDER_WIDTH_RUNGS = [
+  '--border-width-0', '--border-width-1', '--border-width-2', '--border-width-3',
+  '--border-width-4', '--border-width-5', '--border-width-6', '--border-width-8',
+  '--border-width-10', '--border-width-12', '--border-width-16', '--border-width-20',
+  '--border-width-24',
+];
+
+const LADDERS: Record<AdjustKind, { rungs: string[]; family: string[] }> = {
+  radius: { rungs: RADIUS_RUNGS, family: [...RADIUS_RUNGS, RADIUS_FULL] },
+  padding: { rungs: SPACE_RUNGS, family: SPACE_FAMILY },
+  gap: { rungs: SPACE_RUNGS, family: SPACE_FAMILY },
+  'border-width': { rungs: BORDER_WIDTH_RUNGS, family: BORDER_WIDTH_RUNGS },
+};
+
+const TOKEN_NAME = /^--[a-z0-9-]+$/;
+
+type Outcome = { from: string; to: string } | { skip: SkipReason };
+
+function rungsFor(op: AdjustOp): string[] {
+  return op.kind === 'radius' && op.full ? [...RADIUS_RUNGS, RADIUS_FULL] : LADDERS[op.kind].rungs;
+}
+
+function spaceStep(token: string): number {
+  return Number(token.slice('--space-'.length));
+}
+
+/** `<=` sends an exact tie (`--space-40`, midway between 32 and 48) upward. */
+function nearestSpaceRung(token: string, rungs: string[]): number {
+  const step = spaceStep(token);
+  let best = 0;
+  for (let i = 1; i < rungs.length; i++) {
+    if (Math.abs(spaceStep(rungs[i]) - step) <= Math.abs(spaceStep(rungs[best]) - step)) best = i;
+  }
+  return best;
+}
+
+function resolve(op: AdjustOp, value: AliasDiskValue): Outcome {
+  if (typeof value !== 'string' || !TOKEN_NAME.test(value)) return { skip: 'raw-value' };
+  if (!LADDERS[op.kind].family.includes(value)) return { skip: 'off-ladder' };
+  if (op.set !== undefined) return { from: value, to: op.set };
+
+  const rungs = rungsFor(op);
+  let index = rungs.indexOf(value);
+  if (index < 0) {
+    if (value === RADIUS_FULL) return { skip: 'pill-preserved' };
+    index = nearestSpaceRung(value, rungs);
+  }
+
+  const wanted = index + op.shift!;
+  const landed = Math.min(Math.max(wanted, 0), rungs.length - 1);
+  if (landed !== wanted && rungs[landed] === value) return { skip: 'clamped' };
+  return { from: value, to: rungs[landed] };
+}
+
+function validateOp(op: AdjustOp, configs: Record<string, ComponentConfig>): void {
+  const ladder = LADDERS[op.kind];
+  if (!ladder) throw new Error(`Unknown kind "${op.kind}" (expected ${Object.keys(LADDERS).join(', ')})`);
+  if (op.target !== undefined && !(op.target in configs)) {
+    throw new Error(`Unknown target component "${op.target}"`);
+  }
+
+  const hasSet = op.set !== undefined;
+  const hasShift = op.shift !== undefined;
+  if (hasSet === hasShift) throw new Error(`A ${op.kind} op needs exactly one of "set" or "shift"`);
+  const settable = op.kind === 'radius' ? ladder.family : ladder.rungs;
+  if (hasSet && !settable.includes(op.set!)) {
+    throw new Error(`"${op.set}" is not on the ${op.kind} ladder`);
+  }
+  if (hasShift && !Number.isInteger(op.shift)) {
+    throw new Error(`"shift" must be a whole number of steps, got ${op.shift}`);
+  }
+  if (op.full !== undefined && !(op.kind === 'radius' && hasShift)) {
+    throw new Error('"full" applies to radius shifts only');
+  }
+}
+
+export function adjustAliases(
+  configs: Record<string, ComponentConfig>,
+  ops: readonly AdjustOp[],
+  now: string,
+): AdjustResult {
+  for (const op of ops) validateOp(op, configs);
+
+  const next = { ...configs };
+  const reports = new Map<string, ComponentReport>();
+  const reportFor = (component: string): ComponentReport => {
+    let report = reports.get(component);
+    if (!report) {
+      report = { component, changes: [], skips: [] };
+      reports.set(component, report);
+    }
+    return report;
+  };
+
+  for (const op of ops) {
+    for (const component of op.target ? [op.target] : Object.keys(next)) {
+      const config = next[component];
+      const aliases = { ...config.aliases };
+      let changed = false;
+
+      for (const [variable, value] of Object.entries(config.aliases)) {
+        if (!matchesKind(variable, op.kind)) continue;
+        const outcome = resolve(op, value);
+        if ('skip' in outcome) {
+          reportFor(component).skips.push({ variable, value, reason: outcome.skip });
+          continue;
+        }
+        if (outcome.to === outcome.from) continue;
+        aliases[variable] = outcome.to;
+        reportFor(component).changes.push({ variable, from: outcome.from, to: outcome.to });
+        changed = true;
+      }
+
+      if (changed) next[component] = { ...config, aliases, updatedAt: now };
+    }
+  }
+
+  return { configs: next, report: { components: [...reports.values()] } };
+}

package/src/editor/core/components/aliasKinds.ts

@@ -0,0 +1,73 @@
+export type TokenKind =
+  | 'surface'
+  | 'border'
+  | 'border-width'
+  | 'radius'
+  | 'divider-width'
+  | 'divider-height'
+  | 'divider-inset'
+  | 'dot-size'
+  | 'blur'
+  | 'scale'
+  | 'shadow'
+  | 'font-family'
+  | 'font-weight'
+  | 'font-size'
+  | 'line-height'
+  | 'letter-spacing'
+  | 'padding'
+  | 'gap'
+  | 'duration'
+  | 'easing'
+  | 'text-color';
+
+/** Suffix/prefix patterns mapped to kinds — the one source of truth for the
+    editor's selector layout and the `adjust` CLI, so the two cannot drift.
+    Order matters: `-text` must run before `-border`/`-surface` because `--text-*`
+    would otherwise match `surface`/`border` if any pattern overlapped. Variables
+    that don't match any pattern fall through to `text-color` (renders as a palette
+    picker). Tokens with unconventional suffixes should be renamed. */
+export const KIND_PATTERNS: ReadonlyArray<{ kind: TokenKind; matches: (v: string) => boolean }> = [
+  { kind: 'font-family',    matches: (v) => v.endsWith('-font-family') },
+  { kind: 'font-weight',    matches: (v) => v.endsWith('-font-weight') },
+  { kind: 'font-size',      matches: (v) => v.endsWith('-font-size') || v.endsWith('-icon-size') || v.endsWith('-thumb-size') },
+  { kind: 'line-height',    matches: (v) => v.endsWith('-line-height') },
+  { kind: 'letter-spacing', matches: (v) => v.endsWith('-letter-spacing') },
+  { kind: 'text-color',     matches: (v) => v.endsWith('-text') || v.startsWith('--text-') },
+  { kind: 'radius',         matches: (v) => v.endsWith('-radius') || v.startsWith('--radius-') },
+  { kind: 'divider-width',  matches: (v) => v.endsWith('-divider-width') || v.endsWith('-divider-thickness') },
+  { kind: 'divider-height', matches: (v) => v.endsWith('-divider-height') || v.endsWith('-track-height') },
+  { kind: 'divider-inset',  matches: (v) => v.endsWith('-divider-inset') },
+  { kind: 'dot-size',       matches: (v) => v.endsWith('-dot-size') },
+  { kind: 'blur',           matches: (v) => v.endsWith('-blur') || v.startsWith('--blur-') },
+  { kind: 'scale',          matches: (v) => v.endsWith('-scale') || v.startsWith('--scale-') },
+  { kind: 'shadow',         matches: (v) => v.endsWith('-shadow') || v.startsWith('--shadow-') },
+  { kind: 'padding',        matches: (v) => v.endsWith('-padding') || v.endsWith('-margin') },
+  { kind: 'gap',            matches: (v) => v.endsWith('-gap') },
+  { kind: 'duration',       matches: (v) => v.endsWith('-duration') || v.startsWith('--duration-') },
+  { kind: 'easing',         matches: (v) => v.endsWith('-easing') || v.startsWith('--ease-') },
+  { kind: 'border-width',   matches: (v) => v.endsWith('-border-width') || v.endsWith('-accent-width') || v.endsWith('-hairline-thickness') || v.startsWith('--border-width-') },
+  { kind: 'border',         matches: (v) => v.endsWith('-border') || v.startsWith('--border-') },
+  { kind: 'surface',        matches: (v) => v.endsWith('-surface') || v.startsWith('--surface-') },
+];
+
+export function rawKind(variable: string): TokenKind {
+  for (const { kind, matches } of KIND_PATTERNS) {
+    if (matches(variable)) return kind;
+  }
+  return 'text-color';
+}
+
+const MATCHER_BY_KIND = Object.fromEntries(
+  KIND_PATTERNS.map((p) => [p.kind, p.matches]),
+) as Record<TokenKind, (v: string) => boolean>;
+
+const SIDE_SUFFIXES = ['-top', '-right', '-bottom', '-left'];
+
+/** Side-aware kind test. Per-side paddings (`--card-default-body-padding-top`)
+    are written by UIPaddingSelector and never declared as editor tokens, so
+    `rawKind` never meets one; the CLI does, and they belong with their parent. */
+export function matchesKind(variable: string, kind: TokenKind): boolean {
+  const side = SIDE_SUFFIXES.find((s) => variable.endsWith(s));
+  return MATCHER_BY_KIND[kind](side ? variable.slice(0, -side.length) : variable);
+}

package/src/editor/core/components/componentConfigService.ts

@@ -1,37 +1,25 @@
-import type { AliasDiskValue, ComponentConfig, ComponentConfigMeta } from '../themes/themeTypes';
+import type { ComponentConfig, ComponentConfigMeta, LiveSource } from '../themes/themeTypes';
 import { versionedFileResource } from '../storage/files/versionedFileResourceClient';
 import { API_BASE } from '../storage/apiBase';
+import { liveMovedSinceBake } from '../productionPulse';
 
 /**
- * REST client for per-component config files. Parallel to `themeService.ts`
+ * REST client for per-component config files. Parallel to `colorsAndTypeService.ts`
  * but scoped to `${API_BASE}/component-configs/*`. Each component (button,
- * card, …) has its own lifecycle: default.json (generated from the `.svelte`
- * source), plus user-authored named configs, each with its own active /
- * production pointer.
- *
- * Both this and `themeService` consume `versionedFileResource(...)`. Adding a
- * third file-managed resource — per the user's "mirror theme-file lifecycle
- * for new editor artifacts" invariant — is one helper call here, not a third
- * round of copy-paste CRUD.
+ * card, …) has a `default.json` generated from its `.svelte` source, a reserved
+ * `_working.json` buffer holding whatever the editor is running, and any number
+ * of user-saved presets.
  */
 
 export interface ComponentSummary {
   name: string;
-  activeFile: string;
-  productionFile: string;
-}
-
-export interface ComponentProductionInfo {
-  fileName: string;
-  name: string;
-  aliases: Record<string, AliasDiskValue>;
+  /** Where the component's live config resolves from. */
+  source: LiveSource;
 }
 
 export interface ComponentConfigList {
   component: string;
   files: ComponentConfigMeta[];
-  activeFile: string;
-  productionFile: string;
 }
 
 export async function listComponents(): Promise<ComponentSummary[]> {
@@ -42,19 +30,14 @@ export async function listComponents(): Promise<ComponentSummary[]> {
 }
 
 function resourceFor(component: string) {
-  return versionedFileResource<ComponentConfig, ComponentConfigMeta, ComponentProductionInfo>({
+  return versionedFileResource<ComponentConfig, ComponentConfigMeta>({
     baseUrl: `${API_BASE}/component-configs/${encodeURIComponent(component)}`,
   });
 }
 
 export async function listComponentConfigs(component: string): Promise<ComponentConfigList> {
   const data = await resourceFor(component).list();
-  return {
-    component,
-    files: data.files,
-    activeFile: data.activeFile ?? 'default',
-    productionFile: data.productionFile ?? 'default',
-  };
+  return { component, files: data.files };
 }
 
 export const loadComponentConfig = (
@@ -71,19 +54,24 @@ export const saveComponentConfig = (
 export const deleteComponentConfig = (component: string, fileName: string): Promise<void> =>
   resourceFor(component).remove(fileName);
 
+/** The config the component is running: the buffer, else the open theme's
+ *  copy, else the component default. `_source` says which. */
 export const getActiveComponentConfig = (component: string): Promise<ComponentConfig | null> =>
   resourceFor(component).getActive();
 
-export const setActiveComponentFile = (component: string, fileName: string): Promise<void> =>
-  resourceFor(component).setActive(fileName);
-
-export const getComponentProductionInfo = (component: string): Promise<ComponentProductionInfo> =>
-  resourceFor(component).getProductionInfo();
-
-export async function setComponentProductionFile(
+/** Write the component's unsaved buffer. */
+export async function writeWorkingComponentConfig(
   component: string,
-  fileName: string,
-): Promise<{ ok: boolean; productionFile: string }> {
-  const data = await resourceFor(component).setProduction(fileName);
-  return { ok: data.ok, productionFile: data.fileName };
+  data: ComponentConfig,
+): Promise<void> {
+  const res = await fetch(`${API_BASE}/component-configs/${encodeURIComponent(component)}/working`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: 'Write failed' }));
+    throw new Error(err.error || 'Write failed');
+  }
+  liveMovedSinceBake.set(true);
 }

package/src/editor/core/flashStatus.ts

@@ -1,6 +1,6 @@
 /**
  * Centralised "flash a transient status, then revert to idle" helper for the
- * file managers (theme / component / manifest). Each pulse — saved, error,
+ * file managers (colors and type / component / theme). Each pulse — saved, error,
  * adopted — shares the same timing so the UI stays in sync.
  */
 

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

@@ -1,4 +1,4 @@
-import type { FontFamily, FontSource, FontStack, Theme } from '../themes/themeTypes';
+import type { FontFamily, FontSource, FontStack, ColorsAndType } from '../themes/themeTypes';
 
 // Google Fonts CDN URLs for the default font families. We used to ship local
 // woff2 files and emit @font-face blocks pointing at them, but Vite's url()
@@ -30,7 +30,7 @@ function fam(sourceId: string, name: string, cssName?: string, weights?: number[
 }
 
 /**
- * Build the default fontSources. Used when a theme has no fontSources yet.
+ * Build the default fontSources. Used when a file has no fontSources yet.
  */
 export function defaultFontSources(): FontSource[] {
   const typekitId = 'src_typekit_jes8oow';
@@ -143,29 +143,29 @@ function migrateLegacyLocalFonts(src: FontSource): boolean {
 }
 
 /**
- * Ensure the loaded Theme has fontSources and fontStacks. Mutates in place
- * only when missing; safe to call on already-migrated themes. Also strips any
+ * Ensure the loaded colors and type have fontSources and fontStacks. Mutates in place
+ * only when missing; safe to call on already-migrated files. Also strips any
  * stale --font-* entries from cssVariables since those are now derived, and
  * migrates legacy local-font sources to Google Fonts URL sources.
  */
-export function migrateThemeFonts(theme: Theme): { migrated: boolean } {
+export function migrateColorsAndTypeFonts(colorsAndType: ColorsAndType): { migrated: boolean } {
   let migrated = false;
-  if (!theme.fontSources || theme.fontSources.length === 0) {
-    theme.fontSources = defaultFontSources();
+  if (!colorsAndType.fontSources || colorsAndType.fontSources.length === 0) {
+    colorsAndType.fontSources = defaultFontSources();
     migrated = true;
   } else {
-    for (const src of theme.fontSources) {
+    for (const src of colorsAndType.fontSources) {
       if (migrateLegacyLocalFonts(src)) migrated = true;
     }
   }
-  if (!theme.fontStacks || theme.fontStacks.length === 0) {
-    theme.fontStacks = defaultFontStacks(theme.fontSources);
+  if (!colorsAndType.fontStacks || colorsAndType.fontStacks.length === 0) {
+    colorsAndType.fontStacks = defaultFontStacks(colorsAndType.fontSources);
     migrated = true;
   }
-  if (theme.cssVariables) {
+  if (colorsAndType.cssVariables) {
     for (const key of ['--font-display', '--font-sans', '--font-serif', '--font-mono']) {
-      if (key in theme.cssVariables) {
-        delete theme.cssVariables[key];
+      if (key in colorsAndType.cssVariables) {
+        delete colorsAndType.cssVariables[key];
         migrated = true;
       }
     }

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

@@ -0,0 +1,35 @@
+import type { FontFamily, FontSource, FontStack, FontStackVariable } from '../themes/themeTypes';
+
+/**
+ * The two faces a theme is recognised by, for the read-only identity line:
+ * headings then body, named as the user named them rather than as a CSS
+ * cascade. The first slot that resolves is the face the page actually shows.
+ */
+
+const PAIRING: FontStackVariable[] = ['--font-display', '--font-sans'];
+
+function slotLabel(
+  stack: FontStack | undefined,
+  familyById: Map<string, FontFamily>,
+): string | null {
+  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;
+}
+
+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))
+    .filter((label): label is string => label !== null)
+    .join(' / ');
+}