reviw 0.6.0 → 0.7.1

package/README.md

@@ -1,16 +1,34 @@
 # reviw
 
-A lightweight browser-based tool for reviewing and annotating tabular data, text, and Markdown files. Supports CSV, TSV, plain text, and Markdown. Comments are output as YAML to stdout.
+A lightweight browser-based tool for reviewing and annotating tabular data, text, Markdown, and diff files. Supports CSV, TSV, plain text, Markdown, and unified diff formats. Comments are output as YAML to stdout.
 
 ## Features
 
-- **CSV/TSV support**: View tabular data with column/row freezing and filtering
-- **Markdown support**: Side-by-side preview with synchronized scrolling
-- **Text support**: Line-by-line commenting for plain text files
+### File Format Support
+- **CSV/TSV**: View tabular data with sticky headers, column freezing, filtering, and column resizing
+- **Markdown**: Side-by-side preview with synchronized scrolling
+- **Diff/Patch**: GitHub-style diff view with syntax highlighting, collapsible large files (500+ lines), and binary files sorted to end
+- **Text**: Line-by-line commenting for plain text files
+
+### Mermaid.js Diagrams
+- Auto-detect and render Mermaid diagrams in Markdown files
+- Click any diagram to open fullscreen viewer
+- Zoom with mouse wheel (centered on cursor position, up to 10x)
+- Pan with mouse drag
+- Minimap showing current viewport position
+- Syntax error display in toast notifications
+
+### UI Features
+- **Theme toggle**: Switch between light and dark modes
 - **Multi-file support**: Open multiple files simultaneously on separate ports
 - **Drag selection**: Select rectangular regions or multiple rows for batch comments
-- **Real-time**: Hot reload on file changes via SSE
-- **YAML output**: Comments exported with file, mode, row, col, value, and text
+- **Real-time updates**: Hot reload on file changes via SSE
+- **Comment persistence**: Auto-save comments to localStorage with recovery modal
+- **Keyboard shortcuts**: Cmd/Ctrl+Enter to open submit modal
+
+### Output
+- YAML format with file, mode, row, col, value, and comment text
+- Overall summary field for review notes
 
 ## Installation
 
@@ -32,24 +50,39 @@ reviw <file> [--port 3000] [--encoding utf8|shift_jis|...]
 
 # Multiple files (each opens on consecutive ports)
 reviw file1.csv file2.md file3.tsv --port 3000
+
+# Diff from stdin
+git diff HEAD | reviw
+
+# Diff file
+reviw changes.diff
 ```
 
-- Browser opens automatically (macOS: `open` / Linux: `xdg-open` / Windows: `start`)
-- Click cells to add comments, or drag to select multiple cells/rows
-- Close the tab or click "Submit & Exit" to output comments as YAML and terminate the server
-- Encoding defaults to UTF-8; use `--encoding` to specify or let `chardet` auto-detect (Shift_JIS, CP932, etc.)
-- Use `--no-open` to prevent automatic browser opening
+### Options
+- `--port <number>`: Specify starting port (default: 3000)
+- `--encoding <encoding>`: Force specific encoding (auto-detected by default)
+- `--no-open`: Prevent automatic browser opening
+
+### Workflow
+1. Browser opens automatically (macOS: `open` / Linux: `xdg-open` / Windows: `start`)
+2. Click cells/lines to add comments, or drag to select multiple
+3. Use Cmd/Ctrl+Enter or click "Submit & Exit" to output comments
+4. Comments are printed as YAML to stdout
 
 ## Screenshots
 
 ### CSV View
-
 ![CSV View](./assets/screenshot-csv.png)
 
 ### Markdown View
-
 ![Markdown View](./assets/screenshot-md.png)
 
+### Diff View
+![Diff View](./assets/screenshot-diff.png)
+
+### Mermaid Fullscreen
+![Mermaid Fullscreen](./assets/screenshot-mermaid.png)
+
 ## Output Example
 
 ```yaml
@@ -62,6 +95,7 @@ comments:
     col: 3
     text: This value needs review
     value: '150'
+summary: Overall the data looks good, minor issues noted above.
 ```
 
 ## Development

package/cli.cjs

@@ -1842,7 +1842,141 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
       header { flex-direction: column; align-items: flex-start; }
       .comment-list { width: calc(100% - 24px); right: 12px; }
     }
+    /* Mermaid diagram styles */
+    .mermaid-container {
+      position: relative;
+      margin: 16px 0;
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 16px;
+      overflow: hidden;
+    }
+    .mermaid-container .mermaid {
+      display: flex;
+      justify-content: center;
+    }
+    .mermaid-container .mermaid svg {
+      max-width: 100%;
+      height: auto;
+    }
+    .mermaid-fullscreen-btn {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      background: var(--selected-bg);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 6px 10px;
+      cursor: pointer;
+      color: var(--text);
+      font-size: 12px;
+      z-index: 2;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .mermaid-fullscreen-btn:hover { background: var(--hover-bg); }
+    /* Fullscreen overlay */
+    .fullscreen-overlay {
+      position: fixed;
+      inset: 0;
+      background: var(--bg);
+      z-index: 1000;
+      display: none;
+      flex-direction: column;
+    }
+    .fullscreen-overlay.visible { display: flex; }
+    .fullscreen-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px 20px;
+      background: var(--panel-alpha);
+      border-bottom: 1px solid var(--border);
+    }
+    .fullscreen-header h3 { margin: 0; font-size: 14px; }
+    .fullscreen-controls { display: flex; gap: 8px; align-items: center; }
+    .fullscreen-controls button {
+      background: var(--selected-bg);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 6px 12px;
+      cursor: pointer;
+      color: var(--text);
+      font-size: 13px;
+    }
+    .fullscreen-controls button:hover { background: var(--hover-bg); }
+    .fullscreen-controls .zoom-info { font-size: 12px; color: var(--muted); min-width: 50px; text-align: center; }
+    .fullscreen-content {
+      flex: 1;
+      overflow: hidden;
+      position: relative;
+      cursor: grab;
+    }
+    .fullscreen-content:active { cursor: grabbing; }
+    .fullscreen-content .mermaid-wrapper {
+      position: absolute;
+      transform-origin: 0 0;
+      padding: 40px;
+    }
+    .fullscreen-content .mermaid svg {
+      display: block;
+    }
+    /* Minimap */
+    .minimap {
+      position: absolute;
+      top: 70px;
+      right: 20px;
+      width: 200px;
+      height: 150px;
+      background: var(--panel-alpha);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      overflow: hidden;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    }
+    .minimap-content {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 8px;
+    }
+    .minimap-content svg {
+      max-width: 100%;
+      max-height: 100%;
+      opacity: 0.6;
+    }
+    .minimap-viewport {
+      position: absolute;
+      border: 2px solid var(--accent);
+      background: rgba(102, 126, 234, 0.2);
+      pointer-events: none;
+      border-radius: 2px;
+    }
+    /* Error toast */
+    .mermaid-error-toast {
+      position: fixed;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: #dc3545;
+      color: white;
+      padding: 12px 24px;
+      border-radius: 8px;
+      font-size: 13px;
+      max-width: 80%;
+      z-index: 2000;
+      display: none;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+      white-space: pre-wrap;
+      font-family: monospace;
+    }
+    .mermaid-error-toast.visible { display: block; }
   </style>
+  <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
 </head>
 <body>
   <header>
@@ -1958,6 +2092,27 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
     </div>
   </div>
 
+  <div class="fullscreen-overlay" id="mermaid-fullscreen">
+    <div class="fullscreen-header">
+      <h3>Mermaid Diagram</h3>
+      <div class="fullscreen-controls">
+        <button id="fs-zoom-out">−</button>
+        <span class="zoom-info" id="fs-zoom-info">100%</span>
+        <button id="fs-zoom-in">+</button>
+        <button id="fs-reset">Reset</button>
+        <button id="fs-close">Close (ESC)</button>
+      </div>
+    </div>
+    <div class="fullscreen-content" id="fs-content">
+      <div class="mermaid-wrapper" id="fs-wrapper"></div>
+    </div>
+    <div class="minimap" id="fs-minimap">
+      <div class="minimap-content" id="fs-minimap-content"></div>
+      <div class="minimap-viewport" id="fs-minimap-viewport"></div>
+    </div>
+  </div>
+  <div class="mermaid-error-toast" id="mermaid-error-toast"></div>
+
   <script>
     const DATA = ${serialized};
     const MAX_COLS = ${cols};
@@ -2932,6 +3087,269 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
         mdRight.addEventListener('scroll', () => syncScroll(mdRight, mdLeft, 'right'), { passive: true });
       }
     }
+
+    // --- Mermaid Initialization ---
+    (function initMermaid() {
+      if (typeof mermaid === 'undefined') return;
+
+      const errorToast = document.getElementById('mermaid-error-toast');
+      let errorTimeout;
+
+      function showError(msg) {
+        errorToast.textContent = msg;
+        errorToast.classList.add('visible');
+        console.error('[Mermaid Error]', msg);
+        clearTimeout(errorTimeout);
+        errorTimeout = setTimeout(() => errorToast.classList.remove('visible'), 8000);
+      }
+
+      mermaid.initialize({
+        startOnLoad: false,
+        theme: document.documentElement.getAttribute('data-theme') === 'light' ? 'default' : 'dark',
+        securityLevel: 'loose',
+        logLevel: 'error'
+      });
+
+      // Find all mermaid code blocks in preview
+      const preview = document.querySelector('.md-preview');
+      if (!preview) return;
+
+      const codeBlocks = preview.querySelectorAll('pre code.language-mermaid, pre code');
+      codeBlocks.forEach((code, idx) => {
+        const pre = code.parentElement;
+        const text = code.textContent.trim();
+
+        // Check if it's mermaid content
+        if (!code.classList.contains('language-mermaid') && !text.match(/^(graph|flowchart|sequenceDiagram|classDiagram|stateDiagram|erDiagram|journey|gantt|pie|gitGraph|mindmap|timeline)/)) {
+          return;
+        }
+
+        // Create container
+        const container = document.createElement('div');
+        container.className = 'mermaid-container';
+        container.style.cursor = 'pointer';
+        container.title = 'Click to view fullscreen';
+
+        const mermaidDiv = document.createElement('div');
+        mermaidDiv.className = 'mermaid';
+        mermaidDiv.id = 'mermaid-' + idx;
+        mermaidDiv.textContent = text;
+
+        // Click anywhere on container to open fullscreen
+        container.addEventListener('click', () => openFullscreen(mermaidDiv));
+
+        container.appendChild(mermaidDiv);
+        pre.replaceWith(container);
+      });
+
+      // Render all mermaid diagrams with error handling
+      mermaid.run().catch(err => {
+        showError('Mermaid Syntax Error: ' + (err.message || err));
+      });
+
+      // Watch for render errors in DOM
+      setTimeout(() => {
+        document.querySelectorAll('.mermaid').forEach(el => {
+          if (el.querySelector('.error-text, .error-icon')) {
+            const errText = el.textContent;
+            showError('Mermaid Parse Error: ' + errText.slice(0, 200));
+          }
+        });
+      }, 500);
+
+      // Fullscreen functionality
+      const fsOverlay = document.getElementById('mermaid-fullscreen');
+      const fsWrapper = document.getElementById('fs-wrapper');
+      const fsContent = document.getElementById('fs-content');
+      const fsZoomInfo = document.getElementById('fs-zoom-info');
+      const minimapContent = document.getElementById('fs-minimap-content');
+      const minimapViewport = document.getElementById('fs-minimap-viewport');
+      let currentZoom = 1;
+      let initialZoom = 1;
+      let panX = 0, panY = 0;
+      let isPanning = false;
+      let startX, startY;
+      let svgNaturalWidth = 0, svgNaturalHeight = 0;
+      let minimapScale = 1;
+
+      function openFullscreen(mermaidEl) {
+        const svg = mermaidEl.querySelector('svg');
+        if (!svg) return;
+        fsWrapper.innerHTML = '';
+        const clonedSvg = svg.cloneNode(true);
+        fsWrapper.appendChild(clonedSvg);
+
+        // Setup minimap
+        minimapContent.innerHTML = '';
+        const minimapSvg = svg.cloneNode(true);
+        minimapContent.appendChild(minimapSvg);
+
+        // Get SVG's intrinsic/natural size from viewBox or attributes
+        const viewBox = svg.getAttribute('viewBox');
+        let naturalWidth, naturalHeight;
+
+        if (viewBox) {
+          const parts = viewBox.split(/[\\s,]+/);
+          naturalWidth = parseFloat(parts[2]) || 800;
+          naturalHeight = parseFloat(parts[3]) || 600;
+        } else {
+          naturalWidth = parseFloat(svg.getAttribute('width')) || svg.getBoundingClientRect().width || 800;
+          naturalHeight = parseFloat(svg.getAttribute('height')) || svg.getBoundingClientRect().height || 600;
+        }
+
+        svgNaturalWidth = naturalWidth;
+        svgNaturalHeight = naturalHeight;
+
+        // Calculate minimap scale
+        const minimapMaxWidth = 184; // 200 - 16 padding
+        const minimapMaxHeight = 134; // 150 - 16 padding
+        minimapScale = Math.min(minimapMaxWidth / naturalWidth, minimapMaxHeight / naturalHeight);
+
+        clonedSvg.style.width = naturalWidth + 'px';
+        clonedSvg.style.height = naturalHeight + 'px';
+
+        // Calculate fit-to-viewport zoom
+        const viewportHeight = window.innerHeight - 80;
+        const viewportWidth = window.innerWidth - 40;
+
+        const zoomForHeight = viewportHeight / naturalHeight;
+        const zoomForWidth = viewportWidth / naturalWidth;
+        const fitZoom = Math.min(zoomForHeight, zoomForWidth);
+
+        currentZoom = fitZoom;
+        initialZoom = fitZoom;
+
+        // Center the SVG in viewport
+        const scaledWidth = naturalWidth * currentZoom;
+        const scaledHeight = naturalHeight * currentZoom;
+        panX = (viewportWidth - scaledWidth) / 2 + 20;
+        panY = (viewportHeight - scaledHeight) / 2 + 60;
+
+        updateTransform();
+        fsOverlay.classList.add('visible');
+      }
+
+      function closeFullscreen() {
+        fsOverlay.classList.remove('visible');
+      }
+
+      function updateTransform() {
+        fsWrapper.style.transform = 'translate(' + panX + 'px, ' + panY + 'px) scale(' + currentZoom + ')';
+        fsZoomInfo.textContent = Math.round(currentZoom * 100) + '%';
+        updateMinimap();
+      }
+
+      function updateMinimap() {
+        if (!svgNaturalWidth || !svgNaturalHeight) return;
+
+        const viewportWidth = window.innerWidth - 40;
+        const viewportHeight = window.innerHeight - 80;
+
+        // Minimap dimensions
+        const mmWidth = 184;
+        const mmHeight = 134;
+        const mmPadding = 8;
+
+        // SVG size in minimap (centered)
+        const mmSvgWidth = svgNaturalWidth * minimapScale;
+        const mmSvgHeight = svgNaturalHeight * minimapScale;
+        const mmSvgLeft = (mmWidth - mmSvgWidth) / 2 + mmPadding;
+        const mmSvgTop = (mmHeight - mmSvgHeight) / 2 + mmPadding;
+
+        // Calculate visible area in SVG coordinates (accounting for transform origin at 0,0)
+        // panX/panY are the translation values, currentZoom is the scale
+        // The visible area starts at -panX/currentZoom in SVG coordinates
+        const visibleLeft = Math.max(0, -panX / currentZoom);
+        const visibleTop = Math.max(0, (-panY + 60) / currentZoom);
+        const visibleWidth = viewportWidth / currentZoom;
+        const visibleHeight = viewportHeight / currentZoom;
+
+        // Clamp to SVG bounds
+        const clampedLeft = Math.min(visibleLeft, svgNaturalWidth);
+        const clampedTop = Math.min(visibleTop, svgNaturalHeight);
+
+        // Position viewport indicator in minimap coordinates
+        const vpLeft = mmSvgLeft + clampedLeft * minimapScale;
+        const vpTop = mmSvgTop + clampedTop * minimapScale;
+        const vpWidth = Math.min(mmWidth - vpLeft + mmPadding, visibleWidth * minimapScale);
+        const vpHeight = Math.min(mmHeight - vpTop + mmPadding, visibleHeight * minimapScale);
+
+        minimapViewport.style.left = vpLeft + 'px';
+        minimapViewport.style.top = vpTop + 'px';
+        minimapViewport.style.width = Math.max(20, vpWidth) + 'px';
+        minimapViewport.style.height = Math.max(15, vpHeight) + 'px';
+      }
+
+      // Use multiplicative zoom for consistent behavior
+      function zoomAt(factor, clientX, clientY) {
+        const oldZoom = currentZoom;
+        currentZoom = Math.max(0.1, Math.min(10, currentZoom * factor));
+
+        // Zoom around mouse position
+        const fsRect = fsContent.getBoundingClientRect();
+        const mouseX = clientX - fsRect.left;
+        const mouseY = clientY - fsRect.top;
+
+        const zoomRatio = currentZoom / oldZoom;
+        panX = mouseX - (mouseX - panX) * zoomRatio;
+        panY = mouseY - (mouseY - panY) * zoomRatio;
+
+        updateTransform();
+      }
+
+      function zoom(factor) {
+        const fsRect = fsContent.getBoundingClientRect();
+        zoomAt(factor, fsRect.left + fsRect.width / 2, fsRect.top + fsRect.height / 2);
+      }
+
+      document.getElementById('fs-zoom-in').addEventListener('click', () => zoom(1.25));
+      document.getElementById('fs-zoom-out').addEventListener('click', () => zoom(0.8));
+      document.getElementById('fs-reset').addEventListener('click', () => {
+        currentZoom = initialZoom;
+        const viewportHeight = window.innerHeight - 80;
+        const viewportWidth = window.innerWidth - 40;
+        const scaledWidth = svgNaturalWidth * currentZoom;
+        const scaledHeight = svgNaturalHeight * currentZoom;
+        panX = (viewportWidth - scaledWidth) / 2 + 20;
+        panY = (viewportHeight - scaledHeight) / 2 + 60;
+        updateTransform();
+      });
+      document.getElementById('fs-close').addEventListener('click', closeFullscreen);
+
+      // Pan with mouse drag
+      fsContent.addEventListener('mousedown', (e) => {
+        isPanning = true;
+        startX = e.clientX - panX;
+        startY = e.clientY - panY;
+        fsContent.style.cursor = 'grabbing';
+      });
+
+      document.addEventListener('mousemove', (e) => {
+        if (!isPanning) return;
+        panX = e.clientX - startX;
+        panY = e.clientY - startY;
+        updateTransform();
+      });
+
+      document.addEventListener('mouseup', () => {
+        isPanning = false;
+        fsContent.style.cursor = 'grab';
+      });
+
+      // Zoom with mouse wheel - use multiplicative factor
+      fsContent.addEventListener('wheel', (e) => {
+        e.preventDefault();
+        const factor = e.deltaY > 0 ? 0.9 : 1.1;
+        zoomAt(factor, e.clientX, e.clientY);
+      }, { passive: false });
+
+      // ESC to close
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && fsOverlay.classList.contains('visible')) {
+          closeFullscreen();
+        }
+      });
+    })();
   </script>
 </body>
 </html>`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reviw",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "Lightweight file reviewer with in-browser comments for CSV, TSV, Markdown, and Git diffs.",
   "type": "module",
   "bin": {