@rightkit/document-workspace 0.0.0-stage → 0.1.0

package/dist/app/DocumentRouterTable.js

@@ -0,0 +1,143 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { effectiveReadEdit } from "./shell/readEdit.js";
+import { DocumentRouter } from "../documents/DocumentRouter.js";
+import { capabilitiesFor } from "../documents/capabilities.js";
+import { isUntitled } from "@rightkit/document-core/documents/types";
+import { PaneActiveContext } from "@rightkit/document-core/app/shell/docBar";
+import { hostAppName } from "../appName.js";
+// Inactive DOCX/PDF panes must not publish toolbar or view-state updates, but their callbacks also
+// must not change identity on every App render (their effects depend on these props).
+const inactiveDocxToolbar = (_api) => { };
+const inactivePdfViewState = (_view) => { };
+const inactivePdfPrint = (_fn) => { };
+const inactiveMarkdownExport = (_api) => { };
+// Keystrokes live inside CodeMirror + editsRef and should not re-render the whole viewer tree.
+// External writes still bump App once, so this snapshot re-syncs reload/save/restore paths without
+// subscribing the active editor shell to every keypress.
+function LiveDocumentRouter({ doc, getEditSnapshot, ...props }) {
+    // Local keystrokes already live inside each editor + edit store. Freeze this input until disk/doc
+    // identity changes; otherwise unrelated shell bookkeeping can feed a newer snapshot back through
+    // DocumentRouter and repaint a heavy viewer mid-edit. Cold remounts still read latest snapshot.
+    const routerText = useMemo(() => getEditSnapshot(doc.path) ?? doc.content, [doc, getEditSnapshot]);
+    return _jsx(DocumentRouter, { ...props, doc: doc, text: routerText });
+}
+// T2-3: memoized so an App re-render unrelated to the open-tab set (zoomHud toggle, sidebar collapse,
+// settings dialog, etc.) doesn't re-run this component's `.map()` over every mounted doc. The bigger win
+// is downstream — each DocumentRouter instance below already bails via its own memo comparator
+// (documentRouterPropsEqual) — but that only helps if THIS component doesn't rebuild every child element
+// from scratch first. Most handler props here are already useCallback-stable from their owning hooks
+// (useDocuments/useDocumentTabs/useViewState); App.tsx now also stabilizes onDocumentWheel and
+// onOpenPath, which used to be rebuilt (or an inline arrow) on every render.
+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, }) {
+    const activePathRef = useRef(activePath);
+    const [previousActivePath, setPreviousActivePath] = useState(null);
+    const [resizeActive, setResizeActive] = useState(false);
+    useLayoutEffect(() => {
+        if (activePathRef.current === activePath)
+            return;
+        setPreviousActivePath(activePathRef.current);
+        activePathRef.current = activePath;
+    }, [activePath]);
+    useEffect(() => {
+        let timer;
+        let frame;
+        const onResize = () => {
+            setResizeActive(true);
+            if (timer)
+                window.clearTimeout(timer);
+            if (frame)
+                window.cancelAnimationFrame(frame);
+            timer = window.setTimeout(() => {
+                frame = window.requestAnimationFrame(() => setResizeActive(false));
+            }, 120);
+        };
+        window.addEventListener("resize", onResize);
+        return () => {
+            window.removeEventListener("resize", onResize);
+            if (timer)
+                window.clearTimeout(timer);
+            if (frame)
+                window.cancelAnimationFrame(frame);
+        };
+    }, []);
+    // During the activation render, the ref still points at the pane that was active in the previous
+    // commit. Keep that router live synchronously so a fast switch cannot unmount it before App's
+    // after-paint MRU bookkeeping catches up.
+    const transitionPreviousPath = activePathRef.current !== activePath ? activePathRef.current : previousActivePath;
+    return (_jsx(_Fragment, { children: mountedDocs.map((doc) => {
+            const isActive = doc.path === activePath;
+            const dView = views[doc.path] ?? "preview";
+            const markdownOwnsScroll = doc.format === "md";
+            const dTextLike = capabilitiesFor(doc.format).canReplace;
+            // Background/restored tabs stay as lightweight shells. Active bypasses deferred bookkeeping:
+            // its router mounts in this same commit, so first visit and cold revisit never paint an empty
+            // shell. App defers only eviction/cleanup after activation has settled.
+            const hasRendered = isActive || renderedPaths.has(doc.path);
+            const isLive = isActive ||
+                doc.path === transitionPreviousPath ||
+                (hasRendered && livePaths.has(doc.path));
+            // Keep only the immediately previous pane paint-warm. Warming every rendered document makes
+            // each resize reflow every open Markdown/HTML tree & blocks window IPC for seconds.
+            const isPaintWarm = !resizeActive && doc.path === transitionPreviousPath;
+            return (_jsx("div", { "aria-hidden": isActive ? undefined : true, inert: isActive ? undefined : true, "data-vr-document-path": doc.path, "data-vr-pane-state": isActive ? "active" : isPaintWarm ? "warm" : "cold", "data-vr-router-state": isLive ? "live" : hasRendered ? "shell" : "deferred", id: isActive ? "vr-main-content" : undefined, tabIndex: isActive ? -1 : undefined, ref: isActive && !markdownOwnsScroll ? contentScrollRef : undefined, onScroll: isActive && !markdownOwnsScroll ? onContentScroll : undefined, onWheelCapture: isActive ? onDocumentWheel : undefined, ...(isActive && !markdownOwnsScroll ? { "data-document-scroll": "" } : {}), style: isActive
+                    ? {
+                        contentVisibility: "visible",
+                        visibility: "visible",
+                        opacity: 1,
+                        willChange: "opacity",
+                        zIndex: 1,
+                    }
+                    : isPaintWarm
+                        ? {
+                            contentVisibility: "visible",
+                            visibility: "visible",
+                            opacity: 0,
+                            willChange: "opacity",
+                            zIndex: 0,
+                            pointerEvents: "none",
+                        }
+                        : {
+                            contentVisibility: "hidden",
+                            visibility: "hidden",
+                            zIndex: 0,
+                            pointerEvents: "none",
+                        }, className: `absolute inset-0 outline-none ${markdownOwnsScroll ? "overflow-hidden" : "overflow-auto"}`, children: isLive ? (_jsxs(PaneActiveContext.Provider, { value: isActive, children: [dTextLike && doc.lossy ? (_jsxs("div", { className: "mx-4 mt-4 rounded border border-copper/40 bg-copper/5 p-3 font-sans text-xs text-muted", children: ["This file couldn\u2019t be decoded cleanly even after detecting its encoding (", doc.encoding, "); some bytes were shown as replacement characters. Keep a backup if the exact bytes matter."] })) : (dTextLike &&
+                            doc.encoding &&
+                            doc.encoding !== "UTF-8" && (_jsxs("div", { className: "mx-4 mt-4 rounded border border-line bg-panel/40 p-3 font-sans text-xs text-muted", children: ["Detected ", _jsx("span", { className: "text-copper-hi", children: doc.encoding }), " encoding.", hostAppName(), " preserves it when you save (it switches to UTF-8 only if you add characters that encoding can\u2019t represent)."] }))), _jsx(LiveDocumentRouter, { doc: doc, active: isActive, view: dView, readEdit: effectiveReadEdit(doc), subscribeEdits: subscribeEdits, getEditSnapshot: getEditSnapshot, getExternalSeq: getExternalSeq, sourceViewStateRef: sourceViewStateRef, onChange: (text) => onTxtChange(doc.path, doc.content, text), onSave: () => onSave(doc), onDocxSave: (buf) => {
+                                if (isUntitled(doc.path)) {
+                                    void onDocxSaveAs(doc, buf);
+                                }
+                                else {
+                                    void onDocxSave(doc.path, buf);
+                                }
+                            }, onDocxChange: () => onDocxChange(doc.path), registerDocxSave: (fn) => {
+                                if (fn)
+                                    docxSaversRef.current?.set(doc.path, fn);
+                                else
+                                    docxSaversRef.current?.delete(doc.path);
+                                // Compare by path instead of closure-captured isActive so the active-pointer
+                                // update works regardless of when the viewer mounts (deferred by App.tsx).
+                                if (doc.path === activePath)
+                                    docxSaver.current = fn;
+                            }, registerImageSave: (fn) => {
+                                if (fn)
+                                    imageSaversRef.current?.set(doc.path, fn);
+                                else
+                                    imageSaversRef.current?.delete(doc.path);
+                                if (doc.path === activePath)
+                                    imageSaver.current = fn;
+                            }, onDocxToolbar: isActive ? setDocxMenu : inactiveDocxToolbar, registerPdfPrint: isActive ? setPdfPrint : inactivePdfPrint, registerPdfSave: (fn) => {
+                                if (fn)
+                                    pdfSaversRef.current?.set(doc.path, fn);
+                                else
+                                    pdfSaversRef.current?.delete(doc.path);
+                            }, registerPdfSavePlan: (fn) => {
+                                if (fn)
+                                    pdfSavePlansRef.current?.set(doc.path, fn);
+                                else
+                                    pdfSavePlansRef.current?.delete(doc.path);
+                            }, onPdfDirtyChange: (dirty) => onPdfDirtyChange(doc.path, dirty), registerMarkdownExport: isActive ? setMarkdownExport : inactiveMarkdownExport, markdownScrollRef: isActive && markdownOwnsScroll ? contentScrollRef : undefined, onMarkdownScroll: isActive && markdownOwnsScroll ? onContentScroll : undefined, onImageChange: () => onImageChange(doc.path), onOpenImageSibling: openImageSibling, registerSearchProvider: registerSearchProviderFor(doc.path), pdfInitialView: doc.viewMeta, onPdfViewState: isActive ? onPdfViewState : inactivePdfViewState, findBar: isActive ? findBarEl : undefined, findMode: isActive ? findMode : undefined, onChangeView: onChangeView, onCloseFind: closeFind, onRequestFind: () => toggleFind(false), onRequestReplace: isActive && canReplaceSearch ? () => toggleFind(true) : undefined, onOpenPath: (p, opts) => void onOpenPath(p, opts), onMdxImportGranted: trackMdxGrant, html: doc.format === "html" ? htmlPropsFor(doc.path) : undefined })] })) : null }, doc.tabKey ?? doc.path));
+        }) }));
+}
+export const DocumentRouterTable = memo(DocumentRouterTableImpl);

package/dist/app/ErrorBoundary.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+interface Props {
+    children: ReactNode;
+    label?: string;
+    /** The shell boundary clears a shown error when this value changes. */
+    resetKey?: string;
+    /** Path of the document tab this boundary guards; enables the "Close tab" action. */
+    closeTabPath?: string;
+}
+/** the host app crash screen over the shell's boundary (`resetKey`, reset, `onError`). */
+export declare function ErrorBoundary({ children, label, resetKey, closeTabPath }: Props): import("react").JSX.Element;
+export {};

package/dist/app/ErrorBoundary.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ErrorBoundary as ShellErrorBoundary } from "@rightkit/react-shell/react";
+import { logError } from "@rightkit/document-core/state/diagnostics";
+import { hostAppName } from "../appName.js";
+/** the host app crash screen over the shell's boundary (`resetKey`, reset, `onError`). */
+export function ErrorBoundary({ children, label, resetKey, closeTabPath }) {
+    const name = label ?? hostAppName();
+    const report = (error, info) => {
+        console.error(`${hostAppName()} render error`, { label, error, info });
+        // Static label only — no message, stack or paths — so a crash actually reaches the local
+        // diagnostics log instead of vanishing (this boundary previously only reached `console.error`,
+        // invisible to anyone not watching devtools at the moment it happened).
+        logError("react:boundary");
+    };
+    return (_jsx(ShellErrorBoundary, { label: name, resetKey: resetKey, onError: report, fallback: (_error, reset) => (_jsx("div", { className: "flex h-full min-h-0 items-center justify-center bg-ink p-6", children: _jsxs("div", { role: "alert", className: "max-w-md rounded border border-line bg-panel-2 p-5 text-sm text-muted shadow-xl", children: [_jsxs("p", { className: "mb-1 font-serif text-lg font-semibold text-paper", children: ["Something went wrong in ", name] }), _jsx("p", { className: "mb-4", children: "This view couldn't be displayed. Your unsaved edits are kept in memory and nothing was written to your file. Reload the view to try again, or close the tab (you will be asked about unsaved changes)." }), _jsx("button", { type: "button", "aria-label": `Reload ${name}`, onClick: reset, className: "vr-press vr-focus rounded bg-copper/20 px-3 py-1.5 font-sans text-chrome-sm text-copper-hi hover:bg-copper/30", children: "Reload" }), closeTabPath ? (_jsx("button", { type: "button", "aria-label": "Close tab", onClick: () => window.dispatchEvent(new CustomEvent("viewright:close-tab", { detail: { path: closeTabPath } })), className: "vr-press vr-focus ml-2 rounded px-3 py-1.5 font-sans text-chrome-sm text-muted hover:bg-ink/40 hover:text-paper", children: "Close tab" })) : null] }) })), children: children }));
+}

package/dist/app/FindBar.d.ts

@@ -0,0 +1,12 @@
+import type { SearchProvider } from "@rightkit/document-core/documents/types";
+interface FindBarProps {
+    provider: SearchProvider | null;
+    onClose: () => void;
+    initialReplaceMode?: boolean;
+    scope?: "current" | "all";
+    onScopeChange?: (scope: "current" | "all") => void;
+    canCrossDoc?: boolean;
+    placement?: "floating" | "toolbar";
+}
+export declare function FindBar({ provider, onClose, initialReplaceMode, scope, onScopeChange, canCrossDoc, placement, }: FindBarProps): import("react").JSX.Element;
+export {};

package/dist/app/FindBar.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { CaretDown } from "@phosphor-icons/react/dist/icons/CaretDown";
+import { CaretUp } from "@phosphor-icons/react/dist/icons/CaretUp";
+import { MagnifyingGlass } from "@phosphor-icons/react/dist/icons/MagnifyingGlass";
+import { Swap } from "@phosphor-icons/react/dist/icons/Swap";
+import { useDismiss } from "@rightkit/platform-ui/headless";
+import { createShortcutRegistry } from "@rightkit/react-shell";
+import { isValidSearchRegex } from "@rightkit/document-core/documents/searchUtils";
+const EMPTY = { count: 0, activeIndex: -1 };
+// Session-only recent-query history (no localStorage — nothing typed into find outlives the session).
+const findHistory = [];
+function rememberQuery(query) {
+    const value = query.trim();
+    if (!value)
+        return;
+    const at = findHistory.indexOf(value);
+    if (at >= 0)
+        findHistory.splice(at, 1);
+    findHistory.unshift(value);
+    if (findHistory.length > 12)
+        findHistory.length = 12;
+}
+function PrevIcon() {
+    return _jsx(CaretUp, { size: 14, weight: "regular", "aria-hidden": "true" });
+}
+function NextIcon() {
+    return _jsx(CaretDown, { size: 14, weight: "regular", "aria-hidden": "true" });
+}
+export function FindBar({ provider, onClose, initialReplaceMode = false, scope = "current", onScopeChange, canCrossDoc = false, placement = "floating", }) {
+    const [query, setQuery] = useState("");
+    const [replaceText, setReplaceText] = useState("");
+    const [result, setResult] = useState(EMPTY); // provider-owned count + activeIndex
+    const [showReplace, setShowReplace] = useState(initialReplaceMode);
+    const [matchCase, setMatchCase] = useState(false);
+    const [wholeWord, setWholeWord] = useState(false);
+    const [regex, setRegex] = useState(false);
+    const queryInputRef = useRef(null);
+    const replaceInputRef = useRef(null);
+    const canReplace = !!provider?.canReplace;
+    const showCaseToggle = !!provider?.supportsMatchCase;
+    const showWordToggle = !!provider?.supportsWholeWord;
+    const showRegexToggle = !!provider?.supportsRegex;
+    const regexActive = regex && showRegexToggle;
+    const regexInvalid = regexActive && query !== "" && !isValidSearchRegex(query);
+    // Focus + select the query field the moment the bar opens, so keystrokes after Ctrl+F land in the
+    // search box, not the document body. useLayoutEffect (not useEffect) runs synchronously before
+    // paint — ahead of editors that re-grab focus via requestAnimationFrame on mount (the CodeMirror
+    // source editor's autofocus, ProseMirror). The rAF re-assert reclaims focus if such a competitor's
+    // callback still fires after us; it only acts when focus actually drifted off the input.
+    useLayoutEffect(() => {
+        const input = queryInputRef.current;
+        if (!input)
+            return;
+        input.focus();
+        input.select();
+        const raf = requestAnimationFrame(() => {
+            if (queryInputRef.current === input && document.activeElement !== input) {
+                input.focus();
+                input.select();
+            }
+        });
+        return () => cancelAnimationFrame(raf);
+    }, []);
+    useEffect(() => {
+        setShowReplace(initialReplaceMode && !!provider?.canReplace);
+    }, [initialReplaceMode, provider]);
+    // Escape closes the bar. Bubble phase on the window, like the handler it replaces, so a modal
+    // that takes Escape in the capture phase (the Link dialog) keeps Find open beneath it.
+    const windowTarget = useRef(typeof window === "undefined" ? null : window);
+    useDismiss(() => onClose(), {
+        escapeTarget: windowTarget,
+        outside: false,
+        preventDefault: true,
+        stopPropagation: false,
+        imeGuard: false,
+    });
+    // Alt+R toggles regex through a registry scoped to this bar: registered while it is open,
+    // dispatching in the bubble phase on the window like the matcher it replaces.
+    const regexToggleAvailableRef = useRef(showRegexToggle);
+    regexToggleAvailableRef.current = showRegexToggle;
+    useEffect(() => {
+        const registry = createShortcutRegistry();
+        registry.register({
+            id: "find.toggle-regex",
+            label: "Toggle regular expression",
+            chord: "alt+r",
+            hidden: true,
+            when: () => regexToggleAvailableRef.current,
+            allowDefaultPrevented: true,
+            allowComposing: true,
+            run: () => setRegex((v) => !v),
+        });
+        return registry.attach(window);
+    }, []);
+    // Run find when the query or the options change. Provider returns the authoritative
+    // {count, activeIndex}; we never compute the active index locally. Non-empty queries are
+    // debounced so large docs (and PDF page extraction / DOCX scans) don't run on every keystroke.
+    useEffect(() => {
+        if (!provider)
+            return;
+        let current = true;
+        const opts = { matchCase, wholeWord, regex: regexActive };
+        const run = async () => {
+            // An invalid pattern matches nothing: clear provider highlights via an empty query.
+            const res = regexActive && query && !isValidSearchRegex(query)
+                ? await provider.find("", opts)
+                : await provider.find(query, opts);
+            if (current)
+                setResult(query ? res : EMPTY);
+        };
+        if (!query) {
+            void run();
+            return () => {
+                current = false;
+            };
+        }
+        const t = setTimeout(run, 180);
+        return () => {
+            current = false;
+            clearTimeout(t);
+        };
+    }, [query, provider, matchCase, wholeWord, regexActive]);
+    // Providers can change their match set without a FindBar action (document undo/redo, external
+    // reconciliation). Keep displayed provider-owned count/index synchronized with those changes.
+    useEffect(() => {
+        if (!provider?.subscribe)
+            return;
+        return provider.subscribe((providerQuery, next) => {
+            if (providerQuery === query)
+                setResult(query ? next : EMPTY);
+        });
+    }, [provider, query]);
+    const step = async (dir) => {
+        if (!provider || result.count === 0)
+            return;
+        setResult(await (dir === "next" ? provider.next() : provider.prev()));
+    };
+    // F3 / Shift+F3 (dispatched by the global shortcut when the bar is already open) step the match
+    // through the bar itself, so its displayed count/index stays the source of truth. The listener is
+    // registered ONCE and reads the latest `step` via a ref (avoids re-subscribing every render).
+    const stepRef = useRef(step);
+    stepRef.current = step;
+    useEffect(() => {
+        const onStep = (e) => {
+            const dir = e.detail?.dir;
+            void stepRef.current(dir && dir < 0 ? "prev" : "next");
+        };
+        window.addEventListener("viewright:find-step", onStep);
+        return () => window.removeEventListener("viewright:find-step", onStep);
+    }, []);
+    const doReplace = async () => {
+        if (!provider?.replace)
+            return;
+        setResult(await provider.replace(replaceText));
+    };
+    const doReplaceAll = async () => {
+        if (!provider?.replaceAll)
+            return;
+        setResult(await provider.replaceAll(replaceText));
+    };
+    const resultStatus = regexInvalid
+        ? "Invalid regular expression"
+        : result.count > 0
+            ? `Match ${result.activeIndex + 1} of ${result.count}`
+            : query.trim()
+                ? "No matches"
+                : "No search results";
+    const handleQueryKeyDown = (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            rememberQuery(query);
+            void step(e.shiftKey ? "prev" : "next");
+        }
+    };
+    const handleReplaceKeyDown = (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            void doReplace();
+        }
+    };
+    // Shared inner field: rounded capsule on the recessed ink surface, copper hairline while any
+    // control inside is focused (the inputs themselves stay outline-free).
+    const fieldCls = "flex h-8 min-w-[120px] flex-1 basis-[160px] items-center gap-2 rounded-full border border-transparent bg-ink/70 pl-3 pr-2 transition-colors focus-within:border-copper/60";
+    const inputCls = "min-w-0 flex-1 bg-transparent text-chrome-md text-paper outline-none placeholder:text-muted-2";
+    const iconBtnCls = (on, disabled = false) => `vr-press vr-focus flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-chrome-xs ${on
+        ? "bg-copper/[0.14] text-copper-hi"
+        : disabled
+            ? "text-vr-disabled"
+            : "text-muted hover:bg-ink/40 hover:text-paper"}`;
+    const pillBtnCls = "vr-press vr-focus flex h-8 shrink-0 items-center justify-center rounded-full px-3 text-chrome-sm font-medium";
+    return (_jsxs("div", { "data-vr-find-placement": placement, role: "search", "aria-label": "Find in document", className: "no-print relative flex w-full max-w-full flex-col gap-2 font-sans text-chrome-md select-none", children: [_jsxs("div", { className: "vr-capsule min-h-11 flex-wrap gap-1 px-1.5 py-1", children: [_jsxs("div", { className: `${fieldCls}${regexInvalid ? " !border-red-500/70" : ""}`, children: [_jsx(MagnifyingGlass, { size: 14, weight: "regular", "aria-hidden": "true", className: "shrink-0 text-muted-2" }), _jsx("input", { ref: queryInputRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: handleQueryKeyDown, "aria-label": "Find text", "aria-invalid": regexInvalid, placeholder: "Find...", list: "vr-find-history", className: inputCls }), _jsx("datalist", { id: "vr-find-history", children: findHistory.map((q) => (_jsx("option", { value: q }, q))) }), _jsx("span", { className: "shrink-0 whitespace-nowrap pl-1 text-chrome-xs text-muted tabular-nums", children: regexInvalid
+                                    ? "Invalid"
+                                    : result.count > 0
+                                        ? `${result.activeIndex + 1} / ${result.count}`
+                                        : "0 / 0" })] }), (showCaseToggle || showWordToggle || showRegexToggle) && (_jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [showCaseToggle && (_jsx("button", { type: "button", onClick: () => setMatchCase((v) => !v), "aria-label": "Match case", "aria-pressed": matchCase, className: iconBtnCls(matchCase), title: "Match case", children: "Aa" })), showWordToggle && (_jsx("button", { type: "button", onClick: () => setWholeWord((v) => !v), "aria-label": "Whole word", "aria-pressed": wholeWord, className: iconBtnCls(wholeWord), title: "Whole word", children: "W" })), showRegexToggle && (_jsx("button", { type: "button", onClick: () => setRegex((v) => !v), "aria-label": "Regex", "aria-pressed": regex, "aria-keyshortcuts": "Alt+R", className: iconBtnCls(regex), title: "Regular expression (Alt+R)", children: ".*" }))] })), canCrossDoc && onScopeChange && (_jsx("button", { type: "button", onClick: () => onScopeChange(scope === "current" ? "all" : "current"), "aria-label": scope === "all" ? "Searching all tabs" : "Search this tab only", "aria-pressed": scope === "all", className: `${iconBtnCls(scope === "all")} w-auto px-2 text-chrome-xs`, title: scope === "all"
+                            ? "Searching all tabs — click to limit to this tab"
+                            : "Search this tab only — click to search all tabs", children: scope === "all" ? "all" : "1" })), _jsx("button", { type: "button", onClick: () => void step("prev"), disabled: result.count === 0, "aria-label": "Previous match", title: "Previous match", className: iconBtnCls(false, result.count === 0), children: _jsx(PrevIcon, {}) }), _jsx("button", { type: "button", onClick: () => void step("next"), disabled: result.count === 0, "aria-label": "Next match", title: "Next match", className: iconBtnCls(false, result.count === 0), children: _jsx(NextIcon, {}) }), canReplace && (_jsx("button", { type: "button", onClick: () => setShowReplace((v) => !v), "aria-pressed": showReplace, "aria-expanded": showReplace, title: showReplace ? "Hide replace field" : "Show replace field", className: `${pillBtnCls} ${showReplace ? "bg-copper/[0.14] text-copper-hi" : "text-muted hover:bg-ink/40 hover:text-paper"}`, children: "Replace" })), _jsx("button", { type: "button", onClick: onClose, title: "Close find", className: `${pillBtnCls} text-paper/85 hover:bg-ink/40 hover:text-paper`, children: "Done" })] }), showReplace && canReplace && (_jsxs("div", { "data-vr-find-replace-row": "", className: "vr-capsule min-h-11 flex-wrap gap-1 px-1.5 py-1", children: [_jsxs("div", { className: fieldCls, children: [_jsx(Swap, { size: 14, weight: "regular", "aria-hidden": "true", className: "shrink-0 text-muted-2" }), _jsx("input", { ref: replaceInputRef, type: "text", value: replaceText, onChange: (e) => setReplaceText(e.target.value), onKeyDown: handleReplaceKeyDown, "aria-label": "Replace with", placeholder: "Replace with...", className: inputCls })] }), _jsx("button", { type: "button", onClick: () => void doReplace(), disabled: result.count === 0, title: "Replace current match", className: `${pillBtnCls} text-muted hover:bg-ink/40 hover:text-paper disabled:text-vr-disabled disabled:hover:bg-transparent`, children: "Replace" }), _jsx("button", { type: "button", onClick: () => void doReplaceAll(), disabled: result.count === 0, title: "Replace all matches", className: `${pillBtnCls} bg-copper text-white hover:bg-copper/90 disabled:bg-panel-2 disabled:text-vr-disabled`, children: "All" })] })), _jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: resultStatus })] }));
+}

package/dist/app/LiveTitle.d.ts

@@ -0,0 +1,14 @@
+import type { LoadedDocument } from "@rightkit/document-core/documents/types";
+/**
+ * A document title that stays live as you type — for untitled buffers whose name is derived from their
+ * first line. It subscribes to its OWN doc's edit slice (via the edits store), so it re-renders on a
+ * keystroke without re-rendering the memoized Sidebar/Toolbar around it. `compute` is the host's title
+ * function (Sidebar's `titleFor`, the Toolbar's titlebar variant); it reads the same editsRef the
+ * subscription tracks, so calling it after the subscription fires yields the fresh title.
+ */
+export declare function LiveTitle({ doc, compute, subscribeEdits, getEditSnapshot, }: {
+    doc: LoadedDocument;
+    compute: (doc: LoadedDocument) => string;
+    subscribeEdits: (path: string, cb: () => void) => () => void;
+    getEditSnapshot: (path: string) => string | undefined;
+}): import("react").JSX.Element;

package/dist/app/LiveTitle.js

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEditText } from "@rightkit/document-core/app/useEditText";
+/**
+ * A document title that stays live as you type — for untitled buffers whose name is derived from their
+ * first line. It subscribes to its OWN doc's edit slice (via the edits store), so it re-renders on a
+ * keystroke without re-rendering the memoized Sidebar/Toolbar around it. `compute` is the host's title
+ * function (Sidebar's `titleFor`, the Toolbar's titlebar variant); it reads the same editsRef the
+ * subscription tracks, so calling it after the subscription fires yields the fresh title.
+ */
+export function LiveTitle({ doc, compute, subscribeEdits, getEditSnapshot, }) {
+    // Subscribe for the re-render; the value itself is unused (compute reads the live ref).
+    useEditText(subscribeEdits, getEditSnapshot, doc.path);
+    return _jsx(_Fragment, { children: compute(doc) });
+}

package/dist/app/OpeningProgress.d.ts

@@ -0,0 +1,13 @@
+/** Delay before the indicator appears, so fast opens never flash a progress bar. */
+export declare const OPENING_PROGRESS_DELAY_MS = 300;
+interface OpeningProgressProps {
+    fileName: string;
+    delayMs?: number;
+}
+/**
+ * Progress indicator for a document load that is still running. Mounted only while a load is in
+ * flight; it stays hidden until the load has lasted `delayMs`, then shows an indeterminate bar.
+ * The backend read reports no byte counts, so the bar makes no percentage claim.
+ */
+export declare function OpeningProgress({ fileName, delayMs }: OpeningProgressProps): import("react").JSX.Element | null;
+export {};

package/dist/app/OpeningProgress.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+/** Delay before the indicator appears, so fast opens never flash a progress bar. */
+export const OPENING_PROGRESS_DELAY_MS = 300;
+/**
+ * Progress indicator for a document load that is still running. Mounted only while a load is in
+ * flight; it stays hidden until the load has lasted `delayMs`, then shows an indeterminate bar.
+ * The backend read reports no byte counts, so the bar makes no percentage claim.
+ */
+export function OpeningProgress({ fileName, delayMs = OPENING_PROGRESS_DELAY_MS }) {
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+        setVisible(false);
+        const timer = window.setTimeout(() => setVisible(true), delayMs);
+        return () => window.clearTimeout(timer);
+    }, [delayMs]);
+    if (!visible)
+        return null;
+    const label = `Opening ${fileName || "document"}`;
+    return (_jsxs("div", { role: "status", "aria-live": "polite", className: "pointer-events-none absolute inset-x-0 top-0 z-50 flex flex-col gap-1 border-b border-line bg-panel/95 px-4 py-2 font-mono text-xs text-muted shadow-sm", children: [_jsxs("span", { children: [label, "\u2026"] }), _jsx("div", { role: "progressbar", "aria-label": label, "aria-busy": "true", className: "relative h-1 w-full overflow-hidden rounded bg-line", children: _jsx("div", { className: "absolute inset-y-0 left-0 w-1/3 animate-pulse rounded bg-copper" }) })] }));
+}

package/dist/app/PrintPreviewWindow.d.ts

@@ -0,0 +1,2 @@
+export declare function isPrintPreviewWindow(): boolean;
+export declare function mountPrintPreviewWindow(root: HTMLElement): void;

package/dist/app/PrintPreviewWindow.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { printCurrentWebview } from "@rightkit/document-core/state/tauriBridge";
+import { takePrintPreviewPayload } from "@rightkit/document-core/app/nativePrintPreview";
+export function isPrintPreviewWindow() {
+    return new URLSearchParams(window.location.search).has("viewright-print-preview");
+}
+function PrintPreviewWindow() {
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        let disposed = false;
+        const currentWindow = getCurrentWindow();
+        const close = () => void currentWindow.close();
+        window.addEventListener("afterprint", close, { once: true });
+        void (async () => {
+            try {
+                const payload = await takePrintPreviewPayload();
+                if (disposed)
+                    return;
+                const host = document.createElement("div");
+                host.dataset.vrPrintHost = "";
+                host.innerHTML = payload.html;
+                if (payload.shadowHtml !== null) {
+                    host.attachShadow({ mode: "open" }).innerHTML = payload.shadowHtml;
+                }
+                document.body.appendChild(host);
+                document.body.setAttribute("data-vr-print-active", "");
+                await currentWindow.show();
+                await currentWindow.setFocus();
+                await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+                await printCurrentWebview();
+            }
+            catch (cause) {
+                if (!disposed)
+                    setError(cause instanceof Error ? cause.message : String(cause));
+                await currentWindow.show();
+            }
+        })();
+        return () => {
+            disposed = true;
+            window.removeEventListener("afterprint", close);
+        };
+    }, []);
+    return (_jsx("main", { style: {
+            minHeight: "100vh",
+            display: "grid",
+            placeItems: "center",
+            background: "#11110f",
+            color: "#f2efe8",
+            font: "600 15px/1.5 sans-serif",
+        }, children: error ? `Print preview failed: ${error}` : "Preparing print preview..." }));
+}
+export function mountPrintPreviewWindow(root) {
+    createRoot(root).render(_jsx(React.StrictMode, { children: _jsx(PrintPreviewWindow, {}) }));
+}

package/dist/app/ShortcutHelp.d.ts

@@ -0,0 +1,3 @@
+export declare function ShortcutHelp({ onClose }: {
+    onClose: () => void;
+}): import("react").JSX.Element;

package/dist/app/ShortcutHelp.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { createShortcutRegistry } from "@rightkit/react-shell";
+import { ShortcutHelp as ShellShortcutHelp } from "@rightkit/react-shell/react";
+// Single source of truth for the discoverable shortcuts. Mirrors useGlobalShortcuts + the source
+// editor keymap so the overlay can't silently drift from the real bindings.
+//
+// Combos are authored in Windows vocabulary and rendered per-OS (workspace rule: one chord, per-OS
+// presentation). The handler itself accepts Ctrl OR Cmd everywhere, so this is purely what we SHOW
+// — but showing "Ctrl" to a Mac user is still wrong, because nobody reaches for it there.
+// Combos are authored as space-separated Windows vocabulary; convert to a canonical chord and let
+// RightKit render it for the current platform.
+function comboChord(combo) {
+    return combo
+        .split(" ")
+        .map((key) => (key === "Ctrl" ? "mod" : key.toLowerCase()))
+        .join("+");
+}
+const GROUPS = [
+    {
+        title: "Files & tabs",
+        items: [
+            ["Ctrl N", "New text document"],
+            ["Ctrl T", "New tab"],
+            ["Ctrl O", "Open file…"],
+            ["Ctrl W", "Close tab"],
+            ["Ctrl Shift T", "Reopen closed tab"],
+            ["Ctrl Tab", "Next tab"],
+            ["Ctrl Shift Tab", "Previous tab"],
+            ["Ctrl 1–9", "Jump to tab (9 = last)"],
+            ["Ctrl Shift A", "Show all tabs"],
+            ["Ctrl E", "Toggle sidebar"],
+            ["Ctrl \\", "Toggle sidebar"],
+        ],
+    },
+    {
+        title: "Edit & save",
+        items: [
+            ["Ctrl S", "Save"],
+            ["Ctrl Shift S", "Save as…"],
+            ["Ctrl P", "Print"],
+            ["Ctrl F", "Find"],
+            ["F3", "Find next"],
+            ["Shift F3", "Find previous"],
+            ["Ctrl H", "Replace"],
+            ["Alt Z", "Toggle word wrap"],
+        ],
+    },
+    {
+        title: "View",
+        items: [
+            ["Ctrl 0", "Reset font size"],
+            ["Ctrl Scroll", "Zoom document"],
+            ["Ctrl Shift E", "Toggle Read / Edit (Markup)"],
+            ["Ctrl Shift F", "Distraction-free reading"],
+            ["Ctrl Shift P", "Command palette"],
+            ["?", "This help"],
+            ["Esc", "Close find / dialog / help"],
+        ],
+    },
+    {
+        title: "Inspect",
+        items: [
+            // Authored as Ctrl+Alt+I so it renders as ⌘ ⌥ I on macOS — the chord every Mac browser uses.
+            // The handler also accepts Ctrl+Shift+I (the Windows/Linux convention). Preview frames own
+            // both inspect paths; the host app surrounding shell always consumes them without opening.
+            ["Ctrl Alt I", "Open HTML devtools"],
+            ["F12", "Open HTML devtools"],
+        ],
+    },
+];
+/** A display-only registry: the real bindings live in useGlobalShortcuts, so `run` does nothing. */
+function helpRegistry() {
+    const registry = createShortcutRegistry();
+    for (const group of GROUPS) {
+        for (const [combo, label] of group.items) {
+            registry.register({ id: `help:${combo}`, label, group: group.title, chord: comboChord(combo), run: () => { } });
+        }
+    }
+    return registry;
+}
+const SLOTS = {
+    root: "vr-pop relative max-h-full w-full max-w-2xl overflow-auto rounded-xl border border-line bg-panel p-5 shadow-2xl",
+    title: "font-serif text-lg font-semibold text-paper",
+    grid: "grid grid-cols-1 gap-x-8 gap-y-5 sm:grid-cols-2",
+    section: "[&_h3]:mb-2 [&_h3]:font-sans [&_h3]:text-chrome-xs [&_h3]:uppercase [&_h3]:tracking-[0.2em] [&_h3]:text-muted-2 [&_ul]:space-y-1.5",
+    item: "gap-3 text-sm text-paper/85 [&>span:first-child]:min-w-0 [&>span:first-child]:truncate",
+    keys: "shrink-0 gap-1 [&_.rightkit-kbd-chord]:gap-1 [&_kbd]:rounded [&_kbd]:border [&_kbd]:border-line [&_kbd]:bg-ink/60 [&_kbd]:px-1.5 [&_kbd]:py-0.5 [&_kbd]:font-mono [&_kbd]:text-chrome-xs [&_kbd]:leading-none [&_kbd]:text-paper",
+};
+export function ShortcutHelp({ onClose }) {
+    const registry = useMemo(helpRegistry, []);
+    const host = useRef(null);
+    // Journeys address this dialog as [role="dialog"][aria-label="Keyboard shortcuts"]; the shell
+    // names it with aria-labelledby only, so mirror the same text as aria-label.
+    useEffect(() => {
+        host.current?.querySelector('[role="dialog"]')?.setAttribute("aria-label", "Keyboard shortcuts");
+    }, []);
+    return (_jsx("div", { ref: host, className: "contents", children: _jsx(ShellShortcutHelp, { registry: registry, onClose: onClose, title: "Keyboard shortcuts", slots: SLOTS }) }));
+}