collabmd 0.1.27 → 0.1.30

package/src/client/presentation/comment-ui/comment-ui-card.js

@@ -12,6 +12,8 @@ import {
   hasLocalReaction,
   isReactionPickerOpen,
 } from './comment-ui-shared.js';
+import { buttonClassNames } from '../components/ui/button.js';
+import { inputClassNames } from '../components/ui/input.js';
 
 /** @this {any} */
 function ensureCardRoot() {
@@ -144,7 +146,12 @@ function renderCard() {
 
   const closeButton = document.createElement('button');
   closeButton.type = 'button';
-  closeButton.className = 'ui-button ui-button--compact btn btn-ghost ui-pill-button ui-action-pill comment-card-close';
+  closeButton.className = buttonClassNames({
+    variant: 'ghost',
+    size: 'compact',
+    pill: true,
+    extra: ['ui-action-pill', 'comment-card-close'],
+  });
   closeButton.setAttribute('aria-label', 'Close comments');
   closeButton.textContent = 'Close';
   closeButton.addEventListener('click', () => this.closeCard());
@@ -234,7 +241,7 @@ function createComposer() {
   form.className = 'comment-card-form';
 
   const textarea = document.createElement('textarea');
-  textarea.className = 'input comment-card-input';
+  textarea.className = inputClassNames({ extra: 'comment-card-input' });
   textarea.rows = 4;
   textarea.maxLength = COMMENT_BODY_MAX_LENGTH;
   textarea.placeholder = 'Add context, feedback, or a question...';
@@ -244,13 +251,13 @@ function createComposer() {
 
   const cancel = document.createElement('button');
   cancel.type = 'button';
-  cancel.className = 'ui-button btn btn-secondary';
+  cancel.className = buttonClassNames({ variant: 'secondary' });
   cancel.textContent = 'Cancel';
   cancel.addEventListener('click', () => this.closeCard());
 
   const submit = document.createElement('button');
   submit.type = 'submit';
-  submit.className = 'ui-button btn btn-primary';
+  submit.className = buttonClassNames({ variant: 'primary' });
   submit.textContent = 'Post comment';
 
   actions.append(cancel, submit);
@@ -298,13 +305,23 @@ function createThreadElement(thread) {
 
   const jump = document.createElement('button');
   jump.type = 'button';
-  jump.className = 'ui-button ui-button--compact btn btn-ghost ui-pill-button ui-action-pill comment-thread-card-action';
+  jump.className = buttonClassNames({
+    variant: 'ghost',
+    size: 'compact',
+    pill: true,
+    extra: ['ui-action-pill', 'comment-thread-card-action'],
+  });
   jump.textContent = 'Jump';
   jump.addEventListener('click', () => this.onNavigateToLine?.(thread.anchor?.startLine ?? 1));
 
   const reply = document.createElement('button');
   reply.type = 'button';
-  reply.className = 'ui-button ui-button--compact btn btn-ghost ui-pill-button ui-action-pill comment-thread-card-action';
+  reply.className = buttonClassNames({
+    variant: 'ghost',
+    size: 'compact',
+    pill: true,
+    extra: ['ui-action-pill', 'comment-thread-card-action'],
+  });
   const isReplying = this.activeCard?.replyThreadId === thread.id;
   reply.classList.toggle('is-active', isReplying);
   reply.textContent = 'Reply';
@@ -321,7 +338,12 @@ function createThreadElement(thread) {
 
   const resolve = document.createElement('button');
   resolve.type = 'button';
-  resolve.className = 'ui-button ui-button--compact btn btn-ghost ui-pill-button ui-action-pill comment-thread-card-action is-danger';
+  resolve.className = buttonClassNames({
+    variant: 'ghost',
+    size: 'compact',
+    pill: true,
+    extra: ['ui-action-pill', 'comment-thread-card-action', 'is-danger'],
+  });
   resolve.textContent = 'Resolve';
   resolve.addEventListener('click', async () => {
     await this.onResolveThread?.(thread.id);
@@ -497,7 +519,7 @@ function createReplyComposer(thread) {
   form.className = 'comment-reply-form';
 
   const textarea = document.createElement('textarea');
-  textarea.className = 'input comment-card-input';
+  textarea.className = inputClassNames({ extra: 'comment-card-input' });
   textarea.rows = 3;
   textarea.maxLength = COMMENT_BODY_MAX_LENGTH;
   textarea.placeholder = 'Reply to thread...';
@@ -507,7 +529,7 @@ function createReplyComposer(thread) {
 
   const cancel = document.createElement('button');
   cancel.type = 'button';
-  cancel.className = 'ui-button btn btn-secondary';
+  cancel.className = buttonClassNames({ variant: 'secondary' });
   cancel.textContent = 'Cancel';
   cancel.addEventListener('click', () => {
     this.activeCard = {
@@ -519,7 +541,7 @@ function createReplyComposer(thread) {
 
   const submit = document.createElement('button');
   submit.type = 'submit';
-  submit.className = 'ui-button btn btn-primary';
+  submit.className = buttonClassNames({ variant: 'primary' });
   submit.textContent = 'Reply';
 
   actions.append(cancel, submit);

package/src/client/presentation/comments-panel.js

@@ -1,4 +1,6 @@
 import { COMMENT_BODY_MAX_LENGTH } from '../../domain/comment-threads.js';
+import { buttonClassNames } from './components/ui/button.js';
+import { inputClassNames } from './components/ui/input.js';
 
 function isLeafSourceBlock(element) {
   return !element.querySelector('[data-source-line]');
@@ -452,7 +454,7 @@ export class CommentsPanel {
     form.className = 'comment-reply-form';
 
     const textarea = document.createElement('textarea');
-    textarea.className = 'input comment-reply-input';
+    textarea.className = inputClassNames({ extra: 'comment-reply-input' });
     textarea.rows = 3;
     textarea.placeholder = `Reply on ${formatLineLabel(thread.anchor)}...`;
     textarea.maxLength = COMMENT_BODY_MAX_LENGTH;
@@ -463,7 +465,7 @@ export class CommentsPanel {
 
     const cancelButton = document.createElement('button');
     cancelButton.type = 'button';
-    cancelButton.className = 'ui-button btn btn-secondary';
+    cancelButton.className = buttonClassNames({ variant: 'secondary' });
     cancelButton.textContent = 'Cancel';
     cancelButton.addEventListener('click', () => {
       this.replyDraftThreadId = null;
@@ -472,7 +474,7 @@ export class CommentsPanel {
 
     const submitButton = document.createElement('button');
     submitButton.type = 'submit';
-    submitButton.className = 'ui-button btn btn-primary';
+    submitButton.className = buttonClassNames({ variant: 'primary' });
     submitButton.textContent = 'Reply';
 
     actions.append(cancelButton, submitButton);

package/src/client/presentation/components/ui/badge.js

@@ -0,0 +1,24 @@
+import { classNames } from './class-names.js';
+
+/**
+ * @param {{ tone?: 'accent'|'solid'|'muted'|'code', count?: boolean, hidden?: boolean, extra?: string|string[] }} [options]
+ * @returns {string}
+ */
+export function badgeClassNames(options = {}) {
+  const {
+    tone = 'accent',
+    count = false,
+    hidden = false,
+    extra = [],
+  } = options;
+
+  return classNames(
+    'ui-pill-badge',
+    tone && `ui-pill-badge--${tone}`,
+    {
+      'ui-pill-badge--count': count,
+      hidden,
+    },
+    extra,
+  );
+}

package/src/client/presentation/components/ui/button.js

@@ -0,0 +1,78 @@
+import { classNames } from './class-names.js';
+
+/**
+ * @typedef {object} ButtonClassOptions
+ * @property {'primary'|'secondary'|'danger'|'ghost'} [variant]
+ * @property {'md'|'lg'|'compact'} [size]
+ * @property {boolean} [toggle]
+ * @property {boolean} [toolbar]
+ * @property {boolean} [action]
+ * @property {boolean} [wide]
+ * @property {boolean} [surface]
+ * @property {boolean} [pill]
+ * @property {boolean} [hidden]
+ * @property {boolean} [active]
+ * @property {string|string[]} [extra]
+ */
+
+/**
+ * @param {ButtonClassOptions} [options]
+ * @returns {string}
+ */
+export function buttonClassNames(options = {}) {
+  const {
+    variant = 'secondary',
+    size = 'md',
+    toggle = false,
+    toolbar = false,
+    action = false,
+    wide = false,
+    surface = false,
+    pill = false,
+    hidden = false,
+    active = false,
+    extra = [],
+  } = options;
+
+  return classNames(
+    'ui-button',
+    variant && `ui-button--${variant}`,
+    size !== 'md' && `ui-button--${size}`,
+    {
+      'ui-button--toggle': toggle,
+      'ui-button--toolbar': toolbar,
+      'ui-button--action': action,
+      'ui-button--wide': wide,
+      'ui-button--surface': surface,
+      'ui-button--pill': pill,
+      active,
+      hidden,
+    },
+    extra,
+  );
+}
+
+/**
+ * @param {{ toolbar?: boolean, action?: boolean, surface?: boolean, hidden?: boolean, extra?: string|string[] }} [options]
+ * @returns {string}
+ */
+export function iconButtonClassNames(options = {}) {
+  const {
+    toolbar = false,
+    action = false,
+    surface = false,
+    hidden = false,
+    extra = [],
+  } = options;
+
+  return classNames(
+    'ui-icon-button',
+    {
+      'ui-icon-button--toolbar': toolbar,
+      'ui-icon-button--action': action,
+      'ui-icon-button--surface': surface,
+      hidden,
+    },
+    extra,
+  );
+}

package/src/client/presentation/components/ui/class-names.js

@@ -0,0 +1,30 @@
+export function classNames(...parts) {
+  const tokens = [];
+
+  for (const part of parts) {
+    if (!part) {
+      continue;
+    }
+
+    if (Array.isArray(part)) {
+      const nested = classNames(...part);
+      if (nested) {
+        tokens.push(nested);
+      }
+      continue;
+    }
+
+    if (typeof part === 'object') {
+      Object.entries(part).forEach(([className, enabled]) => {
+        if (enabled) {
+          tokens.push(className);
+        }
+      });
+      continue;
+    }
+
+    tokens.push(String(part));
+  }
+
+  return tokens.join(' ');
+}

package/src/client/presentation/components/ui/ensure-ui-component-styles.js

@@ -0,0 +1,18 @@
+let uiComponentStylesPromise = null;
+
+export function ensureUiComponentStyles() {
+  if (typeof document === 'undefined') {
+    return Promise.resolve();
+  }
+
+  if (!uiComponentStylesPromise) {
+    uiComponentStylesPromise = Promise.all([
+      import('../../../styles/primitives/controls.css'),
+      import('../../../styles/components/actions.css'),
+      import('../../../styles/components/navigation.css'),
+      import('../../../styles/components/states.css'),
+    ]).then(() => undefined);
+  }
+
+  return uiComponentStylesPromise;
+}

package/src/client/presentation/components/ui/input.js

@@ -0,0 +1,9 @@
+import { classNames } from './class-names.js';
+
+/**
+ * @param {{ extra?: string|string[] }} [options]
+ * @returns {string}
+ */
+export function inputClassNames(options = {}) {
+  return classNames('ui-input', options.extra ?? []);
+}

package/src/client/presentation/components/ui/segmented-control.js

@@ -0,0 +1,31 @@
+import { classNames } from './class-names.js';
+
+/**
+ * @param {{ pill?: boolean, hidden?: boolean, extra?: string|string[] }} [options]
+ * @returns {string}
+ */
+export function segmentedControlClassNames(options = {}) {
+  return classNames(
+    'ui-segmented-control',
+    {
+      'ui-segmented-control--pill': options.pill,
+      hidden: options.hidden,
+    },
+    options.extra ?? [],
+  );
+}
+
+/**
+ * @param {{ active?: boolean, hidden?: boolean, extra?: string|string[] }} [options]
+ * @returns {string}
+ */
+export function segmentedButtonClassNames(options = {}) {
+  return classNames(
+    'ui-segmented-btn',
+    {
+      active: options.active,
+      hidden: options.hidden,
+    },
+    options.extra ?? [],
+  );
+}

package/src/client/presentation/create-menu-presenter.js

@@ -1,3 +1,5 @@
+import { buttonClassNames } from './components/ui/button.js';
+
 function getDefaultMobileBreakpointQuery() {
   if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
     return { matches: false };
@@ -151,7 +153,10 @@ export class CreateMenuPresenter {
 
     const cancelButton = document.createElement('button');
     cancelButton.type = 'button';
-    cancelButton.className = 'ui-button btn btn-ghost file-action-sheet-item create-action-sheet-cancel';
+    cancelButton.className = buttonClassNames({
+      variant: 'ghost',
+      extra: ['file-action-sheet-item', 'create-action-sheet-cancel'],
+    });
     cancelButton.textContent = 'Cancel';
     cancelButton.addEventListener('click', () => {
       this.close();
@@ -182,7 +187,10 @@ export class CreateMenuPresenter {
       const button = document.createElement('button');
       button.type = 'button';
       button.className = mobile
-        ? 'ui-button btn btn-ghost file-action-sheet-item create-action-sheet-item create-action-sheet-option'
+        ? buttonClassNames({
+          variant: 'ghost',
+          extra: ['file-action-sheet-item', 'create-action-sheet-item', 'create-action-sheet-option'],
+        })
         : 'create-menu-item';
       button.setAttribute('role', mobile ? 'button' : 'menuitem');
       button.dataset.actionId = item.id;

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;
@@ -436,11 +436,10 @@ export class FileActionController {
 
     this.setActionDialogBusy(true);
 
-    let shouldClose = false;
+    let shouldClose;
     try {
       shouldClose = await this.pendingAction.onSubmit(rawValue);
     } catch (error) {
-      shouldClose = false;
       this.showError('Failed to complete action', error);
     }
 

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>
       `;
     }
@@ -695,16 +696,13 @@ export class GitDiffViewController {
     const errorMessage = this.fileErrors.get(file.path);
     const detail = this.getFileDetail(file.path) ?? file;
 
-    let bodyMarkup = '';
-    if (isCollapsed) {
-      bodyMarkup = '';
-    } else if (isLoading) {
-      bodyMarkup = '<div class="diff-empty-state">Loading file diff...</div>';
-    } else if (errorMessage) {
-      bodyMarkup = `<div class="diff-empty-state">${escapeHtml(errorMessage)}</div>`;
-    } else {
-      bodyMarkup = this.renderDiffDetail(detail, index, { includeHeader: false });
-    }
+    const bodyMarkup = isCollapsed
+      ? ''
+      : isLoading
+        ? '<div class="diff-empty-state">Loading file diff...</div>'
+        : errorMessage
+          ? `<div class="diff-empty-state">${escapeHtml(errorMessage)}</div>`
+          : this.renderDiffDetail(detail, index, { includeHeader: false });
 
     return `
       <section

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) {