diff --git a/components/board/BoardArrows.tsx b/components/board/BoardArrows.tsx
new file mode 100644
index 00000000..f638de4d
--- /dev/null
+++ b/components/board/BoardArrows.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import { useMemo } from "react";
+import { BoardArrowData, BoardCardData } from "@src/lib/project/project-state";
+import styles from "./BoardCanvas.module.css";
+import { buildArrowPath, buildConnectingPath, Point } from "./board-geometry";
+
+type BoardArrowsProps = {
+    cards: BoardCardData[];
+    arrows: BoardArrowData[];
+    /** The cut tool is armed: widen the hitboxes and let clicks sever links. */
+    cutMode: boolean;
+    /** Card a link is currently being dragged out of, and where the pointer is. */
+    connectingFromCardId: string | null;
+    connectingLine: Point | null;
+    onArrowContextMenu: (e: React.MouseEvent, arrow: BoardArrowData) => void;
+    onCutArrow: (id: string) => void;
+};
+
+/** The links between cards, drawn under them. */
+const BoardArrows = ({
+    cards,
+    arrows,
+    cutMode,
+    connectingFromCardId,
+    connectingLine,
+    onArrowContextMenu,
+    onCutArrow,
+}: BoardArrowsProps) => {
+    const cardsById = useMemo(() => new Map(cards.map((c) => [c.id, c])), [cards]);
+    const connectingFromCard = connectingFromCardId ? cardsById.get(connectingFromCardId) : null;
+
+    return (
+        <svg className={styles.arrows_svg}>
+            {arrows.map((arrow) => {
+                const fromCard = cardsById.get(arrow.fromCardId);
+                const toCard = cardsById.get(arrow.toCardId);
+                if (!fromCard || !toCard) return null;
+
+                const { pathD, arrowheadD } = buildArrowPath(fromCard, toCard);
+
+                return (
+                    <g
+                        key={arrow.id}
+                        className={`${styles.arrow_group} ${cutMode ? styles.arrow_group_cut : ""}`}
+                    >
+                        {/* Invisible hitbox for easier clicking. Also what the cut
+                            tool hit-tests against, hence the id (see cutArrowAt). */}
+                        <path
+                            className={styles.arrow_hitbox}
+                            data-arrow-id={arrow.id}
+                            d={pathD}
+                            fill="none"
+                            onContextMenu={(e) => onArrowContextMenu(e, arrow)}
+                            // Trackpad/mouse counterpart of the slash — an iPad
+                            // reports a coarse pointer with a Magic Keyboard
+                            // attached, so the tool has to answer to both.
+                            onMouseDown={
+                                cutMode
+                                    ? (e) => {
+                                          e.stopPropagation();
+                                          onCutArrow(arrow.id);
+                                      }
+                                    : undefined
+                            }
+                        />
+                        <path
+                            className={styles.arrow_line}
+                            d={pathD}
+                            fill="none"
+                            stroke="var(--secondary-text)"
+                            strokeWidth={2.5}
+                        />
+                        <path
+                            className={styles.arrow_head}
+                            d={arrowheadD}
+                            fill="var(--secondary-text)"
+                        />
+                    </g>
+                );
+            })}
+
+            {/* Pending link, following the pointer */}
+            {connectingFromCard && connectingLine && (
+                <path
+                    className={styles.arrow_line_connecting}
+                    d={buildConnectingPath(connectingFromCard, connectingLine)}
+                    fill="none"
+                    stroke="var(--secondary-text)"
+                    strokeWidth={2.5}
+                    strokeDasharray="8,4"
+                />
+            )}
+        </svg>
+    );
+};
+
+export default BoardArrows;
diff --git a/components/board/BoardCanvas.module.css b/components/board/BoardCanvas.module.css
index fa847513..f89dcd47 100644
--- a/components/board/BoardCanvas.module.css
+++ b/components/board/BoardCanvas.module.css
@@ -400,6 +400,76 @@
     opacity: 1;
 }
 
+/* ── Resize tool armed ──────────────────────────────────────────────────────
+   The corner stops being a mark you have to know about and becomes a button: an
+   88px round chip straddling the card's bottom-right corner, in the same surface
+   as the toolbar pill that armed it, wearing the same corner glyph the card
+   carries at rest, just scaled up.
+
+   Centred *on* the corner rather than tucked inside it. Half the button hanging
+   past the card is what makes it read as a grip on that corner rather than as
+   decoration in it, it keeps the card's own content clear, and it doubles the
+   room around the corner a finger can land in. Everything here is deliberately
+   larger than the rest of the board's chrome: at rest this is an 8px chevron a
+   mouse hovers into, and even at the invisible 40px box it grows to on a finger,
+   resizing on a tablet means aiming at something you cannot see. */
+.resize_mode .card {
+    /* Image and audio cards clip their content, which would cut the grip in half.
+       Safe to lift for the duration: the image is object-fit:contain at 100% and
+       cannot spill, and the audio row clips itself (.audio_content). */
+    overflow: visible;
+}
+
+.resize_mode .card_resize_handle {
+    opacity: 1;
+    width: 112px;
+    height: 112px;
+    /* Half the box past each edge, so its centre lands on the card's corner. */
+    bottom: -56px;
+    right: -56px;
+}
+
+/* The chip. On ::before so it paints under ::after, which draws the glyph — the
+   two pseudo-elements stack in that order on their own, no z-index needed.
+
+   Wears the same surface as the toolbar pill it was armed from (--secondary over
+   --separator), which is also what carries it across themes. The card underneath
+   is a colour of the user's choosing, so the chip has to be its own opaque
+   surface rather than tinting with what it sits on. */
+.resize_mode .card_resize_handle::before {
+    content: "";
+    position: absolute;
+    inset: 12px;
+    border-radius: 50%;
+    background: var(--secondary);
+    border: 1.5px solid var(--separator);
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+}
+
+/* The corner glyph, at twice its resting size and in --primary-text so it reads
+   at full contrast on that surface (the resting mark is --secondary-text, which
+   is the right weight for something meant to stay quiet, and the wrong one here).
+   Offset 46px rather than the 40px that would centre its box: the two strokes sit
+   along the box's bottom and right edges, so the L's centre of mass is ~10px
+   nearer the corner than the box's own centre, and the box has to sit that much
+   further out for the mark to look centred in the circle. */
+.resize_mode .card_resize_handle::after {
+    bottom: 46px;
+    right: 46px;
+    width: 32px;
+    height: 32px;
+    border-right: 5px solid var(--primary-text);
+    border-bottom: 5px solid var(--primary-text);
+    border-bottom-right-radius: 6px;
+}
+
+/* The connect node is only in the way while resizing, and its own 40px box would
+   eat touches meant for the grip on a small card. */
+.resize_mode .connection_handle {
+    opacity: 0;
+    pointer-events: none;
+}
+
 /* Color picker - horizontal bar below header */
 .color_picker {
     display: flex;
@@ -551,6 +621,121 @@
     color: var(--secondary-text);
 }
 
+/* Link / cut tools, the third pill in the toolbar row. Rendered on a coarse
+   pointer only (see BoardCanvas.tsx), so unlike the zoom pill this is sized for a
+   finger from the start rather than growing into it in a media query.
+
+   Anchored here for the phone, where pinch replaces the zoom buttons and this
+   takes the slot they would have had — 4px right of the panel-switcher handles
+   (28px each + a 4px gap from left:8 = 68px). The tablet block below moves it
+   right of the zoom pill instead. */
+.tool_controls {
+    position: absolute;
+    top: 8px;
+    left: 72px;
+    z-index: 11;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    height: 44px;
+    padding: 0 4px;
+    border-radius: 22px;
+    background-color: var(--secondary);
+    color: var(--secondary-text);
+    user-select: none;
+}
+
+.tool_btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border: none;
+    border-radius: 18px;
+    background: transparent;
+    color: var(--secondary-text);
+    cursor: pointer;
+    transition:
+        background-color 0.15s ease,
+        color 0.15s ease;
+}
+
+/* Armed. Matches the panel menu's active row (PanelMenu.module.css) rather than the
+   accent colour, so a held-down tool reads as the same kind of state as every
+   other toggle in the app. */
+.tool_btn_active {
+    background-color: var(--secondary-hover);
+    color: var(--primary-text);
+}
+
+/* ── Toolbar row geometry on a finger ───────────────────────────────────────
+   Everything above is anchored off the desktop panel-switcher handles: 20x36
+   each, so two of them plus a 4px gap from left:8 end at 52px. On a coarse
+   pointer those handles grow to 28x44 (SplitPanelContainer.module.css), which
+   pushes their right edge to 68px — over the top of the zoom pill's left:56px
+   anchor — and leaves every pill in the row 8px shorter than they are.
+
+   So re-derive the row from the touch sizes. Kept below the rules it overrides,
+   since a media query adds no specificity and source order is all that separates
+   them. */
+@media (pointer: coarse) {
+    /* Onto a second row, rather than further along the first: the tools pill
+       already runs to 192px on a phone and to 306px on a tablet, and a fourth
+       pill after that would hang off the right edge of a narrow split panel.
+       60px clears the 44px row above by 8px. */
+    .recording_indicator {
+        top: 60px;
+        left: 72px;
+        height: 44px;
+        border-radius: 22px;
+    }
+}
+
+@media (pointer: coarse) and (min-width: 768px) {
+    /* 4px right of the handles' new 68px edge, and squared off against them. */
+    .zoom_controls {
+        left: 72px;
+        height: 44px;
+        border-radius: 22px;
+    }
+
+    /* Grown with the pill, so the buttons stay finger-sized inside it rather
+       than floating in 8px of new dead space. */
+    .zoom_btn {
+        width: 30px;
+        height: 36px;
+        border-radius: 18px;
+    }
+
+    /* Right of the zoom pill, on the same 4px gap: the pill runs 72 → 182
+       (4 + 30 + 2 + 38 + 2 + 30 + 4). */
+    .tool_controls {
+        left: 186px;
+    }
+}
+
+/* The armed tool's instruction, along the bottom edge — the far side of the
+   board from the toolbar row that armed it, and a corner nothing else claims
+   (the editor's floating bottom bar doesn't render over a board at all, see
+   EditorBottomBar). */
+.tool_hint {
+    position: absolute;
+    bottom: calc(8px + var(--safe-bottom));
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 11;
+    max-width: 80%;
+    padding: 8px 14px;
+    border-radius: 16px;
+    background-color: var(--secondary);
+    color: var(--secondary-text);
+    font-size: 13px;
+    text-align: center;
+    pointer-events: none;
+    user-select: none;
+}
+
 /* Arrows SVG layer */
 .arrows_svg {
     position: absolute;
@@ -591,6 +776,23 @@
     pointer-events: none;
 }
 
+/* Cut tool armed: every link turns red and grows a far fatter hitbox. The stroke
+   is in canvas units, so it shrinks with the zoom just as the line does — 36
+   holds a fingertip down to roughly 50% zoom, and the tool is a tap *or* a slash
+   precisely because a stroke crosses links a tap has to be aimed at. */
+.arrow_group_cut .arrow_line {
+    stroke: var(--error);
+}
+
+.arrow_group_cut .arrow_head {
+    fill: var(--error);
+}
+
+.arrow_group_cut .arrow_hitbox {
+    stroke-width: 36;
+    cursor: crosshair;
+}
+
 /* Single connection handle on cards */
 .connection_handle {
     position: absolute;
@@ -642,6 +844,15 @@
         0 4px 16px rgba(0, 0, 0, 0.2);
 }
 
+/* Link tool: the card tapped first, held until its target is picked. A ring
+   rather than the selection highlight, so a card that is both selected and the
+   pending link end still reads as the link end. */
+.card_link_source {
+    box-shadow:
+        0 0 0 3px var(--primary-hover),
+        0 4px 16px rgba(0, 0, 0, 0.2);
+}
+
 /* Selection rectangle */
 .selection_rect {
     position: absolute;
diff --git a/components/board/BoardCanvas.tsx b/components/board/BoardCanvas.tsx
index bb00850f..54a28050 100644
--- a/components/board/BoardCanvas.tsx
+++ b/components/board/BoardCanvas.tsx
@@ -1,211 +1,152 @@
 "use client";
 
-import { useContext, useRef, useState, useCallback, useEffect, useMemo } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { ProjectContext } from "@src/context/ProjectContext";
-import { UserContext } from "@src/context/UserContext";
-import { BoardCardData, BoardArrowData, TimelineLayer } from "@src/lib/project/project-state";
+import { BoardCardData } from "@src/lib/project/project-state";
+import { useIsPhone, useIsTouch } from "@src/lib/utils/hooks";
+import BoardArrows from "./BoardArrows";
 import BoardCard from "./BoardCard";
 import {
-    ContextMenuItem,
-    ContextMenuSeparator,
-    ContextMenuColorRow,
-    ContextMenuSubmenu,
-} from "@components/utils/ContextMenu";
+    BoardToolControls,
+    BoardToolHint,
+    BoardZoomControls,
+    RecordingIndicator,
+} from "./BoardOverlays";
 import styles from "./BoardCanvas.module.css";
-import { v7 as uuidv7 } from "uuid";
-import { Trash2, Plus, Minus, Copy, ListTree, Layers, Mic, Square, Image as ImageIcon } from "lucide-react";
-import { useTranslations } from "next-intl";
-import { DEFAULT_ITEM_COLORS } from "@src/lib/utils/colors";
-import { importImageFile, importAudioFile, syncAssetToCloud } from "@src/lib/assets/asset-store";
-import { CloudQuotaError } from "@src/lib/assets/cloud-asset-sync";
-import { scheduleAssetGc } from "@src/lib/assets/asset-gc";
-import { useIsPhone, useIsTouch } from "@src/lib/utils/hooks";
-import { useAudioRecorder } from "./use-audio-recorder";
+import { BoardTool, GRID_SIZE } from "./board-constants";
+import { useBoardMenus } from "./board-menus";
+import { useBoardAssets } from "./use-board-assets";
+import { useBoardCamera } from "./use-board-camera";
+import { useBoardCardActions } from "./use-board-card-actions";
+import { useBoardConnections } from "./use-board-connections";
+import { useBoardDocument } from "./use-board-document";
+import { useBoardSelection } from "./use-board-selection";
+import { useBoardTouch } from "./use-board-touch";
+
+/** Delay before framing the board on load, to let the container lay out first. */
+const INITIAL_FRAME_DELAY = 50;
 
-const GRID_SIZE = 20;
-const MIN_SCALE = 0.25;
-const MAX_SCALE = 2;
 /**
- * Tile size (screen px) the grid's `background-size` is rounded to. Changing
- * background-size is a paint op, so a continuous pinch would otherwise repaint
- * a full-viewport gradient every frame; snapping to 4px steps means a full
- * MIN_SCALE→MAX_SCALE sweep repaints under a dozen times total instead of once
- * per frame, with no visible difference in dot spacing.
+ * The corkboard: a pannable, zoomable canvas of cards linked by arrows.
+ *
+ * Everything with state of its own lives in a hook beside this file — the
+ * camera, the Yjs-backed card/arrow document, selection, card actions, media
+ * imports, links, touch gestures, menus — and this component wires them
+ * together and lays them out.
  */
-const GRID_TILE_QUANTUM = 4;
-/** Largest edge (in canvas px) an image card is sized to on first drop. */
-const MAX_IMAGE_CARD_SIZE = 400;
-/** Default size (in canvas px) of an audio voice-note card. */
-const AUDIO_CARD_WIDTH = 260;
-const AUDIO_CARD_HEIGHT = 96;
-
-/** A random swatch from the default palette (used for new colored cards). */
-function randomCardColor(): string {
-    return DEFAULT_ITEM_COLORS[Math.floor(Math.random() * DEFAULT_ITEM_COLORS.length)];
-}
-
-/** Seconds → `m:ss` for the recording indicator. */
-function formatRecordingTime(seconds: number): string {
-    const m = Math.floor(seconds / 60);
-    const s = seconds % 60;
-    return `${m}:${s.toString().padStart(2, "0")}`;
-}
-
-const BoardCanvas =({ isVisible, docId }: { isVisible: boolean; docId: string }) => {
-    const { projectId, repository, isYjsReady, isReadOnly, boardFocusCardId, setBoardFocusCardId, timelineLayers } =
+const BoardCanvas = ({ isVisible, docId }: { isVisible: boolean; docId: string }) => {
+    const { projectId, isReadOnly, boardFocusCardId, setBoardFocusCardId } =
         useContext(ProjectContext);
-    const { updateContextMenu } = useContext(UserContext);
-    const t = useTranslations("board");
-    // Used only to name the default lanes when the board seeds them (below).
-    const tTimeline = useTranslations("timeline");
-    const projectState = repository?.getState();
     const containerRef = useRef<HTMLDivElement>(null);
-    const canvasRef = useRef<HTMLDivElement>(null);
-
-    const [cards, setCards] = useState<BoardCardData[]>([]);
-    const [arrows, setArrows] = useState<BoardArrowData[]>([]);
-    const [offset, setOffset] = useState({ x: 0, y: 0 });
-    const [scale, setScale] = useState(1);
-    const [isPanning, setIsPanning] = useState(false);
-    const [isDraggingFile, setIsDraggingFile] = useState(false);
-    const [isSnapping, setIsSnapping] = useState(true);
-    /** Transient banner shown when an asset can't be saved (e.g. cloud quota). */
-    const [assetError, setAssetError] = useState<string | null>(null);
-    const assetErrorTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-    const recorder = useAudioRecorder();
-    const [prevIsVisible, setPrevIsVisible] = useState(isVisible);
-    if (prevIsVisible !== isVisible) {
-        setPrevIsVisible(isVisible);
-        if (!isVisible) setIsSnapping(true);
-    }
-    const [isCameraReady, setIsCameraReady] = useState(false);
-    const [connectingFrom, setConnectingFrom] = useState<{ cardId: string; side: string } | null>(
-        null,
-    );
-    const [connectingLine, setConnectingLine] = useState<{ x: number; y: number } | null>(null);
-    const [selectedCardIds, setSelectedCardIds] = useState<Set<string>>(new Set());
-    const [selectionRect, setSelectionRect] = useState<{
-        startX: number;
-        startY: number;
-        endX: number;
-        endY: number;
-    } | null>(null);
-    const hasInitializedCamera = useRef(false);
-    /** Last `cards` payload this client wrote, to recognise the observer's echo. */
-    const lastSavedCards = useRef<string | null>(null);
-    const panStart = useRef({ x: 0, y: 0, offsetX: 0, offsetY: 0 });
-    const selectionStart = useRef<{ x: number; y: number } | null>(null);
-    const isSelecting = useRef(false);
 
-    /**
-     * The container's viewport rect, captured once when a gesture starts.
-     *
-     * Every move handler needs it to map a pointer to canvas space, but reading
-     * it per frame is a `getBoundingClientRect()` on a document the board has
-     * just dirtied — a forced synchronous layout of *everything* still on
-     * screen (the navigation drawer's scene list, the timeline strip, the
-     * parked screenplay editor) on every single move event. The panel itself
-     * cannot move mid-gesture, so the rect taken at gesture start stays correct
-     * and the whole per-frame relayout goes away.
-     */
-    const gestureRect = useRef<DOMRect | null>(null);
-    const captureGestureRect = useCallback(() => {
-        const rect = containerRef.current?.getBoundingClientRect() ?? null;
-        gestureRect.current = rect;
-        return rect;
-    }, []);
-
-    // ── Touch (mobile) state ──────────────────────────────────────────────────
     // isPhone gates *layout* (how much room the chrome has); isTouch gates the
     // *gestures* (pan/pinch/long-press), which a tablet needs just as much as a
     // phone even though it renders the desktop layout.
     const isPhone = useIsPhone();
     const isTouch = useIsTouch();
-    const imageInputRef = useRef<HTMLInputElement>(null);
-    const imageImportCoords = useRef({ x: 0, y: 0 });
-    const gesture = useRef<{
-        mode: "none" | "pan" | "pinch";
-        startX: number;
-        startY: number;
-        startOffset: { x: number; y: number };
-        startDist: number;
-        startScale: number;
-        pinchCanvasX: number;
-        pinchCanvasY: number;
-        moved: boolean;
-    }>({
-        mode: "none",
-        startX: 0,
-        startY: 0,
-        startOffset: { x: 0, y: 0 },
-        startDist: 0,
-        startScale: 1,
-        pinchCanvasX: 0,
-        pinchCanvasY: 0,
-        moved: false,
-    });
-    const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-    const lastTap = useRef({ time: 0, x: 0, y: 0 });
-    const lastTouchPoint = useRef({ x: 0, y: 0 });
-
-    // Timestamp of the most recent touch activity, used to ignore the mouse
-    // events WebKit synthesizes at the end of a touch gesture.
-    //
-    // The mouse handlers stay attached even on touch devices, because an iPad
-    // reports `pointer: coarse` whether or not a trackpad is attached — dropping
-    // them would leave Magic Keyboard users unable to pan or drag. Without this
-    // guard a one-finger pan would also fire the synthesized mousedown and start
-    // a marquee selection on top of the pan. Refreshed on every touch event (not
-    // just touchstart) so a long drag doesn't age out of the window mid-gesture.
-    const lastTouch = useRef(0);
-    const isSyntheticMouse = () => Date.now() - lastTouch.current < 700;
-
-    // Center camera to fit all cards
-    const centerCameraOnCards = useCallback((cardsToFit: BoardCardData[]) => {
-        const container = containerRef.current;
-        if (!container || cardsToFit.length === 0) return;
 
-        // Calculate bounding box of all cards
-        let minX = Infinity;
-        let minY = Infinity;
-        let maxX = -Infinity;
-        let maxY = -Infinity;
-
-        for (const card of cardsToFit) {
-            minX = Math.min(minX, card.x);
-            minY = Math.min(minY, card.y);
-            maxX = Math.max(maxX, card.x + card.width);
-            maxY = Math.max(maxY, card.y + card.height);
-        }
-
-        // Add padding around the bounding box
-        const padding = 100;
-        minX -= padding;
-        minY -= padding;
-        maxX += padding;
-        maxY += padding;
+    const [tool, setTool] = useState<BoardTool>("select");
+    /** Grid snapping, held off while Shift is down. */
+    const [isSnapping, setIsSnapping] = useState(true);
+    /** The board stays hidden until its camera is placed, to avoid a jump on open. */
+    const [isCameraReady, setIsCameraReady] = useState(false);
 
-        const boundsWidth = maxX - minX;
-        const boundsHeight = maxY - minY;
-        const boundsCenterX = (minX + maxX) / 2;
-        const boundsCenterY = (minY + maxY) / 2;
+    const [prevIsVisible, setPrevIsVisible] = useState(isVisible);
+    if (prevIsVisible !== isVisible) {
+        setPrevIsVisible(isVisible);
+        if (!isVisible) setIsSnapping(true);
+    }
 
-        const rect = container.getBoundingClientRect();
-        const viewportWidth = rect.width;
-        const viewportHeight = rect.height;
+    const camera = useBoardCamera(containerRef);
+    const {
+        offset,
+        scale,
+        gridPattern,
+        isPanning,
+        centerCameraOnCards,
+        toCanvasPoint,
+        handlePanMouseDown,
+        zoomFromCenter,
+    } = camera;
+
+    // Frame the board on the cards it opened with, then reveal it.
+    const handleFirstLoad = useCallback(
+        (loaded: BoardCardData[]) => {
+            if (loaded.length === 0) {
+                setIsCameraReady(true);
+                return;
+            }
+            setTimeout(() => {
+                centerCameraOnCards(loaded);
+                setIsCameraReady(true);
+            }, INITIAL_FRAME_DELAY);
+        },
+        [centerCameraOnCards],
+    );
 
-        // Calculate scale to fit bounds in viewport
-        const scaleX = viewportWidth / boundsWidth;
-        const scaleY = viewportHeight / boundsHeight;
-        const newScale = Math.min(Math.max(Math.min(scaleX, scaleY), MIN_SCALE), MAX_SCALE);
+    const doc = useBoardDocument(docId, handleFirstLoad);
+    const { cards, arrows, removeArrow } = doc;
 
-        // Calculate offset to center the bounds
-        const newOffsetX = viewportWidth / 2 - boundsCenterX * newScale;
-        const newOffsetY = viewportHeight / 2 - boundsCenterY * newScale;
+    const selection = useBoardSelection(camera, doc.getCards);
+    const { selectedCardIds, clearSelection, selectionRect, handleSelectionMouseDown } = selection;
 
-        setScale(newScale);
-        setOffset({ x: newOffsetX, y: newOffsetY });
-    }, []);
+    const cardActions = useBoardCardActions(doc, {
+        docId,
+        isSnapping,
+        selectedCardIds,
+        clearSelection,
+    });
+    const { createCard, updateCard } = cardActions;
+
+    const {
+        recorder,
+        assetError,
+        isDraggingFile,
+        handleDragOver,
+        handleDragLeave,
+        handleDrop,
+        setImageInput,
+        handleImageInputChange,
+        openImagePicker,
+        startRecording,
+        stopRecording,
+    } = useBoardAssets(camera, cardActions);
+
+    const {
+        connectingFrom,
+        connectingLine,
+        startConnection,
+        completeConnection,
+        linkSource,
+        clearLinkSource,
+        handleLinkTap,
+        cutArrowAt,
+    } = useBoardConnections(camera, doc);
+
+    const { showCanvasMenu, handleCanvasContextMenu, showCardMenu, showArrowMenu } = useBoardMenus(
+        camera,
+        {
+            canRecord: recorder.isSupported,
+            createCard,
+            importImage: openImagePicker,
+            recordAudio: startRecording,
+            changeCardColor: cardActions.changeCardColor,
+            duplicateCard: cardActions.duplicateCard,
+            sendToTimeline: cardActions.sendToTimeline,
+            deleteCard: cardActions.deleteCard,
+            deleteArrow: removeArrow,
+        },
+    );
+
+    const { handleTouchStart, handleTouchMove, handleTouchEnd, isSyntheticMouse } = useBoardTouch({
+        camera,
+        tool,
+        isConnecting: !!connectingFrom,
+        onCutAt: cutArrowAt,
+        onLongPress: showCanvasMenu,
+        onDoubleTap: createCard,
+        onCancelLink: clearLinkSource,
+    });
 
     // Focus a specific card when navigated to from the Timeline. Waits until the
     // board's cards have loaded and the target exists on this board, then centers
@@ -218,163 +159,33 @@ const BoardCanvas =({ isVisible, docId }: { isVisible: boolean; docId: string })
         setBoardFocusCardId(null);
     }, [boardFocusCardId, isVisible, cards, centerCameraOnCards, setBoardFocusCardId]);
 
-    // Sync cards with Yjs
-    useEffect(() => {
-        if (!projectState || !isYjsReady) return;
-
-        const boardMap = projectState.boardData(docId);
-
-        const syncCards = () => {
-            const cardsData = boardMap.get("cards");
-            // Y.Map observers fire for local writes too, so our own save echoes
-            // straight back. Re-parsing it would rebuild every card object and
-            // re-render the whole board a second time for a state it is already
-            // in — pure waste, and paid on every committed drag. (Arrows below
-            // are still synced: a peer may have touched those and nothing else.)
-            const isOwnEcho =
-                hasInitializedCamera.current &&
-                typeof cardsData === "string" &&
-                cardsData === lastSavedCards.current;
-            if (isOwnEcho) {
-                // nothing to apply: local state already is this payload
-            } else if (cardsData) {
-                try {
-                    const parsed =
-                        typeof cardsData === "string" ? JSON.parse(cardsData) : cardsData;
-                    setCards(parsed);
-
-                    // Center camera on first load
-                    if (!hasInitializedCamera.current) {
-                        hasInitializedCamera.current = true;
-                        if (parsed.length > 0) {
-                            // Small delay to ensure container is rendered
-                            setTimeout(() => {
-                                centerCameraOnCards(parsed);
-                                setIsCameraReady(true);
-                            }, 50);
-                        } else {
-                            setIsCameraReady(true);
-                        }
-                    }
-                } catch (e) {
-                    console.error("[BoardCanvas] Failed to parse cards:", e);
-                }
-            } else {
-                // No cards data yet, mark camera as ready
-                if (!hasInitializedCamera.current) {
-                    hasInitializedCamera.current = true;
-                    setIsCameraReady(true);
-                }
-            }
-
-            // Sync arrows
-            const arrowsData = boardMap.get("arrows");
-            if (arrowsData) {
-                try {
-                    const parsed =
-                        typeof arrowsData === "string" ? JSON.parse(arrowsData) : arrowsData;
-                    setArrows(parsed);
-                } catch (e) {
-                    console.error("[BoardCanvas] Failed to parse arrows:", e);
-                }
-            }
-        };
-
-        syncCards();
-        boardMap.observe(syncCards);
-
-        return () => {
-            boardMap.unobserve(syncCards);
-        };
-    }, [projectState, isYjsReady, docId, centerCameraOnCards]);
-
-    // Save cards to Yjs
-    const saveCards = useCallback(
-        (newCards: BoardCardData[]) => {
-            if (!projectState || !isYjsReady || isReadOnly) return;
-            const boardMap = projectState.boardData(docId);
-            const payload = JSON.stringify(newCards);
-            lastSavedCards.current = payload; // so the observer can skip its echo
-            boardMap.set("cards", payload);
-        },
-        [projectState, isYjsReady, isReadOnly, docId],
-    );
-
-    // Save arrows to Yjs
-    const saveArrows = useCallback(
-        (newArrows: BoardArrowData[]) => {
-            if (!projectState || !isYjsReady || isReadOnly) return;
-            const boardMap = projectState.boardData(docId);
-            boardMap.set("arrows", JSON.stringify(newArrows));
-        },
-        [projectState, isYjsReady, isReadOnly, docId],
-    );
-
-    // Handle keyboard events for snapping
+    // Shift suspends grid snapping; Escape drops the selection.
     useEffect(() => {
         if (!isVisible) return;
 
         const handleKeyDown = (e: KeyboardEvent) => {
-            if (e.key === "Shift") {
-                setIsSnapping(false);
-            }
-            if (e.key === "Escape") {
-                setSelectedCardIds(new Set());
-            }
+            if (e.key === "Shift") setIsSnapping(false);
+            if (e.key === "Escape") clearSelection();
         };
-
         const handleKeyUp = (e: KeyboardEvent) => {
-            if (e.key === "Shift") {
-                setIsSnapping(true);
-            }
+            if (e.key === "Shift") setIsSnapping(true);
         };
 
         window.addEventListener("keydown", handleKeyDown);
         window.addEventListener("keyup", handleKeyUp);
-
         return () => {
             window.removeEventListener("keydown", handleKeyDown);
             window.removeEventListener("keyup", handleKeyUp);
         };
-    }, [isVisible]);
-
-    // Panning with middle-click
-    const handlePanMouseDown = useCallback(
-        (e: React.MouseEvent) => {
-            if (e.button !== 1) return;
-            e.preventDefault(); // Prevent autoscroll on middle-click
-
-            setIsPanning(true);
-            panStart.current = {
-                x: e.clientX,
-                y: e.clientY,
-                offsetX: offset.x,
-                offsetY: offset.y,
-            };
-        },
-        [offset],
-    );
-
-    // Selection rectangle with left-click on empty canvas
-    const handleSelectionMouseDown = useCallback(
-        (e: React.MouseEvent) => {
-            if (e.button !== 0) return;
-            if ((e.target as HTMLElement).closest(`.${styles.card}`)) return;
-            if ((e.target as HTMLElement).closest(`.${styles.zoom_controls}`)) return;
-            if ((e.target as HTMLElement).closest("[data-context-menu]")) return;
-
-            const rect = captureGestureRect();
-            if (!rect) return;
-
-            const canvasX = (e.clientX - rect.left - offset.x) / scale;
-            const canvasY = (e.clientY - rect.top - offset.y) / scale;
+    }, [isVisible, clearSelection]);
 
-            selectionStart.current = { x: canvasX, y: canvasY };
-            isSelecting.current = true;
-            setSelectionRect({ startX: canvasX, startY: canvasY, endX: canvasX, endY: canvasY });
-            setSelectedCardIds(new Set());
+    /** Arm a tool, or disarm it when it is already the active one. */
+    const selectTool = useCallback(
+        (next: BoardTool) => {
+            setTool((prev) => (prev === next ? "select" : next));
+            clearLinkSource();
         },
-        [offset, scale, captureGestureRect],
+        [clearLinkSource],
     );
 
     const handleContainerMouseDown = useCallback(
@@ -383,1104 +194,38 @@ const BoardCanvas =({ isVisible, docId }: { isVisible: boolean; docId: string })
             handlePanMouseDown(e);
             handleSelectionMouseDown(e);
         },
-        [handlePanMouseDown, handleSelectionMouseDown],
+        [isSyntheticMouse, handlePanMouseDown, handleSelectionMouseDown],
     );
 
-    const handlePanMouseMove = useCallback(
-        (e: MouseEvent) => {
-            if (!isPanning) return;
-
-            const dx = e.clientX - panStart.current.x;
-            const dy = e.clientY - panStart.current.y;
-
-            setOffset({
-                x: panStart.current.offsetX + dx,
-                y: panStart.current.offsetY + dy,
-            });
-        },
-        [isPanning],
-    );
-
-    const handlePanMouseUp = useCallback(() => {
-        setIsPanning(false);
-    }, []);
-
-    useEffect(() => {
-        if (isPanning) {
-            window.addEventListener("mousemove", handlePanMouseMove);
-            window.addEventListener("mouseup", handlePanMouseUp);
-            return () => {
-                window.removeEventListener("mousemove", handlePanMouseMove);
-                window.removeEventListener("mouseup", handlePanMouseUp);
-            };
-        }
-    }, [isPanning, handlePanMouseMove, handlePanMouseUp]);
-
-    // Keep refs in sync for selection handlers to avoid stale closures
-    const offsetRef = useRef(offset);
-    const scaleRef = useRef(scale);
-    const cardsRef = useRef(cards);
-    /** Canvas-space coords captured when recording starts, for the resulting card. */
-    const recordCoords = useRef({ x: 0, y: 0 });
-    useEffect(() => {
-        offsetRef.current = offset;
-    }, [offset]);
-    useEffect(() => {
-        scaleRef.current = scale;
-    }, [scale]);
-    useEffect(() => {
-        cardsRef.current = cards;
-    }, [cards]);
-
-    // Selection rectangle global listeners
-    useEffect(() => {
-        if (!selectionRect) return;
-
-        const onMouseMove = (e: MouseEvent) => {
-            if (!isSelecting.current) return;
-
-            const rect = gestureRect.current;
-            if (!rect) return;
-
-            const currentOffset = offsetRef.current;
-            const currentScale = scaleRef.current;
-            const canvasX = (e.clientX - rect.left - currentOffset.x) / currentScale;
-            const canvasY = (e.clientY - rect.top - currentOffset.y) / currentScale;
-
-            setSelectionRect((prev) => (prev ? { ...prev, endX: canvasX, endY: canvasY } : null));
-        };
-
-        const onMouseUp = () => {
-            if (!isSelecting.current) {
-                isSelecting.current = false;
-                selectionStart.current = null;
-                gestureRect.current = null;
-                setSelectionRect(null);
-                return;
-            }
-
-            setSelectionRect((currentRect) => {
-                if (!currentRect) return null;
-
-                // Calculate normalized selection box
-                const left = Math.min(currentRect.startX, currentRect.endX);
-                const top = Math.min(currentRect.startY, currentRect.endY);
-                const right = Math.max(currentRect.startX, currentRect.endX);
-                const bottom = Math.max(currentRect.startY, currentRect.endY);
-
-                // Only select if the rectangle has meaningful size (prevent click-only)
-                const width = right - left;
-                const height = bottom - top;
-
-                if (width > 5 || height > 5) {
-                    // Find cards that intersect the selection box
-                    const selected = new Set<string>();
-                    for (const card of cardsRef.current) {
-                        const cardRight = card.x + card.width;
-                        const cardBottom = card.y + card.height;
-
-                        if (
-                            card.x < right &&
-                            cardRight > left &&
-                            card.y < bottom &&
-                            cardBottom > top
-                        ) {
-                            selected.add(card.id);
-                        }
-                    }
-                    setSelectedCardIds(selected);
-                }
-
-                return null; // Clear the selection rect
-            });
-
-            isSelecting.current = false;
-            selectionStart.current = null;
-            gestureRect.current = null;
-        };
-
-        window.addEventListener("mousemove", onMouseMove);
-        window.addEventListener("mouseup", onMouseUp);
-        return () => {
-            window.removeEventListener("mousemove", onMouseMove);
-            window.removeEventListener("mouseup", onMouseUp);
-        };
-    }, [selectionRect !== null]); // eslint-disable-line react-hooks/exhaustive-deps
-
-    // Zoom with mouse wheel - centered on cursor.
-    // Attached as a native non-passive listener (see effect below) because React
-    // registers onWheel as passive, which makes preventDefault() a no-op and warns.
-    const handleWheel = useCallback(
-        (e: WheelEvent) => {
-            e.preventDefault();
-
-            const container = containerRef.current;
-            if (!container) return;
-
-            const rect = container.getBoundingClientRect();
-            const cursorX = e.clientX - rect.left;
-            const cursorY = e.clientY - rect.top;
-
-            const delta = e.deltaY > 0 ? 0.9 : 1.1;
-            const newScale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale * delta));
-
-            // Calculate the point in canvas space under the cursor
-            const canvasX = (cursorX - offset.x) / scale;
-            const canvasY = (cursorY - offset.y) / scale;
-
-            // Calculate new offset so the same canvas point stays under cursor
-            const newOffsetX = cursorX - canvasX * newScale;
-            const newOffsetY = cursorY - canvasY * newScale;
-
-            setScale(newScale);
-            setOffset({ x: newOffsetX, y: newOffsetY });
-        },
-        [scale, offset],
-    );
-
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container) return;
-        container.addEventListener("wheel", handleWheel, { passive: false });
-        return () => container.removeEventListener("wheel", handleWheel);
-    }, [handleWheel]);
-
-    // Zoom from buttons - centered on viewport
-    const zoomFromCenter = useCallback(
-        (zoomIn: boolean) => {
-            const container = containerRef.current;
-            if (!container) return;
-
-            const rect = container.getBoundingClientRect();
-            const centerX = rect.width / 2;
-            const centerY = rect.height / 2;
-
-            const delta = zoomIn ? 1.2 : 0.8;
-            const newScale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale * delta));
-
-            const canvasX = (centerX - offset.x) / scale;
-            const canvasY = (centerY - offset.y) / scale;
-
-            const newOffsetX = centerX - canvasX * newScale;
-            const newOffsetY = centerY - canvasY * newScale;
-
-            setScale(newScale);
-            setOffset({ x: newOffsetX, y: newOffsetY });
-        },
-        [scale, offset],
-    );
-
-    // Create new card on double-click
+    // Create a card on double-click.
     const handleDoubleClick = useCallback(
         (e: React.MouseEvent) => {
-            if (isSyntheticMouse()) return; // double-tap is handled in handleContainerTouchEnd
+            if (isSyntheticMouse()) return; // double-tap is handled by the touch hook
             e.preventDefault();
-            if ((e.target as HTMLElement).closest(`.${styles.card}`)) return;
-            if ((e.target as HTMLElement).closest(`.${styles.zoom_controls}`)) return;
-
-            // Clear selection when creating a new card
-            setSelectedCardIds(new Set());
-
-            const container = containerRef.current;
-            if (!container) return;
-
-            const rect = container.getBoundingClientRect();
-            const x = (e.clientX - rect.left - offset.x) / scale;
-            const y = (e.clientY - rect.top - offset.y) / scale;
-
-            const newCard: BoardCardData = {
-                id: uuidv7(),
-                title: "",
-                description: "",
-                color: randomCardColor(),
-                x: isSnapping ? Math.round(x / GRID_SIZE) * GRID_SIZE : x,
-                y: isSnapping ? Math.round(y / GRID_SIZE) * GRID_SIZE : y,
-                width: 450,
-                height: 280,
-            };
-
-            const newCards = [...cards, newCard];
-            setCards(newCards);
-            saveCards(newCards);
-        },
-        [cards, offset, scale, isSnapping, saveCards],
-    );
-
-    // Highlight the canvas while an OS file drag hovers over it.
-    const handleDragOver = useCallback(
-        (e: React.DragEvent) => {
-            if (isReadOnly) return;
-            if (!Array.from(e.dataTransfer.types).includes("Files")) return;
-            e.preventDefault();
-            e.dataTransfer.dropEffect = "copy";
-            setIsDraggingFile(true);
-        },
-        [isReadOnly],
-    );
-
-    const handleDragLeave = useCallback((e: React.DragEvent) => {
-        // Ignore leave events fired when moving between the container's children.
-        if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setIsDraggingFile(false);
-    }, []);
-
-    // Show a transient error banner (auto-dismissed). Used when an asset can't be
-    // persisted, e.g. the owner is out of cloud storage.
-    const showAssetError = useCallback((message: string) => {
-        setAssetError(message);
-        if (assetErrorTimer.current) clearTimeout(assetErrorTimer.current);
-        assetErrorTimer.current = setTimeout(() => setAssetError(null), 4000);
-    }, []);
-
-    useEffect(() => () => {
-        if (assetErrorTimer.current) clearTimeout(assetErrorTimer.current);
-    }, []);
-
-    // Remove cards by id (used to roll back a card whose asset can't be saved).
-    const removeCards = useCallback(
-        (ids: Set<string>) => {
-            const next = cardsRef.current.filter((c) => !ids.has(c.id));
-            cardsRef.current = next; // keep the ref current so concurrent removals don't race
-            setCards(next);
-            saveCards(next);
-        },
-        [saveCards],
-    );
-
-    // Upload the new cards' assets to the cloud in the background, so the cards
-    // appear instantly (the bytes are already cached locally and render offline).
-    // If an upload is rejected for quota, roll back that card and explain why.
-    const syncCreatedAssets = useCallback(
-        (createdCards: BoardCardData[], pid: string) => {
-            for (const card of createdCards) {
-                if (!card.assetId) continue;
-                const cardId = card.id;
-                void syncAssetToCloud(pid, card.assetId).catch((err) => {
-                    if (err instanceof CloudQuotaError) {
-                        removeCards(new Set([cardId]));
-                        showAssetError(t("storageLimitReached"));
-                    } else {
-                        console.error("[BoardCanvas] cloud asset upload failed:", err);
-                    }
-                });
-            }
-        },
-        [removeCards, showAssetError, t],
-    );
-
-    // Drop image files → store each in IndexedDB (deduped) and drop an image
-    // card referencing its hash at the cursor.
-    const handleDrop = useCallback(
-        async (e: React.DragEvent) => {
-            e.preventDefault();
-            setIsDraggingFile(false);
-            if (isReadOnly || !projectId) return;
-
-            const files = Array.from(e.dataTransfer.files).filter(
-                (f) => f.type.startsWith("image/") || f.type.startsWith("audio/"),
-            );
-            if (files.length === 0) return;
-
-            const container = containerRef.current;
-            if (!container) return;
-            const rect = container.getBoundingClientRect();
-            const dropX = (e.clientX - rect.left - offset.x) / scale;
-            const dropY = (e.clientY - rect.top - offset.y) / scale;
-
-            const created: BoardCardData[] = [];
-            for (const file of files) {
-                const i = created.length;
-                try {
-                    if (file.type.startsWith("audio/")) {
-                        const { hash } = await importAudioFile(projectId, file);
-                        created.push({
-                            id: uuidv7(),
-                            type: "audio",
-                            assetId: hash,
-                            title: "",
-                            description: "",
-                            color: randomCardColor(),
-                            x: dropX + i * 24,
-                            y: dropY + i * 24,
-                            width: AUDIO_CARD_WIDTH,
-                            height: AUDIO_CARD_HEIGHT,
-                        });
-                        continue;
-                    }
-                    const { hash, width, height } = await importImageFile(projectId, file);
-                    const fit = Math.min(1, MAX_IMAGE_CARD_SIZE / Math.max(width, height, 1));
-                    created.push({
-                        id: uuidv7(),
-                        type: "image",
-                        assetId: hash,
-                        title: "",
-                        description: "",
-                        color: "transparent",
-                        x: dropX + i * 24,
-                        y: dropY + i * 24,
-                        width: Math.max(60, Math.round(width * fit)),
-                        height: Math.max(60, Math.round(height * fit)),
-                    });
-                } catch (err) {
-                    console.error("[BoardCanvas] Failed to import dropped file:", err);
-                }
-            }
-            if (created.length === 0) return;
-
-            const newCards = [...cardsRef.current, ...created];
-            setCards(newCards);
-            saveCards(newCards);
-
-            // Upload to the cloud in the background (cards already show locally).
-            syncCreatedAssets(created, projectId);
-        },
-        [isReadOnly, projectId, offset, scale, saveCards, syncCreatedAssets],
-    );
-
-    // Create a text card at the given canvas-space coords (from the canvas menu).
-    const handleCreateCard = useCallback(
-        (x: number, y: number) => {
-            setSelectedCardIds(new Set());
-
-            const newCard: BoardCardData = {
-                id: uuidv7(),
-                title: "",
-                description: "",
-                color: randomCardColor(),
-                x: isSnapping ? Math.round(x / GRID_SIZE) * GRID_SIZE : x,
-                y: isSnapping ? Math.round(y / GRID_SIZE) * GRID_SIZE : y,
-                width: 450,
-                height: 280,
-            };
-
-            const newCards = [...cardsRef.current, newCard];
-            setCards(newCards);
-            saveCards(newCards);
-        },
-        [isSnapping, saveCards],
-    );
-
-    // Begin recording; remember where to drop the resulting card.
-    const handleStartRecording = useCallback(
-        async (x: number, y: number) => {
-            recordCoords.current = { x, y };
-            try {
-                await recorder.start();
-            } catch (err) {
-                console.error("[BoardCanvas] Microphone access failed:", err);
-            }
-        },
-        [recorder],
-    );
-
-    // Stop recording, store the clip as an asset, and drop an audio card.
-    const handleStopRecording = useCallback(async () => {
-        const blob = await recorder.stop();
-        if (!blob || !projectId) return;
-        try {
-            const { hash } = await importAudioFile(projectId, blob);
-            const { x, y } = recordCoords.current;
-            const newCard: BoardCardData = {
-                id: uuidv7(),
-                type: "audio",
-                assetId: hash,
-                title: "",
-                description: "",
-                color: randomCardColor(),
-                x,
-                y,
-                width: AUDIO_CARD_WIDTH,
-                height: AUDIO_CARD_HEIGHT,
-            };
-            const newCards = [...cardsRef.current, newCard];
-            setCards(newCards);
-            saveCards(newCards);
-
-            // Upload to the cloud in the background (card already shows locally).
-            syncCreatedAssets([newCard], projectId);
-        } catch (err) {
-            console.error("[BoardCanvas] Failed to store recording:", err);
-        }
-    }, [recorder, projectId, saveCards, syncCreatedAssets]);
-
-    // Import an image file as a card at the given canvas-space coords. Shared by
-    // OS file drops and the "Import image" menu action (mobile has no drag-drop).
-    const addImageCard = useCallback(
-        async (file: File, x: number, y: number) => {
-            if (isReadOnly || !projectId) return;
-            try {
-                const { hash, width, height } = await importImageFile(projectId, file);
-                const fit = Math.min(1, MAX_IMAGE_CARD_SIZE / Math.max(width, height, 1));
-                const newCard: BoardCardData = {
-                    id: uuidv7(),
-                    type: "image",
-                    assetId: hash,
-                    title: "",
-                    description: "",
-                    color: "transparent",
-                    x,
-                    y,
-                    width: Math.max(60, Math.round(width * fit)),
-                    height: Math.max(60, Math.round(height * fit)),
-                };
-                const newCards = [...cardsRef.current, newCard];
-                setCards(newCards);
-                saveCards(newCards);
-                syncCreatedAssets([newCard], projectId);
-            } catch (err) {
-                console.error("[BoardCanvas] Failed to import image:", err);
-            }
-        },
-        [isReadOnly, projectId, saveCards, syncCreatedAssets],
-    );
-
-    const openImagePicker = useCallback((x: number, y: number) => {
-        imageImportCoords.current = { x, y };
-        imageInputRef.current?.click();
-    }, []);
-
-    const handleImageInputChange = useCallback(
-        (e: React.ChangeEvent<HTMLInputElement>) => {
-            const file = e.target.files?.[0];
-            e.target.value = "";
-            if (file) {
-                const { x, y } = imageImportCoords.current;
-                void addImageCard(file, x, y);
-            }
-        },
-        [addImageCard],
-    );
-
-    // Build the empty-canvas menu (create card / import image / record audio) at
-    // the given *screen* coords, resolving the canvas-space drop point via refs.
-    const showCanvasMenu = useCallback(
-        (screenX: number, screenY: number) => {
-            if (isReadOnly) return;
-            const container = containerRef.current;
-            if (!container) return;
-            const rect = container.getBoundingClientRect();
-            const canvasX = (screenX - rect.left - offsetRef.current.x) / scaleRef.current;
-            const canvasY = (screenY - rect.top - offsetRef.current.y) / scaleRef.current;
-            updateContextMenu({
-                position: { x: screenX, y: screenY },
-                content: (
-                    <>
-                        <ContextMenuItem
-                            icon={Plus}
-                            text={t("createCard")}
-                            action={() => handleCreateCard(canvasX, canvasY)}
-                        />
-                        <ContextMenuItem
-                            icon={ImageIcon}
-                            text={t("importImage")}
-                            action={() => openImagePicker(canvasX, canvasY)}
-                        />
-                        <ContextMenuItem
-                            icon={Mic}
-                            text={t("recordAudio")}
-                            action={() => handleStartRecording(canvasX, canvasY)}
-                            disabled={!recorder.isSupported}
-                            title={recorder.isSupported ? undefined : t("audioUnsupported")}
-                        />
-                    </>
-                ),
-            });
-        },
-        [isReadOnly, updateContextMenu, t, handleCreateCard, openImagePicker, handleStartRecording, recorder.isSupported],
-    );
-
-    // Right-clicking empty canvas opens the menu. Cards and arrows have their own
-    // menus, so bail when the click landed on one.
-    const handleCanvasContextMenu = useCallback(
-        (e: React.MouseEvent) => {
-            if (isReadOnly) return;
             const target = e.target as HTMLElement;
-            if (
-                target.closest(`.${styles.card}`) ||
-                target.closest(`.${styles.arrow_group}`) ||
-                target.closest("[data-context-menu]") ||
-                target.closest(`.${styles.zoom_controls}`)
-            )
+            if (target.closest(`.${styles.card}`) || target.closest(`.${styles.zoom_controls}`))
                 return;
-            e.preventDefault();
-            showCanvasMenu(e.clientX, e.clientY);
+            const { x, y } = toCanvasPoint(e.clientX, e.clientY);
+            createCard(x, y);
         },
-        [isReadOnly, showCanvasMenu],
+        [isSyntheticMouse, toCanvasPoint, createCard],
     );
 
-    /**
-     * Update card (with multi-drag support).
-     *
-     * `transient` marks a frame of a live drag/resize. Those only move local
-     * state: writing to Yjs per frame stringifies the entire board, opens a
-     * transaction (which fans out to persistence and to every peer) and then
-     * echoes back through the observer — tens of times a second, for a position
-     * that is about to change again. The gesture's last update is sent without
-     * the flag and is what actually gets stored (see BoardCard's commit).
-     */
-    const handleUpdateCard = useCallback(
-        (updatedCard: BoardCardData, options?: { transient?: boolean }) => {
-            const persist = (next: BoardCardData[]) => {
-                setCards(next);
-                cardsRef.current = next; // gesture commits read this back
-                if (!options?.transient) saveCards(next);
-            };
-            // Read through the ref, not the `cards` state: a drag can emit
-            // several moves between two commits, and it also keeps this callback
-            // stable across frames (a new identity would re-render every card).
-            const current = cardsRef.current;
-
-            if (selectedCardIds.has(updatedCard.id) && selectedCardIds.size > 1) {
-                // Multi-drag: apply same delta to all selected cards
-                const oldCard = current.find((c) => c.id === updatedCard.id);
-                if (oldCard) {
-                    const dx = updatedCard.x - oldCard.x;
-                    const dy = updatedCard.y - oldCard.y;
-                    // Only apply multi-drag for position changes, not resize
-                    if (dx !== 0 || dy !== 0) {
-                        const isResize =
-                            updatedCard.width !== oldCard.width ||
-                            updatedCard.height !== oldCard.height;
-                        if (!isResize) {
-                            persist(
-                                current.map((c) => {
-                                    if (c.id === updatedCard.id) return updatedCard;
-                                    if (selectedCardIds.has(c.id))
-                                        return { ...c, x: c.x + dx, y: c.y + dy };
-                                    return c;
-                                }),
-                            );
-                            return;
-                        }
-                    }
-                }
-            }
-            // Single card update (existing logic)
-            persist(current.map((c) => (c.id === updatedCard.id ? updatedCard : c)));
-        },
-        [selectedCardIds, saveCards],
-    );
-
-    // Card-menu actions below read through cardsRef rather than the `cards`
-    // state so their identity survives a drag's transient frames — BoardCard is
-    // memoised, and a fresh onContextMenu identity per frame would re-render
-    // every card on every frame of a drag.
-
-    // Delete card (and connected arrows)
-    const handleDeleteCard = useCallback(
+    // Clicking a link with the cut tool armed severs it. The touch path already
+    // cut this one, so ignore its mouse echo.
+    const handleCutArrow = useCallback(
         (id: string) => {
-            removeCards(new Set([id]));
-            // Also delete arrows connected to this card
-            const newArrows = arrows.filter((a) => a.fromCardId !== id && a.toCardId !== id);
-            setArrows(newArrows);
-            saveArrows(newArrows);
-            // Deleting an image card may orphan its asset — reconcile (debounced).
-            if (projectId && projectState) scheduleAssetGc(projectId, projectState);
-        },
-        [removeCards, arrows, saveArrows, projectId, projectState],
-    );
-
-    // Change card color
-    const handleChangeCardColor = useCallback(
-        (id: string, color: string) => {
-            const newCards = cardsRef.current.map((c) => (c.id === id ? { ...c, color } : c));
-            cardsRef.current = newCards;
-            setCards(newCards);
-            saveCards(newCards);
-        },
-        [saveCards],
-    );
-
-    // Duplicate card
-    const handleDuplicateCard = useCallback(
-        (card: BoardCardData) => {
-            const newCard: BoardCardData = {
-                ...card,
-                id: uuidv7(),
-                x: card.x + 20,
-                y: card.y + 20,
-            };
-            const newCards = [...cardsRef.current, newCard];
-            cardsRef.current = newCards;
-            setCards(newCards);
-            saveCards(newCards);
-        },
-        [saveCards],
-    );
-
-    // Send card to the Timeline — to a specific layer when `layerId` is given,
-    // otherwise to the default (first root) lane.
-    const handleSendToTimeline = useCallback(
-        (card: BoardCardData, layerId?: string) => {
-            repository?.appendTimelineClip(
-                {
-                    source: "card",
-                    refDocId: docId,
-                    refId: card.id,
-                    title: card.title,
-                    preview: card.description,
-                    color: card.color,
-                },
-                undefined,
-                layerId,
-            );
-        },
-        [repository, docId],
-    );
-
-    // Timeline layers flattened into display order (depth-annotated), mirroring
-    // the Timeline panel's tree so the "Send to timeline" submenu matches it.
-    const orderedLayers = useMemo(() => {
-        const out: { layer: TimelineLayer; depth: number }[] = [];
-        const childrenOf = (parentId: string | null) =>
-            Object.values(timelineLayers)
-                .filter((l) => (l.parentId ?? null) === parentId)
-                .sort((a, b) => a.order - b.order);
-        const walk = (parentId: string | null, depth: number) => {
-            for (const layer of childrenOf(parentId)) {
-                out.push({ layer, depth });
-                walk(layer.id, depth + 1);
-            }
-        };
-        walk(null, 0);
-        return out;
-    }, [timelineLayers]);
-
-    /**
-     * Lanes to offer in the "Send to timeline" submenu. The default lanes are
-     * otherwise only seeded when the Timeline panel is first opened, so a
-     * board-first user got an empty list (and a flat menu item) until they'd
-     * either opened the timeline or sent a card once — `appendTimelineClip`
-     * seeds too. Seeding here as well keeps the lanes listed on the very first
-     * right-click. Idempotent, and a no-op on a read-only project.
-     */
-    const resolveTimelineLayers = useCallback(() => {
-        if (orderedLayers.length > 0) return orderedLayers;
-        const seeded = repository?.ensureTimelineLayers(2, (i) => `${tTimeline("layer")} ${i + 1}`) ?? [];
-        return seeded.map((layer) => ({ layer, depth: 0 }));
-    }, [orderedLayers, repository, tTimeline]);
-
-    // Delete arrow
-    const handleDeleteArrow = useCallback(
-        (id: string) => {
-            const newArrows = arrows.filter((a) => a.id !== id);
-            setArrows(newArrows);
-            saveArrows(newArrows);
-        },
-        [arrows, saveArrows],
-    );
-
-    // Open the shared context-menu host for a card.
-    const handleCardContextMenu = useCallback(
-        (e: React.MouseEvent, card: BoardCardData) => {
-            const layers = resolveTimelineLayers();
-            updateContextMenu({
-                position: { x: e.clientX, y: e.clientY },
-                content: (
-                    <>
-                        {/* Color applies to text + audio notes; image cards have none. */}
-                        {card.type !== "image" && (
-                            <>
-                                <ContextMenuColorRow
-                                    colors={DEFAULT_ITEM_COLORS}
-                                    selected={card.color}
-                                    onSelect={(color) => handleChangeCardColor(card.id, color)}
-                                />
-                                <ContextMenuSeparator />
-                            </>
-                        )}
-                        <ContextMenuItem
-                            icon={Copy}
-                            text={t("duplicate")}
-                            action={() => handleDuplicateCard(card)}
-                        />
-                        {(card.type ?? "text") === "text" &&
-                            (layers.length > 0 ? (
-                                <ContextMenuSubmenu icon={ListTree} text={t("sendToTimeline")}>
-                                    {layers.map(({ layer, depth }) => (
-                                        <ContextMenuItem
-                                            key={layer.id}
-                                            icon={Layers}
-                                            indent={depth * 14}
-                                            text={layer.name || t("untitled")}
-                                            action={() => handleSendToTimeline(card, layer.id)}
-                                        />
-                                    ))}
-                                </ContextMenuSubmenu>
-                            ) : (
-                                <ContextMenuItem
-                                    icon={ListTree}
-                                    text={t("sendToTimeline")}
-                                    action={() => handleSendToTimeline(card)}
-                                />
-                            ))}
-                        <ContextMenuItem
-                            icon={Trash2}
-                            text={t("delete")}
-                            action={() => handleDeleteCard(card.id)}
-                        />
-                    </>
-                ),
-            });
-        },
-        [updateContextMenu, t, handleChangeCardColor, handleDuplicateCard, handleSendToTimeline, handleDeleteCard, resolveTimelineLayers],
-    );
-
-    // Open the shared context-menu host for an arrow.
-    const handleArrowContextMenu = useCallback(
-        (e: React.MouseEvent, arrow: BoardArrowData) => {
-            e.preventDefault();
-            e.stopPropagation();
-            updateContextMenu({
-                position: { x: e.clientX, y: e.clientY },
-                content: (
-                    <ContextMenuItem
-                        icon={Trash2}
-                        text={t("delete")}
-                        action={() => handleDeleteArrow(arrow.id)}
-                    />
-                ),
-            });
-        },
-        [updateContextMenu, t, handleDeleteArrow],
-    );
-
-    // Get connection point position for a card
-    const getConnectionPoint = useCallback(
-        (card: BoardCardData, side: "top" | "right" | "bottom" | "left") => {
-            const centerX = card.x + card.width / 2;
-            const centerY = card.y + card.height / 2;
-
-            switch (side) {
-                case "top":
-                    return { x: centerX, y: card.y };
-                case "right":
-                    return { x: card.x + card.width, y: centerY };
-                case "bottom":
-                    return { x: centerX, y: card.y + card.height };
-                case "left":
-                    return { x: card.x, y: centerY };
-            }
-        },
-        [],
-    );
-
-    // Calculate best connection points between two cards with perpendicular tangent directions
-    const getArrowPoints = useCallback(
-        (fromCard: BoardCardData, toCard: BoardCardData) => {
-            const fromCenter = {
-                x: fromCard.x + fromCard.width / 2,
-                y: fromCard.y + fromCard.height / 2,
-            };
-            const toCenter = { x: toCard.x + toCard.width / 2, y: toCard.y + toCard.height / 2 };
-
-            const dx = toCenter.x - fromCenter.x;
-            const dy = toCenter.y - fromCenter.y;
-
-            let fromSide: "top" | "right" | "bottom" | "left";
-            let toSide: "top" | "right" | "bottom" | "left";
-
-            if (Math.abs(dx) > Math.abs(dy)) {
-                // Horizontal dominant
-                fromSide = dx > 0 ? "right" : "left";
-                toSide = dx > 0 ? "left" : "right";
-            } else {
-                // Vertical dominant
-                fromSide = dy > 0 ? "bottom" : "top";
-                toSide = dy > 0 ? "top" : "bottom";
-            }
-
-            // Get perpendicular direction vectors for each side
-            const getDirection = (side: "top" | "right" | "bottom" | "left") => {
-                switch (side) {
-                    case "top":
-                        return { x: 0, y: -1 };
-                    case "right":
-                        return { x: 1, y: 0 };
-                    case "bottom":
-                        return { x: 0, y: 1 };
-                    case "left":
-                        return { x: -1, y: 0 };
-                }
-            };
-
-            return {
-                from: getConnectionPoint(fromCard, fromSide),
-                to: getConnectionPoint(toCard, toSide),
-                fromDir: getDirection(fromSide),
-                toDir: getDirection(toSide),
-            };
-        },
-        [getConnectionPoint],
-    );
-
-    // Handle starting a connection from a card
-    const handleStartConnection = useCallback(
-        (cardId: string, side: string, initialX: number, initialY: number) => {
-            captureGestureRect();
-            setConnectingFrom({ cardId, side });
-            setConnectingLine({ x: initialX, y: initialY });
-        },
-        [captureGestureRect],
-    );
-
-    // Handle mouse move while connecting
-    const handleConnectionMouseMove = useCallback(
-        (e: MouseEvent) => {
-            const rect = gestureRect.current;
-            if (!connectingFrom || !rect) return;
-
-            const x = (e.clientX - rect.left - offset.x) / scale;
-            const y = (e.clientY - rect.top - offset.y) / scale;
-
-            setConnectingLine({ x, y });
-        },
-        [connectingFrom, offset, scale],
-    );
-
-    // Handle completing a connection
-    const handleCompleteConnection = useCallback(
-        (toCardId: string) => {
-            if (!connectingFrom || connectingFrom.cardId === toCardId) {
-                setConnectingFrom(null);
-                setConnectingLine(null);
-                return;
-            }
-
-            // Check if arrow already exists
-            const exists = arrows.some(
-                (a) =>
-                    (a.fromCardId === connectingFrom.cardId && a.toCardId === toCardId) ||
-                    (a.fromCardId === toCardId && a.toCardId === connectingFrom.cardId),
-            );
-
-            if (!exists) {
-                const newArrow: BoardArrowData = {
-                    id: uuidv7(),
-                    fromCardId: connectingFrom.cardId,
-                    toCardId,
-                };
-                const newArrows = [...arrows, newArrow];
-                setArrows(newArrows);
-                saveArrows(newArrows);
-            }
-
-            setConnectingFrom(null);
-            setConnectingLine(null);
+            if (!isSyntheticMouse()) removeArrow(id);
         },
-        [connectingFrom, arrows, saveArrows],
+        [isSyntheticMouse, removeArrow],
     );
 
-    // Cancel connection on mouse up if not on a card
-    const handleConnectionMouseUp = useCallback(() => {
-        setConnectingFrom(null);
-        setConnectingLine(null);
-    }, []);
-
-    // Setup connection mouse + touch events
-    useEffect(() => {
-        if (!connectingFrom) return;
-        window.addEventListener("mousemove", handleConnectionMouseMove);
-        window.addEventListener("mouseup", handleConnectionMouseUp);
-
-        // Touch: track the finger to draw the pending line, and on release resolve
-        // the card under the finger via elementFromPoint to complete the link.
-        const onTouchMove = (e: TouchEvent) => {
-            const t = e.touches[0];
-            const rect = gestureRect.current;
-            if (!t || !rect) return;
-            lastTouchPoint.current = { x: t.clientX, y: t.clientY };
-            setConnectingLine({
-                x: (t.clientX - rect.left - offsetRef.current.x) / scaleRef.current,
-                y: (t.clientY - rect.top - offsetRef.current.y) / scaleRef.current,
-            });
-        };
-        const onTouchEnd = () => {
-            const p = lastTouchPoint.current;
-            const el = document.elementFromPoint(p.x, p.y) as HTMLElement | null;
-            const targetId = el?.closest("[data-card-id]")?.getAttribute("data-card-id");
-            if (targetId) handleCompleteConnection(targetId);
-            else handleConnectionMouseUp();
-        };
-        window.addEventListener("touchmove", onTouchMove, { passive: true });
-        window.addEventListener("touchend", onTouchEnd);
-
-        return () => {
-            window.removeEventListener("mousemove", handleConnectionMouseMove);
-            window.removeEventListener("mouseup", handleConnectionMouseUp);
-            window.removeEventListener("touchmove", onTouchMove);
-            window.removeEventListener("touchend", onTouchEnd);
-            gestureRect.current = null;
-        };
-    }, [connectingFrom, handleConnectionMouseMove, handleConnectionMouseUp, handleCompleteConnection]);
-
-    // ── Container touch gestures (mobile) ─────────────────────────────────────
-    // One finger pans the canvas; two fingers pinch-zoom (centred on the pinch);
-    // a double-tap on empty canvas creates a card; a long-press opens the canvas
-    // menu. Cards/handles stop propagation, so their touches never reach here.
-    useEffect(
-        () => () => {
-            if (longPressTimer.current) clearTimeout(longPressTimer.current);
-        },
-        [],
-    );
-
-    // Uses the gesture's captured rect when there is one (a live pan/pinch), and
-    // otherwise measures — the discrete taps that call this outside a gesture
-    // (double-tap to create, long-press menu) are cheap enough to measure fresh.
-    const toCanvasPoint = (clientX: number, clientY: number) => {
-        const rect = gestureRect.current ?? captureGestureRect();
-        if (!rect) return { x: 0, y: 0 };
-        return {
-            x: (clientX - rect.left - offsetRef.current.x) / scaleRef.current,
-            y: (clientY - rect.top - offsetRef.current.y) / scaleRef.current,
-        };
-    };
-
-    const cancelLongPress = () => {
-        if (longPressTimer.current) {
-            clearTimeout(longPressTimer.current);
-            longPressTimer.current = null;
-        }
-    };
-
-    const isChromeTarget = (target: HTMLElement) =>
-        !!(
-            target.closest(`.${styles.card}`) ||
-            target.closest(`.${styles.zoom_controls}`) ||
-            target.closest(`.${styles.recording_indicator}`) ||
-            target.closest("[data-context-menu]")
-        );
-
-    const handleContainerTouchStart = (e: React.TouchEvent) => {
-        lastTouch.current = Date.now();
-        if (connectingFrom) return;
-        if (isChromeTarget(e.target as HTMLElement)) return;
-
-        if (e.touches.length === 1) {
-            const t = e.touches[0];
-            gesture.current = {
-                ...gesture.current,
-                mode: "pan",
-                startX: t.clientX,
-                startY: t.clientY,
-                startOffset: { ...offsetRef.current },
-                moved: false,
-            };
-            cancelLongPress();
-            const lpX = t.clientX;
-            const lpY = t.clientY;
-            longPressTimer.current = setTimeout(() => {
-                gesture.current.mode = "none";
-                showCanvasMenu(lpX, lpY);
-            }, 500);
-        } else if (e.touches.length === 2) {
-            cancelLongPress();
-            captureGestureRect();
-            const a = e.touches[0];
-            const b = e.touches[1];
-            const dist = Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY);
-            const mid = toCanvasPoint((a.clientX + b.clientX) / 2, (a.clientY + b.clientY) / 2);
-            gesture.current = {
-                ...gesture.current,
-                mode: "pinch",
-                startDist: dist || 1,
-                startScale: scaleRef.current,
-                pinchCanvasX: mid.x,
-                pinchCanvasY: mid.y,
-                moved: true,
-            };
-        }
-    };
-
-    const handleContainerTouchMove = (e: React.TouchEvent) => {
-        lastTouch.current = Date.now();
-        const g = gesture.current;
-        if (g.mode === "pan" && e.touches.length === 1) {
-            const t = e.touches[0];
-            const dx = t.clientX - g.startX;
-            const dy = t.clientY - g.startY;
-            if (!g.moved && Math.hypot(dx, dy) > 8) {
-                g.moved = true;
-                cancelLongPress();
-            }
-            if (g.moved) setOffset({ x: g.startOffset.x + dx, y: g.startOffset.y + dy });
-        } else if (g.mode === "pinch" && e.touches.length >= 2) {
-            const rect = gestureRect.current;
-            if (!rect) return;
-            const a = e.touches[0];
-            const b = e.touches[1];
-            const dist = Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY);
-            const midX = (a.clientX + b.clientX) / 2;
-            const midY = (a.clientY + b.clientY) / 2;
-            const newScale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, g.startScale * (dist / g.startDist)));
-            setScale(newScale);
-            setOffset({
-                x: midX - rect.left - g.pinchCanvasX * newScale,
-                y: midY - rect.top - g.pinchCanvasY * newScale,
-            });
-        }
-    };
-
-    const handleContainerTouchEnd = (e: React.TouchEvent) => {
-        lastTouch.current = Date.now();
-        cancelLongPress();
-        const g = gesture.current;
-        if (g.mode === "pan" && !g.moved && e.changedTouches.length > 0) {
-            const t = e.changedTouches[0];
-            const now = Date.now();
-            const isDoubleTap =
-                now - lastTap.current.time < 300 &&
-                Math.hypot(t.clientX - lastTap.current.x, t.clientY - lastTap.current.y) < 30;
-            if (isDoubleTap) {
-                const c = toCanvasPoint(t.clientX, t.clientY);
-                setSelectedCardIds(new Set());
-                handleCreateCard(c.x, c.y);
-                lastTap.current = { time: 0, x: 0, y: 0 };
-            } else {
-                lastTap.current = { time: now, x: t.clientX, y: t.clientY };
-            }
-        }
-        if (e.touches.length === 0) {
-            g.mode = "none";
-            // Gesture over: drop the captured rect so the next one measures fresh
-            // (the panel may have moved since — a drawer, a split resize).
-            gestureRect.current = null;
-        } else if (e.touches.length === 1) {
-            // A finger lifted from a pinch — resume panning with the one that remains.
-            const t = e.touches[0];
-            gesture.current = {
-                ...g,
-                mode: "pan",
-                startX: t.clientX,
-                startY: t.clientY,
-                startOffset: { ...offsetRef.current },
-                moved: true,
-            };
-        }
-    };
-
-    // Grid placement. Pan is expressed purely as a transform, so a pan frame
-    // writes nothing but `transform` and the compositor does the rest; the tile
-    // size is quantized (see GRID_TILE_QUANTUM) so zoom only touches
-    // background-size a handful of times across a gesture, not every frame.
-    const gridPattern = useMemo(() => {
-        const tile = Math.max(
-            GRID_TILE_QUANTUM,
-            Math.round((GRID_SIZE * scale) / GRID_TILE_QUANTUM) * GRID_TILE_QUANTUM,
-        );
-        return {
-            backgroundSize: `${tile}px ${tile}px`,
-            inset: `${-tile}px`,
-            transform: `translate3d(${offset.x % tile}px, ${offset.y % tile}px, 0)`,
-        };
-    }, [scale, offset]);
-
     return (
         <div className={styles.board_wrapper}>
             <div className={styles.board_shadow} />
             {/* Hidden picker for the mobile "Import image" menu action. */}
             <input
-                ref={imageInputRef}
+                ref={setImageInput}
                 type="file"
                 accept="image/*"
                 style={{ display: "none" }}
@@ -1492,9 +237,9 @@ const BoardCanvas =({ isVisible, docId }: { isVisible: boolean; docId: string })
                 onMouseDown={handleContainerMouseDown}
                 onDoubleClick={handleDoubleClick}
                 onContextMenu={handleCanvasContextMenu}
-                onTouchStart={isTouch ? handleContainerTouchStart : undefined}
-                onTouchMove={isTouch ? handleContainerTouchMove : undefined}
-                onTouchEnd={isTouch ? handleContainerTouchEnd : undefined}
+                onTouchStart={isTouch ? handleTouchStart : undefined}
+                onTouchMove={isTouch ? handleTouchMove : undefined}
+                onTouchEnd={isTouch ? handleTouchEnd : undefined}
                 onDragOver={handleDragOver}
                 onDragLeave={handleDragLeave}
                 onDrop={handleDrop}
@@ -1502,145 +247,22 @@ const BoardCanvas =({ isVisible, docId }: { isVisible: boolean; docId: string })
                 <div className={styles.grid} style={gridPattern} />
 
                 <div
-                    ref={canvasRef}
-                    className={`${styles.canvas} ${!isCameraReady ? styles.canvas_hidden : ""}`}
-                    style={{
-                        transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,
-                    }}
+                    // The resize tool is a pure restyle of every card's corner
+                    // grip, so it rides one class on the layer they all sit in —
+                    // a per-card prop would re-render the whole board to change
+                    // nothing but CSS.
+                    className={`${styles.canvas} ${!isCameraReady ? styles.canvas_hidden : ""} ${tool === "resize" ? styles.resize_mode : ""}`}
+                    style={{ transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})` }}
                 >
-                    {/* SVG layer for arrows */}
-                    <svg className={styles.arrows_svg}>
-                        {arrows.map((arrow) => {
-                            const fromCard = cards.find((c) => c.id === arrow.fromCardId);
-                            const toCard = cards.find((c) => c.id === arrow.toCardId);
-                            if (!fromCard || !toCard) return null;
-
-                            const points = getArrowPoints(fromCard, toCard);
-
-                            // Calculate distance for control point offset (perpendicular to border)
-                            const dist = Math.hypot(
-                                points.to.x - points.from.x,
-                                points.to.y - points.from.y,
-                            );
-                            const controlDist = Math.max(50, dist * 0.4);
-
-                            // Control points extend perpendicular to the borders
-                            const cx1 = points.from.x + points.fromDir.x * controlDist;
-                            const cy1 = points.from.y + points.fromDir.y * controlDist;
-                            const cx2 = points.to.x + points.toDir.x * controlDist;
-                            const cy2 = points.to.y + points.toDir.y * controlDist;
-
-                            // Calculate arrowhead angle from the curve's end tangent
-                            const angle = Math.atan2(points.to.y - cy2, points.to.x - cx2);
-                            const arrowLength = 24;
-                            const arrowWidth = 8; // half-width
-
-                            // Arrowhead points matching original marker shape: M 0 0 L 12 4 L 0 8 L 3 4 Z
-                            // Back corners (perpendicular to arrow direction)
-                            const ax1 =
-                                points.to.x -
-                                arrowLength * Math.cos(angle) +
-                                arrowWidth * Math.sin(angle);
-                            const ay1 =
-                                points.to.y -
-                                arrowLength * Math.sin(angle) -
-                                arrowWidth * Math.cos(angle);
-                            const ax2 =
-                                points.to.x -
-                                arrowLength * Math.cos(angle) -
-                                arrowWidth * Math.sin(angle);
-                            const ay2 =
-                                points.to.y -
-                                arrowLength * Math.sin(angle) +
-                                arrowWidth * Math.cos(angle);
-                            // Inner notch (25% from back toward tip)
-                            const notchDepth = arrowLength * 0.75;
-                            const axm = points.to.x - notchDepth * Math.cos(angle);
-                            const aym = points.to.y - notchDepth * Math.sin(angle);
-
-                            // Shorten the line to end at the notch point so it doesn't extend past the arrowhead
-                            const lineEndX = axm;
-                            const lineEndY = aym;
-
-                            const pathD = `M ${points.from.x} ${points.from.y} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${lineEndX} ${lineEndY}`;
-                            const arrowheadD = `M ${ax1} ${ay1} L ${points.to.x} ${points.to.y} L ${ax2} ${ay2} L ${axm} ${aym} Z`;
-
-                            return (
-                                <g key={arrow.id} className={styles.arrow_group}>
-                                    {/* Invisible hitbox for easier clicking */}
-                                    <path
-                                        className={styles.arrow_hitbox}
-                                        d={pathD}
-                                        fill="none"
-                                        onContextMenu={(e) => handleArrowContextMenu(e, arrow)}
-                                    />
-                                    {/* Visible arrow line */}
-                                    <path
-                                        className={styles.arrow_line}
-                                        d={pathD}
-                                        fill="none"
-                                        stroke="var(--secondary-text)"
-                                        strokeWidth={2.5}
-                                    />
-                                    {/* Arrowhead */}
-                                    <path
-                                        className={styles.arrow_head}
-                                        d={arrowheadD}
-                                        fill="var(--secondary-text)"
-                                    />
-                                </g>
-                            );
-                        })}
-                        {/* Line while connecting */}
-                        {connectingFrom &&
-                            connectingLine &&
-                            (() => {
-                                const fromCard = cards.find((c) => c.id === connectingFrom.cardId);
-                                if (!fromCard) return null;
-
-                                const fromCenter = {
-                                    x: fromCard.x + fromCard.width / 2,
-                                    y: fromCard.y + fromCard.height / 2,
-                                };
-                                const dx = connectingLine.x - fromCenter.x;
-                                const dy = connectingLine.y - fromCenter.y;
-
-                                // Determine best exit side based on cursor direction
-                                let fromSide: "top" | "right" | "bottom" | "left";
-                                let fromDir: { x: number; y: number };
-
-                                if (Math.abs(dx) > Math.abs(dy)) {
-                                    fromSide = dx > 0 ? "right" : "left";
-                                    fromDir = dx > 0 ? { x: 1, y: 0 } : { x: -1, y: 0 };
-                                } else {
-                                    fromSide = dy > 0 ? "bottom" : "top";
-                                    fromDir = dy > 0 ? { x: 0, y: 1 } : { x: 0, y: -1 };
-                                }
-
-                                const fromPoint = getConnectionPoint(fromCard, fromSide);
-                                const dist = Math.hypot(
-                                    connectingLine.x - fromPoint.x,
-                                    connectingLine.y - fromPoint.y,
-                                );
-                                const controlDist = Math.max(30, dist * 0.3);
-
-                                const cx = fromPoint.x + fromDir.x * controlDist;
-                                const cy = fromPoint.y + fromDir.y * controlDist;
-
-                                const pathD = `M ${fromPoint.x} ${fromPoint.y} Q ${cx} ${cy}, ${connectingLine.x} ${connectingLine.y}`;
-
-                                return (
-                                    <path
-                                        className={styles.arrow_line_connecting}
-                                        d={pathD}
-                                        fill="none"
-                                        stroke="var(--secondary-text)"
-                                        strokeWidth={2.5}
-                                        strokeDasharray="8,4"
-                                    />
-                                );
-                            })()}
-                    </svg>
+                    <BoardArrows
+                        cards={cards}
+                        arrows={arrows}
+                        cutMode={tool === "cut"}
+                        connectingFromCardId={connectingFrom?.cardId ?? null}
+                        connectingLine={connectingLine}
+                        onArrowContextMenu={showArrowMenu}
+                        onCutArrow={handleCutArrow}
+                    />
 
                     {cards.map((card) => (
                         <BoardCard
@@ -1650,16 +272,18 @@ const BoardCanvas =({ isVisible, docId }: { isVisible: boolean; docId: string })
                             scale={scale}
                             isSnapping={isSnapping}
                             gridSize={GRID_SIZE}
-                            onUpdate={handleUpdateCard}
-                            onContextMenu={handleCardContextMenu}
-                            onStartConnection={handleStartConnection}
-                            onCompleteConnection={handleCompleteConnection}
+                            onUpdate={updateCard}
+                            onContextMenu={showCardMenu}
+                            onStartConnection={startConnection}
+                            onCompleteConnection={completeConnection}
                             isConnecting={!!connectingFrom}
                             isSelected={selectedCardIds.has(card.id)}
+                            linkMode={tool === "link"}
+                            isLinkSource={linkSource === card.id}
+                            onLinkTap={handleLinkTap}
                         />
                     ))}
 
-                    {/* Selection rectangle */}
                     {selectionRect && (
                         <div
                             className={styles.selection_rect}
@@ -1676,32 +300,15 @@ const BoardCanvas =({ isVisible, docId }: { isVisible: boolean; docId: string })
                 {/* Transient asset error (e.g. cloud storage limit reached) */}
                 {assetError && <div className={styles.asset_error}>{assetError}</div>}
 
-                {/* Recording indicator */}
                 {recorder.isRecording && (
-                    <div className={styles.recording_indicator}>
-                        <span className={styles.recording_dot} />
-                        <span className={styles.recording_time}>
-                            {formatRecordingTime(recorder.elapsed)}
-                        </span>
-                        <button className={styles.recording_stop} onClick={handleStopRecording}>
-                            <Square size={12} />
-                            <span className="unselectable">{t("stopRecording")}</span>
-                        </button>
-                    </div>
+                    <RecordingIndicator elapsed={recorder.elapsed} onStop={stopRecording} />
                 )}
 
-                {/* Zoom controls hidden on phone — pinch-to-zoom replaces them. */}
-                {!isPhone && (
-                    <div className={styles.zoom_controls}>
-                        <button className={styles.zoom_btn} onClick={() => zoomFromCenter(false)}>
-                            <Minus size={14} />
-                        </button>
-                        <span className={styles.zoom_level}>{Math.round(scale * 100)}%</span>
-                        <button className={styles.zoom_btn} onClick={() => zoomFromCenter(true)}>
-                            <Plus size={14} />
-                        </button>
-                    </div>
-                )}
+                {/* Touch tools, hidden in a read-only session where they'd be dead buttons. */}
+                {isTouch && !isReadOnly && <BoardToolControls tool={tool} onSelectTool={selectTool} />}
+                <BoardToolHint tool={tool} hasLinkSource={!!linkSource} />
+
+                {!isPhone && <BoardZoomControls scale={scale} onZoom={zoomFromCenter} />}
             </div>
         </div>
     );
diff --git a/components/board/BoardCard.tsx b/components/board/BoardCard.tsx
index 6dda3219..27392df3 100644
--- a/components/board/BoardCard.tsx
+++ b/components/board/BoardCard.tsx
@@ -297,6 +297,11 @@ interface BoardCardProps {
     onCompleteConnection: (cardId: string) => void;
     isConnecting: boolean;
     isSelected: boolean;
+    /** The board's link tool is armed: a tap on this card picks a link end. */
+    linkMode: boolean;
+    /** This card is the link already picked, waiting for its target. */
+    isLinkSource: boolean;
+    onLinkTap: (cardId: string) => void;
 }
 
 const BoardCard = ({
@@ -311,6 +316,9 @@ const BoardCard = ({
     onCompleteConnection,
     isConnecting,
     isSelected,
+    linkMode,
+    isLinkSource,
+    onLinkTap,
 }: BoardCardProps) => {
     const kind = kindOf(card);
     // Coarse pointer, not phone width: a tablet renders the desktop board but is
@@ -581,6 +589,14 @@ const BoardCard = ({
                 const state = touchDrag.current;
                 touchDrag.current = null;
                 if (state && !state.moved && !state.suppressed) {
+                    // The link tool takes the tap ahead of everything else: while
+                    // it is armed a tap means "this end of the link", not
+                    // double-tap-to-edit. Dragging the card is untouched — that
+                    // path needs movement, which rules a tap out.
+                    if (linkMode) {
+                        onLinkTap(card.id);
+                        return;
+                    }
                     if (isConnecting) {
                         onCompleteConnection(card.id);
                         return;
@@ -606,11 +622,13 @@ const BoardCard = ({
             card,
             kind,
             isConnecting,
+            linkMode,
             applyDrag,
             commitMove,
             captureCanvasOrigin,
             onContextMenu,
             onCompleteConnection,
+            onLinkTap,
         ],
     );
 
@@ -727,12 +745,22 @@ const BoardCard = ({
     const handleCardMouseUp = useCallback(
         (e: React.MouseEvent) => {
             if (isSyntheticMouse()) return; // ignore the mouse echo of a touch
+            // Trackpad counterpart of the link tap — an iPad reports a coarse
+            // pointer with a Magic Keyboard attached, so the tool has to answer to
+            // both. A pending commit means this mouseup ends a drag rather than a
+            // click, and dragging a card must not link it. (The window mouseup
+            // that clears it runs after this delegated handler.)
+            if (linkMode && !pendingCommit.current) {
+                e.stopPropagation();
+                onLinkTap(card.id);
+                return;
+            }
             if (isConnecting) {
                 e.stopPropagation();
                 onCompleteConnection(card.id);
             }
         },
-        [card.id, isConnecting, onCompleteConnection],
+        [card.id, isConnecting, linkMode, onCompleteConnection, onLinkTap],
     );
 
     const titleEditing: TitleEditing = {
@@ -777,8 +805,9 @@ const BoardCard = ({
                 kind === "image" && styles.image_card,
                 kind === "audio" && styles.audio_card,
                 isDragging && styles.card_dragging,
-                isConnecting && styles.card_connecting,
+                (isConnecting || linkMode) && styles.card_connecting,
                 isSelected && styles.card_selected,
+                isLinkSource && styles.card_link_source,
             )}
             style={{
                 // Position via transform, not left/top — a drag frame is then a
diff --git a/components/board/BoardOverlays.tsx b/components/board/BoardOverlays.tsx
new file mode 100644
index 00000000..03730c1a
--- /dev/null
+++ b/components/board/BoardOverlays.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { Link, Minus, MoveDiagonal2, Plus, Scissors, Square } from "lucide-react";
+import styles from "./BoardCanvas.module.css";
+import { BoardTool } from "./board-constants";
+
+/** Seconds → `m:ss` for the recording indicator. */
+function formatRecordingTime(seconds: number): string {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
+export const RecordingIndicator = ({
+    elapsed,
+    onStop,
+}: {
+    elapsed: number;
+    onStop: () => void;
+}) => {
+    const t = useTranslations("board");
+    return (
+        <div className={styles.recording_indicator}>
+            <span className={styles.recording_dot} />
+            <span className={styles.recording_time}>{formatRecordingTime(elapsed)}</span>
+            <button className={styles.recording_stop} onClick={onStop}>
+                <Square size={12} />
+                <span className="unselectable">{t("stopRecording")}</span>
+            </button>
+        </div>
+    );
+};
+
+/**
+ * Link / cut / resize tools. Touch only: with a pointer the corner node and the
+ * link's right-click menu are already precise enough, and the board keeps its
+ * uncluttered desktop chrome.
+ */
+export const BoardToolControls = ({
+    tool,
+    onSelectTool,
+}: {
+    tool: BoardTool;
+    onSelectTool: (tool: BoardTool) => void;
+}) => {
+    const t = useTranslations("board");
+    const tools: { id: BoardTool; icon: typeof Link; label: string }[] = [
+        { id: "link", icon: Link, label: t("linkCards") },
+        { id: "cut", icon: Scissors, label: t("cutLinks") },
+        { id: "resize", icon: MoveDiagonal2, label: t("resizeCards") },
+    ];
+
+    return (
+        <div className={styles.tool_controls}>
+            {tools.map(({ id, icon: Icon, label }) => (
+                <button
+                    key={id}
+                    type="button"
+                    aria-pressed={tool === id}
+                    aria-label={label}
+                    className={`${styles.tool_btn} ${tool === id ? styles.tool_btn_active : ""}`}
+                    onClick={() => onSelectTool(id)}
+                >
+                    <Icon size={18} />
+                </button>
+            ))}
+        </div>
+    );
+};
+
+/**
+ * What the armed tool is waiting for. The tools are modal and the pressed
+ * button is the only other sign of it, so the step being asked for is spelled
+ * out until the tool is put down.
+ */
+export const BoardToolHint = ({
+    tool,
+    hasLinkSource,
+}: {
+    tool: BoardTool;
+    hasLinkSource: boolean;
+}) => {
+    const t = useTranslations("board");
+    if (tool === "select") return null;
+
+    const hint =
+        tool === "cut"
+            ? t("cutHint")
+            : tool === "resize"
+              ? t("resizeHint")
+              : hasLinkSource
+                ? t("linkHintTarget")
+                : t("linkHintSource");
+
+    return <div className={styles.tool_hint}>{hint}</div>;
+};
+
+/** Zoom buttons — hidden on phone, where pinch-to-zoom replaces them. */
+export const BoardZoomControls = ({
+    scale,
+    onZoom,
+}: {
+    scale: number;
+    onZoom: (zoomIn: boolean) => void;
+}) => (
+    <div className={styles.zoom_controls}>
+        <button className={styles.zoom_btn} onClick={() => onZoom(false)}>
+            <Minus size={14} />
+        </button>
+        <span className={styles.zoom_level}>{Math.round(scale * 100)}%</span>
+        <button className={styles.zoom_btn} onClick={() => onZoom(true)}>
+            <Plus size={14} />
+        </button>
+    </div>
+);
diff --git a/components/board/board-cards.ts b/components/board/board-cards.ts
new file mode 100644
index 00000000..5ff5664e
--- /dev/null
+++ b/components/board/board-cards.ts
@@ -0,0 +1,76 @@
+import { BoardCardData } from "@src/lib/project/project-state";
+import { DEFAULT_ITEM_COLORS } from "@src/lib/utils/colors";
+import { v7 as uuidv7 } from "uuid";
+import {
+    AUDIO_CARD_HEIGHT,
+    AUDIO_CARD_WIDTH,
+    GRID_SIZE,
+    MAX_IMAGE_CARD_SIZE,
+    TEXT_CARD_HEIGHT,
+    TEXT_CARD_WIDTH,
+} from "./board-constants";
+
+/** A random swatch from the default palette (used for new colored cards). */
+export function randomCardColor(): string {
+    return DEFAULT_ITEM_COLORS[Math.floor(Math.random() * DEFAULT_ITEM_COLORS.length)];
+}
+
+/** Round a canvas coordinate onto the grid, unless snapping is held off (Shift). */
+export function snapToGrid(value: number, isSnapping: boolean): number {
+    return isSnapping ? Math.round(value / GRID_SIZE) * GRID_SIZE : value;
+}
+
+export function createTextCard(x: number, y: number, isSnapping: boolean): BoardCardData {
+    return {
+        id: uuidv7(),
+        title: "",
+        description: "",
+        color: randomCardColor(),
+        x: snapToGrid(x, isSnapping),
+        y: snapToGrid(y, isSnapping),
+        width: TEXT_CARD_WIDTH,
+        height: TEXT_CARD_HEIGHT,
+    };
+}
+
+/**
+ * An image card sized from the source image, scaled down to fit
+ * MAX_IMAGE_CARD_SIZE on its longest edge (never up, so small images keep
+ * their pixel size).
+ */
+export function createImageCard(
+    assetId: string,
+    imageWidth: number,
+    imageHeight: number,
+    x: number,
+    y: number,
+): BoardCardData {
+    const fit = Math.min(1, MAX_IMAGE_CARD_SIZE / Math.max(imageWidth, imageHeight, 1));
+    return {
+        id: uuidv7(),
+        type: "image",
+        assetId,
+        title: "",
+        description: "",
+        color: "transparent",
+        x,
+        y,
+        width: Math.max(60, Math.round(imageWidth * fit)),
+        height: Math.max(60, Math.round(imageHeight * fit)),
+    };
+}
+
+export function createAudioCard(assetId: string, x: number, y: number): BoardCardData {
+    return {
+        id: uuidv7(),
+        type: "audio",
+        assetId,
+        title: "",
+        description: "",
+        color: randomCardColor(),
+        x,
+        y,
+        width: AUDIO_CARD_WIDTH,
+        height: AUDIO_CARD_HEIGHT,
+    };
+}
diff --git a/components/board/board-constants.ts b/components/board/board-constants.ts
new file mode 100644
index 00000000..ee2c7c24
--- /dev/null
+++ b/components/board/board-constants.ts
@@ -0,0 +1,30 @@
+/** Tunables shared by the board canvas, its hooks and its geometry helpers. */
+
+export const GRID_SIZE = 20;
+export const MIN_SCALE = 0.25;
+export const MAX_SCALE = 2;
+/**
+ * Tile size (screen px) the grid's `background-size` is rounded to. Changing
+ * background-size is a paint op, so a continuous pinch would otherwise repaint
+ * a full-viewport gradient every frame; snapping to 4px steps means a full
+ * MIN_SCALE→MAX_SCALE sweep repaints under a dozen times total instead of once
+ * per frame, with no visible difference in dot spacing.
+ */
+export const GRID_TILE_QUANTUM = 4;
+/** Largest edge (in canvas px) an image card is sized to on first drop. */
+export const MAX_IMAGE_CARD_SIZE = 400;
+/** Default size (in canvas px) of an audio voice-note card. */
+export const AUDIO_CARD_WIDTH = 260;
+export const AUDIO_CARD_HEIGHT = 96;
+/** Default size (in canvas px) of a text card. */
+export const TEXT_CARD_WIDTH = 450;
+export const TEXT_CARD_HEIGHT = 280;
+
+/**
+ * The board's active tool. "select" is the plain board — drag cards, pan, marquee.
+ * The rest are offered on touch only (see [tool_controls]), each standing in for
+ * something a finger can't land on the plain board: dragging out of a card's
+ * corner node to link, right-clicking a 2.5px line to cut it, and finding the
+ * 8px corner chevron that resizes a card.
+ */
+export type BoardTool = "select" | "link" | "cut" | "resize";
diff --git a/components/board/board-geometry.ts b/components/board/board-geometry.ts
new file mode 100644
index 00000000..1eff6f7b
--- /dev/null
+++ b/components/board/board-geometry.ts
@@ -0,0 +1,191 @@
+import { BoardCardData } from "@src/lib/project/project-state";
+import { MAX_SCALE, MIN_SCALE } from "./board-constants";
+
+export type CardSide = "top" | "right" | "bottom" | "left";
+
+export type Point = { x: number; y: number };
+
+/** Where a link meets a card: the midpoint of the given edge. */
+export function getConnectionPoint(card: BoardCardData, side: CardSide): Point {
+    const centerX = card.x + card.width / 2;
+    const centerY = card.y + card.height / 2;
+
+    switch (side) {
+        case "top":
+            return { x: centerX, y: card.y };
+        case "right":
+            return { x: card.x + card.width, y: centerY };
+        case "bottom":
+            return { x: centerX, y: card.y + card.height };
+        case "left":
+            return { x: card.x, y: centerY };
+    }
+}
+
+/** Outward unit normal of an edge — the direction a link leaves the card in. */
+export function getSideDirection(side: CardSide): Point {
+    switch (side) {
+        case "top":
+            return { x: 0, y: -1 };
+        case "right":
+            return { x: 1, y: 0 };
+        case "bottom":
+            return { x: 0, y: 1 };
+        case "left":
+            return { x: -1, y: 0 };
+    }
+}
+
+/** The edge a link should leave/enter through, given the direction it travels. */
+function sideForDelta(dx: number, dy: number): { from: CardSide; to: CardSide } {
+    if (Math.abs(dx) > Math.abs(dy)) {
+        // Horizontal dominant
+        return dx > 0 ? { from: "right", to: "left" } : { from: "left", to: "right" };
+    }
+    // Vertical dominant
+    return dy > 0 ? { from: "bottom", to: "top" } : { from: "top", to: "bottom" };
+}
+
+/** Best connection points between two cards, with their perpendicular tangents. */
+export function getArrowPoints(fromCard: BoardCardData, toCard: BoardCardData) {
+    const fromCenter = { x: fromCard.x + fromCard.width / 2, y: fromCard.y + fromCard.height / 2 };
+    const toCenter = { x: toCard.x + toCard.width / 2, y: toCard.y + toCard.height / 2 };
+
+    const { from: fromSide, to: toSide } = sideForDelta(
+        toCenter.x - fromCenter.x,
+        toCenter.y - fromCenter.y,
+    );
+
+    return {
+        from: getConnectionPoint(fromCard, fromSide),
+        to: getConnectionPoint(toCard, toSide),
+        fromDir: getSideDirection(fromSide),
+        toDir: getSideDirection(toSide),
+    };
+}
+
+/** Arrowhead dimensions (canvas px); `ARROW_WIDTH` is a half-width. */
+const ARROW_LENGTH = 24;
+const ARROW_WIDTH = 8;
+
+/**
+ * The two paths that draw a link between cards: the bezier body and the
+ * arrowhead at its end.
+ *
+ * The body stops at the arrowhead's inner notch rather than at the card edge,
+ * so the stroke never pokes through the tip.
+ */
+export function buildArrowPath(fromCard: BoardCardData, toCard: BoardCardData) {
+    const points = getArrowPoints(fromCard, toCard);
+
+    // Control points extend perpendicular to the borders
+    const dist = Math.hypot(points.to.x - points.from.x, points.to.y - points.from.y);
+    const controlDist = Math.max(50, dist * 0.4);
+    const cx1 = points.from.x + points.fromDir.x * controlDist;
+    const cy1 = points.from.y + points.fromDir.y * controlDist;
+    const cx2 = points.to.x + points.toDir.x * controlDist;
+    const cy2 = points.to.y + points.toDir.y * controlDist;
+
+    // Arrowhead angle comes from the curve's end tangent
+    const angle = Math.atan2(points.to.y - cy2, points.to.x - cx2);
+
+    // Back corners (perpendicular to arrow direction)
+    const ax1 = points.to.x - ARROW_LENGTH * Math.cos(angle) + ARROW_WIDTH * Math.sin(angle);
+    const ay1 = points.to.y - ARROW_LENGTH * Math.sin(angle) - ARROW_WIDTH * Math.cos(angle);
+    const ax2 = points.to.x - ARROW_LENGTH * Math.cos(angle) - ARROW_WIDTH * Math.sin(angle);
+    const ay2 = points.to.y - ARROW_LENGTH * Math.sin(angle) + ARROW_WIDTH * Math.cos(angle);
+    // Inner notch (25% from back toward tip), where the line stops
+    const notchDepth = ARROW_LENGTH * 0.75;
+    const axm = points.to.x - notchDepth * Math.cos(angle);
+    const aym = points.to.y - notchDepth * Math.sin(angle);
+
+    return {
+        pathD: `M ${points.from.x} ${points.from.y} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${axm} ${aym}`,
+        arrowheadD: `M ${ax1} ${ay1} L ${points.to.x} ${points.to.y} L ${ax2} ${ay2} L ${axm} ${aym} Z`,
+    };
+}
+
+/**
+ * The dashed line drawn while a link is being dragged out of a card, from the
+ * edge facing the cursor to the cursor itself.
+ */
+export function buildConnectingPath(fromCard: BoardCardData, to: Point): string {
+    const fromCenter = { x: fromCard.x + fromCard.width / 2, y: fromCard.y + fromCard.height / 2 };
+    const { from: fromSide } = sideForDelta(to.x - fromCenter.x, to.y - fromCenter.y);
+    const fromDir = getSideDirection(fromSide);
+    const fromPoint = getConnectionPoint(fromCard, fromSide);
+
+    const dist = Math.hypot(to.x - fromPoint.x, to.y - fromPoint.y);
+    const controlDist = Math.max(30, dist * 0.3);
+    const cx = fromPoint.x + fromDir.x * controlDist;
+    const cy = fromPoint.y + fromDir.y * controlDist;
+
+    return `M ${fromPoint.x} ${fromPoint.y} Q ${cx} ${cy}, ${to.x} ${to.y}`;
+}
+
+/** Padding (canvas px) left around the cards when fitting the camera to them. */
+const FIT_PADDING = 100;
+
+/**
+ * Camera that frames every given card inside a viewport, clamped to the zoom
+ * range. Returns null when there is nothing to frame.
+ */
+export function fitCameraToCards(
+    cards: BoardCardData[],
+    viewport: { width: number; height: number },
+): { scale: number; offset: Point } | null {
+    if (cards.length === 0) return null;
+
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const card of cards) {
+        minX = Math.min(minX, card.x);
+        minY = Math.min(minY, card.y);
+        maxX = Math.max(maxX, card.x + card.width);
+        maxY = Math.max(maxY, card.y + card.height);
+    }
+
+    minX -= FIT_PADDING;
+    minY -= FIT_PADDING;
+    maxX += FIT_PADDING;
+    maxY += FIT_PADDING;
+
+    const boundsCenterX = (minX + maxX) / 2;
+    const boundsCenterY = (minY + maxY) / 2;
+
+    const scaleX = viewport.width / (maxX - minX);
+    const scaleY = viewport.height / (maxY - minY);
+    const scale = clampScale(Math.min(scaleX, scaleY));
+
+    return {
+        scale,
+        offset: {
+            x: viewport.width / 2 - boundsCenterX * scale,
+            y: viewport.height / 2 - boundsCenterY * scale,
+        },
+    };
+}
+
+export function clampScale(scale: number): number {
+    return Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale));
+}
+
+/**
+ * Zoom about a fixed screen point: the canvas point under it stays put.
+ * `anchor` is relative to the container's top-left.
+ */
+export function zoomAround(
+    anchor: Point,
+    camera: { offset: Point; scale: number },
+    factor: number,
+): { scale: number; offset: Point } {
+    const newScale = clampScale(camera.scale * factor);
+    const canvasX = (anchor.x - camera.offset.x) / camera.scale;
+    const canvasY = (anchor.y - camera.offset.y) / camera.scale;
+    return {
+        scale: newScale,
+        offset: { x: anchor.x - canvasX * newScale, y: anchor.y - canvasY * newScale },
+    };
+}
diff --git a/components/board/board-menus.tsx b/components/board/board-menus.tsx
new file mode 100644
index 00000000..c459ec2d
--- /dev/null
+++ b/components/board/board-menus.tsx
@@ -0,0 +1,215 @@
+"use client";
+
+import { useCallback, useContext, useEffect, useMemo, useRef } from "react";
+import { useTranslations } from "next-intl";
+import { Copy, Image as ImageIcon, Layers, ListTree, Mic, Plus, Trash2 } from "lucide-react";
+import {
+    ContextMenuColorRow,
+    ContextMenuItem,
+    ContextMenuSeparator,
+    ContextMenuSubmenu,
+} from "@components/utils/ContextMenu";
+import { ProjectContext } from "@src/context/ProjectContext";
+import { UserContext } from "@src/context/UserContext";
+import { BoardArrowData, BoardCardData, TimelineLayer } from "@src/lib/project/project-state";
+import { DEFAULT_ITEM_COLORS } from "@src/lib/utils/colors";
+import styles from "./BoardCanvas.module.css";
+import { BoardCamera } from "./use-board-camera";
+
+type BoardMenuActions = {
+    canRecord: boolean;
+    createCard: (x: number, y: number) => void;
+    importImage: (x: number, y: number) => void;
+    recordAudio: (x: number, y: number) => void;
+    changeCardColor: (id: string, color: string) => void;
+    duplicateCard: (card: BoardCardData) => void;
+    sendToTimeline: (card: BoardCardData, layerId?: string) => void;
+    deleteCard: (id: string) => void;
+    deleteArrow: (id: string) => void;
+};
+
+/**
+ * The board's three context menus — empty canvas, card, arrow — as openers that
+ * hand their content to the shared menu host.
+ */
+export function useBoardMenus(camera: BoardCamera, actions: BoardMenuActions) {
+    const { isReadOnly, repository, timelineLayers } = useContext(ProjectContext);
+    const { updateContextMenu } = useContext(UserContext);
+    const t = useTranslations("board");
+    // Used only to name the default lanes when the board seeds them (below).
+    const tTimeline = useTranslations("timeline");
+    const { toCanvasPoint } = camera;
+
+    // The openers must keep a stable identity — `showCardMenu` is a prop of a
+    // memoised BoardCard, so a new one per render would re-render every card on
+    // the board. Reading the actions through a ref means the caller can pass a
+    // plain object literal without any of that leaking out. Menus are only ever
+    // built from an event handler, long after this has been filled in.
+    const actionsRef = useRef(actions);
+    useEffect(() => {
+        actionsRef.current = actions;
+    });
+
+    // Timeline layers flattened into display order (depth-annotated), mirroring
+    // the Timeline panel's tree so the "Send to timeline" submenu matches it.
+    const orderedLayers = useMemo(() => {
+        const out: { layer: TimelineLayer; depth: number }[] = [];
+        const childrenOf = (parentId: string | null) =>
+            Object.values(timelineLayers)
+                .filter((l) => (l.parentId ?? null) === parentId)
+                .sort((a, b) => a.order - b.order);
+        const walk = (parentId: string | null, depth: number) => {
+            for (const layer of childrenOf(parentId)) {
+                out.push({ layer, depth });
+                walk(layer.id, depth + 1);
+            }
+        };
+        walk(null, 0);
+        return out;
+    }, [timelineLayers]);
+
+    /**
+     * Lanes to offer in the "Send to timeline" submenu. The default lanes are
+     * otherwise only seeded when the Timeline panel is first opened, so a
+     * board-first user got an empty list (and a flat menu item) until they'd
+     * either opened the timeline or sent a card once — `appendTimelineClip`
+     * seeds too. Seeding here as well keeps the lanes listed on the very first
+     * right-click. Idempotent, and a no-op on a read-only project.
+     */
+    const resolveTimelineLayers = useCallback(() => {
+        if (orderedLayers.length > 0) return orderedLayers;
+        const seeded =
+            repository?.ensureTimelineLayers(2, (i) => `${tTimeline("layer")} ${i + 1}`) ?? [];
+        return seeded.map((layer) => ({ layer, depth: 0 }));
+    }, [orderedLayers, repository, tTimeline]);
+
+    /**
+     * Build the empty-canvas menu (create card / import image / record audio) at
+     * the given *screen* coords, resolving the canvas-space drop point via the camera.
+     */
+    const showCanvasMenu = useCallback(
+        (screenX: number, screenY: number) => {
+            if (isReadOnly) return;
+            const { x, y } = toCanvasPoint(screenX, screenY);
+            updateContextMenu({
+                position: { x: screenX, y: screenY },
+                content: (
+                    <>
+                        <ContextMenuItem
+                            icon={Plus}
+                            text={t("createCard")}
+                            action={() => actionsRef.current.createCard(x, y)}
+                        />
+                        <ContextMenuItem
+                            icon={ImageIcon}
+                            text={t("importImage")}
+                            action={() => actionsRef.current.importImage(x, y)}
+                        />
+                        <ContextMenuItem
+                            icon={Mic}
+                            text={t("recordAudio")}
+                            action={() => actionsRef.current.recordAudio(x, y)}
+                            disabled={!actionsRef.current.canRecord}
+                            title={actionsRef.current.canRecord ? undefined : t("audioUnsupported")}
+                        />
+                    </>
+                ),
+            });
+        },
+        [isReadOnly, toCanvasPoint, updateContextMenu, t],
+    );
+
+    // Right-clicking empty canvas opens the menu. Cards and arrows have their own
+    // menus, so bail when the click landed on one.
+    const handleCanvasContextMenu = useCallback(
+        (e: React.MouseEvent) => {
+            if (isReadOnly) return;
+            const target = e.target as HTMLElement;
+            if (
+                target.closest(`.${styles.card}`) ||
+                target.closest(`.${styles.arrow_group}`) ||
+                target.closest("[data-context-menu]") ||
+                target.closest(`.${styles.zoom_controls}`)
+            )
+                return;
+            e.preventDefault();
+            showCanvasMenu(e.clientX, e.clientY);
+        },
+        [isReadOnly, showCanvasMenu],
+    );
+
+    const showCardMenu = useCallback(
+        (e: React.MouseEvent, card: BoardCardData) => {
+            const layers = resolveTimelineLayers();
+            updateContextMenu({
+                position: { x: e.clientX, y: e.clientY },
+                content: (
+                    <>
+                        {/* Color applies to text + audio notes; image cards have none. */}
+                        {card.type !== "image" && (
+                            <>
+                                <ContextMenuColorRow
+                                    colors={DEFAULT_ITEM_COLORS}
+                                    selected={card.color}
+                                    onSelect={(color) => actionsRef.current.changeCardColor(card.id, color)}
+                                />
+                                <ContextMenuSeparator />
+                            </>
+                        )}
+                        <ContextMenuItem
+                            icon={Copy}
+                            text={t("duplicate")}
+                            action={() => actionsRef.current.duplicateCard(card)}
+                        />
+                        {(card.type ?? "text") === "text" &&
+                            (layers.length > 0 ? (
+                                <ContextMenuSubmenu icon={ListTree} text={t("sendToTimeline")}>
+                                    {layers.map(({ layer, depth }) => (
+                                        <ContextMenuItem
+                                            key={layer.id}
+                                            icon={Layers}
+                                            indent={depth * 14}
+                                            text={layer.name || t("untitled")}
+                                            action={() => actionsRef.current.sendToTimeline(card, layer.id)}
+                                        />
+                                    ))}
+                                </ContextMenuSubmenu>
+                            ) : (
+                                <ContextMenuItem
+                                    icon={ListTree}
+                                    text={t("sendToTimeline")}
+                                    action={() => actionsRef.current.sendToTimeline(card)}
+                                />
+                            ))}
+                        <ContextMenuItem
+                            icon={Trash2}
+                            text={t("delete")}
+                            action={() => actionsRef.current.deleteCard(card.id)}
+                        />
+                    </>
+                ),
+            });
+        },
+        [updateContextMenu, t, resolveTimelineLayers],
+    );
+
+    const showArrowMenu = useCallback(
+        (e: React.MouseEvent, arrow: BoardArrowData) => {
+            e.preventDefault();
+            e.stopPropagation();
+            updateContextMenu({
+                position: { x: e.clientX, y: e.clientY },
+                content: (
+                    <ContextMenuItem
+                        icon={Trash2}
+                        text={t("delete")}
+                        action={() => actionsRef.current.deleteArrow(arrow.id)}
+                    />
+                ),
+            });
+        },
+        [updateContextMenu, t],
+    );
+
+    return { showCanvasMenu, handleCanvasContextMenu, showCardMenu, showArrowMenu };
+}
diff --git a/components/board/use-board-assets.ts b/components/board/use-board-assets.ts
new file mode 100644
index 00000000..94c920e5
--- /dev/null
+++ b/components/board/use-board-assets.ts
@@ -0,0 +1,214 @@
+"use client";
+
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { useTranslations } from "next-intl";
+import { ProjectContext } from "@src/context/ProjectContext";
+import { BoardCardData } from "@src/lib/project/project-state";
+import { importAudioFile, importImageFile, syncAssetToCloud } from "@src/lib/assets/asset-store";
+import { CloudQuotaError } from "@src/lib/assets/cloud-asset-sync";
+import { createAudioCard, createImageCard } from "./board-cards";
+import { useAudioRecorder } from "./use-audio-recorder";
+import { BoardCamera } from "./use-board-camera";
+
+/** How long the transient asset-error banner stays up. */
+const ASSET_ERROR_MS = 4000;
+/** Canvas-px stagger between cards created from a multi-file drop. */
+const DROP_STAGGER = 24;
+
+/**
+ * Bringing media onto the board: OS file drops, the image picker, and voice
+ * notes. Each import stores the bytes locally first and drops its card
+ * immediately, then uploads in the background — so the card appears at once and
+ * still renders offline.
+ */
+export function useBoardAssets(
+    camera: BoardCamera,
+    cards: {
+        addCards: (cards: BoardCardData[]) => void;
+        removeCards: (ids: Set<string>) => void;
+    },
+) {
+    const { projectId, isReadOnly } = useContext(ProjectContext);
+    const t = useTranslations("board");
+    const recorder = useAudioRecorder();
+    const { addCards, removeCards } = cards;
+    const { toCanvasPoint } = camera;
+
+    const [isDraggingFile, setIsDraggingFile] = useState(false);
+    /** Transient banner shown when an asset can't be saved (e.g. cloud quota). */
+    const [assetError, setAssetError] = useState<string | null>(null);
+    const assetErrorTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const imageInput = useRef<HTMLInputElement | null>(null);
+    /** Callback ref, so the input element is wired up without handing a ref out. */
+    const setImageInput = useCallback((el: HTMLInputElement | null) => {
+        imageInput.current = el;
+    }, []);
+    const imageImportCoords = useRef({ x: 0, y: 0 });
+    /** Canvas-space coords captured when recording starts, for the resulting card. */
+    const recordCoords = useRef({ x: 0, y: 0 });
+
+    const showAssetError = useCallback((message: string) => {
+        setAssetError(message);
+        if (assetErrorTimer.current) clearTimeout(assetErrorTimer.current);
+        assetErrorTimer.current = setTimeout(() => setAssetError(null), ASSET_ERROR_MS);
+    }, []);
+
+    useEffect(
+        () => () => {
+            if (assetErrorTimer.current) clearTimeout(assetErrorTimer.current);
+        },
+        [],
+    );
+
+    // Upload the new cards' assets to the cloud in the background. If an upload
+    // is rejected for quota, roll that card back and explain why.
+    const syncCreatedAssets = useCallback(
+        (createdCards: BoardCardData[], pid: string) => {
+            for (const card of createdCards) {
+                if (!card.assetId) continue;
+                const cardId = card.id;
+                void syncAssetToCloud(pid, card.assetId).catch((err) => {
+                    if (err instanceof CloudQuotaError) {
+                        removeCards(new Set([cardId]));
+                        showAssetError(t("storageLimitReached"));
+                    } else {
+                        console.error("[BoardCanvas] cloud asset upload failed:", err);
+                    }
+                });
+            }
+        },
+        [removeCards, showAssetError, t],
+    );
+
+    /** Add already-built asset cards to the board and start their upload. */
+    const commitAssetCards = useCallback(
+        (created: BoardCardData[], pid: string) => {
+            if (created.length === 0) return;
+            addCards(created);
+            syncCreatedAssets(created, pid);
+        },
+        [addCards, syncCreatedAssets],
+    );
+
+    // ── OS file drag & drop ───────────────────────────────────────────────────
+
+    /** Highlight the canvas while an OS file drag hovers over it. */
+    const handleDragOver = useCallback(
+        (e: React.DragEvent) => {
+            if (isReadOnly) return;
+            if (!Array.from(e.dataTransfer.types).includes("Files")) return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = "copy";
+            setIsDraggingFile(true);
+        },
+        [isReadOnly],
+    );
+
+    const handleDragLeave = useCallback((e: React.DragEvent) => {
+        // Ignore leave events fired when moving between the container's children.
+        if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setIsDraggingFile(false);
+    }, []);
+
+    const handleDrop = useCallback(
+        async (e: React.DragEvent) => {
+            e.preventDefault();
+            setIsDraggingFile(false);
+            if (isReadOnly || !projectId) return;
+
+            const files = Array.from(e.dataTransfer.files).filter(
+                (f) => f.type.startsWith("image/") || f.type.startsWith("audio/"),
+            );
+            if (files.length === 0) return;
+
+            const drop = toCanvasPoint(e.clientX, e.clientY);
+
+            const created: BoardCardData[] = [];
+            for (const file of files) {
+                const x = drop.x + created.length * DROP_STAGGER;
+                const y = drop.y + created.length * DROP_STAGGER;
+                try {
+                    if (file.type.startsWith("audio/")) {
+                        const { hash } = await importAudioFile(projectId, file);
+                        created.push(createAudioCard(hash, x, y));
+                    } else {
+                        const { hash, width, height } = await importImageFile(projectId, file);
+                        created.push(createImageCard(hash, width, height, x, y));
+                    }
+                } catch (err) {
+                    console.error("[BoardCanvas] Failed to import dropped file:", err);
+                }
+            }
+
+            commitAssetCards(created, projectId);
+        },
+        [isReadOnly, projectId, toCanvasPoint, commitAssetCards],
+    );
+
+    // ── Image picker (mobile has no drag & drop) ──────────────────────────────
+
+    const openImagePicker = useCallback((x: number, y: number) => {
+        imageImportCoords.current = { x, y };
+        imageInput.current?.click();
+    }, []);
+
+    const handleImageInputChange = useCallback(
+        (e: React.ChangeEvent<HTMLInputElement>) => {
+            const file = e.target.files?.[0];
+            e.target.value = "";
+            if (!file || isReadOnly || !projectId) return;
+            const { x, y } = imageImportCoords.current;
+            void (async () => {
+                try {
+                    const { hash, width, height } = await importImageFile(projectId, file);
+                    commitAssetCards([createImageCard(hash, width, height, x, y)], projectId);
+                } catch (err) {
+                    console.error("[BoardCanvas] Failed to import image:", err);
+                }
+            })();
+        },
+        [isReadOnly, projectId, commitAssetCards],
+    );
+
+    // ── Voice notes ───────────────────────────────────────────────────────────
+
+    /** Begin recording; remember where to drop the resulting card. */
+    const startRecording = useCallback(
+        async (x: number, y: number) => {
+            recordCoords.current = { x, y };
+            try {
+                await recorder.start();
+            } catch (err) {
+                console.error("[BoardCanvas] Microphone access failed:", err);
+            }
+        },
+        [recorder],
+    );
+
+    /** Stop recording, store the clip as an asset, and drop an audio card. */
+    const stopRecording = useCallback(async () => {
+        const blob = await recorder.stop();
+        if (!blob || !projectId) return;
+        try {
+            const { hash } = await importAudioFile(projectId, blob);
+            const { x, y } = recordCoords.current;
+            commitAssetCards([createAudioCard(hash, x, y)], projectId);
+        } catch (err) {
+            console.error("[BoardCanvas] Failed to store recording:", err);
+        }
+    }, [recorder, projectId, commitAssetCards]);
+
+    return {
+        recorder,
+        assetError,
+        isDraggingFile,
+        handleDragOver,
+        handleDragLeave,
+        handleDrop,
+        setImageInput,
+        handleImageInputChange,
+        openImagePicker,
+        startRecording,
+        stopRecording,
+    };
+}
diff --git a/components/board/use-board-camera.ts b/components/board/use-board-camera.ts
new file mode 100644
index 00000000..64fa8749
--- /dev/null
+++ b/components/board/use-board-camera.ts
@@ -0,0 +1,199 @@
+"use client";
+
+import { RefObject, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { BoardCardData } from "@src/lib/project/project-state";
+import { GRID_SIZE, GRID_TILE_QUANTUM } from "./board-constants";
+import { fitCameraToCards, Point, zoomAround } from "./board-geometry";
+
+export type BoardCamera = ReturnType<typeof useBoardCamera>;
+
+/**
+ * The board's viewport: pan offset, zoom, and every way they change (wheel,
+ * buttons, middle-drag, fitting to cards), plus the screen↔canvas conversion
+ * everything else on the board goes through.
+ */
+export function useBoardCamera(containerRef: RefObject<HTMLDivElement | null>) {
+    const [offset, setOffset] = useState<Point>({ x: 0, y: 0 });
+    const [scale, setScale] = useState(1);
+    const [isPanning, setIsPanning] = useState(false);
+
+    // Mirrors of the state above, so handlers that run many times per frame
+    // (gestures, global listeners) can read the current camera without being
+    // re-created — and re-subscribed — on every frame they cause.
+    const offsetRef = useRef(offset);
+    const scaleRef = useRef(scale);
+    useEffect(() => {
+        offsetRef.current = offset;
+    }, [offset]);
+    useEffect(() => {
+        scaleRef.current = scale;
+    }, [scale]);
+
+    const getOffset = useCallback(() => offsetRef.current, []);
+    const getScale = useCallback(() => scaleRef.current, []);
+
+    const panStart = useRef({ x: 0, y: 0, offsetX: 0, offsetY: 0 });
+
+    /**
+     * The container's viewport rect, captured once when a gesture starts.
+     *
+     * Every move handler needs it to map a pointer to canvas space, but reading
+     * it per frame is a `getBoundingClientRect()` on a document the board has
+     * just dirtied — a forced synchronous layout of *everything* still on
+     * screen (the navigation drawer's scene list, the timeline strip, the
+     * parked screenplay editor) on every single move event. The panel itself
+     * cannot move mid-gesture, so the rect taken at gesture start stays correct
+     * and the whole per-frame relayout goes away.
+     */
+    const gestureRect = useRef<DOMRect | null>(null);
+    const captureGestureRect = useCallback(() => {
+        const rect = containerRef.current?.getBoundingClientRect() ?? null;
+        gestureRect.current = rect;
+        return rect;
+    }, [containerRef]);
+
+    const getGestureRect = useCallback(() => gestureRect.current, []);
+
+    /**
+     * Drop the captured rect, so the next gesture measures fresh — the panel may
+     * have moved since (a drawer, a split resize).
+     */
+    const releaseGestureRect = useCallback(() => {
+        gestureRect.current = null;
+    }, []);
+
+    /**
+     * Screen point → canvas point. Uses the gesture's captured rect when there
+     * is one, and otherwise measures: the discrete taps that call this outside a
+     * gesture (double-tap to create, long-press menu, file drop) are cheap
+     * enough to measure fresh, and must not leave a rect behind for the next
+     * gesture to trust.
+     */
+    const toCanvasPoint = useCallback(
+        (clientX: number, clientY: number): Point => {
+            const rect = gestureRect.current ?? containerRef.current?.getBoundingClientRect();
+            if (!rect) return { x: 0, y: 0 };
+            return {
+                x: (clientX - rect.left - offsetRef.current.x) / scaleRef.current,
+                y: (clientY - rect.top - offsetRef.current.y) / scaleRef.current,
+            };
+        },
+        [containerRef],
+    );
+
+    /** Frame the given cards, centered, at whatever zoom fits them. */
+    const centerCameraOnCards = useCallback(
+        (cardsToFit: BoardCardData[]) => {
+            const container = containerRef.current;
+            if (!container) return;
+            const rect = container.getBoundingClientRect();
+            const camera = fitCameraToCards(cardsToFit, {
+                width: rect.width,
+                height: rect.height,
+            });
+            if (!camera) return;
+            setScale(camera.scale);
+            setOffset(camera.offset);
+        },
+        [containerRef],
+    );
+
+    const applyZoom = useCallback((anchor: Point, factor: number) => {
+        const next = zoomAround(anchor, { offset: offsetRef.current, scale: scaleRef.current }, factor);
+        setScale(next.scale);
+        setOffset(next.offset);
+    }, []);
+
+    // Zoom with the mouse wheel, centered on the cursor. Attached as a native
+    // non-passive listener because React registers onWheel as passive, which
+    // makes preventDefault() a no-op and warns.
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container) return;
+        const onWheel = (e: WheelEvent) => {
+            e.preventDefault();
+            const rect = container.getBoundingClientRect();
+            applyZoom({ x: e.clientX - rect.left, y: e.clientY - rect.top }, e.deltaY > 0 ? 0.9 : 1.1);
+        };
+        container.addEventListener("wheel", onWheel, { passive: false });
+        return () => container.removeEventListener("wheel", onWheel);
+    }, [containerRef, applyZoom]);
+
+    /** Zoom from the buttons — centered on the viewport. */
+    const zoomFromCenter = useCallback(
+        (zoomIn: boolean) => {
+            const rect = containerRef.current?.getBoundingClientRect();
+            if (!rect) return;
+            applyZoom({ x: rect.width / 2, y: rect.height / 2 }, zoomIn ? 1.2 : 0.8);
+        },
+        [containerRef, applyZoom],
+    );
+
+    /** Panning with middle-click. */
+    const handlePanMouseDown = useCallback((e: React.MouseEvent) => {
+        if (e.button !== 1) return;
+        e.preventDefault(); // Prevent autoscroll on middle-click
+
+        setIsPanning(true);
+        panStart.current = {
+            x: e.clientX,
+            y: e.clientY,
+            offsetX: offsetRef.current.x,
+            offsetY: offsetRef.current.y,
+        };
+    }, []);
+
+    useEffect(() => {
+        if (!isPanning) return;
+
+        const onMouseMove = (e: MouseEvent) => {
+            setOffset({
+                x: panStart.current.offsetX + (e.clientX - panStart.current.x),
+                y: panStart.current.offsetY + (e.clientY - panStart.current.y),
+            });
+        };
+        const onMouseUp = () => setIsPanning(false);
+
+        window.addEventListener("mousemove", onMouseMove);
+        window.addEventListener("mouseup", onMouseUp);
+        return () => {
+            window.removeEventListener("mousemove", onMouseMove);
+            window.removeEventListener("mouseup", onMouseUp);
+        };
+    }, [isPanning]);
+
+    // Grid placement. Pan is expressed purely as a transform, so a pan frame
+    // writes nothing but `transform` and the compositor does the rest; the tile
+    // size is quantized (see GRID_TILE_QUANTUM) so zoom only touches
+    // background-size a handful of times across a gesture, not every frame.
+    const gridPattern = useMemo(() => {
+        const tile = Math.max(
+            GRID_TILE_QUANTUM,
+            Math.round((GRID_SIZE * scale) / GRID_TILE_QUANTUM) * GRID_TILE_QUANTUM,
+        );
+        return {
+            backgroundSize: `${tile}px ${tile}px`,
+            inset: `${-tile}px`,
+            transform: `translate3d(${offset.x % tile}px, ${offset.y % tile}px, 0)`,
+        };
+    }, [scale, offset]);
+
+    return {
+        offset,
+        setOffset,
+        /** The live camera, for handlers that run between renders. */
+        getOffset,
+        scale,
+        setScale,
+        getScale,
+        isPanning,
+        handlePanMouseDown,
+        zoomFromCenter,
+        centerCameraOnCards,
+        captureGestureRect,
+        releaseGestureRect,
+        getGestureRect,
+        toCanvasPoint,
+        gridPattern,
+    };
+}
diff --git a/components/board/use-board-card-actions.ts b/components/board/use-board-card-actions.ts
new file mode 100644
index 00000000..8000c5b4
--- /dev/null
+++ b/components/board/use-board-card-actions.ts
@@ -0,0 +1,151 @@
+"use client";
+
+import { useCallback, useContext } from "react";
+import { v7 as uuidv7 } from "uuid";
+import { ProjectContext } from "@src/context/ProjectContext";
+import { BoardCardData } from "@src/lib/project/project-state";
+import { scheduleAssetGc } from "@src/lib/assets/asset-gc";
+import { createTextCard } from "./board-cards";
+import { BoardDocument } from "./use-board-document";
+
+export type BoardCardActions = ReturnType<typeof useBoardCardActions>;
+
+/**
+ * Everything the board does *to* cards — create, move, recolour, duplicate,
+ * delete, send to the timeline.
+ *
+ * All of it reads the card list through the document's ref rather than through
+ * render state, both to compose correctly within a batch and to keep these
+ * callbacks identity-stable: several are props of a memoised BoardCard, where a
+ * new identity per frame would re-render every card on the board.
+ */
+export function useBoardCardActions(
+    doc: BoardDocument,
+    options: {
+        docId: string;
+        isSnapping: boolean;
+        selectedCardIds: Set<string>;
+        clearSelection: () => void;
+    },
+) {
+    const { projectId, repository } = useContext(ProjectContext);
+    const projectState = repository?.getState();
+    const { getCards, commitCards, removeArrowsForCard } = doc;
+    const { docId, isSnapping, selectedCardIds, clearSelection } = options;
+
+    const addCards = useCallback(
+        (newCards: BoardCardData[]) => commitCards([...getCards(), ...newCards]),
+        [getCards, commitCards],
+    );
+
+    /** Remove cards by id (also used to roll back a card whose asset can't be saved). */
+    const removeCards = useCallback(
+        (ids: Set<string>) => commitCards(getCards().filter((c) => !ids.has(c.id))),
+        [getCards, commitCards],
+    );
+
+    /** Create a text card at the given canvas-space coords. */
+    const createCard = useCallback(
+        (x: number, y: number) => {
+            clearSelection();
+            addCards([createTextCard(x, y, isSnapping)]);
+        },
+        [clearSelection, addCards, isSnapping],
+    );
+
+    const duplicateCard = useCallback(
+        (card: BoardCardData) => {
+            addCards([{ ...card, id: uuidv7(), x: card.x + 20, y: card.y + 20 }]);
+        },
+        [addCards],
+    );
+
+    const changeCardColor = useCallback(
+        (id: string, color: string) => {
+            commitCards(getCards().map((c) => (c.id === id ? { ...c, color } : c)));
+        },
+        [getCards, commitCards],
+    );
+
+    /** Delete a card, the links that hung off it, and any asset it orphaned. */
+    const deleteCard = useCallback(
+        (id: string) => {
+            removeCards(new Set([id]));
+            removeArrowsForCard(id);
+            // Deleting an image card may orphan its asset — reconcile (debounced).
+            if (projectId && projectState) scheduleAssetGc(projectId, projectState);
+        },
+        [removeCards, removeArrowsForCard, projectId, projectState],
+    );
+
+    /**
+     * Apply a card's new geometry, dragging the rest of the selection along when
+     * the card being moved is part of a multi-selection. Resizes stay single-card.
+     */
+    const updateCard = useCallback(
+        (updatedCard: BoardCardData, options?: { transient?: boolean }) => {
+            const current = getCards();
+            const isMultiDrag = selectedCardIds.has(updatedCard.id) && selectedCardIds.size > 1;
+
+            if (isMultiDrag) {
+                const oldCard = current.find((c) => c.id === updatedCard.id);
+                const dx = oldCard ? updatedCard.x - oldCard.x : 0;
+                const dy = oldCard ? updatedCard.y - oldCard.y : 0;
+                const isResize =
+                    !!oldCard &&
+                    (updatedCard.width !== oldCard.width || updatedCard.height !== oldCard.height);
+
+                if ((dx !== 0 || dy !== 0) && !isResize) {
+                    commitCards(
+                        current.map((c) => {
+                            if (c.id === updatedCard.id) return updatedCard;
+                            if (selectedCardIds.has(c.id)) return { ...c, x: c.x + dx, y: c.y + dy };
+                            return c;
+                        }),
+                        options,
+                    );
+                    return;
+                }
+            }
+
+            commitCards(
+                current.map((c) => (c.id === updatedCard.id ? updatedCard : c)),
+                options,
+            );
+        },
+        [getCards, commitCards, selectedCardIds],
+    );
+
+    /**
+     * Send a card to the Timeline — to a specific layer when `layerId` is given,
+     * otherwise to the default (first root) lane.
+     */
+    const sendToTimeline = useCallback(
+        (card: BoardCardData, layerId?: string) => {
+            repository?.appendTimelineClip(
+                {
+                    source: "card",
+                    refDocId: docId,
+                    refId: card.id,
+                    title: card.title,
+                    preview: card.description,
+                    color: card.color,
+                },
+                undefined,
+                layerId,
+            );
+        },
+        [repository, docId],
+    );
+
+    return {
+        addCards,
+        removeCards,
+        createCard,
+        duplicateCard,
+        changeCardColor,
+        deleteCard,
+        updateCard,
+        sendToTimeline,
+    };
+}
diff --git a/components/board/use-board-connections.ts b/components/board/use-board-connections.ts
new file mode 100644
index 00000000..d1a7153c
--- /dev/null
+++ b/components/board/use-board-connections.ts
@@ -0,0 +1,154 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Point } from "./board-geometry";
+import { BoardCamera } from "./use-board-camera";
+
+/**
+ * Linking cards, both ways in: dragging out of a card's corner node (pointer,
+ * and its touch equivalent), and the tap-then-tap link tool. Plus the cut tool,
+ * which is the same subject from the other end.
+ */
+export function useBoardConnections(
+    camera: BoardCamera,
+    arrows: { addArrow: (fromCardId: string, toCardId: string) => void; removeArrow: (id: string) => void },
+) {
+    const { toCanvasPoint, captureGestureRect, releaseGestureRect, getGestureRect } = camera;
+    const { addArrow, removeArrow } = arrows;
+
+    const [connectingFrom, setConnectingFrom] = useState<{ cardId: string; side: string } | null>(
+        null,
+    );
+    const [connectingLine, setConnectingLine] = useState<Point | null>(null);
+
+    /** Link tool: the card tapped first, waiting for the target tap. */
+    const [linkSource, setLinkSource] = useState<string | null>(null);
+    // Mirrored into a ref so the card tap handler can stay identity-stable: it is
+    // a BoardCard prop, and a callback that changed on every tap would re-render
+    // every card on the board (see the memo note at the bottom of BoardCard).
+    const linkSourceRef = useRef<string | null>(null);
+
+    const startConnection = useCallback(
+        (cardId: string, side: string, initialX: number, initialY: number) => {
+            captureGestureRect();
+            setConnectingFrom({ cardId, side });
+            setConnectingLine({ x: initialX, y: initialY });
+        },
+        [captureGestureRect],
+    );
+
+    const cancelConnection = useCallback(() => {
+        setConnectingFrom(null);
+        setConnectingLine(null);
+    }, []);
+
+    const completeConnection = useCallback(
+        (toCardId: string) => {
+            if (connectingFrom) addArrow(connectingFrom.cardId, toCardId);
+            cancelConnection();
+        },
+        [connectingFrom, addArrow, cancelConnection],
+    );
+
+    // Track the pointer/finger while a connection is being dragged out.
+    useEffect(() => {
+        if (!connectingFrom) return;
+
+        const trackTo = (clientX: number, clientY: number) => {
+            if (!getGestureRect()) return;
+            setConnectingLine(toCanvasPoint(clientX, clientY));
+        };
+
+        const onMouseMove = (e: MouseEvent) => trackTo(e.clientX, e.clientY);
+        const onTouchMove = (e: TouchEvent) => {
+            const touch = e.touches[0];
+            if (touch) trackTo(touch.clientX, touch.clientY);
+        };
+        // Read from the release point itself, not from the last point touchmove
+        // happened to report: a connection begun and let go without the finger
+        // moving fires no touchmove at all, and resolving a stale point drops the
+        // link on whatever card sat under the *previous* gesture's endpoint.
+        const onTouchEnd = (e: TouchEvent) => {
+            const touch = e.changedTouches[0];
+            if (!touch) return cancelConnection();
+            const el = document.elementFromPoint(touch.clientX, touch.clientY) as HTMLElement | null;
+            const targetId = el?.closest("[data-card-id]")?.getAttribute("data-card-id");
+            if (targetId) completeConnection(targetId);
+            else cancelConnection();
+        };
+
+        window.addEventListener("mousemove", onMouseMove);
+        window.addEventListener("mouseup", cancelConnection);
+        window.addEventListener("touchmove", onTouchMove, { passive: true });
+        window.addEventListener("touchend", onTouchEnd);
+
+        return () => {
+            window.removeEventListener("mousemove", onMouseMove);
+            window.removeEventListener("mouseup", cancelConnection);
+            window.removeEventListener("touchmove", onTouchMove);
+            window.removeEventListener("touchend", onTouchEnd);
+            releaseGestureRect();
+        };
+    }, [
+        connectingFrom,
+        completeConnection,
+        cancelConnection,
+        toCanvasPoint,
+        getGestureRect,
+        releaseGestureRect,
+    ]);
+
+    const clearLinkSource = useCallback(() => {
+        linkSourceRef.current = null;
+        setLinkSource(null);
+    }, []);
+
+    /**
+     * A tap on a card with the link tool armed. The first tap picks the source,
+     * the second draws the arrow to it; tapping the source again lets go of it.
+     * The tool stays armed after a link lands, so building a chain is one
+     * uninterrupted run of taps rather than a round trip to the toolbar each time.
+     */
+    const handleLinkTap = useCallback(
+        (cardId: string) => {
+            const source = linkSourceRef.current;
+            if (!source) {
+                linkSourceRef.current = cardId;
+                setLinkSource(cardId);
+                return;
+            }
+            if (source !== cardId) addArrow(source, cardId);
+            clearLinkSource();
+        },
+        [addArrow, clearLinkSource],
+    );
+
+    /**
+     * Cut whatever link lies under a viewport point, if any.
+     *
+     * Hit-testing through `elementFromPoint` reuses the arrows' own hitbox
+     * strokes — widened while the tool is armed, see .arrow_group_cut — instead
+     * of re-deriving every bezier here. Cards render above the arrow layer, so a
+     * slash passing over one simply cuts nothing for that stretch, which is the
+     * right answer anyway: the link is hidden behind the card there.
+     */
+    const cutArrowAt = useCallback(
+        (clientX: number, clientY: number) => {
+            const el = document.elementFromPoint(clientX, clientY);
+            const id = el?.closest("[data-arrow-id]")?.getAttribute("data-arrow-id");
+            if (id) removeArrow(id);
+        },
+        [removeArrow],
+    );
+
+    return {
+        connectingFrom,
+        connectingLine,
+        startConnection,
+        completeConnection,
+        linkSource,
+        clearLinkSource,
+        handleLinkTap,
+        cutArrowAt,
+    };
+}
diff --git a/components/board/use-board-document.ts b/components/board/use-board-document.ts
new file mode 100644
index 00000000..1b2ac081
--- /dev/null
+++ b/components/board/use-board-document.ts
@@ -0,0 +1,185 @@
+"use client";
+
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { v7 as uuidv7 } from "uuid";
+import { ProjectContext } from "@src/context/ProjectContext";
+import { BoardArrowData, BoardCardData } from "@src/lib/project/project-state";
+
+export type BoardDocument = ReturnType<typeof useBoardDocument>;
+
+/**
+ * The board's cards and arrows, kept in sync with the project's Yjs document.
+ *
+ * Both lists are mirrored into refs alongside their state. Every mutation
+ * composes onto the ref rather than onto the state its closure captured: a
+ * gesture emits several updates inside a single React batch (one slash of the
+ * cut tool deletes several arrows across consecutive move frames), and starting
+ * from stale state would undo the ones before it. It also keeps the mutation
+ * callbacks identity-stable, which matters because they are props of a memoised
+ * BoardCard — a fresh identity per frame re-renders every card on the board.
+ *
+ * `onFirstLoad` fires once, with the cards the board opened on, for the caller
+ * to place its camera.
+ */
+export function useBoardDocument(docId: string, onFirstLoad: (cards: BoardCardData[]) => void) {
+    const { repository, isYjsReady, isReadOnly } = useContext(ProjectContext);
+    const projectState = repository?.getState();
+
+    const [cards, setCards] = useState<BoardCardData[]>([]);
+    const cardsRef = useRef<BoardCardData[]>([]);
+    const [arrows, setArrows] = useState<BoardArrowData[]>([]);
+    const arrowsRef = useRef<BoardArrowData[]>([]);
+
+    const hasLoaded = useRef(false);
+    /** Last `cards` payload this client wrote, to recognise the observer's echo. */
+    const lastSavedCards = useRef<string | null>(null);
+
+    // Read through a ref so a caller that rebuilds the callback doesn't tear the
+    // board's Yjs subscription down and back up.
+    const onFirstLoadRef = useRef(onFirstLoad);
+    useEffect(() => {
+        onFirstLoadRef.current = onFirstLoad;
+    }, [onFirstLoad]);
+
+    useEffect(() => {
+        if (!projectState || !isYjsReady) return;
+
+        const boardMap = projectState.boardData(docId);
+
+        const syncFromDoc = () => {
+            const cardsData = boardMap.get("cards");
+            // Y.Map observers fire for local writes too, so our own save echoes
+            // straight back. Re-parsing it would rebuild every card object and
+            // re-render the whole board a second time for a state it is already
+            // in — pure waste, and paid on every committed drag. (Arrows below
+            // are still synced: a peer may have touched those and nothing else.)
+            const isOwnEcho =
+                hasLoaded.current &&
+                typeof cardsData === "string" &&
+                cardsData === lastSavedCards.current;
+
+            if (isOwnEcho) {
+                // nothing to apply: local state already is this payload
+            } else if (cardsData) {
+                try {
+                    const parsed: BoardCardData[] =
+                        typeof cardsData === "string" ? JSON.parse(cardsData) : cardsData;
+                    cardsRef.current = parsed;
+                    setCards(parsed);
+                    if (!hasLoaded.current) {
+                        hasLoaded.current = true;
+                        onFirstLoadRef.current(parsed);
+                    }
+                } catch (e) {
+                    console.error("[BoardCanvas] Failed to parse cards:", e);
+                }
+            } else if (!hasLoaded.current) {
+                // Empty board — nothing to frame, but the camera is settled.
+                hasLoaded.current = true;
+                onFirstLoadRef.current([]);
+            }
+
+            const arrowsData = boardMap.get("arrows");
+            if (arrowsData) {
+                try {
+                    const parsed: BoardArrowData[] =
+                        typeof arrowsData === "string" ? JSON.parse(arrowsData) : arrowsData;
+                    arrowsRef.current = parsed;
+                    setArrows(parsed);
+                } catch (e) {
+                    console.error("[BoardCanvas] Failed to parse arrows:", e);
+                }
+            }
+        };
+
+        syncFromDoc();
+        boardMap.observe(syncFromDoc);
+        return () => boardMap.unobserve(syncFromDoc);
+    }, [projectState, isYjsReady, docId]);
+
+    const getCards = useCallback(() => cardsRef.current, []);
+
+    /**
+     * Land a card-list change everywhere it has to go: the ref the next mutation
+     * composes onto, the render state, and Yjs.
+     *
+     * `transient` marks a frame of a live drag/resize. Those only move local
+     * state: writing to Yjs per frame stringifies the entire board, opens a
+     * transaction (which fans out to persistence and to every peer) and then
+     * echoes back through the observer — tens of times a second, for a position
+     * that is about to change again. The gesture's last update is sent without
+     * the flag and is what actually gets stored (see BoardCard's commit).
+     */
+    const commitCards = useCallback(
+        (newCards: BoardCardData[], options?: { transient?: boolean }) => {
+            cardsRef.current = newCards;
+            setCards(newCards);
+            if (options?.transient || !projectState || !isYjsReady || isReadOnly) return;
+            const payload = JSON.stringify(newCards);
+            lastSavedCards.current = payload; // so the observer can skip its echo
+            projectState.boardData(docId).set("cards", payload);
+        },
+        [projectState, isYjsReady, isReadOnly, docId],
+    );
+
+    /**
+     * Same for arrows. Read-only sessions stop before touching local state
+     * rather than just skipping the save, which would leave the board showing
+     * links the project doesn't have.
+     */
+    const commitArrows = useCallback(
+        (newArrows: BoardArrowData[]) => {
+            if (isReadOnly) return;
+            arrowsRef.current = newArrows;
+            setArrows(newArrows);
+            if (!projectState || !isYjsReady) return;
+            projectState.boardData(docId).set("arrows", JSON.stringify(newArrows));
+        },
+        [projectState, isYjsReady, isReadOnly, docId],
+    );
+
+    /** Link two cards. Self-links and pairs already joined either way are no-ops. */
+    const addArrow = useCallback(
+        (fromCardId: string, toCardId: string) => {
+            if (fromCardId === toCardId) return;
+            const exists = arrowsRef.current.some(
+                (a) =>
+                    (a.fromCardId === fromCardId && a.toCardId === toCardId) ||
+                    (a.fromCardId === toCardId && a.toCardId === fromCardId),
+            );
+            if (exists) return;
+            commitArrows([...arrowsRef.current, { id: uuidv7(), fromCardId, toCardId }]);
+        },
+        [commitArrows],
+    );
+
+    const removeArrow = useCallback(
+        (id: string) => {
+            const newArrows = arrowsRef.current.filter((a) => a.id !== id);
+            if (newArrows.length !== arrowsRef.current.length) commitArrows(newArrows);
+        },
+        [commitArrows],
+    );
+
+    /** Drop every arrow touching the given card (it is going away). */
+    const removeArrowsForCard = useCallback(
+        (cardId: string) => {
+            commitArrows(
+                arrowsRef.current.filter((a) => a.fromCardId !== cardId && a.toCardId !== cardId),
+            );
+        },
+        [commitArrows],
+    );
+
+    return {
+        cards,
+        /** The live card list, for handlers that compose several edits per frame. */
+        getCards,
+        commitCards,
+        arrows,
+        commitArrows,
+        addArrow,
+        removeArrow,
+        removeArrowsForCard,
+    };
+}
diff --git a/components/board/use-board-selection.ts b/components/board/use-board-selection.ts
new file mode 100644
index 00000000..04330626
--- /dev/null
+++ b/components/board/use-board-selection.ts
@@ -0,0 +1,102 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { BoardCardData } from "@src/lib/project/project-state";
+import styles from "./BoardCanvas.module.css";
+import { BoardCamera } from "./use-board-camera";
+
+export type SelectionRect = { startX: number; startY: number; endX: number; endY: number };
+
+/** A marquee under this size (canvas px) counts as a click, not a selection. */
+const MIN_MARQUEE_SIZE = 5;
+
+/**
+ * Multi-selection: the set of selected cards and the left-drag marquee that
+ * fills it. Coordinates are canvas-space, so the rectangle keeps its grip on
+ * the board if the camera moves mid-drag.
+ */
+export function useBoardSelection(camera: BoardCamera, getCards: () => BoardCardData[]) {
+    const [selectedCardIds, setSelectedCardIds] = useState<Set<string>>(new Set());
+    const [selectionRect, setSelectionRect] = useState<SelectionRect | null>(null);
+    const isSelecting = useRef(false);
+
+    const clearSelection = useCallback(() => setSelectedCardIds(new Set()), []);
+
+    const { toCanvasPoint, captureGestureRect, releaseGestureRect, getGestureRect } = camera;
+
+    /** Left-click on empty canvas starts a marquee. */
+    const handleSelectionMouseDown = useCallback(
+        (e: React.MouseEvent) => {
+            if (e.button !== 0) return;
+            const target = e.target as HTMLElement;
+            if (
+                target.closest(`.${styles.card}`) ||
+                target.closest(`.${styles.zoom_controls}`) ||
+                target.closest("[data-context-menu]")
+            )
+                return;
+
+            if (!captureGestureRect()) return;
+            const { x, y } = toCanvasPoint(e.clientX, e.clientY);
+
+            isSelecting.current = true;
+            setSelectionRect({ startX: x, startY: y, endX: x, endY: y });
+            clearSelection();
+        },
+        [captureGestureRect, toCanvasPoint, clearSelection],
+    );
+
+    const isMarqueeActive = selectionRect !== null;
+    useEffect(() => {
+        if (!isMarqueeActive) return;
+
+        const onMouseMove = (e: MouseEvent) => {
+            if (!isSelecting.current || !getGestureRect()) return;
+            const { x, y } = toCanvasPoint(e.clientX, e.clientY);
+            setSelectionRect((prev) => (prev ? { ...prev, endX: x, endY: y } : null));
+        };
+
+        const onMouseUp = () => {
+            if (isSelecting.current) {
+                setSelectionRect((rect) => {
+                    if (rect) selectCardsIn(rect, getCards(), setSelectedCardIds);
+                    return null; // Clear the marquee
+                });
+            } else {
+                setSelectionRect(null);
+            }
+            isSelecting.current = false;
+            releaseGestureRect();
+        };
+
+        window.addEventListener("mousemove", onMouseMove);
+        window.addEventListener("mouseup", onMouseUp);
+        return () => {
+            window.removeEventListener("mousemove", onMouseMove);
+            window.removeEventListener("mouseup", onMouseUp);
+        };
+    }, [isMarqueeActive, toCanvasPoint, releaseGestureRect, getGestureRect, getCards]);
+
+    return { selectedCardIds, clearSelection, selectionRect, handleSelectionMouseDown };
+}
+
+/** Select every card the marquee touches, unless it is click-sized. */
+function selectCardsIn(
+    rect: SelectionRect,
+    cards: BoardCardData[],
+    setSelected: (ids: Set<string>) => void,
+) {
+    const left = Math.min(rect.startX, rect.endX);
+    const top = Math.min(rect.startY, rect.endY);
+    const right = Math.max(rect.startX, rect.endX);
+    const bottom = Math.max(rect.startY, rect.endY);
+
+    if (right - left <= MIN_MARQUEE_SIZE && bottom - top <= MIN_MARQUEE_SIZE) return;
+
+    const selected = new Set<string>();
+    for (const card of cards) {
+        if (card.x < right && card.x + card.width > left && card.y < bottom && card.y + card.height > top)
+            selected.add(card.id);
+    }
+    setSelected(selected);
+}
diff --git a/components/board/use-board-touch.ts b/components/board/use-board-touch.ts
new file mode 100644
index 00000000..2f89f924
--- /dev/null
+++ b/components/board/use-board-touch.ts
@@ -0,0 +1,225 @@
+"use client";
+
+import { useCallback, useEffect, useRef } from "react";
+import styles from "./BoardCanvas.module.css";
+import { BoardTool } from "./board-constants";
+import { clampScale } from "./board-geometry";
+import { BoardCamera } from "./use-board-camera";
+
+/** Hold time before a press on empty canvas opens the canvas menu. */
+const LONG_PRESS_MS = 500;
+/** Window and slop within which two taps count as a double-tap. */
+const DOUBLE_TAP_MS = 300;
+const DOUBLE_TAP_SLOP = 30;
+/** Movement (screen px) that turns a press into a pan. */
+const PAN_SLOP = 8;
+/** How long after a touch the mouse events WebKit synthesizes keep arriving. */
+const SYNTHETIC_MOUSE_MS = 700;
+
+type TouchGesture = {
+    mode: "none" | "pan" | "pinch" | "cut";
+    startX: number;
+    startY: number;
+    startOffset: { x: number; y: number };
+    startDist: number;
+    startScale: number;
+    pinchCanvasX: number;
+    pinchCanvasY: number;
+    moved: boolean;
+};
+
+/**
+ * Container touch gestures. One finger pans the canvas; two fingers pinch-zoom
+ * (centred on the pinch); a double-tap on empty canvas creates a card; a
+ * long-press opens the canvas menu. Cards and handles stop propagation, so
+ * their touches never reach here.
+ */
+export function useBoardTouch(options: {
+    camera: BoardCamera;
+    tool: BoardTool;
+    isConnecting: boolean;
+    onCutAt: (clientX: number, clientY: number) => void;
+    onLongPress: (clientX: number, clientY: number) => void;
+    onDoubleTap: (canvasX: number, canvasY: number) => void;
+    onCancelLink: () => void;
+}) {
+    const { camera, tool, isConnecting, onCutAt, onLongPress, onDoubleTap, onCancelLink } = options;
+    const { setOffset, setScale, getOffset, getScale, toCanvasPoint } = camera;
+
+    const gesture = useRef<TouchGesture>({
+        mode: "none",
+        startX: 0,
+        startY: 0,
+        startOffset: { x: 0, y: 0 },
+        startDist: 0,
+        startScale: 1,
+        pinchCanvasX: 0,
+        pinchCanvasY: 0,
+        moved: false,
+    });
+    const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const lastTap = useRef({ time: 0, x: 0, y: 0 });
+
+    // Timestamp of the most recent touch activity, used to ignore the mouse
+    // events WebKit synthesizes at the end of a touch gesture.
+    //
+    // The mouse handlers stay attached even on touch devices, because an iPad
+    // reports `pointer: coarse` whether or not a trackpad is attached — dropping
+    // them would leave Magic Keyboard users unable to pan or drag. Without this
+    // guard a one-finger pan would also fire the synthesized mousedown and start
+    // a marquee selection on top of the pan. Refreshed on every touch event (not
+    // just touchstart) so a long drag doesn't age out of the window mid-gesture.
+    const lastTouch = useRef(0);
+    const isSyntheticMouse = useCallback(
+        () => Date.now() - lastTouch.current < SYNTHETIC_MOUSE_MS,
+        [],
+    );
+
+    const cancelLongPress = () => {
+        if (longPressTimer.current) {
+            clearTimeout(longPressTimer.current);
+            longPressTimer.current = null;
+        }
+    };
+    useEffect(() => cancelLongPress, []);
+
+    /** Board chrome and cards handle their own touches — the canvas ignores them. */
+    const isChromeTarget = (target: HTMLElement) =>
+        !!(
+            target.closest(`.${styles.card}`) ||
+            target.closest(`.${styles.zoom_controls}`) ||
+            target.closest(`.${styles.tool_controls}`) ||
+            target.closest(`.${styles.recording_indicator}`) ||
+            target.closest("[data-context-menu]")
+        );
+
+    const handleTouchStart = (e: React.TouchEvent) => {
+        lastTouch.current = Date.now();
+        if (isConnecting) return;
+        if (isChromeTarget(e.target as HTMLElement)) return;
+
+        // Cut tool: one finger slashes through links rather than panning. Two
+        // still pinch/pan, so the board stays navigable without disarming the
+        // tool between cuts.
+        if (tool === "cut" && e.touches.length === 1) {
+            cancelLongPress();
+            gesture.current = { ...gesture.current, mode: "cut", moved: false };
+            onCutAt(e.touches[0].clientX, e.touches[0].clientY);
+            return;
+        }
+
+        if (e.touches.length === 1) {
+            const touch = e.touches[0];
+            gesture.current = {
+                ...gesture.current,
+                mode: "pan",
+                startX: touch.clientX,
+                startY: touch.clientY,
+                startOffset: { ...getOffset() },
+                moved: false,
+            };
+            cancelLongPress();
+            const pressX = touch.clientX;
+            const pressY = touch.clientY;
+            longPressTimer.current = setTimeout(() => {
+                gesture.current.mode = "none";
+                onLongPress(pressX, pressY);
+            }, LONG_PRESS_MS);
+        } else if (e.touches.length === 2) {
+            cancelLongPress();
+            camera.captureGestureRect();
+            const [a, b] = [e.touches[0], e.touches[1]];
+            const dist = Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY);
+            const mid = toCanvasPoint((a.clientX + b.clientX) / 2, (a.clientY + b.clientY) / 2);
+            gesture.current = {
+                ...gesture.current,
+                mode: "pinch",
+                startDist: dist || 1,
+                startScale: getScale(),
+                pinchCanvasX: mid.x,
+                pinchCanvasY: mid.y,
+                moved: true,
+            };
+        }
+    };
+
+    const handleTouchMove = (e: React.TouchEvent) => {
+        lastTouch.current = Date.now();
+        const g = gesture.current;
+
+        if (g.mode === "cut" && e.touches.length === 1) {
+            // Sampled per move event, so a fast flick can step over a link
+            // between frames — the deliberate stroke the tool asks for lands
+            // every time, and a stationary tap cuts on touchstart regardless.
+            onCutAt(e.touches[0].clientX, e.touches[0].clientY);
+        } else if (g.mode === "pan" && e.touches.length === 1) {
+            const touch = e.touches[0];
+            const dx = touch.clientX - g.startX;
+            const dy = touch.clientY - g.startY;
+            if (!g.moved && Math.hypot(dx, dy) > PAN_SLOP) {
+                g.moved = true;
+                cancelLongPress();
+            }
+            if (g.moved) setOffset({ x: g.startOffset.x + dx, y: g.startOffset.y + dy });
+        } else if (g.mode === "pinch" && e.touches.length >= 2) {
+            const rect = camera.getGestureRect();
+            if (!rect) return;
+            const [a, b] = [e.touches[0], e.touches[1]];
+            const dist = Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY);
+            const midX = (a.clientX + b.clientX) / 2;
+            const midY = (a.clientY + b.clientY) / 2;
+            const newScale = clampScale(g.startScale * (dist / g.startDist));
+            setScale(newScale);
+            setOffset({
+                x: midX - rect.left - g.pinchCanvasX * newScale,
+                y: midY - rect.top - g.pinchCanvasY * newScale,
+            });
+        }
+    };
+
+    const handleTouchEnd = (e: React.TouchEvent) => {
+        lastTouch.current = Date.now();
+        cancelLongPress();
+        const g = gesture.current;
+        const isTap = g.mode === "pan" && !g.moved;
+
+        // A tap on empty canvas with the link tool armed drops the pending source
+        // instead of creating a card — double-tap-to-create belongs to the plain
+        // board, and reaching for it mid-link is far more likely to be a miss.
+        if (tool === "link" && isTap) {
+            onCancelLink();
+        } else if (isTap && e.changedTouches.length > 0) {
+            const touch = e.changedTouches[0];
+            const now = Date.now();
+            const isDoubleTap =
+                now - lastTap.current.time < DOUBLE_TAP_MS &&
+                Math.hypot(touch.clientX - lastTap.current.x, touch.clientY - lastTap.current.y) <
+                    DOUBLE_TAP_SLOP;
+            if (isDoubleTap) {
+                const point = toCanvasPoint(touch.clientX, touch.clientY);
+                onDoubleTap(point.x, point.y);
+                lastTap.current = { time: 0, x: 0, y: 0 };
+            } else {
+                lastTap.current = { time: now, x: touch.clientX, y: touch.clientY };
+            }
+        }
+
+        if (e.touches.length === 0) {
+            g.mode = "none";
+            camera.releaseGestureRect();
+        } else if (e.touches.length === 1) {
+            // A finger lifted from a pinch — resume panning with the one that remains.
+            const touch = e.touches[0];
+            gesture.current = {
+                ...g,
+                mode: "pan",
+                startX: touch.clientX,
+                startY: touch.clientY,
+                startOffset: { ...getOffset() },
+                moved: true,
+            };
+        }
+    };
+
+    return { handleTouchStart, handleTouchMove, handleTouchEnd, isSyntheticMouse };
+}
diff --git a/components/dashboard/DashboardModal.module.css b/components/dashboard/DashboardModal.module.css
index 88038ab1..784acfb9 100644
--- a/components/dashboard/DashboardModal.module.css
+++ b/components/dashboard/DashboardModal.module.css
@@ -9,19 +9,28 @@
     z-index: 1000;
 }
 
+/* Sized off the viewport rather than to a fixed box, so the modal keeps roughly
+ * the same share of the screen through a rotation. The old `900px/max-width:90vw`
+ * pair read well in tablet portrait (834w → 90vw wins, filling the screen) but
+ * fell apart in landscape: past 1000w the 900px width takes over and stops
+ * growing while `80vh` simultaneously *takes away* height (834h → 667px), so the
+ * modal ended up both relatively narrower and absolutely shorter than the layout
+ * it had just rotated from. The min() pairs below scale on both axes instead. */
 .modal {
-    width: 900px;
-    max-width: 90vw;
-    height: 800px;
-    max-height: 80vh;
+    width: min(1100px, 92vw);
+    height: min(840px, 90vh);
     display: flex;
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
 }
 
+/* Fixed rather than `flex: 1`: the nav is a list of eight short labels, so a
+ * wider modal (landscape, desktop) has nothing to spend the extra width on here.
+ * Pinning it sends all of the growth to .content, which does. */
 .sidebar {
-    flex: 1;
+    width: 260px;
+    flex: none;
     background: var(--editor-sidebar);
     padding: 32px 0;
     border-right: 1px solid var(--separator);
@@ -288,6 +297,9 @@
      * home Settings button). */
     .sidebar {
         display: none;
+        /* Undo the desktop nav's fixed width: here it is a whole drawer screen,
+         * so it fills the drawer rather than sitting in a column of its own. */
+        width: auto;
         flex: 1;
         padding: 12px calc(var(--drawer-gutter) + var(--safe-right)) calc(16px + var(--safe-bottom))
             var(--drawer-gutter);
diff --git a/components/editor/DocumentEditorPanel.tsx b/components/editor/DocumentEditorPanel.tsx
index 2c7aa094..9516e61a 100644
--- a/components/editor/DocumentEditorPanel.tsx
+++ b/components/editor/DocumentEditorPanel.tsx
@@ -1241,7 +1241,13 @@ const DocumentEditorPanel = ({
     if (!isLocalAccess && (!membership || isLoading)) return <Loading />;
 
     return (
-        <div className={`${styles.editor_panel} ${isEditorReady ? styles.visible : styles.hidden}`}>
+        <div
+            className={join(
+                styles.editor_panel,
+                isEditorReady ? styles.visible : styles.hidden,
+                isVisible ? "" : styles.parked,
+            )}
+        >
             <div
                 ref={setContainerEl}
                 className={join(styles.container, timelineOpen ? styles.timeline_open : "")}
diff --git a/components/editor/EditorBottomBar.module.css b/components/editor/EditorBottomBar.module.css
new file mode 100644
index 00000000..3dd8d059
--- /dev/null
+++ b/components/editor/EditorBottomBar.module.css
@@ -0,0 +1,139 @@
+/* Bottom chrome row: the format pill flanked, on a tablet, by the history island
+ * and the view-options burger. Owns the positioning for all three; the pill's own
+ * styling lives in MobileFormatToolbar.module.css.
+ *
+ * The row rides the on-screen keyboard when there is one and rests near the
+ * bottom edge when there is not, and both are the same rule: `--vv-inset` is the
+ * keyboard's height, measured live and already zeroed when what is down there is
+ * too short to be a keyboard (see EditorBottomBar.tsx), so the max() resolves to
+ * the resting height in that case. The bottom margin is the visible gap above
+ * whichever it lands on.
+ *
+ * 56px is that resting height: enough to clear iOS's shortcuts bar, which is what
+ * occupies the bottom edge whenever a hardware keyboard is attached and is the
+ * one thing down there this must not sit under. It is a constant because the bar
+ * cannot be measured — the region iOS reserves around it reads as ~173px of
+ * coverage, three times what it actually draws.
+ *
+ * pointer-events: none so the gaps *between* islands stay transparent to the
+ * script underneath — each island turns them back on for itself. */
+.bar_row {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: max(var(--vv-inset, 0px), calc(56px + var(--safe-bottom)));
+    z-index: 60;
+
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 8px;
+    /* Side gutter for the row as a whole — on a phone this is what keeps the lone
+     * format pill off the screen edges. */
+    padding-inline: 8px;
+    margin-bottom: 8px;
+    pointer-events: none;
+}
+
+/* Phone: the editor footer *does* still float at the bottom here, centred at
+ * `16px + safe-bottom` and 50px tall (see EditorFooter.module.css), and the row
+ * centres itself too — so resting level with it would drop one on the other. 66px
+ * clears it, and raising the floor is all that takes: an on-screen keyboard is far
+ * taller and still wins the max() whenever it is up. */
+@media (max-width: 767px) {
+    .bar_row {
+        bottom: max(var(--vv-inset, 0px), calc(66px + var(--safe-bottom)));
+    }
+}
+
+/* Tablet-only satellites either side of the format pill. Same rounded-island
+ * chrome as the pill, so the three read as one row of floating controls rather
+ * than as unrelated bits of furniture that happen to share a baseline. */
+.side_island {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 2px;
+    flex-shrink: 0;
+    padding: 6px;
+    pointer-events: auto;
+
+    background-color: var(--secondary);
+    border: 1px solid var(--separator);
+    /* Matches the pill's radius so the row's three islands share one silhouette. */
+    border-radius: 26px;
+    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
+
+    user-select: none;
+    -webkit-user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+/* Flat square buttons, sized to match the pill's controls (--tb-btn-size, which
+ * is private to that stylesheet — keep the two in step by hand).
+ *
+ * The undo/redo pair arrives wearing the navbar's button chrome
+ * ([HistoryControls]), so this also has to strip that back, or the island reads as
+ * buttons-within-a-button. Two classes deep so it beats NavbarIconButton's
+ * single-class .button rule whatever the stylesheet order. */
+.side_island .island_btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    flex-shrink: 0;
+    padding: 0;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--secondary-text);
+    cursor: pointer;
+    touch-action: manipulation;
+}
+
+.side_island .island_btn:hover {
+    border-color: transparent;
+}
+
+.side_island .island_btn:active {
+    background-color: var(--secondary-hover);
+}
+
+/* View-mode toggles, opening upward off the burger. Always mounted and only
+ * revealed, never conditionally rendered: unmounting would tear down the dictation
+ * session it hosts ([EditorFooterActions]) the instant the menu was closed. */
+.footer_menu {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    right: 0;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    padding: 6px;
+
+    background-color: var(--secondary);
+    border: 1px solid var(--separator);
+    border-radius: 26px;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
+
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(4px);
+    pointer-events: none;
+    transition:
+        opacity 0.15s ease,
+        transform 0.15s ease,
+        visibility 0.15s;
+}
+
+.footer_menu_open {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+    pointer-events: auto;
+}
diff --git a/components/editor/EditorBottomBar.tsx b/components/editor/EditorBottomBar.tsx
new file mode 100644
index 00000000..9e2eaef0
--- /dev/null
+++ b/components/editor/EditorBottomBar.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useTranslations } from "next-intl";
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+import { useIsPhone, useIsTouch, useViewportBottomInset } from "@src/lib/utils/hooks";
+import { KEYBOARD_MIN_HEIGHT } from "@src/lib/editor/visible-band";
+import { useActiveEditor } from "@src/lib/editor/use-active-editor";
+import { useEditorFocused } from "@src/lib/editor/use-editor-focused";
+import { HistoryControls } from "@components/navbar/ProjectNavbarShared";
+import EditorFooterActions from "@components/project/EditorFooterActions";
+import MobileFormatToolbar from "./MobileFormatToolbar";
+import { join } from "@src/lib/utils/misc";
+
+import styles from "./EditorBottomBar.module.css";
+
+/**
+ * View-mode toggles behind a burger — endless scroll, spellcheck, dictation, the
+ * writing timer. On desktop and phone these sit in an always-open bubble
+ * ([EditorFooter]); on a tablet that bubble would be a second floating island
+ * stacked under this row, so they hide here instead.
+ *
+ * The menu is only *revealed* on open, never mounted then: unmounting it would
+ * tear down the dictation session it hosts ([EditorFooterActions]) the instant
+ * the menu was closed. It does go when the whole row goes — see [EditorBottomBar]
+ * for when that is — and takes any dictation with it, which is the right end for
+ * a session with no focused editor left to dictate into.
+ */
+const ViewOptionsIsland = () => {
+    const t = useTranslations("navbar");
+    const [open, setOpen] = useState(false);
+    const islandRef = useRef<HTMLDivElement>(null);
+
+    // Dismiss on a tap outside the island. Registered in the *capture* phase so a
+    // handler that stops propagation — every control in this row does, to keep the
+    // tap off the editor — can't leave the menu stranded open.
+    useEffect(() => {
+        if (!open) return;
+        const onDown = (e: PointerEvent) => {
+            if (islandRef.current && !islandRef.current.contains(e.target as Node)) setOpen(false);
+        };
+        document.addEventListener("pointerdown", onDown, true);
+        return () => document.removeEventListener("pointerdown", onDown, true);
+    }, [open]);
+
+    return (
+        <div className={styles.side_island} ref={islandRef}>
+            <div className={join(styles.footer_menu, open ? styles.footer_menu_open : "")}>
+                <EditorFooterActions />
+            </div>
+            <button
+                type="button"
+                aria-label={t("menu")}
+                aria-expanded={open}
+                className={styles.island_btn}
+                onPointerDown={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setOpen((prev) => !prev);
+                }}
+            >
+                {/* Points at what the tap does, not at what is behind the button:
+                    the menu opens upward out of this island, so up is "show me"
+                    and down is "put it away". A burger here read as one more of
+                    the format pill's alignment icons a few centimetres to the
+                    left. */}
+                {open ? <ChevronDown size={18} /> : <ChevronUp size={18} />}
+            </button>
+        </div>
+    );
+};
+
+/**
+ * The row of floating chrome along the bottom of the screen while something is
+ * being written on a touch device: undo/redo on the left, the format pill
+ * ([MobileFormatToolbar]) in the middle, the view-mode burger on the right.
+ *
+ * Owns the positioning for all three. `--vv-inset` is how much an on-screen
+ * keyboard covers, so the row rides its top edge; below KEYBOARD_MIN_HEIGHT it is
+ * zeroed and the CSS floors the row at its resting height instead. See
+ * .bar_row for why that cutoff is not simply "anything at all".
+ *
+ * Present exactly while an editor holds focus, and nothing else. It used to stay
+ * mounted throughout and change shape underneath the reader: a lone burger over a
+ * board — where every control behind it acts on a text editor that isn't there —
+ * then undo/redo added once a panel with an editor was up, then the format pill
+ * added again on focus. Three shapes for chrome nobody had asked for yet. Now
+ * there is one shape and it means one thing. The price is that undo/redo and the
+ * view toggles, which have nowhere else to live on a tablet, want a tap into the
+ * script first.
+ *
+ * The flanking islands stay tablet-only: a phone has both elsewhere already —
+ * undo/redo in the navbar's edit-mode cluster, the view toggles in the footer
+ * bubble — and no width to spare for three islands.
+ */
+const EditorBottomBar = () => {
+    const isTouch = useIsTouch();
+    const isPhone = useIsPhone();
+    // The editor being written in, resolved from the *panel* so a split answers
+    // with the side holding focus rather than the one that happens to be primary.
+    const historyEditor = useActiveEditor();
+    // Whether it actually holds focus — which is not the same question as "is the
+    // keyboard up": the screenplay search raises one over an <input> of its own,
+    // and none of this row applies to that.
+    const editorFocused = useEditorFocused(historyEditor);
+    // Handed null, that hook keeps reporting whatever it last latched — it has
+    // nothing to re-seed from and its consumers all need an editor anyway (see
+    // useEditorFocused). Switching to a board is exactly that case, so pair it
+    // with the editor still being there or the row survives the switch.
+    const isWriting = !!historyEditor && editorFocused;
+
+    // How much is covered at the bottom of the viewport right now. Only a real
+    // keyboard is worth riding: dismissing one on an iPad leaves ~173px still
+    // reported as covered (the region iOS reserves around its shortcuts bar,
+    // nearly all of it empty), and following that parks the row a hand's width off
+    // the screen edge with nothing under it.
+    const bottomInset = useViewportBottomInset(isTouch);
+    const keyboardCover = bottomInset >= KEYBOARD_MIN_HEIGHT ? bottomInset : 0;
+
+    const hasIslands = isTouch && !isPhone;
+
+    if (!isTouch || !isWriting) return null;
+
+    return (
+        <div
+            className={styles.bar_row}
+            // Handed to CSS as a length rather than set as `bottom` outright, so
+            // the rule can floor it against the resting height — see .bar_row.
+            style={{ "--vv-inset": `${keyboardCover}px` } as React.CSSProperties}
+            // Keep the editor focused for EVERY tap in the row, islands included.
+            // After the pointer events iOS fires a compat mousedown whose default
+            // blurs the contenteditable; the per-control pointerdown preventDefault
+            // doesn't suppress it. Most controls run an editor command that
+            // re-asserts the DOM selection and masks the blur, but that reclaim is
+            // unreliable on the mark-removal path (and absent on the element
+            // trigger), randomly dropping the keyboard and tearing the bar down.
+            // Preventing the mousedown default here stops the blur at the source
+            // for all of them.
+            onMouseDown={(e) => e.preventDefault()}
+        >
+            {/* Undo/redo, outside the pill rather than in it: they act on the
+                document as a whole, not on the caret's block, and the pill's width
+                is derived from the controls that do (--tb-base-width). */}
+            {hasIslands && historyEditor && (
+                <div className={styles.side_island}>
+                    <HistoryControls editor={historyEditor} className={styles.island_btn} />
+                </div>
+            )}
+
+            <MobileFormatToolbar />
+
+            {hasIslands && <ViewOptionsIsland />}
+        </div>
+    );
+};
+
+export default EditorBottomBar;
diff --git a/components/editor/EditorPanel.module.css b/components/editor/EditorPanel.module.css
index b1f2f7a3..435d7609 100644
--- a/components/editor/EditorPanel.module.css
+++ b/components/editor/EditorPanel.module.css
@@ -7,6 +7,26 @@
     background-color: var(--main-bg);
 }
 
+/*
+ * The editor is mounted but not being shown. Take its subtree out of layout and
+ * paint — the same treatment, and for the same reason, as .panel_hidden in
+ * SplitPanelContainer.module.css: a 120-page screenplay is an enormous
+ * ProseMirror DOM, and while it sits in the layout tree *every* forced reflow
+ * anywhere on screen re-lays it out too.
+ *
+ * .panel_hidden already covers the case where the whole panel is swapped away.
+ * This covers the one it can't see: a panel that is itself visible while its
+ * editor is parked behind an overlay — the index-card grid (SceneCardsPanel),
+ * which reads card rects on every frame of a drag and would otherwise flush a
+ * full-document relayout on each one.
+ *
+ * Layout containment only; the editor keeps its rendered state, so coming back
+ * to the script is instant rather than a re-initialisation.
+ */
+.parked {
+    content-visibility: hidden;
+}
+
 .container {
     position: relative;
     flex: 1;
diff --git a/components/editor/MobileFormatToolbar.module.css b/components/editor/MobileFormatToolbar.module.css
index a2b89032..9b137b7b 100644
--- a/components/editor/MobileFormatToolbar.module.css
+++ b/components/editor/MobileFormatToolbar.module.css
@@ -1,16 +1,22 @@
-/* Touch-only formatting bar that floats just above the on-screen keyboard.
- * `bottom` is set inline from the tracked keyboard inset (see
- * MobileFormatToolbar.tsx). */
+/* The format pill: one item in the bottom chrome row, which positions it (see
+ * EditorBottomBar.module.css). A rounded island rather than a full-width docked
+ * bar, so it echoes the iOS keyboard's rounded shape and reads as part of the
+ * same floating chrome instead of a hard-edged bar butted against it. */
 .toolbar {
-    position: fixed;
-    left: 0;
-    right: 0;
-    z-index: 60;
+    /* Anchor for the spelling panel and the element menu, both of which hang off
+     * the pill's own edges — without this they would resolve against the row,
+     * which is the full width of the screen. */
+    position: relative;
+    /* The row is click-through so its gaps don't swallow taps meant for the
+     * script; each island opts back in for itself. */
+    pointer-events: auto;
 
     /* Metrics of the controls, kept here rather than inlined at each rule so the
-     * width cap below can be *derived* from them and stays true if a control is
+     * width below can be *derived* from them and stays true if a control is
      * resized. Consumed by .btn, .group, .separator, .element_trigger and
-     * .format_group. */
+     * .format_group — all inside this pill. The row's own islands deliberately do
+     * not read them: they are a separate stylesheet and match the 40px button size
+     * by hand rather than reaching across for a private custom property. */
     --tb-btn-size: 40px;
     --tb-btn-gap: 4px;
     --tb-group-gap: 6px;
@@ -32,26 +38,17 @@
             (2 * var(--tb-group-width)) + (2 * var(--tb-group-gap)) + var(--tb-separator-width)
     );
 
-    /* Float as a rounded island rather than a full-width docked bar: inset from
-     * the screen edges and lifted off the keyboard's top edge (margins), with
-     * rounded corners of its own, so it echoes the iOS keyboard's rounded shape
-     * and reads as part of the same floating chrome instead of a hard-edged bar
-     * butted against it. `bottom: keyboardInset` (inline) pins it to the keyboard
-     * top; the bottom margin is the visible gap between the two. */
-    margin: 0 auto 8px;
-    /* The 8px side gutter, expressed as a width rather than a margin so the cap
-     * below can centre the bar. On a tablet the gutter alone would leave the bar
-     * an iPad-wide pill around a control row that needs barely half of it — a
-     * third of it empty, with the controls flung to the far edges. Capping at
-     * --tb-base-width shrink-wraps it to the controls instead (auto margins then
-     * centre it) and, because that is the width of the *always-present* ones, the
-     * advanced actions land past the edge of .format_group and are reached by
+    /* Basis rather than a width: on a tablet the bar shrink-wraps to
+     * --tb-base-width, which is the width of the *always-present* controls, so
+     * the advanced actions land past the edge of .format_group and are reached by
      * scrolling the row rather than by widening the bar to hold them. Sizing off
      * the constant set also keeps the width from twitching as the caret moves in
-     * and out of the contexts those actions apply to. The cap never binds on a
-     * phone, where the gutter width is the smaller of the two. */
-    width: calc(100% - 16px);
-    max-width: var(--tb-base-width);
+     * and out of the contexts those actions apply to. On a phone the row is
+     * narrower than that basis, so the bar shrinks to the available width instead
+     * and the controls scroll — hence min-width: 0, without which a flex item
+     * refuses to shrink below its content. */
+    flex: 0 1 var(--tb-base-width);
+    min-width: 0;
 
     display: flex;
     flex-direction: row;
diff --git a/components/editor/MobileFormatToolbar.tsx b/components/editor/MobileFormatToolbar.tsx
index 0f731a3e..6f39b797 100644
--- a/components/editor/MobileFormatToolbar.tsx
+++ b/components/editor/MobileFormatToolbar.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { useTranslations } from "next-intl";
 import {
     AlignCenter,
@@ -20,13 +20,14 @@ import {
 
 import { ProjectContext } from "@src/context/ProjectContext";
 import { useSpellcheck } from "@src/context/SpellcheckContext";
-import { useIsTouch, useKeyboardInset } from "@src/lib/utils/hooks";
+import { useIsTouch } from "@src/lib/utils/hooks";
 import { applyElement, applyMarkToggle } from "@src/lib/screenplay/editor";
 import { applyTitlePageElement, applyTitlePageMarkToggle } from "@src/lib/titlepage/editor";
-import { canMakeDualDialogue, makeDualDialogue } from "@src/lib/screenplay/dual-dialogue";
-import { getNodeIdAtPos } from "@src/lib/screenplay/comment-anchors";
-import { getSpellErrorAt, refreshSpellcheck } from "@src/lib/spellcheck/spellcheck-extension";
+import { makeDualDialogue } from "@src/lib/screenplay/dual-dialogue";
+import { refreshSpellcheck } from "@src/lib/spellcheck/spellcheck-extension";
 import { getAddComment } from "@src/lib/editor/comment-actions";
+import { useCaretState } from "@src/lib/editor/use-caret-state";
+import { useEditorFocused } from "@src/lib/editor/use-editor-focused";
 import { ScreenplayElement, Style, TitlePageElement } from "@src/lib/utils/enums";
 import { join } from "@src/lib/utils/misc";
 
@@ -55,63 +56,27 @@ const TITLEPAGE_ELEMENTS_ORDER: TitlePageElement[] = [
 ];
 
 /**
- * Everything about the caret's surroundings the bar renders from: the block's
- * alignment plus which of the advanced (right-click-only on desktop) actions
- * apply here. Recomputed on every transaction, so it is kept
- * as one value that is only replaced when something actually differs — see
- * sameCaretState — to keep typing from re-rendering the bar on every keystroke.
- */
-type CaretState = {
-    align: string;
-    /** Misspelling under the caret, if the editor has spellcheck decorations. */
-    spellError: { word: string; from: number; to: number } | null;
-    /** Node the caret sits in, when it can anchor a comment. */
-    commentNodeId: string | null;
-    /** Top-level block under the caret + whether it already forces a break. */
-    pageBreak: { pos: number; active: boolean } | null;
-    /**
-     * Start of a character block that can be merged with the one after it.
-     * The block's start rather than the caret, though makeDualDialogue accepts
-     * either: the caret moves with every keystroke inside the block, which would
-     * fail sameCaretState and re-render the bar for a value that never changed.
-     */
-    dualDialoguePos: number | null;
-};
-
-const EMPTY_CARET_STATE: CaretState = {
-    align: "left",
-    spellError: null,
-    commentNodeId: null,
-    pageBreak: null,
-    dualDialoguePos: null,
-};
-
-const sameCaretState = (a: CaretState, b: CaretState) =>
-    a.align === b.align &&
-    a.commentNodeId === b.commentNodeId &&
-    a.dualDialoguePos === b.dualDialoguePos &&
-    a.spellError?.word === b.spellError?.word &&
-    a.spellError?.from === b.spellError?.from &&
-    a.spellError?.to === b.spellError?.to &&
-    a.pageBreak?.pos === b.pageBreak?.pos &&
-    a.pageBreak?.active === b.pageBreak?.active;
-
-/**
- * Touch-device formatting bar that rides just above the on-screen keyboard while
- * a screenplay/title editor is focused. Surfaces the element-type selector (moved
- * here from the navbar so it's within thumb reach while writing) plus the inline
- * styling (bold, italic, underline) and alignment controls.
+ * Touch-device formatting bar shown while a screenplay/title editor is focused.
+ * Surfaces the element-type selector (moved here from the navbar so it's within
+ * thumb reach while writing) plus the inline styling (bold, italic, underline)
+ * and alignment controls.
  *
  * Gated on the pointer type rather than the phone width so tablets get it too —
  * an iPad writing with the on-screen keyboard needs the element picker in thumb
- * reach just as much as a phone does. The keyboard-inset check below keeps it out
- * of the way when a hardware keyboard is attached (no inset, so nothing renders).
+ * reach just as much as a phone does. On touch this is the *only* route to these
+ * controls, the desktop bar having dropped its format dropdown in its favour, so
+ * it shows whenever an editor is focused and never mind what the keyboard is
+ * doing.
  *
  * Past those, the scrollable row continues into the actions a touch device has no
  * other way to reach: they live behind a right-click on desktop, which has no
  * touch equivalent — comment, manual page break, dual dialogue, and spelling
- * suggestions. Each only appears where it applies (see CaretState), so scrolling
- * that far only ever turns up something usable.
+ * suggestions. Each only appears where it applies (see {@link useCaretState}), so
+ * scrolling that far only ever turns up something usable.
+ *
+ * Renders as one item in [EditorBottomBar], which owns where the row sits — over
+ * the keyboard, or resting near the bottom edge when there isn't one — and the
+ * islands that flank it. Nothing here should reach for the viewport.
  *
  * The bar is only as wide as the controls in that first group (see
  * --tb-base-width), so on a tablet it stays a compact centred pill instead of an
@@ -139,8 +104,6 @@ const MobileFormatToolbar = () => {
     } = useContext(ProjectContext);
     const { worker } = useSpellcheck();
 
-    const keyboardInset = useKeyboardInset(isTouch);
-
     const isTitleContext = focusedEditorType === "title";
     const isDraftContext = focusedEditorType === "draft";
     // Both the shelf draft and a tree document report "draft" as their focus type
@@ -197,155 +160,37 @@ const MobileFormatToolbar = () => {
     const elementOrder = isTitleContext ? TITLEPAGE_ELEMENTS_ORDER : SCREENPLAY_ELEMENTS_ORDER;
     const currentElement = isTitleContext ? selectedTitlePageElement : selectedElement;
 
-    // Whether the target editor's contenteditable is actually focused. The keyboard
-    // being up isn't enough: opening the screenplay search focuses a plain <input>
-    // (its own keyboard), and focusedEditorType is never cleared on blur — without
-    // this the toolbar would wrongly ride the search keyboard too.
+    const editorFocused = useEditorFocused(activeEditor);
+
+    // Only mount on a touch device, once the target editor itself is focused.
+    // editorFocused excludes the case where another field (e.g. search) holds focus
+    // while a stale focusedEditorType lingers.
     //
-    // Subscribed to as an external store rather than mirrored into state by an
-    // effect: the editor may already hold focus by the time we subscribe (a swap
-    // between the shelf draft and a tree document lands on one that is focused
-    // already, its focus event long gone), so the flag has to be seeded from
-    // `isFocused` — and a seeding setState in an effect body is a cascading render
-    // on every editor swap, which is what react-hooks/set-state-in-effect flags.
+    // Deliberately NOT gated on whether a keyboard is up. The desktop bar drops its
+    // format dropdown on touch precisely because this pill owns those controls
+    // ([ProjectNavbarDesktop]), so an iPad on a Magic Keyboard was left with
+    // neither, and no way at all to reach the element picker, comments, spelling or
+    // page breaks. Where the pill sits is [EditorBottomBar]'s problem; whether it
+    // exists is this.
     //
-    // Latched in a ref instead of read straight off `activeEditor.isFocused`
-    // because a blur is acted on 150ms late: an editor mutation (e.g. a mark
-    // toggle) can blur and immediately re-focus within a tick, and that transient
-    // must not tear the toolbar down. A real blur (tapping the search field,
-    // dismissing the keyboard) stays blurred past the window and then hides it.
-    // getSnapshot has to be pure and synchronous, so the delay lives in the
-    // subscription, which latches the settled value and notifies.
-    const focusedCache = useRef(false);
-    const editorFocused = useSyncExternalStore(
-        useCallback(
-            (callback: () => void) => {
-                // Nothing to track, and nothing to reset: the bar needs an editor
-                // to show at all, and re-subscribing seeds from the new one.
-                if (!activeEditor) return () => {};
-                let blurTimer: ReturnType<typeof setTimeout> | null = null;
-                const settle = (focused: boolean) => {
-                    if (focusedCache.current === focused) return;
-                    focusedCache.current = focused;
-                    callback();
-                };
-                const onFocus = () => {
-                    if (blurTimer) clearTimeout(blurTimer);
-                    settle(true);
-                };
-                const onBlur = () => {
-                    if (blurTimer) clearTimeout(blurTimer);
-                    blurTimer = setTimeout(() => settle(false), 150);
-                };
-                activeEditor.on("focus", onFocus);
-                activeEditor.on("blur", onBlur);
-                settle(activeEditor.isFocused);
-                return () => {
-                    if (blurTimer) clearTimeout(blurTimer);
-                    activeEditor.off("focus", onFocus);
-                    activeEditor.off("blur", onBlur);
-                };
-            },
-            [activeEditor],
-        ),
-        () => focusedCache.current,
-        () => false,
-    );
-
-    // Only mount on a touch device, once the target editor itself is focused and the
-    // on-screen keyboard is up. editorFocused excludes the case where another field
-    // (e.g. search) holds focus while a stale focusedEditorType lingers.
     // Declared up here, above its first use rather than next to the render, because
     // the caret subscription below is scoped to it.
-    const isVisible =
-        isTouch && keyboardInset > 0 && !!activeEditor && focusedEditorType !== null && editorFocused;
-
-    // Keep the alignment highlight and the advanced actions in sync with the
-    // caret. `transaction` rather than `selectionUpdate`: every dispatch emits it,
-    // selection-only ones included, so the pair would only run this twice per
-    // caret move — and half of what the bar reads changes under a *stationary*
-    // caret anyway (spellcheck decorations landing from the worker, a page-break
-    // attribute flipping, a collaborator's edit), which selectionUpdate misses.
-    // That does mean running on every keystroke, so the whole read is a handful
-    // of position lookups (all off ProseMirror's resolve cache) and the result is
-    // only committed when it differs (sameCaretState), leaving typing
-    // re-render-free.
-    //
-    // Scoped to isVisible rather than just to touch, so the read costs nothing in
-    // the cases where it would only ever be thrown away: a mouse device, an iPad
-    // driving the editor from a hardware keyboard (no inset, so the bar never
-    // comes up), or any moment the editor doesn't hold focus.
-    //
-    // An external store like the focus flag above, for the same reason: the read
-    // has to be seeded from the editor's current state on subscribe, and doing
-    // that through setState renders twice every time the bar comes up. Here
-    // sameCaretState doubles as the snapshot's stability check — getSnapshot must
-    // return the same reference until something actually changes, or React would
-    // see a new value on every render and loop.
-    const caretCache = useRef<CaretState>(EMPTY_CARET_STATE);
-    const caret = useSyncExternalStore(
-        useCallback(
-            (callback: () => void) => {
-                // A stale caret while there is nothing to track is harmless — the
-                // bar is hidden, and read() below re-seeds it as part of
-                // re-subscribing, before it can show again.
-                if (!isVisible || !activeEditor) return () => {};
-                const read = () => {
-                    const { state } = activeEditor;
-                    const { from, to } = state.selection;
-                    const next: CaretState = {
-                        ...EMPTY_CARET_STATE,
-                        align: state.selection.$anchor.parent.attrs.textAlign || "left",
-                    };
-
-                    // The advanced actions are all screenplay-shaped; the title
-                    // page has neither the nodes nor the pagination they act on.
-                    if (!isTitleContext) {
-                        next.spellError =
-                            getSpellErrorAt(state, from) ??
-                            (to !== from ? getSpellErrorAt(state, to) : null);
-                        next.commentNodeId = getNodeIdAtPos(state, from);
-
-                        const $pos = state.doc.resolve(from);
-                        if ($pos.depth >= 1) {
-                            const nodeStart = $pos.before(1);
-                            // Never the document's first block — nothing to break
-                            // before it.
-                            if (nodeStart > 0) {
-                                next.pageBreak = {
-                                    pos: nodeStart,
-                                    active: !!$pos.node(1).attrs.pageBreak,
-                                };
-                            }
-                            if (
-                                $pos.node(1).attrs.class === ScreenplayElement.Character &&
-                                canMakeDualDialogue(activeEditor, nodeStart)
-                            ) {
-                                next.dualDialoguePos = nodeStart;
-                            }
-                        }
-                    }
-
-                    if (sameCaretState(caretCache.current, next)) return;
-                    caretCache.current = next;
-                    callback();
-                };
-                activeEditor.on("transaction", read);
-                read();
-                return () => {
-                    activeEditor.off("transaction", read);
-                };
-            },
-            [activeEditor, isVisible, isTitleContext],
-        ),
-        () => caretCache.current,
-        () => EMPTY_CARET_STATE,
-    );
+    const isVisible = isTouch && !!activeEditor && focusedEditorType !== null && editorFocused;
+
 
-    // Close an open menu only when the pointer-down lands outside the whole
-    // toolbar. Taps on the style/alignment controls (which sit outside the element
-    // wrapper but inside the bar) must not dismiss the menu. Scoping to the toolbar
-    // also means these taps never steal the editor focus / drop the keyboard.
+    // Keeps the alignment highlight and the advanced actions in sync with the
+    // caret. Scoped to isVisible so the per-transaction read costs nothing while
+    // the bar is hidden.
+    const caret = useCaretState(activeEditor, isVisible, isTitleContext);
+
+    // Close an open menu only when the pointer-down lands outside the whole pill.
+    // Taps on the style/alignment controls (which sit outside the element wrapper
+    // but inside the pill) must not dismiss the menu.
+    //
+    // Capture phase, so a tap on one of the sibling islands ([EditorBottomBar])
+    // still dismisses these: every control in that row stops propagation to keep
+    // the tap off the editor, which a bubble-phase listener on document would
+    // never see.
     useEffect(() => {
         if (!elementMenuOpen && !spellMenuWord) return;
         const onDown = (e: PointerEvent) => {
@@ -354,8 +199,8 @@ const MobileFormatToolbar = () => {
                 setSpellMenuWord(null);
             }
         };
-        document.addEventListener("pointerdown", onDown);
-        return () => document.removeEventListener("pointerdown", onDown);
+        document.addEventListener("pointerdown", onDown, true);
+        return () => document.removeEventListener("pointerdown", onDown, true);
     }, [elementMenuOpen, spellMenuWord]);
 
     const spellWord = caret.spellError?.word ?? null;
@@ -597,21 +442,7 @@ const MobileFormatToolbar = () => {
             {tapGuard && (
                 <div className={styles.tap_guard} onPointerDown={(e) => e.preventDefault()} />
             )}
-            <div
-                className={styles.toolbar}
-                style={{ bottom: keyboardInset }}
-                role="toolbar"
-                ref={toolbarRef}
-                // Keep the editor focused for EVERY tap in the bar. After the pointer
-                // events iOS fires a compat mousedown whose default blurs the
-                // contenteditable; the per-control pointerdown preventDefault doesn't
-                // suppress it. Most controls run an editor command that re-asserts the
-                // DOM selection and masks the blur, but that reclaim is unreliable on
-                // the mark-removal path (and absent on the element trigger), randomly
-                // dropping the keyboard and tearing the bar down. Preventing the
-                // mousedown default here stops the blur at the source for all of them.
-                onMouseDown={(e) => e.preventDefault()}
-            >
+            <div className={styles.toolbar} role="toolbar" ref={toolbarRef}>
                 {/* Element-type selector — the primary control, opens a menu upward. */}
                 <div className={styles.element}>
                     {elementMenuOpen && (
diff --git a/components/editor/SceneCardsPanel.module.css b/components/editor/SceneCardsPanel.module.css
new file mode 100644
index 00000000..cc98cedb
--- /dev/null
+++ b/components/editor/SceneCardsPanel.module.css
@@ -0,0 +1,364 @@
+/* The card grid sits *over* the screenplay editor rather than replacing it: the
+   editor stays mounted behind (see PanelRenderer) so switching views never
+   reinitialises it or drops the ProjectContext editor handle. z-index 12 clears
+   the comment gutter, which floats at that level inside the editor beneath;
+   equal specificity plus later DOM order puts this on top. Still below the
+   panel switcher (13), which has to stay reachable to switch back. */
+.container {
+    position: absolute;
+    inset: 0;
+    z-index: 12;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: var(--main-bg);
+}
+
+/* While a card is lifted, the cursor says so everywhere on the grid — including
+   over the gutters between cards, where there is no card to carry it. */
+.dragging {
+    cursor: grabbing;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(var(--cards-per-row, 3), minmax(0, 1fr));
+    gap: calc(16px * var(--card-zoom, 1));
+    /* Top clearance for the panel switcher and zoom pill, which float over this
+       corner. */
+    padding: 52px 20px 40px;
+}
+
+.empty_state {
+    padding: 60px 20px;
+    text-align: center;
+    font-size: 0.9rem;
+    color: var(--secondary-text);
+}
+
+/* ── Card ─────────────────────────────────────────────────────────────────── */
+
+/* One grid cell. Exists so the drop bar has somewhere unclipped to live: the
+   card below clips its overflow, which would swallow a bar drawn in the gutter
+   beside it. Carries no visuals of its own. */
+.card_slot {
+    position: relative;
+    display: flex;
+    min-width: 0;
+}
+
+/* Deliberately the board card's shape — same header/body split, same shadow and
+   hover lift — so a scene reads the same whether it is on the corkboard or in
+   this grid. Geometry differs because these are laid out by the grid rather
+   than positioned on a canvas, and scale with the zoom (--card-zoom) so that
+   widening a card enlarges it instead of just stretching it. */
+.card {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    min-height: calc(170px * var(--card-zoom, 1));
+    border-radius: 4px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    cursor: grab;
+    user-select: none;
+    transition:
+        box-shadow 0.15s ease,
+        opacity 0.15s ease,
+        transform 0.15s ease;
+}
+
+/* Hover affordances only where a pointer can actually hover — same reasoning as
+   the board's cards: iOS emulates hover from the last tap point and re-resolves
+   it as content moves, which turns a transitioned shadow into a repaint storm
+   while cards sweep under a stale point. */
+@media (hover: hover) {
+    .card:hover {
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    }
+}
+
+/* The hole the lifted card came out of: flattened, faded, and outlined so the
+   space reads as reserved rather than as a card that has gone strange. */
+.card_source {
+    opacity: 0.25;
+    box-shadow: none;
+    outline: 2px dashed var(--secondary-text);
+    outline-offset: -2px;
+}
+
+/* The copy under the pointer. Its shadow is what sells the lift; the wrapper
+   (.drag_ghost) supplies the position, size, tilt and scale. */
+.card_ghost {
+    cursor: grabbing;
+    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32);
+}
+
+.drag_ghost {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 200;
+    pointer-events: none;
+    /* Flex so the slot inside stretches to the width/height captured from the
+       grabbed card, rather than the card falling back to its content height. */
+    display: flex;
+    /* Own compositor layer: each pointer frame is then a translate of this one
+       element rather than a repaint over the grid behind it. */
+    will-change: transform;
+}
+
+/* Drop indicator: a bar centred in the gutter on the side the scene would land.
+   Drawn on the neighbouring slot rather than inserted as an extra grid child,
+   which would push every following card into the wrong column for the length of
+   the drag. It grows out of the edge so the eye catches the bar *changing
+   position*, not merely the presence of a line somewhere. */
+.drop_before::before,
+.drop_after::after {
+    content: "";
+    position: absolute;
+    top: -2px;
+    bottom: -2px;
+    width: 4px;
+    border-radius: 4px;
+    background-color: var(--primary-text);
+    box-shadow: 0 0 8px color-mix(in srgb, var(--primary-text) 45%, transparent);
+    animation: drop_bar_in 0.12s ease-out;
+    /* Above the neighbouring cards, so it reads as sitting between them rather
+       than tucked behind one. */
+    z-index: 1;
+}
+
+/* Half the gap (which is 16px × zoom) out from the edge, less half the bar. */
+.drop_before::before {
+    right: 100%;
+    margin-right: calc(8px * var(--card-zoom, 1) - 2px);
+}
+
+.drop_after::after {
+    left: 100%;
+    margin-left: calc(8px * var(--card-zoom, 1) - 2px);
+}
+
+@keyframes drop_bar_in {
+    from {
+        transform: scaleY(0.4);
+        opacity: 0;
+    }
+    to {
+        transform: scaleY(1);
+        opacity: 1;
+    }
+}
+
+.card_header {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    gap: 8px;
+    flex-shrink: 0;
+    padding: calc(8px * var(--card-zoom, 1)) calc(10px * var(--card-zoom, 1));
+}
+
+/* Holds the heading's box. The editor is absolutely positioned inside it, over
+   the text, so opening or closing an edit never changes the header's height —
+   the two boxes measure differently (the text wraps to two lines, an input
+   never does) and swapping one for the other made the card jump. */
+.card_title_slot {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+}
+
+.card_title {
+    font-family: var(--font-courier);
+    font-size: calc(0.9rem * var(--card-zoom, 1));
+    font-weight: bold;
+    line-height: 1.3;
+    color: white;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.scene_number {
+    opacity: 0.75;
+    margin-right: 2px;
+}
+
+/* Editing a heading in place. Tinted rather than white so the field reads as
+   open on top of the header's own color, whatever that color is. */
+/* Hidden, not unmounted, while its editor is open: it is what holds the
+   header's height steady underneath. */
+.card_title_hidden {
+    visibility: hidden;
+}
+
+.card_title_input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    /* The card sets user-select:none so a drag can't smear a text selection
+       across the grid; an open editor has to opt back in or its own text can't
+       be selected. */
+    user-select: text;
+    font-family: var(--font-courier);
+    font-size: calc(0.9rem * var(--card-zoom, 1));
+    font-weight: bold;
+    line-height: 1.3;
+    color: white;
+    background: rgba(0, 0, 0, 0.2);
+    border: none;
+    border-radius: 4px;
+    padding: 0 4px;
+    margin: 0;
+    outline: none;
+}
+
+.card_title_input::placeholder {
+    color: rgba(255, 255, 255, 0.6);
+}
+
+/* Page count, in the header so the body stays pure synopsis. */
+.card_length {
+    flex-shrink: 0;
+    font-size: calc(11px * var(--card-zoom, 1));
+    font-variant-numeric: tabular-nums;
+    color: rgba(255, 255, 255, 0.85);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+/* The body is always a light tint of the scene color (mixed toward white by the
+   inline style), so black text reads on it in every theme. */
+.card_content {
+    flex: 1;
+    display: flex;
+    padding: calc(10px * var(--card-zoom, 1)) calc(12px * var(--card-zoom, 1));
+    overflow: hidden;
+}
+
+.card_synopsis {
+    flex: 1;
+    font-family: var(--font-courier);
+    font-size: calc(0.85rem * var(--card-zoom, 1));
+    line-height: 1.4;
+    color: black;
+    white-space: pre-wrap;
+    overflow: hidden;
+}
+
+.card_synopsis_empty {
+    color: rgba(0, 0, 0, 0.4);
+    font-style: italic;
+}
+
+.card_synopsis_input {
+    flex: 1;
+    min-width: 0;
+    user-select: text;
+    font-family: var(--font-courier);
+    font-size: calc(0.85rem * var(--card-zoom, 1));
+    line-height: 1.4;
+    color: black;
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    resize: none;
+    outline: none;
+    white-space: pre-wrap;
+}
+
+.card_synopsis_input::placeholder {
+    color: rgba(0, 0, 0, 0.4);
+    font-style: italic;
+}
+
+/* ── Zoom pill ────────────────────────────────────────────────────────────── */
+
+/* Same pill, same offsets as the board canvas's zoom control (see
+   BoardCanvas.module.css): both sit immediately right of the panel-switcher
+   handles, so the chrome lands in the same place whichever view is up. A
+   sibling of the scroll container rather than a child of it, so it stays put
+   while the cards scroll under it. */
+.zoom_controls {
+    position: absolute;
+    top: 8px;
+    left: 56px;
+    z-index: 13;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    height: 36px;
+    padding: 0 4px;
+    border-radius: 16px;
+    background-color: var(--secondary);
+    color: var(--secondary-text);
+    user-select: none;
+}
+
+.zoom_btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 28px;
+    border: none;
+    border-radius: 14px;
+    background: transparent;
+    color: var(--secondary-text);
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+}
+
+.zoom_btn:hover:not(:disabled) {
+    background-color: var(--secondary-hover);
+}
+
+.zoom_btn:disabled {
+    opacity: 0.35;
+    cursor: default;
+}
+
+.zoom_level {
+    min-width: 38px;
+    text-align: center;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--secondary-text);
+}
+
+/* Finger-sized on a touch device, matching the board pill's own coarse block. */
+@media (pointer: coarse) {
+    .zoom_controls {
+        left: 72px;
+        height: 44px;
+        border-radius: 22px;
+    }
+
+    .zoom_btn {
+        width: 30px;
+        height: 36px;
+        border-radius: 18px;
+    }
+}
+
+/* One card per row once there is no width for several side by side — which also
+   makes the zoom pill meaningless, so SceneCardsPanel drops it on phone.
+   The phone's navbar is a fixed overlay and the panel starts underneath it, so
+   the first row needs that clearance on top of the switcher's — unless the
+   timeline strip is open, in which case the panel already starts below the bar
+   (the same pair of cases .panel_switcher_anchor handles). */
+@media (max-width: 767px) {
+    .grid {
+        grid-template-columns: minmax(0, 1fr);
+        padding: calc(var(--navbar-height) + 52px) 16px 40px;
+    }
+
+    .timeline_open .grid {
+        padding-top: 52px;
+    }
+}
diff --git a/components/editor/SceneCardsPanel.tsx b/components/editor/SceneCardsPanel.tsx
new file mode 100644
index 00000000..7ffbf774
--- /dev/null
+++ b/components/editor/SceneCardsPanel.tsx
@@ -0,0 +1,762 @@
+"use client";
+
+import {
+    memo,
+    useCallback,
+    useContext,
+    useEffect,
+    useLayoutEffect,
+    useMemo,
+    useRef,
+    useState,
+} from "react";
+import { useTranslations } from "next-intl";
+import { Minus, Plus } from "lucide-react";
+import { ProjectContext } from "@src/context/ProjectContext";
+import {
+    SCENE_CARD_COLUMNS_MAX,
+    SCENE_CARD_COLUMNS_MIN,
+    SCENE_CARD_COLUMNS_DEFAULT,
+    useViewContext,
+} from "@src/context/ViewContext";
+import { Scene } from "@src/lib/screenplay/scenes";
+import { computeSceneLabels } from "@src/lib/screenplay/scene-locking";
+import { moveScene } from "@src/lib/screenplay/scene-reorder";
+import { useIsPhone } from "@src/lib/utils/hooks";
+import { join } from "@src/lib/utils/misc";
+
+import styles from "./SceneCardsPanel.module.css";
+
+/** Card chrome for a scene with no color of its own (the palette's grey). */
+const DEFAULT_SCENE_COLOR = "#6b7280";
+
+// Touch reordering, same shape as the navigation sidebar's: a swipe scrolls the
+// grid, so a card is only picked up after the finger is held roughly still for
+// this long. Moving farther than the cancel threshold before then is read as a
+// scroll and abandons the pending pick-up.
+const TOUCH_DRAG_HOLD_MS = 300;
+const TOUCH_DRAG_CANCEL_PX = 10;
+
+/**
+ * How far a mouse has to travel before a press becomes a drag. Below this a
+ * press is still a click — which is what keeps a double-click (to edit) from
+ * flashing the lifted card and a drop indicator on its way through.
+ */
+const MOUSE_DRAG_START_PX = 4;
+
+/**
+ * Card scale for a given column count, relative to the 3-per-row default. It is
+ * this factor the zoom readout reports, and it drives the card's type and
+ * height so that widening a card actually enlarges it rather than just
+ * stretching it. Clamped because 1 column across a wide panel is a poster and 5
+ * across a narrow one is unreadable.
+ */
+const cardZoom = (columns: number) => Math.min(2, Math.max(0.6, SCENE_CARD_COLUMNS_DEFAULT / columns));
+
+/** Page count in eighths, matching the sidebar's SceneLengthItem. */
+const sceneLength = (scene: Scene) => {
+    const totalEighths = Math.max(1, Math.round(((scene.nextPosition - scene.position) / 1100) * 8));
+    const fullPages = Math.floor(totalEighths / 8);
+    const remainder = totalEighths % 8;
+    if (fullPages > 0 && remainder > 0) return `${fullPages}+${remainder}/8 p`;
+    return fullPages > 0 ? `${fullPages} p` : `${remainder}/8 p`;
+};
+
+/** Which of a card's two fields is being edited in place. */
+type EditField = "title" | "synopsis";
+
+type SceneCardProps = {
+    scene: Scene;
+    index: number;
+    label: string;
+    isOmitted: boolean;
+    /** This card is the one being dragged: it stays as the hole left behind. */
+    isSource: boolean;
+    /** Rendered as the lifted copy under the pointer — inert, no handlers. */
+    isGhost?: boolean;
+    /** The scene would be inserted before / after this card on release. */
+    showDropBefore: boolean;
+    showDropAfter: boolean;
+    editField: EditField | null;
+    editValue: string;
+    canEdit: boolean;
+    onEditChange: (value: string) => void;
+    onEditCommit: () => void;
+    onEditCancel: () => void;
+    onStartEdit: (index: number, field: EditField) => void;
+    onPointerDown: (index: number, e: React.PointerEvent) => void;
+    onTouchStart: (index: number, e: React.TouchEvent) => void;
+};
+
+const SceneCard = memo(
+    ({
+        scene,
+        index,
+        label,
+        isOmitted,
+        isSource,
+        isGhost = false,
+        showDropBefore,
+        showDropAfter,
+        editField,
+        editValue,
+        canEdit,
+        onEditChange,
+        onEditCommit,
+        onEditCancel,
+        onStartEdit,
+        onPointerDown,
+        onTouchStart,
+    }: SceneCardProps) => {
+        const t = useTranslations("popup.scene");
+        const color = scene.color || DEFAULT_SCENE_COLOR;
+        // Only the synopsis the writer wrote on the scene — never the opening
+        // lines of the scene body. An index card carries the intent for a scene,
+        // which is a different thing from the first thing said in it.
+        const synopsis = scene.synopsis ?? "";
+
+        // Enter commits a heading (it is one line); in the synopsis it is a
+        // newline, so only Escape and blur end that edit.
+        const handleKeyDown = (e: React.KeyboardEvent, field: EditField) => {
+            e.stopPropagation();
+            if (e.key === "Escape") onEditCancel();
+            else if (e.key === "Enter" && field === "title") {
+                e.preventDefault();
+                onEditCommit();
+            }
+        };
+
+        // A double-click inside a field means "edit this", so it must not also
+        // reach the card and be read as one of the board-style gestures.
+        const startEdit = (e: React.MouseEvent, field: EditField) => {
+            if (!canEdit || isGhost) return;
+            e.stopPropagation();
+            onStartEdit(index, field);
+        };
+
+        return (
+            // The drop bars are drawn on this wrapper rather than on the card
+            // itself: the card clips its own overflow (to round the header's
+            // corners into it), which would erase a bar out in the gutter.
+            <div
+                className={join(
+                    styles.card_slot,
+                    showDropBefore ? styles.drop_before : "",
+                    showDropAfter ? styles.drop_after : "",
+                )}
+            >
+                <div
+                    className={join(
+                        styles.card,
+                        isGhost ? styles.card_ghost : "",
+                        isSource && !isGhost ? styles.card_source : "",
+                    )}
+                    onPointerDown={isGhost ? undefined : (e) => onPointerDown(index, e)}
+                    onTouchStart={isGhost ? undefined : (e) => onTouchStart(index, e)}
+                >
+                    <div className={styles.card_header} style={{ backgroundColor: color }}>
+                        {/* The heading keeps its box whether or not it is being edited:
+                            the input is laid *over* the text rather than swapped in for
+                            it, because the two boxes measure differently (one wraps to
+                            two lines, the other never does) and the header would resize
+                            under the pointer the moment an edit opened. */}
+                        <div className={styles.card_title_slot}>
+                            <p
+                                className={join(
+                                    styles.card_title,
+                                    editField === "title" ? styles.card_title_hidden : "",
+                                    "unselectable",
+                                )}
+                                onDoubleClick={(e) => startEdit(e, "title")}
+                                title={canEdit && !isOmitted ? t("edit") : undefined}
+                            >
+                                <span className={styles.scene_number}>{label}.</span>{" "}
+                                {isOmitted ? "OMITTED" : scene.title}
+                            </p>
+                            {editField === "title" && (
+                                <input
+                                    type="text"
+                                    className={styles.card_title_input}
+                                    value={editValue}
+                                    onChange={(e) => onEditChange(e.target.value)}
+                                    onBlur={onEditCommit}
+                                    onKeyDown={(e) => handleKeyDown(e, "title")}
+                                    onPointerDown={(e) => e.stopPropagation()}
+                                    autoFocus
+                                />
+                            )}
+                        </div>
+                        <span className={join(styles.card_length, "unselectable")}>{sceneLength(scene)}</span>
+                    </div>
+
+                    <div
+                        className={styles.card_content}
+                        style={{ backgroundColor: `color-mix(in srgb, ${color} 20%, white)` }}
+                        onDoubleClick={(e) => startEdit(e, "synopsis")}
+                    >
+                        {editField === "synopsis" ? (
+                            <textarea
+                                className={styles.card_synopsis_input}
+                                value={editValue}
+                                onChange={(e) => onEditChange(e.target.value)}
+                                onBlur={onEditCommit}
+                                onKeyDown={(e) => handleKeyDown(e, "synopsis")}
+                                onPointerDown={(e) => e.stopPropagation()}
+                                placeholder={t("synopsisPlaceholder")}
+                                autoFocus
+                            />
+                        ) : (
+                            <p
+                                className={join(
+                                    styles.card_synopsis,
+                                    synopsis ? "" : styles.card_synopsis_empty,
+                                    "unselectable",
+                                )}
+                            >
+                                {synopsis || t("synopsisPlaceholder")}
+                            </p>
+                        )}
+                    </div>
+                </div>
+            </div>
+        );
+    },
+);
+
+SceneCard.displayName = "SceneCard";
+
+/** Zoom pill, mirroring the board canvas's — see BoardZoomControls. */
+const CardZoomControls = ({
+    columns,
+    onZoom,
+    label,
+}: {
+    columns: number;
+    onZoom: (zoomIn: boolean) => void;
+    label: string;
+}) => (
+    <div className={styles.zoom_controls} aria-label={label}>
+        {/* Zooming out fits more cards across, so minus *raises* the column count. */}
+        <button
+            className={styles.zoom_btn}
+            onClick={() => onZoom(false)}
+            disabled={columns >= SCENE_CARD_COLUMNS_MAX}
+        >
+            <Minus size={14} />
+        </button>
+        <span className={styles.zoom_level}>{Math.round(cardZoom(columns) * 100)}%</span>
+        <button
+            className={styles.zoom_btn}
+            onClick={() => onZoom(true)}
+            disabled={columns <= SCENE_CARD_COLUMNS_MIN}
+        >
+            <Plus size={14} />
+        </button>
+    </div>
+);
+
+/**
+ * The screenplay as a wall of scene index cards — heading, synopsis, length and
+ * color, in document order, as many to a row as the zoom pill is set to.
+ *
+ * Dragging a card reorders the *screenplay itself* through the same document
+ * transaction the navigation sidebar's drag uses ([moveScene]), so the two
+ * surfaces can't disagree about what a reorder means. Double-clicking a heading
+ * rewrites that heading in the document; double-clicking the body edits the
+ * scene's synopsis, which lives in Yjs beside its color.
+ */
+const SceneCardsPanel = () => {
+    const t = useTranslations("editorSidebar");
+    const tNav = useTranslations("navbar");
+    const {
+        scenes,
+        updateScenes,
+        editor,
+        repository,
+        isReadOnly,
+        sceneLocking,
+        sceneNumberingStyle,
+        skippedSceneLetters,
+        persistentScenes,
+    } = useContext(ProjectContext);
+    const { timelineOpen, sceneCardColumns, setSceneCardColumns } = useViewContext();
+    const isPhone = useIsPhone();
+
+    const [dragIndex, setDragIndex] = useState<number | null>(null);
+    /**
+     * The drag has actually been picked up — past the mouse threshold, or the
+     * touch long-press has fired. Only then does the lifted card appear and the
+     * grid start showing where a drop would land.
+     */
+    const [isLifted, setIsLifted] = useState(false);
+    // The gap the card would land in: gap i means "before card i", and
+    // scenes.length means "after the last card" — see moveScene.
+    const [indicatorIndex, setIndicatorIndex] = useState<number | null>(null);
+    const [editing, setEditing] = useState<{ index: number; field: EditField } | null>(null);
+    const [editValue, setEditValue] = useState("");
+    /** The grabbed card's size, which the lifted copy is rendered at. */
+    const [ghostSize, setGhostSize] = useState({ width: 0, height: 0 });
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    const gridRef = useRef<HTMLDivElement>(null);
+    const ghostRef = useRef<HTMLDivElement>(null);
+    /** Where the pointer is, and where inside the card it grabbed. */
+    const pointerRef = useRef({ x: 0, y: 0 });
+    const grabRef = useRef({ offsetX: 0, offsetY: 0 });
+    /** Where the mouse went down, for the drag threshold. */
+    const pressOriginRef = useRef({ x: 0, y: 0 });
+    /**
+     * Card geometry, measured once when the drag is picked up.
+     *
+     * Reading it per move instead would be a `getBoundingClientRect()` per card
+     * per frame, right after the lifted card's inline transform was mutated —
+     * which forces a full synchronous layout each time, over a document that
+     * still contains the parked screenplay editor. The grid cannot reflow during
+     * a drag (the lifted copy is `position: fixed`, the source card keeps its
+     * slot, and the drop bar is absolutely positioned), so one measurement holds
+     * for the gesture. Scrolling is the one thing that does move the cards, and
+     * that is a pure translation the stored scrollTop corrects for.
+     */
+    const geometryRef = useRef<{ rects: DOMRect[]; scrollTop: number } | null>(null);
+
+    const canEdit = !isReadOnly;
+    const columns = Math.min(SCENE_CARD_COLUMNS_MAX, Math.max(SCENE_CARD_COLUMNS_MIN, sceneCardColumns));
+    const zoom = cardZoom(columns);
+
+    // Display labels and omitted flags, resolved exactly as the sidebar does so
+    // a scene carries the same number in both views. Without production locking
+    // there is no frozen number, so positional ones stand in.
+    const sceneDisplays = useMemo(() => {
+        if (sceneLocking) {
+            const uuids = scenes.map((s) => s.id ?? "");
+            const labels = computeSceneLabels(uuids, persistentScenes, sceneNumberingStyle, skippedSceneLetters);
+            return scenes.map((_, i) => ({
+                label: labels[i]?.label ?? `${i + 1}`,
+                isOmitted: labels[i]?.status === "omitted",
+            }));
+        }
+        return scenes.map((_, i) => ({ label: `${i + 1}`, isOmitted: false }));
+    }, [scenes, sceneLocking, sceneNumberingStyle, skippedSceneLetters, persistentScenes]);
+
+    // ── In-place editing ─────────────────────────────────────────────────────
+
+    const startEdit = useCallback(
+        (index: number, field: EditField) => {
+            if (!canEdit) return;
+            const scene = scenes[index];
+            if (!scene) return;
+
+            if (field === "title") {
+                // An omitted scene's heading is a placeholder the production lock
+                // owns; editing it here would fight scene-locking.
+                if (sceneDisplays[index]?.isOmitted) return;
+                // Seed from the document rather than scene.title, which has been
+                // uppercased for display — committing that back would rewrite the
+                // writer's own casing on every edit.
+                const node = editor?.state.doc.nodeAt(scene.position - 1);
+                setEditValue(node?.textContent ?? scene.title);
+            } else {
+                setEditValue(scene.synopsis ?? "");
+            }
+            setEditing({ index, field });
+        },
+        [canEdit, scenes, sceneDisplays, editor],
+    );
+
+    const cancelEdit = useCallback(() => setEditing(null), []);
+
+    const commitEdit = useCallback(() => {
+        if (!editing) return;
+        const scene = scenes[editing.index];
+        setEditing(null);
+        if (!scene) return;
+
+        if (editing.field === "synopsis") {
+            // Only the synopsis is written — upsertScene merges, so the scene's
+            // color and any production-lock fields are left alone.
+            if (!repository) return;
+            if (!scene.id) {
+                // Same limit the scene popup has: persistent scene data is keyed
+                // by the heading node's data-id, so a heading without one has
+                // nowhere to store a synopsis.
+                console.warn("[SceneCardsPanel] Scene id is not available on this node.");
+                return;
+            }
+            const synopsis = editValue.trim();
+            if (synopsis === (scene.synopsis ?? "")) return;
+            repository.upsertScene(scene.id, { synopsis: synopsis || undefined });
+            return;
+        }
+
+        if (!editor) return;
+        const text = editValue.trim();
+        // An empty heading would leave a scene with no way to identify it (and no
+        // heading node text for the parser to key on), so treat it as a cancel.
+        if (!text) return;
+
+        const nodeStart = scene.position - 1;
+        const node = editor.state.doc.nodeAt(nodeStart);
+        if (!node) return;
+        if (text === node.textContent) return;
+
+        const from = nodeStart + 1;
+        editor.view.dispatch(editor.state.tr.insertText(text, from, from + node.content.size));
+    }, [editing, editValue, scenes, repository, editor]);
+
+    // A scene list that shrank underneath an open edit (a collaborator's change,
+    // a re-parse that dropped the scene) would otherwise leave the input bound to
+    // whatever scene now sits at that index. Adjusted during render rather than
+    // in an effect — React re-runs the render with the new state before it
+    // commits, so no half-rendered frame reaches the screen.
+    if (editing && editing.index >= scenes.length) setEditing(null);
+
+    // ── Drag & drop ──────────────────────────────────────────────────────────
+
+    const resetDrag = useCallback(() => {
+        setDragIndex(null);
+        setIsLifted(false);
+        setIndicatorIndex(null);
+        geometryRef.current = null;
+    }, []);
+
+    /** Park the lifted card under the pointer, offset by where it was grabbed. */
+    const positionGhost = useCallback(() => {
+        const ghost = ghostRef.current;
+        if (!ghost) return;
+        const { x, y } = pointerRef.current;
+        const { offsetX, offsetY } = grabRef.current;
+        // Tilted and slightly enlarged: the card reads as picked up off the wall
+        // rather than as a second card that appeared on it.
+        ghost.style.transform = `translate3d(${x - offsetX}px, ${y - offsetY}px, 0) rotate(1.5deg) scale(1.03)`;
+    }, []);
+
+    // Place it before its first paint, so it never flashes at the origin.
+    useLayoutEffect(() => {
+        if (isLifted) positionGhost();
+    }, [isLifted, positionGhost]);
+
+    const measureCards = useCallback(() => {
+        const grid = gridRef.current;
+        const scroller = containerRef.current;
+        if (!grid) return;
+        geometryRef.current = {
+            rects: Array.from(grid.children, (child) => child.getBoundingClientRect()),
+            scrollTop: scroller?.scrollTop ?? 0,
+        };
+    }, []);
+
+    /**
+     * Resolve the drop gap for a pointer position.
+     *
+     * A grid gives the pointer two axes to be wrong on, so rather than testing
+     * for containment (which leaves the gutters, the padding and the ragged last
+     * row unresolved) this takes the card nearest the pointer — rectangle
+     * distance, zero when inside — and picks the side of it the pointer is on.
+     */
+    const updateIndicatorFromPoint = useCallback((clientX: number, clientY: number) => {
+        const geometry = geometryRef.current;
+        if (!geometry || geometry.rects.length === 0) return;
+
+        // Cards have translated up by however far the grid scrolled since the
+        // measurement, so compare against the pointer shifted the same way.
+        const scrolled = (containerRef.current?.scrollTop ?? geometry.scrollTop) - geometry.scrollTop;
+        const y = clientY + scrolled;
+
+        let nearest = 0;
+        let nearestDistance = Infinity;
+        for (let i = 0; i < geometry.rects.length; i++) {
+            const rect = geometry.rects[i];
+            const dx = Math.max(rect.left - clientX, 0, clientX - rect.right);
+            const dy = Math.max(rect.top - y, 0, y - rect.bottom);
+            const distance = Math.hypot(dx, dy);
+            if (distance < nearestDistance) {
+                nearestDistance = distance;
+                nearest = i;
+            }
+        }
+
+        const rect = geometry.rects[nearest];
+        setIndicatorIndex(clientX < rect.left + rect.width / 2 ? nearest : nearest + 1);
+    }, []);
+
+    /** Record the grabbed card's geometry so the lifted copy can match it. */
+    const captureGrab = useCallback((card: HTMLElement, clientX: number, clientY: number) => {
+        const rect = card.getBoundingClientRect();
+        grabRef.current = { offsetX: clientX - rect.left, offsetY: clientY - rect.top };
+        pointerRef.current = { x: clientX, y: clientY };
+        setGhostSize({ width: rect.width, height: rect.height });
+    }, []);
+
+    // Desktop drag arms on press but only lifts once the mouse moves; touch goes
+    // through the long-press path below so a swipe can still scroll the grid.
+    const handlePointerDown = useCallback(
+        (index: number, e: React.PointerEvent) => {
+            if (e.pointerType === "touch") return;
+            if (e.button !== 0) return;
+            if (editing) return; // a press inside an open editor is not a drag
+            // Keep the press from selecting text across cards while dragging.
+            e.preventDefault();
+            captureGrab(e.currentTarget as HTMLElement, e.clientX, e.clientY);
+            pressOriginRef.current = { x: e.clientX, y: e.clientY };
+            setDragIndex(index);
+        },
+        [editing, captureGrab],
+    );
+
+    const handleDrop = useCallback(() => {
+        if (dragIndex === null || indicatorIndex === null || !editor) {
+            resetDrag();
+            return;
+        }
+
+        const reordered = moveScene(editor, scenes, dragIndex, indicatorIndex);
+        if (reordered) updateScenes(reordered);
+
+        resetDrag();
+    }, [dragIndex, indicatorIndex, scenes, editor, updateScenes, resetDrag]);
+
+    // Live handle on handleDrop for the touch listeners, which are attached once
+    // at the start of a gesture and would otherwise drop with stale state.
+    const dropRef = useRef(handleDrop);
+    useEffect(() => {
+        dropRef.current = handleDrop;
+    }, [handleDrop]);
+
+    // Touch bookkeeping: the long-press timer arms the pick-up, the abort
+    // controller tears down that gesture's window listeners in one shot.
+    const longPressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const gestureAbortRef = useRef<AbortController | null>(null);
+
+    const stopGesture = useCallback(() => {
+        if (longPressTimerRef.current) {
+            clearTimeout(longPressTimerRef.current);
+            longPressTimerRef.current = null;
+        }
+        gestureAbortRef.current?.abort();
+        gestureAbortRef.current = null;
+    }, []);
+
+    const handleTouchStart = useCallback(
+        (index: number, e: React.TouchEvent) => {
+            const touch = e.touches[0];
+            if (!touch) return;
+            if (editing) return;
+
+            stopGesture(); // abandon any gesture still in flight (e.g. a second finger)
+
+            // currentTarget is cleared once the handler returns, so hold the card
+            // itself for the timer that fires after it.
+            const card = e.currentTarget as HTMLElement;
+            const drag = { startX: touch.clientX, startY: touch.clientY, active: false };
+            const controller = new AbortController();
+            gestureAbortRef.current = controller;
+            const { signal } = controller;
+
+            longPressTimerRef.current = setTimeout(() => {
+                drag.active = true;
+                captureGrab(card, drag.startX, drag.startY);
+                setDragIndex(index);
+                setIsLifted(true);
+                measureCards();
+                updateIndicatorFromPoint(drag.startX, drag.startY);
+            }, TOUCH_DRAG_HOLD_MS);
+
+            window.addEventListener(
+                "touchmove",
+                (ev) => {
+                    const t = ev.touches[0];
+                    if (!t) return;
+                    if (!drag.active) {
+                        // Long-press hasn't fired: a real move means the user is
+                        // scrolling, so drop the pending pick-up and let it scroll.
+                        if (Math.hypot(t.clientX - drag.startX, t.clientY - drag.startY) > TOUCH_DRAG_CANCEL_PX) {
+                            stopGesture();
+                        }
+                        return;
+                    }
+                    // Active drag: block the grid scroll and track the drop gap.
+                    ev.preventDefault();
+                    pointerRef.current = { x: t.clientX, y: t.clientY };
+                    positionGhost();
+                    updateIndicatorFromPoint(t.clientX, t.clientY);
+                },
+                { passive: false, signal },
+            );
+
+            const onEnd = () => {
+                const wasActive = drag.active;
+                stopGesture();
+                if (wasActive) dropRef.current();
+                else resetDrag();
+            };
+            window.addEventListener("touchend", onEnd, { signal });
+            window.addEventListener("touchcancel", onEnd, { signal });
+        },
+        [editing, stopGesture, captureGrab, positionGhost, measureCards, updateIndicatorFromPoint, resetDrag],
+    );
+
+    // Abandon any in-flight gesture if the view is switched away mid-drag.
+    useEffect(() => stopGesture, [stopGesture]);
+
+    /**
+     * The whole mouse drag runs off window listeners rather than the grid's own
+     * handlers: a drag that outruns the cursor, leaves the panel, or ends over
+     * another element still tracks and still drops. Touch has its own listeners
+     * (attached per gesture above) and is ignored here — pointerup fires for
+     * touch releases too, which would otherwise drop twice.
+     */
+    useEffect(() => {
+        if (dragIndex === null) return;
+
+        const onPointerMove = (e: PointerEvent) => {
+            if (e.pointerType === "touch") return;
+            pointerRef.current = { x: e.clientX, y: e.clientY };
+
+            if (!isLifted) {
+                const { x, y } = pressOriginRef.current;
+                if (Math.hypot(e.clientX - x, e.clientY - y) <= MOUSE_DRAG_START_PX) return;
+                // The lifted copy isn't mounted yet, so a layout effect does its
+                // first placement; from the next move on, positionGhost does.
+                setIsLifted(true);
+                measureCards();
+            }
+
+            positionGhost();
+            updateIndicatorFromPoint(e.clientX, e.clientY);
+        };
+        const onPointerUp = (e: PointerEvent) => {
+            if (e.pointerType === "touch") return;
+            // A press that never became a drag is a click, not a drop.
+            if (!isLifted) resetDrag();
+            else handleDrop();
+        };
+
+        window.addEventListener("pointermove", onPointerMove);
+        window.addEventListener("pointerup", onPointerUp);
+        return () => {
+            window.removeEventListener("pointermove", onPointerMove);
+            window.removeEventListener("pointerup", onPointerUp);
+        };
+    }, [dragIndex, isLifted, handleDrop, resetDrag, positionGhost, measureCards, updateIndicatorFromPoint]);
+
+    const handleZoom = useCallback(
+        (zoomIn: boolean) => {
+            // Zooming in enlarges the cards, which means fitting fewer per row.
+            setSceneCardColumns((prev) =>
+                Math.min(SCENE_CARD_COLUMNS_MAX, Math.max(SCENE_CARD_COLUMNS_MIN, prev + (zoomIn ? -1 : 1))),
+            );
+        },
+        [setSceneCardColumns],
+    );
+
+    // Handed to every card, so it has to keep its identity across renders or the
+    // cards' memo() is worthless — a change of drop gap would re-render every
+    // card in the screenplay instead of only the two whose bar moved. Its
+    // members are all stable through a drag (nothing edits mid-gesture).
+    const editProps = useMemo(
+        () => ({
+            canEdit,
+            onEditChange: setEditValue,
+            onEditCommit: commitEdit,
+            onEditCancel: cancelEdit,
+            onStartEdit: startEdit,
+            onPointerDown: handlePointerDown,
+            onTouchStart: handleTouchStart,
+        }),
+        [canEdit, commitEdit, cancelEdit, startEdit, handlePointerDown, handleTouchStart],
+    );
+
+    const containerClass = join(styles.container, timelineOpen ? styles.timeline_open : "");
+
+    if (scenes.length === 0) {
+        return (
+            <div className={containerClass}>
+                <div className={styles.empty_state}>{t("scenesEmpty")}</div>
+            </div>
+        );
+    }
+
+    // A drop into either gap bordering the dragged card changes nothing, so the
+    // indicator is hidden there rather than promising a move that won't happen.
+    const showIndicator =
+        isLifted && dragIndex !== null && indicatorIndex !== dragIndex && indicatorIndex !== dragIndex + 1;
+    const draggedScene = dragIndex !== null ? scenes[dragIndex] : undefined;
+
+    return (
+        <>
+            <div ref={containerRef} className={join(containerClass, isLifted ? styles.dragging : "")}>
+                <div
+                    ref={gridRef}
+                    className={styles.grid}
+                    style={
+                        {
+                            "--cards-per-row": columns,
+                            "--card-zoom": zoom,
+                        } as React.CSSProperties
+                    }
+                >
+                    {scenes.map((scene: Scene, index: number) => {
+                        const display = sceneDisplays[index];
+                        return (
+                            <SceneCard
+                                key={scene.position}
+                                scene={scene}
+                                index={index}
+                                label={display?.label ?? `${index + 1}`}
+                                isOmitted={display?.isOmitted ?? false}
+                                isSource={isLifted && dragIndex === index}
+                                showDropBefore={showIndicator && indicatorIndex === index}
+                                showDropAfter={
+                                    showIndicator && index === scenes.length - 1 && indicatorIndex === scenes.length
+                                }
+                                editField={editing?.index === index ? editing.field : null}
+                                editValue={editing?.index === index ? editValue : ""}
+                                {...editProps}
+                            />
+                        );
+                    })}
+                </div>
+            </div>
+
+            {/* The lifted card, following the pointer. Outside the scroll
+                container and fixed to the viewport so it doesn't drift when the
+                grid scrolls under it mid-drag. */}
+            {isLifted && draggedScene && (
+                <div
+                    ref={ghostRef}
+                    className={styles.drag_ghost}
+                    style={
+                        {
+                            width: ghostSize.width,
+                            height: ghostSize.height,
+                            "--card-zoom": zoom,
+                        } as React.CSSProperties
+                    }
+                >
+                    <SceneCard
+                        scene={draggedScene}
+                        index={dragIndex!}
+                        label={sceneDisplays[dragIndex!]?.label ?? `${dragIndex! + 1}`}
+                        isOmitted={sceneDisplays[dragIndex!]?.isOmitted ?? false}
+                        isSource={false}
+                        isGhost
+                        showDropBefore={false}
+                        showDropAfter={false}
+                        editField={null}
+                        editValue=""
+                        {...editProps}
+                    />
+                </div>
+            )}
+
+            {/* Phones get one card per row regardless (three across 390px is
+                unreadable), so there is nothing for the pill to change there —
+                the board hides its own on phone for the same reason. */}
+            {!isPhone && (
+                <CardZoomControls columns={columns} onZoom={handleZoom} label={tNav("viewIndexCards")} />
+            )}
+        </>
+    );
+};
+
+export default SceneCardsPanel;
diff --git a/components/editor/sidebar/EditorSidebarNavigation.tsx b/components/editor/sidebar/EditorSidebarNavigation.tsx
index 7ce9311e..42b44508 100644
--- a/components/editor/sidebar/EditorSidebarNavigation.tsx
+++ b/components/editor/sidebar/EditorSidebarNavigation.tsx
@@ -7,6 +7,7 @@ import { ProjectContext } from "@src/context/ProjectContext";
 import { useViewContext } from "@src/context/ViewContext";
 import { Scene } from "@src/lib/screenplay/scenes";
 import { focusOnPosition } from "@src/lib/screenplay/editor";
+import { moveScene } from "@src/lib/screenplay/scene-reorder";
 import { computeSceneLabels } from "@src/lib/screenplay/scene-locking";
 import { Archive, Clapperboard, FolderTree, MessageSquare } from "lucide-react";
 import SidebarSceneItem from "./SidebarSceneItem";
@@ -212,42 +213,8 @@ const EditorSidebarNavigation = () => {
             return;
         }
 
-        const targetIndex = indicatorIndex;
-
-        // No-op if dropping in original position
-        if (targetIndex === dragIndex || targetIndex === dragIndex + 1) {
-            resetDrag();
-            return;
-        }
-
-        const dragScene = scenes[dragIndex];
-        const from = dragScene.position - 1;
-        const to = dragScene.nextPosition - 1;
-        const slice = editor.state.doc.slice(from, to);
-
-        const tr = editor.state.tr;
-        tr.delete(from, to);
-
-        let insertPos: number;
-        if (targetIndex <= dragIndex) {
-            insertPos = scenes[targetIndex].position - 1;
-        } else {
-            // targetIndex can be scenes.length (drop after last item)
-            const refPos =
-                targetIndex < scenes.length ? scenes[targetIndex].position - 1 : editor.state.doc.content.size;
-            insertPos = refPos - (to - from);
-        }
-
-        tr.insert(insertPos, slice.content);
-        editor.view.dispatch(tr);
-
-        // Optimistically reorder the scenes array so the sidebar updates immediately,
-        // before the debounced screenplay observer re-parses with accurate positions.
-        const reordered = [...scenes];
-        const [moved] = reordered.splice(dragIndex, 1);
-        const insertIndex = targetIndex > dragIndex ? targetIndex - 1 : targetIndex;
-        reordered.splice(insertIndex, 0, moved);
-        updateScenes(reordered);
+        const reordered = moveScene(editor, scenes, dragIndex, indicatorIndex);
+        if (reordered) updateScenes(reordered);
 
         resetDrag();
     }, [dragIndex, indicatorIndex, scenes, editor, updateScenes, resetDrag]);
diff --git a/components/navbar/ProjectNavbarDesktop.tsx b/components/navbar/ProjectNavbarDesktop.tsx
index 0006d921..5479e51f 100644
--- a/components/navbar/ProjectNavbarDesktop.tsx
+++ b/components/navbar/ProjectNavbarDesktop.tsx
@@ -47,9 +47,12 @@ const panelAnchorStyle: React.CSSProperties = {
  * Tablets land here too (they are wide enough for the desktop layout, see
  * [ProjectNavbar]), but they get [MobileFormatToolbar] above the on-screen
  * keyboard — which carries the same element/style/alignment controls — so the
- * centred dropdown is dropped on touch to avoid offering both at once. With a
- * hardware keyboard attached neither is shown, and the element shortcuts
- * (see DEFAULT_KEYBINDS) cover it.
+ * centred dropdown is dropped on touch to avoid offering both at once — that bar
+ * is shown whenever an editor is focused, docking at the bottom of the viewport
+ * when a hardware keyboard means there is no on-screen one to ride, so dropping
+ * the dropdown never leaves the controls unreachable. The bottom chrome a tablet
+ * does need — undo/redo, the view-mode toggles — rides that bar as flanking
+ * islands rather than crowding in here.
  */
 const ProjectNavbarDesktop = () => {
     const t = useTranslations("navbar");
diff --git a/components/navbar/ProjectNavbarMobile.tsx b/components/navbar/ProjectNavbarMobile.tsx
index d4549908..06995c6b 100644
--- a/components/navbar/ProjectNavbarMobile.tsx
+++ b/components/navbar/ProjectNavbarMobile.tsx
@@ -17,8 +17,6 @@ import {
     Menu,
     Mic,
     Monitor,
-    Redo2,
-    Undo2,
 } from "lucide-react";
 
 import { useViewContext } from "@src/context/ViewContext";
@@ -28,7 +26,7 @@ import { uploadToCloudPopup } from "@src/lib/screenplay/popup";
 import { join } from "@src/lib/utils/misc";
 
 import { useProjectNavbar } from "./useProjectNavbar";
-import { StatusIndicator } from "./ProjectNavbarShared";
+import { HistoryControls, StatusIndicator } from "./ProjectNavbarShared";
 import ProjectNavbarMobileMenu from "./ProjectNavbarMobileMenu";
 import SavesPanel from "./SavesPanel";
 import ProductionPanel from "./ProductionPanel";
@@ -135,14 +133,6 @@ const ProjectNavbarMobile = () => {
         }
     }, [isEditorView, activePanel]);
 
-    // Undo/redo are backed by the collaboration UndoManager. Guard on the command
-    // existing so calling before Yjs is ready can't throw.
-    const runHistory = (action: "undo" | "redo") => {
-        if (activeEditor && typeof activeEditor.commands[action] === "function") {
-            activeEditor.chain().focus()[action]().run();
-        }
-    };
-
     // Voice dictation into the editor being written in. On phone the mic lives
     // HERE rather than in the editor footer, which sits behind the on-screen
     // keyboard and so is out of reach exactly when one dictates; the footer's mic
@@ -182,12 +172,7 @@ const ProjectNavbarMobile = () => {
                             <div className={`${navBtn.button} ${navbar.mobile_icon}`} onClick={exitEditMode}>
                                 <Check size={18} />
                             </div>
-                            <div className={`${navBtn.button} ${navbar.mobile_icon}`} onClick={() => runHistory("undo")}>
-                                <Undo2 size={18} />
-                            </div>
-                            <div className={`${navBtn.button} ${navbar.mobile_icon}`} onClick={() => runHistory("redo")}>
-                                <Redo2 size={18} />
-                            </div>
+                            <HistoryControls editor={activeEditor} className={navbar.mobile_icon} />
                         </div>
                     ) : (
                         <div className={navbar.mobile_left}>
diff --git a/components/navbar/ProjectNavbarShared.tsx b/components/navbar/ProjectNavbarShared.tsx
index 2feed114..3847bfbe 100644
--- a/components/navbar/ProjectNavbarShared.tsx
+++ b/components/navbar/ProjectNavbarShared.tsx
@@ -2,14 +2,17 @@
 
 import { useContext, useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
-import { CircleCheckBig, WifiOff, WifiSync } from "lucide-react";
+import { CircleCheckBig, Redo2, Undo2, WifiOff, WifiSync } from "lucide-react";
+import type { Editor } from "@tiptap/react";
 
 import { ProjectContext } from "@src/context/ProjectContext";
 import { useProjectIdFromUrl } from "@src/lib/utils/hooks";
 import { ConnectionStatus } from "@src/lib/utils/enums";
+import { join } from "@src/lib/utils/misc";
 import type { StorageUsage } from "@src/lib/assets/cloud-asset-sync";
 
 import navbar from "./ProjectNavbar.module.css";
+import navBtn from "@components/utils/NavbarIconButton.module.css";
 
 /**
  * Presentational navbar pieces shared by the desktop bar ([ProjectNavbar]) and
@@ -121,6 +124,56 @@ export const StatusIndicator = () => {
     );
 };
 
+/**
+ * Undo/redo pair for the editor being written in.
+ *
+ * Rendered in the phone bar's edit-mode cluster, and — on any touch device — in
+ * the desktop bar too, because a tablet writing with the on-screen keyboard has
+ * no other way to reach them. iPadOS's own undo affordances (the keyboard
+ * shortcuts bar, the three-finger swipe) drive WebKit's undo stack, which this
+ * history is not on: it is backed by the collaboration UndoManager, so only these
+ * buttons and the Cmd+Z keybind reach it. A pointer device has that keybind and
+ * so is left with a bar free of them.
+ */
+export const HistoryControls = ({
+    editor,
+    className,
+}: {
+    editor: Editor | null;
+    className?: string;
+}) => {
+    const t = useTranslations("navbar");
+
+    // Guard on the command existing so calling before Yjs is ready can't throw.
+    const run = (action: "undo" | "redo") => {
+        if (editor && typeof editor.commands[action] === "function") {
+            editor.chain().focus()[action]().run();
+        }
+    };
+
+    const button = (action: "undo" | "redo") => (
+        <div
+            className={join(navBtn.button, className ?? "")}
+            // Swallow the compat mousedown so the tap can't blur the
+            // contenteditable: on touch that would drop the on-screen keyboard
+            // (and the format bar riding it) on every undo. Same guard the
+            // keyboard toolbar uses — see [MobileFormatToolbar].
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={() => run(action)}
+            aria-label={t(action)}
+        >
+            {action === "undo" ? <Undo2 size={18} /> : <Redo2 size={18} />}
+        </div>
+    );
+
+    return (
+        <>
+            {button("undo")}
+            {button("redo")}
+        </>
+    );
+};
+
 const getInitial = (name: string): string => {
     if (!name) return "?";
     return name.charAt(0).toUpperCase();
diff --git a/components/navbar/ViewOptionsDropdown.tsx b/components/navbar/ViewOptionsDropdown.tsx
deleted file mode 100644
index b3fd2f12..00000000
--- a/components/navbar/ViewOptionsDropdown.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-"use client";
-
-import { useState, useRef, useEffect, useCallback } from "react";
-import { useTranslations } from "next-intl";
-import { PanelType, useViewContext } from "@src/context/ViewContext";
-import {
-    ChevronDown,
-    PanelRight,
-    PanelRightClose,
-    ArrowLeftRight,
-    Eye,
-    GanttChartSquare,
-} from "lucide-react";
-
-import styles from "./ViewOptionsDropdown.module.css";
-
-const ViewOptionsDropdown = () => {
-    const t = useTranslations("navbar");
-    const {
-        isSplit,
-        primaryPanel,
-        setSecondaryPanel,
-        swapPanels,
-        timelineOpen,
-        setTimelineOpen,
-    } = useViewContext();
-
-    const handleSplitToggle = useCallback(() => {
-        if (isSplit) {
-            setSecondaryPanel(null);
-        } else {
-            // Default the new side to a singleton view (documents need a docId,
-            // which only opening from the sidebar/outline provides).
-            const other: PanelType = primaryPanel === "screenplay" ? "title" : "screenplay";
-            setSecondaryPanel(other);
-        }
-    }, [isSplit, primaryPanel, setSecondaryPanel]);
-
-    const [isOpen, setIsOpen] = useState(false);
-    const dropdownRef = useRef<HTMLDivElement>(null);
-
-    // Close dropdown when clicking outside
-    useEffect(() => {
-        if (!isOpen) return;
-
-        const handleClickOutside = (e: MouseEvent) => {
-            if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
-                setIsOpen(false);
-            }
-        };
-
-        window.addEventListener("mousedown", handleClickOutside);
-        return () => window.removeEventListener("mousedown", handleClickOutside);
-    }, [isOpen]);
-
-    return (
-        <div className={styles.container} ref={dropdownRef}>
-            <button className={styles.trigger} onClick={() => setIsOpen(!isOpen)}>
-                <Eye size={16} />
-                <ChevronDown
-                    size={14}
-                    className={`${styles.chevron} ${isOpen ? styles.chevron_open : ""}`}
-                />
-            </button>
-
-            {isOpen && (
-                <div className={styles.dropdown_menu}>
-                    <button
-                        className={`${styles.dropdown_item} ${timelineOpen ? styles.dropdown_item_active : ""}`}
-                        onClick={() => {
-                            setTimelineOpen((prev) => !prev);
-                            setIsOpen(false);
-                        }}
-                    >
-                        <GanttChartSquare size={16} />
-                        <span className={styles.item_label}>{t("timeline")}</span>
-                    </button>
-                    <button
-                        className={`${styles.dropdown_item} ${isSplit ? styles.dropdown_item_active : ""}`}
-                        onClick={handleSplitToggle}
-                    >
-                        {isSplit ? <PanelRightClose size={16} /> : <PanelRight size={16} />}
-                        <span className={styles.item_label}>{isSplit ? t("unsplitPanel") : t("splitPanel")}</span>
-                    </button>
-                    <button
-                        className={styles.dropdown_item}
-                        onClick={swapPanels}
-                        disabled={!isSplit}
-                    >
-                        <ArrowLeftRight size={16} />
-                        <span className={styles.item_label}>{t("swapPanels")}</span>
-                    </button>
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default ViewOptionsDropdown;
diff --git a/components/project/EditorFooter.module.css b/components/project/EditorFooter.module.css
index 773d47d1..652e8d47 100644
--- a/components/project/EditorFooter.module.css
+++ b/components/project/EditorFooter.module.css
@@ -107,8 +107,4 @@
         opacity: 1;
     }
 
-    /* Fullscreen focus mode has no purpose on phone (see EditorFooter.tsx). */
-    .focus_action {
-        display: none;
-    }
 }
diff --git a/components/project/EditorFooter.tsx b/components/project/EditorFooter.tsx
index da964528..f9ba7ed5 100644
--- a/components/project/EditorFooter.tsx
+++ b/components/project/EditorFooter.tsx
@@ -1,100 +1,31 @@
 "use client";
 
-import { useCallback, useContext, useEffect, useRef } from "react";
-import { useTranslations } from "next-intl";
-import { Maximize, Mic, Minimize, Scroll, SpellCheck } from "lucide-react";
-
-import { UserContext } from "@src/context/UserContext";
-import { useViewContext } from "@src/context/ViewContext";
-import { useSpellcheck } from "@src/context/SpellcheckContext";
-import { join } from "@src/lib/utils/misc";
-import { useIsPhone } from "@src/lib/utils/hooks";
+import { useIsPhone, useIsTouch } from "@src/lib/utils/hooks";
 import { useActiveEditor } from "@src/lib/editor/use-active-editor";
-import { getDictationLanguage, useDictation } from "@src/lib/editor/use-dictation";
-import WritingTimer from "./WritingTimer";
+import EditorFooterActions from "./EditorFooterActions";
 
 import styles from "./EditorFooter.module.css";
 
 /**
  * Subtle status bar at the bottom of the panel area: icon toggles for the view
  * modes (endless scroll, comments, focus mode).
+ *
+ * Desktop and phone only. A tablet takes the desktop layout but also carries the
+ * keyboard toolbar, and an always-open bubble sitting under it is one floating
+ * island too many — so there the same controls (see [EditorFooterActions]) hang
+ * off that toolbar's burger instead, and this renders nothing at all. Returning
+ * null rather than hiding in CSS is what keeps dictation to a single live
+ * session: a hidden copy would still be mounted.
  */
 const EditorFooter = () => {
-    const t = useTranslations("navbar");
-    const { isZenMode, updateIsZenMode } = useContext(UserContext);
-    const { isEndlessScroll, setIsEndlessScroll, setLeftSidebarOpen, setRightSidebarOpen } = useViewContext();
-    const { spellcheckLang, setSpellcheckLang } = useSpellcheck();
     const isPhone = useIsPhone();
+    const isTouch = useIsTouch();
     // The footer's toggles all act on the active text editor. Board/statistics
     // panels have none, so on phone (single-panel) the footer is hidden there.
     const activeEditor = useActiveEditor();
 
-    // Voice dictation into the active editor. The language is a device
-    // preference set in Language settings; read it fresh at start so a change
-    // there takes effect without remounting. Hidden where the browser lacks the
-    // Web Speech API (e.g. Firefox) — and on phone, where the footer disappears
-    // behind the on-screen keyboard: the mic lives in the navbar's edit-mode
-    // cluster there instead ([ProjectNavbarMobile]). Keep it to one surface per
-    // platform — two live sessions would both write into the same editor.
-    const dictation = useDictation(activeEditor, null);
-    const toggleDictation = useCallback(() => {
-        if (dictation.isListening) dictation.stop();
-        else dictation.start(getDictationLanguage());
-    }, [dictation]);
-    // Switching to a panel with no editor (desktop board/statistics) leaves
-    // nothing to dictate into — stop the mic so it isn't left listening.
-    useEffect(() => {
-        if (!activeEditor && dictation.isListening) dictation.stop();
-    }, [activeEditor, dictation.isListening, dictation.stop]);
-
-    // Remember the last active language so the toggle can restore it after being turned
-    // off; default to English when nothing has been selected yet.
-    const lastSpellcheckLang = useRef("en");
-    useEffect(() => {
-        if (spellcheckLang) lastSpellcheckLang.current = spellcheckLang;
-    }, [spellcheckLang]);
-
-    const toggleSpellcheck = useCallback(() => {
-        setSpellcheckLang(spellcheckLang ? null : lastSpellcheckLang.current);
-    }, [spellcheckLang, setSpellcheckLang]);
-
-    // Sidebar open-state captured on entering focus mode so it can be restored on exit.
-    const sidebarsBeforeFocus = useRef<{ left: boolean; right: boolean } | null>(null);
-
-    const enterFocusMode = useCallback(() => {
-        setLeftSidebarOpen((prev) => {
-            setRightSidebarOpen((prevRight) => {
-                sidebarsBeforeFocus.current = { left: prev, right: prevRight };
-                return false;
-            });
-            return false;
-        });
-        updateIsZenMode(true);
-        document.documentElement.requestFullscreen?.();
-    }, [updateIsZenMode, setLeftSidebarOpen, setRightSidebarOpen]);
-
-    const exitFocusMode = useCallback(() => {
-        updateIsZenMode(false);
-        if (document.fullscreenElement) {
-            document.exitFullscreen();
-        }
-        if (sidebarsBeforeFocus.current) {
-            setLeftSidebarOpen(sidebarsBeforeFocus.current.left);
-            setRightSidebarOpen(sidebarsBeforeFocus.current.right);
-            sidebarsBeforeFocus.current = null;
-        }
-    }, [updateIsZenMode, setLeftSidebarOpen, setRightSidebarOpen]);
-
-    // Keep zen state in sync when the user leaves fullscreen via Escape.
-    useEffect(() => {
-        const onFullscreenChange = () => {
-            if (!document.fullscreenElement && isZenMode) {
-                exitFocusMode();
-            }
-        };
-        document.addEventListener("fullscreenchange", onFullscreenChange);
-        return () => document.removeEventListener("fullscreenchange", onFullscreenChange);
-    }, [isZenMode, exitFocusMode]);
+    // Tablet: the burger on the keyboard toolbar owns these controls.
+    if (isTouch && !isPhone) return null;
 
     // On phone the workspace is single-panel: hide the footer when the shown
     // panel has no text editor (board, statistics) — its controls don't apply.
@@ -102,50 +33,7 @@ const EditorFooter = () => {
 
     return (
         <div className={styles.bubble_right}>
-            <WritingTimer triggerClassName={styles.action} triggerActiveClassName={styles.action_active} />
-
-            {dictation.isSupported && activeEditor && !isPhone && (
-                <button
-                    type="button"
-                    className={join(styles.action, dictation.isListening ? styles.recording : "")}
-                    onClick={toggleDictation}
-                    title={t("dictate")}
-                    aria-label={t("dictate")}
-                    aria-pressed={dictation.isListening}
-                >
-                    <Mic size={18} />
-                </button>
-            )}
-
-            <button
-                type="button"
-                className={join(styles.action, isEndlessScroll ? styles.action_active : "")}
-                onClick={() => setIsEndlessScroll((prev) => !prev)}
-                title={t("endlessScroll")}
-                aria-label={t("endlessScroll")}
-            >
-                <Scroll size={18} />
-            </button>
-            <button
-                type="button"
-                className={join(styles.action, spellcheckLang ? styles.action_active : "")}
-                onClick={toggleSpellcheck}
-                title={t("toggleSpellcheck")}
-                aria-label={t("toggleSpellcheck")}
-            >
-                <SpellCheck size={18} />
-            </button>
-            {/* Focus mode relies on the Fullscreen API and hiding desktop sidebar
-                chrome — neither meaningful on phone — so it's hidden there (CSS). */}
-            <button
-                type="button"
-                className={join(styles.action, styles.focus_action, isZenMode ? styles.action_active : "")}
-                onClick={isZenMode ? exitFocusMode : enterFocusMode}
-                title={t("focusMode")}
-                aria-label={t("focusMode")}
-            >
-                {isZenMode ? <Minimize size={18} /> : <Maximize size={18} />}
-            </button>
+            <EditorFooterActions />
         </div>
     );
 };
diff --git a/components/project/EditorFooterActions.tsx b/components/project/EditorFooterActions.tsx
new file mode 100644
index 00000000..3daf7434
--- /dev/null
+++ b/components/project/EditorFooterActions.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import { useCallback, useContext, useEffect, useRef } from "react";
+import { useTranslations } from "next-intl";
+import { Maximize, Mic, Minimize, Scroll, SpellCheck } from "lucide-react";
+
+import { UserContext } from "@src/context/UserContext";
+import { useViewContext } from "@src/context/ViewContext";
+import { useSpellcheck } from "@src/context/SpellcheckContext";
+import { join } from "@src/lib/utils/misc";
+import { useIsPhone, useIsTouch } from "@src/lib/utils/hooks";
+import { useActiveEditor } from "@src/lib/editor/use-active-editor";
+import { getDictationLanguage, useDictation } from "@src/lib/editor/use-dictation";
+import WritingTimer from "./WritingTimer";
+
+import styles from "./EditorFooter.module.css";
+
+/**
+ * The view-mode toggles themselves — writing timer, dictation, endless scroll,
+ * spellcheck, focus mode — without the surface they sit on.
+ *
+ * Split out from [EditorFooter] because a tablet shows them somewhere else
+ * entirely: the always-open bottom-right bubble reads as clutter next to the
+ * keyboard toolbar, so there they live behind that toolbar's burger instead (see
+ * [MobileFormatToolbar]). Both surfaces render this, never at the same time —
+ * which matters beyond deduplication, since two mounted copies would mean two
+ * live dictation sessions writing into the same editor.
+ */
+const EditorFooterActions = () => {
+    const t = useTranslations("navbar");
+    const { isZenMode, updateIsZenMode } = useContext(UserContext);
+    const { isEndlessScroll, setIsEndlessScroll, setLeftSidebarOpen, setRightSidebarOpen } = useViewContext();
+    const { spellcheckLang, setSpellcheckLang } = useSpellcheck();
+    const isPhone = useIsPhone();
+    const isTouch = useIsTouch();
+    const activeEditor = useActiveEditor();
+
+    // Voice dictation into the active editor. The language is a device
+    // preference set in Language settings; read it fresh at start so a change
+    // there takes effect without remounting. Hidden where the browser lacks the
+    // Web Speech API (e.g. Firefox) — and on phone, where the footer disappears
+    // behind the on-screen keyboard: the mic lives in the navbar's edit-mode
+    // cluster there instead ([ProjectNavbarMobile]). Keep it to one surface per
+    // platform — two live sessions would both write into the same editor.
+    const dictation = useDictation(activeEditor, null);
+    const toggleDictation = useCallback(() => {
+        if (dictation.isListening) dictation.stop();
+        else dictation.start(getDictationLanguage());
+    }, [dictation]);
+    // Switching to a panel with no editor (desktop board/statistics) leaves
+    // nothing to dictate into — stop the mic so it isn't left listening.
+    useEffect(() => {
+        if (!activeEditor && dictation.isListening) dictation.stop();
+    }, [activeEditor, dictation.isListening, dictation.stop]);
+
+    // Remember the last active language so the toggle can restore it after being turned
+    // off; default to English when nothing has been selected yet.
+    const lastSpellcheckLang = useRef("en");
+    useEffect(() => {
+        if (spellcheckLang) lastSpellcheckLang.current = spellcheckLang;
+    }, [spellcheckLang]);
+
+    const toggleSpellcheck = useCallback(() => {
+        setSpellcheckLang(spellcheckLang ? null : lastSpellcheckLang.current);
+    }, [spellcheckLang, setSpellcheckLang]);
+
+    // Sidebar open-state captured on entering focus mode so it can be restored on exit.
+    const sidebarsBeforeFocus = useRef<{ left: boolean; right: boolean } | null>(null);
+
+    const enterFocusMode = useCallback(() => {
+        setLeftSidebarOpen((prev) => {
+            setRightSidebarOpen((prevRight) => {
+                sidebarsBeforeFocus.current = { left: prev, right: prevRight };
+                return false;
+            });
+            return false;
+        });
+        updateIsZenMode(true);
+        document.documentElement.requestFullscreen?.();
+    }, [updateIsZenMode, setLeftSidebarOpen, setRightSidebarOpen]);
+
+    const exitFocusMode = useCallback(() => {
+        updateIsZenMode(false);
+        if (document.fullscreenElement) {
+            document.exitFullscreen();
+        }
+        if (sidebarsBeforeFocus.current) {
+            setLeftSidebarOpen(sidebarsBeforeFocus.current.left);
+            setRightSidebarOpen(sidebarsBeforeFocus.current.right);
+            sidebarsBeforeFocus.current = null;
+        }
+    }, [updateIsZenMode, setLeftSidebarOpen, setRightSidebarOpen]);
+
+    // Keep zen state in sync when the user leaves fullscreen via Escape.
+    useEffect(() => {
+        const onFullscreenChange = () => {
+            if (!document.fullscreenElement && isZenMode) {
+                exitFocusMode();
+            }
+        };
+        document.addEventListener("fullscreenchange", onFullscreenChange);
+        return () => document.removeEventListener("fullscreenchange", onFullscreenChange);
+    }, [isZenMode, exitFocusMode]);
+
+    return (
+        <>
+            <WritingTimer triggerClassName={styles.action} triggerActiveClassName={styles.action_active} />
+
+            {dictation.isSupported && activeEditor && !isPhone && (
+                <button
+                    type="button"
+                    className={join(styles.action, dictation.isListening ? styles.recording : "")}
+                    onClick={toggleDictation}
+                    title={t("dictate")}
+                    aria-label={t("dictate")}
+                    aria-pressed={dictation.isListening}
+                >
+                    <Mic size={18} />
+                </button>
+            )}
+
+            <button
+                type="button"
+                className={join(styles.action, isEndlessScroll ? styles.action_active : "")}
+                onClick={() => setIsEndlessScroll((prev) => !prev)}
+                title={t("endlessScroll")}
+                aria-label={t("endlessScroll")}
+            >
+                <Scroll size={18} />
+            </button>
+            <button
+                type="button"
+                className={join(styles.action, spellcheckLang ? styles.action_active : "")}
+                onClick={toggleSpellcheck}
+                title={t("toggleSpellcheck")}
+                aria-label={t("toggleSpellcheck")}
+            >
+                <SpellCheck size={18} />
+            </button>
+            {/* Focus mode is the Fullscreen API plus hiding the desktop sidebar
+                chrome, and neither means anything on a touch device: iOS has no
+                fullscreen to enter, and the sidebars are already overlays. Gated
+                on the pointer rather than the width so tablets are covered too —
+                they take the desktop layout and would otherwise keep a button
+                that does nothing. */}
+            {!isTouch && (
+                <button
+                    type="button"
+                    className={join(styles.action, isZenMode ? styles.action_active : "")}
+                    onClick={isZenMode ? exitFocusMode : enterFocusMode}
+                    title={t("focusMode")}
+                    aria-label={t("focusMode")}
+                >
+                    {isZenMode ? <Minimize size={18} /> : <Maximize size={18} />}
+                </button>
+            )}
+        </>
+    );
+};
+
+export default EditorFooterActions;
diff --git a/components/navbar/ViewOptionsDropdown.module.css b/components/project/PanelMenu.module.css
similarity index 62%
rename from components/navbar/ViewOptionsDropdown.module.css
rename to components/project/PanelMenu.module.css
index 963402b1..5b637036 100644
--- a/components/navbar/ViewOptionsDropdown.module.css
+++ b/components/project/PanelMenu.module.css
@@ -1,39 +1,5 @@
-.container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    height: 100%;
-}
-
-.trigger {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    padding: 6px 10px;
-    border: none;
-    border-radius: 6px;
-    background: transparent;
-    cursor: pointer;
-    color: var(--secondary-text);
-    transition:
-        background-color 0.15s ease,
-        color 0.15s ease;
-}
-
-.trigger:hover {
-    background-color: var(--secondary-hover);
-    color: var(--primary-text);
-}
-
-.chevron {
-    transition: transform 0.2s ease;
-    color: var(--secondary-text);
-}
-
-.chevron_open {
-    transform: rotate(180deg);
-}
+/* The menu the panel switcher opens (SplitPanelContainer's PanelSwitcherMenu)
+   and the controls inside it. */
 
 .dropdown_menu {
     position: absolute;
@@ -86,3 +52,45 @@
 .item_label {
     flex: 1;
 }
+
+/* Row of icon-only, mutually exclusive toggles (see ScreenplayViewSwitcher).
+   Left-aligned rather than stretched: the buttons are square and sit under the
+   icon column of the labelled items above and below them, so the menu keeps one
+   left edge. The 3px inset is what puts a 14px glyph centred in a 32px square at
+   the same 12px as a .dropdown_item's own icon. */
+.icon_row {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    gap: 4px;
+    width: 100%;
+    padding: 2px 3px;
+}
+
+.icon_btn {
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    color: var(--secondary-text);
+    background-color: transparent;
+    transition:
+        background-color 0.15s ease,
+        color 0.15s ease;
+}
+
+.icon_btn:hover:not(:disabled) {
+    background-color: var(--secondary-hover);
+    color: var(--primary-text);
+}
+
+.icon_btn_active {
+    background-color: var(--secondary-hover);
+    color: var(--primary-text);
+}
diff --git a/components/project/ProjectWorkspace.tsx b/components/project/ProjectWorkspace.tsx
index 2247b7db..03016832 100644
--- a/components/project/ProjectWorkspace.tsx
+++ b/components/project/ProjectWorkspace.tsx
@@ -14,7 +14,7 @@ import { Popup } from "@components/popup/Popup";
 import SplitPanelContainer from "./SplitPanelContainer";
 import EditorFooter from "./EditorFooter";
 import TimelinePanel from "@components/editor/timeline/TimelinePanel";
-import MobileFormatToolbar from "@components/editor/MobileFormatToolbar";
+import EditorBottomBar from "@components/editor/EditorBottomBar";
 import styles from "./ProjectWorkspace.module.css";
 import { ChevronLeft, ChevronRight, Pencil } from "lucide-react";
 
@@ -187,8 +187,9 @@ const ProjectWorkspace = () => {
             {/* Right sidebar */}
             <EditorSidebarFormat />
 
-            {/* Phone-only formatting bar above the on-screen keyboard */}
-            <MobileFormatToolbar />
+            {/* Touch-only bottom chrome: undo/redo, the format pill, and the
+                view-mode burger, riding the on-screen keyboard when there is one. */}
+            <EditorBottomBar />
 
             {/* Phone-only pen button: enters edit mode from the reader. Hides with
                 the rest of the chrome while scrolling down through the script. */}
diff --git a/components/project/ScreenplayViewSwitcher.tsx b/components/project/ScreenplayViewSwitcher.tsx
new file mode 100644
index 00000000..21f94064
--- /dev/null
+++ b/components/project/ScreenplayViewSwitcher.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { LayoutGrid, LucideIcon, Rows3 } from "lucide-react";
+import { ScreenplayViewMode, useViewContext } from "@src/context/ViewContext";
+import { join } from "@src/lib/utils/misc";
+
+import styles from "./PanelMenu.module.css";
+
+type ViewModeKey = "viewScript" | "viewIndexCards";
+
+// Both glyphs are the same rounded square subdivided differently — lines for the
+// running script, cells for the card grid — so the row reads as one control with
+// two settings rather than as two unrelated buttons.
+const VIEW_MODES: { mode: ScreenplayViewMode; icon: LucideIcon; labelKey: ViewModeKey }[] = [
+    { mode: "editor", icon: Rows3, labelKey: "viewScript" },
+    { mode: "cards", icon: LayoutGrid, labelKey: "viewIndexCards" },
+];
+
+/**
+ * Icon row choosing how the screenplay is rendered: the script in the editor
+ * (the default) or the scene index cards.
+ *
+ * Icon-only because these are alternatives to each other rather than a list of
+ * commands — a row of exclusive states reads at a glance where stacked labelled
+ * rows would not. The panel menu only renders it over a screenplay panel, since
+ * it means nothing over a board or the title page.
+ */
+const ScreenplayViewSwitcher = ({ size = 16, onSelect }: { size?: number; onSelect?: () => void }) => {
+    const t = useTranslations("navbar");
+    const { screenplayView, setScreenplayView } = useViewContext();
+
+    return (
+        <div className={styles.icon_row}>
+            {VIEW_MODES.map(({ mode, icon: Icon, labelKey }) => {
+                const isActive = screenplayView === mode;
+                return (
+                    <button
+                        key={mode}
+                        type="button"
+                        className={join(styles.icon_btn, isActive ? styles.icon_btn_active : "")}
+                        title={t(labelKey)}
+                        aria-label={t(labelKey)}
+                        aria-pressed={isActive}
+                        onClick={() => {
+                            setScreenplayView(mode);
+                            onSelect?.();
+                        }}
+                    >
+                        <Icon size={size} />
+                    </button>
+                );
+            })}
+        </div>
+    );
+};
+
+export default ScreenplayViewSwitcher;
diff --git a/components/project/SplitPanelContainer.module.css b/components/project/SplitPanelContainer.module.css
index 9c3cfb92..bcfe253f 100644
--- a/components/project/SplitPanelContainer.module.css
+++ b/components/project/SplitPanelContainer.module.css
@@ -150,7 +150,14 @@
     position: absolute;
     top: 8px;
     left: 8px;
-    z-index: 4;
+    /* Above every piece of chrome a panel can float, so the menu this opens is
+     * never covered by it. The panel shell is `position: relative` with no
+     * z-index of its own, so a panel's own floating chrome competes here rather
+     * than being contained: the board's toolbar pills sit at 11 and its asset
+     * error at 12 (BoardCanvas.module.css), the comment gutter at 12
+     * (CommentGutter.module.css). Still below the drag-over drop overlay (50)
+     * and the reader's scroll track (52), which both belong on top of this. */
+    z-index: 13;
     display: flex;
     flex-direction: row;
     gap: 4px;
diff --git a/components/project/SplitPanelContainer.tsx b/components/project/SplitPanelContainer.tsx
index 6b5df83b..875333dd 100644
--- a/components/project/SplitPanelContainer.tsx
+++ b/components/project/SplitPanelContainer.tsx
@@ -11,6 +11,8 @@ import TitlePagePanel from "@components/editor/TitlePagePanel";
 import DraftEditorPanel from "@components/editor/DraftEditorPanel";
 import TreeDocumentPanel from "@components/editor/TreeDocumentPanel";
 import BoardPanel from "@components/editor/BoardPanel";
+import SceneCardsPanel from "@components/editor/SceneCardsPanel";
+import ScreenplayViewSwitcher from "./ScreenplayViewSwitcher";
 import StatisticsClientPage from "@components/projects/stats/StatisticsClientPage";
 import DragHandle from "./DragHandle";
 import { SuggestionData } from "@components/editor/SuggestionMenu";
@@ -26,7 +28,7 @@ import {
     PanelRightClose,
 } from "lucide-react";
 import styles from "./SplitPanelContainer.module.css";
-import dropdown from "@components/navbar/ViewOptionsDropdown.module.css";
+import dropdown from "./PanelMenu.module.css";
 
 interface SplitPanelContainerProps {
     suggestions: string[];
@@ -43,17 +45,30 @@ const PanelRenderer = ({
     suggestionData,
     updateSuggestionData,
 }: { panel: PanelType; isVisible: boolean } & SplitPanelContainerProps) => {
+    const { screenplayView } = useViewContext();
+
     switch (panel) {
-        case "screenplay":
+        case "screenplay": {
+            // The index-card grid covers the editor rather than replacing it:
+            // unmounting the screenplay editor would tear down its Yjs binding
+            // and null the handle ProjectContext hands to the sidebar, the
+            // search and the timeline. `isVisible` false while the cards are up
+            // also parks it properly — blurred, with no caret for WebKit to
+            // chase (see DocumentEditorPanel).
+            const cardsUp = isVisible && screenplayView === "cards";
             return (
-                <EditorPanel
-                    isVisible={isVisible}
-                    suggestions={suggestions}
-                    updateSuggestions={updateSuggestions}
-                    suggestionData={suggestionData}
-                    updateSuggestionData={updateSuggestionData}
-                />
+                <>
+                    <EditorPanel
+                        isVisible={isVisible && !cardsUp}
+                        suggestions={suggestions}
+                        updateSuggestions={updateSuggestions}
+                        suggestionData={suggestionData}
+                        updateSuggestionData={updateSuggestionData}
+                    />
+                    {cardsUp && <SceneCardsPanel />}
+                </>
             );
+        }
         case "statistics":
             return <StatisticsClientPage />;
         case "title":
@@ -135,18 +150,10 @@ const PanelSwitcherMenu = ({ currentPanel, side }: { currentPanel: PanelType; si
             </button>
             {isOpen && (
                 <div className={dropdown.dropdown_menu} style={{ left: 0, transform: "none" }}>
-                    {/* Timeline strip toggle — available on every platform. */}
-                    <button
-                        className={`${dropdown.dropdown_item} ${timelineOpen ? dropdown.dropdown_item_active : ""}`}
-                        onClick={() => {
-                            setTimelineOpen((prev) => !prev);
-                            setIsOpen(false);
-                        }}
-                    >
-                        <GanttChartSquare size={14} />
-                        <span className={dropdown.item_label}>{t("timeline")}</span>
-                    </button>
-                    <div className={styles.panel_switcher_separator} />
+                    {/* How the script is rendered — only over a screenplay. */}
+                    {currentPanel === "screenplay" && (
+                        <ScreenplayViewSwitcher size={14} onSelect={() => setIsOpen(false)} />
+                    )}
                     {/* Split view is single-panel-only on phones. */}
                     {!isPhone && (
                         <>
@@ -184,6 +191,20 @@ const PanelSwitcherMenu = ({ currentPanel, side }: { currentPanel: PanelType; si
                             <span className={dropdown.item_label}>{t(labelKey as Parameters<typeof t>[0])}</span>
                         </button>
                     ))}
+                    <div className={styles.panel_switcher_separator} />
+                    {/* Timeline strip toggle — available on every platform. It
+                        toggles a strip rather than choosing what the panel shows,
+                        so it sits below the panel list in its own section. */}
+                    <button
+                        className={`${dropdown.dropdown_item} ${timelineOpen ? dropdown.dropdown_item_active : ""}`}
+                        onClick={() => {
+                            setTimelineOpen((prev) => !prev);
+                            setIsOpen(false);
+                        }}
+                    >
+                        <GanttChartSquare size={14} />
+                        <span className={dropdown.item_label}>{t("timeline")}</span>
+                    </button>
                 </div>
             )}
         </div>
diff --git a/messages/de.json b/messages/de.json
index e680e467..a26bf649 100644
--- a/messages/de.json
+++ b/messages/de.json
@@ -30,6 +30,8 @@
     "menu": "Menü",
     "close": "Schließen",
     "history": "Verlauf",
+    "undo": "Rückgängig",
+    "redo": "Wiederholen",
     "production": "Produktion",
     "readAloud": "Vorlesen",
     "analytics": "Analysen",
@@ -51,7 +53,10 @@
     "toggleComments": "Kommentare ein/aus",
     "toggleSpellcheck": "Rechtschreibprüfung ein/aus",
     "focusMode": "Fokus-Modus",
-    "dictate": "Diktieren",    "splitPanel": "Panel teilen",
+    "dictate": "Diktieren",
+    "viewScript": "Skriptansicht",
+    "viewIndexCards": "Karteikartenansicht",
+    "splitPanel": "Panel teilen",
     "unsplitPanel": "Panel schließen",
     "swapPanels": "Panels tauschen",
     "draftEditor": "Entwurfseditor",
@@ -558,9 +563,9 @@
     "insertPageBreak": "Seitenumbruch einfügen",
     "removePageBreak": "Seitenumbruch entfernen",
     "pageBreakHint": "Manueller Seitenumbruch",
-        "sceneOptions": "Szenenoptionen",
-        "characterOptions": "Charakteroptionen",
-        "locationOptions": "Ortsoptionen"
+    "sceneOptions": "Szenenoptionen",
+    "characterOptions": "Charakteroptionen",
+    "locationOptions": "Ortsoptionen"
   },
   "popup": {
     "character": {
@@ -620,7 +625,14 @@
     "play": "Abspielen",
     "pause": "Pause",
     "rename": "Zum Umbenennen doppelklicken",
-    "storageLimitReached": "Speicherlimit erreicht – diese Datei konnte nicht gespeichert werden"
+    "storageLimitReached": "Speicherlimit erreicht – diese Datei konnte nicht gespeichert werden",
+    "linkCards": "Karten verbinden",
+    "cutLinks": "Verbindungen trennen",
+    "linkHintSource": "Tippe auf eine Karte, um eine Verbindung zu beginnen",
+    "linkHintTarget": "Tippe auf die Karte, die verbunden werden soll",
+    "cutHint": "Tippe auf eine Verbindung oder streiche darüber, um sie zu trennen",
+    "resizeCards": "Kartengröße ändern",
+    "resizeHint": "Ziehe an der Ecke einer Karte, um ihre Größe zu ändern"
   },
   "production": {
     "title": "Produktion",
diff --git a/messages/en.json b/messages/en.json
index 99cb7efe..8c8a878b 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -30,6 +30,8 @@
     "menu": "Menu",
     "close": "Close",
     "history": "History",
+    "undo": "Undo",
+    "redo": "Redo",
     "production": "Production",
     "readAloud": "Read Aloud",
     "analytics": "Analytics",
@@ -50,7 +52,10 @@
     "toggleComments": "Toggle Comments",
     "toggleSpellcheck": "Toggle Spell Check",
     "focusMode": "Focus Mode",
-    "dictate": "Dictate",    "splitPanel": "Split Panel",
+    "dictate": "Dictate",
+    "viewScript": "Script View",
+    "viewIndexCards": "Index Cards View",
+    "splitPanel": "Split Panel",
     "unsplitPanel": "Unsplit Panel",
     "swapPanels": "Swap Panels",
     "draftEditor": "Draft Editor",
@@ -557,9 +562,9 @@
     "insertPageBreak": "Insert page break",
     "removePageBreak": "Remove page break",
     "pageBreakHint": "Manual page break",
-        "sceneOptions": "Scene options",
-        "characterOptions": "Character options",
-        "locationOptions": "Location options"
+    "sceneOptions": "Scene options",
+    "characterOptions": "Character options",
+    "locationOptions": "Location options"
   },
   "popup": {
     "character": {
@@ -619,7 +624,14 @@
     "play": "Play",
     "pause": "Pause",
     "rename": "Double-click to rename",
-    "storageLimitReached": "Storage limit reached — couldn't save this file"
+    "storageLimitReached": "Storage limit reached — couldn't save this file",
+    "linkCards": "Link cards",
+    "cutLinks": "Cut links",
+    "linkHintSource": "Tap a card to start a link",
+    "linkHintTarget": "Tap the card to link it to",
+    "cutHint": "Tap or drag across a link to cut it",
+    "resizeCards": "Resize cards",
+    "resizeHint": "Drag a card's corner to resize it"
   },
   "production": {
     "title": "Production",
diff --git a/messages/es.json b/messages/es.json
index 1b5d412e..34b9a046 100644
--- a/messages/es.json
+++ b/messages/es.json
@@ -30,6 +30,8 @@
     "menu": "Menú",
     "close": "Cerrar",
     "history": "Historial",
+    "undo": "Deshacer",
+    "redo": "Rehacer",
     "production": "Producción",
     "readAloud": "Leer en voz alta",
     "analytics": "Analíticas",
@@ -50,7 +52,10 @@
     "toggleComments": "Mostrar/ocultar comentarios",
     "toggleSpellcheck": "Activar/desactivar corrector ortográfico",
     "focusMode": "Modo concentración",
-    "dictate": "Dictar",    "splitPanel": "Dividir panel",
+    "dictate": "Dictar",
+    "viewScript": "Vista de guion",
+    "viewIndexCards": "Vista de fichas",
+    "splitPanel": "Dividir panel",
     "unsplitPanel": "Unir panel",
     "swapPanels": "Intercambiar paneles",
     "draftEditor": "Editor de borrador",
@@ -557,9 +562,9 @@
     "insertPageBreak": "Insertar salto de página",
     "removePageBreak": "Quitar salto de página",
     "pageBreakHint": "Salto de página manual",
-        "sceneOptions": "Opciones de escena",
-        "characterOptions": "Opciones de personaje",
-        "locationOptions": "Opciones de localización"
+    "sceneOptions": "Opciones de escena",
+    "characterOptions": "Opciones de personaje",
+    "locationOptions": "Opciones de localización"
   },
   "popup": {
     "character": {
@@ -619,7 +624,14 @@
     "play": "Reproducir",
     "pause": "Pausar",
     "rename": "Doble clic para renombrar",
-    "storageLimitReached": "Límite de almacenamiento alcanzado: no se pudo guardar este archivo"
+    "storageLimitReached": "Límite de almacenamiento alcanzado: no se pudo guardar este archivo",
+    "linkCards": "Enlazar tarjetas",
+    "cutLinks": "Cortar enlaces",
+    "linkHintSource": "Toca una tarjeta para empezar un enlace",
+    "linkHintTarget": "Toca la tarjeta con la que enlazar",
+    "cutHint": "Toca un enlace o deslízate sobre él para cortarlo",
+    "resizeCards": "Redimensionar tarjetas",
+    "resizeHint": "Arrastra la esquina de una tarjeta para redimensionarla"
   },
   "production": {
     "title": "Producción",
diff --git a/messages/fr.json b/messages/fr.json
index a9a8d7b2..7cd9a3d1 100644
--- a/messages/fr.json
+++ b/messages/fr.json
@@ -30,6 +30,8 @@
     "menu": "Menu",
     "close": "Fermer",
     "history": "Historique",
+    "undo": "Annuler",
+    "redo": "Rétablir",
     "production": "Production",
     "readAloud": "Lecture à voix haute",
     "analytics": "Analyses",
@@ -51,7 +53,10 @@
     "toggleComments": "Afficher/masquer les commentaires",
     "toggleSpellcheck": "Activer/désactiver la correction orthographique",
     "focusMode": "Mode concentration",
-    "dictate": "Dicter",    "splitPanel": "Diviser le panneau",
+    "dictate": "Dicter",
+    "viewScript": "Vue scénario",
+    "viewIndexCards": "Vue fiches",
+    "splitPanel": "Diviser le panneau",
     "unsplitPanel": "Fermer le panneau divisé",
     "swapPanels": "Inverser les panneaux",
     "draftEditor": "Éditeur de brouillon",
@@ -558,9 +563,9 @@
     "insertPageBreak": "Insérer un saut de page",
     "removePageBreak": "Supprimer le saut de page",
     "pageBreakHint": "Saut de page manuel",
-        "sceneOptions": "Options de la scène",
-        "characterOptions": "Options du personnage",
-        "locationOptions": "Options du lieu"
+    "sceneOptions": "Options de la scène",
+    "characterOptions": "Options du personnage",
+    "locationOptions": "Options du lieu"
   },
   "popup": {
     "character": {
@@ -620,7 +625,14 @@
     "play": "Lire",
     "pause": "Pause",
     "rename": "Double-cliquez pour renommer",
-    "storageLimitReached": "Limite de stockage atteinte — impossible d'enregistrer ce fichier"
+    "storageLimitReached": "Limite de stockage atteinte — impossible d'enregistrer ce fichier",
+    "linkCards": "Relier les cartes",
+    "cutLinks": "Couper les liens",
+    "linkHintSource": "Touchez une carte pour commencer un lien",
+    "linkHintTarget": "Touchez la carte à relier",
+    "cutHint": "Touchez un lien ou glissez dessus pour le couper",
+    "resizeCards": "Redimensionner les cartes",
+    "resizeHint": "Faites glisser le coin d'une carte pour la redimensionner"
   },
   "production": {
     "title": "Production",
diff --git a/messages/ja.json b/messages/ja.json
index c23fce6e..4be9514b 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -30,6 +30,8 @@
     "menu": "メニュー",
     "close": "閉じる",
     "history": "履歴",
+    "undo": "元に戻す",
+    "redo": "やり直す",
     "production": "制作",
     "readAloud": "読み上げ",
     "analytics": "分析",
@@ -50,7 +52,10 @@
     "toggleComments": "コメントの表示/非表示",
     "toggleSpellcheck": "スペルチェックの切り替え",
     "focusMode": "集中モード",
-    "dictate": "音声入力",    "splitPanel": "パネルを分割",
+    "dictate": "音声入力",
+    "viewScript": "脚本ビュー",
+    "viewIndexCards": "インデックスカードビュー",
+    "splitPanel": "パネルを分割",
     "unsplitPanel": "パネルを閉じる",
     "swapPanels": "パネルを入れ替え",
     "draftEditor": "下書きエディター",
@@ -557,9 +562,9 @@
     "insertPageBreak": "改ページを挿入",
     "removePageBreak": "改ページを削除",
     "pageBreakHint": "手動改ページ",
-        "sceneOptions": "シーンのオプション",
-        "characterOptions": "登場人物のオプション",
-        "locationOptions": "場所のオプション"
+    "sceneOptions": "シーンのオプション",
+    "characterOptions": "登場人物のオプション",
+    "locationOptions": "場所のオプション"
   },
   "popup": {
     "character": {
@@ -619,7 +624,14 @@
     "play": "再生",
     "pause": "一時停止",
     "rename": "ダブルクリックで名前を変更",
-    "storageLimitReached": "ストレージの上限に達しました — このファイルを保存できませんでした"
+    "storageLimitReached": "ストレージの上限に達しました — このファイルを保存できませんでした",
+    "linkCards": "カードを接続",
+    "cutLinks": "接続を切る",
+    "linkHintSource": "カードをタップして接続を開始",
+    "linkHintTarget": "接続先のカードをタップ",
+    "cutHint": "接続をタップまたはなぞって切ります",
+    "resizeCards": "カードのサイズ変更",
+    "resizeHint": "カードの角をドラッグしてサイズを変更します"
   },
   "production": {
     "title": "プロダクション",
diff --git a/messages/ko.json b/messages/ko.json
index 4458c8f5..1daa1f10 100644
--- a/messages/ko.json
+++ b/messages/ko.json
@@ -30,6 +30,8 @@
     "menu": "메뉴",
     "close": "닫기",
     "history": "기록",
+    "undo": "실행 취소",
+    "redo": "다시 실행",
     "production": "프로덕션",
     "readAloud": "소리내어 읽기",
     "analytics": "분석",
@@ -50,7 +52,10 @@
     "toggleComments": "댓글 표시 전환",
     "toggleSpellcheck": "맞춤법 검사 전환",
     "focusMode": "집중 모드",
-    "dictate": "받아쓰기",    "splitPanel": "패널 분할",
+    "dictate": "받아쓰기",
+    "viewScript": "대본 보기",
+    "viewIndexCards": "인덱스 카드 보기",
+    "splitPanel": "패널 분할",
     "unsplitPanel": "패널 통합",
     "swapPanels": "패널 교체",
     "draftEditor": "초안 편집기",
@@ -557,9 +562,9 @@
     "insertPageBreak": "페이지 나누기 삽입",
     "removePageBreak": "페이지 나누기 제거",
     "pageBreakHint": "수동 페이지 나누기",
-        "sceneOptions": "장면 옵션",
-        "characterOptions": "인물 옵션",
-        "locationOptions": "장소 옵션"
+    "sceneOptions": "장면 옵션",
+    "characterOptions": "인물 옵션",
+    "locationOptions": "장소 옵션"
   },
   "popup": {
     "character": {
@@ -619,7 +624,14 @@
     "play": "재생",
     "pause": "일시정지",
     "rename": "더블클릭하여 이름 변경",
-    "storageLimitReached": "저장 용량 한도 초과 — 이 파일을 저장할 수 없습니다"
+    "storageLimitReached": "저장 용량 한도 초과 — 이 파일을 저장할 수 없습니다",
+    "linkCards": "카드 연결",
+    "cutLinks": "연결 끊기",
+    "linkHintSource": "카드를 탭해 연결을 시작하세요",
+    "linkHintTarget": "연결할 카드를 탭하세요",
+    "cutHint": "연결을 탭하거나 가로질러 끌어 끊으세요",
+    "resizeCards": "카드 크기 조절",
+    "resizeHint": "카드 모서리를 끌어 크기를 조절하세요"
   },
   "production": {
     "title": "프로덕션",
diff --git a/messages/pl.json b/messages/pl.json
index 2b574522..853547a8 100644
--- a/messages/pl.json
+++ b/messages/pl.json
@@ -30,6 +30,8 @@
     "menu": "Menu",
     "close": "Zamknij",
     "history": "Historia",
+    "undo": "Cofnij",
+    "redo": "Ponów",
     "production": "Produkcja",
     "readAloud": "Czytaj na głos",
     "analytics": "Analityka",
@@ -50,7 +52,10 @@
     "toggleComments": "Pokaż/ukryj komentarze",
     "toggleSpellcheck": "Włącz/wyłącz sprawdzanie pisowni",
     "focusMode": "Tryb skupienia",
-    "dictate": "Dyktowanie",    "splitPanel": "Podziel panel",
+    "dictate": "Dyktowanie",
+    "viewScript": "Widok scenariusza",
+    "viewIndexCards": "Widok fiszek",
+    "splitPanel": "Podziel panel",
     "unsplitPanel": "Zamknij panel",
     "swapPanels": "Zamień panele",
     "draftEditor": "Edytor szkiców",
@@ -557,9 +562,9 @@
     "insertPageBreak": "Wstaw podział strony",
     "removePageBreak": "Usuń podział strony",
     "pageBreakHint": "Ręczny podział strony",
-        "sceneOptions": "Opcje sceny",
-        "characterOptions": "Opcje postaci",
-        "locationOptions": "Opcje lokalizacji"
+    "sceneOptions": "Opcje sceny",
+    "characterOptions": "Opcje postaci",
+    "locationOptions": "Opcje lokalizacji"
   },
   "popup": {
     "character": {
@@ -619,7 +624,14 @@
     "play": "Odtwórz",
     "pause": "Wstrzymaj",
     "rename": "Kliknij dwukrotnie, aby zmienić nazwę",
-    "storageLimitReached": "Osiągnięto limit pamięci — nie można zapisać tego pliku"
+    "storageLimitReached": "Osiągnięto limit pamięci — nie można zapisać tego pliku",
+    "linkCards": "Połącz karty",
+    "cutLinks": "Przetnij połączenia",
+    "linkHintSource": "Dotknij karty, aby zacząć połączenie",
+    "linkHintTarget": "Dotknij karty, z którą połączyć",
+    "cutHint": "Dotknij połączenia lub przeciągnij przez nie, aby je przeciąć",
+    "resizeCards": "Zmień rozmiar kart",
+    "resizeHint": "Przeciągnij róg karty, aby zmienić jej rozmiar"
   },
   "production": {
     "title": "Produkcja",
diff --git a/messages/zh.json b/messages/zh.json
index 00f792ab..0e52fce3 100644
--- a/messages/zh.json
+++ b/messages/zh.json
@@ -30,6 +30,8 @@
     "menu": "菜单",
     "close": "关闭",
     "history": "历史",
+    "undo": "撤销",
+    "redo": "重做",
     "production": "制作",
     "readAloud": "朗读",
     "analytics": "分析",
@@ -50,7 +52,10 @@
     "toggleComments": "切换显示评论",
     "toggleSpellcheck": "切换拼写检查",
     "focusMode": "聚焦模式",
-    "dictate": "语音输入",    "splitPanel": "分割面板",
+    "dictate": "语音输入",
+    "viewScript": "剧本视图",
+    "viewIndexCards": "索引卡视图",
+    "splitPanel": "分割面板",
     "unsplitPanel": "合并面板",
     "swapPanels": "交换面板",
     "draftEditor": "草稿编辑器",
@@ -557,9 +562,9 @@
     "insertPageBreak": "插入分页符",
     "removePageBreak": "移除分页符",
     "pageBreakHint": "手动分页符",
-        "sceneOptions": "场景选项",
-        "characterOptions": "角色选项",
-        "locationOptions": "位置选项"
+    "sceneOptions": "场景选项",
+    "characterOptions": "角色选项",
+    "locationOptions": "位置选项"
   },
   "popup": {
     "character": {
@@ -619,7 +624,14 @@
     "play": "播放",
     "pause": "暂停",
     "rename": "双击重命名",
-    "storageLimitReached": "存储空间已满 — 无法保存此文件"
+    "storageLimitReached": "存储空间已满 — 无法保存此文件",
+    "linkCards": "连接卡片",
+    "cutLinks": "剪断连接",
+    "linkHintSource": "点按卡片开始连接",
+    "linkHintTarget": "点按要连接的卡片",
+    "cutHint": "点按连接或划过它即可剪断",
+    "resizeCards": "调整卡片大小",
+    "resizeHint": "拖动卡片的角来调整大小"
   },
   "production": {
     "title": "制作",
diff --git a/src-tauri/gen/apple/Sources/Scriptio/main.mm b/src-tauri/gen/apple/Sources/Scriptio/main.mm
index 78b27d4a..b1bf473e 100644
--- a/src-tauri/gen/apple/Sources/Scriptio/main.mm
+++ b/src-tauri/gen/apple/Sources/Scriptio/main.mm
@@ -3,7 +3,8 @@
 #import <UIKit/UIKit.h>
 #import <objc/runtime.h>
 
-// Remove the keyboard's input accessory bar for the web view.
+// Remove the keyboard's input accessory bar, and the hardware-keyboard shortcuts
+// bar with it, for the web view.
 //
 // When a web `contenteditable` is focused, iOS attaches an accessory view above
 // the on-screen keyboard (the rounded QuickType / suggestions strip). Native
@@ -12,8 +13,37 @@
 // private `WKContentView`; overriding that view's `inputAccessoryView` getter to
 // return nil suppresses the bar so our editor's keyboard is flush too. The class
 // is resolved at runtime by name, so no private symbol is linked against.
+//
+// The editor supplies its own replacements for everything these bars offered —
+// undo/redo, formatting, the element picker — in [EditorBottomBar], which is why
+// none of this is a loss. Note the system's undo could never have driven this
+// editor's history anyway: it is a Yjs UndoManager, not WebKit's undo stack.
 static id scriptioNoInputAccessoryView(id self, SEL _cmd) { return nil; }
 
+// Emptying the accessory view alone is only half the job on iPad.
+//
+// The shortcuts bar iOS shows when a *hardware* keyboard is attached is not the
+// accessory view but the assistant item hosted in the same place, so nil-ing the
+// former leaves the latter drawn but unreachable: it has no accessory view to be
+// hosted in, so its buttons — the globe, the dismiss-keyboard chevron — swallow
+// taps and do nothing. iOS also goes on reserving the strip for it, which is the
+// ~173px of "covered" viewport that has nothing visible in it (measured on an
+// iPad Pro 12.9"; see KEYBOARD_MIN_HEIGHT, which exists to ignore that residue).
+//
+// So clear the assistant item's button groups too. The original implementation
+// still supplies the item — UIKit hands out one instance per responder and
+// expects to keep seeing it — and only its contents are emptied.
+static IMP scriptioAssistantItemOriginal = NULL;
+
+static id scriptioEmptyInputAssistantItem(id self, SEL _cmd) {
+	if (!scriptioAssistantItemOriginal) return nil;
+	UITextInputAssistantItem *item =
+		((UITextInputAssistantItem *(*)(id, SEL))scriptioAssistantItemOriginal)(self, _cmd);
+	item.leadingBarButtonGroups = @[];
+	item.trailingBarButtonGroups = @[];
+	return item;
+}
+
 @interface ScriptioKeyboardPatch : NSObject
 @end
 
@@ -21,12 +51,24 @@ @implementation ScriptioKeyboardPatch
 + (void)load {
 	Class cls = NSClassFromString(@"WKContentView");
 	if (!cls) return;
+
 	SEL sel = @selector(inputAccessoryView);
 	Method existing = class_getInstanceMethod(cls, sel);
 	const char *types = existing ? method_getTypeEncoding(existing) : "@@:";
 	// class_replaceMethod adds the override to WKContentView when the method is
 	// only inherited, or replaces it when the class already defines it.
 	class_replaceMethod(cls, sel, (IMP)scriptioNoInputAccessoryView, types);
+
+	// Captured *before* replacing, so the override calls the real implementation
+	// rather than itself. Inherited from UIResponder, hence the capture rather
+	// than a super-call.
+	SEL assistantSel = @selector(inputAssistantItem);
+	Method assistant = class_getInstanceMethod(cls, assistantSel);
+	if (assistant) {
+		scriptioAssistantItemOriginal = method_getImplementation(assistant);
+		class_replaceMethod(cls, assistantSel, (IMP)scriptioEmptyInputAssistantItem,
+		                    method_getTypeEncoding(assistant));
+	}
 }
 @end
 
diff --git a/src/context/ViewContext.tsx b/src/context/ViewContext.tsx
index 7fa4f1ed..d532e51b 100644
--- a/src/context/ViewContext.tsx
+++ b/src/context/ViewContext.tsx
@@ -12,6 +12,18 @@ export type SplitSide = "primary" | "secondary";
 /** Panel kinds that display a specific document, and so carry a docId per side. */
 export type DocumentPanelKind = "board" | "document";
 
+/**
+ * How a screenplay panel renders the script: as the editor itself, or as the
+ * grid of scene index cards. The screenplay is a singleton panel, so one value
+ * covers whichever side is showing it.
+ */
+export type ScreenplayViewMode = "editor" | "cards";
+
+/** Bounds for the index-card grid's columns-per-row (its zoom control). */
+export const SCENE_CARD_COLUMNS_MIN = 1;
+export const SCENE_CARD_COLUMNS_MAX = 5;
+export const SCENE_CARD_COLUMNS_DEFAULT = 3;
+
 interface ViewContextType {
     primaryPanel: PanelType;
     secondaryPanel: PanelType | null;
@@ -25,6 +37,16 @@ interface ViewContextType {
     focusedSide: SplitSide;
     focusedPanel: PanelType;
     isEndlessScroll: boolean;
+    /** How the screenplay panel renders — the editor, or the index-card grid. */
+    screenplayView: ScreenplayViewMode;
+    setScreenplayView: (mode: ScreenplayViewMode) => void;
+    /**
+     * Index cards per row, which is what the card view's zoom control actually
+     * changes — fewer columns means wider cards. Lives here rather than in the
+     * panel so it survives switching back to the script and returning.
+     */
+    sceneCardColumns: number;
+    setSceneCardColumns: (value: number | ((prev: number) => number)) => void;
     showComments: boolean;
     leftSidebarOpen: boolean;
     rightSidebarOpen: boolean;
@@ -102,6 +124,8 @@ export const ViewProvider = ({ children }: { children: ReactNode }) => {
     // readable size with no page rectangles to shift while writing. Desktop
     // defaults to the paged view. Users can toggle either way (EditorFooter).
     const [isEndlessScroll, setIsEndlessScrollState] = useState<boolean>(isPhoneViewport);
+    const [screenplayView, setScreenplayView] = useState<ScreenplayViewMode>("editor");
+    const [sceneCardColumns, setSceneCardColumns] = useState<number>(SCENE_CARD_COLUMNS_DEFAULT);
     const [showComments, setShowComments] = useState<boolean>(true);
     const [leftSidebarOpen, setLeftSidebarOpenState] = useState<boolean>(false);
     const [rightSidebarOpen, setRightSidebarOpenState] = useState<boolean>(false);
@@ -344,6 +368,10 @@ export const ViewProvider = ({ children }: { children: ReactNode }) => {
             focusedSide,
             focusedPanel,
             isEndlessScroll,
+            screenplayView,
+            setScreenplayView,
+            sceneCardColumns,
+            setSceneCardColumns,
             showComments,
             leftSidebarOpen,
             rightSidebarOpen,
@@ -369,7 +397,7 @@ export const ViewProvider = ({ children }: { children: ReactNode }) => {
             setLeftSidebarOpen,
             setRightSidebarOpen,
         }),
-        [primaryPanel, secondaryPanel, primaryDocId, secondaryDocId, splitRatio, isSplit, visiblePanels, mountedPanels, focusedSide, focusedPanel, isEndlessScroll, showComments, leftSidebarOpen, rightSidebarOpen, timelineOpen, chromeHidden, mobileEditMode, setPrimaryPanel, setSecondaryPanel, setFocusedSide, setFocusedPanel, setSidePanel, setSideDocument, splitWithDocument, closeDocument, swapPanels, setIsEndlessScroll, onBeforeEndlessScrollChange, setShowComments, setLeftSidebarOpen, setRightSidebarOpen],
+        [primaryPanel, secondaryPanel, primaryDocId, secondaryDocId, splitRatio, isSplit, visiblePanels, mountedPanels, focusedSide, focusedPanel, isEndlessScroll, screenplayView, sceneCardColumns, showComments, leftSidebarOpen, rightSidebarOpen, timelineOpen, chromeHidden, mobileEditMode, setPrimaryPanel, setSecondaryPanel, setFocusedSide, setFocusedPanel, setSidePanel, setSideDocument, splitWithDocument, closeDocument, swapPanels, setIsEndlessScroll, onBeforeEndlessScrollChange, setShowComments, setLeftSidebarOpen, setRightSidebarOpen],
     );
 
     return <ViewContext.Provider value={value}>{children}</ViewContext.Provider>;
diff --git a/src/lib/editor/use-active-editor.ts b/src/lib/editor/use-active-editor.ts
index 5365246f..c433d892 100644
--- a/src/lib/editor/use-active-editor.ts
+++ b/src/lib/editor/use-active-editor.ts
@@ -7,17 +7,22 @@ import { ProjectContext } from "@src/context/ProjectContext";
 import { useViewContext } from "@src/context/ViewContext";
 
 /**
- * The text editor backing the currently-shown primary panel, or null for panels
- * that have no editor (board, statistics). Used by phone-only chrome (the pen
- * button and the navbar undo/redo controls) which act on whatever the reader is
- * looking at. Phone is effectively single-panel, so resolving from
- * `primaryPanel` is sufficient; split view is a desktop-only affordance.
+ * The text editor backing the panel currently being worked in, or null for panels
+ * that have no editor (board, statistics). Used by the chrome that acts on
+ * whatever the reader is looking at: the phone pen button, and the navbar
+ * undo/redo pair that phones and tablets both carry.
+ *
+ * Resolved from `focusedPanel` rather than `primaryPanel` so a split view answers
+ * with the side being written in — a tablet gets the desktop layout, split
+ * included, and undo landing on the other panel's document would be a silent way
+ * to lose work. Off a split the two are the same value (see ViewContext), so the
+ * phone, which never splits, is unaffected.
  */
 export const useActiveEditor = (): Editor | null => {
     const { editor, titlePageEditor, draftEditor, documentEditor } = useContext(ProjectContext);
-    const { primaryPanel } = useViewContext();
+    const { focusedPanel } = useViewContext();
 
-    switch (primaryPanel) {
+    switch (focusedPanel) {
         case "title":
             return titlePageEditor;
         case "draft":
diff --git a/src/lib/editor/use-caret-state.ts b/src/lib/editor/use-caret-state.ts
new file mode 100644
index 00000000..63ba1a68
--- /dev/null
+++ b/src/lib/editor/use-caret-state.ts
@@ -0,0 +1,141 @@
+"use client";
+
+import { useCallback, useRef, useSyncExternalStore } from "react";
+import type { Editor } from "@tiptap/react";
+
+import { canMakeDualDialogue } from "@src/lib/screenplay/dual-dialogue";
+import { getNodeIdAtPos } from "@src/lib/screenplay/comment-anchors";
+import { getSpellErrorAt } from "@src/lib/spellcheck/spellcheck-extension";
+import { ScreenplayElement } from "@src/lib/utils/enums";
+
+/**
+ * Everything about the caret's surroundings that touch chrome renders from: the
+ * block's alignment plus which of the advanced (right-click-only on desktop)
+ * actions apply where it sits. Recomputed on every transaction, so it is kept as
+ * one value that is only replaced when something actually differs — see
+ * sameCaretState — to keep typing from re-rendering the consumer on every
+ * keystroke.
+ */
+export type CaretState = {
+    align: string;
+    /** Misspelling under the caret, if the editor has spellcheck decorations. */
+    spellError: { word: string; from: number; to: number } | null;
+    /** Node the caret sits in, when it can anchor a comment. */
+    commentNodeId: string | null;
+    /** Top-level block under the caret + whether it already forces a break. */
+    pageBreak: { pos: number; active: boolean } | null;
+    /**
+     * Start of a character block that can be merged with the one after it.
+     * The block's start rather than the caret, though makeDualDialogue accepts
+     * either: the caret moves with every keystroke inside the block, which would
+     * fail sameCaretState and re-render for a value that never changed.
+     */
+    dualDialoguePos: number | null;
+};
+
+export const EMPTY_CARET_STATE: CaretState = {
+    align: "left",
+    spellError: null,
+    commentNodeId: null,
+    pageBreak: null,
+    dualDialoguePos: null,
+};
+
+const sameCaretState = (a: CaretState, b: CaretState) =>
+    a.align === b.align &&
+    a.commentNodeId === b.commentNodeId &&
+    a.dualDialoguePos === b.dualDialoguePos &&
+    a.spellError?.word === b.spellError?.word &&
+    a.spellError?.from === b.spellError?.from &&
+    a.spellError?.to === b.spellError?.to &&
+    a.pageBreak?.pos === b.pageBreak?.pos &&
+    a.pageBreak?.active === b.pageBreak?.active;
+
+/**
+ * Track the caret's surroundings in `editor`, or EMPTY_CARET_STATE while
+ * `enabled` is false.
+ *
+ * Listens on `transaction` rather than `selectionUpdate`: every dispatch emits
+ * it, selection-only ones included, so the pair would only run this twice per
+ * caret move — and half of what it reads changes under a *stationary* caret
+ * anyway (spellcheck decorations landing from the worker, a page-break attribute
+ * flipping, a collaborator's edit), which selectionUpdate misses. That does mean
+ * running on every keystroke, so the whole read is a handful of position lookups
+ * (all off ProseMirror's resolve cache) and the result is only committed when it
+ * differs, leaving typing re-render-free.
+ *
+ * `enabled` is there so the read costs nothing where it would only ever be thrown
+ * away: a mouse device, or any moment the editor doesn't hold focus.
+ *
+ * An external store rather than state-in-an-effect because the read has to be
+ * seeded from the editor's current state on subscribe, and doing that through
+ * setState renders twice every time the consumer comes up. sameCaretState doubles
+ * as the snapshot's stability check — getSnapshot must return the same reference
+ * until something actually changes, or React would see a new value on every
+ * render and loop.
+ */
+export const useCaretState = (
+    editor: Editor | null,
+    enabled: boolean,
+    /** Title-page editors have neither the nodes nor the pagination the advanced actions need. */
+    isTitleContext: boolean,
+): CaretState => {
+    const caretCache = useRef<CaretState>(EMPTY_CARET_STATE);
+
+    return useSyncExternalStore(
+        useCallback(
+            (callback: () => void) => {
+                // A stale caret while there is nothing to track is harmless — the
+                // consumer is hidden, and read() below re-seeds it as part of
+                // re-subscribing, before it can show again.
+                if (!enabled || !editor) return () => {};
+                const read = () => {
+                    const { state } = editor;
+                    const { from, to } = state.selection;
+                    const next: CaretState = {
+                        ...EMPTY_CARET_STATE,
+                        align: state.selection.$anchor.parent.attrs.textAlign || "left",
+                    };
+
+                    if (!isTitleContext) {
+                        next.spellError =
+                            getSpellErrorAt(state, from) ??
+                            (to !== from ? getSpellErrorAt(state, to) : null);
+                        next.commentNodeId = getNodeIdAtPos(state, from);
+
+                        const $pos = state.doc.resolve(from);
+                        if ($pos.depth >= 1) {
+                            const nodeStart = $pos.before(1);
+                            // Never the document's first block — nothing to break
+                            // before it.
+                            if (nodeStart > 0) {
+                                next.pageBreak = {
+                                    pos: nodeStart,
+                                    active: !!$pos.node(1).attrs.pageBreak,
+                                };
+                            }
+                            if (
+                                $pos.node(1).attrs.class === ScreenplayElement.Character &&
+                                canMakeDualDialogue(editor, nodeStart)
+                            ) {
+                                next.dualDialoguePos = nodeStart;
+                            }
+                        }
+                    }
+
+                    if (sameCaretState(caretCache.current, next)) return;
+                    caretCache.current = next;
+                    callback();
+                };
+                editor.on("transaction", read);
+                read();
+                return () => {
+                    editor.off("transaction", read);
+                };
+            },
+            [editor, enabled, isTitleContext],
+        ),
+        () => caretCache.current,
+        () => EMPTY_CARET_STATE,
+    );
+};
diff --git a/src/lib/editor/use-editor-focused.ts b/src/lib/editor/use-editor-focused.ts
new file mode 100644
index 00000000..496c3a0d
--- /dev/null
+++ b/src/lib/editor/use-editor-focused.ts
@@ -0,0 +1,68 @@
+"use client";
+
+import { useCallback, useRef, useSyncExternalStore } from "react";
+import type { Editor } from "@tiptap/react";
+
+// A blur is acted on this late so that an editor mutation which blurs and
+// immediately re-focuses within a tick (e.g. a mark toggle) doesn't register.
+const BLUR_SETTLE_MS = 150;
+
+/**
+ * Whether an editor's contenteditable actually holds focus.
+ *
+ * Not the same question as "is the keyboard up": opening the screenplay search
+ * focuses a plain <input> with a keyboard of its own, and ProjectContext's
+ * `focusedEditorType` is never cleared on blur, so chrome keyed off either of
+ * those alone will follow the wrong field.
+ *
+ * Subscribed to as an external store rather than mirrored into state by an
+ * effect, because the editor may already hold focus by the time we subscribe — a
+ * swap between the shelf draft and a tree document lands on one that is focused
+ * already, its focus event long gone — so the flag has to be seeded from
+ * `isFocused`, and a seeding setState in an effect body is a cascading render on
+ * every editor swap (what react-hooks/set-state-in-effect flags).
+ *
+ * Latched in a ref rather than read straight off `editor.isFocused` because of
+ * the settle delay above: a real blur (tapping the search field, dismissing the
+ * keyboard) stays blurred past the window and only then reads as false. Since
+ * getSnapshot has to be pure and synchronous, that delay lives in the
+ * subscription, which latches the settled value and notifies.
+ */
+export const useEditorFocused = (editor: Editor | null): boolean => {
+    const focusedCache = useRef(false);
+
+    return useSyncExternalStore(
+        useCallback(
+            (callback: () => void) => {
+                // Nothing to track, and nothing to reset: a consumer needs an
+                // editor to show at all, and re-subscribing seeds from the new one.
+                if (!editor) return () => {};
+                let blurTimer: ReturnType<typeof setTimeout> | null = null;
+                const settle = (focused: boolean) => {
+                    if (focusedCache.current === focused) return;
+                    focusedCache.current = focused;
+                    callback();
+                };
+                const onFocus = () => {
+                    if (blurTimer) clearTimeout(blurTimer);
+                    settle(true);
+                };
+                const onBlur = () => {
+                    if (blurTimer) clearTimeout(blurTimer);
+                    blurTimer = setTimeout(() => settle(false), BLUR_SETTLE_MS);
+                };
+                editor.on("focus", onFocus);
+                editor.on("blur", onBlur);
+                settle(editor.isFocused);
+                return () => {
+                    if (blurTimer) clearTimeout(blurTimer);
+                    editor.off("focus", onFocus);
+                    editor.off("blur", onBlur);
+                };
+            },
+            [editor],
+        ),
+        () => focusedCache.current,
+        () => false,
+    );
+};
diff --git a/src/lib/editor/visible-band.ts b/src/lib/editor/visible-band.ts
index 3cc4019b..5da69ee8 100644
--- a/src/lib/editor/visible-band.ts
+++ b/src/lib/editor/visible-band.ts
@@ -14,6 +14,22 @@
 // open on-screen keyboard.
 export const KEYBOARD_THRESHOLD = 120;
 
+/**
+ * Smallest bottom coverage that is a real on-screen keyboard rather than the
+ * region iOS reserves around its shortcuts bar.
+ *
+ * Measured on an iPad Pro 12.9" (1024×1366, portrait) with a hardware keyboard
+ * attached: the software keyboard covers 403px, and dismissing it with the
+ * keyboard's own hide key still leaves **173px** reserved — nearly all of it
+ * empty, the bar actually drawn there being a fraction of the height. Anything
+ * placed against that residue floats a hand's width off the screen edge.
+ *
+ * Distinct from KEYBOARD_THRESHOLD, and far above it: that one exists to stop
+ * a few px of chrome jitter reading as a keyboard, so it sits at 120 — under the
+ * 173 seen here, which is why the residue used to pass for a keyboard.
+ */
+export const KEYBOARD_MIN_HEIGHT = 280;
+
 /** Height (px) the on-screen keyboard hides at the bottom. 0 when it's down. */
 export const keyboardInsetNow = (): number => {
     if (typeof window === "undefined" || !window.visualViewport) return 0;
@@ -24,6 +40,25 @@ export const keyboardInsetNow = (): number => {
     return covered > KEYBOARD_THRESHOLD ? covered : 0;
 };
 
+/**
+ * How much of the layout viewport is covered at the bottom right now — an
+ * on-screen keyboard, iOS's hardware-keyboard shortcuts bar, browser chrome,
+ * whatever it happens to be — with no threshold applied.
+ *
+ * The unfloored counterpart to keyboardInsetNow, and used where the question is
+ * *where does the usable area end* rather than *is a keyboard up*. The latter has
+ * a yes/no answer, so flooring small values keeps viewport jitter from reading as
+ * a keyboard. The former has no such cliff: a bar that covers 50px covers 50px,
+ * and anything positioning against it has to follow it continuously — put a
+ * threshold in that path and the thing jumps the moment a bar animating in
+ * crosses it, which is exactly what a floored reading did to the format bar.
+ */
+export const viewportBottomInset = (): number => {
+    if (typeof window === "undefined" || !window.visualViewport) return 0;
+    const vv = window.visualViewport;
+    return Math.max(0, window.innerHeight - vv.height - vv.offsetTop);
+};
+
 /**
  * The keyboard inset plus the MobileFormatToolbar floating above it (found by its
  * `role="toolbar"`) — i.e. everything between the top of that chrome and the
diff --git a/src/lib/screenplay/scene-reorder.ts b/src/lib/screenplay/scene-reorder.ts
new file mode 100644
index 00000000..66e8ad79
--- /dev/null
+++ b/src/lib/screenplay/scene-reorder.ts
@@ -0,0 +1,60 @@
+"use client";
+
+import type { Editor } from "@tiptap/react";
+import { Scene } from "./scenes";
+
+/**
+ * Move a scene to another slot in the screenplay document.
+ *
+ * `targetIndex` is a *gap* index rather than an item index: gap i means "insert
+ * before scene i", and `scenes.length` means "after the last scene". Both
+ * reorder surfaces — the navigation sidebar and the index-card grid — resolve a
+ * drop to a gap, so "bottom of scene N" and "top of scene N+1" land on the same
+ * value and the drop indicator can't flicker at a separator.
+ *
+ * The move is one transaction: cut the scene's slice out of the document, then
+ * insert it at the gap (shifted by the cut length when the gap sits after the
+ * scene's old home, since deleting moved everything downstream up).
+ *
+ * Returns the reordered scene array — the caller pushes it into ProjectContext
+ * so the sidebar and cards update on the spot, ahead of the debounced
+ * screenplay observer re-parsing with accurate positions — or null when the
+ * drop is a no-op and nothing was dispatched.
+ */
+export const moveScene = (
+    editor: Editor,
+    scenes: Scene[],
+    dragIndex: number,
+    targetIndex: number,
+): Scene[] | null => {
+    // Either gap bordering the dragged scene leaves it exactly where it is.
+    if (targetIndex === dragIndex || targetIndex === dragIndex + 1) return null;
+
+    const dragScene = scenes[dragIndex];
+    if (!dragScene) return null;
+
+    const from = dragScene.position - 1;
+    const to = dragScene.nextPosition - 1;
+    const slice = editor.state.doc.slice(from, to);
+
+    const tr = editor.state.tr;
+    tr.delete(from, to);
+
+    let insertPos: number;
+    if (targetIndex <= dragIndex) {
+        insertPos = scenes[targetIndex].position - 1;
+    } else {
+        // targetIndex can be scenes.length (drop after the last scene)
+        const refPos =
+            targetIndex < scenes.length ? scenes[targetIndex].position - 1 : editor.state.doc.content.size;
+        insertPos = refPos - (to - from);
+    }
+
+    tr.insert(insertPos, slice.content);
+    editor.view.dispatch(tr);
+
+    const reordered = [...scenes];
+    const [moved] = reordered.splice(dragIndex, 1);
+    reordered.splice(targetIndex > dragIndex ? targetIndex - 1 : targetIndex, 0, moved);
+    return reordered;
+};
diff --git a/src/lib/utils/hooks.ts b/src/lib/utils/hooks.ts
index 06d0cc84..9fc09ec3 100644
--- a/src/lib/utils/hooks.ts
+++ b/src/lib/utils/hooks.ts
@@ -14,7 +14,7 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { ProjectRole } from "../../generated/client/browser";
 import { isTauri } from "@tauri-apps/api/core";
 import { useTranslations } from "next-intl";
-import { keyboardInsetNow } from "@src/lib/editor/visible-band";
+import { keyboardInsetNow, viewportBottomInset } from "@src/lib/editor/visible-band";
 
 interface Position {
     x: number;
@@ -108,6 +108,10 @@ const PHONE_QUERY = "(max-width: 767px)";
 // tablets. Keep in sync with the @media (pointer: coarse) blocks in the CSS.
 const TOUCH_QUERY = "(pointer: coarse)";
 
+// How long the visual viewport must hold still before the keyboard's slide counts
+// as finished (see useKeyboardInset). Comfortably past iOS's ~250ms animation.
+const KEYBOARD_SETTLE_MS = 400;
+
 /**
  * True on phone-sized viewports (< 768px). Drives the structural mobile forks
  * that CSS alone can't express — overlay-drawer sidebars, disabled split view,
@@ -136,10 +140,16 @@ const useIsPhone = (): boolean => useMediaQuery(PHONE_QUERY);
 const useIsTouch = (): boolean => useMediaQuery(TOUCH_QUERY);
 
 /**
- * Distance in px the on-screen keyboard covers at the bottom of the layout
- * viewport, tracked via the VisualViewport API. 0 when no keyboard is up.
+ * Track a visual-viewport measurement, re-reading it across the whole of any
+ * keyboard slide rather than only at the moments iOS chooses to fire an event:
+ * WebKit stops emitting partway through the animation, so a single reading — or
+ * one taken on a fixed delay — can land mid-flight and stick, leaving consumers
+ * offset by a keyboard that has already gone. Re-reads every frame until the
+ * viewport has been quiet for KEYBOARD_SETTLE_MS.
+ *
+ * `measure` must be a stable module-level function, not an inline closure.
  */
-const useKeyboardInset = (enabled: boolean): number => {
+const useViewportInset = (enabled: boolean, measure: () => number): number => {
     const [inset, setInset] = useState(0);
 
     useEffect(() => {
@@ -147,19 +157,58 @@ const useKeyboardInset = (enabled: boolean): number => {
         // harmless — just don't subscribe.
         if (!enabled || typeof window === "undefined" || !window.visualViewport) return;
         const vv = window.visualViewport;
-        const update = () => setInset(keyboardInsetNow());
-        update();
-        vv.addEventListener("resize", update);
-        vv.addEventListener("scroll", update);
+        let frame: number | null = null;
+        let settleUntil = 0;
+
+        const read = () => setInset(measure());
+
+        const settle = () => {
+            read();
+            if (performance.now() >= settleUntil) {
+                frame = null;
+                return;
+            }
+            frame = requestAnimationFrame(settle);
+        };
+        const bump = () => {
+            settleUntil = performance.now() + KEYBOARD_SETTLE_MS;
+            if (frame === null) frame = requestAnimationFrame(settle);
+        };
+
+        read();
+        vv.addEventListener("resize", bump);
+        vv.addEventListener("scroll", bump);
+        // Dismissing the keyboard can blur the field without WebKit firing a
+        // viewport event at all, so drive the same settle off focus changes too.
+        window.addEventListener("focusout", bump);
         return () => {
-            vv.removeEventListener("resize", update);
-            vv.removeEventListener("scroll", update);
+            if (frame !== null) cancelAnimationFrame(frame);
+            vv.removeEventListener("resize", bump);
+            vv.removeEventListener("scroll", bump);
+            window.removeEventListener("focusout", bump);
         };
-    }, [enabled]);
+    }, [enabled, measure]);
 
     return inset;
 };
 
+/**
+ * Distance in px the on-screen keyboard covers at the bottom of the layout
+ * viewport. 0 when no keyboard is up — `keyboardInsetNow` floors anything under
+ * KEYBOARD_THRESHOLD, so this is never a small non-zero number, it is 0 or a real
+ * keyboard. Use it to answer *is a keyboard up*; to place something against the
+ * bottom of the usable area, use `useViewportBottomInset` instead.
+ */
+const useKeyboardInset = (enabled: boolean): number => useViewportInset(enabled, keyboardInsetNow);
+
+/**
+ * Distance in px covered at the bottom of the layout viewport by anything at all
+ * — keyboard, iOS shortcuts bar, browser chrome — unfloored, so it can be
+ * followed continuously (see viewportBottomInset).
+ */
+const useViewportBottomInset = (enabled: boolean): number =>
+    useViewportInset(enabled, viewportBottomInset);
+
 const useProjectIdFromUrl = () => {
     const searchParams = useSearchParams();
     return searchParams.get("projectId") ?? "";
@@ -645,6 +694,7 @@ export {
     useIsPhone,
     useIsTouch,
     useKeyboardInset,
+    useViewportBottomInset,
     useCachedProjects,
     useCachedProjectInfo,
     useProjectIdFromUrl,