@morphemecms/cms 0.9.0-next-20261105122349 → 0.9.0

package/src/i18n/en-US/library.ts

@@ -100,6 +100,10 @@ export const library = {
   changeMotion: 'Change motion',
   motionSaved: (change: string) => `${change}. The website gets the new motion in a few minutes.`,
   motionCommit: (name: string) => `Editor: change motion to ${name}`,
+  /** Appearance › Header (HeaderSettings.tsx): the group with the menu button's side. */
+  headerMenuButton: 'Menu button',
+  /** Appearance › Footer (FooterSettings.tsx): the groups of the footer's fields. */
+  footerSections: { text: 'Text', contact: 'Contact', links: 'Links' },
   /** Under "Sidekolonne" (SideColumn.tsx): the choice of no block and what is under it, what is said when no block can be
    * drawn there, asked before one is chosen, the question's button, what is said after it is saved, and the commit, in
    * the site's language (siteT). */

package/src/i18n/en-US/preview.ts

@@ -7,6 +7,9 @@ export const preview = {
   /** How wide the page is shown: Material 3's window sizes, each at its narrowest. */
   size: 'Window size',
   sizes: { compact: 'Compact', medium: 'Medium', expanded: 'Expanded', large: 'Large', extraLarge: 'Extra-large' },
+  /** The preview of a part every page has (partPreview.tsx, the header): on a phone and on a computer. */
+  phone: 'Phone',
+  computer: 'Computer',
   making: 'Loading the preview…',
   failed: (error: string) => `Couldn’t create the preview: ${error}`,
   notHere: 'That page can’t be previewed',

package/src/i18n/en-US/text.ts

@@ -26,7 +26,8 @@ export const text = {
   color: 'Color',
   colors: { accent: 'Accent color', muted: 'Muted text' },
   noColor: 'No color',
-  /** The button for the colour of a section (an H2 and what follows it), and the choices in its menu (packages/editor/lib/section-marker.mjs). */
+  /** The button for the settings of a section (an H2 and what follows it), and its sheet's colour choices (packages/editor/lib/section-marker.mjs). */
+  sectionSettings: 'Section settings',
   sectionColor: 'Section color',
   sectionColors: { none: 'None', surface: 'Surface', tint: 'Tint', accent: 'Accent' },
   /** The sheet of a link (LinkSheet.tsx). */

package/src/images.ts

@@ -132,15 +132,18 @@ export async function prepareFile(file: File, taken: string[]): Promise<Upload>
 export const publicPath = (path: string) => path.replace(/^public/, '');
 
 // The pictures added in a form (a page, a fixed page), kept in the browser until "Gem", which saves
-// them in the same commit. upload: pick one and make it ready; added: those not saved yet, newest
+// them in the same commit. upload: pick one and make it ready; uploading: true while a chosen picture
+// is made ready (a button shows busy); added: those not saved yet, newest
 // first (offered in the gallery, MediaPicker.tsx); saving: the pictures a text uses.
 export function useUploads(notify: (status: Status) => void) {
   const [uploads, setUploads] = useState<Upload[]>([]);
+  const [uploading, setUploading] = useState(false);
 
   async function upload(): Promise<Upload | null> {
     const file = await pickImage();
     if (!file) return null;
     notify({ text: t.app.preparingPicture });
+    setUploading(true);
     try {
       const prepared = await prepareImage(file);
       setUploads((u) => [...u, prepared]);
@@ -149,6 +152,8 @@ export function useUploads(notify: (status: Status) => void) {
     } catch (e) {
       notify({ text: (e as Error).message, error: true });
       return null;
+    } finally {
+      setUploading(false);
     }
   }
 
@@ -157,7 +162,7 @@ export function useUploads(notify: (status: Status) => void) {
   const usedIn = (text: string) => uploads.filter((u) => !u.saved && text.includes(publicPath(u.path)));
   const markSaved = (pictures: Upload[]) => setUploads((all) => all.map((u) => (pictures.includes(u) ? { ...u, saved: true } : u)));
 
-  return { upload, added, usedIn, markSaved };
+  return { upload, uploading, added, usedIn, markSaved };
 }
 
 export type Uploads = ReturnType<typeof useUploads>;

package/src/menuChildren.ts

@@ -1,7 +1,6 @@
-// The second level of the main menu (MainMenu.tsx, lib/menu.mjs menuTree): the lists under Lists, the menus under Header,
+// The second level of the main menu (MainMenu.tsx, lib/menu.mjs menuTree): the lists under Lists,
 // the parts under Business, the apps installed under Apps and the two lists under Redirects. Exposes childrenOf.
 // Uses site.ts (collections, apps, companyParts), Library.tsx (hrefOf, listsShown) and Redirects.tsx (TAB_ROUTES).
-import { header } from '@site/editor';
 import { installedApps } from './apps';
 import { t } from './i18n';
 import { hrefOf } from './Library';
@@ -20,7 +19,6 @@ const listOf = (ids: string[]): MenuChild[] =>
 /** The sub-items of a menu item, in their order: none for most. */
 export function childrenOf(id: string, files: RepoFile[]): MenuChild[] {
   if (id === 'lister') return listOf(listsShown(files));
-  if (id === 'header') return listOf(header);
   if (id === 'virksomheden') return companyParts.map((p) => ({ id: p.id, label: p.label, href: `#virksomheden/${p.id}` }));
   if (id === 'apps') {
     const installed = installedApps(files);

package/src/movedRoutes.d.mts

@@ -0,0 +1,3 @@
+/** Where each moved screen is now, by its old address. */
+export const MOVED: Record<string, string>;
+export function movedRoute(route: string, more?: Record<string, string>): string;

package/src/movedRoutes.mjs

@@ -0,0 +1,35 @@
+// The editor's screens that have moved, by their old address after the "#": a link or a bookmark to one opens it where
+// it is now. Exposes MOVED and movedRoute (pure). Used by App.tsx (routeOf), which adds the app store's own.
+
+/** Where each moved screen is now, by its old address. */
+export const MOVED = /** @type {Record<string, string>} */ ({
+  farver: 'udseende/farver',
+  'virksomheden/logo': 'udseende/logo',
+  'tema/blokvalg': 'blokvalg',
+  dele: 'udseende/dele',
+  tema: 'udseende',
+  'tema/farver': 'udseende/farver',
+  'tema/logo': 'udseende/logo',
+  'tema/dele': 'udseende/dele',
+  'tema/dele/editor': 'udseende/dele/editor',
+  'virksomheden/bank': 'virksomheden/betaling/bank',
+  videresendelser: 'seo/videresendelser',
+  'videresendelser/alle': 'seo/videresendelser/alle',
+  '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',
+  // 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.
+  'src/data/footer.json': 'udseende/footer',
+});
+
+/**
+ * The address a screen is at now: where it moved to (`more` first, then MOVED), else the same address.
+ * @param {string} route
+ * @param {Record<string, string>} [more]
+ * @returns {string}
+ */
+export const movedRoute = (route, more = {}) => more[route] ?? MOVED[route] ?? route;

package/src/movedRoutes.test.mjs

@@ -0,0 +1,22 @@
+// Tests movedRoutes.mjs: an old address opens the screen where it is now, others stay.
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { movedRoute } from './movedRoutes.mjs';
+
+test('the old header screen opens Appearance › Header', () => {
+  assert.equal(movedRoute('header'), 'udseende/header');
+});
+
+test('the old footer form opens Appearance › Footer', () => {
+  assert.equal(movedRoute('src/data/footer.json'), 'udseende/footer');
+});
+
+test('an address that has not moved stays', () => {
+  assert.equal(movedRoute('udseende/header'), 'udseende/header');
+  assert.equal(movedRoute('lister'), 'lister');
+});
+
+test('the extra moves come first', () => {
+  assert.equal(movedRoute('butik', { butik: 'indstillinger/appstore' }), 'indstillinger/appstore');
+  assert.equal(movedRoute('tema', { butik: 'x' }), 'udseende');
+});

package/src/pagePreview.tsx

@@ -10,6 +10,9 @@
 // (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).
 //
+// Exposes pageDocument, usePagePreview and PageDraft, and for the preview of a part every page has (partPreview.tsx) siteShell,
+// documentHtml, htmlOf and PREVIEW_WIDTH.
+//
 // The page is shown in a frame without scripts (sandbox), so nothing of the site runs on the editor's
 // address, where its login is kept, and its links lead nowhere. A new page or post is shown in the
 // page of another one. As on the site but for this: a changed text has the pictures themselves (not
@@ -56,9 +59,8 @@ export type PageDraft = {
 // but those that read the site's files.
 const markdownHtml = async (markdown: string) => String(await processor.process(markdown));
 
-// A block drawn as in the editor, as HTML.
-function blockHtml(type: string, props: Record<string, unknown>, data: BlockData) {
-  const drawn: ReactNode = drawBlock(type, props, data);
+/** What React draws (a block, a part of the header drawn with the theme's components), as HTML. */
+export function htmlOf(drawn: ReactNode) {
   if (!drawn) return '';
   const box = document.createElement('div');
   const root = createRoot(box);
@@ -68,6 +70,9 @@ function blockHtml(type: string, props: Record<string, unknown>, data: BlockData
   return html;
 }
 
+// A block drawn as in the editor, as HTML.
+const blockHtml = (type: string, props: Record<string, unknown>, data: BlockData) => htmlOf(drawBlock(type, props, data));
+
 // A picture made ready in this visit, which the site does not have yet (images.ts shownAt), in the
 // page itself.
 async function inline(src: string) {
@@ -89,25 +94,34 @@ async function sitePage(address: string) {
   return new DOMParser().parseFromString(await res.text(), 'text/html');
 }
 
+/** The first of the site's pages (their addresses) that has a part (`has`, a selector), without its scripts and with its own
+ * addresses as on the site, for a frame (PageFrame); a link in it opens nothing (target, and no popups in the frame).
+ * Also for the preview of a part on every page (partPreview.tsx). */
+export async function siteShell(addresses: string | string[], has: string): Promise<Document> {
+  for (const address of [addresses].flat()) {
+    const doc = await sitePage(address);
+    if (!doc.querySelector(has)) continue;
+    doc.querySelectorAll('script').forEach((s) => s.remove());
+    const base = doc.createElement('base');
+    base.href = new URL(address, location.href).href;
+    base.target = '_blank';
+    doc.head.prepend(base);
+    return doc;
+  }
+  throw new Error(t.preview.notHere);
+}
+
+/** A page made ready (siteShell) as HTML for a frame, with the pictures made ready in this visit in it. */
+export async function documentHtml(doc: Document): Promise<string> {
+  await Promise.all(
+    [...doc.querySelectorAll('img')].map(async (img) => img.setAttribute('src', await inline(img.getAttribute('src') ?? ''))),
+  );
+  return `<!doctype html>\n${doc.documentElement.outerHTML}`;
+}
+
 /** The page with the draft in it, as HTML for a frame (PageFrame). */
 export async function pageDocument(draft: PageDraft): Promise<string> {
-  let doc: Document | null = null;
-  let shell = '';
-  for (const address of [draft.shell].flat()) {
-    const page = await sitePage(address);
-    if (page.querySelector('[data-editor="text"]')) {
-      doc = page;
-      shell = address;
-      break;
-    }
-  }
-  if (!doc) throw new Error(t.preview.notHere);
-  doc.querySelectorAll('script').forEach((s) => s.remove());
-  // Its own addresses as on the site; a link opens nothing (target, and no popups in the frame).
-  const base = doc.createElement('base');
-  base.href = new URL(shell, location.href).href;
-  base.target = '_blank';
-  doc.head.prepend(base);
+  const doc = await siteShell(draft.shell, '[data-editor="text"]');
 
   const heading = doc.querySelector('[data-editor="heading"]');
   if (heading && draft.headingHtml) heading.innerHTML = draft.headingHtml;
@@ -166,17 +180,14 @@ export async function pageDocument(draft: PageDraft): Promise<string> {
       })
       .join('');
   }
-
-  await Promise.all(
-    [...doc.querySelectorAll('img')].map(async (img) => img.setAttribute('src', await inline(img.getAttribute('src') ?? ''))),
-  );
-  return `<!doctype html>\n${doc.documentElement.outerHTML}`;
+  return documentHtml(doc);
 }
 
-// The widths the page is shown at: Material 3's breakpoints, each at the narrowest window it has, so its tightest
-// layout is seen; compact at a common phone's.
+// The sizes the page is shown at: Material 3's breakpoints.
 const SIZES: Breakpoint[] = ['compact', 'medium', 'expanded', 'large', 'extraLarge'];
-const WIDTH: Record<Breakpoint, number> = { ...BREAKPOINTS, compact: 390 };
+/** The width of the page at each size: the narrowest window it has, so its tightest layout is seen; compact at a common
+ * phone's. Also the preview of a part (partPreview.tsx). */
+export const PREVIEW_WIDTH: Record<Breakpoint, number> = { ...BREAKPOINTS, compact: 390 };
 
 /** The sheet with the preview, and how to open it with a draft (made when it opens). */
 export function usePagePreview(): [(draft: () => PageDraft | null) => void, ReactNode] {
@@ -218,7 +229,7 @@ export function usePagePreview(): [(draft: () => PageDraft | null) => void, Reac
         />
       </div>
       {html ? (
-        <PageFrame html={html} width={WIDTH[size]} title={t.preview.title} />
+        <PageFrame html={html} width={PREVIEW_WIDTH[size]} title={t.preview.title} />
       ) : (
         <p className="px-5 text-muted">{problem || t.preview.making}</p>
       )}

package/src/partPreview.tsx

@@ -0,0 +1,59 @@
+// The preview of a part every page has (the header: HeaderSettings.tsx; the footer next) as the form has it now, at once
+// and without saving: the site's front page with only that part changed (`swap`, on a copy of the page each time the form
+// changes), on a phone and on a computer (lib/breakpoints.mjs), each frame cut to the part (PageFrame `part`). Exposes
+// PartPreview. Uses pagePreview.tsx (siteShell, documentHtml, PREVIEW_WIDTH) and ui.tsx.
+import { useEffect, useState } from 'react';
+import { siteShell, documentHtml, PREVIEW_WIDTH } from './pagePreview';
+import { EmptyNote, FieldGroup, FormField, PageFrame } from './ui';
+import { t } from './i18n';
+
+// A pause after the last change before the page is drawn again, so typing does not draw it at every key.
+const SETTLE = 250;
+
+/** `part`: its data-editor name on the site's pages ("header"); `swap`: puts what the form changes into a copy of the
+ * page (a new function when the form changes). */
+export function PartPreview({ part, swap }: { part: string; swap: (doc: Document) => void }) {
+  const selector = `[data-editor="${part}"]`;
+  const [shell, setShell] = useState<Document | null>(null);
+  const [html, setHtml] = useState<string | null>(null);
+  const [problem, setProblem] = useState('');
+
+  useEffect(() => {
+    siteShell('/', selector).then(setShell, (e) => setProblem(t.preview.failed((e as Error).message)));
+  }, [selector]);
+
+  useEffect(() => {
+    if (!shell) return;
+    let stopped = false;
+    const timer = setTimeout(() => {
+      const doc = shell.cloneNode(true) as Document;
+      try {
+        swap(doc);
+      } catch (e) {
+        return setProblem(t.preview.failed((e as Error).message));
+      }
+      documentHtml(doc).then((page) => !stopped && setHtml(page));
+    }, SETTLE);
+    return () => {
+      stopped = true;
+      clearTimeout(timer);
+    };
+  }, [shell, swap]);
+
+  return (
+    <FieldGroup label={t.preview.title}>
+      {html ? (
+        <>
+          <FormField label={t.preview.phone}>
+            <PageFrame html={html} width={PREVIEW_WIDTH.compact} title={t.preview.phone} part={selector} />
+          </FormField>
+          <FormField label={t.preview.computer}>
+            <PageFrame html={html} width={PREVIEW_WIDTH.large} title={t.preview.computer} part={selector} />
+          </FormField>
+        </>
+      ) : (
+        <EmptyNote busy={!problem}>{problem || t.preview.making}</EmptyNote>
+      )}
+    </FieldGroup>
+  );
+}

package/src/schema.ts

@@ -63,6 +63,10 @@ export type Field = {
    * chosen, in place of the field's own (the status of a page: what each one means). `onPage`: offered only while
    * that relation has a choice on the page being edited (a button that opens a promotion); chosen, it is still shown. */
   options?: { label: string; value: string; icon?: Icon; hint?: string; onPage?: Relation }[];
+  /** select: the options come from the theme in use. 'templates': a page's templates, the theme's "templates" (lib/page-template.mjs); the
+   * field shows those of its options the theme offers (templateFieldOf in templateField.ts), its default is the theme's first, which
+   * is written as no key, and it is hidden while at most one is left. */
+  offered?: 'templates';
   /** select: the options are icons (their names, `icons`), shown as the icons to tap (fields.tsx). */
   icons?: boolean;
   /** select: the options side by side in a bar, the chosen one raised (SegmentedButton in ui.tsx), for two or
@@ -106,7 +110,7 @@ export type Field = {
   only?: { field: string; is: string[] };
   /** boolean: shown as a switch, with what it says when on and when off. */
   toggle?: [string, string];
-  /** Its value changes how the page is laid out (a page across the whole width): "Forhåndsvis" shows a page whose value
+  /** Its value changes how the page is laid out (its template): "Forhåndsvis" shows a page whose value
    * is changed in another page saved with the same value (EntryForm.tsx). */
   layout?: boolean;
   /** blocks: a list where each item has a `type`, one of these, which gives its fields. */
@@ -288,6 +292,8 @@ export type DataFile = {
   root?: Field;
   /** A fixed page called by its label, not its H1 (the front page). */
   byLabel?: boolean;
+  /** The site may have no such file: its screen opens on an empty one, and the first save makes the file (the header). */
+  optional?: boolean;
 };
 
 /** A fixed page's name in the editor: its H1 (`heading`), as the page has it now; the front page

package/src/sheetPlacement.d.mts

@@ -0,0 +1,3 @@
+/** Whether a step ('choose', 'fields', 'section' or none) is shown in the side panel; large: the window is at least
+ * the `large` breakpoint. */
+export function inPanel(step: any, large: any): boolean;

package/src/sheetPlacement.mjs

@@ -0,0 +1,9 @@
+// Where a step of the block sheet (BlockDialog.tsx) is shown: in a side panel at the window's end edge on a large screen
+// for the fields of a block and the section settings, else in the dialog (the choice of block always is).
+// Exposes inPanel(step, large); no dependencies.
+
+/** Whether a step ('choose', 'fields', 'section' or none) is shown in the side panel; large: the window is at least
+ * the `large` breakpoint. */
+export function inPanel(step, large) {
+  return !!large && (step === 'fields' || step === 'section');
+}

package/src/sheetPlacement.test.mjs

@@ -0,0 +1,23 @@
+// Tests for sheetPlacement.mjs: which steps of the block sheet are shown in the side panel.
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { inPanel } from './sheetPlacement.mjs';
+
+test('the fields and the section settings are in the panel on a large screen', () => {
+  assert.equal(inPanel('fields', true), true);
+  assert.equal(inPanel('section', true), true);
+});
+
+test('the choice of block is always a dialog', () => {
+  assert.equal(inPanel('choose', true), false);
+  assert.equal(inPanel('choose', false), false);
+});
+
+test('below large everything is a dialog', () => {
+  assert.equal(inPanel('fields', false), false);
+  assert.equal(inPanel('section', false), false);
+});
+
+test('a closed sheet is not in the panel', () => {
+  assert.equal(inPanel(undefined, true), false);
+});

package/src/standard/views.ts

@@ -25,10 +25,10 @@ export const blockLoads: Record<string, Contract<any>> = {
 };
 
 /** The block type drawn in a column beside the text of a page, or null: the one src/data/side.json chooses, when its
- * load.ts says `beside`, unless the page is `wide` or has `side: false` (lib/side-block.mjs). The theme's page layout
+ * load.ts says `beside` and the page's template has a sidebar (lib/side-block.mjs). The theme's page layout
  * (PageLayout.astro) draws it with Block.astro, given the page's text as `html`. */
-export const sideBlock = (page: { wide?: boolean; side?: boolean }): string | null =>
-  sideBlockOf(page, sideSetting, (type) => blockLoads[type]?.beside === true);
+export const sideBlock = (template: string): string | null =>
+  sideBlockOf(template, sideSetting, (type) => blockLoads[type]?.beside === true);
 
 // A block's tag in the text, at its very end (blocks.mjs writes it so).
 const END = /<div data-block="([\w-]+)"(?: data-props="[^"]*")?\s*><\/div>\s*$/;

package/src/templateField.ts

@@ -0,0 +1,28 @@
+// The page form's field of the templates the chosen theme offers (Field.offered: 'templates'): which templates the theme
+// offers, which of them the form shows, and what the form shows as chosen. Exposes offeredTemplatesOf, templateFieldOf, shownTemplate.
+// Uses chosenTheme (ThemeStore.tsx), themes.ts, sideSettingOf (SideColumn.tsx) and lib/page-template.mjs.
+import type { RepoFile } from './github';
+import type { Field } from './schema';
+import { chosenTheme } from './ThemeStore';
+import { sideSettingOf } from './SideColumn';
+import { themes } from './themes';
+import { templateChoices, templateOf, templatesOf } from '../lib/page-template.mjs';
+
+/** The templates the theme chosen (src/data/theme.json) offers, the first the default. */
+export const offeredTemplatesOf = (files: RepoFile[]): string[] =>
+  templatesOf(themes.find((x) => x.id === chosenTheme(files)) ?? null) as string[];
+
+/** The field with only the options the form can offer: those of the theme, without the sidebar ones while no block is
+ * chosen for the column (Appearance › Side column). Null when the field has no `offered` or at most one is left. */
+export function templateFieldOf(field: Field, files: RepoFile[]): Field | null {
+  if (field.offered !== 'templates') return null;
+  const choices: string[] = templateChoices(offeredTemplatesOf(files), sideSettingOf(files) !== null);
+  return choices.length > 1 ? { ...field, options: field.options?.filter((o) => choices.includes(o.value)) } : null;
+}
+
+/** What the form shows as chosen: the value if the field offers it, else its first option (the theme's default). */
+export const shownTemplate = (field: Field, value: unknown): string =>
+  templateOf(
+    { template: value },
+    (field.options ?? []).map((o) => o.value),
+  );

package/src/themes.ts

@@ -25,6 +25,8 @@ export type ThemeInfo = {
   icons?: string;
   /** How it moves while the owner has chosen none ("motion" in its theme.json: a scheme of lib/motion.ts). */
   motion?: string;
+  /** The page templates it offers, the first the default ("templates" in its theme.json: ids of lib/page-template.mjs). */
+  templates?: string[];
   /** What it looks like, in a sentence or two, by the editor's language ("da-DK"), on its page. */
   description?: Record<string, string>;
   /** What it gives the site, a few short points by the editor's language, on its page. */
@@ -79,6 +81,7 @@ export const themes: ThemeInfo[] = Object.entries(manifests)
     thirdParty: m.thirdParty,
     ...(m.icons ? { icons: m.icons } : {}),
     ...(m.motion ? { motion: m.motion } : {}),
+    ...(m.templates ? { templates: m.templates } : {}),
     description: m.description,
     highlights: m.highlights,
     screenshots: screenshotsOf(idOf(path)),

package/src/ui.tsx

@@ -135,6 +135,8 @@ type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> & {
   size?: ButtonSize;
   /** Before the text. */
   icon?: Icon;
+  /** Its action runs: disabled, and after a moment a loading indicator. */
+  busy?: boolean;
   type?: 'button' | 'submit';
 };
 
@@ -171,6 +173,8 @@ type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'
   kind?: IconButtonKind;
   selected?: boolean;
   badge?: number | boolean;
+  /** Its action runs: disabled, and after a moment a loading indicator. */
+  busy?: boolean;
   type?: 'button' | 'submit';
 };
 
@@ -3207,28 +3211,36 @@ export function Dialog({ ref, className, children, ...rest }: DialogHTMLAttribut
 
 /** The sheet from the bottom (a dialog in the middle on a computer): the theme's bottom sheet, as high as what is in
  * it, on a <dialog> (`ref`; opened with showModal), with a SheetTitle and SheetBody, SheetList or SheetActions in it.
- * `full`: as high as the screen, and wider on a computer, with a whole page in it (the preview, PageFrame). */
+ * `full`: as high as the screen, and wider on a computer, with a whole page in it (the preview, PageFrame).
+ * `panel`: the theme's modal side sheet (data-wide="side-sheet") at the window's end edge under the top bar, half the space
+ * beside the start panel (.editor-side-panel in editor.css); the rest of the page stays in view, inert as under a dialog. */
 export function BottomSheet({
   ref,
   full,
+  panel,
   className,
   children,
   ...rest
-}: DialogHTMLAttributes<HTMLDialogElement> & { ref?: Ref<HTMLDialogElement>; full?: boolean }) {
+}: DialogHTMLAttributes<HTMLDialogElement> & { ref?: Ref<HTMLDialogElement>; full?: boolean; panel?: boolean }) {
   const sheet = full ? siteBottomSheetFullClass : siteBottomSheetFitClass;
   return (
-    <dialog ref={ref} className={[sheet, 'editor-sheet', className].filter(Boolean).join(' ')} {...rest}>
-      <div className={siteBottomSheetContainerClass()}>{children}</div>
+    <dialog ref={ref} className={[sheet, 'editor-sheet', panel && 'editor-side-panel', className].filter(Boolean).join(' ')} {...rest}>
+      <div className={siteBottomSheetContainerClass()} data-wide={panel ? 'side-sheet' : undefined}>
+        {children}
+      </div>
     </dialog>
   );
 }
 
 /** A web page in a frame, in a full BottomSheet (the preview of a page): `html` is the whole page, drawn as
  * wide as `width` (one of Material 3's window sizes) and made smaller to fit, scrolled in the frame. Nothing
- * in it runs (no scripts), and its links lead nowhere. */
-export function PageFrame({ html, width, title }: { html: string; width: number; title: string }) {
+ * in it runs (no scripts), and its links lead nowhere. With `part` (a selector: the header) only that part of the page is
+ * shown, as high as it is (measured when the page is in the frame), in the frame's own place: Appearance › Header. */
+export function PageFrame({ html, width, title, part }: { html: string; width: number; title: string; part?: string }) {
   const box = useRef<HTMLDivElement>(null);
   const [size, setSize] = useState({ width: 0, height: 0 });
+  // Where the part is in the page (px of the page), once it is in the frame.
+  const [cut, setCut] = useState<{ top: number; height: number } | null>(null);
   useEffect(() => {
     const el = box.current;
     if (!el) return;
@@ -3237,15 +3249,30 @@ export function PageFrame({ html, width, title }: { html: string; width: number;
     return () => watch.disconnect();
   }, []);
   const scale = size.width ? Math.min(1, size.width / width) : 1;
+  const measure = (frame: HTMLIFrameElement) => {
+    const doc = frame.contentDocument;
+    const el = part && doc?.querySelector(part);
+    if (!doc || !el) return;
+    // Only the part is shown: the page does not scroll in its frame.
+    doc.documentElement.style.overflow = 'hidden';
+    const r = el.getBoundingClientRect();
+    setCut({ top: r.top, height: r.height });
+  };
+  const height = part ? (cut ? cut.top + cut.height : width) : size.height / scale;
   return (
-    <div ref={box} className="relative min-h-0 flex-1 overflow-hidden border-t border-line bg-line/40">
+    <div
+      ref={box}
+      className="relative min-h-0 flex-1 overflow-hidden border-t border-line bg-line/40"
+      style={part ? { height: (cut?.height ?? 0) * scale } : undefined}
+    >
       {size.width > 0 && (
         <iframe
           title={title}
           srcDoc={html}
           sandbox="allow-same-origin"
           className="absolute top-0 left-1/2 origin-top border-0 bg-white"
-          style={{ width, height: size.height / scale, transform: `translateX(-50%) scale(${scale})` }}
+          style={{ width, height, top: -(cut?.top ?? 0) * scale, transform: `translateX(-50%) scale(${scale})` }}
+          onLoad={part ? (e) => measure(e.currentTarget) : undefined}
         />
       )}
     </div>