collabmd 0.1.44 → 0.1.45

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

@@ -8,6 +8,37 @@ export {
   requestIdleRender,
 } from '../browser-utils.js';
 
+export function encodeSvgDataUrl(svgMarkup) {
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgMarkup)}`;
+}
+
+export function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.decoding = 'async';
+    image.addEventListener('load', () => resolve(image), { once: true });
+    image.addEventListener('error', () => reject(new Error(`Failed to load image: ${src}`)), { once: true });
+    image.src = src;
+  });
+}
+
+export function resolveSvgDimensions(svgElement) {
+  const widthAttr = Number.parseFloat(svgElement.getAttribute('width') || '');
+  const heightAttr = Number.parseFloat(svgElement.getAttribute('height') || '');
+  const viewBoxParts = (svgElement.getAttribute('viewBox') || '')
+    .split(/\s+/u)
+    .map((value) => Number.parseFloat(value));
+
+  return {
+    height: Number.isFinite(heightAttr) && heightAttr > 0
+      ? heightAttr
+      : (Number.isFinite(viewBoxParts[3]) && viewBoxParts[3] > 0 ? viewBoxParts[3] : 800),
+    width: Number.isFinite(widthAttr) && widthAttr > 0
+      ? widthAttr
+      : (Number.isFinite(viewBoxParts[2]) && viewBoxParts[2] > 0 ? viewBoxParts[2] : 1200),
+  };
+}
+
 export function syncAttribute(target, source, name) {
   const nextValue = source.getAttribute(name);
   if (nextValue === null) {
@@ -62,10 +93,8 @@ export function normalizeMermaidSvg(svg) {
 export function getFrameViewportSize(frame) {
   const styles = window.getComputedStyle(frame);
   const paddingX = Number.parseFloat(styles.paddingLeft || '0') + Number.parseFloat(styles.paddingRight || '0');
-  const paddingY = Number.parseFloat(styles.paddingTop || '0') + Number.parseFloat(styles.paddingBottom || '0');
 
   return {
-    height: Math.max(frame.clientHeight - paddingY, 0),
     width: Math.max(frame.clientWidth - paddingX, 0),
   };
 }

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

@@ -5,7 +5,8 @@ import { isImageAttachmentFilePath } from '../../domain/file-kind.js';
 import { resolveVaultRelativePath } from '../../domain/vault-paths.js';
 import { resolveWikiTargetPath } from '../../domain/wiki-link-resolver.js';
 import { escapeHtml } from '../domain/vault-utils.js';
-import { extractYamlFrontmatter, renderFrontmatterBlock } from './markdown-frontmatter.js';
+import { extractYamlFrontmatter } from '../../domain/yaml-frontmatter.js';
+import { renderFrontmatterBlock } from './markdown-frontmatter.js';
 import { analyzeMarkdownComplexity } from './preview-render-profile.js';
 
 const DIRECT_VIDEO_MIME_TYPES = Object.freeze({

package/src/client/application/preview-renderer.js

@@ -91,8 +91,8 @@ export class PreviewRenderer {
     };
 
     this.handleWindowResize = () => {
-      this.mermaidHydrator.scheduleActiveRefit();
-      this.plantUmlHydrator.scheduleActiveRefit();
+      this.scheduleActiveMermaidRefit();
+      this.scheduleActivePlantUmlRefit();
     };
 
     this.diagramChrome = new DiagramChrome({

package/src/client/application/quick-switcher-loader.js

@@ -22,8 +22,10 @@ export async function ensureQuickSwitcherInstance(host) {
   if (!host.quickSwitcher) {
     host.quickSwitcher = new QuickSwitcherController({
       getFileList: () => host.fileExplorer.flatFiles,
+      getFileMetadata: () => host.fileExplorer.fileEntries,
+      getRecentFiles: () => host.preferences?.getRecentFiles?.() ?? [],
       getSearchConfig: () => host.runtimeConfig.search ?? {},
-      onFileSelect: (filePath) => host.handleFileSelection(filePath, {
+      onFileSelect: (filePath) => host.workspaceRouteController.handleFileSelection(filePath, {
         closeSidebarOnMobile: true,
         revealInTree: true,
       }),

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

@@ -253,7 +253,6 @@ export class WorkspacePreviewController {
     this.previewRenderer.normalizePreviewChildren(renderHost);
 
     if (renderHost) {
-      renderHost.replaceChildren();
       renderHost.style.minHeight = '';
     }
 
@@ -364,8 +363,6 @@ export class WorkspacePreviewController {
         return;
       }
 
-      this.previewRenderer.scheduleActiveMermaidRefit();
-      this.previewRenderer.scheduleActivePlantUmlRefit();
       this.videoEmbed?.syncLayout();
       this.drawioEmbed.syncLayout();
       this.excalidrawEmbed.syncLayout();

package/src/client/bootstrap/collabmd-app-shell.js

@@ -17,10 +17,9 @@ import { uiFeatureTabActivityMethods } from '../application/app-shell/ui-feature
 import { uiFeatureToolbarMethods } from '../application/app-shell/ui-feature-toolbar.js';
 import { workspaceFeature } from '../application/app-shell/workspace-feature.js';
 import { LOBBY_CHAT_MESSAGE_MAX_LENGTH, LobbyPresence } from '../infrastructure/lobby-presence.js';
-import { BrowserNotificationPort } from '../infrastructure/browser-notification-port.js';
 import { BrowserPreferencesPort } from '../infrastructure/browser-preferences-port.js';
+import { BrowserNotificationPort } from '../infrastructure/browser-notification-port.js';
 import { AppVersionMonitor } from '../infrastructure/app-version-monitor.js';
-import { backlinksApiClient } from '../infrastructure/backlinks-api-client.js';
 import { gitApiClient } from '../infrastructure/git-api-client.js';
 import {
   getHashRoute,
@@ -32,7 +31,6 @@ import {
   navigateToGitFilePreview,
   navigateToGitHistory,
 } from '../infrastructure/runtime-config.js';
-import { plantUmlApiClient } from '../infrastructure/plantuml-api-client.js';
 import { TabActivityLock } from '../infrastructure/tab-activity-lock.js';
 import { vaultApiClient } from '../infrastructure/vault-api-client.js';
 import { WorkspaceSyncClient } from '../infrastructure/workspace-sync-client.js';
@@ -40,6 +38,12 @@ import { BacklinksPanel } from '../presentation/backlinks-panel.js';
 import { CommentOverviewController } from '../presentation/comment-overview-controller.js';
 import { CommentUiController } from '../presentation/comment-ui-controller.js';
 import { FileExplorerController } from '../presentation/file-explorer-controller.js';
+import { FileHistoryViewController } from '../presentation/file-history-view-controller.js';
+import { BasesPreviewController } from '../presentation/bases-preview-controller.js';
+import { DrawioEmbedController } from '../presentation/drawio-embed-controller.js';
+import { ExcalidrawEmbedController } from '../presentation/excalidraw-embed-controller.js';
+import { GitDiffViewController } from '../presentation/git-diff-view-controller.js';
+import { GitPanelController } from '../presentation/git-panel-controller.js';
 import { LayoutController } from '../presentation/layout-controller.js';
 import { OutlineController } from '../presentation/outline-controller.js';
 import { ScrollSyncController } from '../presentation/scroll-sync-controller.js';
@@ -47,14 +51,12 @@ import { ThemeController } from '../presentation/theme-controller.js';
 import { ToastController } from '../presentation/toast-controller.js';
 import { VideoEmbedController } from '../presentation/video-embed-controller.js';
 import { ImageLightboxController } from '../presentation/image-lightbox-controller.js';
-import { lazyControllerFeature } from './lazy-controller-feature.js';
 
 const APP_SHELL_FEATURES = [
   chatFeature,
   commentsFeature,
   exportFeature,
   gitFeature,
-  lazyControllerFeature,
   presenceFeature,
   {
     ...uiFeatureShellMethods,
@@ -103,18 +105,18 @@ export class CollabMdAppShell {
       navigateToGitHistory,
     };
     this.preferences = new BrowserPreferencesPort({
-      chatNotificationsKey: 'collabmd-chat-notifications-enabled',
+      fileTreeShowExtensionsKey: 'collabmd-file-tree-show-extensions',
       lineWrappingKey: 'collabmd-editor-line-wrap',
+      recentFilesKey: 'collabmd-recent-files',
       sidebarVisibleKey: 'collabmd-sidebar-visible',
       userNameKey: 'collabmd-user-name',
     });
     this.notifications = new BrowserNotificationPort();
-    this.backlinksApiClient = backlinksApiClient;
     this.gitApiClient = gitApiClient;
-    this.plantUmlApiClient = plantUmlApiClient;
     this.vaultApiClient = vaultApiClient;
     this._session = null;
     this._hasPromptedForDisplayName = false;
+    this._basePreviewRenderTimer = null;
     this._backlinkRefreshTimer = null;
     this._pendingPreviewLayoutSync = false;
     this._previewHydrationPaused = false;
@@ -124,13 +126,10 @@ export class CollabMdAppShell {
     this._staticPreviewDocument = null;
     this.pendingGitResetPath = null;
     this.chatTimeFormatter = new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' });
-    this.chatNotificationsEnabled = this.preferences.getChatNotificationsEnabled();
-    this.chatNotificationPermission = this.notifications.getPermission();
     this.lobbyChatMessageMaxLength = LOBBY_CHAT_MESSAGE_MAX_LENGTH;
     this.quickSwitcher = null;
     this.quickSwitcherModulePromise = null;
     this.fileExplorerReadyPromise = Promise.resolve();
-    this._gitControllerPrewarmHandle = null;
     this.mobileBreakpointQuery = window.matchMedia('(max-width: 768px)');
     this.pendingWorkspaceRequestIds = new Set();
     this._fileOpenPerf = null;
@@ -152,7 +151,7 @@ export class CollabMdAppShell {
         this.handleCommentOverviewWorkspaceTreeChange?.();
         this.fileExplorerReady = true;
         if (!wasReady && this.isTabActive) {
-          void this.handleHashChange();
+          void this.workspaceRouteController.handleHashChange();
         }
       },
       onWorkspaceEvent: (event) => {
@@ -165,8 +164,14 @@ export class CollabMdAppShell {
     this.fileExplorer = new FileExplorerController({
       mobileBreakpointQuery: this.mobileBreakpointQuery,
       onFileDelete: () => this.navigation.navigateToFile(null),
-      onFileSelect: (filePath) => this.handleFileSelection(filePath, { closeSidebarOnMobile: true }),
+      onFileSelect: (filePath) => this.workspaceRouteController.handleFileSelection(filePath, {
+        closeSidebarOnMobile: true,
+      }),
+      onShowFileExtensionsChange: (showFileExtensions) => {
+        this.preferences.setFileTreeShowExtensions(showFileExtensions);
+      },
       pendingWorkspaceRequestIds: this.pendingWorkspaceRequestIds,
+      showFileExtensions: this.preferences.getFileTreeShowExtensions(),
       toastController: this.toastController,
       vaultClient: this.vaultApiClient,
     });
@@ -179,7 +184,23 @@ export class CollabMdAppShell {
       toastController: this.toastController,
       vaultApiClient: this.vaultApiClient,
     });
-    this.gitPanel = this.createLazyGitPanelController();
+    this.gitPanel = new GitPanelController({
+      enabled: this.runtimeConfig.gitEnabled !== false,
+      gitApiClient: this.gitApiClient,
+      onCommitStaged: () => this.openGitCommitDialog(),
+      onOpenPullBackup: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+      onPullBranch: () => this.pullGitBranch(),
+      onPushBranch: () => this.pushGitBranch(),
+      onRepoChange: (isGitRepo, status) => this.handleGitRepoChange(isGitRepo, status),
+      onResetFile: (filePath, { scope }) => this.openGitResetDialog(filePath, { scope }),
+      onSelectCommit: (hash, { path }) => this.handleGitCommitSelection(hash, { closeSidebarOnMobile: true, path }),
+      onSelectDiff: (filePath, { scope }) => this.handleGitDiffSelection(filePath, { closeSidebarOnMobile: true, scope }),
+      onStageFile: (filePath, { scope }) => this.stageGitFile(filePath, { scope }),
+      onUnstageFile: (filePath, { scope }) => this.unstageGitFile(filePath, { scope }),
+      onViewAllDiff: () => this.handleGitDiffSelection(null, { closeSidebarOnMobile: true, scope: 'all' }),
+      searchInput: this.elements.gitSearchInput,
+      toastController: this.toastController,
+    });
     this.outlineController = new OutlineController({
       mobileBreakpointQuery: this.mobileBreakpointQuery,
       onNavigateToHeading: ({ sourceLine }) => {
@@ -192,7 +213,19 @@ export class CollabMdAppShell {
     this.videoEmbed = new VideoEmbedController({
       previewElement: this.elements.previewContent,
     });
-    this.basesPreview = this.createLazyBasesPreviewController();
+    this.basesPreview = new BasesPreviewController({
+      getActiveFilePath: () => this.currentFilePath,
+      getSession: () => this.session,
+      onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+      previewElement: this.elements.previewContent,
+      replaceBaseSource: ({ path, source }) => {
+        if (path && path === this.currentFilePath) {
+          this.session?.replaceText?.(source);
+        }
+      },
+      toastController: this.toastController,
+      vaultApiClient: this.vaultApiClient,
+    });
     this.imageLightbox = new ImageLightboxController({
       previewElement: this.elements.previewContent,
     });
@@ -211,12 +244,9 @@ export class CollabMdAppShell {
           renderVersion: stats?.renderVersion ?? 0,
         });
         this.videoEmbed.reconcileEmbeds(this.elements.previewContent);
-        this.videoEmbed.syncLayout();
         this.basesPreview.reconcileEmbeds(this.elements.previewContent);
         this.drawioEmbed.reconcileEmbeds(this.elements.previewContent);
-        this.drawioEmbed.syncLayout();
         this.excalidrawEmbed.reconcileEmbeds(this.elements.previewContent, { isLargeDocument: stats.isLargeDocument });
-        this.excalidrawEmbed.syncLayout();
         this.scrollSyncController.setLargeDocumentMode(stats.isLargeDocument);
         this.syncPreviewHeadingLinkButtons();
         this.applyPendingPreviewRouteAnchor({ behavior: 'auto', clearMissing: true });
@@ -235,15 +265,12 @@ export class CollabMdAppShell {
         this.refreshCommentUiLayout();
       },
       onRenderComplete: () => {
-        this.videoEmbed.syncLayout();
-        this.drawioEmbed.syncLayout();
-        this.excalidrawEmbed.syncLayout();
         this.applyPendingPreviewRouteAnchor({ allowExpired: true, behavior: 'auto', clearMissing: true });
         this.schedulePreviewLayoutSync({ delayMs: 0 });
         this.refreshCommentUiLayout();
       },
       outlineController: this.outlineController,
-      plantUmlRenderClient: this.plantUmlApiClient,
+      plantUmlRenderClient: this.vaultApiClient,
       previewContainer: this.elements.previewContainer,
       previewElement: this.elements.previewContent,
       toastController: this.toastController,
@@ -264,12 +291,36 @@ export class CollabMdAppShell {
     this.backlinksPanel = new BacklinksPanel({
       headerPanelElement: this.elements.backlinksHeaderPanel,
       inlinePanelElement: this.elements.backlinksInlinePanel,
-      loadBacklinks: (filePath, options = {}) => this.backlinksApiClient.readBacklinks(filePath, options),
-      onFileSelect: (filePath) => this.handleFileSelection(filePath, { closeSidebarOnMobile: true }),
+      loadBacklinks: (filePath, options = {}) => this.vaultApiClient.readBacklinks(filePath, options),
+      onFileSelect: (filePath) => this.workspaceRouteController.handleFileSelection(filePath, {
+        closeSidebarOnMobile: true,
+      }),
       panelElement: this.elements.backlinksPanel,
     });
-    this.excalidrawEmbed = this.createLazyExcalidrawEmbedController();
-    this.drawioEmbed = this.createLazyDrawioEmbedController();
+    this.excalidrawEmbed = new ExcalidrawEmbedController({
+      getLocalUser: () => this.lobby.getLocalUser(),
+      getTheme: () => this.themeController.getTheme(),
+      onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+      onToggleQuickSwitcher: () => {
+        void this.toggleQuickSwitcher();
+      },
+      previewContainer: this.elements.previewContainer,
+      previewElement: this.elements.previewContent,
+      toastController: this.toastController,
+    });
+    this.drawioEmbed = new DrawioEmbedController({
+      getLocalUser: () => this.lobby.getLocalUser(),
+      getTheme: () => this.themeController.getTheme(),
+      onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+      onOpenTextFile: (filePath) => filePath && this.navigation.navigateToFile(filePath, { drawioMode: 'text' }),
+      onToggleQuickSwitcher: () => {
+        void this.toggleQuickSwitcher();
+      },
+      previewContainer: this.elements.previewContainer,
+      previewElement: this.elements.previewContent,
+      toastController: this.toastController,
+      vaultApiClient: this.vaultApiClient,
+    });
     this.commentUi = new CommentUiController({
       commentSelectionButton: this.elements.commentSelectionButton,
       commentsDrawer: this.elements.commentsDrawer,
@@ -329,8 +380,41 @@ export class CollabMdAppShell {
       vaultApiClient: this.vaultApiClient,
       wikiLinkAutoCreate: this.runtimeConfig.wikiLinkAutoCreate !== false,
     });
-    this.gitDiffView = this.createLazyGitDiffViewController();
-    this.fileHistoryView = this.createLazyFileHistoryViewController();
+    this.gitDiffView = new GitDiffViewController({
+      gitApiClient: this.gitApiClient,
+      onBackToHistory: ({ historyFilePath } = {}) => {
+        if (historyFilePath) {
+          this.navigation.navigateToGitFileHistory({ filePath: historyFilePath });
+          return;
+        }
+        this.navigation.navigateToGitHistory();
+      },
+      onCommitStaged: () => this.openGitCommitDialog(),
+      onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+      onStageFile: (filePath, { scope }) => this.stageGitFile(filePath, { scope }),
+      onUnstageFile: (filePath, { scope }) => this.unstageGitFile(filePath, { scope }),
+      toastController: this.toastController,
+    });
+    this.fileHistoryView = new FileHistoryViewController({
+      diffRenderer: this.gitDiffView,
+      gitApiClient: this.gitApiClient,
+      onOpenCommitDiff: (hash, { historyFilePath, path }) => this.handleGitCommitSelection(hash, {
+        closeSidebarOnMobile: false,
+        historyFilePath,
+        path,
+      }),
+      onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+      onOpenPreview: ({ hash, path, currentFilePath }) => this.handleGitFilePreviewSelection({
+        hash,
+        path,
+        currentFilePath,
+      }),
+      onOpenWorkspaceDiff: (filePath) => this.handleGitDiffSelection(filePath, {
+        closeSidebarOnMobile: false,
+        scope: 'all',
+      }),
+      toastController: this.toastController,
+    });
     this.tabActivityLock = new TabActivityLock({
       onActivated: ({ takeover }) => this.handleTabActivated({ takeover }),
       onBlocked: () => this.handleTabBlocked({ reason: 'active-elsewhere' }),
@@ -381,10 +465,12 @@ export class CollabMdAppShell {
       loadEditorSessionClass: () => this.loadEditorSessionClass(),
       loadBacklinks: (filePath) => this.backlinksPanel.load(filePath),
       onBeforeFileOpen: () => {
+        clearTimeout(this._basePreviewRenderTimer);
+        this._basePreviewRenderTimer = null;
         this.session = null;
         this.commentUi.attachSession(null);
         this.layoutController.reset();
-        this.resetPreviewMode();
+        this.workspacePreviewController.resetPreviewMode();
         this.elements.emptyState?.classList.add('hidden');
         this.elements.editorPage?.classList.remove('hidden');
         this.elements.diffPage?.classList.add('hidden');
@@ -394,7 +480,7 @@ export class CollabMdAppShell {
       onContentChange: ({ isBase, isMermaid, isPlantUml }) => {
         this.handleCommentEditorContentChange();
         if (isBase) {
-          void this.renderBaseFilePreview(this.currentFilePath, {
+          this.scheduleBaseFilePreview(this.currentFilePath, {
             source: this.session?.getText?.() ?? '',
           });
           return;
@@ -414,6 +500,9 @@ export class CollabMdAppShell {
       },
       onFileOpenReady: () => {
         this.hideEditorLoading();
+        if (this.currentFilePath) {
+          this.preferences.recordRecentFile(this.currentFilePath);
+        }
       },
       onSelectionChange: (anchor) => this.handleCommentSelectionChange(anchor),
       onImagePaste: (file) => this.handleEditorImageInsert(file),
@@ -422,10 +511,10 @@ export class CollabMdAppShell {
         this.session = session;
         this.commentUi.attachSession(session);
       },
-      onRenderDrawioPreview: (filePath) => this.renderDrawioFilePreview(filePath),
+      onRenderDrawioPreview: (filePath) => this.workspacePreviewController.renderDrawioFilePreview(filePath),
       onRenderBasePreview: (filePath) => this.renderBaseFilePreview(filePath),
-      onRenderExcalidrawPreview: (filePath) => this.renderExcalidrawFilePreview(filePath),
-      onRenderImagePreview: (filePath) => this.renderImageFilePreview(filePath),
+      onRenderExcalidrawPreview: (filePath) => this.workspacePreviewController.renderExcalidrawFilePreview(filePath),
+      onRenderImagePreview: (filePath) => this.workspacePreviewController.renderImageFilePreview(filePath),
       onSyncWrapToggle: () => this.syncWrapToggle(),
       onUpdateActiveFile: (filePath) => this.fileExplorer.setActiveFile(filePath),
       onUpdateCurrentFile: (filePath) => {
@@ -433,7 +522,7 @@ export class CollabMdAppShell {
       },
       onUpdateLobbyCurrentFile: (filePath) => this.lobby.setCurrentFile(filePath),
       onUpdateVisibleChrome: (filePath, { displayName }) => {
-        this.syncFileChrome(filePath, {
+        this.workspacePreviewController.syncFileChrome(filePath, {
           drawioMode: this.currentDrawioMode,
           preferPreviewForBase: this.isBaseFile(filePath),
         });
@@ -443,7 +532,7 @@ export class CollabMdAppShell {
           this.elements.activeFileName.textContent = displayName;
         }
       },
-      onViewModeReset: () => this.resetPreviewMode(),
+      onViewModeReset: () => this.workspacePreviewController.resetPreviewMode(),
       renderPresence: () => this.renderPresence(),
       scrollContainerForSession: (session) => session.getScrollContainer(),
       shouldUseDrawioPreview: () => Boolean(this.runtimeConfig.drawioBaseUrl),
@@ -472,7 +561,7 @@ export class CollabMdAppShell {
       requestPreviewRouteAnchor: (anchorId, filePath) => this.requestPreviewRouteAnchor(anchorId, filePath),
       renderAvatars: () => this.renderAvatars(),
       renderPresence: () => this.renderPresence(),
-      resetPreviewMode: () => this.resetPreviewMode(),
+      resetPreviewMode: () => this.workspacePreviewController.resetPreviewMode(),
       scrollSyncController: this.scrollSyncController,
       setCurrentFilePath: (value) => {
         this.currentFilePath = value;
@@ -501,9 +590,6 @@ export class CollabMdAppShell {
       workspaceCoordinator: this.workspaceCoordinator,
     });
 
-    if (this.chatNotificationPermission !== 'granted') {
-      this.chatNotificationsEnabled = false;
-    }
   }
 
   get session() { return this._session; }

package/src/client/domain/excalidraw-collaboration.js

@@ -1,7 +1,5 @@
 import { generatePeerId, normalizeUserName } from './room.js';
 
-export { generatePeerId };
-
 export const USER_COLOR_PALETTE = [
   '#ef4444', '#f97316', '#eab308', '#22c55e', '#06b6d4',
   '#3b82f6', '#8b5cf6', '#ec4899', '#14b8a6', '#f59e0b',

package/src/client/domain/room.js

@@ -9,6 +9,32 @@ const USER_COLORS = [
 ];
 export const USER_NAME_MAX_LENGTH = 24;
 const LOCAL_USER_ID_STORAGE_KEY = 'collabmd-user-id';
+const HEX_COLOR_RE = /^#(?:[\da-f]{3}|[\da-f]{6})$/iu;
+
+function colorChannelToLinear(value) {
+  const channel = value / 255;
+  return channel <= 0.04045
+    ? channel / 12.92
+    : ((channel + 0.055) / 1.055) ** 2.4;
+}
+
+function getColorLuminance(color) {
+  const hex = color.length === 4
+    ? color.slice(1).split('').map((channel) => channel.repeat(2)).join('')
+    : color.slice(1);
+  const [red, green, blue] = hex.match(/../gu).map((channel) => parseInt(channel, 16));
+  return (
+    0.2126 * colorChannelToLinear(red)
+    + 0.7152 * colorChannelToLinear(green)
+    + 0.0722 * colorChannelToLinear(blue)
+  );
+}
+
+function getContrastRatio(firstLuminance, secondLuminance) {
+  const lighter = Math.max(firstLuminance, secondLuminance);
+  const darker = Math.min(firstLuminance, secondLuminance);
+  return (lighter + 0.05) / (darker + 0.05);
+}
 
 function pickRandom(items) {
   return items[Math.floor(Math.random() * items.length)];
@@ -73,6 +99,18 @@ export function normalizeUserName(value) {
   return normalized || null;
 }
 
+export function getUserAvatarTextColor(value) {
+  const color = String(value ?? '').trim();
+  if (!HEX_COLOR_RE.test(color)) {
+    return '#fff';
+  }
+
+  const luminance = getColorLuminance(color.toLowerCase());
+  const whiteContrast = getContrastRatio(1, luminance);
+  const inkContrast = getContrastRatio(0, luminance);
+  return inkContrast >= whiteContrast ? '#000' : '#fff';
+}
+
 export function createRandomUser(preferredName = null) {
   const color = pickRandom(USER_COLORS);
 

package/src/client/export/export-pipeline.js

@@ -1,6 +1,11 @@
 import { exportToSvg as exportExcalidrawToSvg } from '@excalidraw/excalidraw';
 
-import { sanitizeSvgMarkup } from '../application/preview-diagram-utils.js';
+import {
+  encodeSvgDataUrl,
+  loadImage,
+  resolveSvgDimensions,
+  sanitizeSvgMarkup,
+} from '../application/preview-diagram-utils.js';
 import { compilePreviewDocument } from '../application/preview-render-compiler.js';
 import { stripVaultFileExtension } from '../../domain/file-kind.js';
 import { parseSceneJson, sceneToInitialData } from '../domain/excalidraw-scene.js';
@@ -60,10 +65,6 @@ function createDocumentTitle(filePath, title = '') {
   return stripVaultFileExtension(leaf) || 'document';
 }
 
-function encodeSvgDataUrl(svgMarkup) {
-  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgMarkup)}`;
-}
-
 function encodeSvgBase64DataUrl(svgMarkup) {
   const bytes = new TextEncoder().encode(String(svgMarkup ?? ''));
   const chunkSize = 0x8000;
@@ -87,35 +88,6 @@ function blobToDataUrl(blob) {
   });
 }
 
-function loadImage(src) {
-  return new Promise((resolve, reject) => {
-    const image = new Image();
-    image.decoding = 'async';
-    image.addEventListener('load', () => resolve(image), { once: true });
-    image.addEventListener('error', () => reject(new Error(`Failed to load image: ${src}`)), { once: true });
-    image.src = src;
-  });
-}
-
-function resolveSvgDimensions(svgElement) {
-  const widthAttr = Number.parseFloat(svgElement.getAttribute('width') || '');
-  const heightAttr = Number.parseFloat(svgElement.getAttribute('height') || '');
-  const viewBox = svgElement.getAttribute('viewBox') || '';
-  const viewBoxParts = viewBox.split(/\s+/).map((value) => Number.parseFloat(value));
-
-  const width = Number.isFinite(widthAttr) && widthAttr > 0
-    ? widthAttr
-    : (Number.isFinite(viewBoxParts[2]) && viewBoxParts[2] > 0 ? viewBoxParts[2] : 1200);
-  const height = Number.isFinite(heightAttr) && heightAttr > 0
-    ? heightAttr
-    : (Number.isFinite(viewBoxParts[3]) && viewBoxParts[3] > 0 ? viewBoxParts[3] : 800);
-
-  return {
-    height,
-    width,
-  };
-}
-
 function trimSvgCanvas(svgMarkup, { padding = 16 } = {}) {
   const probe = document.createElement('div');
   probe.style.position = 'fixed';

package/src/client/infrastructure/auth-client.js

@@ -1,5 +1,6 @@
 import '../styles/features/auth-gate.css';
 
+import { getHashParamsFromRaw } from '../domain/hash-routes.js';
 import { getRuntimeConfig } from './runtime-config.js';
 
 const DEFAULT_AUTH_CONFIG = {
@@ -24,19 +25,12 @@ function getClientAuthConfig() {
   };
 }
 
-function getHashParams() {
-  const rawHash = window.location.hash.startsWith('#')
-    ? window.location.hash.slice(1)
-    : window.location.hash;
-  return new URLSearchParams(rawHash);
-}
-
 function getPasswordFromHash() {
-  return getHashParams().get('auth_password') || '';
+  return getHashParamsFromRaw(window.location.hash).get('auth_password') || '';
 }
 
 function removePasswordFromHash() {
-  const params = getHashParams();
+  const params = getHashParamsFromRaw(window.location.hash);
   if (!params.has('auth_password')) {
     return;
   }
@@ -48,7 +42,7 @@ function removePasswordFromHash() {
 }
 
 function consumeHashParam(name) {
-  const params = getHashParams();
+  const params = getHashParamsFromRaw(window.location.hash);
   const value = params.get(name) || '';
   if (!value) {
     return '';