collabmd 0.1.45 → 0.1.47

package/src/client/app/index.html

@@ -103,14 +103,16 @@
         </div>
         <div class="sidebar-search" id="fileSearch">
           <input
-            type="text"
+            type="search"
             class="ui-input sidebar-search-input"
             id="fileSearchInput"
-            placeholder="Search files..."
+            placeholder="Filter files by name or path…"
             autocomplete="off"
             spellcheck="false"
-            aria-label="Search files"
+            aria-label="Filter files by name or path"
+            aria-describedby="fileSearchStatus"
           >
+          <div class="sidebar-search-status hidden" id="fileSearchStatus" role="status" aria-live="polite"></div>
         </div>
         <div class="sidebar-search hidden" id="gitSearch">
           <input
@@ -357,6 +359,18 @@
                 <span class="ui-toolbar-button-label">Search files</span>
               </button>
 
+              <button class="ui-button ui-button--ghost ui-button--toolbar ui-button--toggle toolbar-vim-button" id="toggleVimModeBtn" aria-label="Enable Vim keybindings" aria-pressed="false" title="Enable Vim keybindings">
+                <span class="toolbar-vim-icon" aria-hidden="true">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="3" y="4" width="18" height="16" rx="2"></rect>
+                    <path d="m7 9 3 3-3 3"></path>
+                    <path d="M13 15h4"></path>
+                  </svg>
+                </span>
+                <span class="ui-toolbar-button-label">Vim</span>
+                <span class="ui-pill-badge ui-pill-badge--muted toolbar-vim-state" id="vimModeToggleLabel">Off</span>
+              </button>
+
               <details class="toolbar-overflow-group hidden" id="exportMenuGroup">
                 <summary class="ui-button ui-button--ghost ui-button--toolbar toolbar-overflow-group-toggle" aria-label="Export options" title="Export">
                   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
@@ -368,6 +382,14 @@
                   <span class="ui-toolbar-button-label">Export</span>
                 </summary>
                 <div class="toolbar-overflow-submenu">
+                  <button class="ui-button ui-button--ghost ui-button--toolbar" id="exportHtmlBtn" aria-label="Export HTML" title="Export HTML">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                      <path d="m8 9-3 3 3 3"></path>
+                      <path d="m16 9 3 3-3 3"></path>
+                      <path d="m14 5-4 14"></path>
+                    </svg>
+                    <span class="ui-toolbar-button-label">Export HTML</span>
+                  </button>
                   <button class="ui-button ui-button--ghost ui-button--toolbar" id="exportDocxBtn" aria-label="Export DOCX" title="Export DOCX">
                     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                       <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
@@ -725,10 +747,10 @@
             <circle cx="11" cy="11" r="8"></circle>
             <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
           </svg>
-          <input type="text" class="qs-input" id="quickSwitcherInput" placeholder="Search files..." aria-label="Search files" aria-controls="quickSwitcherResults" aria-describedby="quickSwitcherHint quickSwitcherScope" autocomplete="off" spellcheck="false">
+          <input type="text" class="qs-input" id="quickSwitcherInput" role="combobox" placeholder="Search files..." aria-label="Search files" aria-controls="quickSwitcherResults" aria-describedby="quickSwitcherHint quickSwitcherScope" aria-autocomplete="list" aria-expanded="false" autocomplete="off" spellcheck="false">
           <kbd class="qs-kbd">esc</kbd>
         </div>
-        <div class="qs-scope hidden" id="quickSwitcherScope" role="note" aria-hidden="true">Exact, case-insensitive text in Markdown, Base, Mermaid, PlantUML, and Draw.io files. Images and Excalidraw are excluded.</div>
+        <div class="qs-scope hidden" id="quickSwitcherScope" role="note" aria-hidden="true">Exact, case-insensitive text in Markdown, Base, Mermaid, PlantUML, Draw.io, and Excalidraw files. Images are excluded.</div>
         <div class="qs-results" id="quickSwitcherResults" role="listbox" aria-label="Search results" aria-busy="false" tabindex="-1"></div>
         <div class="qs-hint" id="quickSwitcherHint" role="status" aria-live="polite" aria-atomic="true">Type to search files</div>
         <div class="qs-footer">

package/src/client/application/app-shell/comments-feature.js

@@ -1,4 +1,7 @@
-import { getVaultFileKind, supportsCommentsForFilePath } from '../../../domain/file-kind.js';
+import {
+  getVaultFileKind,
+  supportsCommentsForFilePath,
+} from '../../../domain/file-kind.js';
 
 export const commentsFeature = {
   createCommentThread(payload) {
@@ -82,19 +85,20 @@ export const commentsFeature = {
       return;
     }
 
+    const isDiagram = getVaultFileKind(filePath) === 'excalidraw';
     const line = Number.isFinite(anchor?.startLine) ? anchor.startLine : null;
-    this._pendingCommentOverviewFocus = {
-      attempts: 0,
-      filePath,
-      line,
-      threadId,
-    };
+    if (!isDiagram) {
+      this._pendingCommentOverviewFocus = {
+        attempts: 0,
+        filePath,
+        line,
+        threadId,
+      };
+    }
     this.setSidebarTab('comments');
     this.setSidebarVisibility(true);
     this.workspaceRouteController?.preserveSidebarTabForNextFileRoute?.(filePath);
-    this.navigation.navigateToFile(filePath, {
-      line,
-    });
+    this.navigation.navigateToFile(filePath, isDiagram ? undefined : { line });
 
     if (this.currentFilePath !== filePath || !this.session) {
       await this.workspaceRouteController.openFile(filePath);
@@ -102,7 +106,14 @@ export const commentsFeature = {
 
     this.setSidebarTab('comments');
     this.setSidebarVisibility(true);
+    if (isDiagram) {
+      this.excalidrawEmbed?.openCommentThread?.(filePath, threadId);
+      this.closeSidebarOnMobile?.();
+      return;
+    }
+
     this.focusPendingCommentOverviewThread();
+    this.closeSidebarOnMobile?.();
   },
 
   focusPendingCommentOverviewThread() {
@@ -119,14 +130,11 @@ export const commentsFeature = {
     if (didFocus) {
       this._pendingCommentOverviewFocus = null;
       this.setSidebarTab('comments');
-      this.setSidebarVisibility(true);
       return true;
     }
 
     if (pending.attempts >= 8) {
       this._pendingCommentOverviewFocus = null;
-      this.setSidebarTab('comments');
-      this.setSidebarVisibility(true);
       return false;
     }
 

package/src/client/application/app-shell/git-feature.js

@@ -446,6 +446,18 @@ export const gitFeature = {
       showToast: true,
     });
 
+    const structurizrDependencyChanged = [
+      ...workspaceChange.changedPaths,
+      ...workspaceChange.deletedPaths,
+      ...workspaceChange.renamedPaths.flatMap((entry) => [entry.oldPath, entry.newPath]),
+    ].some((pathValue) => /(?:\.dsl$|(?:^|\/)workspace\.json$)/iu.test(pathValue));
+    if (this.currentFilePath && this.isStructurizrWorkspaceFile?.(this.currentFilePath) && structurizrDependencyChanged) {
+      this.structurizrPreview?.queueSync({
+        filePath: this.currentFilePath,
+        source: this.session?.getText?.() ?? '',
+      });
+    }
+
     if (
       event.origin === 'filesystem'
       && this.currentFilePath
@@ -531,8 +543,8 @@ export const gitFeature = {
           this.toastController.show(this.formatPullBackupToast(result.pullBackup), 5000);
         }
       } catch (error) {
-        if (error?.code === 'pull_diverged_ff_only') {
-          this.toastController.show('Cannot pull because local and remote commits have diverged. Fast-forward only pull is not possible.', 5000);
+        if (error?.code === 'pull_conflicted_commits') {
+          this.toastController.show('Cannot pull automatically because local and remote commits conflict.', 5000);
           return;
         }
 

package/src/client/application/app-shell/presence-feature.js

@@ -13,8 +13,9 @@ function getConnectedPresenceState(context) {
   const isDrawioRoute = Boolean(context.currentFilePath && context.isDrawioFile?.(context.currentFilePath));
   const isExcalidrawRoute = Boolean(context.currentFilePath && context.isExcalidrawFile?.(context.currentFilePath));
   const isImageRoute = Boolean(context.currentFilePath && context.isImageFile?.(context.currentFilePath));
+  const isPdfRoute = Boolean(context.currentFilePath && context.isPdfFile?.(context.currentFilePath));
   const shouldUseLobbyState = !hasEditorSession
-    && (!context.currentFilePath || isDrawioRoute || isExcalidrawRoute || isImageRoute);
+    && (!context.currentFilePath || isDrawioRoute || isExcalidrawRoute || isImageRoute || isPdfRoute);
   return shouldUseLobbyState
     ? context.lobby?.getConnectionState?.() ?? context.connectionState
     : context.connectionState;
@@ -357,7 +358,7 @@ export const presenceFeature = {
     }
 
     if (user.currentFile && user.currentFile !== this.currentFilePath) {
-      this.navigation.navigateToFile(user.currentFile);
+      this.navigation.navigateToFile(user.currentFile, { preserveFollow: true });
       return;
     }
 
@@ -403,7 +404,7 @@ export const presenceFeature = {
     }
 
     if (user.currentFile && user.currentFile !== this.currentFilePath) {
-      this.navigation.navigateToFile(user.currentFile);
+      this.navigation.navigateToFile(user.currentFile, { preserveFollow: true });
       return;
     }
 

package/src/client/application/app-shell/ui-feature-shell.js

@@ -5,6 +5,12 @@ import { createFileRouteHash, isCollabMdHashRoute } from '../../domain/hash-rout
 const VERSION_RELOAD_TOAST_DURATION_MS = 0;
 const PREVIEW_ROUTE_ANCHOR_STABILIZE_MS = 2000;
 const PREVIEW_ROUTE_ANCHOR_MAX_APPLICATIONS = 8;
+const PREVIEW_CODE_COPY_ICON = `
+  <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" focusable="false">
+    <rect x="8" y="8" width="11" height="11" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
+    <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  </svg>
+`;
 const PREVIEW_HEADING_LINK_ICON = `
   <svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true" focusable="false">
     <path d="M10 13.5 14 9.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
@@ -62,6 +68,7 @@ function initialize() {
   this.syncIdentityManagementUi();
   this.syncCurrentUserName();
   this.syncWrapToggle();
+  this.syncVimModeToggle();
   this.syncToolbarOverflowVisibility?.();
   this.syncFileHistoryButton({ mode: 'empty' });
   this.renderChat();
@@ -167,6 +174,11 @@ function bindToolbarEvents() {
   this.elements.toolbarSearchButton?.addEventListener('click', openQuickSwitcher);
   this.elements.searchFilesButton?.addEventListener('click', openQuickSwitcher);
 
+  this.elements.exportHtmlButton?.addEventListener('click', () => {
+    void this.handleExportRequest?.('html');
+    this.closeToolbarOverflowMenu?.();
+  });
+
   this.elements.exportDocxButton?.addEventListener('click', () => {
     void this.handleExportRequest?.('docx');
     this.closeToolbarOverflowMenu?.();
@@ -245,6 +257,13 @@ function bindDialogEvents() {
 
 /** @this {UiShellContext} */
 function bindEvents() {
+  const stopFollowing = () => this.stopFollowingUser?.();
+  this.elements.editorContainer?.addEventListener('pointerdown', stopFollowing);
+  this.elements.editorContainer?.addEventListener('keydown', stopFollowing);
+  this.elements.editorContainer?.addEventListener('wheel', stopFollowing, { passive: true });
+  this.elements.previewContainer?.addEventListener('pointerdown', stopFollowing);
+  this.elements.previewContainer?.addEventListener('wheel', stopFollowing, { passive: true });
+
   this.elements.emptyStateNewFileBtn?.addEventListener('click', () => {
     this.fileExplorer.actionController.openRootCreateMenu({
       anchor: this.elements.emptyStateNewFileBtn,
@@ -297,6 +316,10 @@ function bindEvents() {
     this.toggleLineWrapping();
   });
 
+  this.elements.toggleVimModeButton?.addEventListener('click', () => {
+    this.toggleVimMode();
+  });
+
   this.elements.userCount?.addEventListener('click', (event) => {
     event.preventDefault();
     this.togglePresencePanel?.();
@@ -313,7 +336,8 @@ function bindEvents() {
   });
 
   this.elements.toolbarOverflowMenu?.addEventListener('click', (event) => {
-    if (event.target instanceof Element && event.target.closest('button')) {
+    const button = event.target instanceof Element ? event.target.closest('button') : null;
+    if (button && button !== this.elements.toggleVimModeButton) {
       this.closeToolbarOverflowMenu();
     }
   });
@@ -394,6 +418,10 @@ function handleDocumentPointerDown(event) {
 
 /** @this {UiShellContext} */
 function handleDocumentKeydown(event) {
+  if (event.key === 'Escape') {
+    this.stopFollowingUser?.();
+  }
+
   if (event.key === 'Escape' && this.toolbarOverflowOpen) {
     this.closeToolbarOverflowMenu();
     return;
@@ -545,6 +573,38 @@ async function copyPreviewHeadingLink(anchorId) {
   }
 }
 
+/** @this {UiShellContext} */
+async function copyPreviewCodeBlock(button) {
+  const code = button?.closest('.preview-code-block')?.querySelector(':scope > pre > code');
+  if (!(code instanceof HTMLElement)) {
+    return;
+  }
+
+  try {
+    await copyTextToClipboard(code.textContent);
+    this.toastController.show('Code copied');
+  } catch {
+    this.toastController.show('Failed to copy code');
+  }
+}
+
+/** @this {UiShellContext} */
+function syncPreviewCodeCopyButtons() {
+  this.elements.previewContent?.querySelectorAll('pre > code').forEach((code) => {
+    const pre = code.parentElement;
+    const wrapper = document.createElement('div');
+    wrapper.className = 'preview-code-block';
+    wrapper.innerHTML = `
+      <div class="preview-code-actions">
+        <button type="button" class="ui-button ui-button--secondary ui-button--compact preview-code-copy-button" aria-label="Copy code" title="Copy code">
+          ${PREVIEW_CODE_COPY_ICON}<span data-preview-code-copy-label>Copy</span>
+        </button>
+      </div>`;
+    pre.replaceWith(wrapper);
+    wrapper.append(pre);
+  });
+}
+
 /** @this {UiShellContext} */
 function syncPreviewHeadingLinkButtons() {
   const headings = this.elements.previewContent?.querySelectorAll?.('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]') ?? [];
@@ -633,6 +693,13 @@ function handlePreviewContentClick(event) {
     return;
   }
 
+  const codeCopyButton = event.target.closest('button.preview-code-copy-button');
+  if (codeCopyButton instanceof HTMLButtonElement) {
+    event.preventDefault();
+    void this.copyPreviewCodeBlock(codeCopyButton);
+    return;
+  }
+
   const headingLinkButton = event.target.closest('button.preview-heading-link-button[data-preview-heading-anchor]');
   if (headingLinkButton instanceof HTMLButtonElement) {
     event.preventDefault();
@@ -731,12 +798,18 @@ function toggleToolbarOverflowMenu() {
 /** @this {UiShellContext} */
 function handleThemeChange(theme) {
   this.previewRenderer.applyTheme(theme);
-  if (!this.isExcalidrawFile(this.currentFilePath) && !this.isImageFile?.(this.currentFilePath)) {
+  if (
+    !this.isExcalidrawFile(this.currentFilePath)
+    && !this.isImageFile?.(this.currentFilePath)
+    && !this.isPdfFile?.(this.currentFilePath)
+    && !this.isStructurizrWorkspaceFile?.(this.currentFilePath)
+  ) {
     this.previewRenderer.queueRender();
   }
   this.session?.applyTheme(theme);
   this.excalidrawEmbed.updateTheme(theme);
   this.drawioEmbed.updateTheme(theme);
+  this.pdfPreview?.setTheme(theme);
 }
 
 /** @this {UiShellContext} */
@@ -773,6 +846,35 @@ function getStoredLineWrapping() {
   return this.preferences.getLineWrappingEnabled();
 }
 
+/** @this {UiShellContext} */
+function toggleVimMode() {
+  const currentState = this.session?.isVimModeEnabled?.() ?? this.getStoredVimMode();
+  const nextState = !currentState;
+
+  this.session?.setVimMode?.(nextState);
+  this.preferences.setVimModeEnabled(nextState);
+  this.syncVimModeToggle(nextState);
+}
+
+/** @this {UiShellContext} */
+function getStoredVimMode() {
+  return this.preferences.getVimModeEnabled();
+}
+
+/** @this {UiShellContext} */
+function syncVimModeToggle(state) {
+  const enabled = state ?? this.session?.isVimModeEnabled?.() ?? this.getStoredVimMode();
+  const label = this.elements.vimModeToggleLabel;
+  const button = this.elements.toggleVimModeButton;
+  const nextLabel = enabled ? 'On' : 'Off';
+  if (label) label.textContent = nextLabel;
+  if (button) {
+    button.setAttribute('aria-label', `${enabled ? 'Disable' : 'Enable'} Vim keybindings`);
+    button.setAttribute('title', `${enabled ? 'Disable' : 'Enable'} Vim keybindings`);
+    button.setAttribute('aria-pressed', String(enabled));
+  }
+}
+
 /** @this {UiShellContext} */
 function syncWrapToggle(state) {
   const enabled = state ?? this.session?.isLineWrappingEnabled() ?? this.getStoredLineWrapping();
@@ -833,9 +935,11 @@ export const uiFeatureShellMethods = {
   bindEvents,
   clearInitialFileBootstrap,
   closeToolbarOverflowMenu,
+  copyPreviewCodeBlock,
   copyPreviewHeadingLink,
   createPreviewHeadingLinkUrl,
   getStoredLineWrapping,
+  getStoredVimMode,
   handleConnectionChange,
   handleDocumentKeydown,
   handleDocumentPointerDown,
@@ -853,10 +957,13 @@ export const uiFeatureShellMethods = {
   setToolbarOverflowOpen,
   showEditorLoadError,
   showEditorLoading,
+  syncPreviewCodeCopyButtons,
   syncPreviewHeadingLinkButtons,
   syncVisualViewportBounds,
   syncToolbarOverflowVisibility,
+  syncVimModeToggle,
   syncWrapToggle,
   toggleToolbarOverflowMenu,
   toggleLineWrapping,
+  toggleVimMode,
 };

package/src/client/application/app-shell/ui-feature-toolbar.js

@@ -1,4 +1,5 @@
 import { isMarkdownFilePath } from '../../../domain/file-kind.js';
+import { pickFiles } from '../../browser-utils.js';
 import {
   getMarkdownBlockActionLabel,
   getMarkdownBlockMenuActions,
@@ -91,7 +92,6 @@ function renderMarkdownToolbarMarkup(activeAction) {
  * @property {{ show(message: string): void }} toastController
  * @property {{ uploadImageAttachment(payload: { file: File, fileName: string, sourcePath: string }): Promise<{ markdown?: string, path?: string }>} } vaultApiClient
  * @property {{ applyMarkdownToolbarAction(action: string): boolean, insertText(text: string): void, runEditorCommand?(commandId: string): boolean } | null} session
- * @property {() => Promise<File | null>} pickImageFile
  * @property {(file: File) => Promise<boolean>} handleEditorImageInsert
  * @property {() => Promise<void>} handleToolbarImageInsert
  */
@@ -395,7 +395,7 @@ function runEditorCommand(commandId) {
 
 /** @this {UiToolbarContext} */
 async function handleToolbarImageInsert() {
-  const file = await this.pickImageFile();
+  const [file] = await pickFiles({ accept: IMAGE_FILE_PICKER_ACCEPT });
   if (!file) {
     return;
   }
@@ -403,55 +403,6 @@ async function handleToolbarImageInsert() {
   await this.handleEditorImageInsert(file);
 }
 
-/** @this {UiToolbarContext} */
-function pickImageFile() {
-  return new Promise((resolve) => {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = IMAGE_FILE_PICKER_ACCEPT;
-    input.style.position = 'fixed';
-    input.style.left = '-9999px';
-    document.body.appendChild(input);
-    let settled = false;
-    let focusTimer = null;
-
-    const cleanup = (value) => {
-      if (settled) {
-        return;
-      }
-
-      settled = true;
-      if (focusTimer) {
-        window.clearTimeout(focusTimer);
-      }
-      window.removeEventListener('focus', handleWindowFocus);
-      input.remove();
-      resolve(value);
-    };
-
-    const handleWindowFocus = () => {
-      focusTimer = window.setTimeout(() => {
-        if (settled || input.files?.length) {
-          return;
-        }
-
-        cleanup(null);
-      }, 250);
-    };
-
-    input.addEventListener('change', () => {
-      cleanup(input.files?.[0] ?? null);
-    }, { once: true });
-
-    input.addEventListener('cancel', () => {
-      cleanup(null);
-    }, { once: true });
-
-    window.addEventListener('focus', handleWindowFocus, { once: true });
-    input.click();
-  });
-}
-
 /** @this {UiToolbarContext} */
 async function handleEditorImageInsert(file) {
   if (!this.session || !isMarkdownFilePath(this.currentFilePath)) {
@@ -526,7 +477,6 @@ export const uiFeatureToolbarMethods = {
   openMarkdownBlockMenu,
   positionMarkdownBlockMenu,
   renderMarkdownBlockMenuPopover,
-  pickImageFile,
   renderMarkdownToolbar,
   runEditorCommand,
   setActiveMarkdownBlockAction,

package/src/client/application/app-shell/workspace-feature.js

@@ -5,7 +5,9 @@ import {
   isExcalidrawFilePath,
   isImageAttachmentFilePath,
   isMermaidFilePath,
+  isPdfFilePath,
   isPlantUmlFilePath,
+  isStructurizrFilePath,
   stripVaultFileExtension,
 } from '../../../domain/file-kind.js';
 
@@ -14,8 +16,10 @@ export const workspaceFeature = {
   isDrawioFile: isDrawioFilePath,
   isExcalidrawFile: isExcalidrawFilePath,
   isImageFile: isImageAttachmentFilePath,
+  isPdfFile: isPdfFilePath,
   isMermaidFile: isMermaidFilePath,
   isPlantUmlFile: isPlantUmlFilePath,
+  isStructurizrWorkspaceFile: isStructurizrFilePath,
 
   getPreviewSource() {
     const previewDocument = this.getStaticPreviewDocument?.();
@@ -61,7 +65,7 @@ export const workspaceFeature = {
 
   supportsFileHistory(filePath) {
     const kind = getVaultFileKind(filePath);
-    return kind !== null && kind !== 'image';
+    return kind !== null && kind !== 'image' && kind !== 'pdf';
   },
 
   getDisplayName(filePath) {

package/src/client/application/app-shell-elements.js

@@ -39,6 +39,7 @@ export function bindAppShellElements(doc = document) {
     editorFindButton: doc.getElementById('editorFindBtn'),
     editorContainer: doc.getElementById('editorContainer'),
     exportDocxButton: doc.getElementById('exportDocxBtn'),
+    exportHtmlButton: doc.getElementById('exportHtmlBtn'),
     exportMenuGroup: doc.getElementById('exportMenuGroup'),
     exportPdfButton: doc.getElementById('exportPdfBtn'),
     markdownToolbar: doc.getElementById('markdownToolbar'),
@@ -64,9 +65,11 @@ export function bindAppShellElements(doc = document) {
     shareButton: doc.getElementById('shareBtn'),
     toastContainer: doc.getElementById('toastContainer'),
     toggleWrapButton: doc.getElementById('toggleWrapBtn'),
+    toggleVimModeButton: doc.getElementById('toggleVimModeBtn'),
     userAvatars: doc.getElementById('userAvatars'),
     userCount: doc.getElementById('userCount'),
     wrapToggleLabel: doc.getElementById('wrapToggleLabel'),
+    vimModeToggleLabel: doc.getElementById('vimModeToggleLabel'),
     activeFileName: doc.getElementById('activeFileName'),
     sidebarToggle: doc.getElementById('sidebarToggle'),
     sidebarClose: doc.getElementById('sidebarClose'),

package/src/client/application/pdf-preview-controller.js

@@ -0,0 +1,75 @@
+import { resolveApiUrl } from '../domain/runtime-paths.js';
+
+const READ_ONLY_CATEGORIES = Object.freeze([
+  'annotation',
+  'document-capture',
+  'document-close',
+  'document-open',
+  'document-print',
+  'document-protect',
+  'form',
+  'history',
+  'insert',
+  'panel-comment',
+  'redaction',
+  'rotate',
+]);
+
+export class PdfPreviewController {
+  constructor({ getTheme = () => 'dark', loadEmbedPdf } = {}) {
+    this.getTheme = getTheme;
+    this.loadEmbedPdf = loadEmbedPdf ?? (() => import('@embedpdf/snippet'));
+    this.renderToken = 0;
+    this.viewer = null;
+  }
+
+  async render({ filePath, renderHost }) {
+    this.cancel();
+    const token = this.renderToken;
+    const viewerHost = document.createElement('div');
+    viewerHost.className = 'pdf-file-preview-viewer';
+    viewerHost.setAttribute('aria-label', `${String(filePath).split('/').pop() || filePath} PDF preview`);
+    renderHost.replaceChildren(viewerHost);
+
+    try {
+      const { default: EmbedPDF, LockModeType, ZoomMode } = await this.loadEmbedPdf();
+      if (token !== this.renderToken || !viewerHost.isConnected) return;
+
+      const viewer = EmbedPDF.init({
+        type: 'container',
+        target: viewerHost,
+        src: resolveApiUrl(`/download/file?path=${encodeURIComponent(filePath)}`),
+        annotations: { locked: { type: LockModeType.All } },
+        disabledCategories: READ_ONLY_CATEGORIES,
+        fontFallback: null,
+        fonts: { signature: null, ui: null },
+        stamp: { defaultLibrary: false, manifests: [] },
+        tabBar: 'never',
+        theme: { preference: this.getTheme() },
+        wasmUrl: new URL('@embedpdf/pdfium/pdfium.wasm', import.meta.url).toString(),
+        zoom: {
+          defaultZoomLevel: ZoomMode.FitWidth,
+          maxZoom: 2,
+          minZoom: 0.5,
+          zoomStep: 0.25,
+        },
+      });
+
+      this.viewer = viewer;
+    } catch {
+      if (token !== this.renderToken) return;
+      viewerHost.classList.add('pdf-file-preview-error');
+      viewerHost.textContent = 'This PDF could not be rendered in the browser.';
+    }
+  }
+
+  setTheme(theme) {
+    this.viewer?.setTheme?.(theme);
+  }
+
+  cancel() {
+    this.renderToken += 1;
+    this.viewer?.remove();
+    this.viewer = null;
+  }
+}

package/src/client/application/preview-render-compiler.js

@@ -9,6 +9,9 @@ import { extractYamlFrontmatter } from '../../domain/yaml-frontmatter.js';
 import { renderFrontmatterBlock } from './markdown-frontmatter.js';
 import { analyzeMarkdownComplexity } from './preview-render-profile.js';
 
+hljs.registerAliases(['cql', 'mariadb', 'mssql', 'mysql', 'plsql', 'sqlite'], { languageName: 'sql' });
+hljs.registerAliases(['ecmascript', 'node'], { languageName: 'javascript' });
+
 const DIRECT_VIDEO_MIME_TYPES = Object.freeze({
   '.mp4': 'video/mp4',
   '.ogg': 'video/ogg',

package/src/client/application/quick-switcher-loader.js

@@ -27,7 +27,7 @@ export async function ensureQuickSwitcherInstance(host) {
       getSearchConfig: () => host.runtimeConfig.search ?? {},
       onFileSelect: (filePath) => host.workspaceRouteController.handleFileSelection(filePath, {
         closeSidebarOnMobile: true,
-        revealInTree: true,
+        revealInTree: !host.isMobileViewport(),
       }),
       onTextMatchSelect: (match) => {
         if (!match?.file) {