collabmd 0.1.48 → 0.1.51

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

@@ -132,7 +132,7 @@ export const gitFeature = {
 
     button.classList.remove('hidden');
     if (mode === 'history-preview') {
-      label.textContent = 'Back to History';
+      label.textContent = 'Back to history';
       button.setAttribute('aria-label', 'Back to file history');
       button.title = 'Back to file history';
       return;
@@ -326,6 +326,10 @@ export const gitFeature = {
           return await this.gitApiClient.stageFile({ path: payload.path, requestId });
         case 'unstage':
           return await this.gitApiClient.unstageFile({ path: payload.path, requestId });
+        case 'stage-all':
+          return await this.gitApiClient.stageAll({ requestId });
+        case 'unstage-all':
+          return await this.gitApiClient.unstageAll({ requestId });
         case 'push':
           return await this.gitApiClient.pushBranch({ requestId });
         case 'pull':
@@ -534,6 +538,20 @@ export const gitFeature = {
     });
   },
 
+  async stageAllGitFiles() {
+    await this.runGitActionWithStatus('Staging all changes...', async () => {
+      const result = await this.postGitAction('stage-all', {});
+      await this.finalizeGitAction({ action: 'stage-all', preferredScope: 'staged', result });
+    });
+  },
+
+  async unstageAllGitFiles() {
+    await this.runGitActionWithStatus('Unstaging all changes...', async () => {
+      const result = await this.postGitAction('unstage-all', {});
+      await this.finalizeGitAction({ action: 'unstage-all', preferredScope: 'working-tree', result });
+    });
+  },
+
   async pushGitBranch() {
     await this.runGitActionWithStatus('Pushing branch...', async () => {
       try {
@@ -595,7 +613,7 @@ export const gitFeature = {
     }
     this.elements.gitResetFileName.value = filePath;
     if (this.elements.gitResetSubmit) {
-      this.elements.gitResetSubmit.textContent = 'Reset File';
+      this.elements.gitResetSubmit.textContent = 'Reset file';
     }
     this.elements.gitResetSubmit?.toggleAttribute('disabled', false);
 
@@ -619,10 +637,10 @@ export const gitFeature = {
 
     submit?.toggleAttribute('disabled', true);
     if (submit) {
-      submit.textContent = 'Resetting...';
+      submit.textContent = 'Resetting…';
     }
     try {
-      await this.runGitActionWithStatus('Resetting file...', async () => {
+      await this.runGitActionWithStatus('Resetting file…', async () => {
         const result = await this.postGitAction('reset-file', { path: filePath });
         await this.finalizeGitAction({
           action: 'reset',
@@ -636,7 +654,7 @@ export const gitFeature = {
       this.toastController.show(error.message || 'Failed to reset file');
     } finally {
       if (submit) {
-        submit.textContent = 'Reset File';
+        submit.textContent = 'Reset file';
       }
       submit?.toggleAttribute('disabled', false);
     }

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

@@ -84,12 +84,10 @@ export const presenceFeature = {
     const effectiveConnectionState = getConnectedPresenceState(this);
     const hasUsers = this.globalUsers.length > 0;
     if (effectiveConnectionState.status !== 'connected') {
-      this.presencePanelOpen = false;
+      this.closePresencePanel();
     }
 
     badge.type = 'button';
-    badge.setAttribute('aria-controls', 'presencePanel');
-    badge.setAttribute('aria-expanded', String(this.presencePanelOpen));
     badge.classList.toggle('is-active', this.presencePanelOpen);
 
     if (effectiveConnectionState.status === 'connected') {
@@ -173,12 +171,9 @@ export const presenceFeature = {
       overflow.className = 'user-avatar user-avatar-button user-avatar-overflow-trigger';
       overflow.style.backgroundColor = 'var(--color-surface-dynamic)';
       overflow.style.color = 'var(--color-text-muted)';
-      overflow.setAttribute('aria-controls', 'presencePanel');
-      overflow.setAttribute('aria-expanded', String(this.presencePanelOpen));
+      overflow.setAttribute('popovertarget', 'presencePanel');
       overflow.setAttribute('aria-label', `Show ${visibleUsers.length} online users`);
-      overflow.setAttribute('data-presence-panel-trigger', 'true');
       overflow.title = `Show ${visibleUsers.length} online users`;
-      overflow.addEventListener('click', () => this.openPresencePanel());
       const overflowLabel = document.createElement('span');
       overflowLabel.className = 'user-avatar-initial';
       overflowLabel.textContent = `+${visibleUsers.length - MAX_INLINE_AVATARS}`;
@@ -194,29 +189,19 @@ export const presenceFeature = {
     }
 
     this.presencePanelOpen = true;
-    this.closeChatPanel?.();
-    this.closeToolbarOverflowMenu?.();
+    if (!this.elements.presencePanel?.matches(':popover-open')) {
+      this.elements.presencePanel?.showPopover();
+    }
     this.renderAvatars();
     this.renderPresence();
   },
 
   closePresencePanel() {
-    if (!this.presencePanelOpen) {
-      return;
+    if (this.elements.presencePanel?.matches(':popover-open')) {
+      this.elements.presencePanel.hidePopover();
     }
-
     this.presencePanelOpen = false;
-    this.renderAvatars();
-    this.renderPresence();
-  },
-
-  togglePresencePanel() {
-    if (this.presencePanelOpen) {
-      this.closePresencePanel();
-      return;
-    }
-
-    this.openPresencePanel();
+    this.renderAvatars?.();
   },
 
   renderPresencePanel() {
@@ -225,8 +210,6 @@ export const presenceFeature = {
     const status = this.elements.presencePanelStatus;
     if (!panel || !list) return;
 
-    panel.classList.toggle('hidden', !this.presencePanelOpen);
-    panel.setAttribute('aria-hidden', String(!this.presencePanelOpen));
     if (!this.presencePanelOpen) {
       return;
     }

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

@@ -1,6 +1,6 @@
 import { getVaultFileKind, supportsBacklinksForFilePath } from '../../../domain/file-kind.js';
 import { isPlainQuickSwitcherShortcut } from '../../domain/keyboard-shortcuts.js';
-import { createFileRouteHash, isCollabMdHashRoute } from '../../domain/hash-routes.js';
+import { createFileRouteHash, isCollabMdHashRoute, isGitHashRouteType } from '../../domain/hash-routes.js';
 
 const VERSION_RELOAD_TOAST_DURATION_MS = 0;
 const PREVIEW_ROUTE_ANCHOR_STABILIZE_MS = 2000;
@@ -48,14 +48,13 @@ const PREVIEW_HEADING_LINK_ICON = `
  */
 
 /** @this {UiShellContext} */
-function initialize() {
+async function initialize() {
+  await this.hostedGateController?.initialize();
   this.initializeExportBridge?.();
   this.renderMarkdownToolbar?.();
   this.initializeVisualViewportBinding?.();
   this.themeController.initialize();
   this.previewRenderer.applyTheme(this.themeController.getTheme());
-  this.previewRenderer.scheduleWorkerPrewarm();
-  this.scheduleEditorSessionPrewarm?.();
   this.outlineController.initialize();
   this.layoutController.initialize();
   this.scrollSyncController.initialize();
@@ -87,17 +86,24 @@ function initialize() {
     this.syncToolbarOverflowVisibility?.();
   });
 
+  if (this.runtimeConfig?.gitEnabled !== false) {
+    this.gitRepoAvailable = true;
+    this.elements.gitSidebarTab?.classList.remove('hidden');
+    this.elements.sidebarTabs?.classList.remove('hidden');
+  }
+
   this.fileExplorerReadyPromise = this.fileExplorer.refresh().then(() => {
     this.fileExplorerReady = true;
     void this.commentsOverview?.refresh?.();
-    if (this.runtimeConfig?.gitEnabled !== false) {
-      void this.gitPanel.refresh({ force: true });
+    if (isGitHashRouteType(this.navigation.getHashRoute().type)) {
+      void this.gitPanel.refresh({ force: false });
     }
     if (this.isTabActive) {
       return this.workspaceRouteController.handleHashChange();
     }
     return undefined;
   });
+
 }
 
 /** @this {UiShellContext} */
@@ -247,7 +253,7 @@ function bindDialogEvents() {
       this.elements.gitResetFileName.value = '';
     }
     if (this.elements.gitResetSubmit) {
-      this.elements.gitResetSubmit.textContent = 'Reset File';
+      this.elements.gitResetSubmit.textContent = 'Reset file';
     }
   });
 
@@ -294,13 +300,24 @@ function bindEvents() {
   this.elements.emptyStateSearchBtn?.addEventListener('click', () => {
     void this.toggleQuickSwitcher();
   });
+  this.elements.presencePanel?.addEventListener('toggle', (event) => {
+    this.presencePanelOpen = event.newState === 'open';
+    this.renderAvatars?.();
+    this.renderPresence?.();
+  });
 
-  this.elements.chatToggleButton?.addEventListener('click', () => {
-    this.closePresencePanel?.();
-    this.toggleChatPanel();
-    this.closeToolbarOverflowMenu?.();
+  this.elements.chatPanel?.addEventListener('toggle', (event) => {
+    this.chatIsOpen = event.newState === 'open';
+    if (this.chatIsOpen) {
+      this.chatUnreadCount = 0;
+    }
+    this.renderChat?.({ messagesChanged: this.chatIsOpen, stickToBottom: this.chatIsOpen });
+    if (this.chatIsOpen) {
+      requestAnimationFrame(() => this.elements.chatInput?.focus());
+    }
   });
 
+
   this.elements.chatNotificationButton?.addEventListener('click', () => {
     void this.handleChatNotificationToggle();
   });
@@ -309,9 +326,6 @@ function bindEvents() {
     this.toggleChatNotificationMute();
   });
 
-  this.elements.chatCloseButton?.addEventListener('click', () => {
-    this.closeChatPanel({ restoreFocus: true });
-  });
 
   this.elements.chatForm?.addEventListener('submit', (event) => {
     event.preventDefault();
@@ -341,10 +355,6 @@ function bindEvents() {
     this.toggleVimMode();
   });
 
-  this.elements.userCount?.addEventListener('click', (event) => {
-    event.preventDefault();
-    this.togglePresencePanel?.();
-  });
 
   this.elements.editorFindButton?.addEventListener('click', () => {
     this.runEditorCommand?.('openSearch');
@@ -354,11 +364,6 @@ function bindEvents() {
     void this.formatCurrentDocument();
   });
 
-  this.elements.toolbarOverflowToggle?.addEventListener('click', (event) => {
-    event.preventDefault();
-    this.closePresencePanel?.();
-    this.toggleToolbarOverflowMenu();
-  });
 
   this.elements.toolbarOverflowMenu?.addEventListener('click', (event) => {
     const button = event.target instanceof Element ? event.target.closest('button') : null;
@@ -367,9 +372,23 @@ function bindEvents() {
     }
   });
 
+  this.elements.toolbarOverflowMenu?.addEventListener('toggle', (event) => {
+    if (event.newState === 'closed') {
+      this.elements.toolbarOverflowMenu.querySelectorAll('details[open]').forEach((detail) => {
+        detail.removeAttribute('open');
+      });
+    }
+  });
+
   this.elements.previewContent?.addEventListener('click', (event) => {
     this.handlePreviewContentClick?.(event);
   });
+  this.elements.previewContent?.addEventListener('pointerover', (event) => {
+    this.handlePreviewContentPointerOver?.(event);
+  });
+  this.elements.previewContent?.addEventListener('focusin', (event) => {
+    this.handlePreviewContentPointerOver?.(event);
+  });
 
   this.elements.sidebarToggle?.addEventListener('click', () => {
     this.closeToolbarOverflowMenu();
@@ -399,47 +418,16 @@ function bindEvents() {
     this.setSidebarTab('comments');
   });
 
-  document.addEventListener('pointerdown', (event) => {
-    this.handleDocumentPointerDown(event);
+  this.elements.sidebarTabs?.addEventListener('keydown', (event) => {
+    this.handleSidebarTabsKeydown(event);
   });
 
+
   document.addEventListener('keydown', (event) => {
     this.handleDocumentKeydown(event);
   }, { capture: true });
 }
 
-/** @this {UiShellContext} */
-function handleDocumentPointerDown(event) {
-  this.handleMarkdownToolbarDocumentPointerDown?.(event);
-
-  const target = event.target instanceof Element ? event.target : null;
-
-  if (
-    this.toolbarOverflowOpen
-    && !this.elements.toolbarOverflowMenu?.contains(target)
-    && !this.elements.toolbarOverflowToggle?.contains(target)
-  ) {
-    this.closeToolbarOverflowMenu();
-  }
-
-  if (
-    this.presencePanelOpen
-    && !this.elements.presencePanel?.contains(target)
-    && !target?.closest?.('[data-presence-panel-trigger="true"]')
-  ) {
-    this.closePresencePanel?.();
-  }
-
-  if (!this.chatIsOpen) {
-    return;
-  }
-
-  if (this.elements.chatContainer?.contains(target)) {
-    return;
-  }
-
-  this.closeChatPanel({ restoreFocus: false });
-}
 
 /** @this {UiShellContext} */
 function handleDocumentKeydown(event) {
@@ -447,20 +435,6 @@ function handleDocumentKeydown(event) {
     this.stopFollowingUser?.();
   }
 
-  if (event.key === 'Escape' && this.toolbarOverflowOpen) {
-    this.closeToolbarOverflowMenu();
-    return;
-  }
-
-  if (event.key === 'Escape' && this.presencePanelOpen) {
-    this.closePresencePanel?.();
-    return;
-  }
-
-  if (event.key === 'Escape' && this.chatIsOpen) {
-    this.closeChatPanel({ restoreFocus: true });
-    return;
-  }
 
   if (isPlainQuickSwitcherShortcut(event)) {
     event.preventDefault();
@@ -559,6 +533,7 @@ function navigatePreviewHeading(target, headingId, { behavior = 'auto' } = {}) {
 
   this.scrollSyncController?.suspendSync?.(250);
   scrollPreviewToTarget(previewContainer, target, { behavior });
+  this.attachPreviewHeadingControls?.(target);
 
   const sourceLine = Number.parseInt(target.getAttribute('data-source-line') || '', 10);
   if (Number.isFinite(sourceLine)) {
@@ -601,7 +576,7 @@ async function copyPreviewHeadingLink(anchorId) {
 
 /** @this {UiShellContext} */
 async function copyPreviewCodeBlock(button) {
-  const code = button?.closest('.preview-code-block')?.querySelector(':scope > pre > code');
+  const code = button?.closest('pre')?.querySelector(':scope > code');
   if (!(code instanceof HTMLElement)) {
     return;
   }
@@ -614,27 +589,107 @@ async function copyPreviewCodeBlock(button) {
   }
 }
 
+
+function syncHeadingFoldButtonState(heading, button) {
+  if (!(heading instanceof HTMLElement) || !(button instanceof HTMLButtonElement)) {
+    return;
+  }
+
+  const headingLabel = getHeadingLinkLabel(heading);
+  const collapsed = heading.dataset.previewHeadingCollapsed === 'true';
+  heading.setAttribute('aria-expanded', String(!collapsed));
+  button.setAttribute('aria-expanded', String(!collapsed));
+  button.setAttribute('aria-label', `${collapsed ? 'Expand' : 'Collapse'} ${headingLabel}`);
+  button.setAttribute('title', `${collapsed ? 'Expand' : 'Collapse'} section`);
+}
+
+/** @this {UiShellContext} */
+function attachPreviewHeadingControls(heading) {
+  if (!(heading instanceof HTMLElement) || !/^H[1-6]$/.test(heading.tagName)) {
+    return;
+  }
+
+  if (!this._previewHeadingFoldButton) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'ui-icon-button preview-heading-fold-button';
+    this._previewHeadingFoldButton = button;
+  }
+  if (!this._previewHeadingLinkButton) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'ui-icon-button preview-heading-link-button';
+    // pi-lens-ignore: no-inner-html-js
+    button.innerHTML = PREVIEW_HEADING_LINK_ICON;
+    this._previewHeadingLinkButton = button;
+  }
+
+  const foldButton = this._previewHeadingFoldButton;
+  const linkButton = this._previewHeadingLinkButton;
+
+  if (foldButton.parentElement !== heading) {
+    heading.prepend(foldButton);
+  }
+  syncHeadingFoldButtonState(heading, foldButton);
+
+  if (!heading.id) {
+    linkButton.remove();
+    return;
+  }
+
+  const headingLabel = getHeadingLinkLabel(heading);
+  linkButton.dataset.previewHeadingAnchor = heading.id;
+  linkButton.setAttribute('aria-label', `Copy link to ${headingLabel}`);
+  linkButton.setAttribute('title', 'Copy link to this section');
+  if (linkButton.parentElement !== heading) {
+    heading.append(linkButton);
+  }
+}
+
 /** @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';
+function attachPreviewCodeCopyButton(pre) {
+  if (!(pre instanceof HTMLElement) || pre.tagName !== 'PRE' || !pre.querySelector(':scope > code')) {
+    return;
+  }
+
+  if (!this._previewCodeCopyButton) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'ui-button ui-button--secondary ui-button--compact preview-code-copy-button';
+    button.setAttribute('aria-label', 'Copy code');
+    button.title = 'Copy code';
     // pi-lens-ignore: no-inner-html-js
-    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);
-  });
+    button.innerHTML = `${PREVIEW_CODE_COPY_ICON}<span data-preview-code-copy-label>Copy</span>`;
+    this._previewCodeCopyButton = button;
+  }
+
+  const button = this._previewCodeCopyButton;
+  if (button.parentElement !== pre) {
+    pre.append(button);
+  }
 }
 
+/** @this {UiShellContext} */
+function handlePreviewContentPointerOver(event) {
+  if (!(event.target instanceof Element) || !this.elements.previewContent) {
+    return;
+  }
+
+  const heading = event.target.closest('h1, h2, h3, h4, h5, h6');
+  if (heading instanceof HTMLElement && this.elements.previewContent.contains(heading)) {
+    this.attachPreviewHeadingControls(heading);
+  }
+
+  const pre = event.target.closest('pre');
+  if (pre instanceof HTMLElement && this.elements.previewContent.contains(pre)) {
+    this.attachPreviewCodeCopyButton(pre);
+  }
+}
+
+
 function applyPreviewHeadingFolds(previewContent) {
-  const parents = new Set(Array.from(previewContent?.querySelectorAll?.('.preview-heading-fold-button') ?? [])
-    .map((button) => button.closest('h1, h2, h3, h4, h5, h6')?.parentElement)
+  const parents = new Set(Array.from(previewContent?.querySelectorAll?.('h1, h2, h3, h4, h5, h6') ?? [])
+    .map((heading) => heading.parentElement)
     .filter(Boolean));
 
   parents.forEach((parent) => {
@@ -698,19 +753,12 @@ function syncPreviewHeadingFoldButtons() {
       return;
     }
 
-    const headingLabel = getHeadingLinkLabel(heading);
-    let button = heading.querySelector(':scope > .preview-heading-fold-button');
-    if (!(button instanceof HTMLButtonElement)) {
-      button = document.createElement('button');
-      button.type = 'button';
-      button.className = 'ui-icon-button preview-heading-fold-button';
-      heading.prepend(button);
-    }
-
     const collapsed = heading.dataset.previewHeadingCollapsed === 'true';
-    button.setAttribute('aria-expanded', String(!collapsed));
-    button.setAttribute('aria-label', `${collapsed ? 'Expand' : 'Collapse'} ${headingLabel}`);
-    button.setAttribute('title', `${collapsed ? 'Expand' : 'Collapse'} section`);
+    heading.setAttribute('aria-expanded', String(!collapsed));
+    const button = heading.querySelector(':scope > .preview-heading-fold-button');
+    if (button instanceof HTMLButtonElement) {
+      syncHeadingFoldButtonState(heading, button);
+    }
   });
 
   applyPreviewHeadingFolds(this.elements.previewContent);
@@ -718,30 +766,19 @@ function syncPreviewHeadingFoldButtons() {
 
 /** @this {UiShellContext} */
 function syncPreviewHeadingLinkButtons() {
-  const headings = this.elements.previewContent?.querySelectorAll?.('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]') ?? [];
-
-  Array.from(headings).forEach((heading) => {
-    if (!(heading instanceof HTMLElement) || !heading.id) {
-      return;
-    }
-
-    const headingLabel = getHeadingLinkLabel(heading);
-    let button = heading.querySelector(':scope > .preview-heading-link-button');
-    if (!(button instanceof HTMLButtonElement)) {
-      button = document.createElement('button');
-      button.type = 'button';
-      button.className = 'ui-icon-button preview-heading-link-button';
-      // pi-lens-ignore: no-inner-html-js
-      button.innerHTML = PREVIEW_HEADING_LINK_ICON;
-      heading.appendChild(button);
-    }
+  const linkButton = this._previewHeadingLinkButton;
+  const heading = linkButton?.parentElement;
+  if (!(heading instanceof HTMLElement) || !heading.id) {
+    return;
+  }
 
-    button.dataset.previewHeadingAnchor = heading.id;
-    button.setAttribute('aria-label', `Copy link to ${headingLabel}`);
-    button.setAttribute('title', 'Copy link to this section');
-  });
+  const headingLabel = getHeadingLinkLabel(heading);
+  linkButton.dataset.previewHeadingAnchor = heading.id;
+  linkButton.setAttribute('aria-label', `Copy link to ${headingLabel}`);
+  linkButton.setAttribute('title', 'Copy link to this section');
 }
 
+
 /** @this {UiShellContext} */
 function requestPreviewRouteAnchor(anchorId, filePath = this.currentFilePath) {
   const normalizedAnchor = String(anchorId ?? '').trim();
@@ -883,20 +920,6 @@ function handlePreviewContentClick(event) {
   this.session?.toggleTaskListItem?.(sourceLine);
 }
 
-/** @this {UiShellContext} */
-function setToolbarOverflowOpen(nextState) {
-  this.toolbarOverflowOpen = Boolean(nextState);
-  this.elements.toolbarOverflowToggle?.setAttribute('aria-expanded', String(this.toolbarOverflowOpen));
-  this.elements.toolbarOverflowToggle?.classList.toggle('active', this.toolbarOverflowOpen);
-  this.elements.toolbarOverflowToggle?.closest('.toolbar-right')?.classList.toggle('is-overflow-open', this.toolbarOverflowOpen);
-
-  if (!this.toolbarOverflowOpen) {
-    this.elements.toolbarOverflowMenu?.querySelectorAll('details[open]').forEach((detail) => {
-      detail.removeAttribute('open');
-    });
-  }
-}
-
 /** @this {UiShellContext} */
 function syncToolbarOverflowVisibility() {
   const toggle = this.elements.toolbarOverflowToggle;
@@ -911,19 +934,17 @@ function syncToolbarOverflowVisibility() {
 
 /** @this {UiShellContext} */
 function closeToolbarOverflowMenu() {
-  this.setToolbarOverflowOpen(false);
-}
-
-/** @this {UiShellContext} */
-function toggleToolbarOverflowMenu() {
-  this.setToolbarOverflowOpen(!this.toolbarOverflowOpen);
+  if (this.elements.toolbarOverflowMenu?.matches(':popover-open')) {
+    this.elements.toolbarOverflowMenu.hidePopover();
+  }
 }
 
 /** @this {UiShellContext} */
 function handleThemeChange(theme) {
   this.previewRenderer.applyTheme(theme);
   if (
-    !this.isExcalidrawFile(this.currentFilePath)
+    this.currentFilePath
+    && !this.isExcalidrawFile(this.currentFilePath)
     && !this.isImageFile?.(this.currentFilePath)
     && !this.isPdfFile?.(this.currentFilePath)
     && !this.isStructurizrWorkspaceFile?.(this.currentFilePath)
@@ -1049,9 +1070,12 @@ function showEditorLoading() {
   if (!this.elements.editorContainer) return;
   this.elements.editorContainer.classList.add('is-loading-editor');
   this.elements.editorContainer.innerHTML = `
-      <div class="editor-loading" id="editorLoading">
-        <div class="loading-spinner"></div>
-        <span class="loading-text">Loading file...</span>
+      <div class="editor-loading" id="editorLoading" role="status" aria-live="polite" aria-label="Loading file…">
+        <div class="skeleton-line skeleton-line--title skeleton-line--break"></div>
+        <div class="skeleton-line skeleton-line--full"></div>
+        <div class="skeleton-line skeleton-line--ninety"></div>
+        <div class="skeleton-line skeleton-line--ninety-five"></div>
+        <div class="skeleton-line skeleton-line--eighty"></div>
       </div>`;
 }
 
@@ -1083,6 +1107,8 @@ function clearInitialFileBootstrap() {
 
 export const uiFeatureShellMethods = {
   applyPendingPreviewRouteAnchor,
+  attachPreviewCodeCopyButton,
+  attachPreviewHeadingControls,
   bindEvents,
   clearInitialFileBootstrap,
   closeToolbarOverflowMenu,
@@ -1095,8 +1121,8 @@ export const uiFeatureShellMethods = {
   getStoredVimMode,
   handleConnectionChange,
   handleDocumentKeydown,
-  handleDocumentPointerDown,
   handlePreviewContentClick,
+  handlePreviewContentPointerOver,
   handleThemeChange,
   hideEditorLoading,
   initialize,
@@ -1107,17 +1133,14 @@ export const uiFeatureShellMethods = {
   promptForVersionReload,
   requestPreviewRouteAnchor,
   scheduleBacklinkRefresh,
-  setToolbarOverflowOpen,
   showEditorLoadError,
   showEditorLoading,
-  syncPreviewCodeCopyButtons,
   syncPreviewHeadingFoldButtons,
   syncPreviewHeadingLinkButtons,
   syncVisualViewportBounds,
   syncToolbarOverflowVisibility,
   syncVimModeToggle,
   syncWrapToggle,
-  toggleToolbarOverflowMenu,
   toggleLineWrapping,
   unfoldPreviewHeading,
   toggleVimMode,