@morphemecms/cms 0.11.0 → 0.13.0-next-20261106203613

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/schema.ts

@@ -77,7 +77,7 @@ export type Field = {
    * picked when it is made). */
   locked?: boolean;
   /** select: the choices on a page of their own under the form, at its address with the field's name after it
-   * (#apps/content-colors/indstillinger/variant), in place of the sheet, drawn by this with what each gives (a picture of
+   * (#apps/content-colors/settings/variant), in place of the sheet, drawn by this with what each gives (a picture of
    * it); the field links there. Only a field of a part's own form (CompanyForm.tsx: an app's settings), not one in a
    * group or a list; elsewhere the choices are in the sheet. */
   page?: ComponentType<FieldPageProps>;
@@ -162,7 +162,7 @@ export type Template = {
  * bar opens the booking sheet, as "Book en tid" does), else the entry itself opens. */
 export type Opens = { label: string; as?: string };
 
-/** A place in the editor (a route, e.g. 'virksomheden/kontakt') and the text of the link to it. */
+/** A place in the editor (a route, e.g. 'company/contact') and the text of the link to it. */
 export type Edit = { to: string; text: string };
 
 // A kind of item in a list of blocks (a fixed page's sections; in the editor cards in its text, SectionsField.tsx).

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;

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/site.ts

@@ -9,7 +9,7 @@ import { appIdOf, installedApps, withKinds, type AppDefinition, type AppList, ty
 import { appBlocks, appFiles, appFolders, appPictures, appShared, appStores } from './appFiles';
 import type { BlockDefinition, SiteBlock } from './blocks';
 import type { ListRows } from './fields';
-import { siteT, siteText, t, translatingSite } from './i18n';
+import { inSiteLanguage, siteT, siteText, t, translatingSite } from './i18n';
 import { byText, type Block, type Collection, type DataFile, type Edit, type Field, type OwnedList, type Part } from './schema';
 import { blockTypeOf, type SharedTexts } from './shared';
 import { appFolder, needsOf, SCREENSHOTS, shotFile } from './store';
@@ -19,17 +19,40 @@ const written = new WeakMap<object, object>();
 /** A collection, a file, a part or a block as the site wrote it, in its language: for the commits. */
 export const asWritten = <T extends object>(shown: T): T => (written.get(shown) as T | undefined) ?? shown;
 
-// Only the keys a thing has, so it is the same as it was but for its texts.
-function shown<T extends object>(from: T, texts: Partial<T>): T {
+// Only the keys a thing has, so it is the same as it was but for its texts. `link`: remember `from` as what it was written as.
+function shownAs<T extends object>(from: T, texts: Partial<T>, link: boolean): T {
   const to = { ...from };
   for (const key of Object.keys(texts) as (keyof T)[]) if (from[key] !== undefined) to[key] = texts[key]!;
-  written.set(to, from);
+  if (link) written.set(to, from);
   return to;
 }
 
 /** The site's parts with every text of theirs said by `say`: the label, the hint, the link elsewhere,
- * the message of a pattern, the options, a switch's two words … of each field, block, file and part. */
-export function translator(say: (text: string) => string) {
+ * the message of a pattern, the options, a switch's two words … of each field, block, file and part.
+ * `sayWritten`: what asWritten gives back for each thing it returns, with its texts said by it (the standard parts'
+ * English in the site's language, inSiteLanguage); without it, asWritten gives back the thing as it was. */
+export function translator(say: (text: string) => string, sayWritten?: (text: string) => string) {
+  const shownTexts = build(say, !sayWritten);
+  if (!sayWritten) return shownTexts;
+  const writtenTexts = build(sayWritten, false);
+  const both =
+    <A extends object>(one: (x: A) => A, said: (x: A) => A) =>
+    (x: A): A => {
+      const to = one(x);
+      written.set(to, said(x));
+      return to;
+    };
+  return {
+    ...shownTexts,
+    block: both(shownTexts.block, writtenTexts.block),
+    collection: both(shownTexts.collection, writtenTexts.collection),
+    part: both(shownTexts.part, writtenTexts.part),
+    app: both(shownTexts.app, writtenTexts.app),
+  } as typeof shownTexts;
+}
+
+function build(say: (text: string) => string, link: boolean) {
+  const shown = <T extends object>(from: T, texts: Partial<T>): T => shownAs(from, texts, link);
   const maybe = (text?: string) => (text === undefined ? text : say(text));
   const edit = (e?: Edit) => e && { ...e, text: say(e.text) };
   const field = (f: Field): Field =>
@@ -94,7 +117,8 @@ export function translator(say: (text: string) => string) {
 /** A colour under "Farver" (colorFields in @site/colors): its CSS variable without "--", its name and what it is for. */
 type ColorField = (typeof site.colorFields)[number];
 
-const local = translator(siteText);
+// A commit names a part in the site's language: the standard parts' English texts through inSiteLanguage, the site's own as written.
+const local = translator(siteText, inSiteLanguage);
 const each = <T>(all: T[], one: (x: T) => T) => (translatingSite ? all.map(one) : all);
 
 // The screens under "Blokke" of the blocks with shared texts (shared.ts in the block's folder), named and
@@ -117,7 +141,7 @@ function sharedPartsOf(blocks: Folders<BlockDefinition>, shared: Folders<SharedT
         fields,
         defaults: values,
         preview: { type, ...preview },
-        back: { href: '#blokke', label: t.common.parts.blocks },
+        back: { href: '#blocks', label: t.common.parts.blocks },
       },
     ];
   });
@@ -142,7 +166,7 @@ export const writtenBlockParts: Part[] = [...site.blockParts, ...sharedParts, ..
 /** The parts of "Virksomheden"; one with parts of its own (Part.parts) has them going back to it. */
 export const companyParts = each(
   site.companyParts.map((p) =>
-    p.parts ? { ...p, parts: p.parts.map((s) => ({ ...s, back: { href: `#virksomheden/${p.id}`, label: p.label } })) } : p,
+    p.parts ? { ...p, parts: p.parts.map((s) => ({ ...s, back: { href: `#company/${p.id}`, label: p.label } })) } : p,
   ),
   local.part,
 );
@@ -155,9 +179,9 @@ export const partScreens = site.partScreens.map((s) => ({
     local.part,
   ),
 }));
-/** The site's own parts under "Udseende" (#udseende, Library.tsx Theme), after the logo and icon, each going back to it. */
+/** The site's own parts under "Udseende" (#appearance, Library.tsx Theme), after the logo and icon, each going back to it. */
 export const appearance = each(
-  site.appearance.map((p) => ({ ...p, back: { href: '#udseende', label: t.common.parts.appearance } })),
+  site.appearance.map((p) => ({ ...p, back: { href: '#appearance', label: t.common.parts.appearance } })),
   local.part,
 );
 /** Where a screen goes back to: the start screen. The menu's sections ("Indhold" …) are lists in the drawer, not screens,
@@ -190,7 +214,7 @@ export const placeOf = (id: string): string | undefined => groups.find((g) => g.
  * ("Udseende › Standardsider"): the part with its field in the file of the standard pages. */
 export function standardPageAt(key: string): string {
   const chosenIn = (p: Part) => p.file === site.config.standardPages && !!p.fields?.some((f) => f.name === key);
-  const screen = [{ id: 'udseende', label: t.common.parts.appearance, parts: appearance }, ...partScreens].find((s) =>
+  const screen = [{ id: 'appearance', label: t.common.parts.appearance, parts: appearance }, ...partScreens].find((s) =>
     s.parts.some(chosenIn),
   );
   if (!screen) return '';
@@ -314,7 +338,7 @@ export const icons = {
   ),
 };
 
-/** The short lists, under "Lister" (#lister): the site's, the standard blocks' and the apps', which go back there too. */
+/** The short lists, under "Lister" (#lists): the site's, the standard blocks' and the apps', which go back there too. */
 export const lists = [...site.lists, ...ownedLists.map((l) => l.id)];
 
 /** The lists under "Lister" now: the site's, the standard blocks' and those of the apps installed, without the cookie

package/src/standard/accordion/index.tsx

@@ -14,7 +14,7 @@ export default defineBlock({
   label: t.blocks.accordion.label,
   icon: Rows,
   hint: t.blocks.accordion.hint,
-  edit: { to: 'blokke/accordion', text: t.blocks.accordion.edit },
+  edit: { to: 'blocks/accordion', text: t.blocks.accordion.edit },
   fields: [
     ...headFields,
     {

package/src/standard/accordion/shared.ts

@@ -5,7 +5,7 @@ import { siteT, t } from '../../i18n';
 import { defineShared } from '../../shared';
 
 /** The rows it is shown with where no page has it: its screen under "Blokke" and "Tilgængelige
- * blokke" (index.tsx). In the site's language, like the drawing. */
+ * blocks" (index.tsx). In the site's language, like the drawing. */
 export const example = { items: siteT.blocks.accordion.example.map((label) => ({ label, href: '' })) };
 
 export default defineShared({

package/src/standard/buttons/index.tsx

@@ -11,7 +11,7 @@ export default defineBlock({
   label: t.blocks.buttons.label,
   icon: CursorClick,
   hint: t.blocks.buttons.hint,
-  edit: { to: 'blokke/buttons', text: t.blocks.buttons.edit },
+  edit: { to: 'blocks/buttons', text: t.blocks.buttons.edit },
   fields: [{ ...buttonList, hint: t.blocks.buttons.itemsHint }],
   preview: true,
   detail: (p) => [

package/src/standard/cards/index.tsx

@@ -13,7 +13,7 @@ export default defineBlock({
   label: t.blocks.cards.label,
   icon: Cards,
   hint: t.blocks.cards.hint,
-  edit: { to: 'blokke/cards', text: t.blocks.cards.edit },
+  edit: { to: 'blocks/cards', text: t.blocks.cards.edit },
   fields: [
     ...headFields,
     // An icon is the empty choice: so are the cards from before there was a choice.

package/src/standard/cards/shared.ts

@@ -4,7 +4,7 @@ import { siteT, t } from '../../i18n';
 import { defineShared } from '../../shared';
 
 /** The cards it is shown with where no page has it: its screen under "Blokke" and "Tilgængelige
- * blokke" (index.tsx). In the site's language, like the drawing. With a page, so the link's text,
+ * blocks" (index.tsx). In the site's language, like the drawing. With a page, so the link's text,
  * which is edited there, is on them. */
 export const example = { items: siteT.blocks.cards.example.map((c) => ({ ...c, href: '/' })) };
 

package/src/standard/cookies/index.tsx

@@ -11,7 +11,7 @@ export default defineBlock({
   label: t.blocks.cookies.label,
   icon: Cookie,
   hint: t.blocks.cookies.hint,
-  edit: { to: `liste/${config.lists.cookies}`, text: t.blocks.cookies.edit },
+  edit: { to: `list/${config.lists.cookies}`, text: t.blocks.cookies.edit },
   fields: [],
   example: {},
 });

package/src/standard/posts/index.tsx

@@ -49,7 +49,7 @@ export default defineBlock({
   label: t.blocks.posts.label,
   icon: Newspaper,
   hint: t.blocks.posts.hint,
-  edit: { to: 'blokke/posts', text: t.blocks.posts.edit },
+  edit: { to: 'blocks/posts', text: t.blocks.posts.edit },
   fields: [
     ...headFields,
     // A list (the empty choice: so are the blocks from before there was a choice), or the newest large over the list

package/src/standard/testimonials/index.tsx

@@ -36,7 +36,7 @@ export default defineBlock({
   label: t.blocks.testimonials.label,
   icon: Quotes,
   hint: t.blocks.testimonials.hint,
-  edit: { to: `liste/${config.lists.testimonials}`, text: t.blocks.testimonials.edit },
+  edit: { to: `list/${config.lists.testimonials}`, text: t.blocks.testimonials.edit },
   fields: [
     ...headFields,
     {