@rightkit/document-workspace 0.0.0-stage → 0.1.1

package/dist/app/tabs/TabStrip.js

@@ -0,0 +1,380 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Horizontal open-document tab strip for the fused titlebar (Part A of the
+// tabs+explorer redesign — see docs/design/viewright-tabs-explorer-brief.md and the
+// visual spec docs/design/viewright-tabs-explorer.html). `docs` (App's openDocs order)
+// IS the tab order — the strip is a view of that state, never a second source of truth.
+// The active tab fuses into the page with the concave bottom-corner curves from
+// TabFuseCurves; inactive tabs sit on the chrome band with quiet hairline separators.
+// Styles: src/styles/tabs.css (imported below so the strip carries its own CSS).
+import { tabDomId } from "./tabIds.js";
+import { memo, useCallback, useEffect, useRef, useState, } from "react";
+import { CaretLeft } from "@phosphor-icons/react/dist/icons/CaretLeft";
+import { CaretRight } from "@phosphor-icons/react/dist/icons/CaretRight";
+import { Cards } from "@phosphor-icons/react/dist/icons/Cards";
+import { X } from "@phosphor-icons/react/dist/icons/X";
+import { isUntitled } from "@rightkit/document-core/documents/types";
+import { FileTypeIcon } from "../../documents/FileTypeIcon.js";
+import { shortcutLabel, isMac } from "@rightkit/document-core/platform";
+import { LiveTitle } from "../LiveTitle.js";
+import { useTabDirty } from "./useTabDirty.js";
+import { DocumentMenu } from "../sidebar/SidebarDocumentMenu.js";
+import { TabFuseCurves } from "./TabFuseCurves.js";
+import { TabOverview } from "./TabOverview.js";
+/** Pointer distance (px) before a tab press becomes a drag-reorder. */
+const DRAG_THRESHOLD = 4;
+// Memoized for the same reason Sidebar/Toolbar are: App re-renders far more often than
+// the strip's inputs change (every keystroke). All props arrive pre-stabilized via the
+// integrator's useMemo.
+export const TabStrip = memo(TabStripImpl);
+function TabStripImpl({ docs, activePath, sidebarCollapsed, onActivate, onRequestClose, onCloseAll, onCloseOthers, onCloseRight, onReorderTabs, onTogglePin, pinnedPaths, openLocalPaths, titleFor, isDirty, dirtyPaths, subscribeDirty, subscribeEdits, getEditSnapshot, computeTitle, overviewOpen, onOverviewOpenChange, onClosePaths, }) {
+    const listRef = useRef(null);
+    const overviewBtnRef = useRef(null);
+    const pointerDrag = useRef(null);
+    const suppressClickPath = useRef(null);
+    // Path of the tab that last held DOM focus — lets a removed focused tab hand focus
+    // to its replacement instead of stranding focus on <body>.
+    const lastFocusedTab = useRef(null);
+    const [focusPath, setFocusPath] = useState(null);
+    const [draggingPath, setDraggingPath] = useState(null);
+    const [dropTarget, setDropTarget] = useState(null);
+    const [docMenu, setDocMenu] = useState(null);
+    const mac = isMac();
+    const tabElFor = useCallback((path) => {
+        const list = listRef.current;
+        if (!list)
+            return null;
+        // dataset compare — paths can hold quotes/backslashes that defeat attribute selectors.
+        for (const el of list.querySelectorAll("[data-vr-tab]")) {
+            if (el.dataset.vrTabPath === path)
+                return el;
+        }
+        return null;
+    }, []);
+    // Roving tabindex: the tabbable tab is the last-focused one while it's still open,
+    // else the active tab, else the first — so the strip is always one Tab stop.
+    const rovingPath = focusPath && docs.some((d) => d.path === focusPath)
+        ? focusPath
+        : activePath && docs.some((d) => d.path === activePath)
+            ? activePath
+            : docs[0]?.path;
+    // The selected tab owns the roving slot whenever activation happened off-strip
+    // (Ctrl+Tab, palette, jumpToTab) — Tab into the strip lands on the selected tab.
+    useEffect(() => {
+        const focusInStrip = !!listRef.current?.contains(document.activeElement);
+        setFocusPath((current) => focusInStrip && current && docs.some((d) => d.path === current) ? current : activePath);
+    }, [activePath, docs]);
+    // Focused tab closed → move focus to the replacement (the new active tab, else the
+    // first) — but only when focus was stranded on <body>, never stealing it back.
+    useEffect(() => {
+        const focused = lastFocusedTab.current;
+        if (!focused)
+            return;
+        if (docs.some((d) => d.path === focused))
+            return;
+        lastFocusedTab.current = null;
+        if (document.activeElement && document.activeElement !== document.body)
+            return;
+        const replacement = activePath && docs.some((d) => d.path === activePath) ? activePath : docs[0]?.path;
+        if (replacement)
+            tabElFor(replacement)?.focus();
+    }, [docs, activePath, tabElFor]);
+    // Keep the selected tab in view (activations via Ctrl+Tab / menu / palette too).
+    // biome-ignore lint/correctness/useExhaustiveDependencies: docs is the trigger so a reordered active tab re-scrolls into view
+    useEffect(() => {
+        if (!activePath)
+            return;
+        const scroller = listRef.current;
+        const reveal = () => revealTab(scroller, tabElFor(activePath));
+        reveal();
+        // Width changes (window resize, sidebar toggle, launch-time font/layout settle) can push
+        // the active tab under the "+" without an activation — re-reveal on every resize.
+        if (!scroller || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(reveal);
+        observer.observe(scroller);
+        return () => observer.disconnect();
+    }, [activePath, docs, tabElFor]);
+    // ── Pointer drag-reorder (pointer events, NOT HTML5 DnD) ──────────────────
+    // Same state machine as the sidebar's vertical list, hit-testing horizontally:
+    // the insertion point is the first sibling tab whose left half contains clientX —
+    // "before" it — else "after" the last tab.
+    const dropTargetAt = useCallback((clientX, fromPath) => {
+        const list = listRef.current;
+        if (!list)
+            return null;
+        const els = [...list.querySelectorAll("[data-vr-tab]")]
+            .map((el) => ({ path: el.dataset.vrTabPath, box: el.getBoundingClientRect() }))
+            .filter((x) => Boolean(x.path) && x.path !== fromPath);
+        for (const { path, box } of els) {
+            if (clientX < box.left + box.width / 2) {
+                return { toPath: path, position: "before" };
+            }
+        }
+        const last = els[els.length - 1];
+        return last ? { toPath: last.path, position: "after" } : null;
+    }, []);
+    const beginPointerTabDrag = useCallback((path, event) => {
+        if (event.button !== 0)
+            return;
+        if (event.target?.closest?.("[data-vr-tab-action]"))
+            return;
+        const element = event.currentTarget;
+        try {
+            element.setPointerCapture?.(event.pointerId);
+        }
+        catch {
+            /* jsdom / synthetic pointers may lack capture */
+        }
+        pointerDrag.current = {
+            element,
+            path,
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            startY: event.clientY,
+            moved: false,
+        };
+    }, []);
+    const consumeSuppressedClick = useCallback((path, event) => {
+        if (suppressClickPath.current !== path)
+            return false;
+        event.preventDefault();
+        event.stopPropagation();
+        suppressClickPath.current = null;
+        return true;
+    }, []);
+    useEffect(() => {
+        const onMove = (event) => {
+            const drag = pointerDrag.current;
+            if (!drag || event.pointerId !== drag.pointerId)
+                return;
+            if (!drag.moved &&
+                Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) <= DRAG_THRESHOLD) {
+                return;
+            }
+            if (!drag.moved) {
+                drag.moved = true;
+                setDraggingPath(drag.path);
+                document.body.style.userSelect = "none";
+            }
+            const target = dropTargetAt(event.clientX, drag.path);
+            setDropTarget((current) => current?.toPath === target?.toPath && current?.position === target?.position
+                ? current
+                : target);
+            event.preventDefault();
+        };
+        const onUp = (event) => {
+            const drag = pointerDrag.current;
+            pointerDrag.current = null;
+            if (!drag)
+                return;
+            try {
+                drag.element.releasePointerCapture?.(drag.pointerId);
+            }
+            catch {
+                /* jsdom */
+            }
+            document.body.style.userSelect = "";
+            setDropTarget(null);
+            setDraggingPath(null);
+            if (!drag.moved)
+                return;
+            event.preventDefault();
+            // Only swallow the click when the drag lands on a REAL reorder target — a jitter
+            // past the threshold with no target should still let the tab ACTIVATE (mirrors
+            // Sidebar's fix for the "tab activation is laggy" report). The horizontal model
+            // always resolves SOME before/after target, so a drop that leaves the tab where it
+            // already sits (before its current right neighbor / after its current left one)
+            // counts as a no-op too — no reorder call, no click suppression.
+            const target = dropTargetAt(event.clientX, drag.path);
+            if (target) {
+                const fromIndex = docs.findIndex((d) => d.path === drag.path);
+                const toIndex = docs.findIndex((d) => d.path === target.toPath);
+                const isNoOp = (target.position === "before" && toIndex === fromIndex + 1) ||
+                    (target.position === "after" && toIndex === fromIndex - 1);
+                if (!isNoOp) {
+                    suppressClickPath.current = drag.path;
+                    window.setTimeout(() => {
+                        if (suppressClickPath.current === drag.path)
+                            suppressClickPath.current = null;
+                    }, 0);
+                    onReorderTabs(drag.path, target.toPath, target.position);
+                }
+            }
+        };
+        const onCancel = (event) => {
+            const drag = pointerDrag.current;
+            if (!drag || event.pointerId !== drag.pointerId)
+                return;
+            pointerDrag.current = null;
+            try {
+                drag.element.releasePointerCapture?.(drag.pointerId);
+            }
+            catch {
+                /* jsdom */
+            }
+            document.body.style.userSelect = "";
+            setDropTarget(null);
+            setDraggingPath(null);
+        };
+        window.addEventListener("pointermove", onMove);
+        window.addEventListener("pointerup", onUp);
+        window.addEventListener("pointercancel", onCancel);
+        return () => {
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerup", onUp);
+            window.removeEventListener("pointercancel", onCancel);
+            document.body.style.userSelect = "";
+        };
+    }, [docs, dropTargetAt, onReorderTabs]);
+    // Vertical wheel/trackpad delta scrolls the strip horizontally (trackpads also send
+    // deltaX — both fold into scrollLeft). No preventDefault: React's wheel listener is
+    // passive and the header never scrolls vertically anyway.
+    const onWheel = useCallback((event) => {
+        const el = listRef.current;
+        if (!el)
+            return;
+        const unit = event.deltaMode === 1 ? 16 : 1; // DOM_DELTA_LINE → ~16px per line
+        const delta = (event.deltaY + event.deltaX) * unit;
+        if (delta)
+            el.scrollLeft += delta;
+    }, []);
+    const onScroll = useCallback(() => syncScrolledEdge(listRef.current), []);
+    // ── Keyboard: roving tabindex + automatic activation (ARIA tabs pattern) ──
+    const onListKeyDown = useCallback((event) => {
+        const tabEl = event.target?.closest?.("[data-vr-tab]");
+        if (!tabEl)
+            return;
+        const path = tabEl.dataset.vrTabPath;
+        if (!path)
+            return;
+        const index = docs.findIndex((d) => d.path === path);
+        if (index < 0)
+            return;
+        let nextIndex = null;
+        switch (event.key) {
+            case "ArrowRight":
+                nextIndex = (index + 1) % docs.length;
+                break;
+            case "ArrowLeft":
+                nextIndex = (index - 1 + docs.length) % docs.length;
+                break;
+            case "Home":
+                nextIndex = 0;
+                break;
+            case "End":
+                nextIndex = docs.length - 1;
+                break;
+            case "Delete":
+            case "Backspace":
+                event.preventDefault();
+                onRequestClose(path);
+                return;
+            case "Enter":
+            case " ":
+                // A real <button> inside the tab (the ×) handles its own Enter/Space — don't
+                // double-fire activate + close for the same keypress.
+                if (event.target.tagName === "BUTTON")
+                    return;
+                event.preventDefault();
+                onActivate(path);
+                return;
+            default:
+                return;
+        }
+        event.preventDefault();
+        const next = docs[nextIndex];
+        if (!next)
+            return;
+        // Automatic activation: focus moves and the tab is selected in the same step.
+        tabElFor(next.path)?.focus();
+        onActivate(next.path);
+    }, [docs, onActivate, onRequestClose, tabElFor]);
+    const onTabFocused = useCallback((path) => {
+        lastFocusedTab.current = path;
+        setFocusPath(path);
+    }, []);
+    const onTabBlurred = useCallback((relatedTarget) => {
+        const node = relatedTarget;
+        if (!node)
+            return; // focus went nowhere/nowhere visible — the docs-change effect decides
+        if (listRef.current?.contains(node))
+            return; // moved to a sibling tab / the × inside it
+        lastFocusedTab.current = null;
+    }, []);
+    const openDocMenu = useCallback((doc, event) => {
+        event.preventDefault();
+        onOverviewOpenChange(false);
+        setDocMenu({ doc, x: event.clientX, y: event.clientY });
+    }, [onOverviewOpenChange]);
+    // Bound to the menu's doc so the same menu instance works for any tab.
+    const closeMenuOthers = useCallback(() => {
+        if (docMenu)
+            onCloseOthers(docMenu.doc.path);
+    }, [docMenu, onCloseOthers]);
+    const closeMenuRight = useCallback(() => {
+        if (docMenu)
+            onCloseRight(docMenu.doc.path);
+    }, [docMenu, onCloseRight]);
+    return (_jsxs("div", { className: "vr-tabstrip", "data-tauri-drag-region": true, children: [sidebarCollapsed && mac && (_jsx("div", { className: "vr-tabstrip-lead-lights", "data-tauri-drag-region": true })), _jsx("div", { className: "vr-tabstrip-ov", "data-tauri-drag-region": true, children: _jsxs("button", { ref: overviewBtnRef, type: "button", className: "vr-ov-btn vr-press vr-focus", onClick: () => onOverviewOpenChange(!overviewOpen), title: `Show all tabs (${shortcutLabel("mod+shift+a")})`, "aria-label": "Show all tabs", "aria-haspopup": "dialog", "aria-expanded": overviewOpen, children: [_jsx(Cards, { size: 15, weight: "regular" }), docs.length > 3 && _jsx("span", { className: "vr-ov-count", children: docs.length })] }) }), _jsx("button", { type: "button", className: "vr-tab-arrow vr-tab-arrow-start vr-press vr-focus", onClick: () => scrollStrip(listRef.current, -1), title: "Scroll tabs left", "aria-label": "Scroll tabs left", tabIndex: -1, children: _jsx(CaretLeft, { size: 13, weight: "bold" }) }), _jsx("div", { ref: listRef, className: "vr-tabs", "data-tauri-drag-region": true, onWheel: onWheel, onScroll: onScroll, onKeyDown: onListKeyDown, children: _jsx("div", { role: "tablist", "aria-label": "Open documents", "aria-orientation": "horizontal", className: "vr-tabs-list", children: docs.map((doc) => (_jsx(Tab, { doc: doc, title: titleFor(doc), titleNode: isUntitled(doc.path) ? (_jsx(LiveTitle, { doc: doc, compute: computeTitle, subscribeEdits: subscribeEdits, getEditSnapshot: getEditSnapshot })) : undefined, isDirty: isDirty, dirtyHint: dirtyPaths.has(doc.path), subscribeDirty: subscribeDirty, active: doc.path === activePath, tabbable: doc.path === rovingPath, dragging: draggingPath === doc.path, dropPosition: dropTarget?.toPath === doc.path ? dropTarget.position : undefined, onActivate: onActivate, onRequestClose: onRequestClose, onPointerDragStart: beginPointerTabDrag, onConsumeSuppressedClick: consumeSuppressedClick, onContextMenu: openDocMenu, onFocused: onTabFocused, onBlurred: onTabBlurred }, doc.tabKey ?? doc.path))) }) }), _jsx("button", { type: "button", className: "vr-tab-arrow vr-tab-arrow-end vr-press vr-focus", onClick: () => scrollStrip(listRef.current, 1), title: "Scroll tabs right", "aria-label": "Scroll tabs right", tabIndex: -1, children: _jsx(CaretRight, { size: 13, weight: "bold" }) }), _jsx("div", { className: "vr-tabstrip-fill", "data-tauri-drag-region": true }), overviewOpen && (_jsx(TabOverview, { docs: docs, activePath: activePath, titleFor: titleFor, isDirty: isDirty, dirtyPaths: dirtyPaths, subscribeDirty: subscribeDirty, subscribeEdits: subscribeEdits, getEditSnapshot: getEditSnapshot, computeTitle: computeTitle, onActivate: onActivate, onClosePaths: onClosePaths, onClose: () => onOverviewOpenChange(false), returnFocusRef: overviewBtnRef })), docMenu && (_jsx(DocumentMenu, { menu: docMenu, openLocalPaths: openLocalPaths, pinned: pinnedPaths.has(docMenu.doc.path), onClose: () => setDocMenu(null), onActivate: onActivate, onCloseDoc: onRequestClose, onCloseAll: onCloseAll, onTogglePin: onTogglePin, titleFor: titleFor, onCloseOthers: closeMenuOthers, onCloseRight: closeMenuRight }))] }));
+}
+const Tab = memo(TabImpl);
+// One tab: format icon tile + name (masked fade, no ellipsis) + dirty dot + close ×.
+// Document-keyed id (tabDomId) pairs with the document pane's aria-labelledby, so the pane's
+// label names the selected tab even when tabs reorder.
+function TabImpl({ doc, title, titleNode, isDirty, dirtyHint, subscribeDirty, active, tabbable, dragging, dropPosition, onActivate, onRequestClose, onPointerDragStart, onConsumeSuppressedClick, onContextMenu, onFocused, onBlurred, }) {
+    const dirty = useTabDirty(doc, dirtyHint, isDirty, subscribeDirty);
+    const accessibleTitle = `${title}${dirty ? " — Unsaved edits" : ""}`;
+    const tooltip = doc.format === "web" ? (doc.web?.url ?? doc.path) : doc.path;
+    return (_jsxs("div", { role: "tab", id: tabDomId(doc), "aria-selected": active, "aria-controls": "vr-doc-pane", "aria-label": accessibleTitle, tabIndex: tabbable ? 0 : -1, title: tooltip, "data-vr-tab": true, "data-vr-tab-path": doc.path, "data-vr-tab-active": active || undefined, className: `vr-tab${active ? " vr-tab-active" : ""}${dirty ? " vr-tab-dirty" : ""}${dragging ? " vr-tab-dragging" : ""}`, onPointerDown: (event) => onPointerDragStart(doc.path, event), onClick: (event) => {
+            if (event.target?.closest?.("[data-vr-tab-action]")) {
+                return;
+            }
+            if (onConsumeSuppressedClick(doc.path, event))
+                return;
+            onActivate(doc.path);
+        }, onAuxClick: (event) => {
+            // Middle-click closes — anywhere on the tab, including over the ×.
+            if (event.button !== 1)
+                return;
+            event.preventDefault();
+            onRequestClose(doc.path);
+        }, onContextMenu: (event) => onContextMenu(doc, event), onFocus: () => onFocused(doc.path), onBlur: (event) => onBlurred(event.relatedTarget), children: [active && _jsx(TabFuseCurves, { size: 12 }), _jsx("span", { className: "vr-tab-ficon", "aria-hidden": "true", children: _jsx(FileTypeIcon, { format: doc.format, path: doc.path, size: 16 }) }), _jsx("span", { className: "vr-tab-name", children: titleNode ?? title }), _jsx("span", { className: "vr-tab-dot", "data-vr-tab-dirty-indicator": dirty || undefined }), _jsx("button", { type: "button", "data-vr-tab-action": true, className: "vr-tab-x vr-press vr-focus", "aria-label": `Close ${title}`, title: "Close", onClick: (event) => {
+                    event.stopPropagation();
+                    onRequestClose(doc.path);
+                }, children: _jsx(X, { size: 12, weight: "bold" }) }), dropPosition && (_jsx("span", { className: "vr-tab-dropbar", "data-pos": dropPosition, "aria-hidden": "true" }))] }));
+}
+/** Marks which ends of the scroller have tabs hidden past them, so CSS fades those edges
+ *  instead of slicing a tab. Set directly on the element: scrolling must not re-render. */
+function syncScrolledEdge(el) {
+    if (!el)
+        return;
+    if (el.scrollLeft > 2)
+        el.dataset.vrScrolled = "";
+    else
+        delete el.dataset.vrScrolled;
+    if (el.scrollLeft + el.clientWidth < el.scrollWidth - 2)
+        el.dataset.vrMoreEnd = "";
+    else
+        delete el.dataset.vrMoreEnd;
+}
+/** Scroll only the strip (never ancestors, unlike scrollIntoView) so `tab` sits clear of
+ *  both edge fades. */
+const REVEAL_PAD_START = 28;
+const REVEAL_PAD_END = 28;
+function revealTab(scroller, tab) {
+    if (!scroller || !tab)
+        return;
+    const s = scroller.getBoundingClientRect();
+    const t = tab.getBoundingClientRect();
+    if (t.left < s.left + REVEAL_PAD_START)
+        scroller.scrollLeft -= s.left + REVEAL_PAD_START - t.left;
+    else if (t.right > s.right - REVEAL_PAD_END)
+        scroller.scrollLeft += t.right - (s.right - REVEAL_PAD_END);
+    syncScrolledEdge(scroller);
+}
+/** Page the strip by most of its visible width (the ‹ › buttons shown while tabs overflow). */
+function scrollStrip(el, direction) {
+    if (!el)
+        return;
+    el.scrollBy({ left: direction * Math.max(120, el.clientWidth * 0.7), behavior: "smooth" });
+}

package/dist/app/tabs/tabIds.d.ts

@@ -0,0 +1,5 @@
+import type { LoadedDocument } from "@rightkit/document-core/documents/types";
+/** DOM id for a document's tab, keyed by the document's stable identity (tabKey, else path) so it
+ *  never shifts when tabs reorder. Characters outside [A-Za-z0-9_-] are encoded: ids are used in
+ *  space-separated aria idref lists. */
+export declare function tabDomId(doc: Pick<LoadedDocument, "tabKey" | "path">): string;

package/dist/app/tabs/tabIds.js

@@ -0,0 +1,7 @@
+/** DOM id for a document's tab, keyed by the document's stable identity (tabKey, else path) so it
+ *  never shifts when tabs reorder. Characters outside [A-Za-z0-9_-] are encoded: ids are used in
+ *  space-separated aria idref lists. */
+export function tabDomId(doc) {
+    const raw = doc.tabKey ?? doc.path;
+    return `vr-tab-${raw.replace(/[^A-Za-z0-9_-]/g, (c) => `_${c.charCodeAt(0).toString(16)}_`)}`;
+}

package/dist/app/tabs/useTabDirty.d.ts

@@ -0,0 +1,3 @@
+import type { LoadedDocument } from "@rightkit/document-core/documents/types";
+/** Live dirty state for a tab: the caller's hint OR the subscribed per-document dirty signal. */
+export declare function useTabDirty(doc: LoadedDocument, dirtyHint: boolean, isDirty: (doc: LoadedDocument) => boolean, subscribeDirty: (path: string, cb: () => void) => () => void): boolean;

package/dist/app/tabs/useTabDirty.js

@@ -0,0 +1,11 @@
+import { useEffect, useState } from "react";
+/** Live dirty state for a tab: the caller's hint OR the subscribed per-document dirty signal. */
+export function useTabDirty(doc, dirtyHint, isDirty, subscribeDirty) {
+    const [observedDirty, setObservedDirty] = useState(() => isDirty(doc));
+    useEffect(() => {
+        const sync = () => setObservedDirty(isDirty(doc));
+        sync();
+        return subscribeDirty(doc.path, sync);
+    }, [doc, isDirty, subscribeDirty]);
+    return dirtyHint || observedDirty;
+}

package/dist/app/useAppChromeState.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Overlay, panel, and dialog flags plus the Info-inspector callbacks. Extracted verbatim from useAppState;
+ * runs right after the document core, matching the original call order.
+ */
+export declare function useAppChromeState(): {
+    settingsOpen: boolean;
+    setSettingsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    paletteOpen: boolean;
+    setPaletteOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    helpOpen: boolean;
+    setHelpOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    openUrlDialog: boolean;
+    setOpenUrlDialog: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    tabOverviewOpen: boolean;
+    setTabOverviewOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    sidebarCollapsed: boolean;
+    setSidebarCollapsed: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    inspectorOpen: boolean;
+    toggleInspector: () => void;
+    closeInspector: () => void;
+};

package/dist/app/useAppChromeState.js

@@ -0,0 +1,48 @@
+import { useCallback, useState } from "react";
+import { useMediaQuery } from "@rightkit/react-shell/react";
+function initialSidebarCollapsed(compact) {
+    if (typeof window === "undefined")
+        return false;
+    const pinned = localStorage.getItem("vr.sidebar.pinned");
+    return pinned === "0" || compact;
+}
+/**
+ * Overlay, panel, and dialog flags plus the Info-inspector callbacks. Extracted verbatim from useAppState;
+ * runs right after the document core, matching the original call order.
+ */
+export function useAppChromeState() {
+    const compactViewport = useMediaQuery("(max-width: 640px)");
+    const [settingsOpen, setSettingsOpen] = useState(false);
+    const [paletteOpen, setPaletteOpen] = useState(false);
+    const [helpOpen, setHelpOpen] = useState(false);
+    const [openUrlDialog, setOpenUrlDialog] = useState(false);
+    // Titlebar tab-overview card grid (⌘⇧A / the strip's cards button).
+    const [tabOverviewOpen, setTabOverviewOpen] = useState(false);
+    const [sidebarCollapsed, setSidebarCollapsed] = useState(() => initialSidebarCollapsed(compactViewport));
+    // Wave 3 Info inspector — one global open flag (per-document persistence is not required). The
+    // toggle lives in the right toolbar capsule (DocumentTools); Escape inside the panel routes here,
+    // and closeInspector returns focus to that toggle button.
+    const [inspectorOpen, setInspectorOpen] = useState(false);
+    const closeInspector = useCallback(() => {
+        setInspectorOpen(false);
+        document.getElementById("vr-inspector-toggle")?.focus();
+    }, []);
+    const toggleInspector = useCallback(() => setInspectorOpen((o) => !o), []);
+    return {
+        settingsOpen,
+        setSettingsOpen,
+        paletteOpen,
+        setPaletteOpen,
+        helpOpen,
+        setHelpOpen,
+        openUrlDialog,
+        setOpenUrlDialog,
+        tabOverviewOpen,
+        setTabOverviewOpen,
+        sidebarCollapsed,
+        setSidebarCollapsed,
+        inspectorOpen,
+        toggleInspector,
+        closeInspector,
+    };
+}

package/dist/app/useAppCommands.d.ts

@@ -0,0 +1,66 @@
+import type { Dispatch, SetStateAction } from "react";
+import type { LoadedDocument } from "@rightkit/document-core/documents/types";
+import type { createBlockDraftRegistry } from "@rightkit/document-core/app/blockDrafts";
+import type { useDocuments } from "./useDocuments.js";
+import type { useFormatApis } from "./useFormatApis.js";
+import type { useLibrary } from "./useLibrary.js";
+import type { useOpenFromClipboard } from "./useOpenFromClipboard.js";
+import type { useSettings } from "@rightkit/document-core/settings/settings";
+import type { useViewState } from "./useViewState.js";
+import type { useAppTabChrome } from "./useAppTabChrome.js";
+import type { useAppPaneSearch } from "./useAppPaneSearch.js";
+type Docs = ReturnType<typeof useDocuments>;
+type Formats = ReturnType<typeof useFormatApis>;
+type Setting = ReturnType<typeof useSettings>;
+type Tab = ReturnType<typeof useAppTabChrome>;
+type Pane = ReturnType<typeof useAppPaneSearch>;
+type Setter = Dispatch<SetStateAction<boolean>>;
+export interface AppCommandsInput {
+    docs: Docs;
+    openDocs: LoadedDocument[];
+    recents: ReturnType<typeof useLibrary>["recents"];
+    active: LoadedDocument | null;
+    activeEditable: boolean;
+    activeTextLike: boolean;
+    activeText: string;
+    copyContents: (() => void) | null;
+    settings: Setting["settings"];
+    update: Setting["update"];
+    onChangeView: ReturnType<typeof useViewState>["requestViewChange"];
+    docxMenu: Formats["docxMenu"];
+    markdownExport: Formats["markdownExport"];
+    handlePrint: Formats["handlePrint"];
+    openFromClipboard: ReturnType<typeof useOpenFromClipboard>;
+    cycleTab: Tab["cycleTab"];
+    jumpToTab: Tab["jumpToTab"];
+    blockDrafts: ReturnType<typeof createBlockDraftRegistry>;
+    searchProvider: Pane["searchProvider"];
+    canOpenFind: Pane["canOpenFind"];
+    findOpen: Pane["findOpen"];
+    openFind: Pane["openFind"];
+    settingsOpen: boolean;
+    setSettingsOpen: Setter;
+    paletteOpen: boolean;
+    setPaletteOpen: Setter;
+    helpOpen: boolean;
+    setHelpOpen: Setter;
+    openUrlDialog: boolean;
+    setOpenUrlDialog: Setter;
+    setTabOverviewOpen: Setter;
+}
+/**
+ * Command palette, distraction-free mode, and global keyboard shortcuts. Extracted verbatim from
+ * useAppState; the three hooks run in the original order (palette → distraction-free → shortcuts).
+ */
+export declare function useAppCommands({ docs, openDocs, recents, active, activeEditable, activeTextLike, activeText, copyContents, settings, update, onChangeView, docxMenu, markdownExport, handlePrint, openFromClipboard, cycleTab, jumpToTab, blockDrafts, searchProvider, canOpenFind, findOpen, openFind, settingsOpen, setSettingsOpen, paletteOpen, setPaletteOpen, helpOpen, setHelpOpen, openUrlDialog, setOpenUrlDialog, setTabOverviewOpen, }: AppCommandsInput): {
+    paletteItems: import("./CommandPalette.js").PaletteItem[];
+    distractionFree: boolean;
+    toggleDistractionFree: () => void;
+    fullscreenConfirm: {
+        onDone: () => Promise<void>;
+        onDiscard: () => Promise<void>;
+        onStay: () => void;
+        error: string | null;
+    } | null;
+};
+export {};

package/dist/app/useAppCommands.js

@@ -0,0 +1,71 @@
+import { useCommandPalette } from "./useCommandPalette.js";
+import { useDistractionFree } from "./useDistractionFree.js";
+import { useGlobalShortcuts } from "./useGlobalShortcuts.js";
+import { buildCopyAsMarkdown, buildCopyRendered, buildExportMarkdown } from "./markdownPaletteActions.js";
+/**
+ * Command palette, distraction-free mode, and global keyboard shortcuts. Extracted verbatim from
+ * useAppState; the three hooks run in the original order (palette → distraction-free → shortcuts).
+ */
+export function useAppCommands({ docs, openDocs, recents, active, activeEditable, activeTextLike, activeText, copyContents, settings, update, onChangeView, docxMenu, markdownExport, handlePrint, openFromClipboard, cycleTab, jumpToTab, blockDrafts, searchProvider, canOpenFind, findOpen, openFind, settingsOpen, setSettingsOpen, paletteOpen, setPaletteOpen, helpOpen, setHelpOpen, openUrlDialog, setOpenUrlDialog, setTabOverviewOpen, }) {
+    const paletteItems = useCommandPalette({
+        openDocs,
+        recents,
+        active,
+        activeEditable,
+        titleFor: docs.titleFor,
+        activate: docs.activate,
+        openRecent: docs.openRecent,
+        newDocument: docs.newDocument,
+        onOpenDialog: docs.onOpenDialog,
+        onOpenUrl: () => setOpenUrlDialog(true),
+        onSave: docs.onSave,
+        onSaveAs: docs.onSaveAs,
+        onPrint: handlePrint,
+        docxMenu,
+        onChangeView,
+        settings,
+        update,
+        openSettings: () => setSettingsOpen(true),
+        reopenClosed: docs.reopenLastClosed,
+        showHelp: () => setHelpOpen(true),
+        copyContents,
+        duplicate: activeTextLike && active ? () => docs.duplicateAsDraft(activeText) : null,
+        exportMarkdown: buildExportMarkdown(active, markdownExport, activeText),
+        copyRendered: buildCopyRendered(active, markdownExport, activeText),
+        copyAsMarkdown: buildCopyAsMarkdown(active),
+    });
+    const { distractionFree, toggleDistractionFree, fullscreenConfirm } = useDistractionFree({
+        active,
+        blockDrafts,
+        overlayOpen: settingsOpen || paletteOpen || helpOpen || openUrlDialog,
+    });
+    useGlobalShortcuts({
+        active,
+        activeEditable,
+        searchProvider,
+        canOpenFind,
+        docxMenu,
+        newDocument: docs.newDocument,
+        onOpenDialog: docs.onOpenDialog,
+        onPrint: handlePrint,
+        onSave: docs.onSave,
+        onSaveAs: docs.onSaveAs,
+        requestClose: docs.requestClose,
+        togglePalette: () => setPaletteOpen((o) => !o),
+        openFind,
+        onHtmlSaveShortcut: docs.onHtmlSaveShortcut,
+        reloadActiveFromDisk: (doc) => docs.reload(doc.path),
+        openFromClipboard,
+        cycleTab,
+        jumpToTab,
+        reopenClosed: docs.reopenLastClosed,
+        resetZoom: () => update({ fontSizePx: 16, sourceFontSizePx: 12 }),
+        toggleWordWrap: () => update({ wordWrap: !settings.wordWrap }),
+        toggleSidebar: () => window.dispatchEvent(new CustomEvent("viewright:toggle-sidebar")),
+        toggleTabOverview: () => setTabOverviewOpen((o) => !o),
+        showHelp: () => setHelpOpen(true),
+        findOpen,
+        toggleDistractionFree,
+    });
+    return { paletteItems, distractionFree, toggleDistractionFree, fullscreenConfirm };
+}