@rightkit/document-workspace 0.0.0-stage → 0.1.1

package/dist/app/shell/DocStatsPill.js

@@ -0,0 +1,32 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Document status row (App's bottom status bar): words/chars/reading time (click cycles),
+// save state and autosave, docked to the bottom edge of the page outside the scrolling content.
+// Subscribes to the doc's live edit buffer so keystrokes update the count without re-rendering
+// the App shell. Only text formats (md, mdx, txt, html, unknown) show counts.
+import { memo, useState } from "react";
+import { Check } from "@phosphor-icons/react/dist/icons/Check";
+import { shortcutLabel } from "@rightkit/document-core/platform";
+import { useTabDirty } from "../tabs/useTabDirty.js";
+import { useEditText } from "@rightkit/document-core/app/useEditText";
+const STATS_FORMATS = new Set(["md", "mdx", "txt", "html", "unknown"]);
+const NEXT_MODE = { words: "chars", chars: "read", read: "words" };
+export const DocStatsPill = memo(DocStatsPillImpl);
+function DocStatsPillImpl({ doc, subscribeEdits, getEditSnapshot, status, }) {
+    const liveText = useEditText(subscribeEdits, getEditSnapshot, doc.path) ?? doc.content;
+    const [mode, setMode] = useState("words");
+    const dirty = useTabDirty(doc, status?.dirtyHint ?? false, status?.isDirty ?? NEVER_DIRTY, status?.subscribeDirty ?? NO_SUBSCRIBE);
+    const showStats = STATS_FORMATS.has(doc.format);
+    if (!showStats && !status)
+        return null;
+    const trimmed = liveText.trim();
+    const words = trimmed ? trimmed.split(/\s+/).length : 0;
+    const mins = words ? Math.max(1, Math.round(words / 230)) : 0;
+    const label = mode === "words"
+        ? `${words.toLocaleString()} words`
+        : mode === "chars"
+            ? `${liveText.length.toLocaleString()} chars`
+            : `~${mins} min read`;
+    return (_jsxs("div", { className: "flex min-w-0 items-center gap-3 whitespace-nowrap font-sans", "data-vr-doc-status": true, children: [showStats && (_jsx("button", { type: "button", onClick: () => setMode((m) => NEXT_MODE[m]), title: "Document statistics \u2014 click to cycle words, characters, reading time", "aria-label": `${label}. Click to cycle document statistics.`, "data-vr-stats": true, className: "vr-focus h-6 rounded px-1 tabular-nums hover:text-paper", children: label })), status && (_jsxs(_Fragment, { children: [dirty ? (_jsxs("button", { type: "button", onClick: status.onSave, title: `Save (${shortcutLabel("mod+s")})`, "aria-label": "Unsaved changes. Save", className: "vr-focus flex h-6 items-center gap-1.5 rounded px-1.5 text-paper hover:bg-ink/30", children: [_jsx("span", { "aria-hidden": "true", className: "h-1.5 w-1.5 rounded-full bg-copper" }), "Save"] })) : (_jsxs("span", { className: "flex items-center gap-1.5 px-1 text-paper/70", children: [_jsx(Check, { size: 11, weight: "bold", "aria-hidden": true, className: "text-accent2" }), "Saved"] })), _jsxs("button", { type: "button", role: "switch", "aria-checked": status.autoSave, onClick: status.onToggleAutoSave, title: "Save automatically after you pause", className: "vr-focus flex h-6 items-center gap-1.5 rounded px-1 hover:text-paper", children: ["Autosave", _jsx("span", { "aria-hidden": "true", className: `relative h-3.5 w-6 rounded-full transition-colors ${status.autoSave ? "bg-copper" : "bg-line"}`, children: _jsx("span", { className: `absolute left-0 top-0.5 h-2.5 w-2.5 rounded-full shadow-sm transition-transform ${status.autoSave ? "translate-x-3 bg-panel" : "translate-x-0.5 bg-muted"}` }) })] })] }))] }));
+}
+const NEVER_DIRTY = () => false;
+const NO_SUBSCRIBE = () => () => { };

package/dist/app/shell/DocumentTools.d.ts

@@ -0,0 +1,9 @@
+import type { LoadedDocument, ViewMode } from "@rightkit/document-core/documents/types";
+export declare const DocumentTools: import("react").MemoExoticComponent<typeof DocumentToolsImpl>;
+declare function DocumentToolsImpl({ doc, view, inspectorOpen, onToggleInspector, }: {
+    doc: LoadedDocument;
+    view: ViewMode;
+    inspectorOpen: boolean;
+    onToggleInspector: () => void;
+}): import("react").JSX.Element;
+export {};

package/dist/app/shell/DocumentTools.js

@@ -0,0 +1,73 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Wave 3 right-hand toolbar capsule: the "Aa" text-size popover (text formats) and the Info
+// inspector toggle. Sits in the title bar's right pill area next to the per-format mode controls.
+// The Aa popover is document-only: it steps the same per-surface zoom setting the Ctrl/Cmd+wheel
+// handler in useDocumentZoom drives. App-wide look (theme, interface font) lives in the sidebar
+// footer's Appearance menu and Settings → Theme — not here.
+import { isMarkdownFormat } from "../../documents/capabilities.js";
+import { memo, useCallback, useLayoutEffect, useRef, useState } from "react";
+import { SidebarSimple } from "@phosphor-icons/react/dist/icons/SidebarSimple";
+import { TextAa } from "@phosphor-icons/react/dist/icons/TextAa";
+import { BUNDLED_FONTS } from "@rightkit/document-core/settings/fonts";
+import { useSettings } from "@rightkit/document-core/settings/settings";
+import { useDismiss, useModalDismiss } from "@rightkit/platform-ui/headless";
+// Formats whose reading/source text the shell's zoom settings actually size. HTML's interactive
+// preview owns its own iframe zoom (Ctrl+wheel in-page), so its popover stepper follows the source
+// drawer's zoom setting — see the comment in AppearancePopover.
+const AA_FORMATS = new Set(["md", "mdx", "txt", "html"]);
+export const DocumentTools = memo(DocumentToolsImpl);
+function DocumentToolsImpl({ doc, view, inspectorOpen, onToggleInspector, }) {
+    return (_jsxs("div", { className: "flex items-center gap-0.5", children: [AA_FORMATS.has(doc.format) ? _jsx(TextAppearanceButton, { doc: doc, view: view }) : null, _jsx("button", { id: "vr-inspector-toggle", type: "button", "aria-pressed": inspectorOpen, "aria-controls": "vr-info-inspector", "aria-label": inspectorOpen ? "Hide document info" : "Show document info", title: inspectorOpen ? "Hide info" : "Show info", onClick: onToggleInspector, className: `vr-press vr-focus flex h-7 w-7 items-center justify-center rounded-full ${inspectorOpen
+                    ? "bg-copper/[0.14] text-copper-hi"
+                    : "text-muted-2 hover:bg-ink/40 hover:text-paper"}`, children: _jsx(SidebarSimple, { size: 17, weight: "regular", "aria-hidden": true, className: "-scale-x-100" }) })] }));
+}
+const capsuleBtn = "vr-press vr-focus flex h-7 w-7 items-center justify-center rounded-full";
+function TextAppearanceButton({ doc, view }) {
+    const [open, setOpen] = useState(false);
+    const buttonRef = useRef(null);
+    // The popover takes focus on open (so Escape lands inside it); every close path returns focus
+    // to the trigger button.
+    const close = useCallback(() => {
+        setOpen(false);
+        buttonRef.current?.focus();
+    }, []);
+    return (_jsxs("span", { className: "relative", children: [_jsx("button", { ref: buttonRef, type: "button", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": open ? "vr-aa-popover" : undefined, "aria-label": "Text size", title: "Text size", onClick: () => (open ? close() : setOpen(true)), className: `${capsuleBtn} ${open ? "bg-copper/[0.14] text-copper-hi" : "text-muted-2 hover:bg-ink/40 hover:text-paper"}`, children: _jsx(TextAa, { size: 17, weight: "regular", "aria-hidden": true }) }), open ? _jsx(AppearancePopover, { doc: doc, view: view, onClose: close }) : null] }));
+}
+function AppearancePopover({ doc, view, onClose, }) {
+    const { settings, update } = useSettings();
+    const panelRef = useRef(null);
+    // Escape closes (window capture, stopPropagation only); a click on the scrim closes it.
+    const { closing, close } = useModalDismiss(onClose, { escape: true, preventDefault: false });
+    const scrimRef = useRef(null);
+    useDismiss(() => close(), {
+        escape: false,
+        outside: "click-target",
+        container: panelRef,
+        backdrop: scrimRef,
+        imeGuard: false,
+    });
+    // Focus the dialog on open so Escape is scoped to it and screen readers announce it.
+    useLayoutEffect(() => {
+        panelRef.current?.focus();
+    }, []);
+    // Same key/base/min/max the Ctrl/Cmd+wheel zoom in useDocumentZoom uses: reading surfaces take
+    // fontSizePx (base 16, 12–28), source surfaces take sourceFontSizePx (base 12, 10–24). HTML's
+    // preview zoom lives inside its opaque-origin iframe, so its shell-owned text size is the
+    // source drawer's.
+    const sourceSurface = doc.format === "html" || (isMarkdownFormat(doc.format) && view === "source");
+    const zoomKey = sourceSurface ? "sourceFontSizePx" : "fontSizePx";
+    const base = sourceSurface ? 12 : 16;
+    const min = sourceSurface ? 10 : 12;
+    const max = sourceSurface ? 24 : 28;
+    const current = settings[zoomKey];
+    const percent = Math.round((current / base) * 100);
+    const step = (delta) => update({ [zoomKey]: Math.max(min, Math.min(max, current + delta)) });
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: scrimRef, className: "no-print fixed inset-0 z-[55]", "aria-hidden": true }), _jsxs("div", { ref: panelRef, id: "vr-aa-popover", role: "dialog", "aria-label": "Text", tabIndex: -1, className: `vr-pop vr-pop-menu-tr${closing ? " vr-pop-exit" : ""} no-print vr-glass-panel absolute top-[calc(100%+8px)] right-0 z-[60] w-[220px] max-h-[calc(100vh-8rem)] overflow-y-auto rounded-[18px] p-3.5 outline-none`, children: [_jsx("h4", { className: "mb-1.5 font-sans text-chrome-xs font-semibold text-muted-2", children: "Text size" }), _jsxs("div", { className: "flex h-10 overflow-hidden rounded-xl bg-paper/5", children: [_jsx("button", { type: "button", "aria-label": "Decrease text size", title: "Decrease text size", disabled: current <= min, onClick: () => step(-1), className: "vr-press vr-focus flex flex-1 items-center justify-center font-serif text-chrome-md text-paper hover:bg-paper/10 disabled:opacity-40", children: "A" }), _jsx("button", { type: "button", "aria-label": "Increase text size", title: "Increase text size", disabled: current >= max, onClick: () => step(1), className: "vr-press vr-focus flex flex-1 items-center justify-center border-l border-line font-serif text-[20px] leading-none text-paper hover:bg-paper/10 disabled:opacity-40", children: "A" })] }), _jsxs("div", { className: "mt-1.5 flex items-center justify-between px-0.5", children: [_jsxs("span", { className: "font-mono text-chrome-xs tabular-nums text-muted-2", children: [percent, "%"] }), _jsx("button", { type: "button", disabled: current === base, onClick: () => update({ [zoomKey]: base }), title: "Reset text size", className: "vr-press vr-focus rounded-md px-2 py-1 font-sans text-chrome-xs text-muted hover:bg-paper/5 hover:text-paper disabled:opacity-40", children: "Reset" })] }), !sourceSurface && doc.format === "md" && (_jsxs(_Fragment, { children: [_jsx("h4", { id: "vr-aa-width-label", className: "mb-1.5 mt-3 font-sans text-chrome-xs font-semibold text-muted-2", children: "Content width" }), _jsxs("div", { role: "group", "aria-labelledby": "vr-aa-width-label", children: [_jsx("div", { className: "flex h-9 overflow-hidden rounded-xl bg-paper/5", children: ["full", "column"].map((mode) => (_jsx("button", { type: "button", "aria-pressed": settings.readingWidthMode === mode, onClick: () => update({ readingWidthMode: mode }), className: `vr-press vr-focus flex-1 whitespace-nowrap px-2 font-sans text-chrome-xs ${settings.readingWidthMode === mode
+                                                ? "bg-copper/[0.14] text-copper-hi"
+                                                : "text-muted hover:bg-paper/10 hover:text-paper"}`, children: mode === "full" ? "Full width" : "Reading column" }, mode))) }), settings.readingWidthMode === "column" && (_jsxs("div", { className: "mt-2", children: [_jsx("input", { type: "range", "aria-label": "Reading column width", min: 560, max: 960, step: 20, value: settings.readingWidthPx, onChange: (e) => update({ readingWidthPx: Number(e.target.value) }), className: "w-full accent-[var(--copper)]" }), _jsxs("div", { className: "mt-1 flex items-center justify-between px-0.5", children: [_jsxs("span", { className: "font-mono text-chrome-xs tabular-nums text-muted-2", children: [settings.readingWidthPx, "px"] }), _jsx("button", { type: "button", disabled: settings.readingWidthPx === 700, onClick: () => update({ readingWidthPx: 700 }), title: "Reset column width", className: "vr-press vr-focus rounded-md px-2 py-1 font-sans text-chrome-xs text-muted hover:bg-paper/5 hover:text-paper disabled:opacity-40", children: "Reset" })] })] }))] })] })), !sourceSurface && (_jsxs(_Fragment, { children: [_jsx("h4", { id: "vr-aa-font-label", className: "mb-1.5 mt-3 font-sans text-chrome-xs font-semibold text-muted-2", children: "Reading font" }), _jsx("div", { role: "radiogroup", "aria-labelledby": "vr-aa-font-label", className: "flex flex-col gap-0.5", children: READING_FONTS.map((f) => {
+                                    const checked = settings.fontFamily === f.id;
+                                    return (_jsxs("button", { type: "button", role: "radio", "aria-checked": checked, onClick: () => update({ fontFamily: f.id }), className: `vr-press vr-focus flex h-8 items-center justify-between rounded-lg px-2.5 text-left text-[14px] text-paper hover:bg-paper/10${checked ? " bg-paper/10" : ""}`, children: [_jsx("span", { style: { fontFamily: f.stack }, children: f.name }), checked && (_jsx("span", { "aria-hidden": "true", className: "text-chrome-sm text-muted", children: "\u2713" }))] }, f.id));
+                                }) })] }))] })] }));
+}
+/** Reading fonts offered for Markdown and text (monospace faces stay for code and source). */
+const READING_FONTS = BUNDLED_FONTS.filter((f) => f.kind !== "mono");

package/dist/app/shell/InfoInspector.d.ts

@@ -0,0 +1,9 @@
+import type { LoadedDocument } from "@rightkit/document-core/documents/types";
+export declare const InfoInspector: import("react").MemoExoticComponent<typeof InfoInspectorImpl>;
+declare function InfoInspectorImpl({ doc, onClose, subscribeEdits, getEditSnapshot, }: {
+    doc: LoadedDocument;
+    onClose: () => void;
+    subscribeEdits: (path: string, cb: () => void) => () => void;
+    getEditSnapshot: (path: string) => string | undefined;
+}): import("react").JSX.Element;
+export {};

package/dist/app/shell/InfoInspector.js

@@ -0,0 +1,67 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Wave 3 Info inspector — a 280px panel docked at the right edge of the content plane. It is a
+// flex SIBLING of the plane (the plane shrinks), so it never overlaps the floating format bar or
+// find bar. Shows only data already on LoadedDocument (path, encoding, fingerprint) or reachable
+// through the live edit subscription the DocStatsPill uses — no backend calls, no invented fields.
+// One global toggle owns it (App.tsx); Escape inside the panel closes it via onClose, which returns
+// focus to the toolbar toggle button.
+import { memo, useRef } from "react";
+import { useDismiss } from "@rightkit/platform-ui/headless";
+import { Copy } from "@phosphor-icons/react/dist/icons/Copy";
+import { LockSimple } from "@phosphor-icons/react/dist/icons/LockSimple";
+import { X } from "@phosphor-icons/react/dist/icons/X";
+import { KIND_LABEL } from "../Toolbar.js";
+import { copyText, isLocalFileDoc } from "../sidebar/SidebarPathUtils.js";
+import { useEditText } from "@rightkit/document-core/app/useEditText";
+// Same formats the DocStatsPill counts — the only surfaces with a live text buffer.
+const COUNT_FORMATS = new Set(["md", "mdx", "txt", "html", "unknown"]);
+export const InfoInspector = memo(InfoInspectorImpl);
+function InfoInspectorImpl({ doc, onClose, subscribeEdits, getEditSnapshot, }) {
+    // Escape inside the panel closes it (bubble phase on the panel; stops propagation, as before).
+    const panelRef = useRef(null);
+    useDismiss(onClose, {
+        escapeTarget: panelRef,
+        outside: false,
+        preventDefault: false,
+        imeGuard: false,
+    });
+    // "Location" means the real filesystem path for file docs and the URL for web previews; untitled
+    // drafts have only an internal pseudo-path, so the row is omitted for them.
+    const location = doc.format === "web" ? doc.web?.url : isLocalFileDoc(doc) ? doc.path : null;
+    const fingerprint = doc.fingerprint;
+    const size = fingerprint?.size ? formatBytes(fingerprint.size) : null;
+    const modified = fingerprint?.mtimeMs && fingerprint.mtimeMs > 0
+        ? new Date(fingerprint.mtimeMs).toLocaleString(undefined, {
+            dateStyle: "medium",
+            timeStyle: "short",
+        })
+        : null;
+    return (_jsxs("aside", { ref: panelRef, id: "vr-info-inspector", "aria-label": "Document info", className: "no-print vr-glass-panel flex w-[280px] shrink-0 flex-col", children: [_jsxs("div", { className: "flex h-11 shrink-0 items-center justify-between pl-4 pr-2", children: [_jsx("h2", { className: "font-sans text-chrome-xs font-semibold uppercase tracking-[0.14em] text-muted-2", children: "Info" }), _jsx("button", { type: "button", "aria-label": "Close document info", title: "Close", onClick: onClose, className: "vr-press vr-focus flex h-7 w-7 items-center justify-center rounded-full text-muted hover:bg-paper/10 hover:text-paper", children: _jsx(X, { size: 14, weight: "regular", "aria-hidden": true }) })] }), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto px-4 pb-4", children: [_jsx("h3", { className: "mb-2 font-sans text-chrome-sm font-semibold text-paper", children: "Document" }), _jsxs("dl", { className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-2", children: [_jsx(InfoRow, { label: "Kind", children: KIND_LABEL[doc.format] ?? "Document" }), _jsx(InfoRow, { label: "Name", children: doc.displayName }), location ? _jsx(LocationRow, { location: location, web: doc.format === "web" }) : null, COUNT_FORMATS.has(doc.format) ? (_jsx(LiveCounts, { doc: doc, subscribeEdits: subscribeEdits, getEditSnapshot: getEditSnapshot })) : null, doc.encoding ? (_jsx(InfoRow, { label: "Encoding", mono: true, children: doc.encoding })) : null, size ? _jsx(InfoRow, { label: "Size", children: size }) : null, modified ? _jsx(InfoRow, { label: "Modified", children: modified }) : null] }), doc.format !== "web" && (_jsxs("div", { className: "mt-4 flex gap-2.5 rounded-xl bg-paper/5 px-3 py-2.5 font-sans text-chrome-sm leading-relaxed text-muted", children: [_jsx(LockSimple, { size: 15, weight: "regular", "aria-hidden": true, className: "mt-0.5 shrink-0 text-copper-hi" }), _jsx("p", { className: "m-0", children: "Opened from this computer. Nothing is uploaded." })] }))] })] }));
+}
+function InfoRow({ label, mono = false, children, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("dt", { className: "whitespace-nowrap pt-px text-right font-sans text-chrome-sm leading-5 text-muted-2", children: label }), _jsx("dd", { title: typeof children === "string" ? children : undefined, className: `min-w-0 truncate leading-5 text-paper ${mono ? "font-mono text-chrome-sm" : "font-sans text-chrome-sm"}`, children: children })] }));
+}
+// Full path/URL in the mono accent face, truncated with a title tooltip, plus the existing
+// sidebar clipboard helper for the copy affordance.
+function LocationRow({ location, web }) {
+    const copyLabel = web ? "Copy URL" : "Copy path";
+    return (_jsxs(_Fragment, { children: [_jsx("dt", { className: "whitespace-nowrap pt-px text-right font-sans text-chrome-sm leading-5 text-muted-2", children: "Location" }), _jsxs("dd", { className: "flex min-w-0 items-center gap-1", children: [_jsx("span", { title: location, className: "min-w-0 flex-1 truncate font-mono text-chrome-xs leading-5 text-paper", children: location }), _jsx("button", { type: "button", "aria-label": copyLabel, title: copyLabel, onClick: () => void copyText(location), className: "vr-press vr-focus flex h-6 w-6 shrink-0 items-center justify-center rounded text-muted-2 hover:bg-paper/10 hover:text-paper", children: _jsx(Copy, { size: 12, weight: "regular", "aria-hidden": true }) })] })] }));
+}
+// Live word/character counts — the same subscription DocStatsPill uses, so the inspector updates
+// per keystroke without re-rendering the App shell.
+function LiveCounts({ doc, subscribeEdits, getEditSnapshot, }) {
+    const liveText = useEditText(subscribeEdits, getEditSnapshot, doc.path) ?? doc.content;
+    const trimmed = liveText.trim();
+    const words = trimmed ? trimmed.split(/\s+/).length : 0;
+    const mins = words ? Math.max(1, Math.round(words / 230)) : 0;
+    return (_jsxs(_Fragment, { children: [_jsx(InfoRow, { label: "Words", children: words.toLocaleString() }), _jsx(InfoRow, { label: "Characters", children: liveText.length.toLocaleString() }), _jsx(InfoRow, { label: "Reading", children: words ? `~${mins} min` : "—" })] }));
+}
+function formatBytes(size) {
+    if (size < 1024)
+        return `${size} B`;
+    const kb = size / 1024;
+    if (kb < 1024)
+        return `${kb >= 100 ? Math.round(kb) : kb.toFixed(1)} KB`;
+    const mb = kb / 1024;
+    return `${mb >= 100 ? Math.round(mb) : mb.toFixed(1)} MB`;
+}

package/dist/app/shell/StartPage.d.ts

@@ -0,0 +1,9 @@
+import type { FileEntry } from "../../state/library.js";
+export declare function StartPage({ onNew, onOpenDialog, onOpenUrl, onOpenClipboard, recents, onOpenRecent, }: {
+    onNew: () => void;
+    onOpenDialog: () => void;
+    onOpenUrl: () => void;
+    onOpenClipboard: () => void;
+    recents?: FileEntry[];
+    onOpenRecent?: (entry: FileEntry) => void;
+}): import("react").JSX.Element;

package/dist/app/shell/StartPage.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { relativeTimeFrom } from "@rightkit/platform-ui";
+import { ClipboardText } from "@phosphor-icons/react/dist/icons/ClipboardText";
+import { FolderOpen } from "@phosphor-icons/react/dist/icons/FolderOpen";
+import { GlobeSimple } from "@phosphor-icons/react/dist/icons/GlobeSimple";
+import { NotePencil } from "@phosphor-icons/react/dist/icons/NotePencil";
+import { FileTypeIcon } from "../../documents/FileTypeIcon.js";
+import { isMac, shortcutLabel } from "@rightkit/document-core/platform";
+export function StartPage({ onNew, onOpenDialog, onOpenUrl, onOpenClipboard, recents, onOpenRecent, }) {
+    return (_jsxs("div", { className: "flex min-h-full w-full min-w-0 max-w-full flex-col items-center justify-center gap-9 px-4 py-10 text-center sm:px-6", children: [_jsxs("section", { className: "vr-rise flex w-full min-w-0 max-w-full flex-col items-center", children: [_jsxs("h1", { className: "[font-family:var(--font-wordmark)] text-[42px] leading-none tracking-[0.01em] text-paper", children: ["View", _jsx("span", { className: "text-copper", children: "Right" })] }), _jsx("p", { className: "mt-3 max-w-[440px] text-balance font-sans text-sm leading-relaxed text-muted", children: "Open Markdown, text, HTML, Word documents, images and PDFs. Files stay on this computer." }), _jsxs("div", { className: "mt-6 flex w-full min-w-0 max-w-full flex-wrap items-center justify-center gap-2.5", children: [_jsx(StartAction, { primary: true, label: "Open\u2026", hint: "Ctrl+O", onClick: onOpenDialog, icon: _jsx(FolderOpen, { size: 15, weight: "regular", "aria-hidden": true }) }), _jsx(StartAction, { label: "New document", hint: "Ctrl+N", 
+                                // Bare call — passing the click event through would land it in the format arg.
+                                onClick: () => onNew(), icon: _jsx(NotePencil, { size: 15, weight: "regular", "aria-hidden": true }) }), _jsx(StartAction, { label: "Paste", hint: "Ctrl+Shift+V", onClick: onOpenClipboard, icon: _jsx(ClipboardText, { size: 15, weight: "regular", "aria-hidden": true }) }), _jsx(StartAction, { label: "Open URL\u2026", onClick: onOpenUrl, icon: _jsx(GlobeSimple, { size: 15, weight: "regular", "aria-hidden": true }) })] })] }), _jsxs("section", { className: "vr-rise w-full min-w-0 max-w-[640px] rounded-2xl border border-dashed border-line p-4 sm:p-5", style: { "--rise-delay": "90ms" }, children: [_jsxs("div", { className: "mb-3 flex min-w-0 flex-wrap items-baseline justify-between gap-x-3 gap-y-1 px-1 text-left", children: [_jsx("h2", { className: "font-sans text-chrome-md font-semibold text-paper", children: "Recent" }), _jsx("span", { className: "font-sans text-xs text-muted-2", children: "Drop files anywhere to open them" })] }), recents && recents.length > 0 && onOpenRecent ? (_jsx("ul", { className: "flex flex-col gap-0.5", children: recents.slice(0, 8).map((entry) => (_jsx("li", { children: _jsx(RecentRow, { entry: entry, onOpen: () => onOpenRecent(entry) }) }, entry.token))) })) : (_jsx("p", { className: "py-4 text-center font-sans text-xs text-muted-2", children: "Recently opened files appear here." }))] })] }));
+}
+// aria-keyshortcuts wants UI Events key names — "Ctrl" isn't one, and the actual modifier on
+// macOS is Meta (the same mapping shortcutLabel renders as ⌘).
+// Hints are authored in Windows vocabulary ("Ctrl+Shift+V"); convert to a canonical chord.
+function hintChord(hint) {
+    return hint.toLowerCase().replace(/\bctrl\b/g, "mod");
+}
+function keyShortcutsAttr(hint) {
+    return hint
+        .split("+")
+        .map((part) => {
+        const key = part.trim();
+        if (key === "Ctrl" || key === "Control")
+            return isMac() ? "Meta" : "Control";
+        return key;
+    })
+        .join("+");
+}
+function StartAction({ icon, label, hint, onClick, primary = false, }) {
+    return (_jsxs("button", { type: "button", onClick: onClick, title: hint ? `${label} (${shortcutLabel(hintChord(hint))})` : label, "aria-keyshortcuts": hint ? keyShortcutsAttr(hint) : undefined, className: `vr-press vr-focus flex h-[34px] items-center gap-1.5 rounded-full border px-4 font-sans text-chrome-md font-medium ${primary
+            ? "border-copper/40 bg-copper/15 text-copper-hi hover:bg-copper/25"
+            : "border-line bg-panel text-paper hover:border-muted-2 hover:bg-panel-2"}`, children: [icon, label, hint ? (_jsx("kbd", { "aria-hidden": true, className: "ml-1 font-mono text-chrome-xs opacity-60", children: shortcutLabel(hintChord(hint)) })) : null] }));
+}
+/** Recents row time: the owner's relative text for the first week, then a short date. */
+function recentTimeLabel(openedAt) {
+    if (!openedAt)
+        return null;
+    if (Date.now() - openedAt >= 7 * 86_400_000) {
+        return new Date(openedAt).toLocaleDateString(undefined, { month: "short", day: "numeric" });
+    }
+    return relativeTimeFrom(openedAt);
+}
+// Recent row: format icon, file name, the full path (mono, truncated), last-opened time.
+function RecentRow({ entry, onOpen }) {
+    const time = recentTimeLabel(entry.openedAt);
+    return (_jsxs("button", { type: "button", onClick: onOpen, title: entry.token, "aria-label": `Open ${entry.displayName}`, className: "vr-press vr-focus flex h-9 w-full items-center gap-2.5 rounded-lg px-2 text-left hover:bg-panel-2", children: [_jsx("span", { "aria-hidden": true, className: "flex w-5 shrink-0 justify-center text-muted-2", children: _jsx(FileTypeIcon, { format: entry.format, path: entry.token, size: 16 }) }), _jsx("span", { className: "max-w-[38%] shrink-0 truncate font-sans text-chrome-sm font-medium text-paper", children: entry.displayName }), _jsx("span", { className: "min-w-0 flex-1 truncate text-left font-mono text-chrome-xs text-muted-2", children: entry.token }), time && (_jsx("span", { className: "shrink-0 font-mono text-chrome-xs tabular-nums text-muted-2", children: time }))] }));
+}

package/dist/app/shell/readEdit.d.ts

@@ -0,0 +1,6 @@
+import type { DocFormat, ReadEditMode } from "@rightkit/document-core/documents/types";
+/** Every editable format opens editable with its tools showing — the host app edits inline with no
+ *  extra step. Formats that cannot edit (web previews) stay read-only. */
+export declare function effectiveReadEdit(doc: {
+    format: DocFormat;
+}): ReadEditMode;

package/dist/app/shell/readEdit.js

@@ -0,0 +1,6 @@
+import { capabilitiesFor } from "../../documents/capabilities.js";
+/** Every editable format opens editable with its tools showing — the host app edits inline with no
+ *  extra step. Formats that cannot edit (web previews) stay read-only. */
+export function effectiveReadEdit(doc) {
+    return capabilitiesFor(doc.format).canEdit ? "edit" : "read";
+}

package/dist/app/sidebar/SidebarDocumentMenu.d.ts

@@ -0,0 +1,20 @@
+import type { LoadedDocument } from "@rightkit/document-core/documents/types";
+export declare function DocumentMenu({ menu, openLocalPaths, pinned, onClose, onActivate, onCloseDoc, onCloseOthers, onCloseRight, onCloseAll, onTogglePin, titleFor, }: {
+    menu: {
+        doc: LoadedDocument;
+        x: number;
+        y: number;
+    };
+    openLocalPaths: string[];
+    pinned: boolean;
+    onClose: () => void;
+    onActivate: (path: string) => void;
+    onCloseDoc: (path: string) => void;
+    /** Rendered only when provided (tab-strip lane): close every other tab. */
+    onCloseOthers?: () => void;
+    /** Rendered only when provided (tab-strip lane): close tabs to the right of this one. */
+    onCloseRight?: () => void;
+    onCloseAll: () => void;
+    onTogglePin: (path: string) => void;
+    titleFor: (doc: LoadedDocument) => string;
+}): import("react").JSX.Element;

package/dist/app/sidebar/SidebarDocumentMenu.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Right-click / "..." context menu for a single document tab (Open, Close, Close all, Pin, Copy
+// Path variants, Reveal in Finder/File Explorer). Rendered from both the collapsed rail and the
+// expanded tab list in Sidebar.tsx. The shell's ContextMenu owns keyboard, dismissal (scrim press,
+// context-menu gesture), focus return and viewport fit; the host app supplies the rows and the look.
+import { useMemo, useRef } from "react";
+import { ContextMenu } from "@rightkit/react-shell/react";
+import { revealInFileExplorer } from "@rightkit/document-core/state/tauriBridge";
+import { isMac } from "@rightkit/document-core/platform";
+import { compactMenuItemClass, menuPanelClass } from "./SidebarPrimitives.js";
+import { breadcrumbPath, copyText, isLocalFileDoc, pathBase, pathFolder, relativePath, } from "./SidebarPathUtils.js";
+export function DocumentMenu({ menu, openLocalPaths, pinned, onClose, onActivate, onCloseDoc, onCloseOthers, onCloseRight, onCloseAll, onTogglePin, titleFor, }) {
+    const { doc, x, y } = menu;
+    const local = isLocalFileDoc(doc);
+    const pathText = doc.web?.url ?? doc.path;
+    // Callbacks change identity every render; items must not (exitMs treats a new items identity as
+    // a re-open), so run() reads the latest props through a ref.
+    const cb = useRef({ onActivate, onCloseDoc, onCloseOthers, onCloseRight, onCloseAll, onTogglePin });
+    cb.current = { onActivate, onCloseDoc, onCloseOthers, onCloseRight, onCloseAll, onTogglePin };
+    const hasOthers = !!onCloseOthers;
+    const hasRight = !!onCloseRight;
+    const docPath = doc.path;
+    const isWeb = doc.format === "web";
+    const items = useMemo(() => [
+        { id: "open", label: "Open", run: () => cb.current.onActivate(docPath) },
+        { id: "close", label: "Close", run: () => cb.current.onCloseDoc(docPath) },
+        ...(hasOthers ? [{ id: "close-others", label: "Close other tabs", run: () => cb.current.onCloseOthers?.() }] : []),
+        ...(hasRight ? [{ id: "close-right", label: "Close tabs to the right", run: () => cb.current.onCloseRight?.() }] : []),
+        { id: "close-all", label: "Close all", run: () => cb.current.onCloseAll() },
+        ...(local ? [{ id: "pin", label: pinned ? "Unpin" : "Pin", run: () => cb.current.onTogglePin(docPath) }] : []),
+        {
+            id: "copy-path",
+            label: isWeb ? "Copy URL" : "Copy Path",
+            separatorBefore: true,
+            run: () => copyText(pathText),
+        },
+        ...(local
+            ? [
+                { id: "copy-relative", label: "Copy Relative Path", run: () => copyText(relativePath(docPath, openLocalPaths)) },
+                { id: "copy-name", label: "Copy File Name", run: () => copyText(pathBase(docPath)) },
+                { id: "copy-folder", label: "Copy Folder Path", run: () => copyText(pathFolder(docPath)) },
+                { id: "copy-breadcrumbs", label: "Copy Breadcrumbs Path", run: () => copyText(breadcrumbPath(docPath)) },
+                {
+                    id: "reveal",
+                    label: isMac() ? "Reveal in Finder" : "Reveal in File Explorer",
+                    separatorBefore: true,
+                    run: () => revealInFileExplorer(docPath),
+                },
+            ]
+            : []),
+    ], [hasOthers, hasRight, local, pinned, isWeb, pathText, docPath, openLocalPaths]);
+    return (_jsx(ContextMenu, { x: x, y: y, items: items, onClose: onClose, label: `${titleFor(doc)} tab options`, width: 224, itemAs: "button", showLead: false, renderItem: (item) => item.label, className: `${menuPanelClass} overflow-y-auto py-0.5`, scrimClassName: "no-print", exitMs: 80, exitClassName: "vr-pop-exit", slots: {
+            item: `${compactMenuItemClass} [&.is-active]:bg-ink/50 [&.is-active]:text-paper`,
+            separator: "my-1 h-px bg-line",
+        } }));
+}

package/dist/app/sidebar/SidebarExpandedPanel.d.ts

@@ -0,0 +1,9 @@
+import { type PointerEvent as ReactPointerEvent, type ReactNode } from "react";
+import type { SidebarProps } from "../Sidebar.js";
+export declare function SidebarExpandedPanel({ activePath, openPaths, recents, pinnedPaths, pinnedEntries, onActivate, onOpenRecent, onOpenPath, onTogglePin, onTogglePinDir, onClearRecents, onOpenDialog, onOpenUrl, onOpenClipboard, onNew, onOpenSettings, titlebarSlot, sidebarWidth, startWidthResize, setOpen, SIDEBAR_MIN_WIDTH, SIDEBAR_MAX_WIDTH, }: SidebarProps & {
+    sidebarWidth: number;
+    startWidthResize: (event: ReactPointerEvent<HTMLDivElement>) => void;
+    setOpen: (open: boolean) => void;
+    SIDEBAR_MIN_WIDTH: number;
+    SIDEBAR_MAX_WIDTH: number;
+}): ReactNode;

package/dist/app/sidebar/SidebarExpandedPanel.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The expanded sidebar shell: titlebar row (drag region + collapse button), the slim New/Open/
+// Search action row, the explorer sections (Pinned / Recent / Locations lazy tree), the footer
+// (wordmark + settings + theme), and the width drag handle. Open documents live in the titlebar
+// tab strip now — this panel only shows files on disk.
+import { useEffect, useRef, useState, } from "react";
+import { X } from "@phosphor-icons/react/dist/icons/X";
+import { Gear } from "@phosphor-icons/react/dist/icons/Gear";
+import { MagnifyingGlass } from "@phosphor-icons/react/dist/icons/MagnifyingGlass";
+import { Palette } from "@phosphor-icons/react/dist/icons/Palette";
+import { FolderOpen } from "@phosphor-icons/react/dist/icons/FolderOpen";
+import { IconButton } from "@rightkit/react-shell/react";
+import { useDismiss } from "@rightkit/platform-ui/headless";
+import { AppearanceMenu } from "../../settings/AppearanceMenu.js";
+import { PanelIcon, PlusIcon } from "./SidebarIcons.js";
+import { NewOpenMenu } from "./SidebarMenus.js";
+import { ExplorerSections } from "./explorer/ExplorerSections.js";
+const HEADER_BTN = "vr-press vr-focus flex h-7 min-w-7 items-center justify-center rounded px-1 font-sans text-xs text-muted hover:bg-ink/40 hover:text-paper";
+export function SidebarExpandedPanel({ activePath, openPaths, recents, pinnedPaths, pinnedEntries, onActivate, onOpenRecent, onOpenPath, onTogglePin, onTogglePinDir, onClearRecents, onOpenDialog, onOpenUrl, onOpenClipboard, onNew, onOpenSettings, titlebarSlot, sidebarWidth, startWidthResize, setOpen, SIDEBAR_MIN_WIDTH, SIDEBAR_MAX_WIDTH, }) {
+    const [searchOpen, setSearchOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState("");
+    const searchInputRef = useRef(null);
+    const searchButtonRef = useRef(null);
+    useEffect(() => {
+        if (searchOpen)
+            searchInputRef.current?.focus();
+    }, [searchOpen]);
+    const closeSearch = () => {
+        setSearchOpen(false);
+        setSearchQuery("");
+        searchButtonRef.current?.focus();
+    };
+    // Escape in the search field closes it (bubble phase on the input; stops propagation as before).
+    useDismiss(closeSearch, {
+        enabled: searchOpen,
+        escapeTarget: searchInputRef,
+        outside: false,
+        imeGuard: false,
+    });
+    const plusButtonRef = useRef(null);
+    const themeButtonRef = useRef(null);
+    const [plusOpen, setPlusOpen] = useState(false);
+    const [appearanceOpen, setAppearanceOpen] = useState(false);
+    return (_jsxs("aside", { "data-vr-sidebar": "expanded", className: "no-print vr-chrome vr-sidebar-shell relative flex shrink-0 flex-col bg-panel", style: { width: sidebarWidth }, children: [_jsxs("div", { "data-vr-sidebar-titlebar": true, "data-tauri-drag-region": true, className: "relative flex h-[52px] items-center justify-end gap-1 px-3", children: [titlebarSlot && _jsx("div", { className: "mr-auto flex min-w-0 items-center", children: titlebarSlot }), _jsx(IconButton, { label: "Collapse sidebar", onClick: () => setOpen(false), className: HEADER_BTN, children: _jsx(PanelIcon, {}) })] }), _jsxs("div", { className: "vr-x-actions", children: [_jsxs("button", { type: "button", ref: plusButtonRef, className: "vr-x-new vr-press vr-focus", "aria-haspopup": "menu", "aria-expanded": plusOpen, title: "New document", onClick: () => setPlusOpen((o) => !o), children: [_jsx(PlusIcon, {}), " New"] }), _jsx("span", { className: "flex-1" }), _jsx(IconButton, { ref: searchButtonRef, label: "Search documents", "aria-expanded": searchOpen, "aria-controls": "vr-sidebar-document-search", className: "vr-press vr-focus flex h-7 min-w-7 items-center justify-center rounded px-1 text-muted hover:bg-ink/40 hover:text-paper", onClick: () => (searchOpen ? closeSearch() : setSearchOpen(true)), children: _jsx(MagnifyingGlass, { size: 14, weight: "regular" }) }), _jsx(IconButton, { label: "Open file\u2026", onClick: onOpenDialog, className: HEADER_BTN, children: _jsx(FolderOpen, { size: 14, weight: "regular" }) })] }), plusOpen && (_jsx(NewOpenMenu, { anchor: plusButtonRef.current ?? undefined, onClose: () => setPlusOpen(() => false), onNew: onNew, onOpenDialog: onOpenDialog, onOpenUrl: onOpenUrl, onOpenClipboard: onOpenClipboard })), searchOpen && (_jsxs("div", { id: "vr-sidebar-document-search", role: "search", "aria-label": "Search sidebar documents", className: "mx-3 mb-2 flex shrink-0 items-center gap-1 rounded border border-line bg-panel-2 px-2 focus-within:border-copper", children: [_jsx("input", { ref: searchInputRef, "aria-label": "Document name", placeholder: "Search documents\u2026", value: searchQuery, onChange: (event) => setSearchQuery(event.target.value), onKeyDown: (event) => {
+                            if (event.key === "ArrowDown" || event.key === "Enter") {
+                                const first = event.currentTarget
+                                    .closest("aside")
+                                    ?.querySelector("[data-vr-document-search-results] button");
+                                if (first) {
+                                    event.preventDefault();
+                                    if (event.key === "Enter")
+                                        first.click();
+                                    else
+                                        first.focus();
+                                }
+                            }
+                        }, className: "min-w-0 flex-1 bg-transparent py-1.5 font-sans text-xs text-paper outline-none placeholder:text-muted" }), _jsx(IconButton, { label: "Close document search", onClick: closeSearch, className: "vr-focus flex h-6 w-6 shrink-0 items-center justify-center rounded text-muted hover:text-paper", children: _jsx(X, { size: 12 }) })] })), _jsx(ExplorerSections, { searchQuery: searchQuery, activePath: activePath, openPaths: openPaths, recents: recents, pinnedPaths: pinnedPaths, pinnedEntries: pinnedEntries, onActivate: onActivate, onOpenRecent: onOpenRecent, onOpenPath: onOpenPath, onTogglePin: onTogglePin, onTogglePinDir: onTogglePinDir, onClearRecents: onClearRecents }), _jsxs("div", { className: "relative flex items-center justify-between border-t border-line px-3 py-2", children: [_jsxs("span", { "data-vr-sidebar-footer-brand": true, className: "min-w-0 truncate px-1 [font-family:var(--font-wordmark)] text-xl leading-none tracking-[0.01em] text-paper", children: ["View", _jsx("span", { className: "text-copper", children: "Right" })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(IconButton, { label: "Settings", onClick: onOpenSettings, "data-vr-tooltip": "Settings", "data-vr-tooltip-side": "top", className: "vr-icon-tooltip vr-press vr-focus flex h-8 w-8 items-center justify-center rounded text-muted hover:bg-ink/40 hover:text-paper", children: _jsx(Gear, { size: 14, weight: "regular" }) }), _jsx(IconButton, { ref: themeButtonRef, label: "Theme", onClick: () => setAppearanceOpen((o) => !o), "aria-haspopup": "dialog", "aria-expanded": appearanceOpen, "data-vr-tooltip": "Theme", "data-vr-tooltip-side": "top", className: "vr-icon-tooltip vr-press vr-focus flex h-8 w-8 items-center justify-center rounded text-muted hover:bg-ink/40 hover:text-paper", children: _jsx(Palette, { size: 14, weight: "regular" }) })] }), appearanceOpen && (_jsx(AppearanceMenu, { anchor: themeButtonRef.current ?? undefined, onClose: () => setAppearanceOpen(() => false), onMore: onOpenSettings }))] }), _jsx("div", { role: "separator", tabIndex: 0, "aria-label": "Resize sidebar", "aria-orientation": "vertical", "aria-valuemin": SIDEBAR_MIN_WIDTH, "aria-valuemax": SIDEBAR_MAX_WIDTH, "aria-valuenow": Math.round(sidebarWidth), "aria-valuetext": `${Math.round(sidebarWidth)} pixels wide`, onPointerDown: startWidthResize, onKeyDown: (event) => {
+                    // Arrow keys resize through the SAME drag state machine the pointer path uses:
+                    // a plain-object pointerdown (its currentTarget lacks setPointerCapture, so the
+                    // capture call is skipped), then real pointermove/pointerup events so the window
+                    // listeners apply, clamp, and persist the delta exactly as a mouse drag would.
+                    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+                        return;
+                    if (typeof PointerEvent === "undefined")
+                        return;
+                    event.preventDefault();
+                    const step = event.key === "ArrowRight" ? 16 : -16;
+                    const x = event.currentTarget.getBoundingClientRect().left;
+                    startWidthResize({
+                        preventDefault() { },
+                        currentTarget: {},
+                        pointerId: -1,
+                        clientX: x,
+                    });
+                    window.dispatchEvent(new PointerEvent("pointermove", { pointerId: -1, clientX: x + step }));
+                    window.dispatchEvent(new PointerEvent("pointerup", { pointerId: -1 }));
+                }, className: "absolute bottom-0 right-0 top-0 z-30 w-2 translate-x-1 cursor-col-resize", title: "Resize sidebar" })] }));
+}

package/dist/app/sidebar/SidebarIcons.d.ts

@@ -0,0 +1,3 @@
+export declare function ClockIcon(): import("react").JSX.Element;
+export declare function PlusIcon(): import("react").JSX.Element;
+export declare function PanelIcon(): import("react").JSX.Element;

package/dist/app/sidebar/SidebarIcons.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Small icons used across the sidebar shell (header/footer + tab strip).
+// Now backed by Phosphor React icons (see docs/agent-rules.md chrome modernization) instead of
+// hand-rolled inline SVG — kept as named wrapper exports so call sites (SidebarExpandedPanel,
+// SidebarRail) don't need to change.
+import { Clock } from "@phosphor-icons/react/dist/icons/Clock";
+import { Plus } from "@phosphor-icons/react/dist/icons/Plus";
+import { SidebarSimple } from "@phosphor-icons/react/dist/icons/SidebarSimple";
+export function ClockIcon() {
+    return _jsx(Clock, { size: 14, weight: "regular" });
+}
+export function PlusIcon() {
+    return _jsx(Plus, { size: 14, weight: "regular" });
+}
+// Standard "toggle sidebar" glyph — used for both open and collapse.
+export function PanelIcon() {
+    return _jsx(SidebarSimple, { size: 14, weight: "regular" });
+}

package/dist/app/sidebar/SidebarMenus.d.ts

@@ -0,0 +1,19 @@
+import { type AnchorRect } from "@rightkit/react-shell/react";
+import type { FileEntry } from "../../state/library.js";
+type Anchor = Element | AnchorRect;
+export declare function NewOpenMenu({ anchor, onClose, onNew, onOpenDialog, onOpenUrl, onOpenClipboard, }: {
+    anchor?: Anchor;
+    onClose: () => void;
+    onNew: (format?: "txt" | "md" | "docx") => void;
+    onOpenDialog: () => void;
+    onOpenUrl: () => void;
+    onOpenClipboard: () => void;
+}): import("react").JSX.Element;
+export declare function RecentsMenu({ anchor, onClose, recents, onOpenRecent, onClearRecents, }: {
+    anchor?: Anchor;
+    onClose: () => void;
+    recents: FileEntry[];
+    onOpenRecent: (entry: FileEntry) => void;
+    onClearRecents: () => void;
+}): import("react").JSX.Element;
+export {};

package/dist/app/sidebar/SidebarMenus.js

@@ -0,0 +1,64 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// New/Open and Recents popovers. Render identically in the collapsed rail and the expanded header —
+// only their anchor button differs. Shared here so the two render sites stay in sync. Both are the
+// shell's ContextMenu opened from an anchor (keyboard, dismissal, focus return, viewport fit); the host app supplies the
+// glass panel classes and the row look.
+import { useMemo, useRef } from "react";
+import { ContextMenu } from "@rightkit/react-shell/react";
+import { FileTypeIcon } from "../../documents/FileTypeIcon.js";
+import { menuItemClass, menuPanelClass } from "./SidebarPrimitives.js";
+const MENU_SLOTS = {
+    item: `${menuItemClass} [&.is-active]:bg-ink/50 [&.is-active]:text-paper [&.is-disabled]:cursor-default [&.is-disabled]:hover:bg-transparent`,
+    separator: "my-1 h-px bg-line",
+};
+/**
+ * The button a menu hangs off. Call sites pass `anchor` (the clicked button); without it the menu
+ * finds its trigger by the label the rail / expanded header give it, which is already in the DOM
+ * when the menu mounts.
+ */
+const TRIGGERS = {
+    new: '[data-vr-sidebar] button[aria-label="New document"], [data-vr-sidebar="expanded"] .vr-x-new',
+    recents: '[data-vr-sidebar] button[aria-label="Recent files"]',
+};
+function triggerAnchor(kind) {
+    return (document.querySelector(TRIGGERS[kind]) ?? { left: 0, top: 52, right: 0, bottom: 52 });
+}
+export function NewOpenMenu({ anchor, onClose, onNew, onOpenDialog, onOpenUrl, onOpenClipboard, }) {
+    // Props change identity per render; items must not (exitMs treats a new items identity as a
+    // re-open), so run() reads the latest through a ref.
+    const cb = useRef({ onNew, onOpenDialog, onOpenUrl, onOpenClipboard });
+    cb.current = { onNew, onOpenDialog, onOpenUrl, onOpenClipboard };
+    const items = useMemo(() => [
+        { id: "new-txt", label: "New text", run: () => cb.current.onNew("txt") },
+        { id: "new-md", label: "New Markdown", run: () => cb.current.onNew("md") },
+        { id: "new-docx", label: "New DOCX", run: () => cb.current.onNew("docx") },
+        { id: "open", label: "Open file…", run: () => cb.current.onOpenDialog() },
+        { id: "open-url", label: "Open URL…", run: () => cb.current.onOpenUrl() },
+        { id: "clipboard", label: "From clipboard", run: () => cb.current.onOpenClipboard() },
+    ], []);
+    return (_jsx(ContextMenu, { anchor: anchor ?? triggerAnchor("new"), placement: "bottom-start", label: "New document", width: 176, items: items, onClose: onClose, itemAs: "button", showLead: false, renderItem: (item) => item.label, className: `${menuPanelClass} py-1`, scrimClassName: "no-print", exitMs: 80, exitClassName: "vr-pop-exit", slots: MENU_SLOTS }));
+}
+export function RecentsMenu({ anchor, onClose, recents, onOpenRecent, onClearRecents, }) {
+    const cb = useRef({ onOpenRecent, onClearRecents });
+    cb.current = { onOpenRecent, onClearRecents };
+    const shown = useMemo(() => recents.slice(0, 12), [recents]);
+    const items = useMemo(() => [
+        { id: "head", label: "Recent", disabled: true },
+        ...(shown.length === 0 ? [{ id: "empty", label: "Nothing yet.", disabled: true }] : []),
+        ...shown.map((r) => ({ id: `recent:${r.token}`, label: r.displayName, run: () => cb.current.onOpenRecent(r) })),
+        ...(shown.length > 0
+            ? [{ id: "clear", label: "Clear recent files", separatorBefore: true, run: () => cb.current.onClearRecents() }]
+            : []),
+    ], [shown]);
+    const byId = useMemo(() => new Map(shown.map((r) => [`recent:${r.token}`, r])), [shown]);
+    return (_jsx(ContextMenu, { anchor: anchor ?? triggerAnchor("recents"), placement: "bottom-start", label: "Recent files", width: 256, items: items, onClose: onClose, itemAs: "button", showLead: false, renderItem: (item) => {
+            const entry = byId.get(item.id);
+            if (item.id === "head")
+                return _jsx("span", { className: "font-sans text-chrome-xs font-semibold text-muted-2", children: item.label });
+            if (item.id === "empty")
+                return _jsx("span", { className: "font-sans text-xs text-muted-2", children: item.label });
+            if (!entry)
+                return _jsx("span", { className: "text-muted", children: item.label });
+            return (_jsxs(_Fragment, { children: [_jsx("span", { className: "mr-2 shrink-0", children: _jsx(FileTypeIcon, { format: entry.format, path: entry.token, size: 21 }) }), _jsx("span", { className: "truncate", title: entry.displayName, children: entry.displayName })] }));
+        }, className: `${menuPanelClass} py-1`, scrimClassName: "no-print", exitMs: 80, exitClassName: "vr-pop-exit", slots: MENU_SLOTS }));
+}

package/dist/app/sidebar/SidebarPathUtils.d.ts

@@ -0,0 +1,10 @@
+import type { LoadedDocument } from "@rightkit/document-core/documents/types";
+export declare function isLocalFileDoc(doc: LoadedDocument): boolean;
+export declare function pathFolder(path: string): string;
+export declare function pathBase(path: string): string;
+export declare function pathSeparator(path: string): "\\" | "/";
+export declare function splitPath(path: string): string[];
+export declare function commonFolder(paths: string[]): string;
+export declare function relativePath(path: string, openLocalPaths: string[]): string;
+export declare function breadcrumbPath(path: string): string;
+export declare function copyText(text: string): Promise<void>;