diff --git a/web/sections/LayoutPanel.tsx b/web/sections/LayoutPanel.tsx index 88cbf99..6c3340d 100644 --- a/web/sections/LayoutPanel.tsx +++ b/web/sections/LayoutPanel.tsx @@ -45,6 +45,14 @@ type Layout = { font_display: string | null; /** What the picker may offer — sent by the API so this file holds no third copy of the list. */ fonts: string[]; + /** + * Which face plays each role when nothing has been chosen, read from the site's own stylesheet. + * + * So the empty option can NAME the typeface instead of saying "Default". The question somebody is + * actually asking of that dropdown is "what is it now" — and a label that does not answer it makes + * them change the setting to find out, which is the one way to lose the answer. + */ + font_defaults: Record; }; /** The four roles styles.css declares. A template asks for a role; this decides which face plays it. */ @@ -107,9 +115,10 @@ export const LayoutPanel = () => { /* Compared field by field rather than whole, because the payload carries something this does not own: - `fonts` is the API saying which faces the build subsets, not a value anybody edits. Including it - would be harmless today and wrong the first time a face is added — the panel would show unsaved - changes for a decision made in the build script. + `fonts` and `font_defaults` are the API describing the site — which faces the build subsets, and + which one plays each role today — not values anybody edits here. Including them would be harmless + today and wrong the first time either changed: the panel would show unsaved changes for a decision + made in a build script or a stylesheet. */ const WRITABLE = [ 'background', @@ -225,10 +234,11 @@ export const LayoutPanel = () => { onChange={(event) => patch({ [key]: event.currentTarget.value || null } as Partial)} className="h-8 rounded-md border border-input bg-transparent px-2 text-xs" > - {/* "Default" is not a font. It means the stylesheet decides, which is what an - untouched site already does — so choosing it puts things back rather than - setting something new. */} - + {/* 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. */} + {draft.fonts.map((font) => (