@morphemecms/cms 0.5.0 → 0.7.0

package/lib/drawer-swipe.test.mjs

@@ -0,0 +1,33 @@
+// Tests lib/drawer-swipe.mjs: when a drag across the modal drawer closes it.
+// 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 { swipeCloses, SWIPE_DISTANCE } from './drawer-swipe.mjs';
+
+test('a swipe toward the left edge closes it', () => {
+  assert.equal(swipeCloses(-SWIPE_DISTANCE, 0), true);
+  assert.equal(swipeCloses(-120, 10), true);
+});
+
+test('a swipe toward the right edge does not, left to right', () => {
+  assert.equal(swipeCloses(120, 0), false);
+});
+
+test('right to left it is the other way round', () => {
+  assert.equal(swipeCloses(120, 0, true), true);
+  assert.equal(swipeCloses(-120, 0, true), false);
+});
+
+test('a short drag does not close it', () => {
+  assert.equal(swipeCloses(-(SWIPE_DISTANCE - 1), 0), false);
+});
+
+test('a mostly vertical drag (scrolling the list) does not close it', () => {
+  assert.equal(swipeCloses(-60, 80), false);
+  assert.equal(swipeCloses(-60, 30), true);
+  assert.equal(swipeCloses(-60, 31), false);
+});
+
+test('a tap does not close it', () => {
+  assert.equal(swipeCloses(0, 0), false);
+});

package/lib/drawerKeys.d.mts

@@ -0,0 +1,9 @@
+/**
+ * The index to focus for a key, or null when the key is not one of ours, there are no items, or the focus is not on one.
+ * Up and down stop at the first and the last item.
+ * @param {string} key a KeyboardEvent's `key`
+ * @param {number} current the index of the focused item
+ * @param {number} count how many items there are
+ * @returns {number | null}
+ */
+export function drawerKeyTarget(key: string, current: number, count: number): number | null;

package/lib/drawerKeys.mjs

@@ -0,0 +1,26 @@
+// Where the arrow keys, Home and End move the focus among a navigation drawer's items (theme/ui/navigationDrawerControl.ts
+// does the DOM). Exposes drawerKeyTarget; no dependencies.
+
+/**
+ * The index to focus for a key, or null when the key is not one of ours, there are no items, or the focus is not on one.
+ * Up and down stop at the first and the last item.
+ * @param {string} key a KeyboardEvent's `key`
+ * @param {number} current the index of the focused item
+ * @param {number} count how many items there are
+ * @returns {number | null}
+ */
+export function drawerKeyTarget(key, current, count) {
+  if (count === 0 || current < 0 || current >= count) return null;
+  switch (key) {
+    case 'ArrowDown':
+      return Math.min(current + 1, count - 1);
+    case 'ArrowUp':
+      return Math.max(current - 1, 0);
+    case 'Home':
+      return 0;
+    case 'End':
+      return count - 1;
+    default:
+      return null;
+  }
+}

package/lib/drawerKeys.test.mjs

@@ -0,0 +1,21 @@
+// Tests for lib/drawerKeys.mjs: where the arrow keys, Home and End move the focus in a navigation drawer's items. Run: node --test packages/editor/lib/*.test.mjs
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { drawerKeyTarget } from './drawerKeys.mjs';
+
+test('ArrowDown moves to the next item', () => assert.equal(drawerKeyTarget('ArrowDown', 1, 4), 2));
+test('ArrowUp moves to the previous item', () => assert.equal(drawerKeyTarget('ArrowUp', 2, 4), 1));
+test('ArrowDown stays on the last item', () => assert.equal(drawerKeyTarget('ArrowDown', 3, 4), 3));
+test('ArrowUp stays on the first item', () => assert.equal(drawerKeyTarget('ArrowUp', 0, 4), 0));
+test('Home goes to the first item', () => assert.equal(drawerKeyTarget('Home', 3, 4), 0));
+test('End goes to the last item', () => assert.equal(drawerKeyTarget('End', 0, 4), 3));
+test('other keys are not ours', () => {
+  assert.equal(drawerKeyTarget('Enter', 1, 4), null);
+  assert.equal(drawerKeyTarget('ArrowLeft', 1, 4), null);
+  assert.equal(drawerKeyTarget('Tab', 1, 4), null);
+});
+test('no items, or focus not on an item, gives nothing', () => {
+  assert.equal(drawerKeyTarget('ArrowDown', 0, 0), null);
+  assert.equal(drawerKeyTarget('ArrowDown', -1, 4), null);
+  assert.equal(drawerKeyTarget('End', 4, 4), null);
+});

package/lib/eyebrow.d.mts

@@ -0,0 +1,6 @@
+/** The text of a label's line of HTML, or null for any other HTML, and for a label the editor would not write back the
+ * same (other HTML or entities in it). @param {string} html @returns {string | null} */
+export function eyebrowText(html: string): string | null;
+/** The class of a label, the same as a block's label (BlockHead.tsx). */
+export const EYEBROW_CLASS: "block-eyebrow";
+export function eyebrowHtml(text: string): string;

package/lib/eyebrow.mjs

@@ -0,0 +1,24 @@
+// A label above a heading in a text ("Etiket", the label button over a text): in the Markdown a line of HTML right
+// before the heading, <p class="block-eyebrow">How it works</p>, which every Markdown reader shows and the editor reads
+// and writes back as it was (src/eyebrow.mjs); it looks like a block's label (.block-eyebrow, blocks.css). Exposes
+// EYEBROW_CLASS, eyebrowHtml and eyebrowText. No dependencies, no browser.
+
+/** The class of a label, the same as a block's label (BlockHead.tsx). */
+export const EYEBROW_CLASS = 'block-eyebrow';
+
+const escape = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+const unescape = (s) => s.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
+const LINE = new RegExp(`^<p class="${EYEBROW_CLASS}">([^<]*)</p>$`);
+
+/** The line of HTML of a label with this text. @param {string} text */
+export const eyebrowHtml = (text) => `<p class="${EYEBROW_CLASS}">${escape(String(text))}</p>`;
+
+/** The text of a label's line of HTML, or null for any other HTML, and for a label the editor would not write back the
+ * same (other HTML or entities in it). @param {string} html @returns {string | null} */
+export function eyebrowText(html) {
+  const line = String(html).trim();
+  const found = line.match(LINE);
+  if (!found) return null;
+  const text = unescape(found[1]);
+  return eyebrowHtml(text) === line ? text : null;
+}

package/lib/eyebrow.test.mjs

@@ -0,0 +1,20 @@
+// Tests for lib/eyebrow.mjs: a label's line of HTML, written and read back as it was. 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 { EYEBROW_CLASS, eyebrowHtml, eyebrowText } from './eyebrow.mjs';
+
+test('the class is a block label', () => assert.equal(EYEBROW_CLASS, 'block-eyebrow'));
+test('writes the line', () => assert.equal(eyebrowHtml('How it works'), '<p class="block-eyebrow">How it works</p>'));
+test('escapes &, < and >', () => assert.equal(eyebrowHtml('A & <B>'), '<p class="block-eyebrow">A &amp; &lt;B&gt;</p>'));
+test('reads the line', () => assert.equal(eyebrowText('<p class="block-eyebrow">How it works</p>'), 'How it works'));
+test('reads it with space around', () => assert.equal(eyebrowText('<p class="block-eyebrow">Hi</p>\n'), 'Hi'));
+test('reads escaped text', () => assert.equal(eyebrowText('<p class="block-eyebrow">A &amp; &lt;B&gt;</p>'), 'A & <B>'));
+test('round trip', () =>
+  assert.equal(eyebrowHtml(eyebrowText('<p class="block-eyebrow">Fast &amp; safe</p>')), '<p class="block-eyebrow">Fast &amp; safe</p>'));
+test('an empty label', () => assert.equal(eyebrowText('<p class="block-eyebrow"></p>'), ''));
+test('not another class', () => assert.equal(eyebrowText('<p class="intro">Hi</p>'), null));
+test('not HTML inside it', () => assert.equal(eyebrowText('<p class="block-eyebrow">a <b>b</b></p>'), null));
+test('not HTML it would write back otherwise', () => {
+  assert.equal(eyebrowText('<p class="block-eyebrow">AT&T</p>'), null);
+  assert.equal(eyebrowText('<p class="block-eyebrow">&quot;Hi&quot;</p>'), null);
+});

package/lib/front-sections.test.mjs

@@ -0,0 +1,82 @@
+// Tests the front page's reading of section colours (src/sections.mjs): the marker into the H2's part, and the colour into the sections.
+// Run: node --test packages/editor/lib/front-sections.test.mjs
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { blockHtml } from './blocks.mjs';
+import { partsOfMarkdown, sectionsFromParts } from '../src/sections.mjs';
+
+const tint = '<div data-section="tint"></div>';
+const accent = '<div data-section="accent"></div>';
+const lines = (...l) => l.join('\n\n');
+
+test('a marker before an H2 is the colour of its part, and is not text', () => {
+  const parts = partsOfMarkdown(lines('# Title', tint, '## Hours', 'Open daily.'));
+  assert.deepEqual(parts, [{ heading: 'Hours', color: 'tint' }, { markdown: 'Open daily.' }]);
+});
+
+test('a heading without a marker has no color key', () => {
+  assert.deepEqual(partsOfMarkdown('## Hours'), [{ heading: 'Hours' }]);
+});
+
+test('a marker not before an H2, or with an unknown colour, is dropped and not shown', () => {
+  assert.deepEqual(partsOfMarkdown(lines(tint, 'Just text', '## Later')), [{ markdown: 'Just text' }, { heading: 'Later' }]);
+  assert.deepEqual(partsOfMarkdown(lines('<div data-section="pink"></div>', '## X')), [{ heading: 'X' }]);
+  assert.deepEqual(
+    partsOfMarkdown(lines(tint, blockHtml('steps', {}), '## Y')).filter((p) => 'heading' in p),
+    [{ heading: 'Y' }],
+  );
+});
+
+test('a marker in a code block stays text', () => {
+  const code = '```\n' + tint + '\n```';
+  assert.deepEqual(partsOfMarkdown(code), [{ markdown: code }]);
+});
+
+test('a label line may stand between the marker and the H2', () => {
+  const label = '<p class="block-eyebrow">New</p>';
+  assert.deepEqual(partsOfMarkdown(lines(tint, label, '## T')), [{ markdown: label }, { heading: 'T', color: 'tint' }]);
+});
+
+test('colors: a text section and a block with a lead take the colour of their H2', () => {
+  const parts = partsOfMarkdown(
+    lines(tint, '## About', 'About text.', '## Plain', 'Plain text.', accent, '## Steps', blockHtml('steps', {})),
+  );
+  const sections = sectionsFromParts(parts, { steps: { heading: 'heading' } }, { colors: true });
+  assert.deepEqual(
+    sections.map((s) => [s.type, s.heading, s.sectionColor]),
+    [
+      ['text', 'About', 'tint'],
+      ['text', 'Plain', undefined],
+      ['steps', 'Steps', 'accent'],
+    ],
+  );
+});
+
+test('colors: lead-less blocks and text without a heading inherit it up to the next H2', () => {
+  const parts = partsOfMarkdown(lines(tint, '## Hours', 'Text.', blockHtml('book', {}), 'More.', '## Plain', 'End.'));
+  const sections = sectionsFromParts(parts, {}, { colors: true });
+  assert.deepEqual(
+    sections.map((s) => [s.type, s.sectionColor]),
+    [
+      ['text', 'tint'],
+      ['book', 'tint'],
+      ['text', 'tint'],
+      ['text', undefined],
+    ],
+  );
+});
+
+test('colors: the top (hero) has none, and inheritance restarts after it', () => {
+  const parts = partsOfMarkdown(lines(tint, '## Welcome', 'Intro.', blockHtml('hero', {}), blockHtml('book', {})));
+  const sections = sectionsFromParts(parts, { hero: { body: 'text', upTo: 'buttons' } }, { colors: true });
+  assert.deepEqual(
+    sections.map((s) => s.type),
+    ['hero', 'book'],
+  );
+  assert.ok(sections.every((s) => s.sectionColor === undefined));
+});
+
+test('without the option no section has a colour (fixed pages, the blog page)', () => {
+  const parts = partsOfMarkdown(lines(tint, '## About', 'About text.'));
+  assert.ok(!JSON.stringify(sectionsFromParts(parts, {})).includes('sectionColor'));
+});

package/lib/heading-levels.d.mts

@@ -0,0 +1,7 @@
+/**
+ * The levels with the first set to 1 and every later 1 set to 2 (the others as they are).
+ * @param {number[]} levels The levels (1 to 6) of the headings of a text, in order.
+ * @returns {number[]}
+ */
+export function headingLevels(levels: number[]): number[];
+export function showsH1Choice(levels: number[]): boolean;

package/lib/heading-levels.mjs

@@ -0,0 +1,16 @@
+// The levels of a page's headings as the editor keeps them: the first heading is the page's H1, and no later one is.
+// Exposes headingLevels and showsH1Choice (pure); the editor's plugin that applies it is src/firstHeading.mjs. No dependencies.
+
+/**
+ * The levels with the first set to 1 and every later 1 set to 2 (the others as they are).
+ * @param {number[]} levels The levels (1 to 6) of the headings of a text, in order.
+ * @returns {number[]}
+ */
+export function headingLevels(levels) {
+  return levels.map((level, i) => (i === 0 ? 1 : level === 1 ? 2 : level));
+}
+
+/** Whether the editor offers the H1 choice: only while the text has no H1 (a page has one H1, its first heading).
+ * @param {number[]} levels The levels (1 to 6) of the headings of a text, in order.
+ * @returns {boolean} */
+export const showsH1Choice = (levels) => !levels.includes(1);

package/lib/heading-levels.test.mjs

@@ -0,0 +1,37 @@
+// Tests lib/heading-levels.mjs: on a page the first heading is the H1 and no later one is.
+// 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 { headingLevels, showsH1Choice } from './heading-levels.mjs';
+
+test('no headings, no levels', () => {
+  assert.deepEqual(headingLevels([]), []);
+});
+
+test('the first heading becomes 1, whatever it was', () => {
+  assert.deepEqual(headingLevels([2]), [1]);
+  assert.deepEqual(headingLevels([3, 2]), [1, 2]);
+  assert.deepEqual(headingLevels([1]), [1]);
+});
+
+test('every later 1 becomes 2', () => {
+  assert.deepEqual(headingLevels([1, 1, 2, 1]), [1, 2, 2, 2]);
+  assert.deepEqual(headingLevels([2, 1]), [1, 2]);
+});
+
+test('later 2s and 3s stay as they are', () => {
+  assert.deepEqual(headingLevels([1, 2, 3, 2, 3]), [1, 2, 3, 2, 3]);
+});
+
+test('the list given is not changed', () => {
+  const given = [2, 1, 3];
+  headingLevels(given);
+  assert.deepEqual(given, [2, 1, 3]);
+});
+
+test('the H1 choice is shown only while no heading is an H1', () => {
+  assert.equal(showsH1Choice([]), true);
+  assert.equal(showsH1Choice([2, 3]), true);
+  assert.equal(showsH1Choice([1]), false);
+  assert.equal(showsH1Choice([2, 1, 3]), false);
+});

package/lib/inline.ts

@@ -4,17 +4,18 @@
 // anything that cannot stand inside a <p> (a list, a picture) is shown as its text.
 import { createMarkdownProcessor } from '@astrojs/markdown-remark';
 import { inlineOf } from './markdown';
+import { rehypeEmphasize } from './rehype-emphasize.mjs';
 
 let processor: ReturnType<typeof createMarkdownProcessor> | undefined;
 
 export async function inlineHtml(markdown: string): Promise<string> {
-  processor ??= createMarkdownProcessor();
+  processor ??= createMarkdownProcessor({ rehypePlugins: [rehypeEmphasize] });
   return inlineOf((await (await processor).render(markdown)).code.trim());
 }
 
 /** A longer text the site's owner writes in the editor (an answer in "Spørgsmål og svar") as HTML: paragraphs,
  * lists, bold, italic and links. */
 export async function markdownHtml(markdown: string): Promise<string> {
-  processor ??= createMarkdownProcessor();
+  processor ??= createMarkdownProcessor({ rehypePlugins: [rehypeEmphasize] });
   return (await (await processor).render(markdown)).code.trim();
 }

package/lib/markdown.ts

@@ -9,6 +9,7 @@ import remarkSmartypants from 'remark-smartypants';
 import remarkRehype from 'remark-rehype';
 import rehypeRaw from 'rehype-raw';
 import rehypeStringify from 'rehype-stringify';
+import { rehypeEmphasize } from './rehype-emphasize.mjs';
 
 /** The pipeline, also for a whole page's text (pagePreview.tsx). */
 export const processor = unified()
@@ -17,6 +18,7 @@ export const processor = unified()
   .use(remarkSmartypants)
   .use(remarkRehype, { allowDangerousHtml: true })
   .use(rehypeRaw)
+  .use(rehypeEmphasize)
   .use(rehypeStringify, { allowDangerousHtml: true });
 
 /** A short text's HTML made to stand inside a <p> of its own: its paragraphs separated by a line break, and anything

package/lib/materialIcon.d.mts

@@ -0,0 +1,21 @@
+/** A name as Material Symbols writes it (`drag_indicator`): lower case letters, digits and `_`, a hyphen read as an
+ * underscore (`drag-indicator`). undefined for a name that cannot be a Material file (so it never reaches a path).
+ * @param {string} name @returns {string | undefined} */
+export function materialName(name: string): string | undefined;
+/** What an icon asked for is drawn from, in order: the list's file (for `fill`: the list's filled one, else its regular
+ * one), else Material's (for `fill`: Material's filled one, else its regular one), else nothing (MISSING).
+ * `material` is undefined while Material's set is not loaded yet: `pending` when the list has none.
+ * @param {string} name
+ * @param {'fill' | undefined} weight
+ * @param {{ list: (name: string, weight?: 'fill') => string | undefined, material: ((key: string) => string | undefined) | undefined }} lookup
+ *   `material` is asked for `<name>` and `<name>-fill` (a Material name, see materialName).
+ * @returns {{ file?: string, fallback?: string, pending?: boolean }}
+ *   `fallback`: the name asked for, when the file is Material's. */
+export function resolveIcon(name: string, weight: "fill" | undefined, { list, material }: {
+    list: (name: string, weight?: "fill") => string | undefined;
+    material: ((key: string) => string | undefined) | undefined;
+}): {
+    file?: string;
+    fallback?: string;
+    pending?: boolean;
+};

package/lib/materialIcon.mjs

@@ -0,0 +1,29 @@
+// How an icon name that is not on the site's list is found in Material Symbols (Outlined, `@material-symbols/svg-400`):
+// the name as Material writes it, and the order an icon is looked for in (the list, then Material, then MISSING).
+// Pure functions, so they are tested (materialIcon.test.mjs); the files themselves are looked up by the caller (icon.tsx).
+
+/** A name as Material Symbols writes it (`drag_indicator`): lower case letters, digits and `_`, a hyphen read as an
+ * underscore (`drag-indicator`). undefined for a name that cannot be a Material file (so it never reaches a path).
+ * @param {string} name @returns {string | undefined} */
+export function materialName(name) {
+  return /^[a-z0-9_-]+$/.test(name) ? name.replaceAll('-', '_') : undefined;
+}
+
+/** What an icon asked for is drawn from, in order: the list's file (for `fill`: the list's filled one, else its regular
+ * one), else Material's (for `fill`: Material's filled one, else its regular one), else nothing (MISSING).
+ * `material` is undefined while Material's set is not loaded yet: `pending` when the list has none.
+ * @param {string} name
+ * @param {'fill' | undefined} weight
+ * @param {{ list: (name: string, weight?: 'fill') => string | undefined, material: ((key: string) => string | undefined) | undefined }} lookup
+ *   `material` is asked for `<name>` and `<name>-fill` (a Material name, see materialName).
+ * @returns {{ file?: string, fallback?: string, pending?: boolean }}
+ *   `fallback`: the name asked for, when the file is Material's. */
+export function resolveIcon(name, weight, { list, material }) {
+  const own = (weight ? list(name, weight) : undefined) ?? list(name);
+  if (own) return { file: own };
+  const key = materialName(name);
+  if (!key) return {};
+  if (!material) return { pending: true };
+  const file = (weight ? material(`${key}-fill`) : undefined) ?? material(key);
+  return file ? { file, fallback: name } : {};
+}

package/lib/materialIcon.test.mjs

@@ -0,0 +1,45 @@
+// Tests for lib/materialIcon.mjs: a Material Symbols name, and the order an icon is looked for in. Run: node --test packages/editor/lib/*.test.mjs
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { materialName, resolveIcon } from './materialIcon.mjs';
+
+const listFiles = { check: 'list-check', 'heart-fill': 'list-heart-fill', heart: 'list-heart' };
+const list = (name, weight) => listFiles[weight ? `${name}-${weight}` : name];
+const materialFiles = {
+  check: 'material-check',
+  drag_indicator: 'material-drag',
+  'drag_indicator-fill': 'material-drag-fill',
+  star: 'material-star',
+};
+const material = (key) => materialFiles[key];
+
+test('a hyphen is read as an underscore, a name that is no file name is nothing', () => {
+  assert.equal(materialName('drag-indicator'), 'drag_indicator');
+  assert.equal(materialName('drag_indicator'), 'drag_indicator');
+  assert.equal(materialName('10k'), '10k');
+  assert.equal(materialName('../x'), undefined);
+  assert.equal(materialName('Star'), undefined);
+  assert.equal(materialName(''), undefined);
+});
+
+test('the list wins over Material for a name both have', () => {
+  assert.deepEqual(resolveIcon('check', undefined, { list, material }), { file: 'list-check' });
+  assert.deepEqual(resolveIcon('check', 'fill', { list, material }), { file: 'list-check' });
+});
+
+test('fill: the list filled, then the list regular, then Material filled, then Material regular', () => {
+  assert.deepEqual(resolveIcon('heart', 'fill', { list, material }), { file: 'list-heart-fill' });
+  assert.deepEqual(resolveIcon('drag-indicator', 'fill', { list, material }), { file: 'material-drag-fill', fallback: 'drag-indicator' });
+  assert.deepEqual(resolveIcon('star', 'fill', { list, material }), { file: 'material-star', fallback: 'star' });
+});
+
+test('regular: a name only Material has is Material (hyphens as underscores), marked with the name asked for', () => {
+  assert.deepEqual(resolveIcon('drag-indicator', undefined, { list, material }), { file: 'material-drag', fallback: 'drag-indicator' });
+});
+
+test('a name neither has is missing; before Material is loaded it is pending', () => {
+  assert.deepEqual(resolveIcon('nope', undefined, { list, material }), {});
+  assert.deepEqual(resolveIcon('Nope!', 'fill', { list, material }), {});
+  assert.deepEqual(resolveIcon('star', undefined, { list, material: undefined }), { pending: true });
+  assert.deepEqual(resolveIcon('check', undefined, { list, material: undefined }), { file: 'list-check' });
+});

package/lib/menu-layout.d.mts

@@ -0,0 +1,11 @@
+/** @typedef {import('./breakpoints.mjs').Breakpoint} Breakpoint */
+/** The main menu's layout in a window in breakpoint `width`: compact has no rail (modal drawer, menu button in the top bar);
+ * medium has the rail and expands it as a modal drawer over the content; expanded and wider expand it beside the content.
+ * @param {Breakpoint} width
+ * @returns {{ rail: boolean, expanded: 'modal' | 'standard', menuButtonInTopBar: boolean }} */
+export function menuLayout(width: Breakpoint): {
+    rail: boolean;
+    expanded: "modal" | "standard";
+    menuButtonInTopBar: boolean;
+};
+export type Breakpoint = import("./breakpoints.mjs").Breakpoint;

package/lib/menu-layout.mjs

@@ -0,0 +1,14 @@
+// How the editor's main menu is laid out at a window width (Material 3 breakpoint): whether the full-height navigation rail
+// stands, which way the rail expands, and whether the top bar keeps the menu button. Exposes menuLayout (pure). No dependencies.
+
+/** @typedef {import('./breakpoints.mjs').Breakpoint} Breakpoint */
+
+/** The main menu's layout in a window in breakpoint `width`: compact has no rail (modal drawer, menu button in the top bar);
+ * medium has the rail and expands it as a modal drawer over the content; expanded and wider expand it beside the content.
+ * @param {Breakpoint} width
+ * @returns {{ rail: boolean, expanded: 'modal' | 'standard', menuButtonInTopBar: boolean }} */
+export function menuLayout(width) {
+  if (width === 'compact') return { rail: false, expanded: 'modal', menuButtonInTopBar: true };
+  if (width === 'medium') return { rail: true, expanded: 'modal', menuButtonInTopBar: false };
+  return { rail: true, expanded: 'standard', menuButtonInTopBar: false };
+}

package/lib/menu-layout.test.mjs

@@ -0,0 +1,23 @@
+// Tests lib/menu-layout.mjs (the main menu's layout per breakpoint). Run with `node --test packages/editor/lib/*.test.mjs`.
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { BREAKPOINTS } from './breakpoints.mjs';
+import { menuLayout } from './menu-layout.mjs';
+
+test('compact: no rail, modal drawer, menu button in the top bar', () => {
+  assert.deepEqual(menuLayout('compact'), { rail: false, expanded: 'modal', menuButtonInTopBar: true });
+});
+
+test('medium: rail that expands as a modal drawer, no menu button in the top bar', () => {
+  assert.deepEqual(menuLayout('medium'), { rail: true, expanded: 'modal', menuButtonInTopBar: false });
+});
+
+test('expanded and wider: rail that expands beside the content', () => {
+  for (const width of ['expanded', 'large', 'extraLarge']) {
+    assert.deepEqual(menuLayout(width), { rail: true, expanded: 'standard', menuButtonInTopBar: false }, width);
+  }
+});
+
+test('every breakpoint has a layout', () => {
+  for (const width of Object.keys(BREAKPOINTS)) assert.ok(menuLayout(width), width);
+});

package/lib/menu.d.mts

@@ -0,0 +1,59 @@
+/**
+ * @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: {
+    id: string;
+    title: string;
+    href?: string;
+    ids: string[];
+}[], partOf: (id: string) => {
+    label: string;
+    href: string;
+    count: number | null;
+}, childrenOf: (id: string) => {
+    id: string;
+    label: string;
+    href: string;
+}[]): {
+    id: string;
+    label: string;
+    href?: string;
+    items: {
+        id: string;
+        label: string;
+        href: string;
+        count: number | null;
+        children?: {
+            id: string;
+            label: string;
+            href: string;
+        }[];
+    }[];
+}[];
+/**
+ * @param {string} route
+ * @param {{ open?: string, lists: string[], header: string[], partScreens: string[], cookies: string, store: string }} known
+ * @returns {string}
+ */
+export function currentPart(route: string, known: {
+    open?: string;
+    lists: string[];
+    header: string[];
+    partScreens: string[];
+    cookies: string;
+    store: string;
+}): string;
+/**
+ * @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: string, tree: ReturnType<typeof menuTree>, known: Parameters<typeof currentPart>[1]): {
+    section: string | null;
+    item?: string;
+    child?: string;
+};