@rightkit/document-workspace 0.0.0-stage → 0.1.0

package/dist/app/DocActionBar.js

@@ -0,0 +1,300 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { MARKDOWN_FORMAT_EVENT } from "@rightkit/document-core/app/shell/nativeMenu";
+import { useSettings } from "@rightkit/document-core/settings/settings";
+import { capabilitiesFor } from "../documents/capabilities.js";
+import { Dropdown, Item } from "@rightkit/document-core/documents/toolbarPrimitives";
+import { shortcutLabel, isMac } from "@rightkit/document-core/platform";
+import { nativeMenuActive, useNativeDocumentMenu, } from "@rightkit/document-core/app/shell/nativeMenu";
+import { hostAppName } from "../appName.js";
+export const DocumentMenus = memo(DocumentMenusImpl);
+/** Menu title that hides the Windows-style Alt-letter accelerator hint on macOS. */
+function menuTitle(label, accelerator) {
+    return isMac() ? label : `${label} (Alt+${accelerator})`;
+}
+function DocumentMenusImpl({ doc, view, onSave, onSaveAs, onPrint, onClose, onChangeView, onEditImageExternal, docxMenu, readOnly = false, }) {
+    // macOS: these commands live in the system menu bar, not in the window.
+    if (nativeMenuActive())
+        return (_jsx(NativeDocumentMenus, { doc: doc, view: view, onSave: onSave, onSaveAs: onSaveAs, onPrint: onPrint, onClose: onClose, onChangeView: onChangeView, onEditImageExternal: onEditImageExternal, docxMenu: docxMenu, readOnly: readOnly }));
+    if (doc.format === "docx" && docxMenu)
+        return _jsx(DocxMenus, { api: docxMenu, onSaveAs: onSaveAs, onClose: onClose, readOnly: readOnly });
+    if (doc.format === "web")
+        return null;
+    return (_jsx(TextMenus, { doc: doc, view: view, onSave: onSave, onSaveAs: onSaveAs, onPrint: onPrint, onClose: onClose, onChangeView: onChangeView, onEditImageExternal: onEditImageExternal, readOnly: readOnly }));
+}
+/** Commands the in-window menus offer for this document, for the macOS menu bar. Mirrors the
+ *  visibility rules of DocxMenus/TextMenus below so both platforms expose the same actions. */
+export function documentMenuCommands({ doc, view, onChangeView, onEditImageExternal, docxMenu, readOnly = false, spellcheck, wordWrap, toggleSpellcheck, toggleWordWrap, }) {
+    if (doc.format === "web")
+        return [];
+    if (doc.format === "docx" && docxMenu) {
+        const api = docxMenu;
+        const commands = [{ id: "page-setup", run: () => api.pageSetup() }];
+        if (readOnly)
+            return commands;
+        const fmt = (id, action) => ({
+            id,
+            run: () => api.format(action),
+        });
+        return [
+            ...commands,
+            fmt("bold", "bold"),
+            fmt("italic", "italic"),
+            fmt("underline", "underline"),
+            fmt("strikethrough", "strikethrough"),
+            fmt("superscript", "superscript"),
+            fmt("subscript", "subscript"),
+            fmt("clear-formatting", "clearFormatting"),
+            { id: "insert-table", run: () => api.insertTable(3, 3) },
+            { id: "insert-image", run: () => api.insertImage() },
+            fmt("insert-link", "insertLink"),
+            { id: "insert-page-break", run: () => api.insertPageBreak() },
+            { id: "insert-toc", run: () => api.insertTOC() },
+        ];
+    }
+    const cap = capabilitiesFor(doc.format);
+    const editable = cap.canReplace;
+    const commands = [];
+    if (doc.format === "image" && onEditImageExternal)
+        commands.push({ id: "edit-image-external", run: onEditImageExternal });
+    if (cap.canSwitchView && doc.format === "html") {
+        commands.push({
+            id: "view-interactive",
+            run: () => onChangeView("interactive"),
+            checked: view === "interactive",
+        });
+        commands.push({
+            id: "view-safe",
+            run: () => onChangeView("preview"),
+            checked: view === "preview",
+        });
+    }
+    if (doc.format === "md" && !readOnly) {
+        // The Markdown editor applies these; the menu just forwards the command id.
+        const md = (id) => ({
+            id,
+            run: () => window.dispatchEvent(new CustomEvent(MARKDOWN_FORMAT_EVENT, { detail: id })),
+        });
+        commands.push(md("bold"), md("italic"), md("strikethrough"));
+        commands.push(md("insert-link"), md("insert-table"), md("insert-image"));
+    }
+    if (cap.canSwitchView && doc.format === "md" && !readOnly)
+        commands.push({
+            id: "view-raw-source",
+            run: () => onChangeView(view === "source" ? "preview" : "source"),
+            checked: view === "source",
+        });
+    if (cap.canSwitchView && doc.format === "mdx" && !readOnly) {
+        commands.push({
+            id: "view-preview",
+            run: () => onChangeView("preview"),
+            checked: view === "preview",
+        });
+        commands.push({
+            id: "view-source",
+            run: () => onChangeView("source"),
+            checked: view === "source",
+        });
+    }
+    if (editable) {
+        commands.push({ id: "spellcheck", run: toggleSpellcheck, checked: spellcheck });
+        commands.push({ id: "word-wrap", run: toggleWordWrap, checked: wordWrap });
+    }
+    return commands;
+}
+function NativeDocumentMenus(props) {
+    const { settings, update } = useSettings();
+    useNativeDocumentMenu(documentMenuCommands({
+        ...props,
+        spellcheck: settings.spellcheck,
+        wordWrap: settings.wordWrap,
+        toggleSpellcheck: () => update({ spellcheck: !settings.spellcheck }),
+        toggleWordWrap: () => update({ wordWrap: !settings.wordWrap }),
+    }));
+    return null;
+}
+export const DocumentModeControls = memo(DocumentModeControlsImpl);
+// Right-side toolbar controls group into 38px capsules (.vr-capsule): frosted panel glass, hairline
+// border, soft shadow. The switch inside is a 32px round pill; its active state is the primary
+// token at ~14% fill with the accent foreground (text-copper-hi resolves to paper inside chrome).
+function DocumentModeControlsImpl({ doc, view, onChangeView, readOnly = false, }) {
+    // Read mode: the md "source" button and the mdx preview/source switch only reach editing
+    // surfaces — hide them. HTML's scripts ON/OFF knob is a viewing control and stays.
+    // Markdown's format bar carries its own Source button, so the title bar only offers the way back
+    // to the live editor while the raw source is open. Read-only MDX hides its switch too.
+    // One fixed view switch (right capsule of the document bar) in every mode — it never moves
+    // between the format bar and the title bar. Read-only MDX hides it.
+    const hideViewSwitch = readOnly && doc.format === "mdx";
+    return (_jsxs("div", { className: "flex min-w-0 items-center gap-2 font-sans text-chrome-sm text-muted-2", children: [!hideViewSwitch && (_jsx(ViewSwitch, { format: doc.format, view: view, onChangeView: onChangeView })), _jsx(ScriptsSwitch, { format: doc.format, view: view, onChangeView: onChangeView })] }));
+}
+/** the host app own DOCX menu bar (File/Format/Insert) — drives the lifted bridge API, no Eigenpal UI.
+ *  No "Open…" here: opening is the app-level brokered Open (DocActionBar/sidebar/Ctrl+O). The vendor's
+ *  in-editor picker is intentionally never surfaced — it swapped the editor buffer without changing
+ *  the active doc.path, so a later Save would write the new content over the original file. */
+function DocxMenus({ api, onSaveAs, onClose, readOnly = false, }) {
+    const fmt = (a) => () => api.format(a);
+    return (_jsxs("div", { className: "-ml-2 flex items-center font-sans text-chrome-sm", children: [_jsx(Dropdown, { variant: "menu", label: "File", title: menuTitle("File", "F"), panelWidth: 176, accelerator: "f", children: (close) => (_jsxs(_Fragment, { children: [_jsx(Item, { hint: shortcutLabel("mod+s"), onRun: () => {
+                                api.save();
+                                close();
+                            }, children: "Save" }), _jsx(Item, { hint: shortcutLabel("mod+shift+s"), onRun: () => {
+                                onSaveAs();
+                                close();
+                            }, children: "Save As\u2026" }), _jsx(Item, { onRun: () => {
+                                api.pageSetup();
+                                close();
+                            }, children: "Page setup\u2026" }), _jsx(Item, { hint: shortcutLabel("mod+p"), onRun: () => {
+                                api.print();
+                                close();
+                            }, children: "Print" }), _jsx(Item, { hint: shortcutLabel("mod+w"), onRun: () => {
+                                onClose();
+                                close();
+                            }, children: "Close" })] })) }), !readOnly && (_jsxs(_Fragment, { children: [_jsx(Dropdown, { variant: "menu", label: "Format", title: menuTitle("Format", "O"), panelWidth: 158, accelerator: "o", children: (close) => (_jsxs(_Fragment, { children: [_jsx(Item, { hint: shortcutLabel("mod+b"), onRun: () => {
+                                        fmt("bold")();
+                                        close();
+                                    }, children: "Bold" }), _jsx(Item, { hint: shortcutLabel("mod+i"), onRun: () => {
+                                        fmt("italic")();
+                                        close();
+                                    }, children: "Italic" }), _jsx(Item, { hint: shortcutLabel("mod+u"), onRun: () => {
+                                        fmt("underline")();
+                                        close();
+                                    }, children: "Underline" }), _jsx(Item, { onRun: () => {
+                                        fmt("strikethrough")();
+                                        close();
+                                    }, children: "Strikethrough" }), _jsx(Item, { onRun: () => {
+                                        fmt("superscript")();
+                                        close();
+                                    }, children: "Superscript" }), _jsx(Item, { onRun: () => {
+                                        fmt("subscript")();
+                                        close();
+                                    }, children: "Subscript" }), _jsx(Item, { onRun: () => {
+                                        fmt("clearFormatting")();
+                                        close();
+                                    }, children: "Clear formatting" })] })) }), _jsx(Dropdown, { variant: "menu", label: "Insert", title: menuTitle("Insert", "N"), panelWidth: 170, accelerator: "n", children: (close) => (_jsxs(_Fragment, { children: [_jsx(Item, { onRun: () => {
+                                        api.insertTable(3, 3);
+                                        close();
+                                    }, children: "Table (3 \u00D7 3)" }), _jsx(Item, { onRun: () => {
+                                        api.insertImage();
+                                        close();
+                                    }, children: "Image\u2026" }), _jsx(Item, { onRun: () => {
+                                        fmt("insertLink")();
+                                        close();
+                                    }, children: "Link\u2026" }), _jsx(Item, { onRun: () => {
+                                        api.insertPageBreak();
+                                        close();
+                                    }, children: "Page break" }), _jsx(Item, { onRun: () => {
+                                        api.insertTOC();
+                                        close();
+                                    }, children: "Table of contents" })] })) })] }))] }));
+}
+/** Menu bar for text + pdf formats. File always; Edit for editable text; View for render-switchable. */
+function TextMenus({ doc, view, onSave, onSaveAs, onPrint, onClose, onChangeView, onEditImageExternal, readOnly = false, }) {
+    const { settings, update } = useSettings();
+    const cap = capabilitiesFor(doc.format);
+    // Text-only Edit menu: image is saveable but edits in its own viewer shell, so canReplace
+    // (txt/md/mdx/html) is the right gate here, not canEdit.
+    const editable = cap.canReplace;
+    const saveable = cap.canEdit;
+    const saveAs = cap.canSaveAs;
+    const viewSwitch = cap.canSwitchView;
+    // execCommand acts on the focused source editor; the menu items are
+    // focus-safe (onMouseDown), so the editor keeps focus + selection while the menu is used.
+    const exec = (cmd) => () => document.execCommand(cmd);
+    const dispatchEditorCommand = (type) => () => {
+        window.dispatchEvent(new Event(type, { cancelable: true }));
+    };
+    const selectAll = () => {
+        if (doc.format === "html") {
+            const event = new Event("viewright:html-select-all", { cancelable: true });
+            window.dispatchEvent(event);
+            if (event.defaultPrevented)
+                return;
+        }
+        document.execCommand("selectAll");
+    };
+    return (_jsxs("div", { className: "-ml-2 flex items-center font-sans text-chrome-sm", children: [_jsx(Dropdown, { variant: "menu", label: "File", title: menuTitle("File", "F"), panelWidth: 176, accelerator: "f", children: (close) => (_jsxs(_Fragment, { children: [saveable && (_jsx(Item, { hint: shortcutLabel("mod+s"), onRun: () => {
+                                onSave();
+                                close();
+                            }, children: "Save" })), saveAs && (_jsx(Item, { hint: shortcutLabel("mod+shift+s"), onRun: () => {
+                                onSaveAs();
+                                close();
+                            }, children: "Save As\u2026" })), doc.format === "image" && onEditImageExternal && (_jsx(Item, { onRun: () => {
+                                onEditImageExternal();
+                                close();
+                            }, children: "Edit image externally\u2026" })), _jsx(Item, { hint: shortcutLabel("mod+p"), onRun: () => {
+                                onPrint();
+                                close();
+                            }, children: "Print" }), _jsx(Item, { hint: shortcutLabel("mod+w"), onRun: () => {
+                                onClose();
+                                close();
+                            }, children: "Close" })] })) }), editable && !readOnly && (_jsx(Dropdown, { variant: "menu", label: "Edit", title: menuTitle("Edit", "E"), panelWidth: 140, accelerator: "e", children: (close) => (_jsxs(_Fragment, { children: [_jsx(Item, { hint: shortcutLabel("mod+z"), onRun: () => {
+                                dispatchEditorCommand("viewright:undo")();
+                                close();
+                            }, children: "Undo" }), _jsx(Item, { hint: shortcutLabel("mod+y"), onRun: () => {
+                                dispatchEditorCommand("viewright:redo")();
+                                close();
+                            }, children: "Redo" }), _jsx(Item, { hint: shortcutLabel("mod+x"), onRun: () => {
+                                exec("cut")();
+                                close();
+                            }, children: "Cut" }), _jsx(Item, { hint: shortcutLabel("mod+c"), onRun: () => {
+                                exec("copy")();
+                                close();
+                            }, children: "Copy" }), _jsx(Item, { hint: shortcutLabel("mod+v"), onRun: () => {
+                                exec("paste")();
+                                close();
+                            }, children: "Paste" }), _jsx(Item, { hint: shortcutLabel("mod+a"), onRun: () => {
+                                selectAll();
+                                close();
+                            }, children: "Select all" })] })) })), (viewSwitch || editable) && (_jsx(Dropdown, { variant: "menu", label: "View", title: menuTitle("View", "V"), panelWidth: 150, accelerator: "v", children: (close) => (_jsxs(_Fragment, { children: [viewSwitch && doc.format === "html" && (_jsxs(_Fragment, { children: [_jsx(Item, { active: view === "interactive", onRun: () => {
+                                        onChangeView("interactive");
+                                        close();
+                                    }, children: "Interactive" }), _jsx(Item, { active: view === "preview", onRun: () => {
+                                        onChangeView("preview");
+                                        close();
+                                    }, children: "Safe" })] })), viewSwitch && doc.format === "md" && !readOnly && (_jsx(Item, { active: view === "source", onRun: () => {
+                                onChangeView(view === "source" ? "preview" : "source");
+                                close();
+                            }, children: view === "source" ? "Return to live editor" : "Raw source" })), viewSwitch && doc.format === "mdx" && !readOnly && (_jsxs(_Fragment, { children: [_jsx(Item, { active: view === "preview", onRun: () => {
+                                        onChangeView("preview");
+                                        close();
+                                    }, children: "Preview" }), _jsx(Item, { active: view === "source", onRun: () => {
+                                        onChangeView("source");
+                                        close();
+                                    }, children: "Source" })] })), editable && (_jsxs(_Fragment, { children: [_jsx(Item, { active: settings.spellcheck, onRun: () => {
+                                        update({ spellcheck: !settings.spellcheck });
+                                        close();
+                                    }, children: "Spell check" }), _jsx(Item, { active: settings.wordWrap, onRun: () => {
+                                        update({ wordWrap: !settings.wordWrap });
+                                        close();
+                                    }, children: "Word wrap" })] }))] })) }))] }));
+}
+/** Markdown keeps one live editor; raw source is its fallback drawer. MDX retains its preview/source
+ *  switch because executable MDX cannot mount in the app's editable React tree. */
+function ViewSwitch({ format, view, onChangeView, }) {
+    // Segmented two-way switch that stays in one place: Markdown Editor | Source, MDX Preview | Source.
+    if (format !== "md" && format !== "mdx")
+        return null;
+    const first = format === "md" ? "Editor" : "Preview";
+    const sourceOpen = view === "source";
+    const seg = (on) => `vr-press vr-focus h-7 rounded-full px-2.5 ${on ? "bg-copper/[0.14] text-copper-hi" : "text-muted-2 hover:bg-ink/40 hover:text-paper"}`;
+    return (_jsxs("div", { role: "group", "aria-label": "View", className: "flex items-center gap-0.5 select-none", children: [_jsx("button", { type: "button", "aria-pressed": !sourceOpen, "aria-label": format === "md" ? "Show live editor" : "Show MDX preview", title: format === "md" ? "Live editor" : "Preview", onClick: () => onChangeView("preview"), className: seg(!sourceOpen), children: first }), _jsx("button", { type: "button", "aria-pressed": sourceOpen, "aria-label": format === "md" ? "Show raw Markdown source" : "Show MDX source", title: format === "md" ? "Raw Markdown source" : "MDX source", onClick: () => onChangeView("source"), className: seg(sourceOpen), children: "Source" })] }));
+}
+/** HTML scripts ON/OFF toggle (Interactive ↔ Safe), md-switch styling: label + sliding knob + state.
+ *  ON (Interactive, page JS runs) is RED; OFF (Safe, scriptless render) is GREEN. Lives here in the
+ *  action bar — same place/feel as md's preview/source switch — not in the page URL chrome. Returns
+ *  null for every non-HTML format. HTML's `view` is only ever "interactive" or "preview" (the source
+ *  drawer is separate internal state), so `view !== "preview"` cleanly means scripts ON. */
+function ScriptsSwitch({ format, view, onChangeView, }) {
+    if (format !== "html")
+        return null;
+    // Mirror HtmlDocument's `mode` (view === "preview" ? Safe : Interactive) exactly, so the knob never
+    // disagrees with what the preview is actually doing — a stale/odd ViewMode reads as Interactive in
+    // both places. Red dot = ON (scripts run), green = OFF (Safe); the colour + position carry state.
+    const interactive = view !== "preview";
+    return (_jsxs("div", { className: "flex items-center gap-2 px-1.5 select-none", title: interactive
+            ? `Scripts ON — the page runs like a browser tab (remote scripts, fonts, network), but in an origin-isolated sandbox that can't touch ${hostAppName()} or your files. Click for Safe (scriptless render).`
+            : "Scripts OFF — Safe scriptless render. Click to run the page (Interactive).", children: [_jsx("span", { className: "text-muted-2", children: "scripts" }), _jsx("button", { type: "button", role: "switch", "aria-checked": interactive, "aria-label": interactive
+                    ? "Scripts on (Interactive). Switch to Safe."
+                    : "Scripts off (Safe). Switch to Interactive.", onClick: () => onChangeView(interactive ? "preview" : "interactive"), className: `vr-focus flex h-4 w-8 shrink-0 items-center rounded-full border px-0.5 ${interactive
+                    ? "justify-end border-[color:color-mix(in_srgb,var(--danger)_60%,var(--line))] bg-[color:color-mix(in_srgb,var(--danger)_20%,transparent)]"
+                    : "justify-start border-[color:color-mix(in_srgb,var(--accent-2)_60%,var(--line))] bg-[color:color-mix(in_srgb,var(--accent-2)_20%,transparent)]"}`, children: _jsx("span", { className: `h-2.5 w-2.5 rounded-full transition-all duration-150 ${interactive ? "bg-danger-hi" : "bg-accent2"}` }) })] }));
+}

package/dist/app/DocumentContextMenu.d.ts

@@ -0,0 +1,29 @@
+export interface DocContextMenu {
+    x: number;
+    y: number;
+    editable: boolean;
+    hasSelection: boolean;
+    editableEl: HTMLElement | null;
+    contentRoot: HTMLElement | null;
+}
+export type DocMenuItemId = "cut" | "copy" | "paste" | "selectAll" | "copyContents";
+export interface DocMenuItem {
+    id: DocMenuItemId;
+    label: string;
+    disabled: boolean;
+    separatorBefore?: boolean;
+}
+export declare function documentMenuItems(opts: {
+    editable: boolean;
+    hasSelection: boolean;
+    canCopyContents: boolean;
+}): DocMenuItem[];
+export declare function useDocumentContextMenu(): {
+    menu: DocContextMenu | null;
+    close: () => void;
+};
+export declare function DocumentContextMenu({ menu, onClose, onCopyContents, }: {
+    menu: DocContextMenu;
+    onClose: () => void;
+    onCopyContents: (() => void) | null;
+}): import("react").JSX.Element;

package/dist/app/DocumentContextMenu.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Right-click menu for the document content plane. The app globally suppresses the raw WebView2
+// context menu (`blockNativeContextMenu`, installed in main.tsx) so the chrome never shows browser junk; this restores a curated,
+// cross-platform Edit menu (Cut / Copy / Paste / Select all, plus Copy contents) on the actual document
+// surfaces — markdown preview, source/CodeMirror, DOCX, HTML, PDF text, images. Scoped by the
+// `[data-vr-content-plane]` marker so a right-click on the sidebar/toolbar still gets nothing.
+import { useCallback, useEffect, useState } from "react";
+import { ContextMenu } from "@rightkit/react-shell/react";
+import { compactMenuItemClass } from "./sidebar/SidebarPrimitives.js";
+const EDITABLE_SELECTOR = '.cm-content, .ProseMirror, [contenteditable="true"], textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="button"])';
+// Pure item composition, kept separate so the menu shape is unit-testable without a DOM or clipboard.
+// Cut/Paste appear only on editable surfaces; Copy/Cut are disabled without a selection; Copy contents
+// appears only when the caller can supply the whole-document text (text-like formats).
+export function documentMenuItems(opts) {
+    const items = [];
+    if (opts.editable)
+        items.push({ id: "cut", label: "Cut", disabled: !opts.hasSelection });
+    items.push({ id: "copy", label: "Copy", disabled: !opts.hasSelection });
+    if (opts.editable)
+        items.push({ id: "paste", label: "Paste", disabled: false });
+    items.push({ id: "selectAll", label: "Select all", disabled: false, separatorBefore: true });
+    if (opts.canCopyContents)
+        items.push({ id: "copyContents", label: "Copy contents", disabled: false });
+    return items;
+}
+// Non-HTML document surfaces use the host app curated menu on plain or Shift+right-click. HTML iframe
+// events never reach this parent listener; those frames retain their own exact-node inspect menus.
+export function useDocumentContextMenu() {
+    const [menu, setMenu] = useState(null);
+    useEffect(() => {
+        const onCtx = (e) => {
+            const target = e.target;
+            if (!target || typeof target.closest !== "function")
+                return;
+            const contentRoot = target.closest("[data-vr-content-plane]");
+            if (!contentRoot)
+                return; // chrome right-click → no document menu
+            // Never shadow an HTML preview iframe. Right-clicks INSIDE the iframe are a separate document
+            // and never reach this listener; this only guards the edge case where the iframe element itself
+            // is the target. The HTML previews own their own menus — WebView2's native menu + the Rust-grafted
+            // "View source"/Inspect on the interactive (about:srcdoc) frame, and HtmlViewer's inspect menu on
+            // the safe (allow-same-origin) frame — and must stay authoritative there.
+            if (target.closest("iframe"))
+                return;
+            e.preventDefault();
+            const editableEl = target.closest(EDITABLE_SELECTOR);
+            const editable = !!editableEl && !editableEl.closest('[contenteditable="false"]');
+            const sel = typeof window.getSelection === "function" ? window.getSelection() : null;
+            const hasSelection = !!sel && !sel.isCollapsed && sel.toString().trim().length > 0;
+            setMenu({
+                x: e.clientX,
+                y: e.clientY,
+                editable,
+                hasSelection,
+                editableEl: editableEl ?? null,
+                contentRoot,
+            });
+        };
+        document.addEventListener("contextmenu", onCtx, { capture: true });
+        return () => document.removeEventListener("contextmenu", onCtx, { capture: true });
+    }, []);
+    return { menu, close: useCallback(() => setMenu(null), []) };
+}
+export function DocumentContextMenu({ menu, onClose, onCopyContents, }) {
+    const items = documentMenuItems({
+        editable: menu.editable,
+        hasSelection: menu.hasSelection,
+        canCopyContents: !!onCopyContents,
+    });
+    const run = (id) => {
+        switch (id) {
+            case "cut":
+                document.execCommand("cut");
+                break;
+            case "copy":
+                document.execCommand("copy");
+                break;
+            case "paste":
+                void (async () => {
+                    try {
+                        const text = await navigator.clipboard.readText();
+                        menu.editableEl?.focus();
+                        document.execCommand("insertText", false, text);
+                    }
+                    catch {
+                        /* clipboard unavailable / denied — nothing to paste */
+                    }
+                })();
+                break;
+            case "selectAll":
+                if (menu.editableEl) {
+                    menu.editableEl.focus();
+                    document.execCommand("selectAll");
+                }
+                else if (menu.contentRoot) {
+                    const sel = window.getSelection();
+                    sel?.removeAllRanges();
+                    const range = document.createRange();
+                    range.selectNodeContents(menu.contentRoot);
+                    sel?.addRange(range);
+                }
+                break;
+            case "copyContents":
+                onCopyContents?.();
+                break;
+        }
+    };
+    // The shell menu keeps the document selection (no focus steal, no mousedown default), handles
+    // arrows/Home/End/Enter/Space/Escape from the window, closes on scrim press or context-menu
+    // gesture, and fits itself to the viewport.
+    const menuItems = items.map((item) => ({
+        id: item.id,
+        label: item.label,
+        disabled: item.disabled,
+        separatorBefore: item.separatorBefore,
+        run: () => run(item.id),
+    }));
+    return (_jsx(ContextMenu, { x: menu.x, y: menu.y, items: menuItems, onClose: onClose, label: "Document actions", width: 176, itemAs: "button", autoFocus: false, showLead: false, renderItem: (item) => item.label, className: "vr-pop no-print overflow-x-hidden rounded-lg border border-line bg-panel-2 py-0.5 shadow-2xl", scrimClassName: "no-print", slots: {
+            item: `${compactMenuItemClass} [&.is-active]:bg-ink/50 [&.is-active]:text-paper [&.is-disabled]:cursor-default [&.is-disabled]:opacity-40 [&.is-disabled]:hover:bg-transparent`,
+            separator: "my-1 h-px bg-line",
+        } }));
+}

package/dist/app/DocumentPane.d.ts

@@ -0,0 +1,52 @@
+import type { ComponentProps, ReactNode } from "react";
+import { DocStatsPill } from "./shell/DocStatsPill.js";
+import { DocumentTools } from "./shell/DocumentTools.js";
+import { StartPage } from "./shell/StartPage.js";
+import { BlockDraftProvider } from "@rightkit/document-core/app/BlockDraftContext";
+import { DocumentRouterTable } from "./DocumentRouterTable.js";
+import type { useSettings } from "@rightkit/document-core/settings/settings";
+import type { LoadedDocument } from "@rightkit/document-core/documents/types";
+import type { DocxMenuApi } from "@rightkit/docx-editor/documents/docx/menuApi";
+type StatsProps = ComponentProps<typeof DocStatsPill>;
+type RouterProps = ComponentProps<typeof DocumentRouterTable>;
+export type DocumentPaneProps = {
+    active: LoadedDocument | null;
+    activeIndex: number;
+    activeEditable: boolean;
+    view: ComponentProps<typeof DocumentTools>["view"];
+    distractionFree: boolean;
+    docBarSlot: HTMLElement | null;
+    setDocBarSlot: (el: HTMLElement | null) => void;
+    modeSlot: ReactNode;
+    inspectorOpen: boolean;
+    toggleInspector: () => void;
+    closeInspector: () => void;
+    findBarEl: ReactNode;
+    zoom: {
+        zoomHud: ReactNode;
+        zoomedAwayFromDefault: boolean;
+        zoomPercentLabel: string;
+        resetDocumentZoom: () => void;
+    };
+    openingPath: string | null;
+    restoringSession: boolean;
+    openDocs: LoadedDocument[];
+    startPage: ComponentProps<typeof StartPage>;
+    blockDrafts: ComponentProps<typeof BlockDraftProvider>["registry"];
+    router: RouterProps;
+    subscribeEdits: StatsProps["subscribeEdits"];
+    getEditSnapshot: StatsProps["getEditSnapshot"];
+    dirtyPaths: Set<string>;
+    isDirty: (doc: LoadedDocument) => boolean;
+    subscribeDirty: (path: string, listener: () => void) => () => void;
+    docxMenu: DocxMenuApi | null;
+    onHtmlSave: (path: string) => unknown;
+    onSave: (doc: LoadedDocument) => unknown;
+    settings: ReturnType<typeof useSettings>["settings"];
+    update: ReturnType<typeof useSettings>["update"];
+};
+/** The document column: docked format bar, the content plane (find bar, zoom pill, opening/restore
+ * indicators, start page, router table), the status row, and the Info inspector. Extracted
+ * verbatim from App.tsx. */
+export declare function DocumentPane(p: DocumentPaneProps): import("react").JSX.Element;
+export {};

package/dist/app/DocumentPane.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tabDomId } from "./tabs/tabIds.js";
+import { DocStatsPill } from "./shell/DocStatsPill.js";
+import { DocumentTools } from "./shell/DocumentTools.js";
+import { DocBarSlotContext } from "@rightkit/document-core/app/shell/docBar";
+import { InfoInspector } from "./shell/InfoInspector.js";
+import { StartPage } from "./shell/StartPage.js";
+import { OpeningProgress } from "./OpeningProgress.js";
+import { BlockDraftProvider } from "@rightkit/document-core/app/BlockDraftContext";
+import { DocumentRouterTable } from "./DocumentRouterTable.js";
+/** The document column: docked format bar, the content plane (find bar, zoom pill, opening/restore
+ * indicators, start page, router table), the status row, and the Info inspector. Extracted
+ * verbatim from App.tsx. */
+export function DocumentPane(p) {
+    const { active, distractionFree, zoom } = p;
+    return (_jsxs("div", { className: "flex min-h-0 min-w-0 flex-1", children: [_jsxs("div", { className: "relative flex min-h-0 min-w-0 flex-1 flex-col", children: [_jsx("svg", { "data-vr-content-corner": true, viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M0 24V0H24A24 24 0 0 0 0 24Z" }) }), active && !distractionFree && (_jsxs("div", { "data-vr-doc-bar": true, className: "no-print relative z-30 flex shrink-0 items-center gap-2 border-b border-[color-mix(in_srgb,var(--reader-line)_62%,transparent)] bg-[var(--reader-surface)] py-1 pl-3.5 pr-3", children: [_jsx("div", { ref: p.setDocBarSlot, className: "flex min-w-0 flex-1 items-center" }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [p.modeSlot, p.modeSlot && _jsx("span", { "aria-hidden": "true", className: "mx-0.5 h-4 w-px bg-line" }), _jsx(DocumentTools, { doc: active, view: p.view, inspectorOpen: p.inspectorOpen, onToggleInspector: p.toggleInspector })] })] })), _jsx(DocBarSlotContext.Provider, { value: distractionFree ? null : p.docBarSlot, children: _jsxs("div", { "data-vr-content-plane": true, id: "vr-doc-pane", role: "tabpanel", "aria-labelledby": active ? tabDomId(active) : undefined, className: "relative min-h-0 min-w-0 flex-1 overflow-hidden bg-[var(--reader-surface)]", children: [p.findBarEl && (_jsx("div", { "data-vr-toolbar-find": "", className: "no-print vr-chrome absolute top-2 z-50 overflow-y-auto max-h-[calc(100%-1rem)]", children: p.findBarEl })), zoom.zoomedAwayFromDefault ? (_jsxs("button", { type: "button", onClick: zoom.resetDocumentZoom, "aria-label": "Reset zoom to 100%", className: "no-print absolute right-4 top-4 z-50 rounded border border-line bg-panel-2 px-2 py-1 font-mono text-xs text-muted shadow-xl hover:text-fg", children: [zoom.zoomPercentLabel, " \u00B7 Reset"] })) : (zoom.zoomHud && (_jsx("div", { className: "no-print pointer-events-none absolute right-4 top-4 z-50 rounded border border-line bg-panel-2 px-2 py-1 font-mono text-xs text-muted shadow-xl", children: zoom.zoomHud }))), p.openingPath && (_jsx(OpeningProgress, { fileName: p.openingPath.split(/[\\/]/).pop() || "document" }, p.openingPath)), !active && p.restoringSession && p.openDocs.length > 0 && (_jsx("div", { role: "status", "aria-live": "polite", "data-testid": "restoring-session", className: "absolute inset-0 flex items-center justify-center bg-[var(--reader-surface)] outline-none", children: _jsxs("div", { className: "flex items-center gap-3 font-sans text-sm text-muted", children: [_jsx("span", { className: "h-2 w-2 animate-pulse rounded-full bg-copper", "aria-hidden": true }), "Restoring session\u2026"] }) })), !active && (!p.restoringSession || p.openDocs.length === 0) && (_jsx("div", { className: "absolute inset-0 overflow-auto bg-[var(--reader-surface)] outline-none", children: _jsx(StartPage, { ...p.startPage }) })), _jsx(BlockDraftProvider, { registry: p.blockDrafts, children: _jsx(DocumentRouterTable, { ...p.router }) })] }) }), active && !distractionFree && (_jsxs("div", { "data-vr-doc-status-bar": true, className: "no-print shrink-0 justify-between font-sans", children: [_jsx("div", { className: "vr-doc-path min-w-0 flex-1 opacity-80", children: active.path }), _jsx(DocStatsPill, { doc: active, subscribeEdits: p.subscribeEdits, getEditSnapshot: p.getEditSnapshot, status: p.activeEditable
+                                    ? {
+                                        dirtyHint: p.dirtyPaths.has(active.path),
+                                        isDirty: p.isDirty,
+                                        subscribeDirty: p.subscribeDirty,
+                                        onSave: () => active.format === "docx" && p.docxMenu
+                                            ? p.docxMenu.save()
+                                            : active.format === "html"
+                                                ? p.onHtmlSave(active.path)
+                                                : p.onSave(active),
+                                        autoSave: p.settings.autoSave,
+                                        onToggleAutoSave: () => p.update({ autoSave: !p.settings.autoSave }),
+                                    }
+                                    : undefined })] }))] }), p.inspectorOpen && active && !distractionFree && (_jsx(InfoInspector, { doc: active, onClose: p.closeInspector, subscribeEdits: p.subscribeEdits, getEditSnapshot: p.getEditSnapshot }))] }));
+}

package/dist/app/DocumentRouterTable.d.ts

@@ -0,0 +1,58 @@
+import { type ComponentProps, type RefObject } from "react";
+import { DocumentRouter } from "../documents/DocumentRouter.js";
+import type { LoadedDocument, SearchProvider, ViewMeta, ViewMode } from "@rightkit/document-core/documents/types";
+import type { DocxMenuApi } from "@rightkit/docx-editor/documents/docx/menuApi";
+import type { ImageSaveFunction } from "@rightkit/media-ui";
+import type { MarkdownExportApi } from "@rightkit/markdown-editor/documents/markdown/export/markdownExportTypes";
+import type { SourceEditorViewState } from "../documents/txt/TxtEditor.js";
+import type { PdfSaveFunction } from "@rightkit/document-core/documents/pdf/pdfEditor";
+import type { PdfSavePlan } from "@rightkit/document-core/documents/pdf/pdfEditModel";
+declare function DocumentRouterTableImpl({ mountedDocs, activePath, livePaths, renderedPaths, views, contentScrollRef, onContentScroll, onDocumentWheel, subscribeEdits, getEditSnapshot, getExternalSeq, sourceViewStateRef, onTxtChange, onSave, onDocxSaveAs, onDocxSave, onDocxChange, docxSaver, imageSaver, docxSaversRef, pdfSaversRef, pdfSavePlansRef, imageSaversRef, setDocxMenu, setPdfPrint, setMarkdownExport, onImageChange, onPdfDirtyChange, openImageSibling, registerSearchProviderFor, onPdfViewState, findBarEl, findMode, canReplaceSearch, onChangeView, toggleFind, closeFind, onOpenPath, trackMdxGrant, htmlPropsFor, }: {
+    mountedDocs: LoadedDocument[];
+    activePath: string | null;
+    /** Paths currently allowed to own a heavy DocumentRouter tree. */
+    livePaths: ReadonlySet<string>;
+    renderedPaths: Set<string>;
+    views: Record<string, ViewMode>;
+    /** Wave 2 ephemeral per-doc Read/Edit modes — absent means "read". */
+    contentScrollRef: RefObject<HTMLDivElement | null>;
+    onContentScroll: (e: React.UIEvent<HTMLDivElement>) => void;
+    onDocumentWheel: (e: React.WheelEvent<HTMLDivElement>) => void;
+    subscribeEdits: (path: string, cb: () => void) => () => void;
+    getEditSnapshot: (path: string) => string | undefined;
+    getExternalSeq: (path: string) => number;
+    /** App-owned source selection/scroll survives a dirty router shell + cold remount. */
+    sourceViewStateRef: RefObject<Record<string, SourceEditorViewState>>;
+    onTxtChange: (path: string, prevContent: string, text: string) => void;
+    onSave: (doc: LoadedDocument) => void;
+    onDocxSaveAs: (doc: LoadedDocument, buf: ArrayBuffer) => void;
+    onDocxSave: (path: string, buf: ArrayBuffer) => void;
+    onDocxChange: (path: string) => void;
+    docxSaver: RefObject<(() => Promise<ArrayBuffer | null>) | null>;
+    imageSaver: RefObject<ImageSaveFunction | null>;
+    docxSaversRef: RefObject<Map<string, () => Promise<ArrayBuffer | null>>>;
+    pdfSaversRef: RefObject<Map<string, PdfSaveFunction>>;
+    pdfSavePlansRef: RefObject<Map<string, () => Promise<PdfSavePlan>>>;
+    imageSaversRef: RefObject<Map<string, ImageSaveFunction>>;
+    setDocxMenu: (api: DocxMenuApi | null) => void;
+    setPdfPrint: (fn: (() => Promise<boolean>) | null) => void;
+    setMarkdownExport: (api: MarkdownExportApi | null) => void;
+    onImageChange: (path: string) => void;
+    onPdfDirtyChange: (path: string, dirty: boolean) => void;
+    openImageSibling: (currentPath: string, targetPath: string) => void;
+    registerSearchProviderFor: (path: string) => (provider: SearchProvider | null) => void;
+    onPdfViewState: (m: ViewMeta) => void;
+    findBarEl: React.ReactNode;
+    findMode?: "find" | "replace";
+    canReplaceSearch: boolean;
+    onChangeView: (view: ViewMode) => void;
+    toggleFind: (replace: boolean) => void;
+    closeFind: () => void;
+    onOpenPath: (path: string, opts?: {
+        background?: boolean;
+    }) => void;
+    trackMdxGrant: (entryPath: string, grantedPath: string) => void;
+    htmlPropsFor: (entryPath: string) => ComponentProps<typeof DocumentRouter>["html"] | undefined;
+}): import("react").JSX.Element;
+export declare const DocumentRouterTable: import("react").MemoExoticComponent<typeof DocumentRouterTableImpl>;
+export {};