npm - collabmd - Versions diffs - 0.1.25 → 0.1.26 - Mend

collabmd 0.1.25 → 0.1.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (385) hide show

package/src/client/app/drawio-editor.html ADDED Viewed

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>draw.io — CollabMD</title>
+  <style>
+    * { box-sizing: border-box; }
+    html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #0f172a; color: #e2e8f0; font: 13px/1.4 system-ui, -apple-system, sans-serif; }
+    body[data-theme="light"] { background: #f8fafc; color: #0f172a; }
+    #root { display: flex; flex-direction: column; width: 100%; height: 100%; }
+    .drawio-shell { display: flex; flex-direction: column; width: 100%; height: 100%; }
+    .drawio-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 8px 12px; border-bottom: 1px solid rgba(148, 163, 184, 0.2); background: rgba(15, 23, 42, 0.9); }
+    body[data-theme="light"] .drawio-banner { background: rgba(255, 255, 255, 0.9); }
+    .drawio-banner-status { display: flex; align-items: center; gap: 8px; min-width: 0; }
+    .drawio-banner-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 0 8px; border-radius: 999px; background: rgba(59, 130, 246, 0.18); color: #bfdbfe; font-weight: 600; white-space: nowrap; }
+    body[data-theme="light"] .drawio-banner-pill { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
+    .drawio-banner-copy { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .drawio-banner-actions { display: flex; align-items: center; gap: 8px; }
+    .drawio-btn { min-height: 30px; padding: 0 10px; border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
+    .drawio-btn[hidden] { display: none !important; }
+    .drawio-btn:disabled { opacity: 0.6; cursor: default; }
+    .drawio-frame-shell { position: relative; flex: 1; min-height: 0; }
+    .drawio-frame { width: 100%; height: 100%; border: 0; background: transparent; }
+    .drawio-frame.is-read-only { pointer-events: none; }
+    .drawio-loading, .drawio-error { display: flex; align-items: center; justify-content: center; flex: 1; padding: 24px; text-align: center; }
+    .drawio-error { color: #fca5a5; }
+  </style>
+</head>
+<body>
+  <div id="root">
+    <div class="drawio-loading" id="loadingState">Loading draw.io…</div>
+  </div>
+  <script type="module" src="./drawio-editor-entry.js"></script>
+</body>
+</html>

package/src/client/app/index.html CHANGED Viewed

@@ -39,21 +39,12 @@
               <line x1="6" y1="6" x2="18" y2="18"/>
             </svg>
           </button>
-          <button class="ui-icon-button" id="newFileBtn" aria-label="New file" title="New file">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
-          </button>
-          <button class="ui-icon-button" id="newDrawingBtn" aria-label="New drawing" title="New Excalidraw drawing">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg>
-          </button>
-          <button class="ui-icon-button" id="newMermaidBtn" aria-label="New Mermaid diagram" title="New Mermaid diagram">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 7.5c0-1.38 1.12-2.5 2.5-2.5 1.04 0 1.93.64 2.3 1.56A2.5 2.5 0 0 1 14 8.5v1"/><path d="M19 16.5c0 1.38-1.12 2.5-2.5 2.5-1.04 0-1.93-.64-2.3-1.56A2.5 2.5 0 0 1 10 15.5v-1"/><path d="M8 10.5h8"/><path d="M8 13.5h8"/><path d="M10 8.5v7"/><path d="M14 8.5v7"/></svg>
-          </button>
-          <button class="ui-icon-button" id="newPlantumlBtn" aria-label="New PlantUML diagram" title="New PlantUML diagram">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="7" height="6" rx="1"/><rect x="14" y="4" width="7" height="6" rx="1"/><rect x="8.5" y="14" width="7" height="6" rx="1"/><path d="M10 7h4"/><path d="M17.5 10v2.5"/><path d="M6.5 10v2.5"/><path d="M6.5 12.5h11"/></svg>
-          </button>
-          <button class="ui-icon-button" id="newFolderBtn" aria-label="New folder" title="New folder">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/><line x1="12" y1="11" x2="12" y2="17"/><line x1="9" y1="14" x2="15" y2="14"/></svg>
-          </button>
+          <div class="sidebar-create-shell">
+            <button class="ui-button btn btn-secondary btn-compact sidebar-create-btn" id="sidebarCreateBtn" aria-label="Create" aria-expanded="false" aria-haspopup="menu" title="Create file or folder">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+              <span class="sidebar-create-btn-label">Create</span>
+            </button>
+          </div>
           <button class="ui-icon-button" id="refreshFilesBtn" aria-label="Refresh" title="Refresh file list">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
           </button>
@@ -173,9 +164,12 @@
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
               <span class="ui-toolbar-button-label">Share</span>
             </button>
-            <button class="ui-button btn btn-ghost ui-toolbar-button" id="themeToggleBtn" data-theme-toggle aria-label="Toggle theme" title="Toggle theme">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
+            <button class="ui-button btn btn-ghost ui-toolbar-button toolbar-theme-button" id="themeToggleBtn" data-theme-toggle aria-label="Toggle theme" title="Toggle theme">
+              <span class="toolbar-theme-icon" data-theme-toggle-icon aria-hidden="true">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
+              </span>
               <span class="ui-toolbar-button-label">Theme</span>
+              <span class="ui-pill-badge ui-pill-badge--muted toolbar-theme-state" data-theme-toggle-state>Dark</span>
             </button>
           </div>
         </div>
@@ -197,7 +191,7 @@
           <div class="empty-state-actions">
             <button class="ui-button btn btn-secondary empty-state-btn" id="emptyStateNewFileBtn">
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
-              New File
+              Create
             </button>
             <button class="ui-button btn btn-secondary empty-state-btn" id="emptyStateSearchBtn">
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>

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

@@ -8,7 +8,8 @@ import { USER_NAME_MAX_LENGTH, normalizeUserName } from '../../domain/room.js';
  * @property {{ getUserName(): string, setUserName(name: string): void }} preferences
  * @property {{ getLocalUser(): { name?: string } | null, setUserName(name: string): void }} lobby
  * @property {{ getLocalUser(): { name?: string } | null, setUserName(name: string): string } | null} session
- * @property {{ updateLocalUser(user: unknown): void }} excalidrawEmbed
+ * @property {{ updateLocalUser(user: unknown): void } | null | undefined} drawioEmbed
+ * @property {{ updateLocalUser(user: unknown): void } | null | undefined} excalidrawEmbed
  * @property {{ show(message: string): void }} toastController
  * @property {() => boolean} isIdentityManagedByAuth
  * @property {() => { name?: string } | null} getCurrentUser
@@ -108,7 +109,9 @@ function handleDisplayNameSubmit() {
   this.preferences.setUserName(normalizedName);
   this.lobby.setUserName(normalizedName);
-  this.excalidrawEmbed.updateLocalUser(this.lobby.getLocalUser());
+  const localUser = this.lobby.getLocalUser();
+  this.drawioEmbed?.updateLocalUser(localUser);
+  this.excalidrawEmbed?.updateLocalUser(localUser);
   this.syncCurrentUserName();
   this.renderChat();
   dialog.close();

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

@@ -46,6 +46,7 @@ function initialize() {
   this.syncIdentityManagementUi();
   this.syncCurrentUserName();
   this.syncWrapToggle();
+  this.syncToolbarOverflowVisibility?.();
   this.syncChatNotificationButton();
   this.syncFileHistoryButton({ mode: 'empty' });
   this.renderChat();
@@ -58,7 +59,11 @@ function initialize() {
   this.tabActivityLock.tryActivate();
   window.addEventListener('hashchange', () => this.handleHashChange());
-  window.addEventListener('resize', this.createResizeHandler());
+  const handleResize = this.createResizeHandler();
+  window.addEventListener('resize', () => {
+    handleResize();
+    this.syncToolbarOverflowVisibility?.();
+  });
   this.fileExplorerReadyPromise = this.fileExplorer.refresh().then(() => {
     this.fileExplorerReady = true;
@@ -97,7 +102,9 @@ function promptForVersionReload(payload = null) {
 /** @this {UiShellContext} */
 function bindEvents() {
   this.elements.emptyStateNewFileBtn?.addEventListener('click', () => {
-    this.fileExplorer.actionController.handleNewFile();
+    this.fileExplorer.actionController.openRootCreateMenu({
+      anchor: this.elements.emptyStateNewFileBtn,
+    });
   });
   this.elements.emptyStateSearchBtn?.addEventListener('click', () => {
@@ -290,6 +297,23 @@ function setToolbarOverflowOpen(nextState) {
   this.elements.toolbarOverflowToggle?.closest('.toolbar-right')?.classList.toggle('is-overflow-open', this.toolbarOverflowOpen);
 }
+/** @this {UiShellContext} */
+function syncToolbarOverflowVisibility() {
+  const toggle = this.elements.toolbarOverflowToggle;
+  if (!toggle) {
+    return;
+  }
+  const isMobile = this.isMobileViewport?.();
+  if (!isMobile) {
+    this.setToolbarOverflowOpen(false);
+  }
+  toggle.classList.toggle('hidden', !isMobile);
+  toggle.hidden = !isMobile;
+  toggle.setAttribute('aria-hidden', String(!isMobile));
+}
 /** @this {UiShellContext} */
 function closeToolbarOverflowMenu() {
   this.setToolbarOverflowOpen(false);
@@ -308,6 +332,7 @@ function handleThemeChange(theme) {
   }
   this.session?.applyTheme(theme);
   this.excalidrawEmbed.updateTheme(theme);
+  this.drawioEmbed.updateTheme(theme);
 }
 /** @this {UiShellContext} */
@@ -413,6 +438,7 @@ export const uiFeatureShellMethods = {
   scheduleBacklinkRefresh,
   showEditorLoadError,
   showEditorLoading,
+  syncToolbarOverflowVisibility,
   syncWrapToggle,
   toggleToolbarOverflowMenu,
   toggleLineWrapping,

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

@@ -1,5 +1,6 @@
 import {
   getVaultFileKind,
+  isDrawioFilePath,
   isExcalidrawFilePath,
   isImageAttachmentFilePath,
   isMermaidFilePath,
@@ -12,6 +13,10 @@ export const workspaceFeature = {
     return isExcalidrawFilePath(filePath);
   },
+  isDrawioFile(filePath) {
+    return isDrawioFilePath(filePath);
+  },
   isImageFile(filePath) {
     return isImageAttachmentFilePath(filePath);
   },
@@ -91,6 +96,10 @@ export const workspaceFeature = {
     this.workspacePreviewController.renderExcalidrawFilePreview(filePath);
   },
+  renderDrawioFilePreview(filePath) {
+    this.workspacePreviewController.renderDrawioFilePreview(filePath);
+  },
   renderImageFilePreview(filePath) {
     this.workspacePreviewController.renderImageFilePreview(filePath);
   },

package/src/client/application/preview-render-compiler.js CHANGED Viewed

@@ -79,6 +79,10 @@ function createExcalidrawPlaceholder({ embedKey, label, target }) {
   return `<span class="excalidraw-embed-placeholder diagram-preview-shell" data-embed-key="${escapeHtml(embedKey)}" data-embed-target="${escapeHtml(target)}" data-embed-label="${escapeHtml(label)}"><span class="excalidraw-embed-placeholder-card diagram-preview-placeholder-card"><span class="excalidraw-embed-placeholder-copy diagram-preview-placeholder-copy"><strong>${escapeHtml(label)}</strong><span>Loads when visible</span></span><button type="button" class="excalidraw-embed-placeholder-btn diagram-preview-placeholder-btn" data-embed-key="${escapeHtml(embedKey)}">Load diagram</button></span></span>`;
 }
+function createDrawioPlaceholder({ embedKey, label, target }) {
+  return `<span class="drawio-embed-placeholder diagram-preview-shell" data-drawio-key="${escapeHtml(embedKey)}" data-drawio-target="${escapeHtml(target)}" data-drawio-label="${escapeHtml(label)}" data-drawio-mode="view"><span class="drawio-embed-placeholder-card diagram-preview-placeholder-card"><span class="drawio-embed-placeholder-copy diagram-preview-placeholder-copy"><strong>${escapeHtml(label)}</strong><span>Loads when visible</span></span><button type="button" class="drawio-embed-placeholder-btn diagram-preview-placeholder-btn" data-drawio-key="${escapeHtml(embedKey)}">Load diagram</button></span></span>`;
+}
 function getDirectVideoMimeType(pathname = '') {
   const match = pathname.toLowerCase().match(/\.(mp4|ogg|webm)$/i);
   if (!match) {
@@ -220,12 +224,13 @@ function resolveLocalAttachmentUrl(source = '', {
 }
 function renderInlineWikiText(content, {
+  drawioEmbedCounts,
   excalidrawEmbedCounts,
   fileList,
   mermaidEmbedCounts,
   plantUmlEmbedCounts,
 }) {
-  const regex = /!\[\[([^\]|]+\.(?:excalidraw|mmd|mermaid|puml|plantuml))(?:\|([^\]]+))?\]\]|\[\[([^\]|]+)(?:\|([^\]]+))?\]\]/gi;
+  const regex = /!\[\[([^\]|]+\.(?:excalidraw|drawio|mmd|mermaid|puml|plantuml))(?:\|([^\]]+))?\]\]|\[\[([^\]|]+)(?:\|([^\]]+))?\]\]/gi;
   let lastIndex = 0;
   let html = '';
   let match;
@@ -247,6 +252,14 @@ function renderInlineWikiText(content, {
           label: normalizePreviewTypography(label.replace(/\.excalidraw$/i, '')),
           target,
         });
+      } else if (/\.drawio$/i.test(target)) {
+        const occurrenceIndex = drawioEmbedCounts.get(target) ?? 0;
+        drawioEmbedCounts.set(target, occurrenceIndex + 1);
+        html += createDrawioPlaceholder({
+          embedKey: `${target}#${occurrenceIndex}`,
+          label: normalizePreviewTypography(label.replace(/\.drawio$/i, '')),
+          target,
+        });
       } else if (/\.(?:mmd|mermaid)$/i.test(target)) {
         const occurrenceIndex = mermaidEmbedCounts.get(target) ?? 0;
         mermaidEmbedCounts.set(target, occurrenceIndex + 1);
@@ -325,6 +338,7 @@ function createMarkdownRenderer(fileList = [], {
     });
   });
+  const drawioEmbedCounts = new Map();
   const excalidrawEmbedCounts = new Map();
   const mermaidCounts = new Map();
   const mermaidEmbedCounts = new Map();
@@ -398,6 +412,7 @@ function createMarkdownRenderer(fileList = [], {
     if (content.startsWith('[x] ') || content.startsWith('[X] ')) {
       return `<input type="checkbox" checked disabled> ${renderInlineWikiText(content.slice(4), {
+        drawioEmbedCounts,
         excalidrawEmbedCounts,
         fileList,
         mermaidEmbedCounts,
@@ -407,6 +422,7 @@ function createMarkdownRenderer(fileList = [], {
     if (content.startsWith('[ ] ')) {
       return `<input type="checkbox" disabled> ${renderInlineWikiText(content.slice(4), {
+        drawioEmbedCounts,
         excalidrawEmbedCounts,
         fileList,
         mermaidEmbedCounts,
@@ -415,6 +431,7 @@ function createMarkdownRenderer(fileList = [], {
     }
     return renderInlineWikiText(content, {
+      drawioEmbedCounts,
       excalidrawEmbedCounts,
       fileList,
       mermaidEmbedCounts,

package/src/client/application/preview-render-profile.js CHANGED Viewed

@@ -1,6 +1,7 @@
 export const LARGE_DOCUMENT_CHAR_THRESHOLD = 150000;
 export const LARGE_DOCUMENT_MERMAID_THRESHOLD = 20;
 export const LARGE_DOCUMENT_EXCALIDRAW_THRESHOLD = 8;
+export const LARGE_DOCUMENT_DRAWIO_THRESHOLD = 8;
 export const LARGE_DOCUMENT_PLANTUML_THRESHOLD = 12;
 function countMatches(source, pattern) {
@@ -15,6 +16,7 @@ export function analyzeMarkdownComplexity(markdownText = '') {
   return {
     chars: source.length,
+    drawioEmbeds: countMatches(source, /!\[\[[^\]]+\.drawio(?:\|[^\]]+)?\]\]/gi),
     excalidrawEmbeds: countMatches(source, /!\[\[[^\]]+\.excalidraw(?:\|[^\]]+)?\]\]/gi),
     mermaidBlocks: countMatches(source, /(^|\n)```mermaid\b/gi) + mermaidEmbeds,
     plantumlBlocks: plantUmlFences + plantUmlEmbeds,
@@ -27,6 +29,7 @@ export function isLargeDocumentStats(stats) {
     && (
       stats.chars >= LARGE_DOCUMENT_CHAR_THRESHOLD
       || stats.mermaidBlocks >= LARGE_DOCUMENT_MERMAID_THRESHOLD
+      || stats.drawioEmbeds >= LARGE_DOCUMENT_DRAWIO_THRESHOLD
       || stats.excalidrawEmbeds >= LARGE_DOCUMENT_EXCALIDRAW_THRESHOLD
       || stats.plantumlBlocks >= LARGE_DOCUMENT_PLANTUML_THRESHOLD
     )
@@ -37,6 +40,7 @@ export function getRenderProfile(markdownText = '') {
   const source = String(markdownText);
   const hasMermaid = /(^|\n)```mermaid\b/i.test(source)
     || /!\[\[[^\]]+\.(?:mmd|mermaid)(?:\|[^\]]+)?\]\]/i.test(source);
+  const hasDrawioEmbed = /!\[\[[^\]]+\.drawio(?:\|[^\]]+)?\]\]/i.test(source);
   const hasExcalidrawEmbed = /!\[\[[^\]]+\.excalidraw(?:\|[^\]]+)?\]\]/i.test(source);
   const hasPlantUml = /(^|\n)```(?:plantuml|puml)\b/i.test(source)
     || /!\[\[[^\]]+\.(?:puml|plantuml)(?:\|[^\]]+)?\]\]/i.test(source);
@@ -49,7 +53,7 @@ export function getRenderProfile(markdownText = '') {
     };
   }
-  if (hasMermaid || hasExcalidrawEmbed || hasPlantUml) {
+  if (hasMermaid || hasDrawioEmbed || hasExcalidrawEmbed || hasPlantUml) {
     return {
       debounceMs: 0,
       deferUntilIdle: false,

package/src/client/application/workspace-chrome-controller.js CHANGED Viewed

@@ -9,6 +9,7 @@ export class WorkspaceChromeController {
     getDisplayName,
     loadBacklinks,
     onBeforeFileOpen,
+    onRenderDrawioPreview,
     onFileOpenError,
     onFileOpenReady,
     onRenderExcalidrawPreview,
@@ -27,6 +28,7 @@ export class WorkspaceChromeController {
     this.getDisplayName = getDisplayName;
     this.loadBacklinks = loadBacklinks;
     this.onBeforeFileOpen = onBeforeFileOpen;
+    this.onRenderDrawioPreview = onRenderDrawioPreview;
     this.onFileOpenError = onFileOpenError;
     this.onFileOpenReady = onFileOpenReady;
     this.onRenderExcalidrawPreview = onRenderExcalidrawPreview;
@@ -71,6 +73,7 @@ export class WorkspaceChromeController {
   }
   finalizeFileOpen({
+    isDrawio = false,
     filePath,
     isExcalidraw = false,
     isImage = false,
@@ -80,6 +83,9 @@ export class WorkspaceChromeController {
     if (isExcalidraw) {
       this.onRenderExcalidrawPreview(filePath);
     }
+    if (isDrawio) {
+      this.onRenderDrawioPreview(filePath);
+    }
     if (isImage) {
       this.onRenderImagePreview(filePath);
     }

package/src/client/application/workspace-coordinator.js CHANGED Viewed

@@ -21,6 +21,7 @@ export class WorkspaceCoordinator {
     getLocalUser,
     getStoredUserName,
     getTheme,
+    isDrawioFile,
     isExcalidrawFile,
     isImageFile,
     isMermaidFile,
@@ -41,6 +42,7 @@ export class WorkspaceCoordinator {
     onSessionAssigned = null,
     onFileOpenMetric = null,
     onRenderExcalidrawPreview,
+    onRenderDrawioPreview,
     onRenderImagePreview,
     onSyncWrapToggle,
     onUpdateActiveFile,
@@ -50,6 +52,7 @@ export class WorkspaceCoordinator {
     onViewModeReset,
     renderPresence,
     scrollContainerForSession,
+    shouldUseDrawioPreview = null,
     showEditorLoading,
     stateStore,
   }) {
@@ -63,6 +66,7 @@ export class WorkspaceCoordinator {
     this.getLocalUser = getLocalUser;
     this.getStoredUserName = getStoredUserName;
     this.getTheme = getTheme;
+    this.isDrawioFile = isDrawioFile ?? (() => false);
     this.isExcalidrawFile = isExcalidrawFile ?? (() => false);
     this.isImageFile = isImageFile ?? (() => false);
     this.isMermaidFile = isMermaidFile ?? (() => false);
@@ -89,6 +93,7 @@ export class WorkspaceCoordinator {
     this.onUpdateLobbyCurrentFile = onUpdateLobbyCurrentFile;
     this.onUpdateVisibleChrome = onUpdateVisibleChrome;
     this.renderPresence = renderPresence;
+    this.shouldUseDrawioPreview = shouldUseDrawioPreview ?? (() => true);
     this.stateStore = stateStore;
     this.session = null;
     this.lifecycle = new FileOpenLifecycle({
@@ -102,6 +107,7 @@ export class WorkspaceCoordinator {
       getDisplayName,
       loadBacklinks,
       onBeforeFileOpen,
+      onRenderDrawioPreview,
       onFileOpenError,
       onFileOpenReady,
       onRenderExcalidrawPreview,
@@ -149,17 +155,18 @@ export class WorkspaceCoordinator {
     this.cleanupAfterSessionDestroy();
   }
-  async openFile(filePath) {
+  async openFile(filePath, { drawioMode = null } = {}) {
     if (!this.isTabActive()) {
       return;
     }
+    const isDrawio = this.isDrawioFile(filePath) && drawioMode !== 'text' && this.shouldUseDrawioPreview(filePath);
     const isExcalidraw = this.isExcalidrawFile(filePath);
     const isImage = this.isImageFile(filePath);
     const isMermaid = this.isMermaidFile(filePath);
     const isPlantUml = this.isPlantUmlFile(filePath);
-    if (filePath === this.stateStore.get('currentFilePath') && (this.session || isExcalidraw || isImage)) {
+    if (filePath === this.stateStore.get('currentFilePath') && (this.session || isDrawio || isExcalidraw || isImage)) {
       this.onUpdateActiveFile(filePath);
       this.onUpdateLobbyCurrentFile(filePath);
       return;
@@ -170,11 +177,11 @@ export class WorkspaceCoordinator {
     this.cleanupSession();
     const chromeState = this.chromeController.prepareForFileOpen(filePath, {
-      resetConnectionState: !isExcalidraw && !isImage,
+      resetConnectionState: !isDrawio && !isExcalidraw && !isImage,
     });
     this.reportFileOpenMetric('open_started', loadToken, { filePath });
-    if (isExcalidraw || isImage) {
+    if (isDrawio || isExcalidraw || isImage) {
       this.onSessionAssigned?.(null);
       if (loadToken !== this.stateStore.get('sessionLoadToken')) {
@@ -184,6 +191,7 @@ export class WorkspaceCoordinator {
       this.chromeController.markFileOpenReady(null);
       this.chromeController.finalizeFileOpen({
         filePath,
+        isDrawio,
         isExcalidraw,
         isImage,
         session: null,

package/src/client/application/workspace-preview-controller.js CHANGED Viewed

@@ -7,10 +7,12 @@ import { resolveApiUrl } from '../domain/runtime-paths.js';
 export class WorkspacePreviewController {
   constructor({
     backlinksPanel,
+    drawioEmbed,
     elements,
     excalidrawEmbed,
     getDisplayName,
     getSession,
+    isDrawioFile,
     isExcalidrawFile,
     isImageFile,
     isMermaidFile,
@@ -23,10 +25,20 @@ export class WorkspacePreviewController {
     videoEmbed,
   }) {
     this.backlinksPanel = backlinksPanel;
+    this.drawioEmbed = drawioEmbed ?? {
+      detachForCommit() {},
+      hydrateVisibleEmbeds() {},
+      reconcileEmbeds() {},
+      setHydrationPaused() {},
+      syncLayout() {},
+      updateLocalUser() {},
+      updateTheme() {},
+    };
     this.elements = elements;
     this.excalidrawEmbed = excalidrawEmbed;
     this.getDisplayName = getDisplayName;
     this.getSession = getSession;
+    this.isDrawioFile = isDrawioFile ?? (() => false);
     this.isExcalidrawFile = isExcalidrawFile ?? (() => false);
     this.isImageFile = isImageFile ?? (() => false);
     this.isMermaidFile = isMermaidFile ?? (() => false);
@@ -60,6 +72,7 @@ export class WorkspacePreviewController {
   }
   resetPreviewMode() {
+    this.elements.previewContent?.classList.remove('is-drawio-file-preview');
     this.elements.previewContent?.classList.remove('is-excalidraw-file-preview');
     this.elements.previewContent?.classList.remove('is-image-file-preview');
     this.elements.previewContent?.classList.remove('is-mermaid-file-preview');
@@ -67,6 +80,7 @@ export class WorkspacePreviewController {
   }
   syncFileChrome(filePath) {
+    const isDrawio = this.isDrawioFile(filePath);
     const isExcalidraw = this.isExcalidrawFile(filePath);
     const isImage = this.isImageFile(filePath);
     const isMarkdown = isMarkdownFilePath(filePath);
@@ -79,7 +93,7 @@ export class WorkspacePreviewController {
     this.elements.previewContent?.classList.toggle('is-mermaid-file-preview', isMermaid);
     this.elements.previewContent?.classList.toggle('is-plantuml-file-preview', isPlantUml);
-    if (isExcalidraw || isImage) {
+    if (isDrawio || isExcalidraw || isImage) {
       this.layoutController.setView('preview', { persist: false });
       this.outlineController.close();
       this.backlinksPanel.clear();
@@ -99,6 +113,7 @@ export class WorkspacePreviewController {
     }
     this.videoEmbed?.detachForCommit();
+    this.drawioEmbed.detachForCommit();
     this.excalidrawEmbed.detachForCommit();
     this.resetPreviewMode();
     previewElement.classList.add('is-excalidraw-file-preview');
@@ -124,11 +139,53 @@ export class WorkspacePreviewController {
     this.scrollSyncController.setLargeDocumentMode(false);
     this.scrollSyncController.invalidatePreviewBlocks();
     this.videoEmbed?.reconcileEmbeds(previewElement);
+    this.drawioEmbed.reconcileEmbeds(previewElement);
     this.excalidrawEmbed.reconcileEmbeds(previewElement, { isLargeDocument: false });
+    this.drawioEmbed.hydrateVisibleEmbeds();
     this.excalidrawEmbed.hydrateVisibleEmbeds();
     this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
   }
+  renderDrawioFilePreview(filePath) {
+    const previewElement = this.elements.previewContent;
+    if (!previewElement) {
+      return;
+    }
+    this.videoEmbed?.detachForCommit();
+    this.drawioEmbed.detachForCommit();
+    this.excalidrawEmbed.detachForCommit();
+    this.resetPreviewMode();
+    previewElement.classList.add('is-drawio-file-preview');
+    const renderHost = this.previewRenderer.ensureRenderHost();
+    this.previewRenderer.normalizePreviewChildren(renderHost);
+    const placeholder = document.createElement('div');
+    placeholder.className = 'drawio-embed-placeholder';
+    placeholder.dataset.drawioKey = `${filePath}#file-preview`;
+    placeholder.dataset.drawioLabel = this.getDisplayName(filePath);
+    placeholder.dataset.drawioMode = 'edit';
+    placeholder.dataset.drawioTarget = filePath;
+    const loadingShell = document.createElement('div');
+    loadingShell.className = 'preview-shell';
+    loadingShell.textContent = 'Loading draw.io preview…';
+    placeholder.appendChild(loadingShell);
+    if (renderHost) {
+      renderHost.replaceChildren(placeholder);
+      renderHost.style.minHeight = '';
+    }
+    previewElement.dataset.renderPhase = 'ready';
+    this.outlineController.refresh();
+    this.scrollSyncController.setLargeDocumentMode(false);
+    this.scrollSyncController.invalidatePreviewBlocks();
+    this.videoEmbed?.reconcileEmbeds(previewElement);
+    this.drawioEmbed.reconcileEmbeds(previewElement);
+    this.drawioEmbed.hydrateVisibleEmbeds();
+    this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
+  }
   renderImageFilePreview(filePath) {
     const previewElement = this.elements.previewContent;
     if (!previewElement) {
@@ -136,6 +193,7 @@ export class WorkspacePreviewController {
     }
     this.videoEmbed?.detachForCommit();
+    this.drawioEmbed.detachForCommit();
     this.excalidrawEmbed.detachForCommit();
     this.resetPreviewMode();
     previewElement.classList.add('is-image-file-preview');
@@ -171,6 +229,7 @@ export class WorkspacePreviewController {
     }
     this.videoEmbed?.detachForCommit();
+    this.drawioEmbed.detachForCommit();
     this.excalidrawEmbed.detachForCommit();
     this.resetPreviewMode();
     const renderHost = this.previewRenderer.ensureRenderHost();
@@ -239,8 +298,9 @@ export class WorkspacePreviewController {
       setPreviewLayoutSyncTimer(null);
       const hasSession = Boolean(this.getSession());
+      const isDrawioPreview = this.elements.previewContent?.classList?.contains?.('is-drawio-file-preview') ?? false;
       const isExcalidrawPreview = this.elements.previewContent?.classList?.contains?.('is-excalidraw-file-preview') ?? false;
-      if ((!hasSession && !isExcalidrawPreview) || !this.elements.previewContent) {
+      if ((!hasSession && !isDrawioPreview && !isExcalidrawPreview) || !this.elements.previewContent) {
         return;
       }
@@ -256,8 +316,9 @@ export class WorkspacePreviewController {
       this.previewRenderer.scheduleActiveMermaidRefit();
       this.previewRenderer.scheduleActivePlantUmlRefit();
       this.videoEmbed?.syncLayout();
+      this.drawioEmbed.syncLayout();
       this.excalidrawEmbed.syncLayout();
-      if (isExcalidrawPreview && !hasSession) {
+      if ((isDrawioPreview || isExcalidrawPreview) && !hasSession) {
         return;
       }
@@ -288,6 +349,7 @@ export class WorkspacePreviewController {
     const nextPaused = Boolean(isActive);
     setHydrationPaused(nextPaused);
     this.previewRenderer.setHydrationPaused(nextPaused);
+    this.drawioEmbed.setHydrationPaused(nextPaused);
     this.excalidrawEmbed.setHydrationPaused(nextPaused);
     if (nextPaused) {

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

@@ -4,6 +4,7 @@ export class WorkspaceRouteController {
     clearInitialFileBootstrap,
     clearStaticPreviewDocument = null,
     closeSidebarOnMobile,
+    drawioEmbed,
     elements,
     excalidrawEmbed,
     fileHistoryView = null,
@@ -38,6 +39,7 @@ export class WorkspaceRouteController {
     this.clearInitialFileBootstrap = clearInitialFileBootstrap;
     this.clearStaticPreviewDocument = clearStaticPreviewDocument;
     this.closeSidebarOnMobile = closeSidebarOnMobile;
+    this.drawioEmbed = drawioEmbed ?? { setHydrationPaused() {} };
     this.elements = elements;
     this.excalidrawEmbed = excalidrawEmbed;
     this.fileHistoryView = fileHistoryView;
@@ -113,7 +115,7 @@ export class WorkspaceRouteController {
     }
     this.setSidebarTab('files');
-    await this.openFile(route.filePath);
+    await this.openFile(route.filePath, { drawioMode: route.drawioMode || null });
   }
   showEmptyState() {
@@ -243,14 +245,14 @@ export class WorkspaceRouteController {
     this.backlinksPanel.clear();
   }
-  async openFile(filePath) {
+  async openFile(filePath, options = {}) {
     this.imageLightbox?.close?.();
     this.gitPanel.setSelection();
     this.gitDiffView.hide();
     this.fileHistoryView?.hide?.();
     this.clearStaticPreviewDocument?.();
     this.syncMainChrome({ mode: 'editor' });
-    await this.workspaceCoordinator.openFile(filePath);
+    await this.workspaceCoordinator.openFile(filePath, options);
     this.setSession(this.workspaceCoordinator.getSession());
   }
@@ -270,6 +272,7 @@ export class WorkspaceRouteController {
   resetPreviewSurface() {
     this.imageLightbox?.close?.();
     this.previewRenderer.setHydrationPaused(false);
+    this.drawioEmbed.setHydrationPaused(false);
     this.excalidrawEmbed.setHydrationPaused(false);
     this.videoEmbed?.detachForCommit();
     this.scrollSyncController.setLargeDocumentMode(false);