collabmd 0.1.48 → 0.1.51

package/src/client/presentation/hosted-workspace-gate-controller.js

@@ -0,0 +1,180 @@
+import { createFragment, escapeHtml } from '../domain/vault-utils.js';
+
+export class HostedWorkspaceGateController {
+  constructor({ apiClient, appRoot = null, gate, runtimeConfig, teamSettingsController }) {
+    this.apiClient = apiClient;
+    this.appRoot = appRoot;
+    this.gate = gate;
+    this.content = gate?.querySelector('[data-hosted-gate-content]') ?? null;
+    this.teamSettingsController = teamSettingsController;
+    this.enabled = runtimeConfig.hosted?.enabled === true;
+    this.accessGrantedPromise = new Promise((resolve) => {
+      this.resolveAccessGranted = resolve;
+    });
+    this.gate?.addEventListener('click', (event) => void this.handleClick(event));
+    this.gate?.addEventListener('submit', (event) => void this.handleSubmit(event));
+  }
+
+  async initialize() {
+    if (!this.enabled) {
+      this.hide();
+      return;
+    }
+    await this.refresh();
+    await this.accessGrantedPromise;
+  }
+
+  async refresh() {
+    this.show('Loading workspace…');
+    let status;
+    try {
+      status = await this.apiClient.getStatus();
+    } catch (error) {
+      if (error.status === 401 || error.code === 'HOSTED_AUTH_REQUIRED') {
+        this.show('Sign in to access this workspace.', { title: 'Sign-in required' });
+      } else {
+        this.show(error.message || 'Failed to load workspace status.', { error: true, title: 'Workspace unavailable' });
+      }
+      this.teamSettingsController?.setTriggerVisible(false);
+      return;
+    }
+    this.applyStatus(status);
+  }
+
+  applyStatus(status) {
+    const membership = status.membership ?? null;
+    const isAdmin = membership?.role === 'admin';
+    this.teamSettingsController?.setTriggerVisible(Boolean(isAdmin && status.setupComplete));
+    if (!status.claimed) {
+      this.renderClaim();
+      return;
+    }
+    if (!status.setupComplete) {
+      if (isAdmin) {
+        this.renderSetup(status);
+      } else {
+        this.show('Workspace setup is incomplete. Ask a Team Admin to finish setup.', { title: status.team?.name || 'Workspace setup' });
+      }
+      return;
+    }
+    if (!membership) {
+      this.renderAccept(status);
+      return;
+    }
+    this.hide();
+    this.resolveAccessGranted();
+  }
+
+  hide() {
+    this.gate?.classList.add('hidden');
+    this.content?.replaceChildren();
+    if (this.appRoot) this.appRoot.inert = false;
+  }
+
+  reveal() {
+    if (!this.gate) return;
+    this.gate.classList.remove('hidden');
+    if (this.appRoot) this.appRoot.inert = true;
+    this.content?.querySelector('button, input, select')?.focus?.();
+  }
+
+  render(markup) {
+    if (!this.gate || !this.content) return;
+    this.content.replaceChildren(createFragment(markup));
+    this.reveal();
+  }
+
+  show(message, { error = false, title = 'Workspace' } = {}) {
+    this.render(`
+      <h2 class="hosted-gate-title" id="hostedGateTitle">${escapeHtml(title)}</h2>
+      <p class="hosted-gate-status${error ? ' is-error' : ''}" role="status">${escapeHtml(message)}</p>
+    `);
+  }
+
+  renderClaim() {
+    this.render(`
+      <h2 class="hosted-gate-title" id="hostedGateTitle">Claim this workspace</h2>
+      <p class="hosted-gate-copy">Enter the team name and the one-time claim token from provisioning to become the first Team Admin.</p>
+      <form class="hosted-gate-form" data-claim-form>
+        <label class="app-dialog-field">
+          <span class="app-dialog-label">Team name</span>
+          <input class="ui-input" name="teamName" maxlength="80" autocomplete="off" spellcheck="false" required>
+        </label>
+        <label class="app-dialog-field">
+          <span class="app-dialog-label">Claim token</span>
+          <input class="ui-input" name="token" type="password" autocomplete="off" spellcheck="false" required>
+        </label>
+        <button class="ui-button ui-button--primary" type="submit">Claim workspace</button>
+      </form>
+      <p class="hosted-gate-live" role="status" aria-live="polite"></p>
+    `);
+  }
+
+  renderSetup(status) {
+    this.render(`
+      <h2 class="hosted-gate-title" id="hostedGateTitle">${escapeHtml(status.team?.name || 'Workspace setup')}</h2>
+      <p class="hosted-gate-copy">Workspace setup is not complete. The editor and invitations stay unavailable until setup is done. Connecting a GitHub vault source comes later; for now, completing setup unlocks team management.</p>
+      <button class="ui-button ui-button--primary" type="button" data-complete-setup>Complete setup</button>
+      <p class="hosted-gate-live" role="status" aria-live="polite"></p>
+    `);
+  }
+
+  renderAccept(status) {
+    this.render(`
+      <h2 class="hosted-gate-title" id="hostedGateTitle">${escapeHtml(status.team?.name || 'Workspace')}</h2>
+      <p class="hosted-gate-copy">You are signed in but not a team member yet. If a Team Admin invited your Google email, accept below to join.</p>
+      <button class="ui-button ui-button--primary" type="button" data-accept-invitation>Accept invitation</button>
+      <p class="hosted-gate-live" role="status" aria-live="polite"></p>
+    `);
+  }
+
+  setLiveMessage(message) {
+    const live = this.content?.querySelector('.hosted-gate-live');
+    if (live) live.textContent = message;
+  }
+
+  async handleClick(event) {
+    const target = event.target.closest('button');
+    if (!target) return;
+    if (target.dataset.completeSetup != null) {
+      target.disabled = true;
+      try {
+        await this.apiClient.completeSetup();
+        await this.refresh();
+      } catch (error) {
+        this.setLiveMessage(error.message || 'Failed to complete setup');
+        target.disabled = false;
+      }
+      return;
+    }
+    if (target.dataset.acceptInvitation != null) {
+      target.disabled = true;
+      try {
+        await this.apiClient.acceptInvitation();
+        await this.refresh();
+      } catch (error) {
+        this.setLiveMessage(error.message || 'No pending invitation was found for your account.');
+        target.disabled = false;
+      }
+    }
+  }
+
+  async handleSubmit(event) {
+    const form = event.target.closest('[data-claim-form]');
+    if (!form) return;
+    event.preventDefault();
+    const data = new FormData(form);
+    const submit = form.querySelector('[type="submit"]');
+    submit.disabled = true;
+    try {
+      await this.apiClient.claimWorkspace({
+        teamName: String(data.get('teamName') ?? '').trim(),
+        token: String(data.get('token') ?? ''),
+      });
+      await this.refresh();
+    } catch (error) {
+      this.setLiveMessage(error.message || 'Failed to claim workspace');
+      submit.disabled = false;
+    }
+  }
+}

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

@@ -76,6 +76,8 @@ export class ImageLightboxController {
     this.pinchStartCenter = { x: 0, y: 0 };
     this.didDrag = false;
     this.resetButton = null;
+    this.previouslyFocusedElement = null;
+    this.blockingModalHandler = () => this.close();
 
     this.handlePreviewClick = (event) => {
       const target = event.target;
@@ -102,12 +104,6 @@ export class ImageLightboxController {
         return;
       }
 
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        this.close();
-        return;
-      }
-
       if (event.key === '+' || event.key === '=') {
         event.preventDefault();
         this.zoomBy(ZOOM_STEP);
@@ -161,15 +157,19 @@ export class ImageLightboxController {
     }
 
     this.ensureOverlayRoot();
+    this.previouslyFocusedElement = this.document.activeElement instanceof this.window.HTMLElement
+      ? this.document.activeElement
+      : null;
     this.resetView();
     this.titleElement.textContent = image.getAttribute('alt') || 'Image preview';
     this.imageElement.src = src;
     this.imageElement.alt = image.getAttribute('alt') || '';
-    this.overlayRoot.hidden = false;
+    this.overlayRoot.showModal();
     this.isOpen = true;
     this.document.body.classList.add('image-lightbox-open');
+    this.document.addEventListener('collabmd:close-custom-modals', this.blockingModalHandler);
     this.syncTransform();
-    this.overlayRoot.focus?.();
+    this.overlayRoot.querySelector('button:not(:disabled)')?.focus();
     return true;
   }
 
@@ -184,11 +184,14 @@ export class ImageLightboxController {
     this.pinchStartDistance = 0;
     this.didDrag = false;
     this.viewport?.classList?.remove('is-dragging');
-    if (this.overlayRoot) {
-      this.overlayRoot.hidden = true;
+    if (this.overlayRoot?.open) {
+      this.overlayRoot.close();
     }
     this.isOpen = false;
     this.document.body.classList.remove('image-lightbox-open');
+    this.document.removeEventListener('collabmd:close-custom-modals', this.blockingModalHandler);
+    this.previouslyFocusedElement?.focus?.();
+    this.previouslyFocusedElement = null;
   }
 
   resetView() {
@@ -442,11 +445,14 @@ export class ImageLightboxController {
       return this.overlayRoot;
     }
 
-    const overlayRoot = this.document.createElement('div');
+    const overlayRoot = this.document.createElement('dialog');
     overlayRoot.className = 'image-lightbox-root';
     overlayRoot.dataset.imageLightboxRoot = 'true';
-    overlayRoot.hidden = true;
-    overlayRoot.tabIndex = -1;
+    overlayRoot.setAttribute('aria-labelledby', 'imageLightboxTitle');
+    overlayRoot.addEventListener('cancel', (event) => {
+      event.preventDefault();
+      this.close();
+    });
 
     const backdrop = this.document.createElement('button');
     backdrop.className = 'image-lightbox-backdrop';
@@ -460,9 +466,6 @@ export class ImageLightboxController {
 
     const shell = this.document.createElement('div');
     shell.className = 'image-lightbox-shell';
-    shell.setAttribute('role', 'dialog');
-    shell.setAttribute('aria-modal', 'true');
-    shell.setAttribute('aria-label', 'Image preview');
     shell.addEventListener('click', (event) => event.stopPropagation());
     shell.addEventListener('pointerdown', (event) => event.stopPropagation());
 
@@ -471,6 +474,7 @@ export class ImageLightboxController {
 
     const title = this.document.createElement('div');
     title.className = 'image-lightbox-title';
+    title.id = 'imageLightboxTitle';
     title.textContent = 'Image preview';
 
     const controls = this.document.createElement('div');

package/src/client/presentation/layout-controller.js

@@ -2,12 +2,19 @@ export class LayoutController {
   constructor({
     mobileBreakpointQuery = window.matchMedia('(max-width: 768px)'),
     onMeasureEditor,
+    onPreferredViewChange = null,
+    onViewChange = null,
     onViewRequest = null,
+    preferredView = 'split',
   }) {
     this.mobileBreakpointQuery = mobileBreakpointQuery;
     this.onMeasureEditor = onMeasureEditor;
+    this.onPreferredViewChange = onPreferredViewChange;
+    this.onViewChange = onViewChange;
     this.onViewRequest = onViewRequest;
-    this.preferredView = 'split';
+    this.preferredView = preferredView === 'editor' || preferredView === 'preview' || preferredView === 'split'
+      ? preferredView
+      : 'split';
     this.mobileShowsEditor = !this.isMobileViewport();
     this.currentView = this.mobileShowsEditor ? this.preferredView : 'preview';
     this.editorLayout = document.getElementById('editorLayout');
@@ -15,7 +22,7 @@ export class LayoutController {
     this.previewPane = document.getElementById('previewPane');
     this.mobileToggleButton = document.getElementById('mobileViewToggle');
     this.resizer = document.getElementById('resizer');
-    this.viewButtons = Array.from(document.querySelectorAll('.view-btn'));
+    this.viewButtons = Array.from(document.querySelectorAll('#toolbarViewToggle [data-view]'));
   }
 
   isMobileViewport() {
@@ -78,6 +85,7 @@ export class LayoutController {
     this.currentView = view;
     this.editorLayout?.setAttribute('data-view', view);
     this.syncViewButtons();
+    this.onViewChange?.(view);
   }
 
   setView(view, { persist = true } = {}) {
@@ -87,6 +95,7 @@ export class LayoutController {
 
     if (persist) {
       this.preferredView = view;
+      this.onPreferredViewChange?.(view);
     }
 
     this.applyView(view);
@@ -128,6 +137,8 @@ export class LayoutController {
     const previewIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>';
     const editorIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="8" y1="8" x2="16" y2="8"/><line x1="8" y1="12" x2="14" y2="12"/><line x1="8" y1="16" x2="12" y2="16"/></svg>';
 
+    // Icons and labels are fixed application-owned markup.
+    // pi-lens-ignore: no-inner-html-js
     this.mobileToggleButton.innerHTML = `${label === 'Editor' ? editorIcon : previewIcon}<span class="ui-toolbar-button-label">${label}</span>`;
   }
 

package/src/client/presentation/quick-switcher-controller.js

@@ -98,28 +98,20 @@ export class QuickSwitcherController {
     this.selectedIndex = 0;
     this.selectedTextIndex = 0;
     this.isOpen = false;
-    this.previousActiveElement = null;
     this.mode = 'files';
     this.textResults = null;
     this.textResultItems = [];
     this.textSearchRunner = new QuickSwitcherTextSearchRunner({
       debounceMs: this.searchDebounceMs,
     });
+    this.blockingModalHandler = () => this.close();
 
     this.bindEvents();
   }
 
   bindEvents() {
-    this.overlay?.addEventListener('mousedown', (e) => {
-      if (e.target === this.overlay) this.close();
-    });
-
-    this.overlay?.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        this.close();
-      }
-    });
+    document.addEventListener?.('collabmd:close-custom-modals', this.blockingModalHandler);
+    this.overlay?.addEventListener('close', () => this.handleClose());
 
     this.modeTabs.forEach((tab, index) => {
       tab.addEventListener('click', () => {
@@ -173,86 +165,36 @@ export class QuickSwitcherController {
     });
   }
 
+  handleClose() {
+    this.abortTextSearch();
+    this.isOpen = false;
+    this.input?.setAttribute('aria-expanded', 'false');
+    this.input.value = '';
+    this.resultsList.innerHTML = '';
+    this.setActiveDescendant('');
+  }
+
   open() {
-    if (!this.overlay) return;
+    if (!this.overlay || this.overlay.open) return;
 
-    this.previousActiveElement = document.activeElement;
     this.isOpen = true;
     this.input.value = '';
     this.selectedIndex = 0;
     this.selectedTextIndex = 0;
-    this.overlay.classList.add('visible');
-    this.overlay.setAttribute('aria-hidden', 'false');
-    this.input?.setAttribute('aria-expanded', 'true');
     this.setMode('files', { preserveInput: true });
-
-    // The overlay transitions visibility hidden→visible over 120ms.
-    // Browsers ignore .focus() while the element is still visibility:hidden,
-    // so we must wait for the transition to complete.
-    this._focusAfterTransition();
-  }
-
-  /** Focus the input once the overlay visibility transition finishes. */
-  _focusAfterTransition() {
-    this._cancelPendingFocus();
-
-    const tryFocus = () => {
-      this._focusCleanup = null;
-      this.input?.focus();
-      if (this.isOpen && this.input && document.activeElement !== this.input) {
-        setTimeout(() => this.input?.focus(), 50);
-      }
-    };
-
-    const onEnd = (e) => {
-      if (e.propertyName === 'visibility' || e.propertyName === 'opacity') {
-        this.overlay.removeEventListener('transitionend', onEnd);
-        clearTimeout(fallbackTimer);
-        tryFocus();
-      }
-    };
-    this.overlay.addEventListener('transitionend', onEnd);
-
-    const fallbackTimer = setTimeout(() => {
-      this.overlay.removeEventListener('transitionend', onEnd);
-      tryFocus();
-    }, 160);
-
-    this._focusCleanup = () => {
-      this.overlay.removeEventListener('transitionend', onEnd);
-      clearTimeout(fallbackTimer);
-    };
-  }
-
-  _cancelPendingFocus() {
-    if (this._focusCleanup) {
-      this._focusCleanup();
-      this._focusCleanup = null;
-    }
+    this.overlay.showModal();
+    this.input?.setAttribute('aria-expanded', 'true');
   }
 
-  close({ restoreFocus = true } = {}) {
-    if (!this.overlay) return;
-
-    const previousActiveElement = this.previousActiveElement;
-    this._cancelPendingFocus();
-    this.abortTextSearch();
-    this.isOpen = false;
-    this.overlay.classList.remove('visible');
-    this.overlay.setAttribute('aria-hidden', 'true');
-    this.input?.setAttribute('aria-expanded', 'false');
-    this.input.value = '';
-    this.resultsList.innerHTML = '';
-    this.setActiveDescendant('');
-    this.previousActiveElement = null;
-
-    if (restoreFocus) {
-      previousActiveElement?.focus?.();
+  close() {
+    this.handleClose();
+    if (this.overlay?.open) {
+      this.overlay.close();
     }
   }
 
   toggle() {
-    if (this.isOpen) {
+    if (this.overlay?.open) {
       this.close();
     } else {
       this.open();

package/src/client/presentation/quick-switcher-text-search.js

@@ -7,20 +7,16 @@ export function formatMatchCount(count = 0, { truncated = false } = {}) {
 }
 
 export function flattenTextResults(payload = {}) {
-  const flattened = [];
-  (payload.files ?? []).forEach((fileGroup) => {
-    (fileGroup.snippets ?? []).forEach((snippet) => {
-      flattened.push({
-        column: snippet.column,
-        file: fileGroup.file,
-        kind: fileGroup.kind,
-        line: snippet.line,
-        matchLength: Math.max((snippet.matchEnd ?? 0) - (snippet.matchStart ?? 0), 0),
-        snippet,
-      });
-    });
-  });
-  return flattened;
+  return (payload.files ?? []).flatMap((fileGroup) => (
+    (fileGroup.snippets ?? []).map((snippet) => ({
+      column: snippet.column,
+      file: fileGroup.file,
+      kind: fileGroup.kind,
+      line: snippet.line,
+      matchLength: Math.max((snippet.matchEnd ?? 0) - (snippet.matchStart ?? 0), 0),
+      snippet,
+    }))
+  ));
 }
 
 export class QuickSwitcherTextSearchRunner {