gitmaps 1.1.22 → 1.1.24

package/app/globals.css

@@ -1145,24 +1145,17 @@ body {
 
 /* ── Sticky Zoom Controls ── */
 body.repo-loading .sticky-zoom-pill,
-body.repo-loading .floating-top-controls,
+body.repo-loading .detail-mode-switch,
 body.landing-placeholder-visible .sticky-zoom-pill,
-body.landing-placeholder-visible .floating-top-controls {
+body.landing-placeholder-visible .detail-mode-switch {
   display: none;
 }
 
-.floating-top-controls {
+.detail-mode-switch {
   position: fixed;
   top: 12px;
   right: 144px;
   z-index: 10001;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.detail-mode-switch {
-  position: relative;
 }
 
 .detail-mode-btn {
@@ -1199,15 +1192,6 @@ body.landing-placeholder-visible .floating-top-controls {
   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,16 +875,10 @@ export default function RootLayout({ children }: { children: any }) {
             </div>
 
             {/* Sticky Zoom Controls — floating pill, bottom-right */}
-            <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>
+            <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>
 
@@ -943,6 +937,22 @@ export default function RootLayout({ children }: { children: any }) {
                   <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" />
                 </svg>
               </button>
+              <div className="sz-divider" />
+              <button id="openSettingsBottom" className="sz-btn sz-fit" title="Open settings">
+                <svg
+                  viewBox="0 0 24 24"
+                  width="14"
+                  height="14"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <circle cx="12" cy="12" r="3" />
+                  <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+                </svg>
+              </button>
             </div>
 
             {/* Bottom Layers Bar */}

package/app/lib/card-context-menu.tsx

@@ -50,32 +50,32 @@ function ContextMenu({ onAction, onActionLayer, onSelectFolder, isInActiveLayer,
 
     return (
         <>
-            <button className="ctx-item" onClick={() => onAction('copy-path')}>📋 Copy path</button>
-            <button className="ctx-item" onClick={() => onAction('select')}>☑️ Select</button>
+            <button type="button" className="ctx-item" onClick={() => onAction('copy-path')}>📋 Copy path</button>
+            <button type="button" className="ctx-item" onClick={() => onAction('select')}>☑️ Select</button>
             {ancestors.length > 0 ? (
                 <div className="ctx-item ctx-dropdown">
                     <span>📁 Select from folder ▸</span>
                     <div className="ctx-dropdown-content">
                         {ancestors.map(dir => (
-                            <button key={dir} className="ctx-item" onClick={() => onSelectFolder(dir)}>
+                            <button type="button" key={dir} className="ctx-item" onClick={() => onSelectFolder(dir)}>
                                 📂 {dir}
                             </button>
                         ))}
                     </div>
                 </div>
             ) : (
-                <button className="ctx-item" onClick={() => onSelectFolder('')}>📁 Select all (root)</button>
+                <button type="button" className="ctx-item" onClick={() => onSelectFolder('')}>📁 Select all (root)</button>
             )}
-            <button className="ctx-item" onClick={() => onAction('pin')}>{pinned ? '📌 Unpin card' : '📌 Pin card'}</button>
+            <button type="button" className="ctx-item" onClick={() => onAction('pin')}>{pinned ? '📌 Unpin card' : '📌 Pin card'}</button>
             <div className="ctx-divider"></div>
-            <button className="ctx-item" onClick={() => onAction('expand')}>📖 Open in Editor</button>
-            <button className="ctx-item" onClick={() => onAction('edit')}>✏️ Edit file</button>
-            <button className="ctx-item" onClick={() => onAction('blame')}>👤 Git blame</button>
-            <button className="ctx-item" onClick={() => onAction('connect')}>🔗 Connect to...</button>
-            <button className="ctx-item" onClick={() => onAction('fit-content')}>📏 Fit content</button>
-            <button className="ctx-item" onClick={() => onAction('fit-screen')}>📺 Fit screen</button>
+            <button type="button" className="ctx-item" onClick={() => onAction('expand')}>📖 Open in Editor</button>
+            <button type="button" className="ctx-item" onClick={() => onAction('edit')}>✏️ Edit file</button>
+            <button type="button" className="ctx-item" onClick={() => onAction('blame')}>👤 Git blame</button>
+            <button type="button" className="ctx-item" onClick={() => onAction('connect')}>🔗 Connect to...</button>
+            <button type="button" className="ctx-item" onClick={() => onAction('fit-content')}>📏 Fit content</button>
+            <button type="button" className="ctx-item" onClick={() => onAction('fit-screen')}>📺 Fit screen</button>
             <div className="ctx-divider"></div>
-            <button className="ctx-item" onClick={() => onAction('history')}>🕰️ File history</button>
+            <button type="button" className="ctx-item" onClick={() => onAction('history')}>🕰️ File history</button>
             <div className="ctx-item ctx-dropdown">
                 <span>📦 Move to Layer ▸</span>
                 <div className="ctx-dropdown-content">
@@ -83,24 +83,24 @@ function ContextMenu({ onAction, onActionLayer, onSelectFolder, isInActiveLayer,
                         <div className="ctx-item" style="opacity: 0.5; pointer-events: none">No custom layers</div>
                     ) : (
                         customLayers.map(l => (
-                            <button key={l.id} className="ctx-item" onClick={() => onActionLayer(l.id)}>
+                            <button type="button" key={l.id} className="ctx-item" onClick={() => onActionLayer(l.id)}>
                                 + {l.name}
                             </button>
                         ))
                     )}
                     <div className="ctx-divider"></div>
-                    <button className="ctx-item" onClick={() => onActionLayer('new')}>✨ Create New Layer</button>
+                    <button type="button" className="ctx-item" onClick={() => onActionLayer('new')}>✨ Create New Layer</button>
                 </div>
             </div>
             {isInActiveLayer && (
-                <button className="ctx-item" onClick={() => onAction('remove-from-layer')} style="color: #60a5fa">
+                <button type="button" className="ctx-item" onClick={() => onAction('remove-from-layer')} style="color: #60a5fa">
                     ↩ Move to Main
                 </button>
             )}
             <div className="ctx-divider"></div>
-            <button className="ctx-item" onClick={() => onAction('hide')} style="color: #f59e0b">🙈 Hide file</button>
-            <button className="ctx-item" onClick={() => onAction('rename')}>✏️ Rename / Move</button>
-            <button className="ctx-item" onClick={() => onAction('delete')} style="color: #ef4444">🗑️ Delete file</button>
+            <button type="button" className="ctx-item" onClick={() => onAction('hide')} style="color: #f59e0b">🙈 Hide file</button>
+            <button type="button" className="ctx-item" onClick={() => onAction('rename')}>✏️ Rename / Move</button>
+            <button type="button" className="ctx-item" onClick={() => onAction('delete')} style="color: #ef4444">🗑️ Delete file</button>
         </>
     );
 }

package/app/lib/context.ts

@@ -94,7 +94,7 @@ export function createCanvasContext(actor: any): CanvasContext {
         allFilesData: null,
         commitFilesData: null,
         deferredCards: new Map(),
-        controlMode: (localStorage.getItem('gitcanvas:controlMode') as any) || 'advanced',
+        controlMode: (localStorage.getItem('gitcanvas:controlMode') as any) || 'simple',
     };
 
     currentCanvasContext = ctx;

package/app/lib/events.tsx

@@ -744,7 +744,7 @@ export function setupEventListeners(ctx: CanvasContext) {
             import('./settings-modal').then(({ openSettingsModal }) => openSettingsModal(ctx));
         };
         document.getElementById('openSettings')?.addEventListener('click', openSettings);
-        document.getElementById('openSettingsFloating')?.addEventListener('click', openSettings);
+        document.getElementById('openSettingsBottom')?.addEventListener('click', openSettings);
 
         // Global search
         document.getElementById('openGlobalSearch')?.addEventListener('click', () => {
@@ -906,6 +906,24 @@ export function setupEventListeners(ctx: CanvasContext) {
                 return;
             }
 
+            // Ctrl+= / Ctrl+- / Ctrl+0 = preview text size
+            if ((e.ctrlKey || e.metaKey) && !e.shiftKey && (e.key === '=' || e.key === '+' || e.key === '-' || e.key === '0')) {
+                e.preventDefault();
+                import('./settings').then(({ getSettings, updateSettings }) => {
+                    const settings = getSettings();
+                    let next = settings.previewFontPx;
+                    if (e.key === '=' || e.key === '+') next = Math.min(16, settings.previewFontPx + 1);
+                    else if (e.key === '-') next = Math.max(7, settings.previewFontPx - 1);
+                    else next = 10;
+                    if (next !== settings.previewFontPx) {
+                        updateSettings({ previewFontPx: next });
+                        window.dispatchEvent(new CustomEvent('gitcanvas:preview-settings-changed'));
+                        showToast(`Preview text: ${next}px`, 'info');
+                    }
+                });
+                return;
+            }
+
             // Ctrl+Shift+E = Export canvas as PNG
             if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === 'e') {
                 e.preventDefault();

package/app/lib/file-preview.ts

@@ -35,7 +35,7 @@ let currentCardPath: string | null = null;
 let isInitialized = false;
 let _ctx: CanvasContext | null = null;
 let isPreviewEnabled =
-  localStorage.getItem("gitmaps:previewEnabled") !== "false"; // enabled by default
+  localStorage.getItem("gitmaps:previewEnabled") === "true"; // disabled by default
 let _isHoveringPopup = false;
 
 // ─── Popup container ─────────────────────────────────────

package/app/lib/layers.tsx

@@ -52,6 +52,24 @@ export function saveLayers(ctx: CanvasContext) {
     localStorage.setItem(`gitcanvas:layers:${ctx.snap().context.repoPath}`, JSON.stringify(layerState.layers));
 }
 
+function removeFileFromCurrentCanvas(ctx: CanvasContext, path: string) {
+    const card = ctx.fileCards.get(path);
+    if (card) {
+        card.remove();
+        ctx.fileCards.delete(path);
+    }
+    const pill = ctx.canvas?.querySelector(`.file-pill[data-path="${CSS.escape(path)}"]`) as HTMLElement | null;
+    if (pill) pill.remove();
+    if (ctx.deferredCards.has(path)) {
+        ctx.deferredCards.delete(path);
+    }
+    const selected = ctx.snap().context.selectedCards || [];
+    if (selected.includes(path)) {
+        ctx.actor.send({ type: 'SELECT_CARD', path, shift: true });
+    }
+    import('./canvas').then(({ forceMinimapRebuild }) => forceMinimapRebuild(ctx)).catch(() => {});
+}
+
 export function createLayer(ctx: CanvasContext, name: string) {
     const newLayer: LayerData = {
         id: `layer_${Date.now()}`,
@@ -124,9 +142,8 @@ export function moveFileToLayer(ctx: CanvasContext, layerId: string, path: strin
 
     saveLayers(ctx);
     renderLayersUI(ctx);
-    // Re-render current layer to hide the moved file
     if (layerState.activeLayerId === 'default') {
-        applyLayer(ctx);
+        removeFileFromCurrentCanvas(ctx, path);
     }
 }
 
@@ -150,6 +167,10 @@ export function removeFileFromLayer(ctx: CanvasContext, layerId: string, path: s
         saveLayers(ctx);
         renderLayersUI(ctx);
         if (layer.id === layerState.activeLayerId) applyLayer(ctx);
+        else if (layerState.activeLayerId === 'default') {
+            // File becomes visible in Main again without a full rerender on the active custom layer path.
+            applyLayer(ctx);
+        }
     }
 }
 

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

@@ -33,11 +33,11 @@ describe('low zoom preview helpers', () => {
     expect(lines.some((line) => line.tone === 'added' && line.text === 'two')).toBe(true);
   });
 
-  test('keeps zoomed-out on-screen text smaller than zoomed-in text', () => {
+  test('keeps preview text screen size stable across zoom levels', () => {
     const far = getLowZoomScale(0.1);
     const near = getLowZoomScale(1);
-    expect(far.titleFont * 0.1).toBeLessThan(near.titleFont * 1);
-    expect(far.bodyFont * 0.1).toBeLessThan(near.bodyFont * 1);
+    expect(Math.round(far.titleFont * 0.1)).toBe(Math.round(near.titleFont * 1));
+    expect(Math.round(far.bodyFont * 0.1)).toBe(Math.round(near.bodyFont * 1));
   });
 
   test('wraps preview text into bounded lines with ellipsis', () => {

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

@@ -6,13 +6,12 @@ const PREVIEWABLE_EXTS = new Set([
 
 export function getLowZoomScale(zoom: number) {
   const clampedZoom = Math.max(0.08, Math.min(1, zoom));
-  const progress = (clampedZoom - 0.08) / (1 - 0.08);
   const settings = getSettings();
 
-  const desiredScreenTitle = settings.previewFarTitlePx + progress * (settings.previewNearTitlePx - settings.previewFarTitlePx);
-  const desiredScreenBody = 5.5 + progress * 6.5;
-  const desiredScreenPadding = 6 + progress * 8;
-  const desiredScreenGap = 4 + progress * 4;
+  const desiredScreenBody = settings.previewFontPx;
+  const desiredScreenTitle = settings.previewFontPx + 2;
+  const desiredScreenPadding = 10;
+  const desiredScreenGap = 6;
 
   return {
     titleFont: desiredScreenTitle / clampedZoom,

package/app/lib/repo.tsx

@@ -991,80 +991,16 @@ export function renderAllFilesOnCanvas(ctx: CanvasContext, files: any[]) {
 
     renderConnections(ctx);
     buildConnectionMarkers(ctx);
-    renderDirectoryLabels(ctx);
     forceMinimapRebuild(ctx);
     // Cull off-screen cards after browser layout (needs rAF for valid dimensions)
     requestAnimationFrame(() => performViewportCulling(ctx));
   });
 }
 
-// ─── Directory labels on canvas ──────────────────────────
-// Groups visible file cards by parent directory and renders
-// a world-space label above each directory cluster.
+// Directory labels disabled — the auto-generated shared-prefix / directory containers
+// were adding noise and confusion without helping navigation.
 function renderDirectoryLabels(ctx: CanvasContext) {
-  // Remove existing labels
-  ctx.canvas?.querySelectorAll(".dir-label").forEach((el) => el.remove());
-
-  // Group cards by parent directory
-  const groups = new Map<
-    string,
-    { minX: number; minY: number; maxX: number; count: number }
-  >();
-
-  const processCard = (path: string, x: number, y: number, w: number) => {
-    const dir = path.includes("/")
-      ? path.substring(0, path.lastIndexOf("/"))
-      : ".";
-    const g = groups.get(dir);
-    if (g) {
-      g.minX = Math.min(g.minX, x);
-      g.minY = Math.min(g.minY, y);
-      g.maxX = Math.max(g.maxX, x + w);
-      g.count++;
-    } else {
-      groups.set(dir, { minX: x, minY: y, maxX: x + w, count: 1 });
-    }
-  };
-
-  // Created cards (in DOM)
-  ctx.fileCards.forEach((card, path) => {
-    const x = parseFloat(card.style.left) || 0;
-    const y = parseFloat(card.style.top) || 0;
-    const w = card.offsetWidth || 580;
-    processCard(path, x, y, w);
-  });
-
-  // Deferred cards (not yet in DOM)
-  ctx.deferredCards.forEach((info, path) => {
-    const w = info.size?.width || 580;
-    processCard(path, info.x, info.y, w);
-  });
-
-  // Only show labels if we have multiple directories
-  if (groups.size <= 1) return;
-
-  const frag = document.createDocumentFragment();
-  for (const [dir, g] of groups) {
-    const label = document.createElement("div");
-    label.className = "dir-label";
-    label.dataset.dir = dir;
-    const centerX = (g.minX + g.maxX) / 2;
-    label.style.left = `${centerX}px`;
-    label.style.top = `${g.minY - 36}px`;
-    label.style.transform = "translateX(-50%)";
-    label.innerHTML = `<span class="dir-label-icon">📁</span> ${dir}<span class="dir-label-count">${g.count}</span>`;
-
-    // Click to collapse directory into a group card
-    label.addEventListener("click", (e) => {
-      e.stopPropagation();
-      import("./card-groups").then(({ toggleDirectoryCollapse }) => {
-        toggleDirectoryCollapse(ctx, dir);
-      });
-    });
-
-    frag.appendChild(label);
-  }
-  ctx.canvas?.appendChild(frag);
+  ctx.canvas?.querySelectorAll('.dir-label').forEach((el) => el.remove());
 }
 
 // ─── Highlight changed files without re-rendering ────────

package/app/lib/settings-modal.tsx

@@ -98,14 +98,10 @@ function SettingsPanel({ settings }: { settings: GitCanvasSettings }) {
                         <ToggleGroup id="settingRenderMode" value={settings.renderMode}
                             options={[{ value: 'canvas', label: 'Canvas' }, { value: 'dom', label: 'DOM' }]} />
                     </SettingsRow>
-                    <SettingsRow label="Font Size" desc="Code font size in pixels">
+                    <SettingsRow label="Font Size" desc="Code font size in full cards and editor views">
                         <Slider id="settingFontSize" valueId="fontSizeValue"
                             min={10} max={18} step={1} value={settings.fontSize} suffix="px" />
                     </SettingsRow>
-                    <SettingsRow label="Popup Font Size" desc="Font size for hover popup previews">
-                        <Slider id="settingPopupFontSize" valueId="popupFontSizeValue"
-                            min={10} max={24} step={1} value={settings.popupFontSize} suffix="px" />
-                    </SettingsRow>
                     <SettingsRow label="Card Width" desc="Character columns per card (like editors)">
                         <Slider id="settingCardWidth" valueId="cardWidthValue"
                             min={40} max={120} step={5} value={cardCols} suffix=" cols" />
@@ -146,19 +142,15 @@ function SettingsPanel({ settings }: { settings: GitCanvasSettings }) {
 
                 {/* Preview Mode Section */}
                 <SettingsSection title="Preview Mode">
-                    <SettingsRow label="Far Zoom Title" desc="Filename size when zoomed far out">
-                        <Slider id="settingPreviewFarTitlePx" valueId="previewFarTitlePxValue"
-                            min={6} max={14} step={1} value={settings.previewFarTitlePx} suffix="px" />
-                    </SettingsRow>
-                    <SettingsRow label="Near Zoom Title" desc="Filename size when zoomed in within preview mode">
-                        <Slider id="settingPreviewNearTitlePx" valueId="previewNearTitlePxValue"
-                            min={10} max={24} step={1} value={settings.previewNearTitlePx} suffix="px" />
+                    <SettingsRow label="Preview text size" desc="Fixed text size used by preview cards">
+                        <Slider id="settingPreviewFontPx" valueId="previewFontPxValue"
+                            min={7} max={16} step={1} value={settings.previewFontPx} suffix="px" />
                     </SettingsRow>
-                    <SettingsRow label="Far Zoom Lines" desc="Minimum content lines shown when zoomed far out">
+                    <SettingsRow label="Zoomed-out lines" desc="Minimum content lines shown at the farthest preview zoom">
                         <Slider id="settingPreviewFarLines" valueId="previewFarLinesValue"
                             min={1} max={8} step={1} value={settings.previewFarLines} suffix="" />
                     </SettingsRow>
-                    <SettingsRow label="Near Zoom Lines" desc="Target content lines shown when zoomed in">
+                    <SettingsRow label="Zoomed-in lines" desc="Target content lines shown at the closest preview zoom">
                         <Slider id="settingPreviewNearLines" valueId="previewNearLinesValue"
                             min={8} max={40} step={1} value={settings.previewNearLines} suffix="" />
                     </SettingsRow>
@@ -257,13 +249,6 @@ export function openSettingsModal(ctx?: any) {
         applyFontSize(parseInt(fontSlider.value));
     });
 
-    const popupFontSlider = _modal.querySelector('#settingPopupFontSize') as HTMLInputElement;
-    const popupFontValue = _modal.querySelector('#popupFontSizeValue')!;
-    popupFontSlider?.addEventListener('input', () => {
-        popupFontValue.textContent = `${popupFontSlider.value}px`;
-        updateSettings({ popupFontSize: parseInt(popupFontSlider.value) });
-    });
-
     const cardWidthSlider = _modal.querySelector('#settingCardWidth') as HTMLInputElement;
     const cardWidthValue = _modal.querySelector('#cardWidthValue')!;
     cardWidthSlider?.addEventListener('input', () => {
@@ -281,19 +266,11 @@ export function openSettingsModal(ctx?: any) {
         updateSettings({ maxVisibleLines: parseInt(maxLinesSlider.value) });
     });
 
-    const previewFarTitleSlider = _modal.querySelector('#settingPreviewFarTitlePx') as HTMLInputElement;
-    const previewFarTitleValue = _modal.querySelector('#previewFarTitlePxValue')!;
-    previewFarTitleSlider?.addEventListener('input', () => {
-        previewFarTitleValue.textContent = `${previewFarTitleSlider.value}px`;
-        updateSettings({ previewFarTitlePx: parseInt(previewFarTitleSlider.value) });
-        window.dispatchEvent(new CustomEvent('gitcanvas:preview-settings-changed'));
-    });
-
-    const previewNearTitleSlider = _modal.querySelector('#settingPreviewNearTitlePx') as HTMLInputElement;
-    const previewNearTitleValue = _modal.querySelector('#previewNearTitlePxValue')!;
-    previewNearTitleSlider?.addEventListener('input', () => {
-        previewNearTitleValue.textContent = `${previewNearTitleSlider.value}px`;
-        updateSettings({ previewNearTitlePx: parseInt(previewNearTitleSlider.value) });
+    const previewFontSlider = _modal.querySelector('#settingPreviewFontPx') as HTMLInputElement;
+    const previewFontValue = _modal.querySelector('#previewFontPxValue')!;
+    previewFontSlider?.addEventListener('input', () => {
+        previewFontValue.textContent = `${previewFontSlider.value}px`;
+        updateSettings({ previewFontPx: parseInt(previewFontSlider.value) });
         window.dispatchEvent(new CustomEvent('gitcanvas:preview-settings-changed'));
     });
 

package/app/lib/settings.ts

@@ -31,10 +31,8 @@ export interface GitCanvasSettings {
     heatmapEnabled: boolean;
     /** Heatmap time range in days */
     heatmapDays: number;
-    /** Preview mode far-zoom title size (screen px) */
-    previewFarTitlePx: number;
-    /** Preview mode near-zoom title size (screen px) */
-    previewNearTitlePx: number;
+    /** Preview mode fixed text size (screen px) */
+    previewFontPx: number;
     /** Preview mode far-zoom minimum visible lines */
     previewFarLines: number;
     /** Preview mode near-zoom target visible lines */
@@ -54,8 +52,7 @@ const DEFAULTS: GitCanvasSettings = {
     popupFontSize: 14,
     heatmapEnabled: false,
     heatmapDays: 90,
-    previewFarTitlePx: 8,
-    previewNearTitlePx: 16,
+    previewFontPx: 10,
     previewFarLines: 3,
     previewNearLines: 20,
 };
@@ -69,6 +66,11 @@ export function getSettings(): GitCanvasSettings {
         const raw = localStorage.getItem(STORAGE_KEY);
         if (raw) {
             const parsed = JSON.parse(raw);
+            if (parsed.previewFontPx == null) {
+                const far = typeof parsed.previewFarTitlePx === 'number' ? parsed.previewFarTitlePx : DEFAULTS.previewFontPx;
+                const near = typeof parsed.previewNearTitlePx === 'number' ? parsed.previewNearTitlePx : DEFAULTS.previewFontPx;
+                parsed.previewFontPx = Math.round((far + near) / 2);
+            }
             _settings = { ...DEFAULTS, ...parsed };
         } else {
             _settings = { ...DEFAULTS };

package/package.json

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