@morphemecms/cms 0.11.0 → 0.12.0

package/src/sectionState.mjs

@@ -1,18 +1,18 @@
 // The section colour in the editor's document (the *Sektionsfarve* button, MarkdownEditor.tsx; the frame, sectionFrame.ts): the
-// top-level H2 the cursor is in (sectionHeading), setting its colour (setSectionColor) and the colour of a section (sectionColorOf).
+// top-level H1 or H2 the cursor is in (sectionHeading), setting its colour (setSectionColor) and the colour of a section (sectionColorOf).
 // Only ProseMirror's state; depends on lib/section-marker.mjs. No Milkdown, no browser.
 import { SECTION_COLORS } from '../lib/section-marker.mjs';
 
-/** The top-level H2 the cursor is in, with its colour, or null. @param {import('@milkdown/kit/prose/state').EditorState} state
+/** The top-level H1 or H2 the cursor is in, with its colour, or null. @param {import('@milkdown/kit/prose/state').EditorState} state
  * @returns {{ pos: number, color: string | null } | null} */
 export function sectionHeading(state) {
   const { $from } = state.selection;
   const node = $from.parent;
-  if ($from.depth !== 1 || node.type.name !== 'heading' || node.attrs.level !== 2) return null;
+  if ($from.depth !== 1 || node.type.name !== 'heading' || node.attrs.level > 2) return null;
   return { pos: $from.before(1), color: node.attrs.section ?? null };
 }
 
-/** Gives the H2 the cursor is in this colour (null: none). False when it is not in an H2, or the colour is not one of the theme's.
+/** Gives the H1 or H2 the cursor is in this colour (null: none). False when it is not in one, or the colour is not one of the theme's.
  * @param {{ state: import('@milkdown/kit/prose/state').EditorState, dispatch: (tr: import('@milkdown/kit/prose/state').Transaction) => void }} view
  * @param {string | null} color */
 export function setSectionColor(view, color) {
@@ -23,9 +23,9 @@ export function setSectionColor(view, color) {
   return true;
 }
 
-/** The colour of the section made of nodes[range.from..range.to] (sectionRanges): its H2's, null without one.
+/** The colour of the section made of nodes[range.from..range.to] (sectionRanges): its H1's or H2's, null without one.
  * @param {import('@milkdown/kit/prose/model').Node[]} nodes @param {{ from: number, to: number }} range @returns {string | null} */
 export function sectionColorOf(nodes, range) {
-  const heading = nodes.slice(range.from, range.to + 1).find((n) => n.type.name === 'heading' && n.attrs.level === 2);
+  const heading = nodes.slice(range.from, range.to + 1).find((n) => n.type.name === 'heading' && n.attrs.level <= 2);
   return heading?.attrs.section ?? null;
 }

package/src/sectionState.test.mjs

@@ -1,4 +1,4 @@
-// Tests for src/sectionState.mjs: the H2 the cursor is in, setting its section colour, and the colour of a section.
+// Tests for src/sectionState.mjs: the H1 or H2 the cursor is in, setting its section colour, and the colour of a section.
 // Run: node --test packages/editor/src/sectionState.test.mjs
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
@@ -16,11 +16,12 @@ const schema = new Schema({
   },
 });
 const node = (type, text, attrs) => schema.node(type, attrs, text ? [schema.text(text)] : []);
-// An H2 "Hours" (0-7, coloured tint), a paragraph (7-10), an H3 (10-14).
+// An H2 "Hours" (0-7, coloured tint), a paragraph (7-10), an H3 (10-15), an H1 "Top" (15-20, coloured tint).
 const doc = schema.node('doc', null, [
   node('heading', 'Hours', { level: 2, section: 'tint' }),
   node('paragraph', 'x'),
   node('heading', 'Sub', { level: 3 }),
+  node('heading', 'Top', { level: 1, section: 'tint' }),
 ]);
 const viewAt = (pos) => ({
   state: EditorState.create({ doc, selection: TextSelection.create(doc, pos) }),
@@ -51,6 +52,17 @@ test('a colour the theme has not is refused, and nothing happens outside an H2',
   assert.equal(view.state.doc.child(0).attrs.section, 'tint');
   assert.equal(setSectionColor(viewAt(8), 'tint'), false);
 });
+test('the H1 the cursor is in', () => assert.deepEqual(sectionHeading(viewAt(17).state), { pos: 15, color: 'tint' }));
+test('sets a colour on an H1', () => {
+  const view = viewAt(17);
+  assert.equal(setSectionColor(view, 'accent'), true);
+  assert.equal(view.state.doc.child(3).attrs.section, 'accent');
+  assert.equal(view.state.doc.child(3).attrs.level, 1);
+});
+test('the colour of a section is its H1’s', () => {
+  const kids = [node('heading', 'Top', { level: 1, section: 'accent' }), node('paragraph', 'x')];
+  assert.equal(sectionColorOf(kids, { from: 0, to: 1 }), 'accent');
+});
 test('the colour of a section is its H2’s, also after a label', () => {
   const kids = [node('eyebrow', 'Label'), node('heading', 'Hours', { level: 2, section: 'surface' }), node('paragraph', 'x')];
   assert.equal(sectionColorOf(kids, { from: 0, to: 2 }), 'surface');

package/src/sheetPlacement.d.mts

@@ -1,4 +1,6 @@
-/** step: 'choose' | 'fields' | 'section' | undefined; medium: the window is at least the `medium` breakpoint (600px). */
-export function sheetLook(step: any, medium: any): "side-sheet" | "modal-side-sheet" | "sheet";
-/** true exactly when sheetLook(step, medium) === 'side-sheet'. */
-export function inPanel(step: any, medium: any): boolean;
+/** step: 'choose' | 'fields' | 'section' | undefined; expanded: the window is at least the `expanded` breakpoint. */
+export function sheetLook(step: any, expanded: any): "side-sheet" | "modal-side-sheet" | "sheet";
+/** true exactly when sheetLook(step, expanded) === 'side-sheet'. */
+export function inPanel(step: any, expanded: any): boolean;
+/** true when a card's pen and trash move into the side panel: the fields sheet is the side panel (inPanel('fields', expanded)) and the card has fields. */
+export function editsInPanel(expanded: any, hasFields: any): any;

package/src/sheetPlacement.mjs

@@ -1,15 +1,20 @@
-// The look of each step of the block sheet (BlockDialog.tsx): a side sheet beside the page from medium for the fields
-// and the section settings, a modal side sheet below medium for the fields, else the sheet from the bottom.
-// Exposes sheetLook(step, medium) and inPanel(step, medium); no dependencies.
+// The look of each step of the block sheet (BlockDialog.tsx): a side sheet beside the page from expanded for the fields
+// and the section settings, a modal side sheet below expanded for the fields, else the sheet from the bottom.
+// Exposes sheetLook(step, expanded), inPanel(step, expanded) and editsInPanel(expanded, hasFields); no dependencies.
 
-/** step: 'choose' | 'fields' | 'section' | undefined; medium: the window is at least the `medium` breakpoint (600px). */
-export function sheetLook(step, medium) {
-  if (step === 'fields') return medium ? 'side-sheet' : 'modal-side-sheet';
-  if (step === 'section') return medium ? 'side-sheet' : 'sheet';
+/** step: 'choose' | 'fields' | 'section' | undefined; expanded: the window is at least the `expanded` breakpoint. */
+export function sheetLook(step, expanded) {
+  if (step === 'fields') return expanded ? 'side-sheet' : 'modal-side-sheet';
+  if (step === 'section') return expanded ? 'side-sheet' : 'sheet';
   return 'sheet';
 }
 
-/** true exactly when sheetLook(step, medium) === 'side-sheet'. */
-export function inPanel(step, medium) {
-  return sheetLook(step, medium) === 'side-sheet';
+/** true exactly when sheetLook(step, expanded) === 'side-sheet'. */
+export function inPanel(step, expanded) {
+  return sheetLook(step, expanded) === 'side-sheet';
+}
+
+/** true when a card's pen and trash move into the side panel: the fields sheet is the side panel (inPanel('fields', expanded)) and the card has fields. */
+export function editsInPanel(expanded, hasFields) {
+  return hasFields && inPanel('fields', expanded);
 }

package/src/sheetPlacement.test.mjs

@@ -1,44 +1,51 @@
 // Tests for sheetPlacement.mjs: the look (side-sheet, modal-side-sheet, or sheet) and the panel flag of each step.
 import test from 'node:test';
 import assert from 'node:assert/strict';
-import { sheetLook, inPanel } from './sheetPlacement.mjs';
+import { sheetLook, inPanel, editsInPanel } from './sheetPlacement.mjs';
 
-test("'fields' below medium is a modal side sheet and not in the panel", () => {
+test("'fields' below expanded is a modal side sheet and not in the panel", () => {
   assert.equal(sheetLook('fields', false), 'modal-side-sheet');
   assert.equal(inPanel('fields', false), false);
 });
 
-test("'fields' at medium is a side sheet and in the panel", () => {
+test("'fields' at expanded is a side sheet and in the panel", () => {
   assert.equal(sheetLook('fields', true), 'side-sheet');
   assert.equal(inPanel('fields', true), true);
 });
 
-test("'section' below medium is a sheet and not in the panel", () => {
+test("'section' below expanded is a sheet and not in the panel", () => {
   assert.equal(sheetLook('section', false), 'sheet');
   assert.equal(inPanel('section', false), false);
 });
 
-test("'section' at medium is a side sheet and in the panel", () => {
+test("'section' at expanded is a side sheet and in the panel", () => {
   assert.equal(sheetLook('section', true), 'side-sheet');
   assert.equal(inPanel('section', true), true);
 });
 
-test("'choose' below medium is a sheet and not in the panel", () => {
+test("'choose' below expanded is a sheet and not in the panel", () => {
   assert.equal(sheetLook('choose', false), 'sheet');
   assert.equal(inPanel('choose', false), false);
 });
 
-test("'choose' at medium is a sheet and not in the panel", () => {
+test("'choose' at expanded is a sheet and not in the panel", () => {
   assert.equal(sheetLook('choose', true), 'sheet');
   assert.equal(inPanel('choose', true), false);
 });
 
-test('a closed sheet below medium is a sheet and not in the panel', () => {
+test('a closed sheet below expanded is a sheet and not in the panel', () => {
   assert.equal(sheetLook(undefined, false), 'sheet');
   assert.equal(inPanel(undefined, false), false);
 });
 
-test('a closed sheet at medium is a sheet and not in the panel', () => {
+test('a closed sheet at expanded is a sheet and not in the panel', () => {
   assert.equal(sheetLook(undefined, true), 'sheet');
   assert.equal(inPanel(undefined, true), false);
 });
+
+test('a card edits in the panel only at expanded and with fields', () => {
+  assert.equal(editsInPanel(true, true), true);
+  assert.equal(editsInPanel(false, true), false);
+  assert.equal(editsInPanel(true, false), false);
+  assert.equal(editsInPanel(false, false), false);
+});

package/src/sidePanel.ts

@@ -0,0 +1,38 @@
+// Whether the standard side panel (BlockDialog's standard side sheet) is open, and whether the menu button reopened the drawer
+// while it is. Not remembered. Exposes setPanelOpen, setDrawerReopened, usePanelOpen, useDrawerReopened; read by menuOpen.ts.
+import { useSyncExternalStore } from 'react';
+
+let panelOpen = false;
+let reopened = false;
+const listeners = new Set<() => void>();
+const notify = () => listeners.forEach((l) => l());
+const subscribe = (changed: () => void) => {
+  listeners.add(changed);
+  return () => listeners.delete(changed);
+};
+
+/** The panel opens or closes; closing ends a reopening of the drawer. */
+export function setPanelOpen(next: boolean) {
+  panelOpen = next;
+  if (!next) reopened = false;
+  notify();
+}
+
+export function setDrawerReopened(next: boolean) {
+  reopened = next;
+  notify();
+}
+
+export const usePanelOpen = () =>
+  useSyncExternalStore(
+    subscribe,
+    () => panelOpen,
+    () => false,
+  );
+
+export const useDrawerReopened = () =>
+  useSyncExternalStore(
+    subscribe,
+    () => reopened,
+    () => false,
+  );

package/src/store.ts

@@ -29,6 +29,8 @@ import type { StoreLicenses } from './licenseData';
 import { APP_API, THEME_API } from '../lib/contracts.mjs';
 import { RECORD, STANDARD, isText, validApp, validTheme } from '../lib/storeEntries.mjs';
 import { timedFetch } from './storeFetch';
+import { folderChanges } from '../lib/folderChanges.mjs';
+import { moveChanges as moveItem, type SitePaths } from './legacyMove';
 
 // The contracts this editor runs (lib/contracts.mjs, also read by the site's Worker).
 export { APP_API, THEME_API };
@@ -111,6 +113,9 @@ export const SCREENSHOTS = 'screenshots';
 /** An app in the store's catalog. */
 export type StoreApp = {
   id: string;
+  /** Its readable name for addresses (`publisher/name`) and the id it had before its permanent one (`legacy`). */
+  handle?: string;
+  legacy?: string;
   version: string;
   api: number;
   label: string;
@@ -145,6 +150,8 @@ export type StoreApp = {
  * site in it (screenshots/<n>-<key>.jpg, t.library.themeShots) and its folder, file by file. */
 export type StoreTheme = {
   id: string;
+  handle?: string;
+  legacy?: string;
   version: string;
   api: number;
   name: string;
@@ -420,33 +427,6 @@ export function themeChanges(
   return folderChanges(themeFolder(id), current, next);
 }
 
-/** The changes that make a folder in the site (`current`, its files now) the store's version of an app or a theme, with
- * the note of where it came from, or remove it (`next` null). */
-function folderChanges(
-  folder: string,
-  current: RepoFile[],
-  next: { files: { path: string; content: string | Uint8Array }[]; record: StoreRecord } | null,
-): Change[] {
-  const now = new Map(current.map((f) => [f.path, f.oid]));
-  const wanted: { path: string; content: string | Uint8Array; oid?: string }[] = next
-    ? [
-        ...next.files.map((f) => ({
-          path: `${folder}/${f.path}`,
-          content: f.content,
-          oid: next.record.files.find((r) => r.path === f.path)?.oid,
-        })),
-        { path: `${folder}/${RECORD}`, content: `${JSON.stringify(next.record, null, 2)}\n` },
-      ]
-    : [];
-  return [
-    // A file the site has as it is in the store is left as it is.
-    ...wanted
-      .filter((w) => !w.oid || now.get(w.path) !== w.oid)
-      .map((w) => ({ path: w.path, content: w.content, oid: now.get(w.path) ?? null })),
-    ...current.filter((f) => !wanted.some((w) => w.path === f.path)).map((f) => ({ path: f.path, content: null, oid: f.oid })),
-  ];
-}
-
 /** The changes that make an app's folder in the site (`current`, its files now) the store's version, with the note of
  * where it came from, or remove it (`next` null: uninstalling); and the site's file of apps with it among those
  * installed or not (`installed`: their ids now, `file`: the file). In one commit. */
@@ -474,6 +454,31 @@ export function recordIn(current: RepoFile[], root: string): StoreRecord | undef
   }
 }
 
+/** Where the site keeps what names an app or a theme (docs/store-ids.md); the popups' folder is the collection's. */
+const sitePaths: SitePaths = {
+  appsFolder: config.apps.folder,
+  themesFolder: config.themes,
+  installed: config.apps.installed,
+  settings: config.apps.settings,
+  theme: config.theme,
+  icons: config.icons,
+  blockSettings: config.blockSettings,
+  popups: 'src/data/popups',
+  cookieList: config.cookieList,
+};
+
+/** The changes that update a store app or theme to its permanent folder: from its legacy folder (`legacy`, its files now
+ * `current`) with every id in the site's files (`site`) rewritten, or, without `legacy`, as appChanges or themeChanges
+ * do for the folder. In one commit (legacyMove.ts). */
+export const moveChanges = (
+  entry: { id: string },
+  legacy: string | null,
+  next: Parameters<typeof moveItem>[2],
+  current: RepoFile[],
+  site: RepoFile[],
+) => moveItem(entry, legacy, next, current, site, sitePaths);
+export { appliedTo, installedHere, legacyOf, mergeChanges } from './legacyMove';
+
 /** The files of an app installed from the store that were changed in the site since (in its folder, `current`, not
  * as its note says), by their paths in the folder: an update writes over them. */
 export function changedFiles(id: string, record: StoreRecord, current: RepoFile[], root = appFolder(id)): string[] {

package/src/topBarSlot.tsx

@@ -1,7 +1,8 @@
-// Where the editor's top bar stands: one sticky place at the top of the content column, beside the full-height navigation
-// rail or drawer (`aside`; App.tsx wraps the layout in TopBarLayout), which Screen.tsx draws its bar into. Exposes
-// TopBarLayout and useTopBarSlot. It keeps `--top-bar-height` (the bar's height) on the layout, for the sections pane.
-import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
+// Where the editor's top bar stands: one place at the top of the content column, beside the full-height navigation
+// rail or drawer (`aside`; App.tsx wraps the layout in TopBarLayout), which Screen.tsx draws its bar into. The bar scrolls
+// away with the page. Exposes TopBarLayout and useTopBarSlot.
+// While the side panel is open the place ends at the panel's start edge (.editor-top-bar-slot in editor.css).
+import { createContext, useContext, useState, type ReactNode } from 'react';
 
 const Slot = createContext<HTMLElement | null>(null);
 
@@ -13,22 +14,13 @@ export const useTopBarSlot = () => useContext(Slot);
  * screen's bar does not first stand in the screen and then move. */
 export function TopBarLayout({ above, aside, children }: { above?: ReactNode; aside?: ReactNode; children: ReactNode }) {
   const [slot, setSlot] = useState<HTMLDivElement | null>(null);
-  const [layout, setLayout] = useState<HTMLDivElement | null>(null);
-  useEffect(() => {
-    if (!slot || !layout) return;
-    const measure = () => layout.style.setProperty('--top-bar-height', `${slot.offsetHeight}px`);
-    measure();
-    const watch = new ResizeObserver(measure);
-    watch.observe(slot);
-    return () => watch.disconnect();
-  }, [slot, layout]);
   return (
-    <div ref={setLayout} className="[--top-bar-height:4rem]">
+    <div>
       {above}
       <div className="flex">
         {aside}
         <div className="min-w-0 flex-1">
-          <div ref={setSlot} className="sticky top-0 z-20" />
+          <div ref={setSlot} className="editor-top-bar-slot" />
           <Slot.Provider value={slot}>{slot && children}</Slot.Provider>
         </div>
       </div>

package/src/ui.tsx

@@ -72,7 +72,7 @@ import {
   SiteDatePicker,
   SiteDialog,
   siteDialogModalClass,
-  SiteExtendedFab,
+  SiteFab,
   SiteFabMenu,
   SiteIconButton,
   SiteLoadingIndicator,
@@ -2541,6 +2541,9 @@ export function useAtLeast(name: Exclude<Breakpoint, 'compact'>) {
   return useMedia(atLeast(name));
 }
 
+/** Whether the window is at least as wide as the breakpoint right now (not kept up to date: for a tap's handler). */
+export const atLeastNow = (name: Exclude<Breakpoint, 'compact'>) => matchMedia(atLeast(name)).matches;
+
 /** How the main menu is laid out in this window (lib/menu-layout.mjs): whether the navigation rail stands, which way it
  * expands, and whether the top bar has the menu button. */
 export function useMenuLayout() {
@@ -2602,7 +2605,7 @@ export function SideSheet({ title, onClose, children }: { title: string; onClose
       headlineId={id}
       closeLabel={t.common.close}
       onClose={onClose}
-      className="editor-reveal sticky top-24 max-h-[calc(100dvh-7rem)] self-start"
+      className="editor-reveal sticky top-8 max-h-[calc(100dvh-3rem)] self-start"
     >
       <div className="space-y-5">{children}</div>
     </SiteSideSheet>
@@ -2649,12 +2652,12 @@ export function SectionList({
 }
 
 /** The "on this page" card at the end of a long form on large and wider screens: the theme's outlined card, as tall as
- * its content (it scrolls inside only when that is taller than the window less the top bar), with the small `caption`
+ * its content (it scrolls inside only when that is taller than the window), with the small `caption`
  * (Afsnit), the form's `title` under it and the form's SectionList (`children`). It stays in view while the form
  * scrolls. Its place is FormColumns' `pane`, against the window's end edge; below large it is not drawn. */
 export function SectionPane({ caption, title, children }: { caption: string; title: string; children: ReactNode }) {
   return (
-    <div className={`${siteCardClass('outlined')} max-h-[calc(100dvh-var(--top-bar-height)-2*var(--section-pane-gap))] overflow-y-auto`}>
+    <div className={`${siteCardClass('outlined')} max-h-[calc(100dvh-2*var(--section-pane-gap))] overflow-y-auto`}>
       <p className="section-pane-caption m-0 text-muted">{caption}</p>
       <h2 className="section-pane-title m-0 mb-3 text-ink">{title}</h2>
       {children}
@@ -3114,13 +3117,13 @@ export function FormColumns({
   cards?: boolean;
   sticky?: boolean;
   /** A SectionPane, on large and wider screens against the window's end edge under the top bar (--section-pane-width
-   * wide, fixed while the form scrolls; editor.css lets the content column keep clear of it); below large nothing.
+   * wide, in an absolute strip along the content that its card sticks in while the form scrolls; editor.css lets the content column keep clear of it); below large nothing.
    * Instead of `first` and `side`. */
   pane?: ReactNode;
 }) {
   // On a wide computer screen (large) each of the right column's parts on the theme's outlined card.
   const carded = useAtLeast('large') && cards;
-  const right = `space-y-6 large:col-start-2 ${carded ? siteCardClass('outlined') : ''} ${sticky ? 'large:sticky large:top-24' : ''}`;
+  const right = `space-y-6 large:col-start-2 ${carded ? siteCardClass('outlined') : ''} ${sticky ? 'large:sticky large:top-8' : ''}`;
   return (
     <div
       className={`flex flex-col gap-6 ${
@@ -3131,8 +3134,8 @@ export function FormColumns({
       <div className="min-w-0 space-y-6 large:col-start-1 large:row-span-2 large:row-start-1">{main}</div>
       {side && <div className={`${right} ${first ? 'large:row-start-2' : 'large:row-span-2 large:row-start-1'}`}>{side}</div>}
       {pane && (
-        <div className="editor-section-pane hidden large:fixed large:end-0 large:top-[calc(var(--top-bar-height)+var(--section-pane-gap))] large:z-10 large:block large:w-(--section-pane-width) large:pe-(--section-pane-gap)">
-          {pane}
+        <div className="editor-section-pane hidden large:absolute large:inset-y-0 large:end-0 large:z-10 large:block large:w-(--section-pane-width) large:pe-(--section-pane-gap)">
+          <div className="large:sticky large:top-(--section-pane-gap) large:mt-(--section-pane-gap)">{pane}</div>
         </div>
       )}
     </div>
@@ -3183,7 +3186,7 @@ export function LeadingToken({ kind, value, weight }: { kind: TokenKind; value:
 // ---------------------------------------------------------------------------------------------------
 // The sheet from the bottom
 
-/** A screen's top bar (Screen.tsx): the theme's top app bar (Material 3's), at the top of the screen while it scrolls,
+/** A screen's top bar (Screen.tsx): the theme's top app bar (Material 3's), at the top of the screen (it scrolls away with the page),
  * below a phone's clock, and marked as the theme marks it once the screen has scrolled under it (data-stuck). */
 export function TopAppBar({ children }: { children: ReactNode }) {
   const [stuck, setStuck] = useState(false);
@@ -3194,7 +3197,7 @@ export function TopAppBar({ children }: { children: ReactNode }) {
     return () => removeEventListener('scroll', check);
   }, []);
   return (
-    <SiteTopAppBar className="sticky top-0 z-20 pt-[env(safe-area-inset-top)]" data-stuck={stuck || undefined}>
+    <SiteTopAppBar className="pt-[env(safe-area-inset-top)]" data-stuck={stuck || undefined}>
       {children}
     </SiteTopAppBar>
   );
@@ -3855,14 +3858,22 @@ export function NewChoice<T extends string>({
   );
 }
 
-/** One action of a FAB menu: its icon, its name and where it goes. */
-export type FabAction = { icon: Icon; label: string; href: string };
+/** One action of a FAB menu: its icon, its name and what it does: a link (`href`) or a button (`onClick`). While `busy` its
+ * action runs, and it is disabled as with `disabled`. */
+export type FabAction = { icon: Icon; label: string; href?: string; onClick?: () => void; busy?: boolean; disabled?: boolean };
 
 // An action's icon, drawn.
 const iconOf = ({ icon: Item }: FabAction) => <Item />;
 
+// What an action's element gets besides its icon and name: busy is disabled and aria-busy (a link has neither).
+const fabProps = ({ href, onClick, busy, disabled }: FabAction) => ({
+  href,
+  onClick,
+  ...(href === undefined ? { disabled: disabled || busy, 'aria-busy': busy || undefined } : {}),
+});
+
 /** The screen's main actions at the bottom right (.editor-fab, editor.css): the theme's FAB menu, opened and closed as
- * on the site (setUpFabMenu), or with one action that action as an extended FAB; nothing without any. Drawn in a portal
+ * on the site (setUpFabMenu), or with one action that action as a FAB (its icon, its name as its tooltip and read by screen readers; a link, or a button); nothing without any. Drawn in a portal
  * on <body>, since the screen's entrance animation (a transform) would make its <main> the containing block of a fixed FAB. */
 export function FabMenu({ icon: Glyph, label, items }: { icon: Icon; label: string; items: FabAction[] }) {
   const ref = useRef<HTMLDivElement>(null);
@@ -3879,10 +3890,10 @@ export function FabMenu({ icon: Glyph, label, items }: { icon: Icon; label: stri
           icon={<Glyph />}
           label={label}
           closeLabel={t.common.close}
-          items={items.map((item) => ({ ...item, icon: iconOf(item) }))}
+          items={items.map((item) => ({ label: item.label, icon: iconOf(item), ...fabProps(item) }))}
         />
       ) : (
-        <SiteExtendedFab icon={iconOf(items[0])} label={items[0].label} href={items[0].href} />
+        <SiteFab icon={iconOf(items[0])} label={items[0].label} title={items[0].label} {...fabProps(items[0])} />
       )}
     </div>,
     document.body,

package/src/virtual.d.ts

@@ -27,3 +27,9 @@ declare module 'virtual:theme-coverage' {
   } | null;
   export default coverage;
 }
+
+// The id of the app whose folder the importing file is in (appSelf in site/appSelf.mjs; app contract 3).
+declare module '@app/self' {
+  const self: { readonly id: string };
+  export default self;
+}

package/starter/package.json

@@ -32,7 +32,7 @@
     "@material-symbols/svg-400": "0.48.2",
     "@material/material-color-utilities": "^0.3.0",
     "@milkdown/kit": "^7.22.3",
-    "@morphemecms/cms": "0.11.0",
+    "@morphemecms/cms": "0.12.0",
     "@phosphor-icons/core": "^2.1.1",
     "@phosphor-icons/react": "^2.1.10",
     "@tailwindcss/typography": "^0.5.20",

package/theme/components/PageHeading.astro

@@ -0,0 +1,22 @@
+---
+// The top of a page's text (PageLayout.astro): the link back to its parent page and the page's H1 (data-editor="heading", which
+// the editor's preview fills in). Props: parent ({ href, title }), heading, headingHtml (the heading with its coloured words).
+import Icon from '@theme/components/Icon.astro';
+
+interface Props {
+  parent?: { href: string; title: string };
+  heading: string;
+  headingHtml?: string;
+}
+const { parent, heading, headingHtml } = Astro.props;
+---
+
+{parent && (
+  <a href={parent.href} class="inline-flex items-center gap-1.5 type-body-medium text-muted hover:text-accent">
+    <Icon name="arrow-left" size={16} />
+    {parent.title}
+  </a>
+)}
+<h1 data-editor="heading" class="theme-title mt-3 max-w-[22ch]">
+  {headingHtml ? <Fragment set:html={headingHtml} /> : heading}
+</h1>

package/theme/layouts/PageLayout.astro

@@ -8,12 +8,23 @@
 // paragraph is the lead (type-lead, ui.css: the --type-lead-* tokens), muted and 52ch wide.
 // data-editor marks what the editor's preview fills in with what is in its form ("Forhåndsvis",
 // packages/editor/src/pagePreview.tsx): the heading, the text, and the booking prompt at the end.
+// A page whose H1 has a section colour (the marker before it, lib/section-marker.mjs) draws the heading and the text up to the
+// first H2 in one panel (data-editor="h1-section", sectionClass); with a column beside the text the panel holds the heading only.
 import Base from '@theme/layouts/Base.astro';
-import Icon from '@theme/components/Icon.astro';
+import PageHeading from '@theme/components/PageHeading.astro';
 import EndBlock from '@theme/components/EndBlock.astro';
 import Block from '@morphemecms/cms/src/standard/Block.astro';
 import { blockLoads, endBlock, sideBlock } from '@morphemecms/cms/src/standard/views';
-import { getPages, pageHeading, pageHeadingHtml, parentPage, stateOf, withoutH1, type Page } from '@morphemecms/cms/site/content';
+import {
+  getPages,
+  h1SectionColor,
+  pageHeading,
+  pageHeadingHtml,
+  parentPage,
+  stateOf,
+  withoutH1,
+  type Page,
+} from '@morphemecms/cms/site/content';
 import { blockTexts, nav } from '@morphemecms/cms/site/site';
 import { firstPicture, picturesOf } from '@morphemecms/cms/site/images.mjs';
 import { splitBlocks } from '@morphemecms/cms/lib/blocks.mjs';
@@ -22,6 +33,7 @@ import { offeredTemplates } from '@morphemecms/cms/site/templates';
 import { markdownHtml } from '@morphemecms/cms/lib/inline';
 import Container from '@theme/components/Container.astro';
 import RichText from '@theme/components/RichText.astro';
+import { introOf, sectionClass } from '@morphemecms/cms/lib/text-sections.mjs';
 import Snackbar from '@theme/ui/Snackbar';
 import { isPreview, livePath, PREVIEW, previewId } from '@morphemecms/cms/site/noindex.mjs';
 import { siteT } from '@morphemecms/cms/src/i18n';
@@ -51,7 +63,10 @@ const picture = firstPicture(page.body);
 // e.g. "Book en tid", as on most pages) is shown across the page below the text and the column next to it; not when
 // it is hidden (RichText.astro leaves hidden blocks out).
 // Without the H1 at the top of the text (the page's heading, drawn above).
-const html = withoutH1(await Astro.slots.render('default'));
+const text = await Astro.slots.render('default');
+const html = withoutH1(text);
+// The colour of the H1's section (the marker before the H1): the heading and the text up to the first H2 are one panel.
+const h1Color = h1SectionColor(text);
 const end = endBlock(html);
 // The questions in the text's "Spørgsmål og svar" blocks (not the hidden ones), for the structured data
 // (an FAQPage, packages/editor/site/schema.ts); the answers as HTML, as on the page (the block's load.ts).
@@ -76,6 +91,12 @@ const side =
   (await blockLoads[sideType].load({}, { texts: blockTexts[sideType] ?? {}, index: 0, path: current, preview, html: sideText })) !== null
     ? sideType
     : null;
+// In a coloured H1 section the text up to the first H2 (intro) is in the panel with the heading; with a column beside the text
+// the text stays whole in its grid and the panel holds the heading only.
+const { intro, rest } = h1Color && !side ? introOf(sideText) : { intro: '', rest: sideText };
+const textClass = side
+  ? 'prose max-w-[66ch]'
+  : 'prose max-w-none [&>:not(.not-prose)]:max-w-[66ch] [&>p:first-child]:type-lead [&>p:first-child]:text-muted [&>p:first-child]:max-w-[52ch]';
 ---
 
 <Base
@@ -96,28 +117,24 @@ const side =
 >
   <article data-template={template}>
     <Container as="header" class="pt-8 medium:pt-14">
-      {parent && (
-        <a href={parent.href} class="inline-flex items-center gap-1.5 type-body-medium text-muted hover:text-accent">
-          <Icon name="arrow-left" size={16} />
-          {parent.title}
-        </a>
+      {h1Color ? (
+        <section class={sectionClass(h1Color)} data-editor="h1-section">
+          <PageHeading parent={parent} heading={heading} headingHtml={headingHtml} />
+          {intro && (
+            <div data-editor="intro" class={textClass}>
+              <RichText html={intro} path={current} preview={preview} />
+            </div>
+          )}
+        </section>
+      ) : (
+        <PageHeading parent={parent} heading={heading} headingHtml={headingHtml} />
       )}
-      <h1 data-editor="heading" class="theme-title mt-3 max-w-[22ch]">
-        {headingHtml ? <Fragment set:html={headingHtml} /> : heading}
-      </h1>
     </Container>
 
     <Container as="div" class="mt-8 medium:mt-12">
       <div {...(side ? { class: 'page-with-side', 'data-side': template === 'sidebar-left' ? 'left' : 'right' } : {})}>
-        <div
-          data-editor="text"
-          class={
-            side
-              ? 'prose max-w-[66ch]'
-              : 'prose max-w-none [&>:not(.not-prose)]:max-w-[66ch] [&>p:first-child]:type-lead [&>p:first-child]:text-muted [&>p:first-child]:max-w-[52ch]'
-          }
-        >
-          <RichText html={sideText} path={current} preview={preview} />
+        <div data-editor="text" class={textClass}>
+          <RichText html={rest} path={current} preview={preview} />
         </div>
         {side && (
           <aside class="page-side">

package/theme/styles/global.css

@@ -752,7 +752,8 @@
   }
 
   /* An M3 side sheet's headline in on-surface-variant. */
-  .side-sheet-headline {
+  .side-sheet-headline,
+  .bottom-sheet-container[data-wide='side-sheet'] .bottom-sheet-headline {
     color: var(--muted);
   }