collabmd 0.1.51 → 0.1.52

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

@@ -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;

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

@@ -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);
     }
 

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

@@ -29,6 +29,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');
@@ -94,6 +95,8 @@ export class FileExplorerView {
     this.rootDropZone = null;
     this.threadCounts = new Map();
     this.showFileExtensions = false;
+    this.searchDebounceTimer = null;
+    this.pendingSearchValue = null;
   }
 
   renderVaultSwitcher(options) {
@@ -138,7 +141,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 +185,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 +385,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);
@@ -1133,6 +1153,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 +1169,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'] });
@@ -1182,6 +1207,11 @@ export class FileExplorerView {
       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;

package/src/client/presentation/outline-controller.js

@@ -9,8 +9,6 @@ export class OutlineController {
     this.activeHeadingId = null;
     this.headings = [];
     this.pinnedHeadingId = null;
-    this.pdfOutline = null;
-    this.onNavigateToPdfOutline = null;
     this.onNavigateToHeading = onNavigateToHeading;
     this.onWillOpen = onWillOpen;
     this.panel = document.getElementById('outlinePanel');
@@ -83,11 +81,6 @@ export class OutlineController {
       return;
     }
 
-    if (this.pdfOutline) {
-      this.renderPdfOutline();
-      return;
-    }
-
     const previewContent = document.getElementById('previewContent');
     const headings = previewContent?.querySelectorAll('h1, h2, h3, h4, h5, h6') ?? [];
 
@@ -131,85 +124,6 @@ export class OutlineController {
     this.observeHeadings(Array.from(headings));
   }
 
-  setPdfOutline(outline, onNavigate) {
-    this.cleanup();
-    this.pdfOutline = Array.isArray(outline) && outline.length > 0 ? outline : null;
-    this.onNavigateToPdfOutline = this.pdfOutline ? onNavigate : null;
-    this.activeHeadingId = null;
-    this.toggleButton?.classList.toggle('hidden', !this.pdfOutline);
-
-    if (!this.pdfOutline) {
-      this.navigation?.replaceChildren();
-      this.close();
-      return;
-    }
-
-    if (this.outlineOpen) {
-      this.renderPdfOutline();
-    }
-  }
-
-  clearPdfOutline() {
-    this.pdfOutline = null;
-    this.onNavigateToPdfOutline = null;
-    this.activeHeadingId = null;
-    this.pinnedHeadingId = null;
-    this.navigation?.replaceChildren();
-    this.toggleButton?.classList.add('hidden');
-    this.close();
-  }
-
-  renderPdfOutline() {
-    if (!this.navigation || !this.pdfOutline) {
-      return;
-    }
-
-    this.cleanup();
-    this.navigation.replaceChildren();
-    const fragment = document.createDocumentFragment();
-    let itemIndex = 0;
-    const appendItems = (items, level = 1) => {
-      items.forEach((item) => {
-        if (!item || typeof item !== 'object') {
-          return;
-        }
-
-        const title = String(item.title ?? '').trim();
-        if (title) {
-          const id = `pdf-outline-${itemIndex}`;
-          const button = document.createElement('button');
-          button.type = 'button';
-          button.className = 'outline-item';
-          button.dataset.level = String(Math.min(level, 6));
-          button.dataset.target = id;
-          button.title = title;
-          button.textContent = title;
-          button.addEventListener('click', () => {
-            this.setActiveItem(id, { behavior: 'auto' });
-            this.onNavigateToPdfOutline?.(item);
-            if (this.mobileBreakpointQuery.matches) {
-              this.close();
-            }
-          });
-          fragment.appendChild(button);
-          itemIndex += 1;
-        }
-
-        if (Array.isArray(item.items)) {
-          appendItems(item.items, Math.min(level + 1, 6));
-        }
-      });
-    };
-
-    appendItems(this.pdfOutline);
-    if (fragment.childNodes.length === 0) {
-      this.navigation.innerHTML = '<div class="outline-empty">No outline found</div>';
-      return;
-    }
-
-    this.navigation.appendChild(fragment);
-  }
-
   cleanup({ preservePinnedHeading = false } = {}) {
     if (this.activeHeadingFrame) {
       cancelAnimationFrame(this.activeHeadingFrame);