collabmd 0.1.35 → 0.1.36

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

@@ -1,5 +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,
@@ -36,6 +43,8 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
     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;
@@ -49,10 +58,41 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
       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) {
@@ -228,6 +268,7 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
       this.svgInflightRequests.delete(source);
     }
 
+    this.disconnectShellResizeObserver(shell);
     this.shellRefits.delete(shell);
     if (this.activeMaximizedShell === shell) {
       this.restoreShellMount(shell);
@@ -261,27 +302,38 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
 
     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', 'Reset zoom');
-    const reloadButton = this.createToolButton('Reload', 'Reload diagram');
-    const maximizeButton = this.createToolButton('Max', 'Maximize diagram');
+    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');
-    setDiagramActionButtonIcon(reloadButton, 'refresh');
-    setDiagramActionButtonIcon(maximizeButton, 'maximize');
     const zoomLabel = document.createElement('span');
     zoomLabel.className = 'plantuml-zoom-label diagram-preview-zoom-label';
     zoomLabel.setAttribute('aria-live', 'polite');
 
-    toolbar.append(decreaseButton, zoomLabel, resetButton, increaseButton, reloadButton, maximizeButton);
+    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;
@@ -293,6 +345,15 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
     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) {
@@ -369,11 +430,14 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
     };
 
     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);
@@ -390,28 +454,73 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
       frame.scrollTop = 0;
     };
 
-    let resetZoomFrameId = null;
-    const scheduleResetZoomToFit = () => {
+    const scheduleResetZoomToFit = ({ force = false } = {}) => {
+      shouldForceScheduledReset = shouldForceScheduledReset || force;
       if (resetZoomFrameId) {
         cancelAnimationFrame(resetZoomFrameId);
       }
+      if (layoutFrameId) {
+        cancelAnimationFrame(layoutFrameId);
+      }
 
       resetZoomFrameId = requestAnimationFrame(() => {
-        resetZoomFrameId = null;
-        if (!shell.isConnected) {
-          return;
-        }
-
-        resetZoomToFit();
+        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.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', () => {
-      resetZoomToFit({ animate: true });
+      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 = () => {
@@ -445,7 +554,7 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
         this.activeMaximizedShell = shell;
         document.body.classList.add('plantuml-maximized-open');
         syncMaximizeButtonState();
-        scheduleResetZoomToFit();
+        scheduleResetZoomToFit({ force: true });
         return;
       }
 
@@ -458,7 +567,7 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
         document.body.classList.remove('plantuml-maximized-open');
       }
       syncMaximizeButtonState();
-      scheduleResetZoomToFit();
+      scheduleResetZoomToFit({ force: true });
     };
 
     reloadButton.addEventListener('click', () => {
@@ -481,6 +590,12 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
 
       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 {
@@ -511,7 +626,19 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
       panStartScrollTop = frame.scrollTop;
 
       frame.classList.add('is-dragging');
-      frame.setPointerCapture?.(event.pointerId);
+      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();
     });
 
@@ -527,6 +654,10 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
     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');
@@ -541,13 +672,17 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
     applyZoom(defaultZoom);
   }
 
-  createToolButton(label, ariaLabel) {
+  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;
-    button.textContent = label;
+    if (icon) {
+      setDiagramActionButtonIcon(button, icon);
+    } else {
+      button.textContent = label;
+    }
     return button;
   }
 }

package/src/client/application/preview-diagram-utils.js

@@ -165,20 +165,30 @@ export function createPlantUmlPlaceholderCard(key, message = 'Renders server-sid
   return card;
 }
 
-export function sanitizeSvgMarkup(svgMarkup) {
-  const parser = new DOMParser();
-  const documentNode = parser.parseFromString(svgMarkup, 'image/svg+xml');
-  const svg = documentNode.documentElement;
+const SHOW_COMMENT_NODE = 128;
+
+function removeSvgComments(rootElement) {
+  const walker = rootElement.ownerDocument.createTreeWalker(rootElement, SHOW_COMMENT_NODE);
+  const comments = [];
+
+  while (walker.nextNode()) {
+    comments.push(walker.currentNode);
+  }
 
-  if (!svg || svg.nodeName.toLowerCase() !== 'svg') {
+  comments.forEach((comment) => comment.remove());
+}
+
+export function sanitizeSvgElement(svgElement) {
+  if (!(svgElement instanceof SVGSVGElement)) {
     throw new Error('Renderer returned invalid SVG');
   }
 
-  documentNode.querySelectorAll('script, foreignObject').forEach((node) => {
+  removeSvgComments(svgElement);
+  svgElement.querySelectorAll('script, foreignObject').forEach((node) => {
     node.remove();
   });
 
-  Array.from(documentNode.querySelectorAll('*')).forEach((element) => {
+  [svgElement, ...Array.from(svgElement.querySelectorAll('*'))].forEach((element) => {
     Array.from(element.attributes).forEach((attribute) => {
       const name = attribute.name.toLowerCase();
       const value = attribute.value || '';
@@ -193,7 +203,37 @@ export function sanitizeSvgMarkup(svgMarkup) {
     });
   });
 
-  return svg.outerHTML;
+  return svgElement;
+}
+
+export function serializeSvgElement(svgElement) {
+  const sanitizedSvg = sanitizeSvgElement(svgElement);
+  return new XMLSerializer().serializeToString(sanitizedSvg);
+}
+
+function parseSvgMarkup(svgMarkup) {
+  const normalizedMarkup = String(svgMarkup ?? '')
+    .replace(/<!--[\s\S]*?-->/gu, '')
+    .replace(/&nbsp;/giu, '&#160;');
+
+  const parser = new DOMParser();
+  const documentNode = parser.parseFromString(normalizedMarkup, 'image/svg+xml');
+  const svg = documentNode.documentElement;
+  if (svg?.nodeName.toLowerCase() === 'svg' && !documentNode.querySelector('parsererror')) {
+    return svg;
+  }
+
+  const fallbackDocument = parser.parseFromString(normalizedMarkup, 'text/html');
+  return fallbackDocument.querySelector('svg');
+}
+
+export function sanitizeSvgMarkup(svgMarkup) {
+  const svg = parseSvgMarkup(svgMarkup);
+  if (!(svg instanceof SVGSVGElement)) {
+    throw new Error('Renderer returned invalid SVG');
+  }
+
+  return serializeSvgElement(svg);
 }
 
 export function shouldPreserveHydratedDiagram({ nextSource = '', nextTarget = '', preservedSource = '', preservedTarget = '' } = {}) {

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

@@ -20,6 +20,7 @@ export class PreviewRenderer {
     plantUmlRenderClient = null,
     previewContainer,
     previewElement,
+    toastController = null,
   }) {
     this.getContent = getContent;
     this.getFileList = getFileList;
@@ -33,6 +34,7 @@ export class PreviewRenderer {
     this.plantUmlRenderClient = plantUmlRenderClient;
     this.previewContainer = previewContainer;
     this.previewElement = previewElement;
+    this.toastController = toastController;
     this.renderHost = null;
 
     this.pendingRenderVersion = 0;

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

@@ -22,7 +22,10 @@ export async function ensureQuickSwitcherInstance(host) {
   if (!host.quickSwitcher) {
     host.quickSwitcher = new QuickSwitcherController({
       getFileList: () => host.fileExplorer.flatFiles,
-      onFileSelect: (filePath) => host.handleFileSelection(filePath, { closeSidebarOnMobile: true }),
+      onFileSelect: (filePath) => host.handleFileSelection(filePath, {
+        closeSidebarOnMobile: true,
+        revealInTree: true,
+      }),
     });
   }
 

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

@@ -24,6 +24,7 @@ export class WorkspaceRouteController {
     setSession,
     setSessionLoadToken,
     setSidebarTab,
+    setSidebarVisibility,
     setCurrentFilePath,
     showGitCommit,
     showGitDiff,
@@ -59,6 +60,7 @@ export class WorkspaceRouteController {
     this.setSession = setSession;
     this.setSessionLoadToken = setSessionLoadToken;
     this.setSidebarTab = setSidebarTab;
+    this.setSidebarVisibility = setSidebarVisibility ?? (() => {});
     this.setCurrentFilePath = setCurrentFilePath;
     this.showGitCommit = showGitCommit;
     this.showGitDiff = showGitDiff;
@@ -69,6 +71,7 @@ export class WorkspaceRouteController {
     this.videoEmbed = videoEmbed;
     this.workspaceCoordinator = workspaceCoordinator;
     this.layoutController = layoutController;
+    this.pendingTreeRevealPath = null;
   }
 
   async handleHashChange() {
@@ -246,6 +249,11 @@ export class WorkspaceRouteController {
   }
 
   async openFile(filePath, options = {}) {
+    const shouldRevealInTree = this.pendingTreeRevealPath === filePath;
+    if (shouldRevealInTree) {
+      this.pendingTreeRevealPath = null;
+    }
+
     this.imageLightbox?.close?.();
     this.gitPanel.setSelection();
     this.gitDiffView.hide();
@@ -254,6 +262,10 @@ export class WorkspaceRouteController {
     this.syncMainChrome({ mode: 'editor' });
     await this.workspaceCoordinator.openFile(filePath, options);
     this.setSession(this.workspaceCoordinator.getSession());
+
+    if (shouldRevealInTree) {
+      this.revealFileInTree(filePath, { clearSearch: true });
+    }
   }
 
   cleanupSession() {
@@ -261,14 +273,35 @@ export class WorkspaceRouteController {
     this.setSession(this.workspaceCoordinator.getSession());
   }
 
-  handleFileSelection(filePath, { closeSidebarOnMobile = false } = {}) {
-    if (closeSidebarOnMobile) {
+  handleFileSelection(filePath, { closeSidebarOnMobile = false, revealInTree = false } = {}) {
+    const currentRoute = this.navigation.getHashRoute?.() ?? null;
+    const isCanonicalCurrentFileRoute = (
+      currentRoute?.type === 'file'
+      && currentRoute.filePath === filePath
+      && !currentRoute.drawioMode
+    );
+    if (revealInTree) {
+      this.pendingTreeRevealPath = filePath;
+      if (isCanonicalCurrentFileRoute) {
+        this.pendingTreeRevealPath = null;
+        this.revealFileInTree(filePath, { clearSearch: true });
+        return;
+      }
+    }
+
+    if (closeSidebarOnMobile && !revealInTree) {
       this.closeSidebarOnMobile();
     }
 
     this.navigation.navigateToFile(filePath);
   }
 
+  revealFileInTree(filePath, { clearSearch = false } = {}) {
+    this.setSidebarTab('files');
+    this.setSidebarVisibility(true);
+    this.fileExplorer.revealFile?.(filePath, { clearSearch });
+  }
+
   resetPreviewSurface() {
     this.imageLightbox?.close?.();
     this.previewRenderer.setHydrationPaused(false);

package/src/client/application/workspace-state-store.js

@@ -17,6 +17,7 @@ export class WorkspaceStateStore {
       gitRepoAvailable: false,
       globalUsers: [],
       isTabActive: false,
+      presencePanelOpen: false,
       sessionLoadToken: 0,
       ...initialState,
     };

package/src/client/bootstrap/collabmd-app-shell.js

@@ -100,9 +100,14 @@ export class CollabMdAppShell {
   handleGitCommitSubmit(...args) { return gitFeature.handleGitCommitSubmit.apply(this, args); }
   updateGlobalUsers(...args) { return presenceFeature.updateGlobalUsers.apply(this, args); }
   updateFileAwareness(...args) { return presenceFeature.updateFileAwareness.apply(this, args); }
+  closePresencePanel(...args) { return presenceFeature.closePresencePanel.apply(this, args); }
+  openPresencePanel(...args) { return presenceFeature.openPresencePanel.apply(this, args); }
   renderPresence(...args) { return presenceFeature.renderPresence.apply(this, args); }
   renderAvatars(...args) { return presenceFeature.renderAvatars.apply(this, args); }
+  renderPresencePanel(...args) { return presenceFeature.renderPresencePanel.apply(this, args); }
+  startFollowingUser(...args) { return presenceFeature.startFollowingUser.apply(this, args); }
   toggleFollowUser(...args) { return presenceFeature.toggleFollowUser.apply(this, args); }
+  togglePresencePanel(...args) { return presenceFeature.togglePresencePanel.apply(this, args); }
   stopFollowingUser(...args) { return presenceFeature.stopFollowingUser.apply(this, args); }
   syncFollowedUser(...args) { return presenceFeature.syncFollowedUser.apply(this, args); }
   followUserCursor(...args) { return presenceFeature.followUserCursor.apply(this, args); }
@@ -368,6 +373,7 @@ export class CollabMdAppShell {
       plantUmlRenderClient: this.plantUmlApiClient,
       previewContainer: this.elements.previewContainer,
       previewElement: this.elements.previewContent,
+      toastController: this.toastController,
     });
     this.themeController = new ThemeController({ onChange: (theme) => this.handleThemeChange(theme) });
     this.layoutController = new LayoutController({
@@ -649,6 +655,7 @@ export class CollabMdAppShell {
         this.sessionLoadToken = value;
       },
       setSidebarTab: (value) => this.setSidebarTab(value),
+      setSidebarVisibility: (showSidebar) => this.setSidebarVisibility(showSidebar),
       showGitCommit: (route) => this.showGitCommit(route),
       showGitDiff: (route) => this.showGitDiff(route),
       showGitFileHistory: (route) => this.showGitFileHistory(route),
@@ -696,6 +703,8 @@ export class CollabMdAppShell {
   set gitRepoAvailable(value) { this.stateStore.set('gitRepoAvailable', value); }
   get activeSidebarTab() { return this.stateStore.get('activeSidebarTab'); }
   set activeSidebarTab(value) { this.stateStore.set('activeSidebarTab', value); }
+  get presencePanelOpen() { return this.stateStore.get('presencePanelOpen'); }
+  set presencePanelOpen(value) { this.stateStore.set('presencePanelOpen', value); }
   get followedUserClientId() { return this.stateStore.get('followedUserClientId'); }
   set followedUserClientId(value) { this.stateStore.set('followedUserClientId', value); }
   get followedCursorSignature() { return this.stateStore.get('followedCursorSignature'); }

package/src/client/domain/diagram-action-icons.js

@@ -1,10 +1,29 @@
 const DIAGRAM_ACTION_ICONS = {
+  copy: `
+    <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+      <path d="M5.5 5.5h6.8v8h-6.8z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/>
+      <path d="M3.7 10.5H3a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v.7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/>
+    </svg>
+  `,
+  download: `
+    <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+      <path d="M8 2.2v7.2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/>
+      <path d="M5.3 7.2 8 10l2.7-2.8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/>
+      <path d="M3 12.8h10" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/>
+    </svg>
+  `,
   edit: `
     <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
       <path d="M11.8 1.8a1.5 1.5 0 0 1 2.1 2.1l-7.2 7.2-3.2.9.9-3.2z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/>
       <path d="M10.7 2.9l2.4 2.4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/>
     </svg>
   `,
+  fit: `
+    <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+      <path d="M5.5 6.2V3H2.3M10.5 6.2V3h3.2M10.5 9.8V13h3.2M5.5 9.8V13H2.3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/>
+      <path d="M5.5 6.2h5M5.5 9.8h5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/>
+    </svg>
+  `,
   maximize: `
     <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
       <path d="M6 2H2v4M10 2h4v4M14 10v4h-4M2 10v4h4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/>
@@ -32,10 +51,12 @@ export function setDiagramActionButtonIcon(button, iconName) {
   const markup = DIAGRAM_ACTION_ICONS[iconName];
   if (!markup) {
     button.classList.remove('is-icon-only');
+    button.classList.remove('ui-preview-action--icon-only');
     return;
   }
 
   button.classList.add('is-icon-only');
+  button.classList.add('ui-preview-action--icon-only');
   button.dataset.icon = iconName;
   button.innerHTML = markup.trim();
 }

package/src/client/domain/excalidraw-api-scene-sync.js

@@ -0,0 +1,70 @@
+function normalizeBinaryFileVersion(value) {
+  return Number.isFinite(Number(value)) ? Number(value) : null;
+}
+
+function normalizeBinaryFileDataUrl(value) {
+  return typeof value === 'string' ? value : '';
+}
+
+export function hasBinaryFilePayloadConflict(currentFile, nextFile) {
+  return (
+    normalizeBinaryFileVersion(currentFile?.version) !== normalizeBinaryFileVersion(nextFile?.version)
+    || normalizeBinaryFileDataUrl(currentFile?.dataURL) !== normalizeBinaryFileDataUrl(nextFile?.dataURL)
+  );
+}
+
+export function buildExcalidrawFileSyncPlan(currentFiles = {}, nextFiles = {}) {
+  const missingFiles = [];
+  const conflictingFileIds = [];
+
+  Object.entries(nextFiles || {}).forEach(([fileId, nextFile]) => {
+    const currentFile = currentFiles?.[fileId];
+    if (!currentFile) {
+      missingFiles.push(nextFile);
+      return;
+    }
+
+    if (hasBinaryFilePayloadConflict(currentFile, nextFile)) {
+      conflictingFileIds.push(fileId);
+    }
+  });
+
+  return {
+    conflictingFileIds,
+    missingFiles,
+    requiresRemount: conflictingFileIds.length > 0,
+  };
+}
+
+export function applySceneUpdateWithFiles(api, {
+  captureUpdate,
+  files = {},
+  sceneUpdate,
+} = {}, {
+  onFileConflict = () => {},
+} = {}) {
+  const currentFiles = api?.getFiles?.() || {};
+  const syncPlan = buildExcalidrawFileSyncPlan(currentFiles, files);
+
+  if (syncPlan.requiresRemount) {
+    onFileConflict(syncPlan);
+    return {
+      ...syncPlan,
+      applied: false,
+    };
+  }
+
+  if (syncPlan.missingFiles.length > 0) {
+    api.addFiles(syncPlan.missingFiles);
+  }
+
+  api.updateScene({
+    ...sceneUpdate,
+    captureUpdate,
+  });
+
+  return {
+    ...syncPlan,
+    applied: true,
+  };
+}