@morphemecms/cms 0.5.0 → 0.7.0

package/src/autoTags.test.mjs

@@ -0,0 +1,109 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { filesIn, newlyUsed, autoTagChanges } from './autoTags.mjs';
+import { recordText } from './fileRecords.mjs';
+
+const F = 'src/data/files';
+const A = '/images/uploads/2026/10/a.webp';
+const B = '/images/uploads/2026/10/b.webp';
+const P = '/filer/price-list.pdf';
+const stored = (src, categories, removed, oid = 'o1', id = 'r1') => ({
+  path: `${F}/${id}.json`,
+  oid,
+  record: { src, categories, removed },
+});
+
+test('filesIn finds valid address in markdown image', () => {
+  assert.deepEqual(filesIn('text ![x](' + A + ') end', [A, B]), [A]);
+});
+
+test('filesIn finds valid address in JSON string', () => {
+  assert.deepEqual(filesIn('"image": "' + A + '"', [A]), [A]);
+});
+
+test('filesIn finds valid address after colon', () => {
+  assert.deepEqual(filesIn('file: ' + P, [P]), [P]);
+});
+
+test('filesIn finds valid address in markdown link', () => {
+  assert.deepEqual(filesIn('[Prisliste](' + P + ')', [P]), [P]);
+});
+
+test('filesIn finds valid address in HTML entity', () => {
+  assert.deepEqual(filesIn('data-props="{"file":"' + P + '"}"', [P]), [P]);
+});
+
+test('filesIn does not match if followed by hyphen and more text', () => {
+  assert.deepEqual(filesIn('/images/uploads/2026/10/a.webp-old.webp', [A]), []);
+});
+
+test('filesIn returns unique matches in input order', () => {
+  assert.deepEqual(filesIn(A + ' ' + A, [A, A]), [A]);
+});
+
+test('newlyUsed returns files added but not removed', () => {
+  assert.deepEqual(newlyUsed('![x](' + A + ')', '![x](' + A + ') ![y](' + B + ')', [A, B]), [B]);
+});
+
+test('newlyUsed returns file added from empty before', () => {
+  assert.deepEqual(newlyUsed('', '[p](' + P + ')', [P]), [P]);
+});
+
+test('newlyUsed returns empty if file removed', () => {
+  assert.deepEqual(newlyUsed('![x](' + A + ')', '', [A]), []);
+});
+
+test('autoTagChanges creates new record with page tags', () => {
+  const expected = [
+    {
+      path: 'src/data/files/aaaaaaaa.json',
+      content: recordText({ src: A, categories: ['design'], removed: [] }),
+      oid: null,
+    },
+  ];
+  assert.deepEqual(
+    autoTagChanges([], F, [A], ['design'], () => 0),
+    expected,
+  );
+});
+
+test('autoTagChanges updates existing record with new tags', () => {
+  const expected = [
+    {
+      path: F + '/r1.json',
+      content: recordText({ src: A, categories: ['seo', 'design'], removed: [] }),
+      oid: 'o1',
+    },
+  ];
+  assert.deepEqual(autoTagChanges([stored(A, ['seo'], [])], F, [A], ['design']), expected);
+});
+
+test('autoTagChanges does not add removed tags', () => {
+  assert.deepEqual(autoTagChanges([stored(A, [], ['design'])], F, [A], ['design']), []);
+});
+
+test('autoTagChanges does not update if tags already present', () => {
+  assert.deepEqual(autoTagChanges([stored(A, ['design'], [])], F, [A], ['design']), []);
+});
+
+test('autoTagChanges returns empty for no page tags', () => {
+  assert.deepEqual(autoTagChanges([], F, [A], []), []);
+});
+
+test('autoTagChanges returns empty for no sources', () => {
+  assert.deepEqual(autoTagChanges([], F, [], ['design']), []);
+});
+
+test('autoTagChanges handles duplicate sources', () => {
+  assert.equal(autoTagChanges([], F, [A, A], ['design']).length, 1);
+});
+
+test('autoTagChanges creates unique paths for multiple new files', () => {
+  let n = 0;
+  const random = () => (n++ < 8 ? 0 : 0.99);
+  const changes = autoTagChanges([], F, [A, B], ['design'], random);
+  assert.equal(changes.length, 2);
+  assert.equal(changes[0].oid, null);
+  assert.equal(changes[1].oid, null);
+  assert.notEqual(changes[0].path, changes[1].path);
+});

package/src/buildSettings.test.mjs

@@ -0,0 +1,20 @@
+// Tests for src/buildSettings.ts: the build settings read from and written to the text of src/data/build.json, so the
+// editor's switches keep the file valid. Run: node --test packages/editor/src/*.test.mjs
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { buildSettingsOf, withBuildSetting } from './buildSettings.ts';
+
+test('a missing or broken file gives the defaults', () => {
+  assert.deepEqual(buildSettingsOf(undefined), { contentLane: true, paidBuilds: false });
+  assert.deepEqual(buildSettingsOf('{ nope'), { contentLane: true, paidBuilds: false });
+});
+
+test('a change on a missing file writes both settings', () => {
+  assert.equal(withBuildSetting(undefined, 'contentLane', false), '{\n  "contentLane": false,\n  "paidBuilds": false\n}\n');
+});
+
+test('a change keeps the other setting', () => {
+  const once = withBuildSetting(undefined, 'paidBuilds', true);
+  assert.deepEqual(buildSettingsOf(once), { contentLane: true, paidBuilds: true });
+  assert.deepEqual(buildSettingsOf(withBuildSetting(once, 'contentLane', false)), { contentLane: false, paidBuilds: true });
+});

package/src/buildSettings.ts

@@ -0,0 +1,20 @@
+// The build settings the editor writes under "Indstillinger" › "Avanceret" (Advanced.tsx): src/data/build.json, read by
+// the build (fast content lane) and by the editor's wait for a build. Exposes buildSettingsOf and withBuildSetting; the
+// defaults come from packages/editor/lib/build-settings.mjs.
+import { readBuildSettings } from '../lib/build-settings.mjs';
+
+export type BuildSettings = { contentLane: boolean; paidBuilds: boolean };
+export type BuildSetting = keyof BuildSettings;
+
+/** The settings in the file's text, with the defaults filled in; a missing file (undefined) or text that is not JSON gives the defaults. */
+export function buildSettingsOf(text: string | undefined): BuildSettings {
+  try {
+    return readBuildSettings(text === undefined ? undefined : JSON.parse(text));
+  } catch {
+    return readBuildSettings(undefined);
+  }
+}
+
+/** The file's text with one setting changed; both settings are written, as the file is read with the defaults. */
+export const withBuildSetting = (text: string | undefined, key: BuildSetting, value: boolean): string =>
+  `${JSON.stringify({ ...buildSettingsOf(text), [key]: value }, null, 2)}\n`;

package/src/checkSite.ts

@@ -7,6 +7,7 @@
 // The rules of a page's template (collections.ts) too: what may be there, how many, and what must.
 // The redirects (redirectData.ts): none sends on through another, and none in a loop. And the site's own rules
 // (siteProblems in its rules.ts: a button that opens a promotion not on its page).
+// The file records (src/data/files: the tags of files in Filer): each is valid, no tag is both chosen and removed, one per address.
 // And the site's texts the editor has no translation of (untranslated).
 import { check } from './check';
 import {
@@ -36,6 +37,7 @@ import { appFolder, SCREENSHOTS, shotFile, shotOf } from './store';
 import { appFolders } from './appFiles';
 import { colorPairs as shownPairs, sharedParts, translator, writtenApps, writtenBlockParts, writtenCollections } from './site';
 import { splitBlocks } from '../lib/blocks.mjs';
+import { isRecordPath, recordProblems } from './fileRecords.mjs';
 import { appTexts, DEFAULTS_LOCALE, locales, siteLocale, t, type Texts } from './i18n';
 import { flatten, readAll, REDIRECT_FILES, type AllRedirects } from './redirectData';
 
@@ -181,6 +183,17 @@ export function problemsOf(files: SiteFile[]): { problems: string[]; files: numb
   }
   // The site's own rules (a button that opens a promotion that is not on its page).
   problems.push(...siteProblems(files));
+  // The file records directly in the records folder: a line for each problem, and each one counts as checked.
+  for (const f of files) if (isRecordPath(f.path, config.fileRecords)) checked.add(f.path);
+  for (const p of recordProblems(files, config.fileRecords)) {
+    const text =
+      p.problem === 'shape'
+        ? t.check.recordShape
+        : p.problem === 'overlap'
+          ? t.check.recordOverlap(p.value!)
+          : t.check.recordDuplicate(p.value!);
+    problems.push(`${p.path}: ${text}`);
+  }
   return { problems, files: checked.size, blocks };
 }
 
@@ -232,7 +245,7 @@ export function untranslated(): Record<string, Record<string, string[]>> {
           'src/site/texts.ts': missing(l, site, (w) => {
             collections.forEach(w.collection);
             [...companyParts, ...partScreens.flatMap((s) => s.parts), ...appearance, ...seoParts, ...blockParts].forEach(w.part);
-            partScreens.forEach((s) => w.group({ title: s.label, ids: [] }));
+            partScreens.forEach((s) => w.group({ id: s.id, title: s.label, ids: [] }));
             groups.forEach(w.group);
             colorFields.forEach(w.color);
             colorPairs.forEach(w.pair);

package/src/deploy.ts

@@ -1,10 +1,11 @@
 // After a save: tells when the site has been rebuilt with it. Each build writes the commit it was
 // made from to /editor/version.json (packages/editor/pages/editor/version.json.js), and the editor asks for that
 // until it is the saved commit or a later one. The message is a notification of the type `site` (notificationData.ts),
-// which also comes on the phone or computer when the editor is not on screen.
+// which also comes on the phone or computer when the editor is not on screen. It gives up after 20 minutes, or 10 with paidBuilds.
 // Each save says what it changed ("farver ændret", "side “Om” ændret", t.app.changes): right after it (savedText),
 // and, with the other saves since, when the website has been updated with them (changesText, App.tsx save).
 import { graphql, REPO } from './github';
+import { giveUpAfter } from '../lib/build-settings.mjs';
 import { entryName, type Collection } from './schema';
 import { readFields, splitFrontmatter } from './frontmatter.mjs';
 import { locale, t } from './i18n';
@@ -39,10 +40,9 @@ export function changesText(changes: string[]): string {
 }
 
 const EVERY = 10_000;
-const GIVE_UP = 10 * 60_000;
 
 // What the site was last built from: the commit, the fingerprint of the editor's code and when.
-type Version = { commit?: string; editor?: string; builtAt?: string };
+type Version = { commit?: string; editor?: string; builtAt?: string; paidBuilds?: boolean };
 async function version(): Promise<Version> {
   try {
     const res = await fetch('/editor/version.json', { cache: 'no-store' });
@@ -52,8 +52,6 @@ async function version(): Promise<Version> {
   }
 }
 
-const built = async () => (await version()).commit ?? null;
-
 // Whether `commit` is among the last commits up to `build` (the site may be built from a later one).
 async function includes(build: string, commit: string): Promise<boolean> {
   const data = await graphql<{ repository: { object: { history?: { nodes: { oid: string }[] } } | null } }>(
@@ -78,16 +76,16 @@ async function includes(build: string, commit: string): Promise<boolean> {
 }
 
 // Waits for `commit` to be on the site: done(true) when it is, done(false) when it is not after
-// 10 minutes. Returns a function that stops waiting (a newer save takes over).
+// giveUpAfter(paidBuilds) (20 minutes on the free plan, 10 on Workers Paid; paidBuilds is in version.json). Returns a function that stops waiting (a newer save takes over).
 export function waitForSite(commit: string, done: (online: boolean) => void): () => void {
-  const until = Date.now() + GIVE_UP;
+  const started = Date.now();
   // The build last looked at, so GitHub is asked about each build once.
   let seen: string | null = null;
   let stopped = false;
   let timer: ReturnType<typeof setTimeout>;
 
   async function check() {
-    const build = await built();
+    const { commit: build, paidBuilds } = await version();
     if (stopped) return;
     if (build && build !== seen) {
       seen = build;
@@ -95,7 +93,7 @@ export function waitForSite(commit: string, done: (online: boolean) => void): ()
       if (stopped) return;
       if (online) return done(true);
     }
-    if (Date.now() > until) {
+    if (Date.now() > started + giveUpAfter(paidBuilds === true)) {
       // Without any version file (a build from before it existed) there is nothing to tell.
       if (seen) done(false);
       return;

package/src/editor.css

@@ -1,6 +1,8 @@
 /* The editor's parts are the theme's UI parts (ui.tsx), in the theme's design; its own parts take the theme's variables
    (--block-radius, --block-radius-small, --block-shadow). Only what is the editor's alone is here. Low specificity
    (:where), so a theme's :root wins. */
+@reference '../theme/styles/base.css';
+
 :where(:root) {
   /* How a check went (CheckList: the SEO rating), as PageSpeed shows it: the mark before a check that is fine and one
      that can be done better, and the score's ring (from 90 good, from 50 average, else bad) with its number and the
@@ -14,6 +16,17 @@
   --editor-status-bad: #ff4e42;
   --editor-status-bad-text: #cc0000;
   --editor-status-bad-surface: color-mix(in srgb, #ff4e42 10%, var(--surface));
+
+  /* The dotted frame round an H2 section of a page or blog post (sectionFrame.ts): its line, the space between the line and
+     the text, the space above a section, and the space between two parts inside it (em: it scales with the part's text). */
+  --editor-section-frame: 2px dotted var(--block-line);
+  --editor-section-pad: 1rem;
+  --editor-section-gap: 2rem;
+  --editor-section-rhythm: 0.625em;
+
+  /* A form's sections pane (SectionPane in ui.tsx): Material 3's 412dp pane against the window's end edge
+     (m3.material.io/foundations/layout/breakpoints/large-extra-large). */
+  --section-pane-width: 25.75rem;
 }
 
 /* In dark mode the score's number in the light colours, which are read on the dark. */
@@ -52,6 +65,51 @@
   margin-block: 0;
 }
 
+/* The dotted frame round an H2 section (data-section-part, sectionFrame.ts): one line made of the parts' own borders. The space
+   between two parts is padding, not margin, so the line is never broken; the space above a section is outside its line. */
+.editor-text .ProseMirror > [data-section-part] {
+  margin-block: 0;
+  border-inline: var(--editor-section-frame);
+  padding-inline: var(--editor-section-pad);
+  padding-block: var(--editor-section-rhythm);
+}
+
+.editor-text .ProseMirror > :is(h2, h3)[data-section-part] {
+  padding-block-start: calc(var(--editor-section-rhythm) * 2);
+}
+
+.editor-text .ProseMirror > :is([data-section-part='start'], [data-section-part='only']) {
+  margin-block-start: var(--editor-section-gap);
+  border-block-start: var(--editor-section-frame);
+  padding-block-start: var(--editor-section-pad);
+}
+
+.editor-text .ProseMirror > :is([data-section-part='end'], [data-section-part='only']) {
+  border-block-end: var(--editor-section-frame);
+  padding-block-end: var(--editor-section-pad);
+}
+
+/* The colour of an H2 section (data-section-color, sectionFrame.ts): the theme's own colours, as the site draws the panel (wave 4).
+   On the accent the text takes the colour made for it, through the prose variables, so headings, bold and links stay readable. */
+.editor-text .ProseMirror > [data-section-color='surface'] {
+  background: var(--block-surface);
+}
+
+.editor-text .ProseMirror > [data-section-color='tint'] {
+  background: var(--block-tint);
+}
+
+.editor-text .ProseMirror > [data-section-color='accent'] {
+  --tw-prose-body: var(--block-on-accent);
+  --tw-prose-headings: var(--block-on-accent);
+  --tw-prose-bold: var(--block-on-accent);
+  --tw-prose-links: var(--block-on-accent);
+  --tw-prose-bullets: var(--block-on-accent);
+  --tw-prose-counters: var(--block-on-accent);
+  background: var(--block-accent);
+  color: var(--block-on-accent);
+}
+
 /* HTML in a line of text is kept as it is but cannot be edited here (on a line of its own it is a
    block, HTML in markdown.mjs). */
 .editor-text [data-type='html'] {
@@ -136,7 +194,7 @@
 
 /* A sheet that is dragged up by its top on a phone (SheetTitle in ui.tsx) is as tall as the screen,
    below the clock, or as tall as what is in it, if that is less. */
-@media not (min-width: 48rem) {
+@media (width < theme(--breakpoint-medium)) {
   .editor-sheet[data-tall] {
     max-height: calc(100dvh - env(safe-area-inset-top));
   }
@@ -153,27 +211,31 @@
     animation: editor-sheet-in var(--motion-spatial);
   }
 
-  /* A modal navigation drawer (ModalNavigationDrawer in ui.tsx) slides in from the right edge. */
-  .editor-drawer[open] {
-    animation: editor-drawer-in var(--motion-spatial);
-  }
-
-  :is(.editor-sheet, .editor-drawer)[open]::backdrop {
+  .editor-sheet[open]::backdrop {
     animation: editor-fade var(--motion-effects);
   }
 
-  @media (min-width: 48rem) {
+  @media (width >= theme(--breakpoint-medium)) {
     .editor-sheet[open] {
       animation: editor-pop var(--motion-spatial-fast);
     }
   }
 
+  /* The main drawer (MainDrawer in ui.tsx) slides in from the start edge: the left, the right when the text runs right to left. */
+  .editor-main-drawer[open] {
+    animation: editor-main-drawer-in var(--motion-spatial);
+  }
+
+  .editor-main-drawer[open]::backdrop {
+    animation: editor-fade var(--motion-effects);
+  }
+
   .editor-screen {
     animation: editor-enter var(--motion-spatial);
-    /* A chip set that scrolls reaches out to the screen's edges: the screen's gutter (px-4, md:px-6 in Screen.tsx). */
+    /* A chip set that scrolls reaches out to the screen's edges: the screen's gutter (px-4, medium:px-6 in Screen.tsx). */
     --chip-set-bleed: 1rem;
   }
-  @media (min-width: 48rem) {
+  @media (width >= theme(--breakpoint-medium)) {
     .editor-screen {
       --chip-set-bleed: 1.5rem;
     }
@@ -210,12 +272,49 @@
   }
 }
 
-@keyframes editor-drawer-in {
+@keyframes editor-main-drawer-in {
+  from {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes editor-main-drawer-in-rtl {
   from {
     transform: translateX(100%);
   }
 }
 
+/* A drag along the drawer reaches MainDrawer's swipe to close; scrolling its list still works. */
+.editor-main-drawer {
+  touch-action: pan-y;
+}
+
+.editor-main-drawer:dir(rtl)[open] {
+  animation-name: editor-main-drawer-in-rtl;
+}
+
+/* From medium the drawers (MainDrawer in ui.tsx) take the rail's place (MainRail): they share its icon column, the middle
+   of the rail. On a phone the drawer keeps the theme's (Material 3's navigation drawer). The rail's menu button stands
+   level with the top bar's logo, as the drawers' does; the rail's items keep their place. */
+@media (width >= theme(--breakpoint-medium)) {
+  .editor-main-drawer-panel {
+    --navigation-drawer-inset: 1.25rem;
+  }
+}
+
+.editor-main-rail {
+  --navigation-rail-padding: 0.5rem 0.5rem 1.5rem;
+}
+
+.editor-main-rail .navigation-rail-header {
+  margin-bottom: 1rem;
+}
+
+/* The rail (and the room above it for a phone's notch) in the open drawer's colour, so it does not change when the drawer opens. */
+.editor-main-rail-frame {
+  --navigation-rail-surface: var(--navigation-drawer-surface, var(--surface-container-low, var(--bg)));
+}
+
 @keyframes editor-pop {
   from {
     opacity: 0;
@@ -240,13 +339,47 @@
   bottom: calc(5.5rem + env(safe-area-inset-bottom));
 }
 
-/* On a computer, the messages are in the middle of the content, next to the sidebar (App.tsx). */
-@media (width >= 48rem) {
-  :root .snackbar-stack {
-    padding-left: 4.5rem;
+/* The screen's main actions (FabMenu in ui.tsx) at the bottom right, above the content; the messages above them. */
+.editor-fab {
+  position: fixed;
+  right: calc(1rem + env(safe-area-inset-right));
+  bottom: calc(1rem + env(safe-area-inset-bottom));
+  z-index: 30;
+}
+
+:root:has(.editor-fab) .snackbar-stack {
+  bottom: calc(6rem + env(safe-area-inset-bottom));
+}
+
+/* From medium the navigation rail stands at the start edge of the window (MainMenu.tsx), so the messages are in the middle of
+   the content next to it and the save bar starts where it ends; at expanded and wider, while the standard drawer is open
+   in the rail's place, they keep clear of the drawer instead. The widths are the theme's. The top bar and its tabs (Screen.tsx)
+   stand beside the rail and the drawer, so they need no room. */
+@media (width >= theme(--breakpoint-medium)) {
+  .snackbar-stack {
+    padding-left: var(--navigation-rail-width, 5.5rem);
+  }
+  .editor-save-bar {
+    left: var(--navigation-rail-width, 5.5rem);
   }
+}
+@media (width >= theme(--breakpoint-expanded)) {
   :root[data-sidebar='open'] .snackbar-stack {
-    padding-left: 16rem;
+    padding-left: var(--navigation-drawer-width, 22.5rem);
+  }
+  :root[data-sidebar='open'] .editor-save-bar {
+    left: var(--navigation-drawer-width, 22.5rem);
+  }
+}
+
+/* The sections pane (FormColumns' `pane` in ui.tsx) stands against the window's end edge on large and wider: the content
+   keeps clear of it, so the form is centred to its left, and the save bar ends where the pane begins. */
+@media (width >= theme(--breakpoint-large)) {
+  .editor-content:has(.editor-section-pane) {
+    padding-inline-end: var(--section-pane-width);
+  }
+  :root:has(.editor-section-pane) .editor-save-bar {
+    right: var(--section-pane-width);
   }
 }
 
@@ -514,7 +647,7 @@ html {
   line-height: 1.625;
 }
 
-@media (min-width: 768px) {
+@media (width >= theme(--breakpoint-medium)) {
   .editor-text .ProseMirror > [data-look='section'] {
     font-size: 3rem;
   }

package/src/eyebrow.d.mts

@@ -0,0 +1,5 @@
+/** @type {import('@milkdown/kit/utils').$NodeSchema<'eyebrow'>} */
+export const eyebrowSchema: import("@milkdown/kit/utils").$NodeSchema<"eyebrow">;
+/** @type {import('@milkdown/kit/utils').$Prose} */
+export const eyebrowKeeper: import("@milkdown/kit/utils").$Prose;
+export const eyebrowKeymap: any;

package/src/eyebrow.mjs

@@ -0,0 +1,53 @@
+// A label above a heading in the editor (lib/eyebrow.mjs: its HTML): the node `eyebrow`, one line of plain text, read
+// from its line of HTML (remarkSiteBlocks in markdown.mjs) and written back as it; a label with no heading after it
+// becomes a paragraph (eyebrowKeeper), and Enter in it goes to its heading (eyebrowKeymap). Exposes eyebrowSchema,
+// eyebrowKeeper and eyebrowKeymap. Depends on Milkdown and src/eyebrowState.mjs.
+import { $nodeSchema, $prose, $useKeymap } from '@milkdown/kit/utils';
+import { Plugin } from '@milkdown/kit/prose/state';
+import { EYEBROW_CLASS, eyebrowHtml } from '../lib/eyebrow.mjs';
+import { enterInLabel, looseLabels } from './eyebrowState.mjs';
+
+/** @type {import('@milkdown/kit/utils').$NodeSchema<'eyebrow'>} */
+export const eyebrowSchema = $nodeSchema('eyebrow', () => ({
+  group: 'block',
+  content: 'text*',
+  marks: '',
+  defining: true,
+  // Before a paragraph's own rule.
+  parseDOM: [{ tag: `p.${EYEBROW_CLASS}`, priority: 60 }],
+  toDOM: () => ['p', { class: EYEBROW_CLASS }, 0],
+  parseMarkdown: {
+    match: (node) => node.type === 'eyebrow',
+    runner: (state, node, type) => {
+      state.openNode(type);
+      if (node.value) state.addText(String(node.value));
+      state.closeNode();
+    },
+  },
+  toMarkdown: {
+    match: (node) => node.type.name === 'eyebrow',
+    runner: (state, node) => {
+      state.addNode('html', undefined, eyebrowHtml(node.textContent));
+    },
+  },
+}));
+
+// A label whose heading has gone (deleted, or turned into text) is a paragraph with its text.
+/** @type {import('@milkdown/kit/utils').$Prose} */
+export const eyebrowKeeper = $prose(
+  () =>
+    new Plugin({
+      appendTransaction: (_, __, state) => {
+        const loose = looseLabels(state.doc);
+        if (!loose.length) return null;
+        const tr = state.tr;
+        for (const at of loose) tr.setNodeMarkup(at, state.schema.nodes.paragraph);
+        return tr;
+      },
+    }),
+);
+
+// Before the text's own Enter (priority 50), which would split the label into two lines.
+export const eyebrowKeymap = $useKeymap('eyebrow', {
+  EnterInLabel: { shortcuts: 'Enter', priority: 100, command: () => enterInLabel },
+});

package/src/eyebrowState.d.mts

@@ -0,0 +1,21 @@
+/** The positions of the labels at the top of the text with no heading right after them.
+ * @param {import('@milkdown/kit/prose/model').Node} doc @returns {number[]} */
+export function looseLabels(doc: import("@milkdown/kit/prose/model").Node): number[];
+/** The heading the label button is for: the one the cursor is in, or the one after the label it is in, at the top of
+ * the text; null elsewhere. @param {import('@milkdown/kit/prose/state').EditorState} state
+ * @returns {{ pos: number, level: number } | null} */
+export function labelledHeading(state: import("@milkdown/kit/prose/state").EditorState): {
+    pos: number;
+    level: number;
+} | null;
+/** Whether the heading the label button is for has a label. @param {import('@milkdown/kit/prose/state').EditorState} state */
+export function hasLabel(state: import("@milkdown/kit/prose/state").EditorState): boolean;
+/** The label button: an empty label above the heading, with the cursor in it, or the heading's label taken away.
+ * @param {{ state: import('@milkdown/kit/prose/state').EditorState, dispatch: (tr: import('@milkdown/kit/prose/state').Transaction) => void }} view */
+export function toggleLabel(view: {
+    state: import("@milkdown/kit/prose/state").EditorState;
+    dispatch: (tr: import("@milkdown/kit/prose/state").Transaction) => void;
+}): void;
+/** Enter in a label: the cursor goes to the start of its heading, as a label is one line.
+ * @type {import('@milkdown/kit/prose/state').Command} */
+export const enterInLabel: import("@milkdown/kit/prose/state").Command;

package/src/eyebrowState.mjs

@@ -0,0 +1,62 @@
+// Labels above headings in the editor's document: a label with no heading after it is loose (looseLabels), Enter in a
+// label goes to its heading (enterInLabel; both used by src/eyebrow.mjs), and the label button's heading, state and
+// command (labelledHeading, hasLabel, toggleLabel). Only ProseMirror's state; no Milkdown, no browser.
+import { TextSelection } from '@milkdown/kit/prose/state';
+
+/** The positions of the labels at the top of the text with no heading right after them.
+ * @param {import('@milkdown/kit/prose/model').Node} doc @returns {number[]} */
+export function looseLabels(doc) {
+  /** @type {number[]} */
+  const loose = [];
+  doc.forEach((node, at, i) => {
+    if (node.type.name === 'eyebrow' && doc.maybeChild(i + 1)?.type.name !== 'heading') loose.push(at);
+  });
+  return loose;
+}
+
+/** Enter in a label: the cursor goes to the start of its heading, as a label is one line.
+ * @type {import('@milkdown/kit/prose/state').Command} */
+export const enterInLabel = (state, dispatch) => {
+  const { $from } = state.selection;
+  if ($from.parent.type.name !== 'eyebrow') return false;
+  dispatch?.(state.tr.setSelection(TextSelection.create(state.doc, $from.after() + 1)));
+  return true;
+};
+
+/** The heading the label button is for: the one the cursor is in, or the one after the label it is in, at the top of
+ * the text; null elsewhere. @param {import('@milkdown/kit/prose/state').EditorState} state
+ * @returns {{ pos: number, level: number } | null} */
+export function labelledHeading(state) {
+  const { $from } = state.selection;
+  if ($from.depth !== 1) return null;
+  const block = $from.parent;
+  const at = $from.before(1);
+  if (block.type.name === 'heading') return { pos: at, level: block.attrs.level };
+  if (block.type.name !== 'eyebrow') return null;
+  const next = state.doc.nodeAt(at + block.nodeSize);
+  return next?.type.name === 'heading' ? { pos: at + block.nodeSize, level: next.attrs.level } : null;
+}
+
+// The position of the label right before the heading at pos, or null.
+const labelBefore = (state, pos) => {
+  const before = state.doc.resolve(pos).nodeBefore;
+  return before?.type.name === 'eyebrow' ? pos - before.nodeSize : null;
+};
+
+/** Whether the heading the label button is for has a label. @param {import('@milkdown/kit/prose/state').EditorState} state */
+export function hasLabel(state) {
+  const heading = labelledHeading(state);
+  return !!heading && labelBefore(state, heading.pos) !== null;
+}
+
+/** The label button: an empty label above the heading, with the cursor in it, or the heading's label taken away.
+ * @param {{ state: import('@milkdown/kit/prose/state').EditorState, dispatch: (tr: import('@milkdown/kit/prose/state').Transaction) => void }} view */
+export function toggleLabel(view) {
+  const { state } = view;
+  const heading = labelledHeading(state);
+  if (!heading) return;
+  const label = labelBefore(state, heading.pos);
+  if (label !== null) return view.dispatch(state.tr.delete(label, heading.pos));
+  const tr = state.tr.insert(heading.pos, state.schema.nodes.eyebrow.create());
+  view.dispatch(tr.setSelection(TextSelection.create(tr.doc, heading.pos + 1)).scrollIntoView());
+}