collabmd 0.1.43 → 0.1.45

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

@@ -3,7 +3,14 @@ import {
   isPlantUmlFilePath,
   stripVaultFileExtension,
 } from '../../domain/file-kind.js';
-import { sanitizeSvgMarkup, serializeSvgElement } from './preview-diagram-utils.js';
+import { getVaultPathLeaf } from '../domain/vault-paths.js';
+import {
+  encodeSvgDataUrl,
+  loadImage,
+  resolveSvgDimensions,
+  sanitizeSvgMarkup,
+  serializeSvgElement,
+} from './preview-diagram-utils.js';
 
 const LIGHT_EXPORT_MERMAID_CONFIG = Object.freeze({
   htmlLabels: false,
@@ -24,49 +31,11 @@ const MERMAID_INIT_DIRECTIVE_PATTERN = /^\s*%%\{\s*(?:init|initialize)\s*:[\s\S]
 
 let mermaidExportCounter = 0;
 
-function getPathLeaf(pathValue) {
-  return String(pathValue ?? '')
-    .replace(/\/+$/u, '')
-    .split('/')
-    .filter(Boolean)
-    .pop() || '';
-}
-
-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'));
@@ -155,12 +124,12 @@ export function createDiagramExportBaseName({
   sourceLine = '',
   targetPath = '',
 } = {}) {
-  const targetLeaf = getPathLeaf(targetPath);
+  const targetLeaf = getVaultPathLeaf(targetPath);
   if (targetLeaf) {
     return stripVaultFileExtension(targetLeaf) || `${diagramKind}-diagram`;
   }
 
-  const currentLeaf = getPathLeaf(currentFilePath);
+  const currentLeaf = getVaultPathLeaf(currentFilePath);
   const currentStem = stripVaultFileExtension(currentLeaf) || 'document';
   const isStandaloneDiagram = (
     (diagramKind === 'mermaid' && isMermaidFilePath(currentFilePath))
@@ -277,20 +246,6 @@ export async function rasterizeSvgMarkupToPngBlob(svgMarkup) {
   return canvasToPngBlob(canvas);
 }
 
-export function downloadBlob(blob, fileName) {
-  const downloadUrl = URL.createObjectURL(blob);
-  const anchor = document.createElement('a');
-  anchor.href = downloadUrl;
-  anchor.download = fileName;
-  anchor.style.display = 'none';
-  document.body.appendChild(anchor);
-  anchor.click();
-  window.setTimeout(() => {
-    anchor.remove();
-    URL.revokeObjectURL(downloadUrl);
-  }, 30_000);
-}
-
 export async function writeBlobToClipboard(blob) {
   if (typeof ClipboardItem !== 'function' || !navigator.clipboard?.write) {
     throw new Error('Clipboard image copy is unavailable');

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

@@ -1,12 +1,13 @@
 import {
   cancelIdleRender,
+  createDiagramErrorPlaceholderCard,
   IDLE_RENDER_TIMEOUT_MS,
   isNearViewport,
   requestIdleRender,
   shouldPreserveHydratedDiagram,
   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()}`)}`;
@@ -16,7 +17,6 @@ export class DiagramPreviewHydrator {
   constructor(renderer, {
     batchSize,
     datasetKeys,
-    fetchFn = null,
     loadFileSource = null,
     filePathLabel,
     requestIdleRenderFn = requestIdleRender,
@@ -30,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;
@@ -49,33 +49,21 @@ export class DiagramPreviewHydrator {
     this.idleId = null;
     this.pendingShells = [];
     this.hydrationInProgress = false;
+    this.hydrationToken = 0;
+    this.hydrationRenderVersion = null;
     this.instanceCounter = 0;
-    this.preservedShells = new Map();
+    this.preservedShells = [];
     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.preservedShells.clear();
+    this.clearPreservedShells();
   }
 
   cancelHydration() {
+    this.hydrationToken += 1;
+    this.hydrationRenderVersion = null;
     if (this.observer) {
       this.observer.disconnect();
       this.observer = null;
@@ -93,7 +81,39 @@ export class DiagramPreviewHydrator {
   }
 
   clearPreservedShells() {
-    this.preservedShells.clear();
+    this.preservedShells.forEach(({ shell }) => {
+      this.renderer.diagramChrome?.destroyShell?.(shell);
+    });
+    this.preservedShells.length = 0;
+  }
+
+  getPreviewShells() {
+    const previewElement = this.renderer.previewElement;
+    if (!previewElement) {
+      return [];
+    }
+
+    const documentShells = previewElement.ownerDocument?.querySelectorAll?.(this.shellSelector);
+    if (documentShells) {
+      return Array.from(documentShells);
+    }
+
+    return Array.from(previewElement.querySelectorAll(this.shellSelector));
+  }
+
+  getPreservationIdentity(shell) {
+    const sourceLine = shell?.getAttribute?.(this.attributeNames.sourceLine);
+    // ponytail: source-line identity can miss blocks shifted by earlier edits.
+    // Upgrade to persistent block IDs if structural tracking becomes necessary.
+    return sourceLine ? `${this.shellClassName}:${sourceLine}` : null;
+  }
+
+  isShellRenderable(shell) {
+    return this.isShellHydrated(shell) || shell?.getAttribute?.('data-diagram-output') === 'true';
+  }
+
+  isShellError(shell) {
+    return shell?.getAttribute?.('data-diagram-state') === 'error';
   }
 
   hasPendingWork() {
@@ -101,17 +121,13 @@ export class DiagramPreviewHydrator {
   }
 
   preserveHydratedShellsForCommit() {
-    this.preservedShells.clear();
+    this.preservedShells.length = 0;
     const previewElement = this.renderer.previewElement;
     if (!previewElement) {
       return;
     }
 
-    Array.from(
-      previewElement.querySelectorAll(
-        `${this.shellSelector}[${this.attributeNames.hydrated}="true"][${this.attributeNames.key}]`,
-      ),
-    ).forEach((shell) => {
+    this.getPreviewShells().filter((shell) => this.isShellRenderable(shell)).forEach((shell) => {
       const key = shell.dataset[this.datasetKeys.key];
       const source = shell.querySelector(this.sourceSelector)?.textContent ?? '';
       const target = shell.dataset[this.datasetKeys.target] ?? '';
@@ -120,11 +136,13 @@ export class DiagramPreviewHydrator {
       }
 
       if (shell.isConnected) {
+        this.renderer.diagramChrome?.captureShellViewState?.(shell);
         shell.remove();
       }
 
-      this.preservedShells.set(key, {
+      this.preservedShells.push({
         key,
+        identity: this.getPreservationIdentity(shell),
         shell,
         source,
         target,
@@ -134,43 +152,67 @@ export class DiagramPreviewHydrator {
 
   reconcileHydratedShells() {
     const previewElement = this.renderer.previewElement;
-    if (!previewElement || this.preservedShells.size === 0) {
-      this.preservedShells.clear();
+    if (!previewElement || this.preservedShells.length === 0) {
+      this.clearPreservedShells();
       return;
     }
 
     let restoredMaximizedShell = false;
     Array.from(previewElement.querySelectorAll(`${this.shellSelector}[${this.attributeNames.key}]`)).forEach((nextShell) => {
       const key = nextShell.dataset[this.datasetKeys.key];
-      const preservedEntry = key ? this.preservedShells.get(key) : null;
-      if (!preservedEntry) {
+      let preservedIndex = key
+        ? this.preservedShells.findIndex((entry) => entry.key === key)
+        : -1;
+      if (preservedIndex === -1) {
+        const identity = this.getPreservationIdentity(nextShell);
+        // ponytail: diagram counts are small; index entries if reconciliation becomes measurable.
+        preservedIndex = identity
+          ? this.preservedShells.findIndex((entry) => entry.identity === identity)
+          : -1;
+      }
+      if (preservedIndex === -1) {
         return;
       }
+      const preservedEntry = this.preservedShells[preservedIndex];
 
       const nextSource = nextShell.querySelector(this.sourceSelector)?.textContent ?? '';
       const nextTarget = nextShell.dataset[this.datasetKeys.target] ?? '';
+      const canPreserveCurrentOutput = this.isShellRenderable(preservedEntry.shell)
+        && nextSource !== preservedEntry.source
+        && !nextTarget;
       if (!shouldPreserveHydratedDiagram({
         nextSource,
         nextTarget,
         preservedSource: preservedEntry.source,
         preservedTarget: preservedEntry.target,
-      })) {
+      }) && !canPreserveCurrentOutput) {
         return;
       }
 
-      this.syncPreservedShell(preservedEntry.shell, nextShell);
+      this.syncPreservedShell(preservedEntry.shell, nextShell, {
+        sourceChanged: canPreserveCurrentOutput,
+      });
       nextShell.replaceWith(preservedEntry.shell);
+      const viewState = this.renderer.diagramChrome?.getShellViewState?.(preservedEntry.shell);
+      const frame = preservedEntry.shell.querySelector('.diagram-preview-frame');
+      if (viewState && frame) {
+        frame.scrollLeft = viewState.scrollLeft ?? 0;
+        frame.scrollTop = viewState.scrollTop ?? 0;
+      }
       restoredMaximizedShell = restoredMaximizedShell || preservedEntry.shell.classList.contains('is-maximized');
-      this.preservedShells.delete(key);
+      this.preservedShells.splice(preservedIndex, 1);
     });
 
-    this.preservedShells.clear();
+    this.preservedShells.forEach(({ shell }) => {
+      this.renderer.diagramChrome?.destroyShell?.(shell);
+    });
+    this.preservedShells.length = 0;
     this.handleReconcile({ restoredMaximizedShell });
   }
 
   handleReconcile() {}
 
-  syncPreservedShell(preservedShell, nextShell) {
+  syncPreservedShell(preservedShell, nextShell, { sourceChanged = false } = {}) {
     syncAttribute(preservedShell, nextShell, this.attributeNames.sourceLine);
     syncAttribute(preservedShell, nextShell, this.attributeNames.sourceLineEnd);
     syncAttribute(preservedShell, nextShell, this.attributeNames.key);
@@ -179,7 +221,6 @@ export class DiagramPreviewHydrator {
     syncAttribute(preservedShell, nextShell, this.attributeNames.sourceHash);
 
     preservedShell.classList.add(this.shellClassName);
-    preservedShell.dataset[this.datasetKeys.hydrated] = 'true';
     this.removeDatasetValue(preservedShell, 'queued');
 
     const nextSourceNode = nextShell.querySelector(this.sourceSelector);
@@ -197,6 +238,125 @@ export class DiagramPreviewHydrator {
       }
       preservedSourceNode.hidden = true;
     }
+
+    if (sourceChanged) {
+      this.markShellPending(preservedShell);
+      return;
+    }
+
+    if (this.isShellError(preservedShell)) {
+      preservedShell.dataset[this.datasetKeys.hydrated] = 'true';
+      return;
+    }
+
+    this.markShellHydrated(preservedShell);
+  }
+
+  getShellErrorCard(shell) {
+    return shell?.querySelector?.(':scope > .diagram-preview-error-card') ?? null;
+  }
+
+  notifyShellLayoutChange() {
+    this.renderer.onPreviewLayoutChange?.({
+      renderVersion: this.renderer.activeRenderVersion,
+    });
+  }
+
+  clearShellErrorCard(shell) {
+    if (!shell) {
+      return;
+    }
+
+    this.getShellErrorCard(shell)?.remove?.();
+    this.notifyShellLayoutChange();
+  }
+
+  getShellLabel(shell) {
+    return shell?.dataset?.[this.datasetKeys.label] || `${this.filePathLabel} diagram`;
+  }
+
+  markShellRendered(shell) {
+    if (!shell) {
+      return;
+    }
+
+    shell.setAttribute('data-diagram-output', 'true');
+    shell.removeAttribute('data-diagram-state');
+    shell.removeAttribute('aria-busy');
+    this.clearShellErrorCard(shell);
+  }
+
+  markShellPending(shell) {
+    if (!this.isShellRenderable(shell)) {
+      return false;
+    }
+
+    this.removeDatasetValue(shell, 'hydrated');
+    shell.setAttribute('data-diagram-output', 'true');
+    shell.setAttribute('data-diagram-state', 'pending');
+    shell.setAttribute('aria-busy', 'true');
+    if (this.getShellErrorCard(shell)) {
+      this.clearShellErrorCard(shell);
+    }
+    return true;
+  }
+
+  markShellError(shell, error) {
+    if (!this.isShellRenderable(shell)) {
+      return false;
+    }
+
+    const message = normalizeDiagramError(error);
+    shell.dataset[this.datasetKeys.hydrated] = 'true';
+    shell.setAttribute('data-diagram-output', 'true');
+    shell.setAttribute('data-diagram-state', 'error');
+    shell.removeAttribute('aria-busy');
+    this.getShellErrorCard(shell)?.remove?.();
+    const kind = this.shellClassName.replace(/-shell$/, '');
+    shell.append(createDiagramErrorPlaceholderCard({
+      key: shell.dataset[this.datasetKeys.key],
+      kind,
+      label: this.getShellLabel(shell),
+      message,
+      subtitle: 'Showing the last valid result.',
+    }));
+    this.notifyShellLayoutChange();
+    return true;
+  }
+
+  clearShellOutput(shell) {
+    this.removeDatasetValue(shell, 'hydrated');
+    shell?.removeAttribute?.('data-diagram-output');
+    shell?.removeAttribute?.('data-diagram-state');
+    shell?.removeAttribute?.('aria-busy');
+    this.clearShellErrorCard(shell);
+  }
+
+  markPending() {
+    this.cancelHydration();
+    this.getPreviewShells().filter((shell) => this.isShellRenderable(shell)).forEach((shell) => {
+      this.markShellPending(shell);
+    });
+  }
+
+  retryShell(shell) {
+    if (!shell?.isConnected) {
+      return;
+    }
+
+    this.removeDatasetValue(shell, 'hydrated');
+    this.markShellPending(shell);
+    this.enqueueShell(shell, { prioritize: true });
+  }
+
+  isHydrationCurrent(renderVersion, shell, hydrationToken = this.hydrationToken) {
+    return Boolean(
+      shell?.isConnected
+      && hydrationToken === this.hydrationToken
+      && (renderVersion == null
+        || (renderVersion === this.hydrationRenderVersion
+          && renderVersion === this.renderer.activeRenderVersion)),
+    );
   }
 
   setupHydration(renderVersion) {
@@ -211,6 +371,10 @@ export class DiagramPreviewHydrator {
       return 0;
     }
 
+    this.hydrationToken += 1;
+    const hydrationToken = this.hydrationToken;
+    this.hydrationRenderVersion = renderVersion;
+
     this.observer = this.intersectionObserverFactory((entries) => {
       entries.forEach((entry) => {
         if (!entry.isIntersecting) {
@@ -227,7 +391,7 @@ export class DiagramPreviewHydrator {
     shells.forEach((shell) => this.observer.observe(shell));
 
     this.requestAnimationFrameFn(() => {
-      if (renderVersion !== this.renderer.activeRenderVersion) {
+      if (!this.isHydrationCurrent(renderVersion, previewElement, hydrationToken)) {
         return;
       }
 
@@ -289,6 +453,9 @@ export class DiagramPreviewHydrator {
       return;
     }
 
+    const hydrationToken = this.hydrationToken;
+    const renderVersion = this.hydrationRenderVersion;
+
     const shells = [];
     while (this.pendingShells.length > 0 && shells.length < this.batchSize) {
       const nextShell = this.pendingShells.shift();
@@ -312,6 +479,9 @@ export class DiagramPreviewHydrator {
     try {
       batchContext = await this.prepareHydrationBatch(shells);
     } catch (error) {
+      if (hydrationToken !== this.hydrationToken) {
+        return;
+      }
       this.handlePrepareHydrationBatchError(shells, error);
       this.hydrationInProgress = false;
       this.renderer.updateHydrationPhase();
@@ -319,9 +489,15 @@ export class DiagramPreviewHydrator {
     }
 
     for (const shell of shells) {
-      await this.hydrateShell(shell, batchContext);
+      if (hydrationToken !== this.hydrationToken) {
+        return;
+      }
+      await this.hydrateShell(shell, batchContext, { hydrationToken, renderVersion });
     }
 
+    if (hydrationToken !== this.hydrationToken) {
+      return;
+    }
     this.hydrationInProgress = false;
 
     if (this.pendingShells.length > 0) {
@@ -342,6 +518,7 @@ export class DiagramPreviewHydrator {
   }
 
   markShellHydrated(shell) {
+    this.markShellRendered(shell);
     shell.dataset[this.datasetKeys.hydrated] = 'true';
     shell.dataset[this.datasetKeys.instanceId] = String(++this.instanceCounter);
   }

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]';
 }