gitmaps 1.1.6 → 1.1.7

package/app/globals.css

@@ -1145,10 +1145,64 @@ body {
 
 /* ── Sticky Zoom Controls ── */
 body.repo-loading .sticky-zoom-pill,
-body.landing-placeholder-visible .sticky-zoom-pill {
+body.repo-loading .detail-mode-switch,
+body.landing-placeholder-visible .sticky-zoom-pill,
+body.landing-placeholder-visible .detail-mode-switch {
   display: none;
 }
 
+.detail-mode-switch {
+  position: fixed;
+  top: 12px;
+  right: 144px;
+  z-index: 10001;
+}
+
+.detail-mode-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background: rgba(15, 23, 42, 0.88);
+  border: 1px solid rgba(124, 58, 237, 0.24);
+  border-radius: 10px;
+  color: #d8ccff;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  cursor: pointer;
+  backdrop-filter: blur(8px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease,
+    transform 0.12s ease;
+}
+
+.detail-mode-btn:hover {
+  background: rgba(15, 23, 42, 0.96);
+  border-color: rgba(124, 58, 237, 0.45);
+}
+
+.detail-mode-btn:active {
+  transform: scale(0.98);
+}
+
+.detail-mode-btn.active {
+  border-color: rgba(96, 165, 250, 0.6);
+  box-shadow: 0 10px 28px rgba(59, 130, 246, 0.16);
+}
+
+.detail-mode-label {
+  opacity: 0.72;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.detail-mode-state {
+  color: #f8fafc;
+  font-weight: 700;
+}
+
 .sticky-zoom-pill {
   position: absolute;
   bottom: 16px;

package/app/layout.tsx

@@ -875,6 +875,13 @@ 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">Preview mode</span>
+                <span id="detailModeState" className="detail-mode-state">Auto</span>
+              </button>
+            </div>
+
             <div id="stickyZoomControls" className="sticky-zoom-pill">
               <button id="stickyZoomOut" className="sz-btn" title="Zoom out">
                 <svg

package/app/lib/events.tsx

@@ -27,7 +27,7 @@ import { createLayer, getActiveLayer, addSectionToLayer } from './layers';
 import { updateCanvasTransform, updateZoomUI, updateMinimap, fitAllFiles, setupMinimapClick } from './canvas';
 import { zoomTowardScreen, panByDelta, screenToWorld, getCardManager } from './xydraw-bridge';
 import { hideSelectedFiles, showHiddenFilesModal as showHiddenModal } from './hidden-files';
-import { updatePillSelectionHighlights } from './viewport-culling';
+import { getDetailMode, toggleDetailMode, updatePillSelectionHighlights } from './viewport-culling';
 import { clearSelectionHighlights, updateSelectionHighlights, updateArrangeToolbar, arrangeRow, arrangeColumn, arrangeGrid, toggleCardExpand, fitScreenSize, changeCardsFontSize } from './cards';
 import { loadRepository, rerenderCurrentView, selectCommit } from './repo';
 import { handoffRepoLoad, syncRepoSelection } from './repo-handoff';
@@ -451,6 +451,28 @@ export function setupEventListeners(ctx: CanvasContext) {
             });
         }
 
+        const detailModeToggle = document.getElementById('toggleDetailMode');
+        if (detailModeToggle) {
+            const stateEl = document.getElementById('detailModeState');
+            const updateDetailModeUi = () => {
+                const mode = getDetailMode();
+                detailModeToggle.classList.toggle('active', mode === 'preview');
+                detailModeToggle.setAttribute('title', mode === 'preview'
+                    ? 'Preview mode forced on — click to restore auto detail switching'
+                    : 'Auto detail switching — click to keep preview mode on at every zoom');
+                if (stateEl) stateEl.textContent = mode === 'preview' ? 'Preview' : 'Auto';
+            };
+            updateDetailModeUi();
+            detailModeToggle.addEventListener('click', () => {
+                const next = toggleDetailMode();
+                updateDetailModeUi();
+                rerenderCurrentView(ctx);
+                showToast(next === 'preview'
+                    ? 'Preview mode forced on'
+                    : 'Auto detail switching restored', 'info');
+            });
+        }
+
         // Control mode toggle (Simple vs Advanced)
         const modeToggle = document.getElementById('toggleControlMode');
         if (modeToggle) {

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

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'bun:test';
-import { estimatePreviewCharsPerLine, estimatePreviewLineCapacity, getLowZoomPreviewText, getLowZoomScale, wrapPreviewText } from './low-zoom-preview';
+import { estimatePreviewCharsPerLine, estimatePreviewLineCapacity, estimateTitleCharsPerLine, getLowZoomPreviewText, getLowZoomScale, wrapPreviewText } from './low-zoom-preview';
 
 describe('low zoom preview helpers', () => {
   test('anchors preview text to approximate saved scroll position', () => {
@@ -33,6 +33,13 @@ describe('low zoom preview helpers', () => {
 
   test('preview capacity estimates stay positive', () => {
     expect(estimatePreviewCharsPerLine(580, 0.25)).toBeGreaterThan(8);
+    expect(estimateTitleCharsPerLine(580, 0.25)).toBeGreaterThan(8);
     expect(estimatePreviewLineCapacity(700, 0.25)).toBeGreaterThanOrEqual(2);
   });
+
+  test('title typography is larger than body typography for readability', () => {
+    const scale = getLowZoomScale(0.18);
+    expect(scale.titleFont).toBeGreaterThan(scale.bodyFont);
+    expect(scale.titleLineHeight).toBeGreaterThan(scale.bodyLineHeight * 0.7);
+  });
 });

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

@@ -5,15 +5,16 @@ const PREVIEWABLE_EXTS = new Set([
 export function getLowZoomScale(zoom: number) {
   const clampedZoom = Math.max(0.08, Math.min(0.25, zoom));
   const progress = (0.25 - clampedZoom) / (0.25 - 0.08);
-  const desiredScreenTitle = 10 + progress * 4;
-  const desiredScreenBody = 8 + progress * 4;
+  const desiredScreenTitle = 14 + progress * 6;
+  const desiredScreenBody = 9 + progress * 4;
   return {
     titleFont: desiredScreenTitle / clampedZoom,
+    titleLineHeight: (desiredScreenTitle * 1.08) / clampedZoom,
     bodyFont: desiredScreenBody / clampedZoom,
     bodyLineHeight: (desiredScreenBody * 1.45) / clampedZoom,
-    padding: (10 + progress * 4) / clampedZoom,
-    gap: (6 + progress * 3) / clampedZoom,
-    radius: 8 / clampedZoom,
+    padding: (12 + progress * 6) / clampedZoom,
+    gap: (7 + progress * 3) / clampedZoom,
+    radius: 10 / clampedZoom,
   };
 }
 
@@ -82,10 +83,17 @@ function ellipsizeWrappedLines(lines: string[], maxLines: number) {
 
 export function estimatePreviewLineCapacity(height: number, zoom: number): number {
   const scale = getLowZoomScale(zoom);
-  const available = Math.max(scale.bodyLineHeight, height - scale.padding * 2 - scale.titleFont - scale.bodyFont - scale.gap * 3);
+  const available = Math.max(scale.bodyLineHeight, height - scale.padding * 2 - scale.titleLineHeight * 2 - scale.bodyFont - scale.gap * 4);
   return Math.max(2, Math.floor(available / scale.bodyLineHeight));
 }
 
+export function estimateTitleCharsPerLine(width: number, zoom: number): number {
+  const scale = getLowZoomScale(zoom);
+  const available = Math.max(80, width - scale.padding * 2 - Math.max(14, width * 0.02));
+  const avgCharWidth = Math.max(7, scale.titleFont * 0.58);
+  return Math.max(8, Math.floor(available / avgCharWidth));
+}
+
 export function estimatePreviewCharsPerLine(width: number, zoom: number): number {
   const scale = getLowZoomScale(zoom);
   const available = Math.max(60, width - scale.padding * 2 - Math.max(14, width * 0.02));
@@ -138,15 +146,19 @@ export function renderLowZoomPreviewCanvas(
   ctx.font = `700 ${scale.titleFont}px "JetBrains Mono", monospace`;
   ctx.fillStyle = '#f8fafc';
   const title = path.split('/').pop() || path;
-  ctx.fillText(trimToWidth(ctx, title, maxTextWidth), leftInset, topInset);
+  const titleLines = wrapPreviewText(title, estimateTitleCharsPerLine(width, zoom), 2);
+  titleLines.forEach((line, index) => {
+    ctx.fillText(trimToWidth(ctx, line, maxTextWidth), leftInset, topInset + index * scale.titleLineHeight);
+  });
 
-  const subtitleY = topInset + scale.titleFont + scale.gap;
-  ctx.font = `${Math.max(scale.bodyFont * 0.78, 8 / Math.max(zoom, 0.08))}px "JetBrains Mono", monospace`;
+  const subtitleY = topInset + titleLines.length * scale.titleLineHeight + scale.gap * 0.8;
+  ctx.font = `${Math.max(scale.bodyFont * 0.8, 9 / Math.max(zoom, 0.08))}px "JetBrains Mono", monospace`;
   ctx.fillStyle = 'rgba(226,232,240,0.72)';
-  const subtitle = path.includes('/') ? path.split('/').slice(0, -1).join('/') : 'root';
+  const pathParts = path.split('/');
+  const subtitle = pathParts.length > 1 ? pathParts.slice(Math.max(0, pathParts.length - 3), -1).join(' / ') : 'root';
   ctx.fillText(trimToWidth(ctx, subtitle, maxTextWidth), leftInset, subtitleY);
 
-  const previewY = subtitleY + Math.max(scale.bodyFont * 0.78, 8 / Math.max(zoom, 0.08)) + scale.gap * 1.5;
+  const previewY = subtitleY + Math.max(scale.bodyFont * 0.8, 9 / Math.max(zoom, 0.08)) + scale.gap * 1.35;
   const rawPreview = getLowZoomPreviewText(file, scrollTop) || 'Preview unavailable';
   const wrapped = wrapPreviewText(
     rawPreview,

package/app/lib/viewport-culling.ts

@@ -36,6 +36,7 @@ const VIEWPORT_MARGIN = 500;
 
 // LOD threshold: below this zoom level, use lightweight pill placeholders
 const LOD_ZOOM_THRESHOLD = 0.25;
+const LOW_ZOOM_MODE_STORAGE_KEY = 'gitmaps:detailMode';
 
 // Maximum deferred cards to materialize per animation frame
 // Prevents frame drops when zooming out then back in on huge repos
@@ -52,6 +53,14 @@ export function markTransformActive() {
 
 // Track current LOD mode so we can detect transitions
 let _currentLodMode: 'full' | 'pill' = 'full';
+let _detailMode: 'auto' | 'preview' = (() => {
+    try {
+        const stored = localStorage.getItem(LOW_ZOOM_MODE_STORAGE_KEY);
+        return stored === 'preview' ? 'preview' : 'auto';
+    } catch {
+        return 'auto';
+    }
+})();
 
 // Track pill elements for cleanup
 const pillCards = new Map<string, HTMLElement>();
@@ -90,6 +99,27 @@ export function getPinnedCards(): Set<string> {
     return _pinnedCards;
 }
 
+export function getDetailMode(): 'auto' | 'preview' {
+    return _detailMode;
+}
+
+export function setDetailMode(mode: 'auto' | 'preview') {
+    _detailMode = mode;
+    try {
+        localStorage.setItem(LOW_ZOOM_MODE_STORAGE_KEY, mode);
+    } catch { }
+}
+
+export function toggleDetailMode(): 'auto' | 'preview' {
+    const next = _detailMode === 'preview' ? 'auto' : 'preview';
+    setDetailMode(next);
+    return next;
+}
+
+export function isPreviewModeForced() {
+    return _detailMode === 'preview';
+}
+
 // ── Status colors for low-zoom cards
 const PILL_COLORS: Record<string, string> = {
     'ts': '#3178c6',
@@ -293,7 +323,7 @@ export function performViewportCulling(ctx: CanvasContext) {
     // Phase 4c: also materialize deferred CardManager cards
     // Reuse zoom from worldRect (already snapped) — avoids redundant ctx.snap()
     const zoom = worldRect.zoom;
-    const isLowZoom = zoom <= LOD_ZOOM_THRESHOLD;
+    const isLowZoom = _detailMode === 'preview' || zoom <= LOD_ZOOM_THRESHOLD;
 
     // Important: never materialize full cards while in low-zoom pill mode.
     // Otherwise CardManager keeps mounting heavyweight cards right when the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gitmaps",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "type": "module",
   "bin": {
     "gitmaps": "cli.ts"
@@ -20,10 +20,12 @@
     "smoke:browser": "bun scripts/browser-smoke-local.ts",
     "smoke:browser-tools": "bash scripts/browser-smoke-local.sh",
     "smoke:browser-tools:load": "bash scripts/browser-repo-load-smoke.sh",
+    "smoke:browser-tools:low-zoom": "bash scripts/browser-low-zoom-perf-smoke.sh",
     "smoke:browser-tools:guard": "bash scripts/browser-smoke-guard.sh",
     "smoke:browser-tools:self-check": "bash scripts/browser-smoke-self-check.sh",
     "smoke:browser-tools:check": "bash scripts/browser-smoke-check.sh",
     "smoke:docker-image": "bash scripts/docker-image-smoke.sh",
+    "bench:low-zoom": "bun scripts/low-zoom-preview-bench.ts",
     "prepublishOnly": "echo 'Publishing gitmaps to npm'"
   },
   "keywords": [