collabmd 0.1.49 → 0.1.52

package/src/client/presentation/scroll-sync-controller.js

@@ -5,6 +5,9 @@ const VIEWPORT_FOCUS_RATIO = 0.35;
 const LARGE_DOCUMENT_EDITOR_IDLE_MS = 120;
 const MIN_VIEWPORT_FOCUS_OFFSET = 12;
 const TOP_SCROLL_EPSILON = 2;
+// SVG renderers may expose source lines relative to the diagram, not the document.
+const SOURCE_BLOCK_SELECTOR = '[data-source-line]:not(svg, svg *)';
+const SCROLL_INPUT_EVENTS = ['wheel', 'touchstart', 'pointerdown', 'keydown'];
 
 function getScrollableRange(element) {
   return Math.max(element.scrollHeight - element.clientHeight, 0);
@@ -29,7 +32,7 @@ function getElementScrollTop(container, element) {
 }
 
 function isLeafSourceBlock(element) {
-  return !element.querySelector('[data-source-line]');
+  return !element.querySelector(SOURCE_BLOCK_SELECTOR);
 }
 
 export class ScrollSyncController {
@@ -48,7 +51,7 @@ export class ScrollSyncController {
     this.editorScroller = null;
     this.editorScrollActive = false;
     this.editorScrollIdleTimer = null;
-    this.lockedElements = new Set();
+    this.scrollUnlockFrames = new Map();
     this.pendingSync = null;
     this.frameId = null;
     this.previewBlocks = null;
@@ -56,10 +59,33 @@ export class ScrollSyncController {
     this.previewBlocksReadyCallbacks = [];
     this.largeDocumentMode = false;
     this.lastInteractionSource = 'editor';
+    this.scrollInputSource = null;
     this.suspendedUntil = 0;
+    this.listenerController = null;
+    this.editorListenerController = null;
+
+    this.handleScrollInput = (event) => {
+      const source = event.currentTarget;
+      // Layout and hydration can emit scroll events long after a frame lock expires.
+      // Only input in the other pane transfers control of scroll synchronization.
+      this.scrollInputSource = source;
+      this.lastInteractionSource = source === this.editorScroller ? 'editor' : 'preview';
+      // A collaborator's input takes priority over pending programmatic scrolling.
+      this.pendingSync = null;
+      cancelAnimationFrame(this.scrollUnlockFrames.get(source));
+      this.scrollUnlockFrames.delete(source);
+      const target = source === this.editorScroller ? this.previewContainer : this.editorScroller;
+      if (target) this.lockScrollTarget(target);
+      if (source === this.previewContainer) {
+        clearTimeout(this.editorScrollIdleTimer);
+        this.editorScrollIdleTimer = null;
+        this.setEditorScrollActive(false);
+      }
+    };
 
     this.handleEditorScroll = () => {
-      if (!this.editorScroller || this.lockedElements.has(this.editorScroller) || this.isSuspended()) {
+      if (!this.editorScroller || (this.scrollInputSource && this.scrollInputSource !== this.editorScroller)
+        || this.scrollUnlockFrames.has(this.editorScroller) || this.isSuspended()) {
         return;
       }
 
@@ -77,7 +103,8 @@ export class ScrollSyncController {
     };
 
     this.handlePreviewScroll = () => {
-      if (!this.previewContainer || this.lockedElements.has(this.previewContainer) || this.isSuspended()) {
+      if (!this.previewContainer || (this.scrollInputSource && this.scrollInputSource !== this.previewContainer)
+        || this.scrollUnlockFrames.has(this.previewContainer) || this.isSuspended()) {
         return;
       }
 
@@ -87,7 +114,11 @@ export class ScrollSyncController {
   }
 
   initialize() {
-    this.previewContainer?.addEventListener('scroll', this.handlePreviewScroll, { passive: true });
+    this.listenerController?.abort();
+    this.listenerController = new AbortController();
+    const { signal } = this.listenerController;
+    this.previewContainer?.addEventListener('scroll', this.handlePreviewScroll, { passive: true, signal });
+    SCROLL_INPUT_EVENTS.forEach((type) => this.previewContainer?.addEventListener(type, this.handleScrollInput, { passive: true, signal }));
   }
 
   attachEditorScroller(editorScroller) {
@@ -95,9 +126,18 @@ export class ScrollSyncController {
       return;
     }
 
-    this.editorScroller?.removeEventListener('scroll', this.handleEditorScroll);
+    this.editorListenerController?.abort();
     this.editorScroller = editorScroller;
-    this.editorScroller?.addEventListener('scroll', this.handleEditorScroll, { passive: true });
+    this.scrollInputSource = null;
+    if (!this.editorScroller) {
+      this.editorListenerController = null;
+      return;
+    }
+
+    this.editorListenerController = new AbortController();
+    const { signal } = this.editorListenerController;
+    this.editorScroller.addEventListener('scroll', this.handleEditorScroll, { passive: true, signal });
+    SCROLL_INPUT_EVENTS.forEach((type) => this.editorScroller.addEventListener(type, this.handleScrollInput, { passive: true, signal }));
   }
 
   syncPreviewToEditor() {
@@ -111,9 +151,12 @@ export class ScrollSyncController {
   }
 
   destroy() {
-    this.previewContainer?.removeEventListener('scroll', this.handlePreviewScroll);
-    this.editorScroller?.removeEventListener('scroll', this.handleEditorScroll);
+    this.listenerController?.abort();
+    this.listenerController = null;
+    this.editorListenerController?.abort();
+    this.editorListenerController = null;
     this.editorScroller = null;
+    this.scrollInputSource = null;
     clearTimeout(this.editorScrollIdleTimer);
     this.editorScrollIdleTimer = null;
     this.pendingSync = null;
@@ -121,7 +164,8 @@ export class ScrollSyncController {
     cancelIdleRender(this.previewBlocksWarmId);
     this.previewBlocksWarmId = null;
     this.previewBlocksReadyCallbacks = [];
-    this.lockedElements.clear();
+    this.scrollUnlockFrames.forEach((frame) => cancelAnimationFrame(frame));
+    this.scrollUnlockFrames.clear();
     this.editorScrollActive = false;
     this.lastInteractionSource = 'editor';
     this.suspendedUntil = 0;
@@ -133,7 +177,7 @@ export class ScrollSyncController {
   }
 
   scheduleSync(source, target, { preferApproximateMapping = false } = {}) {
-    if (!source || !target || this.lockedElements.has(source) || this.isSuspended()) {
+    if (!source || !target || this.scrollUnlockFrames.has(source) || this.isSuspended()) {
       return;
     }
 
@@ -268,7 +312,7 @@ export class ScrollSyncController {
   }
 
   sync(source, target, { preferApproximateMapping = false } = {}) {
-    if (!source || !target || this.lockedElements.has(source) || this.isSuspended()) {
+    if (!source || !target || this.scrollUnlockFrames.has(source) || this.isSuspended()) {
       return;
     }
 
@@ -283,11 +327,8 @@ export class ScrollSyncController {
     if (source === this.previewContainer && target === this.editorScroller) {
       const targetLine = this.getEditorLineNumberForPreviewScroll();
       if (targetLine !== null) {
-        this.lockedElements.add(target);
+        this.lockScrollTarget(target);
         this.scrollEditorToLine?.(targetLine, VIEWPORT_FOCUS_RATIO);
-        requestAnimationFrame(() => {
-          this.lockedElements.delete(target);
-        });
         return;
       }
     }
@@ -301,12 +342,19 @@ export class ScrollSyncController {
   }
 
   setScrollTop(target, nextScrollTop) {
-    this.lockedElements.add(target);
+    this.lockScrollTarget(target);
     target.scrollTop = clampScrollTop(nextScrollTop);
+  }
 
-    requestAnimationFrame(() => {
-      this.lockedElements.delete(target);
-    });
+  lockScrollTarget(target) {
+    cancelAnimationFrame(this.scrollUnlockFrames.get(target));
+    // CodeMirror can adjust scroll position during its next layout measurement.
+    // Keep that adjustment from feeding back into the pane being scrolled.
+    this.scrollUnlockFrames.set(target, requestAnimationFrame(() => {
+      this.scrollUnlockFrames.set(target, requestAnimationFrame(() => {
+        this.scrollUnlockFrames.delete(target);
+      }));
+    }));
   }
 
   getPreviewScrollTopForEditorLine() {
@@ -371,7 +419,7 @@ export class ScrollSyncController {
   }
 
   buildPreviewBlocks() {
-    const allBlocks = Array.from(this.previewElement.querySelectorAll('[data-source-line]'))
+    const allBlocks = Array.from(this.previewElement.querySelectorAll(SOURCE_BLOCK_SELECTOR))
       .map((element) => {
         const start = Number.parseInt(element.getAttribute('data-source-line') || '', 10);
         const end = Number.parseInt(element.getAttribute('data-source-line-end') || '', 10);

package/src/client/presentation/team-settings-controller.js

@@ -0,0 +1,228 @@
+import { createFragment, escapeHtml } from '../domain/vault-utils.js';
+
+function formatDate(value) {
+  return value ? new Date(value).toLocaleString() : '—';
+}
+
+function roleOptions(currentRole) {
+  return ['collaborator', 'admin'].map((role) => (
+    `<option value="${role}"${role === currentRole ? ' selected' : ''}>${role === 'admin' ? 'Admin' : 'Collaborator'}</option>`
+  )).join('');
+}
+
+export class TeamSettingsController {
+  constructor({ apiClient, closeToolbarMenu, content, dialog, toastController, trigger }) {
+    this.apiClient = apiClient;
+    this.closeToolbarMenu = closeToolbarMenu;
+    this.content = content;
+    this.dialog = dialog;
+    this.toastController = toastController;
+    this.trigger = trigger;
+    this.trigger?.classList.add('hidden');
+    this.trigger?.addEventListener('click', () => void this.open());
+    this.dialog?.addEventListener('close', () => {
+      this.content?.replaceChildren();
+      this.trigger?.focus?.();
+    });
+    this.dialog?.addEventListener('click', (event) => void this.handleClick(event));
+    this.dialog?.addEventListener('submit', (event) => void this.handleSubmit(event));
+    this.dialog?.addEventListener('change', (event) => void this.handleChange(event));
+  }
+
+  setTriggerVisible(visible) {
+    this.trigger?.classList.toggle('hidden', !visible);
+  }
+
+  async open() {
+    this.closeToolbarMenu?.();
+    this.dialog?.showModal?.();
+    this.renderStatus('Loading team settings…');
+    await this.refresh();
+  }
+
+  async loadOverview() {
+    const [membershipsResult, invitationsResult, auditResult] = await Promise.all([
+      this.apiClient.listMemberships(),
+      this.apiClient.listInvitations(),
+      this.apiClient.listAuditEvents(),
+    ]);
+    this.renderOverview({
+      auditEvents: auditResult.events ?? [],
+      invitations: invitationsResult.invitations ?? [],
+      memberships: membershipsResult.memberships ?? [],
+    });
+  }
+
+  renderStatus(message, { error = false } = {}) {
+    if (!this.content) return;
+    this.content.replaceChildren(createFragment(`<p class="team-settings-status${error ? ' is-error' : ''}" role="status">${escapeHtml(message)}</p>`));
+  }
+
+  renderOverview({ auditEvents = [], invitations = [], memberships = [] }) {
+    if (!this.content) return;
+    const memberMarkup = memberships.length > 0
+      ? memberships.map((membership) => `
+        <li class="team-settings-row">
+          <div class="team-settings-row-main">
+            <strong>${escapeHtml(membership.name || membership.email)}</strong>
+            <span>${escapeHtml(membership.email)}</span>
+            <small>Joined ${formatDate(membership.joinedAt)}</small>
+          </div>
+          <label class="team-settings-row-role">Role
+            <select class="ui-input ui-input--compact" data-membership-role="${escapeHtml(membership.id)}">
+              ${roleOptions(membership.role)}
+            </select>
+          </label>
+          <button class="ui-button ui-button--secondary ui-button--compact" type="button" data-membership-remove="${escapeHtml(membership.id)}" data-membership-email="${escapeHtml(membership.email)}">Remove</button>
+        </li>`).join('')
+      : '<p class="team-settings-empty">No collaborators yet.</p>';
+    const invitationMarkup = invitations.length > 0
+      ? invitations.map((invitation) => `
+        <li class="team-settings-row">
+          <div class="team-settings-row-main">
+            <strong>${escapeHtml(invitation.email)}</strong>
+            <span>Invited by ${escapeHtml(invitation.invitedByName || invitation.invitedByEmail)}</span>
+            <small>Expires ${formatDate(invitation.expiresAt)}</small>
+          </div>
+          <label class="team-settings-row-role">Role
+            <select class="ui-input ui-input--compact" data-invitation-role="${escapeHtml(invitation.id)}">
+              ${roleOptions(invitation.role)}
+            </select>
+          </label>
+          <button class="ui-button ui-button--secondary ui-button--compact" type="button" data-invitation-revoke="${escapeHtml(invitation.id)}" data-invitation-email="${escapeHtml(invitation.email)}">Revoke</button>
+        </li>`).join('')
+      : '<p class="team-settings-empty">No pending invitations.</p>';
+    const auditMarkup = auditEvents.length > 0
+      ? auditEvents.map((event) => `
+        <li class="team-settings-row team-settings-row--audit">
+          <div class="team-settings-row-main">
+            <strong>${escapeHtml(event.type)}</strong>
+            <span>${escapeHtml(event.targetEmail || '')}${event.targetRole ? ` · ${escapeHtml(event.targetRole)}` : ''}</span>
+            <small>By ${escapeHtml(event.actorName || event.actorEmail)} · ${formatDate(event.createdAt)}</small>
+          </div>
+        </li>`).join('')
+      : '<p class="team-settings-empty">No access history yet.</p>';
+    this.content.replaceChildren(createFragment(`
+      <section class="team-settings-section">
+        <h3>Collaborators</h3>
+        <ul class="team-settings-list">${memberMarkup}</ul>
+      </section>
+      <section class="team-settings-section">
+        <h3>Pending invitations</h3>
+        <ul class="team-settings-list">${invitationMarkup}</ul>
+        <form class="team-settings-invite-form" data-invite-form>
+          <label class="app-dialog-field">
+            <span class="app-dialog-label">Email</span>
+            <input class="ui-input" name="email" type="email" maxlength="254" autocomplete="off" spellcheck="false" required placeholder="teammate@example.com">
+          </label>
+          <label class="app-dialog-field">
+            <span class="app-dialog-label">Role</span>
+            <select class="ui-input" name="role">
+              <option value="collaborator">Collaborator</option>
+              <option value="admin">Admin</option>
+            </select>
+          </label>
+          <button class="ui-button ui-button--primary" type="submit">Invite</button>
+        </form>
+        <p class="team-settings-note">Share this workspace URL with the invited person. They sign in with the matching Google email, then accept the invitation. Email delivery is not set up yet.</p>
+      </section>
+      <section class="team-settings-section">
+        <h3>Access history</h3>
+        <ul class="team-settings-list team-settings-list--audit">${auditMarkup}</ul>
+      </section>
+      <div class="team-settings-actions">
+        <button class="ui-button ui-button--ghost" type="button" data-team-close>Close</button>
+      </div>
+      <p class="team-settings-live" role="status" aria-live="polite"></p>
+    `));
+  }
+
+  setLiveMessage(message) {
+    const live = this.content?.querySelector('.team-settings-live');
+    if (live) live.textContent = message;
+  }
+
+  async refresh() {
+    try {
+      await this.loadOverview();
+    } catch (error) {
+      this.renderStatus(error.message || 'Failed to load team settings', { error: true });
+    }
+  }
+
+  async handleClick(event) {
+    const target = event.target.closest('button');
+    if (!target) return;
+    if (target.dataset.teamClose != null) {
+      this.dialog.close();
+      return;
+    }
+    if (target.dataset.membershipRemove) {
+      if (!window.confirm(`Remove ${target.dataset.membershipEmail} from the team? They lose workspace access immediately.`)) return;
+      try {
+        await this.apiClient.removeMembership(target.dataset.membershipRemove);
+        await this.refresh();
+        this.setLiveMessage('Collaborator removed');
+      } catch (error) {
+        this.toastController?.show(error.message || 'Failed to remove collaborator');
+      }
+      return;
+    }
+    if (target.dataset.invitationRevoke) {
+      if (!window.confirm(`Revoke the invitation for ${target.dataset.invitationEmail}?`)) return;
+      try {
+        await this.apiClient.revokeInvitation(target.dataset.invitationRevoke);
+        await this.refresh();
+        this.setLiveMessage('Invitation revoked');
+      } catch (error) {
+        this.toastController?.show(error.message || 'Failed to revoke invitation');
+      }
+    }
+  }
+
+  async handleChange(event) {
+    const membershipSelect = event.target.closest('[data-membership-role]');
+    if (membershipSelect) {
+      try {
+        await this.apiClient.updateMembershipRole(membershipSelect.dataset.membershipRole, membershipSelect.value);
+        await this.refresh();
+        this.setLiveMessage('Role updated');
+      } catch (error) {
+        this.toastController?.show(error.message || 'Failed to update role');
+        await this.refresh();
+      }
+      return;
+    }
+    const invitationSelect = event.target.closest('[data-invitation-role]');
+    if (invitationSelect) {
+      try {
+        await this.apiClient.updateInvitationRole(invitationSelect.dataset.invitationRole, invitationSelect.value);
+        await this.refresh();
+        this.setLiveMessage('Invitation role updated');
+      } catch (error) {
+        this.toastController?.show(error.message || 'Failed to update invitation');
+        await this.refresh();
+      }
+    }
+  }
+
+  async handleSubmit(event) {
+    const form = event.target.closest('[data-invite-form]');
+    if (!form) return;
+    event.preventDefault();
+    const data = new FormData(form);
+    const submit = form.querySelector('[type="submit"]');
+    submit.disabled = true;
+    try {
+      await this.apiClient.createInvitation({
+        email: String(data.get('email') ?? '').trim(),
+        role: data.get('role'),
+      });
+      await this.refresh();
+      this.setLiveMessage('Invitation created — share the workspace URL with the invited person.');
+    } catch (error) {
+      this.setLiveMessage(error.message || 'Failed to create invitation');
+      submit.disabled = false;
+    }
+  }
+}

package/src/client/styles/components/navigation.css

@@ -32,11 +32,11 @@
   flex-shrink: 0;
 }
 
-.toolbar-vim-button .toolbar-vim-state {
+.ui-button--toggle .toolbar-toggle-state {
   margin-left: auto;
 }
 
-.toolbar-vim-button[aria-pressed='true'] .toolbar-vim-state {
+.ui-button--toggle[aria-pressed='true'] .toolbar-toggle-state {
   background: var(--color-primary-highlight);
   color: var(--color-primary);
 }

package/src/client/styles/deferred-collab.css

@@ -0,0 +1,6 @@
+@import 'katex/dist/katex.min.css';
+@import './features/comments-drawer.css';
+@import './features/comment-overview.css';
+@import './features/comment-overlays.css';
+@import './features/comment-card.css';
+@import './features/comment-markdown.css';

package/src/client/styles/deferred-git.css

@@ -0,0 +1,7 @@
+@import './features/git-branch.css';
+@import './features/git-files.css';
+@import './features/git-history.css';
+@import './features/diff-toolbar.css';
+@import './features/diff-commit.css';
+@import './features/diff-lines.css';
+@import './features/diff-special.css';

package/src/client/styles/deferred-preview.css

@@ -0,0 +1,7 @@
+@import 'katex/dist/katex.min.css';
+@import './features/media-lightbox.css';
+@import './features/embedded-preview.css';
+@import './features/diagram-preview.css';
+@import './features/preview-markdown.css';
+@import './features/backlinks.css';
+@import './overrides/highlightjs.css';

package/src/client/styles/features/diagram-preview.css

@@ -115,6 +115,7 @@
   max-width: 100%;
   max-height: min(70vh, 720px);
   overflow: auto;
+  scrollbar-gutter: stable;
   padding: var(--space-3);
   touch-action: pan-x pan-y;
   background: transparent;
@@ -520,21 +521,6 @@ body.excalidraw-maximized-open .resizer {
   opacity: 1;
 }
 
-.file-tree-file.is-excalidraw .file-tree-icon {
-  color: var(--color-primary);
-}
-
-.file-tree-file.is-pdf .file-tree-icon {
-  color: var(--color-danger);
-}
-
-.file-tree-file.is-mermaid .file-tree-icon {
-  color: oklch(from var(--color-primary) calc(l * 0.96) calc(c * 0.86) 215);
-}
-
-.file-tree-file.is-structurizr .file-tree-icon {
-  color: var(--color-primary);
-}
 
 .structurizr-preview-shell {
   display: flex;

package/src/client/styles/features/outline.css

@@ -28,8 +28,10 @@
   flex-shrink: 0;
 }
 
-.outline-close-btn {
-  display: none;
+@media (min-width: 769px) {
+  .outline-close-btn {
+    display: none;
+  }
 }
 
 .outline-title {

package/src/client/styles/features/preview-markdown.css

@@ -13,6 +13,25 @@
   line-height: 1.7;
 }
 
+.preview-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, pre, blockquote, table, .table-wrapper, .frontmatter-block) {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 4rem;
+}
+
+.preview-content img {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 240px;
+}
+
+.preview-content > pre,
+.preview-content > table,
+.preview-content > .table-wrapper {
+  contain-intrinsic-size: auto 12rem;
+}
+
+
+
+
 .preview-content[data-render-phase='shell'] {
   color: var(--color-text-muted);
 }
@@ -1047,6 +1066,10 @@
   position: relative;
 }
 
+.preview-content .task-list-label {
+  cursor: pointer;
+}
+
 .preview-content .task-list-item input[type='checkbox'] {
   position: absolute;
   top: 0.5em;
@@ -1083,17 +1106,17 @@
   position: relative;
   max-width: 100%;
   margin: var(--space-4) 0;
-  overflow-x: auto;
+  overflow: hidden;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   background: var(--color-surface);
-  -webkit-overflow-scrolling: touch;
 }
 
 .preview-content pre code {
   display: block;
-  width: fit-content;
-  min-width: 100%;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
   padding: var(--space-4);
   background: none;
   color: var(--color-text);
@@ -1104,20 +1127,11 @@
   overflow-wrap: normal;
 }
 
-.preview-content .preview-code-block {
-  position: relative;
-}
-
-.preview-content .preview-code-block pre code {
+.preview-content pre:has(> .preview-code-copy-button) > code {
   padding-right: 84px;
 }
 
-.preview-content .preview-code-actions {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  height: 0;
-}
+
 
 .preview-content .preview-code-copy-button {
   position: absolute;