caracms 0.0.0-stage → 0.2.0

package/src/editor/client/fields/PageFields.tsx

@@ -0,0 +1,82 @@
+/**
+ * A section builder's page fields (M6c G2): the collection's own `fields`, beside the
+ * page's blocks (a game's tile details, the header's "side"). One group at the document
+ * level, under the block list and above Search and sharing, open by default (they're the
+ * page's content, where Search and sharing falls back to the site's defaults). Sidebar
+ * only: nothing here is on the page, so nothing is picked from it.
+ *
+ * Closed, it carries a warning mark when any page field (a group's fields too) is warned
+ * (the editor-friction batch, item 5): the section a group field is drawn as
+ * (GroupField.tsx → FieldSection), so the two look and behave the same.
+ *
+ * The values live in the document store beside the blocks (`PAGE_SCOPE`,
+ * document-store.ts), picked at the document level as `page.<path>` (so they never ring
+ * the page's blocks), and are written as the file's top-level keys (serialize.ts).
+ */
+import { useMemo } from 'react';
+import { titleCase, type Field } from '../../../fields.ts';
+import { useEditor, useStore } from '../context.tsx';
+import type { Editor, View } from '../editor.ts';
+import { pageFieldsLabel } from '../documents/actions.ts';
+import { PAGE_SCOPE } from '../state/document-store.ts';
+import { formRows } from '../pane/levels/FormLevel.tsx';
+import { FieldControl } from './FieldControl.tsx';
+import { FieldSection, useReveal } from './GroupField.tsx';
+import { fieldsWarnings, FieldHostProvider, parseBase, useWarningContext, type FieldHost } from './host.tsx';
+
+const PREFIX = `${PAGE_SCOPE}.`;
+
+/** The page fields' host: picked at the document level as `page.<path>`. */
+function pageHost(editor: Editor, raw: Record<string, unknown> | undefined, readOnly: boolean): FieldHost {
+	return {
+		scope: PAGE_SCOPE,
+		picked: (view: View) => (view.level === 'document' && view.field?.startsWith(PREFIX) ? view.field.slice(PREFIX.length) : null),
+		pick(path) {
+			if (editor.view.get().field !== `${PREFIX}${path}`) editor.view.update({ field: `${PREFIX}${path}`, picked: false });
+		},
+		set: (path, value, options) => editor.doc.setField(PAGE_SCOPE, path, value, options),
+		removeItem(path, index, label) {
+			editor.doc.removeItem(PAGE_SCOPE, path, index, { label });
+			editor.announce(`${label}. Undo with Command Z.`);
+		},
+		raw: (name) => (raw && Object.hasOwn(raw, name) ? raw[name] : undefined),
+		readOnly,
+	};
+}
+
+/** The group, for the open section builder; null when its collection has no page fields. */
+export function PageFields() {
+	const editor = useEditor();
+	const ref = useStore(editor.doc.state, (s) => s.ref);
+	const base = useStore(editor.doc.state, (s) => s.base);
+	const data = useStore(editor.doc.state, (s) => s.document.data);
+	const readOnly = useStore(editor.access, (a) => a.readOnly);
+	const context = useWarningContext();
+	// A path picked inside (Publish's list of images without alt text) opens the section.
+	const reveal = useReveal((v) => (v.level === 'document' && v.field?.startsWith(PREFIX) ? v.field : null));
+	const raw = useMemo(() => {
+		const parsed = parseBase(base);
+		return parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? (parsed as Record<string, unknown>) : undefined;
+	}, [base]);
+	const host = useMemo(() => pageHost(editor, raw, readOnly), [editor, raw, readOnly]);
+	const collection = editor.site.collections.find((c) => c.name === ref.collection);
+	const fields = collection?.kind === 'sections' ? collection.fields : null;
+	const warned = useMemo(() => (fields && data ? fieldsWarnings(fields, data, raw, context).length : 0), [fields, data, raw, context]);
+	if (!collection || !fields || !data) return null;
+	return (
+		<FieldSection label={pageFieldsLabel(collection)} className="page-fields" warnings={warned} reveal={reveal} data={{ 'data-page-fields': '' }}>
+			<FieldHostProvider host={host}>
+				{formRows(fields).map((row) => {
+					const control = ([name, field]: [string, Field]) => <FieldControl key={`${PAGE_SCOPE}:${name}`} name={name} label={field.label ?? titleCase(name)} field={field} value={data[name]} />;
+					return row.length === 2 ? (
+						<div key={`${PAGE_SCOPE}:${row[0]![0]}+`} className="two">
+							{row.map(control)}
+						</div>
+					) : (
+						control(row[0]!)
+					);
+				})}
+			</FieldHostProvider>
+		</FieldSection>
+	);
+}

package/src/editor/client/fields/ReferenceField.tsx

@@ -0,0 +1,209 @@
+/**
+ * Reference (M5a Decision 6): the path of a document in collection `to`. The
+ * picker (the mockup's `.lpop` with a find input) lists that collection's
+ * documents by title, searched as the ⌘K switcher searches (nav/search.ts). A
+ * reference to a document that doesn't exist is shown as missing, with a warning;
+ * the page gets null for it.
+ *
+ * `RefRow` and `RefPicker` are the pieces a list of references uses too (ListField).
+ */
+import { useMemo, useState, type KeyboardEvent, type ReactNode } from 'react';
+import type { ReferenceField as ReferenceDescriptor } from '../../../fields.ts';
+import { useEditor, useStore } from '../context.tsx';
+import { docIcon } from '../nav/DocRow.tsx';
+import { searchDocuments } from '../nav/search.ts';
+import { Icon } from '../shell/Icons.tsx';
+import { sameDoc, type ListedDocument } from '../../types.ts';
+import { FieldFrame } from './FieldFrame.tsx';
+import { useFieldWarnings, useHost } from './host.tsx';
+import { Warnings } from './parts.tsx';
+
+/** A collection's label, and its documents in listing order. */
+export function useCollection(name: string): { label: string; icon: string; documents: ListedDocument[] } {
+	const editor = useEditor();
+	const documents = useStore(editor.documents);
+	return useMemo(() => {
+		const collection = editor.site.collections.find((c) => c.name === name);
+		return {
+			label: collection?.label ?? name,
+			icon: docIcon(collection),
+			documents: documents.filter((d) => d.collection === name),
+		};
+	}, [editor.site.collections, documents, name]);
+}
+
+/** One referenced document: its title and address, or "gone" when it doesn't exist. */
+export function RefRow(props: {
+	to: string;
+	path: string;
+	grip?: boolean;
+	onRemove: () => void;
+	removeLabel?: string;
+	/** For a row that reorders by keys (a list of references): focusable, with its keys. */
+	rowProps?: Record<string, unknown>;
+	/** Extra classes on the row (a list of references' drag classes). */
+	rowClass?: string;
+	extra?: ReactNode;
+}) {
+	const { label, icon, documents } = useCollection(props.to);
+	const doc = documents.find((d) => d.path === props.path);
+	const remove = (
+		<button type="button" className="ib" aria-label={props.removeLabel ?? `Remove ${doc ? doc.label || doc.title : 'the missing one'}`} onClick={props.onRemove}>
+			<Icon name="x" size="sm" />
+		</button>
+	);
+	const grip = props.grip ? (
+		<span className="grip" aria-hidden="true">
+			<Icon name="grip" />
+		</span>
+	) : null;
+	const extra = props.rowClass ? ` ${props.rowClass}` : '';
+	if (!doc) {
+		return (
+			<div className={`ref is-missing${extra}`} data-ref={props.path} {...props.rowProps}>
+				{grip}
+				<Icon name="warn" />
+				<span className="t">
+					<b>One that's gone</b>
+					<small>
+						{label} / {props.path} · skipped on the site
+					</small>
+				</span>
+				{remove}
+			</div>
+		);
+	}
+	return (
+		<div className={`ref${extra}`} data-ref={props.path} {...props.rowProps}>
+			{grip}
+			<Icon name={icon} />
+			<span className="t">
+				<b>{doc.label || doc.title}</b>
+				<small>{doc.url ?? doc.path}</small>
+			</span>
+			{props.extra}
+			{remove}
+		</div>
+	);
+}
+
+/** The picker: the collection's documents by title, filtered by what's typed. `taken` are shown as added. */
+export function RefPicker(props: { to: string; taken?: readonly string[]; onPick: (path: string) => void; onClose: () => void }) {
+	const editor = useEditor();
+	const all = useStore(editor.documents);
+	const open = useStore(editor.doc.state, (s) => s.ref);
+	const { label, icon } = useCollection(props.to);
+	const [query, setQuery] = useState('');
+	const hits = useMemo(() => {
+		const collection = editor.site.collections.filter((c) => c.name === props.to);
+		const docs = all.filter((d) => d.collection === props.to && !sameDoc(d, open));
+		if (!query.trim()) return docs;
+		return searchDocuments(query, docs, collection).flatMap((g) => g.hits.map((h) => h.doc));
+	}, [all, editor.site.collections, open, props.to, query]);
+	const shown = hits.slice(0, 6);
+	const taken = new Set(props.taken ?? []);
+	const first = shown.find((d) => !taken.has(d.path));
+	const onKey = (event: KeyboardEvent<HTMLInputElement>) => {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			if (first) props.onPick(first.path);
+		} else if (event.key === 'Escape') {
+			event.preventDefault();
+			props.onClose();
+		}
+	};
+	return (
+		<div className="lpop" role="dialog" aria-label={`Choose from ${label}`}>
+			<div className="find">
+				<Icon name="search" />
+				<input
+					className="input"
+					value={query}
+					placeholder={`Find in ${label}`}
+					aria-label={`Find in ${label}`}
+					autoComplete="off"
+					spellCheck={false}
+					autoFocus
+					data-ref-find=""
+					onChange={(e) => setQuery(e.target.value)}
+					onKeyDown={onKey}
+					onBlur={(e) => {
+						if (!e.relatedTarget || !(e.currentTarget.closest('.lpop')?.contains(e.relatedTarget as Node) ?? false)) props.onClose();
+					}}
+				/>
+			</div>
+			<div className="lpop-list">
+				{shown.map((d) => {
+					const on = taken.has(d.path);
+					return (
+						<button
+							key={d.path}
+							type="button"
+							className={`drow${d === first ? ' is-active' : ''}`}
+							data-path-pick={d.path}
+							disabled={on}
+							onMouseDown={(e) => e.preventDefault()}
+							onClick={() => props.onPick(d.path)}
+						>
+							<Icon name={icon} />
+							<span className="nm">{d.label || d.title}</span>
+							<span className="meta">
+								{/* M9 Decision 7: a hidden page is still offered (the reference is legitimate), marked as the pages list marks it. */}
+								{d.hidden ? (
+									<span className="hmark" data-mark="hidden" title={d.hiddenBy ? 'Hidden from the site with the page it’s under' : 'Hidden from the site'}>
+										Hidden
+									</span>
+								) : null}
+								<span>{on ? 'Added' : <span className="mono">{d.url ?? d.path}</span>}</span>
+							</span>
+						</button>
+					);
+				})}
+				{shown.length === 0 ? <div className="sw-more">{query.trim() ? `Nothing in ${label} called “${query.trim()}”.` : `${label} has nothing in it yet.`}</div> : null}
+				{hits.length > shown.length ? <div className="sw-more">{hits.length - shown.length} more: keep typing</div> : null}
+			</div>
+		</div>
+	);
+}
+
+export function ReferenceField(props: { name: string; label: string; field: ReferenceDescriptor; value: unknown }) {
+	const host = useHost();
+	const { label: collectionLabel } = useCollection(props.field.to);
+	const [picking, setPicking] = useState(false);
+	const value = typeof props.value === 'string' && props.value !== '' ? props.value : null;
+	const warnings = useFieldWarnings(props.name, props.field, props.value);
+	const choose = (
+		<div className="lnk" style={{ marginTop: value ? 'var(--space-2)' : 0 }}>
+			<button
+				type="button"
+				className="linkbtn subtle"
+				data-path={props.name}
+				aria-expanded={picking}
+				// While the picker is open, keep focus in its find input so this click closes it (and doesn't blur-close, then reopen).
+				onMouseDown={(e) => picking && e.preventDefault()}
+				onClick={() => setPicking(!picking)}
+			>
+				<Icon name={value ? 'search' : 'plus'} size="xs" />
+				{value ? 'Choose another' : `Choose from ${collectionLabel}`}
+			</button>
+			{picking ? (
+				<RefPicker
+					to={props.field.to}
+					taken={value ? [value] : []}
+					onPick={(path) => {
+						host.set(props.name, path);
+						setPicking(false);
+					}}
+					onClose={() => setPicking(false)}
+				/>
+			) : null}
+		</div>
+	);
+	return (
+		<FieldFrame blockKey={host.scope} name={props.name} label={props.label} help={props.field.help} labelId={`f-${host.scope}-${props.name}-l`}>
+			{value ? <RefRow to={props.field.to} path={value} onRemove={() => host.set(props.name, null)} /> : <div className="list-empty">None chosen.</div>}
+			<Warnings warnings={warnings} />
+			{choose}
+		</FieldFrame>
+	);
+}

package/src/editor/client/fields/RichTextField.tsx

@@ -0,0 +1,306 @@
+/**
+ * Rich text (M5a Decision 3; the mockup's #rich-text, #rich-link, #rich-warn):
+ * Tiptap, editor-only, in the sidebar (Decision 13), with a schema of exactly the
+ * field's nodes and marks (rich-text-schema.ts: the keys, paste, no input rules).
+ *
+ * - **The toolbar:** the paragraph style (only when the field allows headings:
+ *   Paragraph, Heading 2, and Heading 3 where allowed; never Heading 1), Bold,
+ *   Italic, Bulleted list, Numbered list, and Link (when the field allows links). A heading
+ *   field (M9 Decision 11) has Bold only.
+ *   ⌘B, ⌘I and ⌘K do the same.
+ * - **The link popover** (⌘K or the toolbar): find a document by title or address,
+ *   or type an address; picking a document stores its URL (Decision 4). An address
+ *   that fails the link rule says the rule's message, and is kept as typed if used.
+ *   With nothing selected, picking inserts the document's title as the link's text.
+ * - **What's stored** is the field's value after every change (rich-text-doc.ts →
+ *   fromDoc, through Phase 1's parse), so the file gets Decision 3's format: one
+ *   block per line, `**`, `*`, `[text](href)`, `\n`, literal characters escaped.
+ * - **Warnings** (amber): a kind the field doesn't allow or a link where links are
+ *   off (from the file, until the field is edited: quiet, with a chip in the head),
+ *   a link that fails the rule or goes to a document that doesn't exist.
+ *
+ * Before the editor mounts (the server render, hydration), the same frame shows
+ * the text as HTML, so nothing flickers in (no skeletons).
+ */
+import { Editor } from '@tiptap/core';
+import { useEffect, useRef, useState, type FocusEvent } from 'react';
+import { richTextOptions, type RichTextField as RichTextDescriptor } from '../../../fields.ts';
+import { fileAddress, fileKeyOf } from '../../../files.ts';
+import type { LibraryFile } from '../../types.ts';
+import { richTextHtml, type RichTextValue } from '../../../rich-text.ts';
+import { Icon } from '../shell/Icons.tsx';
+import { FieldFrame } from './FieldFrame.tsx';
+import { useFieldWarnings, useHost } from './host.tsx';
+import { documentAt, FieldIcon, LinkPopover, useLinkable, Warnings } from './parts.tsx';
+import { setBlockStyle, toggleList } from './rich-text-commands.ts';
+import { fromDoc, toDoc, type PMNode } from './rich-text-doc.ts';
+import { clipboardTextParser, richTextExtensions } from './rich-text-schema.ts';
+
+const STYLES = [
+	{ v: 'p', name: 'Paragraph', cls: 'st-p' },
+	{ v: 'h2', name: 'Heading 2', cls: 'st-h2' },
+	{ v: 'h3', name: 'Heading 3', cls: 'st-h3' },
+] as const;
+
+const isLinkKey = (event: KeyboardEvent) => (event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey && event.key.toLowerCase() === 'k';
+
+export function RichTextField(props: { name: string; label: string; field: RichTextDescriptor; value: unknown }) {
+	const host = useHost();
+	const { name, field } = props;
+	const id = `f-${host.scope}-${name}`.replace(/\./g, '-');
+	const value = (Array.isArray(props.value) ? props.value : []) as RichTextValue;
+	const options = richTextOptions(field);
+	const optionsKey = `${field.headings.join(',')}|${field.links}|${!!field.heading}`;
+	const linkable = useLinkable();
+	const warnings = useFieldWarnings(name, field, props.value);
+
+	const mount = useRef<HTMLDivElement>(null);
+	const editorRef = useRef<Editor | null>(null);
+	/** The value this field last stored (or was given): a change from outside is anything else. */
+	const lastValue = useRef(JSON.stringify(value));
+	const latest = useRef({ host, name, options, openLink: () => {} });
+	const [initialHtml] = useState(() => `<div class="prose rt">${richTextHtml(value)}</div>`);
+	const [, setTick] = useState(0);
+	const [link, setLink] = useState<{ query: string; editing: boolean } | null>(null);
+	const [styleMenu, setStyleMenu] = useState(false);
+
+	const openLink = () => {
+		const ed = editorRef.current;
+		if (!ed || !field.links || !ed.isEditable) return;
+		const href = ed.getAttributes('link').href as string | undefined;
+		setStyleMenu(false);
+		setLink({ query: href ?? '', editing: href !== undefined });
+	};
+	latest.current = { host, name, options, openLink };
+
+	useEffect(() => {
+		const el = mount.current;
+		if (!el) return;
+		el.textContent = '';
+		const ed = new Editor({
+			element: el,
+			extensions: richTextExtensions(latest.current.options),
+			content: toDoc(JSON.parse(lastValue.current) as RichTextValue, latest.current.options),
+			injectCSS: false,
+			enableInputRules: false,
+			enablePasteRules: false,
+			editable: !latest.current.host.readOnly,
+			editorProps: {
+				attributes: {
+					class: 'prose rt',
+					role: 'textbox',
+					'aria-multiline': 'true',
+					'aria-labelledby': `${id}-l`,
+					'data-path': name,
+				},
+				clipboardTextParser,
+				handleKeyDown(_view, event) {
+					if (!isLinkKey(event)) return false;
+					// ⌘K is the link here, not the document switcher (App.tsx listens on window).
+					event.preventDefault();
+					event.stopPropagation();
+					latest.current.openLink();
+					return true;
+				},
+			},
+			onUpdate: ({ editor }) => {
+				const next = fromDoc(editor.getJSON() as PMNode, latest.current.options);
+				const json = JSON.stringify(next);
+				if (json === lastValue.current) return;
+				lastValue.current = json;
+				latest.current.host.set(latest.current.name, next);
+			},
+			onTransaction: () => setTick((t) => t + 1),
+		});
+		editorRef.current = ed;
+		setTick((t) => t + 1);
+		return () => {
+			ed.destroy();
+			editorRef.current = null;
+		};
+		// The editor is made once per field (its schema is the field's).
+	}, [optionsKey, host.scope, name]);
+
+	// A value changed from outside (Undo of a list row holding this field, a document re-read): show it.
+	useEffect(() => {
+		const ed = editorRef.current;
+		const json = JSON.stringify(value);
+		if (!ed || json === lastValue.current) return;
+		lastValue.current = json;
+		if (JSON.stringify(fromDoc(ed.getJSON() as PMNode, options)) !== json) ed.commands.setContent(toDoc(value, options), { emitUpdate: false });
+	}, [props.value]);
+
+	useEffect(() => {
+		editorRef.current?.setEditable(!host.readOnly, false);
+	}, [host.readOnly]);
+
+	const ed = editorRef.current;
+	const active = (nameOrAttrs: string, attrs?: Record<string, unknown>) => !!ed && ed.isActive(nameOrAttrs, attrs);
+	const style = active('heading', { level: 2 }) ? 'h2' : active('heading', { level: 3 }) ? 'h3' : 'p';
+	const allowed = STYLES.filter((s) => s.v === 'p' || field.headings.includes(s.v));
+	const run = (fn: (e: Editor) => void) => {
+		if (!ed) return;
+		fn(ed);
+	};
+	const keep = (event: { preventDefault(): void }) => event.preventDefault();
+
+	const pick = (href: string, words?: string) => {
+		// M6c G4: a link to a file keeps its popover (and focus), so the text isn't focused.
+		const stay = !!fileKeyOf(href);
+		run((e) => {
+			const inLink = e.isActive('link');
+			const chain = stay ? e.chain() : e.chain().focus();
+			if (e.state.selection.empty && !inLink) {
+				const doc = documentAt(href, linkable);
+				const text = words ?? (doc ? doc.label || doc.title : href);
+				const from = e.state.selection.from;
+				chain.insertContent({ type: 'text', text, marks: [{ type: 'link', attrs: { href } }] }).run();
+				if (stay) e.commands.setTextSelection({ from, to: from + text.length });
+			} else {
+				chain.extendMarkRange('link').setMark('link', { href }).run();
+			}
+		});
+		// M6c G4: a link to a file keeps its popover, showing the file and (a PDF) New tab / Download.
+		setLink(stay ? { query: href, editing: true } : null);
+	};
+	const pickFile = (file: LibraryFile) => pick(fileAddress(file.key), file.name);
+	const closeLink = () => {
+		setLink(null);
+		ed?.commands.focus();
+	};
+	const onPopoverBlur = (event: FocusEvent<HTMLDivElement>) => {
+		if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setLink(null);
+	};
+
+	const shownAsText = warnings.filter((w) => w.code === 'disallowed-kind').length;
+	const quiet = warnings.filter((w) => w.code === 'disallowed-kind' || w.code === 'link-off' || w.code === 'italic-off');
+	const loud = warnings.filter((w) => w.code !== 'disallowed-kind' && w.code !== 'link-off' && w.code !== 'italic-off');
+	const disabled = host.readOnly;
+
+	return (
+		<FieldFrame
+			blockKey={host.scope}
+			name={name}
+			label={props.label}
+			help={props.field.help}
+			labelId={`${id}-l`}
+			chips={
+				shownAsText ? (
+					<span className="chip warn">
+						<Icon name="warn" size="xs" />
+						{shownAsText === 1 ? 'One block' : `${shownAsText} blocks`} shown as text
+					</span>
+				) : null
+			}
+		>
+			<div className="prose-wrap" data-rich-text={name}>
+				<div className="tb" role="toolbar" aria-label="Formatting">
+					{field.headings.length ? (
+						<>
+							<button
+								type="button"
+								className="tb-style"
+								aria-haspopup="menu"
+								aria-expanded={styleMenu}
+								aria-label={`Paragraph style: ${STYLES.find((s) => s.v === style)!.name}`}
+								disabled={disabled}
+								onMouseDown={keep}
+								onClick={() => setStyleMenu(!styleMenu)}
+							>
+								{STYLES.find((s) => s.v === style)!.name}
+								<Icon name="chev-d" size="xs" />
+							</button>
+							<span className="sep" aria-hidden="true" />
+						</>
+					) : null}
+					<button type="button" aria-label="Bold" aria-pressed={active('bold')} disabled={disabled} onMouseDown={keep} onClick={() => run((e) => e.chain().focus().toggleMark('bold').run())}>
+						<b>B</b>
+					</button>
+					{/* M9 Decision 11: a heading field is bold and line breaks only. */}
+					{field.heading ? null : (
+						<>
+							<button type="button" aria-label="Italic" aria-pressed={active('italic')} disabled={disabled} onMouseDown={keep} onClick={() => run((e) => e.chain().focus().toggleMark('italic').run())}>
+								<i className="tb-i">I</i>
+							</button>
+							<span className="sep" aria-hidden="true" />
+							<button
+								type="button"
+								aria-label="Bulleted list"
+								aria-pressed={active('bulletList')}
+								disabled={disabled}
+								onMouseDown={keep}
+								onClick={() => run((e) => toggleList(e, 'bulletList'))}
+							>
+								<FieldIcon name="ul" size="sm" />
+							</button>
+							<button
+								type="button"
+								aria-label="Numbered list"
+								aria-pressed={active('orderedList')}
+								disabled={disabled}
+								onMouseDown={keep}
+								onClick={() => run((e) => toggleList(e, 'orderedList'))}
+							>
+								<FieldIcon name="ol" size="sm" />
+							</button>
+						</>
+					)}
+					{field.links ? (
+						<>
+							<span className="sep" aria-hidden="true" />
+							<button type="button" aria-label="Link" aria-pressed={!!link || active('link')} disabled={disabled} onMouseDown={keep} onClick={() => (link ? closeLink() : openLink())}>
+								<FieldIcon name="link" size="sm" />
+							</button>
+						</>
+					) : null}
+					{styleMenu ? (
+						<div className="menu" role="menu" onKeyDown={(e) => e.key === 'Escape' && (e.preventDefault(), setStyleMenu(false), ed?.commands.focus())}>
+							{allowed.map((s) => (
+								<button
+									key={s.v}
+									type="button"
+									role="menuitemradio"
+									aria-checked={style === s.v}
+									onMouseDown={keep}
+									onClick={() => {
+										setStyleMenu(false);
+										run((e) => setBlockStyle(e, s.v));
+									}}
+								>
+									<span className={s.cls}>{s.name}</span>
+									{style === s.v ? (
+										<span className="k">
+											<Icon name="check" size="sm" />
+										</span>
+									) : null}
+								</button>
+							))}
+						</div>
+					) : null}
+				</div>
+				<div ref={mount} className="rt-mount" suppressHydrationWarning dangerouslySetInnerHTML={{ __html: initialHtml }} />
+				{link ? (
+					<LinkPopover
+							onBlur={onPopoverBlur}
+							withFind
+							query={link.query}
+							onQuery={(q) => setLink({ ...link, query: q })}
+							onPick={(href) => pick(href)}
+							onPickFile={pickFile}
+							onClose={closeLink}
+							onRemove={
+								link.editing
+									? () => {
+											run((e) => e.chain().focus().extendMarkRange('link').unsetMark('link').run());
+											setLink(null);
+										}
+									: undefined
+							}
+						/>
+				) : null}
+			</div>
+			{quiet.length ? <Warnings warnings={quiet} quiet /> : null}
+			<Warnings warnings={loud} />
+		</FieldFrame>
+	);
+}

package/src/editor/client/fields/SelectField.tsx

@@ -0,0 +1,63 @@
+/**
+ * One of a fixed list (Decision 12). Edited in the sidebar only.
+ *
+ * M6: a select whose options are the site's forms (the starter's Form block picks one
+ * by its id, Decision 17) is the form picker (the mockup's #form-block): it says where the
+ * form's fields come from, and under it how many fields the chosen form has and who gets
+ * its email (Site Settings → Form emails, as drafted).
+ */
+import { looksLikeEmail } from '../../../forms/rules.ts';
+import type { SelectField as SelectDescriptor } from '../../../fields.ts';
+import { useEditor } from '../context.tsx';
+import type { Editor } from '../editor.ts';
+import { Icon } from '../shell/Icons.tsx';
+import { FieldFrame } from './FieldFrame.tsx';
+import { useFieldHost } from './host.tsx';
+import { useSiteSettings } from './SeoGroup.tsx';
+
+/** Whether a select picks one of the site's forms: its options are exactly the forms' ids. */
+export function isFormPicker(editor: Pick<Editor, 'forms'>, field: SelectDescriptor): boolean {
+	const ids = editor.forms.map((f) => f.id).sort();
+	const values = field.options.map((o) => o.value).sort();
+	return ids.length > 0 && ids.length === values.length && ids.every((id, i) => id === values[i]);
+}
+
+export function SelectField(props: { blockKey: string; name: string; label: string; field: SelectDescriptor; value: unknown }) {
+	const editor = useEditor();
+	const host = useFieldHost();
+	const id = `f-${props.blockKey}-${props.name}`.replace(/\./g, '-');
+	const set = (v: string) => (host ? host.set(props.name, v) : editor.doc.setField(props.blockKey, props.name, v));
+	const value = typeof props.value === 'string' ? props.value : props.field.default;
+	const forms = isFormPicker(editor, props.field);
+	return (
+		<FieldFrame blockKey={props.blockKey} name={props.name} label={props.label} help={props.field.help} htmlFor={id}>
+			<select className="input" id={id} data-path={props.name} value={value} onChange={(e) => set(e.target.value)}>
+				{props.field.options.map((o) => (
+					<option key={o.value} value={o.value}>
+						{o.label}
+					</option>
+				))}
+			</select>
+			{forms ? <FormPickerHint formId={value} /> : null}
+		</FieldFrame>
+	);
+}
+
+function FormPickerHint({ formId }: { formId: string | undefined }) {
+	const editor = useEditor();
+	const settings = useSiteSettings();
+	const form = editor.forms.find((f) => f.id === formId);
+	const ok = (settings?.formRecipients[formId ?? ''] ?? []).filter(looksLikeEmail);
+	const to = !settings ? null : ok.length === 0 ? 'no one yet' : ok.length === 1 ? ok[0]! : `${ok.length} addresses`;
+	return (
+		<>
+			<p className="field-help">Who gets its email: Site Settings › Form emails.</p>
+			{form ? (
+				<p className="field-hint" data-form-hint={form.id}>
+					<Icon name="mail" size="xs" />
+					{form.fields.length} fields{to ? ` · its email goes to ${to}` : ''}
+				</p>
+			) : null}
+		</>
+	);
+}