collabmd 0.1.40 → 0.1.41

package/src/client/application/plantuml-preview-hydrator.js

@@ -1,20 +1,12 @@
-import { clamp } from '../domain/vault-utils.js';
-import { setDiagramActionButtonIcon } from '../domain/diagram-action-icons.js';
 import {
   createDiagramExportFileNames,
-  downloadBlob,
   exportSvgMarkupFromElement,
-  rasterizeSvgMarkupToPngBlob,
-  writeBlobToClipboard,
 } from './diagram-preview-export.js';
 import { DiagramPreviewHydrator } from './diagram-preview-hydrator.js';
 import {
   createPlantUmlPlaceholderCard,
-  easeOutCubic,
-  getFrameViewportSize,
   getSvgSize,
   PLANTUML_BATCH_SIZE,
-  PLANTUML_ZOOM,
   sanitizeSvgMarkup,
 } from './preview-diagram-utils.js';
 
@@ -39,152 +31,31 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
       sourceClassName: 'plantuml-source',
     });
     this.renderer = renderer;
+    this.diagramChrome = renderer.diagramChrome;
     this.renderClient = renderClient;
     this.svgCache = new Map();
     this.svgInflightRequests = new Map();
-    this.shellRefits = new WeakMap();
-    this.shellResizeObservers = new WeakMap();
-    this.resizeObservers = new Set();
-    this.activeMaximizedShell = null;
-    this.maximizedRoot = null;
-    this.resizeFrameId = null;
   }
 
   destroy() {
     this.cancelHydration();
     this.preservedShells.clear();
-    this.clearActiveShell();
-    if (this.resizeFrameId) {
-      cancelAnimationFrame(this.resizeFrameId);
-      this.resizeFrameId = null;
-    }
-    this.disconnectResizeObservers();
-    this.maximizedRoot?.remove();
-    this.maximizedRoot = null;
-  }
-
-  disconnectResizeObservers() {
-    this.resizeObservers.forEach((observer) => observer.disconnect());
-    this.resizeObservers.clear();
-    this.shellResizeObservers = new WeakMap();
   }
 
-  disconnectShellResizeObserver(shell) {
-    const observer = this.shellResizeObservers.get(shell);
-    if (!observer) {
-      return;
-    }
-
-    observer.disconnect();
-    this.resizeObservers.delete(observer);
-    this.shellResizeObservers.delete(shell);
-  }
-
-  attachShellResizeObserver(shell, frame, onResize) {
-    this.disconnectShellResizeObserver(shell);
-    if (typeof ResizeObserver !== 'function' || !shell?.isConnected || !(frame instanceof HTMLElement)) {
-      return;
-    }
-
-    const observer = new ResizeObserver(() => onResize());
-    observer.observe(frame);
-    observer.observe(shell);
-    this.shellResizeObservers.set(shell, observer);
-    this.resizeObservers.add(observer);
-  }
-
-  clearActiveShell() {
-    this.activeMaximizedShell = null;
-    if (this.maximizedRoot && this.maximizedRoot.childElementCount === 0) {
-      this.maximizedRoot.hidden = true;
-    }
-  }
-
-  syncActiveShell() {
-    if (
-      this.activeMaximizedShell?.isConnected
-      && this.activeMaximizedShell.classList.contains('is-maximized')
-    ) {
-      return this.activeMaximizedShell;
-    }
-
-    this.clearActiveShell();
-    return null;
+  cancelHydration() {
+    super.cancelHydration();
+    this.diagramChrome?.cancelActiveShell?.('plantuml');
   }
 
   scheduleActiveRefit() {
-    if (this.resizeFrameId) {
-      cancelAnimationFrame(this.resizeFrameId);
-    }
-
-    this.resizeFrameId = requestAnimationFrame(() => {
-      this.resizeFrameId = null;
-      const activeShell = this.syncActiveShell();
-      if (!activeShell) {
-        return;
-      }
-
-      this.shellRefits.get(activeShell)?.();
-    });
+    this.diagramChrome?.scheduleActiveRefitOnNextFrame?.();
   }
 
   handleReconcile({ restoredMaximizedShell }) {
     if (restoredMaximizedShell) {
       document.body.classList.add('plantuml-maximized-open');
     }
-    this.syncActiveShell();
-  }
-
-  ensureMaximizedRoot() {
-    if (this.maximizedRoot?.isConnected && this.maximizedRoot.parentElement === document.body) {
-      return this.maximizedRoot;
-    }
-
-    let maximizedRoot = document.body.querySelector('[data-plantuml-maximized-root="true"]');
-    if (!maximizedRoot) {
-      maximizedRoot = document.createElement('div');
-      maximizedRoot.dataset.plantumlMaximizedRoot = 'true';
-      maximizedRoot.className = 'plantuml-maximized-root';
-      document.body.appendChild(maximizedRoot);
-    }
-
-    this.maximizedRoot = maximizedRoot;
-    return maximizedRoot;
-  }
-
-  mountShellInMaximizedRoot(shell) {
-    if (!shell) {
-      return;
-    }
-
-    const maximizedRoot = this.ensureMaximizedRoot();
-    maximizedRoot.hidden = false;
-    shell._plantumlRestoreParent = shell.parentElement || null;
-    shell._plantumlRestoreNextSibling = shell.nextSibling || null;
-    maximizedRoot.appendChild(shell);
-  }
-
-  restoreShellMount(shell) {
-    if (!shell) {
-      return;
-    }
-
-    const restoreParent = shell._plantumlRestoreParent;
-    const restoreNextSibling = shell._plantumlRestoreNextSibling;
-    if (restoreParent?.isConnected) {
-      if (restoreNextSibling?.parentElement === restoreParent) {
-        restoreParent.insertBefore(shell, restoreNextSibling);
-      } else {
-        restoreParent.appendChild(shell);
-      }
-    }
-
-    shell._plantumlRestoreParent = null;
-    shell._plantumlRestoreNextSibling = null;
-
-    if (this.maximizedRoot && this.maximizedRoot.childElementCount === 0) {
-      this.maximizedRoot.hidden = true;
-    }
+    this.diagramChrome?.syncActiveShell?.();
   }
 
   async hydrateShell(shell) {
@@ -268,20 +139,13 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
       this.svgInflightRequests.delete(source);
     }
 
-    this.disconnectShellResizeObserver(shell);
-    this.shellRefits.delete(shell);
-    if (this.activeMaximizedShell === shell) {
-      this.restoreShellMount(shell);
-      this.clearActiveShell();
-    }
+    this.diagramChrome?.destroyShell?.(shell);
 
     shell.removeAttribute('data-plantuml-hydrated');
     shell.removeAttribute('data-plantuml-instance-id');
     shell.removeAttribute('data-plantuml-queued');
     shell.classList.remove('is-maximized');
-    if (!this.syncActiveShell()) {
-      document.body.classList.remove('plantuml-maximized-open');
-    }
+    this.diagramChrome?.syncBodyMaximizedClasses?.();
     shell.querySelector(':scope > .plantuml-toolbar')?.remove();
     shell.querySelector(':scope > .plantuml-frame')?.remove();
     if (!shell.querySelector('.plantuml-placeholder-card')) {
@@ -300,389 +164,29 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
       throw new Error('Renderer returned invalid SVG');
     }
 
-    const toolbar = document.createElement('div');
-    toolbar.className = 'plantuml-toolbar diagram-preview-toolbar';
-    const leftGroup = document.createElement('div');
-    leftGroup.className = 'diagram-preview-toolbar-group diagram-preview-toolbar-group--zoom';
-    const rightGroup = document.createElement('div');
-    rightGroup.className = 'diagram-preview-toolbar-group diagram-preview-toolbar-group--actions';
-
-    const frame = document.createElement('div');
-    frame.className = 'plantuml-frame diagram-preview-frame';
-    const decreaseButton = this.createToolButton('−', 'Zoom out');
-    const increaseButton = this.createToolButton('+', 'Zoom in');
-    const resetButton = this.createToolButton('', 'Reset zoom', { icon: 'fit' });
-    const copyButton = this.createToolButton('', 'Copy image', { icon: 'copy' });
-    const downloadButton = this.createToolButton('', 'Download SVG', { icon: 'download' });
-    const reloadButton = this.createToolButton('', 'Reload diagram', { icon: 'refresh' });
-    const maximizeButton = this.createToolButton('', 'Maximize diagram', { icon: 'maximize' });
-    maximizeButton.classList.add('plantuml-maximize-btn');
-    const zoomLabel = document.createElement('span');
-    zoomLabel.className = 'plantuml-zoom-label diagram-preview-zoom-label';
-    zoomLabel.setAttribute('aria-live', 'polite');
-
-    leftGroup.append(decreaseButton, zoomLabel, resetButton, increaseButton);
-    rightGroup.append(copyButton, downloadButton, reloadButton, maximizeButton);
-    toolbar.append(leftGroup, rightGroup);
-
     const { width: baseWidth, height: baseHeight } = getSvgSize(svg);
-    let currentZoom = PLANTUML_ZOOM.default;
-    let defaultZoom = 1;
-    let zoomAnimationFrameId = null;
-    let resetZoomFrameId = null;
-    let layoutFrameId = null;
-    let hasManualZoom = false;
-    let lastAutoFitViewportWidth = 0;
-    let shouldForceScheduledReset = false;
-    let isPanning = false;
-    let activePointerId = null;
-    let panStartX = 0;
-    let panStartY = 0;
-    let panStartScrollLeft = 0;
-    let panStartScrollTop = 0;
-
-    svg.style.display = 'block';
-    svg.style.margin = '0 auto';
-    svg.style.maxWidth = 'none';
-
     const exportSvgMarkup = () => exportSvgMarkupFromElement(svg);
-
     const exportFileNames = () => createDiagramExportFileNames({
       currentFilePath: this.renderer.getSourceFilePath?.() ?? '',
       diagramKind: 'plantuml',
       sourceLine: shell.getAttribute('data-source-line') || '',
       targetPath: shell.dataset.plantumlTarget || '',
     });
-
-    const calculateDefaultZoom = () => {
-      const viewport = getFrameViewportSize(frame);
-      if (!Number.isFinite(baseWidth) || baseWidth <= 0 || viewport.width <= 0) {
-        return PLANTUML_ZOOM.default;
-      }
-
-      return clamp(Math.min(PLANTUML_ZOOM.default, viewport.width / baseWidth), PLANTUML_ZOOM.min, PLANTUML_ZOOM.max);
-    };
-
-    const applyZoom = (nextZoom) => {
-      currentZoom = clamp(nextZoom, PLANTUML_ZOOM.min, PLANTUML_ZOOM.max);
-
-      svg.style.width = `${baseWidth * currentZoom}px`;
-      svg.style.height = `${baseHeight * currentZoom}px`;
-      zoomLabel.textContent = `${Math.round(currentZoom * 100)}%`;
-
-      decreaseButton.disabled = currentZoom <= PLANTUML_ZOOM.min;
-      increaseButton.disabled = currentZoom >= PLANTUML_ZOOM.max;
-
-      const viewport = getFrameViewportSize(frame);
-      const isPannable = (baseWidth * currentZoom) > viewport.width || (baseHeight * currentZoom) > viewport.height;
-      frame.classList.toggle('is-pannable', isPannable);
-    };
-
-    const getViewportCenter = () => ({
-      x: frame.scrollLeft + (frame.clientWidth / 2),
-      y: frame.scrollTop + (frame.clientHeight / 2),
-    });
-
-    const restoreViewportCenter = (previousZoom, nextZoom, center) => {
-      if (previousZoom === 0) {
-        return;
-      }
-
-      const scale = nextZoom / previousZoom;
-      frame.scrollLeft = (center.x * scale) - (frame.clientWidth / 2);
-      frame.scrollTop = (center.y * scale) - (frame.clientHeight / 2);
-    };
-
-    const animateZoomTo = (nextZoom) => {
-      const targetZoom = clamp(nextZoom, PLANTUML_ZOOM.min, PLANTUML_ZOOM.max);
-      const startZoom = currentZoom;
-
-      if (targetZoom === startZoom) {
-        return;
-      }
-
-      const center = getViewportCenter();
-      const startedAt = performance.now();
-
-      if (zoomAnimationFrameId) {
-        cancelAnimationFrame(zoomAnimationFrameId);
-      }
-
-      const tick = (now) => {
-        const progress = clamp((now - startedAt) / PLANTUML_ZOOM.animationDurationMs, 0, 1);
-        const easedProgress = easeOutCubic(progress);
-        const animatedZoom = startZoom + ((targetZoom - startZoom) * easedProgress);
-
-        applyZoom(animatedZoom);
-        restoreViewportCenter(startZoom, animatedZoom, center);
-
-        if (progress < 1) {
-          zoomAnimationFrameId = requestAnimationFrame(tick);
-          return;
-        }
-
-        zoomAnimationFrameId = null;
-        applyZoom(targetZoom);
-        restoreViewportCenter(startZoom, targetZoom, center);
-      };
-
-      zoomAnimationFrameId = requestAnimationFrame(tick);
-    };
-
-    const zoomBy = (delta) => {
-      hasManualZoom = true;
-      animateZoomTo(currentZoom + delta);
-    };
-
-    const resetZoomToFit = ({ animate = false } = {}) => {
-      defaultZoom = calculateDefaultZoom();
-      hasManualZoom = false;
-      lastAutoFitViewportWidth = getFrameViewportSize(frame).width;
-
-      if (animate && Math.abs(defaultZoom - currentZoom) > 0.001) {
-        animateZoomTo(defaultZoom);
-        return;
-      }
-
-      if (zoomAnimationFrameId) {
-        cancelAnimationFrame(zoomAnimationFrameId);
-        zoomAnimationFrameId = null;
-      }
-
-      applyZoom(defaultZoom);
-      frame.scrollLeft = 0;
-      frame.scrollTop = 0;
-    };
-
-    const scheduleResetZoomToFit = ({ force = false } = {}) => {
-      shouldForceScheduledReset = shouldForceScheduledReset || force;
-      if (resetZoomFrameId) {
-        cancelAnimationFrame(resetZoomFrameId);
-      }
-      if (layoutFrameId) {
-        cancelAnimationFrame(layoutFrameId);
-      }
-
-      resetZoomFrameId = requestAnimationFrame(() => {
-        layoutFrameId = requestAnimationFrame(() => {
-          layoutFrameId = requestAnimationFrame(() => {
-            layoutFrameId = null;
-            resetZoomFrameId = null;
-            if (!shell.isConnected) {
-              return;
-            }
-
-            const shouldForce = shouldForceScheduledReset;
-            shouldForceScheduledReset = false;
-            const viewportWidth = getFrameViewportSize(frame).width;
-            const viewportChanged = Math.abs(viewportWidth - lastAutoFitViewportWidth) > 1;
-            if (!shouldForce && hasManualZoom) {
-              return;
-            }
-            if (!shouldForce && viewportWidth > 0 && lastAutoFitViewportWidth > 0 && !viewportChanged) {
-              return;
-            }
-
-            resetZoomToFit();
-          });
+    this.diagramChrome.mount(shell, {
+      baseHeight,
+      baseWidth,
+      diagramElement: svg,
+      exportFileNames,
+      exportSvgMarkup,
+      kind: 'plantuml',
+      onReload: () => {
+        this.resetShell(shell, {
+          clearCache: true,
+          message: 'Refreshing…',
         });
-      });
-    };
-
-    this.shellRefits.set(shell, scheduleResetZoomToFit);
-    this.attachShellResizeObserver(shell, frame, () => scheduleResetZoomToFit());
-
-    decreaseButton.addEventListener('click', () => zoomBy(-PLANTUML_ZOOM.step));
-    increaseButton.addEventListener('click', () => zoomBy(PLANTUML_ZOOM.step));
-    resetButton.addEventListener('click', () => {
-      scheduleResetZoomToFit({ force: true });
-    });
-    copyButton.addEventListener('click', async () => {
-      try {
-        const { pngFileName } = exportFileNames();
-        const pngBlob = await rasterizeSvgMarkupToPngBlob(exportSvgMarkup());
-        try {
-          await writeBlobToClipboard(pngBlob);
-          this.renderer.toastController?.show?.('Diagram copied');
-        } catch {
-          downloadBlob(pngBlob, pngFileName);
-          this.renderer.toastController?.show?.('Clipboard image copy is unavailable here. Downloaded PNG instead.');
-        }
-      } catch {
-        this.renderer.toastController?.show?.('Failed to copy diagram');
-      }
-    });
-    downloadButton.addEventListener('click', () => {
-      try {
-        const { svgFileName } = exportFileNames();
-        const svgBlob = new Blob([exportSvgMarkup()], { type: 'image/svg+xml;charset=utf-8' });
-        downloadBlob(svgBlob, svgFileName);
-        this.renderer.toastController?.show?.('Diagram download started');
-      } catch {
-        this.renderer.toastController?.show?.('Failed to download diagram');
-      }
-    });
-
-    const syncMaximizeButtonState = () => {
-      const isMaximized = shell.classList.contains('is-maximized');
-      setDiagramActionButtonIcon(maximizeButton, isMaximized ? 'restore' : 'maximize');
-      const label = isMaximized ? 'Restore diagram size' : 'Maximize diagram';
-      maximizeButton.setAttribute('aria-label', label);
-      maximizeButton.title = label;
-    };
-
-    const setMaximizedState = (shouldMaximize) => {
-      if (shouldMaximize) {
-        const activeContainer = this.syncActiveShell();
-        if (activeContainer && activeContainer !== shell) {
-          this.restoreShellMount(activeContainer);
-          activeContainer.classList.remove('is-maximized');
-          if (this.activeMaximizedShell === activeContainer) {
-            this.clearActiveShell();
-          }
-          this.shellRefits.get(activeContainer)?.();
-          const activeButton = activeContainer.querySelector('.plantuml-maximize-btn');
-          if (activeButton) {
-            setDiagramActionButtonIcon(activeButton, 'maximize');
-            activeButton.setAttribute('aria-label', 'Maximize diagram');
-            activeButton.title = 'Maximize diagram';
-          }
-        }
-
-        this.mountShellInMaximizedRoot(shell);
-        shell.classList.add('is-maximized');
-        this.activeMaximizedShell = shell;
-        document.body.classList.add('plantuml-maximized-open');
-        syncMaximizeButtonState();
-        scheduleResetZoomToFit({ force: true });
-        return;
-      }
-
-      this.restoreShellMount(shell);
-      shell.classList.remove('is-maximized');
-      if (this.activeMaximizedShell === shell) {
-        this.clearActiveShell();
-      }
-      if (!this.syncActiveShell()) {
-        document.body.classList.remove('plantuml-maximized-open');
-      }
-      syncMaximizeButtonState();
-      scheduleResetZoomToFit({ force: true });
-    };
-
-    reloadButton.addEventListener('click', () => {
-      this.resetShell(shell, {
-        clearCache: true,
-        message: 'Refreshing…',
-      });
-      this.enqueueShell(shell, { prioritize: true });
-    });
-
-    syncMaximizeButtonState();
-    maximizeButton.addEventListener('click', () => {
-      setMaximizedState(!shell.classList.contains('is-maximized'));
-    });
-
-    const stopPanning = () => {
-      if (!isPanning) {
-        return;
-      }
-
-      isPanning = false;
-      frame.classList.remove('is-dragging');
-      window.removeEventListener('pointerup', stopPanning, true);
-      window.removeEventListener('pointercancel', stopPanning, true);
-      window.removeEventListener('mouseup', stopPanning, true);
-      window.removeEventListener('touchend', stopPanning, true);
-      window.removeEventListener('touchcancel', stopPanning, true);
-      window.removeEventListener('blur', stopPanning, true);
-
-      if (activePointerId !== null && typeof frame.releasePointerCapture === 'function') {
-        try {
-          frame.releasePointerCapture(activePointerId);
-        } catch {
-          // Ignore capture release issues during drag end.
-        }
-      }
-
-      activePointerId = null;
-    };
-
-    frame.addEventListener('pointerdown', (event) => {
-      if (event.button !== 0 || !frame.classList.contains('is-pannable')) {
-        return;
-      }
-
-      if (zoomAnimationFrameId) {
-        cancelAnimationFrame(zoomAnimationFrameId);
-        zoomAnimationFrameId = null;
-      }
-
-      isPanning = true;
-      activePointerId = event.pointerId;
-      panStartX = event.clientX;
-      panStartY = event.clientY;
-      panStartScrollLeft = frame.scrollLeft;
-      panStartScrollTop = frame.scrollTop;
-
-      frame.classList.add('is-dragging');
-      window.addEventListener('pointerup', stopPanning, true);
-      window.addEventListener('pointercancel', stopPanning, true);
-      window.addEventListener('mouseup', stopPanning, true);
-      window.addEventListener('touchend', stopPanning, true);
-      window.addEventListener('touchcancel', stopPanning, true);
-      window.addEventListener('blur', stopPanning, true);
-      if (typeof frame.setPointerCapture === 'function') {
-        try {
-          frame.setPointerCapture(event.pointerId);
-        } catch {
-          // Safari can reject pointer capture during rapid layout transitions.
-        }
-      }
-      event.preventDefault();
-    });
-
-    frame.addEventListener('pointermove', (event) => {
-      if (!isPanning) {
-        return;
-      }
-
-      frame.scrollLeft = panStartScrollLeft - (event.clientX - panStartX);
-      frame.scrollTop = panStartScrollTop - (event.clientY - panStartY);
+        this.enqueueShell(shell, { prioritize: true });
+      },
+      sourceSelector: '.plantuml-source',
     });
-
-    frame.addEventListener('pointerup', stopPanning);
-    frame.addEventListener('pointercancel', stopPanning);
-    frame.addEventListener('lostpointercapture', stopPanning);
-    frame.addEventListener('mouseleave', stopPanning);
-    frame.addEventListener('mouseup', stopPanning);
-    frame.addEventListener('touchend', stopPanning);
-    frame.addEventListener('touchcancel', stopPanning);
-
-    frame.appendChild(svg);
-    const sourceNode = shell.querySelector('.plantuml-source');
-    shell.replaceChildren();
-    if (sourceNode) {
-      sourceNode.hidden = true;
-      shell.appendChild(sourceNode);
-    }
-    shell.append(toolbar, frame);
-
-    defaultZoom = calculateDefaultZoom();
-    applyZoom(defaultZoom);
-  }
-
-  createToolButton(label, ariaLabel, { icon = '' } = {}) {
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.className = 'plantuml-tool-btn ui-preview-action';
-    button.setAttribute('aria-label', ariaLabel);
-    button.title = ariaLabel;
-    if (icon) {
-      setDiagramActionButtonIcon(button, icon);
-    } else {
-      button.textContent = label;
-    }
-    return button;
   }
 }

package/src/client/application/preview-renderer.js

@@ -1,5 +1,6 @@
 import { MermaidPreviewHydrator } from './mermaid-preview-hydrator.js';
 import { PlantUmlPreviewHydrator } from './plantuml-preview-hydrator.js';
+import { DiagramChrome } from './diagram-chrome.js';
 import { IDLE_RENDER_TIMEOUT_MS } from './preview-diagram-utils.js';
 import { PreviewRenderExecutor } from './preview-render-executor.js';
 import { getRenderProfile, isLargeDocumentStats } from './preview-render-profile.js';
@@ -86,6 +87,9 @@ export class PreviewRenderer {
       this.plantUmlHydrator.scheduleActiveRefit();
     };
 
+    this.diagramChrome = new DiagramChrome({
+      toastController,
+    });
     this.mermaidHydrator = new MermaidPreviewHydrator(this, {
       loadFileSource,
     });
@@ -238,6 +242,7 @@ export class PreviewRenderer {
 
   destroy() {
     this.renderScheduler.destroy();
+    this.diagramChrome.destroy();
     this.mermaidHydrator.destroy();
     this.plantUmlHydrator.destroy();
     this.renderExecutor.destroy();
@@ -264,19 +269,25 @@ export class PreviewRenderer {
   }
 
   clearActivePlantUmlShell() {
-    this.plantUmlHydrator.clearActiveShell();
+    this.diagramChrome.clearActiveShell();
   }
 
   scheduleActiveMermaidRefit() {
-    this.mermaidHydrator.scheduleActiveRefit();
+    this.diagramChrome.scheduleActiveRefit({
+      kind: 'mermaid',
+      root: this.previewElement,
+    });
   }
 
   syncActivePlantUmlShell() {
-    return this.plantUmlHydrator.syncActiveShell();
+    return this.diagramChrome.syncActiveShell();
   }
 
   scheduleActivePlantUmlRefit() {
-    this.plantUmlHydrator.scheduleActiveRefit();
+    this.diagramChrome.scheduleActiveRefit({
+      kind: 'plantuml',
+      root: this.previewElement,
+    });
   }
 
   setHydrationPaused(paused) {

package/src/client/application/workspace-route-controller.js

@@ -74,6 +74,7 @@ export class WorkspaceRouteController {
     this.workspaceCoordinator = workspaceCoordinator;
     this.layoutController = layoutController;
     this.pendingTreeRevealPath = null;
+    this.preserveSidebarTabRoutePath = null;
   }
 
   async handleHashChange() {
@@ -125,7 +126,12 @@ export class WorkspaceRouteController {
       return;
     }
 
-    this.setSidebarTab('files');
+    if (this.preserveSidebarTabRoutePath === route.filePath) {
+      this.preserveSidebarTabRoutePath = null;
+    } else {
+      this.preserveSidebarTabRoutePath = null;
+      this.setSidebarTab('files');
+    }
     await this.openFile(route.filePath, { drawioMode: route.drawioMode || null });
     this.revealEditorMatch(route);
     this.requestPreviewRouteAnchor?.(route.anchor ?? null, route.filePath);
@@ -278,6 +284,10 @@ export class WorkspaceRouteController {
     }
   }
 
+  preserveSidebarTabForNextFileRoute(filePath) {
+    this.preserveSidebarTabRoutePath = filePath || null;
+  }
+
   cleanupSession() {
     this.workspaceCoordinator.cleanupSession();
     this.setSession(this.workspaceCoordinator.getSession());