collabmd 0.1.54 → 0.1.56

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

@@ -0,0 +1,116 @@
+import {
+  getActiveVaultId,
+  resolveAppUrl,
+  resolveWsServerOverride,
+} from '../domain/runtime-paths.js';
+
+export class CanvasEmbedController {
+  constructor({ getLocalUser, getTheme, onAwarenessChange, onConnectionChange, onOpenFile, toastController }) {
+    this.getLocalUser = getLocalUser;
+    this.getTheme = getTheme;
+    this.onAwarenessChange = onAwarenessChange;
+    this.onConnectionChange = onConnectionChange;
+    this.onOpenFile = onOpenFile;
+    this.toastController = toastController;
+    this.iframe = null;
+    this.filePath = null;
+    this.ready = false;
+    this.pendingDisconnects = new Map();
+    this.handleMessage = (event) => this.onMessage(event);
+  }
+
+  mount(filePath, renderHost) {
+    if (!renderHost || (this.filePath === filePath && this.iframe?.isConnected)) return;
+    this.unmount();
+    const url = new URL(resolveAppUrl('/canvas-editor.html'));
+    url.searchParams.set('file', filePath);
+    url.searchParams.set('theme', this.getTheme?.() ?? 'dark');
+    const vaultId = getActiveVaultId();
+    if (vaultId) url.searchParams.set('vaultId', vaultId);
+    const server = resolveWsServerOverride();
+    if (server) url.searchParams.set('server', server);
+    const user = this.getLocalUser?.();
+    for (const [key, value] of Object.entries({
+      userName: user?.name,
+      userColor: user?.color,
+      userColorLight: user?.colorLight,
+      userPeerId: user?.peerId,
+    })) {
+      if (value) url.searchParams.set(key, value);
+    }
+
+    const iframe = document.createElement('iframe');
+    iframe.className = 'canvas-file-preview-frame';
+    iframe.title = `Canvas: ${filePath}`;
+    iframe.src = url.toString();
+    this.filePath = filePath;
+    this.iframe = iframe;
+    window.addEventListener('message', this.handleMessage);
+    renderHost.replaceChildren(iframe);
+    this.onConnectionChange?.({ status: 'connecting', unreachable: false });
+  }
+
+  unmount() {
+    window.removeEventListener('message', this.handleMessage);
+    this.pendingDisconnects.forEach((finish) => finish(false));
+    this.iframe?.remove();
+    this.iframe = null;
+    this.filePath = null;
+    this.ready = false;
+  }
+
+  postMessage(message) {
+    this.iframe?.contentWindow?.postMessage(message, window.location.origin);
+  }
+
+  updateTheme(theme) {
+    this.postMessage({ type: 'canvas-theme', theme });
+  }
+
+  updateLocalUser(user = this.getLocalUser?.()) {
+    if (user) this.postMessage({ type: 'canvas-user', user });
+  }
+
+  prepareFileDisconnect(filePath, { timeoutMs = 10000 } = {}) {
+    if (filePath !== this.filePath || !this.iframe || !this.ready) return Promise.resolve(true);
+    const requestId = crypto.randomUUID();
+    return new Promise((resolve) => {
+      const timeout = setTimeout(() => finish(false), timeoutMs);
+      const finish = (canLeave) => {
+        clearTimeout(timeout);
+        this.pendingDisconnects.delete(requestId);
+        if (!canLeave) this.toastController?.show('Waiting for the canvas to reconnect before leaving');
+        resolve(canLeave);
+      };
+      this.pendingDisconnects.set(requestId, finish);
+      this.postMessage({ type: 'canvas-prepare-disconnect', filePath, requestId });
+    });
+  }
+
+  onMessage(event) {
+    if (event.origin !== window.location.origin || !this.iframe || event.source !== this.iframe.contentWindow) return;
+    const message = event.data;
+    if (!message || typeof message !== 'object') return;
+    if (message.type === 'canvas-open-file') {
+      if (typeof message.filePath === 'string' && message.filePath) {
+        const anchor = typeof message.subpath === 'string' && message.subpath.startsWith('#')
+          ? message.subpath.slice(1)
+          : null;
+        this.onOpenFile?.(message.filePath, anchor ? { anchor } : {});
+      }
+      return;
+    }
+    if (message.filePath !== this.filePath) return;
+    if (message.type === 'canvas-ready') {
+      this.ready = true;
+      this.updateTheme(this.getTheme?.() ?? 'dark');
+      this.updateLocalUser();
+    } else if (message.type === 'canvas-awareness' && Array.isArray(message.users)) {
+      this.onAwarenessChange?.(message.users);
+    } else if (message.type === 'canvas-connection' && ['connected', 'connecting', 'disconnected'].includes(message.state?.status)) {
+      this.onConnectionChange?.(message.state);
+    } else if (message.type === 'canvas-disconnect-ready' || message.type === 'canvas-disconnect-blocked') {
+      this.pendingDisconnects.get(message.requestId)?.(message.type === 'canvas-disconnect-ready');
+    }
+  }
+}

package/src/client/presentation/canvas-picker.js

@@ -0,0 +1,111 @@
+import { createFileSearchEntry, findFileSearchMatch } from '../domain/file-search.js';
+
+export function openCanvasPicker({ root, title, loadChoices, onChoose, canChoose }) {
+  const previousFocus = document.activeElement;
+  const dialog = document.createElement('dialog');
+  dialog.className = 'canvas-picker';
+  const heading = document.createElement('h2');
+  heading.id = `canvas-picker-${crypto.randomUUID()}`;
+  heading.textContent = title;
+  dialog.setAttribute('aria-labelledby', heading.id);
+  const closeButton = document.createElement('button');
+  closeButton.type = 'button';
+  closeButton.className = 'canvas-button';
+  closeButton.textContent = 'Close';
+  const header = document.createElement('header');
+  header.append(heading, closeButton);
+  const input = document.createElement('input');
+  input.type = 'search';
+  input.placeholder = title;
+  input.setAttribute('aria-label', title);
+  input.setAttribute('role', 'combobox');
+  input.setAttribute('aria-autocomplete', 'list');
+  input.setAttribute('aria-expanded', 'true');
+  input.autocomplete = 'off';
+  const list = document.createElement('div');
+  list.id = `${heading.id}-results`;
+  list.className = 'canvas-picker-results';
+  list.setAttribute('role', 'listbox');
+  list.setAttribute('aria-label', 'Suggestions');
+  input.setAttribute('aria-controls', list.id);
+  const status = document.createElement('p');
+  status.className = 'canvas-picker-status';
+  status.setAttribute('role', 'status');
+  status.textContent = 'Loading…';
+  dialog.append(header, input, list, status);
+  root.append(dialog);
+  let choices = [];
+  let filtered = [];
+  let index = 0;
+  let closed = false;
+  const close = () => {
+    if (closed) return;
+    closed = true;
+    dialog.close();
+    dialog.remove();
+    if (previousFocus?.isConnected) previousFocus.focus({ preventScroll: true });
+  };
+  const choose = (choice) => {
+    if (!choice) return;
+    if (!canChoose()) { status.textContent = 'This selection is no longer available. Close and try again.'; return; }
+    close();
+    onChoose(choice.value);
+  };
+  const select = (next) => {
+    index = Math.max(0, Math.min(filtered.length - 1, next));
+    [...list.children].forEach((option, position) => option.setAttribute('aria-selected', String(position === index)));
+    const active = list.children[index];
+    if (active) {
+      input.setAttribute('aria-activedescendant', active.id);
+      active.scrollIntoView({ block: 'nearest' });
+    } else input.removeAttribute('aria-activedescendant');
+  };
+  const render = () => {
+    const query = input.value.trim().toLowerCase();
+    const matches = choices.map((choice) => ({ choice, score: query ? findFileSearchMatch(choice.search, query)?.score : 1 }))
+      .filter(({ score }) => score !== undefined).sort((a, b) => b.score - a.score);
+    filtered = matches.slice(0, 100).map(({ choice }) => choice);
+    list.replaceChildren(...filtered.map((choice, position) => {
+      const option = document.createElement('button');
+      option.type = 'button';
+      option.tabIndex = -1;
+      option.id = `${list.id}-${position}`;
+      option.setAttribute('role', 'option');
+      const label = document.createElement('span');
+      label.textContent = choice.label;
+      const detail = document.createElement('small');
+      detail.textContent = choice.detail || '';
+      option.append(label, detail);
+      option.addEventListener('click', () => choose(choice));
+      return option;
+    }));
+    status.textContent = matches.length > 100 ? 'Showing the first 100 matches. Type to narrow the list.'
+      : (matches.length ? '↑ ↓ to navigate · Enter to choose · Esc to close' : 'No matches.');
+    select(0);
+  };
+  closeButton.addEventListener('click', close);
+  dialog.addEventListener('cancel', (event) => { event.preventDefault(); close(); });
+  dialog.addEventListener('click', (event) => {
+    const bounds = dialog.getBoundingClientRect();
+    if (event.target === dialog && (event.clientX < bounds.left || event.clientX > bounds.right
+      || event.clientY < bounds.top || event.clientY > bounds.bottom)) close();
+  });
+  dialog.addEventListener('keydown', (event) => {
+    event.stopPropagation();
+    if (event.key === 'Escape') { event.preventDefault(); close(); return; }
+    if (event.target !== input) return;
+    if (['ArrowDown', 'ArrowUp', 'Enter'].includes(event.key)) event.preventDefault();
+    if (event.key === 'ArrowDown') select(index + 1);
+    if (event.key === 'ArrowUp') select(index - 1);
+    if (event.key === 'Enter') choose(filtered[index]);
+  });
+  input.addEventListener('input', render);
+  dialog.showModal();
+  input.focus();
+  Promise.resolve().then(loadChoices).then((loaded) => {
+    if (closed) return;
+    choices = loaded.map((choice) => ({ ...choice, search: createFileSearchEntry(choice.searchText || `${choice.label} ${choice.detail || ''}`) }));
+    render();
+  }).catch(() => { if (!closed) status.textContent = 'Suggestions unavailable. Close and try again.'; });
+  return { close };
+}

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

@@ -59,7 +59,6 @@ export class DrawioEmbedController {
     this.hydrationIdleId = null;
     this.hydrationQueue = [];
     this._exitMaximizedEntry();
-    document.body.classList.remove('drawio-maximized-open');
     this.embedEntries.forEach((entry) => entry.wrapper?.remove());
     this.embedEntries.clear();
     this.overlayRoot?.remove();
@@ -637,7 +636,6 @@ export class DrawioEmbedController {
     const entry = this.maximizedEntry;
     if (!entry?.wrapper) {
       this.maximizedEntry = null;
-      document.body.classList.remove('drawio-maximized-open');
       return;
     }
 
@@ -656,7 +654,7 @@ export class DrawioEmbedController {
     entry.restoreParent = null;
     entry.restoreNextSibling = null;
     this.maximizedEntry = null;
-    document.body.classList.remove('drawio-maximized-open');
+    document.body.classList.toggle('drawio-maximized-open', Boolean(document.body.querySelector('.drawio-embed.is-maximized')));
     this.overlayRoot?.classList.remove('has-maximized-entry');
     this.syncEntryLayout(entry);
   }

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

@@ -80,7 +80,6 @@ export class ExcalidrawEmbedController {
     this.hydrationIdleId = null;
     this.hydrationQueue = [];
     this._exitMaximizedEmbed();
-    document.body.classList.remove('excalidraw-maximized-open');
 
     this.embedEntries.forEach((entry) => {
       this._clearEntryBootTimeout(entry);
@@ -880,7 +879,7 @@ export class ExcalidrawEmbedController {
       isMaximized = false;
       wrapper.classList.remove('is-maximized');
       syncMaximizeButtonState();
-      document.body.classList.remove('excalidraw-maximized-open');
+      document.body.classList.toggle('excalidraw-maximized-open', Boolean(document.body.querySelector('.excalidraw-embed.is-maximized')));
       this._restoreMaximizedEntryLayout(entry);
       iframe.style.height = restoreHeight;
       if (this.maximizedEmbed?.wrapper === wrapper) {
@@ -1346,6 +1345,15 @@ export class ExcalidrawEmbedController {
       this._syncEntryFollowState(entry);
       this._postPendingCommentThread?.(entry);
       this._postPendingElement?.(entry);
+      this.pendingDisconnectRequests?.forEach((request, requestId) => {
+        if (request.entry === entry) {
+          this._postMessageToEntry(entry, {
+            source: 'collabmd-host',
+            type: 'prepare-disconnect',
+            requestId,
+          });
+        }
+      });
       if (this._entryNeedsHardReload(entry)) {
         void this._hydrateEntry(entry);
       }
@@ -1436,7 +1444,6 @@ export class ExcalidrawEmbedController {
       this.maximizedEmbed.exit();
     }
     this.maximizedEmbed = null;
-    document.body.classList.remove('excalidraw-maximized-open');
   }
 
   _postMessageToEntry(entry, payload) {

package/src/client/presentation/file-action-controller.js

@@ -158,6 +158,16 @@ export class FileActionController {
         meta: '.base',
         onSelect: () => this.handleNewBase({ parentDir }),
       },
+      {
+        contextLabel: 'New canvas',
+        group: 'Diagram',
+        hint: 'JSON Canvas',
+        icon: this.getCreateActionIcon('canvas'),
+        id: 'canvas',
+        label: 'Canvas',
+        meta: '.canvas',
+        onSelect: () => this.handleNewCanvas({ parentDir }),
+      },
       {
         contextLabel: 'New Excalidraw drawing',
         group: 'Diagram',
@@ -306,6 +316,7 @@ export class FileActionController {
         return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16V4"/><path d="m7 9 5-5 5 5"/><path d="M5 20h14"/></svg>';
       case 'base':
         return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4h7l5 5v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/><path d="M14 4v5h5"/><path d="M8 13h8"/><path d="M8 17h6"/><path d="M8 9h3"/></svg>';
+      case 'canvas':
       case 'drawio':
       case 'plantuml':
       case 'structurizr':
@@ -938,6 +949,32 @@ export class FileActionController {
     });
   }
 
+  handleNewCanvas({ parentDir = '' } = {}) {
+    const context = this.getCreateContext(parentDir);
+    this.openActionDialog({
+      title: 'Create canvas',
+      copy: 'Create a canvas for connected notes, files, links, and groups.',
+      label: `Canvas ${context.inputLabelSuffix}`,
+      hint: `${context.hintPrefix} ".canvas" is added automatically.`,
+      note: context.note,
+      placeholder: context.normalizedParentDir ? 'ideas' : 'diagrams/ideas',
+      submitLabel: 'Create canvas',
+      emptyMessage: 'Canvas path is required',
+      onSubmit: (value) => {
+        const normalizedPath = normalizeVaultPathInput(value);
+        if (!normalizedPath) {
+          this.showToast('Canvas path is required');
+          return false;
+        }
+        const filePath = ensureVaultExtension(composeVaultChildPath(context.normalizedParentDir, normalizedPath), '.canvas');
+        return this.createVaultFile(filePath, '{"nodes":[],"edges":[]}\n', {
+          errorMessage: 'Failed to create canvas',
+          openAfterCreate: true,
+        });
+      },
+    });
+  }
+
   handleNewDrawing({ parentDir = '' } = {}) {
     const context = this.getCreateContext(parentDir);
 

package/src/client/presentation/file-explorer-controller.js

@@ -1,4 +1,3 @@
-import { isImageAttachmentFilePath } from '../../domain/file-kind.js';
 import { FileActionController } from './file-action-controller.js';
 import { FileTreeState } from './file-tree-state.js';
 import { FileExplorerView } from './file-explorer-view.js';
@@ -143,7 +142,7 @@ export class FileExplorerController {
   }
 
   get flatDocumentFiles() {
-    return this.state.flatFiles.filter((path) => !isImageAttachmentFilePath(path));
+    return this.state.flatDocumentFiles;
   }
 
   renderTree({

package/src/client/presentation/file-explorer-view.js

@@ -5,6 +5,7 @@ import {
 } from '../../domain/file-kind.js';
 import { escapeHtml } from '../domain/vault-utils.js';
 import { findFuzzyMatch } from '../domain/file-search.js';
+import { getActiveVaultId } from '../domain/runtime-paths.js';
 import { getVaultPathLeaf, getVaultPathParent } from '../domain/vault-paths.js';
 import { buttonClassNames } from './components/ui/button.js';
 
@@ -296,8 +297,13 @@ export class FileExplorerView {
     }
     item.classList.add('is-dragging');
     if (event.dataTransfer) {
-      event.dataTransfer.effectAllowed = 'move';
+      event.dataTransfer.effectAllowed = this.dragSource.type === 'file' ? 'copyMove' : 'move';
       event.dataTransfer.setData('text/plain', item.dataset.path);
+      if (this.dragSource.type === 'file') {
+        event.dataTransfer.setData('application/x-collabmd-vault-file', JSON.stringify({
+          path: item.dataset.path, vaultId: getActiveVaultId() || '',
+        }));
+      }
     }
   }
 

package/src/client/presentation/file-icon-svg.js

@@ -16,7 +16,7 @@ export function getVaultFileIconSvg(filePath, {
     return createIcon(iconClass, '<path d="M7 4h7l5 5v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/><path d="M14 4v5h5"/><path d="M8 13h8"/><path d="M8 17h6"/><path d="M8 9h3"/>');
   }
 
-  if (kind === 'drawio' || kind === 'plantuml' || kind === 'structurizr') {
+  if (kind === 'canvas' || kind === 'drawio' || kind === 'plantuml' || kind === 'structurizr') {
     return createIcon(iconClass, '<rect x="3" y="4" width="7" height="6" rx="1"/><rect x="14" y="4" width="7" height="6" rx="1"/><rect x="8.5" y="14" width="7" height="6" rx="1"/><path d="M10 7h4"/><path d="M17.5 10v2.5"/><path d="M6.5 10v2.5"/><path d="M6.5 12.5h11"/>');
   }
 

package/src/client/presentation/file-tree-state.js

@@ -1,6 +1,7 @@
+import { isImageAttachmentFilePath } from '../../domain/file-kind.js';
 import { normalizeVaultPathInput } from '../domain/vault-paths.js';
 
-function flattenTree(nodes, files = [], searchEntries = [], fileEntries = []) {
+export function flattenTree(nodes, files = [], searchEntries = [], fileEntries = []) {
   for (const node of nodes) {
     if (!node?.path || !node?.type) {
       continue;
@@ -78,6 +79,7 @@ export class FileTreeState {
   constructor() {
     this.tree = [];
     this.flatFiles = [];
+    this.flatDocumentFiles = [];
     this.flatFileEntries = [];
     this.flatSearchEntries = [];
     this.activeFilePath = null;
@@ -89,6 +91,7 @@ export class FileTreeState {
     this.tree = Array.isArray(tree) ? tree : [];
     const flattened = flattenTree(this.tree, [], [], []);
     this.flatFiles = flattened.files;
+    this.flatDocumentFiles = flattened.files.filter((path) => !isImageAttachmentFilePath(path));
     this.flatFileEntries = flattened.fileEntries;
     this.flatSearchEntries = flattened.searchEntries;
   }

package/src/client/presentation/git-diff-view-controller.js

@@ -1177,9 +1177,9 @@ export class GitDiffViewController {
       return;
     }
 
-    let exportToSvg;
+    let exportScene;
     try {
-      ({ exportToSvg } = await import('@excalidraw/excalidraw'));
+      ({ exportScene } = await import('@excalidraw/excalidraw'));
     } catch (error) {
       console.warn('[git-diff] Excalidraw preview renderer unavailable:', error);
       return;
@@ -1192,7 +1192,7 @@ export class GitDiffViewController {
       }
 
       try {
-        const svg = await exportToSvg(createExcalidrawExportOptions(scene));
+        const svg = await exportScene({ ...createExcalidrawExportOptions(scene), type: 'svg' });
         preview.replaceChildren(svg);
         preview.classList.add('is-ready');
       } catch (error) {

package/src/client/presentation/image-lightbox-controller.js

@@ -40,10 +40,6 @@ export function clampImageLightboxOffset(offset, {
   return Math.min(Math.max(numericOffset, -overflow), overflow);
 }
 
-export function isImageLightboxWheelZoomGesture(event) {
-  return Boolean(event?.ctrlKey);
-}
-
 export class ImageLightboxController {
   constructor({
     previewElement,
@@ -508,7 +504,7 @@ export class ImageLightboxController {
         return;
       }
 
-      if (isImageLightboxWheelZoomGesture(event)) {
+      if (event.ctrlKey) {
         event.preventDefault();
         this.zoomBy(event.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP);
         return;

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

@@ -10,6 +10,17 @@ function roleOptions(currentRole) {
   )).join('');
 }
 
+function auditEventsMarkup(events) {
+  return events.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('');
+}
+
 export class TeamSettingsController {
   constructor({ apiClient, closeToolbarMenu, content, dialog, toastController, trigger }) {
     this.apiClient = apiClient;
@@ -50,6 +61,7 @@ export class TeamSettingsController {
       auditEvents: auditResult.events ?? [],
       invitations: invitationsResult.invitations ?? [],
       memberships: membershipsResult.memberships ?? [],
+      nextAuditCursor: auditResult.nextCursor ?? null,
     });
   }
 
@@ -58,7 +70,7 @@ export class TeamSettingsController {
     this.content.replaceChildren(createFragment(`<p class="team-settings-status${error ? ' is-error' : ''}" role="status">${escapeHtml(message)}</p>`));
   }
 
-  renderOverview({ auditEvents = [], invitations = [], memberships = [] }) {
+  renderOverview({ auditEvents = [], invitations = [], memberships = [], nextAuditCursor = null }) {
     if (!this.content) return;
     const memberMarkup = memberships.length > 0
       ? memberships.map((membership) => `
@@ -93,14 +105,7 @@ export class TeamSettingsController {
         </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('')
+      ? auditEventsMarkup(auditEvents)
       : '<p class="team-settings-empty">No access history yet.</p>';
     this.content.replaceChildren(createFragment(`
       <section class="team-settings-section">
@@ -128,7 +133,8 @@ export class TeamSettingsController {
       </section>
       <section class="team-settings-section">
         <h3>Access history</h3>
-        <ul class="team-settings-list team-settings-list--audit">${auditMarkup}</ul>
+        <ul class="team-settings-list team-settings-list--audit" tabindex="-1" aria-label="Access history">${auditMarkup}</ul>
+        ${nextAuditCursor ? `<button class="ui-button ui-button--secondary ui-button--compact" type="button" data-audit-more="${escapeHtml(nextAuditCursor)}">Load more history</button>` : ''}
       </section>
       <div class="team-settings-actions">
         <button class="ui-button ui-button--ghost" type="button" data-team-close>Close</button>
@@ -150,6 +156,30 @@ export class TeamSettingsController {
     }
   }
 
+  async loadMoreAuditEvents(button) {
+    if (button.disabled) return;
+    button.disabled = true;
+    try {
+      const page = await this.apiClient.listAuditEvents({ cursor: button.dataset.auditMore });
+      if (!this.content?.contains(button)) return;
+      const list = this.content.querySelector('.team-settings-list--audit');
+      list.append(createFragment(auditEventsMarkup(page.events ?? [])));
+      if (page.nextCursor) {
+        button.dataset.auditMore = page.nextCursor;
+      } else {
+        if (document.activeElement === button) list.focus();
+        button.remove();
+      }
+      this.setLiveMessage('More access history loaded');
+    } catch (error) {
+      if (this.content?.contains(button)) {
+        this.setLiveMessage(error.message || 'Failed to load access history');
+      }
+    } finally {
+      button.disabled = false;
+    }
+  }
+
   async handleClick(event) {
     const target = event.target.closest('button');
     if (!target) return;
@@ -157,6 +187,10 @@ export class TeamSettingsController {
       this.dialog.close();
       return;
     }
+    if (target.dataset.auditMore != null) {
+      await this.loadMoreAuditEvents(target);
+      return;
+    }
     if (target.dataset.membershipRemove) {
       if (!window.confirm(`Remove ${target.dataset.membershipEmail} from the team? They lose workspace access immediately.`)) return;
       try {

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

@@ -5,8 +5,7 @@
   flex-shrink: 0;
 }
 
-.ui-button--action,
-.ui-action-button {
+.ui-button--action {
   min-height: var(--control-h-md);
   padding: 0 14px;
   border-radius: var(--radius-lg-plus);
@@ -15,18 +14,15 @@
   white-space: nowrap;
 }
 
-.ui-button--wide,
-.ui-action-button--wide {
+.ui-button--wide {
   min-width: 92px;
 }
 
-.ui-button--surface,
-.ui-action-button--surface {
+.ui-button--surface {
   background: var(--color-surface-offset);
 }
 
-.ui-button--surface:hover:not(:disabled),
-.ui-action-button--surface:hover:not(:disabled) {
+.ui-button--surface:hover:not(:disabled) {
   background: var(--color-surface-dynamic);
 }
 
@@ -36,14 +32,6 @@
   min-width: 0;
 }
 
-.ui-action-pill--surface {
-  background: var(--color-surface-offset);
-}
-
-.ui-action-pill--surface:hover:not(:disabled) {
-  background: var(--color-surface-dynamic);
-}
-
 .ui-action-icon {
   flex-shrink: 0;
 }

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

@@ -72,13 +72,6 @@
   line-height: 1.35;
 }
 
-.ui-record-copy {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-width: 0;
-}
-
 .ui-record-title {
   min-width: 0;
   overflow: hidden;

package/src/client/styles/features/comment-card.css

@@ -84,8 +84,7 @@
   color: var(--color-error);
 }
 
-.comment-card-quote,
-.comment-thread-card-excerpt {
+.comment-card-quote {
   padding: var(--space-2) var(--space-3);
   border: 0;
   border-left: 2px solid var(--border-comment-active);

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

@@ -107,21 +107,3 @@
 .comment-markdown th {
   background: var(--surface-comment-offset);
 }
-
-.comment-markdown-preview > :not(pre):not(blockquote):not(.comment-markdown-table) {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 4;
-  overflow: hidden;
-}
-
-.comment-markdown-preview pre code {
-  width: 100%;
-  min-width: 0;
-  max-height: 6.6rem;
-  overflow: hidden;
-}
-
-.comment-markdown-preview .comment-markdown-table {
-  display: none;
-}