collabmd 0.1.43 → 0.1.44

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

@@ -30,6 +30,15 @@ const DEFAULT_EMPTY_SCENE_GUARD_MS = 250;
 const DEFAULT_SAVE_THROTTLE_MS = 48;
 const DEFAULT_SYNC_TIMEOUT_MS = 4000;
 
+export const EXCALIDRAW_ROOM_CONNECTION_STATE = Object.freeze({
+  AUTHORITATIVE: 'authoritative',
+  CLOSED: 'closed',
+  CONNECTING: 'connecting',
+  DISCONNECTING: 'disconnecting',
+  FALLBACK_READONLY: 'fallback-readonly',
+  RECONNECTING_READONLY: 'reconnecting-readonly',
+});
+
 function stableJson(value) {
   if (Array.isArray(value)) {
     return `[${value.map((entry) => stableJson(entry)).join(',')}]`;
@@ -80,6 +89,7 @@ export class ExcalidrawRoomClient {
     filePath = '',
     now = () => Date.now(),
     onCollaboratorsChange = () => {},
+    onConnectionStateChange = () => {},
     onRemoteSceneJson = () => {},
     requestAnimationFrameFn = (callback) => requestAnimationFrame(callback),
     resolveWsBaseUrlFn = resolveWsBaseUrl,
@@ -96,6 +106,7 @@ export class ExcalidrawRoomClient {
     this.filePath = filePath;
     this.now = now;
     this.onCollaboratorsChange = onCollaboratorsChange;
+    this.onConnectionStateChange = onConnectionStateChange;
     this.onRemoteSceneJson = onRemoteSceneJson;
     this.requestAnimationFrameFn = requestAnimationFrameFn;
     this.resolveWsBaseUrlFn = resolveWsBaseUrlFn;
@@ -114,6 +125,7 @@ export class ExcalidrawRoomClient {
     this.awareness = null;
     this.localUser = null;
     this.handleProviderSync = null;
+    this.handleProviderStatus = null;
     this.lastSceneJson = '';
     this.sceneSyncTimer = null;
     this.sceneSyncDueAt = 0;
@@ -128,6 +140,8 @@ export class ExcalidrawRoomClient {
     this.pendingEmptySceneCandidate = null;
     this.canWriteToRoom = false;
     this.waitingForAuthoritativeSync = false;
+    this.connectionState = EXCALIDRAW_ROOM_CONNECTION_STATE.CLOSED;
+    this.hasAuthoritativeSync = false;
     this.applyingSharedSnapshotDepth = 0;
     this.suppressStructuredSceneUpdateDepth = 0;
 
@@ -149,7 +163,6 @@ export class ExcalidrawRoomClient {
         return;
       }
 
-      this.unlockRoomWrites();
       this.pendingEmptySceneCandidate = null;
       this.lastSceneJson = JSON.stringify(parseSceneJson(remoteJson));
       this.onRemoteSceneJson(this.lastSceneJson);
@@ -164,6 +177,46 @@ export class ExcalidrawRoomClient {
     return this.localUser;
   }
 
+  getConnectionState() {
+    return this.connectionState;
+  }
+
+  hasPendingWrites() {
+    return Boolean(this.pendingSceneSyncPayload);
+  }
+
+  setConnectionState(nextState) {
+    if (!Object.values(EXCALIDRAW_ROOM_CONNECTION_STATE).includes(nextState)) {
+      throw new Error(`Unsupported Excalidraw room connection state: ${nextState}`);
+    }
+
+    const previousState = this.connectionState;
+    this.connectionState = nextState;
+    this.canWriteToRoom = nextState === EXCALIDRAW_ROOM_CONNECTION_STATE.AUTHORITATIVE;
+    this.waitingForAuthoritativeSync = (
+      nextState === EXCALIDRAW_ROOM_CONNECTION_STATE.CONNECTING
+      || nextState === EXCALIDRAW_ROOM_CONNECTION_STATE.FALLBACK_READONLY
+      || nextState === EXCALIDRAW_ROOM_CONNECTION_STATE.RECONNECTING_READONLY
+    );
+
+    if (!this.canWriteToRoom && this.sceneSyncTimer !== null) {
+      this.clearTimeoutFn(this.sceneSyncTimer);
+      this.sceneSyncTimer = null;
+      this.sceneSyncDueAt = 0;
+    }
+
+    if (previousState === nextState) {
+      return;
+    }
+
+    this.onConnectionStateChange({
+      canWrite: this.canWriteToRoom,
+      hasPendingWrites: this.hasPendingWrites(),
+      previousState,
+      state: nextState,
+    });
+  }
+
   getHistoryState() {
     return {
       canRedo: false,
@@ -217,10 +270,13 @@ export class ExcalidrawRoomClient {
 
   async connect({ initialUser = null } = {}) {
     this.localUser = initialUser;
+    this.setConnectionState(EXCALIDRAW_ROOM_CONNECTION_STATE.CONNECTING);
 
     if (!this.filePath) {
       const scene = createEmptyScene();
       this.lastSceneJson = JSON.stringify(scene);
+      this.hasAuthoritativeSync = true;
+      this.setConnectionState(EXCALIDRAW_ROOM_CONNECTION_STATE.AUTHORITATIVE);
       return scene;
     }
 
@@ -245,13 +301,37 @@ export class ExcalidrawRoomClient {
 
     this.handleProviderSync = (isSynced) => {
       if (!isSynced) {
+        this.setConnectionState(
+          this.hasAuthoritativeSync
+            ? EXCALIDRAW_ROOM_CONNECTION_STATE.RECONNECTING_READONLY
+            : EXCALIDRAW_ROOM_CONNECTION_STATE.CONNECTING,
+        );
         return;
       }
 
-      this.unlockRoomWrites();
+      this.markAuthoritative();
       this.handleStructuredSceneUpdate();
     };
     this.provider.on('sync', this.handleProviderSync);
+    this.handleProviderStatus = ({ status } = {}) => {
+      if (status === 'connected') {
+        if (this.hasAuthoritativeSync && !this.provider?.synced) {
+          this.setConnectionState(EXCALIDRAW_ROOM_CONNECTION_STATE.RECONNECTING_READONLY);
+        }
+        return;
+      }
+
+      if (status === 'connecting' || status === 'disconnected') {
+        this.setConnectionState(
+          this.hasAuthoritativeSync
+            ? EXCALIDRAW_ROOM_CONNECTION_STATE.RECONNECTING_READONLY
+            : this.connectionState === EXCALIDRAW_ROOM_CONNECTION_STATE.FALLBACK_READONLY
+              ? EXCALIDRAW_ROOM_CONNECTION_STATE.FALLBACK_READONLY
+              : EXCALIDRAW_ROOM_CONNECTION_STATE.CONNECTING,
+        );
+      }
+    };
+    this.provider.on('status', this.handleProviderStatus);
 
     const didInitialSyncFinish = await this.waitForSync(this.provider, this.syncTimeoutMs);
 
@@ -272,9 +352,12 @@ export class ExcalidrawRoomClient {
       initialJson = JSON.stringify(createEmptyScene());
     }
 
-    this.waitingForAuthoritativeSync = usedApiFallback && !didInitialSyncFinish;
-    this.canWriteToRoom = !this.waitingForAuthoritativeSync;
     this.lastSceneJson = JSON.stringify(parseSceneJson(initialJson));
+    if (didInitialSyncFinish || this.provider?.synced) {
+      this.markAuthoritative();
+    } else {
+      this.setConnectionState(EXCALIDRAW_ROOM_CONNECTION_STATE.FALLBACK_READONLY);
+    }
     if (!usedApiFallback && this.canWriteToRoom && !isExcalidrawRoomDocStructured(this.ydoc)) {
       this.ydoc.transact(() => {
         this.replaceStructuredSceneWithinTransaction(this.lastSceneJson);
@@ -375,9 +458,9 @@ export class ExcalidrawRoomClient {
     });
   }
 
-  unlockRoomWrites() {
-    this.waitingForAuthoritativeSync = false;
-    this.canWriteToRoom = true;
+  markAuthoritative() {
+    this.hasAuthoritativeSync = true;
+    this.setConnectionState(EXCALIDRAW_ROOM_CONNECTION_STATE.AUTHORITATIVE);
     if (!this.getStructuredSceneJson() && this.lastSceneJson) {
       this.commitSceneJson(this.lastSceneJson, {
         origin: 'excalidraw-authoritative-seed',
@@ -469,20 +552,25 @@ export class ExcalidrawRoomClient {
   }
 
   scheduleSceneSync(elements, appState, files) {
+    if (!this.canWriteToRoom) {
+      return false;
+    }
+
     this.pendingSceneSyncPayload = {
       appState,
       baseSceneJson: this.lastSceneJson,
       elements,
       files,
     };
-    if (!this.canWriteToRoom) {
-      return;
-    }
-
     this.scheduleSceneSyncFlush();
+    return true;
   }
 
   scheduleSceneSyncFlush() {
+    if (!this.canWriteToRoom) {
+      return false;
+    }
+
     const elapsed = this.now() - this.lastSceneSyncAt;
     const delay = Math.max(0, this.saveThrottleMs - elapsed);
     const dueAt = this.now() + delay;
@@ -499,11 +587,12 @@ export class ExcalidrawRoomClient {
       this.sceneSyncDueAt = 0;
       this.flushSceneSync();
     }, delay);
+    return true;
   }
 
   flushSceneSync() {
-    if (!this.ydoc || !this.pendingSceneSyncPayload) {
-      return;
+    if (!this.canWriteToRoom || !this.ydoc || !this.pendingSceneSyncPayload) {
+      return false;
     }
 
     const {
@@ -544,7 +633,7 @@ export class ExcalidrawRoomClient {
 
     if (!hasChanges) {
       this.pendingEmptySceneCandidate = null;
-      return;
+      return false;
     }
 
     const json = JSON.stringify(sceneData);
@@ -558,6 +647,7 @@ export class ExcalidrawRoomClient {
     if (this.pendingSceneSyncPayload) {
       this.scheduleSceneSyncFlush();
     }
+    return true;
   }
 
   hasRemoteCollaborators() {
@@ -727,6 +817,10 @@ export class ExcalidrawRoomClient {
   commitSceneJson(nextJson, {
     origin = 'excalidraw-room-write',
   } = {}) {
+    if (!this.canWriteToRoom) {
+      return false;
+    }
+
     const normalizedJson = JSON.stringify(parseSceneJson(nextJson));
     if (!this.ydoc) {
       const didChange = normalizedJson !== this.lastSceneJson;
@@ -755,6 +849,7 @@ export class ExcalidrawRoomClient {
 
   disconnect() {
     this.flushSceneSync();
+    this.setConnectionState(EXCALIDRAW_ROOM_CONNECTION_STATE.DISCONNECTING);
     this.clearTimeoutFn(this.sceneSyncTimer);
     this.sceneSyncTimer = null;
     this.sceneSyncDueAt = 0;
@@ -788,7 +883,11 @@ export class ExcalidrawRoomClient {
     if (this.provider && this.handleProviderSync) {
       this.provider.off('sync', this.handleProviderSync);
     }
+    if (this.provider && this.handleProviderStatus) {
+      this.provider.off('status', this.handleProviderStatus);
+    }
     this.handleProviderSync = null;
+    this.handleProviderStatus = null;
     this.provider?.disconnect();
     this.provider?.destroy();
     this.provider = null;
@@ -800,8 +899,8 @@ export class ExcalidrawRoomClient {
     this.roomFiles = null;
     this.roomAppState = null;
     this.localUser = null;
-    this.canWriteToRoom = false;
-    this.waitingForAuthoritativeSync = false;
+    this.hasAuthoritativeSync = false;
+    this.setConnectionState(EXCALIDRAW_ROOM_CONNECTION_STATE.CLOSED);
     this.applyingSharedSnapshotDepth = 0;
     this.suppressStructuredSceneUpdateDepth = 0;
   }

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

@@ -1,28 +1,5 @@
 import { resolveApiUrl } from '../domain/runtime-paths.js';
-
-function createRequestHeaders(requestId, headers = {}) {
-  const nextHeaders = { ...headers };
-  if (requestId) {
-    nextHeaders['X-CollabMD-Request-Id'] = String(requestId);
-  }
-
-  return nextHeaders;
-}
-
-async function parseJsonResponse(response, fallbackError) {
-  const data = await response.json().catch(() => ({}));
-  if (!response.ok || data.ok === false) {
-    const error = new Error(data.error || fallbackError);
-    error.status = response.status;
-    error.body = data;
-    if (typeof data?.code === 'string') {
-      error.code = data.code;
-    }
-    throw error;
-  }
-
-  return data;
-}
+import { createRequestHeaders, parseApiResponse } from './api-client-utils.js';
 
 function createSearchParams(values = {}) {
   const params = new URLSearchParams();
@@ -39,24 +16,24 @@ function createSearchParams(values = {}) {
 export class GitApiClient {
   async readStatus({ force = false } = {}) {
     const response = await fetch(resolveApiUrl(`/git/status${force ? '?force=true' : ''}`));
-    return parseJsonResponse(response, 'Failed to load git status');
+    return parseApiResponse(response, 'Failed to load git status');
   }
 
   async readPullBackups() {
     const response = await fetch(resolveApiUrl('/git/pull-backups'));
-    return parseJsonResponse(response, 'Failed to load pull backups');
+    return parseApiResponse(response, 'Failed to load pull backups');
   }
 
   async readHistory({ limit, offset } = {}) {
     const params = createSearchParams({ limit, offset });
     const response = await fetch(resolveApiUrl(`/git/history?${params.toString()}`));
-    return parseJsonResponse(response, 'Failed to load git history');
+    return parseApiResponse(response, 'Failed to load git history');
   }
 
   async readFileHistory({ path, limit, offset } = {}) {
     const params = createSearchParams({ limit, offset, path });
     const response = await fetch(resolveApiUrl(`/git/file-history?${params.toString()}`));
-    return parseJsonResponse(response, 'Failed to load file history');
+    return parseApiResponse(response, 'Failed to load file history');
   }
 
   async readDiff({
@@ -72,7 +49,7 @@ export class GitApiClient {
       scope,
     });
     const response = await fetch(resolveApiUrl(`/git/diff?${params.toString()}`));
-    return parseJsonResponse(response, 'Failed to load git diff');
+    return parseApiResponse(response, 'Failed to load git diff');
   }
 
   async readCommit({
@@ -88,13 +65,13 @@ export class GitApiClient {
       path,
     });
     const response = await fetch(resolveApiUrl(`/git/commit?${params.toString()}`));
-    return parseJsonResponse(response, 'Failed to load git commit');
+    return parseApiResponse(response, 'Failed to load git commit');
   }
 
   async readFileSnapshot({ hash, path } = {}) {
     const params = createSearchParams({ hash, path });
     const response = await fetch(resolveApiUrl(`/git/file-snapshot?${params.toString()}`));
-    return parseJsonResponse(response, 'Failed to load historical file preview');
+    return parseApiResponse(response, 'Failed to load historical file preview');
   }
 
   async stageFile({ path, requestId = null } = {}) {
@@ -127,7 +104,7 @@ export class GitApiClient {
       headers: createRequestHeaders(requestId, { 'Content-Type': 'application/json' }),
       method: 'POST',
     });
-    return parseJsonResponse(response, fallbackError);
+    return parseApiResponse(response, fallbackError);
   }
 }
 

package/src/client/infrastructure/plantuml-api-client.js

@@ -1,6 +1,6 @@
 import { resolveApiUrl } from '../domain/runtime-paths.js';
 
-export class PlantUmlApiClient {
+export const plantUmlApiClient = {
   async renderSvg(source) {
     const response = await fetch(resolveApiUrl('/plantuml/render'), {
       body: JSON.stringify({ source }),
@@ -15,7 +15,5 @@ export class PlantUmlApiClient {
     }
 
     return data.svg;
-  }
-}
-
-export const plantUmlApiClient = new PlantUmlApiClient();
+  },
+};

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

@@ -1,63 +1,12 @@
 import { resolveApiUrl } from '../domain/runtime-paths.js';
+import { getVaultPathLeaf } from '../domain/vault-paths.js';
+import { createRequestHeaders, parseApiResponse } from './api-client-utils.js';
+import { downloadBlob, parseDownloadFileName } from '../browser-utils.js';
 
 function encodeHeaderMetadata(value) {
   return encodeURIComponent(String(value ?? ''));
 }
 
-function getPathLeaf(pathValue) {
-  return String(pathValue ?? '')
-    .replace(/\/+$/u, '')
-    .split('/')
-    .filter(Boolean)
-    .pop() || '';
-}
-
-function downloadBlob(blob, fileName) {
-  const url = URL.createObjectURL(blob);
-  const anchor = document.createElement('a');
-  anchor.href = url;
-  anchor.download = fileName;
-  document.body.appendChild(anchor);
-  anchor.click();
-  anchor.remove();
-  window.setTimeout(() => URL.revokeObjectURL(url), 0);
-}
-
-function parseDownloadFileName(contentDisposition = '', fallbackName = 'download') {
-  const utfMatch = String(contentDisposition).match(/filename\*=UTF-8''([^;]+)/iu);
-  if (utfMatch) {
-    try {
-      return decodeURIComponent(utfMatch[1]);
-    } catch {
-      return fallbackName;
-    }
-  }
-
-  const asciiMatch = String(contentDisposition).match(/filename="([^"]+)"/iu);
-  return asciiMatch?.[1] || fallbackName;
-}
-
-function createRequestHeaders(requestId, headers = {}) {
-  const nextHeaders = { ...headers };
-  if (requestId) {
-    nextHeaders['X-CollabMD-Request-Id'] = String(requestId);
-  }
-
-  return nextHeaders;
-}
-
-async function parseApiResponse(response, fallbackError) {
-  const data = await response.json().catch(() => ({}));
-  if (!response.ok || data.ok === false) {
-    const error = new Error(data.error || fallbackError);
-    error.status = response.status;
-    error.body = data;
-    throw error;
-  }
-
-  return data;
-}
-
 async function triggerDownload(url, {
   fallbackError,
   fallbackFileName,
@@ -72,6 +21,7 @@ async function triggerDownload(url, {
   downloadBlob(
     blob,
     parseDownloadFileName(response.headers.get('content-disposition') || '', fallbackFileName),
+    { removeDelayMs: 0, revokeDelayMs: 0 },
   );
   return response;
 }
@@ -287,7 +237,7 @@ export class VaultApiClient {
   }
 
   async downloadFile(path) {
-    const fallbackFileName = getPathLeaf(path) || 'download';
+    const fallbackFileName = getVaultPathLeaf(path) || 'download';
     return triggerDownload(resolveApiUrl(`/download/file?path=${encodeURIComponent(path)}`), {
       fallbackError: 'Failed to download file',
       fallbackFileName,
@@ -295,7 +245,7 @@ export class VaultApiClient {
   }
 
   async downloadDirectory(path) {
-    const directoryName = getPathLeaf(path) || 'vault';
+    const directoryName = getVaultPathLeaf(path) || 'vault';
     return triggerDownload(resolveApiUrl(`/download/directory?path=${encodeURIComponent(path)}`), {
       fallbackError: 'Failed to download folder',
       fallbackFileName: `${directoryName}.zip`,

package/src/client/presentation/bases-preview-controller.js

@@ -2,8 +2,9 @@ import { isImageAttachmentFilePath } from '../../domain/file-kind.js';
 import { resolveApiUrl } from '../domain/runtime-paths.js';
 import { escapeHtml } from '../domain/vault-utils.js';
 import { buttonClassNames } from './components/ui/button.js';
-import { inputClassNames } from './components/ui/input.js';
+import { inputClassNames } from './components/ui/class-names.js';
 import { segmentedButtonClassNames, segmentedControlClassNames } from './components/ui/segmented-control.js';
+import { downloadBlob, parseDownloadFileName } from '../browser-utils.js';
 
 function createShellKey() {
   return `base-${Math.random().toString(36).slice(2, 10)}`;
@@ -1143,26 +1144,6 @@ function updateShellPanel(entry, result) {
   });
 }
 
-function downloadBlob(blob, fileName = 'base.csv') {
-  const url = URL.createObjectURL(blob);
-  const anchor = document.createElement('a');
-  anchor.href = url;
-  anchor.download = fileName;
-  document.body.appendChild(anchor);
-  anchor.click();
-  anchor.remove();
-  setTimeout(() => URL.revokeObjectURL(url), 0);
-}
-
-function parseDownloadFileName(contentDisposition = '') {
-  const utfMatch = contentDisposition.match(/filename\*=UTF-8''([^;]+)/iu);
-  if (utfMatch) {
-    return decodeURIComponent(utfMatch[1]);
-  }
-  const asciiMatch = contentDisposition.match(/filename="([^"]+)"/iu);
-  return asciiMatch?.[1] || 'base.csv';
-}
-
 export class BasesPreviewController {
   constructor({
     getActiveFilePath = () => '',
@@ -1721,7 +1702,10 @@ export class BasesPreviewController {
         activeFilePath: this.getActiveFilePath?.() ?? '',
         ...entry.payload,
       });
-      downloadBlob(response.blob, parseDownloadFileName(response.contentDisposition));
+      downloadBlob(response.blob, parseDownloadFileName(response.contentDisposition, 'base.csv'), {
+        removeDelayMs: 0,
+        revokeDelayMs: 0,
+      });
     } catch (error) {
       this.toastController?.show?.(error.message || 'Failed to export base CSV');
     }

package/src/client/presentation/comment-overview-controller.js

@@ -1,22 +1,10 @@
 import { stripVaultFileExtension } from '../../domain/file-kind.js';
+import { getVaultPathLeaf, getVaultPathParent } from '../domain/vault-paths.js';
 
 function asArray(value) {
   return Array.isArray(value) ? value : [];
 }
 
-function getPathLeaf(pathValue = '') {
-  return String(pathValue)
-    .split('/')
-    .filter(Boolean)
-    .pop() || '';
-}
-
-function getParentPath(pathValue = '') {
-  const normalized = String(pathValue ?? '').replace(/\/+$/u, '');
-  const separatorIndex = normalized.lastIndexOf('/');
-  return separatorIndex >= 0 ? normalized.slice(0, separatorIndex) : '';
-}
-
 function formatLineLabel(anchor = {}) {
   const startLine = Number(anchor.startLine || 0);
   const endLine = Number(anchor.endLine || startLine);
@@ -177,11 +165,11 @@ export class CommentOverviewController {
 
     const title = document.createElement('h3');
     title.className = 'comment-overview-file-title';
-    title.textContent = stripVaultFileExtension(getPathLeaf(file.filePath));
+    title.textContent = stripVaultFileExtension(getVaultPathLeaf(file.filePath));
 
     const parent = document.createElement('span');
     parent.className = 'comment-overview-file-path';
-    parent.textContent = getParentPath(file.filePath) || file.filePath;
+    parent.textContent = getVaultPathParent(file.filePath) || file.filePath;
 
     const count = document.createElement('span');
     count.className = 'comment-overview-file-count';

package/src/client/presentation/comment-ui/comment-ui-card.js

@@ -5,6 +5,7 @@ import {
   COMMENT_REACTION_MORE_EMOJIS,
   COMMENT_REACTION_PRESET_EMOJIS,
   clamp,
+  createRectFromRects,
   createRenderedCommentBody,
   formatAnchorLabel,
   formatReactionCount,
@@ -13,7 +14,7 @@ import {
   isReactionPickerOpen,
 } from './comment-ui-shared.js';
 import { buttonClassNames } from '../components/ui/button.js';
-import { inputClassNames } from '../components/ui/input.js';
+import { inputClassNames } from '../components/ui/class-names.js';
 
 /** @this {any} */
 function ensureCardRoot() {
@@ -29,8 +30,8 @@ function ensureCardRoot() {
 }
 
 /** @this {any} */
-function openComposerForSelection(origin = 'editor', sourceRect = null) {
-  const anchor = this.session?.getCurrentSelectionCommentAnchor?.();
+function openComposerForSelection(origin = 'editor', sourceRect = null, previewSelection = null) {
+  const anchor = previewSelection?.anchor ?? this.session?.getCurrentSelectionCommentAnchor?.();
   if (!anchor) {
     return;
   }
@@ -46,8 +47,9 @@ function openComposerForSelection(origin = 'editor', sourceRect = null) {
     composerDraft: null,
     mode: 'create',
     origin: nextOrigin,
+    previewRange: previewSelection?.range ?? null,
     replyThreadId: null,
-    sourceRect: nextSourceRect,
+    sourceRect: nextSourceRect ?? null,
   };
   this.render();
 }
@@ -71,10 +73,14 @@ function openThreadGroup(group, { anchor, origin, sourceRect }) {
 
 /** @this {any} */
 function closeCard() {
+  const wasPreviewComposer = this.activeCard?.mode === 'create' && this.activeCard.origin === 'preview';
   this.activeCard = null;
   this.pendingCardFocusElement = null;
   this.reactionPicker = null;
   this.renderCard();
+  if (wasPreviewComposer) {
+    this.clearPreviewSelection();
+  }
   this.scheduleLayoutRefresh();
 }
 
@@ -91,6 +97,10 @@ function updateCardSourceRect() {
     return this.activeCard.sourceRect;
   }
   if (this.activeCard.origin === 'preview') {
+    const selectionRect = createRectFromRects(Array.from(this.activeCard.previewRange?.getClientRects?.() ?? []));
+    if (selectionRect) {
+      return selectionRect;
+    }
     return this.resolvePreviewTarget(this.activeCard.anchor)?.bubbleRect ?? this.activeCard.sourceRect;
   }
   if (this.activeCard.origin === 'toolbar') {
@@ -215,6 +225,13 @@ function renderCard() {
   const content = document.createElement('div');
   content.className = 'comment-card-scroll';
 
+  if (this.activeCard.mode === 'create' && this.activeCard.anchor?.fallbackToLines) {
+    const anchorNote = document.createElement('p');
+    anchorNote.className = 'comment-card-anchor-note';
+    anchorNote.textContent = `Exact preview mapping was unavailable. This comment will be anchored to ${formatAnchorLabel(this.activeCard.anchor).toLowerCase()}.`;
+    content.appendChild(anchorNote);
+  }
+
   if (this.activeCard.anchor?.quote) {
     const quote = document.createElement('p');
     quote.className = 'comment-card-quote';