collabmd 0.1.52 → 0.1.55

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/presentation/vault-dashboard.js

@@ -0,0 +1,63 @@
+import { findFuzzyMatch } from '../domain/file-search.js';
+
+export function renderVaultDashboard({ container, vaults, getVaultUrl, onSelect }) {
+  container.removeAttribute('role');
+  container.classList.add('vault-dashboard');
+  container.innerHTML = `
+    <main class="vault-dashboard-card" aria-labelledby="vaultDashboardTitle">
+      <header class="vault-dashboard-header">
+        <div class="sidebar-brand">
+          <svg width="28" height="28" viewBox="0 0 32 32" fill="none" aria-hidden="true">
+            <rect x="3" y="4" width="17" height="24" rx="3" stroke="var(--color-primary)" stroke-width="2"></rect>
+            <rect x="12" y="4" width="17" height="24" rx="3" fill="var(--color-primary)"></rect>
+            <path d="M17 12h7m-7 4h7m-7 4h4" stroke="var(--color-primary-contrast)" stroke-width="1.5"></path>
+          </svg>
+          <span class="sidebar-title">CollabMD</span>
+        </div>
+        <h1 id="vaultDashboardTitle">Choose a vault</h1>
+        <p>Open a project to start collaborating.</p>
+      </header>
+      <div class="vault-dashboard-search">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5"></circle><path d="m16 16 4 4"></path></svg>
+        <input type="search" class="ui-input" aria-label="Find a vault" placeholder="Find a vault…">
+      </div>
+      <div class="vault-dashboard-list-heading">
+        <h2>Your vaults</h2>
+        <span class="ui-pill-badge ui-pill-badge--count ui-pill-badge--muted"></span>
+      </div>
+      <nav aria-label="Vaults"></nav>
+      <p class="ui-empty-state" role="status" hidden>No matching vaults.</p>
+      <footer class="vault-dashboard-footer">Press <kbd>Enter</kbd> to open the first match</footer>
+    </main>`;
+  container.querySelector('.ui-pill-badge').textContent = String(vaults.length);
+  const list = container.querySelector('nav');
+  const empty = container.querySelector('[role="status"]');
+  const entries = vaults.map((vault) => {
+    const link = document.createElement('a');
+    link.className = 'ui-record-surface vault-dashboard-link';
+    link.href = getVaultUrl(vault.id);
+    link.innerHTML = `
+      <span class="vault-dashboard-icon" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg></span>
+      <span class="vault-dashboard-name"></span>
+      <svg class="vault-dashboard-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14m-5-5 5 5-5 5"></path></svg>`;
+    link.querySelector('.vault-dashboard-name').textContent = vault.name || vault.id;
+    link.addEventListener('click', () => onSelect?.(vault.id));
+    list.append(link);
+    return { link, text: `${vault.name || vault.id} ${vault.id}`.toLowerCase() };
+  });
+  const input = container.querySelector('input');
+  input.addEventListener('input', () => {
+    const query = input.value.trim().toLowerCase();
+    entries.forEach(({ link, text }) => {
+      link.hidden = Boolean(query && !text.includes(query) && !findFuzzyMatch(text, query));
+    });
+    empty.hidden = entries.some(({ link }) => !link.hidden);
+  });
+  input.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      entries.find(({ link }) => !link.hidden)?.link.click();
+    }
+  });
+  input.focus();
+}

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;
-}

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

@@ -239,24 +239,6 @@
   background: transparent;
 }
 
-.drawio-embed-image-shell {
-  display: flex;
-  align-items: stretch;
-  justify-content: center;
-  width: 100%;
-  padding: 0;
-  border: 0;
-  background: var(--surface-embed-canvas);
-  cursor: pointer;
-}
-
-.drawio-embed-image {
-  display: block;
-  width: 100%;
-  height: auto;
-  background: transparent;
-}
-
 .drawio-export-iframe {
   position: absolute;
   width: 0;

package/src/client/styles/features/git-branch.css

@@ -160,10 +160,6 @@
   gap: var(--space-2);
 }
 
-.git-panel-footer-actions .ui-action-button {
-  width: 100%;
-}
-
 .git-footer-commit-btn {
   width: 100%;
   border: 1px solid var(--border-accent-soft);

package/src/client/styles/foundation/themes.css

@@ -2,6 +2,12 @@
 
 :root {
   color-scheme: light dark;
+  --canvas-color-1: light-dark(#dc2626, #f87171);
+  --canvas-color-2: light-dark(#ea580c, #fb923c);
+  --canvas-color-3: light-dark(#ca8a04, #facc15);
+  --canvas-color-4: light-dark(#16a34a, #4ade80);
+  --canvas-color-5: light-dark(#0891b2, #22d3ee);
+  --canvas-color-6: light-dark(#9333ea, #c084fc);
   --pdf-highlight-bg: rgb(180 0 170 / 25%);
   --pdf-highlight-selected-bg: rgb(0 100 0 / 25%);
   --pdf-selection-bg: rgb(0 90 255 / 25%);

package/src/client/styles/foundation/utilities.css

@@ -1,7 +1,6 @@
 /* ===== FOUNDATION / UTILITIES ===== */
 
-.hidden,
-.u-hidden {
+.hidden {
   display: none !important;
 }
 
@@ -34,3 +33,5 @@ html[data-initial-file-requested="true"] .editor-page.hidden {
   clip: auto;
   transform: translateY(0);
 }
+
+.clipboard-fallback { position: fixed; left: -9999px; opacity: 0; }

package/src/client/styles/layout/editor-page.css

@@ -147,19 +147,6 @@
   flex-shrink: 0;
 }
 
-.toolbar-logo {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  padding: var(--space-1);
-  border-radius: var(--radius-sm);
-  transition: background var(--transition-interactive);
-}
-
-.toolbar-logo:hover {
-  background: var(--color-surface-offset);
-}
-
 .toolbar-room-info {
   display: flex;
   align-items: center;

package/src/client/styles/layout/overlays.css

@@ -99,6 +99,11 @@
   font-size: var(--text-ui-sm);
 }
 
+.file-context-item[hidden],
+.file-action-sheet-item[hidden] {
+  display: none;
+}
+
 .file-context-item:hover {
   background: var(--color-surface-offset);
 }

package/src/client/styles/layout/responsive.css

@@ -56,7 +56,7 @@
     display: none;
   }
 
-  .mobile-view-toggle {
+  .mobile-view-toggle:not(.hidden) {
     display: flex !important;
   }
 
@@ -311,11 +311,6 @@
     flex: 1;
   }
 
-  .diff-toolbar-actions-group-git .ui-action-button {
-    flex: 1;
-    min-width: 0;
-  }
-
   .diff-toolbar-actions-divider {
     display: none;
   }
@@ -421,7 +416,7 @@
     display: none !important;
   }
 
-  #outlineToggle {
+  #outlineToggle:not(.hidden) {
     display: inline-flex !important;
   }
 

package/src/client/styles/layout/shell.css

@@ -1,5 +1,157 @@
 /* ===== APP SHELL ===== */
 
+html[data-workspace-loading] .app-shell,
+html[data-workspace-loading] .skip-link {
+  visibility: hidden;
+}
+
+.workspace-loading {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-content: center;
+  padding: var(--space-6);
+  overflow: auto;
+  background: var(--color-bg);
+  color: var(--color-text-muted);
+}
+
+.vault-dashboard {
+  place-items: center;
+  place-content: normal;
+}
+
+.vault-dashboard-card {
+  width: min(100%, 520px);
+  padding: clamp(var(--space-5), 4vw, var(--space-8));
+  border: 1px solid var(--border-accent-soft);
+  border-radius: var(--radius-xl);
+  background: var(--color-surface);
+  color: var(--color-text);
+  box-shadow: var(--shadow-card-strong);
+}
+
+.vault-dashboard-header .sidebar-brand {
+  margin-bottom: var(--space-6);
+}
+
+.vault-dashboard-header h1 {
+  margin: 0 0 var(--space-2);
+  font-family: var(--font-display);
+  font-size: var(--text-xl);
+  line-height: 1.15;
+  letter-spacing: -0.035em;
+}
+
+.vault-dashboard-header p {
+  margin: 0 0 var(--space-6);
+  color: var(--color-text-muted);
+  font-size: var(--text-ui-md);
+  line-height: 1.5;
+}
+
+.vault-dashboard-search {
+  position: relative;
+}
+
+.vault-dashboard-search > svg {
+  position: absolute;
+  top: 50%;
+  left: var(--space-3);
+  color: var(--color-text-faint);
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.vault-dashboard-search .ui-input {
+  min-height: var(--control-h-lg);
+  padding-left: var(--space-10);
+  background: var(--color-surface-offset);
+}
+
+.vault-dashboard-list-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: var(--space-6) 0 var(--space-3);
+}
+
+.vault-dashboard-list-heading h2 {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-ui-sm);
+  font-weight: 600;
+}
+
+.vault-dashboard-card nav {
+  display: grid;
+  gap: var(--space-2);
+  max-height: 40dvh;
+  padding: var(--space-1);
+  margin: calc(-1 * var(--space-1));
+  overflow: auto;
+}
+
+.vault-dashboard-link.ui-record-surface {
+  --ui-record-gap: var(--space-3);
+  --ui-record-border-hover: var(--border-accent-soft);
+  flex-direction: row;
+  align-items: center;
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.vault-dashboard-icon {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-md);
+  background: var(--color-primary-highlight);
+  color: var(--color-primary);
+}
+
+.vault-dashboard-name {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-size: var(--text-ui-md);
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.vault-dashboard-arrow {
+  flex-shrink: 0;
+  color: var(--color-text-faint);
+}
+
+.vault-dashboard-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-1);
+  margin-top: var(--space-6);
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--color-divider);
+  color: var(--color-text-faint);
+  font-size: var(--text-caption);
+}
+
+.vault-dashboard-footer kbd {
+  padding: 1px var(--space-1);
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-offset);
+  font: inherit;
+}
+
+.vault-dashboard-link[hidden],
+.vault-dashboard-card [role='status'][hidden] {
+  display: none;
+}
+
 .app-shell {
   position: fixed;
   top: var(--app-viewport-offset-top, 0px);
@@ -182,7 +334,8 @@
   overscroll-behavior: contain;
 }
 
-.preview-content.is-excalidraw-file-preview {
+.preview-content.is-excalidraw-file-preview,
+.preview-content.is-canvas-file-preview {
   position: relative;
   display: flex;
   box-sizing: border-box;
@@ -264,6 +417,7 @@
 .preview-content.is-drawio-file-preview [data-preview-render-host='true'],
 .preview-content.is-structurizr-file-preview [data-preview-render-host='true'],
 .preview-content.is-excalidraw-file-preview [data-preview-render-host='true'],
+.preview-content.is-canvas-file-preview [data-preview-render-host='true'],
 .preview-content.is-image-file-preview [data-preview-render-host='true'],
 .preview-content.is-pdf-file-preview [data-preview-render-host='true'],
 .preview-content.is-html-file-preview [data-preview-render-host='true'],
@@ -280,6 +434,16 @@
   flex-direction: column;
 }
 
+.canvas-file-preview-frame {
+  display: block;
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  border: 0;
+  border-radius: var(--radius-lg);
+}
+
 .preview-content.is-html-file-preview [data-preview-render-host='true'] {
   height: 100%;
   min-height: 0;

package/src/client/styles/layout/view-modes.css

@@ -26,6 +26,7 @@
 }
 
 .editor-layout[data-view="preview"] .preview-content.is-excalidraw-file-preview,
+.editor-layout[data-view="preview"] .preview-content.is-canvas-file-preview,
 .editor-layout[data-view="preview"] .preview-content.is-drawio-file-preview,
 .editor-layout[data-view="preview"] .preview-content.is-base-file-preview,
 .editor-layout[data-view="preview"] .preview-content.is-image-file-preview,