gitmaps 1.1.21 → 1.1.23

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/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/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,19 @@ function SettingsPanel({ settings }: { settings: GitCanvasSettings }) {
 
                 {/* Preview Mode Section */}
                 <SettingsSection title="Preview Mode">
-                    <SettingsRow label="Far Zoom Title" desc="Filename size when zoomed far out">
+                    <SettingsRow label="Zoomed-out title" desc="Filename size at the farthest preview zoom">
                         <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">
+                    <SettingsRow label="Zoomed-in title" desc="Filename size at the closest preview zoom">
                         <Slider id="settingPreviewNearTitlePx" valueId="previewNearTitlePxValue"
                             min={10} max={24} step={1} value={settings.previewNearTitlePx} 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 +253,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', () => {

package/app/lib/viewport-culling.ts

@@ -826,6 +826,25 @@ export function setupPillInteraction(ctx: CanvasContext) {
         window.addEventListener('mouseup', onPillUp);
     });
 
+    ctx.canvas.addEventListener('contextmenu', (e: MouseEvent) => {
+        const pill = (e.target as HTMLElement).closest('.file-pill') as HTMLElement;
+        if (!pill) return;
+        e.preventDefault();
+        e.stopPropagation();
+
+        const pillPath = pill.dataset.path || '';
+        if (pillPath) {
+            const selected = ctx.snap().context.selectedCards || [];
+            if (!selected.includes(pillPath)) {
+                ctx.actor.send({ type: 'SELECT_CARD', path: pillPath, shift: false });
+                updatePillSelectionHighlights(ctx);
+            }
+            import('./cards').then(({ showCardContextMenu }) => {
+                showCardContextMenu(ctx, pill, e.clientX, e.clientY);
+            });
+        }
+    });
+
     // Native dblclick to open editor modal (consistent with card dblclick)
     ctx.canvas.addEventListener('dblclick', (e: MouseEvent) => {
         const pill = (e.target as HTMLElement).closest('.file-pill') as HTMLElement;
@@ -834,7 +853,7 @@ export function setupPillInteraction(ctx: CanvasContext) {
         e.preventDefault();
         const pillPath = pill.dataset.path || '';
         if (pillPath) {
-            const file = ctx.allFilesData?.find(f => f.path === pillPath) ||
+            const file = resolvePreviewFile(ctx, pillPath) ||
                 { path: pillPath, name: pillPath.split('/').pop(), lines: 0 };
             import('./file-modal').then(({ openFileModal }) => openFileModal(ctx, file));
         }

package/package.json

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