caracms 0.0.0-stage → 0.2.0

package/src/editor/client/preview/page-editor-registry.ts

@@ -0,0 +1,63 @@
+/**
+ * Which preview iframe has a page editor mounted, and on which element (on-page rich
+ * text, Decisions 5–7). At most one per iframe. The driver and selection.ts read it
+ * so that **every writer skips the mounted element in that iframe** (ProseMirror
+ * reads any outside change to its DOM as typing): the morph pairs it only with its
+ * own field (Decision 6), and the mirror and re-apply leave it alone (Decision 7).
+ *
+ * Light on purpose (no Tiptap here): page-edit.ts mounts and registers; the driver
+ * only asks.
+ */
+import { parseRichText, richHeadingHtml, richTextHtml, type RichTextOptions } from '../../../rich-text.ts';
+
+export interface MountedField {
+	/** The field's element: the editor's root while mounted. */
+	readonly el: HTMLElement;
+	/** The block's key in the document store, and the field's key (always top level). */
+	readonly key: string;
+	readonly field: string;
+	/**
+	 * The morph paired the element with its field in the render and left it alone
+	 * (Decision 6): the render's own attributes are what teardown must put back, so a
+	 * render that changed them (a class that depends on another field) isn't undone.
+	 */
+	syncAttributes(from: Element): void;
+	/**
+	 * Tear it down now, synchronously (Decision 6: inside idiomorph's callback, before
+	 * the morph writes). page-edit remounts it after the morph if the session or the
+	 * pointer is still there.
+	 */
+	teardownForMorph(): void;
+}
+
+const byDoc = new WeakMap<Document, MountedField>();
+
+/** The page editor mounted in a frame's document, or null. */
+export function mountedIn(doc: Document | null | undefined): MountedField | null {
+	return (doc && byDoc.get(doc)) ?? null;
+}
+
+export function setMounted(doc: Document, mounted: MountedField | null): void {
+	if (mounted) byDoc.set(doc, mounted);
+	else byDoc.delete(doc);
+}
+
+/** A field's value as the render gives it: the same HTML RichText.astro writes (a heading's: its lines, M9 Decision 11). */
+export function renderedHtml(raw: unknown, options: RichTextOptions): string {
+	const value = parseRichText(raw, options);
+	return options.heading ? richHeadingHtml(value) : richTextHtml(value);
+}
+
+/**
+ * Put a rich-text field's value into an element that isn't mounted (another width,
+ * or after a render that predates it), only when it differs, so an unchanged field
+ * keeps its nodes. The comparison goes through the element's own document's
+ * serialiser (a `'` in the value is `&#39;` in richTextHtml, `'` in innerHTML).
+ */
+export function writeRichText(el: HTMLElement, raw: unknown, options: RichTextOptions): void {
+	if (mountedIn(el.ownerDocument)?.el === el) return;
+	const html = renderedHtml(raw, options);
+	const probe = el.ownerDocument.createElement('template');
+	probe.innerHTML = html;
+	if (probe.innerHTML !== el.innerHTML) el.innerHTML = html;
+}

package/src/editor/client/preview/page-editor.ts

@@ -0,0 +1,235 @@
+/**
+ * The page editor (on-page rich text, Decisions 2–5): /admin's own Tiptap, with the
+ * sidebar's schema (`richTextExtensions`), conversion (`toDoc`/`fromDoc`) and paste
+ * (`clipboardTextParser`), mounted on a rich-text field's own element in a preview
+ * iframe. Candidate (A) of Decision 4: one realm, /admin's; the preview page still
+ * carries no editor script.
+ *
+ * - **The editor's root is the field's element itself** (Decision 3):
+ *   `element: { mount: fieldEl }`, which Tiptap passes straight to ProseMirror (a
+ *   cast: it works at run time but isn't in Tiptap's types). No `div.ProseMirror`
+ *   inside: the field's first child is the value's first block, as the render's is.
+ * - **Mounting swaps the field's children in one task** (ProseMirror's constructor
+ *   renders the document synchronously), so nothing paints in between.
+ * - **Teardown leaves the element exactly as a render would** (Decision 5): the
+ *   attributes captured at mount are put back exactly (ProseMirror strips the ones
+ *   it set, Tiptap's `tiptap` class would stay), and the children are
+ *   `richTextHtml(value)`, as RichText.astro renders them.
+ * - **Outside changes** (Decision 8) replace the content without an update, compared
+ *   with the value this editor last stored and with `fromDoc` of its own content, so
+ *   its own echo never replaces it (an empty paragraph from Enter survives), as
+ *   RichTextField.tsx does; only the range that differs is replaced, so the page's
+ *   selection maps through it.
+ * - **Blur with `view.dom.blur()`**, never Tiptap's `commands.blur()` (that clears
+ *   /admin's selection, not the iframe's).
+ */
+import { Editor } from '@tiptap/core';
+import { TextSelection } from '@tiptap/pm/state';
+import type { EditorView } from '@tiptap/pm/view';
+import { parseRichText, richTextHtml, type RichTextOptions, type RichTextValue } from '../../../rich-text.ts';
+import { fromDoc, toDoc, type PMNode } from '../fields/rich-text-doc.ts';
+import { clipboardTextParser, richTextExtensions } from '../fields/rich-text-schema.ts';
+
+export interface MountedPageEditor {
+	/** The field's element (the editor's root while mounted). */
+	readonly el: HTMLElement;
+	readonly editor: Editor;
+	readonly view: EditorView;
+	readonly options: RichTextOptions;
+	/** The value it was given or last stored. */
+	value(): RichTextValue;
+	/** A change from elsewhere (Decision 8): shown, without an update. */
+	setValue(raw: unknown): void;
+	/** The editor's selection (ProseMirror positions). */
+	selection(): { anchor: number; head: number };
+	/** Put the selection at these positions (clamped to the document), and focus the editor if asked. */
+	select(anchor: number, head?: number, focus?: boolean): void;
+	/**
+	 * A render changed the element's own attributes while it was mounted: teardown puts
+	 * back these (the render's) instead of the mount-time ones. The live element is
+	 * left alone (ProseMirror owns its `class`, `contenteditable` and `translate`).
+	 */
+	syncAttributes(from: Element): void;
+	/** Tear down (Decision 5's recipe). The element is left as a render of the current value. */
+	destroy(): void;
+	readonly destroyed: boolean;
+}
+
+export { renderedHtml } from './page-editor-registry.ts';
+
+/**
+ * A point in a rendered rich-text field (before mount), as a path the editor's DOM
+ * has too: the top-level block's index, a list item's index inside a list, and the
+ * characters before the point in that textblock (a `<br>` counts as one, as a
+ * hardBreak does). Block boundaries count (Decision 5): that's what `selection.ts`
+ * doesn't know.
+ */
+export interface FieldPoint {
+	path: number[];
+	offset: number;
+}
+
+const LISTS = new Set(['UL', 'OL']);
+
+function charsBefore(root: Node, node: Node, offset: number): number {
+	const doc = root.ownerDocument!;
+	const range = doc.createRange();
+	range.setStart(root, 0);
+	range.setEnd(node, offset);
+	const frag = range.cloneContents();
+	let n = 0;
+	const walk = (x: Node) => {
+		for (const c of x.childNodes) {
+			if (c.nodeType === 3) n += (c as Text).data.length;
+			else if ((c as Element).tagName === 'BR') n += 1;
+			else walk(c);
+		}
+	};
+	walk(frag);
+	return n;
+}
+
+/** Where the iframe's (collapsed or not) selection's focus is inside the field, or null. */
+export function pointInField(el: HTMLElement): FieldPoint | null {
+	const sel = el.ownerDocument.getSelection();
+	const node = sel?.focusNode;
+	if (!sel || !node || !el.contains(node) || node === el) return null;
+	let block: Node = node;
+	while (block.parentNode && block.parentNode !== el) block = block.parentNode;
+	const path = [Array.prototype.indexOf.call(el.childNodes, block) as number];
+	let textblock: Node = block;
+	if (block.nodeType === 1 && LISTS.has((block as Element).tagName)) {
+		let item: Node = node;
+		while (item.parentNode && item.parentNode !== block) item = item.parentNode;
+		if (item === block) return { path, offset: 0 };
+		path.push(Array.prototype.indexOf.call(block.childNodes, item) as number);
+		textblock = item;
+	}
+	return { path, offset: charsBefore(textblock, sel.focusNode!, sel.focusOffset) };
+}
+
+/** The editor's position for a FieldPoint (its DOM has the same blocks and items), or null. */
+export function positionOf(view: EditorView, point: FieldPoint): number | null {
+	let at: Node | undefined = view.dom.childNodes[point.path[0]!];
+	if (point.path.length > 1) at = at?.childNodes[point.path[1]!];
+	if (!at) return null;
+	// A list item that still holds a paragraph (the older schema): its text is in there.
+	if (at.nodeType === 1 && (at as Element).tagName === 'LI' && (at as Element).firstElementChild?.tagName === 'P') at = (at as Element).firstElementChild!;
+	let left = point.offset;
+	const walker = at.ownerDocument!.createTreeWalker(at, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
+	for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+		if (n.nodeType === 3) {
+			const len = (n as Text).data.length;
+			if (left <= len) return view.posAtDOM(n, left);
+			left -= len;
+		} else if ((n as Element).tagName === 'BR' && !(n as Element).classList.contains('ProseMirror-trailingBreak')) {
+			if (left === 0) return view.posAtDOM(n.parentNode!, Array.prototype.indexOf.call(n.parentNode!.childNodes, n) as number);
+			left -= 1;
+		}
+	}
+	return view.posAtDOM(at, at.childNodes.length);
+}
+
+export function mountPageEditor(
+	el: HTMLElement,
+	init: {
+		value: unknown;
+		options: RichTextOptions;
+		/** Each edit's value (fromDoc through the field's rules), when it differs from the last. */
+		onChange?: (value: RichTextValue) => void;
+		/** Keys first (⌘K and Esc are the page's). Return true when handled. */
+		onKeyDown?: (event: KeyboardEvent) => boolean;
+	},
+): MountedPageEditor {
+	const options: RichTextOptions = { headings: [...init.options.headings], links: init.options.links, ...(init.options.heading ? { heading: true } : {}) };
+	let value = parseRichText(init.value, options);
+	let last = JSON.stringify(value);
+	// Decision 5's recipe: the attributes exactly as the render left them.
+	let attributes = [...el.attributes].map((a) => [a.name, a.value] as const);
+	let destroyed = false;
+
+	const editor = new Editor({
+		// Decision 3: ProseMirror uses the element itself only when given `{ mount }`.
+		element: { mount: el } as unknown as HTMLElement,
+		extensions: richTextExtensions(options),
+		content: toDoc(value, options),
+		injectCSS: false,
+		enableInputRules: false,
+		enablePasteRules: false,
+		editorProps: {
+			clipboardTextParser,
+			handleKeyDown: (_view, event) => init.onKeyDown?.(event) ?? false,
+		},
+		onUpdate: ({ editor: ed }) => {
+			const next = fromDoc(ed.getJSON() as PMNode, options);
+			const json = JSON.stringify(next);
+			if (json === last) return;
+			last = json;
+			value = next;
+			init.onChange?.(next);
+		},
+	});
+
+	return {
+		el,
+		editor,
+		get view() {
+			return editor.view;
+		},
+		options,
+		value: () => value,
+		setValue(raw) {
+			if (destroyed) return;
+			const next = parseRichText(raw, options);
+			const json = JSON.stringify(next);
+			if (json === last) return;
+			last = json;
+			value = next;
+			if (JSON.stringify(fromDoc(editor.getJSON() as PMNode, options)) === json) return;
+			// Only the part that differs is replaced, so the selection maps through it (a
+			// whole-document setContent would put it at the end), without an update and
+			// outside the page's own undo (Decision 11).
+			const target = editor.schema.nodeFromJSON(toDoc(next, options));
+			const current = editor.state.doc;
+			const start = current.content.findDiffStart(target.content);
+			if (start === null) return;
+			let { a, b } = current.content.findDiffEnd(target.content)!;
+			const overlap = start - Math.min(a, b);
+			if (overlap > 0) {
+				a += overlap;
+				b += overlap;
+			}
+			const tr = editor.state.tr.replace(start, a, target.slice(start, b));
+			tr.setMeta('preventUpdate', true).setMeta('addToHistory', false);
+			editor.view.dispatch(tr);
+		},
+		selection() {
+			const s = editor.state.selection;
+			return { anchor: s.anchor, head: s.head };
+		},
+		select(anchor, head = anchor, focus = false) {
+			if (destroyed) return;
+			const max = editor.state.doc.content.size;
+			const clamp = (n: number) => Math.max(0, Math.min(n, max));
+			const doc = editor.state.doc;
+			const sel = TextSelection.between(doc.resolve(clamp(anchor)), doc.resolve(clamp(head)));
+			editor.view.dispatch(editor.state.tr.setSelection(sel));
+			if (focus) editor.view.focus();
+		},
+		syncAttributes(from) {
+			if (destroyed) return;
+			attributes = [...from.attributes].map((a) => [a.name, a.value] as const);
+		},
+		destroy() {
+			if (destroyed) return;
+			destroyed = true;
+			editor.destroy();
+			for (const name of el.getAttributeNames()) el.removeAttribute(name);
+			for (const [name, v] of attributes) el.setAttribute(name, v);
+			el.innerHTML = richTextHtml(value);
+		},
+		get destroyed() {
+			return destroyed;
+		},
+	};
+}

package/src/editor/client/preview/render-sequencer.ts

@@ -0,0 +1,113 @@
+/**
+ * Lifted as is from M1's spike (spikes/editor/src/lib/render-sequencer.ts, with its
+ * tests; M3 Decision 13). "Intro" below means any plain text typed on the page.
+ *
+ * M1 Decision 9, "the latest edit wins", as a small pure state machine (no DOM, no
+ * fetch) so it can be unit-tested. The editor (/admin) does the I/O and asks this
+ * what to do.
+ *
+ * - The document carries a version; every change bumps it, on-page intro edits
+ *   included.
+ * - At most one render is in flight, with no debounce: a change that needs a
+ *   render is sent at once if nothing is in flight; otherwise, when the current
+ *   request returns, the latest version is sent.
+ * - A response carries the version it rendered. A response older than one already
+ *   morphed in is dropped. The request finishing, not the echoed version, frees the
+ *   in-flight slot; a response whose echoed version is missing or isn't the version
+ *   sent is a failure, so a bad response can't wedge the editor.
+ * - When a response older than the current version is morphed in, the editor
+ *   re-applies the current on-page text afterwards, so an intro typed meanwhile
+ *   never flashes back.
+ *
+ * Intro edits (`'local'`) bump the version but don't ask for a render: plain text
+ * skips the round trip (Spec → Visual editing). The next render that does go out
+ * carries the latest version, intro included. Version 0 is the file, as the
+ * iframes' first GET rendered it.
+ */
+
+export type ChangeKind = 'render' | 'local';
+
+export interface ResponseAction {
+	/** Morph this response in. False: it's older than one already morphed, drop it. */
+	apply: boolean;
+	/** After the morph, put the current on-page text back (the response predates it). */
+	reapplyLocal: boolean;
+	/** Send a render of this version now (a change waited while this one was in flight). */
+	send: number | null;
+}
+
+export interface SequencerState {
+	/** The document's current version. */
+	version: number;
+	/** The version in flight, or null. */
+	inFlight: number | null;
+	/** The newest version morphed in. */
+	applied: number;
+	/** A change that needs a render has happened since the last send. */
+	pending: boolean;
+}
+
+export function createSequencer(initialVersion = 0) {
+	const state: SequencerState = {
+		version: initialVersion,
+		inFlight: null,
+		applied: initialVersion,
+		pending: false,
+	};
+
+	/** Send the latest version if one is waiting and nothing is in flight. */
+	function maybeSend(): number | null {
+		if (state.inFlight !== null || !state.pending) return null;
+		state.pending = false;
+		state.inFlight = state.version;
+		return state.version;
+	}
+
+	/** The request finished without a usable render; keep the change waiting. */
+	function failure(sent: number): void {
+		if (state.inFlight === sent) state.inFlight = null;
+		if (sent > state.applied) state.pending = true;
+	}
+
+	return {
+		state: state as Readonly<SequencerState>,
+
+		/** A change to the document. Returns the version to send now, or null. */
+		change(kind: ChangeKind): { version: number; send: number | null } {
+			state.version += 1;
+			if (kind === 'render') state.pending = true;
+			return { version: state.version, send: maybeSend() };
+		},
+
+		/**
+		 * A render request finished. `sent` is the version the request carried: it frees
+		 * the in-flight slot, whatever the response said. `echoed` is the version the
+		 * server says it rendered (`X-Preview-Version`), or null if the header was
+		 * missing; it only decides apply or drop. An echo that is missing or isn't the
+		 * version sent is a failure: nothing is applied, the slot is freed, and the
+		 * change stays pending exactly as `failure()` leaves it (nothing is sent now).
+		 */
+		response(sent: number, echoed: number | null): ResponseAction {
+			if (echoed === null || echoed !== sent) {
+				failure(sent);
+				return { apply: false, reapplyLocal: false, send: null };
+			}
+			if (state.inFlight === sent) state.inFlight = null;
+			const apply = echoed > state.applied;
+			if (apply) state.applied = echoed;
+			return {
+				apply,
+				reapplyLocal: apply && echoed < state.version,
+				send: maybeSend(),
+			};
+		},
+
+		/**
+		 * A render failed. The change stays waiting and goes out with the next change
+		 * (no automatic retry, so a dead server can't loop).
+		 */
+		failure,
+	};
+}
+
+export type Sequencer = ReturnType<typeof createSequencer>;

package/src/editor/client/preview/selection.ts

@@ -0,0 +1,116 @@
+/**
+ * Each iframe's selection, saved and restored around every morph (Decision 13;
+ * M1 → E2). Chrome moves an iframe's activeElement to its <body> when focus leaves
+ * for the parent, so idiomorph's `ignoreActive` only protects a caret while focus is
+ * inside that iframe; restoring the selection by position covers the rest, so a caret
+ * on the page survives a re-render whether focus is in the iframe or the sidebar.
+ *
+ * A selection is remembered by where it is in the page's terms: the block
+ * (`data-cms-block`), the field (`data-cms-field`) and character offsets in the
+ * field's text, a `<br>` counting as one character (the line-break rule). Only
+ * selections inside a field are kept; anything else isn't worth restoring.
+ *
+ * **A field with a page editor mounted is left to the editor** (on-page rich text,
+ * Decision 6): the morph never touches it, and ProseMirror owns its selection.
+ */
+import { blockIndexOf, blockRootOf, fieldElement } from './markers.ts';
+import { mountedIn } from './page-editor-registry.ts';
+
+export interface SavedSelection {
+	block: string;
+	field: string;
+	anchor: number;
+	focus: number;
+	/** The field had focus inside the iframe (focus is put back too). */
+	focused: boolean;
+}
+
+const fieldOf = (node: Node | null): HTMLElement | null => {
+	const element = node && (node.nodeType === 1 ? (node as Element) : node.parentElement);
+	return (element?.closest('[data-cms-field]') as HTMLElement | null) ?? null;
+};
+
+/** Characters in a node: its text, a `<br>` as one. */
+function lengthOf(node: Node): number {
+	if (node.nodeType === 3) return (node as Text).data.length;
+	if ((node as Element).tagName === 'BR') return 1;
+	let n = 0;
+	for (const child of node.childNodes) n += lengthOf(child);
+	return n;
+}
+
+/** Characters before (node, offset) inside root. */
+function offsetIn(root: Node, node: Node, offset: number): number {
+	// An element position is "before child N", or the element's end.
+	const before = node.nodeType === 1 && offset < node.childNodes.length ? node.childNodes[offset]! : null;
+	const endOf = node.nodeType === 1 && !before ? node : null;
+	const walker = root.ownerDocument!.createTreeWalker(root, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
+	let count = 0;
+	for (let current: Node | null = walker.nextNode(); current; current = walker.nextNode()) {
+		if (current === before) return count;
+		if (current === endOf) return count + lengthOf(current);
+		if (current === node && node.nodeType === 3) return count + offset;
+		if (current.nodeType === 3) count += (current as Text).data.length;
+		else if ((current as Element).tagName === 'BR') count += 1;
+	}
+	return count;
+}
+
+/** The (node, offset) for a character offset inside root. */
+function pointAt(root: Node, target: number): { node: Node; offset: number } {
+	const doc = root.ownerDocument!;
+	let count = 0;
+	const walker = doc.createTreeWalker(root, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
+	for (let current: Node | null = walker.nextNode(); current; current = walker.nextNode()) {
+		if (current.nodeType === 3) {
+			const length = (current as Text).data.length;
+			if (count + length >= target) return { node: current, offset: target - count };
+			count += length;
+		} else if ((current as Element).tagName === 'BR') {
+			if (count + 1 > target) {
+				const parent = current.parentNode!;
+				return { node: parent, offset: Array.prototype.indexOf.call(parent.childNodes, current) };
+			}
+			count += 1;
+		}
+	}
+	return { node: root, offset: root.childNodes.length };
+}
+
+export function saveSelection(doc: Document): SavedSelection | null {
+	const selection = doc.getSelection();
+	if (!selection || selection.rangeCount === 0 || !selection.anchorNode || !selection.focusNode) return null;
+	const field = fieldOf(selection.anchorNode);
+	if (!field || field !== fieldOf(selection.focusNode)) return null;
+	if (mountedIn(doc)?.el === field) return null;
+	const block = blockRootOf(field);
+	if (!block) return null;
+	return {
+		block: String(blockIndexOf(block)),
+		field: field.dataset.cmsField!,
+		anchor: offsetIn(field, selection.anchorNode, selection.anchorOffset),
+		focus: offsetIn(field, selection.focusNode, selection.focusOffset),
+		focused: doc.hasFocus() && !!doc.activeElement && (doc.activeElement === field || field.contains(doc.activeElement)),
+	};
+}
+
+export function restoreSelection(doc: Document, saved: SavedSelection | null): void {
+	if (!saved) return;
+	const field = fieldElement(doc, saved.block, saved.field);
+	const selection = doc.getSelection();
+	if (!field || !selection || mountedIn(doc)?.el === field) return;
+	const anchor = pointAt(field, saved.anchor);
+	const focus = pointAt(field, saved.focus);
+	if (saved.focused && doc.activeElement !== field) field.focus({ preventScroll: true });
+	const current = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+	if (
+		current &&
+		selection.anchorNode === anchor.node &&
+		selection.anchorOffset === anchor.offset &&
+		selection.focusNode === focus.node &&
+		selection.focusOffset === focus.offset
+	) {
+		return;
+	}
+	selection.setBaseAndExtent(anchor.node, anchor.offset, focus.node, focus.offset);
+}

package/src/editor/client/preview/warnings.ts

@@ -0,0 +1,61 @@
+/**
+ * The lockups' sizes as the phone iframe computed them (M1 → E7; Decision 13): read
+ * after every morph and when the phone iframe loads. The Phone toggle's warning dot
+ * comes from these; Phase 3's field warning and "Give Phone its own lines" read them
+ * too (driver → status → warnings).
+ *
+ * Markers come from the package's Lockup in preview renders (Lockup.astro): on the
+ * heading `data-cms-field`, `data-cms-min-size`; on each line set `data-cms-lines`
+ * and, when some characters aren't in the font, `data-cms-uncovered`. The visible
+ * set is the one whose computed display isn't none (phone lines below the site's
+ * phone-lines width, the main lines otherwise); its size is its `.cms-lockup-fit`'s
+ * computed font size, in px.
+ */
+import { blockIndexOf, blockRootOf } from './markers.ts';
+
+export interface LockupWarning {
+	/** The block's index in the rendered document (`data-cms-block`). */
+	block: number;
+	field: string;
+	/** Which set the phone shows. */
+	set: 'main' | 'phone';
+	/** The size it computed at 375, px. */
+	px: number;
+	/** The style's minimum, px. */
+	minPx: number;
+	/** px below the minimum: "Too long for mobile". */
+	tooLong: boolean;
+	/** Characters the font doesn't cover (Decision 15), in the visible set. */
+	uncovered: string[];
+}
+
+export function readLockups(doc: Document, win: Window): LockupWarning[] {
+	const out: LockupWarning[] = [];
+	for (const heading of doc.querySelectorAll<HTMLElement>('[data-cms-kind="lockup"][data-cms-field]')) {
+		const blockEl = blockRootOf(heading);
+		if (!blockEl) continue;
+		const set = [...heading.querySelectorAll<HTMLElement>('[data-cms-lines]')].find((s) => win.getComputedStyle(s).display !== 'none');
+		const fit = set?.querySelector<HTMLElement>('.cms-lockup-fit');
+		if (!set || !fit) continue;
+		const px = parseFloat(win.getComputedStyle(fit).fontSize);
+		const minPx = Number(heading.dataset.cmsMinSize);
+		if (!Number.isFinite(px) || !Number.isFinite(minPx)) continue;
+		let uncovered: string[] = [];
+		try {
+			uncovered = set.dataset.cmsUncovered ? (JSON.parse(set.dataset.cmsUncovered) as string[]) : [];
+		} catch {
+			/* none */
+		}
+		out.push({
+			block: blockIndexOf(blockEl),
+			field: heading.dataset.cmsField!,
+			set: set.dataset.cmsLines === 'phone' ? 'phone' : 'main',
+			px,
+			minPx,
+			// A hair of tolerance for sub-pixel layout (the mockup's 0.05).
+			tooLong: px < minPx - 0.05,
+			uncovered,
+		});
+	}
+	return out;
+}