@bobfrankston/rmfmail 1.0.467

package/client/components/calendar.js

@@ -0,0 +1,217 @@
+/**
+ * Calendar pane — Thunderbird Lightning "Today Pane" style.
+ *
+ * Phase-1 scope (this commit): a usable mini-month + upcoming-events list
+ * sourced from a local-only event store. Google Calendar sync is a separate
+ * step (oauthsupport scope is already wired; the dispatcher branch + provider
+ * are owed). UI lands first so the data layer can be slotted in without
+ * UX rework.
+ */
+const LOCAL_STORE_KEY = "mailx-cal-events-v1";
+let isOpen = false;
+function loadEvents() {
+    try {
+        const raw = localStorage.getItem(LOCAL_STORE_KEY);
+        if (!raw)
+            return [];
+        const arr = JSON.parse(raw);
+        return Array.isArray(arr) ? arr : [];
+    }
+    catch {
+        return [];
+    }
+}
+function saveEvents(events) {
+    try {
+        localStorage.setItem(LOCAL_STORE_KEY, JSON.stringify(events));
+    }
+    catch { /* */ }
+}
+export async function openCalendar() {
+    if (isOpen)
+        return;
+    isOpen = true;
+    const backdrop = document.createElement("div");
+    backdrop.className = "mailx-modal-backdrop";
+    const panel = document.createElement("div");
+    panel.className = "mailx-modal mailx-modal-wide";
+    panel.innerHTML = `
+        <div class="mailx-modal-title">
+            <span class="mailx-modal-title-text">Calendar</span>
+            <button type="button" class="mailx-modal-close" id="cal-close" title="Close (Esc)" aria-label="Close">&times;</button>
+        </div>
+        <div class="cal-grid">
+            <div class="cal-month" id="cal-month"></div>
+            <div class="cal-upcoming">
+                <div class="cal-section-title">Upcoming</div>
+                <div id="cal-events"></div>
+                <button type="button" class="mailx-modal-btn mailx-modal-btn-primary" id="cal-new" style="margin-top:12px;">+ New event</button>
+            </div>
+        </div>
+        <div class="mailx-modal-buttons">
+            <span class="mailx-modal-spacer"></span>
+            <span class="cal-source-note">Local-only · Google Calendar sync pending</span>
+            <button type="button" class="mailx-modal-btn" data-action="close">Close</button>
+        </div>`;
+    backdrop.appendChild(panel);
+    document.body.appendChild(backdrop);
+    const monthEl = panel.querySelector("#cal-month");
+    const eventsEl = panel.querySelector("#cal-events");
+    let viewYear = new Date().getFullYear();
+    let viewMonth = new Date().getMonth();
+    let selectedDay = new Date();
+    let events = loadEvents();
+    const renderMonth = () => {
+        const first = new Date(viewYear, viewMonth, 1);
+        const lastDay = new Date(viewYear, viewMonth + 1, 0).getDate();
+        const firstWeekday = first.getDay();
+        const monthName = first.toLocaleDateString(undefined, { month: "long", year: "numeric" });
+        const today = new Date();
+        const isToday = (y, m, d) => y === today.getFullYear() && m === today.getMonth() && d === today.getDate();
+        const eventsByDay = new Map();
+        for (const e of events) {
+            const d = new Date(e.start);
+            const k = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+            const arr = eventsByDay.get(k) || [];
+            arr.push(e);
+            eventsByDay.set(k, arr);
+        }
+        let html = `
+            <div class="cal-nav">
+                <button type="button" class="cal-nav-btn" data-nav="prev">‹</button>
+                <span class="cal-nav-title">${monthName}</span>
+                <button type="button" class="cal-nav-btn" data-nav="today">Today</button>
+                <button type="button" class="cal-nav-btn" data-nav="next">›</button>
+            </div>
+            <div class="cal-month-grid">
+                ${["S", "M", "T", "W", "T", "F", "S"].map(d => `<span class="cal-dow">${d}</span>`).join("")}`;
+        for (let i = 0; i < firstWeekday; i++)
+            html += `<span class="cal-day cal-day-blank"></span>`;
+        for (let d = 1; d <= lastDay; d++) {
+            const k = `${viewYear}-${viewMonth}-${d}`;
+            const hasEv = eventsByDay.has(k);
+            const sel = selectedDay.getFullYear() === viewYear && selectedDay.getMonth() === viewMonth && selectedDay.getDate() === d;
+            const cls = ["cal-day"];
+            if (isToday(viewYear, viewMonth, d))
+                cls.push("cal-day-today");
+            if (sel)
+                cls.push("cal-day-selected");
+            if (hasEv)
+                cls.push("cal-day-has-event");
+            html += `<button type="button" class="${cls.join(" ")}" data-day="${d}">${d}</button>`;
+        }
+        html += `</div>`;
+        monthEl.innerHTML = html;
+        monthEl.querySelectorAll("[data-day]").forEach(b => {
+            b.addEventListener("click", () => {
+                selectedDay = new Date(viewYear, viewMonth, +b.dataset.day);
+                renderMonth();
+                renderEvents();
+            });
+        });
+        monthEl.querySelectorAll(".cal-nav-btn").forEach(b => {
+            b.addEventListener("click", () => {
+                const nav = b.dataset.nav;
+                if (nav === "prev") {
+                    if (--viewMonth < 0) {
+                        viewMonth = 11;
+                        viewYear--;
+                    }
+                }
+                else if (nav === "next") {
+                    if (++viewMonth > 11) {
+                        viewMonth = 0;
+                        viewYear++;
+                    }
+                }
+                else if (nav === "today") {
+                    const t = new Date();
+                    viewYear = t.getFullYear();
+                    viewMonth = t.getMonth();
+                    selectedDay = t;
+                }
+                renderMonth();
+                renderEvents();
+            });
+        });
+    };
+    const renderEvents = () => {
+        const dayStart = new Date(selectedDay.getFullYear(), selectedDay.getMonth(), selectedDay.getDate()).getTime();
+        const horizon = dayStart + 30 * 86400_000;
+        const upcoming = events
+            .filter(e => e.start >= dayStart && e.start < horizon)
+            .sort((a, b) => a.start - b.start);
+        if (upcoming.length === 0) {
+            eventsEl.innerHTML = `<div class="cal-empty">No events in the next 30 days from ${selectedDay.toLocaleDateString()}.</div>`;
+            return;
+        }
+        const fmt = (e) => {
+            const d = new Date(e.start);
+            const date = d.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" });
+            const time = e.allDay ? "all day" : d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
+            return `${date} · ${time}`;
+        };
+        eventsEl.innerHTML = upcoming.map(e => `
+            <div class="cal-event" data-id="${e.id}">
+                <div class="cal-event-time">${fmt(e)}</div>
+                <div class="cal-event-title">${escapeHtml(e.title)}</div>
+                ${e.location ? `<div class="cal-event-loc">${escapeHtml(e.location)}</div>` : ""}
+                <button type="button" class="cal-event-del" title="Delete">×</button>
+            </div>`).join("");
+        eventsEl.querySelectorAll(".cal-event").forEach(row => {
+            row.querySelector(".cal-event-del")?.addEventListener("click", () => {
+                const id = row.dataset.id;
+                events = events.filter(e => e.id !== id);
+                saveEvents(events);
+                renderEvents();
+                renderMonth();
+            });
+        });
+    };
+    panel.querySelector("#cal-new")?.addEventListener("click", () => {
+        const title = prompt("Event title:");
+        if (!title)
+            return;
+        const dateStr = prompt("Date and time (YYYY-MM-DD HH:MM, or YYYY-MM-DD for all-day):", selectedDay.toISOString().slice(0, 10) + " 09:00");
+        if (!dateStr)
+            return;
+        const allDay = !/\d{1,2}:\d{2}/.test(dateStr);
+        const start = Date.parse(dateStr.replace(" ", "T"));
+        if (isNaN(start)) {
+            alert("Couldn't parse that date.");
+            return;
+        }
+        const ev = {
+            id: `cal-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+            title, start, end: start + (allDay ? 86400_000 : 3600_000),
+            allDay, source: "local",
+        };
+        events.push(ev);
+        saveEvents(events);
+        renderMonth();
+        renderEvents();
+    });
+    const close = () => {
+        backdrop.remove();
+        document.removeEventListener("keydown", onKey, true);
+        isOpen = false;
+    };
+    const onKey = (e) => {
+        if (e.key === "Escape") {
+            e.stopPropagation();
+            e.preventDefault();
+            close();
+        }
+    };
+    document.addEventListener("keydown", onKey, true);
+    panel.querySelector("#cal-close").addEventListener("click", close);
+    panel.querySelector('[data-action="close"]').addEventListener("click", close);
+    backdrop.addEventListener("mousedown", (e) => { if (e.target === backdrop)
+        close(); });
+    renderMonth();
+    renderEvents();
+}
+function escapeHtml(s) {
+    return s.replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", "\"": "&quot;", "'": "&#39;" }[c]));
+}
+//# sourceMappingURL=calendar.js.map

package/client/components/calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.js","sourceRoot":"","sources":["calendar.ts"],"names":[],"mappings":"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"}

package/client/components/calendar.ts

@@ -0,0 +1,211 @@
+/**
+ * Calendar pane — Thunderbird Lightning "Today Pane" style.
+ *
+ * Phase-1 scope (this commit): a usable mini-month + upcoming-events list
+ * sourced from a local-only event store. Google Calendar sync is a separate
+ * step (oauthsupport scope is already wired; the dispatcher branch + provider
+ * are owed). UI lands first so the data layer can be slotted in without
+ * UX rework.
+ */
+
+interface CalEvent {
+    id: string;
+    title: string;
+    start: number;        // ms since epoch
+    end: number;
+    allDay?: boolean;
+    location?: string;
+    notes?: string;
+    source?: "local" | "google";
+}
+
+const LOCAL_STORE_KEY = "mailx-cal-events-v1";
+let isOpen = false;
+
+function loadEvents(): CalEvent[] {
+    try {
+        const raw = localStorage.getItem(LOCAL_STORE_KEY);
+        if (!raw) return [];
+        const arr = JSON.parse(raw);
+        return Array.isArray(arr) ? arr : [];
+    } catch { return []; }
+}
+function saveEvents(events: CalEvent[]): void {
+    try { localStorage.setItem(LOCAL_STORE_KEY, JSON.stringify(events)); } catch { /* */ }
+}
+
+export async function openCalendar(): Promise<void> {
+    if (isOpen) return;
+    isOpen = true;
+
+    const backdrop = document.createElement("div");
+    backdrop.className = "mailx-modal-backdrop";
+    const panel = document.createElement("div");
+    panel.className = "mailx-modal mailx-modal-wide";
+    panel.innerHTML = `
+        <div class="mailx-modal-title">
+            <span class="mailx-modal-title-text">Calendar</span>
+            <button type="button" class="mailx-modal-close" id="cal-close" title="Close (Esc)" aria-label="Close">&times;</button>
+        </div>
+        <div class="cal-grid">
+            <div class="cal-month" id="cal-month"></div>
+            <div class="cal-upcoming">
+                <div class="cal-section-title">Upcoming</div>
+                <div id="cal-events"></div>
+                <button type="button" class="mailx-modal-btn mailx-modal-btn-primary" id="cal-new" style="margin-top:12px;">+ New event</button>
+            </div>
+        </div>
+        <div class="mailx-modal-buttons">
+            <span class="mailx-modal-spacer"></span>
+            <span class="cal-source-note">Local-only · Google Calendar sync pending</span>
+            <button type="button" class="mailx-modal-btn" data-action="close">Close</button>
+        </div>`;
+    backdrop.appendChild(panel);
+    document.body.appendChild(backdrop);
+
+    const monthEl = panel.querySelector<HTMLElement>("#cal-month")!;
+    const eventsEl = panel.querySelector<HTMLElement>("#cal-events")!;
+
+    let viewYear = new Date().getFullYear();
+    let viewMonth = new Date().getMonth();
+    let selectedDay = new Date();
+    let events = loadEvents();
+
+    const renderMonth = () => {
+        const first = new Date(viewYear, viewMonth, 1);
+        const lastDay = new Date(viewYear, viewMonth + 1, 0).getDate();
+        const firstWeekday = first.getDay();
+        const monthName = first.toLocaleDateString(undefined, { month: "long", year: "numeric" });
+        const today = new Date();
+        const isToday = (y: number, m: number, d: number) =>
+            y === today.getFullYear() && m === today.getMonth() && d === today.getDate();
+        const eventsByDay = new Map<string, CalEvent[]>();
+        for (const e of events) {
+            const d = new Date(e.start);
+            const k = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+            const arr = eventsByDay.get(k) || [];
+            arr.push(e);
+            eventsByDay.set(k, arr);
+        }
+        let html = `
+            <div class="cal-nav">
+                <button type="button" class="cal-nav-btn" data-nav="prev">‹</button>
+                <span class="cal-nav-title">${monthName}</span>
+                <button type="button" class="cal-nav-btn" data-nav="today">Today</button>
+                <button type="button" class="cal-nav-btn" data-nav="next">›</button>
+            </div>
+            <div class="cal-month-grid">
+                ${["S","M","T","W","T","F","S"].map(d => `<span class="cal-dow">${d}</span>`).join("")}`;
+        for (let i = 0; i < firstWeekday; i++) html += `<span class="cal-day cal-day-blank"></span>`;
+        for (let d = 1; d <= lastDay; d++) {
+            const k = `${viewYear}-${viewMonth}-${d}`;
+            const hasEv = eventsByDay.has(k);
+            const sel = selectedDay.getFullYear() === viewYear && selectedDay.getMonth() === viewMonth && selectedDay.getDate() === d;
+            const cls = ["cal-day"];
+            if (isToday(viewYear, viewMonth, d)) cls.push("cal-day-today");
+            if (sel) cls.push("cal-day-selected");
+            if (hasEv) cls.push("cal-day-has-event");
+            html += `<button type="button" class="${cls.join(" ")}" data-day="${d}">${d}</button>`;
+        }
+        html += `</div>`;
+        monthEl.innerHTML = html;
+        monthEl.querySelectorAll<HTMLButtonElement>("[data-day]").forEach(b => {
+            b.addEventListener("click", () => {
+                selectedDay = new Date(viewYear, viewMonth, +b.dataset.day!);
+                renderMonth();
+                renderEvents();
+            });
+        });
+        monthEl.querySelectorAll<HTMLButtonElement>(".cal-nav-btn").forEach(b => {
+            b.addEventListener("click", () => {
+                const nav = b.dataset.nav;
+                if (nav === "prev") {
+                    if (--viewMonth < 0) { viewMonth = 11; viewYear--; }
+                } else if (nav === "next") {
+                    if (++viewMonth > 11) { viewMonth = 0; viewYear++; }
+                } else if (nav === "today") {
+                    const t = new Date();
+                    viewYear = t.getFullYear(); viewMonth = t.getMonth(); selectedDay = t;
+                }
+                renderMonth();
+                renderEvents();
+            });
+        });
+    };
+
+    const renderEvents = () => {
+        const dayStart = new Date(selectedDay.getFullYear(), selectedDay.getMonth(), selectedDay.getDate()).getTime();
+        const horizon = dayStart + 30 * 86400_000;
+        const upcoming = events
+            .filter(e => e.start >= dayStart && e.start < horizon)
+            .sort((a, b) => a.start - b.start);
+        if (upcoming.length === 0) {
+            eventsEl.innerHTML = `<div class="cal-empty">No events in the next 30 days from ${selectedDay.toLocaleDateString()}.</div>`;
+            return;
+        }
+        const fmt = (e: CalEvent) => {
+            const d = new Date(e.start);
+            const date = d.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" });
+            const time = e.allDay ? "all day" : d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
+            return `${date} · ${time}`;
+        };
+        eventsEl.innerHTML = upcoming.map(e => `
+            <div class="cal-event" data-id="${e.id}">
+                <div class="cal-event-time">${fmt(e)}</div>
+                <div class="cal-event-title">${escapeHtml(e.title)}</div>
+                ${e.location ? `<div class="cal-event-loc">${escapeHtml(e.location)}</div>` : ""}
+                <button type="button" class="cal-event-del" title="Delete">×</button>
+            </div>`).join("");
+        eventsEl.querySelectorAll<HTMLElement>(".cal-event").forEach(row => {
+            row.querySelector(".cal-event-del")?.addEventListener("click", () => {
+                const id = row.dataset.id!;
+                events = events.filter(e => e.id !== id);
+                saveEvents(events);
+                renderEvents();
+                renderMonth();
+            });
+        });
+    };
+
+    panel.querySelector<HTMLButtonElement>("#cal-new")?.addEventListener("click", () => {
+        const title = prompt("Event title:");
+        if (!title) return;
+        const dateStr = prompt(
+            "Date and time (YYYY-MM-DD HH:MM, or YYYY-MM-DD for all-day):",
+            selectedDay.toISOString().slice(0, 10) + " 09:00"
+        );
+        if (!dateStr) return;
+        const allDay = !/\d{1,2}:\d{2}/.test(dateStr);
+        const start = Date.parse(dateStr.replace(" ", "T"));
+        if (isNaN(start)) { alert("Couldn't parse that date."); return; }
+        const ev: CalEvent = {
+            id: `cal-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+            title, start, end: start + (allDay ? 86400_000 : 3600_000),
+            allDay, source: "local",
+        };
+        events.push(ev);
+        saveEvents(events);
+        renderMonth();
+        renderEvents();
+    });
+
+    const close = () => {
+        backdrop.remove();
+        document.removeEventListener("keydown", onKey, true);
+        isOpen = false;
+    };
+    const onKey = (e: KeyboardEvent) => {
+        if (e.key === "Escape") { e.stopPropagation(); e.preventDefault(); close(); }
+    };
+    document.addEventListener("keydown", onKey, true);
+    panel.querySelector<HTMLButtonElement>("#cal-close")!.addEventListener("click", close);
+    panel.querySelector<HTMLButtonElement>('[data-action="close"]')!.addEventListener("click", close);
+    backdrop.addEventListener("mousedown", (e) => { if (e.target === backdrop) close(); });
+
+    renderMonth();
+    renderEvents();
+}
+
+function escapeHtml(s: string): string {
+    return s.replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", "\"": "&quot;", "'": "&#39;" }[c]!));
+}

package/client/components/context-menu.js

@@ -0,0 +1,80 @@
+/**
+ * Simple context menu component.
+ * Shows a menu at a given position with clickable items.
+ */
+let activeMenu = null;
+let dismissListener = null;
+let escapeListener = null;
+/** Close any open context menu and remove dismiss listeners */
+export function closeContextMenu() {
+    if (activeMenu) {
+        activeMenu.remove();
+        activeMenu = null;
+    }
+    if (dismissListener) {
+        document.removeEventListener("pointerdown", dismissListener, true);
+        dismissListener = null;
+    }
+    if (escapeListener) {
+        document.removeEventListener("keydown", escapeListener, true);
+        escapeListener = null;
+    }
+}
+/** Show a context menu at the given position */
+export function showContextMenu(x, y, items) {
+    closeContextMenu();
+    const menu = document.createElement("div");
+    menu.className = "ctx-menu";
+    for (const item of items) {
+        if (item.separator) {
+            const sep = document.createElement("div");
+            sep.className = "ctx-sep";
+            menu.appendChild(sep);
+            continue;
+        }
+        const el = document.createElement("div");
+        el.className = "ctx-item" + (item.disabled ? " ctx-disabled" : "");
+        el.textContent = item.label;
+        if (!item.disabled) {
+            el.addEventListener("click", () => {
+                closeContextMenu();
+                item.action();
+            });
+        }
+        menu.appendChild(el);
+    }
+    menu.style.left = `${x}px`;
+    menu.style.top = `${y}px`;
+    document.body.appendChild(menu);
+    // Adjust if menu goes off-screen
+    const rect = menu.getBoundingClientRect();
+    if (rect.right > window.innerWidth)
+        menu.style.left = `${x - rect.width}px`;
+    if (rect.bottom > window.innerHeight)
+        menu.style.top = `${y - rect.height}px`;
+    activeMenu = menu;
+    // Dismiss on click/tap outside the menu. Uses pointerdown in capture phase
+    // so it fires before any child handler and catches both left- and right-clicks.
+    // Deferred by one frame so the opening pointerdown doesn't immediately close it.
+    requestAnimationFrame(() => {
+        dismissListener = (e) => {
+            if (activeMenu && !activeMenu.contains(e.target)) {
+                closeContextMenu();
+            }
+        };
+        document.addEventListener("pointerdown", dismissListener, true);
+        escapeListener = (e) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                e.stopPropagation();
+                closeContextMenu();
+            }
+        };
+        document.addEventListener("keydown", escapeListener, true);
+    });
+}
+// Scroll anywhere closes the menu (capture phase so nested scrollers trigger it)
+document.addEventListener("scroll", closeContextMenu, true);
+// A new right-click that opens a different menu goes through showContextMenu→closeContextMenu
+document.addEventListener("contextmenu", () => { });
+//# sourceMappingURL=context-menu.js.map

package/client/components/context-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.js","sourceRoot":"","sources":["context-menu.ts"],"names":[],"mappings":"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"}

package/client/components/context-menu.ts

@@ -0,0 +1,95 @@
+/**
+ * Simple context menu component.
+ * Shows a menu at a given position with clickable items.
+ */
+
+let activeMenu: HTMLElement | null = null;
+let dismissListener: ((e: Event) => void) | null = null;
+let escapeListener: ((e: KeyboardEvent) => void) | null = null;
+
+export interface MenuItem {
+    label: string;
+    action: () => void;
+    disabled?: boolean;
+    separator?: boolean;
+}
+
+/** Close any open context menu and remove dismiss listeners */
+export function closeContextMenu(): void {
+    if (activeMenu) {
+        activeMenu.remove();
+        activeMenu = null;
+    }
+    if (dismissListener) {
+        document.removeEventListener("pointerdown", dismissListener, true);
+        dismissListener = null;
+    }
+    if (escapeListener) {
+        document.removeEventListener("keydown", escapeListener, true);
+        escapeListener = null;
+    }
+}
+
+/** Show a context menu at the given position */
+export function showContextMenu(x: number, y: number, items: MenuItem[]): void {
+    closeContextMenu();
+
+    const menu = document.createElement("div");
+    menu.className = "ctx-menu";
+
+    for (const item of items) {
+        if (item.separator) {
+            const sep = document.createElement("div");
+            sep.className = "ctx-sep";
+            menu.appendChild(sep);
+            continue;
+        }
+        const el = document.createElement("div");
+        el.className = "ctx-item" + (item.disabled ? " ctx-disabled" : "");
+        el.textContent = item.label;
+        if (!item.disabled) {
+            el.addEventListener("click", () => {
+                closeContextMenu();
+                item.action();
+            });
+        }
+        menu.appendChild(el);
+    }
+
+    menu.style.left = `${x}px`;
+    menu.style.top = `${y}px`;
+    document.body.appendChild(menu);
+
+    // Adjust if menu goes off-screen
+    const rect = menu.getBoundingClientRect();
+    if (rect.right > window.innerWidth) menu.style.left = `${x - rect.width}px`;
+    if (rect.bottom > window.innerHeight) menu.style.top = `${y - rect.height}px`;
+
+    activeMenu = menu;
+
+    // Dismiss on click/tap outside the menu. Uses pointerdown in capture phase
+    // so it fires before any child handler and catches both left- and right-clicks.
+    // Deferred by one frame so the opening pointerdown doesn't immediately close it.
+    requestAnimationFrame(() => {
+        dismissListener = (e: Event) => {
+            if (activeMenu && !activeMenu.contains(e.target as Node)) {
+                closeContextMenu();
+            }
+        };
+        document.addEventListener("pointerdown", dismissListener, true);
+
+        escapeListener = (e: KeyboardEvent) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                e.stopPropagation();
+                closeContextMenu();
+            }
+        };
+        document.addEventListener("keydown", escapeListener, true);
+    });
+}
+
+// Scroll anywhere closes the menu (capture phase so nested scrollers trigger it)
+document.addEventListener("scroll", closeContextMenu, true);
+// A new right-click that opens a different menu goes through showContextMenu→closeContextMenu
+document.addEventListener("contextmenu", () => { /* handled by showContextMenu */ });