@morphemecms/cms 0.5.0 → 0.7.0

package/lib/menu.mjs

@@ -0,0 +1,129 @@
+// The editor's menu as data: the two-level tree (menuTree) and which section/item/child is open for a route (currentPlace).
+// In the Apps section the installed-apps list (`apps`) is not an item: each installed app is an item after the others.
+// currentPart (which item is open for a route) is exported only for its tests; currentPlace uses it as its last rule.
+// Pure, no browser; MainMenu.tsx draws the drawer from it. No dependencies.
+
+/**
+ * @param {{ id: string, title: string, href?: string, ids: string[] }[]} groups
+ * @param {(id: string) => { label: string, href: string, count: number | null }} partOf
+ * @param {(id: string) => { id: string, label: string, href: string }[]} childrenOf
+ * @returns {{ id: string, label: string, href?: string, items: { id: string, label: string, href: string, count: number | null, children?: { id: string, label: string, href: string }[] }[] }[]}
+ */
+export function menuTree(groups, partOf, childrenOf) {
+  return groups.map((group) => {
+    const entry = { id: group.id, label: group.title };
+    if (group.href !== undefined) {
+      entry.href = group.href;
+    }
+    // The installed-apps list (#apps) is not a row of the Apps section: its apps are rows, after the other items.
+    const hoisted = group.id === 'apps' ? childrenOf('apps') : [];
+    const rows = group.id === 'apps' ? group.ids.filter((id) => id !== 'apps') : group.ids;
+    entry.items = rows.map((id) => {
+      const item = { id, ...partOf(id) };
+      const children = childrenOf(id);
+      if (children.length > 0) {
+        item.children = children;
+      }
+      return item;
+    });
+    for (const app of hoisted) {
+      entry.items.push({ id: app.id, label: app.label, href: app.href, count: null });
+    }
+    return entry;
+  });
+}
+
+const PARENTS = ['virksomheden', 'blokke', 'udseende', 'seo', 'apps'];
+
+const under = (path, prefix) => path === prefix || path.startsWith(prefix + '/');
+
+/**
+ * @param {string} route
+ * @param {{ open?: string, lists: string[], header: string[], partScreens: string[], cookies: string, store: string }} known
+ * @returns {string}
+ */
+export function currentPart(route, known) {
+  if (known.store && under(route, known.store)) {
+    return 'appstore';
+  }
+
+  const part = known.open || route.replace(/^(liste|ny|slettet)\/([^/]+).*/, '$2');
+
+  if (part === known.cookies) {
+    // The cookie list is a list, but its place is under Privacy.
+    return 'privatliv';
+  }
+
+  if (known.lists.includes(part)) {
+    return 'lister';
+  }
+
+  if (known.header.includes(part)) {
+    return 'header';
+  }
+
+  const parent = PARENTS.find((id) => under(part, id));
+  if (parent) {
+    return parent;
+  }
+
+  return known.partScreens.find((id) => part.startsWith(id + '/')) ?? part;
+}
+
+/**
+ * @param {string} route
+ * @param {ReturnType<typeof menuTree>} tree
+ * @param {Parameters<typeof currentPart>[1]} known
+ * @returns {{ section: string | null, item?: string, child?: string }}
+ */
+export function currentPlace(route, tree, known) {
+  if (route === '') {
+    return { section: null };
+  }
+
+  // Rule 2: the first child whose href path matches wins.
+  for (const entry of tree) {
+    for (const item of entry.items) {
+      if (!item.children) continue;
+      for (const child of item.children) {
+        if (under(route, child.href.replace(/^#/, ''))) {
+          return { section: entry.id, item: item.id, child: child.id };
+        }
+      }
+    }
+  }
+
+  // Rule 3: among items whose href path matches, the one with the longest href wins.
+  let best = null;
+  let bestHrefLength = -1;
+  for (const entry of tree) {
+    for (const item of entry.items) {
+      const path = item.href.replace(/^#/, '');
+      if (path !== '' && under(route, path) && item.href.length > bestHrefLength) {
+        best = { section: entry.id, item: item.id };
+        bestHrefLength = item.href.length;
+      }
+    }
+  }
+  if (best) {
+    return best;
+  }
+
+  // Rule 4: fall back to currentPart and look up the item by id.
+  const id = currentPart(route, known);
+  for (const entry of tree) {
+    for (const item of entry.items) {
+      if (item.id === id) {
+        return { section: entry.id, item: id };
+      }
+    }
+  }
+
+  // A screen that is a section itself (Appearance, Privacy) and not one of its items: the section is open, no item.
+  if (tree.some((entry) => entry.id === id)) {
+    return { section: id };
+  }
+
+  // Rule 5: nothing matched.
+  return { section: null };
+}

package/lib/menu.test.mjs

@@ -0,0 +1,291 @@
+// Tests lib/menu.mjs: which item is open for a route,
+// the two-level tree (menuTree), and which section/item/child is open for a route (currentPlace).
+// Run with `node --test packages/editor/lib/*.test.mjs` (part of npm run check).
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { currentPart, menuTree, currentPlace } from './menu.mjs';
+
+const known = {
+  lists: ['udtalelser', 'cookies', 'priser'],
+  header: ['menu', 'mobilmenu'],
+  partScreens: ['privatliv'],
+  cookies: 'cookies',
+  store: 'indstillinger/appstore',
+};
+
+const treeGroups = [
+  { id: 'home', title: 'Home', href: '#', ids: [] },
+  { id: 'indhold', title: 'Content', ids: ['pages', 'lister', 'videresendelser'] },
+  { id: 'udseende', title: 'Appearance', ids: ['udseende/farver', 'udseende/logo'] },
+];
+const treePartOf = (id) => ({ label: `L ${id}`, href: `#${id === 'videresendelser' ? 'seo/videresendelser' : id}`, count: null });
+const treeChildren = (id) =>
+  id === 'videresendelser'
+    ? [
+        { id: 'alle', label: 'All', href: '#seo/videresendelser/alle' },
+        { id: 'ikke-fundet', label: 'Not found', href: '#seo/videresendelser/ikke-fundet' },
+      ]
+    : id === 'lister'
+      ? [{ id: 'priser', label: 'Prices', href: '#liste/priser' }]
+      : [];
+const tree = menuTree(treeGroups, treePartOf, treeChildren);
+
+test('an open collection is its own item', () => {
+  assert.equal(currentPart('src/content/pages/om.md', { ...known, open: 'pages' }), 'pages');
+  assert.equal(currentPart('liste/blog', { ...known, open: 'blog' }), 'blog');
+});
+
+test('a short list is under Lists', () => {
+  assert.equal(currentPart('liste/udtalelser', known), 'lister');
+  assert.equal(currentPart('ny/udtalelser', known), 'lister');
+  assert.equal(currentPart('slettet/priser', known), 'lister');
+  assert.equal(currentPart('src/data/prices/a.json', { ...known, open: 'priser' }), 'lister');
+});
+
+test('the cookie list is under Privacy, whatever the way to it', () => {
+  assert.equal(currentPart('liste/cookies', known), 'privatliv');
+  assert.equal(currentPart('liste/cookies/cookiescanner', known), 'privatliv');
+  assert.equal(currentPart('ny/cookies', known), 'privatliv');
+  assert.equal(currentPart('slettet/cookies', known), 'privatliv');
+  assert.equal(currentPart('src/data/cookie-list/a.json', { ...known, open: 'cookies' }), 'privatliv');
+});
+
+test('the menus are under Header', () => {
+  assert.equal(currentPart('src/data/menu.json', { ...known, open: 'menu' }), 'header');
+  assert.equal(currentPart('liste/mobilmenu', known), 'header');
+});
+
+test('a screen under a part is that part', () => {
+  assert.equal(currentPart('virksomheden', known), 'virksomheden');
+  assert.equal(currentPart('virksomheden/betaling/mobilepay', known), 'virksomheden');
+  assert.equal(currentPart('blokke', known), 'blokke');
+  assert.equal(currentPart('blokke/hero', known), 'blokke');
+  assert.equal(currentPart('udseende/farver', known), 'udseende');
+  assert.equal(currentPart('seo/videresendelser', known), 'seo');
+  assert.equal(currentPart('apps/calendly', known), 'apps');
+  assert.equal(currentPart('apps/calendly/indstillinger', known), 'apps');
+});
+
+test('Block settings is not under Block templates, and a longer name is not under a shorter one', () => {
+  assert.equal(currentPart('blokvalg', known), 'blokvalg');
+  assert.equal(currentPart('appsx', known), 'appsx');
+});
+
+test('the screens with parts, and their parts, are the screen', () => {
+  assert.equal(currentPart('privatliv', known), 'privatliv');
+  assert.equal(currentPart('privatliv/cookiebanner', known), 'privatliv');
+});
+
+test('the app store, and its themes, are Find apps', () => {
+  assert.equal(currentPart('indstillinger/appstore', known), 'appstore');
+  assert.equal(currentPart('indstillinger/appstore/temaer', known), 'appstore');
+});
+
+test('a screen of its own is itself, and the start screen is none', () => {
+  assert.equal(currentPart('avanceret', known), 'avanceret');
+  assert.equal(currentPart('licenser', known), 'licenser');
+  assert.equal(currentPart('', known), '');
+});
+
+test('menuTree keeps the groups in the order written', () => {
+  assert.deepEqual(
+    tree.map((e) => e.id),
+    ['home', 'indhold', 'udseende'],
+  );
+});
+
+test('menuTree copies href only when the group has it', () => {
+  assert.equal(tree[0].href, '#');
+  assert.deepEqual(tree[0].items, []);
+  assert.equal('href' in tree[1], false);
+});
+
+test('menuTree gives the items in the order written', () => {
+  assert.deepEqual(
+    tree[1].items.map((i) => i.id),
+    ['pages', 'lister', 'videresendelser'],
+  );
+  assert.equal(tree[1].items[0].label, 'L pages');
+});
+
+test('menuTree adds children only when there are some', () => {
+  assert.equal(tree[1].items[2].children.length, 2);
+  assert.equal('children' in tree[1].items[0], false);
+});
+
+test('currentPlace on the start screen is no section', () => {
+  assert.deepEqual(currentPlace('', tree, known), { section: null });
+});
+
+test('currentPlace finds a child', () => {
+  assert.deepEqual(currentPlace('seo/videresendelser/alle', tree, known), { section: 'indhold', item: 'videresendelser', child: 'alle' });
+});
+
+test('currentPlace finds a list as a child of Lists', () => {
+  assert.deepEqual(currentPlace('liste/priser', tree, known), { section: 'indhold', item: 'lister', child: 'priser' });
+});
+
+test('currentPlace finds an item by its href', () => {
+  assert.deepEqual(currentPlace('seo/videresendelser', tree, known), { section: 'indhold', item: 'videresendelser' });
+});
+
+test('currentPlace finds a screen under an item', () => {
+  assert.deepEqual(currentPlace('udseende/farver/tekst', tree, known), { section: 'udseende', item: 'udseende/farver' });
+});
+
+test('currentPlace falls back to currentPart', () => {
+  assert.deepEqual(currentPlace('rediger/pages/app-store', tree, { ...known, open: 'pages' }), { section: 'indhold', item: 'pages' });
+});
+
+test('currentPlace gives no section for an unknown route', () => {
+  assert.deepEqual(currentPlace('ukendt', tree, known), { section: null });
+});
+
+test('currentPlace gives the section of a screen that is a section itself', () => {
+  assert.deepEqual(currentPlace('udseende', tree, known), { section: 'udseende' });
+});
+
+// The menu as defaults/editor.ts `groups` writes it, with the hrefs the editor gives.
+const menuGroups = [
+  { id: 'home', title: 'Home', href: '#', ids: [] },
+  {
+    id: 'indhold',
+    title: 'Content',
+    ids: ['pages', 'blog', 'lister', 'popups', 'kategorier', 'filer', 'interne-links', 'videresendelser'],
+  },
+  { id: 'globalt', title: 'Global', ids: ['header', 'footer', 'virksomheden'] },
+  { id: 'apps', title: 'Apps', ids: ['apps', 'appstore'] },
+  { id: 'blokke', title: 'Blocks', ids: ['blokke', 'blokvalg'] },
+  { id: 'udseende', title: 'Appearance', ids: ['farver', 'logo'] },
+  { id: 'privatliv', title: 'Privacy', ids: ['cookiebanner', 'cookies'] },
+  { id: 'indstillinger', title: 'Settings', ids: ['avanceret'] },
+];
+const hrefs = {
+  pages: '#liste/pages',
+  blog: '#liste/blog',
+  lister: '#lister',
+  popups: '#liste/popups',
+  kategorier: '#liste/kategorier',
+  filer: '#filer',
+  'interne-links': '#seo/interne-links',
+  videresendelser: '#seo/videresendelser',
+  header: '#header',
+  footer: '#src/data/footer.json',
+  virksomheden: '#virksomheden',
+  apps: '#apps',
+  appstore: '#indstillinger/appstore',
+  blokke: '#blokke',
+  blokvalg: '#blokvalg',
+  farver: '#udseende/farver',
+  logo: '#udseende/logo',
+  cookiebanner: '#privatliv/cookiebanner',
+  cookies: '#liste/cookies',
+  avanceret: '#avanceret',
+};
+const menu = menuTree(
+  menuGroups,
+  (id) => ({ label: id, href: hrefs[id], count: null }),
+  (id) =>
+    id === 'videresendelser'
+      ? [
+          { id: 'alle', label: 'All', href: '#seo/videresendelser/alle' },
+          { id: 'ikke-fundet', label: 'Not found', href: '#seo/videresendelser/ikke-fundet' },
+        ]
+      : id === 'apps'
+        ? [{ id: 'calendly', label: 'Calendly', href: '#apps/calendly' }]
+        : [],
+);
+const menuKnown = { ...known, store: 'indstillinger/appstore' };
+const allIds = menu.flatMap((e) => e.items.flatMap((i) => [i.id, ...(i.children ?? []).map((c) => c.id)]));
+const allHrefs = menu.flatMap((e) => e.items.flatMap((i) => [i.href, ...(i.children ?? []).map((c) => c.href)]));
+
+test('the menu has the eight sections in order', () => {
+  assert.deepEqual(
+    menu.map((e) => e.id),
+    ['home', 'indhold', 'globalt', 'apps', 'blokke', 'udseende', 'privatliv', 'indstillinger'],
+  );
+});
+
+test('Content holds Internal links and Redirects after the files, in order', () => {
+  assert.deepEqual(
+    menu[1].items.map((i) => i.id),
+    ['pages', 'blog', 'lister', 'popups', 'kategorier', 'filer', 'interne-links', 'videresendelser'],
+  );
+});
+
+test('Redirects has All and Not found as children', () => {
+  const redirects = menu[1].items.find((i) => i.id === 'videresendelser');
+  assert.deepEqual(
+    redirects.children.map((c) => c.href),
+    ['#seo/videresendelser/alle', '#seo/videresendelser/ikke-fundet'],
+  );
+});
+
+test('Find apps is the first item under Apps, then the apps installed, and Advanced the only one under Settings', () => {
+  assert.deepEqual(
+    menu[3].items.map((i) => i.id),
+    ['appstore', 'calendly'],
+  );
+  assert.deepEqual(
+    menu[7].items.map((i) => i.id),
+    ['avanceret'],
+  );
+});
+
+test('Analytics, SEO, the SEO rating and Licenses are not in the menu', () => {
+  for (const gone of ['maaling', 'seo', 'vurdering', 'licenser']) {
+    assert.equal(allIds.includes(gone), false);
+  }
+  for (const gone of ['#maaling', '#seo', '#seo/vurdering', '#licenser']) {
+    assert.equal(allHrefs.includes(gone), false);
+  }
+});
+
+test('currentPlace of a page being edited, a list, the SEO rating, an Appearance screen, an app, Find apps and Privacy', () => {
+  assert.deepEqual(currentPlace('liste/pages/app-store', menu, menuKnown), { section: 'indhold', item: 'pages' });
+  assert.deepEqual(currentPlace('src/content/pages/om.md', menu, { ...menuKnown, open: 'pages' }), { section: 'indhold', item: 'pages' });
+  assert.deepEqual(currentPlace('seo/videresendelser/alle', menu, menuKnown), {
+    section: 'indhold',
+    item: 'videresendelser',
+    child: 'alle',
+  });
+  assert.deepEqual(currentPlace('seo/interne-links', menu, menuKnown), { section: 'indhold', item: 'interne-links' });
+  assert.deepEqual(currentPlace('seo/vurdering', menu, menuKnown), { section: null });
+  assert.deepEqual(currentPlace('udseende/farver', menu, menuKnown), { section: 'udseende', item: 'farver' });
+  assert.deepEqual(currentPlace('apps/calendly', menu, menuKnown), { section: 'apps', item: 'calendly' });
+  assert.deepEqual(currentPlace('apps/mailchimp', menu, menuKnown), { section: 'apps' });
+  assert.deepEqual(currentPlace('indstillinger/appstore/temaer', menu, menuKnown), { section: 'apps', item: 'appstore' });
+  assert.deepEqual(currentPlace('privatliv/cookiebanner', menu, menuKnown), { section: 'privatliv', item: 'cookiebanner' });
+  assert.deepEqual(currentPlace('src/data/cookie-list/a.json', menu, { ...menuKnown, open: 'cookies' }), { section: 'privatliv' });
+});
+
+const appsGroups = [{ id: 'apps', title: 'Apps', ids: ['apps', 'appstore'] }];
+const appsPartOf = (id) => ({ label: `L ${id}`, href: id === 'appstore' ? '#indstillinger/appstore' : '#apps', count: null });
+const appsOf = (list) => (id) => (id === 'apps' ? list.map((a) => ({ id: a, label: `A ${a}`, href: `#apps/${a}` })) : []);
+
+test('the Apps section lists Appstore, then each installed app, and not the apps list', () => {
+  const [section] = menuTree(appsGroups, appsPartOf, appsOf(['mailchimp', 'mobilepay']));
+  assert.deepEqual(
+    section.items.map((i) => i.id),
+    ['appstore', 'mailchimp', 'mobilepay'],
+  );
+  assert.equal(section.items[1].href, '#apps/mailchimp');
+  assert.equal(section.items[1].count, null);
+  assert.ok(section.items.every((i) => i.children === undefined));
+});
+
+test('the Apps section with no apps installed lists Appstore only', () => {
+  const [section] = menuTree(appsGroups, appsPartOf, appsOf([]));
+  assert.deepEqual(
+    section.items.map((i) => i.id),
+    ['appstore'],
+  );
+});
+
+test('an app screen selects its row; the apps list and Appstore keep the Apps section', () => {
+  const appsTree = menuTree(appsGroups, appsPartOf, appsOf(['mailchimp', 'mobilepay']));
+  assert.deepEqual(currentPlace('apps/mailchimp', appsTree, known), { section: 'apps', item: 'mailchimp' });
+  assert.deepEqual(currentPlace('apps', appsTree, known), { section: 'apps' });
+  assert.deepEqual(currentPlace('indstillinger/appstore', appsTree, known), { section: 'apps', item: 'appstore' });
+});

package/lib/rehype-emphasize.d.mts

@@ -0,0 +1,4 @@
+/** The rehype plugin: the class on every <strong>, its own classes kept. */
+export function rehypeEmphasize(): (tree: any) => void;
+/** The class of a bold word, on the site and in the editor (strongAttr in src/markdown.mjs). */
+export const EMPHASIZE: "emphasize";

package/lib/rehype-emphasize.mjs

@@ -0,0 +1,20 @@
+// Every bold word in a text the site shows (Markdown's **word**, HTML's <strong>) gets the class "emphasize", which a
+// theme may style in its global.css; the standard theme leaves it bold. Exposes EMPHASIZE and rehypeEmphasize (a rehype
+// plugin, in the site's pipeline in astro.mjs, in inline.ts and in the editor's in markdown.ts). No dependencies.
+
+/** The class of a bold word, on the site and in the editor (strongAttr in src/markdown.mjs). */
+export const EMPHASIZE = 'emphasize';
+
+/** The rehype plugin: the class on every <strong>, its own classes kept. */
+export function rehypeEmphasize() {
+  return (tree) => {
+    const walk = (node) => {
+      if (node.type === 'element' && node.tagName === 'strong') {
+        const names = [].concat(node.properties.className ?? []);
+        if (!names.includes(EMPHASIZE)) node.properties.className = [...names, EMPHASIZE];
+      }
+      node.children?.forEach(walk);
+    };
+    walk(tree);
+  };
+}

package/lib/rehype-emphasize.test.mjs

@@ -0,0 +1,39 @@
+// Tests for lib/rehype-emphasize.mjs: every bold word in a text the site shows gets the class "emphasize".
+// Run: node --test packages/editor/lib/*.test.mjs packages/editor/src/*.test.mjs
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { createMarkdownProcessor } from '@astrojs/markdown-remark';
+import { EMPHASIZE, rehypeEmphasize } from './rehype-emphasize.mjs';
+
+const strong = (properties = {}) => ({ type: 'element', tagName: 'strong', properties, children: [{ type: 'text', value: 'saving' }] });
+const root = (...children) => ({ type: 'root', children: [{ type: 'element', tagName: 'p', properties: {}, children }] });
+
+test('the class is emphasize', () => {
+  assert.equal(EMPHASIZE, 'emphasize');
+});
+
+test('a strong gets the class', () => {
+  const tree = root(strong());
+  rehypeEmphasize()(tree);
+  assert.deepEqual(tree.children[0].children[0].properties.className, ['emphasize']);
+});
+
+test('a strong keeps its own classes, and gets the class once', () => {
+  const tree = root(strong({ className: ['color-accent'] }), strong({ className: ['emphasize'] }));
+  rehypeEmphasize()(tree);
+  assert.deepEqual(tree.children[0].children[0].properties.className, ['color-accent', 'emphasize']);
+  assert.deepEqual(tree.children[0].children[1].properties.className, ['emphasize']);
+});
+
+test('other elements are left as they are', () => {
+  const em = { type: 'element', tagName: 'em', properties: {}, children: [] };
+  const tree = root(em);
+  rehypeEmphasize()(tree);
+  assert.equal(em.properties.className, undefined);
+});
+
+test('in Astro\'s pipeline, **word** is drawn as <strong class="emphasize">', async () => {
+  const processor = await createMarkdownProcessor({ rehypePlugins: [rehypeEmphasize] });
+  const { code } = await processor.render('How **saving** works');
+  assert.equal(code.trim(), '<p>How <strong class="emphasize">saving</strong> works</p>');
+});

package/lib/section-in-view.d.mts

@@ -0,0 +1,8 @@
+/**
+ * @param {string[]} order the sections, from the top of the page down
+ * @param {Record<string, number | undefined>} tops each section's top, from the top of the window
+ * @param {number} line
+ * @returns {string | undefined} the last of `order` whose top is above `line`; with all of them below it, the first one that is drawn; a section with no top (`undefined`: not drawn) is skipped.
+ */
+export function sectionInView(order: string[], tops: Record<string, number | undefined>, line: number): string | undefined;
+export function spyLine(height: number, atBottom: boolean): number;

package/lib/section-in-view.mjs

@@ -0,0 +1,25 @@
+// Which of a form's sections is in view while the page scrolls (EntryForm.tsx marks it in the sections list): pure, so it
+// is tested (section-in-view.test.mjs). Exports sectionInView and spyLine. No dependencies.
+
+/**
+ * @param {string[]} order the sections, from the top of the page down
+ * @param {Record<string, number | undefined>} tops each section's top, from the top of the window
+ * @param {number} line
+ * @returns {string | undefined} the last of `order` whose top is above `line`; with all of them below it, the first one that is drawn; a section with no top (`undefined`: not drawn) is skipped.
+ */
+export function sectionInView(order, tops, line) {
+  /** @type {string | undefined} */
+  let here;
+  for (const id of order) {
+    const top = tops[id];
+    if (top !== undefined && (here === undefined || top <= line)) here = id;
+  }
+  return here;
+}
+
+/**
+ * where a section's top must be to count as in view: a third of the window's height; at the bottom of the page, 96px above the window's bottom, so the last section can be marked.
+ * @param {number} height the window's height
+ * @param {boolean} atBottom the page is scrolled to its end
+ */
+export const spyLine = (height, atBottom) => (atBottom ? height - 96 : height / 3);

package/lib/section-in-view.test.mjs

@@ -0,0 +1,35 @@
+// Tests of sectionInView and spyLine (section-in-view.mjs): which of a form's sections is marked while the page scrolls.
+
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { sectionInView, spyLine } from './section-in-view.mjs';
+
+const order = ['content', 'status', 'seo'];
+
+test('the last section whose top is above the line is in view', () => {
+  assert.equal(sectionInView(order, { content: -500, status: 100, seo: 900 }, 300), 'status');
+  assert.equal(sectionInView(order, { content: -500, status: -100, seo: 200 }, 300), 'seo');
+});
+
+test('with every top below the line, the first section with a top is in view', () => {
+  assert.equal(sectionInView(order, { content: 400, status: 600, seo: 900 }, 300), 'content');
+});
+
+test('a section without a top (not drawn) is skipped', () => {
+  assert.equal(sectionInView(order, { status: 500, seo: 900 }, 300), 'status');
+  assert.equal(sectionInView(order, { content: -50, status: undefined, seo: 100 }, 300), 'seo');
+});
+
+test('no tops at all: nothing is in view', () => {
+  assert.equal(sectionInView(order, {}, 300), undefined);
+  assert.equal(sectionInView([], { content: 0 }, 300), undefined);
+});
+
+test('the order given decides, not the tops', () => {
+  assert.equal(sectionInView(['seo', 'content'], { content: -10, seo: 20 }, 300), 'content');
+});
+
+test('the line is a third of the screen, or near its bottom at the bottom of the page', () => {
+  assert.equal(spyLine(900, false), 300);
+  assert.equal(spyLine(900, true), 804);
+});

package/lib/section-marker.d.mts

@@ -0,0 +1,5 @@
+/** The colours, by the theme colour they are: --block-surface, --block-tint and --block-accent. */
+export const SECTION_COLORS: string[];
+export function sectionMarker(color: string): string;
+export function markerColor(html: string): string | null;
+export function isLabelLine(html: string): boolean;

package/lib/section-marker.mjs

@@ -0,0 +1,18 @@
+// The colour of a section of a page or blog post (the *Sektionsfarve* button on an H2): in the Markdown a line of HTML right before
+// the H2 (or before the label above it), <div data-section="tint"></div>. Only the theme's own colours, by name. Exposes
+// SECTION_COLORS, sectionMarker, markerColor and isLabelLine. Depends on lib/eyebrow.mjs; no React or browser.
+import { eyebrowText } from './eyebrow.mjs';
+
+/** The colours, by the theme colour they are: --block-surface, --block-tint and --block-accent. */
+export const SECTION_COLORS = ['surface', 'tint', 'accent'];
+
+const MARKER = new RegExp(`^<div data-section="(${SECTION_COLORS.join('|')})"></div>$`);
+
+/** The marker line of a colour. @param {string} color */
+export const sectionMarker = (color) => `<div data-section="${color}"></div>`;
+
+/** The colour a piece of HTML is the marker of, or null (also for a colour the theme has not). @param {string} html @returns {string | null} */
+export const markerColor = (html) => String(html).trim().match(MARKER)?.[1] ?? null;
+
+/** Whether a piece of HTML is the line of a label above a heading (lib/eyebrow.mjs). @param {string} html */
+export const isLabelLine = (html) => eyebrowText(html) !== null;

package/lib/section-marker.test.mjs

@@ -0,0 +1,22 @@
+// Tests for lib/section-marker.mjs: the marker line before an H2 that gives its section a colour.
+// Run: node --test packages/editor/lib/section-marker.test.mjs
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { SECTION_COLORS, isLabelLine, markerColor, sectionMarker } from './section-marker.mjs';
+
+test('the colours are the theme’s three', () => assert.deepEqual(SECTION_COLORS, ['surface', 'tint', 'accent']));
+test('writes the marker', () => assert.equal(sectionMarker('tint'), '<div data-section="tint"></div>'));
+test('reads it back', () => {
+  for (const c of SECTION_COLORS) assert.equal(markerColor(sectionMarker(c)), c);
+});
+test('reads it with space around', () => assert.equal(markerColor('  <div data-section="accent"></div>\n'), 'accent'));
+test('an unknown colour is no marker', () => assert.equal(markerColor('<div data-section="red"></div>'), null));
+test('other HTML is no marker', () => {
+  assert.equal(markerColor('<div data-section="tint">x</div>'), null);
+  assert.equal(markerColor('<div data-block="hero"></div>'), null);
+  assert.equal(markerColor(''), null);
+});
+test('a label line', () => {
+  assert.equal(isLabelLine('<p class="block-eyebrow">Step by step</p>'), true);
+  assert.equal(isLabelLine('<p class="intro">Hi</p>'), false);
+});

package/lib/section-ranges.d.mts

@@ -0,0 +1,12 @@
+/** The kind of a part, from its ProseMirror node name and heading level; the label is the eyebrow line before a heading. */
+export function partKind(typeName: any, level: any): "h1" | "h2" | "other" | "label";
+/**
+ * The sections of a text: each H2 (with a label directly before it) and every part after it up to the next H2, the next H1
+ * or the end. `parts` is the top-level parts in order; the result has the index of each section's first and last part.
+ */
+export function sectionRanges(parts: any): any[];
+/** Where a part is in its section: 'start', 'middle', 'end', or 'only' for a section of one part. */
+export function sectionPart(index: any, { from, to }: {
+    from: any;
+    to: any;
+}): "only" | "start" | "end" | "middle";