markdownr 0.8.0 → 0.8.1

data/views/browser.erb

@@ -4,6 +4,11 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title><%= h(@title) %></title>
+<% if @allow_editor %>
+<script type="importmap">
+<%= editor_import_map_json %>
+</script>
+<% end %>
 <style>
   * { box-sizing: border-box; margin: 0; padding: 0; }
   body {
@@ -89,6 +94,8 @@
     overflow: auto;
     -webkit-overflow-scrolling: touch;
     font-size: 0.85rem;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0,0,0,0.35) transparent;
   }
   .br-popup-resize {
     position: absolute;
@@ -101,6 +108,16 @@
     z-index: 2;
   }
 
+  /* ── Collapsed popup (double-click header to toggle) ── */
+  .br-popup.collapsed {
+    height: auto !important;
+    min-height: 0 !important;
+    max-height: none !important;
+  }
+  .br-popup.collapsed .br-popup-body { display: none; }
+  .br-popup.collapsed .br-popup-resize { display: none; }
+  .br-popup.collapsed .br-popup-header { border-bottom: none; }
+
   /* ── View menu popup ── */
   .br-popup.view-menu {
     width: auto;
@@ -225,17 +242,48 @@
     font-family: Georgia, "Times New Roman", serif;
   }
   .br-md-content > :first-child { margin-top: 0; }
-  .br-md-content h1 { font-size: 1.3rem; margin: 1.2rem 0 0.6rem; color: #3a3a3a; }
+  .br-md-content h1 { font-size: 1.65rem; margin: 1.4rem 0 0.7rem; color: #2a2a2a; }
   .br-md-content h2 {
-    font-size: 1.1rem; margin: 1.4rem 0 0.5rem; color: #3a3a3a;
-    border-bottom: 1px solid #e0d8c8; padding-bottom: 0.2rem;
+    font-size: 1.2rem; margin: 1.4rem 0 0.5rem; color: #3a3a3a;
+    border-bottom: 1px solid #b5a78f; padding-bottom: 0.05rem;
   }
-  .br-md-content h3 { font-size: 1rem; margin: 1.1rem 0 0.4rem; color: #555; }
+  .br-md-content h3 { font-size: 1rem; margin: 1.1rem 0 0.4rem 0.75rem; color: #3a3a3a; }
   .br-md-content blockquote {
     border-left: 4px solid #d4b96a; margin: 0.8rem 0; padding: 0.4rem 1rem;
     background: #fdfcf6; color: #4a4a4a; font-style: italic;
   }
   .br-md-content blockquote p { white-space: pre-wrap; margin: 0; }
+  .br-md-content .callout {
+    border-left: 4px solid var(--callout-color, #888);
+    background: color-mix(in srgb, var(--callout-color, #888) 10%, transparent);
+    border-radius: 4px;
+    margin: 0.8rem 0;
+    padding: 0.5rem 0.8rem;
+    font-style: normal;
+    color: #2a2a2a;
+  }
+  .br-md-content .callout .callout-title {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    font-weight: 600;
+    color: var(--callout-color, #444);
+    cursor: default;
+  }
+  .br-md-content .callout details > summary.callout-title { cursor: pointer; list-style: none; }
+  .br-md-content .callout details > summary.callout-title::-webkit-details-marker { display: none; }
+  .br-md-content .callout details > summary.callout-title::after {
+    content: "▸";
+    margin-left: auto;
+    font-size: 0.7rem;
+    transition: transform 0.15s;
+  }
+  .br-md-content .callout details[open] > summary.callout-title::after { transform: rotate(90deg); }
+  .br-md-content .callout .callout-icon { flex-shrink: 0; }
+  .br-md-content .callout .callout-content { margin-top: 0.35rem; }
+  .br-md-content .callout .callout-content > :first-child { margin-top: 0; }
+  .br-md-content .callout .callout-content > :last-child { margin-bottom: 0; }
+  .br-md-content .callout .callout-content p { white-space: normal; margin: 0.4rem 0; }
   .br-md-content a { color: #8b6914; text-decoration: none; border-bottom: 1px solid #d4b96a; }
   .br-md-content a:hover { border-bottom-color: #8b6914; }
   .br-md-content code {
@@ -245,8 +293,34 @@
   .br-md-content pre {
     background: #2d2d2d; color: #f0f0f0; padding: 0.8rem 1rem;
     border-radius: 6px; overflow-x: auto; font-size: 0.82rem; line-height: 1.5;
+    position: relative;
   }
   .br-md-content pre code { background: none; padding: 0; color: inherit; }
+
+  /* Copy-to-clipboard button on <pre> blocks */
+  .copy-btn {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    background: rgba(255, 255, 255, 0.08);
+    color: #ddd;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    border-radius: 4px;
+    padding: 3px 6px;
+    cursor: pointer;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+    line-height: 0;
+    opacity: 0;
+    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
+    z-index: 1;
+  }
+  .copy-btn svg { display: block; }
+  pre:hover > .copy-btn,
+  .copy-btn:focus { opacity: 1; }
+  .copy-btn:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
+  .copy-btn.copied {
+    background: #2e7d32; color: #fff; border-color: #2e7d32; opacity: 1;
+  }
   .br-md-content hr { border: none; border-top: 1px solid #e0d8c8; margin: 1.5rem 0; }
   .br-md-content ul, .br-md-content ol { padding-left: 1.5rem; }
   .br-md-content li { margin-bottom: 0.2rem; }
@@ -297,12 +371,116 @@
     background: #2d2d2d; color: #f0f0f0; padding: 1rem 1.2rem;
     overflow: auto; font-family: "SF Mono", Menlo, Consolas, monospace;
     font-size: 0.8rem; line-height: 1.5; flex: 1; min-height: 0;
+    position: relative;
   }
 
   /* Rouge Monokai syntax highlighting (popup + full-screen) */
   <%= Rouge::Themes::Monokai.render(scope: '.br-code-view').gsub(/^\.br-code-view \{\n.*?background-color:.*?\n\}$/m, '') %>
   <%= Rouge::Themes::Monokai.render(scope: '.highlight').gsub(/^\.highlight \{\n.*?background-color:.*?\n\}$/m, '') %>
 
+  /* ── In-popup editor (CodeMirror) ── */
+  .br-popup-edit-btn {
+    background: none; border: none;
+    font-size: 0.75rem; line-height: 1;
+    color: #8b6914; cursor: pointer;
+    padding: 0.15rem 0.45rem;
+    border: 1px solid #d4b96a;
+    border-radius: 4px;
+    flex-shrink: 0;
+    font-family: inherit;
+  }
+  .br-popup-edit-btn:hover { background: #f5f0e0; color: #5b4710; }
+  .br-popup.is-editing .br-popup-edit-btn { display: none; }
+  .br-editor-toolbar {
+    display: flex; gap: 0.4rem; align-items: center;
+    padding: 0.35rem 0.6rem;
+    background: #f5f1ea; border-bottom: 1px solid #e8e4dc;
+    font-size: 0.75rem; color: #555; flex-shrink: 0;
+  }
+  .br-editor-toolbar .br-editor-lang {
+    color: #888; margin-right: auto; font-family: "SF Mono", Menlo, Consolas, monospace;
+  }
+  .br-editor-toolbar button {
+    padding: 0.25rem 0.7rem; font-size: 0.75rem;
+    border: 1px solid #d4b96a; border-radius: 4px;
+    background: #faf8f4; color: #555; cursor: pointer;
+    font-family: inherit;
+  }
+  .br-editor-toolbar button:hover:not(:disabled) { background: #f0ece4; color: #2c2c2c; }
+  .br-editor-toolbar button:disabled { opacity: 0.45; cursor: default; }
+  .br-editor-toolbar .br-editor-save { background: #27ae60; color: #fff; border-color: #219a52; }
+  .br-editor-toolbar .br-editor-save:hover:not(:disabled) { background: #219a52; color: #fff; }
+  .br-editor-toolbar .br-editor-save.dirty {
+    background: #e6c029; color: #2c2c2c; border-color: #c5a51d;
+  }
+  .br-editor-toolbar .br-editor-save.dirty:hover { background: #c5a51d; color: #2c2c2c; }
+  .br-editor-toolbar .br-editor-vim.active {
+    background: #2a6496; color: #fff; border-color: #1d4970;
+  }
+  .br-editor-saved-flash {
+    color: #27ae60; font-size: 0.75rem; margin-left: 0.4rem;
+    opacity: 0; transition: opacity 0.3s;
+  }
+  .br-editor-saved-flash.show { opacity: 1; }
+  .br-editor-pane {
+    flex: 1; min-height: 0; min-width: 0;
+    overflow: hidden; display: flex; flex-direction: column;
+  }
+  .br-editor-pane .cm-editor {
+    height: 100%; width: 100%; flex: 1; min-height: 0;
+    font-size: 0.82rem;
+  }
+  .br-editor-split {
+    flex: 1; min-height: 0; display: flex; flex-direction: row;
+    overflow: hidden;
+  }
+  .br-editor-divider {
+    width: 5px; flex-shrink: 0; cursor: col-resize;
+    background: #e0d8c8; border-left: 1px solid #c8c0b0; border-right: 1px solid #c8c0b0;
+  }
+  .br-editor-divider:hover { background: #d4b96a; }
+  .br-editor-preview {
+    flex: 1 1 50%; min-width: 0; min-height: 0;
+    overflow: auto; background: #faf8f4; padding: 0.6rem 0.8rem;
+    font-size: 0.85rem;
+  }
+  /* Live-preview decorations inside the markdown editor */
+  .br-editor-pane .cm-editor .cm-md-line-h1 { font-size: 1.55em; font-weight: 700; line-height: 1.3; }
+  .br-editor-pane .cm-editor .cm-md-line-h2 { font-size: 1.35em; font-weight: 700; line-height: 1.3; }
+  .br-editor-pane .cm-editor .cm-md-line-h3 { font-size: 1.2em; font-weight: 700; }
+  .br-editor-pane .cm-editor .cm-md-line-h4 { font-size: 1.08em; font-weight: 700; }
+  .br-editor-pane .cm-editor .cm-md-line-h5 { font-size: 1em; font-weight: 700; }
+  .br-editor-pane .cm-editor .cm-md-line-h6 { font-size: 0.95em; font-weight: 700; opacity: 0.85; }
+  .br-editor-pane .cm-editor .cm-md-strong { font-weight: 700; }
+  .br-editor-pane .cm-editor .cm-md-em { font-style: italic; }
+  .br-editor-pane .cm-editor .cm-md-code {
+    background: rgba(150, 150, 150, 0.18);
+    padding: 0 0.25em;
+    border-radius: 3px;
+    font-family: "SF Mono", Menlo, Consolas, monospace;
+  }
+  .br-editor-pane .cm-editor .cm-md-link {
+    color: #6db1ff;
+    text-decoration: underline;
+  }
+  .br-editor-pane .cm-editor .cm-md-bullet {
+    color: #888;
+    font-weight: 700;
+  }
+
+  .br-editor-conflict {
+    background: #fde8e8; border-bottom: 1px solid #e6b3b3;
+    padding: 0.5rem 0.7rem; font-size: 0.78rem; color: #7a1f1f;
+    display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
+    flex-shrink: 0;
+  }
+  .br-editor-conflict button {
+    padding: 0.2rem 0.65rem; font-size: 0.75rem; cursor: pointer;
+    border: 1px solid #c0392b; border-radius: 3px;
+    background: #fff; color: #7a1f1f; font-family: inherit;
+  }
+  .br-editor-conflict button:hover { background: #f7d4d4; }
+
   /* ── Download / external link in popup ── */
   .br-link-body {
     display: flex; flex-direction: column; align-items: center;
@@ -347,7 +525,26 @@
     padding: 0.25rem 0.4rem; background: #f8f5ef; border-bottom: 1px solid #d4b96a;
     position: sticky; top: 1.65rem; z-index: 1;
   }
-  .br-table-wrap { overflow: auto; flex: 1; min-height: 0; }
+  .br-table-wrap {
+    overflow: auto; flex: 1; min-height: 0;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0,0,0,0.35) transparent;
+  }
+  .br-popup-body::-webkit-scrollbar,
+  .br-table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
+  .br-popup-body::-webkit-scrollbar-track,
+  .br-table-wrap::-webkit-scrollbar-track { background: transparent; }
+  .br-popup-body::-webkit-scrollbar-thumb,
+  .br-table-wrap::-webkit-scrollbar-thumb {
+    background: rgba(0,0,0,0.28);
+    border-radius: 5px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+  }
+  .br-popup-body::-webkit-scrollbar-thumb:hover,
+  .br-table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.5); background-clip: padding-box; }
+  .br-popup-body::-webkit-scrollbar-corner,
+  .br-table-wrap::-webkit-scrollbar-corner { background: transparent; }
   .br-data-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
   .br-data-table th {
     background: #f0ece3; font-weight: 600; text-align: left;
@@ -356,6 +553,8 @@
     user-select: none; z-index: 1; overflow: hidden; text-overflow: ellipsis;
   }
   .br-data-table th:hover { background: #e8e0d0; }
+  .br-data-table th.br-corner-th { background: #2d2d2d; cursor: context-menu; }
+  .br-data-table th.br-corner-th:hover { background: #4a4a4a; }
   .br-col-resize {
     position: absolute; right: -3px; top: 0; bottom: 0; width: 6px;
     cursor: col-resize; z-index: 2; background: transparent;
@@ -391,6 +590,8 @@
   .br-data-table tr.br-row-dirty:hover td { background: #fdf3d0; }
   .br-data-table tr.br-row-invalid td { background: #fde8e8; }
   .br-data-table tr.br-row-invalid:hover td { background: #fad4d4; }
+  .br-data-table tr.br-row-dirty-bypass td { background: #fde8e8; }
+  .br-data-table tr.br-row-dirty-bypass:hover td { background: #fad4d4; }
   .br-data-table td.br-cell-match { background: #e8f5e9 !important; }
   .br-data-table tr.br-row-match td { background: #e8f5e9 !important; }
   .br-data-table tr.br-row-match:hover td { background: #c8e6c9 !important; }
@@ -642,6 +843,11 @@
   var startMode = '<%= @start_mode %>';
   var rootTitle = '<%= h(@root_title) %>';
   var csvDatabases = <%= @csv_databases %>;
+  var initialPath = <%= (@initial_path || "").to_json %>;
+  var isAdmin = <%= @is_admin ? 'true' : 'false' %>;
+  var defaultVim = <%= @default_vim ? 'true' : 'false' %>;
+  var allowEditor = <%= @allow_editor ? 'true' : 'false' %>;
+  var allowCsvEditor = <%= @allow_csv_editor ? 'true' : 'false' %>;
 
   // ── Tab management ──
 
@@ -854,7 +1060,13 @@
       closeBtn.className = 'br-popup-btn';
       closeBtn.innerHTML = '&times;';
       if (opts.color) closeBtn.style.color = 'rgba(255,255,255,0.8)';
-      closeBtn.onclick = function() { el.remove(); };
+      closeBtn.onclick = function() {
+        if (el._editorIsDirty && el._editorIsDirty()) {
+          if (!confirm('This popup has unsaved edits. Close anyway?')) return;
+        }
+        if (el._editorTeardown) { try { el._editorTeardown(); } catch (e) {} }
+        el.remove();
+      };
       header.appendChild(closeBtn);
     }
 
@@ -874,6 +1086,31 @@
 
     el.style.zIndex = ++zCounter;
     el.addEventListener('mousedown', function() { el.style.zIndex = ++zCounter; });
+    el.addEventListener('touchstart', function() { el.style.zIndex = ++zCounter; }, { passive: true });
+
+    // Double-click / double-tap on header toggles collapsed state.
+    header.addEventListener('dblclick', function(e) {
+      if (e.target.closest('.br-popup-btn')) return;
+      if (e.target.closest('.br-popup-open-tab')) return;
+      toggleCollapsed(el);
+    });
+    var lastTapTime = 0;
+    var tapMoved = false;
+    header.addEventListener('touchstart', function() { tapMoved = false; }, { passive: true });
+    header.addEventListener('touchmove', function() { tapMoved = true; }, { passive: true });
+    header.addEventListener('touchend', function(e) {
+      if (tapMoved) { lastTapTime = 0; return; }
+      if (e.target.closest('.br-popup-btn')) return;
+      if (e.target.closest('.br-popup-open-tab')) return;
+      var now = Date.now();
+      if (now - lastTapTime < 400) {
+        toggleCollapsed(el);
+        e.preventDefault();
+        lastTapTime = 0;
+      } else {
+        lastTapTime = now;
+      }
+    });
 
     if (opts.x !== undefined && opts.y !== undefined) {
       el.style.left = opts.x + 'px';
@@ -1002,6 +1239,18 @@
     return null;
   }
   function bringToFront(el) { el.style.zIndex = ++zCounter; }
+
+  function toggleCollapsed(popup) {
+    if (popup.classList.contains('collapsed')) {
+      popup.classList.remove('collapsed');
+      var saved = popup.getAttribute('data-saved-height');
+      popup.style.height = saved || '';
+      popup.removeAttribute('data-saved-height');
+    } else {
+      popup.setAttribute('data-saved-height', popup.style.height || '');
+      popup.classList.add('collapsed');
+    }
+  }
   function escHtml(s) {
     var d = document.createElement('div');
     d.textContent = s;
@@ -1139,7 +1388,23 @@
     catch(e) { return {}; }
   }
 
+  function countDirtyEditors() {
+    var selector = '.br-popup.is-editing';
+    if (activeTabId) selector += '[data-tab-id="' + activeTabId + '"]';
+    var n = 0;
+    document.querySelectorAll(selector).forEach(function(el) {
+      if (el._editorIsDirty && el._editorIsDirty()) n++;
+    });
+    return n;
+  }
+
   function saveLayout(name) {
+    var dirty = countDirtyEditors();
+    if (dirty > 0) {
+      var msg = dirty + ' popup' + (dirty === 1 ? ' has' : 's have') +
+        ' unsaved edits. Save layout anyway? (Edits will be discarded from the snapshot but remain in the live popups.)';
+      if (!confirm(msg)) return null;
+    }
     var layouts = getLayouts();
     layouts[name] = {
       savedAt: new Date().toISOString(),
@@ -1265,6 +1530,9 @@
     var url = '/browser/api/render/' + encodeURI(path);
     if (opts.queryParams) url += '?' + opts.queryParams;
 
+    popup.setAttribute('data-file-path', path);
+    if (opts.queryParams) popup.setAttribute('data-file-query', opts.queryParams);
+
     fetch(url)
       .then(function(r) { return r.json(); })
       .then(function(data) {
@@ -1277,6 +1545,7 @@
         } else if (data.type === 'external' && data.href) {
           popup.setAttribute('data-browse-href', data.href);
         }
+        popup._editorPriorData = data;
         dispatchRenderer(popup, data);
       })
       .catch(function() {
@@ -1326,8 +1595,13 @@
     }
 
     var items = data.items;
-    var sortKey = 'mtime';
-    var sortDir = 'desc';
+    var DIR_SORT_KEY = 'markdownr:dirSort';
+    var dirSortPath = data.path || '';
+    var savedSort = {};
+    try { savedSort = JSON.parse(localStorage.getItem(DIR_SORT_KEY)) || {}; } catch (e) {}
+    var entry = savedSort[dirSortPath] || {};
+    var sortKey = entry.key || 'mtime';
+    var sortDir = entry.dir || 'desc';
 
     var sortBar = document.createElement('div');
     sortBar.className = 'br-sort-bar';
@@ -1406,6 +1680,12 @@
       var defaultDir = btn.getAttribute('data-default-dir');
       if (key === sortKey) { sortDir = sortDir === 'asc' ? 'desc' : 'asc'; }
       else { sortKey = key; sortDir = defaultDir; }
+      try {
+        var current = {};
+        try { current = JSON.parse(localStorage.getItem(DIR_SORT_KEY)) || {}; } catch (e2) {}
+        current[dirSortPath] = { key: sortKey, dir: sortDir };
+        localStorage.setItem(DIR_SORT_KEY, JSON.stringify(current));
+      } catch (e3) {}
       render();
     });
 
@@ -1425,12 +1705,480 @@
     render();
   }
 
+  // ── In-popup editor ──
+
+  var editorModulePromise = null;
+  function ensureEditor() {
+    if (!editorModulePromise) {
+      editorModulePromise = import('/__markdownr/editor-loader.js?v=<%= editor_loader_version %>')
+        .catch(function(e) { editorModulePromise = null; throw e; });
+    }
+    return editorModulePromise;
+  }
+
+  function guessLanguageForPath(path) {
+    var lower = (path || '').toLowerCase();
+    var dot = lower.lastIndexOf('.');
+    if (dot < 0) return 'text';
+    var ext = lower.substring(dot + 1);
+    switch (ext) {
+      case 'md': case 'markdown': return 'markdown';
+      case 'js': case 'mjs': return 'javascript';
+      case 'json': return 'json';
+      case 'yaml': case 'yml': return 'yaml';
+      case 'html': case 'erb': case 'htm': return 'html';
+      case 'css': return 'css';
+      case 'py': return 'python';
+      case 'rb': case 'ruby': return 'ruby';
+      case 'sh': case 'bash': case 'zsh': return 'bash';
+      default: return 'text';
+    }
+  }
+
+  // Heuristic for "does this markdown contain anything the live-preview
+  // subset doesn't render?" Used to auto-open the side preview pane on
+  // entering edit mode. We err on the side of opening — false positives
+  // (e.g. a literal `<` in text) are better than false negatives (a table
+  // not rendering and the user not realizing why).
+  function markdownHasUnsupportedElements(text) {
+    if (!text) return false;
+    // Strip frontmatter so its `---` delimiters don't trigger the HR check.
+    var body = text.replace(/^---\s*\n[\s\S]*?\n---\s*(\n|$)/, '');
+    // Strip fenced and inline code so things like `<package>` inside
+    // `https://esm.sh/<package>` don't trigger the HTML-tag check.
+    var stripped = body
+      .replace(/```[\s\S]*?```/g, '')
+      .replace(/`[^`\n]*`/g, '');
+    return /(^|\n)[ \t]*\|.*\|/.test(body)                  // table row
+        || /!\[[^\]]*\]\([^)]+\)/.test(body)                // image
+        || /(^|\n)[ \t]*>[ \t]/.test(body)                  // blockquote
+        || /(^|\n)(---|\*\*\*|___)\s*(\n|$)/.test(body)     // horizontal rule
+        || /<\/?[a-zA-Z][^>]*>/.test(stripped)              // raw HTML tag (outside code)
+        || /\[\[[^\]]+\]\]/.test(stripped)                  // wiki link (outside code)
+        || /\[\^[^\]]+\]/.test(stripped);                   // footnote (outside code)
+  }
+
+  function getVimPref() {
+    var v = null;
+    try { v = localStorage.getItem('markdownr:vim'); } catch (e) {}
+    if (v === 'true') return true;
+    if (v === 'false') return false;
+    return !!defaultVim;
+  }
+  function setVimPref(on) {
+    try { localStorage.setItem('markdownr:vim', on ? 'true' : 'false'); } catch (e) {}
+  }
+
+  function addEditButton(popup) {
+    if (!isAdmin || !allowEditor) return;
+    var path = popup.getAttribute('data-file-path');
+    if (!path) return;
+    var queryParams = popup.getAttribute('data-file-query');
+    if (queryParams && queryParams.indexOf('raw=1') < 0) {
+      // Other query parameters we don't support yet — skip.
+      return;
+    }
+    var header = popup.querySelector('.br-popup-header');
+    if (!header || header.querySelector('.br-popup-edit-btn')) return;
+
+    var btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'br-popup-edit-btn';
+    btn.textContent = 'Edit';
+    btn.title = 'Edit file (admin)';
+    btn.onclick = function(e) {
+      e.stopPropagation();
+      enterEditMode(popup);
+    };
+    var openTabBtn = header.querySelector('.br-popup-open-tab');
+    if (openTabBtn) header.insertBefore(btn, openTabBtn);
+    else header.appendChild(btn);
+  }
+
+  function flashEditorSaved(toolbar) {
+    var flash = toolbar.querySelector('.br-editor-saved-flash');
+    if (!flash) {
+      flash = document.createElement('span');
+      flash.className = 'br-editor-saved-flash';
+      flash.textContent = 'saved';
+      toolbar.appendChild(flash);
+    }
+    flash.classList.add('show');
+    clearTimeout(flash._t);
+    flash._t = setTimeout(function() { flash.classList.remove('show'); }, 1200);
+  }
+
+  function makeEditorDivider(splitWrap, divider) {
+    var startX, leftStart, totalStart;
+    function onDown(e) {
+      e.preventDefault();
+      var t = e.touches ? e.touches[0] : e;
+      startX = t.clientX;
+      var leftRect = splitWrap.firstElementChild.getBoundingClientRect();
+      leftStart = leftRect.width;
+      totalStart = splitWrap.getBoundingClientRect().width;
+      document.addEventListener('mousemove', onMove);
+      document.addEventListener('mouseup', onUp);
+      document.addEventListener('touchmove', onMove, { passive: false });
+      document.addEventListener('touchend', onUp);
+    }
+    function onMove(e) {
+      e.preventDefault();
+      var t = e.touches ? e.touches[0] : e;
+      var dx = t.clientX - startX;
+      var newLeft = Math.max(120, Math.min(totalStart - 120, leftStart + dx));
+      var pct = (newLeft / totalStart) * 100;
+      splitWrap.firstElementChild.style.flex = '0 0 ' + pct + '%';
+      try { localStorage.setItem('markdownr:editor:split', String(pct)); } catch (e) {}
+    }
+    function onUp() {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      document.removeEventListener('touchmove', onMove);
+      document.removeEventListener('touchend', onUp);
+    }
+    divider.addEventListener('mousedown', onDown);
+    divider.addEventListener('touchstart', onDown, { passive: false });
+  }
+
+  function enterEditMode(popup) {
+    var path = popup.getAttribute('data-file-path');
+    if (!path) return;
+    if (popup._editorTeardown) return; // already editing
+
+    var priorData = popup._editorPriorData || null;
+    var body = popup.querySelector('.br-popup-body');
+    var origBodyHtml = body.innerHTML;
+    var origBodyDisplay = body.style.display;
+    var origBodyFlexDir = body.style.flexDirection;
+    var origBodyPadding = body.style.padding;
+    body.innerHTML = '<div class="br-empty" style="padding:1rem">Loading editor…</div>';
+    popup.classList.add('is-editing');
+
+    Promise.all([
+      fetch('/__markdownr/api/file/source/' + encodeURI(path), { credentials: 'same-origin' })
+        .then(function(r) {
+          if (r.status === 413) throw new Error('file too large to edit');
+          if (!r.ok) throw new Error('source fetch failed: ' + r.status);
+          var etag = (r.headers.get('ETag') || '').replace(/^"|"$/g, '');
+          return r.text().then(function(text) { return { text: text, etag: etag }; });
+        }),
+      ensureEditor()
+    ]).then(function(arr) {
+      var src = arr[0];
+      var mod = arr[1];
+      buildEditorUI(popup, body, path, src.text, src.etag, priorData, mod, {
+        origBodyHtml: origBodyHtml,
+        origBodyDisplay: origBodyDisplay,
+        origBodyFlexDir: origBodyFlexDir,
+        origBodyPadding: origBodyPadding
+      });
+    }).catch(function(err) {
+      body.innerHTML = '<div class="br-empty" style="padding:1rem;color:#c44">Failed to load editor: ' + escHtml(err && err.message || 'unknown') + '</div>';
+      popup.classList.remove('is-editing');
+      setTimeout(function() {
+        body.style.display = origBodyDisplay;
+        body.style.flexDirection = origBodyFlexDir;
+        body.style.padding = origBodyPadding;
+        if (priorData) dispatchRenderer(popup, priorData);
+        else body.innerHTML = origBodyHtml;
+      }, 1500);
+    });
+  }
+
+  function buildEditorUI(popup, body, path, text, initialEtag, priorData, mod, orig) {
+    body.innerHTML = '';
+    body.style.display = 'flex';
+    body.style.flexDirection = 'column';
+    body.style.padding = '0';
+    popup.classList.add('wide');
+
+    var lang = guessLanguageForPath(path);
+    var isMd = lang === 'markdown';
+
+    var toolbar = document.createElement('div');
+    toolbar.className = 'br-editor-toolbar';
+    body.appendChild(toolbar);
+
+    var langLabel = document.createElement('span');
+    langLabel.className = 'br-editor-lang';
+    langLabel.textContent = lang;
+    toolbar.appendChild(langLabel);
+
+    var saveBtn = document.createElement('button');
+    saveBtn.type = 'button';
+    saveBtn.className = 'br-editor-save';
+    saveBtn.textContent = 'Save';
+    saveBtn.disabled = true;
+    toolbar.appendChild(saveBtn);
+
+    var cancelBtn = document.createElement('button');
+    cancelBtn.type = 'button';
+    cancelBtn.className = 'br-editor-cancel';
+    cancelBtn.textContent = 'Cancel';
+    toolbar.appendChild(cancelBtn);
+
+    var vimBtn = document.createElement('button');
+    vimBtn.type = 'button';
+    vimBtn.className = 'br-editor-vim';
+    var vimOn = getVimPref();
+    function syncVimBtn() {
+      vimBtn.textContent = vimOn ? 'vim: on' : 'vim: off';
+      vimBtn.classList.toggle('active', vimOn);
+    }
+    syncVimBtn();
+    toolbar.appendChild(vimBtn);
+
+    var conflictBar = null;
+    var splitWrap, editorWrap, previewWrap, previewHidden, hidePreviewBtn;
+
+    if (isMd) {
+      hidePreviewBtn = document.createElement('button');
+      hidePreviewBtn.type = 'button';
+      hidePreviewBtn.className = 'br-editor-preview-toggle';
+      // Decision is made once on open: walk the source for elements the
+      // live-preview subset doesn't render. If the doc has any of them, the
+      // side preview opens; otherwise it stays closed. Manual toggle still
+      // works for ad-hoc viewing while typing an unsupported element. We do
+      // NOT persist user preference — re-check happens on each open.
+      previewHidden = !markdownHasUnsupportedElements(text);
+      toolbar.appendChild(hidePreviewBtn);
+
+      splitWrap = document.createElement('div');
+      splitWrap.className = 'br-editor-split';
+      body.appendChild(splitWrap);
+
+      editorWrap = document.createElement('div');
+      editorWrap.className = 'br-editor-pane';
+      splitWrap.appendChild(editorWrap);
+
+      var divider = document.createElement('div');
+      divider.className = 'br-editor-divider';
+      splitWrap.appendChild(divider);
+
+      previewWrap = document.createElement('div');
+      previewWrap.className = 'br-editor-preview';
+      if (priorData && priorData.html) {
+        previewWrap.innerHTML = (priorData.frontmatter_html || '') + '<div class="br-md-content">' + priorData.html + '</div>';
+        addCopyButtons(previewWrap);
+      }
+      splitWrap.appendChild(previewWrap);
+
+      var savedPct = null;
+      try { savedPct = parseFloat(localStorage.getItem('markdownr:editor:split')); } catch (e) {}
+      if (savedPct && savedPct > 10 && savedPct < 90) {
+        editorWrap.style.flex = '0 0 ' + savedPct + '%';
+      } else {
+        editorWrap.style.flex = '0 0 50%';
+      }
+
+      function applyPreviewHide() {
+        previewWrap.style.display = previewHidden ? 'none' : '';
+        divider.style.display = previewHidden ? 'none' : '';
+        editorWrap.style.flex = previewHidden ? '1 1 100%' : (editorWrap.style.flex || '0 0 50%');
+        hidePreviewBtn.textContent = previewHidden ? 'Show preview' : 'Hide preview';
+      }
+      applyPreviewHide();
+      hidePreviewBtn.onclick = function() {
+        previewHidden = !previewHidden;
+        applyPreviewHide();
+      };
+
+      makeEditorDivider(splitWrap, divider);
+    } else {
+      editorWrap = document.createElement('div');
+      editorWrap.className = 'br-editor-pane';
+      body.appendChild(editorWrap);
+    }
+
+    var currentEtag = initialEtag;
+    var dirty = false;
+    var saving = false;
+    var instance = null;
+
+    function setDirty(d) {
+      dirty = d;
+      saveBtn.classList.toggle('dirty', d);
+      saveBtn.disabled = !d || saving;
+    }
+
+    function clearConflict() {
+      if (conflictBar) { conflictBar.remove(); conflictBar = null; }
+    }
+
+    function showConflict(info) {
+      clearConflict();
+      conflictBar = document.createElement('div');
+      conflictBar.className = 'br-editor-conflict';
+      conflictBar.innerHTML = '<span>The file changed on disk since you opened it.</span>';
+      var reload = document.createElement('button');
+      reload.type = 'button';
+      reload.textContent = 'Reload';
+      reload.title = 'Discard your edits and load the new content';
+      var overwrite = document.createElement('button');
+      overwrite.type = 'button';
+      overwrite.textContent = 'Overwrite';
+      overwrite.title = 'Force-save your edits, replacing the new content';
+      conflictBar.appendChild(reload);
+      conflictBar.appendChild(overwrite);
+      body.insertBefore(conflictBar, body.children[1] || null);
+
+      reload.onclick = function() {
+        fetch('/__markdownr/api/file/source/' + encodeURI(path), { credentials: 'same-origin' })
+          .then(function(r) {
+            var etag = (r.headers.get('ETag') || '').replace(/^"|"$/g, '');
+            return r.text().then(function(t) { return { text: t, etag: etag }; });
+          })
+          .then(function(s) {
+            instance.setValue(s.text);
+            currentEtag = s.etag;
+            setDirty(false);
+            clearConflict();
+          });
+      };
+      overwrite.onclick = function() {
+        clearConflict();
+        doSave({ force: true });
+      };
+    }
+
+    function doSave(opts) {
+      opts = opts || {};
+      if (saving) return Promise.resolve(false);
+      var content = instance.getValue();
+      var hdrs = { 'Content-Type': 'text/plain; charset=utf-8' };
+      if (currentEtag && !opts.force) hdrs['If-Match'] = '"' + currentEtag + '"';
+      saving = true;
+      saveBtn.disabled = true;
+      var ok = false;
+      return fetch('/__markdownr/api/file/' + encodeURI(path), {
+        method: 'PUT', credentials: 'same-origin', headers: hdrs, body: content
+      }).then(function(r) {
+        if (r.status === 403) {
+          return r.json().then(function(j) { showAdminRequired(j); throw new Error('forbidden'); });
+        }
+        if (r.status === 409) {
+          return r.json().then(function(j) { showConflict(j); throw new Error('conflict'); });
+        }
+        if (!r.ok) {
+          return r.text().then(function(t) { throw new Error('save failed: ' + r.status + ' ' + t); });
+        }
+        return r.json();
+      }).then(function(j) {
+        currentEtag = j.etag;
+        setDirty(false);
+        flashEditorSaved(toolbar);
+        ok = true;
+      }).catch(function(e) {
+        if (e && e.message !== 'conflict' && e.message !== 'forbidden') {
+          alert('Save failed: ' + (e && e.message || 'unknown'));
+        }
+      }).finally(function() {
+        saving = false;
+        setDirty(dirty);
+      }).then(function() { return ok; });
+    }
+
+    function exitEditing(reload) {
+      if (instance) { try { instance.destroy(); } catch (e) {} }
+      popup._editorTeardown = null;
+      popup.classList.remove('is-editing');
+      body.style.display = orig.origBodyDisplay;
+      body.style.flexDirection = orig.origBodyFlexDir;
+      body.style.padding = orig.origBodyPadding;
+      if (reload) {
+        var url = '/browser/api/render/' + encodeURI(path);
+        var qp = popup.getAttribute('data-file-query');
+        if (qp) url += '?' + qp;
+        fetch(url).then(function(r) { return r.json(); }).then(function(d) {
+          popup._editorPriorData = d;
+          dispatchRenderer(popup, d);
+        }).catch(function() {
+          if (priorData) dispatchRenderer(popup, priorData);
+        });
+      } else if (priorData) {
+        dispatchRenderer(popup, priorData);
+      } else {
+        body.innerHTML = orig.origBodyHtml;
+      }
+    }
+
+    cancelBtn.onclick = function() {
+      if (dirty && !confirm('Discard unsaved changes?')) return;
+      exitEditing(false);
+    };
+    saveBtn.onclick = function() { if (dirty) doSave(); };
+    vimBtn.onclick = function() {
+      vimOn = !vimOn;
+      setVimPref(vimOn);
+      syncVimBtn();
+      if (instance) instance.setVim(vimOn);
+    };
+
+    var debounceTimer = null;
+    var lastPreviewedText = null;
+    function schedulePreview() {
+      if (!isMd) return;
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(function() {
+        var content = instance.getValue();
+        if (content === lastPreviewedText) return;
+        lastPreviewedText = content;
+        var wikiDir = path.indexOf('/') >= 0 ? path.substring(0, path.lastIndexOf('/')) : '';
+        fetch('/__markdownr/api/render/preview', {
+          method: 'POST', credentials: 'same-origin',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ content: content, current_wiki_dir: wikiDir })
+        }).then(function(r) { return r.ok ? r.json() : null; }).then(function(j) {
+          if (!j || !previewWrap) return;
+          if (lastPreviewedText !== content) return;
+          previewWrap.innerHTML = (j.frontmatter_html || '') + '<div class="br-md-content">' + j.html + '</div>';
+          addCopyButtons(previewWrap);
+        }).catch(function() {});
+      }, 250);
+    }
+
+    instance = mod.createEditor({
+      parent: editorWrap,
+      doc: text,
+      language: lang,
+      vim: vimOn,
+      onSave: function() { if (dirty) doSave(); },
+      onChange: function(newText) {
+        setDirty(newText !== text);
+        if (isMd) schedulePreview();
+      }
+    });
+    if (instance.setSaveHandler) {
+      instance.setSaveHandler(function() {
+        return dirty ? doSave() : Promise.resolve(true);
+      });
+    }
+    if (instance.setQuitHandler) {
+      instance.setQuitHandler(
+        function(opts) { exitEditing(!!(opts && opts.saved)); },
+        function() { return dirty; }
+      );
+    }
+
+    popup._editorTeardown = function() {
+      if (instance) { try { instance.destroy(); } catch (e) {} }
+      popup._editorTeardown = null;
+    };
+    popup._editorIsDirty = function() { return dirty; };
+
+    setTimeout(function() { try { instance.focus(); } catch (e) {} }, 30);
+  }
+
   // ── Markdown renderer ──
 
   function renderMarkdown(popup, data) {
     var body = popup.querySelector('.br-popup-body');
     body.innerHTML = '';
     body.style.padding = '0';
+    body.style.display = '';
+    body.style.flexDirection = '';
+    popup.classList.remove('is-editing');
     popup.classList.add('wide');
 
     if (data.frontmatter_html) {
@@ -1444,6 +2192,9 @@
     content.className = 'br-md-content';
     content.innerHTML = data.html;
     body.appendChild(content);
+    addCopyButtons(content);
+
+    addEditButton(popup);
   }
 
   // ── Code renderer ──
@@ -1454,6 +2205,7 @@
     body.style.display = 'flex';
     body.style.flexDirection = 'column';
     body.style.padding = '0';
+    popup.classList.remove('is-editing');
     popup.classList.add('wide');
 
     var toolbar = document.createElement('div');
@@ -1465,6 +2217,62 @@
     code.className = 'br-code-view';
     code.innerHTML = data.html;
     body.appendChild(code);
+    addCopyButtons(body);
+
+    addEditButton(popup);
+  }
+
+  // ── Copy-to-clipboard buttons on <pre> blocks ──
+
+  var COPY_ICON_SVG = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
+  var CHECK_ICON_SVG = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';
+
+  function legacyCopy(text) {
+    var ta = document.createElement('textarea');
+    ta.value = text;
+    ta.style.position = 'fixed';
+    ta.style.left = '-9999px';
+    document.body.appendChild(ta);
+    ta.select();
+    try { document.execCommand('copy'); } catch (e) {}
+    document.body.removeChild(ta);
+  }
+
+  function addCopyButtons(root) {
+    var pres = root.querySelectorAll('.br-md-content pre, pre.br-code-view');
+    pres.forEach(function(pre) {
+      if (pre.querySelector(':scope > .copy-btn')) return;
+      var btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'copy-btn';
+      btn.title = 'Copy';
+      btn.setAttribute('aria-label', 'Copy code');
+      btn.innerHTML = COPY_ICON_SVG;
+      btn.addEventListener('click', function(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        var clone = pre.cloneNode(true);
+        var existing = clone.querySelector('.copy-btn');
+        if (existing) existing.remove();
+        var codeEl = clone.querySelector('code');
+        var text = (codeEl || clone).textContent;
+        var done = function() {
+          btn.classList.add('copied');
+          btn.innerHTML = CHECK_ICON_SVG;
+          setTimeout(function() {
+            btn.classList.remove('copied');
+            btn.innerHTML = COPY_ICON_SVG;
+          }, 1500);
+        };
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          navigator.clipboard.writeText(text).then(done, function() { legacyCopy(text); done(); });
+        } else {
+          legacyCopy(text);
+          done();
+        }
+      });
+      pre.appendChild(btn);
+    });
   }
 
   // ── Download renderer ──
@@ -1634,6 +2442,7 @@
         if (openOpts.colFiltersVisible) initOpts.colFiltersVisible = openOpts.colFiltersVisible;
         else if (savedMatches && savedObj.colFiltersVisible) initOpts.colFiltersVisible = savedObj.colFiltersVisible;
         if (openOpts.showRowNumbers) initOpts.showRowNumbers = openOpts.showRowNumbers;
+        if (openOpts.hiddenValues) initOpts.hiddenValues = openOpts.hiddenValues;
         if (openOpts.colWidths) {
           initOpts.colWidths = openOpts.colWidths;
         } else if (savedMatches && savedObj.colWidths) {
@@ -1766,7 +2575,9 @@
     var searchTerms = [];
     var highlightMode = null; // null, 'cells', or 'rows'
     var highlightTerms = [];
+    var hiddenValues = (initOpts.hiddenValues || []).slice();
     var dirtyRows = {};
+    var dirtyBypassIds = {}; // rowIdx → true for rows kept visible only because they're dirty
     var selectedRowIdx = null;
     var editingCell = null;
     var validationErrors = {}; // { rowIndex: [{message, fields}] }
@@ -1780,7 +2591,7 @@
     var showRowNumbers = !!initOpts.showRowNumbers;
     var colWidths = initOpts.colWidths || {};
     var editMode = false;
-    var isReadonly = !!data.readonly;
+    var isReadonly = !!data.readonly || !allowCsvEditor;
 
     var searchWrap = document.createElement('div');
     searchWrap.className = 'br-search-wrap';
@@ -1864,8 +2675,12 @@
         });
       }
 
-      // In highlight mode, show all rows (only apply col filters); otherwise filter normally
+      // In highlight mode, show all rows (only apply col filters); otherwise filter normally.
+      // Dirty rows always stay visible so an in-progress edit doesn't vanish when its value
+      // no longer matches; those bypass rows get flagged so we can render them in red.
+      dirtyBypassIds = {};
       displayRows = originalRows.filter(function(row) {
+        var matches = true;
         if (!highlightMode && searchTerms.length > 0) {
           var globalMatch = searchTerms.every(function(term) {
             for (var i = 0; i < columns.length; i++) {
@@ -1873,17 +2688,30 @@
             }
             return false;
           });
-          if (!globalMatch) return false;
+          if (!globalMatch) matches = false;
         }
-        // Per-column filters always apply
-        for (var f = 0; f < activeColFilters.length; f++) {
-          var af = activeColFilters[f];
-          var cellVal = getCellValue(row, af.ci);
-          for (var t = 0; t < af.terms.length; t++) {
-            if (!termMatchesCell(af.terms[t], cellVal)) return false;
+        if (matches) {
+          for (var f = 0; f < activeColFilters.length; f++) {
+            var af = activeColFilters[f];
+            var cellVal = getCellValue(row, af.ci);
+            for (var t = 0; t < af.terms.length; t++) {
+              if (!termMatchesCell(af.terms[t], cellVal)) { matches = false; break; }
+            }
+            if (!matches) break;
           }
         }
-        return true;
+        if (matches && hiddenValues.length > 0) {
+          for (var h = 0; h < hiddenValues.length; h++) {
+            var hv = hiddenValues[h];
+            for (var hi = 0; hi < columns.length; hi++) {
+              if (getCellValue(row, hi) === hv) { matches = false; break; }
+            }
+            if (!matches) break;
+          }
+        }
+        if (matches) return true;
+        if (dirtyRows[row[0]]) { dirtyBypassIds[row[0]] = true; return true; }
+        return false;
       });
 
       if (sortCol >= 0 && sortDirection !== 0) {
@@ -1937,6 +2765,333 @@
 
     var hasValidation = Object.keys(validationErrors).length > 0;
 
+    function showHeaderContextMenu(colIdx, x, y) {
+      var col = columns[colIdx];
+      var menu = document.createElement('div');
+      menu.className = 'br-context-menu';
+      menu.style.left = x + 'px';
+      menu.style.top = y + 'px';
+
+      function addItem(label, onClick) {
+        var btn = document.createElement('button');
+        btn.className = 'br-context-menu-item default';
+        btn.textContent = label;
+        btn.addEventListener('click', function() { dismissContextMenu(); onClick(); });
+        menu.appendChild(btn);
+      }
+      function addSep() {
+        var sep = document.createElement('div');
+        sep.className = 'br-context-menu-sep';
+        menu.appendChild(sep);
+      }
+
+      // Group 1: summaries
+      addItem('Stats', function() { showColumnStats(colIdx, x, y); });
+      addItem('Distinct values', function() { showColumnDistinct(colIdx, x, y); });
+      addSep();
+
+      // Group 2: quick filters
+      addItem('Filter: is blank', function() { setColumnFilter(col.key, '^$'); });
+      addItem('Filter: is not blank', function() { setColumnFilter(col.key, '.'); });
+      addSep();
+
+      // Group 3: export
+      addItem('Copy column', function() { copyColumnValues(colIdx); });
+      addSep();
+
+      // Group 4: width
+      addItem('Auto-width', function() { autoFitColumn(colIdx); });
+      addItem('Reset width', function() { resetColumnWidth(col.key); });
+
+      document.body.appendChild(menu);
+    }
+
+    // Collect raw (non-FK-resolved) numeric values for visible rows.
+    function collectNumericValues(colIdx) {
+      var col = columns[colIdx];
+      var vals = [];
+      displayRows.forEach(function(row) {
+        var v = row[colIdx + 1];
+        if (dirtyRows[row[0]] && dirtyRows[row[0]][col.key] !== undefined) v = dirtyRows[row[0]][col.key];
+        if (v === null || v === undefined || v === '') return;
+        var n = parseFloat(String(v).replace(/[$,]/g, ''));
+        if (!isNaN(n) && isFinite(n)) vals.push(n);
+      });
+      return vals;
+    }
+
+    function formatStatValue(col, n) {
+      if (isCurrencyCol(col)) return formatCurrency(n);
+      if (col.type === 'integer' && Number.isInteger(n)) return n.toLocaleString();
+      return n.toLocaleString(undefined, { maximumFractionDigits: 6 });
+    }
+
+    function showColumnStats(colIdx, x, y) {
+      var col = columns[colIdx];
+      var vals = collectNumericValues(colIdx);
+      var body;
+      if (vals.length === 0) {
+        body = '<div style="padding:0.75rem 1rem;color:#888;">No numeric values in visible rows.</div>';
+      } else {
+        var positives = vals.filter(function(v) { return v > 0; });
+        var negatives = vals.filter(function(v) { return v < 0; });
+        var sections = [{ label: 'All', vals: vals, countSuffix: ' of ' + displayRows.length }];
+        if (positives.length > 0 && negatives.length > 0) {
+          sections.push({ label: 'Positive only', vals: positives, countSuffix: ' of ' + vals.length });
+          sections.push({ label: 'Negative only', vals: negatives, countSuffix: ' of ' + vals.length });
+        }
+        body = '<div style="padding:0.75rem 1rem;">';
+        sections.forEach(function(sec, si) {
+          if (si > 0) body += '<div style="height:0.75rem;"></div>';
+          body += '<div style="font-weight:600;color:#8b6914;margin-bottom:0.25rem;font-size:0.85rem;">' + escHtml(sec.label) + '</div>';
+          body += buildStatsTable(col, sec.vals, sec.countSuffix);
+        });
+        body += '</div>';
+      }
+      createPopup({ title: 'Stats — ' + col.title, html: body, x: x, y: y });
+    }
+
+    function buildStatsTable(col, vals, countSuffix) {
+      var sum = vals.reduce(function(a, b) { return a + b; }, 0);
+      var mean = sum / vals.length;
+      var sorted = vals.slice().sort(function(a, b) { return a - b; });
+      var median = sorted.length % 2 === 1
+        ? sorted[(sorted.length - 1) / 2]
+        : (sorted[sorted.length / 2 - 1] + sorted[sorted.length / 2]) / 2;
+      var rows = [
+        ['Sum',     formatStatValue(col, sum)],
+        ['Average', formatStatValue(col, mean)],
+        ['Median',  formatStatValue(col, median)],
+        ['Min',     formatStatValue(col, sorted[0])],
+        ['Max',     formatStatValue(col, sorted[sorted.length - 1])],
+        ['Count',   vals.length + (countSuffix || '')]
+      ];
+      var html = '<table style="width:100%;border-collapse:collapse;border:1px solid #e8e4dc;">';
+      rows.forEach(function(r, i) {
+        var bg = i % 2 === 0 ? '#faf8f4' : '#ffffff';
+        html += '<tr style="background:' + bg + ';">' +
+                '<td style="padding:0.3rem 0.75rem;color:#666;">' + escHtml(r[0]) + '</td>' +
+                '<td style="padding:0.3rem 0.75rem;text-align:right;font-weight:600;color:#3a3a3a;">' + escHtml(r[1]) + '</td>' +
+                '</tr>';
+      });
+      html += '</table>';
+      return html;
+    }
+
+    function showColumnDistinct(colIdx, x, y) {
+      var col = columns[colIdx];
+      var counts = {};
+      var order = [];
+      displayRows.forEach(function(row) {
+        var v = getCellValue(row, colIdx);
+        if (!(v in counts)) { counts[v] = 0; order.push(v); }
+        counts[v]++;
+      });
+      order.sort(function(a, b) {
+        if (counts[b] !== counts[a]) return counts[b] - counts[a];
+        return String(a).localeCompare(String(b));
+      });
+      var body;
+      if (order.length === 0) {
+        body = '<div style="padding:0.75rem 1rem;color:#888;">No visible rows.</div>';
+      } else {
+        var maxCount = counts[order[0]];
+        body = '<div style="padding:0.5rem 0.75rem;">' +
+               '<div style="color:#888;margin-bottom:0.5rem;">' + order.length + ' distinct value' +
+               (order.length === 1 ? '' : 's') + ' in ' + displayRows.length + ' visible row' +
+               (displayRows.length === 1 ? '' : 's') + '</div>' +
+               '<table style="width:100%;border-collapse:collapse;">';
+        order.forEach(function(v) {
+          var label = v === '' ? '<span style="color:#bbb;font-style:italic;">(blank)</span>' : escHtml(v);
+          var pct = Math.max(2, Math.round(counts[v] / maxCount * 100));
+          var bar = '<div style="position:relative;height:1.3em;min-width:60px;">' +
+                      '<div style="position:absolute;left:0;top:0;bottom:0;width:' + pct + '%;background:rgba(212,185,106,0.45);border-radius:2px;"></div>' +
+                      '<span style="position:relative;padding:0 0.4rem;font-weight:600;color:#5a4410;">' + counts[v] + '</span>' +
+                    '</div>';
+          body += '<tr>' +
+                  '<td style="padding:0.2rem 0.75rem 0.2rem 0;">' + label + '</td>' +
+                  '<td style="padding:0.2rem 0;text-align:right;width:40%;">' + bar + '</td>' +
+                  '</tr>';
+        });
+        body += '</table></div>';
+      }
+      createPopup({ title: 'Distinct — ' + col.title, html: body, x: x, y: y });
+    }
+
+    function setColumnFilter(colKey, expr) {
+      colFilterValues[colKey] = expr;
+      if (!colFiltersVisible) {
+        colFiltersVisible = true;
+        colFilterToggle.textContent = '▴';
+      }
+      render();
+      var input = tableWrap.querySelector('[data-col-filter="' + colKey + '"]');
+      if (input) { input.focus(); input.selectionStart = input.selectionEnd = input.value.length; }
+    }
+
+    function copyColumnValues(colIdx) {
+      var col = columns[colIdx];
+      var lines = [col.title].concat(displayRows.map(function(row) { return getCellValue(row, colIdx); }));
+      copyToClipboard(lines.join('\n'));
+    }
+
+    function copyToClipboard(text) {
+      function fallback() {
+        var ta = document.createElement('textarea');
+        ta.value = text;
+        ta.style.position = 'fixed';
+        ta.style.top = '0'; ta.style.left = '0';
+        ta.style.opacity = '0';
+        document.body.appendChild(ta);
+        ta.focus(); ta.select();
+        try { document.execCommand('copy'); } catch (e) {}
+        ta.remove();
+      }
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).catch(fallback);
+      } else {
+        fallback();
+      }
+    }
+
+    function autoFitColumn(colIdx) {
+      var col = columns[colIdx];
+      var sampleCell = tableWrap.querySelector('td[data-col]');
+      var sampleTh = tableWrap.querySelector('th[data-sort-col]');
+      if (!sampleCell || !sampleTh) return;
+      var cellFont = getComputedStyle(sampleCell).font;
+      var headerFont = getComputedStyle(sampleTh).font;
+      var ctx = document.createElement('canvas').getContext('2d');
+      ctx.font = headerFont;
+      var maxW = ctx.measureText(col.title).width + 28; // header padding + sort arrow
+      ctx.font = cellFont;
+      displayRows.forEach(function(row) {
+        var w = ctx.measureText(getCellValue(row, colIdx)).width;
+        if (w > maxW) maxW = w;
+      });
+      colWidths[col.key] = Math.min(Math.ceil(maxW) + 20, 500);
+      render();
+    }
+
+    function resetColumnWidth(colKey) {
+      delete colWidths[colKey];
+      render();
+    }
+
+    function showTableCornerContextMenu(x, y) {
+      var menu = document.createElement('div');
+      menu.className = 'br-context-menu';
+      menu.style.left = x + 'px';
+      menu.style.top = y + 'px';
+
+      function addItem(icon, label, onClick) {
+        var btn = document.createElement('button');
+        btn.className = 'br-context-menu-item default';
+        btn.innerHTML = '<span style="display:inline-block;width:1.6em;text-align:center;">' + icon + '</span>' + escHtml(label);
+        btn.addEventListener('click', function() { dismissContextMenu(); onClick(); });
+        menu.appendChild(btn);
+      }
+      function addSep() {
+        var sep = document.createElement('div');
+        sep.className = 'br-context-menu-sep';
+        menu.appendChild(sep);
+      }
+
+      addItem('📋', 'Copy as CSV', function() { copyTableAsCsv(); });
+      addItem('📋', 'Copy as markdown', function() { copyTableAsMarkdown(); });
+      addItem('🖨', 'Print', function() { printTable(); });
+      addSep();
+
+      var canValidate = dbKey && dbKey !== '_unmapped' && !isReadonly;
+      if (canValidate) {
+        addItem('🔥', 'Validate all rows', function() { runValidateAll(); });
+      }
+      addItem('#', (showRowNumbers ? 'Hide' : 'Show') + ' row numbers', function() { toggleRowNumbers(); });
+      addSep();
+
+      if (dbKey && dbKey !== '_unmapped') {
+        addItem('💾', 'Save as default view', function() { saveCurrentAsDefaultView(); });
+        addItem('💾', 'Show saved default view', function() { showSavedDefaultViewPopup(); });
+        addSep();
+      }
+      addItem('💾', 'Show all markdownr localStorage', function() { showAllLocalStoragePopup(); });
+
+      document.body.appendChild(menu);
+    }
+
+    function csvEscape(s) {
+      s = (s === null || s === undefined) ? '' : String(s);
+      if (s.indexOf(',') !== -1 || s.indexOf('"') !== -1 || s.indexOf('\n') !== -1 || s.indexOf('\r') !== -1) {
+        return '"' + s.replace(/"/g, '""') + '"';
+      }
+      return s;
+    }
+
+    function mdEscape(s) {
+      return ((s === null || s === undefined) ? '' : String(s)).replace(/\|/g, '\\|').replace(/\r?\n/g, '<br>');
+    }
+
+    function copyTableAsCsv() {
+      var lines = [columns.map(function(c) { return csvEscape(c.title); }).join(',')];
+      displayRows.forEach(function(row) {
+        lines.push(columns.map(function(_, ci) { return csvEscape(getCellValue(row, ci)); }).join(','));
+      });
+      copyToClipboard(lines.join('\n'));
+    }
+
+    function copyTableAsMarkdown() {
+      var header = '| ' + columns.map(function(c) { return mdEscape(c.title); }).join(' | ') + ' |';
+      var sep = '| ' + columns.map(function(c) { return isRightAligned(c) ? '---:' : '---'; }).join(' | ') + ' |';
+      var body = displayRows.map(function(row) {
+        return '| ' + columns.map(function(_, ci) { return mdEscape(getCellValue(row, ci)); }).join(' | ') + ' |';
+      });
+      copyToClipboard([header, sep].concat(body).join('\n'));
+    }
+
+    function getDisplayCellValue(row, ci) {
+      var val = getCellValue(row, ci);
+      if (val !== '' && isCurrencyCol(columns[ci])) return formatCurrency(val);
+      return val;
+    }
+
+    function printTable() {
+      var titleEl = popup.querySelector('.br-popup-title');
+      var titleText = titleEl ? titleEl.textContent : 'Table';
+      var w = window.open('', '_blank');
+      if (!w) { alert('Pop-up blocked. Allow pop-ups to print.'); return; }
+      var alignAttr = function(col) { return isRightAligned(col) ? ' style="text-align:right"' : ''; };
+      var headerHtml = columns.map(function(c) {
+        return '<th' + alignAttr(c) + '>' + escHtml(c.title) + '</th>';
+      }).join('');
+      var bodyHtml = displayRows.map(function(row) {
+        return '<tr>' + columns.map(function(_, ci) {
+          var v = getDisplayCellValue(row, ci);
+          return '<td' + alignAttr(columns[ci]) + '>' + (v === '' ? '' : escHtml(v)) + '</td>';
+        }).join('') + '</tr>';
+      }).join('');
+      var doc = '<!doctype html><html><head><meta charset="utf-8"><title>' + escHtml(titleText) + '</title>' +
+        '<style>' +
+        'body{font-family:-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;color:#000;margin:1rem;}' +
+        'h1{font-size:1.1rem;margin:0 0 0.6rem 0;}' +
+        '.meta{font-size:0.75rem;color:#666;margin-bottom:0.6rem;}' +
+        'table{border-collapse:collapse;width:100%;font-size:11px;}' +
+        'th,td{border:1px solid #999;padding:4px 6px;vertical-align:top;}' +
+        'th{background:#eee;text-align:left;}' +
+        'tbody tr:nth-child(even) td{background:#f6f6f6;}' +
+        '@media print{body{margin:0.4in;} h1{font-size:1rem;} thead{display:table-header-group;} tr{page-break-inside:avoid;}}' +
+        '</style></head><body>' +
+        '<h1>' + escHtml(titleText) + '</h1>' +
+        '<div class="meta">' + displayRows.length + ' row' + (displayRows.length === 1 ? '' : 's') +
+        ' · ' + new Date().toLocaleString() + '</div>' +
+        '<table><thead><tr>' + headerHtml + '</tr></thead><tbody>' + bodyHtml + '</tbody></table>' +
+        '<script>window.onload=function(){setTimeout(function(){window.print();},150);};<\/script>' +
+        '</body></html>';
+      w.document.open();
+      w.document.write(doc);
+      w.document.close();
+    }
+    popup._print = printTable;
+
     function isRightAligned(col) {
       if (col.type === 'integer' || col.type === 'number') return true;
       var c = col.constraints || {};
@@ -1962,15 +3117,20 @@
     }
 
     function renderTableHTML() {
+      var DEFAULT_MAX_COL_WIDTH = 500;
       var cellStyles = columns.map(function(col) {
         var parts = [];
-        if (colWidths[col.key]) parts.push('white-space:normal');
+        if (colWidths[col.key]) {
+          parts.push('white-space:normal', 'overflow-wrap:anywhere');
+        } else {
+          parts.push('max-width:' + DEFAULT_MAX_COL_WIDTH + 'px', 'overflow:hidden', 'text-overflow:ellipsis');
+        }
         if (isRightAligned(col)) parts.push('text-align:right');
         return parts.length > 0 ? ' style="' + parts.join(';') + '"' : '';
       });
       var html = '<table class="br-data-table' + (editMode ? ' edit-mode' : '') + '"><thead><tr>';
+      html += '<th class="br-corner-th" data-table-corner="1" title="Right-click for table actions" style="width:1px;padding:0.4rem 0.3rem;"></th>';
       if (hasValidation) html += '<th style="width:1px;padding:0.4rem 0.2rem;"></th>';
-      html += '<th style="width:1px;padding:0.4rem 0.3rem;"></th>';
       if (showRowNumbers) html += '<th style="width:1px;padding:0.4rem 0.3rem;color:#999;font-size:0.75rem;">#</th>';
       columns.forEach(function(col, ci) {
         var cls = '';
@@ -1979,7 +3139,9 @@
         else if (ci === sortCol && sortDirection === -1) { cls = ' class="sort-desc"'; arrow += '\u25bc'; }
         else { arrow += '\u25b8'; }
         arrow += '</span>';
-        var wStyle = colWidths[col.key] ? ' style="width:' + colWidths[col.key] + 'px;min-width:' + colWidths[col.key] + 'px;max-width:' + colWidths[col.key] + 'px"' : '';
+        var wStyle = colWidths[col.key]
+          ? ' style="width:' + colWidths[col.key] + 'px;min-width:' + colWidths[col.key] + 'px;max-width:' + colWidths[col.key] + 'px"'
+          : ' style="max-width:' + DEFAULT_MAX_COL_WIDTH + 'px"';
         html += '<th' + cls + ' data-sort-col="' + ci + '"' + wStyle + '>' + escHtml(col.title) + arrow + '<span class="br-col-resize" data-resize-col="' + ci + '"></span></th>';
       });
       if (reverseRefs.length > 0) {
@@ -1988,8 +3150,8 @@
       html += '</tr>';
       if (colFiltersVisible) {
         html += '<tr class="br-col-filter-row">';
-        if (hasValidation) html += '<td></td>';
         html += '<td></td>';
+        if (hasValidation) html += '<td></td>';
         if (showRowNumbers) html += '<td></td>';
         columns.forEach(function(col) {
           var val = colFilterValues[col.key] || '';
@@ -2003,17 +3165,11 @@
       displayRows.forEach(function(row, displayIndex) {
         var rowIdx = row[0];
         var isDirty = !!dirtyRows[rowIdx];
+        var isBypass = !!dirtyBypassIds[rowIdx];
         var rowErrors = validationErrors[rowIdx];
-        var rowCls = isDirty ? 'br-row-dirty' : (rowErrors ? 'br-row-invalid' : '');
+        var rowCls = isBypass ? 'br-row-dirty-bypass' : (isDirty ? 'br-row-dirty' : (rowErrors ? 'br-row-invalid' : ''));
         if (selectedRowIdx === rowIdx) rowCls = (rowCls ? rowCls + ' ' : '') + 'br-row-selected';
         html += '<tr data-row-idx="' + rowIdx + '"' + (rowCls ? ' class="' + rowCls + '"' : '') + '>';
-        if (hasValidation) {
-          if (rowErrors) {
-            html += '<td class="br-val-cell"><span class="br-val-icon" data-val-row="' + rowIdx + '" title="Validation errors">\ud83d\udd25</span></td>';
-          } else {
-            html += '<td class="br-val-cell"></td>';
-          }
-        }
         var rowCellInvalid = rowHasCellErrors(rowIdx);
         if (isDirty) {
           var saveCls = 'br-row-save' + (rowCellInvalid ? ' has-errors' : '');
@@ -2025,6 +3181,13 @@
         } else {
           html += '<td class="br-row-actions"></td>';
         }
+        if (hasValidation) {
+          if (rowErrors) {
+            html += '<td class="br-val-cell"><span class="br-val-icon" data-val-row="' + rowIdx + '" title="Validation errors">\ud83d\udd25</span></td>';
+          } else {
+            html += '<td class="br-val-cell"></td>';
+          }
+        }
         if (showRowNumbers) html += '<td style="color:#999;font-size:0.75rem;text-align:right;white-space:nowrap;">' + (rowIdx + 1) + '</td>';
         for (var i = 1; i < row.length; i++) {
           var val = row[i];
@@ -2047,7 +3210,11 @@
               var fkClass = (!editMode && colRef) ? ' fk-link' : '';
               var fkParts = [];
               if (colRef && colRef.color) fkParts.push('background:' + escHtml(colRef.color) + '18');
-              if (colWidths[colKey]) fkParts.push('white-space:normal');
+              if (colWidths[colKey]) {
+                fkParts.push('white-space:normal', 'overflow-wrap:anywhere');
+              } else {
+                fkParts.push('max-width:' + DEFAULT_MAX_COL_WIDTH + 'px', 'overflow:hidden', 'text-overflow:ellipsis');
+              }
               if (isRightAligned(columns[i - 1])) fkParts.push('text-align:right');
               var fkStyleAttr = fkParts.length > 0 ? ' style="' + fkParts.join(';') + '"' : '';
               var fkTitle = cellHasError ? escHtml(cellValidationErrors[cellErrKey]) : 'ID: ' + escHtml(String(val));
@@ -3066,8 +4233,18 @@
       render();
     });
 
-    validateBtn.addEventListener('click', function() {
+    function runValidateAll() {
       if (!dbKey || dbKey === '_unmapped') return;
+      // Toggle off if validation is currently shown
+      if (Object.keys(validationErrors).length > 0) {
+        validationErrors = {};
+        serverCellErrorKeys.forEach(function(k) { delete cellValidationErrors[k]; });
+        serverCellErrorKeys = [];
+        hasValidation = false;
+        updateValidateBtn();
+        render();
+        return;
+      }
       validateBtn.disabled = true;
       validateBtn.title = 'Validating\u2026';
       var url = '/browser/api/csv/databases/' + encodeURIComponent(dbKey) +
@@ -3103,7 +4280,8 @@
           validateBtn.disabled = false;
           validateBtn.title = 'Validation failed';
         });
-    });
+    }
+    validateBtn.addEventListener('click', runValidateAll);
 
     tableWrap.addEventListener('click', function(e) {
       var valIcon = e.target.closest('[data-val-row]');
@@ -3118,13 +4296,14 @@
       createPopup({ title: 'Row ' + (rowIdx + 1) + ' \u2014 validation errors', html: errHtml, x: pos.x, y: pos.y });
     });
 
-    rowNumToggle.addEventListener('click', function() {
+    function toggleRowNumbers() {
       showRowNumbers = !showRowNumbers;
       rowNumToggle.classList.toggle('active', showRowNumbers);
       renderTableHTML();
-    });
+    }
+    rowNumToggle.addEventListener('click', toggleRowNumbers);
 
-    saveDefaultBtn.addEventListener('click', function() {
+    function saveCurrentAsDefaultView() {
       var tableKey = data.table || data.table_key;
       var viewKey = data.view || data.view_key || 'all';
       var extra = {};
@@ -3139,11 +4318,10 @@
       saveDefaultViewKey(dbKey, tableKey, viewKey, extra);
       saveDefaultBtn.classList.add('active');
       saveDefaultBtn.title = 'Saved as default view';
-    });
+    }
+    saveDefaultBtn.addEventListener('click', saveCurrentAsDefaultView);
 
-    saveDefaultBtn.addEventListener('contextmenu', function(e) {
-      e.preventDefault();
-      e.stopPropagation();
+    function showSavedDefaultViewPopup() {
       var tableKey = data.table || data.table_key;
       var lsKey = 'markdownr:defaultView:' + dbKey + ':' + tableKey;
       var saved = getSavedDefaultView(dbKey, tableKey);
@@ -3166,11 +4344,14 @@
       } else {
         body.innerHTML = '<div style="padding:0.75rem;font-size:0.85rem;color:#888;">No saved default view for this table.</div>';
       }
-    });
-
-    rowNumToggle.addEventListener('contextmenu', function(e) {
+    }
+    saveDefaultBtn.addEventListener('contextmenu', function(e) {
       e.preventDefault();
       e.stopPropagation();
+      showSavedDefaultViewPopup();
+    });
+
+    function showAllLocalStoragePopup() {
       var all = {};
       for (var i = 0; i < localStorage.length; i++) {
         var k = localStorage.key(i);
@@ -3182,6 +4363,11 @@
       var pos = nextPosition();
       var p = createPopup({ title: 'All markdownr localStorage', x: pos.x, y: pos.y, wide: true });
       p.querySelector('.br-popup-body').innerHTML = '<pre style="margin:0;padding:0.75rem;font-size:0.8rem;white-space:pre-wrap;font-family:monospace;">' + escHtml(yaml) + '</pre>';
+    }
+    rowNumToggle.addEventListener('contextmenu', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      showAllLocalStoragePopup();
     });
 
     colFilterToggle.addEventListener('click', function() {
@@ -3314,6 +4500,29 @@
     }
 
     tableWrap.addEventListener('contextmenu', function(e) {
+      // Shift+right-click bypasses our menu and shows the browser's native menu (for DevTools Inspect).
+      if (e.shiftKey) { dismissContextMenu(); return; }
+      if (window.__brInspectNext) {
+        window.__brInspectNext = false;
+        return; // let the native browser context menu show (for DevTools "Inspect")
+      }
+
+      var cornerTh = e.target.closest('th[data-table-corner]');
+      if (cornerTh) {
+        e.preventDefault();
+        dismissContextMenu();
+        showTableCornerContextMenu(e.clientX, e.clientY);
+        return;
+      }
+
+      var th = e.target.closest('th[data-sort-col]');
+      if (th) {
+        e.preventDefault();
+        dismissContextMenu();
+        showHeaderContextMenu(parseInt(th.getAttribute('data-sort-col')), e.clientX, e.clientY);
+        return;
+      }
+
       var tr = e.target.closest('tr[data-row-idx]');
       if (!tr) return;
       var td = e.target.closest('td[data-col]');
@@ -3445,6 +4654,29 @@
         });
         menu.appendChild(matchRowsBtn);
 
+        // Hide matched rows
+        var hideBtn = document.createElement('button');
+        hideBtn.className = 'br-context-menu-item default';
+        hideBtn.textContent = 'Hide matched rows';
+        hideBtn.addEventListener('click', function() {
+          dismissContextMenu();
+          if (hiddenValues.indexOf(cellVal) === -1) hiddenValues.push(cellVal);
+          render();
+        });
+        menu.appendChild(hideBtn);
+
+        if (hiddenValues.length > 0) {
+          var unhideBtn = document.createElement('button');
+          unhideBtn.className = 'br-context-menu-item default';
+          unhideBtn.textContent = 'Unhide all';
+          unhideBtn.addEventListener('click', function() {
+            dismissContextMenu();
+            hiddenValues = [];
+            render();
+          });
+          menu.appendChild(unhideBtn);
+        }
+
         // Clear matches
         var sepClear = document.createElement('div');
         sepClear.className = 'br-context-menu-sep';
@@ -3483,6 +4715,20 @@
         deleteRow(dbKey, data.table, rowIdx);
       });
       menu.appendChild(deleteBtn);
+
+      var sepInspect = document.createElement('div');
+      sepInspect.className = 'br-context-menu-sep';
+      menu.appendChild(sepInspect);
+      var inspectBtn = document.createElement('button');
+      inspectBtn.className = 'br-context-menu-item default';
+      inspectBtn.textContent = 'Inspect  (or ⇧ + right-click)';
+      inspectBtn.title = 'Click, then right-click the same spot again to open browser Inspect. Or use Shift + right-click directly.';
+      inspectBtn.addEventListener('click', function() {
+        dismissContextMenu();
+        window.__brInspectNext = true;
+      });
+      menu.appendChild(inspectBtn);
+
       document.body.appendChild(menu);
 
       // Async: fetch add-on actions for this row and append them to the menu.
@@ -3779,6 +5025,7 @@
         showRowNumbers: showRowNumbers
       };
       if (Object.keys(colWidths).length > 0) state.colWidths = Object.assign({}, colWidths);
+      if (hiddenValues.length > 0) state.hiddenValues = hiddenValues.slice();
       return state;
     };
 
@@ -3794,7 +5041,7 @@
         csvDatabases = databases;
         hasCsvDatabases = Array.isArray(csvDatabases) && csvDatabases.length > 0;
         // Refresh any open database popups in the active tab
-        var tabId = activeTabId();
+        var tabId = activeTabId;
         var popups = document.querySelectorAll('.br-popup[data-tab-id="' + tabId + '"]');
         popups.forEach(function(popup) {
           if (!popup._getLayoutState) return;
@@ -3818,8 +5065,9 @@
   }
 
   function showDatabaseList(databases, opts) {
+    var dbListTitle = document.title + ' Databases';
     if (databases.length === 0) {
-      createPopup({ title: 'Databases', html: '<div class="br-empty">No databases configured</div>', pinned: true, noClose: true, x: 8, y: TAB_BAR_HEIGHT + 8 });
+      createPopup({ title: dbListTitle, html: '<div class="br-empty">No databases configured</div>', pinned: true, noClose: true, x: 8, y: TAB_BAR_HEIGHT + 8 });
       return;
     }
     // Skip straight to single database only when there are no virtual databases
@@ -3836,7 +5084,7 @@
       var dupIcon = '<span class="br-dup-btn" data-dup-db="' + escHtml(db.key) + '">+</span>';
       html += '<button class="' + cls + '" data-db="' + db.key + '">' + dupIcon + label + '</button>';
     });
-    var popup = createPopup({ id: 'db-list', title: 'Databases', pinned: true, noClose: true, x: 8, y: TAB_BAR_HEIGHT + 8 });
+    var popup = createPopup({ id: 'db-list', title: dbListTitle, pinned: true, noClose: true, x: 8, y: TAB_BAR_HEIGHT + 8 });
     popup._getLayoutState = function() { return { type: 'db-list' }; };
     popup.querySelector('.br-popup-body').innerHTML = html;
     popup.querySelector('.br-popup-body').style.padding = '0.4rem 0.5rem';
@@ -4352,10 +5600,10 @@
       { label: 'Restore layout', action: function() { showRestoreLayoutList(menu); } },
       { label: 'Manage layouts', action: function() { menu.remove(); showManageLayouts(); } },
       'sep',
-      { label: 'Open databases', action: function() { showDatabaseList(csvDatabases, {}); } },
-      { label: 'Open root directory', action: function() { loadContent('', { title: rootTitle }); } },
+      { label: 'Open databases', action: function() { menu.remove(); showDatabaseList(csvDatabases, {}); } },
+      { label: 'Open root directory', action: function() { menu.remove(); loadContent('', { title: rootTitle }); } },
       'sep',
-      { label: 'Reload databases', action: function() { reloadDatabases(); } }
+      { label: 'Reload databases', action: function() { menu.remove(); reloadDatabases(); } }
     ];
 
     items.forEach(function(item) {
@@ -4368,7 +5616,8 @@
       var btn = document.createElement('button');
       btn.className = 'br-context-menu-item default';
       btn.textContent = item.label;
-      btn.addEventListener('click', function() {
+      btn.addEventListener('click', function(ev) {
+        ev.stopPropagation();
         item.action();
       });
       menu.appendChild(btn);
@@ -4385,6 +5634,140 @@
     }, 0);
   });
 
+  // ── Print topmost popup (Cmd+P / Ctrl+P) ──
+
+  var IS_MAC_PLATFORM = /Mac|iPhone|iPad|iPod/i.test(navigator.platform || '');
+
+  function findTopmostPopup() {
+    var selector = '.br-popup:not(.view-menu)';
+    if (activeTabId) selector += '[data-tab-id="' + activeTabId + '"]';
+    var popups = Array.from(document.querySelectorAll(selector)).filter(function(el) {
+      return el.style.display !== 'none';
+    });
+    if (popups.length === 0) return null;
+    return popups.reduce(function(top, p) {
+      var z = parseInt(p.style.zIndex) || 0;
+      var topZ = parseInt(top.style.zIndex) || 0;
+      return z > topZ ? p : top;
+    });
+  }
+
+  function printPopupGeneric(popup) {
+    var titleEl = popup.querySelector('.br-popup-title');
+    var titleText = titleEl ? titleEl.textContent : 'Popup';
+    var bodyEl = popup.querySelector('.br-popup-body');
+    if (!bodyEl) return;
+    var w = window.open('', '_blank');
+    if (!w) { alert('Pop-up blocked. Allow pop-ups to print.'); return; }
+    var stylesHtml = '';
+    document.querySelectorAll('style').forEach(function(s) {
+      stylesHtml += '<style>' + s.textContent + '</style>';
+    });
+    var doc = '<!doctype html><html><head><meta charset="utf-8"><title>' + escHtml(titleText) + '</title>' +
+      stylesHtml +
+      '<style>' +
+      'body{font-family:-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;color:#000;margin:1rem;background:#fff;}' +
+      'h1.br-print-title{font-size:1.1rem;margin:0 0 0.6rem 0;}' +
+      '.br-print-body{}' +
+      '@media print{body{margin:0.4in;}}' +
+      '</style></head><body>' +
+      '<h1 class="br-print-title">' + escHtml(titleText) + '</h1>' +
+      '<div class="br-print-body">' + bodyEl.innerHTML + '</div>' +
+      '<script>window.onload=function(){setTimeout(function(){window.print();},150);};<\/script>' +
+      '</body></html>';
+    w.document.open();
+    w.document.write(doc);
+    w.document.close();
+  }
+
+  function printPopup(popup) {
+    if (!popup) return false;
+    if (typeof popup._print === 'function') {
+      popup._print();
+    } else {
+      printPopupGeneric(popup);
+    }
+    return true;
+  }
+
+  document.addEventListener('keydown', function(e) {
+    var key = e.key && e.key.toLowerCase();
+    if (key !== 'p') return;
+    if (e.altKey || e.shiftKey) return;
+    var modifier = IS_MAC_PLATFORM ? e.metaKey : e.ctrlKey;
+    if (!modifier) return;
+    var popup = findTopmostPopup();
+    if (!popup) return;
+    e.preventDefault();
+    e.stopPropagation();
+    printPopup(popup);
+  });
+
+  // ── Refresh topmost popup (Cmd+R / Ctrl+R) ──
+
+  function refreshPopup(popup) {
+    if (!popup || !popup._getLayoutState) return false;
+    var s = popup._getLayoutState();
+
+    if (s.type === 'csv-table') {
+      var hasDirty = popup.querySelector('.br-row-dirty, .br-row-dirty-bypass, .br-row-invalid');
+      if (hasDirty && !confirm('Unsaved edits in this table will be discarded. Refresh anyway?')) return false;
+    }
+
+    if (s.type === 'db-list' || s.type === 'db') {
+      reloadDatabases();
+      return true;
+    }
+
+    var rect = popup.getBoundingClientRect();
+    var geo = {
+      x: parseInt(popup.style.left) || Math.round(rect.left),
+      y: parseInt(popup.style.top) || Math.round(rect.top),
+      width: Math.round(rect.width),
+      height: Math.round(rect.height)
+    };
+    popup.remove();
+
+    switch (s.type) {
+      case 'csv-table':
+        var tableLabel = s.tableLabel || s.tableKey;
+        openCsvTablePopup(s.dbKey, s.tableKey, tableLabel, s.viewKey, s.tableColor, {
+          searchQuery: s.searchQuery,
+          colFilterValues: s.colFilterValues,
+          colFiltersVisible: s.colFiltersVisible,
+          showRowNumbers: s.showRowNumbers,
+          hiddenValues: s.hiddenValues,
+          colWidths: s.colWidths,
+          x: geo.x, y: geo.y, width: geo.width, height: geo.height
+        });
+        return true;
+      case 'db-search':
+        var searchDb = csvDatabases.find(function(d) { return d.key === s.dbKey; });
+        if (searchDb) showDatabaseSearch(searchDb, s.query, { x: geo.x, y: geo.y, width: geo.width, height: geo.height });
+        return true;
+      case 'schema':
+        showTableSchema(s.dbKey, s.tableKey, s.tableColor, geo.x, geo.y, geo.width, geo.height);
+        return true;
+      case 'content':
+        loadContent(s.path, { pos: { x: geo.x, y: geo.y }, width: geo.width, height: geo.height });
+        return true;
+    }
+    return false;
+  }
+
+  document.addEventListener('keydown', function(e) {
+    var key = e.key && e.key.toLowerCase();
+    if (key !== 'r') return;
+    if (e.altKey || e.shiftKey) return;
+    var modifier = IS_MAC_PLATFORM ? e.metaKey : e.ctrlKey;
+    if (!modifier) return;
+    var popup = findTopmostPopup();
+    if (!popup) return;
+    e.preventDefault();
+    e.stopPropagation();
+    refreshPopup(popup);
+  });
+
   // ── Start ──
 
   function init() {
@@ -4395,6 +5778,9 @@
     activeTabId = firstTab.id;
     renderTabBar();
     initNewTab(firstTab);
+    if (initialPath) {
+      loadContent(initialPath, { title: initialPath.split('/').pop() });
+    }
   }
 
   if (document.readyState === 'loading') {