collabmd 0.1.48 → 0.1.49

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

@@ -1,3 +1,4 @@
+import { createExcalidrawExportOptions } from '../domain/excalidraw-scene.js';
 import { escapeHtml } from '../domain/vault-utils.js';
 import { commitButtonLabel } from '../domain/git-labels.js';
 import { getVaultPathLeaf, getVaultPathParent } from '../domain/vault-paths.js';
@@ -200,29 +201,25 @@ function getDrawioSourcePair(detail = {}) {
   };
 }
 
-function decodeXmlAttribute(value) {
-  return String(value ?? '')
-    .replace(/"/gu, '"')
-    .replace(/'/gu, "'")
-    .replace(/&/gu, '&')
-    .replace(/&lt;/gu, '<')
-    .replace(/&gt;/gu, '>');
-}
-
 function getDrawioCellMap(source) {
   const cells = new Map();
-  const cellPattern = /<mxCell\b([^>]*?)(?:\/|>([\s\S]*?)<\/mxCell\s*)>/giu;
-  let match;
+  if (typeof DOMParser === 'undefined' || typeof XMLSerializer === 'undefined') {
+    return cells;
+  }
 
-  while ((match = cellPattern.exec(String(source ?? ''))) !== null) {
-    const idMatch = match[1].match(/\bid\s*=\s*(['"])(.*?)\1/iu);
-    const id = decodeXmlAttribute(idMatch?.[2] || '');
+  const documentNode = new DOMParser().parseFromString(String(source ?? ''), 'application/xml');
+  if (documentNode.querySelector('parsererror')) {
+    return cells;
+  }
+
+  const serializer = new XMLSerializer();
+  for (const cell of documentNode.getElementsByTagName('mxCell')) {
+    const id = cell.getAttribute('id');
     if (!id || id === '0' || id === '1') {
       continue;
     }
 
-    const signature = `${match[1]}${match[2] || ''}`.replace(/\s+/gu, ' ').trim();
-    cells.set(id, signature);
+    cells.set(id, serializer.serializeToString(cell).replace(/\s+/gu, ' ').trim());
   }
 
   return cells;
@@ -647,7 +644,7 @@ export class GitDiffViewController {
     this.excalidrawPreviewPayloads.clear();
     this.drawioPreviewPayloads.clear();
     this.requestScope = scope;
-    this.renderLoading('Loading diff summary...');
+    this.renderLoading('Loading diff summary…');
 
     try {
       const data = await this.gitApiClient.readDiff({
@@ -677,7 +674,7 @@ export class GitDiffViewController {
         source: 'workspace',
         summary: { additions: 0, deletions: 0, filesChanged: 0 },
       };
-      this.renderEmpty('Failed to load git diff');
+      this.renderEmpty('Failed to load git diff', { alert: true });
       return this.data;
     }
   }
@@ -700,7 +697,7 @@ export class GitDiffViewController {
     this.excalidrawPreviewPayloads.clear();
     this.drawioPreviewPayloads.clear();
     this.requestScope = 'all';
-    this.renderLoading('Loading commit summary...');
+    this.renderLoading('Loading commit summary…');
 
     try {
       const data = await this.gitApiClient.readCommit({
@@ -741,7 +738,7 @@ export class GitDiffViewController {
         summary: { additions: 0, deletions: 0, filesChanged: 0 },
       };
       this.commitMeta = null;
-      this.renderEmpty('Failed to load git commit');
+      this.renderEmpty('Failed to load git commit', { alert: true });
       return this.data;
     }
   }
@@ -790,27 +787,27 @@ export class GitDiffViewController {
     void this.loadCurrentFile();
   }
 
-  renderLoading(message = 'Loading git diff...') {
+  renderLoading(message = 'Loading git diff…') {
     if (!this.isActive) {
       return;
     }
     this.page?.classList.remove('hidden');
     if (this.content) {
       // pi-lens-ignore: ast-grep:no-inner-html-js
-      this.content.innerHTML = `<div class="diff-empty-state">${escapeHtml(message)}</div>`;
+      this.content.innerHTML = `<div class="diff-empty-state" role="status" aria-live="polite">${escapeHtml(message)}</div>`;
     }
     this.data = null;
     this.syncToolbar();
   }
 
-  renderEmpty(message) {
+  renderEmpty(message, { alert = false } = {}) {
     if (!this.isActive) {
       return;
     }
     this.page?.classList.remove('hidden');
     if (this.content) {
       // pi-lens-ignore: ast-grep:no-inner-html-js
-      this.content.innerHTML = `<div class="diff-empty-state">${escapeHtml(message)}</div>`;
+      this.content.innerHTML = `<div class="diff-empty-state"${alert ? ' role="alert"' : ''}>${escapeHtml(message)}</div>`;
     }
     this.syncToolbar();
   }
@@ -1194,16 +1191,7 @@ export class GitDiffViewController {
       }
 
       try {
-        const svg = await exportToSvg({
-          appState: {
-            exportBackground: true,
-            exportWithDarkMode: false,
-            viewBackgroundColor: scene.appState?.viewBackgroundColor || '#ffffff',
-          },
-          elements: getVisibleSceneElements(scene),
-          exportPadding: 24,
-          files: scene.files || null,
-        });
+        const svg = await exportToSvg(createExcalidrawExportOptions(scene));
         preview.replaceChildren(svg);
         preview.classList.add('is-ready');
       } catch (error) {
@@ -1345,7 +1333,7 @@ export class GitDiffViewController {
       return `
         <section class="diff-file-block">
           ${this.renderFileHeader(currentFile)}
-          <div class="diff-empty-state">Loading file diff...</div>
+          <div class="diff-empty-state" role="status" aria-live="polite">Loading file diff…</div>
         </section>
       `;
     }
@@ -1355,7 +1343,7 @@ export class GitDiffViewController {
       return `
         <section class="diff-file-block">
           ${this.renderFileHeader(currentFile)}
-          <div class="diff-empty-state">${escapeHtml(errorMessage)}</div>
+          <div class="diff-empty-state" role="alert">${escapeHtml(errorMessage)}</div>
         </section>
       `;
     }
@@ -1435,9 +1423,9 @@ export class GitDiffViewController {
     const bodyMarkup = isCollapsed
       ? ''
       : isLoading
-        ? '<div class="diff-empty-state">Loading file diff...</div>'
+        ? '<div class="diff-empty-state" role="status" aria-live="polite">Loading file diff…</div>'
         : errorMessage
-          ? `<div class="diff-empty-state">${escapeHtml(errorMessage)}</div>`
+          ? `<div class="diff-empty-state" role="alert">${escapeHtml(errorMessage)}</div>`
           : this.renderDiffDetail(detail, index, { includeHeader: false });
 
     return `
@@ -1877,11 +1865,15 @@ export class GitDiffViewController {
     }
 
     this.modeButtons.forEach((button) => {
+      const active = button.getAttribute('data-diff-mode') === this.mode;
       button.classList.remove('hidden');
-      button.classList.toggle('active', button.getAttribute('data-diff-mode') === this.mode);
+      button.classList.toggle('active', active);
+      button.setAttribute?.('aria-pressed', String(active));
     });
     this.layoutButtons.forEach((button) => {
-      button.classList.toggle('active', button.getAttribute('data-diff-layout') === this.layoutMode);
+      const active = button.getAttribute('data-diff-layout') === this.layoutMode;
+      button.classList.toggle('active', active);
+      button.setAttribute?.('aria-pressed', String(active));
     });
 
     const hasCurrentFile = Boolean(this.getCurrentFile()?.path);
@@ -1906,8 +1898,8 @@ export class GitDiffViewController {
       this.primaryActionButton.classList.toggle('ui-button--primary', emphasizeInclude);
       this.primaryActionButton.classList.toggle('ui-button--secondary', !emphasizeInclude);
       this.primaryActionButton.classList.toggle('ui-button--surface', !emphasizeInclude);
-      this.primaryActionButton.textContent = this.pendingAction === primaryAction
-        ? 'Working...'
+      this.primaryActionButton.textContent = this.pendingAction && this.pendingAction === primaryAction
+        ? 'Working…'
         : primaryAction === 'unstage'
           ? 'Remove'
           : 'Include in commit';
@@ -1918,7 +1910,7 @@ export class GitDiffViewController {
     }
     if (this.commitButton) {
       this.commitButton.textContent = this.pendingAction === 'commit'
-        ? 'Working...'
+        ? 'Working…'
         : commitButtonLabel(includedFileCount);
     }
     this.commitButton?.classList.toggle(

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

@@ -94,7 +94,9 @@ export class GitPanelController {
     onResetFile = () => {},
     onSelectCommit = () => {},
     onSelectDiff = () => {},
+    onStageAll = () => {},
     onStageFile = () => {},
+    onUnstageAll = () => {},
     onUnstageFile = () => {},
     onViewAllDiff = () => {},
     searchInput = null,
@@ -110,7 +112,9 @@ export class GitPanelController {
     this.onResetFile = onResetFile;
     this.onSelectCommit = onSelectCommit;
     this.onSelectDiff = onSelectDiff;
+    this.onStageAll = onStageAll;
     this.onStageFile = onStageFile;
+    this.onUnstageAll = onUnstageAll;
     this.onUnstageFile = onUnstageFile;
     this.onViewAllDiff = onViewAllDiff;
     this.searchInput = searchInput;
@@ -118,6 +122,7 @@ export class GitPanelController {
     this.panel = document.getElementById('gitPanel');
     this.pullBackups = [];
     this.status = null;
+    this.statusError = '';
     this.active = false;
     this.refreshTimer = null;
     this.searchQuery = '';
@@ -236,6 +241,17 @@ export class GitPanelController {
 
     if (this._handleFileActionClick(event)) return;
 
+    const bulkActionButton = event.target instanceof Element
+      ? event.target.closest('[data-git-bulk-action]')
+      : null;
+    if (bulkActionButton) {
+      const action = bulkActionButton.getAttribute('data-git-bulk-action');
+      if (action === 'stage-all' || action === 'unstage-all') {
+        void this.handleBulkAction(action);
+      }
+      return;
+    }
+
     if (event.target instanceof Element && event.target.closest('[data-git-view-all]')) {
       this.onViewAllDiff();
       return;
@@ -377,7 +393,7 @@ export class GitPanelController {
 
   async refresh({ force = false, includeHistory = this.panelMode === 'history' } = {}) {
     const status = await this.refreshStatus({ force });
-    if (includeHistory && status.isGitRepo) {
+    if (includeHistory && status?.isGitRepo) {
       await this.refreshHistory({ force });
     }
     return status;
@@ -385,6 +401,7 @@ export class GitPanelController {
 
   async refreshStatus({ force = false } = {}) {
     if (!this.enabled) {
+      this.statusError = '';
       this.status = {
         isGitRepo: false,
         sections: [],
@@ -409,6 +426,7 @@ export class GitPanelController {
     try {
       const data = await this.gitApiClient.readStatus({ force });
       this.status = data;
+      this.statusError = '';
       this.pullBackups = [];
       if (data.isGitRepo) {
         try {
@@ -435,25 +453,9 @@ export class GitPanelController {
     } catch (error) {
       console.error('[git-panel] Failed to load git status:', error);
       this.toastController?.show('Failed to load git status');
-      this.status = {
-        isGitRepo: false,
-        sections: [],
-        summary: { changedFiles: 0 },
-      };
-      this.pullBackups = [];
-      this.history = {
-        ...this.history,
-        commits: [],
-        error: '',
-        hasMore: false,
-        loaded: false,
-        loading: false,
-        loadingMore: false,
-        offset: 0,
-      };
-      this.onRepoChange(false, this.status);
+      this.statusError = 'Failed to load Git status. Try again.';
       this.render();
-      return this.status;
+      return null;
     }
   }
 
@@ -615,6 +617,22 @@ export class GitPanelController {
     }
   }
 
+  async handleBulkAction(action) {
+    if (this.pendingActionKey) {
+      return;
+    }
+
+    this.pendingActionKey = action;
+    this.render();
+
+    try {
+      await (action === 'stage-all' ? this.onStageAll() : this.onUnstageAll());
+    } finally {
+      this.pendingActionKey = null;
+      this.render();
+    }
+  }
+
   async handleCommitStaged() {
     const actionKey = 'commit-staged';
     if (this.pendingActionKey === actionKey) {
@@ -835,11 +853,11 @@ export class GitPanelController {
     const commits = this.filterCommits(this.history.commits);
 
     if (this.history.loading && !this.history.loaded) {
-      return '<div class="git-panel-empty">Loading git history...</div>';
+      return '<div class="git-panel-empty" role="status" aria-live="polite">Loading git history…</div>';
     }
 
     if (this.history.error && !this.history.loaded) {
-      return `<div class="git-panel-empty">${escapeHtml(this.history.error)}</div>`;
+      return `<div class="git-panel-empty" role="alert">${escapeHtml(this.history.error)}</div>`;
     }
 
     if (this.history.loaded && commits.length === 0 && this.history.commits.length === 0) {
@@ -862,7 +880,7 @@ export class GitPanelController {
             data-git-history-load-more
             ${this.history.loadingMore ? 'disabled' : ''}
           >
-            ${this.history.loadingMore ? 'Loading...' : 'Load More'}
+            ${this.history.loadingMore ? 'Loading…' : 'Load more'}
           </button>
         </div>
       ` : ''}
@@ -877,6 +895,8 @@ export class GitPanelController {
       .join('');
     const hasChanges = Boolean(this.status.summary?.changedFiles);
     const includedFileCount = Number(this.status.summary?.staged || 0);
+    const excludedFileCount = Number(this.status.summary?.workingTree || 0)
+      + Number(this.status.summary?.untracked || 0);
     const isCommitPending = this.pendingActionKey === 'commit-staged';
 
     return `
@@ -885,9 +905,29 @@ export class GitPanelController {
       ${hasChanges ? `
         <div class="git-panel-footer">
           <div class="git-panel-footer-actions">
+            ${excludedFileCount > 0 ? `
+              <button
+                class="${buttonClassNames({ variant: 'secondary', size: 'compact', action: true, surface: true })}"
+                type="button"
+                data-git-bulk-action="stage-all"
+                ${this.pendingActionKey ? 'disabled' : ''}
+              >
+                ${this.pendingActionKey === 'stage-all' ? 'Working...' : 'Include all changes'}
+              </button>
+            ` : ''}
+            ${includedFileCount > 0 ? `
+              <button
+                class="${buttonClassNames({ variant: 'secondary', size: 'compact', action: true, surface: true })}"
+                type="button"
+                data-git-bulk-action="unstage-all"
+                ${this.pendingActionKey ? 'disabled' : ''}
+              >
+                ${this.pendingActionKey === 'unstage-all' ? 'Working...' : 'Remove all from commit'}
+              </button>
+            ` : ''}
             <button class="${buttonClassNames({ variant: 'secondary', size: 'compact', action: true, surface: true })}" type="button" data-git-view-all>
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M2 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
-              View Full Diff
+              View full diff
             </button>
             <button
               class="${buttonClassNames({ variant: 'primary', action: true, wide: true, extra: 'git-footer-commit-btn' })}"
@@ -895,7 +935,7 @@ export class GitPanelController {
               data-git-commit-staged
               ${includedFileCount === 0 || isCommitPending ? 'disabled' : ''}
             >
-              ${isCommitPending ? 'Working...' : commitButtonLabel(includedFileCount)}
+              ${isCommitPending ? 'Working…' : commitButtonLabel(includedFileCount)}
             </button>
           </div>
         </div>
@@ -903,14 +943,19 @@ export class GitPanelController {
     `;
   }
 
-  renderEmpty(message) {
+  renderEmpty(message, { alert = false, status = false } = {}) {
     if (!this.panel) {
       return;
     }
 
+    const semantics = alert
+      ? ' role="alert"'
+      : status
+        ? ' role="status" aria-live="polite"'
+        : '';
     // pi-lens-ignore: ast-grep:no-inner-html-js
     this.panel.innerHTML = `
-      <div class="git-panel-empty ui-empty-state ui-empty-state--compact">
+      <div class="git-panel-empty ui-empty-state ui-empty-state--compact"${semantics}>
         <p class="ui-empty-state-copy">${escapeHtml(message)}</p>
       </div>
     `;
@@ -921,8 +966,13 @@ export class GitPanelController {
       return;
     }
 
+    if (this.statusError) {
+      this.renderEmpty(this.statusError, { alert: true });
+      return;
+    }
+
     if (!this.status) {
-      this.renderEmpty('Loading git status...');
+      this.renderEmpty('Loading git status…', { status: true });
       return;
     }
 

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

@@ -76,6 +76,8 @@ export class ImageLightboxController {
     this.pinchStartCenter = { x: 0, y: 0 };
     this.didDrag = false;
     this.resetButton = null;
+    this.previouslyFocusedElement = null;
+    this.blockingModalHandler = () => this.close();
 
     this.handlePreviewClick = (event) => {
       const target = event.target;
@@ -102,12 +104,6 @@ export class ImageLightboxController {
         return;
       }
 
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        this.close();
-        return;
-      }
-
       if (event.key === '+' || event.key === '=') {
         event.preventDefault();
         this.zoomBy(ZOOM_STEP);
@@ -161,15 +157,19 @@ export class ImageLightboxController {
     }
 
     this.ensureOverlayRoot();
+    this.previouslyFocusedElement = this.document.activeElement instanceof this.window.HTMLElement
+      ? this.document.activeElement
+      : null;
     this.resetView();
     this.titleElement.textContent = image.getAttribute('alt') || 'Image preview';
     this.imageElement.src = src;
     this.imageElement.alt = image.getAttribute('alt') || '';
-    this.overlayRoot.hidden = false;
+    this.overlayRoot.showModal();
     this.isOpen = true;
     this.document.body.classList.add('image-lightbox-open');
+    this.document.addEventListener('collabmd:close-custom-modals', this.blockingModalHandler);
     this.syncTransform();
-    this.overlayRoot.focus?.();
+    this.overlayRoot.querySelector('button:not(:disabled)')?.focus();
     return true;
   }
 
@@ -184,11 +184,14 @@ export class ImageLightboxController {
     this.pinchStartDistance = 0;
     this.didDrag = false;
     this.viewport?.classList?.remove('is-dragging');
-    if (this.overlayRoot) {
-      this.overlayRoot.hidden = true;
+    if (this.overlayRoot?.open) {
+      this.overlayRoot.close();
     }
     this.isOpen = false;
     this.document.body.classList.remove('image-lightbox-open');
+    this.document.removeEventListener('collabmd:close-custom-modals', this.blockingModalHandler);
+    this.previouslyFocusedElement?.focus?.();
+    this.previouslyFocusedElement = null;
   }
 
   resetView() {
@@ -442,11 +445,14 @@ export class ImageLightboxController {
       return this.overlayRoot;
     }
 
-    const overlayRoot = this.document.createElement('div');
+    const overlayRoot = this.document.createElement('dialog');
     overlayRoot.className = 'image-lightbox-root';
     overlayRoot.dataset.imageLightboxRoot = 'true';
-    overlayRoot.hidden = true;
-    overlayRoot.tabIndex = -1;
+    overlayRoot.setAttribute('aria-labelledby', 'imageLightboxTitle');
+    overlayRoot.addEventListener('cancel', (event) => {
+      event.preventDefault();
+      this.close();
+    });
 
     const backdrop = this.document.createElement('button');
     backdrop.className = 'image-lightbox-backdrop';
@@ -460,9 +466,6 @@ export class ImageLightboxController {
 
     const shell = this.document.createElement('div');
     shell.className = 'image-lightbox-shell';
-    shell.setAttribute('role', 'dialog');
-    shell.setAttribute('aria-modal', 'true');
-    shell.setAttribute('aria-label', 'Image preview');
     shell.addEventListener('click', (event) => event.stopPropagation());
     shell.addEventListener('pointerdown', (event) => event.stopPropagation());
 
@@ -471,6 +474,7 @@ export class ImageLightboxController {
 
     const title = this.document.createElement('div');
     title.className = 'image-lightbox-title';
+    title.id = 'imageLightboxTitle';
     title.textContent = 'Image preview';
 
     const controls = this.document.createElement('div');

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

@@ -15,7 +15,7 @@ export class LayoutController {
     this.previewPane = document.getElementById('previewPane');
     this.mobileToggleButton = document.getElementById('mobileViewToggle');
     this.resizer = document.getElementById('resizer');
-    this.viewButtons = Array.from(document.querySelectorAll('.view-btn'));
+    this.viewButtons = Array.from(document.querySelectorAll('#toolbarViewToggle [data-view]'));
   }
 
   isMobileViewport() {
@@ -128,6 +128,8 @@ export class LayoutController {
     const previewIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>';
     const editorIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="8" y1="8" x2="16" y2="8"/><line x1="8" y1="12" x2="14" y2="12"/><line x1="8" y1="16" x2="12" y2="16"/></svg>';
 
+    // Icons and labels are fixed application-owned markup.
+    // pi-lens-ignore: no-inner-html-js
     this.mobileToggleButton.innerHTML = `${label === 'Editor' ? editorIcon : previewIcon}<span class="ui-toolbar-button-label">${label}</span>`;
   }
 

package/src/client/presentation/quick-switcher-controller.js

@@ -98,28 +98,20 @@ export class QuickSwitcherController {
     this.selectedIndex = 0;
     this.selectedTextIndex = 0;
     this.isOpen = false;
-    this.previousActiveElement = null;
     this.mode = 'files';
     this.textResults = null;
     this.textResultItems = [];
     this.textSearchRunner = new QuickSwitcherTextSearchRunner({
       debounceMs: this.searchDebounceMs,
     });
+    this.blockingModalHandler = () => this.close();
 
     this.bindEvents();
   }
 
   bindEvents() {
-    this.overlay?.addEventListener('mousedown', (e) => {
-      if (e.target === this.overlay) this.close();
-    });
-
-    this.overlay?.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        this.close();
-      }
-    });
+    document.addEventListener?.('collabmd:close-custom-modals', this.blockingModalHandler);
+    this.overlay?.addEventListener('close', () => this.handleClose());
 
     this.modeTabs.forEach((tab, index) => {
       tab.addEventListener('click', () => {
@@ -173,86 +165,36 @@ export class QuickSwitcherController {
     });
   }
 
+  handleClose() {
+    this.abortTextSearch();
+    this.isOpen = false;
+    this.input?.setAttribute('aria-expanded', 'false');
+    this.input.value = '';
+    this.resultsList.innerHTML = '';
+    this.setActiveDescendant('');
+  }
+
   open() {
-    if (!this.overlay) return;
+    if (!this.overlay || this.overlay.open) return;
 
-    this.previousActiveElement = document.activeElement;
     this.isOpen = true;
     this.input.value = '';
     this.selectedIndex = 0;
     this.selectedTextIndex = 0;
-    this.overlay.classList.add('visible');
-    this.overlay.setAttribute('aria-hidden', 'false');
-    this.input?.setAttribute('aria-expanded', 'true');
     this.setMode('files', { preserveInput: true });
-
-    // The overlay transitions visibility hidden→visible over 120ms.
-    // Browsers ignore .focus() while the element is still visibility:hidden,
-    // so we must wait for the transition to complete.
-    this._focusAfterTransition();
-  }
-
-  /** Focus the input once the overlay visibility transition finishes. */
-  _focusAfterTransition() {
-    this._cancelPendingFocus();
-
-    const tryFocus = () => {
-      this._focusCleanup = null;
-      this.input?.focus();
-      if (this.isOpen && this.input && document.activeElement !== this.input) {
-        setTimeout(() => this.input?.focus(), 50);
-      }
-    };
-
-    const onEnd = (e) => {
-      if (e.propertyName === 'visibility' || e.propertyName === 'opacity') {
-        this.overlay.removeEventListener('transitionend', onEnd);
-        clearTimeout(fallbackTimer);
-        tryFocus();
-      }
-    };
-    this.overlay.addEventListener('transitionend', onEnd);
-
-    const fallbackTimer = setTimeout(() => {
-      this.overlay.removeEventListener('transitionend', onEnd);
-      tryFocus();
-    }, 160);
-
-    this._focusCleanup = () => {
-      this.overlay.removeEventListener('transitionend', onEnd);
-      clearTimeout(fallbackTimer);
-    };
-  }
-
-  _cancelPendingFocus() {
-    if (this._focusCleanup) {
-      this._focusCleanup();
-      this._focusCleanup = null;
-    }
+    this.overlay.showModal();
+    this.input?.setAttribute('aria-expanded', 'true');
   }
 
-  close({ restoreFocus = true } = {}) {
-    if (!this.overlay) return;
-
-    const previousActiveElement = this.previousActiveElement;
-    this._cancelPendingFocus();
-    this.abortTextSearch();
-    this.isOpen = false;
-    this.overlay.classList.remove('visible');
-    this.overlay.setAttribute('aria-hidden', 'true');
-    this.input?.setAttribute('aria-expanded', 'false');
-    this.input.value = '';
-    this.resultsList.innerHTML = '';
-    this.setActiveDescendant('');
-    this.previousActiveElement = null;
-
-    if (restoreFocus) {
-      previousActiveElement?.focus?.();
+  close() {
+    this.handleClose();
+    if (this.overlay?.open) {
+      this.overlay.close();
     }
   }
 
   toggle() {
-    if (this.isOpen) {
+    if (this.overlay?.open) {
       this.close();
     } else {
       this.open();