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/BandSettings.tsx

@@ -3,6 +3,7 @@ import { Input } from '@/components/ui/input';
 import { useClient } from 'hooks/useClient';
 import { readableError } from '../errors';
 import { useAutosave } from '../useAutosave';
+import { TitleSize } from './TitleSize';
 import { useFlash } from '../useFlash';
 
 /**
@@ -26,7 +27,7 @@ export const BandSettings = ({
   blocks,
 }: {
   pageId: number;
-  band: { id: number; name: string; title?: string | null; divider?: boolean };
+  band: { id: number; name: string; title?: string | null; title_size?: string | null; divider?: boolean };
   /** The builder re-reads its sections: the nav's row is this name, and the page draws this title. */
   onSaved: () => void;
   /** This band's blocks — `BandBlocks`, built by the panel that has the handlers. */
@@ -94,6 +95,18 @@ export const BandSettings = ({
         />
       </div>
 
+      {/* Beside the heading it sizes. Its own request, like the rule below — a select has one value and
+          nothing to debounce. */}
+      <TitleSize
+        value={band.title_size}
+        disabled={!draft.title.trim()}
+        onChange={(next) => {
+          void client
+            .patch(`/fofos-admin/pages/${pageId}/sections/${band.id}`, { title_size: next ?? '' })
+            .then(onSaved);
+        }}
+      />
+
       {/*
         Written on its own rather than through the draft, because it is a switch: there is nothing to
         debounce and waiting 600ms to see a line disappear reads as the control not working.