gitmaps 1.1.4 → 1.1.6

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

@@ -0,0 +1,38 @@
+import { describe, expect, test } from 'bun:test';
+import { estimatePreviewCharsPerLine, estimatePreviewLineCapacity, getLowZoomPreviewText, getLowZoomScale, wrapPreviewText } from './low-zoom-preview';
+
+describe('low zoom preview helpers', () => {
+  test('anchors preview text to approximate saved scroll position', () => {
+    const file = {
+      path: 'src/example.ts',
+      ext: 'ts',
+      content: Array.from({ length: 12 }, (_, i) => `line-${i + 1}`).join('\n'),
+    };
+
+    expect(getLowZoomPreviewText(file, 0).startsWith('line-1')).toBe(true);
+    expect(getLowZoomPreviewText(file, 40).startsWith('line-3')).toBe(true);
+  });
+
+  test('skips binary or unsupported files', () => {
+    expect(getLowZoomPreviewText({ path: 'image.png', ext: 'png', content: 'abc' }, 0)).toBe('');
+    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);
+    const far = getLowZoomScale(0.1);
+    expect(far.titleFont).toBeGreaterThan(near.titleFont);
+    expect(far.bodyFont).toBeGreaterThan(near.bodyFont);
+  });
+
+  test('wraps preview text into bounded lines with ellipsis', () => {
+    const lines = wrapPreviewText('alpha beta gamma delta epsilon zeta eta theta', 10, 3);
+    expect(lines.length).toBeLessThanOrEqual(3);
+    expect(lines[lines.length - 1]?.endsWith('…')).toBe(true);
+  });
+
+  test('preview capacity estimates stay positive', () => {
+    expect(estimatePreviewCharsPerLine(580, 0.25)).toBeGreaterThan(8);
+    expect(estimatePreviewLineCapacity(700, 0.25)).toBeGreaterThanOrEqual(2);
+  });
+});

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

@@ -0,0 +1,193 @@
+const PREVIEWABLE_EXTS = new Set([
+  'ts', 'tsx', 'js', 'jsx', 'json', 'css', 'scss', 'html', 'md', 'py', 'rs', 'go', 'vue', 'svelte', 'toml', 'yaml', 'yml', 'sh', 'sql', 'txt'
+]);
+
+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;
+  return {
+    titleFont: desiredScreenTitle / clampedZoom,
+    bodyFont: desiredScreenBody / clampedZoom,
+    bodyLineHeight: (desiredScreenBody * 1.45) / clampedZoom,
+    padding: (10 + progress * 4) / clampedZoom,
+    gap: (6 + progress * 3) / clampedZoom,
+    radius: 8 / clampedZoom,
+  };
+}
+
+export function getLowZoomPreviewText(file: any, scrollTop: number): string {
+  if (!file || file.isBinary || !file.content) return '';
+
+  const ext = (file.ext || file.path?.split('.').pop() || '').toLowerCase();
+  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, startLine + 60).join('\n').trim();
+}
+
+export function wrapPreviewText(text: string, maxCharsPerLine: number, maxLines: number): string[] {
+  const safeMaxChars = Math.max(8, Math.floor(maxCharsPerLine));
+  const safeMaxLines = Math.max(1, Math.floor(maxLines));
+  const sourceLines = String(text || '').split('\n');
+  const out: string[] = [];
+
+  for (const sourceLine of sourceLines) {
+    const words = sourceLine.length === 0 ? [''] : sourceLine.split(/(\s+)/).filter(Boolean);
+    let current = '';
+
+    for (const part of words) {
+      if (part.length > safeMaxChars) {
+        if (current.trim().length > 0) {
+          out.push(current.trimEnd());
+          if (out.length >= safeMaxLines) return ellipsizeWrappedLines(out, safeMaxLines);
+          current = '';
+        }
+        for (let i = 0; i < part.length; i += safeMaxChars) {
+          out.push(part.slice(i, i + safeMaxChars));
+          if (out.length >= safeMaxLines) return ellipsizeWrappedLines(out, safeMaxLines);
+        }
+        continue;
+      }
+
+      if ((current + part).length > safeMaxChars && current.length > 0) {
+        out.push(current.trimEnd());
+        if (out.length >= safeMaxLines) return ellipsizeWrappedLines(out, safeMaxLines);
+        current = part.trimStart();
+      } else {
+        current += part;
+      }
+    }
+
+    if (current.length > 0 || sourceLine.length === 0) {
+      out.push(current.trimEnd());
+      if (out.length >= safeMaxLines) return ellipsizeWrappedLines(out, safeMaxLines);
+    }
+  }
+
+  return out.slice(0, safeMaxLines);
+}
+
+function ellipsizeWrappedLines(lines: string[], maxLines: number) {
+  const sliced = lines.slice(0, maxLines);
+  if (sliced.length === 0) return sliced;
+  const last = sliced[sliced.length - 1].replace(/[\s.…]+$/g, '');
+  sliced[sliced.length - 1] = `${last}…`;
+  return sliced;
+}
+
+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);
+  return Math.max(2, Math.floor(available / scale.bodyLineHeight));
+}
+
+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));
+}
+
+export function renderLowZoomPreviewCanvas(
+  canvas: HTMLCanvasElement,
+  params: {
+    path: string;
+    file: any;
+    width: number;
+    height: number;
+    zoom: number;
+    scrollTop: number;
+    accentColor: string;
+    isChanged: boolean;
+  },
+) {
+  const { path, file, width, height, zoom, scrollTop, accentColor } = params;
+  const dpr = (globalThis.devicePixelRatio || 1);
+  const scale = getLowZoomScale(zoom);
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+
+  canvas.width = Math.max(1, Math.floor(width * dpr));
+  canvas.height = Math.max(1, Math.floor(height * dpr));
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  ctx.clearRect(0, 0, width, height);
+
+  const gradient = ctx.createLinearGradient(0, 0, 0, height);
+  gradient.addColorStop(0, 'rgba(15,23,42,0.96)');
+  gradient.addColorStop(1, 'rgba(2,6,23,0.96)');
+  ctx.fillStyle = gradient;
+  roundRect(ctx, 0, 0, width, height, Math.max(6, scale.radius));
+  ctx.fill();
+
+  ctx.fillStyle = accentColor;
+  ctx.fillRect(0, 0, Math.max(10, width * 0.02), height);
+
+  const leftInset = scale.padding + Math.max(14, width * 0.02);
+  const topInset = scale.padding;
+  const maxTextWidth = Math.max(40, width - leftInset - scale.padding);
+
+  ctx.textBaseline = 'top';
+  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 subtitleY = topInset + scale.titleFont + scale.gap;
+  ctx.font = `${Math.max(scale.bodyFont * 0.78, 8 / 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';
+  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 rawPreview = getLowZoomPreviewText(file, scrollTop) || 'Preview unavailable';
+  const wrapped = wrapPreviewText(
+    rawPreview,
+    estimatePreviewCharsPerLine(width, zoom),
+    estimatePreviewLineCapacity(height, zoom),
+  );
+
+  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;
+
+  wrapped.forEach((line, index) => {
+    const y = previewY + index * scale.bodyLineHeight;
+    if (y > height - scale.padding) return;
+    ctx.fillText(line, leftInset, y);
+  });
+}
+
+function trimToWidth(ctx: CanvasRenderingContext2D, text: string, maxWidth: number) {
+  if (ctx.measureText(text).width <= maxWidth) return text;
+  let out = text;
+  while (out.length > 1 && ctx.measureText(`${out}…`).width > maxWidth) {
+    out = out.slice(0, -1);
+  }
+  return `${out}…`;
+}
+
+function roundRect(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number) {
+  const r = Math.min(radius, width / 2, height / 2);
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.arcTo(x + width, y, x + width, y + height, r);
+  ctx.arcTo(x + width, y + height, x, y + height, r);
+  ctx.arcTo(x, y + height, x, y, r);
+  ctx.arcTo(x, y, x + width, y, r);
+  ctx.closePath();
+}

package/app/lib/viewport-culling.ts

@@ -23,6 +23,7 @@
  */
 import { measure } from 'measure-fn';
 import type { CanvasContext } from './context';
+import { getLowZoomScale, renderLowZoomPreviewCanvas } from './low-zoom-preview';
 import { materializeViewport } from './xydraw-bridge';
 
 // ── Culling state ──────────────────────────────────────────
@@ -89,7 +90,7 @@ export function getPinnedCards(): Set<string> {
     return _pinnedCards;
 }
 
-// ── Status colors for pill cards
+// ── Status colors for low-zoom cards
 const PILL_COLORS: Record<string, string> = {
     'ts': '#3178c6',
     'tsx': '#3178c6',
@@ -118,25 +119,30 @@ function getPillColor(path: string, isChanged: boolean): string {
     return PILL_COLORS[ext] || '#6b7280'; // Default gray
 }
 
+function getSavedScrollTop(ctx: CanvasContext, path: string): number {
+    const saved = ctx.positions.get(`scroll:${path}`);
+    return saved?.x || 0;
+}
+
 /**
  * Create a lightweight pill placeholder for a file.
  * ~3 DOM nodes vs ~100+ for a full card = massive perf win at low zoom.
  * Uses vertical text to fit file names in compact card footprint.
  */
-function createPillCard(path: string, x: number, y: number, w: number, h: number, isChanged: boolean, animate = false): HTMLElement {
+function createPillCard(ctx: CanvasContext, file: any, path: string, x: number, y: number, w: number, h: number, isChanged: boolean, zoom: number, animate = false): HTMLElement {
     const pill = document.createElement('div');
     pill.className = 'file-pill';
     pill.dataset.path = path;
+    pill.dataset.previewMode = 'canvas';
     pill.style.cssText = `
         position: absolute;
         left: ${x}px;
         top: ${y}px;
         width: ${w}px;
         height: ${h}px;
-        background: ${getPillColor(path, isChanged)};
         border-radius: 6px;
-        opacity: ${animate ? '0' : '0.9'};
-        contain: layout style;
+        opacity: ${animate ? '0' : '0.94'};
+        contain: layout style paint;
         box-shadow: 0 2px 8px rgba(0,0,0,0.3);
         border: 1px solid rgba(255,255,255,0.12);
         overflow: hidden;
@@ -144,49 +150,51 @@ function createPillCard(path: string, x: number, y: number, w: number, h: number
         user-select: none;
         transition: opacity 0.25s ease, box-shadow 0.2s ease, transform 0.25s ease;
         transform: ${animate ? 'scale(0.92)' : 'scale(1)'};
+        background: transparent;
     `;
 
-    // Animate pill entrance
+    const canvas = document.createElement('canvas');
+    canvas.className = 'file-pill-canvas';
+    canvas.style.cssText = 'display:block;width:100%;height:100%;pointer-events:none;';
+    pill.appendChild(canvas);
+
+    (pill as any)._fileData = file;
+    updatePillCardLayout(ctx, pill, zoom, isChanged);
+
     if (animate) {
         requestAnimationFrame(() => {
-            pill.style.opacity = '0.9';
+            pill.style.opacity = '0.94';
             pill.style.transform = 'scale(1)';
         });
     }
 
-    // File name label — show parent dir for common ambiguous filenames
-    const parts = path.split('/');
-    const filename = parts.pop() || path;
-    const AMBIGUOUS = ['route.ts', 'route.tsx', 'page.tsx', 'page.ts', 'index.ts', 'index.tsx', 'index.js', 'layout.tsx', 'middleware.ts'];
-    const name = AMBIGUOUS.includes(filename) && parts.length > 0
-        ? `${parts[parts.length - 1]}/${filename}`
-        : filename;
-    const label = document.createElement('span');
-    label.className = 'file-pill-label';
-    label.textContent = name;
-    label.style.cssText = `
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%) rotate(-90deg);
-        white-space: nowrap;
-        font-size: 48px;
-        font-weight: 700;
-        color: #fff;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: ${h - 40}px;
-        line-height: 1;
-        letter-spacing: 2px;
-        font-family: 'JetBrains Mono', monospace;
-        text-shadow: 0 2px 8px rgba(0,0,0,0.7);
-        pointer-events: none;
-    `;
-    pill.appendChild(label);
-
     return pill;
 }
 
+function updatePillCardLayout(ctx: CanvasContext, pill: HTMLElement, zoom: number, isChanged?: boolean) {
+    const w = parseFloat(pill.style.width) || 580;
+    const h = parseFloat(pill.style.height) || 700;
+    const scale = getLowZoomScale(zoom);
+    const path = pill.dataset.path || '';
+    const canvas = pill.querySelector('.file-pill-canvas') as HTMLCanvasElement | null;
+    const file = (pill as any)._fileData || ctx.allFilesData?.find(f => f.path === path) || ctx.commitFilesData?.find(f => f.path === path) || null;
+    const changed = isChanged ?? pill.dataset.changed === 'true';
+    pill.dataset.zoomBucket = zoom.toFixed(3);
+    pill.style.borderRadius = `${Math.max(6, scale.radius)}px`;
+    if (!canvas) return;
+
+    renderLowZoomPreviewCanvas(canvas, {
+        path,
+        file,
+        width: w,
+        height: h,
+        zoom,
+        scrollTop: getSavedScrollTop(ctx, path),
+        accentColor: getPillColor(path, changed),
+        isChanged: changed,
+    });
+}
+
 /**
  * Computes the visible world-coordinate rectangle from the current
  * viewport size, zoom, and offset.
@@ -399,9 +407,12 @@ export function performViewportCulling(ctx: CanvasContext) {
             );
 
             if (inView && !pillCards.has(path)) {
-                const pill = createPillCard(path, x, y, cardW, cardH, !!isChanged, true);
+                const pill = createPillCard(ctx, file, path, x, y, cardW, cardH, !!isChanged, zoom, true);
+                if (isChanged) pill.dataset.changed = 'true';
                 ctx.canvas.appendChild(pill);
                 pillCards.set(path, pill);
+            } else if (inView && pillCards.has(path)) {
+                updatePillCardLayout(ctx, pillCards.get(path)!, zoom, !!isChanged);
             } else if (!inView && pillCards.has(path)) {
                 removePillForPath(path);
             }
@@ -424,10 +435,14 @@ export function performViewportCulling(ctx: CanvasContext) {
                 );
 
                 if (inView) {
-                    const pill = createPillCard(path, x, y, w, h, isChanged, true);
+                    const file = ctx.allFilesData?.find(f => f.path === path) || ctx.commitFilesData?.find(f => f.path === path) || null;
+                    const pill = createPillCard(ctx, file, path, x, y, w, h, isChanged, zoom, true);
+                    if (isChanged) pill.dataset.changed = 'true';
                     ctx.canvas.appendChild(pill);
                     pillCards.set(path, pill);
                 }
+            } else {
+                updatePillCardLayout(ctx, pillCards.get(path)!, zoom, card.dataset.changed === 'true');
             }
         }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gitmaps",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "type": "module",
   "bin": {
     "gitmaps": "cli.ts"
@@ -16,13 +16,14 @@
   "scripts": {
     "dev": "bun run server.ts",
     "start": "bun run server.ts",
-    "test": "bun test app/api/repo/load/route.test.ts app/lib/route-catchall.test.ts app/lib/status-bar.test.ts app/lib/xydraw.test.ts app/lib/transclusion-smoke.test.ts app/lib/repo-select.test.ts packages/galaxydraw/perf.test.ts",
+    "test": "bun test app/api/repo/load/route.test.ts app/lib/route-catchall.test.ts app/lib/status-bar.test.ts app/lib/xydraw.test.ts app/lib/transclusion-smoke.test.ts app/lib/repo-select.test.ts app/lib/low-zoom-preview.test.ts packages/galaxydraw/perf.test.ts",
     "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: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",
     "prepublishOnly": "echo 'Publishing gitmaps to npm'"
   },
   "keywords": [