caracms 0.0.0-stage → 0.2.0

package/src/editor/client/shell/App.tsx

@@ -0,0 +1,101 @@
+/**
+ * The editor shell (Decision 2; M2's 4d layout): one left pane, the stage with the
+ * preview, one dark bar along the bottom, server-rendered so the chrome is there at
+ * first paint and hydrated in the browser.
+ *
+ * Keys (M2 → Rules): ⌘K the document switcher; Esc closes a popover, leaves a field,
+ * then goes up a level; ⌘Z (outside a field) undoes (Decision 18).
+ */
+import { useEffect } from 'react';
+import { EditorContext, useStore } from '../context.tsx';
+import type { Editor } from '../editor.ts';
+import { OverlayMount } from '../overlays/OverlayMount.tsx';
+import { Pane } from '../pane/Pane.tsx';
+import { SWITCHER_READY } from '../pane/switcher.tsx';
+import { Bar } from './Bar.tsx';
+import { IconSprite } from './Icons.tsx';
+import { NarrowNote } from './NarrowNote.tsx';
+import { Popovers } from './Popovers.tsx';
+import { SignedOutModal } from '../live/session.tsx';
+import { Stage } from './Stage.tsx';
+import { DocumentDialogs } from '../documents/dialogs.tsx';
+import { Toast } from './Toast.tsx';
+
+const IN_FIELD = 'input,textarea,select,[contenteditable="true"],[contenteditable="plaintext-only"]';
+
+export function EditorApp({ editor }: { editor: Editor }) {
+	useEffect(() => editor.start(), [editor]);
+	useEffect(() => {
+		const onKey = (event: KeyboardEvent) => {
+			const target = event.target as Element | null;
+			const inField = !!target?.closest?.(IN_FIELD);
+			const mod = event.metaKey || event.ctrlKey;
+			if (mod && event.key.toLowerCase() === 'k') {
+				event.preventDefault();
+				const { pop } = editor.view.get();
+				if (SWITCHER_READY) editor.setPop(pop === 'switcher' ? null : 'switcher');
+				else editor.goTo('documents');
+				return;
+			}
+			// ⌘\ hides or shows the sidebar (pre-M7 polish), from anywhere, a field included.
+			if (mod && !event.shiftKey && !event.altKey && (event.key === '\\' || event.code === 'Backslash')) {
+				event.preventDefault();
+				editor.setSideHidden(editor.ui.get().side !== 'hidden');
+				return;
+			}
+			if (mod && !event.shiftKey && event.key.toLowerCase() === 'z' && !inField && editor.doc.get().undo.length > 0) {
+				event.preventDefault();
+				editor.doc.undo();
+				return;
+			}
+			if (event.key === 'Escape') {
+				if (event.defaultPrevented) return;
+				if (editor.view.get().pop) {
+					editor.setPop(null);
+					return;
+				}
+				if (inField) {
+					(target as HTMLElement).blur();
+					return;
+				}
+				editor.goUp();
+			}
+		};
+		window.addEventListener('keydown', onKey);
+		return () => window.removeEventListener('keydown', onKey);
+	}, [editor]);
+
+	const sideHidden = useStore(editor.ui, (u) => u.side === 'hidden');
+	return (
+		<EditorContext.Provider value={editor}>
+			<IconSprite />
+			<div id="app" data-screen="editor">
+				<div className="editor" id="editor" data-side={sideHidden ? 'hidden' : undefined}>
+					<Pane />
+					<Stage />
+					<Bar />
+					<Popovers />
+					<div id="toast-root">
+						<Toast />
+					</div>
+					<div id="modal-root">
+						{editor.mode === 'live' ? <SignedOutModal /> : null}
+						<DocumentDialogs />
+					</div>
+				</div>
+				<NarrowNote />
+			</div>
+			<Live editor={editor} />
+			<OverlayMount />
+		</EditorContext.Provider>
+	);
+}
+
+function Live({ editor }: { editor: Editor }) {
+	const text = useStore(editor.live);
+	return (
+		<div className="sr" id="live" aria-live="polite">
+			{text}
+		</div>
+	);
+}

package/src/editor/client/shell/Bar.tsx

@@ -0,0 +1,197 @@
+/**
+ * The one bar, dark, along the bottom (the mockup's renderBar): the brand slots and
+ * the document switcher's trigger on the left; the width toggle with its scale
+ * under the preview; the keep state on the right. In live mode (M4) the waiting
+ * count with Publish (live/publish.tsx) and the signed-in avatar (live/session.tsx)
+ * follow it, and a locked document's trigger has a lock; in local mode their places
+ * stay empty, as in M3.
+ */
+import { SWITCHER_READY } from '../pane/switcher.tsx';
+import { useEditor, useStore } from '../context.tsx';
+import { TRUE_WIDTH, WIDTHS, WIDTH_LABEL, docId } from '../../types.ts';
+import { PublishButton } from '../live/publish.tsx';
+import { AccountButton } from '../live/session.tsx';
+import { BrandMark, useBrand } from './Brand.tsx';
+import { Icon } from './Icons.tsx';
+import { useFrameScale } from './Stage.tsx';
+
+export function Bar() {
+	const editor = useEditor();
+	const brand = useBrand();
+	const docTitle = useStore(editor.doc.state, (s) => s.document.title || s.entry.label);
+	// M6: the inbox names itself (it has no document of its own).
+	const inInbox = useStore(editor.view, (v) => v.level === 'submissions');
+	const title = inInbox ? 'Submissions' : docTitle;
+	const width = useStore(editor.view, (v) => v.width);
+	const pop = useStore(editor.view, (v) => v.pop);
+	const viewOpening = useStore(editor.view, (v) => v.opening);
+	const renderOpening = useStore(editor.previewStatus, (s) => s.opening);
+	const failed = useStore(editor.previewStatus, (s) => s.failed);
+	const warnings = useStore(editor.previewStatus, (s) => s.warnings);
+	const documents = useStore(editor.documents);
+	const scale = useFrameScale(width);
+	const veil = useStore(editor.access, (a) => a.veil);
+	const sideHidden = useStore(editor.ui, (u) => u.side === 'hidden');
+	const tooLong = warnings.filter((w) => w.tooLong).length;
+	const opening = viewOpening ?? renderOpening;
+	const openingLabel = opening ? (documents.find((d) => docId(d) === docId(opening))?.label ?? opening.path) : null;
+
+	const openSwitcher = () => {
+		if (SWITCHER_READY) editor.setPop(pop === 'switcher' ? null : 'switcher');
+		else editor.goTo('documents');
+	};
+
+	let note = null;
+	if (openingLabel) note = <span className="bar-note">Opening {openingLabel}…</span>;
+	else if (failed)
+		note = (
+			<button
+				type="button"
+				className="bar-warn"
+				aria-haspopup="dialog"
+				aria-expanded={pop === 'preview-trouble'}
+				onClick={() => editor.setPop(pop === 'preview-trouble' ? null : 'preview-trouble')}
+			>
+				<Icon name="warn" size="sm" />
+				Preview not updated
+			</button>
+		);
+
+	return (
+		<footer className="bar" id="bar" aria-label="Editor bar">
+			<div className="bar-l">
+				<span className="logo-slot" title={brand.name}>
+					<BrandMark />
+				</span>
+				<span className="bar-name">{brand.name}</span>
+				<span className="bar-sep" aria-hidden="true" />
+				<button
+					type="button"
+					className="docbtn"
+					aria-haspopup="dialog"
+					aria-expanded={pop === 'switcher'}
+					aria-label={`${title}: go to another document`}
+					onClick={openSwitcher}
+				>
+					{veil ? <Icon name="lock" size="sm" /> : null}
+					<span className="t">{title}</span>
+					<Icon name="chev-u" size="xs" />
+					<kbd>⌘K</kbd>
+				</button>
+				<button
+					type="button"
+					className="ib side-toggle"
+					aria-controls="side"
+					aria-expanded={!sideHidden}
+					aria-keyshortcuts="Meta+Backslash Control+Backslash"
+					aria-label={sideHidden ? 'Show the sidebar' : 'Hide the sidebar'}
+					title={sideHidden ? 'Show the sidebar (⌘\\)' : 'Hide the sidebar (⌘\\)'}
+					onClick={() => editor.setSideHidden(!sideHidden)}
+				>
+					<Icon name="sidebar" />
+				</button>
+			</div>
+			<div className="bar-r">
+				<div className="bar-a">{note}</div>
+				<div className="bar-c">
+					<div className="seg" role="radiogroup" aria-label="Preview width">
+						{WIDTHS.map((w) => (
+							<button key={w} type="button" role="radio" aria-checked={width === w} data-width={w} onClick={() => editor.setWidth(w)}>
+								{WIDTH_LABEL[w]}
+								<span className="w">{TRUE_WIDTH[w]}</span>
+								{w === 'phone' && tooLong > 0 ? (
+									<>
+										<span className="wdot" aria-hidden="true" />
+										<span className="tip" role="tooltip">
+											<b>
+												{tooLong} thing{tooLong > 1 ? 's' : ''}
+											</b>{' '}
+											too long for mobile
+										</span>
+										<span className="sr">
+											, {tooLong} thing{tooLong > 1 ? 's' : ''} too long for mobile
+										</span>
+									</>
+								) : null}
+							</button>
+						))}
+					</div>
+					<span className="scale" title={scale ? `Shown at ${Math.round(scale * 100)}% of its real size` : undefined}>
+						{scale === null ? '' : scale >= 0.995 ? '1×' : `${scale.toFixed(2)}×`}
+					</span>
+				</div>
+				<div className="bar-e">
+					<Keep />
+					{editor.mode === 'live' ? (
+						<>
+							<PublishButton />
+							<AccountButton />
+						</>
+					) : (
+						<>
+							{/* Local mode (M3): the waiting count, Publish and the avatar are live mode's. */}
+							<span data-slot="publish" hidden />
+							<span data-slot="account" hidden />
+						</>
+					)}
+				</div>
+			</div>
+		</footer>
+	);
+}
+
+function Keep() {
+	const editor = useEditor();
+	const state = useStore(editor.keep, (k) => k.state);
+	const error = useStore(editor.keep, (k) => k.error);
+	const unsent = useStore(editor.keep, (k) => k.unsent ?? 0);
+	const signedOut = useStore(editor.liveState, (s) => !!s.signedOut);
+	if (state === 'signedout' || (signedOut && state !== 'offline')) {
+		return (
+			<span className="keep loud" role="status" data-keep="signedout">
+				<Icon name="signout" size="sm" />
+				{unsent > 0 ? 'Not kept: signed out' : 'Signed out'}
+			</span>
+		);
+	}
+	if (state === 'held') {
+		// Live mode: a 409, or another editor's change since. The document's note says why, with Use mine.
+		return (
+			<span className="keep loud" role="status" data-keep="held" title="Your latest changes are held in this browser">
+				<Icon name="warn" size="sm" />
+				Not kept
+			</span>
+		);
+	}
+	if (state === 'keeping') {
+		return (
+			<span className="keep" role="status" data-keep="keeping">
+				<span className="pulse" aria-hidden="true" />
+				Keeping…
+			</span>
+		);
+	}
+	if (state === 'offline') {
+		return (
+			<span className="keep loud" role="status" data-keep="offline" title={error ?? undefined}>
+				<Icon name="offline" size="sm" />
+				Can't reach the server
+			</span>
+		);
+	}
+	if (state === 'refused') {
+		// The server answered and said no (a 4xx): not "can't reach". Its message is in the pane's note.
+		return (
+			<span className="keep loud" role="status" data-keep="refused" title={error ?? undefined}>
+				<Icon name="warn" size="sm" />
+				Not kept
+			</span>
+		);
+	}
+	return (
+		<span className="keep" data-keep="kept">
+			<Icon name="check" size="sm" />
+			Kept
+		</span>
+	);
+}

package/src/editor/client/shell/Brand.tsx

@@ -0,0 +1,33 @@
+/**
+ * The brand's logo slot (M2 → Brand slots), wherever the chrome shows the site's
+ * mark: the bar, the documents level's header and the narrow note.
+ *
+ * A site's logo (Site Settings' `brand.logo`, a signed URL from the server: M5b
+ * Decision 11) fills the slot. A site with
+ * no logo gets its initial on its accent: the accent fills the slot's tile, the
+ * letter is light or dark by contrast and a pale accent gets a darker edge (M2
+ * Decision 5; brand.ts computes both), so any accent stays legible.
+ *
+ * All four slots are Site Settings' (M5a Decision 10): `editor.brand`, which the
+ * live poll keeps current, so a change shows without a reload. `useBrand()` is the
+ * chrome's one way to read them.
+ */
+import { useEditor, useStore } from '../context.tsx';
+import type { EditorBrand } from '../../types.ts';
+
+/** The brand as it applies now (Site Settings' name, accent, logo and icon). */
+export function useBrand(): EditorBrand {
+	const editor = useEditor();
+	return useStore(editor.brand);
+}
+
+export function BrandMark() {
+	const brand = useBrand();
+	if (brand.logo) return <img src={brand.logo} alt="" />;
+	const initial = [...brand.name.trim()][0]?.toLocaleUpperCase() ?? '';
+	return (
+		<span className="logo-mono" aria-hidden="true">
+			{initial}
+		</span>
+	);
+}

package/src/editor/client/shell/Icons.tsx

@@ -0,0 +1,87 @@
+/**
+ * The chrome's icons: the mockup's SVG sprite, lifted as is (notes/mockups/m2-editor.html).
+ * The sprite renders once in the shell; <Icon name="grip" /> uses a symbol from it.
+ * `i-*` are interface icons; `b-*` are block-type icons.
+ */
+const SYMBOLS = [
+	'<symbol id="i-chev-l" viewBox="0 0 16 16"><path d="M10 3 5 8l5 5"/></symbol>',
+	'<symbol id="i-chev-r" viewBox="0 0 16 16"><path d="m6 3 5 5-5 5"/></symbol>',
+	'<symbol id="i-chev-d" viewBox="0 0 16 16"><path d="m3.5 6 4.5 4.5L12.5 6"/></symbol>',
+	'<symbol id="i-chev-u" viewBox="0 0 16 16"><path d="m3.5 10 4.5-4.5 4.5 4.5"/></symbol>',
+	'<symbol id="i-sidebar" viewBox="0 0 16 16"><rect x="2" y="3" width="12" height="10" rx="2"/><path d="M6.5 3v10"/></symbol>',
+	'<symbol id="i-up" viewBox="0 0 16 16"><path d="M8 13V3M4 7l4-4 4 4"/></symbol>',
+	'<symbol id="i-down" viewBox="0 0 16 16"><path d="M8 3v10M4 9l4 4 4-4"/></symbol>',
+	'<symbol id="i-page" viewBox="0 0 16 16"><path d="M4 1.5h5.5L12.5 4.5v10H4z"/><path d="M9.5 1.5v3h3"/></symbol>',
+	'<symbol id="i-folder" viewBox="0 0 16 16"><path d="M1.5 4.2a1 1 0 0 1 1-1h3.4l1.6 1.8h6a1 1 0 0 1 1 1v6.8a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1z"/></symbol>',
+	'<symbol id="i-case" viewBox="0 0 16 16"><rect x="1.5" y="4.5" width="13" height="9" rx="1.5"/><path d="M5.5 4.5v-2h5v2"/></symbol>',
+	'<symbol id="i-journal" viewBox="0 0 16 16"><path d="M3.5 1.5h9v13h-9z"/><path d="M6 5h4.5M6 7.5h4.5M6 10h3"/></symbol>',
+	// M6c (G5): the List / Grid switch, and a clip card's play mark
+	'<symbol id="i-list" viewBox="0 0 16 16"><path d="M5.5 4h8.5M5.5 8h8.5M5.5 12h8.5"/><path d="M2 4h1M2 8h1M2 12h1"/></symbol>',
+	'<symbol id="i-grid" viewBox="0 0 16 16"><rect x="2" y="2" width="5" height="5" rx="1"/><rect x="9" y="2" width="5" height="5" rx="1"/><rect x="2" y="9" width="5" height="5" rx="1"/><rect x="9" y="9" width="5" height="5" rx="1"/></symbol>',
+	'<symbol id="i-play" viewBox="0 0 10 10"><path d="M2 1.2v7.6L8.6 5z"/></symbol>',
+	'<symbol id="i-shared" viewBox="0 0 16 16"><path d="M6.6 9.4a2.9 2.9 0 0 0 4.1 0l2.2-2.2a2.9 2.9 0 0 0-4.1-4.1l-.7.7"/><path d="M9.4 6.6a2.9 2.9 0 0 0-4.1 0L3.1 8.8a2.9 2.9 0 0 0 4.1 4.1l.7-.7"/></symbol>',
+	'<symbol id="i-bolt" viewBox="0 0 16 16"><path d="M9 1.5 3.5 9H8l-1 5.5L12.5 7H8z"/></symbol>',
+	'<symbol id="i-gear" viewBox="0 0 16 16"><circle cx="8" cy="8" r="2.3"/><path d="M8 1.5v1.8M8 12.7v1.8M1.5 8h1.8M12.7 8h1.8M3.4 3.4l1.3 1.3M11.3 11.3l1.3 1.3M3.4 12.6l1.3-1.3M11.3 4.7l1.3-1.3"/></symbol>',
+	'<symbol id="i-lock" viewBox="0 0 16 16"><rect x="3" y="7" width="10" height="7.5" rx="1.5"/><path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2"/></symbol>',
+	'<symbol id="i-check" viewBox="0 0 16 16"><path d="m3 8.5 3.2 3L13 4.5"/></symbol>',
+	'<symbol id="i-warn" viewBox="0 0 16 16"><path d="M8 2 14.8 13.6H1.2z"/><path d="M8 6.3v3.4M8 11.6v.1"/></symbol>',
+	'<symbol id="i-x" viewBox="0 0 16 16"><path d="m4 4 8 8M12 4l-8 8"/></symbol>',
+	'<symbol id="i-plus" viewBox="0 0 16 16"><path d="M8 3v10M3 8h10"/></symbol>',
+	'<symbol id="i-grip" viewBox="0 0 16 16"><g fill="currentColor" stroke="none"><circle cx="6" cy="4" r="1.1"/><circle cx="10" cy="4" r="1.1"/><circle cx="6" cy="8" r="1.1"/><circle cx="10" cy="8" r="1.1"/><circle cx="6" cy="12" r="1.1"/><circle cx="10" cy="12" r="1.1"/></g></symbol>',
+	'<symbol id="i-more" viewBox="0 0 16 16"><g fill="currentColor" stroke="none"><circle cx="3.5" cy="8" r="1.2"/><circle cx="8" cy="8" r="1.2"/><circle cx="12.5" cy="8" r="1.2"/></g></symbol>',
+	'<symbol id="i-search" viewBox="0 0 16 16"><circle cx="7" cy="7" r="4.5"/><path d="m10.4 10.4 3.6 3.6"/></symbol>',
+	'<symbol id="i-phone" viewBox="0 0 16 16"><rect x="4.5" y="1.5" width="7" height="13" rx="1.6"/><path d="M7 12.3h2"/></symbol>',
+	'<symbol id="i-image" viewBox="0 0 16 16"><rect x="1.5" y="2.5" width="13" height="11" rx="1.5"/><circle cx="5.5" cy="6" r="1.2"/><path d="m2 12 3.8-3.8 3 3 2-2 3.6 3.6"/></symbol>',
+	'<symbol id="i-clock" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6.3"/><path d="M8 4.6V8l2.4 1.5"/></symbol>',
+	'<symbol id="i-undo" viewBox="0 0 16 16"><path d="M5 3 2 6l3 3"/><path d="M2 6h7.5a4 4 0 0 1 0 8H7"/></symbol>',
+	'<symbol id="i-ext" viewBox="0 0 16 16"><path d="M9 2.5h4.5V7M13.5 2.5 7.5 8.5M11.5 9.5v4h-9v-9h4"/></symbol>',
+	'<symbol id="i-trash" viewBox="0 0 16 16"><path d="M2.5 4h11M6 4V2.5h4V4M4 4l.7 10h6.6L12 4"/></symbol>',
+	'<symbol id="i-offline" viewBox="0 0 16 16"><path d="M4.4 12.5h7.1a3 3 0 0 0 .5-6 4.4 4.4 0 0 0-8.1-.9A3.4 3.4 0 0 0 4.4 12.5z"/><path d="m2 2 12 12"/></symbol>',
+	'<symbol id="i-target" viewBox="0 0 16 16"><circle cx="8" cy="8" r="5.5"/><circle cx="8" cy="8" r="1.6" fill="currentColor"/></symbol>',
+	'<symbol id="i-history" viewBox="0 0 16 16"><path d="M2.5 8a5.5 5.5 0 1 0 1.6-3.9L2.5 5.7"/><path d="M2.5 2.5v3.2h3.2M8 5v3l2 1.3"/></symbol>',
+	'<symbol id="i-signout" viewBox="0 0 16 16"><path d="M6 2.5H3v11h3M10 5l3 3-3 3M13 8H6"/></symbol>',
+	// Pre-M7 item 8: Change address…, and a redirect's "from → to".
+	'<symbol id="i-arrow-r" viewBox="0 0 16 16"><path d="M2.5 8h11M9.5 4l4 4-4 4"/></symbol>',
+	'<symbol id="i-copy" viewBox="0 0 16 16"><rect x="5.5" y="5.5" width="8" height="8" rx="1.5"/><path d="M10.5 5.5v-2a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2"/></symbol>',
+	'<symbol id="i-upload" viewBox="0 0 16 16"><path d="M8 10.5V2.5M4.8 5.7 8 2.5l3.2 3.2"/><path d="M2.5 10v2.5a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V10"/></symbol>',
+	'<symbol id="i-film" viewBox="0 0 16 16"><rect x="1.5" y="3" width="13" height="10" rx="1.5"/><path d="M6.5 6v4l3.5-2z"/></symbol>',
+	'<symbol id="i-media" viewBox="0 0 16 16"><rect x="4.5" y="1.5" width="10" height="9" rx="1.2"/><path d="M11.5 13.5h-9a1 1 0 0 1-1-1v-7"/><path d="m5 10 3-3 2.2 2.2 1.3-1.3 3 3"/></symbol>',
+	'<symbol id="i-mail" viewBox="0 0 16 16"><rect x="1.5" y="3.5" width="13" height="9" rx="1.5"/><path d="m2 4.5 6 4.5 6-4.5"/></symbol>',
+	// M6: the inbox
+	'<symbol id="i-inbox" viewBox="0 0 16 16"><path d="M1.5 9.5 3.6 3a1 1 0 0 1 .95-.7h6.9a1 1 0 0 1 .95.7l2.1 6.5v3.2a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1z"/><path d="M1.5 9.5h3.7l1 1.7h3.6l1-1.7h3.7"/></symbol>',
+	'<symbol id="i-download" viewBox="0 0 16 16"><path d="M8 2.5v8M4.8 7.3 8 10.5l3.2-3.2"/><path d="M2.5 10v2.5a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V10"/></symbol>',
+	'<symbol id="i-reply" viewBox="0 0 16 16"><path d="M6.5 3.5 2.5 7.5l4 4"/><path d="M2.5 7.5h6.8a4.2 4.2 0 0 1 4.2 4.2v.8"/></symbol>',
+	'<symbol id="i-attach" viewBox="0 0 16 16"><path d="m13.2 7.6-5.5 5.5a3.2 3.2 0 0 1-4.6-4.6l5.8-5.8a2.1 2.1 0 0 1 3 3l-5.6 5.6a1 1 0 0 1-1.5-1.5l5.1-5.1"/></symbol>',
+	'<symbol id="i-unread" viewBox="0 0 16 16"><path d="M14.5 8.5v3.5a1.5 1.5 0 0 1-1.5 1.5H3A1.5 1.5 0 0 1 1.5 12V5A1.5 1.5 0 0 1 3 3.5h6"/><path d="m2 4.5 6 4.5 2.4-1.8"/><circle cx="13" cy="4" r="1.8" fill="currentColor" stroke="none"/></symbol>',
+	'<symbol id="b-hero" viewBox="0 0 16 16"><rect x="1.5" y="2.5" width="13" height="11" rx="1"/><path d="M4 6.5h6.5M4 9h4"/></symbol>',
+	'<symbol id="b-head" viewBox="0 0 16 16"><path d="M2.5 4h9M2.5 7h7M2.5 11h11M2.5 13.5h8"/></symbol>',
+	'<symbol id="b-tm" viewBox="0 0 16 16"><rect x="1.5" y="3.5" width="6" height="9" rx="1"/><path d="M9.5 5.5h5M9.5 8h5M9.5 10.5h3"/></symbol>',
+	'<symbol id="b-cases" viewBox="0 0 16 16"><rect x="1.5" y="2.5" width="5.5" height="5" rx="1"/><rect x="9" y="2.5" width="5.5" height="5" rx="1"/><rect x="1.5" y="9.5" width="5.5" height="4" rx="1"/><rect x="9" y="9.5" width="5.5" height="4" rx="1"/></symbol>',
+	'<symbol id="b-cta" viewBox="0 0 16 16"><rect x="1.5" y="3" width="13" height="10" rx="1"/><rect x="5" y="8.8" width="6" height="2.2" rx="1.1"/><path d="M4.5 6h7"/></symbol>',
+	'<symbol id="b-footer" viewBox="0 0 16 16"><rect x="1.5" y="2.5" width="13" height="11" rx="1"/><path d="M1.5 9.5h13M4 11.5h3"/></symbol>',
+	'<symbol id="b-team" viewBox="0 0 16 16"><circle cx="5" cy="6" r="2"/><circle cx="11" cy="6" r="2"/><path d="M1.5 13a3.5 3.5 0 0 1 7 0M7.5 13a3.5 3.5 0 0 1 7 0"/></symbol>',
+	'<symbol id="b-quote" viewBox="0 0 16 16"><path d="M3 10.5c0-3 1-5 3.5-6M9 10.5c0-3 1-5 3.5-6"/><path d="M3 10.5h2.5v2.5H3zM9 10.5h2.5v2.5H9z"/></symbol>',
+	'<symbol id="b-gallery" viewBox="0 0 16 16"><rect x="1.5" y="2.5" width="8" height="11" rx="1"/><rect x="11" y="2.5" width="3.5" height="5" rx="1"/><rect x="11" y="8.5" width="3.5" height="5" rx="1"/></symbol>',
+	'<symbol id="b-video" viewBox="0 0 16 16"><rect x="1.5" y="3" width="13" height="10" rx="1.5"/><path d="M6.5 6v4l3.5-2z"/></symbol>',
+	'<symbol id="b-form" viewBox="0 0 16 16"><rect x="2" y="2.5" width="12" height="3" rx="1"/><rect x="2" y="7" width="12" height="3" rx="1"/><rect x="2" y="11.5" width="5" height="2.5" rx="1"/></symbol>',
+	'<symbol id="b-faq" viewBox="0 0 16 16"><path d="M2.5 4h11M2.5 8h11M2.5 12h11"/><path d="m11 3 1.2 1.1L11 5.2"/></symbol>',
+	'<symbol id="b-unknown" viewBox="0 0 16 16"><rect x="1.5" y="2.5" width="13" height="11" rx="1" stroke-dasharray="2 1.8"/><path d="M6.6 6.7a1.5 1.5 0 1 1 2 1.4c-.4.2-.6.5-.6.9v.2M8 10.9v.1"/></symbol>',
+].join('');
+
+export function IconSprite() {
+	return (
+		<svg width="0" height="0" style={{ position: 'absolute' }} aria-hidden="true">
+			<defs dangerouslySetInnerHTML={{ __html: SYMBOLS }} />
+		</svg>
+	);
+}
+
+/** `name` without the `i-` prefix for interface icons (`grip`, `chev-r`), with `b-` for block icons. */
+export function Icon({ name, size }: { name: string; size?: 'sm' | 'xs' }) {
+	const href = `#${name.startsWith('b-') ? name : `i-${name}`}`;
+	return (
+		<svg className={size ? `i i-${size}` : 'i'} aria-hidden="true">
+			<use href={href} />
+		</svg>
+	);
+}

package/src/editor/client/shell/NarrowNote.tsx

@@ -0,0 +1,47 @@
+/**
+ * Below 1024 wide, the editor asks to be opened on a bigger screen (M2 Decision 8;
+ * the mockup's #narrow). Shown by a container query (editor.css), so it's right at
+ * first paint.
+ */
+import { useState } from 'react';
+import { useEditor } from '../context.tsx';
+import { BrandMark, useBrand } from './Brand.tsx';
+import { Icon } from './Icons.tsx';
+
+export function NarrowNote() {
+	const editor = useEditor();
+	const { host } = editor.site;
+	const brand = useBrand();
+	const address = `${host}/admin`;
+	const [copied, setCopied] = useState(false);
+	return (
+		<div className="screen narrow" id="narrow" aria-label="Open the editor on a larger screen">
+			<div className="nw">
+				<div className="nw-in">
+					<div className="nw-brand">
+						<span className="si-logo">
+							<BrandMark />
+						</span>
+						{brand.name}
+					</div>
+					<h1>Open the editor on a bigger screen</h1>
+					<p>The editor needs a window at least 1,024 pixels wide.</p>
+					<p>On a laptop or desktop, go to:</p>
+					<div className="addr">
+						<span>{address}</span>
+						<button
+							type="button"
+							className="btn sm"
+							onClick={() => {
+								void navigator.clipboard?.writeText(`${location.protocol}//${address}`).then(() => setCopied(true));
+							}}
+						>
+							<Icon name={copied ? 'check' : 'copy'} size="sm" />
+							{copied ? 'Copied' : 'Copy'}
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

package/src/editor/client/shell/Popovers.tsx

@@ -0,0 +1,47 @@
+/**
+ * Popovers that open upward from the bar. Phase 2's: preview trouble (M2: "a render
+ * that failed keeps the last good preview and says the latest change couldn't be
+ * shown"). The switcher is Phase 4's (pane/switcher.tsx).
+ */
+import { useEditor, useStore } from '../context.tsx';
+import { Switcher } from '../pane/switcher.tsx';
+import { HistoryPop, WaitingPop } from '../live/publish.tsx';
+import { AccountPop } from '../live/session.tsx';
+
+export function Popovers() {
+	const editor = useEditor();
+	const pop = useStore(editor.view, (v) => v.pop);
+	const failed = useStore(editor.previewStatus, (s) => s.failed);
+	return (
+		<div id="pops">
+			{pop === 'switcher' ? <Switcher /> : null}
+			{/* Live mode (M4): Publish's summary, its history, the account. */}
+			{editor.mode === 'live' && pop === 'waiting' ? <WaitingPop /> : null}
+			{editor.mode === 'live' && pop === 'history' ? <HistoryPop /> : null}
+			{editor.mode === 'live' && pop === 'account' ? <AccountPop /> : null}
+			{pop === 'preview-trouble' && failed ? (
+				<div className="pop" role="dialog" aria-label="Preview not updated" style={{ left: 'calc(var(--side-col) + 12px)', width: 360 }}>
+					<div className="pop-h">
+						<div>
+							<h2>The latest change couldn't be shown</h2>
+							<p className="sub">Your change is kept.</p>
+						</div>
+					</div>
+					<div className="pop-f">
+						<span className="sp" />
+						<button
+							type="button"
+							className="btn ink"
+							onClick={() => {
+								editor.setPop(null);
+								editor.preview?.retry();
+							}}
+						>
+							Try again
+						</button>
+					</div>
+				</div>
+			) : null}
+		</div>
+	);
+}

package/src/editor/client/shell/Stage.tsx

@@ -0,0 +1,132 @@
+/**
+ * The stage: three iframes of the preview route at 1440, 768 and 375, one shown,
+ * the other two laid out behind it (`inert`, opacity 0; never display: none,
+ * Decision 13 and M2 Decision 4). Each at its true width, scaled to fit (layout.ts).
+ *
+ * No flicker (M2 Decision 9): the server renders the iframes, so they start
+ * loading before the editor hydrates; until the first preview has painted the stage
+ * is a still surface (`unpainted`), then it fades in once (`painting`). The width
+ * switch crossfades. Another document's preview swaps in by morph (driver.ts), so
+ * the old one stays on screen until the new one is there.
+ */
+import { useEffect, useRef, useState } from 'react';
+import { useEditor, useStore } from '../context.tsx';
+import { previewSrc } from '../preview/driver.ts';
+import { stageLayout } from '../preview/layout.ts';
+import { TRUE_WIDTH, WIDTHS, WIDTH_LABEL, type Width } from '../../types.ts';
+import { Icon } from './Icons.tsx';
+import { LibraryStage } from '../media/LibraryStage.tsx';
+import { InboxStage } from '../inbox/InboxStage.tsx';
+import { CollectionTable, useTableCollection } from '../collections/CollectionTable.tsx';
+
+export function useFrameScale(width: Width): number | null {
+	const editor = useEditor();
+	return useStore(editor.stageLayout, (layout) => (layout ? layout[width].scale : null));
+}
+
+export function Stage() {
+	const editor = useEditor();
+	const width = useStore(editor.view, (v) => v.width);
+	const painted = useStore(editor.previewStatus, (s) => s.painted);
+	const layout = useStore(editor.stageLayout);
+	// The iframes' first load renders the file of the document opened with the page; later
+	// documents are morphed in, so the src never changes (a change would reload the frame).
+	// Site Settings has no page of its own (M5a): opened first, the stage shows Home's.
+	const [src] = useState(() => previewSrc(editor.previewStatus.get().showing));
+	// While Site Settings is open the last page stays, dimmed, with a way back (the mockup's #settings).
+	const settingsAside = useStore(editor.doc.state, (s) => s.document.kind === 'settings');
+	// M5b: the library (browsing, not a slot's picker) has no page of its own either: the last page, dimmed, is its drop target.
+	const library = useStore(editor.view, (v) => v.level === 'media' && !v.media?.pick);
+	// M6: the inbox has no page either: the last page, dimmed, with a submission's sheet over it.
+	const inbox = useStore(editor.view, (v) => v.level === 'submissions');
+	// Pre-M7 polish: a flat collection's level shows its documents as a table, full width, in place of the preview.
+	const tableOf = useTableCollection();
+	const table = !!tableOf;
+	const aside = !table && (settingsAside || library || inbox);
+	const showing = useStore(editor.previewStatus, (s) => s.showing);
+	const documents = useStore(editor.documents);
+	const back = documents.find((d) => d.collection === showing.collection && d.path === showing.path);
+	const backLabel = back?.label ?? 'Home';
+	const stage = useRef<HTMLElement>(null);
+	const iframes = useRef<Partial<Record<Width, HTMLIFrameElement | null>>>({});
+	const [fading, setFading] = useState(false);
+
+	useEffect(() => {
+		const el = stage.current;
+		if (!el) return;
+		const measure = () => {
+			if (el.clientWidth > 0 && el.clientHeight > 0) editor.stageLayout.set(stageLayout(el.clientWidth, el.clientHeight));
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [editor]);
+
+	useEffect(() => {
+		const { desktop, tablet, phone } = iframes.current;
+		if (!editor.preview || !desktop || !tablet || !phone) return;
+		return editor.preview.attach({ desktop, tablet, phone });
+	}, [editor]);
+
+	useEffect(() => {
+		if (!painted) return;
+		setFading(true);
+		const timer = setTimeout(() => setFading(false), 400);
+		return () => clearTimeout(timer);
+	}, [painted]);
+
+	const className = ['stage', !painted && 'unpainted', fading && 'painting', aside && 'is-aside', table && 'is-table'].filter(Boolean).join(' ');
+	return (
+		<main ref={stage} className={className} id="stage" aria-label="Preview of the page" data-painted={painted ? 'true' : 'false'}>
+			{/* Before the frames, as the mockup's: over the held page while a document has none of its own (Site Settings). */}
+			<div className="stage-aside" id="stage-aside" inert={!aside} data-stage-aside={aside ? '' : undefined}>
+				{inbox ? (
+					<InboxStage back={backLabel} onBack={() => void editor.openDocument(showing)} />
+				) : library ? (
+					<LibraryStage back={backLabel} onBack={() => void editor.openDocument(showing)} />
+				) : aside ? (
+					<div className="in">
+						<Icon name="gear" />
+						<h2>Site Settings has no page of its own</h2>
+						<button type="button" className="btn" data-act="back-to-page" onClick={() => void editor.openDocument(showing)}>
+							<Icon name="chev-l" size="sm" />
+							Back to {backLabel}
+						</button>
+					</div>
+				) : null}
+			</div>
+			<div className="stage-table" inert={!table} data-stage-table={table ? '' : undefined}>
+				{tableOf ? <CollectionTable collection={tableOf} /> : null}
+			</div>
+			{WIDTHS.map((w) => {
+				const box = layout?.[w];
+				const on = w === width;
+				return (
+					<div
+						key={w}
+						className={`frame${on ? ' on' : ''}${w !== 'desktop' ? ' boxed' : ''}`}
+						data-w={w}
+						inert={!on}
+						style={box ? { left: box.left, top: box.top, width: box.width, height: box.height } : undefined}
+					>
+						<iframe
+							inert={aside || table || undefined}
+							ref={(el) => {
+								iframes.current[w] = el;
+							}}
+							src={src}
+							title={`Preview at ${WIDTH_LABEL[w]} width, ${TRUE_WIDTH[w]} pixels`}
+							data-width={TRUE_WIDTH[w]}
+							style={{
+								width: `${TRUE_WIDTH[w]}px`,
+								height: `${box ? box.iframeHeight : 900}px`,
+								transform: box ? `scale(${box.scale})` : undefined,
+							}}
+						/>
+					</div>
+				);
+			})}
+		</main>
+	);
+}