the typeface picker names the current face

"Default" told somebody nothing. The question they are asking of that dropdown is "what is it now, and
what would I be changing it from" — so the empty option now reads "Martian Title (site default)", from
the stylesheet that actually decides it.

A label that refuses to answer makes people change the setting to find out, which is the one action
that loses the answer.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-31 02:33:46 +01:00
co-authored by Claude Opus 5
parent 3669d2a405
commit 97aa78204b
+17 -7
View File
@@ -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<string, string>;
};
/** 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<Layout>)}
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. */}
<option value="">Default</option>
{/* 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'}
</option>
{draft.fonts.map((font) => (
<option key={font} value={font}>
{font}