one list of roles, named for what they are

Fonts and Font Sizes are the same four things, so they now read in the same order
under the same names — Menu, Titles, Headings, Body — from one list.

font_display is the largest statements and font_title is a section heading, which
is the reverse of what the words suggest. The labels say what the reader sees.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/sections/LayoutPanel.tsx

@@ -11,6 +11,7 @@ import { useEditorSlot } from '../useEditorSlot';
 import { type LayoutBand } from './PaddingTab';
 import { SpacingTab } from './SpacingTab';
 import { FontSizesTab, type FontSizes } from './FontSizesTab';
+import { ROLES } from './roles';
 
 /**
  * The shell every page renders inside: the menu, the footer, the colours and the typefaces.
@@ -76,14 +77,6 @@ type Layout = {
   font_defaults: Record<string, string>;
 };
 
-/** The four roles styles.css declares. A template asks for a role; this decides which face plays it. */
-const ROLES = [
-  { key: 'font_title' as const, label: 'Headings' },
-  { key: 'font_body' as const, label: 'Body' },
-  { key: 'font_sub' as const, label: 'Menu' },
-  { key: 'font_display' as const, label: 'Display' },
-];
-
 /**
  * The draft, as the CSS custom properties the page reads.
  *
@@ -362,18 +355,18 @@ export const LayoutPanel = () => {
 
           */}
           <div className="grid grid-cols-2 gap-3">
-            {ROLES.map(({ key, label }) => (
-              <div key={key} className="flex flex-col gap-1">
+            {ROLES.map(({ font, label }) => (
+              <div key={font} className="flex flex-col gap-1">
                 <label className="text-xs">{label}</label>
                 <select
-                  value={draft[key] ?? ''}
-                  onChange={(event) => patch({ [key]: event.currentTarget.value || null } as Partial<Layout>)}
+                  value={draft[font] ?? ''}
+                  onChange={(event) => patch({ [font]: event.currentTarget.value || null } as Partial<Layout>)}
                   className="h-8 rounded-md border border-input bg-transparent px-2 text-xs"
                 >
                   {/* Not "Default" — the face the stylesheet actually uses, named. Choosing it puts
                       things back rather than setting something new, and now you can see what back is. */}
                   <option value="">
-                    {draft.font_defaults[key] ? `${draft.font_defaults[key]} (site default)` : 'Default'}
+                    {draft.font_defaults[font] ? `${draft.font_defaults[font]} (site default)` : 'Default'}
                   </option>
                   {draft.fonts.map((font) => (
                     <option key={font} value={font}>