a heading can say which type role it is

Every heading — a band's and a block's — was `type-title`, so the only way to make one bigger was to
resize Headings for the whole site.

A ROLE rather than a size. The four are named and sized under Layout, so a heading set to Titles
follows whatever Titles is set to and keeps following it. Offering point sizes here would be a second
place to change one, and the two would part company the first time somebody used the panel that exists
for it. Same `ROLES` list Fonts and Font Sizes read, so all three name the same four things in the same
order.

Choosing Headings stores nothing. A heading nobody has thought about and one deliberately set to the
default should not be two different rows.

Disabled with no heading, because the size of a heading that does not exist is not a question — and
written on its own rather than through the draft, because a select has one value and waiting 600ms to
watch a heading change size reads as a control that has not responded.

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

web/sections/BlockSettings.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { Input } from '@/components/ui/input';
+import { TitleSize } from './TitleSize';
 import { useClient } from 'hooks/useClient';
 import { readableError } from '../errors';
 import { useAutosave } from '../useAutosave';
@@ -30,6 +31,7 @@ export const BlockSettings = ({
   block: {
     id: number;
     title?: string | null;
+    title_size?: string | null;
     width?: string | null;
     padding?: Record<string, { x?: number; y?: number }>;
   };
@@ -83,14 +85,22 @@ export const BlockSettings = ({
     setDraft((was) => ({ ...was, padding: next }));
   };
 
-  const save = async () => {
+  /**
+   * @param extra Fields written alongside the draft, for controls that are not part of it.
+   *
+   * The heading SIZE is one: a select has a single value and nothing to debounce, so waiting 600ms to
+   * watch a heading change size would read as a control that has not responded. It still goes through
+   * this function rather than its own request, so the draft is not left behind by a write that
+   * happened next to it.
+   */
+  const save = async (extra?: Record<string, unknown>) => {
     setBusy(true);
     setError(null);
     try {
       // Empty is sent as an empty string, which the API reads as "take the heading off".
       await clientRef.current.patch(
         `/fofos-admin/pages/${pageId}/sections/${sectionId}/components/${block.id}`,
-        { title: draft.title, width: draft.width || null, padding: draft.padding },
+        { title: draft.title, width: draft.width || null, padding: draft.padding, ...extra },
       );
       flashSaved();
       onSaved();
@@ -124,6 +134,15 @@ export const BlockSettings = ({
         }}
       />
 
+      {/* Beside the heading it sizes. Its own request rather than part of the draft: a select has one
+          value and nothing to debounce, and waiting to see a heading change size reads as a control
+          that has not responded. */}
+      <TitleSize
+        value={block.title_size}
+        disabled={!draft.title.trim()}
+        onChange={(next) => void save({ title_size: next ?? '' })}
+      />
+
       {/*
         How wide it is allowed to be.