collabmd 0.1.54 → 0.1.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "collabmd",
-  "version": "0.1.54",
+  "version": "0.1.55",
   "type": "module",
   "description": "Collaborative markdown vault — like Obsidian, but online. Serve any directory of markdown files for realtime collaborative editing.",
   "repository": {
@@ -17,8 +17,7 @@
     "dist/",
     "docker-compose.yml",
     "scripts/cloudflare-tunnel.mjs",
-    "scripts/local-plantuml-compose.mjs",
-    "scripts/local-structurizr-compose.mjs",
+    "scripts/local-compose.mjs",
     "src/"
   ],
   "bin": {
@@ -33,18 +32,18 @@
     "dev:server": "node bin/collabmd.js --no-tunnel",
     "homebrew:formula": "node scripts/render-homebrew-formula.mjs",
     "lint": "eslint .",
-    "plantuml:up": "node scripts/local-plantuml-compose.mjs up",
-    "plantuml:down": "node scripts/local-plantuml-compose.mjs down",
-    "structurizr:up": "node scripts/local-structurizr-compose.mjs up",
-    "structurizr:down": "node scripts/local-structurizr-compose.mjs down",
+    "plantuml:up": "node scripts/local-compose.mjs plantuml up",
+    "plantuml:down": "node scripts/local-compose.mjs plantuml down",
+    "structurizr:up": "node scripts/local-compose.mjs structurizr up",
+    "structurizr:down": "node scripts/local-compose.mjs structurizr down",
     "start": "npm run build && node bin/collabmd.js",
     "start:local-plantuml": "npm run build && node bin/collabmd.js --local-plantuml",
     "start:local-structurizr": "npm run build && node bin/collabmd.js --local-structurizr",
     "start:prod": "node bin/collabmd.js",
     "test": "npm run test:guardrails && npm run test:unit && npm run test:integration:prebuilt && npm run test:browser && npm run test:e2e:prebuilt",
     "test:browser": "vitest run --config vitest.config.mjs --browser=chromium",
-    "test:e2e": "npm run build && playwright test",
-    "test:e2e:headed": "npm run build && playwright test --headed",
+    "test:e2e": "playwright test",
+    "test:e2e:headed": "playwright test --headed",
     "test:e2e:prebuilt": "playwright test",
     "test:excalidraw:stress": "node scripts/run-excalidraw-reliability-stress.mjs",
     "test:guardrails": "node --test tests/node/guardrails/*.test.js",
@@ -67,22 +66,21 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@excalidraw/fractional-indexing": "^0.18.0-c0ad61c",
-    "@modelcontextprotocol/client": "^2.0.0",
-    "@modelcontextprotocol/node": "^2.0.0",
-    "@modelcontextprotocol/server": "^2.0.0",
+    "@excalidraw/fractional-indexing": "^0.18.0-4ce38fb",
+    "@modelcontextprotocol/node": "^2.1.1",
+    "@modelcontextprotocol/server": "^2.3.0",
     "@turbodocx/html-to-docx": "^1.23.1",
     "@vscode/markdown-it-katex": "^1.1.2",
     "archiver": "^8.0.0",
     "js-yaml": "^5.4.2",
-    "katex": "^0.18.7",
-    "lib0": "^0.2.117",
+    "katex": "^0.19.0",
+    "lib0": "^0.2.119",
     "mathml2omml": "^0.5.0",
     "openid-client": "^6.8.8",
-    "sharp": "^0.35.4",
-    "ws": "^8.21.3",
+    "sharp": "^0.35.5",
+    "ws": "^8.22.0",
     "y-protocols": "^1.0.7",
-    "yjs": "^13.6.32"
+    "yjs": "^13.6.33"
   },
   "overrides": {
     "@excalidraw/excalidraw": {
@@ -105,27 +103,27 @@
     "@codemirror/language": "^6.12.4",
     "@codemirror/language-data": "^6.5.2",
     "@codemirror/search": "^6.7.2",
-    "@codemirror/state": "^6.7.5",
+    "@codemirror/state": "^6.7.6",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.43.12",
+    "@codemirror/view": "^6.43.13",
     "@embedpdf/snippet": "2.15.1",
     "@eslint/js": "^10.0.1",
-    "@excalidraw/excalidraw": "0.18.0-c0ad61c",
+    "@excalidraw/excalidraw": "0.18.0-4ce38fb",
+    "@modelcontextprotocol/client": "^2.3.0",
     "@playwright/test": "^1.63.0",
     "@replit/codemirror-vim": "^6.4.0",
-    "@vitest/browser": "^5.0.1",
-    "@vitest/browser-playwright": "^5.0.1",
-    "eslint": "^10.11.0",
-    "globals": "^17.12.0",
+    "@vitest/browser-playwright": "^5.0.3",
+    "eslint": "^10.12.0",
+    "globals": "^17.13.0",
     "highlight.js": "^11.12.0",
     "markdown-it": "^15.0.2",
-    "mermaid": "^12.0.0",
+    "mermaid": "^12.1.0",
     "mermaid-formatter": "^0.3.0",
-    "prettier": "^3.9.8",
+    "prettier": "^3.9.9",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
-    "vite": "^8.3.0",
-    "vitest": "^5.0.1",
+    "vite": "^8.3.2",
+    "vitest": "^5.0.3",
     "y-codemirror.next": "^0.3.6",
     "y-websocket": "^3.1.0"
   }

package/scripts/local-compose.mjs

@@ -0,0 +1,101 @@
+import { spawn } from 'node:child_process';
+import { mkdir } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const scriptPath = fileURLToPath(import.meta.url);
+const projectRoot = resolve(dirname(scriptPath), '..');
+const composeFile = resolve(projectRoot, 'docker-compose.yml');
+const services = {
+  plantuml: { label: 'PlantUML', portName: 'PLANTUML_HOST_PORT', defaultPort: '18080' },
+  structurizr: { label: 'Structurizr', portName: 'STRUCTURIZR_HOST_PORT', defaultPort: '19090' },
+};
+
+function getService(service) {
+  const config = services[service];
+  if (!config) throw new Error(`Unknown local Compose service: ${service}`);
+  return config;
+}
+
+function getHostPort(service) {
+  const { portName, defaultPort } = getService(service);
+  const rawValue = process.env[portName] || defaultPort;
+  const parsed = Number.parseInt(rawValue, 10);
+  if (!Number.isInteger(parsed) || parsed <= 0) {
+    throw new Error(`Invalid ${portName}: ${rawValue}`);
+  }
+  return parsed;
+}
+
+export function getLocalComposeServerUrl(service) {
+  return `http://127.0.0.1:${getHostPort(service)}`;
+}
+
+function runCompose(command, service, env = process.env) {
+  return new Promise((resolvePromise, rejectPromise) => {
+    const child = spawn('docker', ['compose', '-f', composeFile, command, ...(command === 'up' ? ['-d'] : []), service], {
+      cwd: projectRoot,
+      env,
+      stdio: 'inherit',
+    });
+    child.on('error', rejectPromise);
+    child.on('exit', (code) => {
+      if (code === 0) resolvePromise();
+      else rejectPromise(new Error(`docker compose ${command} ${service} exited with code ${code}`));
+    });
+  });
+}
+
+export async function startLocalComposeService(service, { vaultDir = process.env.COLLABMD_VAULT_DIR || '.' } = {}) {
+  getService(service);
+  let env = process.env;
+  if (service === 'structurizr') {
+    const hostVaultDir = resolve(vaultDir);
+    await mkdir(resolve(hostVaultDir, '.collabmd/structurizr'), { recursive: true });
+    env = {
+      ...process.env,
+      HOST_VAULT_DIR: hostVaultDir,
+      STRUCTURIZR_HOST_PORT: String(getHostPort(service)),
+    };
+  }
+  await runCompose('up', service, env);
+  return getLocalComposeServerUrl(service);
+}
+
+export async function stopLocalComposeService(service) {
+  getService(service);
+  await runCompose('stop', service);
+}
+
+async function main() {
+  const service = process.argv[2];
+  const command = process.argv[3] || 'up';
+  if (!services[service] || !['up', 'down', 'url'].includes(command)) {
+    console.error('Usage: node scripts/local-compose.mjs [plantuml|structurizr] [up|down|url]');
+    process.exit(1);
+  }
+
+  if (command === 'url') {
+    console.log(getLocalComposeServerUrl(service));
+    return;
+  }
+  if (command === 'up') {
+    const url = await startLocalComposeService(service);
+    console.log(`[${service}] Local ${services[service].label} ${service === 'plantuml' ? 'server' : 'renderer'} is available at ${url}`);
+    return;
+  }
+  await stopLocalComposeService(service);
+  console.log(`[${service}] Local ${services[service].label} server stopped`);
+}
+
+if (process.argv[1] && resolve(process.argv[1]) === scriptPath) {
+  main().catch((error) => {
+    const service = process.argv[2];
+    if (error.code === 'ENOENT') {
+      console.error(`[${service}] Docker is not available. Install Docker Desktop or Docker Engine first.`);
+    } else {
+      console.error(`[${service}] ${error.message}`);
+    }
+    process.exit(1);
+  });
+}

package/src/client/app/canvas-editor.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Canvas — CollabMD</title>
+  <script vite-ignore defer src="./app-config.js"></script>
+</head>
+<body data-theme="dark" data-surface="canvas-editor">
+  <div id="root"><p role="status">Loading canvas…</p></div>
+  <script type="module" src="../canvas-editor.js"></script>
+</body>
+</html>

package/src/client/application/app-shell/git-feature.js

@@ -165,8 +165,9 @@ export const gitFeature = {
 
   syncMainChrome({ badgeLabel = '', mode, title = null } = {}) {
     const isSpecialMode = mode === 'diff' || mode === 'history' || mode === 'history-preview';
-    this.elements.toolbarViewToggle?.classList.toggle('hidden', isSpecialMode);
-    this.elements.mobileViewToggle?.classList.toggle('hidden', isSpecialMode);
+    const hideViewToggle = isSpecialMode || (mode === 'editor' && this.isCanvasFile?.(this.currentFilePath));
+    this.elements.toolbarViewToggle?.classList.toggle('hidden', Boolean(hideViewToggle));
+    this.elements.mobileViewToggle?.classList.toggle('hidden', Boolean(hideViewToggle));
     this.elements.userCount?.classList.toggle('hidden', isSpecialMode);
     this.elements.toolbarDiffBadge?.classList.toggle('hidden', !badgeLabel);
     if (this.elements.toolbarDiffBadge) {

package/src/client/application/app-shell/ui-feature-identity.js

@@ -124,6 +124,7 @@ function handleDisplayNameSubmit() {
   const localUser = this.lobby.getLocalUser();
   this.drawioEmbed?.updateLocalUser(localUser);
   this.excalidrawEmbed?.updateLocalUser(localUser);
+  this.canvasEmbed?.updateLocalUser(localUser);
   this.syncCurrentUserName();
   this.renderChat();
   dialog.close();

package/src/client/application/app-shell/ui-feature-shell.js

@@ -952,6 +952,7 @@ function handleThemeChange(theme) {
   if (
     this.currentFilePath
     && !this.isExcalidrawFile(this.currentFilePath)
+    && !this.isCanvasFile?.(this.currentFilePath)
     && !this.isImageFile?.(this.currentFilePath)
     && !this.isPdfFile?.(this.currentFilePath)
     && !this.isStructurizrWorkspaceFile?.(this.currentFilePath)
@@ -960,6 +961,7 @@ function handleThemeChange(theme) {
   }
   this.session?.applyTheme(theme);
   this.excalidrawEmbed.updateTheme(theme);
+  this.canvasEmbed?.updateTheme(theme);
   this.drawioEmbed.updateTheme(theme);
   this.pdfPreview?.setTheme(theme);
 }

package/src/client/application/app-shell/ui-feature-tab-activity.js

@@ -88,6 +88,10 @@ async function handleTabBlocked({ reason } = {}) {
   if (shouldPrepareExcalidrawDisconnect) {
     await this.excalidrawEmbed.prepareFileDisconnect(blockedFilePath);
   }
+  if (blockedFilePath && this.isCanvasFile?.(blockedFilePath)) {
+    const canLeave = await this.canvasEmbed.prepareFileDisconnect(blockedFilePath);
+    if (!canLeave) return;
+  }
 
   this.showEmptyState();
   this.renderChat();

package/src/client/application/app-shell/workspace-feature.js

@@ -1,6 +1,7 @@
 import {
   getVaultFileKind,
   isBaseFilePath,
+  isCanvasFilePath,
   isDrawioFilePath,
   isExcalidrawFilePath,
   isImageAttachmentFilePath,
@@ -13,6 +14,7 @@ import {
 
 export const workspaceFeature = {
   isBaseFile: isBaseFilePath,
+  isCanvasFile: isCanvasFilePath,
   isDrawioFile: isDrawioFilePath,
   isExcalidrawFile: isExcalidrawFilePath,
   isImageFile: isImageAttachmentFilePath,
@@ -75,6 +77,7 @@ export const workspaceFeature = {
   },
 
   handleLayoutViewRequest(view) {
+    if (this.isCanvasFile?.(this.currentFilePath)) return view === 'preview';
     if (!this.currentFilePath || !this.isDrawioFile(this.currentFilePath)) {
       return true;
     }
@@ -129,50 +132,21 @@ export const workspaceFeature = {
     );
   },
 
-  schedulePreviewLayoutSync({ delayMs = 120 } = {}) {
-    this.workspacePreviewController.schedulePreviewLayoutSync({
-      delayMs,
-      hydrationPaused: this._previewHydrationPaused,
-      previewLayoutSyncTimer: this._previewLayoutSyncTimer,
-      setPendingPreviewLayoutSync: (value) => {
-        this._pendingPreviewLayoutSync = value;
-      },
-      setPreviewLayoutSyncTimer: (value) => {
-        this._previewLayoutSyncTimer = value;
-      },
-    });
+  schedulePreviewLayoutSync(options) {
+    this.workspacePreviewController.schedulePreviewLayoutSync(options);
   },
 
   handleEditorScrollActivityChange(isActive) {
-    this.workspacePreviewController.handleEditorScrollActivityChange({
-      isActive,
-      pendingPreviewLayoutSync: this._pendingPreviewLayoutSync,
-      previewLayoutSyncTimer: this._previewLayoutSyncTimer,
-      setHydrationPaused: (value) => {
-        this._previewHydrationPaused = value;
-      },
-      setPendingPreviewLayoutSync: (value) => {
-        this._pendingPreviewLayoutSync = value;
-      },
-      setPreviewLayoutSyncTimer: (value) => {
-        this._previewLayoutSyncTimer = value;
-      },
-    });
+    this.workspacePreviewController.handleEditorScrollActivityChange(isActive);
   },
 
   showEmptyState() {
-    clearTimeout(this._previewLayoutSyncTimer);
-    this._previewLayoutSyncTimer = null;
-    this._pendingPreviewLayoutSync = false;
-    this._previewHydrationPaused = false;
+    this.workspacePreviewController.resetPreviewLayoutSync();
     this.workspaceRouteController.showEmptyState();
   },
 
   showDiffState() {
-    clearTimeout(this._previewLayoutSyncTimer);
-    this._previewLayoutSyncTimer = null;
-    this._pendingPreviewLayoutSync = false;
-    this._previewHydrationPaused = false;
+    this.workspacePreviewController.resetPreviewLayoutSync();
     this.workspaceRouteController.showDiffState();
   },
 

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

@@ -90,13 +90,14 @@ export class DiagramChrome {
     this.maximizedRoots.forEach((root) => root.remove());
     this.maximizedRoots.clear();
     this.activeMaximizedShell = null;
+    this.syncBodyMaximizedClasses();
   }
 
   destroyAllShells() {
     this.resizeObservers.forEach((observer) => observer.disconnect());
     this.resizeObservers.clear();
     this.activeMaximizedShell = null;
-    this.document.body.classList.remove('mermaid-maximized-open', 'plantuml-maximized-open');
+    this.syncBodyMaximizedClasses();
   }
 
   destroyShell(shell) {
@@ -147,7 +148,7 @@ export class DiagramChrome {
         root.hidden = true;
       }
     });
-    this.document.body.classList.remove('mermaid-maximized-open', 'plantuml-maximized-open');
+    this.syncBodyMaximizedClasses();
   }
 
   syncActiveShell() {
@@ -189,13 +190,10 @@ export class DiagramChrome {
       return existing;
     }
 
-    let root = this.document.body.querySelector(`[data-${kind}-maximized-root="true"]`);
-    if (!root) {
-      root = this.document.createElement('div');
-      root.dataset[config.maximizedRootDatasetKey] = 'true';
-      root.className = config.maximizedRootClassName;
-      this.document.body.appendChild(root);
-    }
+    const root = this.document.createElement('div');
+    root.dataset[config.maximizedRootDatasetKey] = 'true';
+    root.className = config.maximizedRootClassName;
+    this.document.body.appendChild(root);
 
     this.maximizedRoots.set(kind, root);
     return root;
@@ -235,11 +233,10 @@ export class DiagramChrome {
   }
 
   syncBodyMaximizedClasses() {
-    const activeShell = this.syncActiveShell();
     for (const [kind, config] of Object.entries(DIAGRAM_CHROME_KIND_CONFIG)) {
       this.document.body.classList.toggle(
         config.bodyClassName,
-        Boolean(activeShell?.classList?.contains(`${kind}-shell`)),
+        Boolean(this.document.querySelector?.(`.${kind}-shell.is-maximized`)),
       );
     }
   }

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

@@ -93,12 +93,12 @@ export class DiagramPreviewHydrator {
       return [];
     }
 
-    const documentShells = previewElement.ownerDocument?.querySelectorAll?.(this.shellSelector);
-    if (documentShells) {
-      return Array.from(documentShells);
+    const shells = Array.from(previewElement.querySelectorAll(this.shellSelector));
+    const maximizedShell = this.renderer.diagramChrome?.syncActiveShell?.();
+    if (maximizedShell?.classList.contains(this.shellClassName) && !shells.includes(maximizedShell)) {
+      shells.push(maximizedShell);
     }
-
-    return Array.from(previewElement.querySelectorAll(this.shellSelector));
+    return shells;
   }
 
   getPreservationIdentity(shell) {

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

@@ -217,7 +217,6 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
 
       const diagram = document.createElement('div');
       diagram.className = 'mermaid mermaid-render-node';
-      diagram.id = shell.dataset.mermaidKey || `mermaid-${Date.now()}`;
       const sourceLine = shell.getAttribute('data-source-line');
       const sourceLineEnd = shell.getAttribute('data-source-line-end');
       if (sourceLine) {
@@ -231,7 +230,7 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
       const renderHost = this.createRenderHost();
       try {
         renderHost.appendChild(diagram);
-        await mermaid.run({ nodes: [diagram] });
+        const { svg, bindFunctions } = await mermaid.render(`mermaid-${crypto.randomUUID()}`, source, diagram);
         if (
           !this.isHydrationCurrent(renderVersion, shell, hydrationToken)
           || !diagram.isConnected
@@ -240,6 +239,8 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
           return;
         }
 
+        diagram.innerHTML = svg;
+        bindFunctions?.(diagram);
         this.enhanceDiagram(shell, diagram, renderedSource, renderCacheKey);
         this.markShellHydrated(shell);
       } finally {

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

@@ -12,6 +12,8 @@ import {
   sanitizeSvgMarkup,
 } from './preview-diagram-utils.js';
 
+const SVG_CACHE_LIMIT = 30;
+
 export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
   constructor(renderer, { loadFileSource = null, renderClient = null } = {}) {
     super(renderer, {
@@ -135,6 +137,10 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
     const request = this.renderClient.renderSvg(source)
       .then((svgMarkup) => {
         const sanitized = sanitizeSvgMarkup(svgMarkup);
+        this.svgCache.delete(cacheKey);
+        while (this.svgCache.size >= SVG_CACHE_LIMIT) {
+          this.svgCache.delete(this.svgCache.keys().next().value);
+        }
         this.svgCache.set(cacheKey, sanitized);
         return sanitized;
       })