npm - collabmd - Versions diffs - 0.1.45 → 0.1.47 - Mend

collabmd 0.1.45 → 0.1.47

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 (356) hide show

package/src/client/export/export-host.js CHANGED Viewed

@@ -12,7 +12,7 @@ function createJobId() {
 }
 function normalizeFormat(format) {
-  return format === 'pdf' ? 'pdf' : 'docx';
+  return ['html', 'pdf'].includes(format) ? format : 'docx';
 }
 function buildExportUrl({ filePath, format, jobId }) {

package/src/client/export/export-page.js CHANGED Viewed

@@ -51,9 +51,13 @@ async function bootstrap() {
     const snapshot = await prepareExportSnapshot(payload);
     const mount = renderSnapshot(snapshot);
     snapshot.html = await waitForRenderedExportContent(mount);
-    setStatus(payload.action === 'pdf' ? 'Opening print dialog…' : 'Preparing DOCX download…');
+    setStatus(payload.action === 'pdf'
+      ? 'Opening print dialog…'
+      : `Preparing ${payload.action.toUpperCase()} download…`);
     await runExportAdapter(snapshot, payload.action);
-    setStatus(payload.action === 'pdf' ? 'Print dialog opened.' : 'DOCX download started.');
+    setStatus(payload.action === 'pdf'
+      ? 'Print dialog opened.'
+      : `${payload.action.toUpperCase()} download started.`);
     postExportPageMessage('complete', { jobId: new URL(window.location.href).searchParams.get('job') || '' });
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Export failed';

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

@@ -1,5 +1,12 @@
 import { exportToSvg as exportExcalidrawToSvg } from '@excalidraw/excalidraw';
+import baseStyles from '../styles/base.css?inline';
+import tokenStyles from '../styles/foundation/tokens.css?inline';
+import themeStyles from '../styles/foundation/themes.css?inline';
+import previewStyles from '../styles/features/preview-markdown.css?inline';
+import highlightOverrideStyles from '../styles/overrides/highlightjs.css?inline';
+import exportStyles from '../styles/export-document.css?inline';
+import highlightStyles from '../assets/vendor/highlight/github.min.css?inline';
 import {
   encodeSvgDataUrl,
   loadImage,
@@ -9,6 +16,7 @@ import {
 import { compilePreviewDocument } from '../application/preview-render-compiler.js';
 import { stripVaultFileExtension } from '../../domain/file-kind.js';
 import { parseSceneJson, sceneToInitialData } from '../domain/excalidraw-scene.js';
+import { escapeHtml } from '../domain/vault-utils.js';
 import { downloadBlob } from '../browser-utils.js';
 import { resolveApiUrl, resolveAppUrl } from '../infrastructure/runtime-config.js';
@@ -46,6 +54,20 @@ const DOCX_IMAGE_TYPE_LABELS = new Map([
   ['image/gif', 'GIF'],
   ['image/webp', 'WebP'],
 ]);
+const HTML_EXPORT_STYLES = [
+  baseStyles,
+  tokenStyles,
+  themeStyles,
+  previewStyles,
+  highlightOverrideStyles,
+  exportStyles,
+  highlightStyles,
+  `html, body {
+    height: auto;
+    min-height: 100%;
+    overflow: visible;
+  }`,
+].join('\n');
 let mermaidLoaderPromise = null;
 let assetCounter = 0;
@@ -1387,6 +1409,37 @@ export function buildDocxHtmlDocument(snapshot) {
 </html>`;
 }
+export function buildHtmlDocument(snapshot) {
+  const template = document.createElement('template');
+  template.innerHTML = snapshot.html;
+  Array.from(template.content.querySelectorAll('[data-export-docx-src]')).forEach((element) => {
+    element.removeAttribute('data-export-docx-src');
+  });
+  return `<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(snapshot.title)}</title>
+  <style>${HTML_EXPORT_STYLES.replace(/<\/style/giu, '<\\/style')}</style>
+</head>
+<body data-theme="light">
+  <main class="export-page-shell">
+    <article class="preview-content export-content">${template.innerHTML}</article>
+  </main>
+</body>
+</html>`;
+}
+export function htmlAdapter(snapshot) {
+  downloadBlob(
+    new Blob([buildHtmlDocument(snapshot)], { type: 'text/html;charset=utf-8' }),
+    `${createDocumentTitle(snapshot.filePath, snapshot.title)}.html`,
+    { removeDelayMs: 0, revokeDelayMs: 1000 },
+  );
+}
 export async function docxAdapter(snapshot) {
   const response = await fetch(resolveApiUrl('/export/docx'), {
     body: JSON.stringify({
@@ -1461,6 +1514,11 @@ export async function runExportAdapter(snapshot, format) {
     return;
   }
+  if (format === 'html') {
+    await htmlAdapter(snapshot);
+    return;
+  }
   await docxAdapter(snapshot);
 }
@@ -1478,7 +1536,8 @@ export function postExportPageMessage(type, payload = {}) {
 export async function waitForBootstrapPayload() {
   const requestUrl = new URL(window.location.href);
-  const action = requestUrl.searchParams.get('action') === 'pdf' ? 'pdf' : 'docx';
+  const requestedAction = requestUrl.searchParams.get('action');
+  const action = ['html', 'pdf'].includes(requestedAction) ? requestedAction : 'docx';
   const filePath = requestUrl.searchParams.get('file') || '';
   const jobId = requestUrl.searchParams.get('job') || '';

package/src/client/infrastructure/browser-preferences-port.js CHANGED Viewed

@@ -22,6 +22,7 @@ export class BrowserPreferencesPort {
     fileTreeShowExtensionsKey,
     lineWrappingKey,
     recentFilesKey = 'collabmd-recent-files',
+    vimModeKey = 'collabmd-editor-vim-mode',
     sidebarVisibleKey,
     userNameKey,
     storage = globalThis.localStorage,
@@ -32,6 +33,7 @@ export class BrowserPreferencesPort {
     this.sidebarVisibleKey = sidebarVisibleKey;
     this.storage = storage;
     this.userNameKey = userNameKey;
+    this.vimModeKey = vimModeKey;
   }
   getUserName() {
@@ -58,6 +60,14 @@ export class BrowserPreferencesPort {
     writeStorage(this.storage, this.lineWrappingKey, String(enabled));
   }
+  getVimModeEnabled() {
+    return readStorage(this.storage, this.vimModeKey, null) === 'true';
+  }
+  setVimModeEnabled(enabled) {
+    writeStorage(this.storage, this.vimModeKey, String(enabled));
+  }
   getRecentFiles() {
     const stored = readStorage(this.storage, this.recentFilesKey, '[]');
     try {

package/src/client/infrastructure/comment-thread-store.js CHANGED Viewed

@@ -83,15 +83,21 @@ function normalizeSelectionAnchorPayload(payload, state) {
 export class CommentThreadStore {
   constructor({
+    canWrite = () => true,
+    createAnchor = null,
     getDoc,
     getEditorState,
     getLocalUser,
     onCommentsChange = null,
+    resolveThread = null,
   }) {
+    this.canWrite = canWrite;
+    this.createAnchor = createAnchor;
     this.getDoc = getDoc;
     this.getEditorState = getEditorState;
     this.getLocalUser = getLocalUser;
     this.onCommentsChange = onCommentsChange;
+    this.resolveThread = resolveThread;
     this.commentThreads = null;
     this.ydoc = null;
     this.ytext = null;
@@ -144,33 +150,44 @@ export class CommentThreadStore {
     }
     return serializeCommentThreads(this.commentThreads)
-      .map((thread) => this.resolveCommentThread(thread))
+      .map((thread) => this.resolveThread
+        ? this.resolveThread(thread)
+        : this.resolveCommentThread(thread))
       .filter(Boolean);
   }
   createCommentThread({ anchor, body }) {
-    const state = this.getEditorState();
-    if (!state || !this.commentThreads || !this.ytext || !this.ydoc) {
+    if (!this.canWrite() || !this.commentThreads || !this.ydoc) {
       return null;
     }
+    const state = this.getEditorState?.();
     const normalizedBody = normalizeCommentBody(body);
-    const normalizedAnchor = normalizeSelectionAnchorPayload(anchor, state);
+    if (!this.createAnchor && (!state || !this.ytext)) {
+      return null;
+    }
+    const normalizedAnchor = this.createAnchor
+      ? this.createAnchor(anchor)
+      : normalizeSelectionAnchorPayload(anchor, state);
     if (!normalizedBody || !normalizedAnchor) {
       return null;
     }
     const thread = createCommentThreadSharedType({
-      anchorEnd: Y.relativePositionToJSON(
-        Y.createRelativePositionFromTypeIndex(this.ytext, normalizedAnchor.endIndex),
-      ),
-      anchorEndLine: normalizedAnchor.anchorEndLine,
+      ...normalizedAnchor,
+      ...(this.createAnchor ? {} : {
+        anchorEnd: Y.relativePositionToJSON(
+          Y.createRelativePositionFromTypeIndex(this.ytext, normalizedAnchor.endIndex),
+        ),
+      }),
       anchorKind: normalizedAnchor.anchorKind,
       anchorQuote: normalizedAnchor.anchorQuote,
-      anchorStart: Y.relativePositionToJSON(
-        Y.createRelativePositionFromTypeIndex(this.ytext, normalizedAnchor.startIndex),
-      ),
-      anchorStartLine: normalizedAnchor.anchorStartLine,
+      ...(this.createAnchor ? {} : {
+        anchorStart: Y.relativePositionToJSON(
+          Y.createRelativePositionFromTypeIndex(this.ytext, normalizedAnchor.startIndex),
+        ),
+      }),
       createdAt: Date.now(),
       createdByColor: this.getLocalUser()?.color ?? '',
       createdByName: this.getLocalUser()?.name ?? 'Anonymous',
@@ -194,6 +211,10 @@ export class CommentThreadStore {
   }
   replyToCommentThread(threadId, body) {
+    if (!this.canWrite()) {
+      return null;
+    }
     const normalizedBody = normalizeCommentBody(body);
     if (!normalizedBody || !this.ydoc) {
       return null;
@@ -291,7 +312,7 @@ export class CommentThreadStore {
   }
   deleteCommentThread(threadId) {
-    if (!this.commentThreads || !this.ydoc) {
+    if (!this.canWrite() || !this.commentThreads || !this.ydoc) {
       return false;
     }

package/src/client/infrastructure/editor-session.js CHANGED Viewed

@@ -8,6 +8,7 @@ export class EditorSession {
   constructor({
     editorContainer,
     lineWrappingEnabled = true,
+    vimModeEnabled = false,
     initialTheme,
     lineInfoElement,
     onAwarenessChange,
@@ -44,6 +45,7 @@ export class EditorSession {
       initialTheme,
       lineInfoElement,
       lineWrappingEnabled,
+      vimModeEnabled,
       onDocChanged: () => {
         this.emitContentChange();
       },
@@ -210,6 +212,14 @@ export class EditorSession {
     return this.viewAdapter.isLineWrappingEnabled();
   }
+  isVimModeEnabled() {
+    return this.viewAdapter.isVimModeEnabled();
+  }
+  setVimMode(enabled) {
+    return this.viewAdapter.setVimMode(enabled);
+  }
   setLineWrapping(enabled) {
     return this.viewAdapter.setLineWrapping(enabled);
   }

package/src/client/infrastructure/editor-view-adapter.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { vim } from '@replit/codemirror-vim';
 import { autocompletion, closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
 import {
   defaultKeymap,
@@ -45,15 +46,26 @@ import {
 } from '@codemirror/view';
 import { yCollab } from 'y-codemirror.next';
-import { isBaseFilePath, isMermaidFilePath, isPlantUmlFilePath } from '../../domain/file-kind.js';
+import {
+  isBaseFilePath,
+  isMermaidFilePath,
+  isPlantUmlFilePath,
+  isStructurizrFilePath,
+} from '../../domain/file-kind.js';
 import { normalizeCommentQuote } from '../../domain/comment-threads.js';
 import { createMarkdownToolbarEdit } from '../domain/markdown-formatting.js';
 import { mermaidLanguage, mermaidLanguageDescription } from '../domain/mermaid-language.js';
 import { wikiLinkCompletions } from '../domain/wiki-link-completions.js';
 import { plantUmlLanguage, plantUmlLanguageDescription } from '../domain/plantuml-language.js';
+import { structurizrLanguage, structurizrLanguageDescription } from '../domain/structurizr-language.js';
 import { handleImagePasteEvent } from './editor-paste-utils.js';
-const markdownCodeLanguages = [...languages, mermaidLanguageDescription, plantUmlLanguageDescription];
+const markdownCodeLanguages = [
+  ...languages,
+  mermaidLanguageDescription,
+  plantUmlLanguageDescription,
+  structurizrLanguageDescription,
+];
 const pairedMatchingBracketMark = Decoration.mark({ class: 'cm-matchingBracket cm-matchingBracket-paired' });
 const nonmatchingBracketMark = Decoration.mark({ class: 'cm-nonmatchingBracket' });
 const remoteUpdateMark = Decoration.mark({ class: 'cm-remoteUpdateFlash' });
@@ -387,6 +399,10 @@ export function createLanguageExtension(filePath) {
     return plantUmlLanguage;
   }
+  if (isStructurizrFilePath(filePath)) {
+    return structurizrLanguage;
+  }
   if (isBaseFilePath(filePath)) {
     return yaml();
   }
@@ -408,6 +424,7 @@ export class EditorViewAdapter {
     initialTheme,
     lineInfoElement,
     lineWrappingEnabled = true,
+    vimModeEnabled = false,
     onDocChanged = null,
     onImagePaste = null,
     onSelectionChanged = null,
@@ -418,6 +435,7 @@ export class EditorViewAdapter {
     this.initialTheme = initialTheme;
     this.lineInfoElement = lineInfoElement;
     this.lineWrappingEnabled = lineWrappingEnabled;
+    this.vimModeEnabled = Boolean(vimModeEnabled);
     this.onDocChanged = onDocChanged;
     this.onImagePaste = onImagePaste;
     this.onSelectionChanged = onSelectionChanged;
@@ -426,6 +444,7 @@ export class EditorViewAdapter {
     this.themeCompartment = new Compartment();
     this.syntaxThemeCompartment = new Compartment();
     this.lineWrappingCompartment = new Compartment();
+    this.vimModeCompartment = new Compartment();
     this.viewportFrame = 0;
     this.remoteUpdateFlashTimer = 0;
     this.lastLocalInputAt = 0;
@@ -478,6 +497,7 @@ export class EditorViewAdapter {
       highlightActiveLine(),
       highlightSelectionMatches(),
       createSearchNavigationListener(),
+      this.vimModeCompartment.of(!readOnly && this.vimModeEnabled ? vim({ status: true }) : []),
       keymap.of([
         ...closeBracketsKeymap,
         ...defaultKeymap,
@@ -645,6 +665,30 @@ export class EditorViewAdapter {
     return this.lineWrappingEnabled;
   }
+  isVimModeEnabled() {
+    return this.vimModeEnabled;
+  }
+  setVimMode(enabled) {
+    const nextEnabled = Boolean(enabled);
+    if (nextEnabled === this.vimModeEnabled) {
+      return nextEnabled;
+    }
+    this.vimModeEnabled = nextEnabled;
+    if (!this.editorView || this.editorView.state.readOnly) {
+      return nextEnabled;
+    }
+    this.editorView.dispatch({
+      effects: this.vimModeCompartment.reconfigure(
+        nextEnabled ? vim({ status: true }) : [],
+      ),
+    });
+    this.editorView.focus();
+    return nextEnabled;
+  }
   setLineWrapping(enabled) {
     this.lineWrappingEnabled = Boolean(enabled);

package/src/client/infrastructure/excalidraw-room-client.js CHANGED Viewed

@@ -24,6 +24,10 @@ import {
   tryParseSceneJson,
 } from '../domain/excalidraw-scene.js';
 import { resolveWsBaseUrl } from '../domain/runtime-paths.js';
+import {
+  normalizeCommentQuote,
+} from '../../domain/comment-threads.js';
+import { CommentThreadStore } from './comment-thread-store.js';
 import { stopReconnectOnControlledClose } from './yjs-provider-reset-guard.js';
 const DEFAULT_EMPTY_SCENE_GUARD_MS = 250;
@@ -39,16 +43,21 @@ export const EXCALIDRAW_ROOM_CONNECTION_STATE = Object.freeze({
   RECONNECTING_READONLY: 'reconnecting-readonly',
 });
-function stableJson(value) {
-  if (Array.isArray(value)) {
-    return `[${value.map((entry) => stableJson(entry)).join(',')}]`;
+function areExcalidrawFilesEqual(left, right) {
+  if (left === right) {
+    return true;
   }
-  if (value && typeof value === 'object') {
-    return `{${Object.keys(value).sort().map((key) => `${JSON.stringify(key)}:${stableJson(value[key])}`).join(',')}}`;
+  if (!left || !right || typeof left !== 'object' || typeof right !== 'object') {
+    return false;
   }
-  return JSON.stringify(value);
+  return left.id === right.id
+    && left.mimeType === right.mimeType
+    && left.dataURL === right.dataURL
+    && left.created === right.created
+    && left.lastRetrieved === right.lastRetrieved
+    && left.version === right.version;
 }
 function normalizeElementVersion(value) {
@@ -81,6 +90,35 @@ function shouldSyncElementToRoom(localElement, roomElement) {
   return localVersionNonce < roomVersionNonce;
 }
+function createDiagramCommentAnchor(element) {
+  const elementId = typeof element?.id === 'string' ? element.id.trim() : '';
+  const x = Number(element?.x);
+  const y = Number(element?.y);
+  const width = Number(element?.width);
+  const height = Number(element?.height);
+  if (!elementId || ![x, y, width, height].every(Number.isFinite)) {
+    return null;
+  }
+  return {
+    anchorKind: 'diagram-element',
+    anchorPoint: {
+      x: x + (width / 2),
+      y: y + (height / 2),
+    },
+    anchorQuote: normalizeCommentQuote(element.text),
+    anchorSnapshot: {
+      height,
+      text: normalizeCommentQuote(element.text),
+      type: typeof element.type === 'string' ? element.type : 'element',
+      width,
+      x,
+      y,
+    },
+    elementId,
+  };
+}
 export class ExcalidrawRoomClient {
   constructor({
     cancelAnimationFrameFn = (frameId) => cancelAnimationFrame(frameId),
@@ -89,6 +127,7 @@ export class ExcalidrawRoomClient {
     filePath = '',
     now = () => Date.now(),
     onCollaboratorsChange = () => {},
+    onCommentThreadsChange = () => {},
     onConnectionStateChange = () => {},
     onRemoteSceneJson = () => {},
     requestAnimationFrameFn = (callback) => requestAnimationFrame(callback),
@@ -106,6 +145,7 @@ export class ExcalidrawRoomClient {
     this.filePath = filePath;
     this.now = now;
     this.onCollaboratorsChange = onCollaboratorsChange;
+    this.onCommentThreadsChange = onCommentThreadsChange;
     this.onConnectionStateChange = onConnectionStateChange;
     this.onRemoteSceneJson = onRemoteSceneJson;
     this.requestAnimationFrameFn = requestAnimationFrameFn;
@@ -138,12 +178,22 @@ export class ExcalidrawRoomClient {
     this.lastViewportSignature = '';
     this.lastSelectedIdsSignature = '';
     this.pendingEmptySceneCandidate = null;
+    this.structuredObserversAttached = false;
     this.canWriteToRoom = false;
     this.waitingForAuthoritativeSync = false;
     this.connectionState = EXCALIDRAW_ROOM_CONNECTION_STATE.CLOSED;
     this.hasAuthoritativeSync = false;
     this.applyingSharedSnapshotDepth = 0;
     this.suppressStructuredSceneUpdateDepth = 0;
+    this.commentThreadStore = new CommentThreadStore({
+      canWrite: () => this.canWriteToRoom,
+      createAnchor: createDiagramCommentAnchor,
+      getDoc: () => this.ydoc,
+      getEditorState: () => null,
+      getLocalUser: () => this.getLocalUser(),
+      onCommentsChange: (threads) => this.onCommentThreadsChange(threads),
+      resolveThread: (thread) => thread,
+    });
     this.handleAwarenessChange = () => {
       this.onCollaboratorsChange(buildCollaboratorsMap(this.awareness));
@@ -177,6 +227,25 @@ export class ExcalidrawRoomClient {
     return this.localUser;
   }
+  getCommentThreads() {
+    return this.commentThreadStore.getCommentThreads();
+  }
+  createCommentThread({ body, element } = {}) {
+    return this.commentThreadStore.createCommentThread({
+      anchor: element,
+      body,
+    });
+  }
+  replyToCommentThread(threadId, body) {
+    return this.commentThreadStore.replyToCommentThread(threadId, body);
+  }
+  deleteCommentThread(threadId) {
+    return this.commentThreadStore.deleteCommentThread(threadId);
+  }
   getConnectionState() {
     return this.connectionState;
   }
@@ -268,7 +337,16 @@ export class ExcalidrawRoomClient {
     return this.localUser;
   }
-  async connect({ initialUser = null } = {}) {
+  async connect(options = {}) {
+    try {
+      return await this.connectInternal(options);
+    } catch (error) {
+      this.disconnect();
+      throw error;
+    }
+  }
+  async connectInternal({ initialUser = null } = {}) {
     this.localUser = initialUser;
     this.setConnectionState(EXCALIDRAW_ROOM_CONNECTION_STATE.CONNECTING);
@@ -277,6 +355,7 @@ export class ExcalidrawRoomClient {
       this.lastSceneJson = JSON.stringify(scene);
       this.hasAuthoritativeSync = true;
       this.setConnectionState(EXCALIDRAW_ROOM_CONNECTION_STATE.AUTHORITATIVE);
+      this.onCommentThreadsChange([]);
       return scene;
     }
@@ -367,6 +446,11 @@ export class ExcalidrawRoomClient {
     this.roomElements.observeDeep(this.handleStructuredSceneUpdate);
     this.roomFiles.observeDeep(this.handleStructuredSceneUpdate);
     this.roomAppState.observe(this.handleStructuredSceneUpdate);
+    this.structuredObserversAttached = true;
+    this.commentThreadStore.bind({
+      commentThreads: this.ydoc.getArray('comments'),
+      ydoc: this.ydoc,
+    });
     if (usedApiFallback && this.canWriteToRoom) {
       this.commitSceneJson(this.lastSceneJson, {
         origin: 'excalidraw-api-fallback',
@@ -501,7 +585,7 @@ export class ExcalidrawRoomClient {
   mergeLocallyChangedAppState(appState, baseSceneJson) {
     const baseScene = parseSceneJson(baseSceneJson);
-    const roomScene = parseSceneJson(this.getStructuredSceneJson() || this.lastSceneJson);
+    const roomScene = parseSceneJson(this.lastSceneJson || this.getStructuredSceneJson());
     const nextAppState = {
       ...roomScene.appState,
     };
@@ -523,7 +607,7 @@ export class ExcalidrawRoomClient {
     elements,
     files,
   } = {}) {
-    const roomSceneJson = this.getStructuredSceneJson() || this.lastSceneJson || baseSceneJson;
+    const roomSceneJson = this.lastSceneJson || this.getStructuredSceneJson() || baseSceneJson;
     const roomScene = parseSceneJson(roomSceneJson);
     const nextAppState = this.mergeLocallyChangedAppState(appState, baseSceneJson);
     const roomElementsById = new Map(roomScene.elements.map((element) => [element.id, element]));
@@ -533,7 +617,7 @@ export class ExcalidrawRoomClient {
     const nextFiles = files && typeof files === 'object' ? files : {};
     const changedFiles = Object.fromEntries(
       Object.entries(nextFiles).filter(([fileId, file]) => (
-        stableJson(file) !== stableJson(roomScene.files?.[fileId])
+        !areExcalidrawFilesEqual(file, roomScene.files?.[fileId])
       )),
     );
     const appStateChanged = (
@@ -869,10 +953,15 @@ export class ExcalidrawRoomClient {
     this.lastSelectedIdsSignature = '';
     this.pendingEmptySceneCandidate = null;
-    this.roomMeta?.unobserve(this.handleStructuredSceneUpdate);
-    this.roomElements?.unobserveDeep(this.handleStructuredSceneUpdate);
-    this.roomFiles?.unobserveDeep(this.handleStructuredSceneUpdate);
-    this.roomAppState?.unobserve(this.handleStructuredSceneUpdate);
+    if (this.structuredObserversAttached) {
+      this.roomMeta?.unobserve(this.handleStructuredSceneUpdate);
+      this.roomElements?.unobserveDeep(this.handleStructuredSceneUpdate);
+      this.roomFiles?.unobserveDeep(this.handleStructuredSceneUpdate);
+      this.roomAppState?.unobserve(this.handleStructuredSceneUpdate);
+      this.structuredObserversAttached = false;
+    }
+    this.commentThreadStore.unbind();
     if (this.awareness) {
       this.awareness.off('change', this.handleAwarenessChange);

package/src/client/infrastructure/git-api-client.js CHANGED Viewed

@@ -74,6 +74,11 @@ export class GitApiClient {
     return parseApiResponse(response, 'Failed to load historical file preview');
   }
+  getFileAttachmentUrl({ hash, path } = {}) {
+    const params = createSearchParams({ hash, path });
+    return resolveApiUrl(`/git/file-attachment?${params.toString()}`);
+  }
   async stageFile({ path, requestId = null } = {}) {
     return this.#postJson('/git/stage', { path }, { requestId, fallbackError: 'Failed to stage file' });
   }

package/src/client/infrastructure/vault-api-client.js CHANGED Viewed

@@ -51,6 +51,20 @@ export class VaultApiClient {
     return Array.isArray(data.backlinks) ? data.backlinks : [];
   }
+  async syncStructurizrWorkspace({ path, source }) {
+    const response = await fetch(resolveApiUrl('/structurizr/sync'), {
+      body: JSON.stringify({
+        path,
+        source,
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: 'POST',
+    });
+    return parseApiResponse(response, 'Failed to sync Structurizr workspace');
+  }
   async renderSvg(source) {
     const response = await fetch(resolveApiUrl('/plantuml/render'), {
       body: JSON.stringify({ source }),
@@ -261,6 +275,18 @@ export class VaultApiClient {
     return parseApiResponse(response, 'Failed to upload image');
   }
+  async uploadFile({ file, path, requestId = null }) {
+    const response = await fetch(resolveApiUrl('/file/upload'), {
+      body: file,
+      headers: createRequestHeaders(requestId, {
+        'Content-Type': file?.type || 'application/octet-stream',
+        'X-CollabMD-File-Path': encodeHeaderMetadata(path),
+      }),
+      method: 'POST',
+    });
+    return parseApiResponse(response, 'Failed to upload file');
+  }
   async downloadFile(path) {
     const fallbackFileName = getVaultPathLeaf(path) || 'download';
     return triggerDownload(resolveApiUrl(`/download/file?path=${encodeURIComponent(path)}`), {

package/src/client/presentation/comment-ui/comment-ui-render.js CHANGED Viewed

@@ -17,6 +17,7 @@ import {
  * @property {HTMLElement | null} commentsDrawerList
  * @property {HTMLElement | null} commentsDrawerEmpty
  * @property {HTMLElement | null} cardRoot
+ * @property {{ matches: boolean }} mobileBreakpointQuery
  * @property {HTMLElement | null} pendingCardFocusElement
  * @property {any} reactionPicker
  * @property {() => Array<any>} getThreadGroups
@@ -103,6 +104,9 @@ function renderDrawer() {
     });
     button.addEventListener('click', () => {
       this.onNavigateToLine?.(group.anchor?.startLine ?? 1);
+      if (this.mobileBreakpointQuery?.matches) {
+        this.setDrawerOpen(false);
+      }
       this.openThreadGroup(group, {
         anchor: group.anchor,
         origin: 'editor',