gitmaps 1.0.0

package/app/lib/settings-modal.tsx

@@ -0,0 +1,374 @@
+// @ts-nocheck
+/**
+ * Settings Modal — gear icon opens a premium settings panel
+ * with organized toggle switches and sliders.
+ */
+import { render } from 'melina/client';
+import { getSettings, updateSettings, resetSettings, type GitCanvasSettings } from './settings';
+
+let _modal: HTMLElement | null = null;
+
+// ─── JSX Components ─────────────────────────────────────
+
+function ToggleGroup({ id, value, options }: {
+    id: string;
+    value: string;
+    options: { value: string; label: string }[];
+}) {
+    return (
+        <div className="settings-toggle-group" id={id}>
+            {options.map(opt => (
+                <button
+                    key={opt.value}
+                    className={`settings-toggle-btn ${value === opt.value ? 'active' : ''}`}
+                    data-value={opt.value}
+                >
+                    {opt.label}
+                </button>
+            ))}
+        </div>
+    );
+}
+
+function Slider({ id, valueId, min, max, step, value, suffix }: {
+    id: string; valueId: string;
+    min: number; max: number; step: number;
+    value: number; suffix: string;
+}) {
+    return (
+        <div className="settings-slider-group">
+            <input type="range" id={id} className="settings-slider"
+                min={String(min)} max={String(max)} step={String(step)} value={String(value)} />
+            <span className="settings-slider-value" id={valueId}>{value}{suffix}</span>
+        </div>
+    );
+}
+
+function Switch({ id, checked }: { id: string; checked: boolean }) {
+    return (
+        <label className="settings-switch">
+            <input type="checkbox" id={id} checked={checked} />
+            <span className="settings-switch-slider"></span>
+        </label>
+    );
+}
+
+function SettingsRow({ label, desc, children }: {
+    label: string; desc: string; children: any;
+}) {
+    return (
+        <div className="settings-row">
+            <div className="settings-label">
+                <span className="settings-label-text">{label}</span>
+                <span className="settings-label-desc">{desc}</span>
+            </div>
+            {children}
+        </div>
+    );
+}
+
+function SettingsSection({ title, children }: { title: string; children: any }) {
+    return (
+        <div className="settings-section">
+            <h3 className="settings-section-title">{title}</h3>
+            {children}
+        </div>
+    );
+}
+
+function SettingsPanel({ settings }: { settings: GitCanvasSettings }) {
+    const cardCols = Math.round(settings.cardWidth / 7.2);
+    return (
+        <div className="settings-modal">
+            <div className="settings-header">
+                <h2 className="settings-title">
+                    <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor"
+                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="12" cy="12" r="3" />
+                        <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z" />
+                    </svg>
+                    Settings
+                </h2>
+                <button className="settings-close" id="closeSettings">✕</button>
+            </div>
+            <div className="settings-body">
+                {/* Rendering Section */}
+                <SettingsSection title="Rendering">
+                    <SettingsRow label="Text Rendering" desc="Canvas (fast) or DOM (rich interactions)">
+                        <ToggleGroup id="settingRenderMode" value={settings.renderMode}
+                            options={[{ value: 'canvas', label: 'Canvas' }, { value: 'dom', label: 'DOM' }]} />
+                    </SettingsRow>
+                    <SettingsRow label="Font Size" desc="Code font size in pixels">
+                        <Slider id="settingFontSize" valueId="fontSizeValue"
+                            min={10} max={18} step={1} value={settings.fontSize} suffix="px" />
+                    </SettingsRow>
+                    <SettingsRow label="Popup Font Size" desc="Font size for hover popup previews">
+                        <Slider id="settingPopupFontSize" valueId="popupFontSizeValue"
+                            min={10} max={24} step={1} value={settings.popupFontSize} suffix="px" />
+                    </SettingsRow>
+                    <SettingsRow label="Card Width" desc="Character columns per card (like editors)">
+                        <Slider id="settingCardWidth" valueId="cardWidthValue"
+                            min={40} max={120} step={5} value={cardCols} suffix=" cols" />
+                    </SettingsRow>
+                </SettingsSection>
+
+                {/* Interface Section */}
+                <SettingsSection title="Interface">
+                    <SettingsRow label="Theme" desc="Dark or light appearance">
+                        <ToggleGroup id="settingTheme" value={settings.theme}
+                            options={[{ value: 'dark', label: '🌙 Dark' }, { value: 'light', label: '☀️ Light' }]} />
+                    </SettingsRow>
+                    <SettingsRow label="Control Mode" desc="Simple: drag=pan / Advanced: space+drag=pan">
+                        <ToggleGroup id="settingControlMode" value={settings.controlMode}
+                            options={[{ value: 'simple', label: 'Simple' }, { value: 'advanced', label: 'Advanced' }]} />
+                    </SettingsRow>
+                    <SettingsRow label="Show Minimap" desc="Overview map in the corner">
+                        <Switch id="settingMinimap" checked={settings.showMinimap} />
+                    </SettingsRow>
+                    <SettingsRow label="Show Connections" desc="Lines between importing files">
+                        <Switch id="settingConnections" checked={settings.showConnections} />
+                    </SettingsRow>
+                    <SettingsRow label="Auto-detect Imports" desc="Scan files for imports on load">
+                        <Switch id="settingAutoImports" checked={settings.autoDetectImports} />
+                    </SettingsRow>
+                </SettingsSection>
+
+                {/* Visualization Section */}
+                <SettingsSection title="Visualization">
+                    <SettingsRow label="Git Heatmap" desc="Color-code cards by commit frequency (H key)">
+                        <Switch id="settingHeatmap" checked={settings.heatmapEnabled} />
+                    </SettingsRow>
+                    <SettingsRow label="Heatmap Range" desc="Time range for commit activity">
+                        <Slider id="settingHeatmapDays" valueId="heatmapDaysValue"
+                            min={7} max={365} step={7} value={settings.heatmapDays} suffix=" days" />
+                    </SettingsRow>
+                </SettingsSection>
+
+                {/* Advanced Section */}
+                <SettingsSection title="Advanced">
+                    <SettingsRow label="Max Visible Lines" desc="Lines shown per card before virtual scroll">
+                        <Slider id="settingMaxLines" valueId="maxLinesValue"
+                            min={30} max={500} step={10} value={settings.maxVisibleLines} suffix="" />
+                    </SettingsRow>
+                </SettingsSection>
+            </div>
+            <div className="settings-footer">
+                <button className="settings-reset-btn" id="settingsReset">Reset to Defaults</button>
+                <span className="settings-footer-note">Changes are saved automatically</span>
+            </div>
+        </div>
+    );
+}
+
+/** Open the settings modal */
+export function openSettingsModal(ctx?: any) {
+    // Remove existing modal if any
+    if (_modal) { _modal.remove(); _modal = null; }
+
+    const settings = getSettings();
+
+    _modal = document.createElement('div');
+    _modal.id = 'settingsModal';
+    _modal.className = 'settings-modal-backdrop';
+    Object.assign(_modal.style, {
+        position: 'fixed',
+        top: '0',
+        left: '0',
+        width: '100vw',
+        height: '100vh',
+        zIndex: '10000',
+        background: 'rgba(0, 0, 0, 0.6)',
+        backdropFilter: 'blur(8px)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    });
+
+    document.body.appendChild(_modal);
+    render(<SettingsPanel settings={settings} />, _modal);
+
+    // Wire close
+    const close = () => { if (_modal) { _modal.remove(); _modal = null; } };
+    _modal.querySelector('#closeSettings')!.addEventListener('click', close);
+    _modal.addEventListener('click', (e) => { if (e.target === _modal) close(); });
+    document.addEventListener('keydown', function onEsc(e) {
+        if (e.key === 'Escape' && _modal) { close(); document.removeEventListener('keydown', onEsc); }
+    });
+
+    // Wire render mode toggle
+    const renderModeBtns = _modal.querySelectorAll('#settingRenderMode .settings-toggle-btn');
+    renderModeBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            renderModeBtns.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            updateSettings({ renderMode: btn.dataset.value as 'canvas' | 'dom' });
+            applyRenderMode(ctx, btn.dataset.value as string);
+        });
+    });
+
+    // Wire control mode toggle
+    const controlModeBtns = _modal.querySelectorAll('#settingControlMode .settings-toggle-btn');
+    controlModeBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            controlModeBtns.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            updateSettings({ controlMode: btn.dataset.value as 'simple' | 'advanced' });
+            applyControlMode(btn.dataset.value as string);
+        });
+    });
+
+    // Wire theme toggle
+    const themeBtns = _modal.querySelectorAll('#settingTheme .settings-toggle-btn');
+    themeBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            themeBtns.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            updateSettings({ theme: btn.dataset.value as 'dark' | 'light' });
+            applyTheme(btn.dataset.value as string);
+        });
+    });
+
+    // Wire sliders
+    const fontSlider = _modal.querySelector('#settingFontSize') as HTMLInputElement;
+    const fontValue = _modal.querySelector('#fontSizeValue')!;
+    fontSlider?.addEventListener('input', () => {
+        fontValue.textContent = `${fontSlider.value}px`;
+        updateSettings({ fontSize: parseInt(fontSlider.value) });
+        applyFontSize(parseInt(fontSlider.value));
+    });
+
+    const popupFontSlider = _modal.querySelector('#settingPopupFontSize') as HTMLInputElement;
+    const popupFontValue = _modal.querySelector('#popupFontSizeValue')!;
+    popupFontSlider?.addEventListener('input', () => {
+        popupFontValue.textContent = `${popupFontSlider.value}px`;
+        updateSettings({ popupFontSize: parseInt(popupFontSlider.value) });
+    });
+
+    const cardWidthSlider = _modal.querySelector('#settingCardWidth') as HTMLInputElement;
+    const cardWidthValue = _modal.querySelector('#cardWidthValue')!;
+    cardWidthSlider?.addEventListener('input', () => {
+        const cols = parseInt(cardWidthSlider.value);
+        const px = Math.round(cols * 7.2);
+        cardWidthValue.textContent = `${cols} cols`;
+        updateSettings({ cardWidth: px });
+        applyCardWidth(px);
+    });
+
+    const maxLinesSlider = _modal.querySelector('#settingMaxLines') as HTMLInputElement;
+    const maxLinesValue = _modal.querySelector('#maxLinesValue')!;
+    maxLinesSlider?.addEventListener('input', () => {
+        maxLinesValue.textContent = maxLinesSlider.value;
+        updateSettings({ maxVisibleLines: parseInt(maxLinesSlider.value) });
+    });
+
+    // Wire switches
+    const minimapSwitch = _modal.querySelector('#settingMinimap') as HTMLInputElement;
+    minimapSwitch?.addEventListener('change', () => {
+        updateSettings({ showMinimap: minimapSwitch.checked });
+        applyMinimap(minimapSwitch.checked);
+    });
+
+    const connectionsSwitch = _modal.querySelector('#settingConnections') as HTMLInputElement;
+    connectionsSwitch?.addEventListener('change', () => {
+        updateSettings({ showConnections: connectionsSwitch.checked });
+    });
+
+    const autoImportsSwitch = _modal.querySelector('#settingAutoImports') as HTMLInputElement;
+    autoImportsSwitch?.addEventListener('change', () => {
+        updateSettings({ autoDetectImports: autoImportsSwitch.checked });
+    });
+
+    // Wire heatmap switch
+    const heatmapSwitch = _modal.querySelector('#settingHeatmap') as HTMLInputElement;
+    heatmapSwitch?.addEventListener('change', () => {
+        updateSettings({ heatmapEnabled: heatmapSwitch.checked });
+        const repoPath = ctx?.snap?.()?.context?.repoPath;
+        if (repoPath) {
+            import('./heatmap').then(async ({ toggleHeatmap, injectHeatmapCSS, isHeatmapActive }) => {
+                injectHeatmapCSS();
+                // Only toggle if state differs from setting
+                if (heatmapSwitch.checked !== isHeatmapActive()) {
+                    await toggleHeatmap(repoPath);
+                }
+            });
+        }
+    });
+
+    // Wire heatmap days slider
+    const heatmapDaysSlider = _modal.querySelector('#settingHeatmapDays') as HTMLInputElement;
+    const heatmapDaysValue = _modal.querySelector('#heatmapDaysValue')!;
+    heatmapDaysSlider?.addEventListener('input', () => {
+        heatmapDaysValue.textContent = `${heatmapDaysSlider.value} days`;
+        updateSettings({ heatmapDays: parseInt(heatmapDaysSlider.value) });
+        const repoPath = ctx?.snap?.()?.context?.repoPath;
+        if (repoPath) {
+            import('./heatmap').then(async ({ refreshHeatmap, injectHeatmapCSS }) => {
+                injectHeatmapCSS();
+                await refreshHeatmap(repoPath);
+            });
+        }
+    });
+
+    // Wire reset
+    _modal.querySelector('#settingsReset')!.addEventListener('click', () => {
+        const defaults = resetSettings();
+        close();
+        setTimeout(() => openSettingsModal(ctx), 50);
+    });
+}
+
+// ─── Apply functions ─────────────────────────────────────
+
+function applyRenderMode(ctx: any, mode: string) {
+    if (!ctx) return;
+    ctx.useCanvasText = mode === 'canvas';
+    localStorage.setItem('gitcanvas:useCanvasText', String(ctx.useCanvasText));
+    const textToggle = document.getElementById('toggleCanvasText');
+    if (textToggle) textToggle.classList.toggle('active', ctx.useCanvasText);
+}
+
+function applyControlMode(mode: string) {
+    localStorage.setItem('gitcanvas:controlMode', mode);
+    const toggle = document.getElementById('toggleControlMode');
+    const icon = document.getElementById('controlModeIcon');
+    if (toggle) toggle.title = mode === 'simple'
+        ? 'Toggle control mode: Simple (drag=pan) / Advanced (space+drag=pan)'
+        : 'Toggle control mode: Advanced (space+drag=pan) / Simple (drag=pan)';
+}
+
+function applyFontSize(size: number) {
+    document.documentElement.style.setProperty('--code-font-size', `${size}px`);
+}
+
+function applyMinimap(show: boolean) {
+    const minimap = document.getElementById('minimapCanvas') || document.querySelector('.minimap-container');
+    if (minimap) (minimap as HTMLElement).style.display = show ? '' : 'none';
+}
+
+export function applyCardWidth(width: number) {
+    document.documentElement.style.setProperty('--card-width', width + 'px');
+    window.dispatchEvent(new CustomEvent('gitcanvas:card-width-changed', { detail: width }));
+    document.querySelectorAll('.file-card').forEach(card => {
+        const el = card as HTMLElement;
+        if (!el.style.height || el.style.height === '') {
+            el.style.width = `${width}px`;
+        }
+    });
+}
+
+/** Apply theme to document */
+export function applyTheme(theme: string) {
+    document.documentElement.setAttribute('data-theme', theme);
+}
+
+/** Apply all settings on startup */
+export function applyAllSettings(ctx?: any) {
+    const s = getSettings();
+    applyFontSize(s.fontSize);
+    applyCardWidth(s.cardWidth);
+    applyTheme(s.theme);
+    if (ctx) {
+        ctx.useCanvasText = s.renderMode === 'canvas';
+    }
+    requestAnimationFrame(() => applyMinimap(s.showMinimap));
+}

package/app/lib/settings.ts

@@ -0,0 +1,97 @@
+// @ts-nocheck
+/**
+ * Settings — persistent user preferences stored in localStorage.
+ * All settings have safe defaults and are loaded synchronously.
+ */
+
+const STORAGE_KEY = 'gitcanvas:settings';
+
+export interface GitCanvasSettings {
+    /** Text rendering mode: 'canvas' (default, fast) or 'dom' (rich, slower) */
+    renderMode: 'canvas' | 'dom';
+    /** Font size for code display (px) */
+    fontSize: number;
+    /** Show connection lines between imports */
+    showConnections: boolean;
+    /** Control mode: 'simple' (drag=pan) or 'advanced' (space+drag=pan) */
+    controlMode: 'simple' | 'advanced';
+    /** Show minimap */
+    showMinimap: boolean;
+    /** Card width (px) */
+    cardWidth: number;
+    /** Max visible lines before virtual scroll kicks in */
+    maxVisibleLines: number;
+    /** Auto-detect import connections on load */
+    autoDetectImports: boolean;
+    /** Theme: 'dark' (default) or 'light' */
+    theme: 'dark' | 'light';
+    /** Font size for hover popup (px) */
+    popupFontSize: number;
+    /** Git heatmap overlay enabled */
+    heatmapEnabled: boolean;
+    /** Heatmap time range in days */
+    heatmapDays: number;
+}
+
+const DEFAULTS: GitCanvasSettings = {
+    renderMode: 'canvas',
+    fontSize: 12,
+    showConnections: true,
+    controlMode: 'simple',
+    showMinimap: true,
+    cardWidth: 540,
+    maxVisibleLines: 100,
+    autoDetectImports: false,
+    theme: 'dark',
+    popupFontSize: 14,
+    heatmapEnabled: false,
+    heatmapDays: 90,
+};
+
+let _settings: GitCanvasSettings | null = null;
+
+/** Load settings from localStorage (synchronous, uses cache) */
+export function getSettings(): GitCanvasSettings {
+    if (_settings) return _settings;
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        if (raw) {
+            const parsed = JSON.parse(raw);
+            _settings = { ...DEFAULTS, ...parsed };
+        } else {
+            _settings = { ...DEFAULTS };
+        }
+    } catch {
+        _settings = { ...DEFAULTS };
+    }
+    return _settings!;
+}
+
+/** Update one or more settings and persist */
+export function updateSettings(partial: Partial<GitCanvasSettings>): GitCanvasSettings {
+    const current = getSettings();
+    Object.assign(current, partial);
+    _settings = current;
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(current));
+    } catch { }
+
+    // Dispatch custom event so listeners can react
+    window.dispatchEvent(new CustomEvent('gitcanvas:settings-changed', { detail: current }));
+    return current;
+}
+
+/** Reset all settings to defaults */
+export function resetSettings(): GitCanvasSettings {
+    _settings = { ...DEFAULTS };
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(_settings));
+    } catch { }
+    window.dispatchEvent(new CustomEvent('gitcanvas:settings-changed', { detail: _settings }));
+    return _settings;
+}
+
+/** Get a single setting value */
+export function getSetting<K extends keyof GitCanvasSettings>(key: K): GitCanvasSettings[K] {
+    return getSettings()[key];
+}

package/app/lib/shortcuts-panel.ts

@@ -0,0 +1,141 @@
+/**
+ * Keyboard Shortcuts Panel — press ? to show all available shortcuts
+ * 
+ * Collects all shortcuts scattered across the codebase into one
+ * discoverable, premium-looking reference panel.
+ */
+
+import { isCommandPaletteOpen } from './command-palette';
+
+const SHORTCUTS = [
+    {
+        category: 'Navigation', items: [
+            { keys: ['Ctrl', 'K'], description: 'Quick file search (command palette)' },
+            { keys: ['Ctrl', 'P'], description: 'Quick file search (VS Code style)' },
+            { keys: ['Ctrl', 'O'], description: 'Quick file search' },
+            { keys: ['Ctrl', 'F'], description: 'Global text search' },
+            { keys: ['←', '→'], description: 'Navigate commits' },
+            { keys: ['Space + Drag'], description: 'Pan canvas' },
+            { keys: ['Scroll'], description: 'Zoom in/out' },
+        ]
+    },
+    {
+        category: 'Selection & Arrangement', items: [
+            { keys: ['Ctrl', 'A'], description: 'Select all cards' },
+            { keys: ['Click'], description: 'Select card' },
+            { keys: ['Shift + Click'], description: 'Multi-select cards' },
+            { keys: ['H'], description: 'Arrange selected in row' },
+            { keys: ['V'], description: 'Arrange selected in column' },
+            { keys: ['G'], description: 'Arrange selected in grid' },
+        ]
+    },
+    {
+        category: 'Cards', items: [
+            { keys: ['F'], description: 'Toggle expand/collapse selected' },
+            { keys: ['W'], description: 'Fit selected to screen' },
+            { keys: ['Delete'], description: 'Hide selected cards' },
+            { keys: ['Dbl-click'], description: 'Zoom into file' },
+            { keys: ['Ctrl', '+'], description: 'Increase font size' },
+            { keys: ['Ctrl', '−'], description: 'Decrease font size' },
+        ]
+    },
+    {
+        category: 'Tools', items: [
+            { keys: ['H'], description: 'Toggle git heatmap (no selection)' },
+            { keys: ['Ctrl', 'N'], description: 'Create new file' },
+            { keys: ['Shift + Click line'], description: 'Start connection' },
+            { keys: ['Ctrl', 'Shift', 'E'], description: 'Export canvas as PNG' },
+            { keys: ['Ctrl', 'Shift', 'V'], description: 'Export viewport as PNG' },
+            { keys: ['Esc'], description: 'Deselect / cancel / close' },
+            { keys: ['?'], description: 'Show this panel' },
+        ]
+    },
+];
+
+let panel: HTMLElement | null = null;
+
+function createPanel(): void {
+    panel = document.createElement('div');
+    panel.id = 'shortcuts-overlay';
+
+    const inner = document.createElement('div');
+    inner.id = 'shortcuts-panel';
+
+    inner.innerHTML = `
+        <div class="sp-header">
+            <h2>⌨️ Keyboard Shortcuts</h2>
+            <button class="sp-close" aria-label="Close">✕</button>
+        </div>
+        <div class="sp-grid">
+            ${SHORTCUTS.map(cat => `
+                <div class="sp-category">
+                    <h3>${cat.category}</h3>
+                    ${cat.items.map(item => `
+                        <div class="sp-row">
+                            <div class="sp-keys">
+                                ${item.keys.map(k =>
+        k.includes('+') || k.includes('Drag') || k.includes('Click') || k.includes('click')
+            ? `<span class="sp-key sp-key--text">${k}</span>`
+            : `<kbd>${k}</kbd>`
+    ).join('<span class="sp-sep">+</span>')}
+                            </div>
+                            <span class="sp-desc">${item.description}</span>
+                        </div>
+                    `).join('')}
+                </div>
+            `).join('')}
+        </div>
+    `;
+
+    panel.appendChild(inner);
+    document.body.appendChild(panel);
+
+    // Close handlers
+    panel.addEventListener('mousedown', (e) => {
+        if (e.target === panel) close();
+    });
+    inner.querySelector('.sp-close')?.addEventListener('click', close);
+}
+
+function open(): void {
+    if (!panel) createPanel();
+    panel!.style.display = 'flex';
+    // Re-run animation
+    const inner = panel!.querySelector('#shortcuts-panel') as HTMLElement;
+    if (inner) {
+        inner.style.animation = 'none';
+        requestAnimationFrame(() => {
+            inner.style.animation = '';
+        });
+    }
+}
+
+function close(): void {
+    if (panel) panel.style.display = 'none';
+}
+
+function isOpen(): boolean {
+    return panel?.style.display === 'flex';
+}
+
+export function initShortcutsPanel(): void {
+    document.addEventListener('keydown', (e) => {
+        // Only trigger on `?` (Shift+/) when not in an input
+        const target = e.target as HTMLElement;
+        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return;
+        if (isCommandPaletteOpen()) return;
+
+        if (e.key === '?' || (e.shiftKey && e.key === '/')) {
+            e.preventDefault();
+            if (isOpen()) {
+                close();
+            } else {
+                open();
+            }
+        }
+
+        if (e.key === 'Escape' && isOpen()) {
+            close();
+        }
+    });
+}