@aglyn/shared-ui-theme 1.0.0-beta.230 → 1.0.0-beta.232

package/src/lib/util/theme-editor-edits.d.ts

@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { HostTheme, HostThemeScheme } from '@aglyn/shared-data-types';
+import { type ThemeColorToken } from './theme-editor-fields';
+/** One control's change; a null value clears it back to the theme's own. */
+export type ThemeEditorEdit = {
+    control: 'color';
+    scheme: HostThemeScheme;
+    token: ThemeColorToken;
+    value: string | null;
+} | {
+    control: 'darkScheme';
+    value: 'auto' | 'off';
+} | {
+    control: 'fontFamily';
+    value: string;
+} | {
+    control: 'borderRadius';
+    value: number | null;
+} | {
+    control: 'spacing';
+    value: number | null;
+} | {
+    control: 'navHeight';
+    breakpoint: 'xs' | 'sm';
+    value: number | null;
+};
+/** The most edits one save may carry: every color of both schemes and the rest. */
+export declare const THEME_EDITOR_EDITS_MAX: number;
+/** One edit from a request body, or why it was refused. */
+export declare function readThemeEditorEdit(raw: unknown): ThemeEditorEdit | string;
+/** Every edit of a request body, or the first refusal. */
+export declare function readThemeEditorEdits(raw: unknown): ThemeEditorEdit[] | string;
+/** The theme with [edits] applied, in order, by the editor's own writers. */
+export declare function applyThemeEditorEdits(theme: HostTheme, edits: readonly ThemeEditorEdit[]): HostTheme;
+/** What each control shows for [theme]; an absent value inherits the platform's. */
+export interface ThemeEditorValues {
+    colors: Record<HostThemeScheme, Record<string, string | null>>;
+    darkScheme: 'auto' | 'off';
+    fontFamily: string;
+    borderRadius: number | null;
+    spacing: number | null;
+    navHeight: {
+        xs: number | null;
+        sm: number | null;
+    };
+}
+export declare function readThemeEditorValues(theme: HostTheme | undefined): ThemeEditorValues;
+/**
+ * The controls themselves, for a client that draws the editor from data:
+ * every color field, the font list, and each number's range and label.
+ */
+export declare const THEME_EDITOR_CATALOG: {
+    readonly schemes: readonly HostThemeScheme[];
+    readonly colors: readonly {
+        token: ThemeColorToken;
+        label: string;
+        group: import("./theme-editor-fields").ThemeColorGroup;
+    }[];
+    readonly darkScheme: {
+        readonly label: "Dark scheme";
+        readonly options: readonly [{
+            readonly value: "auto";
+            readonly label: "Follows the visitor";
+        }, {
+            readonly value: "off";
+            readonly label: "Off — always light";
+        }];
+    };
+    readonly systemFont: "__system__";
+    readonly fonts: {
+        family: string;
+        category: "sans-serif" | "serif" | "monospace" | "display";
+        weights: Array<number>;
+    }[];
+    readonly borderRadius: {
+        readonly label: "Border radius";
+        readonly min: 0;
+        readonly max: 24;
+        readonly step: 1;
+    };
+    readonly spacing: {
+        readonly label: "Spacing unit (px)";
+        readonly min: 2;
+        readonly max: 16;
+        readonly step: 1;
+    };
+    readonly navHeight: {
+        readonly xs: {
+            readonly label: "Nav height, mobile (px)";
+            readonly min: 40;
+            readonly max: 160;
+            readonly step: 1;
+        };
+        readonly sm: {
+            readonly label: "Nav height, desktop (px)";
+            readonly min: 40;
+            readonly max: 160;
+            readonly step: 1;
+        };
+    };
+};

package/src/lib/util/theme-editor-edits.js

@@ -0,0 +1,168 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */ import { BORDER_RADIUS_FIELD, DARK_SCHEME_FIELD, GOOGLE_FONT_OPTIONS, SPACING_FIELD, SYSTEM_FONT_VALUE, THEME_COLOR_FIELDS, THEME_EDITOR_SCHEMES, TOOLBAR_HEIGHT_FIELDS, readDarkScheme, readFontFamily, readThemeColor, readToolbarHeight, writeBorderRadius, writeDarkScheme, writeFontFamily, writeSpacing, writeThemeColor, writeToolbarHeight } from "./theme-editor-fields.js";
+/** The most edits one save may carry: every color of both schemes and the rest. */ export const THEME_EDITOR_EDITS_MAX = THEME_COLOR_FIELDS.length * 2 + 8;
+const HEX_COLOR = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+function readNumber(value, range) {
+    if (value === null || value === undefined || value === '') return null;
+    const parsed = typeof value === 'number' ? value : Number(value);
+    if (!Number.isFinite(parsed)) return 'Use a number.';
+    if (parsed < range.min || parsed > range.max) {
+        return `Use a number from ${range.min} to ${range.max}.`;
+    }
+    return parsed;
+}
+/** One edit from a request body, or why it was refused. */ export function readThemeEditorEdit(raw) {
+    if (!raw || typeof raw !== 'object' || Array.isArray(raw)) return 'That change could not be read.';
+    const edit = raw;
+    switch(edit['control']){
+        case 'color':
+            {
+                const scheme = edit['scheme'];
+                if (!THEME_EDITOR_SCHEMES.includes(scheme)) return 'Pick light or dark.';
+                const token = edit['token'];
+                if (!THEME_COLOR_FIELDS.some((field)=>field.token === token)) return 'That is not a theme color.';
+                const value = edit['value'];
+                if (value !== null && value !== undefined && value !== '' && (typeof value !== 'string' || !HEX_COLOR.test(value))) {
+                    return 'Use a hex color such as #1A73E8.';
+                }
+                return {
+                    control: 'color',
+                    scheme: scheme,
+                    token: token,
+                    value: typeof value === 'string' && value ? value : null
+                };
+            }
+        case 'darkScheme':
+            return edit['value'] === 'off' ? {
+                control: 'darkScheme',
+                value: 'off'
+            } : {
+                control: 'darkScheme',
+                value: 'auto'
+            };
+        case 'fontFamily':
+            {
+                const value = edit['value'];
+                if (value !== SYSTEM_FONT_VALUE && !GOOGLE_FONT_OPTIONS.some((option)=>option.family === value)) {
+                    return 'Pick a font from the list.';
+                }
+                return {
+                    control: 'fontFamily',
+                    value: value
+                };
+            }
+        case 'borderRadius':
+            {
+                const value = readNumber(edit['value'], BORDER_RADIUS_FIELD);
+                return typeof value === 'string' ? value : {
+                    control: 'borderRadius',
+                    value
+                };
+            }
+        case 'spacing':
+            {
+                const value = readNumber(edit['value'], SPACING_FIELD);
+                return typeof value === 'string' ? value : {
+                    control: 'spacing',
+                    value
+                };
+            }
+        case 'navHeight':
+            {
+                const breakpoint = edit['breakpoint'];
+                if (breakpoint !== 'xs' && breakpoint !== 'sm') return 'Pick mobile or desktop.';
+                const value = readNumber(edit['value'], TOOLBAR_HEIGHT_FIELDS[breakpoint]);
+                return typeof value === 'string' ? value : {
+                    control: 'navHeight',
+                    breakpoint,
+                    value
+                };
+            }
+        default:
+            return 'That is not a theme control.';
+    }
+}
+/** Every edit of a request body, or the first refusal. */ export function readThemeEditorEdits(raw) {
+    if (!Array.isArray(raw) || raw.length === 0) return 'Nothing to change.';
+    if (raw.length > THEME_EDITOR_EDITS_MAX) return 'Too many changes at once.';
+    const edits = [];
+    for (const entry of raw){
+        const edit = readThemeEditorEdit(entry);
+        if (typeof edit === 'string') return edit;
+        edits.push(edit);
+    }
+    return edits;
+}
+/** The theme with [edits] applied, in order, by the editor's own writers. */ export function applyThemeEditorEdits(theme, edits) {
+    let next = theme;
+    for (const edit of edits){
+        switch(edit.control){
+            case 'color':
+                var _edit_value;
+                next = writeThemeColor(next, edit.scheme, edit.token, (_edit_value = edit.value) != null ? _edit_value : undefined);
+                break;
+            case 'darkScheme':
+                next = writeDarkScheme(next, edit.value);
+                break;
+            case 'fontFamily':
+                next = writeFontFamily(next, edit.value);
+                break;
+            case 'borderRadius':
+                var _edit_value1;
+                next = writeBorderRadius(next, (_edit_value1 = edit.value) != null ? _edit_value1 : undefined);
+                break;
+            case 'spacing':
+                var _edit_value2;
+                next = writeSpacing(next, (_edit_value2 = edit.value) != null ? _edit_value2 : undefined);
+                break;
+            case 'navHeight':
+                var _edit_value3;
+                next = writeToolbarHeight(next, edit.breakpoint, (_edit_value3 = edit.value) != null ? _edit_value3 : undefined);
+                break;
+        }
+    }
+    return next;
+}
+export function readThemeEditorValues(theme) {
+    var _readToolbarHeight, _readToolbarHeight1;
+    var _safe_shape;
+    const safe = theme != null ? theme : {};
+    const colors = {};
+    for (const scheme of THEME_EDITOR_SCHEMES){
+        colors[scheme] = {};
+        for (const field of THEME_COLOR_FIELDS){
+            var _readThemeColor;
+            colors[scheme][field.token] = (_readThemeColor = readThemeColor(safe, scheme, field.token)) != null ? _readThemeColor : null;
+        }
+    }
+    const radius = (_safe_shape = safe.shape) == null ? void 0 : _safe_shape.borderRadius;
+    return {
+        colors,
+        darkScheme: readDarkScheme(safe),
+        fontFamily: readFontFamily(safe),
+        borderRadius: typeof radius === 'number' && Number.isFinite(radius) ? radius : null,
+        spacing: typeof safe.spacing === 'number' ? safe.spacing : null,
+        navHeight: {
+            xs: (_readToolbarHeight = readToolbarHeight(safe, 'xs')) != null ? _readToolbarHeight : null,
+            sm: (_readToolbarHeight1 = readToolbarHeight(safe, 'sm')) != null ? _readToolbarHeight1 : null
+        }
+    };
+}
+/**
+ * The controls themselves, for a client that draws the editor from data:
+ * every color field, the font list, and each number's range and label.
+ */ export const THEME_EDITOR_CATALOG = {
+    schemes: THEME_EDITOR_SCHEMES,
+    colors: THEME_COLOR_FIELDS,
+    darkScheme: DARK_SCHEME_FIELD,
+    systemFont: SYSTEM_FONT_VALUE,
+    fonts: GOOGLE_FONT_OPTIONS,
+    borderRadius: BORDER_RADIUS_FIELD,
+    spacing: SPACING_FIELD,
+    navHeight: TOOLBAR_HEIGHT_FIELDS
+};
+
+//# sourceMappingURL=theme-editor-edits.js.map

package/src/lib/util/theme-editor-edits.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/theme/src/lib/util/theme-editor-edits.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport type { HostTheme, HostThemeScheme } from '@aglyn/shared-data-types'\nimport {\n  BORDER_RADIUS_FIELD,\n  DARK_SCHEME_FIELD,\n  GOOGLE_FONT_OPTIONS,\n  SPACING_FIELD,\n  SYSTEM_FONT_VALUE,\n  THEME_COLOR_FIELDS,\n  THEME_EDITOR_SCHEMES,\n  TOOLBAR_HEIGHT_FIELDS,\n  readDarkScheme,\n  readFontFamily,\n  readThemeColor,\n  readToolbarHeight,\n  writeBorderRadius,\n  writeDarkScheme,\n  writeFontFamily,\n  writeSpacing,\n  writeThemeColor,\n  writeToolbarHeight,\n  type ThemeColorToken,\n} from './theme-editor-fields'\n\n/*\n * THE THEME EDITOR'S CONTROLS AS EDITS (AGL-3668).\n *\n * The console's theme section edits the resolved theme in the browser with\n * the writers in `theme-editor-fields.ts` and saves the difference from the\n * picked theme as the site's override. A native app sends the same controls\n * as named edits instead — one color for one scheme, the font, the radius,\n * the spacing unit, a nav height, the dark scheme — and `/api/hosts/theme`\n * applies them here with those same writers, so both clients make exactly the\n * same theme from the same choice. `readThemeEditorValues` is the other half:\n * what each control currently shows.\n */\n\n/** One control's change; a null value clears it back to the theme's own. */\nexport type ThemeEditorEdit =\n  | { control: 'color'; scheme: HostThemeScheme; token: ThemeColorToken; value: string | null }\n  | { control: 'darkScheme'; value: 'auto' | 'off' }\n  | { control: 'fontFamily'; value: string }\n  | { control: 'borderRadius'; value: number | null }\n  | { control: 'spacing'; value: number | null }\n  | { control: 'navHeight'; breakpoint: 'xs' | 'sm'; value: number | null }\n\n/** The most edits one save may carry: every color of both schemes and the rest. */\nexport const THEME_EDITOR_EDITS_MAX = THEME_COLOR_FIELDS.length * 2 + 8\n\nconst HEX_COLOR = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/\n\nfunction readNumber(\n  value: unknown,\n  range: { min: number; max: number },\n): number | null | string {\n  if (value === null || value === undefined || value === '') return null\n  const parsed = typeof value === 'number' ? value : Number(value)\n  if (!Number.isFinite(parsed)) return 'Use a number.'\n  if (parsed < range.min || parsed > range.max) {\n    return `Use a number from ${range.min} to ${range.max}.`\n  }\n  return parsed\n}\n\n/** One edit from a request body, or why it was refused. */\nexport function readThemeEditorEdit(raw: unknown): ThemeEditorEdit | string {\n  if (!raw || typeof raw !== 'object' || Array.isArray(raw)) return 'That change could not be read.'\n  const edit = raw as Record<string, unknown>\n  switch (edit['control']) {\n    case 'color': {\n      const scheme = edit['scheme']\n      if (!THEME_EDITOR_SCHEMES.includes(scheme as HostThemeScheme)) return 'Pick light or dark.'\n      const token = edit['token']\n      if (!THEME_COLOR_FIELDS.some((field) => field.token === token)) return 'That is not a theme color.'\n      const value = edit['value']\n      if (value !== null && value !== undefined && value !== '' && (typeof value !== 'string' || !HEX_COLOR.test(value))) {\n        return 'Use a hex color such as #1A73E8.'\n      }\n      return {\n        control: 'color',\n        scheme: scheme as HostThemeScheme,\n        token: token as ThemeColorToken,\n        value: typeof value === 'string' && value ? value : null,\n      }\n    }\n    case 'darkScheme':\n      return edit['value'] === 'off' ? { control: 'darkScheme', value: 'off' } : { control: 'darkScheme', value: 'auto' }\n    case 'fontFamily': {\n      const value = edit['value']\n      if (value !== SYSTEM_FONT_VALUE && !GOOGLE_FONT_OPTIONS.some((option) => option.family === value)) {\n        return 'Pick a font from the list.'\n      }\n      return { control: 'fontFamily', value: value as string }\n    }\n    case 'borderRadius': {\n      const value = readNumber(edit['value'], BORDER_RADIUS_FIELD)\n      return typeof value === 'string' ? value : { control: 'borderRadius', value }\n    }\n    case 'spacing': {\n      const value = readNumber(edit['value'], SPACING_FIELD)\n      return typeof value === 'string' ? value : { control: 'spacing', value }\n    }\n    case 'navHeight': {\n      const breakpoint = edit['breakpoint']\n      if (breakpoint !== 'xs' && breakpoint !== 'sm') return 'Pick mobile or desktop.'\n      const value = readNumber(edit['value'], TOOLBAR_HEIGHT_FIELDS[breakpoint])\n      return typeof value === 'string' ? value : { control: 'navHeight', breakpoint, value }\n    }\n    default:\n      return 'That is not a theme control.'\n  }\n}\n\n/** Every edit of a request body, or the first refusal. */\nexport function readThemeEditorEdits(raw: unknown): ThemeEditorEdit[] | string {\n  if (!Array.isArray(raw) || raw.length === 0) return 'Nothing to change.'\n  if (raw.length > THEME_EDITOR_EDITS_MAX) return 'Too many changes at once.'\n  const edits: ThemeEditorEdit[] = []\n  for (const entry of raw) {\n    const edit = readThemeEditorEdit(entry)\n    if (typeof edit === 'string') return edit\n    edits.push(edit)\n  }\n  return edits\n}\n\n/** The theme with [edits] applied, in order, by the editor's own writers. */\nexport function applyThemeEditorEdits(theme: HostTheme, edits: readonly ThemeEditorEdit[]): HostTheme {\n  let next = theme\n  for (const edit of edits) {\n    switch (edit.control) {\n      case 'color':\n        next = writeThemeColor(next, edit.scheme, edit.token, edit.value ?? undefined)\n        break\n      case 'darkScheme':\n        next = writeDarkScheme(next, edit.value)\n        break\n      case 'fontFamily':\n        next = writeFontFamily(next, edit.value)\n        break\n      case 'borderRadius':\n        next = writeBorderRadius(next, edit.value ?? undefined)\n        break\n      case 'spacing':\n        next = writeSpacing(next, edit.value ?? undefined)\n        break\n      case 'navHeight':\n        next = writeToolbarHeight(next, edit.breakpoint, edit.value ?? undefined)\n        break\n    }\n  }\n  return next\n}\n\n/** What each control shows for [theme]; an absent value inherits the platform's. */\nexport interface ThemeEditorValues {\n  colors: Record<HostThemeScheme, Record<string, string | null>>\n  darkScheme: 'auto' | 'off'\n  fontFamily: string\n  borderRadius: number | null\n  spacing: number | null\n  navHeight: { xs: number | null; sm: number | null }\n}\n\nexport function readThemeEditorValues(theme: HostTheme | undefined): ThemeEditorValues {\n  const safe = theme ?? {}\n  const colors = {} as Record<HostThemeScheme, Record<string, string | null>>\n  for (const scheme of THEME_EDITOR_SCHEMES) {\n    colors[scheme] = {}\n    for (const field of THEME_COLOR_FIELDS) {\n      colors[scheme][field.token] = readThemeColor(safe, scheme, field.token) ?? null\n    }\n  }\n  const radius = safe.shape?.borderRadius\n  return {\n    colors,\n    darkScheme: readDarkScheme(safe),\n    fontFamily: readFontFamily(safe),\n    borderRadius: typeof radius === 'number' && Number.isFinite(radius) ? radius : null,\n    spacing: typeof safe.spacing === 'number' ? safe.spacing : null,\n    navHeight: {\n      xs: readToolbarHeight(safe, 'xs') ?? null,\n      sm: readToolbarHeight(safe, 'sm') ?? null,\n    },\n  }\n}\n\n/**\n * The controls themselves, for a client that draws the editor from data:\n * every color field, the font list, and each number's range and label.\n */\nexport const THEME_EDITOR_CATALOG = {\n  schemes: THEME_EDITOR_SCHEMES,\n  colors: THEME_COLOR_FIELDS,\n  darkScheme: DARK_SCHEME_FIELD,\n  systemFont: SYSTEM_FONT_VALUE,\n  fonts: GOOGLE_FONT_OPTIONS,\n  borderRadius: BORDER_RADIUS_FIELD,\n  spacing: SPACING_FIELD,\n  navHeight: TOOLBAR_HEIGHT_FIELDS,\n} as const\n"],"names":["BORDER_RADIUS_FIELD","DARK_SCHEME_FIELD","GOOGLE_FONT_OPTIONS","SPACING_FIELD","SYSTEM_FONT_VALUE","THEME_COLOR_FIELDS","THEME_EDITOR_SCHEMES","TOOLBAR_HEIGHT_FIELDS","readDarkScheme","readFontFamily","readThemeColor","readToolbarHeight","writeBorderRadius","writeDarkScheme","writeFontFamily","writeSpacing","writeThemeColor","writeToolbarHeight","THEME_EDITOR_EDITS_MAX","length","HEX_COLOR","readNumber","value","range","undefined","parsed","Number","isFinite","min","max","readThemeEditorEdit","raw","Array","isArray","edit","scheme","includes","token","some","field","test","control","option","family","breakpoint","readThemeEditorEdits","edits","entry","push","applyThemeEditorEdits","theme","next","readThemeEditorValues","safe","colors","radius","shape","borderRadius","darkScheme","fontFamily","spacing","navHeight","xs","sm","THEME_EDITOR_CATALOG","schemes","systemFont","fonts"],"mappings":"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"}

package/src/lib/util/theme-editor-fields.d.ts

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { HostTheme, HostThemeScheme, HostThemeSchemeColors } from '@aglyn/shared-data-types';
+import type { HostTheme, HostThemeFontCategory, HostThemeTypographyVariantKey, HostThemeScheme, HostThemeSchemeColors } from '@aglyn/shared-data-types';
 import { type HostThemeComponentKey } from './host-theme';
 /**
  * The host theme editor's field catalog (AGL-2938): every control the editor
@@ -140,7 +140,7 @@ export declare const GOOGLE_FONT_OPTIONS: Array<{
     category: 'sans-serif' | 'serif' | 'monospace' | 'display';
     weights: Array<number>;
 }>;
-export declare function fontFamilyStack(family: string, category: (typeof GOOGLE_FONT_OPTIONS)[number]['category']): string;
+export declare function fontFamilyStack(family: string, category: HostThemeFontCategory): string;
 export declare function getSchemeColor(colors: HostThemeSchemeColors | undefined, path: SurfaceColorPath): string | undefined;
 /** The two color schemes the editor edits, in tab order. */
 export declare const THEME_EDITOR_SCHEMES: readonly HostThemeScheme[];
@@ -277,6 +277,57 @@ export declare function readFontFamily(theme: HostTheme | undefined): string;
  * theme default. A family outside the curated list changes nothing.
  */
 export declare function writeFontFamily(theme: HostTheme, value: string): HostTheme;
+/**
+ * The text styles a separate heading font is set on: `h1`…`h6`, and
+ * `displayXl`, the platform's rung above `h1`, which a heading font left off
+ * would draw in the body font — and load the body font's heaviest weight for.
+ */
+export declare const THEME_HEADING_VARIANTS: readonly HostThemeTypographyVariantKey[];
+/**
+ * One family a theme sets text in, as the font picker shows and writes it
+ * (AGL-3656): a `fonts` entry and the role it plays.
+ */
+export interface ThemeFontChoice {
+    family: string;
+    category: HostThemeFontCategory;
+    /** Upright weights to load, ascending. */
+    weights: number[];
+    /** Italic weights to load, ascending; absent or empty for none. */
+    italics?: number[];
+    source: 'google' | 'custom';
+}
+/**
+ * The theme's body font and, when it differs, its heading font. `null` is the
+ * theme default: the base stack, nothing loaded.
+ */
+export interface ThemeFontSelection {
+    body: ThemeFontChoice | null;
+    heading: ThemeFontChoice | null;
+}
+/** The first family a CSS font-family stack names, unquoted. */
+export declare function firstStackFamily(stack: unknown): string | undefined;
+/**
+ * The body and heading fonts a theme sets text in (AGL-3656).
+ *
+ * The body font is the family the theme-wide stack names first, when the
+ * theme loads it: a font the theme lists that no stack names draws nothing,
+ * which is what the theme default is. The heading font is the family `h1`
+ * names, when that is a loaded font other than the body's.
+ */
+export declare function readThemeFonts(theme: HostTheme | undefined): ThemeFontSelection;
+/**
+ * Sets the theme's body and heading fonts (AGL-3656): the `fonts` entries the
+ * page loads, the theme-wide stack, and the stack of each style in
+ * {@link THEME_HEADING_VARIANTS} for a heading font of its own. `null` goes
+ * back to the theme default for that role.
+ *
+ * An uploaded (`custom`) font the theme lists but no longer sets text in is
+ * kept, because it is the site's own and is picked again from the list; a
+ * Google font nothing sets text in any more is dropped, so the page stops
+ * loading it. Everything else in the typography — sizes, weights, a variant's own
+ * family that is not a heading — is left as it was.
+ */
+export declare function writeThemeFonts(theme: HostTheme, selection: ThemeFontSelection): HostTheme;
 /** Sets the corner radius, or clears it with `undefined` so it inherits. */
 export declare function writeBorderRadius(theme: HostTheme, value: number | undefined): HostTheme;
 /** Sets the spacing unit; anything but a positive number clears it. */

package/src/lib/util/theme-editor-fields.js

@@ -596,38 +596,189 @@ export const FONT_FAMILY_FIELD = {
 }
 /** The font select's value: the site's font, or {@link SYSTEM_FONT_VALUE}. */ export function readFontFamily(theme) {
     var _ref;
-    var _theme_fonts_, _theme_fonts;
-    return (_ref = theme == null ? void 0 : (_theme_fonts = theme.fonts) == null ? void 0 : (_theme_fonts_ = _theme_fonts[0]) == null ? void 0 : _theme_fonts_.family) != null ? _ref : SYSTEM_FONT_VALUE;
+    var _readThemeFonts_body;
+    return (_ref = (_readThemeFonts_body = readThemeFonts(theme).body) == null ? void 0 : _readThemeFonts_body.family) != null ? _ref : SYSTEM_FONT_VALUE;
 }
 /**
  * Picks a font from {@link GOOGLE_FONT_OPTIONS}, loading it and naming it as
  * the typography's stack, or {@link SYSTEM_FONT_VALUE} to go back to the
  * theme default. A family outside the curated list changes nothing.
  */ export function writeFontFamily(theme, value) {
+    // Through writeThemeFonts (AGL-3656), so a heading font and the site's own
+    // uploaded fonts survive a body font picked from the short list or by the
+    // AI theme step; replacing `fonts` wholesale dropped both.
+    const current = readThemeFonts(theme);
     if (value === SYSTEM_FONT_VALUE) {
-        const next = _extends({}, theme);
-        delete next.fonts;
-        const typography = _extends({}, next.typography);
-        delete typography.fontFamily;
-        if (Object.keys(typography).length) next.typography = typography;
-        else delete next.typography;
-        return next;
+        return writeThemeFonts(theme, {
+            body: null,
+            heading: current.heading
+        });
     }
     const option = GOOGLE_FONT_OPTIONS.find((entry)=>entry.family === value);
     if (!option) return theme;
-    return _extends({}, theme, {
-        fonts: [
-            {
-                family: option.family,
-                weights: option.weights,
-                source: 'google'
-            }
-        ],
-        typography: _extends({}, theme.typography, {
-            fontFamily: fontFamilyStack(option.family, option.category)
-        })
+    return writeThemeFonts(theme, {
+        body: {
+            family: option.family,
+            category: option.category,
+            weights: option.weights,
+            source: 'google'
+        },
+        heading: current.heading
+    });
+}
+/**
+ * The text styles a separate heading font is set on: `h1`…`h6`, and
+ * `displayXl`, the platform's rung above `h1`, which a heading font left off
+ * would draw in the body font — and load the body font's heaviest weight for.
+ */ export const THEME_HEADING_VARIANTS = [
+    'displayXl',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6'
+];
+/** The first family a CSS font-family stack names, unquoted. */ export function firstStackFamily(stack) {
+    var _stack_split_;
+    if (typeof stack !== 'string') return undefined;
+    const first = (_stack_split_ = stack.split(',')[0]) == null ? void 0 : _stack_split_.trim().replace(/^["']|["']$/g, '').trim();
+    return first || undefined;
+}
+/** The category a stack's generic keyword names, for a font that records none. */ function stackCategory(stack) {
+    if (typeof stack !== 'string') return 'sans-serif';
+    if (/\bmonospace\b/i.test(stack)) return 'monospace';
+    if (/(^|,)\s*serif\b/i.test(stack)) return 'serif';
+    return 'sans-serif';
+}
+function sortedWeights(values) {
+    return [
+        ...new Set((values != null ? values : []).map((value)=>Math.round(Number(value))).filter((value)=>Number.isFinite(value) && value >= 1 && value <= 1000))
+    ].sort((a, b)=>a - b);
+}
+function choiceOf(font, stack) {
+    var _font_category;
+    const italics = sortedWeights(font.italics);
+    return _extends({
+        family: font.family.trim(),
+        category: (_font_category = font.category) != null ? _font_category : stackCategory(stack),
+        weights: sortedWeights(font.weights).length ? sortedWeights(font.weights) : [
+            400
+        ]
+    }, italics.length ? {
+        italics
+    } : {}, {
+        source: font.source === 'custom' ? 'custom' : 'google'
+    });
+}
+function findFont(theme, family) {
+    var _theme_fonts;
+    if (!family) return undefined;
+    const wanted = family.toLowerCase();
+    return theme == null ? void 0 : (_theme_fonts = theme.fonts) == null ? void 0 : _theme_fonts.find((font)=>{
+        var _font_source;
+        var _font_family;
+        return ((_font_family = font.family) == null ? void 0 : _font_family.trim().toLowerCase()) === wanted && ((_font_source = font.source) != null ? _font_source : 'google') !== 'system';
     });
 }
+/**
+ * The body and heading fonts a theme sets text in (AGL-3656).
+ *
+ * The body font is the family the theme-wide stack names first, when the
+ * theme loads it: a font the theme lists that no stack names draws nothing,
+ * which is what the theme default is. The heading font is the family `h1`
+ * names, when that is a loaded font other than the body's.
+ */ export function readThemeFonts(theme) {
+    var _theme_typography, _theme_typography_variants_h1, _theme_typography_variants, _theme_typography1;
+    const stack = theme == null ? void 0 : (_theme_typography = theme.typography) == null ? void 0 : _theme_typography.fontFamily;
+    const bodyFont = findFont(theme, firstStackFamily(stack));
+    const headingStack = theme == null ? void 0 : (_theme_typography1 = theme.typography) == null ? void 0 : (_theme_typography_variants = _theme_typography1.variants) == null ? void 0 : (_theme_typography_variants_h1 = _theme_typography_variants.h1) == null ? void 0 : _theme_typography_variants_h1.fontFamily;
+    const headingFont = findFont(theme, firstStackFamily(headingStack));
+    return {
+        body: bodyFont ? choiceOf(bodyFont, stack) : null,
+        heading: headingFont && headingFont !== bodyFont ? choiceOf(headingFont, headingStack) : null
+    };
+}
+function fontEntry(choice) {
+    const italics = sortedWeights(choice.italics);
+    return _extends({
+        family: choice.family.trim(),
+        weights: sortedWeights(choice.weights).length ? sortedWeights(choice.weights) : [
+            400
+        ]
+    }, italics.length ? {
+        italics
+    } : {}, {
+        source: choice.source,
+        category: choice.category
+    });
+}
+/**
+ * Sets the theme's body and heading fonts (AGL-3656): the `fonts` entries the
+ * page loads, the theme-wide stack, and the stack of each style in
+ * {@link THEME_HEADING_VARIANTS} for a heading font of its own. `null` goes
+ * back to the theme default for that role.
+ *
+ * An uploaded (`custom`) font the theme lists but no longer sets text in is
+ * kept, because it is the site's own and is picked again from the list; a
+ * Google font nothing sets text in any more is dropped, so the page stops
+ * loading it. Everything else in the typography — sizes, weights, a variant's own
+ * family that is not a heading — is left as it was.
+ */ export function writeThemeFonts(theme, selection) {
+    var _ref, _theme_fonts;
+    var _theme_typography_variants_h1, _theme_typography_variants, _theme_typography, _theme_typography1;
+    const body = selection.body;
+    const heading = selection.heading && (!body || selection.heading.family.toLowerCase() !== body.family.toLowerCase()) ? selection.heading : null;
+    const previous = readThemeFonts(theme);
+    const previousHeadingStack = previous.heading ? (_theme_typography = theme.typography) == null ? void 0 : (_theme_typography_variants = _theme_typography.variants) == null ? void 0 : (_theme_typography_variants_h1 = _theme_typography_variants.h1) == null ? void 0 : _theme_typography_variants_h1.fontFamily : undefined;
+    const chosen = [
+        body,
+        heading
+    ].filter((entry)=>!!entry);
+    const chosenKeys = new Set(chosen.map((entry)=>entry.family.trim().toLowerCase()));
+    // Families a text style other than a heading still names, by hand or by
+    // an earlier editor: they keep loading, as their style keeps drawing them.
+    const otherStyles = new Set(Object.entries((_ref = (_theme_typography1 = theme.typography) == null ? void 0 : _theme_typography1.variants) != null ? _ref : {}).filter(([key])=>!THEME_HEADING_VARIANTS.includes(key)).map(([, variant])=>{
+        var _firstStackFamily;
+        return (_firstStackFamily = firstStackFamily(variant == null ? void 0 : variant.fontFamily)) == null ? void 0 : _firstStackFamily.toLowerCase();
+    }).filter((family)=>!!family));
+    const kept = ((_theme_fonts = theme.fonts) != null ? _theme_fonts : []).filter((font)=>{
+        var _ref;
+        var _font_family;
+        const key = (_ref = (_font_family = font.family) == null ? void 0 : _font_family.trim().toLowerCase()) != null ? _ref : '';
+        if (!key || chosenKeys.has(key)) return false;
+        return font.source === 'custom' || otherStyles.has(key);
+    });
+    const fonts = [
+        ...chosen.map(fontEntry),
+        ...kept
+    ];
+    const typography = _extends({}, theme.typography);
+    if (body) typography.fontFamily = fontFamilyStack(body.family.trim(), body.category);
+    else delete typography.fontFamily;
+    const variants = _extends({}, typography.variants);
+    for (const key of THEME_HEADING_VARIANTS){
+        const variant = _extends({}, variants[key]);
+        if (heading) {
+            variant.fontFamily = fontFamilyStack(heading.family.trim(), heading.category);
+        } else if (variant.fontFamily !== undefined && (variant.fontFamily === previousHeadingStack || !findFont({
+            fonts
+        }, firstStackFamily(variant.fontFamily)))) {
+            // The heading font this theme had, or a family it no longer loads.
+            delete variant.fontFamily;
+        }
+        if (Object.keys(variant).length) variants[key] = variant;
+        else delete variants[key];
+    }
+    if (Object.keys(variants).length) typography.variants = variants;
+    else delete typography.variants;
+    const next = _extends({}, theme);
+    if (fonts.length) next.fonts = fonts;
+    else delete next.fonts;
+    if (Object.keys(typography).length) next.typography = typography;
+    else delete next.typography;
+    return next;
+}
 /** Sets the corner radius, or clears it with `undefined` so it inherits. */ export function writeBorderRadius(theme, value) {
     if (value !== undefined && Number.isFinite(value)) {
         return _extends({}, theme, {