collabmd 0.1.52 → 0.1.55

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

@@ -0,0 +1,116 @@
+import {
+  getActiveVaultId,
+  resolveAppUrl,
+  resolveWsServerOverride,
+} from '../domain/runtime-paths.js';
+
+export class CanvasEmbedController {
+  constructor({ getLocalUser, getTheme, onAwarenessChange, onConnectionChange, onOpenFile, toastController }) {
+    this.getLocalUser = getLocalUser;
+    this.getTheme = getTheme;
+    this.onAwarenessChange = onAwarenessChange;
+    this.onConnectionChange = onConnectionChange;
+    this.onOpenFile = onOpenFile;
+    this.toastController = toastController;
+    this.iframe = null;
+    this.filePath = null;
+    this.ready = false;
+    this.pendingDisconnects = new Map();
+    this.handleMessage = (event) => this.onMessage(event);
+  }
+
+  mount(filePath, renderHost) {
+    if (!renderHost || (this.filePath === filePath && this.iframe?.isConnected)) return;
+    this.unmount();
+    const url = new URL(resolveAppUrl('/canvas-editor.html'));
+    url.searchParams.set('file', filePath);
+    url.searchParams.set('theme', this.getTheme?.() ?? 'dark');
+    const vaultId = getActiveVaultId();
+    if (vaultId) url.searchParams.set('vaultId', vaultId);
+    const server = resolveWsServerOverride();
+    if (server) url.searchParams.set('server', server);
+    const user = this.getLocalUser?.();
+    for (const [key, value] of Object.entries({
+      userName: user?.name,
+      userColor: user?.color,
+      userColorLight: user?.colorLight,
+      userPeerId: user?.peerId,
+    })) {
+      if (value) url.searchParams.set(key, value);
+    }
+
+    const iframe = document.createElement('iframe');
+    iframe.className = 'canvas-file-preview-frame';
+    iframe.title = `Canvas: ${filePath}`;
+    iframe.src = url.toString();
+    this.filePath = filePath;
+    this.iframe = iframe;
+    window.addEventListener('message', this.handleMessage);
+    renderHost.replaceChildren(iframe);
+    this.onConnectionChange?.({ status: 'connecting', unreachable: false });
+  }
+
+  unmount() {
+    window.removeEventListener('message', this.handleMessage);
+    this.pendingDisconnects.forEach((finish) => finish(false));
+    this.iframe?.remove();
+    this.iframe = null;
+    this.filePath = null;
+    this.ready = false;
+  }
+
+  postMessage(message) {
+    this.iframe?.contentWindow?.postMessage(message, window.location.origin);
+  }
+
+  updateTheme(theme) {
+    this.postMessage({ type: 'canvas-theme', theme });
+  }
+
+  updateLocalUser(user = this.getLocalUser?.()) {
+    if (user) this.postMessage({ type: 'canvas-user', user });
+  }
+
+  prepareFileDisconnect(filePath, { timeoutMs = 10000 } = {}) {
+    if (filePath !== this.filePath || !this.iframe || !this.ready) return Promise.resolve(true);
+    const requestId = crypto.randomUUID();
+    return new Promise((resolve) => {
+      const timeout = setTimeout(() => finish(false), timeoutMs);
+      const finish = (canLeave) => {
+        clearTimeout(timeout);
+        this.pendingDisconnects.delete(requestId);
+        if (!canLeave) this.toastController?.show('Waiting for the canvas to reconnect before leaving');
+        resolve(canLeave);
+      };
+      this.pendingDisconnects.set(requestId, finish);
+      this.postMessage({ type: 'canvas-prepare-disconnect', filePath, requestId });
+    });
+  }
+
+  onMessage(event) {
+    if (event.origin !== window.location.origin || !this.iframe || event.source !== this.iframe.contentWindow) return;
+    const message = event.data;
+    if (!message || typeof message !== 'object') return;
+    if (message.type === 'canvas-open-file') {
+      if (typeof message.filePath === 'string' && message.filePath) {
+        const anchor = typeof message.subpath === 'string' && message.subpath.startsWith('#')
+          ? message.subpath.slice(1)
+          : null;
+        this.onOpenFile?.(message.filePath, anchor ? { anchor } : {});
+      }
+      return;
+    }
+    if (message.filePath !== this.filePath) return;
+    if (message.type === 'canvas-ready') {
+      this.ready = true;
+      this.updateTheme(this.getTheme?.() ?? 'dark');
+      this.updateLocalUser();
+    } else if (message.type === 'canvas-awareness' && Array.isArray(message.users)) {
+      this.onAwarenessChange?.(message.users);
+    } else if (message.type === 'canvas-connection' && ['connected', 'connecting', 'disconnected'].includes(message.state?.status)) {
+      this.onConnectionChange?.(message.state);
+    } else if (message.type === 'canvas-disconnect-ready' || message.type === 'canvas-disconnect-blocked') {
+      this.pendingDisconnects.get(message.requestId)?.(message.type === 'canvas-disconnect-ready');
+    }
+  }
+}

package/src/client/presentation/canvas-picker.js

@@ -0,0 +1,111 @@
+import { createFileSearchEntry, findFileSearchMatch } from '../domain/file-search.js';
+
+export function openCanvasPicker({ root, title, loadChoices, onChoose, canChoose }) {
+  const previousFocus = document.activeElement;
+  const dialog = document.createElement('dialog');
+  dialog.className = 'canvas-picker';
+  const heading = document.createElement('h2');
+  heading.id = `canvas-picker-${crypto.randomUUID()}`;
+  heading.textContent = title;
+  dialog.setAttribute('aria-labelledby', heading.id);
+  const closeButton = document.createElement('button');
+  closeButton.type = 'button';
+  closeButton.className = 'canvas-button';
+  closeButton.textContent = 'Close';
+  const header = document.createElement('header');
+  header.append(heading, closeButton);
+  const input = document.createElement('input');
+  input.type = 'search';
+  input.placeholder = title;
+  input.setAttribute('aria-label', title);
+  input.setAttribute('role', 'combobox');
+  input.setAttribute('aria-autocomplete', 'list');
+  input.setAttribute('aria-expanded', 'true');
+  input.autocomplete = 'off';
+  const list = document.createElement('div');
+  list.id = `${heading.id}-results`;
+  list.className = 'canvas-picker-results';
+  list.setAttribute('role', 'listbox');
+  list.setAttribute('aria-label', 'Suggestions');
+  input.setAttribute('aria-controls', list.id);
+  const status = document.createElement('p');
+  status.className = 'canvas-picker-status';
+  status.setAttribute('role', 'status');
+  status.textContent = 'Loading…';
+  dialog.append(header, input, list, status);
+  root.append(dialog);
+  let choices = [];
+  let filtered = [];
+  let index = 0;
+  let closed = false;
+  const close = () => {
+    if (closed) return;
+    closed = true;
+    dialog.close();
+    dialog.remove();
+    if (previousFocus?.isConnected) previousFocus.focus({ preventScroll: true });
+  };
+  const choose = (choice) => {
+    if (!choice) return;
+    if (!canChoose()) { status.textContent = 'This selection is no longer available. Close and try again.'; return; }
+    close();
+    onChoose(choice.value);
+  };
+  const select = (next) => {
+    index = Math.max(0, Math.min(filtered.length - 1, next));
+    [...list.children].forEach((option, position) => option.setAttribute('aria-selected', String(position === index)));
+    const active = list.children[index];
+    if (active) {
+      input.setAttribute('aria-activedescendant', active.id);
+      active.scrollIntoView({ block: 'nearest' });
+    } else input.removeAttribute('aria-activedescendant');
+  };
+  const render = () => {
+    const query = input.value.trim().toLowerCase();
+    const matches = choices.map((choice) => ({ choice, score: query ? findFileSearchMatch(choice.search, query)?.score : 1 }))
+      .filter(({ score }) => score !== undefined).sort((a, b) => b.score - a.score);
+    filtered = matches.slice(0, 100).map(({ choice }) => choice);
+    list.replaceChildren(...filtered.map((choice, position) => {
+      const option = document.createElement('button');
+      option.type = 'button';
+      option.tabIndex = -1;
+      option.id = `${list.id}-${position}`;
+      option.setAttribute('role', 'option');
+      const label = document.createElement('span');
+      label.textContent = choice.label;
+      const detail = document.createElement('small');
+      detail.textContent = choice.detail || '';
+      option.append(label, detail);
+      option.addEventListener('click', () => choose(choice));
+      return option;
+    }));
+    status.textContent = matches.length > 100 ? 'Showing the first 100 matches. Type to narrow the list.'
+      : (matches.length ? '↑ ↓ to navigate · Enter to choose · Esc to close' : 'No matches.');
+    select(0);
+  };
+  closeButton.addEventListener('click', close);
+  dialog.addEventListener('cancel', (event) => { event.preventDefault(); close(); });
+  dialog.addEventListener('click', (event) => {
+    const bounds = dialog.getBoundingClientRect();
+    if (event.target === dialog && (event.clientX < bounds.left || event.clientX > bounds.right
+      || event.clientY < bounds.top || event.clientY > bounds.bottom)) close();
+  });
+  dialog.addEventListener('keydown', (event) => {
+    event.stopPropagation();
+    if (event.key === 'Escape') { event.preventDefault(); close(); return; }
+    if (event.target !== input) return;
+    if (['ArrowDown', 'ArrowUp', 'Enter'].includes(event.key)) event.preventDefault();
+    if (event.key === 'ArrowDown') select(index + 1);
+    if (event.key === 'ArrowUp') select(index - 1);
+    if (event.key === 'Enter') choose(filtered[index]);
+  });
+  input.addEventListener('input', render);
+  dialog.showModal();
+  input.focus();
+  Promise.resolve().then(loadChoices).then((loaded) => {
+    if (closed) return;
+    choices = loaded.map((choice) => ({ ...choice, search: createFileSearchEntry(choice.searchText || `${choice.label} ${choice.detail || ''}`) }));
+    render();
+  }).catch(() => { if (!closed) status.textContent = 'Suggestions unavailable. Close and try again.'; });
+  return { close };
+}

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,
@@ -59,7 +59,6 @@ export class DrawioEmbedController {
     this.hydrationIdleId = null;
     this.hydrationQueue = [];
     this._exitMaximizedEntry();
-    document.body.classList.remove('drawio-maximized-open');
     this.embedEntries.forEach((entry) => entry.wrapper?.remove());
     this.embedEntries.clear();
     this.overlayRoot?.remove();
@@ -363,6 +362,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);
@@ -635,7 +636,6 @@ export class DrawioEmbedController {
     const entry = this.maximizedEntry;
     if (!entry?.wrapper) {
       this.maximizedEntry = null;
-      document.body.classList.remove('drawio-maximized-open');
       return;
     }
 
@@ -654,7 +654,7 @@ export class DrawioEmbedController {
     entry.restoreParent = null;
     entry.restoreNextSibling = null;
     this.maximizedEntry = null;
-    document.body.classList.remove('drawio-maximized-open');
+    document.body.classList.toggle('drawio-maximized-open', Boolean(document.body.querySelector('.drawio-embed.is-maximized')));
     this.overlayRoot?.classList.remove('has-maximized-entry');
     this.syncEntryLayout(entry);
   }

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,
@@ -80,7 +80,6 @@ export class ExcalidrawEmbedController {
     this.hydrationIdleId = null;
     this.hydrationQueue = [];
     this._exitMaximizedEmbed();
-    document.body.classList.remove('excalidraw-maximized-open');
 
     this.embedEntries.forEach((entry) => {
       this._clearEntryBootTimeout(entry);
@@ -762,6 +761,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 || '');
@@ -878,7 +879,7 @@ export class ExcalidrawEmbedController {
       isMaximized = false;
       wrapper.classList.remove('is-maximized');
       syncMaximizeButtonState();
-      document.body.classList.remove('excalidraw-maximized-open');
+      document.body.classList.toggle('excalidraw-maximized-open', Boolean(document.body.querySelector('.excalidraw-embed.is-maximized')));
       this._restoreMaximizedEntryLayout(entry);
       iframe.style.height = restoreHeight;
       if (this.maximizedEmbed?.wrapper === wrapper) {
@@ -1344,6 +1345,15 @@ export class ExcalidrawEmbedController {
       this._syncEntryFollowState(entry);
       this._postPendingCommentThread?.(entry);
       this._postPendingElement?.(entry);
+      this.pendingDisconnectRequests?.forEach((request, requestId) => {
+        if (request.entry === entry) {
+          this._postMessageToEntry(entry, {
+            source: 'collabmd-host',
+            type: 'prepare-disconnect',
+            requestId,
+          });
+        }
+      });
       if (this._entryNeedsHardReload(entry)) {
         void this._hydrateEntry(entry);
       }
@@ -1434,7 +1444,6 @@ export class ExcalidrawEmbedController {
       this.maximizedEmbed.exit();
     }
     this.maximizedEmbed = null;
-    document.body.classList.remove('excalidraw-maximized-open');
   }
 
   _postMessageToEntry(entry, payload) {

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';
 
@@ -156,6 +158,16 @@ export class FileActionController {
         meta: '.base',
         onSelect: () => this.handleNewBase({ parentDir }),
       },
+      {
+        contextLabel: 'New canvas',
+        group: 'Diagram',
+        hint: 'JSON Canvas',
+        icon: this.getCreateActionIcon('canvas'),
+        id: 'canvas',
+        label: 'Canvas',
+        meta: '.canvas',
+        onSelect: () => this.handleNewCanvas({ parentDir }),
+      },
       {
         contextLabel: 'New Excalidraw drawing',
         group: 'Diagram',
@@ -258,6 +270,10 @@ export class FileActionController {
 
   getFileContextMenuItems(filePath) {
     return [
+      {
+        label: 'Copy as URL',
+        onSelect: () => this.copyFileUrl(filePath),
+      },
       {
         label: 'Rename / move',
         onSelect: () => this.handleRenameFile(filePath),
@@ -274,6 +290,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));
@@ -286,6 +316,7 @@ export class FileActionController {
         return '<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="M12 16V4"/><path d="m7 9 5-5 5 5"/><path d="M5 20h14"/></svg>';
       case 'base':
         return '<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="M7 4h7l5 5v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/><path d="M14 4v5h5"/><path d="M8 13h8"/><path d="M8 17h6"/><path d="M8 9h3"/></svg>';
+      case 'canvas':
       case 'drawio':
       case 'plantuml':
       case 'structurizr':
@@ -918,6 +949,32 @@ export class FileActionController {
     });
   }
 
+  handleNewCanvas({ parentDir = '' } = {}) {
+    const context = this.getCreateContext(parentDir);
+    this.openActionDialog({
+      title: 'Create canvas',
+      copy: 'Create a canvas for connected notes, files, links, and groups.',
+      label: `Canvas ${context.inputLabelSuffix}`,
+      hint: `${context.hintPrefix} ".canvas" is added automatically.`,
+      note: context.note,
+      placeholder: context.normalizedParentDir ? 'ideas' : 'diagrams/ideas',
+      submitLabel: 'Create canvas',
+      emptyMessage: 'Canvas path is required',
+      onSubmit: (value) => {
+        const normalizedPath = normalizeVaultPathInput(value);
+        if (!normalizedPath) {
+          this.showToast('Canvas path is required');
+          return false;
+        }
+        const filePath = ensureVaultExtension(composeVaultChildPath(context.normalizedParentDir, normalizedPath), '.canvas');
+        return this.createVaultFile(filePath, '{"nodes":[],"edges":[]}\n', {
+          errorMessage: 'Failed to create canvas',
+          openAfterCreate: true,
+        });
+      },
+    });
+  }
+
   handleNewDrawing({ parentDir = '' } = {}) {
     const context = this.getCreateContext(parentDir);
 

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

@@ -1,4 +1,3 @@
-import { isImageAttachmentFilePath } from '../../domain/file-kind.js';
 import { FileActionController } from './file-action-controller.js';
 import { FileTreeState } from './file-tree-state.js';
 import { FileExplorerView } from './file-explorer-view.js';
@@ -143,7 +142,7 @@ export class FileExplorerController {
   }
 
   get flatDocumentFiles() {
-    return this.state.flatFiles.filter((path) => !isImageAttachmentFilePath(path));
+    return this.state.flatDocumentFiles;
   }
 
   renderTree({

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

@@ -4,6 +4,8 @@ import {
   stripVaultFileExtension,
 } from '../../domain/file-kind.js';
 import { escapeHtml } from '../domain/vault-utils.js';
+import { findFuzzyMatch } from '../domain/file-search.js';
+import { getActiveVaultId } from '../domain/runtime-paths.js';
 import { getVaultPathLeaf, getVaultPathParent } from '../domain/vault-paths.js';
 import { buttonClassNames } from './components/ui/button.js';
 
@@ -43,9 +45,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;
 }
@@ -117,17 +127,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);
@@ -287,8 +297,13 @@ export class FileExplorerView {
     }
     item.classList.add('is-dragging');
     if (event.dataTransfer) {
-      event.dataTransfer.effectAllowed = 'move';
+      event.dataTransfer.effectAllowed = this.dragSource.type === 'file' ? 'copyMove' : 'move';
       event.dataTransfer.setData('text/plain', item.dataset.path);
+      if (this.dragSource.type === 'file') {
+        event.dataTransfer.setData('application/x-collabmd-vault-file', JSON.stringify({
+          path: item.dataset.path, vaultId: getActiveVaultId() || '',
+        }));
+      }
     }
   }
 
@@ -1093,6 +1108,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 });
@@ -1184,6 +1200,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?.();
@@ -1203,6 +1220,13 @@ 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();

package/src/client/presentation/file-icon-svg.js

@@ -16,7 +16,7 @@ export function getVaultFileIconSvg(filePath, {
     return createIcon(iconClass, '<path d="M7 4h7l5 5v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/><path d="M14 4v5h5"/><path d="M8 13h8"/><path d="M8 17h6"/><path d="M8 9h3"/>');
   }
 
-  if (kind === 'drawio' || kind === 'plantuml' || kind === 'structurizr') {
+  if (kind === 'canvas' || kind === 'drawio' || kind === 'plantuml' || kind === 'structurizr') {
     return createIcon(iconClass, '<rect x="3" y="4" width="7" height="6" rx="1"/><rect x="14" y="4" width="7" height="6" rx="1"/><rect x="8.5" y="14" width="7" height="6" rx="1"/><path d="M10 7h4"/><path d="M17.5 10v2.5"/><path d="M6.5 10v2.5"/><path d="M6.5 12.5h11"/>');
   }
 

package/src/client/presentation/file-tree-state.js

@@ -1,6 +1,7 @@
+import { isImageAttachmentFilePath } from '../../domain/file-kind.js';
 import { normalizeVaultPathInput } from '../domain/vault-paths.js';
 
-function flattenTree(nodes, files = [], searchEntries = [], fileEntries = []) {
+export function flattenTree(nodes, files = [], searchEntries = [], fileEntries = []) {
   for (const node of nodes) {
     if (!node?.path || !node?.type) {
       continue;
@@ -78,6 +79,7 @@ export class FileTreeState {
   constructor() {
     this.tree = [];
     this.flatFiles = [];
+    this.flatDocumentFiles = [];
     this.flatFileEntries = [];
     this.flatSearchEntries = [];
     this.activeFilePath = null;
@@ -89,6 +91,7 @@ export class FileTreeState {
     this.tree = Array.isArray(tree) ? tree : [];
     const flattened = flattenTree(this.tree, [], [], []);
     this.flatFiles = flattened.files;
+    this.flatDocumentFiles = flattened.files.filter((path) => !isImageAttachmentFilePath(path));
     this.flatFileEntries = flattened.fileEntries;
     this.flatSearchEntries = flattened.searchEntries;
   }

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

@@ -40,10 +40,6 @@ export function clampImageLightboxOffset(offset, {
   return Math.min(Math.max(numericOffset, -overflow), overflow);
 }
 
-export function isImageLightboxWheelZoomGesture(event) {
-  return Boolean(event?.ctrlKey);
-}
-
 export class ImageLightboxController {
   constructor({
     previewElement,
@@ -508,7 +504,7 @@ export class ImageLightboxController {
         return;
       }
 
-      if (isImageLightboxWheelZoomGesture(event)) {
+      if (event.ctrlKey) {
         event.preventDefault();
         this.zoomBy(event.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP);
         return;