collabmd 0.1.44 → 0.1.45

package/src/client/application/diagram-chrome.js

@@ -1,6 +1,5 @@
 import { setDiagramActionButtonIcon } from '../domain/diagram-action-icons.js';
 import {
-  downloadBlob,
   rasterizeSvgMarkupToPngBlob,
   writeBlobToClipboard,
 } from './diagram-preview-export.js';
@@ -9,13 +8,15 @@ import {
   getFrameViewportSize,
 } from './preview-diagram-utils.js';
 import { clamp } from '../domain/vault-utils.js';
+import { downloadBlob } from '../browser-utils.js';
 
-export const DIAGRAM_CHROME_ZOOM = Object.freeze({
+const DIAGRAM_CHROME_ZOOM = Object.freeze({
   animationDurationMs: 160,
   default: 1,
   max: 3,
   min: 0.1,
   step: 0.1,
+  wheelSensitivity: 0.01,
 });
 
 const DIAGRAM_CHROME_ZOOM_POLICY = Object.freeze({
@@ -80,7 +81,6 @@ export class DiagramChrome {
     this.shellControllers = new WeakMap();
     this.shellViewStates = new WeakMap();
     this.shellRefits = new WeakMap();
-    this.resizeFrameId = null;
   }
 
   destroy() {
@@ -89,10 +89,6 @@ export class DiagramChrome {
     this.resizeObservers.clear();
     this.maximizedRoots.forEach((root) => root.remove());
     this.maximizedRoots.clear();
-    if (this.resizeFrameId) {
-      this.window.cancelAnimationFrame(this.resizeFrameId);
-      this.resizeFrameId = null;
-    }
     this.activeMaximizedShell = null;
   }
 
@@ -186,17 +182,6 @@ export class DiagramChrome {
     });
   }
 
-  scheduleActiveRefitOnNextFrame() {
-    if (this.resizeFrameId) {
-      this.window.cancelAnimationFrame(this.resizeFrameId);
-    }
-
-    this.resizeFrameId = this.window.requestAnimationFrame(() => {
-      this.resizeFrameId = null;
-      this.scheduleActiveRefit();
-    });
-  }
-
   ensureMaximizedRoot(kind) {
     const config = getKindConfig(kind);
     const existing = this.maximizedRoots.get(kind);
@@ -282,12 +267,11 @@ export class DiagramChrome {
     const toolbar = this.document.createElement('div');
     toolbar.className = config.toolbarClassName;
     const leftGroup = this.document.createElement('div');
-    leftGroup.className = 'diagram-preview-toolbar-group diagram-preview-toolbar-group--zoom';
+    leftGroup.className = 'diagram-preview-toolbar-group';
     const rightGroup = this.document.createElement('div');
     rightGroup.className = 'diagram-preview-toolbar-group diagram-preview-toolbar-group--actions';
 
-    const decreaseButton = this.createButton(kind, '-', 'Zoom out');
-    decreaseButton.textContent = '−';
+    const decreaseButton = this.createButton(kind, '−', 'Zoom out');
     const increaseButton = this.createButton(kind, '+', 'Zoom in');
     const resetButton = this.createButton(kind, '', 'Reset zoom', { icon: 'fit' });
     const copyButton = this.createButton(kind, '', 'Copy image', { icon: 'copy' });
@@ -470,11 +454,11 @@ export class DiagramChrome {
     }
 
     let currentZoom = zoomPolicy.default;
-    let defaultZoom = 1;
     let zoomAnimationFrameId = null;
+    let zoomAnimationTarget = null;
     let resetZoomFrameId = null;
-    let layoutFrameId = null;
     let replacementFrameId = null;
+    let pinchState = null;
     let hasManualZoom = Boolean(
       previousViewState?.hasManualZoom
       || previousViewState?.scrollLeft > 0
@@ -484,15 +468,7 @@ export class DiagramChrome {
     const hasRestorableViewState = Number.isFinite(previousViewState?.zoom);
     let lastAutoFitViewportWidth = hasInitialViewport ? previousViewportWidth : 0;
     let shouldForceScheduledReset = false;
-    let isPanning = false;
-    let activePointerId = null;
-    let panStartX = 0;
-    let panStartY = 0;
-    let panStartScrollLeft = 0;
-    let panStartScrollTop = 0;
-
-    diagramElement.style.display = 'block';
-    diagramElement.style.margin = '0 auto';
+
     diagramElement.style.maxWidth = 'none';
 
     const calculateDefaultZoom = () => {
@@ -518,52 +494,56 @@ export class DiagramChrome {
       decreaseButton.disabled = currentZoom <= zoomPolicy.min;
       increaseButton.disabled = currentZoom >= zoomPolicy.max;
 
-      const viewport = getFrameViewportSize(frame);
-      const isPannable = (baseWidth * currentZoom) > viewport.width || (baseHeight * currentZoom) > viewport.height;
-      frame.classList.toggle('is-pannable', isPannable);
-      diagramElement.style.margin = isPannable ? '0' : '0 auto';
     };
 
-    // ponytail: size from the current viewport for the first paint; hidden shells refit later.
     const initialZoom = hasRestorableViewState
       ? clamp(previousViewState.zoom, zoomPolicy.min, zoomPolicy.max)
       : hasInitialViewport
       ? clamp(previousViewportWidth / baseWidth, zoomPolicy.min, zoomPolicy.fitMax)
       : zoomPolicy.default;
-    applyZoom(initialZoom);
 
     const getViewportCenter = () => ({
       x: frame.scrollLeft + (frame.clientWidth / 2),
       y: frame.scrollTop + (frame.clientHeight / 2),
     });
 
-    const restoreViewportCenter = (previousZoom, nextZoom, center) => {
+    const restoreViewportPoint = (previousZoom, nextZoom, contentPoint, viewportPoint) => {
       if (previousZoom === 0) {
         return;
       }
 
       const scale = nextZoom / previousZoom;
-      frame.scrollLeft = (center.x * scale) - (frame.clientWidth / 2);
-      frame.scrollTop = (center.y * scale) - (frame.clientHeight / 2);
+      frame.scrollLeft = (contentPoint.x * scale) - viewportPoint.x;
+      frame.scrollTop = (contentPoint.y * scale) - viewportPoint.y;
+    };
+
+    const restoreViewportCenter = (previousZoom, nextZoom, center) => {
+      restoreViewportPoint(previousZoom, nextZoom, center, {
+        x: frame.clientWidth / 2,
+        y: frame.clientHeight / 2,
+      });
     };
 
     const animateZoomTo = (nextZoom) => {
       const targetZoom = clamp(nextZoom, zoomPolicy.min, zoomPolicy.max);
+      if (zoomAnimationFrameId) {
+        zoomAnimationTarget = targetZoom;
+        return;
+      }
+
       const startZoom = currentZoom;
       if (targetZoom === startZoom) {
         return;
       }
 
+      zoomAnimationTarget = targetZoom;
       const center = getViewportCenter();
       const startedAt = performance.now();
-      if (zoomAnimationFrameId) {
-        this.window.cancelAnimationFrame(zoomAnimationFrameId);
-      }
 
       const tick = (now) => {
         const progress = clamp((now - startedAt) / zoomPolicy.animationDurationMs, 0, 1);
         const easedProgress = easeOutCubic(progress);
-        const animatedZoom = startZoom + ((targetZoom - startZoom) * easedProgress);
+        const animatedZoom = startZoom + ((zoomAnimationTarget - startZoom) * easedProgress);
         applyZoom(animatedZoom);
         restoreViewportCenter(startZoom, animatedZoom, center);
 
@@ -573,33 +553,35 @@ export class DiagramChrome {
         }
 
         zoomAnimationFrameId = null;
-        applyZoom(targetZoom);
-        restoreViewportCenter(startZoom, targetZoom, center);
+        const completedZoom = zoomAnimationTarget;
+        zoomAnimationTarget = null;
+        applyZoom(completedZoom);
+        restoreViewportCenter(startZoom, completedZoom, center);
       };
 
       zoomAnimationFrameId = this.window.requestAnimationFrame(tick);
     };
 
+    const cancelZoomAnimation = () => {
+      if (zoomAnimationFrameId) {
+        this.window.cancelAnimationFrame(zoomAnimationFrameId);
+        zoomAnimationFrameId = null;
+      }
+
+      zoomAnimationTarget = null;
+    };
+
     const zoomBy = (delta) => {
       hasManualZoom = true;
-      animateZoomTo(currentZoom + delta);
+      animateZoomTo((zoomAnimationTarget ?? currentZoom) + delta);
     };
 
-    const resetZoomToFit = ({ animate = false } = {}) => {
-      defaultZoom = calculateDefaultZoom();
+    const resetZoomToFit = () => {
+      const defaultZoom = calculateDefaultZoom();
       hasManualZoom = false;
       lastAutoFitViewportWidth = getFrameViewportSize(frame).width;
-
-      if (animate && Math.abs(defaultZoom - currentZoom) > 0.001) {
-        animateZoomTo(defaultZoom);
-        return;
-      }
-
-      if (zoomAnimationFrameId) {
-        this.window.cancelAnimationFrame(zoomAnimationFrameId);
-        zoomAnimationFrameId = null;
-      }
-
+      pinchState = null;
+      cancelZoomAnimation();
       applyZoom(defaultZoom);
       frame.scrollLeft = 0;
       frame.scrollTop = 0;
@@ -610,40 +592,133 @@ export class DiagramChrome {
       if (resetZoomFrameId) {
         this.window.cancelAnimationFrame(resetZoomFrameId);
       }
-      if (layoutFrameId) {
-        this.window.cancelAnimationFrame(layoutFrameId);
-      }
 
       resetZoomFrameId = this.window.requestAnimationFrame(() => {
-        layoutFrameId = this.window.requestAnimationFrame(() => {
-          layoutFrameId = this.window.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();
-          });
-        });
+        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();
       });
     };
 
     const resizeObserver = this.attachShellResizeObserver(shell, frame, () => scheduleResetZoomToFit());
 
+    const getFrameViewportPoint = (clientX, clientY) => {
+      const rect = frame.getBoundingClientRect();
+      return {
+        x: Number(clientX) - rect.left,
+        y: Number(clientY) - rect.top,
+      };
+    };
+
+    const getPinchGesture = (touches) => {
+      if (!touches || touches.length !== 2) {
+        return null;
+      }
+
+      const first = touches[0];
+      const second = touches[1];
+      const center = getFrameViewportPoint(
+        (first.clientX + second.clientX) / 2,
+        (first.clientY + second.clientY) / 2,
+      );
+      const distance = Math.hypot(
+        second.clientX - first.clientX,
+        second.clientY - first.clientY,
+      );
+      if (!Number.isFinite(distance) || distance <= 0) {
+        return null;
+      }
+
+      return { center, distance };
+    };
+
+    const startPinch = (touches) => {
+      const gesture = getPinchGesture(touches);
+      if (!gesture) {
+        return false;
+      }
+
+      cancelZoomAnimation();
+      pinchState = {
+        contentPoint: {
+          x: frame.scrollLeft + gesture.center.x,
+          y: frame.scrollTop + gesture.center.y,
+        },
+        distance: gesture.distance,
+        zoom: currentZoom,
+      };
+      return true;
+    };
+
+    const updatePinch = (touches) => {
+      const gesture = getPinchGesture(touches);
+      if (!gesture) {
+        return false;
+      }
+      if (!pinchState && !startPinch(touches)) {
+        return false;
+      }
+
+      hasManualZoom = true;
+      applyZoom(pinchState.zoom * (gesture.distance / pinchState.distance));
+      restoreViewportPoint(
+        pinchState.zoom,
+        currentZoom,
+        pinchState.contentPoint,
+        gesture.center,
+      );
+      return true;
+    };
+
     decreaseButton.addEventListener('click', () => zoomBy(-zoomPolicy.step));
     increaseButton.addEventListener('click', () => zoomBy(zoomPolicy.step));
+    frame.addEventListener('wheel', (event) => {
+      if (!event.ctrlKey) {
+        return;
+      }
+
+      event.preventDefault();
+      const deltaY = Number.isFinite(event.deltaY) ? event.deltaY : 0;
+      const wheelDelta = clamp(
+        -deltaY * zoomPolicy.wheelSensitivity,
+        -zoomPolicy.step / 2,
+        zoomPolicy.step / 2,
+      );
+      if (wheelDelta !== 0) {
+        zoomBy(wheelDelta);
+      }
+    }, { passive: false });
+    frame.addEventListener('touchstart', (event) => {
+      if (event.touches.length === 2) {
+        startPinch(event.touches);
+      }
+    }, { passive: true });
+    frame.addEventListener('touchmove', (event) => {
+      if (event.touches.length === 2 && updatePinch(event.touches)) {
+        event.preventDefault();
+      }
+    }, { passive: false });
+    const finishPinch = (event) => {
+      if (event.touches.length !== 2) {
+        pinchState = null;
+      }
+    };
+    frame.addEventListener('touchend', finishPinch);
+    frame.addEventListener('touchcancel', finishPinch);
     resetButton.addEventListener('click', () => {
       scheduleResetZoomToFit({ force: true });
     });
@@ -660,82 +735,6 @@ export class DiagramChrome {
       );
     });
 
-    const stopPanning = () => {
-      if (!isPanning) {
-        return;
-      }
-
-      isPanning = false;
-      frame.classList.remove('is-dragging');
-      this.window.removeEventListener('pointerup', stopPanning, true);
-      this.window.removeEventListener('pointercancel', stopPanning, true);
-      this.window.removeEventListener('mouseup', stopPanning, true);
-      this.window.removeEventListener('touchend', stopPanning, true);
-      this.window.removeEventListener('touchcancel', stopPanning, true);
-      this.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) {
-        this.window.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');
-      this.window.addEventListener('pointerup', stopPanning, true);
-      this.window.addEventListener('pointercancel', stopPanning, true);
-      this.window.addEventListener('mouseup', stopPanning, true);
-      this.window.addEventListener('touchend', stopPanning, true);
-      this.window.addEventListener('touchcancel', stopPanning, true);
-      this.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);
-    });
-
-    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(diagramElement);
     const sourceNode = sourceSelector ? shell.querySelector(sourceSelector) : null;
     const nextChildren = sourceNode ? [sourceNode, toolbar, frame] : [toolbar, frame];
@@ -789,16 +788,12 @@ export class DiagramChrome {
 
     const controller = {
       destroy: () => {
-        stopPanning();
         if (zoomAnimationFrameId) {
           this.window.cancelAnimationFrame(zoomAnimationFrameId);
         }
         if (resetZoomFrameId) {
           this.window.cancelAnimationFrame(resetZoomFrameId);
         }
-        if (layoutFrameId) {
-          this.window.cancelAnimationFrame(layoutFrameId);
-        }
         if (replacementFrameId) {
           this.window.cancelAnimationFrame(replacementFrameId);
         }

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

@@ -4,10 +4,13 @@ import {
   stripVaultFileExtension,
 } from '../../domain/file-kind.js';
 import { getVaultPathLeaf } from '../domain/vault-paths.js';
-import { downloadBlob } from '../browser-utils.js';
-import { sanitizeSvgMarkup, serializeSvgElement } from './preview-diagram-utils.js';
-
-export { downloadBlob };
+import {
+  encodeSvgDataUrl,
+  loadImage,
+  resolveSvgDimensions,
+  sanitizeSvgMarkup,
+  serializeSvgElement,
+} from './preview-diagram-utils.js';
 
 const LIGHT_EXPORT_MERMAID_CONFIG = Object.freeze({
   htmlLabels: false,
@@ -28,41 +31,11 @@ const MERMAID_INIT_DIRECTIVE_PATTERN = /^\s*%%\{\s*(?:init|initialize)\s*:[\s\S]
 
 let mermaidExportCounter = 0;
 
-function encodeSvgDataUrl(svgMarkup) {
-  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgMarkup)}`;
-}
-
 function createMermaidExportId() {
   mermaidExportCounter += 1;
   return `mermaid-export-${mermaidExportCounter.toString(36)}`;
 }
 
-function resolveSvgDimensions(svgElement) {
-  const widthAttr = Number.parseFloat(svgElement.getAttribute('width') || '');
-  const heightAttr = Number.parseFloat(svgElement.getAttribute('height') || '');
-  const viewBox = svgElement.getAttribute('viewBox') || '';
-  const viewBoxParts = viewBox.split(/\s+/u).map((value) => Number.parseFloat(value));
-
-  return {
-    height: Number.isFinite(heightAttr) && heightAttr > 0
-      ? heightAttr
-      : (Number.isFinite(viewBoxParts[3]) && viewBoxParts[3] > 0 ? viewBoxParts[3] : 800),
-    width: Number.isFinite(widthAttr) && widthAttr > 0
-      ? widthAttr
-      : (Number.isFinite(viewBoxParts[2]) && viewBoxParts[2] > 0 ? viewBoxParts[2] : 1200),
-  };
-}
-
-function loadImage(src) {
-  return new Promise((resolve, reject) => {
-    const image = new Image();
-    image.decoding = 'async';
-    image.addEventListener('load', () => resolve(image), { once: true });
-    image.addEventListener('error', () => reject(new Error(`Failed to load image: ${src}`)), { once: true });
-    image.src = src;
-  });
-}
-
 async function canvasToPngBlob(canvas) {
   if (typeof canvas.toBlob === 'function') {
     const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));

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

@@ -8,7 +8,6 @@ import {
   syncAttribute,
   normalizeDiagramError,
 } from './preview-diagram-utils.js';
-import { resolveApiUrl } from '../domain/runtime-paths.js';
 
 function datasetKeyToAttributeName(datasetKey) {
   return `data-${datasetKey.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)}`;
@@ -18,7 +17,6 @@ export class DiagramPreviewHydrator {
   constructor(renderer, {
     batchSize,
     datasetKeys,
-    fetchFn = null,
     loadFileSource = null,
     filePathLabel,
     requestIdleRenderFn = requestIdleRender,
@@ -32,7 +30,7 @@ export class DiagramPreviewHydrator {
     this.renderer = renderer;
     this.batchSize = batchSize;
     this.datasetKeys = datasetKeys;
-    this.loadFileSource = loadFileSource ?? this.createLegacyFileSourceLoader(fetchFn);
+    this.loadFileSource = loadFileSource;
     this.filePathLabel = filePathLabel;
     this.requestIdleRenderFn = requestIdleRenderFn;
     this.cancelIdleRenderFn = cancelIdleRenderFn;
@@ -58,22 +56,6 @@ export class DiagramPreviewHydrator {
     this.fileInflightRequests = new Map();
   }
 
-  createLegacyFileSourceLoader(fetchFn) {
-    if (typeof fetchFn !== 'function') {
-      return null;
-    }
-
-    return async (filePath) => {
-      const response = await fetchFn(resolveApiUrl(`/file?path=${encodeURIComponent(filePath)}`));
-      const payload = await response.json().catch(() => ({}));
-      if (!response.ok || payload?.ok === false) {
-        throw new Error(payload?.error || `Failed to load ${this.filePathLabel.toLowerCase()} source`);
-      }
-
-      return String(payload?.content ?? '');
-    };
-  }
-
   destroy() {
     this.cancelHydration();
     this.clearPreservedShells();

package/src/client/application/markdown-frontmatter.js

@@ -2,8 +2,6 @@ import { dump as dumpYaml } from 'js-yaml';
 
 import { escapeHtml } from '../domain/vault-utils.js';
 
-export { extractYamlFrontmatter } from '../../domain/yaml-frontmatter.js';
-
 function isPlainObject(value) {
   return Object.prototype.toString.call(value) === '[object Object]';
 }

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

@@ -12,7 +12,7 @@ import {
 } from './preview-diagram-utils.js';
 
 export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
-  constructor(renderer, { fetchFn = null, loadFileSource = null } = {}) {
+  constructor(renderer, { loadFileSource = null } = {}) {
     super(renderer, {
       batchSize: MERMAID_BATCH_SIZE,
       datasetKeys: {
@@ -26,24 +26,17 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
         sourceLineEnd: 'sourceLineEnd',
         target: 'mermaidTarget',
       },
-      fetchFn,
       filePathLabel: 'Mermaid',
       loadFileSource,
       shellClassName: 'mermaid-shell',
       sourceClassName: 'mermaid-source',
     });
-    this.renderer = renderer;
     this.currentTheme = document.documentElement?.dataset.theme === 'light' ? 'light' : 'dark';
     this.diagramChrome = renderer.diagramChrome;
     this.loader = null;
     this.runtime = null;
   }
 
-  destroy() {
-    this.cancelHydration();
-    this.clearPreservedShells();
-  }
-
   cancelHydration({ preserveActiveShell = false } = {}) {
     super.cancelHydration();
     if (!preserveActiveShell) {
@@ -360,10 +353,4 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
     shell._diagramRenderedSource = renderedSource;
   }
 
-  scheduleActiveRefit() {
-    this.diagramChrome?.scheduleActiveRefit?.({
-      kind: 'mermaid',
-      root: this.renderer.previewElement,
-    });
-  }
 }

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

@@ -32,18 +32,12 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
       shellClassName: 'plantuml-shell',
       sourceClassName: 'plantuml-source',
     });
-    this.renderer = renderer;
     this.diagramChrome = renderer.diagramChrome;
     this.renderClient = renderClient;
     this.svgCache = new Map();
     this.svgInflightRequests = new Map();
   }
 
-  destroy() {
-    this.cancelHydration();
-    this.clearPreservedShells();
-  }
-
   cancelHydration({ preserveActiveShell = false } = {}) {
     super.cancelHydration();
     if (!preserveActiveShell) {
@@ -51,10 +45,6 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
     }
   }
 
-  scheduleActiveRefit() {
-    this.diagramChrome?.scheduleActiveRefitOnNextFrame?.();
-  }
-
   handleReconcile({ restoredMaximizedShell }) {
     if (restoredMaximizedShell) {
       document.body.classList.add('plantuml-maximized-open');