@morphemecms/cms 0.11.0 → 0.12.0

package/src/legacyMove.test.mjs

@@ -0,0 +1,137 @@
+// Tests for src/legacyMove.ts: when a legacy store copy counts as installed, and the one list of changes that moves it
+// to its permanent folder. Run: node --test src/legacyMove.test.mjs
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { appliedTo, installedHere, legacyOf, mergeChanges, moveChanges } from './legacyMove.ts';
+
+const PATHS = {
+  appsFolder: 'src/apps',
+  themesFolder: 'src/themes',
+  installed: 'src/data/apps.json',
+  settings: 'src/data/apps',
+  theme: 'src/data/theme.json',
+  icons: 'src/data/icons.json',
+  blockSettings: 'src/data/block-settings.json',
+  popups: 'src/data/popups',
+  cookieList: 'src/data/cookie-list',
+};
+const VENUS = { id: 'theme_fa395ad84690acbd', legacy: 'venus' };
+const MOBILEPAY = { id: 'app_ae0b5e17636668bc', legacy: 'mobilepay' };
+const file = (path, text, oid = `oid-${path}`) => ({ path, oid, text });
+const json = (x) => `${JSON.stringify(x, null, 2)}\n`;
+const next = { files: [{ path: 'theme.json', content: '{}' }], record: { version: '2.0.0', ref: '2.0.0', files: [] } };
+const find = (changes, path) => changes.find((c) => c.path === path);
+
+test('a legacy folder with a store.json is installed', () => {
+  assert.equal(legacyOf(VENUS, [{ id: 'venus', store: { version: '1.2.0' } }]), 'venus');
+});
+
+test('a legacy folder without a store.json is the site own', () => {
+  assert.equal(legacyOf(VENUS, [{ id: 'venus' }]), null);
+  assert.equal(legacyOf(VENUS, []), null);
+  assert.equal(legacyOf({ id: VENUS.id }, [{ id: 'venus', store: { version: '1.2.0' } }]), null);
+});
+
+test('moving a theme writes the new folder, deletes the old files and rewrites theme.json and icons.json', () => {
+  const old = [file('src/themes/venus/theme.json', '{"a":1}'), file('src/themes/venus/store.json', '{}')];
+  const site = [file(PATHS.theme, json({ theme: 'venus' })), file(PATHS.icons, json({ pack: 'venus/x' }))];
+  const changes = moveChanges(VENUS, 'venus', next, old, site, PATHS);
+  assert.equal(find(changes, `src/themes/${VENUS.id}/theme.json`).content, '{}');
+  assert.ok(find(changes, `src/themes/${VENUS.id}/store.json`));
+  for (const f of old) assert.deepEqual(find(changes, f.path), { path: f.path, content: null, oid: f.oid });
+  assert.deepEqual(JSON.parse(find(changes, PATHS.theme).content), { theme: VENUS.id });
+  assert.deepEqual(JSON.parse(find(changes, PATHS.icons).content), { pack: `${VENUS.id}/x` });
+});
+
+test('a system icon pack and another theme stay as they are', () => {
+  const site = [file(PATHS.theme, json({ theme: 'saturn' })), file(PATHS.icons, json({ pack: 'phosphor' }))];
+  const changes = moveChanges(VENUS, 'venus', next, [], site, PATHS);
+  assert.equal(find(changes, PATHS.theme), undefined);
+  assert.equal(find(changes, PATHS.icons), undefined);
+});
+
+test('moving an app renames its settings file and keeps the sorted list', () => {
+  const settings = '{ "key":  "kept as it is" }\n';
+  const site = [
+    file(PATHS.installed, json({ installed: ['calendly', 'mobilepay', 'zeta'] })),
+    file('src/data/apps/mobilepay.json', settings),
+  ];
+  const changes = moveChanges(MOBILEPAY, 'mobilepay', { files: [], record: next.record }, [], site, PATHS);
+  assert.deepEqual(find(changes, 'src/data/apps/mobilepay.json'), {
+    path: 'src/data/apps/mobilepay.json',
+    content: null,
+    oid: 'oid-src/data/apps/mobilepay.json',
+  });
+  assert.deepEqual(find(changes, `src/data/apps/${MOBILEPAY.id}.json`), {
+    path: `src/data/apps/${MOBILEPAY.id}.json`,
+    content: settings,
+    oid: null,
+  });
+  assert.deepEqual(JSON.parse(find(changes, PATHS.installed).content).installed, ['calendly', MOBILEPAY.id, 'zeta'].sort());
+});
+
+test('moving an app rewrites block-settings, popups and the cookie list, and only the legacy values', () => {
+  const site = [
+    file(PATHS.blockSettings, json({ off: ['popups/mobilepay', 'popups/other', 'text', 'x/mobilepay-2'] })),
+    file('src/data/popups/a.json', json({ type: 'mobilepay', title: 'A' })),
+    file('src/data/popups/b.json', json({ type: 'other' })),
+    file('src/data/cookie-list/c.json', json({ name: 'mobilepay', app: 'mobilepay' })),
+    file('src/data/cookie-list/d.json', json({ app: 'other' })),
+  ];
+  const changes = moveChanges(MOBILEPAY, 'mobilepay', { files: [], record: next.record }, [], site, PATHS);
+  assert.deepEqual(JSON.parse(find(changes, PATHS.blockSettings).content).off, [
+    `popups/${MOBILEPAY.id}`,
+    'popups/other',
+    'text',
+    'x/mobilepay-2',
+  ]);
+  assert.equal(JSON.parse(find(changes, 'src/data/popups/a.json').content).type, MOBILEPAY.id);
+  assert.equal(JSON.parse(find(changes, 'src/data/popups/a.json').content).title, 'A');
+  assert.equal(find(changes, 'src/data/popups/b.json'), undefined);
+  const cookie = JSON.parse(find(changes, 'src/data/cookie-list/c.json').content);
+  assert.deepEqual(cookie, { name: 'mobilepay', app: MOBILEPAY.id });
+  assert.equal(find(changes, 'src/data/cookie-list/d.json'), undefined);
+  assert.equal(find(changes, PATHS.theme), undefined);
+});
+
+test('an item without a legacy gets the normal update and no delete', () => {
+  const old = [file(`src/themes/${VENUS.id}/old.json`, '{}'), file(`src/themes/${VENUS.id}/theme.json`, '{}')];
+  const changes = moveChanges({ id: VENUS.id }, null, next, old, [file(PATHS.theme, json({ theme: 'venus' }))], PATHS);
+  assert.deepEqual(find(changes, `src/themes/${VENUS.id}/old.json`), {
+    path: `src/themes/${VENUS.id}/old.json`,
+    content: null,
+    oid: 'oid-src/themes/theme_fa395ad84690acbd/old.json',
+  });
+  assert.equal(find(changes, PATHS.theme), undefined);
+  assert.equal(changes.filter((c) => c.content === null).length, 1);
+});
+
+test('a move with a release that adds a cookie changes each cookie-list file once', () => {
+  const old = file('src/data/cookie-list/a.json', json({ name: 'a', app: 'mobilepay' }), 'oid-a');
+  const site = [old];
+  const moved = moveChanges(MOBILEPAY, 'mobilepay', { files: [], record: next.record }, [], site, PATHS);
+  // What the editor's cookieChanges does for the new release on the site after the move: the new cookie is a new file.
+  const after = appliedTo(site, moved);
+  assert.equal(JSON.parse(after[0].text).app, MOBILEPAY.id);
+  const cookies = [
+    { path: 'src/data/cookie-list/b.json', content: json({ name: 'b', app: MOBILEPAY.id }), oid: null },
+    { path: 'src/data/cookie-list/a.json', content: null, oid: after[0].oid },
+  ];
+  const all = mergeChanges(moved, cookies);
+  assert.equal(new Set(all.map((c) => c.path)).size, all.length);
+  assert.deepEqual(find(all, 'src/data/cookie-list/a.json'), { path: 'src/data/cookie-list/a.json', content: null, oid: 'oid-a' });
+  assert.equal(JSON.parse(find(all, 'src/data/cookie-list/b.json').content).app, MOBILEPAY.id);
+  // A cookie that stays: only the rewrite, once, under the new id.
+  const kept = mergeChanges(moved, []);
+  assert.equal(kept.filter((c) => c.path === old.path).length, 1);
+  assert.equal(JSON.parse(find(kept, old.path).content).app, MOBILEPAY.id);
+});
+
+test('installedHere: counts a new id, or a legacy copy from the store, as installed', () => {
+  const entry = { id: 'app_ae0b5e17636668bc', legacy: 'mobilepay' };
+  assert.equal(installedHere(entry, ['app_ae0b5e17636668bc'], []), true);
+  assert.equal(installedHere(entry, ['mobilepay'], [{ id: 'mobilepay', store: {} }]), true);
+  assert.equal(installedHere(entry, ['mobilepay'], [{ id: 'mobilepay' }]), false);
+  assert.equal(installedHere(entry, [], [{ id: 'mobilepay', store: {} }]), false);
+  assert.equal(installedHere({ id: 'app_1' }, ['other'], [{ id: 'other', store: {} }]), false);
+});

package/src/legacyMove.ts

@@ -0,0 +1,131 @@
+// The legacy move: a store app or theme installed under its old id (folder `src/apps/mailchimp/`) moves to its permanent
+// id (`app_` or `theme_` plus 16 hex) when it is updated. Exposes legacyOf (is a legacy copy installed?), installedHere (does the store list show an entry as installed?) and moveChanges
+// (one list of changes: new folder, old files deleted, every id rewritten; docs/store-ids.md Table 1). Pure; the site's
+// paths are passed in (store.ts binds them to the site's config). Depends on lib/folderChanges.mjs.
+import type { Change, RepoFile } from './github';
+import { folderChanges } from '../lib/folderChanges.mjs';
+import type { StoreRecord } from './store';
+
+/** Where a site keeps what names an app or a theme (the site's config, and the popups' folder). */
+export type SitePaths = {
+  appsFolder: string;
+  themesFolder: string;
+  installed: string;
+  settings: string;
+  theme: string;
+  icons: string;
+  blockSettings: string;
+  popups: string;
+  cookieList: string;
+};
+
+type Next = { files: { path: string; content: string | Uint8Array }[]; record: StoreRecord };
+
+/** The old id of a catalog entry (`entry.legacy`) when a folder of that name is installed from the store (`folders`: the
+ * apps or themes the site has, with `store` when the folder has a store.json); else null (none, or the site's own). */
+export function legacyOf(entry: { legacy?: string }, folders: { id: string; store?: unknown }[]): string | null {
+  return entry.legacy && folders.some((f) => f.id === entry.legacy && f.store) ? entry.legacy : null;
+}
+
+/** Whether the store's list counts a catalog entry as installed: its own id is installed, or its old id (`entry.legacy`)
+ * is, as a copy from the store (`folders`: the apps or themes the site has). `installed`: the ids installed. */
+export function installedHere(
+  entry: { id: string; legacy?: string },
+  installed: string[],
+  folders: { id: string; store?: unknown }[],
+): boolean {
+  const old = legacyOf(entry, folders);
+  return installed.includes(entry.id) || (old !== null && installed.includes(old));
+}
+
+const parse = (text: string): any => {
+  try {
+    return JSON.parse(text);
+  } catch {
+    return undefined;
+  }
+};
+
+/** A file with a value changed (`change` gives the new JSON, or undefined when nothing in it names the legacy id). */
+function rewrite(files: RepoFile[], change: (json: any) => any): Change[] {
+  return files.flatMap((f) => {
+    const json = parse(f.text);
+    const out = json && typeof json === 'object' ? change(json) : undefined;
+    return out === undefined ? [] : [{ path: f.path, content: `${JSON.stringify(out, null, 2)}\n`, oid: f.oid }];
+  });
+}
+
+const inFolder = (site: RepoFile[], folder: string) => site.filter((f) => f.path.startsWith(`${folder}/`) && f.path.endsWith('.json'));
+const only = (site: RepoFile[], path: string) => site.filter((f) => f.path === path);
+
+/** The changes that make the folder `current` (the legacy folder, or the item's own when it has no legacy) the store's
+ * version of `entry` in its permanent folder. With a legacy id they also delete the legacy folder's files and rewrite
+ * every value that names it (`site`: the site's files now). In one commit. */
+export function moveChanges(
+  entry: { id: string },
+  legacy: string | null,
+  next: Next,
+  current: RepoFile[],
+  site: RepoFile[],
+  paths: SitePaths,
+): Change[] {
+  const isApp = entry.id.startsWith('app_');
+  const folder = (id: string) => `${isApp ? paths.appsFolder : paths.themesFolder}/${id}`;
+  if (!legacy) return folderChanges(folder(entry.id), current, next);
+  const swap = (v: unknown) => (v === legacy ? entry.id : undefined);
+  const changes = [...folderChanges(folder(entry.id), [], next), ...folderChanges(folder(legacy), current, null)];
+  if (isApp) {
+    changes.push(
+      ...rewrite(only(site, paths.installed), (j) =>
+        Array.isArray(j.installed) && j.installed.includes(legacy)
+          ? { ...j, installed: [...new Set(j.installed.map((x: unknown) => (x === legacy ? entry.id : x)))].sort() }
+          : undefined,
+      ),
+      ...rewrite(inFolder(site, paths.popups), (j) => (swap(j.type) ? { ...j, type: entry.id } : undefined)),
+      ...rewrite(inFolder(site, paths.cookieList), (j) => (swap(j.app) ? { ...j, app: entry.id } : undefined)),
+      ...rewrite(only(site, paths.blockSettings), (j) => {
+        const off = Array.isArray(j.off)
+          ? j.off.map((x: unknown) => (typeof x === 'string' && x.endsWith(`/${legacy}`) ? `${x.slice(0, -legacy.length)}${entry.id}` : x))
+          : [];
+        return off.some((x: unknown, i: number) => x !== j.off[i]) ? { ...j, off } : undefined;
+      }),
+    );
+    // The settings file is renamed with its content kept.
+    const old = site.find((f) => f.path === `${paths.settings}/${legacy}.json`);
+    if (old)
+      changes.push(
+        { path: old.path, content: null, oid: old.oid },
+        { path: `${paths.settings}/${entry.id}.json`, content: old.text, oid: null },
+      );
+  } else {
+    changes.push(
+      ...rewrite(only(site, paths.theme), (j) => (swap(j.theme) ? { ...j, theme: entry.id } : undefined)),
+      ...rewrite(only(site, paths.icons), (j) =>
+        typeof j.pack === 'string' && j.pack.startsWith(`${legacy}/`)
+          ? { ...j, pack: `${entry.id}${j.pack.slice(legacy.length)}` }
+          : undefined,
+      ),
+    );
+  }
+  return changes;
+}
+
+/** The site's files as they are after `changes` (a changed file with its new text, a deleted one gone, a new one added),
+ * for what must be worked out from the site after a move (the cookie list). */
+export function appliedTo(site: RepoFile[], changes: Change[]): RepoFile[] {
+  const by = new Map(changes.map((c) => [c.path, c]));
+  const kept = site.flatMap((f) => {
+    const c = by.get(f.path);
+    return !c ? [f] : typeof c.content === 'string' ? [{ ...f, text: c.content }] : [];
+  });
+  const added = changes.filter((c) => typeof c.content === 'string' && !site.some((f) => f.path === c.path));
+  return [...kept, ...added.map((c) => ({ path: c.path, oid: '', text: c.content as string }))];
+}
+
+/** Two lists of changes as one: for a path in both, the later one wins (a file rewritten by the move, then deleted by the
+ * cookie list), its `oid` that of the site's file; so no file is changed twice. */
+export function mergeChanges(first: Change[], later: Change[]): Change[] {
+  const oid = new Map(first.map((c) => [c.path, c.oid]));
+  const paths = new Set(later.map((c) => c.path));
+  return [...first.filter((c) => !paths.has(c.path)), ...later.map((c) => (oid.has(c.path) ? { ...c, oid: oid.get(c.path)! } : c))];
+}

package/src/markdown.mjs

@@ -130,8 +130,8 @@ export const textColorSchema = $markSchema('textColor', () => ({
   },
 }));
 
-// The colour of a section (packages/editor/lib/section-marker.mjs): the marker line before an H2, or before the label above it
-// (eyebrow), is read into the H2's attribute `section` and written back before it. It must be read before remarkSiteBlocks
+// The colour of a section (packages/editor/lib/section-marker.mjs): the marker line before an H1 or H2, or before the label above it
+// (eyebrow), is read into the heading's attribute `section` and written back before it. It must be read before remarkSiteBlocks
 // sees it, so it is the first plugin of that kind in makeEditor. A marker with nothing to colour is dropped.
 const htmlOf = (node) => {
   const only = node?.type === 'paragraph' && node.children?.length === 1 ? node.children[0] : node;
@@ -143,12 +143,12 @@ const remarkSectionMarkers = $remark('remarkSectionMarkers', () => () => (tree)
     const color = markerColor(htmlOf(child));
     if (color === null) return true;
     const next = isLabelLine(htmlOf(parts[i + 1])) ? parts[i + 2] : parts[i + 1];
-    if (next?.type === 'heading' && next.depth === 2) next.section = color;
+    if (next?.type === 'heading' && next.depth <= 2) next.section = color;
     return false;
   });
 });
 
-// The commonmark heading with the section colour as an attribute (only an H2 has one). Written back before the heading, or
+// The commonmark heading with the section colour as an attribute (only an H1 or H2 has one). Written back before the heading, or
 // before its label, which is already the last thing written (a line of HTML).
 /** @type {import('@milkdown/kit/utils').$NodeSchema<'heading'>} */
 export const headingWithSection = headingSchema.extendSchema((prev) => (ctx) => {
@@ -159,7 +159,7 @@ export const headingWithSection = headingSchema.extendSchema((prev) => (ctx) =>
     parseMarkdown: {
       match: base.parseMarkdown.match,
       runner: (state, node, type) => {
-        state.openNode(type, { level: node.depth, section: node.depth === 2 ? (node.section ?? null) : null });
+        state.openNode(type, { level: node.depth, section: node.depth <= 2 ? (node.section ?? null) : null });
         state.next(node.children);
         state.closeNode();
       },
@@ -168,8 +168,11 @@ export const headingWithSection = headingSchema.extendSchema((prev) => (ctx) =>
       match: base.toMarkdown.match,
       runner: (state, node) => {
         const { level, section } = node.attrs;
-        const written = state.top()?.children;
-        if (level === 2 && SECTION_COLORS.includes(section) && Array.isArray(written)) {
+        const top = state.top();
+        // The document has no children before its first node is written: a heading at the very top starts them.
+        if (top && !top.children) top.children = [];
+        const written = top?.children;
+        if (level <= 2 && SECTION_COLORS.includes(section) && Array.isArray(written)) {
           const last = written.at(-1);
           const at = last?.type === 'html' && isLabelLine(last.value) ? written.length - 1 : written.length;
           written.splice(at, 0, { type: 'html', value: sectionMarker(section) });

package/src/markdown.test.mjs

@@ -1,4 +1,4 @@
-// Tests for src/markdown.mjs: the section colour marker is read into the H2's `section` attribute and written back as it was
+// Tests for src/markdown.mjs: the section colour marker is read into the H1's or H2's `section` attribute and written back as it was
 // (before the label, if any). Milkdown needs a DOM; jsdom stands in. Run: node --test packages/editor/src/markdown.test.mjs
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
@@ -46,6 +46,20 @@ test('a coloured section comes back byte for byte', async () => {
   assert.deepEqual(nodes, ['heading', 'paragraph', 'heading:tint', 'paragraph', 'heading:accent', 'paragraph']);
 });
 
+test('a coloured H1 comes back byte for byte', async () => {
+  const text = marked('tint', '# About\n\nText\n');
+  const { saved, nodes } = await through(text);
+  assert.equal(saved, text);
+  assert.deepEqual(nodes, ['heading:tint', 'paragraph']);
+});
+
+test('the marker comes before a label above the H1', async () => {
+  const text = marked('accent', '<p class="block-eyebrow">Welcome</p>\n\n# About\n\nText\n');
+  const { saved, nodes } = await through(text);
+  assert.equal(saved, text);
+  assert.ok(nodes.includes('heading:accent'));
+});
+
 test('a text without markers is written as before', async () => {
   const text = '# Title\n\n## One\n\nText\n';
   assert.equal((await through(text)).saved, text);
@@ -58,7 +72,7 @@ test('the marker comes before a label above the H2', async () => {
   assert.ok(nodes.includes('heading:surface'));
 });
 
-test('a marker not followed by an H2 is dropped', async () => {
+test('a marker not followed by an H1 or H2 is dropped', async () => {
   assert.deepEqual(await through(marked('tint', 'Plain text\n\n## B\n')), {
     saved: 'Plain text\n\n## B\n',
     nodes: ['paragraph', 'heading'],

package/src/menuOpen.ts

@@ -1,9 +1,13 @@
 // Whether the main menu's drawer is open, for the drawer (MainMenu.tsx) and the menu buttons (Screen.tsx, the rail): at expanded
 // and wider the standard drawer's remembered state (sidebar.ts), below it the modal drawer's, which is not remembered.
-// Which one is on screen is lib/menu-layout.mjs. Exposes useMenuOpen.
+// Which one is on screen is lib/menu-layout.mjs. From expanded to below large the standard drawer yields to the rail while
+// the standard side panel is open (drawerYield.mjs, sidePanel.ts); the remembered state does not change for that.
+// Exposes useMenuOpen.
 import { useCallback, useSyncExternalStore } from 'react';
 import { setSidebar, useSidebar } from './sidebar';
-import { useMenuLayout } from './ui';
+import { drawerShown } from './drawerYield.mjs';
+import { setDrawerReopened, useDrawerReopened, usePanelOpen } from './sidePanel';
+import { useAtLeast, useMenuLayout } from './ui';
 
 let modalOpen = false;
 const listeners = new Set<() => void>();
@@ -28,7 +32,19 @@ export function useMenuOpen() {
   const wide = useMenuLayout().expanded === 'standard';
   const standard = useSidebar();
   const modal = useModalOpen();
-  const open = wide ? standard : modal;
-  const setOpen = useCallback((next: boolean) => (wide ? setSidebar(next) : setModal(next)), [wide]);
+  const panel = usePanelOpen();
+  const large = useAtLeast('large');
+  const reopened = useDrawerReopened();
+  const open = wide ? drawerShown(standard, panel, large, reopened) : modal;
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (!wide) return setModal(next);
+      // While the drawer yields, opening it is for as long as the panel stays open; closing it is remembered.
+      if (next && panel && !large) return setDrawerReopened(true);
+      setDrawerReopened(false);
+      setSidebar(next);
+    },
+    [wide, panel, large],
+  );
   return { open, setOpen, toggle: () => setOpen(!open) };
 }

package/src/movedRoutes.mjs

@@ -18,8 +18,8 @@ export const MOVED = /** @type {Record<string, string>} */ ({
   'videresendelser/ikke-fundet': 'seo/videresendelser/ikke-fundet',
   // The settings of the booking and newsletter apps were on a screen "Promovering"; they are on the apps' own pages now.
   promovering: 'apps',
-  'promovering/calendly': 'apps/calendly',
-  'promovering/mailchimp': 'apps/mailchimp',
+  'promovering/calendly': 'apps/app_a030dfba69793996',
+  'promovering/mailchimp': 'apps/app_5c4b6ba067ef127f',
   // The header's menus and settings were on a screen of their own under "Globalt"; they are under "Udseende" now.
   header: 'udseende/header',
   // The footer's form was the file's own screen; it is under "Udseende" now.

package/src/movedRoutes.test.mjs

@@ -20,3 +20,8 @@ test('the extra moves come first', () => {
   assert.equal(movedRoute('butik', { butik: 'indstillinger/appstore' }), 'indstillinger/appstore');
   assert.equal(movedRoute('tema', { butik: 'x' }), 'udseende');
 });
+
+test('the old booking and newsletter settings open the apps by their permanent ids', () => {
+  assert.equal(movedRoute('promovering/calendly'), 'apps/app_a030dfba69793996');
+  assert.equal(movedRoute('promovering/mailchimp'), 'apps/app_5c4b6ba067ef127f');
+});

package/src/pageH1Panel.d.mts

@@ -0,0 +1,4 @@
+/** Puts the page's header (the layout's `article > header`) in a panel of this colour, with the intro (HTML, in the text's own
+ * class) after it; no colour (null) leaves the header without a panel. A panel the site's page has is first taken away.
+ * @param {Document} doc @param {string | null} color @param {string} introHtml */
+export function setH1Panel(doc: Document, color: string | null, introHtml: string): void;

package/src/pageH1Panel.mjs

@@ -0,0 +1,31 @@
+// The preview's copy of the coloured H1 panel of a page (theme/layouts/PageLayout.astro): the heading and the text up to the first
+// H2 in one section (data-editor="h1-section"). Exposes setH1Panel, which makes, changes or takes away that panel in the page's
+// document, whatever the page on the site has. Depends on lib/text-sections.mjs (sectionClass); used by pagePreview.tsx.
+import { sectionClass } from '../lib/text-sections.mjs';
+
+/** Puts the page's header (the layout's `article > header`) in a panel of this colour, with the intro (HTML, in the text's own
+ * class) after it; no colour (null) leaves the header without a panel. A panel the site's page has is first taken away.
+ * @param {Document} doc @param {string | null} color @param {string} introHtml */
+export function setH1Panel(doc, color, introHtml) {
+  const header = doc.querySelector('article > header');
+  const text = doc.querySelector('[data-editor="text"]');
+  if (!header || !text) return;
+  const old = header.querySelector('[data-editor="h1-section"]');
+  if (old) {
+    old.querySelector('[data-editor="intro"]')?.remove();
+    old.replaceWith(...Array.from(old.childNodes));
+  }
+  if (!color) return;
+  const panel = doc.createElement('section');
+  panel.setAttribute('data-editor', 'h1-section');
+  panel.className = sectionClass(color);
+  panel.append(...Array.from(header.childNodes));
+  if (introHtml.trim()) {
+    const intro = doc.createElement(text.tagName);
+    intro.setAttribute('data-editor', 'intro');
+    intro.className = text.className;
+    intro.innerHTML = introHtml;
+    panel.append(intro);
+  }
+  header.append(panel);
+}

package/src/pageH1Panel.test.mjs

@@ -0,0 +1,56 @@
+// Tests src/pageH1Panel.mjs: the preview puts a page's header and intro in a coloured panel, or takes the panel away.
+// Run: node --test src/pageH1Panel.test.mjs
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { JSDOM } from 'jsdom';
+import { setH1Panel } from './pageH1Panel.mjs';
+
+const PAGE = (header) =>
+  new JSDOM(`<body><article><header>${header}</header><div><div data-editor="text" class="prose">x</div></div></article></body>`).window
+    .document;
+const PLAIN = '<h1 data-editor="heading">Title</h1>';
+
+test('the header and the intro go in a panel of the colour', () => {
+  const doc = PAGE(PLAIN);
+  setH1Panel(doc, 'tint', '<p>Intro</p>');
+  const panel = doc.querySelector('header > section.text-section.text-section-tint[data-editor="h1-section"]');
+  assert.ok(panel);
+  assert.equal(panel.querySelector('h1').textContent, 'Title');
+  const intro = panel.querySelector('[data-editor="intro"]');
+  assert.equal(intro.innerHTML, '<p>Intro</p>');
+  assert.equal(intro.className, 'prose');
+});
+
+test('without an intro the panel holds the header only', () => {
+  const doc = PAGE(PLAIN);
+  setH1Panel(doc, 'accent', '  ');
+  assert.ok(doc.querySelector('[data-editor="h1-section"] h1'));
+  assert.equal(doc.querySelector('[data-editor="intro"]'), null);
+});
+
+test('no colour takes a panel away and keeps the header', () => {
+  const doc = PAGE(
+    `<section data-editor="h1-section" class="text-section text-section-tint">${PLAIN}<div data-editor="intro">a</div></section>`,
+  );
+  setH1Panel(doc, null, '');
+  assert.equal(doc.querySelector('[data-editor="h1-section"]'), null);
+  assert.equal(doc.querySelector('[data-editor="intro"]'), null);
+  assert.equal(doc.querySelector('header > h1').textContent, 'Title');
+});
+
+test('another colour replaces the panel of the site', () => {
+  const doc = PAGE(
+    `<section data-editor="h1-section" class="text-section text-section-tint">${PLAIN}<div data-editor="intro">a</div></section>`,
+  );
+  setH1Panel(doc, 'surface', '<p>b</p>');
+  assert.equal(doc.querySelectorAll('[data-editor="h1-section"]').length, 1);
+  assert.ok(doc.querySelector('.text-section-surface'));
+  assert.equal(doc.querySelector('.text-section-tint'), null);
+  assert.equal(doc.querySelector('[data-editor="intro"]').innerHTML, '<p>b</p>');
+});
+
+test('a page without a header is left as it is', () => {
+  const doc = new JSDOM('<body><div data-editor="text">x</div></body>').window.document;
+  setH1Panel(doc, 'tint', '<p>a</p>');
+  assert.equal(doc.querySelector('section'), null);
+});

package/src/pagePreview.tsx

@@ -8,7 +8,7 @@
 // puts a block that ends the text (data-editor="end", with its type in data-editor-block). Only what
 // was changed is put in, so the rest is exactly as on the site. The text is the site's Markdown
 // (Astro's pipeline, with the HTML written in it), and its blocks are drawn as in the editor
-// (registry.tsx preview), with the site's classes; a coloured section is a panel as on the site (lib/text-sections.mjs).
+// (registry.tsx preview), with the site's classes; a coloured section, and a coloured H1 with the text up to the first H2 (pageH1Panel.mjs), is a panel as on the site (lib/text-sections.mjs).
 //
 // Exposes pageDocument, usePagePreview and PageDraft, and for the preview of a part every page has (partPreview.tsx) siteShell,
 // documentHtml, htmlOf and PREVIEW_WIDTH.
@@ -25,7 +25,8 @@ import { useRef, useState, type ReactNode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { flushSync } from 'react-dom';
 import { parseBlock, splitBlocks } from '../lib/blocks.mjs';
-import { sectionClass, sectionsOf } from '../lib/text-sections.mjs';
+import { introOf, sectionClass, sectionsOf } from '../lib/text-sections.mjs';
+import { h1SectionColor, withoutH1 } from '../lib/without-h1.mjs';
 import { BREAKPOINTS, breakpointOf, type Breakpoint } from '../lib/breakpoints.mjs';
 import { processor } from '../lib/markdown';
 import { splitPicture } from '../lib/crop.mjs';
@@ -33,6 +34,7 @@ import { isPostPage, leadFill } from './postLead.mjs';
 import { preview as drawBlock, siteBlocks } from './registry';
 import { shownAt } from './images';
 import { pageH1 } from './sections.mjs';
+import { setH1Panel } from './pageH1Panel.mjs';
 import type { BlockData } from './blocks';
 import { PageFrame, BottomSheet, SegmentedButton, SheetTitle } from './ui';
 import { t } from './i18n';
@@ -144,8 +146,11 @@ export async function pageDocument(draft: PageDraft): Promise<string> {
   }
 
   if (draft.body !== undefined) {
-    // A page's H1 at the top of its text is drawn in its own place above (draft.heading), as on the site.
-    let html = await markdownHtml(pageH1(draft.body).rest);
+    // A page's H1 at the top of its text is drawn in its own place above (draft.heading), as on the site; the colour of its
+    // section (the marker before it) puts the heading and the text up to the first H2 in one panel (setH1Panel).
+    const whole = isPostPage(draft) ? '' : await markdownHtml(draft.body);
+    const h1Color = h1SectionColor(whole);
+    let html = isPostPage(draft) ? await markdownHtml(pageH1(draft.body).rest) : withoutH1(whole);
     // A block that ends the text, where the layout puts it.
     const end = doc.querySelector('[data-editor="end"]');
     const type = end?.getAttribute('data-editor-block');
@@ -171,14 +176,19 @@ export async function pageDocument(draft: PageDraft): Promise<string> {
       leadBox.innerHTML = lead;
     }
     const types = siteBlocks.map((b) => b.type);
-    text.innerHTML = sectionsOf(rest)
-      .map((run) => {
-        const inner = splitBlocks(run.html, types)
-          .map((p) => ('html' in p ? p.html : blockHtml(p.type, p.props, draft.data)))
-          .join('');
-        return run.color ? `<section class="${sectionClass(run.color)}">${inner}</section>` : inner;
-      })
-      .join('');
+    const runs = (part: string) =>
+      sectionsOf(part)
+        .map((run) => {
+          const inner = splitBlocks(run.html, types)
+            .map((p) => ('html' in p ? p.html : blockHtml(p.type, p.props, draft.data)))
+            .join('');
+          return run.color ? `<section class="${sectionClass(run.color)}">${inner}</section>` : inner;
+        })
+        .join('');
+    // With a column beside the text the panel holds the heading only, as on the site.
+    const { intro, rest: below } = h1Color && !text.closest('[data-side]') ? introOf(rest) : { intro: '', rest };
+    setH1Panel(doc, h1Color, runs(intro));
+    text.innerHTML = runs(below);
   }
   return documentHtml(doc);
 }

package/src/sectionFrame.ts

@@ -1,5 +1,5 @@
-// The dotted frame round each H2 section of a page or blog post: sets data-section-part (start, middle, end, only) and
-// data-section-color (the H2's section colour) on the top-level nodes of a section, which editor.css draws. Exposes
+// The dotted frame round each H1 or H2 section of a page or blog post: sets data-section-part (start, middle, end, only) and
+// data-section-color (the heading's section colour) on the top-level nodes of a section, which editor.css draws. Exposes
 // sectionFrame (a Milkdown plugin). Uses lib/section-ranges.mjs and src/sectionState.mjs.
 import { $prose } from '@milkdown/kit/utils';
 import type { Node } from '@milkdown/kit/prose/model';
@@ -29,7 +29,7 @@ function sectionDecorations(doc: Node): Decoration[] {
   );
 }
 
-/** on: false for a fixed page's text (MarkdownEditor's `sections`), whose H2s are the names of its sections: no frame. */
+/** on: false for a fixed page's text (MarkdownEditor's `sections`), whose headings are the names of its sections: no frame. */
 export const sectionFrame = (on: boolean) =>
   $prose(
     () =>

package/src/sectionState.d.mts

@@ -1,17 +1,17 @@
-/** 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: import("@milkdown/kit/prose/state").EditorState): {
     pos: number;
     color: string | null;
 } | 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: {
     state: import("@milkdown/kit/prose/state").EditorState;
     dispatch: (tr: import("@milkdown/kit/prose/state").Transaction) => void;
 }, color: string | null): boolean;
-/** 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: import("@milkdown/kit/prose/model").Node[], range: {
     from: number;