gitmaps 1.1.19 → 1.1.21

package/app/globals.css

@@ -1145,17 +1145,24 @@ body {
 
 /* ── Sticky Zoom Controls ── */
 body.repo-loading .sticky-zoom-pill,
-body.repo-loading .detail-mode-switch,
+body.repo-loading .floating-top-controls,
 body.landing-placeholder-visible .sticky-zoom-pill,
-body.landing-placeholder-visible .detail-mode-switch {
+body.landing-placeholder-visible .floating-top-controls {
   display: none;
 }
 
-.detail-mode-switch {
+.floating-top-controls {
   position: fixed;
   top: 12px;
   right: 144px;
   z-index: 10001;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.detail-mode-switch {
+  position: relative;
 }
 
 .detail-mode-btn {
@@ -1192,6 +1199,15 @@ body.landing-placeholder-visible .detail-mode-switch {
   box-shadow: 0 10px 28px rgba(59, 130, 246, 0.16);
 }
 
+.detail-mode-btn--secondary {
+  border-color: rgba(148, 163, 184, 0.28);
+  color: #e2e8f0;
+}
+
+.detail-mode-btn--secondary:hover {
+  border-color: rgba(148, 163, 184, 0.48);
+}
+
 .detail-mode-label {
   opacity: 0.72;
   text-transform: uppercase;

package/app/layout.tsx

@@ -875,10 +875,16 @@ export default function RootLayout({ children }: { children: any }) {
             </div>
 
             {/* Sticky Zoom Controls — floating pill, bottom-right */}
-            <div id="detailModeSwitch" className="detail-mode-switch" title="Toggle preview-focused detail mode">
-              <button id="toggleDetailMode" type="button" className="detail-mode-btn">
-                <span className="detail-mode-label">Renderer</span>
-                <span id="detailModeState" className="detail-mode-state">Preview</span>
+            <div className="floating-top-controls">
+              <div id="detailModeSwitch" className="detail-mode-switch" title="Toggle preview-focused detail mode">
+                <button id="toggleDetailMode" type="button" className="detail-mode-btn">
+                  <span className="detail-mode-label">Renderer</span>
+                  <span id="detailModeState" className="detail-mode-state">Preview</span>
+                </button>
+              </div>
+              <button id="openSettingsFloating" type="button" className="detail-mode-btn detail-mode-btn--secondary" title="Open settings">
+                <span className="detail-mode-label">Settings</span>
+                <span className="detail-mode-state">Tune</span>
               </button>
             </div>
 

package/app/lib/events.tsx

@@ -740,9 +740,11 @@ export function setupEventListeners(ctx: CanvasContext) {
         });
 
         // Settings modal
-        document.getElementById('openSettings')?.addEventListener('click', () => {
+        const openSettings = () => {
             import('./settings-modal').then(({ openSettingsModal }) => openSettingsModal(ctx));
-        });
+        };
+        document.getElementById('openSettings')?.addEventListener('click', openSettings);
+        document.getElementById('openSettingsFloating')?.addEventListener('click', openSettings);
 
         // Global search
         document.getElementById('openGlobalSearch')?.addEventListener('click', () => {

package/app/lib/low-zoom-preview.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'bun:test';
-import { collectPreviewDiffMarkers, estimatePreviewCharsPerLine, estimatePreviewLineCapacity, estimatePreviewMaxScroll, estimateTitleCharsPerLine, getLowZoomPreviewText, getLowZoomScale, getPreviewScrollMetrics, wrapPreviewText } from './low-zoom-preview';
+import { collectPreviewDiffMarkers, estimatePreviewCharsPerLine, estimatePreviewLineCapacity, estimatePreviewMaxScroll, estimateTitleCharsPerLine, getLowZoomPreviewText, getLowZoomScale, getPreviewRenderableLines, getPreviewScrollMetrics, wrapPreviewText } from './low-zoom-preview';
 
 describe('low zoom preview helpers', () => {
   test('anchors preview text to approximate saved scroll position', () => {
@@ -21,6 +21,18 @@ describe('low zoom preview helpers', () => {
     expect(getLowZoomPreviewText({ path: 'bin.dat', ext: 'dat', isBinary: true, content: 'abc' }, 0)).toBe('');
   });
 
+  test('preview renderable lines preserve added and deleted diff context', () => {
+    const lines = getPreviewRenderableLines({
+      path: 'src/example.ts',
+      ext: 'ts',
+      content: ['one', 'two', 'three'].join('\n'),
+      addedLines: new Set([2]),
+      deletedBeforeLine: new Map([[2, ['old-two']]]),
+    }, 0);
+    expect(lines.some((line) => line.tone === 'deleted' && line.text.includes('old-two'))).toBe(true);
+    expect(lines.some((line) => line.tone === 'added' && line.text === 'two')).toBe(true);
+  });
+
   test('keeps zoomed-out on-screen text smaller than zoomed-in text', () => {
     const far = getLowZoomScale(0.1);
     const near = getLowZoomScale(1);

package/app/lib/low-zoom-preview.ts

@@ -25,17 +25,81 @@ export function getLowZoomScale(zoom: number) {
   };
 }
 
-export function getLowZoomPreviewText(file: any, scrollTop: number): string {
-  if (!file || file.isBinary || !file.content) return '';
+type PreviewRenderableLine = {
+  text: string;
+  tone: 'normal' | 'added' | 'deleted';
+  sourceLine?: number;
+};
+
+function getPreviewDiffMaps(file: any) {
+  const addedLines = new Set<number>(file?.addedLines instanceof Set ? Array.from(file.addedLines) : []);
+  const deletedBeforeLine = new Map<number, string[]>(file?.deletedBeforeLine instanceof Map ? Array.from(file.deletedBeforeLine.entries()) : []);
+
+  if ((addedLines.size === 0 && deletedBeforeLine.size === 0) && Array.isArray(file?.hunks)) {
+    for (const hunk of file.hunks) {
+      let newLine = hunk?.newStart || 1;
+      let pendingDeleted: string[] = [];
+      for (const line of hunk?.lines || []) {
+        if (line?.type === 'add') {
+          addedLines.add(newLine);
+          if (pendingDeleted.length > 0) {
+            const existing = deletedBeforeLine.get(newLine) || [];
+            deletedBeforeLine.set(newLine, existing.concat(pendingDeleted));
+            pendingDeleted = [];
+          }
+          newLine += 1;
+        } else if (line?.type === 'del') {
+          pendingDeleted.push(String(line?.content || ''));
+        } else {
+          if (pendingDeleted.length > 0) {
+            const existing = deletedBeforeLine.get(newLine) || [];
+            deletedBeforeLine.set(newLine, existing.concat(pendingDeleted));
+            pendingDeleted = [];
+          }
+          newLine += 1;
+        }
+      }
+      if (pendingDeleted.length > 0) {
+        const existing = deletedBeforeLine.get(newLine) || [];
+        deletedBeforeLine.set(newLine, existing.concat(pendingDeleted));
+      }
+    }
+  }
+
+  return { addedLines, deletedBeforeLine };
+}
+
+export function getPreviewRenderableLines(file: any, scrollTop: number): PreviewRenderableLine[] {
+  if (!file || file.isBinary || !file.content) return [];
 
   const ext = (file.ext || file.path?.split('.').pop() || '').toLowerCase();
-  if (!PREVIEWABLE_EXTS.has(ext)) return '';
+  if (!PREVIEWABLE_EXTS.has(ext)) return [];
 
   const normalized = String(file.content).replace(/\t/g, '  ');
   const lines = normalized.split('\n');
   const approxLineHeight = 20;
   const startLine = Math.max(0, Math.floor(scrollTop / approxLineHeight));
-  return lines.slice(startLine).join('\n').trim();
+  const { addedLines, deletedBeforeLine } = getPreviewDiffMaps(file);
+  const out: PreviewRenderableLine[] = [];
+
+  for (let i = startLine; i < lines.length; i += 1) {
+    const lineNum = i + 1;
+    const deleted = deletedBeforeLine.get(lineNum) || [];
+    for (const deletedLine of deleted) {
+      out.push({ text: `- ${String(deletedLine).replace(/\t/g, '  ')}`, tone: 'deleted', sourceLine: lineNum });
+    }
+    out.push({
+      text: lines[i],
+      tone: file?.status === 'added' || addedLines.has(lineNum) ? 'added' : file?.status === 'deleted' ? 'deleted' : 'normal',
+      sourceLine: lineNum,
+    });
+  }
+
+  return out;
+}
+
+export function getLowZoomPreviewText(file: any, scrollTop: number): string {
+  return getPreviewRenderableLines(file, scrollTop).map((line) => line.text).join('\n').trim();
 }
 
 export function wrapPreviewText(text: string, maxCharsPerLine: number, maxLines: number): string[] {
@@ -137,8 +201,7 @@ export function getPreviewScrollMetrics(file: any, height: number, zoom: number,
 export function collectPreviewDiffMarkers(file: any, totalLines: number) {
   const markers: Array<{ ratio: number; color: string; height?: number }> = [];
   const safeTotal = Math.max(1, totalLines);
-  let added = file?.addedLines instanceof Set ? Array.from(file.addedLines) : [];
-  let deletedBefore = file?.deletedBeforeLine instanceof Map ? Array.from(file.deletedBeforeLine.keys()) : [];
+  const { addedLines, deletedBeforeLine } = getPreviewDiffMaps(file);
 
   if (file?.status === 'added') {
     markers.push({ ratio: 0, color: '#22c55e', height: 1 });
@@ -149,42 +212,10 @@ export function collectPreviewDiffMarkers(file: any, totalLines: number) {
     return markers;
   }
 
-  if ((added.length === 0 && deletedBefore.length === 0) && Array.isArray(file?.hunks)) {
-    const derivedAdded: number[] = [];
-    const derivedDeleted: number[] = [];
-    for (const hunk of file.hunks) {
-      let newLine = hunk?.newStart || 1;
-      let sawPendingDelete = false;
-      for (const line of hunk?.lines || []) {
-        if (line?.type === 'add') {
-          derivedAdded.push(newLine);
-          if (sawPendingDelete) {
-            derivedDeleted.push(newLine);
-            sawPendingDelete = false;
-          }
-          newLine += 1;
-        } else if (line?.type === 'del') {
-          sawPendingDelete = true;
-        } else {
-          if (sawPendingDelete) {
-            derivedDeleted.push(newLine);
-            sawPendingDelete = false;
-          }
-          newLine += 1;
-        }
-      }
-      if (sawPendingDelete) {
-        derivedDeleted.push(newLine);
-      }
-    }
-    added = derivedAdded;
-    deletedBefore = derivedDeleted;
-  }
-
-  for (const line of added) {
+  for (const line of addedLines) {
     markers.push({ ratio: Math.max(0, Math.min(1, (line - 1) / safeTotal)), color: '#22c55e' });
   }
-  for (const line of deletedBefore) {
+  for (const line of deletedBeforeLine.keys()) {
     markers.push({ ratio: Math.max(0, Math.min(1, (line - 1) / safeTotal)), color: '#ef4444' });
   }
   return markers;
@@ -255,28 +286,50 @@ export function renderLowZoomPreviewCanvas(
   ctx.fillText(trimToWidth(ctx, subtitle, maxTextWidth), leftInset, subtitleY);
 
   const previewY = subtitleY + subtitleFont + scale.gap;
-  const rawPreview = getLowZoomPreviewText(file, scrollTop) || 'Preview unavailable';
-  const wrapped = wrapPreviewText(
-    rawPreview,
-    estimatePreviewCharsPerLine(width, zoom),
-    estimatePreviewLineCapacity(height, zoom),
-  );
+  const previewLines = getPreviewRenderableLines(file, scrollTop);
+  const maxCharsPerLine = estimatePreviewCharsPerLine(width, zoom);
+  const maxVisibleLines = estimatePreviewLineCapacity(height, zoom);
+  const wrapped: Array<{ text: string; tone: 'normal' | 'added' | 'deleted' }> = [];
+
+  for (const line of previewLines) {
+    const parts = wrapPreviewText(line.text, maxCharsPerLine, Math.max(1, maxVisibleLines - wrapped.length));
+    for (const part of parts) {
+      wrapped.push({ text: part, tone: line.tone });
+      if (wrapped.length >= maxVisibleLines) break;
+    }
+    if (wrapped.length >= maxVisibleLines) break;
+  }
+
+  if (wrapped.length === 0) {
+    wrapped.push({ text: 'Preview unavailable', tone: 'normal' });
+  }
 
   ctx.font = `${scale.bodyFont}px "JetBrains Mono", monospace`;
-  ctx.fillStyle = 'rgba(226,232,240,0.92)';
 
   const fadeStart = Math.max(previewY, height - scale.bodyLineHeight * 2.2);
   const bodyHeight = Math.max(scale.bodyLineHeight * 2, height - previewY - scale.padding);
-  const mask = ctx.createLinearGradient(0, previewY, 0, previewY + bodyHeight);
-  mask.addColorStop(0, 'rgba(226,232,240,0.92)');
-  mask.addColorStop(Math.max(0, (fadeStart - previewY) / Math.max(1, bodyHeight)), 'rgba(226,232,240,0.92)');
-  mask.addColorStop(1, 'rgba(226,232,240,0)');
-  ctx.fillStyle = mask;
+  const fadeRatio = Math.max(0, (fadeStart - previewY) / Math.max(1, bodyHeight));
 
   wrapped.forEach((line, index) => {
     const y = previewY + index * scale.bodyLineHeight;
     if (y > height - scale.padding) return;
-    ctx.fillText(line, leftInset, y);
+
+    const t = Math.max(0, Math.min(1, (y - previewY) / Math.max(1, bodyHeight)));
+    const alpha = t <= fadeRatio ? 1 : Math.max(0, 1 - ((t - fadeRatio) / Math.max(0.0001, 1 - fadeRatio)));
+
+    if (line.tone === 'added') {
+      ctx.fillStyle = `rgba(34,197,94,${0.12 * alpha})`;
+      ctx.fillRect(leftInset - 4, y, maxTextWidth + 4, scale.bodyLineHeight - 1);
+      ctx.fillStyle = `rgba(134,239,172,${0.98 * alpha})`;
+    } else if (line.tone === 'deleted') {
+      ctx.fillStyle = `rgba(239,68,68,${0.1 * alpha})`;
+      ctx.fillRect(leftInset - 4, y, maxTextWidth + 4, scale.bodyLineHeight - 1);
+      ctx.fillStyle = `rgba(252,165,165,${0.96 * alpha})`;
+    } else {
+      ctx.fillStyle = `rgba(226,232,240,${0.92 * alpha})`;
+    }
+
+    ctx.fillText(trimToWidth(ctx, line.text, maxTextWidth), leftInset, y);
   });
 
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gitmaps",
-  "version": "1.1.19",
+  "version": "1.1.21",
   "type": "module",
   "bin": {
     "gitmaps": "cli.ts"