collabmd 0.1.26 → 0.1.29

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

@@ -1,4 +1,5 @@
 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';
 
@@ -113,22 +114,31 @@ export class DrawioEmbedController {
     this.hydrationIdleId = null;
     this.hydrationPaused = false;
     this.instanceCounter = 0;
+    this.maximizedEntry = null;
+    this.maximizedRoot = null;
 
     this._onMessage = this._onMessage.bind(this);
+    this._onKeyDown = this._onKeyDown.bind(this);
     this._onPreviewClick = this._onPreviewClick.bind(this);
 
     window.addEventListener('message', this._onMessage);
+    window.addEventListener('keydown', this._onKeyDown);
     this.previewElement?.addEventListener('click', this._onPreviewClick);
   }
 
   destroy() {
     window.removeEventListener('message', this._onMessage);
+    window.removeEventListener('keydown', this._onKeyDown);
     this.previewElement?.removeEventListener('click', this._onPreviewClick);
     cancelIdleRender(this.hydrationIdleId);
     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.maximizedRoot?.remove();
+    this.maximizedRoot = null;
   }
 
   detachForCommit() {
@@ -148,6 +158,8 @@ export class DrawioEmbedController {
   }
 
   reconcileEmbeds(previewElement) {
+    this._exitMaximizedEntry();
+
     const descriptors = Array.from(previewElement.querySelectorAll('.drawio-embed-placeholder[data-drawio-key]')).map((placeholder) => ({
       filePath: placeholder.dataset.drawioTarget || '',
       key: placeholder.dataset.drawioKey || '',
@@ -246,27 +258,28 @@ export class DrawioEmbedController {
     }
 
     const wrapper = document.createElement('div');
-    wrapper.className = `drawio-embed${entry.mode === 'edit' ? ' is-direct-file' : ''}`;
+    wrapper.className = `drawio-embed diagram-preview-shell${entry.mode === 'edit' ? ' is-direct-file' : ''}`;
     wrapper.dataset.file = entry.filePath;
+    wrapper.dataset.drawioKey = entry.key;
 
     const header = document.createElement('div');
-    header.className = 'drawio-embed-header';
+    header.className = 'drawio-embed-header diagram-preview-toolbar';
+
+    const icon = document.createElement('span');
+    icon.className = 'drawio-embed-icon';
+    icon.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>';
 
     const label = document.createElement('span');
     label.className = 'drawio-embed-label';
     label.textContent = entry.label.replace(/\.drawio$/i, '');
-    header.appendChild(label);
+    header.append(icon, label);
 
     if (entry.mode !== 'edit') {
-      const button = document.createElement('button');
-      button.type = 'button';
-      button.className = 'drawio-embed-btn';
-      button.dataset.action = 'open-file';
-      button.dataset.filePath = entry.filePath;
-      button.textContent = 'Open';
-      header.appendChild(button);
+      header.appendChild(this.createOpenButton(entry));
     }
 
+    header.appendChild(this.createMaximizeButton(entry, wrapper));
+
     const iframe = document.createElement('iframe');
     iframe.className = 'drawio-embed-iframe';
     iframe.loading = 'lazy';
@@ -287,24 +300,23 @@ export class DrawioEmbedController {
     }
 
     const wrapper = document.createElement('div');
-    wrapper.className = 'drawio-embed is-static-preview';
+    wrapper.className = 'drawio-embed diagram-preview-shell is-static-preview';
     wrapper.dataset.file = entry.filePath;
+    wrapper.dataset.drawioKey = entry.key;
 
     const header = document.createElement('div');
-    header.className = 'drawio-embed-header';
+    header.className = 'drawio-embed-header diagram-preview-toolbar';
+
+    const icon = document.createElement('span');
+    icon.className = 'drawio-embed-icon';
+    icon.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>';
 
     const label = document.createElement('span');
     label.className = 'drawio-embed-label';
     label.textContent = entry.label.replace(/\.drawio$/i, '');
-    header.appendChild(label);
+    header.append(icon, label);
 
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.className = 'drawio-embed-btn';
-    button.dataset.action = 'open-file';
-    button.dataset.filePath = entry.filePath;
-    button.textContent = 'Open';
-    header.appendChild(button);
+    header.append(this.createOpenButton(entry), this.createMaximizeButton(entry, wrapper));
 
     const viewerShell = document.createElement('div');
     viewerShell.className = 'drawio-viewer-shell';
@@ -346,6 +358,18 @@ export class DrawioEmbedController {
     graphElement.setAttribute('role', 'button');
     graphElement.setAttribute('tabindex', '0');
     graphElement.setAttribute('aria-label', `Open ${entry.label.replace(/\.drawio$/i, '')}`);
+    graphElement.addEventListener('click', (event) => {
+      event.preventDefault();
+      this.onOpenFile?.(entry.filePath);
+    });
+    graphElement.addEventListener('keydown', (event) => {
+      if (event.key !== 'Enter' && event.key !== ' ') {
+        return;
+      }
+
+      event.preventDefault();
+      this.onOpenFile?.(entry.filePath);
+    });
     graphElement.dataset.mxgraph = JSON.stringify({
       'check-visible-state': false,
       center: true,
@@ -411,6 +435,146 @@ export class DrawioEmbedController {
 
   syncLayout() {}
 
+  createOpenButton(entry) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'drawio-embed-btn ui-preview-action ui-preview-action--icon-only';
+    button.dataset.action = 'open-file';
+    button.dataset.filePath = entry.filePath;
+    button.title = 'Edit in draw.io';
+    button.setAttribute('aria-label', 'Edit in draw.io');
+    setDiagramActionButtonIcon(button, 'edit');
+    button.addEventListener('click', (event) => {
+      event.preventDefault();
+      this.onOpenFile?.(entry.filePath);
+    });
+    return button;
+  }
+
+  createMaximizeButton(entry, wrapper) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'drawio-embed-btn ui-preview-action ui-preview-action--icon-only';
+    button.dataset.action = 'toggle-maximize';
+    button.dataset.filePath = entry.filePath;
+    button.dataset.drawioKey = entry.key;
+
+    const syncState = () => {
+      const isMaximized = this.maximizedEntry?.key === entry.key;
+      setDiagramActionButtonIcon(button, isMaximized ? 'restore' : 'maximize');
+      button.title = isMaximized ? 'Restore diagram size' : 'Maximize diagram';
+      button.setAttribute('aria-label', isMaximized ? 'Restore diagram size' : 'Maximize diagram');
+    };
+
+    button.addEventListener('click', (event) => {
+      event.preventDefault();
+      if (this.maximizedEntry?.key === entry.key) {
+        this._exitMaximizedEntry();
+      } else {
+        this._enterMaximizedEntry(entry, wrapper);
+      }
+      this._syncMaximizeButtons();
+    });
+
+    syncState();
+    return button;
+  }
+
+  _ensureMaximizedRoot() {
+    if (this.maximizedRoot?.isConnected && this.maximizedRoot.parentElement === document.body) {
+      return this.maximizedRoot;
+    }
+
+    let maximizedRoot = document.body.querySelector('[data-drawio-maximized-root="true"]');
+    if (!maximizedRoot) {
+      maximizedRoot = document.createElement('div');
+      maximizedRoot.dataset.drawioMaximizedRoot = 'true';
+      maximizedRoot.className = 'drawio-maximized-root';
+      document.body.appendChild(maximizedRoot);
+    }
+
+    this.maximizedRoot = maximizedRoot;
+    return maximizedRoot;
+  }
+
+  _enterMaximizedEntry(entry, wrapper = entry?.wrapper) {
+    if (!entry?.wrapper || entry.wrapper !== wrapper) {
+      return;
+    }
+
+    if (this.maximizedEntry?.key === entry.key) {
+      return;
+    }
+
+    this._exitMaximizedEntry();
+
+    const maximizedRoot = this._ensureMaximizedRoot();
+    const parent = entry.wrapper.parentElement;
+    if (!parent) {
+      return;
+    }
+
+    const spacer = document.createElement('div');
+    spacer.className = 'drawio-maximize-spacer';
+    spacer.style.height = `${Math.ceil(entry.wrapper.getBoundingClientRect().height)}px`;
+
+    entry.maximizeSpacer = spacer;
+    entry.restoreParent = parent;
+    entry.restoreNextSibling = entry.wrapper.nextSibling || null;
+    parent.insertBefore(spacer, entry.wrapper);
+
+    maximizedRoot.hidden = false;
+    maximizedRoot.appendChild(entry.wrapper);
+    entry.wrapper.classList.add('is-maximized');
+    document.body.classList.add('drawio-maximized-open');
+    this.maximizedEntry = entry;
+  }
+
+  _exitMaximizedEntry() {
+    const entry = this.maximizedEntry;
+    if (!entry?.wrapper) {
+      this.maximizedEntry = null;
+      document.body.classList.remove('drawio-maximized-open');
+      return;
+    }
+
+    const { maximizeSpacer, restoreNextSibling, restoreParent } = entry;
+    entry.wrapper.classList.remove('is-maximized');
+
+    if (maximizeSpacer?.parentElement) {
+      maximizeSpacer.replaceWith(entry.wrapper);
+    } else if (restoreParent?.isConnected) {
+      if (restoreNextSibling?.parentElement === restoreParent) {
+        restoreParent.insertBefore(entry.wrapper, restoreNextSibling);
+      } else {
+        restoreParent.appendChild(entry.wrapper);
+      }
+    }
+
+    entry.maximizeSpacer = null;
+    entry.restoreParent = null;
+    entry.restoreNextSibling = null;
+    this.maximizedEntry = null;
+    document.body.classList.remove('drawio-maximized-open');
+    if (this.maximizedRoot && this.maximizedRoot.childElementCount === 0) {
+      this.maximizedRoot.hidden = true;
+    }
+  }
+
+  _syncMaximizeButtons() {
+    this.embedEntries.forEach((entry) => {
+      const button = entry.wrapper?.querySelector('.drawio-embed-btn[data-action="toggle-maximize"]');
+      if (!(button instanceof HTMLElement)) {
+        return;
+      }
+
+      const isMaximized = this.maximizedEntry?.key === entry.key;
+      setDiagramActionButtonIcon(button, isMaximized ? 'restore' : 'maximize');
+      button.title = isMaximized ? 'Restore diagram size' : 'Maximize diagram';
+      button.setAttribute('aria-label', isMaximized ? 'Restore diagram size' : 'Maximize diagram');
+    });
+  }
+
   _findEntryByInstanceId(instanceId) {
     for (const entry of this.embedEntries.values()) {
       if (entry.instanceId === instanceId) {
@@ -434,7 +598,7 @@ export class DrawioEmbedController {
 
     if (payload.type === 'fallback-text') {
       if (entry.mode === 'view') {
-        this.renderExportFallback(entry, 'Failed to render draw.io preview');
+        this.renderViewerFallback(entry, 'Failed to render draw.io preview');
         return;
       }
       this.onOpenTextFile?.(entry.filePath);
@@ -467,17 +631,12 @@ export class DrawioEmbedController {
       }
       return;
     }
+  }
 
-    const openButton = event.target.closest('.drawio-embed-btn[data-action="open-file"]');
-    if (openButton) {
-      event.preventDefault();
-      this.onOpenFile?.(openButton.dataset.filePath || '');
-    }
-
-    const viewerFrame = event.target.closest('.drawio-viewer-frame[data-action="open-file"]');
-    if (viewerFrame) {
-      event.preventDefault();
-      this.onOpenFile?.(viewerFrame.dataset.filePath || '');
+  _onKeyDown(event) {
+    if (event.key === 'Escape') {
+      this._exitMaximizedEntry();
+      this._syncMaximizeButtons();
     }
   }
 

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

@@ -11,6 +11,7 @@ import {
   normalizeVaultPathInput,
 } from '../domain/vault-paths.js';
 import { createWorkspaceRequestId } from '../domain/workspace-request-id.js';
+import { buttonClassNames } from './components/ui/button.js';
 import { CreateMenuPresenter } from './create-menu-presenter.js';
 
 function getPathLeaf(path) {
@@ -333,8 +334,8 @@ export class FileActionController {
 
     this.actionSubmitButton.textContent = submitLabel;
     this.actionSubmitButton.disabled = false;
-    this.actionSubmitButton.classList.toggle('btn-primary', !destructive);
-    this.actionSubmitButton.classList.toggle('btn-danger', destructive);
+    this.actionSubmitButton.classList.toggle('ui-button--primary', !destructive);
+    this.actionSubmitButton.classList.toggle('ui-button--danger', destructive);
     this.actionCancelButton.disabled = false;
 
     if (typeof this.actionDialog.showModal === 'function') {
@@ -384,8 +385,7 @@ export class FileActionController {
     if (this.actionSubmitButton) {
       this.actionSubmitButton.textContent = 'Save';
       this.actionSubmitButton.disabled = false;
-      this.actionSubmitButton.classList.add('btn-primary');
-      this.actionSubmitButton.classList.remove('btn-danger');
+      this.actionSubmitButton.className = buttonClassNames({ variant: 'primary' });
     }
     if (this.actionCancelButton) {
       this.actionCancelButton.disabled = false;

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

@@ -3,6 +3,7 @@ import {
   stripVaultFileExtension,
 } from '../../domain/file-kind.js';
 import { escapeHtml } from '../domain/vault-utils.js';
+import { buttonClassNames } from './components/ui/button.js';
 
 function getPathLeaf(path) {
   return String(path ?? '')
@@ -612,7 +613,10 @@ export class FileExplorerView {
     items.forEach((item) => {
       const button = document.createElement('button');
       button.type = 'button';
-      button.className = `ui-button btn btn-secondary file-action-sheet-item${item.danger ? ' file-context-danger' : ''}`;
+      button.className = buttonClassNames({
+        variant: 'secondary',
+        extra: ['file-action-sheet-item', item.danger ? 'file-context-danger' : ''],
+      });
       button.textContent = item.label;
       button.addEventListener('click', () => {
         this.removeContextMenu();
@@ -623,7 +627,10 @@ export class FileExplorerView {
 
     const cancelButton = document.createElement('button');
     cancelButton.type = 'button';
-    cancelButton.className = 'ui-button btn btn-ghost file-action-sheet-item';
+    cancelButton.className = buttonClassNames({
+      variant: 'ghost',
+      extra: 'file-action-sheet-item',
+    });
     cancelButton.textContent = 'Cancel';
     cancelButton.addEventListener('click', () => {
       this.removeContextMenu();

package/src/client/presentation/file-history-view-controller.js

@@ -1,5 +1,6 @@
 import { escapeHtml } from '../domain/vault-utils.js';
 import { resolveApiUrl } from '../domain/runtime-paths.js';
+import { buttonClassNames } from './components/ui/button.js';
 
 const HISTORY_PAGE_SIZE = 30;
 
@@ -687,7 +688,7 @@ export class FileHistoryViewController {
         </div>
         <div class="file-history-detail-actions">
           <button
-            class="ui-button ui-action-button ui-action-button--surface btn btn-secondary"
+            class="${buttonClassNames({ variant: 'secondary', action: true, surface: true })}"
             type="button"
             data-file-history-open-selected-diff
           >
@@ -695,7 +696,7 @@ export class FileHistoryViewController {
           </button>
           ${entry.type === 'commit' ? `
             <button
-              class="ui-button ui-action-button btn btn-primary"
+              class="${buttonClassNames({ variant: 'primary', action: true })}"
               type="button"
               data-file-history-open-selected-preview
             >
@@ -783,7 +784,7 @@ export class FileHistoryViewController {
           ${this.history.hasMore ? `
             <div class="git-history-footer file-history-footer">
               <button
-                class="ui-button ui-button--compact ui-action-button ui-action-button--surface btn btn-secondary git-history-load-more"
+                class="${buttonClassNames({ variant: 'secondary', size: 'compact', action: true, surface: true, extra: 'git-history-load-more' })}"
                 type="button"
                 data-file-history-load-more
                 ${this.history.loadingMore ? 'disabled' : ''}

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

@@ -1,5 +1,6 @@
 import { escapeHtml } from '../domain/vault-utils.js';
 import { resolveApiUrl } from '../domain/runtime-paths.js';
+import { buttonClassNames } from './components/ui/button.js';
 
 function getPathLeaf(pathValue) {
   return String(pathValue ?? '').split('/').pop() || '';
@@ -586,7 +587,7 @@ export class GitDiffViewController {
         <div class="diff-limit-card">
           <strong>Large diff withheld</strong>
           <span>This file diff is large enough to impact rendering performance.</span>
-          <button class="ui-button btn btn-secondary diff-load-full-btn" type="button" data-load-full-diff data-diff-file-path="${escapeHtml(detail.path)}">Load full diff</button>
+          <button class="${buttonClassNames({ variant: 'secondary', extra: 'diff-load-full-btn' })}" type="button" data-load-full-diff data-diff-file-path="${escapeHtml(detail.path)}">Load full diff</button>
         </div>
       `;
     }

package/src/client/presentation/git-panel-controller.js

@@ -1,5 +1,7 @@
 import { escapeHtml } from '../domain/vault-utils.js';
 import { resolveApiUrl } from '../domain/runtime-paths.js';
+import { buttonClassNames } from './components/ui/button.js';
+import { segmentedButtonClassNames, segmentedControlClassNames } from './components/ui/segmented-control.js';
 
 const HISTORY_PAGE_SIZE = 30;
 const REFRESH_INTERVAL_MS = 10_000;
@@ -792,9 +794,9 @@ export class GitPanelController {
 
   renderPanelModes() {
     return `
-      <div class="ui-segmented-control ui-segmented-control--pill git-panel-mode-switch" role="tablist" aria-label="Git panel modes">
+      <div class="${segmentedControlClassNames({ pill: true, extra: 'git-panel-mode-switch' })}" role="tablist" aria-label="Git panel modes">
         <button
-          class="ui-segmented-btn git-panel-mode-btn${this.panelMode === 'changes' ? ' active' : ''}"
+          class="${segmentedButtonClassNames({ active: this.panelMode === 'changes', extra: 'git-panel-mode-btn' })}"
           type="button"
           data-git-panel-mode="changes"
           aria-selected="${this.panelMode === 'changes'}"
@@ -802,7 +804,7 @@ export class GitPanelController {
           Changes
         </button>
         <button
-          class="ui-segmented-btn git-panel-mode-btn${this.panelMode === 'history' ? ' active' : ''}"
+          class="${segmentedButtonClassNames({ active: this.panelMode === 'history', extra: 'git-panel-mode-btn' })}"
           type="button"
           data-git-panel-mode="history"
           aria-selected="${this.panelMode === 'history'}"
@@ -868,7 +870,7 @@ export class GitPanelController {
       ${this.history.hasMore ? `
         <div class="git-history-footer">
             <button
-              class="ui-button ui-button--compact ui-action-button ui-action-button--surface btn btn-secondary git-history-load-more"
+              class="${buttonClassNames({ variant: 'secondary', size: 'compact', action: true, surface: true, extra: 'git-history-load-more' })}"
             type="button"
             data-git-history-load-more
             ${this.history.loadingMore ? 'disabled' : ''}
@@ -896,12 +898,12 @@ export class GitPanelController {
       ${hasChanges ? `
         <div class="git-panel-footer">
           <div class="git-panel-footer-actions">
-            <button class="ui-button ui-button--compact ui-action-button ui-action-button--surface btn btn-secondary" type="button" data-git-view-all>
+            <button class="${buttonClassNames({ variant: 'secondary', size: 'compact', action: true, surface: true })}" type="button" data-git-view-all>
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M2 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
               View Full Diff
             </button>
             <button
-              class="ui-button ui-action-button ui-action-button--wide btn btn-primary git-footer-commit-btn"
+              class="${buttonClassNames({ variant: 'primary', action: true, wide: true, extra: 'git-footer-commit-btn' })}"
               type="button"
               data-git-commit-staged
               ${!hasStagedChanges || isCommitPending ? 'disabled' : ''}
@@ -953,7 +955,7 @@ export class GitPanelController {
         </div>
         <div class="git-branch-actions" role="group" aria-label="Remote sync actions">
           <button
-            class="ui-button ui-button--compact ui-pill-button ui-action-pill ui-action-pill--surface btn btn-secondary"
+            class="${buttonClassNames({ variant: 'secondary', size: 'compact', pill: true, surface: true, extra: 'ui-action-pill' })}"
             type="button"
             data-git-sync-action="pull"
             title="${hasUpstream ? 'Pull remote changes (fast-forward only)' : 'No upstream branch configured'}"
@@ -963,7 +965,7 @@ export class GitPanelController {
             ${isPullPending ? '...' : `${actionIconSvg('pull')}<span>Pull</span>`}
           </button>
           <button
-            class="ui-button ui-button--compact ui-pill-button ui-action-pill ui-action-pill--surface btn btn-secondary"
+            class="${buttonClassNames({ variant: 'secondary', size: 'compact', pill: true, surface: true, extra: 'ui-action-pill' })}"
             type="button"
             data-git-sync-action="push"
             title="${hasUpstream ? 'Push local commits' : 'No upstream branch configured'}"

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

@@ -1,7 +1,12 @@
 export class LayoutController {
-  constructor({ mobileBreakpointQuery = window.matchMedia('(max-width: 768px)'), onMeasureEditor }) {
+  constructor({
+    mobileBreakpointQuery = window.matchMedia('(max-width: 768px)'),
+    onMeasureEditor,
+    onViewRequest = null,
+  }) {
     this.mobileBreakpointQuery = mobileBreakpointQuery;
     this.onMeasureEditor = onMeasureEditor;
+    this.onViewRequest = onViewRequest;
     this.preferredView = 'split';
     this.mobileShowsEditor = !this.isMobileViewport();
     this.currentView = this.mobileShowsEditor ? this.preferredView : 'preview';
@@ -19,7 +24,13 @@ export class LayoutController {
 
   initialize() {
     this.viewButtons.forEach((button) => {
-      button.addEventListener('click', () => this.setView(button.dataset.view));
+      button.addEventListener('click', () => {
+        if (this.onViewRequest?.(button.dataset.view) === false) {
+          return;
+        }
+
+        this.setView(button.dataset.view);
+      });
     });
 
     this.mobileToggleButton?.addEventListener('click', () => this.toggleMobileView());
@@ -27,6 +38,19 @@ export class LayoutController {
     this.restorePreferredView();
   }
 
+  primeView(view) {
+    if (!view) {
+      return;
+    }
+
+    if (this.isMobileViewport()) {
+      this.mobileShowsEditor = view !== 'preview';
+      return;
+    }
+
+    this.preferredView = view;
+  }
+
   reset() {
     this.restorePreferredView();
 
@@ -73,8 +97,14 @@ export class LayoutController {
   }
 
   toggleMobileView() {
-    this.mobileShowsEditor = !this.mobileShowsEditor;
-    this.applyView(this.mobileShowsEditor ? 'split' : 'preview');
+    const nextShowsEditor = !this.mobileShowsEditor;
+    const nextView = nextShowsEditor ? 'split' : 'preview';
+    if (this.onViewRequest?.(nextView) === false) {
+      return;
+    }
+
+    this.mobileShowsEditor = nextShowsEditor;
+    this.applyView(nextView);
     this.updateMobileToggleButton(this.mobileShowsEditor ? 'Preview' : 'Editor');
 
     if (this.mobileShowsEditor) {

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

@@ -1,9 +1,11 @@
 /* ===== COMPONENTS / ACTIONS ===== */
 
+.ui-button--action,
 .ui-toolbar-action {
   flex-shrink: 0;
 }
 
+.ui-button--action,
 .ui-action-button {
   min-height: var(--control-h-md);
   padding: 0 14px;
@@ -13,18 +15,22 @@
   white-space: nowrap;
 }
 
+.ui-button--wide,
 .ui-action-button--wide {
   min-width: 92px;
 }
 
+.ui-button--surface,
 .ui-action-button--surface {
   background: var(--color-surface-offset);
 }
 
+.ui-button--surface:hover:not(:disabled),
 .ui-action-button--surface:hover:not(:disabled) {
   background: var(--color-surface-dynamic);
 }
 
+.ui-button--pill,
 .ui-action-pill {
   flex-shrink: 0;
   min-width: 0;

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

@@ -1,5 +1,6 @@
 /* ===== COMPONENTS / NAVIGATION ===== */
 
+.ui-button--toolbar,
 .ui-toolbar-button {
   display: flex;
   align-items: center;