@morphemecms/cms 0.5.0 → 0.7.0

package/theme/ui/Search.tsx

@@ -1,7 +1,7 @@
 // A search (m3.material.io/components/search, .search in ../styles/ui.css): the search bar (its leading icon,
 // `leadingIcon`, the theme's magnifying glass if it has none, the placeholder, `label`, and what stands after it,
 // `trailing`: icon buttons, an avatar) and the search view it opens (a <dialog>: over the whole screen on a phone, docked
-// where the bar is from 48rem), with the button back (`backLabel`), the field (a role="combobox"), the button that
+// where the bar is from the medium breakpoint), with the button back (`backLabel`), the field (a role="combobox"), the button that
 // empties it (`clearLabel`), and the results (`results`, the theme's list, List and ListItem, as a role="listbox" of
 // links, each its headline, evt. its supporting text and its icon) or, when none fits, `emptyText`. On the site
 // search.script.ts opens and closes it (the back button, Escape, a tap outside), narrows the results to what is

package/theme/ui/SettingRow.tsx

@@ -0,0 +1,31 @@
+// A setting's row (.setting-row in ../styles/ui.css): its name (`label`) and a line under it (`supporting`) at the left,
+// and at the right whatever sets it (`children`: the switch's track, a dropdown button), all on one line, centred on it.
+// Switch.tsx and the editor's MenuRow are both made of it, so the two can never drift. `as`: the element, a <label>
+// for a switch (a click anywhere switches it), else a <div>; without a `label` only `children` show; `className` goes on it.
+import type { ElementType, ReactNode } from 'react';
+
+export default function SettingRow({
+  label,
+  supporting,
+  as: Tag = 'div',
+  className,
+  children,
+}: {
+  label: ReactNode;
+  supporting?: ReactNode;
+  as?: ElementType;
+  className?: string;
+  children?: ReactNode;
+}) {
+  return (
+    <Tag className={['setting-row', className].filter(Boolean).join(' ')}>
+      {label != null && (
+        <span className="setting-row-text">
+          <span className="setting-row-label">{label}</span>
+          {supporting && <span className="setting-row-supporting">{supporting}</span>}
+        </span>
+      )}
+      {children}
+    </Tag>
+  );
+}

package/theme/ui/Switch.tsx

@@ -1,6 +1,6 @@
-// A switch (m3.material.io/components/switch, .switch in ../styles/ui.css): its name (`label`) and a line under the
-// name (`supporting`), and after them the track with its handle, all of it one <label>, so a click anywhere switches
-// it; the switch is a native <input type="checkbox" role="switch">, so Space switches it and screen readers say
+// A switch (m3.material.io/components/switch, .switch in ../styles/ui.css): a SettingRow (SettingRow.tsx) with its name
+// (`label`) and a line under it (`supporting`), and after them the track with its handle, all of it one <label>, so a
+// click anywhere switches it; the switch is a native <input type="checkbox" role="switch">, so Space switches it and screen readers say
 // "on"/"off". `icons`: the theme's icons in the handle, 'both' (a check when it is on, a cross when it is off) or
 // 'selected' (only the check); none without it. `checked`: on from the start, or, with `onChange` (the editor), whether
 // it is on now; `disabled`: it cannot be changed. `states`: what it is on and off ("Til", "Fra"), shown before the
@@ -9,6 +9,7 @@
 // label. An Astro component gives an element the same classes with switchClass.
 import type { ReactNode } from 'react';
 import { Svg } from '@morphemecms/cms/src/icon';
+import SettingRow from './SettingRow';
 
 export type SwitchIcons = 'both' | 'selected';
 
@@ -36,13 +37,12 @@ export default function Switch({
   // Changed by the editor (onChange): on as it says; else on from the start, then by the visitor.
   const on = rest.onChange ? { checked: Boolean(checked) } : { defaultChecked: checked };
   return (
-    <label className={[switchClass(icons), className].filter(Boolean).join(' ')}>
-      {!hideLabel && (
-        <span className="switch-text">
-          <span className="switch-label">{label}</span>
-          {supporting && <span className="switch-supporting">{supporting}</span>}
-        </span>
-      )}
+    <SettingRow
+      as="label"
+      className={[switchClass(icons), className].filter(Boolean).join(' ')}
+      label={hideLabel ? null : label}
+      supporting={hideLabel ? null : supporting}
+    >
       {states && (
         <span className="switch-state" aria-hidden="true">
           {states[checked ? 0 : 1]}
@@ -55,6 +55,6 @@ export default function Switch({
           {icons === 'both' && <Svg name="x" size={16} className="switch-icon switch-icon-off" />}
         </span>
       </span>
-    </label>
+    </SettingRow>
   );
 }

package/theme/ui/TextField.tsx

@@ -196,16 +196,19 @@ export default function TextField({
   );
 }
 
-/** A field that is tapped to choose (the editor's choice from a list, which opens its own sheet, or with `href` a page
- * with the choices): the text field (its kind and its look) with a button, or a link, in its container showing what is
- * chosen (`children`), its name on its edge (`label`; without it, it is named by `aria-label`), an icon at its end
- * (`trailingIcon`: caret-down, the default, or the arrow to a page), and the line under it (`supporting`) or what is
- * wrong (`error`). Other attributes (onClick, aria-…) go on the button, and `className` on the field around it. */
+/** A field that is tapped to choose (the editor's choice from a list, which opens its own sheet or a menu under it, or
+ * with `href` a page with the choices): the text field (its kind and its look) with a button, or a link, in its container
+ * showing what is chosen (`children`), its name on its edge (`label`; without it, it is named by `aria-label`), an icon at
+ * its end (`trailingIcon`: caret-down, the default, or the arrow to a page), and the line under it (`supporting`) or what
+ * is wrong (`error`). `size="small"`: a small box, as wide as what is chosen, for a row's choice (a setting's, the
+ * editor's MenuRow). While its menu is open (aria-expanded on the button) its edge and name are in the accent and the
+ * arrow points up. Other attributes (onClick, aria-…) go on the button, and `className` on the field around it. */
 export function TextFieldButton({
   label,
   supporting,
   error,
   kind,
+  size,
   href,
   trailingIcon = 'caret-down',
   id,
@@ -217,6 +220,7 @@ export function TextFieldButton({
   supporting?: ReactNode;
   error?: string | boolean;
   kind?: TextFieldKind;
+  size?: 'small';
   href?: string;
   trailingIcon?: IconRef;
   id?: string;
@@ -229,7 +233,14 @@ export function TextFieldButton({
   const described = line ? `${field}-supporting` : undefined;
   return (
     <div
-      className={[textFieldClass(kind, !!error), label === undefined && 'text-field-without-label', className].filter(Boolean).join(' ')}
+      className={[
+        textFieldClass(kind, !!error),
+        label === undefined && 'text-field-without-label',
+        size === 'small' && 'text-field-small',
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
     >
       <div className={textFieldContainerClass}>
         {href === undefined ? (

package/theme/ui/bottomSheet.script.ts

@@ -1,6 +1,7 @@
 // What a standard bottom sheet (BottomSheet.tsx with kind 'standard') does on the site: it can be dragged between its
-// states and tapped open and closed (standardBottomSheet in bottomSheetControl.ts). Run on every page by the theme's Base.astro
-// (blockScripts, packages/editor/site/blockScripts.ts); without a standard bottom sheet on the page it does nothing.
+// states and tapped to step through them (standardBottomSheet in bottomSheetControl.ts).
+// Run on every page by the theme's Base.astro (blockScripts, packages/editor/site/blockScripts.ts); without a standard
+// bottom sheet on the page it does nothing.
 import { standardBottomSheet } from '@theme/ui/bottomSheetControl';
 
 export default function bottomSheets() {

package/theme/ui/bottomSheetControl.ts

@@ -1,21 +1,39 @@
 // What a bottom sheet (BottomSheet.tsx) does in a browser.
-// A modal one (in its <dialog> with bottomSheetClass), for the script that shows it (an app's: Calendly's
-// Sheet.astro): bottomSheet(dialog) gives it its open() and close(). Native <dialog>:
-// focus handling, Escape and screen readers work out of the box. Motion: on a phone it slides up and down (a state
-// transition) and its drag handle can be pulled down to close it (feedback), on a computer (from 48rem, a dialog in the
-// middle of the screen) it fades; with reduced motion it appears and disappears at once. Its close button, Escape and a
-// tap on the scrim (outside it) close it; the page under it does not scroll while it is open. It moves with the site's
-// motion scheme (motionSpring, @morphemecms/cms/lib/motion.ts).
-// A standard one (kind 'standard', at the bottom of the screen without a scrim; bottomSheet.script.ts on every page,
-// or a block's or an app's script that wants its controls): standardBottomSheet(sheet) lets it be dragged by its handle
-// and its header between the states it rests in (collapsed, half-expanded where that is clearly between the others,
-// expanded, and hidden when it has a close button), to the nearest when let go, or on to the next when it is flicked;
-// a tap on the handle (or Enter or Space on it) expands it when it is collapsed and collapses it otherwise, and its close
-// button hides it. How high each state is, is ui.css's (data-state), read without being painted, so a theme sets it
-// there. It gives its state() and set(state) to show it in another (also again after it is hidden). The height follows
-// with the site's motion scheme; with reduced motion it changes at once.
+// A modal one (in its <dialog> with bottomSheetClass), for the script that shows it (an app's: Calendly's Sheet.astro):
+// bottomSheet(dialog) gives it its open() and close(). Native <dialog>: focus handling, Escape and screen readers work
+// out of the box. Motion: on a phone it slides up and down (a state transition); it opens at its start height
+// (BottomSheet's `startAt`, half the screen without it), is pulled up to full height and pulled down to close by its
+// handle, its header or its content (modalSheetSize.ts; the editor's sheets, with bottomSheetFitClass or
+// bottomSheetFullClass, keep their heights and the old handle pull down to close), on a computer (from the medium
+// breakpoint) it follows its data-wide (BottomSheet's `wide`): 'dialog' (the default, a dialog in the middle of the
+// screen) fades, 'side-sheet' (a modal side sheet at the end of the screen) slides in from the end (the left in a
+// language written from the right) and out again, 'sheet' (still a bottom sheet) slides up and down as on a phone;
+// with reduced motion it appears and disappears at once. Its close button, Escape and a tap on the scrim (outside it)
+// close it; the page under it does not scroll while it is open. It moves with the site's motion scheme (motionSpring,
+// @morphemecms/cms/lib/motion.ts).
+// A standard one (kind 'standard', at the bottom of the screen without a scrim; bottomSheet.script.ts on every page, or
+// a block's or an app's script that wants its controls): standardBottomSheet(sheet) lets it be dragged by its handle
+// and its header between the states it rests in: the ones in its data-states (the `states` prop of BottomSheet; without
+// it Material 3's, with 'hidden' when it has a close button; half-expanded only where that is clearly between the
+// others), to the nearest when let go, or on to the next when it is flicked; a tap on the handle (or Enter or Space on
+// it) steps through the states, up one at a time and from the highest back to the lowest (never to hidden), and its
+// close button hides it. Its resize button (`resizeLabel`, [data-bottom-sheet-resize]) does what a tap on the handle
+// does and has aria-expanded true while the sheet is above its lowest stop; its collapse button (`collapseLabel`,
+// [data-bottom-sheet-collapse]) sets the lowest stop, moves focus on to the handle, and shows (ui.css) only under
+// data-full, which is set while the sheet is expanded and as high as its max-height lets it be (also when the window
+// is resized). The decisions are sheet-stops.mjs's (tested); this only measures and applies them.
+// From the medium breakpoint a sheet with data-wide 'side-sheet' (the default; BottomSheet's `wide`) is a side sheet
+// (ui.css) and this does nothing to it: the handle, the header and the buttons do not act. It follows the media query:
+// when the window gets that wide it drops a drag and the height it was dragged to, and when it gets narrower it applies
+// the marks again.
+// How high each state is, is ui.css's (data-state), read without being painted, so a theme sets it there. It gives its
+// state() and set(state) to show it in another (also again after it is hidden). The height follows with the site's
+// motion scheme; with reduced motion it changes at once.
 import { animate } from 'motion';
+import { atLeast } from '@morphemecms/cms/lib/breakpoints.mjs';
 import { motionSpring } from '@morphemecms/cms/lib/motion';
+import { defaultStates, nextOnTap, restAfterDrag, restingStops } from '@morphemecms/cms/lib/sheet-stops.mjs';
+import { modalSheetSize } from '@theme/ui/modalSheetSize';
 import type { BottomSheetState } from '@theme/ui/BottomSheet';
 
 export type BottomSheetControls = { open: () => void; close: () => Promise<void> };
@@ -25,26 +43,42 @@ export function bottomSheet(sheet: HTMLDialogElement): BottomSheetControls {
   const panel = sheet.querySelector<HTMLElement>('[data-bottom-sheet-container]')!;
   const handle = sheet.querySelector<HTMLElement>('[data-bottom-sheet-handle]');
   const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
-  // A dialog in the middle on a computer (.bottom-sheet in ui.css): it fades, and has no handle to drag.
-  const wide = matchMedia('(width >= 48rem)');
+  // On a computer (from the medium breakpoint) what data-wide says (ui.css): a dialog in the middle fades, a side sheet
+  // slides in from the end, a sheet slides up; the dialog and the side sheet have no handle to drag.
+  const wide = matchMedia(atLeast('medium'));
+  const kind = () =>
+    !wide.matches ? 'sheet' : panel.dataset.wide === 'side-sheet' ? 'side-sheet' : panel.dataset.wide === 'sheet' ? 'sheet' : 'dialog';
+  // Out past the end edge: to the right, or to the left in a language written from the right.
+  const away = () => (getComputedStyle(sheet).direction === 'rtl' ? '-100%' : '100%');
+  const enter = () => {
+    const k = kind();
+    return k === 'dialog' ? { opacity: [0, 1], scale: [0.98, 1] } : k === 'side-sheet' ? { x: [away(), '0%'] } : { y: ['100%', '0%'] };
+  };
+  const leave = () => {
+    const k = kind();
+    return k === 'dialog' ? { opacity: 0, scale: 0.98 } : k === 'side-sheet' ? { x: away() } : { y: '100%' };
+  };
   let closing = false;
+  // On a phone: its start height and the pull by handle, header and content (not for the editor's sheets).
+  const size = modalSheetSize(sheet, panel, () => void close());
 
   function open() {
     if (sheet.open) return;
     sheet.showModal();
     document.documentElement.style.overflow = 'hidden';
+    size.open();
     if (reduce) return;
-    if (wide.matches) animate(panel, { opacity: [0, 1], scale: [0.98, 1] }, motionSpring('spatial'));
-    else animate(panel, { y: ['100%', '0%'] }, motionSpring('spatial'));
+    animate(panel, enter(), motionSpring('spatial'));
   }
 
   async function close() {
     if (!sheet.open || closing) return;
     closing = true;
-    if (!reduce) await animate(panel, wide.matches ? { opacity: 0, scale: 0.98 } : { y: '100%' }, motionSpring('spatial', 'fast'));
+    if (!reduce) await animate(panel, leave(), motionSpring('spatial', 'fast'));
     sheet.close();
     panel.style.transform = '';
     panel.style.opacity = '';
+    size.reset();
     document.documentElement.style.overflow = '';
     closing = false;
   }
@@ -60,10 +94,11 @@ export function bottomSheet(sheet: HTMLDialogElement): BottomSheetControls {
     if (e.target === sheet) close();
   });
 
-  // Drag the handle down to close.
+  // Drag the handle down to close (the sheets modalSheetSize does not manage).
   let startY = 0;
   let dragging = false;
   handle?.addEventListener('pointerdown', (e) => {
+    if (size.managed()) return;
     dragging = true;
     startY = e.clientY;
     handle.setPointerCapture(e.pointerId);
@@ -95,8 +130,13 @@ export function standardBottomSheet(sheet: HTMLElement): StandardBottomSheetCont
   const handle = sheet.querySelector<HTMLElement>('[data-bottom-sheet-handle]');
   const header = sheet.querySelector<HTMLElement>('[data-bottom-sheet-header]');
   const closeButton = sheet.querySelector<HTMLElement>('[data-bottom-sheet-close]');
+  const resizeButton = sheet.querySelector<HTMLElement>('[data-bottom-sheet-resize]');
+  const collapseButton = sheet.querySelector<HTMLElement>('[data-bottom-sheet-collapse]');
   const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
   const state = () => (sheet.dataset.state as BottomSheetState | undefined) ?? 'collapsed';
+  // A side sheet from the medium breakpoint (data-wide, ui.css): nothing here acts while it is one.
+  const wideQuery = matchMedia(atLeast('medium'));
+  const asSideSheet = () => wideQuery.matches && sheet.dataset.wide === 'side-sheet';
 
   // How high it is in a state, as ui.css draws it: set, measured and put back before anything is painted.
   function heightIn(s: BottomSheetState) {
@@ -109,26 +149,33 @@ export function standardBottomSheet(sheet: HTMLElement): StandardBottomSheetCont
     sheet.style.height = was.height;
     return px;
   }
-  // The states it rests in, from the lowest: half-expanded only where it is clearly between the others.
-  function stops() {
-    const collapsed = heightIn('collapsed');
-    const half = heightIn('half-expanded');
-    const expanded = heightIn('expanded');
-    return [
-      ...(closeButton ? [{ state: 'hidden' as const, height: 0 }] : []),
-      { state: 'collapsed' as const, height: collapsed },
-      ...(half - collapsed > 48 && expanded - half > 48 ? [{ state: 'half-expanded' as const, height: half }] : []),
-      { state: 'expanded' as const, height: expanded },
-    ];
+  // The states it allows (data-states, else Material 3's), and the stops they make at the heights measured now.
+  const states = (sheet.dataset.states?.split(' ').filter(Boolean) as BottomSheetState[] | undefined) ?? defaultStates(!!closeButton);
+  const stops = () =>
+    restingStops({ collapsed: heightIn('collapsed'), 'half-expanded': heightIn('half-expanded'), expanded: heightIn('expanded') }, states);
+  // The lowest stop that is not 'hidden': where the collapse button goes, and where the resize button's up caret shows.
+  const lowest = () => stops().find((stop) => stop.state !== 'hidden')?.state ?? 'collapsed';
+  // data-full: expanded, and as high as max-height lets it be (1px of slack).
+  function settleFull(s: BottomSheetState) {
+    const max = parseFloat(getComputedStyle(sheet).maxHeight);
+    sheet.toggleAttribute('data-full', s === 'expanded' && max > 0 && sheet.offsetHeight >= max - 1);
   }
+  // The resize button's aria-expanded (and so its caret): true while the sheet is above its lowest stop.
+  const settleResize = (s: BottomSheetState) => resizeButton?.setAttribute('aria-expanded', String(s !== 'hidden' && s !== lowest()));
   const shown = (s: BottomSheetState) => {
     sheet.dataset.state = s;
     sheet.style.height = '';
     handle?.setAttribute('aria-expanded', String(s === 'half-expanded' || s === 'expanded'));
+    settleResize(s);
+    settleFull(s);
   };
 
   // From the height it has now (0 when hidden) to the one of `to`, with all of it there while it moves.
   async function set(to: BottomSheetState) {
+    if (asSideSheet()) {
+      sheet.dataset.state = to;
+      return;
+    }
     const from = state() === 'hidden' ? 0 : sheet.offsetHeight;
     const height = heightIn(to);
     if (reduce || from === height) return shown(to);
@@ -146,7 +193,7 @@ export function standardBottomSheet(sheet: HTMLElement): StandardBottomSheetCont
   let afterDrag = false;
   const down = (e: PointerEvent) => {
     const target = e.target as Element;
-    if (e.button !== 0 || (target.closest('button, a') && target.closest('[data-bottom-sheet-handle]') === null)) return;
+    if (asSideSheet() || e.button !== 0 || (target.closest('button, a') && target.closest('[data-bottom-sheet-handle]') === null)) return;
     const list = stops();
     drag = {
       y: e.clientY,
@@ -159,7 +206,7 @@ export function standardBottomSheet(sheet: HTMLElement): StandardBottomSheetCont
     (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
   };
   const move = (e: PointerEvent) => {
-    if (!drag) return;
+    if (!drag || asSideSheet()) return;
     const dy = e.clientY - drag.y;
     if (!dragged && Math.abs(dy) < 4) return;
     if (!dragged) {
@@ -183,14 +230,7 @@ export function standardBottomSheet(sheet: HTMLElement): StandardBottomSheetCont
     delete sheet.dataset.moving;
     const height = sheet.offsetHeight;
     const list = stops();
-    // Flicked: on to the next state that way; else the nearest.
-    const next =
-      v > 0.4
-        ? list.find((s) => s.height > height + 1)
-        : v < -0.4
-          ? list.findLast((s) => s.height < height - 1)
-          : list.reduce((a, b) => (Math.abs(b.height - height) < Math.abs(a.height - height) ? b : a));
-    set((next ?? list.reduce((a, b) => (Math.abs(b.height - height) < Math.abs(a.height - height) ? b : a))).state);
+    set(restAfterDrag(list, height, v));
   };
   for (const el of [handle, header]) {
     el?.addEventListener('pointerdown', down);
@@ -198,12 +238,57 @@ export function standardBottomSheet(sheet: HTMLElement): StandardBottomSheetCont
     el?.addEventListener('pointerup', up);
     el?.addEventListener('pointercancel', up);
   }
-  // A tap on the handle (or Enter or Space): expanded when collapsed, else collapsed; not after it was dragged.
+  // A tap on the handle (or Enter or Space): on to the next state; not after it was dragged.
   handle?.addEventListener('click', () => {
-    if (afterDrag) return;
-    set(state() === 'collapsed' || state() === 'hidden' ? 'expanded' : 'collapsed');
+    if (afterDrag || asSideSheet()) return;
+    set(nextOnTap(stops(), state()));
   });
-  closeButton?.addEventListener('click', () => set('hidden'));
+  // The buttons in the header are clicks, not drags (down() leaves them out), like the close button.
+  resizeButton?.addEventListener('click', () => asSideSheet() || set(nextOnTap(stops(), state())));
+  // The collapse button hides itself with data-full, so focus moves on to the handle (else the resize button, else the
+  // sheet) rather than falling to the page.
+  collapseButton?.addEventListener('click', async () => {
+    if (asSideSheet()) return;
+    await set(lowest());
+    if (!collapseButton.contains(document.activeElement) && document.activeElement !== document.body) return;
+    const next = handle ?? resizeButton ?? sheet;
+    if (next === sheet && !sheet.hasAttribute('tabindex')) sheet.tabIndex = -1;
+    next.focus();
+  });
+  closeButton?.addEventListener('click', () => asSideSheet() || set('hidden'));
+  // At attach the marks follow the measured stops (the server only guessed), and again when the window is resized
+  // (a phone turned while expanded), as the stops move with it; the listener removes itself once the sheet is no longer
+  // in the page.
+  settleResize(state());
+  settleFull(state());
+  const onResize = () => {
+    if (!sheet.isConnected) {
+      removeEventListener('resize', onResize);
+      wideQuery.removeEventListener('change', onWide);
+      return;
+    }
+    if (asSideSheet()) return;
+    settleResize(state());
+    settleFull(state());
+  };
+  // Becoming a side sheet (or a bottom sheet again): drop a drag in progress and the height it gave the sheet, and on
+  // the way back apply the marks as at attach.
+  const onWide = () => {
+    if (!sheet.isConnected) return onResize();
+    drag = undefined;
+    dragged = false;
+    delete sheet.dataset.moving;
+    sheet.style.height = '';
+    if (asSideSheet()) {
+      sheet.removeAttribute('data-full');
+      return;
+    }
+    handle?.setAttribute('aria-expanded', String(state() === 'half-expanded' || state() === 'expanded'));
+    settleResize(state());
+    settleFull(state());
+  };
+  addEventListener('resize', onResize);
+  wideQuery.addEventListener('change', onWide);
 
   const controls = { state, set };
   standardSheets.set(sheet, controls);

package/theme/ui/fabMenu.script.ts

@@ -1,57 +1,73 @@
-// What a FAB menu (FabMenu.tsx) does on the site: its FAB opens and closes its actions (aria-expanded, the list's
-// hidden), and while they are open its name is the cross's (data-close-label), else its own (data-label). Opened with a
-// key, the focus goes to the first action; the arrow keys go between them, Home and End to the first and the last;
-// Escape closes it and goes back to the FAB, and a choice, a tap outside it or the focus moving out close it. Run on
-// every page by the theme's Base.astro (blockScripts, packages/editor/site/blockScripts.ts); without a FAB menu on the page it does
-// nothing.
-export default function fabMenu() {
-  document.querySelectorAll<HTMLElement>('[data-fab-menu]').forEach((root) => {
-    const button = root.querySelector<HTMLButtonElement>('.fab-menu-button');
-    const list = root.querySelector<HTMLElement>('.fab-menu-list');
-    if (!button || !list) return;
-    const items = () => [...list.querySelectorAll<HTMLElement>('a[href], button:not(:disabled)')];
-    const isOpen = () => button.getAttribute('aria-expanded') === 'true';
+// What a FAB menu (FabMenu.tsx) does: its FAB opens and closes its actions (aria-expanded, the list's hidden), and
+// while they are open its name is the cross's (data-close-label), else its own (data-label). Opened with a key, the
+// focus goes to the first action; the arrow keys go between them, Home and End to the first and the last; Escape
+// closes it and goes back to the FAB, and a choice, a tap outside it or the focus moving out close it. setUpFabMenu does
+// it for one menu (the editor's FabMenu in ui.tsx, which undoes it when the menu goes); the default export for every
+// menu on a site page, run by the theme's Base.astro (blockScripts, packages/editor/site/blockScripts.ts).
 
-    const outside = (e: PointerEvent) => {
-      if (!root.contains(e.target as Node)) set(false);
-    };
-    function set(open: boolean, focus?: 'first' | 'button') {
-      button!.setAttribute('aria-expanded', String(open));
-      const name = open ? button!.dataset.closeLabel : button!.dataset.label;
-      if (name) button!.setAttribute('aria-label', name);
-      list!.hidden = !open;
-      if (open) document.addEventListener('pointerdown', outside, true);
-      else document.removeEventListener('pointerdown', outside, true);
-      if (focus === 'button') button!.focus();
-      else if (focus) items()[0]?.focus();
-    }
+/** Makes one FAB menu (its [data-fab-menu] element) open and close; returns what undoes it (every listener removed). */
+export function setUpFabMenu(root: HTMLElement): () => void {
+  const button = root.querySelector<HTMLButtonElement>('.fab-menu-button');
+  const list = root.querySelector<HTMLElement>('.fab-menu-list');
+  if (!button || !list) return () => {};
+  const items = () => [...list.querySelectorAll<HTMLElement>('a[href], button:not(:disabled)')];
+  const isOpen = () => button.getAttribute('aria-expanded') === 'true';
 
-    button.addEventListener('click', (e) => {
-      const open = !isOpen();
-      set(open, open && e.detail === 0 ? 'first' : undefined);
-    });
-    root.addEventListener('keydown', (e) => {
-      if (!isOpen()) return;
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        set(false, 'button');
-        return;
-      }
-      const all = items();
-      const at = all.indexOf(document.activeElement as HTMLElement);
-      if (at < 0) return;
-      const to = { ArrowDown: at + 1, ArrowUp: at - 1, Home: 0, End: all.length - 1 }[e.key];
-      if (to === undefined) return;
+  const outside = (e: PointerEvent) => {
+    if (!root.contains(e.target as Node)) set(false);
+  };
+  function set(open: boolean, focus?: 'first' | 'button') {
+    button!.setAttribute('aria-expanded', String(open));
+    const name = open ? button!.dataset.closeLabel : button!.dataset.label;
+    if (name) button!.setAttribute('aria-label', name);
+    list!.hidden = !open;
+    if (open) document.addEventListener('pointerdown', outside, true);
+    else document.removeEventListener('pointerdown', outside, true);
+    if (focus === 'button') button!.focus();
+    else if (focus) items()[0]?.focus();
+  }
+
+  const toggle = (e: MouseEvent) => {
+    const open = !isOpen();
+    set(open, open && e.detail === 0 ? 'first' : undefined);
+  };
+  const keys = (e: KeyboardEvent) => {
+    if (!isOpen()) return;
+    if (e.key === 'Escape') {
       e.preventDefault();
-      all[(to + all.length) % all.length].focus();
-    });
-    list.addEventListener('click', (e) => {
-      if ((e.target as HTMLElement).closest('a[href], button')) set(false);
-    });
-    // The focus moving to something outside it (Tab); a tap outside is `outside`.
-    root.addEventListener('focusout', (e) => {
-      const to = e.relatedTarget as Node | null;
-      if (isOpen() && to && !root.contains(to)) set(false);
-    });
-  });
+      set(false, 'button');
+      return;
+    }
+    const all = items();
+    const at = all.indexOf(document.activeElement as HTMLElement);
+    if (at < 0) return;
+    const to = { ArrowDown: at + 1, ArrowUp: at - 1, Home: 0, End: all.length - 1 }[e.key];
+    if (to === undefined) return;
+    e.preventDefault();
+    all[(to + all.length) % all.length].focus();
+  };
+  const choice = (e: MouseEvent) => {
+    if ((e.target as HTMLElement).closest('a[href], button')) set(false);
+  };
+  // The focus moving to something outside it (Tab); a tap outside is `outside`.
+  const left = (e: FocusEvent) => {
+    const to = e.relatedTarget as Node | null;
+    if (isOpen() && to && !root.contains(to)) set(false);
+  };
+
+  button.addEventListener('click', toggle);
+  root.addEventListener('keydown', keys);
+  list.addEventListener('click', choice);
+  root.addEventListener('focusout', left);
+  return () => {
+    button.removeEventListener('click', toggle);
+    root.removeEventListener('keydown', keys);
+    list.removeEventListener('click', choice);
+    root.removeEventListener('focusout', left);
+    document.removeEventListener('pointerdown', outside, true);
+  };
+}
+
+export default function fabMenu() {
+  document.querySelectorAll<HTMLElement>('[data-fab-menu]').forEach((root) => setUpFabMenu(root));
 }