@morphemecms/cms 0.5.0 → 0.7.0

package/lib/section-ranges.mjs

@@ -0,0 +1,43 @@
+// Which top-level parts of a page's or blog post's text form H2 sections, for the editor's dotted frame.
+// Exposes sectionRanges, sectionPart and partKind. Pure, no dependencies (used by src/sectionFrame.ts).
+
+/** 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, level) {
+  if (typeName === 'heading') return level === 1 ? 'h1' : level === 2 ? 'h2' : 'other';
+  return typeName === 'eyebrow' ? 'label' : 'other';
+}
+
+/**
+ * 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) {
+  const ranges = [];
+  let from = -1;
+  const close = (to) => {
+    if (from >= 0 && to >= from) ranges.push({ from, to });
+    from = -1;
+  };
+  parts.forEach((part, i) => {
+    const next = parts[i + 1]?.kind;
+    if (part.kind === 'label') {
+      if (next === 'h2') {
+        close(i - 1);
+        from = i;
+      } else if (next === 'h1') close(i - 1);
+    } else if (part.kind === 'h2') {
+      if (parts[i - 1]?.kind !== 'label') {
+        close(i - 1);
+        from = i;
+      }
+    } else if (part.kind === 'h1') close(i - 1);
+  });
+  close(parts.length - 1);
+  return ranges;
+}
+
+/** Where a part is in its section: 'start', 'middle', 'end', or 'only' for a section of one part. */
+export function sectionPart(index, { from, to }) {
+  if (from === to) return 'only';
+  return index === from ? 'start' : index === to ? 'end' : 'middle';
+}

package/lib/section-ranges.test.mjs

@@ -0,0 +1,61 @@
+// Tests lib/section-ranges.mjs: which top-level parts of a text form H2 sections (the editor's dotted frame).
+// 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 { partKind, sectionPart, sectionRanges } from './section-ranges.mjs';
+
+// '1 2 l o' -> h1, h2, label, other
+const KINDS = { 1: 'h1', 2: 'h2', l: 'label', o: 'other' };
+const ranges = (text) =>
+  sectionRanges(
+    text
+      .split(' ')
+      .filter(Boolean)
+      .map((c) => ({ kind: KINDS[c] })),
+  );
+
+test('no parts, no sections', () => assert.deepEqual(ranges(''), []));
+test('no H2, no sections', () => assert.deepEqual(ranges('1 o o'), []));
+test('an H2 at the start runs to the end', () => assert.deepEqual(ranges('2 o o'), [{ from: 0, to: 2 }]));
+test('text before the first H2 is outside', () => assert.deepEqual(ranges('o 2 o'), [{ from: 1, to: 2 }]));
+test('an H2 as the last part is a section of one', () => assert.deepEqual(ranges('o o 2'), [{ from: 2, to: 2 }]));
+test('an H1 ends a section', () =>
+  assert.deepEqual(ranges('2 o 1 o 2 o'), [
+    { from: 0, to: 1 },
+    { from: 4, to: 5 },
+  ]));
+test('consecutive H2s are a section each', () =>
+  assert.deepEqual(ranges('2 2 o 2'), [
+    { from: 0, to: 0 },
+    { from: 1, to: 2 },
+    { from: 3, to: 3 },
+  ]));
+test('a label before an H2 starts the section', () => assert.deepEqual(ranges('o l 2 o'), [{ from: 1, to: 3 }]));
+test('a label before an H2 ends the section above it', () =>
+  assert.deepEqual(ranges('2 o l 2 o'), [
+    { from: 0, to: 1 },
+    { from: 2, to: 4 },
+  ]));
+test('a label before an H1 belongs to the H1', () => assert.deepEqual(ranges('2 o l 1 o'), [{ from: 0, to: 1 }]));
+test('a label at the start before an H1 starts nothing', () => assert.deepEqual(ranges('l 1 2 o'), [{ from: 2, to: 3 }]));
+test('a label not before a heading is an ordinary part', () => {
+  assert.deepEqual(ranges('2 l o'), [{ from: 0, to: 2 }]);
+  assert.deepEqual(ranges('l o 2'), [{ from: 2, to: 2 }]);
+  assert.deepEqual(ranges('2 o l'), [{ from: 0, to: 2 }]);
+});
+
+test('sectionPart tells where a part is in its section', () => {
+  assert.equal(sectionPart(3, { from: 3, to: 3 }), 'only');
+  assert.equal(sectionPart(1, { from: 1, to: 4 }), 'start');
+  assert.equal(sectionPart(2, { from: 1, to: 4 }), 'middle');
+  assert.equal(sectionPart(4, { from: 1, to: 4 }), 'end');
+});
+
+test('partKind reads a node name and heading level', () => {
+  assert.equal(partKind('heading', 1), 'h1');
+  assert.equal(partKind('heading', 2), 'h2');
+  assert.equal(partKind('heading', 3), 'other');
+  assert.equal(partKind('eyebrow'), 'label');
+  assert.equal(partKind('paragraph'), 'other');
+  assert.equal(partKind('siteBlock'), 'other');
+});

package/lib/sheet-stops.d.mts

@@ -0,0 +1,68 @@
+/**
+ * Material 3's states for a standard sheet: 'hidden' first when it can be closed.
+ * @param {boolean} closable
+ * @returns {SheetState[]}
+ */
+export function defaultStates(closable: boolean): SheetState[];
+/**
+ * More than one state other than 'hidden'.
+ * @param {SheetState[]} states
+ * @returns {boolean}
+ */
+export function isResizable(states: SheetState[]): boolean;
+/**
+ * The stops a sheet rests in, lowest first, from the measured heights (px) and the allowed states.
+ * half-expanded is kept only when more than 48px from both neighbours; a stop within 1px of the one before is dropped.
+ * @param {{ collapsed: number, 'half-expanded': number, expanded: number }} heights
+ * @param {SheetState[]} states
+ * @returns {Stop[]}
+ */
+export function restingStops(heights: {
+    collapsed: number;
+    "half-expanded": number;
+    expanded: number;
+}, states: SheetState[]): Stop[];
+/**
+ * The state a tap on the handle (or the resize button) moves to: the next higher stop, never 'hidden';
+ * from the highest, or from a state that is not a stop, the lowest.
+ * @param {Stop[]} stops
+ * @param {SheetState} current
+ * @returns {SheetState}
+ */
+export function nextOnTap(stops: Stop[], current: SheetState): SheetState;
+/**
+ * The state a drag comes to rest in: a flick (over 0.4 px/ms) moves on to the next stop that way,
+ * otherwise the nearest (a tie goes to the lower).
+ * @param {Stop[]} stops
+ * @param {number} height - the sheet's height in px when let go
+ * @param {number} velocity - px/ms, positive upward
+ * @returns {SheetState}
+ */
+export function restAfterDrag(stops: Stop[], height: number, velocity: number): SheetState;
+/**
+ * The start height of a modal sheet: the smaller of its content height and the allowed space,
+ * which is the full viewport minus a gap, or half the viewport.
+ * @param {number} content
+ * @param {number} viewport
+ * @param {'half' | 'full'} startAt
+ * @param {number} topGap
+ * @returns {number}
+ */
+export function modalStartHeight(content: number, viewport: number, startAt: "half" | "full", topGap: number): number;
+/**
+ * The rest place of a modal sheet after a drag: full, start, or close.
+ * A flick (over 0.4 px/ms) moves to full or to start/close depending on the height.
+ * Otherwise the nearest stop, with ties going to the higher stop.
+ * @param {number} start
+ * @param {number} full
+ * @param {number} height
+ * @param {number} velocity
+ * @returns {ModalRest}
+ */
+export function modalRestAfterDrag(start: number, full: number, height: number, velocity: number): ModalRest;
+export type SheetState = "collapsed" | "half-expanded" | "expanded" | "hidden";
+export type Stop = {
+    state: SheetState;
+    height: number;
+};
+export type ModalRest = "start" | "full" | "close";

package/lib/sheet-stops.mjs

@@ -0,0 +1,198 @@
+// A bottom sheet's height decisions (bottomSheetControl.ts uses them): the states it rests in, the next one on a tap,
+// the one a drag comes to rest in, and a modal sheet's start height and resting place. Pure, so it is tested
+// (sheet-stops.test.mjs). Exports defaultStates, isResizable, restingStops, nextOnTap, restAfterDrag, modalStartHeight
+// and modalRestAfterDrag. No dependencies.
+
+/** @typedef {'collapsed' | 'half-expanded' | 'expanded' | 'hidden'} SheetState */
+/** @typedef {{ state: SheetState, height: number }} Stop */
+/** @typedef {'start' | 'full' | 'close'} ModalRest */
+
+const stateOrder = ['hidden', 'collapsed', 'half-expanded', 'expanded'];
+
+/**
+ * Material 3's states for a standard sheet: 'hidden' first when it can be closed.
+ * @param {boolean} closable
+ * @returns {SheetState[]}
+ */
+export function defaultStates(closable) {
+  if (closable) {
+    return ['hidden', 'collapsed', 'half-expanded', 'expanded'];
+  }
+  return ['collapsed', 'half-expanded', 'expanded'];
+}
+
+/**
+ * More than one state other than 'hidden'.
+ * @param {SheetState[]} states
+ * @returns {boolean}
+ */
+export function isResizable(states) {
+  const count = states.filter((s) => s !== 'hidden').length;
+  return count > 1;
+}
+
+/**
+ * The stops a sheet rests in, lowest first, from the measured heights (px) and the allowed states.
+ * half-expanded is kept only when more than 48px from both neighbours; a stop within 1px of the one before is dropped.
+ * @param {{ collapsed: number, 'half-expanded': number, expanded: number }} heights
+ * @param {SheetState[]} states
+ * @returns {Stop[]}
+ */
+export function restingStops(heights, states) {
+  const stops = states.map((state) => {
+    const height = state === 'hidden' ? 0 : heights[state];
+    return { state, height };
+  });
+
+  stops.sort((a, b) => {
+    if (a.height !== b.height) {
+      return a.height - b.height;
+    }
+    const indexA = stateOrder.indexOf(a.state);
+    const indexB = stateOrder.indexOf(b.state);
+    return indexA - indexB;
+  });
+
+  // Filter half-expanded if it is not distinct enough
+  const filtered = stops.filter((stop, index, arr) => {
+    if (stop.state !== 'half-expanded') return true;
+
+    const prev = arr[index - 1];
+    const next = arr[index + 1];
+
+    const prevOk = !prev || stop.height - prev.height > 48;
+    const nextOk = !next || next.height - stop.height > 48;
+
+    return prevOk && nextOk;
+  });
+
+  // Walk the list and drop stops within 1px of the previous kept stop
+  /** @type {Stop[]} */
+  const result = [];
+  for (const stop of filtered) {
+    if (result.length === 0) {
+      result.push(stop);
+    } else {
+      const lastKept = result[result.length - 1];
+      if (Math.abs(stop.height - lastKept.height) > 1) {
+        result.push(stop);
+      }
+    }
+  }
+
+  return result;
+}
+
+/**
+ * The state a tap on the handle (or the resize button) moves to: the next higher stop, never 'hidden';
+ * from the highest, or from a state that is not a stop, the lowest.
+ * @param {Stop[]} stops
+ * @param {SheetState} current
+ * @returns {SheetState}
+ */
+export function nextOnTap(stops, current) {
+  const index = stops.findIndex((s) => s.state === current);
+
+  if (index === -1) {
+    const nonHidden = stops.filter((s) => s.state !== 'hidden');
+    return nonHidden.length > 0 ? nonHidden[0].state : stops[0].state;
+  }
+
+  let nextIndex = index + 1;
+  while (nextIndex < stops.length && stops[nextIndex].state === 'hidden') {
+    nextIndex++;
+  }
+
+  if (nextIndex < stops.length) {
+    return stops[nextIndex].state;
+  }
+
+  const nonHidden = stops.filter((s) => s.state !== 'hidden');
+  if (nonHidden.length > 0) {
+    return nonHidden[0].state;
+  }
+
+  return stops[0].state;
+}
+
+/**
+ * The state a drag comes to rest in: a flick (over 0.4 px/ms) moves on to the next stop that way,
+ * otherwise the nearest (a tie goes to the lower).
+ * @param {Stop[]} stops
+ * @param {number} height - the sheet's height in px when let go
+ * @param {number} velocity - px/ms, positive upward
+ * @returns {SheetState}
+ */
+export function restAfterDrag(stops, height, velocity) {
+  if (velocity > 0.4) {
+    const higher = stops.find((s) => s.height > height + 1);
+    if (higher) return higher.state;
+  } else if (velocity < -0.4) {
+    const lower = [...stops].reverse().find((s) => s.height < height - 1);
+    if (lower) return lower.state;
+  }
+
+  let best = stops[0];
+  let bestDiff = Math.abs(stops[0].height - height);
+  for (const s of stops) {
+    const diff = Math.abs(s.height - height);
+    if (diff < bestDiff) {
+      best = s;
+      bestDiff = diff;
+    }
+  }
+  return best.state;
+}
+
+/**
+ * The start height of a modal sheet: the smaller of its content height and the allowed space,
+ * which is the full viewport minus a gap, or half the viewport.
+ * @param {number} content
+ * @param {number} viewport
+ * @param {'half' | 'full'} startAt
+ * @param {number} topGap
+ * @returns {number}
+ */
+export function modalStartHeight(content, viewport, startAt, topGap) {
+  if (startAt === 'full') {
+    return Math.min(content, viewport - topGap);
+  }
+  return Math.min(content, viewport / 2);
+}
+
+/**
+ * The rest place of a modal sheet after a drag: full, start, or close.
+ * A flick (over 0.4 px/ms) moves to full or to start/close depending on the height.
+ * Otherwise the nearest stop, with ties going to the higher stop.
+ * @param {number} start
+ * @param {number} full
+ * @param {number} height
+ * @param {number} velocity
+ * @returns {ModalRest}
+ */
+export function modalRestAfterDrag(start, full, height, velocity) {
+  if (velocity > 0.4) {
+    return 'full';
+  }
+  if (velocity < -0.4) {
+    return height < start - 1 ? 'close' : 'start';
+  }
+
+  // Nearest of close (0), start, and full. Tie goes to the higher one.
+  // Order of preference: full, start, close.
+  let best = 'close';
+  let bestDiff = height; // distance to close (0)
+
+  const startDiff = Math.abs(start - height);
+  if (startDiff <= bestDiff) {
+    best = 'start';
+    bestDiff = startDiff;
+  }
+
+  const fullDiff = Math.abs(full - height);
+  if (fullDiff <= bestDiff) {
+    best = 'full';
+  }
+
+  return best;
+}

package/lib/sheet-stops.test.mjs

@@ -0,0 +1,155 @@
+// Tests of sheet-stops.mjs: the states a bottom sheet rests in, the next one on a tap and after a drag, a modal's heights.
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import {
+  defaultStates,
+  isResizable,
+  restingStops,
+  nextOnTap,
+  restAfterDrag,
+  modalStartHeight,
+  modalRestAfterDrag,
+} from './sheet-stops.mjs';
+
+const heights = { collapsed: 100, 'half-expanded': 400, expanded: 700 };
+
+test('defaultStates(false) returns collapsed, half-expanded, expanded', () => {
+  assert.deepEqual(defaultStates(false), ['collapsed', 'half-expanded', 'expanded']);
+});
+
+test('defaultStates(true) returns hidden, collapsed, half-expanded, expanded', () => {
+  assert.deepEqual(defaultStates(true), ['hidden', 'collapsed', 'half-expanded', 'expanded']);
+});
+
+test('isResizable returns false for single non-hidden state', () => {
+  assert.equal(isResizable(['expanded']), false);
+});
+
+test('isResizable returns false for hidden and one other', () => {
+  assert.equal(isResizable(['hidden', 'expanded']), false);
+});
+
+test('isResizable returns true for two non-hidden states', () => {
+  assert.equal(isResizable(['collapsed', 'expanded']), true);
+});
+
+test('restingStops with default states (false)', () => {
+  assert.deepEqual(restingStops(heights, defaultStates(false)), [
+    { state: 'collapsed', height: 100 },
+    { state: 'half-expanded', height: 400 },
+    { state: 'expanded', height: 700 },
+  ]);
+});
+
+test('restingStops with default states (true) includes hidden', () => {
+  const stops = restingStops(heights, defaultStates(true));
+  assert.equal(stops.length, 4);
+  assert.deepEqual(stops[0], { state: 'hidden', height: 0 });
+  assert.deepEqual(stops[1], { state: 'collapsed', height: 100 });
+  assert.deepEqual(stops[2], { state: 'half-expanded', height: 400 });
+  assert.deepEqual(stops[3], { state: 'expanded', height: 700 });
+});
+
+test('restingStops with single expanded state', () => {
+  assert.deepEqual(restingStops(heights, ['expanded']), [{ state: 'expanded', height: 700 }]);
+});
+
+test('restingStops filters half-expanded if too close to collapsed', () => {
+  const h = { collapsed: 100, 'half-expanded': 130, expanded: 700 };
+  assert.deepEqual(restingStops(h, defaultStates(false)), [
+    { state: 'collapsed', height: 100 },
+    { state: 'expanded', height: 700 },
+  ]);
+});
+
+test('restingStops filters expanded if too close to collapsed', () => {
+  const h = { collapsed: 100, 'half-expanded': 400, expanded: 100 };
+  assert.deepEqual(restingStops(h, ['collapsed', 'expanded']), [{ state: 'collapsed', height: 100 }]);
+});
+
+test('nextOnTap cycles through states', () => {
+  const stops = restingStops(heights, defaultStates(false));
+  assert.equal(nextOnTap(stops, 'collapsed'), 'half-expanded');
+  assert.equal(nextOnTap(stops, 'half-expanded'), 'expanded');
+  assert.equal(nextOnTap(stops, 'expanded'), 'collapsed');
+});
+
+test('nextOnTap with hidden stops returns collapsed when at expanded', () => {
+  const stops = restingStops(heights, defaultStates(true));
+  assert.equal(nextOnTap(stops, 'expanded'), 'collapsed');
+});
+
+test('nextOnTap with hidden not a stop returns collapsed', () => {
+  const stops = restingStops(heights, defaultStates(false));
+  assert.equal(nextOnTap(stops, 'hidden'), 'collapsed');
+});
+
+test('nextOnTap with single stop returns that stop', () => {
+  const stops = restingStops(heights, ['expanded']);
+  assert.equal(nextOnTap(stops, 'expanded'), 'expanded');
+});
+
+test('restAfterDrag with zero velocity chooses nearest', () => {
+  const stops = restingStops(heights, defaultStates(false));
+  assert.equal(restAfterDrag(stops, 380, 0), 'half-expanded');
+  assert.equal(restAfterDrag(stops, 250, 0), 'collapsed');
+});
+
+test('restAfterDrag with positive velocity chooses higher', () => {
+  const stops = restingStops(heights, defaultStates(false));
+  assert.equal(restAfterDrag(stops, 150, 0.8), 'half-expanded');
+});
+
+test('restAfterDrag with negative velocity chooses lower', () => {
+  const stops = restingStops(heights, defaultStates(false));
+  assert.equal(restAfterDrag(stops, 650, -0.8), 'half-expanded');
+});
+
+test('restAfterDrag with high velocity and no higher stop chooses nearest', () => {
+  const stops = restingStops(heights, defaultStates(false));
+  assert.equal(restAfterDrag(stops, 720, 0.8), 'expanded');
+});
+
+test('modalStartHeight returns content if less than half viewport', () => {
+  assert.equal(modalStartHeight(300, 800, 'half', 72), 300);
+});
+
+test('modalStartHeight returns half viewport if content is larger', () => {
+  assert.equal(modalStartHeight(600, 800, 'half', 72), 400);
+});
+
+test('modalStartHeight returns viewport minus gap if content is larger and full', () => {
+  assert.equal(modalStartHeight(900, 800, 'full', 72), 728);
+});
+
+test('modalStartHeight returns content if less than viewport minus gap and full', () => {
+  assert.equal(modalStartHeight(300, 800, 'full', 72), 300);
+});
+
+test('modalRestAfterDrag with zero velocity and height near start returns start', () => {
+  assert.equal(modalRestAfterDrag(400, 728, 420, 0), 'start');
+});
+
+test('modalRestAfterDrag with zero velocity and height near full returns full', () => {
+  assert.equal(modalRestAfterDrag(400, 728, 600, 0), 'full');
+});
+
+test('modalRestAfterDrag with zero velocity and height near close returns close', () => {
+  assert.equal(modalRestAfterDrag(400, 728, 150, 0), 'close');
+});
+
+test('modalRestAfterDrag with zero velocity and tie between close and start returns start', () => {
+  assert.equal(modalRestAfterDrag(400, 728, 200, 0), 'start');
+});
+
+test('modalRestAfterDrag with positive velocity returns full', () => {
+  assert.equal(modalRestAfterDrag(400, 728, 420, 0.8), 'full');
+});
+
+test('modalRestAfterDrag with negative velocity and low height returns close', () => {
+  assert.equal(modalRestAfterDrag(400, 728, 380, -0.8), 'close');
+});
+
+test('modalRestAfterDrag with negative velocity and high height returns start', () => {
+  assert.equal(modalRestAfterDrag(400, 728, 600, -0.8), 'start');
+});

package/lib/still-timer.d.mts

@@ -0,0 +1,5 @@
+/** @param {number} delay ms @param {() => void} onStill @returns {{ restart(): void, stop(): void }} */
+export function stillTimer(delay: number, onStill: () => void): {
+    restart(): void;
+    stop(): void;
+};

package/lib/still-timer.mjs

@@ -0,0 +1,17 @@
+// Waits for the cursor to stand still (the menu over a text at a still cursor, selectionMenu in MarkdownEditor.tsx):
+// restart on every move or keypress, and onStill runs once it has been still for the delay. Exposes stillTimer.
+// No dependencies, no browser.
+
+/** @param {number} delay ms @param {() => void} onStill @returns {{ restart(): void, stop(): void }} */
+export function stillTimer(delay, onStill) {
+  /** @type {ReturnType<typeof setTimeout> | undefined} */
+  let timer;
+  const stop = () => clearTimeout(timer);
+  return {
+    restart() {
+      stop();
+      timer = setTimeout(onStill, delay);
+    },
+    stop,
+  };
+}

package/lib/still-timer.test.mjs

@@ -0,0 +1,42 @@
+// Tests for lib/still-timer.mjs: onStill once the cursor has stood still for the delay. Run: node --test packages/editor/lib/*.test.mjs packages/editor/src/*.test.mjs
+import { mock, test } from 'node:test';
+import assert from 'node:assert/strict';
+import { stillTimer } from './still-timer.mjs';
+
+test('calls onStill once after the delay', () => {
+  mock.timers.enable({ apis: ['setTimeout'] });
+  const onStill = mock.fn();
+  stillTimer(700, onStill).restart();
+  mock.timers.tick(699);
+  assert.equal(onStill.mock.callCount(), 0);
+  mock.timers.tick(1);
+  assert.equal(onStill.mock.callCount(), 1);
+  mock.timers.tick(5000);
+  assert.equal(onStill.mock.callCount(), 1);
+  mock.timers.reset();
+});
+
+test('a restart waits the whole delay again', () => {
+  mock.timers.enable({ apis: ['setTimeout'] });
+  const onStill = mock.fn();
+  const timer = stillTimer(700, onStill);
+  timer.restart();
+  mock.timers.tick(500);
+  timer.restart();
+  mock.timers.tick(500);
+  assert.equal(onStill.mock.callCount(), 0);
+  mock.timers.tick(200);
+  assert.equal(onStill.mock.callCount(), 1);
+  mock.timers.reset();
+});
+
+test('stop cancels it', () => {
+  mock.timers.enable({ apis: ['setTimeout'] });
+  const onStill = mock.fn();
+  const timer = stillTimer(700, onStill);
+  timer.restart();
+  timer.stop();
+  mock.timers.tick(1000);
+  assert.equal(onStill.mock.callCount(), 0);
+  mock.timers.reset();
+});

package/lib/text-sections.d.mts

@@ -0,0 +1,10 @@
+/** The text's HTML as runs: { color, html } with the marker removed; color is null for text outside a coloured section.
+ * A marker with an unknown colour, or not followed by an H2, is dropped. Without any coloured section, the HTML is
+ * returned as it came, in one run.
+ * @param {string} html
+ * @returns {{ color: string | null, html: string }[]} */
+export function sectionsOf(html: string): {
+    color: string | null;
+    html: string;
+}[];
+export function sectionClass(color: any): string;

package/lib/text-sections.mjs

@@ -0,0 +1,45 @@
+// A page's or post's rendered text cut into runs for the site: a section with a colour (the marker before its H2,
+// lib/section-marker.mjs) is one run from the marker to the next H2, H1 or the end. Exposes sectionsOf and sectionClass,
+// used by theme/components/RichText.astro and src/pagePreview.tsx. Depends on section-marker.mjs.
+import { SECTION_COLORS } from './section-marker.mjs';
+
+// The marker as the site's HTML pipeline writes it (rehype-raw keeps it as written; a space before `>` is tolerated).
+const MARKER = String.raw`<div data-section="([^"]*)"\s*><\/div>\s*`;
+// A label line (text-menu's <p class="block-eyebrow">) directly before a heading starts the heading's section.
+const LABEL = String.raw`(?:<p class="block-eyebrow">(?:(?!<\/p>)[\s\S])*<\/p>\s*)?`;
+// A marker followed by an H2 (with its label between): where a coloured section starts. Ends just after `<h2`.
+const START = new RegExp(`${MARKER}${LABEL}<h2\\b`, 'g');
+// Where the next section (or an H1) starts: its marker and label if it has them, else its heading.
+const NEXT = new RegExp(`(?:${MARKER})?${LABEL}<h[12]\\b`);
+const MARKERS = new RegExp(MARKER, 'g');
+
+const withoutMarkers = (html) => html.replace(MARKERS, '');
+
+/** The text's HTML as runs: { color, html } with the marker removed; color is null for text outside a coloured section.
+ * A marker with an unknown colour, or not followed by an H2, is dropped. Without any coloured section, the HTML is
+ * returned as it came, in one run.
+ * @param {string} html
+ * @returns {{ color: string | null, html: string }[]} */
+export function sectionsOf(html) {
+  const runs = [];
+  let from = 0;
+  const plain = (to) => {
+    const text = withoutMarkers(html.slice(from, to));
+    if (text.trim()) runs.push({ color: null, html: text });
+  };
+  for (const m of html.matchAll(START)) {
+    if (m.index < from || !SECTION_COLORS.includes(m[1])) continue;
+    const heading = m.index + m[0].length;
+    const next = html.slice(heading).search(NEXT);
+    const to = next < 0 ? html.length : heading + next;
+    plain(m.index);
+    runs.push({ color: m[1], html: withoutMarkers(html.slice(m.index, to)) });
+    from = to;
+  }
+  if (!runs.length) return [{ color: null, html: withoutMarkers(html) }];
+  plain(html.length);
+  return runs;
+}
+
+/** The classes of a coloured section on the site (blocks.css). */
+export const sectionClass = (color) => `text-section text-section-${color}`;