gitmaps 1.1.9 → 1.1.11

package/app/layout.tsx

@@ -877,8 +877,8 @@ export default function RootLayout({ children }: { children: any }) {
             {/* 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>
+                <span className="detail-mode-label">Renderer</span>
+                <span id="detailModeState" className="detail-mode-state">Preview</span>
               </button>
             </div>
 

package/app/lib/events.tsx

@@ -458,9 +458,9 @@ export function setupEventListeners(ctx: CanvasContext) {
                 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';
+                    ? 'Preview mode — stays in the preview renderer at every zoom. Click to switch to classic cards.'
+                    : 'Classic mode — old full-card renderer. Click to switch back to preview mode.');
+                if (stateEl) stateEl.textContent = mode === 'preview' ? 'Preview' : 'Classic';
             };
             updateDetailModeUi();
             detailModeToggle.addEventListener('click', () => {
@@ -468,8 +468,8 @@ export function setupEventListeners(ctx: CanvasContext) {
                 updateDetailModeUi();
                 rerenderCurrentView(ctx);
                 showToast(next === 'preview'
-                    ? 'Preview mode forced on'
-                    : 'Auto detail switching restored', 'info');
+                    ? 'Preview mode enabled'
+                    : 'Classic mode enabled', 'info');
             });
         }
 

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

@@ -18,11 +18,11 @@ describe('low zoom preview helpers', () => {
     expect(getLowZoomPreviewText({ path: 'bin.dat', ext: 'dat', isBinary: true, content: 'abc' }, 0)).toBe('');
   });
 
-  test('increases world-space font size as zoom goes down', () => {
-    const near = getLowZoomScale(0.25);
+  test('keeps zoomed-out on-screen text smaller than zoomed-in text', () => {
     const far = getLowZoomScale(0.1);
-    expect(far.titleFont).toBeGreaterThan(near.titleFont);
-    expect(far.bodyFont).toBeGreaterThan(near.bodyFont);
+    const near = getLowZoomScale(1);
+    expect(far.titleFont * 0.1).toBeLessThan(near.titleFont * 1);
+    expect(far.bodyFont * 0.1).toBeLessThan(near.bodyFont * 1);
   });
 
   test('wraps preview text into bounded lines with ellipsis', () => {
@@ -34,7 +34,12 @@ 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);
+    expect(estimatePreviewLineCapacity(700, 0.25)).toBeGreaterThanOrEqual(3);
+  });
+
+  test('higher zoom yields substantially more visible preview lines', () => {
+    expect(estimatePreviewLineCapacity(700, 1)).toBeGreaterThanOrEqual(20);
+    expect(estimatePreviewLineCapacity(700, 0.1)).toBeLessThan(estimatePreviewLineCapacity(700, 1));
   });
 
   test('title typography is larger than body typography for readability', () => {

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

@@ -3,17 +3,21 @@ 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 = 14 + progress * 6;
-  const desiredScreenBody = 9 + progress * 4;
+  const clampedZoom = Math.max(0.08, Math.min(1, zoom));
+  const progress = (clampedZoom - 0.08) / (1 - 0.08);
+
+  const desiredScreenTitle = 8 + progress * 8;
+  const desiredScreenBody = 5.5 + progress * 6.5;
+  const desiredScreenPadding = 6 + progress * 8;
+  const desiredScreenGap = 4 + progress * 4;
+
   return {
     titleFont: desiredScreenTitle / clampedZoom,
     titleLineHeight: (desiredScreenTitle * 1.08) / clampedZoom,
     bodyFont: desiredScreenBody / clampedZoom,
-    bodyLineHeight: (desiredScreenBody * 1.45) / clampedZoom,
-    padding: (12 + progress * 6) / clampedZoom,
-    gap: (7 + progress * 3) / clampedZoom,
+    bodyLineHeight: (desiredScreenBody * 1.35) / clampedZoom,
+    padding: desiredScreenPadding / clampedZoom,
+    gap: desiredScreenGap / clampedZoom,
     radius: 10 / clampedZoom,
   };
 }
@@ -83,22 +87,26 @@ 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.titleLineHeight * 2 - scale.bodyFont - scale.gap * 4);
-  return Math.max(2, Math.floor(available / scale.bodyLineHeight));
+  const titleLines = zoom >= 0.35 ? 2 : 1;
+  const available = Math.max(
+    scale.bodyLineHeight * 2,
+    height - scale.padding * 2 - scale.titleLineHeight * titleLines - scale.bodyFont - scale.gap * 3,
+  );
+  return Math.max(zoom >= 0.6 ? 20 : zoom >= 0.35 ? 12 : 3, 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));
+  const available = Math.max(120, width - scale.padding * 2 - Math.max(12, width * 0.018));
+  const avgCharWidth = Math.max(5.5, scale.titleFont * 0.56);
+  return Math.max(12, 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));
-  const avgCharWidth = Math.max(6, scale.bodyFont * 0.6);
-  return Math.max(8, Math.floor(available / avgCharWidth));
+  const available = Math.max(100, width - scale.padding * 2 - Math.max(12, width * 0.018));
+  const avgCharWidth = Math.max(5, scale.bodyFont * 0.58);
+  return Math.max(10, Math.floor(available / avgCharWidth));
 }
 
 export function renderLowZoomPreviewCanvas(
@@ -135,10 +143,11 @@ export function renderLowZoomPreviewCanvas(
   roundRect(ctx, 0, 0, width, height, Math.max(6, scale.radius));
   ctx.fill();
 
+  const accentWidth = Math.max(6, width * 0.012);
   ctx.fillStyle = accentColor;
-  ctx.fillRect(0, 0, Math.max(10, width * 0.02), height);
+  ctx.fillRect(0, 0, accentWidth, height);
 
-  const leftInset = scale.padding + Math.max(14, width * 0.02);
+  const leftInset = scale.padding + accentWidth + scale.gap * 0.8;
   const topInset = scale.padding;
   const maxTextWidth = Math.max(40, width - leftInset - scale.padding);
 
@@ -146,19 +155,21 @@ export function renderLowZoomPreviewCanvas(
   ctx.font = `700 ${scale.titleFont}px "JetBrains Mono", monospace`;
   ctx.fillStyle = '#f8fafc';
   const title = path.split('/').pop() || path;
-  const titleLines = wrapPreviewText(title, estimateTitleCharsPerLine(width, zoom), 2);
+  const maxTitleLines = zoom >= 0.35 ? 2 : 1;
+  const titleLines = wrapPreviewText(title, estimateTitleCharsPerLine(width, zoom), maxTitleLines);
   titleLines.forEach((line, index) => {
     ctx.fillText(trimToWidth(ctx, line, maxTextWidth), leftInset, topInset + index * scale.titleLineHeight);
   });
 
-  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`;
+  const subtitleY = topInset + titleLines.length * scale.titleLineHeight + scale.gap * 0.65;
+  const subtitleFont = Math.max(scale.bodyFont * 0.82, 6 / Math.max(zoom, 0.08));
+  ctx.font = `${subtitleFont}px "JetBrains Mono", monospace`;
   ctx.fillStyle = 'rgba(226,232,240,0.72)';
   const pathParts = path.split('/');
-  const subtitle = pathParts.length > 1 ? pathParts.slice(Math.max(0, pathParts.length - 3), -1).join(' / ') : 'root';
+  const subtitle = pathParts.length > 1 ? pathParts.slice(Math.max(0, pathParts.length - 2), -1).join(' / ') : 'root';
   ctx.fillText(trimToWidth(ctx, subtitle, maxTextWidth), leftInset, subtitleY);
 
-  const previewY = subtitleY + Math.max(scale.bodyFont * 0.8, 9 / Math.max(zoom, 0.08)) + scale.gap * 1.35;
+  const previewY = subtitleY + subtitleFont + scale.gap;
   const rawPreview = getLowZoomPreviewText(file, scrollTop) || 'Preview unavailable';
   const wrapped = wrapPreviewText(
     rawPreview,

package/app/lib/viewport-culling.ts

@@ -53,12 +53,12 @@ export function markTransformActive() {
 
 // Track current LOD mode so we can detect transitions
 let _currentLodMode: 'full' | 'pill' = 'full';
-let _detailMode: 'auto' | 'preview' = (() => {
+let _detailMode: 'classic' | 'preview' = (() => {
     try {
         const stored = localStorage.getItem(LOW_ZOOM_MODE_STORAGE_KEY);
-        return stored === 'preview' ? 'preview' : 'auto';
+        return stored === 'classic' ? 'classic' : 'preview';
     } catch {
-        return 'auto';
+        return 'preview';
     }
 })();
 
@@ -99,19 +99,19 @@ export function getPinnedCards(): Set<string> {
     return _pinnedCards;
 }
 
-export function getDetailMode(): 'auto' | 'preview' {
+export function getDetailMode(): 'classic' | 'preview' {
     return _detailMode;
 }
 
-export function setDetailMode(mode: 'auto' | 'preview') {
+export function setDetailMode(mode: 'classic' | 'preview') {
     _detailMode = mode;
     try {
         localStorage.setItem(LOW_ZOOM_MODE_STORAGE_KEY, mode);
     } catch { }
 }
 
-export function toggleDetailMode(): 'auto' | 'preview' {
-    const next = _detailMode === 'preview' ? 'auto' : 'preview';
+export function toggleDetailMode(): 'classic' | 'preview' {
+    const next = _detailMode === 'preview' ? 'classic' : 'preview';
     setDetailMode(next);
     return next;
 }
@@ -323,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 = _detailMode === 'preview' || zoom <= LOD_ZOOM_THRESHOLD;
+    const isLowZoom = _detailMode === 'preview';
 
     // 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.9",
+  "version": "1.1.11",
   "type": "module",
   "bin": {
     "gitmaps": "cli.ts"