caracms 0.0.0-stage → 0.2.0

package/src/editor/client/documents/dialogs.tsx

@@ -0,0 +1,687 @@
+/**
+ * The dialogs for creating and deleting documents (M5a Decisions 11 and 12; the
+ * mockup's #new-page, #new-group, #address-taken, #group-page, #new-case,
+ * #new-shared, #delete-page, #delete-parent, #shared-delete), in the editor's
+ * `#modal-root`. One at a time, from `dialogOf(editor)`:
+ *
+ *   openDialog(editor, { kind: 'new', collection, inside?, at? })   New page / + New
+ *   openDialog(editor, { kind: 'new-shared' })                      + New shared block
+ *   openDialog(editor, { kind: 'delete', ref })                     Delete page… (the confirmation)
+ *   openDialog(editor, { kind: 'in-use', ref, usedOn? })            a shared block still used
+ *   openDialog(editor, { kind: 'move', ref })                       Change address… (pre-M7 item 8)
+ *   openDialog(editor, { kind: 'replace', key })                    Replace… on a file (M6c G4, media/ReplaceDialog.tsx)
+ *
+ * Esc closes the dialog only (the editor's own Esc, going up a level, doesn't run).
+ * Addresses are shown before creating, made by slug.ts as the server makes them, and
+ * pre-checked with `addressProblem`; whatever the server still refuses, its own
+ * sentence shows on the field.
+ */
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { INDEX_MESSAGE, NO_ADDRESS_MESSAGE, RESERVED_SLUG, addressProblem, slugify } from '../../../slug.ts';
+import { useEditor, useStore } from '../context.tsx';
+import type { Editor } from '../editor.ts';
+import { blockIcon } from '../block-list/summary.ts';
+import { docIcon } from '../nav/DocRow.tsx';
+import { Icon } from '../shell/Icons.tsx';
+import { createStore, type Store } from '../state/store.ts';
+import type { CreateDeleteRefusal, DocRef, ListedDocument } from '../../types.ts';
+import { addressFor, andList, createDocument, deleteDocument, insideOptions, moveDocument, pagesUnder, singular } from './actions.ts';
+import { filesLabel, inboxFor } from '../inbox/store.ts';
+import { ReplaceDialog } from '../media/ReplaceDialog.tsx';
+
+export type Dialog =
+	| { kind: 'new'; collection: string; inside?: string; at?: string }
+	| { kind: 'new-shared' }
+	| { kind: 'delete'; ref: DocRef }
+	| { kind: 'in-use'; ref: DocRef; usedOn?: CreateDeleteRefusal['usedOn'] }
+	/** Pre-M7 item 8: Change address…, in the language of New page. */
+	| { kind: 'move'; ref: DocRef }
+	/** M6 Decision 9: a submission's Delete…, permanent, so it asks first (the mockup's #submission-delete). */
+	| { kind: 'sub-delete'; id: string; who: string; files: number }
+	/** M6c G4 Decision 9: Replace… on a file in the library (its key). */
+	| { kind: 'replace'; key: string };
+
+const dialogs = new WeakMap<Editor, Store<Dialog | null>>();
+
+export function dialogOf(editor: Editor): Store<Dialog | null> {
+	let store = dialogs.get(editor);
+	if (!store) dialogs.set(editor, (store = createStore<Dialog | null>(null)));
+	return store;
+}
+export const openDialog = (editor: Editor, dialog: Dialog) => {
+	editor.setPop(null);
+	dialogOf(editor).set(dialog);
+};
+export const closeDialog = (editor: Editor) => dialogOf(editor).set(null);
+
+/** Whichever dialog is open. Mounted once, in the shell's `#modal-root`. */
+export function DocumentDialogs() {
+	const editor = useEditor();
+	const dialog = useStore(dialogOf(editor));
+	if (!dialog) return null;
+	switch (dialog.kind) {
+		case 'new':
+			return <NewDocument key={`${dialog.collection}:${dialog.inside ?? ''}:${dialog.at ?? ''}`} {...dialog} />;
+		case 'new-shared':
+			return <NewShared />;
+		case 'delete':
+			return <DeleteDocument key={`${dialog.ref.collection}/${dialog.ref.path}`} docRef={dialog.ref} />;
+		case 'in-use':
+			return <InUse docRef={dialog.ref} usedOn={dialog.usedOn} />;
+		case 'move':
+			return <MoveDocument key={`${dialog.ref.collection}/${dialog.ref.path}`} docRef={dialog.ref} />;
+		case 'sub-delete':
+			return <DeleteSubmission key={dialog.id} {...dialog} />;
+		case 'replace':
+			return <ReplaceDialog key={dialog.key} fileKey={dialog.key} />;
+	}
+}
+
+/** The dialog frame: the scrim, focus on its first control, Esc closing it alone, focus back where it was. */
+export function Frame(props: { alert?: boolean; label: string; describedBy?: string; children: ReactNode }) {
+	const editor = useEditor();
+	const box = useRef<HTMLDivElement>(null);
+	useEffect(() => {
+		const before = document.activeElement as HTMLElement | null;
+		const first =
+			box.current?.querySelector<HTMLElement>('[data-autofocus]') ??
+			box.current?.querySelector<HTMLElement>('input:not([disabled]),select:not([disabled]),[role="radio"],button.btn:not([disabled])');
+		first?.focus();
+		const onKey = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') {
+				// Closes the dialog only: the editor's Esc (up a level) and the picker's don't run.
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				closeDialog(editor);
+			} else if (event.key === 'Tab' && box.current) {
+				// Keep focus inside the dialog.
+				const items = [...box.current.querySelectorAll<HTMLElement>('input:not([disabled]),select:not([disabled]),button:not([disabled])')];
+				const at = items.indexOf(document.activeElement as HTMLElement);
+				if (event.shiftKey && at <= 0) {
+					event.preventDefault();
+					items.at(-1)?.focus();
+				} else if (!event.shiftKey && at === items.length - 1) {
+					event.preventDefault();
+					items[0]?.focus();
+				}
+			}
+		};
+		window.addEventListener('keydown', onKey, true);
+		return () => {
+			window.removeEventListener('keydown', onKey, true);
+			if (before?.isConnected) before.focus({ preventScroll: true });
+		};
+	}, [editor]);
+	return (
+		<div className="scrim" onMouseDown={(e) => e.target === e.currentTarget && closeDialog(editor)}>
+			<div ref={box} className="dialog" role={props.alert ? 'alertdialog' : 'dialog'} aria-modal="true" aria-labelledby="dlg-h" aria-describedby={props.describedBy} data-dialog={props.label}>
+				{props.children}
+			</div>
+		</div>
+	);
+}
+
+function Err({ id, text }: { id: string; text: string | null }) {
+	if (!text) return null;
+	return (
+		<p className="field-err" id={id} role="alert">
+			<Icon name="warn" size="sm" />
+			<span>{text}</span>
+		</p>
+	);
+}
+
+// ── New page, + New ──────────────────────────────────────────────────────────
+
+const NEW_GROUP = '__new';
+
+function NewDocument(props: { collection: string; inside?: string; at?: string }) {
+	const editor = useEditor();
+	const documents = useStore(editor.documents);
+	const collection = editor.site.collections.find((c) => c.name === props.collection);
+	const at = props.at ?? null;
+	const atLabel = at ? (insideOptions(collection ?? { name: props.collection, urlBase: '/' }, documents).find((o) => o.path === at)?.label.split(' / ').pop() ?? at) : null;
+	const [name, setName] = useState(atLabel ?? '');
+	const [inside, setInside] = useState(props.inside ?? '');
+	const [group, setGroup] = useState('');
+	/** The address's last part as typed by hand (null: it follows the name). */
+	const [part, setPart] = useState<string | null>(null);
+	const [error, setError] = useState<string | null>(null);
+	const [busy, setBusy] = useState(false);
+	const options = useMemo(() => (collection?.nested ? insideOptions(collection, documents) : []), [collection, documents]);
+	if (!collection) return null;
+	const nested = collection.nested;
+	const what = singular(collection);
+	// M6c (G1): a collection with no pages of its own makes a file from the name, and shows no address.
+	const pageless = collection.urlBase === null;
+	const newGroup = nested && !at && inside === NEW_GROUP;
+	const folder = at ? '' : nested ? (newGroup ? slugify(group) : inside) : '';
+	const last = at ? at : slugify(part ?? name);
+	const path = at ? at : folder ? `${folder}/${last}` : last;
+	const url = addressFor(collection, path);
+	const base = addressFor(collection, folder ? `${folder}/` : '') ?? '/';
+	// What's wrong before asking the server (the same rules it applies).
+	const local = (() => {
+		if (!name.trim()) return null;
+		if (newGroup && !slugify(group)) return group.trim() ? NO_ADDRESS_MESSAGE : null;
+		if (!last) return NO_ADDRESS_MESSAGE;
+		if (path.split('/').includes(RESERVED_SLUG)) return INDEX_MESSAGE;
+		const existing = documents.find((d) => d.collection === collection.name && d.path === path);
+		if (existing) return url ? `There's already a ${what} at ${url}` : `There's already a ${what} called “${existing.label}”`;
+		return url ? (addressProblem(url, collection.name, editor.site.collections, documents, editor.site.codeRoutes)?.message ?? null) : null;
+	})();
+	const shown = error ?? local;
+	const blocked = !name.trim() || !last || (newGroup && !slugify(group)) || !!local || busy;
+	const create = async () => {
+		if (blocked) return;
+		setBusy(true);
+		setError(null);
+		const answer = await createDocument(editor, { collection: collection.name, path, title: name.trim() });
+		setBusy(false);
+		if (answer.ok) closeDialog(editor);
+		else setError(answer.error);
+	};
+	const kids = at ? pagesUnder(collection.name, at, documents) : [];
+	return (
+		<Frame label="new">
+			<form
+				onSubmit={(e) => {
+					e.preventDefault();
+					void create();
+				}}
+			>
+				<h2 id="dlg-h">{at ? `A page at ${url}` : `New ${what}`}</h2>
+				{editor.mode === 'live' ? <p>Nobody sees it until the next Publish.</p> : null}
+				{at && kids.length ? (
+					<div className="note" style={{ margin: 'var(--space-4) 0 0' }}>
+						<Icon name="folder" />
+						<div>
+							<b>{atLabel} becomes a page</b>
+							<p>
+								{andList(kids.map((k) => k.label))} stay{kids.length === 1 ? 's' : ''} under it, at the same address{kids.length === 1 ? '' : 'es'}.
+							</p>
+						</div>
+					</div>
+				) : null}
+				{nested && !at ? (
+					<div className="field">
+						<label className="field-label" htmlFor="np-inside">
+							Inside
+						</label>
+						<select className="input" id="np-inside" value={inside} onChange={(e) => (setInside(e.target.value), setError(null))}>
+							{options.map((o) => (
+								<option key={o.path} value={o.path}>
+									{o.label}
+									{o.path ? ` (${o.base}…)` : ''}
+								</option>
+							))}
+							<option disabled>──────────</option>
+							<option value={NEW_GROUP}>New group…</option>
+						</select>
+					</div>
+				) : null}
+				{newGroup ? (
+					<div className="field">
+						<label className="field-label" htmlFor="np-group">
+							Group name
+						</label>
+						<input className="input" id="np-group" value={group} placeholder="e.g. Workshops" autoComplete="off" onChange={(e) => (setGroup(e.target.value), setError(null))} />
+					</div>
+				) : null}
+				<div className="field">
+					<label className="field-label" htmlFor="np-name">
+						{newGroup ? 'First page' : 'Name'}
+					</label>
+					<input
+						className="input"
+						id="np-name"
+						data-autofocus=""
+						value={name}
+						placeholder={nested ? 'e.g. Packaging' : 'Name'}
+						autoComplete="off"
+						aria-invalid={shown ? true : undefined}
+						aria-describedby={shown ? 'np-err' : undefined}
+						onChange={(e) => (setName(e.target.value), setError(null))}
+					/>
+				</div>
+				{pageless ? (
+					<Err id="np-err" text={shown} />
+				) : (
+				<div className="field">
+					<p className="urlpre" style={{ marginTop: 0 }} data-address={url ?? ''}>
+						<Icon name="page" size="xs" />
+						<span>
+							Its address:{' '}
+							<span className="mono">
+								{editor.site.host}
+								{at ? <b>{url}</b> : (
+									<>
+										{base}
+										<b>{last || '…'}</b>
+									</>
+								)}
+							</span>
+						</span>
+						{at || part !== null ? null : (
+							<button type="button" className="linkbtn subtle" data-act="edit-address" onClick={() => setPart(last)}>
+								Change
+							</button>
+						)}
+					</p>
+					{part !== null ? (
+						<>
+							<label className="sub-label" htmlFor="np-part">
+								The address's last part
+							</label>
+							<input className="input mono" id="np-part" value={part} autoComplete="off" spellCheck={false} onChange={(e) => (setPart(e.target.value), setError(null))} />
+						</>
+					) : null}
+					<Err id="np-err" text={shown} />
+				</div>
+				)}
+				<div className="acts">
+					<button type="button" className="btn" onClick={() => closeDialog(editor)}>
+						Cancel
+					</button>
+					<button type="submit" className="btn ink" data-act="create" disabled={blocked}>
+						{newGroup ? 'Create group and page' : `Create ${what}`}
+					</button>
+				</div>
+			</form>
+		</Frame>
+	);
+}
+
+// ── Change address… (pre-M7 item 8) ─────────────────────────────────────────
+
+/**
+ * A document's new address: for nested Pages the group it sits in ("Inside", New page's
+ * select, with New group…) and the address's last part, shown whole as it's typed, with
+ * New page's rules checked before asking the server. Pages under it stay where they are.
+ */
+function MoveDocument({ docRef }: { docRef: DocRef }) {
+	const editor = useEditor();
+	const documents = useStore(editor.documents);
+	const waiting = useStore(editor.liveState, (st) => st.status?.waiting);
+	const doc = documents.find((d) => d.collection === docRef.collection && d.path === docRef.path);
+	const collection = editor.site.collections.find((c) => c.name === docRef.collection);
+	const slash = docRef.path.lastIndexOf('/');
+	const [inside, setInside] = useState(slash === -1 ? '' : docRef.path.slice(0, slash));
+	const [group, setGroup] = useState('');
+	const [part, setPart] = useState(docRef.path.slice(slash + 1));
+	const [error, setError] = useState<string | null>(null);
+	const [busy, setBusy] = useState(false);
+	const options = useMemo(() => (collection?.nested ? insideOptions(collection, documents) : []), [collection, documents]);
+	if (!doc || !collection || !doc.url) return null;
+	const nested = collection.nested;
+	const newGroup = nested && inside === NEW_GROUP;
+	const folder = nested ? (newGroup ? slugify(group) : inside) : '';
+	// As in New page: what's typed becomes an address part (`Harbour Roasters` → `harbour-roasters`).
+	const last = slugify(part);
+	const path = folder ? `${folder}/${last}` : last;
+	const url = addressFor(collection, path);
+	const base = addressFor(collection, folder ? `${folder}/` : '') ?? '/';
+	const same = path === docRef.path;
+	const others = documents.filter((d) => !(d.collection === docRef.collection && d.path === docRef.path));
+	// New page's rules, before asking the server (it applies the same).
+	const local = (() => {
+		if (same) return null;
+		if (newGroup && !slugify(group)) return group.trim() ? NO_ADDRESS_MESSAGE : null;
+		if (!last) return part.trim() ? NO_ADDRESS_MESSAGE : null;
+		if (path.split('/').includes(RESERVED_SLUG)) return INDEX_MESSAGE;
+		return url ? (addressProblem(url, collection.name, editor.site.collections, others, editor.site.codeRoutes)?.message ?? null) : null;
+	})();
+	const shown = error ?? local;
+	const blocked = same || !last || (newGroup && !slugify(group)) || !!local || busy;
+	// Made since the last Publish: nobody has its address yet. Moved since then: its live address is the one it came from.
+	const pending = (waiting ?? []).find((w) => w.collection === docRef.collection && w.path === docRef.path && w.change === 'new');
+	const liveAddress = pending ? (pending.movedFrom ?? null) : doc.url;
+	const kids = nested ? pagesUnder(collection.name, docRef.path, documents) : [];
+	const host = editor.site.host;
+	const confirm = async () => {
+		if (blocked) return;
+		setBusy(true);
+		setError(null);
+		const answer = await moveDocument(editor, docRef, path, doc.label);
+		setBusy(false);
+		if (answer.ok) closeDialog(editor);
+		else setError(answer.error);
+	};
+	const intro = liveAddress ? `${liveAddress} will redirect here.${editor.mode === 'live' ? ' Goes live at the next Publish.' : ''}` : null;
+	return (
+		<Frame label="move">
+			<form
+				onSubmit={(e) => {
+					e.preventDefault();
+					void confirm();
+				}}
+			>
+				<h2 id="dlg-h">Change {doc.label}’s address</h2>
+				{intro ? <p>{intro}</p> : null}
+				{nested ? (
+					<div className="field">
+						<label className="field-label" htmlFor="mv-inside">
+							Inside
+						</label>
+						<select className="input" id="mv-inside" value={inside} onChange={(e) => (setInside(e.target.value), setError(null))}>
+							{options.map((o) => (
+								<option key={o.path} value={o.path}>
+									{o.label}
+									{o.path ? ` (${o.base}…)` : ''}
+								</option>
+							))}
+							<option disabled>──────────</option>
+							<option value={NEW_GROUP}>New group…</option>
+						</select>
+					</div>
+				) : null}
+				{newGroup ? (
+					<div className="field">
+						<label className="field-label" htmlFor="mv-group">
+							Group name
+						</label>
+						<input className="input" id="mv-group" value={group} placeholder="e.g. Studio" autoComplete="off" onChange={(e) => (setGroup(e.target.value), setError(null))} />
+					</div>
+				) : null}
+				<div className="field">
+					<label className="field-label" htmlFor="mv-part">
+						The address's last part
+					</label>
+					<input
+						className="input mono"
+						id="mv-part"
+						data-autofocus=""
+						value={part}
+						autoComplete="off"
+						spellCheck={false}
+						aria-invalid={shown ? true : undefined}
+						aria-describedby={shown ? 'mv-err' : undefined}
+						onChange={(e) => (setPart(e.target.value), setError(null))}
+					/>
+					<p className="urlpre" data-address={url ?? ''}>
+						<Icon name="page" size="xs" />
+						<span>
+							{same ? 'Its address now: ' : 'Its new address: '}
+							<span className="mono">
+								{host}
+								{base}
+								<b>{last || '…'}</b>
+							</span>
+						</span>
+					</p>
+					<Err id="mv-err" text={shown} />
+					{same ? null : (
+						<p className="field-help" data-from={doc.url}>
+							Now at <span className="mono">{`${host}${doc.url}`}</span>
+						</p>
+					)}
+				</div>
+				{kids.length ? (
+					<p className="field-help" data-kids={kids.length}>
+						{andList(kids.map((k) => k.label))} stay{kids.length === 1 ? 's' : ''} where {kids.length === 1 ? 'it is' : 'they are'}, at {doc.url}/…
+					</p>
+				) : null}
+				<div className="acts">
+					<button type="button" className="btn" onClick={() => closeDialog(editor)}>
+						Cancel
+					</button>
+					<button type="submit" className="btn ink" data-act="confirm-move" disabled={blocked}>
+						Change address
+					</button>
+				</div>
+			</form>
+		</Frame>
+	);
+}
+
+// ── + New shared block ───────────────────────────────────────────────────────
+
+function NewShared() {
+	const editor = useEditor();
+	const documents = useStore(editor.documents);
+	const types = Object.values(editor.site.blocks);
+	const [type, setType] = useState<string | null>(null);
+	const [name, setName] = useState('');
+	const [error, setError] = useState<string | null>(null);
+	const [busy, setBusy] = useState(false);
+	const path = slugify(name);
+	const local = !name.trim()
+		? null
+		: !path
+			? NO_ADDRESS_MESSAGE
+			: path === RESERVED_SLUG
+				? INDEX_MESSAGE
+				: documents.some((d) => d.collection === 'shared' && d.path === path)
+					? `There's already a shared block called “${documents.find((d) => d.collection === 'shared' && d.path === path)!.label}”.`
+					: null;
+	const shown = error ?? local;
+	const blocked = !type || !name.trim() || !!local || busy;
+	const create = async () => {
+		if (blocked) return;
+		setBusy(true);
+		setError(null);
+		const answer = await createDocument(editor, { collection: 'shared', path, title: name.trim(), blockType: type! });
+		setBusy(false);
+		if (answer.ok) closeDialog(editor);
+		else setError(answer.error);
+	};
+	return (
+		<Frame label="new-shared">
+			<form
+				onSubmit={(e) => {
+					e.preventDefault();
+					void create();
+				}}
+			>
+				<h2 id="dlg-h">New shared block</h2>
+				<div className="field">
+					<span className="field-label" id="ns-t">
+						Block type
+					</span>
+					<div className="tgrid" role="radiogroup" aria-labelledby="ns-t" style={{ marginTop: 'var(--space-1-5)' }}>
+						{types.map((t) => (
+							<button key={t.type} type="button" className="ptype sm" role="radio" aria-checked={type === t.type} data-type={t.type} onClick={() => (setType(t.type), setError(null))}>
+								<Icon name={blockIcon({ type: t.type, known: true })} />
+								<b>{t.label}</b>
+							</button>
+						))}
+					</div>
+				</div>
+				<div className="field">
+					<label className="field-label" htmlFor="ns-name">
+						Name
+					</label>
+					<input
+						className="input"
+						id="ns-name"
+						value={name}
+						placeholder="e.g. Client quote"
+						autoComplete="off"
+						aria-invalid={shown ? true : undefined}
+						aria-describedby={shown ? 'ns-err' : undefined}
+						onChange={(e) => (setName(e.target.value), setError(null))}
+					/>
+					<p className="field-help">Visitors don't see it.</p>
+					<Err id="ns-err" text={shown} />
+				</div>
+				<div className="acts">
+					<button type="button" className="btn" onClick={() => closeDialog(editor)}>
+						Cancel
+					</button>
+					<button type="submit" className="btn ink" data-act="create-shared" disabled={blocked}>
+						Create shared block
+					</button>
+				</div>
+			</form>
+		</Frame>
+	);
+}
+
+// ── Delete ───────────────────────────────────────────────────────────────────
+
+function DeleteDocument({ docRef }: { docRef: DocRef }) {
+	const editor = useEditor();
+	const documents = useStore(editor.documents);
+	const [error, setError] = useState<string | null>(null);
+	const [busy, setBusy] = useState(false);
+	const doc = documents.find((d) => d.collection === docRef.collection && d.path === docRef.path);
+	const collection = editor.site.collections.find((c) => c.name === docRef.collection);
+	if (!doc || !collection) return null;
+	const shared = collection.kind === 'shared';
+	const kids = collection.nested ? pagesUnder(collection.name, doc.path, documents) : [];
+	const host = editor.site.host;
+	const url = doc.url ?? '';
+	const confirm = async () => {
+		setBusy(true);
+		setError(null);
+		const answer = await deleteDocument(editor, docRef, doc.label);
+		setBusy(false);
+		if (answer.ok) closeDialog(editor);
+		else if (answer.code === 'in-use') openDialog(editor, { kind: 'in-use', ref: docRef, usedOn: answer.usedOn ?? undefined });
+		else setError(answer.error);
+	};
+	return (
+		<Frame alert label="delete" describedBy="dlg-d">
+			<div className="icon-h" style={{ background: 'var(--status-danger-wash)', color: 'var(--status-danger)' }}>
+				<Icon name="trash" />
+			</div>
+			<h2 id="dlg-h">Delete {doc.label}?</h2>
+			<p id="dlg-d">
+				{shared ? (
+					"It isn't on any page, so nothing on the site changes."
+				) : collection.urlBase === null ? (
+					// M6c (G1): no page of its own, so no address stops working; pages showing it drop it.
+					editor.mode === 'live' ? (
+						`${doc.label} disappears from the pages that show it at the next Publish.`
+					) : (
+						`${doc.label} is removed, and disappears from the pages that show it.`
+					)
+				) : editor.mode === 'live' ? (
+					<>
+						<span className="mono">{`${host}${url === '/' ? '' : url}`}</span> stops working at the next Publish.
+					</>
+				) : (
+					<>
+						{doc.label} is removed, and <span className="mono">{`${host}${url === '/' ? '' : url}`}</span> stops working.
+					</>
+				)}
+			</p>
+			{kids.length ? (
+				<p data-kids={kids.length}>
+					Its {kids.length} page{kids.length === 1 ? '' : 's'} stay{kids.length === 1 ? 's' : ''}, in a {doc.label} group: {andList(kids.map((k) => k.label))} keep
+					{kids.length === 1 ? 's its address' : ' their addresses'}.
+				</p>
+			) : null}
+			<Err id="del-err" text={error} />
+			<div className="acts">
+				<button type="button" className="btn" onClick={() => closeDialog(editor)}>
+					Cancel
+				</button>
+				<button type="button" className="btn danger" data-act="confirm-delete" disabled={busy} onClick={() => void confirm()}>
+					Delete {shared ? 'shared block' : singular(collection)}
+				</button>
+			</div>
+		</Frame>
+	);
+}
+
+/**
+ * M6 Decision 9: deleting a submission is permanent (its files, then its message), so it
+ * asks first. Done, the sheet closes and the list drops it.
+ */
+function DeleteSubmission({ id, who, files }: { id: string; who: string; files: number }) {
+	const editor = useEditor();
+	const [error, setError] = useState<string | null>(null);
+	const [busy, setBusy] = useState(false);
+	const confirm = async () => {
+		setBusy(true);
+		setError(null);
+		const answer = await inboxFor(editor).remove(id);
+		// The answer may come after this dialog was left and another message opened (delete one, then
+		// straight on to the next): it closes only its own dialog and its own sheet.
+		const mine = () => {
+			const open = dialogOf(editor).get();
+			return open?.kind === 'sub-delete' && open.id === id;
+		};
+		if (!answer.ok) {
+			const error = answer.error ?? "It wasn't deleted. Try again in a moment.";
+			if (mine()) {
+				setBusy(false);
+				setError(error);
+			} else editor.toast(`${who}’s message wasn’t deleted. ${error}`, 'warn');
+			return;
+		}
+		if (mine()) closeDialog(editor);
+		if (editor.view.get().inbox?.id === id) editor.openInbox(null);
+		editor.toast(`Deleted ${who}’s message${files ? ` and its ${filesLabel(files)}` : ''}`, 'trash');
+	};
+	return (
+		<Frame alert label="sub-delete" describedBy="dlg-d">
+			<div className="icon-h" style={{ background: 'var(--status-danger-wash)', color: 'var(--status-danger)' }}>
+				<Icon name="trash" />
+			</div>
+			<h2 id="dlg-h">Delete {who}’s message?</h2>
+			<p id="dlg-d">
+				It’s deleted for good{files ? `, with its ${filesLabel(files)}` : ''}. There’s no undo.
+			</p>
+			<Err id="del-err" text={error} />
+			<div className="acts">
+				<button type="button" className="btn" onClick={() => closeDialog(editor)}>
+					Cancel
+				</button>
+				<button type="button" className="btn danger" data-act="sub-delete-confirm" disabled={busy} onClick={() => void confirm()}>
+					Delete for good
+				</button>
+			</div>
+		</Frame>
+	);
+}
+
+/** A shared block that pages still use can't be deleted (Decision 8): where it's used, each a way there. */
+function InUse({ docRef, usedOn }: { docRef: DocRef; usedOn?: CreateDeleteRefusal['usedOn'] }) {
+	const editor = useEditor();
+	const documents = useStore(editor.documents);
+	const doc = documents.find((d) => d.collection === docRef.collection && d.path === docRef.path);
+	const where: ListedDocument[] = (usedOn ?? doc?.usedOn ?? [])
+		.map((u) => documents.find((d) => d.collection === u.collection && d.path === u.path))
+		.filter((d): d is ListedDocument => !!d);
+	const title = doc?.label ?? docRef.path;
+	const n = where.length;
+	return (
+		<Frame alert label="in-use" describedBy="dlg-d">
+			<div className="icon-h" style={{ background: 'var(--status-warning-wash)', color: 'var(--status-warning)' }}>
+				<Icon name="shared" />
+			</div>
+			<h2 id="dlg-h">
+				{title} is still on {n} page{n === 1 ? '' : 's'}
+			</h2>
+			<p id="dlg-d">Remove it from these pages first.</p>
+			<div className="dlg-list">
+				{where.map((d) => (
+					<button
+						key={`${d.collection}/${d.path}`}
+						type="button"
+						className="drow"
+						data-doc={`${d.collection}/${d.path}`}
+						onClick={() => {
+							closeDialog(editor);
+							void editor.openDocument({ collection: d.collection, path: d.path });
+						}}
+					>
+						<Icon name={docIcon(editor.site.collections.find((c) => c.name === d.collection))} />
+						<span className="nm">{d.label}</span>
+						<span className="meta">
+							<span className="mono">{d.url}</span>
+						</span>
+						<Icon name="chev-r" size="sm" />
+					</button>
+				))}
+			</div>
+			<div className="acts">
+				<button type="button" className="btn ink" onClick={() => closeDialog(editor)}>
+					OK
+				</button>
+			</div>
+		</Frame>
+	);
+}