collabmd 0.1.23 → 0.1.26

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

@@ -44,13 +44,37 @@
 
 .sidebar-actions {
   display: flex;
+  align-items: center;
   gap: 4px;
+  margin-left: auto;
 }
 
 .sidebar-close-btn {
   display: none;
 }
 
+.sidebar-create-shell {
+  position: relative;
+}
+
+.sidebar-create-btn {
+  min-height: 28px;
+  padding: 0 10px 0 8px;
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
+  font-weight: 600;
+}
+
+.sidebar-create-btn[aria-expanded='true'] {
+  border-color: var(--interactive-border);
+  background: var(--interactive-surface);
+  color: var(--color-primary);
+}
+
+.sidebar-create-btn-label {
+  white-space: nowrap;
+}
+
 .sidebar-search {
   padding: var(--space-2) var(--space-3);
   border-bottom: 1px solid var(--color-divider);
@@ -174,3 +198,203 @@
 .file-tree-children {
   /* Children indentation handled by paddingLeft on items */
 }
+
+.file-action-sheet-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 130;
+  background: oklch(from var(--color-bg) l c h / 0.44);
+}
+
+.file-action-sheet {
+  position: fixed;
+  right: var(--space-3);
+  bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
+  left: var(--space-3);
+  z-index: 131;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px;
+  border: 1px solid var(--color-border);
+  border-radius: calc(var(--radius-xl) + 2px);
+  background: oklch(from var(--color-surface) l c h / 0.98);
+  box-shadow: var(--shadow-lg);
+  backdrop-filter: blur(12px);
+}
+
+.file-action-sheet-item {
+  justify-content: flex-start;
+  width: 100%;
+}
+
+.file-action-sheet-item.file-context-danger {
+  color: var(--color-danger);
+}
+
+.create-menu {
+  position: fixed;
+  z-index: 1010;
+  width: min(280px, calc(100vw - 16px));
+  padding: var(--space-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: oklch(from var(--color-surface) l c h / 0.98);
+  box-shadow: var(--shadow-lg);
+  backdrop-filter: blur(12px);
+}
+
+.create-menu-group,
+.create-action-sheet-group,
+.create-action-sheet-header {
+  padding: 0 var(--space-2);
+  color: var(--color-text-faint);
+  font-size: var(--text-meta);
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.create-menu-group:not(:first-child),
+.create-action-sheet-group:not(:first-child) {
+  margin-top: 8px;
+}
+
+.create-action-sheet-header {
+  padding: 0 var(--space-2) 4px;
+}
+
+.create-menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  margin-top: 2px;
+  padding: var(--space-2);
+  border: none;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text);
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--transition-interactive), color var(--transition-interactive);
+}
+
+.create-menu-item:hover,
+.create-menu-item:focus-visible {
+  background: var(--color-surface-offset);
+  color: var(--color-text);
+  outline: none;
+}
+
+.create-menu-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  min-width: 18px;
+  color: var(--color-text-muted);
+}
+
+.create-menu-item-copy {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.create-menu-item-label {
+  font-size: var(--text-sm);
+  font-weight: 600;
+}
+
+.create-menu-item-meta {
+  color: var(--color-text-muted);
+  font-size: var(--text-meta);
+}
+
+.create-action-sheet-item {
+  justify-content: flex-start;
+  min-height: 44px;
+}
+
+.create-action-sheet-option {
+  gap: 10px;
+  min-height: 60px;
+  padding: 0 14px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background:
+    linear-gradient(180deg, oklch(from var(--color-surface-offset) calc(l + 0.02) c h / 0.9), var(--color-surface-offset)),
+    var(--color-surface-offset);
+  color: var(--color-text);
+  box-shadow:
+    inset 0 1px 0 oklch(from var(--color-text) l c h / 0.03),
+    0 10px 24px oklch(from var(--color-bg) l c h / 0.08);
+  transition:
+    border-color var(--transition-interactive),
+    background var(--transition-interactive),
+    box-shadow var(--transition-interactive),
+    transform var(--transition-interactive);
+}
+
+.create-action-sheet-option:hover,
+.create-action-sheet-option:focus-visible {
+  border-color: oklch(from var(--color-primary) calc(l + 0.06) c h / 0.4);
+  background:
+    linear-gradient(180deg, oklch(from var(--color-primary-highlight) calc(l + 0.02) c h / 0.72), var(--color-surface-offset)),
+    var(--color-surface-offset);
+  box-shadow:
+    inset 0 1px 0 oklch(from var(--color-text) l c h / 0.04),
+    0 14px 30px oklch(from var(--color-bg) l c h / 0.12);
+  color: var(--color-text);
+  outline: none;
+  transform: translateY(-1px);
+}
+
+.create-action-sheet-option .create-menu-item-icon {
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
+  background: oklch(from var(--color-surface) calc(l + 0.03) c h / 0.78);
+  color: var(--color-primary);
+}
+
+.create-action-sheet-option .create-menu-item-copy {
+  flex: 1;
+  gap: 2px;
+  justify-items: start;
+  text-align: left;
+}
+
+.create-action-sheet-option .create-menu-item-label {
+  font-size: var(--text-sm);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.create-action-sheet-option .create-menu-item-meta {
+  justify-self: start;
+  font-size: var(--text-meta);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+.create-action-sheet-group {
+  padding-top: 4px;
+}
+
+.create-action-sheet-cancel {
+  align-self: flex-start;
+  min-height: 36px;
+  padding: 0 var(--space-2);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+  font-weight: 600;
+}
+
+.create-action-sheet-cancel:hover,
+.create-action-sheet-cancel:focus-visible {
+  color: var(--color-text);
+  outline: none;
+}

package/src/client/styles/layout/view-modes.css

@@ -23,6 +23,7 @@
 }
 
 .editor-layout[data-view="preview"] .preview-content.is-excalidraw-file-preview,
+.editor-layout[data-view="preview"] .preview-content.is-drawio-file-preview,
 .editor-layout[data-view="preview"] .preview-content.is-image-file-preview,
 .editor-layout[data-view="preview"] .preview-content.is-mermaid-file-preview,
 .editor-layout[data-view="preview"] .preview-content.is-plantuml-file-preview {

package/src/client/styles/primitives/controls.css

@@ -124,8 +124,9 @@
 }
 
 .ui-icon-button--toolbar {
-  width: 36px;
-  min-width: 36px;
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
 }
 
 .ui-pill-button {

package/src/domain/drawio-room.js

@@ -0,0 +1,47 @@
+const DRAWIO_FILE_EXTENSION = '.drawio';
+const DRAWIO_LEASE_ROOM_PREFIX = '__drawio__:';
+const DRAWIO_LEASE_STALE_MS = 45_000;
+const DRAWIO_LEASE_HEARTBEAT_MS = 15_000;
+
+function normalizeFilePath(filePath) {
+  return String(filePath ?? '').trim();
+}
+
+export {
+  DRAWIO_FILE_EXTENSION,
+  DRAWIO_LEASE_HEARTBEAT_MS,
+  DRAWIO_LEASE_ROOM_PREFIX,
+  DRAWIO_LEASE_STALE_MS,
+};
+
+export function createDrawioLeaseRoomName(filePath) {
+  const normalized = normalizeFilePath(filePath);
+  if (!normalized) {
+    return '';
+  }
+
+  return `${DRAWIO_LEASE_ROOM_PREFIX}${encodeURIComponent(normalized)}`;
+}
+
+export function parseDrawioLeaseRoomName(roomName) {
+  const normalized = String(roomName ?? '').trim();
+  if (!normalized.startsWith(DRAWIO_LEASE_ROOM_PREFIX)) {
+    return null;
+  }
+
+  const encodedPath = normalized.slice(DRAWIO_LEASE_ROOM_PREFIX.length);
+  if (!encodedPath) {
+    return null;
+  }
+
+  try {
+    const filePath = decodeURIComponent(encodedPath);
+    return filePath ? { filePath, roomName: normalized } : null;
+  } catch {
+    return null;
+  }
+}
+
+export function isDrawioLeaseRoom(roomName) {
+  return parseDrawioLeaseRoomName(roomName) !== null;
+}

package/src/domain/file-kind.js

@@ -1,10 +1,12 @@
 const MARKDOWN_FILE_EXTENSIONS = Object.freeze(['.md', '.markdown', '.mdx']);
 const EXCALIDRAW_FILE_EXTENSION = '.excalidraw';
+const DRAWIO_FILE_EXTENSION = '.drawio';
 const MERMAID_FILE_EXTENSIONS = Object.freeze(['.mmd', '.mermaid']);
 const PLANTUML_FILE_EXTENSIONS = Object.freeze(['.puml', '.plantuml']);
 const IMAGE_ATTACHMENT_EXTENSIONS = Object.freeze(['.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg']);
 const DIAGRAM_FILE_EXTENSIONS = Object.freeze([
   EXCALIDRAW_FILE_EXTENSION,
+  DRAWIO_FILE_EXTENSION,
   ...MERMAID_FILE_EXTENSIONS,
   ...PLANTUML_FILE_EXTENSIONS,
 ]);
@@ -13,7 +15,7 @@ const VAULT_FILE_EXTENSIONS = Object.freeze([
   ...DIAGRAM_FILE_EXTENSIONS,
   ...IMAGE_ATTACHMENT_EXTENSIONS,
 ]);
-const STRIP_VAULT_EXTENSION_PATTERN = /\.(?:md|markdown|mdx|excalidraw|mmd|mermaid|puml|plantuml|png|jpe?g|webp|gif|svg)$/i;
+const STRIP_VAULT_EXTENSION_PATTERN = /\.(?:md|markdown|mdx|excalidraw|drawio|mmd|mermaid|puml|plantuml|png|jpe?g|webp|gif|svg)$/i;
 
 function normalizeFilePath(filePath) {
   return String(filePath ?? '').trim().toLowerCase();
@@ -26,6 +28,7 @@ function hasFileExtension(filePath, extensions) {
 
 export {
   DIAGRAM_FILE_EXTENSIONS,
+  DRAWIO_FILE_EXTENSION,
   EXCALIDRAW_FILE_EXTENSION,
   IMAGE_ATTACHMENT_EXTENSIONS,
   MARKDOWN_FILE_EXTENSIONS,
@@ -43,6 +46,10 @@ export function getVaultFileKind(filePath) {
     return 'excalidraw';
   }
 
+  if (hasFileExtension(filePath, [DRAWIO_FILE_EXTENSION])) {
+    return 'drawio';
+  }
+
   if (hasFileExtension(filePath, MERMAID_FILE_EXTENSIONS)) {
     return 'mermaid';
   }
@@ -88,6 +95,10 @@ export function isMermaidFilePath(filePath) {
   return getVaultFileKind(filePath) === 'mermaid';
 }
 
+export function isDrawioFilePath(filePath) {
+  return getVaultFileKind(filePath) === 'drawio';
+}
+
 export function isPlantUmlFilePath(filePath) {
   return getVaultFileKind(filePath) === 'plantuml';
 }
@@ -98,7 +109,7 @@ export function isImageAttachmentFilePath(filePath) {
 
 export function isDiagramFilePath(filePath) {
   const kind = getVaultFileKind(filePath);
-  return kind === 'excalidraw' || kind === 'mermaid' || kind === 'plantuml';
+  return kind === 'excalidraw' || kind === 'drawio' || kind === 'mermaid' || kind === 'plantuml';
 }
 
 export function isVaultFilePath(filePath) {

package/src/server/config/build-info.js

@@ -0,0 +1,76 @@
+import { createHash } from 'node:crypto';
+import { readdirSync, readFileSync } from 'node:fs';
+import { resolve, relative } from 'node:path';
+
+function normalizeOptionalString(value) {
+  const normalized = String(value ?? '').trim();
+  return normalized.length > 0 ? normalized : '';
+}
+
+function listDirectoryEntries(directoryPath) {
+  return readdirSync(directoryPath, { withFileTypes: true })
+    .slice()
+    .sort((left, right) => left.name.localeCompare(right.name));
+}
+
+function updateDirectoryFingerprint(hash, rootDir, currentDir) {
+  for (const entry of listDirectoryEntries(currentDir)) {
+    const absolutePath = resolve(currentDir, entry.name);
+    const relativePath = relative(rootDir, absolutePath).replace(/\\/g, '/');
+
+    if (entry.isDirectory()) {
+      hash.update(`dir:${relativePath}\n`);
+      updateDirectoryFingerprint(hash, rootDir, absolutePath);
+      continue;
+    }
+
+    if (!entry.isFile()) {
+      continue;
+    }
+
+    hash.update(`file:${relativePath}\n`);
+    hash.update(readFileSync(absolutePath));
+    hash.update('\n');
+  }
+}
+
+function computeDirectoryFingerprint(directoryPath) {
+  const hash = createHash('sha256');
+  updateDirectoryFingerprint(hash, directoryPath, directoryPath);
+  return hash.digest('hex').slice(0, 16);
+}
+
+function loadPackageVersion(projectRoot) {
+  const packageJsonPath = resolve(projectRoot, 'package.json');
+  const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'));
+  return normalizeOptionalString(packageJson.version) || '0.0.0';
+}
+
+export function loadBuildInfo({
+  explicitBuildId = process.env.COLLABMD_BUILD_ID,
+  projectRoot,
+  publicDir,
+} = {}) {
+  const packageVersion = loadPackageVersion(projectRoot);
+  const normalizedExplicitBuildId = normalizeOptionalString(explicitBuildId);
+
+  if (normalizedExplicitBuildId) {
+    return {
+      id: normalizedExplicitBuildId,
+      packageVersion,
+    };
+  }
+
+  try {
+    const fingerprint = computeDirectoryFingerprint(publicDir);
+    return {
+      id: `${packageVersion}-${fingerprint}`,
+      packageVersion,
+    };
+  } catch {
+    return {
+      id: packageVersion,
+      packageVersion,
+    };
+  }
+}

package/src/server/config/env.js

@@ -9,6 +9,7 @@ import {
   createRandomAuthPassword,
   createRandomSessionSecret,
 } from '../auth/create-auth-service.js';
+import { loadBuildInfo } from './build-info.js';
 
 function parsePositiveInt(rawValue, fallbackValue) {
   const parsed = Number.parseInt(rawValue ?? '', 10);
@@ -24,6 +25,10 @@ function normalizeOptionalString(value) {
   return normalized.length > 0 ? normalized : '';
 }
 
+function resolveDrawioBaseUrl(value) {
+  return normalizeOptionalString(value) || 'https://embed.diagrams.net';
+}
+
 function normalizeAppBasePath(basePath) {
   const normalized = normalizeOptionalString(basePath);
   if (!normalized || normalized === '/') {
@@ -250,6 +255,7 @@ export function loadConfig(overrides = {}) {
   const nodeEnv = process.env.NODE_ENV || 'development';
   const vaultDir = resolveConfiguredVaultDir(overrides);
   const basePath = normalizeAppBasePath(process.env.BASE_PATH || '');
+  const publicDir = resolve(projectRoot, 'dist/client');
   const authOverrides = overrides.auth ?? {};
   const authStrategy = normalizeAuthStrategy(
     authOverrides.strategy
@@ -265,6 +271,11 @@ export function loadConfig(overrides = {}) {
     ? loadOidcConfig(authOverrides.oidc, { basePath })
     : null;
   const git = loadGitConfig(overrides.git);
+  const build = loadBuildInfo({
+    explicitBuildId: process.env.COLLABMD_BUILD_ID,
+    projectRoot,
+    publicDir,
+  });
 
   return {
     auth: {
@@ -277,6 +288,8 @@ export function loadConfig(overrides = {}) {
       strategy: authStrategy,
     },
     basePath,
+    build,
+    drawioBaseUrl: resolveDrawioBaseUrl(process.env.COLLABMD_DRAWIO_BASE_URL || process.env.DRAWIO_BASE_URL),
     host: process.env.HOST || getDefaultHost(nodeEnv),
     httpHeadersTimeoutMs: parsePositiveInt(process.env.HTTP_HEADERS_TIMEOUT_MS, 60_000),
     httpKeepAliveTimeoutMs: parsePositiveInt(process.env.HTTP_KEEP_ALIVE_TIMEOUT_MS, 5_000),
@@ -286,7 +299,7 @@ export function loadConfig(overrides = {}) {
     port: parsePort(process.env.PORT, 1234),
     nodeEnv,
     plantumlServerUrl: process.env.PLANTUML_SERVER_URL || 'https://www.plantuml.com/plantuml',
-    publicDir: resolve(projectRoot, 'public'),
+    publicDir,
     vaultDir,
     publicWsBaseUrl: process.env.PUBLIC_WS_BASE_URL || '',
     testWsRoomHydrateDelayMs: parsePositiveInt(process.env.TEST_WS_ROOM_HYDRATE_DELAY_MS, 0),

package/src/server/create-app-server.js

@@ -11,6 +11,7 @@ import { RoomRegistry } from './domain/collaboration/room-registry.js';
 import { createRequestHandler } from './infrastructure/http/create-request-handler.js';
 import { VaultFileStore } from './infrastructure/persistence/vault-file-store.js';
 import { attachCollaborationGateway } from './infrastructure/websocket/attach-collaboration-gateway.js';
+import { isDrawioLeaseRoom } from '../domain/drawio-room.js';
 import { WORKSPACE_ROOM_NAME } from '../domain/workspace-room.js';
 import { FileSystemSyncService } from './infrastructure/workspace/file-system-sync-service.js';
 import { WorkspaceMutationCoordinator } from './infrastructure/workspace/workspace-mutation-coordinator.js';
@@ -54,11 +55,12 @@ export function createAppServer(config = loadConfig()) {
   let workspaceMutationCoordinator = null;
   const roomRegistry = new RoomRegistry({
     createRoom: ({ name, onEmpty }) => {
+      const isTransientRoom = name === '__lobby__' || name === WORKSPACE_ROOM_NAME || isDrawioLeaseRoom(name);
       const room = new CollaborationRoom({
         documentStore: new CollaborationDocumentStore({
-          backlinkIndex: name === '__lobby__' || name === WORKSPACE_ROOM_NAME ? null : backlinkIndex,
+          backlinkIndex: isTransientRoom ? null : backlinkIndex,
           name,
-          vaultFileStore: name === '__lobby__' || name === WORKSPACE_ROOM_NAME ? null : vaultFileStore,
+          vaultFileStore: isTransientRoom ? null : vaultFileStore,
         }),
         getHydrateDelayMs: () => testControls.wsRoomHydrateDelayMs,
         idleGraceMs: config.wsRoomIdleGraceMs,

package/src/server/domain/collaboration/collaboration-document-store.js

@@ -1,4 +1,5 @@
 import {
+  isDrawioFilePath,
   isExcalidrawFilePath,
   isMermaidFilePath,
   isPlantUmlFilePath,
@@ -53,6 +54,10 @@ export class CollaborationDocumentStore {
       return this.vaultFileStore.readExcalidrawFile(this.name);
     }
 
+    if (isDrawioFilePath(this.name) && typeof this.vaultFileStore.readDrawioFile === 'function') {
+      return this.vaultFileStore.readDrawioFile(this.name);
+    }
+
     if (isMermaidFilePath(this.name) && typeof this.vaultFileStore.readMermaidFile === 'function') {
       return this.vaultFileStore.readMermaidFile(this.name);
     }
@@ -111,6 +116,12 @@ export class CollaborationDocumentStore {
       return;
     }
 
+    if (isDrawioFilePath(this.name) && typeof this.vaultFileStore.writeDrawioFile === 'function') {
+      const result = await this.vaultFileStore.writeDrawioFile(this.name, content, options);
+      assertWriteSucceeded(result, 'write content', this.name);
+      return;
+    }
+
     if (isMermaidFilePath(this.name) && typeof this.vaultFileStore.writeMermaidFile === 'function') {
       const result = await this.vaultFileStore.writeMermaidFile(this.name, content, options);
       assertWriteSucceeded(result, 'write content', this.name);

package/src/server/domain/collaboration/collaboration-room.js

@@ -17,6 +17,7 @@ import {
   serializeExcalidrawRoomScene,
   tryParseExcalidrawSceneJson,
 } from '../../../domain/excalidraw-room-codec.js';
+import { isDrawioLeaseRoom } from '../../../domain/drawio-room.js';
 import { normalizeWorkspaceEvent } from '../../../domain/workspace-change.js';
 import { WORKSPACE_EVENT_MAX_MESSAGES, WORKSPACE_ROOM_NAME } from '../../../domain/workspace-room.js';
 
@@ -660,6 +661,10 @@ export class CollaborationRoom {
       return null;
     }
 
+    if (isDrawioLeaseRoom(this.name)) {
+      return null;
+    }
+
     if (!isExcalidrawRoom(this.name)) {
       return this.doc.getText('codemirror').toString();
     }

package/src/server/infrastructure/http/create-static-handler.js

@@ -1,7 +1,7 @@
 import { readFile } from 'fs/promises';
 import { extname, normalize, resolve } from 'path';
 
-import { sendResponse, textResponse } from './http-response.js';
+import { jsonResponse, sendResponse, textResponse } from './http-response.js';
 
 const CONTENT_TYPES = {
   '.css': 'text/css; charset=utf-8',
@@ -12,7 +12,7 @@ const CONTENT_TYPES = {
 };
 
 function isVersionedAssetPath(pathname = '') {
-  return /-[A-Z0-9]{8,}\.(?:css|js|woff2?|ttf|svg)$/iu.test(pathname);
+  return /-[A-Za-z0-9_-]{8,}\.(?:css|js|woff2?|ttf|svg)$/u.test(pathname);
 }
 
 function getStaticCacheControl(pathname = '', extension = '') {
@@ -46,6 +46,8 @@ function getStaticCacheControl(pathname = '', extension = '') {
 function buildRuntimeConfig({
   auth,
   basePath,
+  build,
+  drawioBaseUrl,
   gitEnabled,
   nodeEnv,
   publicWsBaseUrl,
@@ -54,6 +56,8 @@ function buildRuntimeConfig({
   return `window.__COLLABMD_CONFIG__ = ${JSON.stringify({
     auth,
     basePath,
+    build,
+    drawioBaseUrl,
     environment: nodeEnv,
     gitEnabled,
     publicWsBaseUrl,
@@ -125,6 +129,13 @@ export function createStaticHandler(config, authService = null) {
       return true;
     }
 
+    if (requestUrl.pathname === '/version.json') {
+      jsonResponse(req, res, 200, {
+        build: config.build ?? { id: '', packageVersion: '' },
+      });
+      return true;
+    }
+
     if (req.method !== 'GET' && req.method !== 'HEAD') {
       textResponse(req, res, 405, 'Method Not Allowed');
       return true;