collabmd 0.1.25 → 0.1.26

package/src/client/presentation/file-action-controller.js

@@ -3,6 +3,7 @@ import {
 } from '../../domain/file-kind.js';
 import {
   composeVaultChildPath,
+  createDrawioStarter,
   createMarkdownStarter,
   createMermaidStarter,
   createPlantUmlStarter,
@@ -10,6 +11,7 @@ import {
   normalizeVaultPathInput,
 } from '../domain/vault-paths.js';
 import { createWorkspaceRequestId } from '../domain/workspace-request-id.js';
+import { CreateMenuPresenter } from './create-menu-presenter.js';
 
 function getPathLeaf(path) {
   return String(path ?? '')
@@ -55,6 +57,9 @@ function withRequestId(payload, requestId) {
 
 export class FileActionController {
   constructor({
+    mobileBreakpointQuery = (typeof window !== 'undefined' && typeof window.matchMedia === 'function')
+      ? window.matchMedia('(max-width: 768px)')
+      : { matches: false },
     onFileDelete,
     onFileSelect,
     pendingWorkspaceRequestIds = null,
@@ -72,11 +77,7 @@ export class FileActionController {
     this.vaultClient = vaultClient;
     this.view = view;
     this.refresh = refresh;
-    this.newFileButton = document.getElementById('newFileBtn');
-    this.newDrawingButton = document.getElementById('newDrawingBtn');
-    this.newMermaidButton = document.getElementById('newMermaidBtn');
-    this.newPlantumlButton = document.getElementById('newPlantumlBtn');
-    this.newFolderButton = document.getElementById('newFolderBtn');
+    this.createButton = document.getElementById('sidebarCreateBtn');
     this.refreshButton = document.getElementById('refreshFilesBtn');
     this.actionDialog = document.getElementById('fileActionDialog');
     this.actionForm = document.getElementById('fileActionForm');
@@ -89,16 +90,17 @@ export class FileActionController {
     this.actionNote = document.getElementById('fileActionNote');
     this.actionCancelButton = document.getElementById('fileActionCancel');
     this.actionSubmitButton = document.getElementById('fileActionSubmit');
+    this.createMenu = new CreateMenuPresenter({
+      mobileBreakpointQuery,
+    });
     this.pendingAction = null;
     this.actionBusy = false;
   }
 
   initialize() {
-    this.newFileButton?.addEventListener('click', () => this.handleNewFile());
-    this.newDrawingButton?.addEventListener('click', () => this.handleNewDrawing());
-    this.newMermaidButton?.addEventListener('click', () => this.handleNewMermaid());
-    this.newPlantumlButton?.addEventListener('click', () => this.handleNewPlantUml());
-    this.newFolderButton?.addEventListener('click', () => this.handleNewFolder());
+    this.createButton?.addEventListener('click', () => {
+      this.openRootCreateMenu({ anchor: this.createButton });
+    });
     this.refreshButton?.addEventListener('click', () => this.refresh());
     this.actionCancelButton?.addEventListener('click', () => this.closeActionDialog());
     this.actionForm?.addEventListener('submit', (event) => {
@@ -108,31 +110,78 @@ export class FileActionController {
     this.actionDialog?.addEventListener('close', () => this.resetActionDialog());
   }
 
-  createContextMenuItems(parentDir = '') {
+  getCreateActions({ parentDir = '' } = {}) {
     return [
       {
-        label: 'New markdown file',
+        contextLabel: 'New markdown file',
+        group: 'Note',
+        hint: 'Markdown',
+        icon: this.getCreateActionIcon('markdown'),
+        id: 'markdown',
+        label: 'Markdown note',
+        meta: '.md',
         onSelect: () => this.handleNewFile({ parentDir }),
       },
       {
-        label: 'New Excalidraw drawing',
+        contextLabel: 'New Excalidraw drawing',
+        group: 'Diagram',
+        hint: 'Excalidraw',
+        icon: this.getCreateActionIcon('excalidraw'),
+        id: 'excalidraw',
+        label: 'Excalidraw drawing',
+        meta: '.excalidraw',
         onSelect: () => this.handleNewDrawing({ parentDir }),
       },
       {
-        label: 'New Mermaid diagram',
+        contextLabel: 'New draw.io diagram',
+        group: 'Diagram',
+        hint: 'draw.io',
+        icon: this.getCreateActionIcon('drawio'),
+        id: 'drawio',
+        label: 'draw.io diagram',
+        meta: '.drawio',
+        onSelect: () => this.handleNewDrawio({ parentDir }),
+      },
+      {
+        contextLabel: 'New Mermaid diagram',
+        group: 'Diagram',
+        hint: 'Mermaid',
+        icon: this.getCreateActionIcon('mermaid'),
+        id: 'mermaid',
+        label: 'Mermaid diagram',
+        meta: '.mmd',
         onSelect: () => this.handleNewMermaid({ parentDir }),
       },
       {
-        label: 'New PlantUML diagram',
+        contextLabel: 'New PlantUML diagram',
+        group: 'Diagram',
+        hint: 'PlantUML',
+        icon: this.getCreateActionIcon('plantuml'),
+        id: 'plantuml',
+        label: 'PlantUML diagram',
+        meta: '.puml',
         onSelect: () => this.handleNewPlantUml({ parentDir }),
       },
       {
-        label: 'New folder',
+        contextLabel: 'New folder',
+        group: 'Structure',
+        hint: 'Folder',
+        icon: this.getCreateActionIcon('folder'),
+        id: 'folder',
+        label: 'Folder',
+        meta: 'folder',
         onSelect: () => this.handleNewFolder({ parentDir }),
       },
     ];
   }
 
+  createContextMenuItems(parentDir = '') {
+    return this.getCreateActions({ parentDir }).map((item) => ({
+      label: item.contextLabel,
+      onSelect: item.onSelect,
+    }));
+  }
+
   getDirectoryContextMenuItems(directoryPath) {
     return [
       ...this.createContextMenuItems(directoryPath),
@@ -168,6 +217,23 @@ export class FileActionController {
     }
   }
 
+  getCreateActionIcon(kind) {
+    switch (kind) {
+      case 'drawio':
+      case 'plantuml':
+        return '<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>';
+      case 'excalidraw':
+        return '<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>';
+      case 'folder':
+        return '<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"/></svg>';
+      case 'mermaid':
+        return '<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>';
+      case 'markdown':
+      default:
+        return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>';
+    }
+  }
+
   showError(message, error) {
     this.showToast(error?.message ? `${message}: ${error.message}` : message);
   }
@@ -237,6 +303,7 @@ export class FileActionController {
     }
 
     this.pendingAction = { requiresInput, emptyMessage, onSubmit };
+    this.createMenu.close({ restoreFocus: false });
     this.view?.removeContextMenu?.();
 
     this.actionTitle.textContent = title;
@@ -561,6 +628,19 @@ export class FileActionController {
     };
   }
 
+  openRootCreateMenu({ anchor = this.createButton } = {}) {
+    this.openCreateMenu({ anchor, parentDir: '' });
+  }
+
+  openCreateMenu({ anchor = this.createButton, parentDir = '' } = {}) {
+    this.view?.removeContextMenu?.();
+    this.createMenu.toggle({
+      anchor,
+      items: this.getCreateActions({ parentDir }),
+      title: 'Create',
+    });
+  }
+
   handleNewFile({ parentDir = '' } = {}) {
     const context = this.getCreateContext(parentDir);
 
@@ -669,6 +749,36 @@ export class FileActionController {
     });
   }
 
+  handleNewDrawio({ parentDir = '' } = {}) {
+    const context = this.getCreateContext(parentDir);
+
+    this.openActionDialog({
+      title: 'Create draw.io diagram',
+      copy: context.normalizedParentDir
+        ? 'Create a new `.drawio` diagram inside the selected folder.'
+        : 'Create a new `.drawio` diagram with a native starter document.',
+      label: `Diagram ${context.inputLabelSuffix}`,
+      hint: `${context.hintPrefix} ".drawio" is added automatically.`,
+      note: context.note,
+      placeholder: context.normalizedParentDir ? 'architecture' : 'diagrams/architecture',
+      submitLabel: 'Create diagram',
+      emptyMessage: 'Diagram path is required',
+      onSubmit: (value) => {
+        const normalizedPath = normalizeVaultPathInput(value);
+        if (!normalizedPath) {
+          this.showToast('Diagram path is required');
+          return false;
+        }
+
+        const starter = createDrawioStarter(composeVaultChildPath(context.normalizedParentDir, normalizedPath));
+        return this.createVaultFile(starter.path, starter.content, {
+          errorMessage: 'Failed to create draw.io diagram',
+          openAfterCreate: true,
+        });
+      },
+    });
+  }
+
   handleNewPlantUml({ parentDir = '' } = {}) {
     const context = this.getCreateContext(parentDir);
 

package/src/client/presentation/file-explorer-controller.js

@@ -49,6 +49,7 @@ export class FileExplorerController {
       },
     });
     this.actionController = new FileActionController({
+      mobileBreakpointQuery,
       onFileDelete: this.onFileDelete,
       onFileSelect: this.onFileSelect,
       pendingWorkspaceRequestIds,

package/src/client/presentation/file-explorer-view.js

@@ -382,11 +382,15 @@ export class FileExplorerView {
   createFileItem({ activeFilePath, depth, filePath, fileType = 'file', name }) {
     const button = document.createElement('button');
     button.className = 'file-tree-item file-tree-file';
+    const isDrawio = fileType === 'drawio';
     const isExcalidraw = fileType === 'excalidraw';
     const isImage = fileType === 'image';
     const isMermaid = fileType === 'mermaid';
     const isPlantUml = fileType === 'plantuml';
 
+    if (isDrawio) {
+      button.classList.add('is-drawio');
+    }
     if (isExcalidraw) {
       button.classList.add('is-excalidraw');
     }
@@ -407,7 +411,7 @@ export class FileExplorerView {
     button.dataset.depth = depth;
     button.dataset.path = filePath;
     button.innerHTML = `
-      ${this.getFileIconSvg({ isExcalidraw, isImage, isMermaid, isPlantUml })}
+      ${this.getFileIconSvg({ isDrawio, isExcalidraw, isImage, isMermaid, isPlantUml })}
       <span class="file-tree-name">${escapeHtml(stripVaultFileExtension(name))}</span>
     `;
 
@@ -529,7 +533,11 @@ export class FileExplorerView {
     return true;
   }
 
-  getFileIconSvg({ isExcalidraw, isImage, isMermaid, isPlantUml }) {
+  getFileIconSvg({ isDrawio, isExcalidraw, isImage, isMermaid, isPlantUml }) {
+    if (isDrawio) {
+      return '<svg class="file-tree-icon" 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>';
+    }
+
     if (isExcalidraw) {
       return '<svg class="file-tree-icon" 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>';
     }

package/src/client/presentation/file-tree-state.js

@@ -15,6 +15,7 @@ function flattenTree(nodes, files = [], searchEntries = []) {
     if (
       node.type === 'file'
       || node.type === 'excalidraw'
+      || node.type === 'drawio'
       || node.type === 'mermaid'
       || node.type === 'plantuml'
       || node.type === 'image'

package/src/client/presentation/theme-controller.js

@@ -1,5 +1,5 @@
-const DARK_THEME_ICON = '<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>';
-const LIGHT_THEME_ICON = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';
+const SUN_ICON = '<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>';
+const MOON_ICON = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';
 
 export class ThemeController {
   constructor({ storageKey = 'collabmd-theme', onChange }) {
@@ -55,10 +55,27 @@ export class ThemeController {
   }
 
   updateToggleIcons() {
-    const icon = this.currentTheme === 'dark' ? DARK_THEME_ICON : LIGHT_THEME_ICON;
+    const currentLabel = this.currentTheme === 'dark' ? 'Dark' : 'Light';
+    const nextLabel = this.currentTheme === 'dark' ? 'light' : 'dark';
+    const icon = this.currentTheme === 'dark' ? MOON_ICON : SUN_ICON;
 
     document.querySelectorAll('[data-theme-toggle]').forEach((button) => {
-      button.innerHTML = icon;
+      const iconElement = button.querySelector('[data-theme-toggle-icon]');
+      const stateElement = button.querySelector('[data-theme-toggle-state]');
+
+      if (iconElement) {
+        iconElement.innerHTML = icon;
+      } else {
+        button.innerHTML = icon;
+      }
+
+      if (stateElement) {
+        stateElement.textContent = currentLabel;
+        stateElement.dataset.theme = this.currentTheme;
+      }
+
+      button.setAttribute('aria-label', `Theme: ${currentLabel}. Switch to ${nextLabel} mode`);
+      button.setAttribute('title', `Theme: ${currentLabel}. Switch to ${nextLabel} mode`);
     });
   }
 }

package/src/client/styles/components/navigation.css

@@ -24,6 +24,30 @@
   white-space: nowrap;
 }
 
+.toolbar-theme-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.toolbar-theme-button {
+  width: 32px;
+  min-width: 32px;
+  justify-content: center;
+  padding: 0;
+  overflow: hidden;
+}
+
+.toolbar-theme-button .ui-toolbar-button-label {
+  display: none !important;
+}
+
+.toolbar-theme-button .toolbar-theme-state {
+  display: none !important;
+  margin-left: auto;
+}
+
 .ui-nav-tabs {
   display: flex;
   padding: 0 var(--space-2);

package/src/client/styles/features/diagram-preview.css

@@ -83,11 +83,129 @@
 }
 
 .excalidraw-embed,
-.excalidraw-embed-placeholder {
+.excalidraw-embed-placeholder,
+.drawio-embed,
+.drawio-embed-placeholder {
   display: block;
   transition: box-shadow 0.18s ease;
 }
 
+.drawio-embed {
+  width: 100%;
+  max-width: none;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+}
+
+.drawio-embed.is-direct-file {
+  flex: 1;
+}
+
+.drawio-embed.is-static-preview {
+  display: flex;
+  flex-direction: column;
+}
+
+.drawio-embed-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  min-height: 38px;
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-surface-raised);
+}
+
+.drawio-embed-label {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--color-text-muted);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.drawio-embed-btn {
+  flex-shrink: 0;
+  padding: 4px 10px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-2);
+  color: var(--color-text);
+  font-size: var(--text-xs);
+  cursor: pointer;
+}
+
+.drawio-embed-iframe {
+  width: 100%;
+  min-height: 420px;
+  border: 0;
+  background: transparent;
+}
+
+.drawio-embed-image-shell {
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: var(--surface-embed-canvas);
+  cursor: pointer;
+}
+
+.drawio-embed-image {
+  display: block;
+  width: 100%;
+  height: auto;
+  background: transparent;
+}
+
+.drawio-export-iframe {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.drawio-viewer-shell {
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  width: 100%;
+  min-height: 220px;
+  background: var(--surface-embed-canvas);
+}
+
+.drawio-viewer-frame {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  min-height: 220px;
+  background: var(--surface-embed-canvas);
+  cursor: pointer;
+}
+
+.drawio-viewer-frame svg,
+.drawio-viewer-frame iframe,
+.drawio-viewer-frame > div {
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.drawio-viewer-frame svg {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .excalidraw-embed-overlay-root {
   position: absolute;
   inset: 0;

package/src/client/styles/layout/responsive.css

@@ -4,11 +4,14 @@
   .input,
   .sidebar-search-input,
   .qs-input,
-  .chat-input,
-  .editor-container .cm-editor {
+  .chat-input {
     font-size: 16px;
   }
 
+  .editor-container .cm-editor {
+    font-size: 15px;
+  }
+
   .sidebar {
     position: fixed;
     top: 0;
@@ -64,6 +67,34 @@
   }
 
   .toolbar-presence-cluster {
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .toolbar-presence-cluster .user-avatar {
+    width: 22px;
+    height: 22px;
+    margin-left: -3px;
+    border-width: 1.5px;
+  }
+
+  .toolbar-presence-cluster .user-avatar.is-local {
+    width: 22px;
+    min-width: 22px;
+    margin-right: 0;
+    padding: 0;
+    gap: 0;
+  }
+
+  .toolbar-presence-cluster .user-avatar.is-local .user-avatar-initial {
+    width: auto;
+    height: auto;
+    background: transparent;
+    font-size: var(--text-meta);
+  }
+
+  .toolbar-presence-cluster .user-avatar-self-label {
     display: none;
   }
 
@@ -73,17 +104,17 @@
 
   .toolbar-overflow-menu {
     position: absolute;
-    top: calc(100% + var(--space-2));
+    top: calc(100% + 6px);
     right: 0;
     z-index: 14;
     display: none;
-    min-width: min(260px, calc(100vw - 24px));
+    width: min(212px, calc(100vw - 20px));
     flex-direction: column;
     align-items: stretch;
-    gap: var(--space-1);
-    padding: var(--space-2);
+    gap: 0;
+    padding: 4px;
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
+    border-radius: 18px;
     background: oklch(from var(--color-surface) l c h / 0.98);
     box-shadow: var(--shadow-lg);
     backdrop-filter: blur(12px);
@@ -100,10 +131,48 @@
 
   .toolbar-overflow-menu .ui-toolbar-button-label {
     display: inline;
+    min-width: 0;
+    flex: 1;
+    text-align: left;
+  }
+
+  .toolbar-overflow-menu .toolbar-theme-button .ui-toolbar-button-label {
+    display: inline !important;
   }
 
   .toolbar-overflow-menu .ui-toolbar-button {
     justify-content: flex-start;
+    min-height: 36px;
+    gap: 8px;
+    padding: 0 10px;
+    border-radius: 12px;
+  }
+
+  .toolbar-overflow-menu .toolbar-theme-button {
+    width: 100%;
+    min-width: 0;
+    margin-top: 0;
+    padding: 0 10px;
+    background: var(--color-surface-offset);
+    color: var(--color-text);
+  }
+
+  .toolbar-overflow-menu .toolbar-theme-button:hover {
+    background: var(--color-surface-dynamic);
+  }
+
+  .toolbar-overflow-menu .toolbar-theme-button .toolbar-theme-state {
+    display: inline-flex !important;
+  }
+
+  .toolbar-overflow-menu .toolbar-theme-state[data-theme='dark'] {
+    background: var(--color-surface-dynamic);
+    color: var(--color-text);
+  }
+
+  .toolbar-overflow-menu .toolbar-theme-state[data-theme='light'] {
+    background: var(--color-primary-highlight);
+    color: var(--color-primary);
   }
 
   .sidebar-close-btn {

package/src/client/styles/layout/shell.css

@@ -221,15 +221,30 @@
   max-width: none;
 }
 
+.preview-content.is-drawio-file-preview {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 100%;
+  height: 100%;
+  max-width: none;
+  margin: 0;
+  padding: var(--space-3);
+}
+
 .preview-content.is-mermaid-file-preview [data-preview-render-host='true'],
 .preview-content.is-plantuml-file-preview [data-preview-render-host='true'] {
   min-height: 100%;
 }
 
+.preview-content.is-drawio-file-preview [data-preview-render-host='true'],
 .preview-content.is-excalidraw-file-preview [data-preview-render-host='true'],
 .preview-content.is-image-file-preview [data-preview-render-host='true'] {
   display: flex;
   flex: 1;
+  width: 100%;
+  max-width: none;
   min-width: 0;
   min-height: 100%;
 }
@@ -258,6 +273,32 @@
   margin: 0;
 }
 
+.preview-content.is-drawio-file-preview .drawio-embed,
+.preview-content.is-drawio-file-preview .drawio-embed-placeholder {
+  width: 100%;
+  min-height: 100%;
+  margin: 0;
+}
+
+.preview-content.is-drawio-file-preview .drawio-embed {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.preview-content.is-drawio-file-preview .drawio-embed-placeholder,
+.preview-content.is-drawio-file-preview .preview-shell {
+  width: 100%;
+  min-height: 100%;
+}
+
+.preview-content.is-drawio-file-preview .drawio-embed-iframe {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+}
+
 .preview-content.is-excalidraw-file-preview .excalidraw-embed,
 .preview-content.is-excalidraw-file-preview .excalidraw-embed-placeholder {
   width: 100%;