collabmd 0.1.43 → 0.1.45

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

@@ -1,4 +1,8 @@
-import { createRenderedCommentBody, formatAnchorLabel, getLatestGroupMessage } from './comment-ui-shared.js';
+import {
+  createCommentOverviewThread,
+  formatAnchorLabel,
+  getLatestGroupMessage,
+} from './comment-ui-shared.js';
 
 /**
  * @typedef {object} CommentUiRenderContext
@@ -61,67 +65,51 @@ function renderDrawer() {
   }
 
   this.commentsDrawer.classList.toggle('hidden', !this.supported || !this.drawerOpen);
+  if (!this.supported || !this.drawerOpen) {
+    return;
+  }
+
   this.commentsDrawerList.replaceChildren();
   const groups = this.getThreadGroups();
   this.commentsDrawerEmpty?.classList.toggle('hidden', groups.length > 0);
-  if (!this.supported || groups.length === 0) {
+  if (groups.length === 0) {
     return;
   }
 
   const fragment = document.createDocumentFragment();
   groups.forEach((group) => {
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.className = 'ui-record-surface comments-drawer-item';
+    const latestMessage = getLatestGroupMessage(group);
+    const messageCount = group.threads.reduce(
+      (count, thread) => count + (Array.isArray(thread.messages) ? thread.messages.length : 0),
+      0,
+    );
+    const button = createCommentOverviewThread({
+      authorName: latestMessage?.userName || group.threads[0]?.createdByName || 'Anonymous',
+      buttonClassName: 'comment-overview-thread comments-drawer-item',
+      footerClassName: 'comment-overview-thread-footer comments-drawer-item-footer',
+      headerClassName: 'comment-overview-thread-header comments-drawer-item-header',
+      lineClassName: 'comment-overview-thread-line comments-drawer-item-title',
+      lineLabel: formatAnchorLabel(group.anchor),
+      messageCount,
+      previewBody: latestMessage?.body || '',
+      previewClassName: 'comment-markdown comment-overview-thread-preview comments-drawer-item-preview',
+      quote: group.anchor?.quote || group.anchor?.excerpt || 'Source anchored comment',
+      quoteClassName: 'comment-overview-thread-quote comments-drawer-item-quote',
+      timestamp: latestMessage ? this.formatTimestamp(latestMessage.createdAt) : '',
+    });
     button.classList.toggle('is-active', this.activeCard?.groupKey === group.key);
     button.addEventListener('pointerdown', (event) => {
       event.preventDefault();
     });
     button.addEventListener('click', () => {
+      this.onNavigateToLine?.(group.anchor?.startLine ?? 1);
       this.openThreadGroup(group, {
         anchor: group.anchor,
-        origin: 'drawer',
-        sourceRect: button.getBoundingClientRect(),
+        origin: 'editor',
+        sourceRect: this.session?.getCommentAnchorClientRect?.(group.anchor)
+          ?? button.getBoundingClientRect(),
       });
     });
-
-    const header = document.createElement('div');
-    header.className = 'ui-record-header comments-drawer-item-header';
-
-    const title = document.createElement('span');
-    title.className = 'comments-drawer-item-title';
-    title.textContent = formatAnchorLabel(group.anchor);
-
-    const count = document.createElement('span');
-    count.className = 'ui-pill-badge ui-pill-badge--count ui-pill-badge--accent comments-drawer-item-count';
-    count.textContent = String(group.threads.length);
-
-    header.append(title, count);
-
-    const quote = document.createElement('p');
-    quote.className = 'comments-drawer-item-quote';
-    quote.textContent = group.anchor.quote || group.anchor.excerpt || 'Source anchored comment';
-
-    const latestMessage = getLatestGroupMessage(group);
-    const preview = createRenderedCommentBody(
-      latestMessage?.body || '',
-      'comment-markdown comments-drawer-item-preview',
-    );
-
-    const footer = document.createElement('div');
-    footer.className = 'ui-record-meta comments-drawer-item-footer';
-    const countLabel = document.createElement('span');
-    countLabel.textContent = `${group.threads.length} thread${group.threads.length === 1 ? '' : 's'}`;
-
-    const updatedLabel = document.createElement('span');
-    updatedLabel.className = 'comments-drawer-item-updated';
-    updatedLabel.textContent = latestMessage
-      ? `${latestMessage.userName} • ${this.formatTimestamp(latestMessage.createdAt)}`
-      : '';
-
-    footer.append(countLabel, updatedLabel);
-
-    button.append(header, quote, preview, footer);
     fragment.appendChild(button);
   });
 

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

@@ -1,27 +1,21 @@
 import {
   COMMENT_BODY_MAX_LENGTH,
+  normalizeCommentQuote,
   normalizeCommentQuoteForComparison,
 } from '../../../domain/comment-threads.js';
+import { clamp } from '../../domain/vault-utils.js';
 import { renderCommentMarkdownToHtml } from '../comment-markdown-renderer.js';
 
-export { COMMENT_BODY_MAX_LENGTH };
+export { COMMENT_BODY_MAX_LENGTH, clamp };
 
 export const COMMENT_CARD_OFFSET = 14;
 export const COMMENT_CARD_WIDTH = 520;
 export const COMMENT_SELECTION_REVEAL_DELAY_MS = 150;
 export const COMMENT_SELECTION_CHIP_GAP = 12;
 export const COMMENT_CONTROL_SLOT_HEIGHT = 36;
-export const COMMENT_PREVIEW_BADGE_MIN_WIDTH = 28;
-export const COMMENT_PREVIEW_RAIL_SLOT_HEIGHT = 30;
-export const COMMENT_PREVIEW_RAIL_MIN_WIDTH = 400;
-export const COMMENT_PREVIEW_RAIL_BREAKPOINT = 769;
 export const COMMENT_REACTION_PRESET_EMOJIS = Object.freeze(['👍', '❤️', '🎉', '👀', '🚀']);
 export const COMMENT_REACTION_MORE_EMOJIS = Object.freeze(['😂', '🔥', '✅', '🙏', '💡', '🤔', '👏', '😄', '🎯', '🙌']);
 
-export function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), max);
-}
-
 export function sortThreads(threads = []) {
   return [...threads].sort((left, right) => (
     (left.anchor?.startLine ?? 0) - (right.anchor?.startLine ?? 0)
@@ -57,19 +51,15 @@ export function areAnchorsEqual(left, right) {
 }
 
 export function formatAnchorLabel(anchor) {
-  if (!anchor) {
+  const startLine = Number(anchor?.startLine || 0);
+  const endLine = Number(anchor?.endLine || startLine);
+  if (!Number.isFinite(startLine) || startLine <= 0) {
     return 'No source anchor';
   }
 
-  if ((anchor.kind || anchor.anchorKind) === 'text' && anchor.quote) {
-    return anchor.startLine === anchor.endLine
-      ? `Line ${anchor.startLine}`
-      : `Lines ${anchor.startLine}-${anchor.endLine}`;
-  }
-
-  return anchor.startLine === anchor.endLine
-    ? `Line ${anchor.startLine}`
-    : `Lines ${anchor.startLine}-${anchor.endLine}`;
+  return startLine === endLine
+    ? `Line ${startLine}`
+    : `Lines ${startLine}-${endLine}`;
 }
 
 export function getAnchorGroupKey(anchor = {}) {
@@ -122,6 +112,65 @@ export function createRenderedCommentBody(body, className = 'comment-markdown')
   return container;
 }
 
+export function createCommentOverviewThread({
+  authorName = 'Anonymous',
+  buttonClassName = 'comment-overview-thread',
+  footerClassName = 'comment-overview-thread-footer',
+  headerClassName = 'comment-overview-thread-header',
+  lineClassName = 'comment-overview-thread-line',
+  lineLabel = '',
+  messageCount = 0,
+  previewBody = '',
+  previewClassName = 'comment-markdown comment-overview-thread-preview',
+  quote = 'Source anchored comment',
+  quoteClassName = 'comment-overview-thread-quote',
+  timestamp = '',
+} = {}) {
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.className = buttonClassName;
+
+  const header = document.createElement('div');
+  header.className = headerClassName;
+
+  const line = document.createElement('span');
+  line.className = lineClassName;
+  line.textContent = lineLabel;
+
+  const meta = document.createElement('span');
+  meta.className = 'comment-overview-thread-meta';
+  meta.textContent = timestamp;
+  header.append(line, meta);
+
+  const body = document.createElement('div');
+  body.className = 'comment-overview-thread-body';
+  const preview = createRenderedCommentBody(previewBody, previewClassName);
+
+  const quoteSection = document.createElement('div');
+  quoteSection.className = 'comment-overview-thread-section comment-overview-thread-reference';
+  const quoteLabel = document.createElement('span');
+  quoteLabel.className = 'comment-overview-thread-section-label';
+  quoteLabel.textContent = 'Reference';
+  const quoteNode = document.createElement('span');
+  quoteNode.className = quoteClassName;
+  quoteNode.textContent = quote;
+  quoteSection.append(quoteLabel, quoteNode);
+  body.append(preview, quoteSection);
+
+  const footer = document.createElement('div');
+  footer.className = footerClassName;
+  const author = document.createElement('span');
+  author.className = 'comment-overview-thread-author';
+  author.textContent = authorName;
+  const messages = document.createElement('span');
+  messages.className = 'comment-overview-thread-message-count';
+  messages.textContent = `${messageCount} message${messageCount === 1 ? '' : 's'}`;
+  footer.append(author, messages);
+
+  button.append(header, body, footer);
+  return button;
+}
+
 export function hasLocalReaction(reaction, localUserId) {
   return Boolean(localUserId && reaction?.users?.some((user) => user?.userId === localUserId));
 }
@@ -155,6 +204,89 @@ export function overlapsAnchorRange(element, anchor) {
   return anchor.startLine <= endLine && anchor.endLine >= startLine;
 }
 
+export function createPreviewSelection(selection, previewElement, sourceText = '') {
+  if (
+    !selection
+    || selection.isCollapsed
+    || selection.rangeCount === 0
+    || !previewElement?.contains(selection.anchorNode)
+    || !previewElement.contains(selection.focusNode)
+  ) {
+    return null;
+  }
+
+  const range = selection.getRangeAt(0);
+  const selectedText = String(selection.toString()).trim();
+  const quote = normalizeCommentQuote(selectedText);
+  const endpointElement = range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE
+    ? range.commonAncestorContainer
+    : range.commonAncestorContainer.parentElement;
+  if (!quote || endpointElement?.closest?.('.diagram-preview-shell')) {
+    return null;
+  }
+
+  const blocks = Array.from(previewElement.querySelectorAll('[data-source-line]'))
+    .filter((element) => isLeafSourceBlock(element) && range.intersectsNode(element));
+  if (blocks.length === 0) {
+    return null;
+  }
+
+  const sourceLines = String(sourceText).split('\n');
+  const startLine = Math.min(Math.max(Math.min(
+    ...blocks.map((element) => parseLineNumber(element.getAttribute('data-source-line')) ?? sourceLines.length),
+  ), 1), sourceLines.length);
+  const endLine = Math.min(Math.max(
+    ...blocks.map((element) => (
+      parseLineNumber(element.getAttribute('data-source-line-end'))
+      ?? parseLineNumber(element.getAttribute('data-source-line'))
+      ?? 1
+    )),
+  ), sourceLines.length);
+  const lineStartIndex = sourceLines
+    .slice(0, startLine - 1)
+    .reduce((index, line) => index + line.length + 1, 0);
+  const lineEndIndex = sourceLines
+    .slice(startLine - 1, endLine)
+    .reduce((index, line, lineIndex) => index + line.length + (lineIndex === 0 ? 0 : 1), lineStartIndex);
+
+  let anchorKind = 'line';
+  let startIndex = lineStartIndex;
+  let endIndex = lineEndIndex;
+  let fallbackToLines = true;
+  if (blocks.length === 1) {
+    const sourceRange = String(sourceText).slice(lineStartIndex, lineEndIndex);
+    const matchIndex = sourceRange.indexOf(selectedText);
+    if (matchIndex >= 0 && matchIndex === sourceRange.lastIndexOf(selectedText)) {
+      anchorKind = 'text';
+      startIndex = lineStartIndex + matchIndex;
+      endIndex = startIndex + selectedText.length;
+      fallbackToLines = false;
+    }
+  }
+
+  const lineNumberAt = (index) => String(sourceText).slice(0, index).split('\n').length;
+  const anchorStartLine = fallbackToLines ? startLine : lineNumberAt(startIndex);
+  const anchorEndLine = fallbackToLines ? endLine : lineNumberAt(Math.max(endIndex - 1, startIndex));
+  const rect = createRectFromRects(Array.from(range.getClientRects()))
+    || createRectFromRects(blocks.map((element) => element.getBoundingClientRect()));
+
+  return {
+    anchor: {
+      anchorKind,
+      anchorQuote: quote,
+      endIndex,
+      endLine: anchorEndLine,
+      fallbackToLines,
+      kind: anchorKind,
+      quote,
+      startIndex,
+      startLine: anchorStartLine,
+    },
+    range: range.cloneRange(),
+    rect,
+  };
+}
+
 export function createNormalizedTextIndex(root) {
   const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
   let normalized = '';

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

@@ -56,6 +56,7 @@ function attachSession(session) {
   this.selectionAnchor = session?.getCurrentSelectionCommentAnchor?.() ?? null;
   this.pendingSelectionAnchor = null;
   this.committedSelectionAnchor = null;
+  this.previewSelection = null;
   this.reactionPicker = null;
   this.clearSelectionRevealTimer();
   this.pointerSelecting = false;
@@ -82,6 +83,7 @@ function setCurrentFile(filePath, { fileKind = 'markdown', supported = false } =
     this.updateHoveredPreviewGroups([]);
     this.previewHoverRegions = [];
     this.lastPreviewPointerPosition = null;
+    this.previewSelection = null;
     this.reactionPicker = null;
   }
   if (!this.supported) {
@@ -97,6 +99,7 @@ function setCurrentFile(filePath, { fileKind = 'markdown', supported = false } =
     this.updateHoveredPreviewGroups([]);
     this.previewHoverRegions = [];
     this.lastPreviewPointerPosition = null;
+    this.previewSelection = null;
     this.reactionPicker = null;
   }
   this.render();

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

@@ -2,7 +2,7 @@ import { commentUiCardMethods } from './comment-ui/comment-ui-card.js';
 import { commentUiLayoutMethods } from './comment-ui/comment-ui-layout.js';
 import { commentUiRenderMethods } from './comment-ui/comment-ui-render.js';
 import { commentUiStateMethods } from './comment-ui/comment-ui-state.js';
-import { isTextSelectionAnchor } from './comment-ui/comment-ui-shared.js';
+import { createPreviewSelection, isTextSelectionAnchor } from './comment-ui/comment-ui-shared.js';
 
 export class CommentUiController {
   constructor({
@@ -54,6 +54,7 @@ export class CommentUiController {
     this.hoveredPreviewGroupKeysSignature = '';
     this.previewHoverRegions = [];
     this.lastPreviewPointerPosition = null;
+    this.previewSelection = null;
     this.editorLayer = null;
     this.previewLayer = null;
     this.previewHighlightLayer = null;
@@ -84,6 +85,19 @@ export class CommentUiController {
     this.handlePreviewFocusOut = (event) => {
       this.updateHoveredPreviewGroups(this.getPreviewGroupKeysForTarget(event.relatedTarget));
     };
+    this.handleDocumentSelectionChange = () => {
+      if (this.activeCard?.mode === 'create' && this.activeCard.origin === 'preview') {
+        return;
+      }
+      const previewSelection = this.supported && this.fileKind === 'markdown'
+        ? createPreviewSelection(window.getSelection(), this.previewElement, this.session?.getText?.() ?? '')
+        : null;
+      if (!previewSelection && !this.previewSelection) {
+        return;
+      }
+      this.previewSelection = previewSelection;
+      this.scheduleLayoutRefresh();
+    };
     this.handleCommentSelectionButtonPointerDown = (event) => {
       event.preventDefault();
     };
@@ -173,6 +187,9 @@ export class CommentUiController {
       if (event.key === 'Escape' && this.activeCard) {
         this.closeCard();
       }
+      if (event.key === 'Escape' && this.previewSelection) {
+        this.clearPreviewSelection();
+      }
       if (event.key === 'Escape' && this.committedSelectionAnchor) {
         this.clearSelectionRevealTimer();
         this.pendingSelectionAnchor = null;
@@ -200,6 +217,7 @@ export class CommentUiController {
     document.addEventListener('pointercancel', this.handleDocumentPointerUp);
     document.addEventListener('pointerdown', this.handleDocumentPointerDown);
     document.addEventListener('keydown', this.handleDocumentKeyDown);
+    document.addEventListener('selectionchange', this.handleDocumentSelectionChange);
   }
 
   destroy() {
@@ -221,7 +239,9 @@ export class CommentUiController {
     document.removeEventListener('pointercancel', this.handleDocumentPointerUp);
     document.removeEventListener('pointerdown', this.handleDocumentPointerDown);
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
+    document.removeEventListener('selectionchange', this.handleDocumentSelectionChange);
     this.previewHoverRegions = [];
+    this.previewSelection = null;
     this.cardRoot?.remove();
     this.editorLayer?.remove();
     this.previewLayer?.remove();

package/src/client/presentation/components/ui/button.js

@@ -51,28 +51,3 @@ export function buttonClassNames(options = {}) {
     extra,
   );
 }
-
-/**
- * @param {{ toolbar?: boolean, action?: boolean, surface?: boolean, hidden?: boolean, extra?: string|string[] }} [options]
- * @returns {string}
- */
-export function iconButtonClassNames(options = {}) {
-  const {
-    toolbar = false,
-    action = false,
-    surface = false,
-    hidden = false,
-    extra = [],
-  } = options;
-
-  return classNames(
-    'ui-icon-button',
-    {
-      'ui-icon-button--toolbar': toolbar,
-      'ui-icon-button--action': action,
-      'ui-icon-button--surface': surface,
-      hidden,
-    },
-    extra,
-  );
-}

package/src/client/presentation/components/ui/class-names.js

@@ -1,30 +1,11 @@
 export function classNames(...parts) {
-  const tokens = [];
-
-  for (const part of parts) {
-    if (!part) {
-      continue;
-    }
-
-    if (Array.isArray(part)) {
-      const nested = classNames(...part);
-      if (nested) {
-        tokens.push(nested);
-      }
-      continue;
-    }
-
-    if (typeof part === 'object') {
-      Object.entries(part).forEach(([className, enabled]) => {
-        if (enabled) {
-          tokens.push(className);
-        }
-      });
-      continue;
-    }
-
-    tokens.push(String(part));
-  }
+  return parts.flat().flatMap((part) => (
+    part && typeof part === 'object'
+      ? Object.keys(part).filter((className) => part[className])
+      : part || []
+  )).join(' ');
+}
 
-  return tokens.join(' ');
+export function inputClassNames(options = {}) {
+  return classNames('ui-input', options.extra ?? []);
 }

package/src/client/presentation/drawio-embed-controller.js

@@ -1,44 +1,17 @@
 import { createDrawioLeaseRoomName } from '../../domain/drawio-room.js';
 import { setDiagramActionButtonIcon } from '../domain/diagram-action-icons.js';
 import { resolveAppUrl } from '../domain/runtime-paths.js';
-import { vaultApiClient } from '../domain/vault-api-client.js';
+import {
+  cancelIdleRender,
+  isNearViewport,
+  requestIdleRender,
+} from '../browser-utils.js';
 
 const HYDRATE_VIEWPORT_MARGIN_PX = 360;
 const DRAWIO_VIEWER_SCRIPT_URL = 'https://viewer.diagrams.net/js/viewer-static.min.js';
 
 let drawioViewerLoadPromise = null;
 
-function requestIdleRender(callback, timeout) {
-  if (typeof window.requestIdleCallback === 'function') {
-    return window.requestIdleCallback(callback, { timeout });
-  }
-
-  return window.setTimeout(() => callback({ didTimeout: false, timeRemaining: () => 0 }), 1);
-}
-
-function cancelIdleRender(id) {
-  if (id === null) {
-    return;
-  }
-
-  if (typeof window.cancelIdleCallback === 'function') {
-    window.cancelIdleCallback(id);
-    return;
-  }
-
-  window.clearTimeout(id);
-}
-
-function isNearViewport(element, root, marginPx) {
-  if (!element || !root) {
-    return false;
-  }
-
-  const rootRect = root.getBoundingClientRect();
-  const elementRect = element.getBoundingClientRect();
-  return elementRect.bottom >= (rootRect.top - marginPx) && elementRect.top <= (rootRect.bottom + marginPx);
-}
-
 function ensureDrawioViewerLoaded() {
   if (window.GraphViewer?.processElements) {
     return Promise.resolve(window.GraphViewer);
@@ -102,6 +75,7 @@ export class DrawioEmbedController {
     previewContainer,
     previewElement,
     toastController,
+    vaultApiClient,
   }) {
     this.getLocalUser = getLocalUser;
     this.getTheme = getTheme;
@@ -111,6 +85,7 @@ export class DrawioEmbedController {
     this.previewContainer = previewContainer;
     this.previewElement = previewElement;
     this.toastController = toastController;
+    this.vaultApiClient = vaultApiClient;
     this.embedEntries = new Map();
     this.hydrationQueue = [];
     this.hydrationIdleId = null;
@@ -376,7 +351,7 @@ export class DrawioEmbedController {
 
   async renderViewerEntry(entry) {
     const [{ content }, viewer] = await Promise.all([
-      vaultApiClient.readFile(entry.filePath),
+      this.vaultApiClient.readFile(entry.filePath),
       ensureDrawioViewerLoaded(),
     ]);
 

package/src/client/presentation/excalidraw-embed-controller.js

@@ -1,6 +1,11 @@
 import { setDiagramActionButtonIcon } from '../domain/diagram-action-icons.js';
 import { reconcileEmbedEntries } from './excalidraw-embed-reconciler.js';
 import { resolveAppUrl } from '../domain/runtime-paths.js';
+import {
+  cancelIdleRender,
+  isNearViewport,
+  requestIdleRender,
+} from '../browser-utils.js';
 
 const DEFAULT_HEIGHT = 420;
 const HYDRATE_TIMEOUT_MS = 500;
@@ -10,46 +15,6 @@ const MAX_IFRAME_BOOT_ATTEMPTS = 3;
 const MIN_HEIGHT = 200;
 const EDITOR_IFRAME_PATH = '/excalidraw-editor.html';
 
-function requestIdleRender(callback, timeout) {
-  if (typeof window.requestIdleCallback === 'function') {
-    return window.requestIdleCallback(callback, { timeout });
-  }
-
-  return window.setTimeout(() => {
-    callback({
-      didTimeout: false,
-      timeRemaining: () => 0,
-    });
-  }, 1);
-}
-
-function cancelIdleRender(id) {
-  if (id === null) {
-    return;
-  }
-
-  if (typeof window.cancelIdleCallback === 'function') {
-    window.cancelIdleCallback(id);
-    return;
-  }
-
-  window.clearTimeout(id);
-}
-
-function isNearViewport(element, root, marginPx) {
-  if (!element || !root) {
-    return false;
-  }
-
-  const rootRect = root.getBoundingClientRect();
-  const elementRect = element.getBoundingClientRect();
-
-  return (
-    elementRect.bottom >= (rootRect.top - marginPx)
-    && elementRect.top <= (rootRect.bottom + marginPx)
-  );
-}
-
 export class ExcalidrawEmbedController {
   constructor({
     getTheme,
@@ -254,10 +219,10 @@ export class ExcalidrawEmbedController {
     });
   }
 
-  prepareFileDisconnect(filePath, { timeoutMs = 250 } = {}) {
+  prepareFileDisconnect(filePath, { timeoutMs = 10000 } = {}) {
     const entry = this._findEntryByFilePath(filePath);
     if (!entry?.iframe?.contentWindow) {
-      return Promise.resolve(false);
+      return Promise.resolve(true);
     }
 
     const requestId = `disconnect-${++this.disconnectRequestCounter}`;
@@ -274,7 +239,29 @@ export class ExcalidrawEmbedController {
       };
 
       const timeoutId = window.setTimeout(() => {
-        finish(false);
+        const shouldDiscard = window.confirm(
+          'This diagram has not reconnected, so its latest queued changes may not be saved. Discard pending changes and leave?',
+        );
+        if (!shouldDiscard) {
+          this._postMessageToEntry(entry, {
+            source: 'collabmd-host',
+            type: 'cancel-disconnect',
+            requestId,
+          });
+          this.toastController?.show?.('Stayed on the diagram while it reconnects');
+          finish(false);
+          return;
+        }
+
+        this._postMessageToEntry(entry, {
+          source: 'collabmd-host',
+          type: 'discard-and-disconnect',
+          requestId,
+        });
+        const request = this.pendingDisconnectRequests.get(requestId);
+        if (request) {
+          request.timeoutId = window.setTimeout(() => finish(true), 1000);
+        }
       }, timeoutMs);
 
       this.pendingDisconnectRequests.set(requestId, {
@@ -657,6 +644,9 @@ export class ExcalidrawEmbedController {
     if (hostSearchParams.has('syncTimeoutMs')) {
       iframeUrl.searchParams.set('syncTimeoutMs', hostSearchParams.get('syncTimeoutMs'));
     }
+    if (hostSearchParams.get('excalidrawDebug') === '1') {
+      iframeUrl.searchParams.set('excalidrawDebug', '1');
+    }
 
     return iframeUrl;
   }
@@ -1199,6 +1189,23 @@ export class ExcalidrawEmbedController {
       if (request?.entry === entry) {
         request.resolve(true);
       }
+      return;
+    }
+
+    if (msg.type === 'disconnect-blocked') {
+      entry.authorityState = msg.state || 'reconnecting-readonly';
+      this.toastController?.show?.('Waiting for the diagram to reconnect before leaving');
+      return;
+    }
+
+    if (msg.type === 'excalidraw-authority-state') {
+      entry.authorityState = msg.state || 'closed';
+      entry.hasPendingWrites = Boolean(msg.hasPendingWrites);
+      return;
+    }
+
+    if (msg.type === 'park-blocked') {
+      entry.authorityState = msg.state || 'reconnecting-readonly';
     }
   }