collabmd 0.1.51 → 0.1.54

package/src/client/presentation/comment-ui-controller.js

@@ -63,6 +63,7 @@ export class CommentUiController {
     this.cardRoot = null;
     this.pendingCardFocusElement = null;
     this.reactionPicker = null;
+    this.listenerController = null;
     this.layoutFrame = 0;
     this.timeFormatter = new Intl.DateTimeFormat(undefined, {
       day: 'numeric',
@@ -200,26 +201,28 @@ export class CommentUiController {
       }
     };
 
-    this.commentSelectionButton?.addEventListener('pointerdown', this.handleCommentSelectionButtonPointerDown);
+    this.listenerController = new AbortController();
+    const { signal } = this.listenerController;
+    this.commentSelectionButton?.addEventListener('pointerdown', this.handleCommentSelectionButtonPointerDown, { signal });
     this.commentSelectionButton?.addEventListener('click', () => {
       this.openComposerForSelection('toolbar');
-    });
+    }, { signal });
     this.commentsToggleButton?.addEventListener('click', () => {
       this.setDrawerOpen(!this.drawerOpen);
-    });
-    this.previewContainer?.addEventListener('scroll', this.handlePreviewScroll, { passive: true });
-    this.previewElement?.addEventListener('pointermove', this.handlePreviewPointerMove, { passive: true });
-    this.previewElement?.addEventListener('pointerleave', this.handlePreviewPointerLeave);
-    this.previewElement?.addEventListener('focusin', this.handlePreviewFocusIn);
-    this.previewElement?.addEventListener('focusout', this.handlePreviewFocusOut);
-    this.editorContainer?.addEventListener('pointerdown', this.handleEditorPointerDown);
-    this.editorContainer?.addEventListener('focusout', this.handleEditorFocusOut);
-    window.addEventListener('resize', this.handleWindowResize);
-    document.addEventListener('pointerup', this.handleDocumentPointerUp);
-    document.addEventListener('pointercancel', this.handleDocumentPointerUp);
-    document.addEventListener('pointerdown', this.handleDocumentPointerDown);
-    document.addEventListener('keydown', this.handleDocumentKeyDown);
-    document.addEventListener('selectionchange', this.handleDocumentSelectionChange);
+    }, { signal });
+    this.previewContainer?.addEventListener('scroll', this.handlePreviewScroll, { passive: true, signal });
+    this.previewElement?.addEventListener('pointermove', this.handlePreviewPointerMove, { passive: true, signal });
+    this.previewElement?.addEventListener('pointerleave', this.handlePreviewPointerLeave, { signal });
+    this.previewElement?.addEventListener('focusin', this.handlePreviewFocusIn, { signal });
+    this.previewElement?.addEventListener('focusout', this.handlePreviewFocusOut, { signal });
+    this.editorContainer?.addEventListener('pointerdown', this.handleEditorPointerDown, { signal });
+    this.editorContainer?.addEventListener('focusout', this.handleEditorFocusOut, { signal });
+    window.addEventListener('resize', this.handleWindowResize, { signal });
+    document.addEventListener('pointerup', this.handleDocumentPointerUp, { signal });
+    document.addEventListener('pointercancel', this.handleDocumentPointerUp, { signal });
+    document.addEventListener('pointerdown', this.handleDocumentPointerDown, { signal });
+    document.addEventListener('keydown', this.handleDocumentKeyDown, { signal });
+    document.addEventListener('selectionchange', this.handleDocumentSelectionChange, { signal });
   }
 
   destroy() {
@@ -228,20 +231,8 @@ export class CommentUiController {
       this.layoutFrame = 0;
     }
     this.attachSession(null);
-    this.previewContainer?.removeEventListener('scroll', this.handlePreviewScroll);
-    this.previewElement?.removeEventListener('pointermove', this.handlePreviewPointerMove);
-    this.previewElement?.removeEventListener('pointerleave', this.handlePreviewPointerLeave);
-    this.previewElement?.removeEventListener('focusin', this.handlePreviewFocusIn);
-    this.previewElement?.removeEventListener('focusout', this.handlePreviewFocusOut);
-    this.commentSelectionButton?.removeEventListener('pointerdown', this.handleCommentSelectionButtonPointerDown);
-    this.editorContainer?.removeEventListener('pointerdown', this.handleEditorPointerDown);
-    this.editorContainer?.removeEventListener('focusout', this.handleEditorFocusOut);
-    window.removeEventListener('resize', this.handleWindowResize);
-    document.removeEventListener('pointerup', this.handleDocumentPointerUp);
-    document.removeEventListener('pointercancel', this.handleDocumentPointerUp);
-    document.removeEventListener('pointerdown', this.handleDocumentPointerDown);
-    document.removeEventListener('keydown', this.handleDocumentKeyDown);
-    document.removeEventListener('selectionchange', this.handleDocumentSelectionChange);
+    this.listenerController?.abort();
+    this.listenerController = null;
     this.previewHoverRegions = [];
     this.previewSelection = null;
     this.cardRoot?.remove();

package/src/client/presentation/create-menu-presenter.js

@@ -23,8 +23,6 @@ export class CreateMenuPresenter {
     this.mobileBreakpointQuery = mobileBreakpointQuery;
     this.activeAnchor = null;
     this.desktopMenu = null;
-    this.mobileSheet = null;
-    this.documentPointerDownHandler = null;
     this.windowResizeHandler = null;
     this.blockingModalHandler = () => this.close();
     this.boundClose = () => this.close();
@@ -67,8 +65,9 @@ export class CreateMenuPresenter {
 
   close({ restoreFocus = true } = {}) {
     if (this.desktopMenu) {
-      this.desktopMenu.remove();
+      const menu = this.desktopMenu;
       this.desktopMenu = null;
+      menu.remove();
     }
 
     if (this.mobileSheet) {
@@ -78,11 +77,6 @@ export class CreateMenuPresenter {
     }
     document.removeEventListener('collabmd:close-custom-modals', this.blockingModalHandler);
 
-    if (this.documentPointerDownHandler) {
-      document.removeEventListener('pointerdown', this.documentPointerDownHandler);
-      this.documentPointerDownHandler = null;
-    }
-
     if (this.windowResizeHandler && typeof window !== 'undefined') {
       window.removeEventListener('resize', this.windowResizeHandler);
       this.windowResizeHandler = null;
@@ -104,26 +98,24 @@ export class CreateMenuPresenter {
     menu.className = 'create-menu';
     menu.setAttribute('role', 'menu');
     menu.setAttribute('aria-label', title);
+    menu.setAttribute('popover', 'auto');
 
     this.renderMenuItems(menu, items);
     document.body.appendChild(menu);
+    menu.showPopover?.();
     this.positionDesktopMenu(menu, anchor);
 
     menu.addEventListener('keydown', (event) => {
       this.handleDesktopMenuKeyDown(event, menu);
     });
-
-    this.documentPointerDownHandler = (event) => {
-      if (menu.contains(event.target) || anchor?.contains?.(event.target)) {
-        return;
+    // Native light-dismiss replaces the deferred pointerdown listener;
+    // explicit closes detach the element first, so ignore those toggles.
+    menu.addEventListener('toggle', (toggleEvent) => {
+      if (toggleEvent.newState === 'closed' && menu.isConnected && this.desktopMenu === menu) {
+        this.close();
       }
-
-      this.close();
-    };
+    });
     this.windowResizeHandler = this.boundClose;
-    setTimeout(() => {
-      document.addEventListener('pointerdown', this.documentPointerDownHandler);
-    }, 0);
     if (typeof window !== 'undefined') {
       window.addEventListener('resize', this.windowResizeHandler);
     }
@@ -136,6 +128,7 @@ export class CreateMenuPresenter {
     const sheet = document.createElement('dialog');
     sheet.className = 'file-action-sheet create-action-sheet';
     sheet.setAttribute('aria-label', title);
+    sheet.setAttribute('closedby', 'any');
 
     const header = document.createElement('div');
     header.className = 'create-action-sheet-header';
@@ -160,6 +153,11 @@ export class CreateMenuPresenter {
       event.preventDefault();
       this.close();
     });
+    sheet.addEventListener('close', () => {
+      if (sheet.isConnected && this.mobileSheet === sheet) {
+        this.close();
+      }
+    });
     sheet.addEventListener('click', (event) => {
       const bounds = sheet.getBoundingClientRect();
       if (event.clientX < bounds.left || event.clientX > bounds.right

package/src/client/presentation/drawio-embed-controller.js

@@ -1,6 +1,6 @@
 import { createDrawioLeaseRoomName } from '../../domain/drawio-room.js';
 import { setDiagramActionButtonIcon } from '../domain/diagram-action-icons.js';
-import { resolveAppUrl } from '../domain/runtime-paths.js';
+import { getActiveVaultId, resolveAppUrl } from '../domain/runtime-paths.js';
 import { renderDrawioViewer } from './drawio-viewer.js';
 import {
   cancelIdleRender,
@@ -38,20 +38,23 @@ export class DrawioEmbedController {
     this.instanceCounter = 0;
     this.maximizedEntry = null;
     this.overlayRoot = null;
+    this.placeholderObserver = null;
 
     this._onMessage = this._onMessage.bind(this);
     this._onKeyDown = this._onKeyDown.bind(this);
     this._onPreviewClick = this._onPreviewClick.bind(this);
 
-    window.addEventListener('message', this._onMessage);
-    window.addEventListener('keydown', this._onKeyDown);
-    this.previewElement?.addEventListener('click', this._onPreviewClick);
+    this.listenerController = new AbortController();
+    const { signal } = this.listenerController;
+    window.addEventListener('message', this._onMessage, { signal });
+    window.addEventListener('keydown', this._onKeyDown, { signal });
+    this.previewElement?.addEventListener('click', this._onPreviewClick, { signal });
   }
 
   destroy() {
-    window.removeEventListener('message', this._onMessage);
-    window.removeEventListener('keydown', this._onKeyDown);
-    this.previewElement?.removeEventListener('click', this._onPreviewClick);
+    this.listenerController?.abort();
+    this.listenerController = null;
+    this._disconnectPlaceholderObserver();
     cancelIdleRender(this.hydrationIdleId);
     this.hydrationIdleId = null;
     this.hydrationQueue = [];
@@ -64,6 +67,7 @@ export class DrawioEmbedController {
   }
 
   detachForCommit() {
+    this._disconnectPlaceholderObserver();
     cancelIdleRender(this.hydrationIdleId);
     this.hydrationIdleId = null;
     this.hydrationQueue = [];
@@ -122,6 +126,9 @@ export class DrawioEmbedController {
 
     this.embedEntries = nextEntries;
 
+    this._disconnectPlaceholderObserver();
+    this._ensurePlaceholderObserver();
+
     this.embedEntries.forEach((entry) => {
       if (entry.wrapper) {
         this.attachWrapper(entry);
@@ -164,12 +171,53 @@ export class DrawioEmbedController {
         return;
       }
 
-      if (entry.mode === 'edit' || isNearViewport(entry.placeholder, this.previewContainer, HYDRATE_VIEWPORT_MARGIN_PX)) {
+      if (entry.mode === 'edit') {
         this.enqueueHydration(entry);
+        return;
+      }
+
+      if (typeof IntersectionObserver === 'undefined') {
+        if (isNearViewport(entry.placeholder, this.previewContainer, HYDRATE_VIEWPORT_MARGIN_PX)) {
+          this.enqueueHydration(entry);
+        }
+        return;
       }
+
+      this.placeholderObserver?.observe(entry.placeholder);
     });
   }
 
+  _ensurePlaceholderObserver() {
+    if (!this.previewContainer || typeof IntersectionObserver === 'undefined') {
+      return;
+    }
+
+    this.placeholderObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) {
+          return;
+        }
+
+        const embedEntry = this.embedEntries.get(entry.target.dataset.drawioKey);
+        if (embedEntry && !embedEntry.wrapper) {
+          this.enqueueHydration(embedEntry);
+        }
+      });
+    }, {
+      root: this.previewContainer,
+      rootMargin: `${HYDRATE_VIEWPORT_MARGIN_PX}px 0px`,
+    });
+  }
+
+  _disconnectPlaceholderObserver() {
+    if (!this.placeholderObserver) {
+      return;
+    }
+
+    this.placeholderObserver.disconnect();
+    this.placeholderObserver = null;
+  }
+
   enqueueHydration(entry) {
     if (entry.queued) {
       return;
@@ -315,6 +363,8 @@ export class DrawioEmbedController {
   buildIframeUrl(entry) {
     const url = new URL(resolveAppUrl('/drawio-editor.html'));
     const localUser = this.getLocalUser?.() ?? {};
+    const vaultId = getActiveVaultId();
+    if (vaultId) url.searchParams.set('vault', vaultId);
     url.searchParams.set('file', entry.filePath);
     url.searchParams.set('hostMode', entry.mode === 'edit' ? 'file-preview' : 'embed');
     url.searchParams.set('instanceId', entry.instanceId);

package/src/client/presentation/excalidraw-embed-controller.js

@@ -1,7 +1,7 @@
 import { setDiagramActionButtonIcon } from '../domain/diagram-action-icons.js';
 import { parseExcalidrawElementLink } from '../domain/excalidraw-element-link.js';
 import { reconcileEmbedEntries } from './excalidraw-embed-reconciler.js';
-import { resolveAppPath, resolveAppUrl, resolveWsServerOverride } from '../domain/runtime-paths.js';
+import { getActiveVaultId, resolveAppPath, resolveAppUrl, resolveWsServerOverride } from '../domain/runtime-paths.js';
 import {
   cancelIdleRender,
   isNearViewport,
@@ -213,15 +213,20 @@ export class ExcalidrawEmbedController {
       return;
     }
 
-    const margin = this.isLargeDocument ? 180 : 420;
     this.embedEntries.forEach((entry) => {
       if (entry.wrapper || !entry.placeholder?.isConnected) {
         return;
       }
 
-      if (isNearViewport(entry.placeholder, this.previewContainer, margin)) {
-        this._enqueueHydration(entry, { prioritize: true });
+      if (typeof IntersectionObserver === 'undefined' || !this.placeholderObserver) {
+        const margin = this.isLargeDocument ? 180 : 420;
+        if (isNearViewport(entry.placeholder, this.previewContainer, margin)) {
+          this._enqueueHydration(entry, { prioritize: true });
+        }
+        return;
       }
+
+      this.placeholderObserver.observe(entry.placeholder);
     });
   }
 
@@ -563,6 +568,8 @@ export class ExcalidrawEmbedController {
       entry.wrapper.style.width = '';
       entry.wrapper.style.margin = '';
       entry.wrapper.style.pointerEvents = 'auto';
+      // Moving an iframe reloads its document; wait for its new ready message.
+      entry.isReady = false;
       placeholder.replaceWith(entry.wrapper);
       entry.placeholder = null;
       return;
@@ -571,6 +578,7 @@ export class ExcalidrawEmbedController {
     const overlayRoot = this._ensureOverlayRoot();
     overlayRoot.hidden = false;
     if (entry.wrapper?.parentElement !== overlayRoot) {
+      entry.isReady = false;
       overlayRoot.appendChild(entry.wrapper);
     }
 
@@ -754,6 +762,8 @@ export class ExcalidrawEmbedController {
     }
     const theme = this.getTheme?.() || 'dark';
 
+    const vaultId = getActiveVaultId();
+    if (vaultId) iframeUrl.searchParams.set('vault', vaultId);
     iframeUrl.searchParams.set('file', entry.filePath);
     iframeUrl.searchParams.set('theme', theme);
     iframeUrl.searchParams.set('boot', entry.instanceId || '');

package/src/client/presentation/file-action-controller.js

@@ -3,7 +3,7 @@ import {
   isVaultFilePath,
   VAULT_FILE_EXTENSIONS,
 } from '../../domain/file-kind.js';
-import { pickFiles } from '../browser-utils.js';
+import { copyTextToClipboard, pickFiles } from '../browser-utils.js';
 import {
   createBaseStarter,
   composeVaultChildPath,
@@ -17,6 +17,8 @@ import {
   getVaultPathParent,
   normalizeVaultPathInput,
 } from '../domain/vault-paths.js';
+import { createFileRouteHash } from '../domain/hash-routes.js';
+import { getActiveVaultId } from '../domain/runtime-paths.js';
 import { buttonClassNames } from './components/ui/button.js';
 import { CreateMenuPresenter } from './create-menu-presenter.js';
 
@@ -258,6 +260,10 @@ export class FileActionController {
 
   getFileContextMenuItems(filePath) {
     return [
+      {
+        label: 'Copy as URL',
+        onSelect: () => this.copyFileUrl(filePath),
+      },
       {
         label: 'Rename / move',
         onSelect: () => this.handleRenameFile(filePath),
@@ -274,6 +280,20 @@ export class FileActionController {
     ];
   }
 
+  async copyFileUrl(filePath) {
+    const url = new URL(window.location.href);
+    url.search = '';
+    const vaultId = getActiveVaultId();
+    if (vaultId) url.searchParams.set('vault', vaultId);
+    url.hash = createFileRouteHash(filePath);
+    try {
+      await copyTextToClipboard(url.toString());
+      this.showToast('Link copied');
+    } catch {
+      this.showToast('Failed to copy link');
+    }
+  }
+
   showToast(message) {
     if (message) {
       this.toastController?.show(String(message));

package/src/client/presentation/file-explorer-controller.js

@@ -126,6 +126,7 @@ export class FileExplorerController {
   revealFile(filePath, { clearSearch = false } = {}) {
     if (clearSearch) {
       this.state.setSearchQuery('');
+      this.view.cancelPendingSearch();
     }
 
     this.state.setActiveFile(filePath);

package/src/client/presentation/file-explorer-view.js

@@ -4,6 +4,7 @@ import {
   stripVaultFileExtension,
 } from '../../domain/file-kind.js';
 import { escapeHtml } from '../domain/vault-utils.js';
+import { findFuzzyMatch } from '../domain/file-search.js';
 import { getVaultPathLeaf, getVaultPathParent } from '../domain/vault-paths.js';
 import { buttonClassNames } from './components/ui/button.js';
 
@@ -29,6 +30,7 @@ const MOBILE_LONG_PRESS_DELAY_MS = 420;
 const MOBILE_LONG_PRESS_MOVE_TOLERANCE_PX = 10;
 const DRAG_AUTO_EXPAND_DELAY_MS = 700;
 const SEARCH_RESULT_LIMIT = 80;
+export const FILE_TREE_SEARCH_DEBOUNCE_MS = 150;
 
 function createMenuFilterInput({ container, itemSelector, placeholder, skipLabels = [] }) {
   const searchInput = document.createElement('input');
@@ -42,9 +44,17 @@ function createMenuFilterInput({ container, itemSelector, placeholder, skipLabel
       if (skipLabels.includes(button.textContent)) {
         return;
       }
-      button.hidden = query.length > 0 && !(button.textContent ?? '').toLowerCase().includes(query);
+      const text = (button.dataset.searchText ?? button.textContent ?? '').toLowerCase();
+      button.hidden = query.length > 0 && !text.includes(query) && !findFuzzyMatch(text, query);
     });
   });
+  searchInput.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      Array.from(container.querySelectorAll(itemSelector))
+        .find((button) => !button.hidden && !skipLabels.includes(button.textContent))?.click();
+    }
+  });
   container.appendChild(searchInput);
   return searchInput;
 }
@@ -94,6 +104,8 @@ export class FileExplorerView {
     this.rootDropZone = null;
     this.threadCounts = new Map();
     this.showFileExtensions = false;
+    this.searchDebounceTimer = null;
+    this.pendingSearchValue = null;
   }
 
   renderVaultSwitcher(options) {
@@ -114,17 +126,17 @@ export class FileExplorerView {
     button.className = 'vault-switcher-button';
     button.id = 'vaultSwitcher';
     button.setAttribute('aria-haspopup', 'menu');
-    button.setAttribute('aria-label', `Switch vault (current: ${active.id})`);
+    button.setAttribute('aria-label', `Switch vault (current: ${active.name || active.id})`);
     button.title = 'Switch vault';
-    button.innerHTML = `<span class="vault-switcher-icon" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg></span><span class="vault-switcher-name">${escapeHtml(active.id)}</span><span class="vault-switcher-chevron" aria-hidden="true"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg></span>`;
+    button.innerHTML = `<span class="vault-switcher-icon" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg></span><span class="vault-switcher-name">${escapeHtml(active.name || active.id)}</span><span class="vault-switcher-chevron" aria-hidden="true"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg></span>`;
     button.addEventListener('click', (event) => {
       this.showContextMenu(event, entries.map((vault) => ({
-        label: vault.id,
+        label: vault.name || vault.id,
+        searchText: `${vault.name || vault.id} ${vault.id}`,
         onSelect: () => (onVaultSelect ?? this.onVaultSelect)?.(vault.id),
       })), {
         alignToAnchor: true,
-        // ponytail: filter only pays off for long vault lists
-        searchPlaceholder: entries.length > 8 ? 'Filter vaults…' : '',
+        searchPlaceholder: 'Filter vaults…',
       });
     });
     wrapper.appendChild(button);
@@ -138,7 +150,7 @@ export class FileExplorerView {
 
   initialize() {
     this.searchInput?.addEventListener('input', (event) => {
-      this.onSearchChange?.(event.target.value);
+      this.handleSearchInput(event.target.value);
     });
 
     this.treeContainer?.addEventListener('click', (event) => {
@@ -182,6 +194,22 @@ export class FileExplorerView {
     });
   }
 
+  handleSearchInput(value) {
+    this.pendingSearchValue = String(value ?? '');
+    clearTimeout(this.searchDebounceTimer);
+    this.searchDebounceTimer = setTimeout(() => {
+      this.searchDebounceTimer = null;
+      this.pendingSearchValue = null;
+      this.onSearchChange?.(value);
+    }, FILE_TREE_SEARCH_DEBOUNCE_MS);
+  }
+
+  cancelPendingSearch() {
+    clearTimeout(this.searchDebounceTimer);
+    this.searchDebounceTimer = null;
+    this.pendingSearchValue = null;
+  }
+
   getTreeItem(event) {
     const item = event.target instanceof Element
       ? event.target.closest('.file-tree-item')
@@ -366,7 +394,8 @@ export class FileExplorerView {
       this.clearDragFeedback();
     }
 
-    if (this.searchInput && this.searchInput.value !== searchQuery) {
+    // Never clobber keystrokes that are still waiting out the input debounce.
+    if (this.searchInput && this.pendingSearchValue === null && this.searchInput.value !== searchQuery) {
       this.searchInput.value = searchQuery;
     }
     this.updateSearchStatus(searchQuery, this.currentSearchQuery ? searchMatches.length : null);
@@ -1073,6 +1102,7 @@ export class FileExplorerView {
       button.className = `file-context-item${item.danger ? ' file-context-danger' : ''}`;
       button.setAttribute('role', 'menuitem');
       button.textContent = item.label;
+      if (item.searchText) button.dataset.searchText = item.searchText;
       button.addEventListener('click', () => {
         this.removeContextMenu();
         item.onSelect?.({ anchor: contextAnchor });
@@ -1133,6 +1163,8 @@ export class FileExplorerView {
     };
     menu.addEventListener('keydown', handleKeydown);
     document.addEventListener('collabmd:close-custom-modals', this.blockingModalHandler);
+    // Defer outside-click tracking: the opening gesture's own events must not dismiss the menu.
+    // (An auto popover cannot be used here: Chromium light-dismisses it on that same gesture's trailing pointerup.)
     this.contextMenuCloseTimer = setTimeout(() => {
       this.contextMenuCloseTimer = null;
       if (menu.isConnected && this.contextMenuCloseHandler === close) {
@@ -1147,6 +1179,9 @@ export class FileExplorerView {
     const sheet = document.createElement('dialog');
     sheet.className = 'file-action-sheet';
     sheet.setAttribute('aria-label', 'File actions');
+    // Native light-dismiss where supported; the cancel/click handlers below
+    // cover older browsers and the close listener funnels both paths here.
+    sheet.setAttribute('closedby', 'any');
 
     if (searchPlaceholder) {
       createMenuFilterInput({ container: sheet, itemSelector: '.file-action-sheet-item', placeholder: searchPlaceholder, skipLabels: ['Cancel'] });
@@ -1159,6 +1194,7 @@ export class FileExplorerView {
         extra: ['file-action-sheet-item', item.danger ? 'file-context-danger' : ''],
       });
       button.textContent = item.label;
+      if (item.searchText) button.dataset.searchText = item.searchText;
       button.addEventListener('click', () => {
         this.removeContextMenu();
         item.onSelect?.();
@@ -1178,10 +1214,22 @@ export class FileExplorerView {
     });
     sheet.appendChild(cancelButton);
 
+    sheet.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') {
+        // A search input otherwise consumes Escape before the dialog can cancel.
+        event.preventDefault();
+        this.removeContextMenu();
+      }
+    });
     sheet.addEventListener('cancel', (event) => {
       event.preventDefault();
       this.removeContextMenu();
     });
+    sheet.addEventListener('close', () => {
+      if (sheet.isConnected) {
+        this.removeContextMenu();
+      }
+    });
     sheet.addEventListener('click', (event) => {
       const bounds = sheet.getBoundingClientRect();
       if (event.clientX < bounds.left || event.clientX > bounds.right

package/src/client/presentation/file-history-view-controller.js

@@ -230,7 +230,13 @@ export class FileHistoryViewController {
     };
   }
 
+  ensureDeferredGitStyles() {
+    this._deferredGitStylesPromise ??= import('../styles/deferred-git.css').catch(() => {});
+    return this._deferredGitStylesPromise;
+  }
+
   async openFileHistory({ filePath }) {
+    void this.ensureDeferredGitStyles();
     this.isActive = true;
     this.currentFilePath = String(filePath ?? '').trim() || null;
     this.localChanges = null;

package/src/client/presentation/git-diff-view-controller.js

@@ -22,8 +22,9 @@ function getDiffFileKind(file = null) {
 
 function getImageFormat(filePath = '') {
   const normalizedPath = String(filePath ?? '').toLowerCase();
-  const extension = Object.keys(IMAGE_MIME_LABELS).find((candidate) => normalizedPath.endsWith(candidate));
-  return extension ? IMAGE_MIME_LABELS[extension] : 'Image';
+  const dotIndex = normalizedPath.lastIndexOf('.');
+  const extension = dotIndex >= 0 ? normalizedPath.slice(dotIndex) : '';
+  return IMAGE_MIME_LABELS[extension] ?? 'Image';
 }
 
 function parseExcalidrawScene(rawSource = '') {

package/src/client/presentation/git-panel-controller.js

@@ -229,12 +229,12 @@ export class GitPanelController {
     if (this._handleFileSelectionClick(event)) return;
 
     const pullBackupButton = event.target instanceof Element
-      ? event.target.closest('[data-git-pull-backup-path]')
+      ? event.target.closest('[data-git-pull-backup-id]')
       : null;
     if (pullBackupButton) {
-      const summaryPath = pullBackupButton.getAttribute('data-git-pull-backup-path');
-      if (summaryPath) {
-        this.onOpenPullBackup(summaryPath);
+      const backupId = pullBackupButton.getAttribute('data-git-pull-backup-id');
+      if (backupId) {
+        this.onOpenPullBackup(backupId);
       }
       return;
     }
@@ -722,7 +722,8 @@ export class GitPanelController {
         <button
           class="ui-item-main git-file-item"
           type="button"
-          data-git-pull-backup-path="${escapeHtml(backup.summaryPath || '')}"
+          title="Open read-only pull backup summary in a new tab"
+          data-git-pull-backup-id="${escapeHtml(backup.id || '')}"
         >
           ${fileIconSvg()}
           <span class="ui-item-copy git-file-copy">

package/src/client/presentation/image-lightbox-controller.js

@@ -78,6 +78,8 @@ export class ImageLightboxController {
     this.resetButton = null;
     this.previouslyFocusedElement = null;
     this.blockingModalHandler = () => this.close();
+    this.listenerController = new AbortController();
+    const { signal } = this.listenerController;
 
     this.handlePreviewClick = (event) => {
       const target = event.target;
@@ -131,15 +133,14 @@ export class ImageLightboxController {
       this.syncTransform();
     };
 
-    this.previewElement?.addEventListener('click', this.handlePreviewClick);
-    this.document.addEventListener('keydown', this.handleKeyDown);
-    this.window.addEventListener('resize', this.handleWindowResize);
+    this.previewElement?.addEventListener('click', this.handlePreviewClick, { signal });
+    this.document.addEventListener('keydown', this.handleKeyDown, { signal });
+    this.window.addEventListener('resize', this.handleWindowResize, { signal });
   }
 
   destroy() {
-    this.previewElement?.removeEventListener('click', this.handlePreviewClick);
-    this.document.removeEventListener('keydown', this.handleKeyDown);
-    this.window.removeEventListener('resize', this.handleWindowResize);
+    this.listenerController?.abort();
+    this.listenerController = null;
     this.close();
     this.overlayRoot?.remove();
     this.overlayRoot = null;