gitmaps 1.1.5 → 1.1.6

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

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'bun:test';
-import { getLowZoomPreviewText, getLowZoomScale } from './low-zoom-preview';
+import { estimatePreviewCharsPerLine, estimatePreviewLineCapacity, getLowZoomPreviewText, getLowZoomScale, wrapPreviewText } from './low-zoom-preview';
 
 describe('low zoom preview helpers', () => {
   test('anchors preview text to approximate saved scroll position', () => {
@@ -24,4 +24,15 @@ describe('low zoom preview helpers', () => {
     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

@@ -29,3 +29,165 @@ export function getLowZoomPreviewText(file: any, scrollTop: number): string {
   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,7 +23,7 @@
  */
 import { measure } from 'measure-fn';
 import type { CanvasContext } from './context';
-import { getLowZoomPreviewText, getLowZoomScale } from './low-zoom-preview';
+import { getLowZoomScale, renderLowZoomPreviewCanvas } from './low-zoom-preview';
 import { materializeViewport } from './xydraw-bridge';
 
 // ── Culling state ──────────────────────────────────────────
@@ -133,14 +133,13 @@ function createPillCard(ctx: CanvasContext, file: any, path: string, x: number,
     const pill = document.createElement('div');
     pill.className = 'file-pill';
     pill.dataset.path = path;
-    pill.dataset.previewMode = 'content';
+    pill.dataset.previewMode = 'canvas';
     pill.style.cssText = `
         position: absolute;
         left: ${x}px;
         top: ${y}px;
         width: ${w}px;
         height: ${h}px;
-        background: linear-gradient(180deg, rgba(15,23,42,0.96) 0%, rgba(2,6,23,0.96) 100%);
         border-radius: 6px;
         opacity: ${animate ? '0' : '0.94'};
         contain: layout style paint;
@@ -151,45 +150,17 @@ function createPillCard(ctx: CanvasContext, file: any, path: string, x: 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;
     `;
 
-    const accent = document.createElement('div');
-    accent.className = 'file-pill-accent';
-    accent.style.cssText = `
-        position:absolute;
-        top:0;
-        left:0;
-        width:${Math.max(10, w * 0.02)}px;
-        height:100%;
-        background:${getPillColor(path, isChanged)};
-        opacity:0.95;
-        pointer-events:none;
-    `;
-    pill.appendChild(accent);
-
-    const inner = document.createElement('div');
-    inner.className = 'file-pill-inner';
-    inner.style.cssText = 'position:absolute; inset:0; transform-origin:top left; pointer-events:none;';
-    pill.appendChild(inner);
-
-    const title = document.createElement('div');
-    title.className = 'file-pill-title';
-    title.textContent = path.split('/').pop() || path;
-    inner.appendChild(title);
+    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);
 
-    const sub = document.createElement('div');
-    sub.className = 'file-pill-subtitle';
-    sub.textContent = path.includes('/') ? path.split('/').slice(0, -1).join('/') : 'root';
-    inner.appendChild(sub);
+    (pill as any)._fileData = file;
+    updatePillCardLayout(ctx, pill, zoom, isChanged);
 
-    const preview = document.createElement('div');
-    preview.className = 'file-pill-preview';
-    preview.textContent = getLowZoomPreviewText(file, getSavedScrollTop(ctx, path)) || 'Preview unavailable';
-    inner.appendChild(preview);
-
-    updatePillCardLayout(pill, zoom);
-
-    // Animate pill entrance
     if (animate) {
         requestAnimationFrame(() => {
             pill.style.opacity = '0.94';
@@ -200,62 +171,28 @@ function createPillCard(ctx: CanvasContext, file: any, path: string, x: number,
     return pill;
 }
 
-function updatePillCardLayout(pill: HTMLElement, zoom: number) {
-    const x = parseFloat(pill.style.left) || 0;
-    const y = parseFloat(pill.style.top) || 0;
+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`;
-
-    const inner = pill.querySelector('.file-pill-inner') as HTMLElement | null;
-    const title = pill.querySelector('.file-pill-title') as HTMLElement | null;
-    const sub = pill.querySelector('.file-pill-subtitle') as HTMLElement | null;
-    const preview = pill.querySelector('.file-pill-preview') as HTMLElement | null;
-    if (!inner || !title || !sub || !preview) return;
-
-    inner.style.padding = `${scale.padding}px ${scale.padding}px ${scale.padding}px ${scale.padding + Math.max(14, w * 0.02)}px`;
-    inner.style.display = 'flex';
-    inner.style.flexDirection = 'column';
-    inner.style.gap = `${scale.gap}px`;
-
-    title.style.cssText = `
-        color:#f8fafc;
-        font-family:'JetBrains Mono', monospace;
-        font-size:${scale.titleFont}px;
-        font-weight:700;
-        line-height:1.05;
-        white-space:nowrap;
-        overflow:hidden;
-        text-overflow:ellipsis;
-        text-shadow:0 2px 8px rgba(0,0,0,0.45);
-    `;
-
-    sub.style.cssText = `
-        color:rgba(226,232,240,0.72);
-        font-family:'JetBrains Mono', monospace;
-        font-size:${Math.max(scale.bodyFont * 0.78, 8 / Math.max(zoom, 0.08))}px;
-        line-height:1.05;
-        white-space:nowrap;
-        overflow:hidden;
-        text-overflow:ellipsis;
-    `;
-
-    preview.style.cssText = `
-        color:rgba(226,232,240,0.92);
-        font-family:'JetBrains Mono', monospace;
-        font-size:${scale.bodyFont}px;
-        line-height:${scale.bodyLineHeight}px;
-        white-space:pre-wrap;
-        overflow-wrap:anywhere;
-        word-break:break-word;
-        overflow:hidden;
-        flex:1 1 auto;
-        text-shadow:0 1px 4px rgba(0,0,0,0.3);
-        mask-image:linear-gradient(to bottom, black 0%, black 84%, transparent 100%);
-        -webkit-mask-image:linear-gradient(to bottom, black 0%, black 84%, transparent 100%);
-    `;
+    if (!canvas) return;
+
+    renderLowZoomPreviewCanvas(canvas, {
+        path,
+        file,
+        width: w,
+        height: h,
+        zoom,
+        scrollTop: getSavedScrollTop(ctx, path),
+        accentColor: getPillColor(path, changed),
+        isChanged: changed,
+    });
 }
 
 /**
@@ -471,10 +408,11 @@ export function performViewportCulling(ctx: CanvasContext) {
 
             if (inView && !pillCards.has(path)) {
                 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(pillCards.get(path)!, zoom);
+                updatePillCardLayout(ctx, pillCards.get(path)!, zoom, !!isChanged);
             } else if (!inView && pillCards.has(path)) {
                 removePillForPath(path);
             }
@@ -499,11 +437,12 @@ export function performViewportCulling(ctx: CanvasContext) {
                 if (inView) {
                     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(pillCards.get(path)!, zoom);
+                updatePillCardLayout(ctx, pillCards.get(path)!, zoom, card.dataset.changed === 'true');
             }
         }
 

package/package.json

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