collabmd 0.1.27 → 0.1.30

package/src/client/application/preview-renderer.js

@@ -13,6 +13,7 @@ export class PreviewRenderer {
     getSourceFilePath,
     onAfterRenderCommit,
     onBeforeRenderCommit,
+    onPreviewLayoutChange,
     onRenderComplete,
     outlineController,
     previewContainer,
@@ -23,6 +24,7 @@ export class PreviewRenderer {
     this.getSourceFilePath = getSourceFilePath;
     this.onAfterRenderCommit = onAfterRenderCommit;
     this.onBeforeRenderCommit = onBeforeRenderCommit;
+    this.onPreviewLayoutChange = onPreviewLayoutChange;
     this.onRenderComplete = onRenderComplete;
     this.outlineController = outlineController;
     this.previewContainer = previewContainer;
@@ -35,8 +37,18 @@ export class PreviewRenderer {
     this.currentStats = null;
     this.isLargeDocument = false;
     this.hydrationPaused = false;
+    this.frontmatterCollapsed = false;
 
     this.handlePreviewClick = (event) => {
+      const frontmatterToggle = event.target.closest('.frontmatter-toggle');
+      if (frontmatterToggle) {
+        event.preventDefault();
+        this.frontmatterCollapsed = !this.frontmatterCollapsed;
+        this.applyFrontmatterState();
+        this.handleFrontmatterLayoutChange();
+        return;
+      }
+
       const mermaidButton = event.target.closest('.mermaid-placeholder-btn');
       if (mermaidButton) {
         const shell = mermaidButton.closest('.mermaid-shell');
@@ -134,6 +146,7 @@ export class PreviewRenderer {
     this.readyRenderVersion = 0;
     this.currentStats = null;
     this.isLargeDocument = false;
+    this.frontmatterCollapsed = false;
     if (this.renderExecutor.hasPendingJob()) {
       this.resetWorker('Document changed');
     }
@@ -272,7 +285,10 @@ export class PreviewRenderer {
   }
 
   async compilePreview(markdownText, renderVersion) {
-    return this.renderExecutor.compile(markdownText, renderVersion);
+    return this.renderExecutor.compile(markdownText, renderVersion, {
+      frontmatterCollapsed: this.frontmatterCollapsed,
+      frontmatterInteractive: true,
+    });
   }
 
   commitBaseRender({ html, stats }, renderVersion) {
@@ -294,6 +310,7 @@ export class PreviewRenderer {
     if (renderHost) {
       renderHost.innerHTML = html;
     }
+    this.applyFrontmatterState();
     this.reconcileHydratedMermaids();
     this.reconcileHydratedPlantUmls();
     this.setPhase('base');
@@ -313,6 +330,39 @@ export class PreviewRenderer {
     }
   }
 
+  applyFrontmatterState() {
+    const block = this.renderHost?.querySelector?.('.frontmatter-block');
+    if (!(block instanceof HTMLElement)) {
+      return;
+    }
+
+    const collapsed = this.frontmatterCollapsed;
+    const toggle = block.querySelector('.frontmatter-toggle');
+    const summary = block.querySelector('.frontmatter-summary');
+    const content = block.querySelector('.frontmatter-content');
+
+    block.dataset.collapsed = collapsed ? 'true' : 'false';
+    if (toggle instanceof HTMLButtonElement) {
+      toggle.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
+      toggle.textContent = collapsed ? 'Show' : 'Hide';
+    }
+    if (summary instanceof HTMLElement) {
+      summary.hidden = !collapsed;
+    }
+    if (content instanceof HTMLElement) {
+      content.hidden = collapsed;
+    }
+  }
+
+  handleFrontmatterLayoutChange() {
+    this.outlineController.refresh();
+    this.onPreviewLayoutChange?.({
+      isLargeDocument: this.isLargeDocument,
+      renderVersion: this.activeRenderVersion,
+      stats: this.currentStats,
+    });
+  }
+
   preserveHydratedMermaidsForCommit() {
     this.mermaidHydrator.preserveHydratedShellsForCommit();
   }

package/src/client/application/workspace-chrome-controller.js

@@ -44,19 +44,21 @@ export class WorkspaceChromeController {
     this.stateStore = stateStore;
   }
 
-  prepareForFileOpen(filePath, { resetConnectionState = true } = {}) {
+  prepareForFileOpen(filePath, { drawioMode = null, resetConnectionState = true } = {}) {
     this.onViewModeReset();
     this.onBeforeFileOpen();
     this.stateStore.set('connectionHelpShown', false);
     if (resetConnectionState) {
       this.stateStore.set('connectionState', { status: 'connecting', unreachable: false });
     }
+    this.stateStore.set('currentDrawioMode', drawioMode ?? null);
     this.stateStore.set('currentFilePath', filePath);
     this.onUpdateCurrentFile(filePath);
     this.onUpdateLobbyCurrentFile(filePath);
     this.onUpdateActiveFile(filePath);
     this.onUpdateVisibleChrome(filePath, {
       displayName: this.getDisplayName(filePath),
+      drawioMode,
       isMarkdown: isMarkdownFilePath(filePath),
     });
     this.showEditorLoading();

package/src/client/application/workspace-coordinator.js

@@ -160,13 +160,19 @@ export class WorkspaceCoordinator {
       return;
     }
 
+    const normalizedDrawioMode = drawioMode ?? null;
+    const currentDrawioMode = this.stateStore.get('currentDrawioMode') ?? null;
     const isDrawio = this.isDrawioFile(filePath) && drawioMode !== 'text' && this.shouldUseDrawioPreview(filePath);
     const isExcalidraw = this.isExcalidrawFile(filePath);
     const isImage = this.isImageFile(filePath);
     const isMermaid = this.isMermaidFile(filePath);
     const isPlantUml = this.isPlantUmlFile(filePath);
 
-    if (filePath === this.stateStore.get('currentFilePath') && (this.session || isDrawio || isExcalidraw || isImage)) {
+    if (
+      filePath === this.stateStore.get('currentFilePath')
+      && normalizedDrawioMode === currentDrawioMode
+      && (this.session || isDrawio || isExcalidraw || isImage)
+    ) {
       this.onUpdateActiveFile(filePath);
       this.onUpdateLobbyCurrentFile(filePath);
       return;
@@ -177,6 +183,7 @@ export class WorkspaceCoordinator {
 
     this.cleanupSession();
     const chromeState = this.chromeController.prepareForFileOpen(filePath, {
+      drawioMode: normalizedDrawioMode,
       resetConnectionState: !isDrawio && !isExcalidraw && !isImage,
     });
     this.reportFileOpenMetric('open_started', loadToken, { filePath });

package/src/client/application/workspace-preview-controller.js

@@ -58,7 +58,7 @@ export class WorkspacePreviewController {
     return `${fence}${language}\n${text}\n${fence}`;
   }
 
-  getPreviewSource(filePath) {
+  getPreviewSource(filePath, { drawioMode = null } = {}) {
     const source = this.getSession()?.getText() ?? '';
     if (this.isMermaidFile(filePath)) {
       return this.createDiagramPreviewDocument('mermaid', source);
@@ -68,6 +68,10 @@ export class WorkspacePreviewController {
       return this.createDiagramPreviewDocument('plantuml', source);
     }
 
+    if (this.isDrawioFile(filePath) && drawioMode === 'text') {
+      return this.createDiagramPreviewDocument('xml', source);
+    }
+
     return source;
   }
 
@@ -79,7 +83,7 @@ export class WorkspacePreviewController {
     this.elements.previewContent?.classList.remove('is-plantuml-file-preview');
   }
 
-  syncFileChrome(filePath) {
+  syncFileChrome(filePath, { drawioMode = null } = {}) {
     const isDrawio = this.isDrawioFile(filePath);
     const isExcalidraw = this.isExcalidrawFile(filePath);
     const isImage = this.isImageFile(filePath);
@@ -88,12 +92,14 @@ export class WorkspacePreviewController {
     const isPlantUml = this.isPlantUmlFile(filePath);
     const isDiagramFile = isDiagramFilePath(filePath);
 
+    this.elements.editorFindButton?.classList.toggle('hidden', !isMarkdown);
     this.elements.markdownToolbar?.classList.toggle('hidden', !isMarkdown);
+    this.elements.exportMenuGroup?.classList.toggle('hidden', !isMarkdown);
     this.elements.outlineToggle?.classList.toggle('hidden', isDiagramFile || isImage);
     this.elements.previewContent?.classList.toggle('is-mermaid-file-preview', isMermaid);
     this.elements.previewContent?.classList.toggle('is-plantuml-file-preview', isPlantUml);
 
-    if (isDrawio || isExcalidraw || isImage) {
+    if ((isDrawio && drawioMode !== 'text') || isExcalidraw || isImage) {
       this.layoutController.setView('preview', { persist: false });
       this.outlineController.close();
       this.backlinksPanel.clear();

package/src/client/application/workspace-state-store.js

@@ -9,6 +9,7 @@ export class WorkspaceStateStore {
       chatUnreadCount: 0,
       connectionHelpShown: false,
       connectionState: { status: 'disconnected', unreachable: false },
+      currentDrawioMode: null,
       currentFilePath: null,
       fileExplorerReady: false,
       followedCursorSignature: '',

package/src/client/bootstrap/collabmd-app-shell.js

@@ -7,6 +7,7 @@ import { WorkspaceStateStore } from '../application/workspace-state-store.js';
 import { bindAppShellElements } from '../application/app-shell-elements.js';
 import { chatFeature } from '../application/app-shell/chat-feature.js';
 import { commentsFeature } from '../application/app-shell/comments-feature.js';
+import { exportFeature } from '../application/app-shell/export-feature.js';
 import { gitFeature } from '../application/app-shell/git-feature.js';
 import { presenceFeature } from '../application/app-shell/presence-feature.js';
 import { uiFeature } from '../application/app-shell/ui-feature.js';
@@ -35,10 +36,12 @@ import { ThemeController } from '../presentation/theme-controller.js';
 import { ToastController } from '../presentation/toast-controller.js';
 import { VideoEmbedController } from '../presentation/video-embed-controller.js';
 import { ImageLightboxController } from '../presentation/image-lightbox-controller.js';
+import { renderAppShell } from '../presentation/app-shell-renderer.js';
 
 const APP_SHELL_FEATURES = Object.freeze({
   chat: chatFeature,
   comments: commentsFeature,
+  export: exportFeature,
   git: gitFeature,
   presence: presenceFeature,
   ui: uiFeature,
@@ -87,6 +90,7 @@ function installAppShellFeatures(appShell) {
 export class CollabMdAppShell {
   constructor() {
     installAppShellFeatures(this);
+    renderAppShell(document);
     this.elements = bindAppShellElements(document);
     this.runtimeConfig = getRuntimeConfig();
     this.stateStore = new WorkspaceStateStore();
@@ -208,6 +212,11 @@ export class CollabMdAppShell {
         this.drawioEmbed.detachForCommit();
         this.excalidrawEmbed.detachForCommit();
       },
+      onPreviewLayoutChange: () => {
+        this.scrollSyncController.invalidatePreviewBlocks();
+        this.schedulePreviewLayoutSync({ delayMs: 0 });
+        this.refreshCommentUiLayout();
+      },
       onRenderComplete: () => {
         this.videoEmbed.syncLayout();
         this.drawioEmbed.syncLayout();
@@ -223,6 +232,7 @@ export class CollabMdAppShell {
     this.layoutController = new LayoutController({
       mobileBreakpointQuery: this.mobileBreakpointQuery,
       onMeasureEditor: () => this.session?.requestMeasure(),
+      onViewRequest: (view) => this.handleLayoutViewRequest(view),
     });
     this.scrollSyncController = new ScrollSyncController({
       getEditorLineNumber: () => this.session?.getTopVisibleLineNumber(0.35) ?? 1,
@@ -421,7 +431,7 @@ export class CollabMdAppShell {
       },
       onUpdateLobbyCurrentFile: (filePath) => this.lobby.setCurrentFile(filePath),
       onUpdateVisibleChrome: (filePath, { displayName }) => {
-        this.syncFileChrome(filePath);
+        this.syncFileChrome(filePath, { drawioMode: this.currentDrawioMode });
         this.syncCommentChrome(filePath);
         this.syncFileHistoryButton({ filePath, mode: 'editor' });
         if (this.elements.activeFileName) {
@@ -493,6 +503,8 @@ export class CollabMdAppShell {
   set session(value) { this._session = value; }
   get currentFilePath() { return this.stateStore.get('currentFilePath'); }
   set currentFilePath(value) { this.stateStore.set('currentFilePath', value); }
+  get currentDrawioMode() { return this.stateStore.get('currentDrawioMode'); }
+  set currentDrawioMode(value) { this.stateStore.set('currentDrawioMode', value ?? null); }
   get globalUsers() { return this.stateStore.get('globalUsers'); }
   set globalUsers(value) { this.stateStore.set('globalUsers', value); }
   get connectionState() { return this.stateStore.get('connectionState'); }

package/src/client/domain/markdown-formatting.js

@@ -434,7 +434,7 @@ function formatHorizontalRule(text, range) {
 export function createMarkdownToolbarEdit(documentText, selectionRange, action) {
   const text = String(documentText ?? '');
   const range = normalizeRange(selectionRange, text.length);
-  let edit = null;
+  let edit;
 
   switch (action) {
     case 'bold':

package/src/client/domain/markdown-toolbar-actions.js

@@ -59,6 +59,34 @@ const ICONS = Object.freeze({
       <path d="M9 16h6"/>
     </svg>
   `,
+  indent: `
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M4 6h16"/>
+      <path d="M10 12h10"/>
+      <path d="M10 18h10"/>
+      <path d="m4 9 4 3-4 3"/>
+    </svg>
+  `,
+  outdent: `
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M4 6h16"/>
+      <path d="M10 12h10"/>
+      <path d="M10 18h10"/>
+      <path d="m8 9-4 3 4 3"/>
+    </svg>
+  `,
+  redo: `
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M21 7v6h-6"/>
+      <path d="M20 13a8 8 0 0 0-14-3"/>
+    </svg>
+  `,
+  undo: `
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M3 7v6h6"/>
+      <path d="M4 13a8 8 0 0 1 14-3"/>
+    </svg>
+  `,
   chevronDown: `
     <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
       <path d="m6 9 6 6 6-6"/>
@@ -148,6 +176,13 @@ const INLINE_ACTIONS = Object.freeze([
   { action: 'code', label: 'Inline code', title: 'Inline code', icon: ICONS.code },
 ]);
 
+const MOBILE_EDIT_COMMANDS = Object.freeze([
+  { commandId: 'undo', label: 'Undo', title: 'Undo', icon: ICONS.undo },
+  { commandId: 'redo', label: 'Redo', title: 'Redo', icon: ICONS.redo },
+  { commandId: 'indentMore', label: 'Indent', title: 'Indent', icon: ICONS.indent },
+  { commandId: 'indentLess', label: 'Outdent', title: 'Outdent', icon: ICONS.outdent },
+]);
+
 const MEDIA_ACTIONS = Object.freeze([
   { action: 'link', label: 'Insert link', title: 'Insert link', icon: ICONS.link },
   { action: 'image', label: 'Insert image', title: 'Insert image', icon: ICONS.image },
@@ -160,6 +195,7 @@ const INSERT_ACTIONS = Object.freeze([
 ]);
 
 export const markdownToolbarLayout = Object.freeze([
+  { kind: 'buttons', groupLabel: 'Edit', actions: MOBILE_EDIT_COMMANDS, mobileOnly: true },
   { kind: 'block-menu', actions: BLOCK_MENU_ACTIONS },
   { kind: 'buttons', groupLabel: 'Inline formatting', actions: INLINE_ACTIONS },
   { kind: 'buttons', groupLabel: 'Media and links', actions: MEDIA_ACTIONS },

package/src/client/drawio-editor.js

@@ -1,3 +1,6 @@
+import './styles/surfaces/embedded-editor-base.css';
+import './styles/surfaces/drawio-editor.css';
+
 import { ensureClientAuthenticated } from './infrastructure/auth-client.js';
 import { DrawioLeaseClient } from './infrastructure/drawio-lease-client.js';
 import { getRuntimeConfig } from './infrastructure/runtime-config.js';
@@ -50,7 +53,7 @@ banner.innerHTML = `
     <span class="drawio-banner-copy" id="drawioBannerText">Connecting…</span>
   </div>
   <div class="drawio-banner-actions">
-    <button type="button" class="drawio-btn" id="claimEditBtn" hidden>Claim edit</button>
+    <button type="button" class="drawio-toolbar-btn" id="claimEditBtn" hidden>Claim edit</button>
   </div>
 `;
 

package/src/client/excalidraw-editor.js

@@ -14,6 +14,8 @@ import {
   mergeAwarenessUserPatch,
   resolveLocalAwarenessUser,
 } from './domain/excalidraw-collaboration.js';
+import './styles/surfaces/embedded-editor-base.css';
+import './styles/surfaces/excalidraw-editor.css';
 import {
   normalizeScene,
   parseSceneJson,
@@ -70,6 +72,10 @@ const roomClient = new ExcalidrawRoomClient({
   vaultClient: vaultApiClient,
 });
 
+function applySurfaceTheme(theme = currentTheme) {
+  document.body.dataset.theme = theme === 'light' ? 'light' : 'dark';
+}
+
 function getNativeHistoryButton(type) {
   const button = document.querySelector(`[data-testid="button-${type}"]`);
   return button instanceof HTMLButtonElement ? button : null;
@@ -521,6 +527,7 @@ window.addEventListener('message', (event) => {
 
   if (message.type === 'set-theme') {
     currentTheme = message.theme || 'dark';
+    applySurfaceTheme(currentTheme);
     if (excalidrawAPI) {
       suppressOnChange = true;
       excalidrawAPI.updateScene({
@@ -613,6 +620,7 @@ async function init() {
   const loadingElement = document.getElementById('loadingState');
 
   try {
+    applySurfaceTheme(currentTheme);
     await ensureClientAuthenticated();
     const initialScene = await roomClient.connect({ initialUser: localAwarenessUser });
     const initialData = sceneToInitialData(initialScene, { theme: currentTheme });

package/src/client/export/export-host.js

@@ -0,0 +1,193 @@
+import { resolveAppUrl } from '../infrastructure/runtime-config.js';
+
+const EXPORT_PAGE_SOURCE = 'collabmd-export-page';
+const EXPORT_HOST_SOURCE = 'collabmd-export-host';
+const EXPORT_JOB_CLOSE_POLL_MS = 500;
+const EXPORT_JOB_TIMEOUT_MS = 60_000;
+const pendingJobs = new Map();
+let exportBridgeErrorHandler = null;
+
+function createJobId() {
+  return `export-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+function normalizeFormat(format) {
+  return format === 'pdf' ? 'pdf' : 'docx';
+}
+
+function buildExportUrl({ filePath, format, jobId }) {
+  const url = new URL(resolveAppUrl('/export-document.html'), window.location.origin);
+  url.searchParams.set('action', normalizeFormat(format));
+  url.searchParams.set('job', jobId);
+  if (filePath) {
+    url.searchParams.set('file', filePath);
+  }
+  return url.toString();
+}
+
+function createBootstrapPayload({
+  fileList = [],
+  filePath,
+  format,
+  jobId,
+  markdownText = '',
+  title = '',
+}) {
+  return {
+    action: normalizeFormat(format),
+    fileList: Array.isArray(fileList) ? fileList.slice() : [],
+    filePath: String(filePath ?? ''),
+    jobId,
+    markdownText: String(markdownText ?? ''),
+    source: EXPORT_HOST_SOURCE,
+    title: String(title ?? ''),
+    type: 'bootstrap',
+  };
+}
+
+function clearPendingJobTimers(pendingJob) {
+  if (!pendingJob) {
+    return;
+  }
+
+  if (pendingJob.closePollId) {
+    window.clearInterval(pendingJob.closePollId);
+  }
+
+  if (pendingJob.timeoutId) {
+    window.clearTimeout(pendingJob.timeoutId);
+  }
+}
+
+function finishPendingJob(jobId, {
+  notifyError = false,
+  message = '',
+} = {}) {
+  const pendingJob = pendingJobs.get(jobId);
+  if (!pendingJob) {
+    return;
+  }
+
+  clearPendingJobTimers(pendingJob);
+  pendingJobs.delete(jobId);
+
+  if (notifyError && message) {
+    exportBridgeErrorHandler?.(message);
+  }
+}
+
+export function initializeExportBridge({
+  onError = null,
+} = {}) {
+  exportBridgeErrorHandler = typeof onError === 'function' ? onError : null;
+
+  if (window.__collabmdExportBridgeInitialized) {
+    return;
+  }
+
+  window.addEventListener('message', (event) => {
+    if (event.origin !== window.location.origin) {
+      return;
+    }
+
+    const payload = event.data;
+    if (!payload || payload.source !== EXPORT_PAGE_SOURCE) {
+      return;
+    }
+
+    const jobId = String(payload.jobId ?? '').trim();
+    if (!jobId) {
+      return;
+    }
+
+    const pendingJob = pendingJobs.get(jobId);
+    if (!pendingJob) {
+      return;
+    }
+
+    if (payload.type === 'ready') {
+      if (pendingJob.window?.closed) {
+        finishPendingJob(jobId, {
+          message: 'Export window was closed before the export completed',
+          notifyError: true,
+        });
+        return;
+      }
+
+      try {
+        pendingJob.window?.postMessage(pendingJob.payload, window.location.origin);
+      } catch (error) {
+        finishPendingJob(jobId, {
+          message: error instanceof Error ? error.message : 'Failed to send export data',
+          notifyError: true,
+        });
+      }
+      return;
+    }
+
+    if (payload.type === 'complete' || payload.type === 'error') {
+      finishPendingJob(jobId, {
+        message: payload.type === 'error' && payload.message ? String(payload.message) : '',
+        notifyError: payload.type === 'error' && Boolean(payload.message),
+      });
+    }
+  });
+
+  window.__collabmdExportBridgeInitialized = true;
+}
+
+export async function exportDocument({
+  fileList = [],
+  filePath,
+  format,
+  markdownText = '',
+  title = '',
+} = {}) {
+  const normalizedFilePath = String(filePath ?? '').trim();
+  if (!normalizedFilePath) {
+    throw new Error('No markdown note is open');
+  }
+
+  const jobId = createJobId();
+  const url = buildExportUrl({
+    filePath: normalizedFilePath,
+    format,
+    jobId,
+  });
+
+  const exportWindow = window.open(url, '_blank');
+  if (!exportWindow) {
+    throw new Error('Export popup was blocked');
+  }
+
+  pendingJobs.set(jobId, {
+    closePollId: window.setInterval(() => {
+      if (!exportWindow.closed) {
+        return;
+      }
+
+      finishPendingJob(jobId, {
+        message: 'Export window was closed before the export completed',
+        notifyError: true,
+      });
+    }, EXPORT_JOB_CLOSE_POLL_MS),
+    payload: createBootstrapPayload({
+      fileList,
+      filePath: normalizedFilePath,
+      format,
+      jobId,
+      markdownText,
+      title,
+    }),
+    timeoutId: window.setTimeout(() => {
+      finishPendingJob(jobId, {
+        message: 'Export timed out before it completed',
+        notifyError: true,
+      });
+    }, EXPORT_JOB_TIMEOUT_MS),
+    window: exportWindow,
+  });
+
+  exportWindow.focus?.();
+  return jobId;
+}

package/src/client/export/export-page.js

@@ -0,0 +1,60 @@
+import { runExportAdapter, postExportPageMessage, prepareExportSnapshot, waitForBootstrapPayload } from './export-pipeline.js';
+import { groupHeadingWithFollowingBlock } from './export-print-layout.js';
+
+function setStatus(message) {
+  const status = document.getElementById('exportStatus');
+  if (status) {
+    status.textContent = message;
+  }
+}
+
+function renderWarnings(snapshot) {
+  const warningsList = document.getElementById('exportWarnings');
+  const warningsSection = document.getElementById('exportWarningsSection');
+  if (!warningsList || !warningsSection) {
+    return;
+  }
+
+  warningsList.replaceChildren();
+  const warnings = snapshot.warnings ?? [];
+  warningsSection.hidden = warnings.length === 0;
+  warnings.forEach((warning) => {
+    const item = document.createElement('li');
+    item.textContent = warning;
+    warningsList.appendChild(item);
+  });
+}
+
+function renderSnapshot(snapshot) {
+  const mount = document.getElementById('exportContent');
+  if (!mount) {
+    return;
+  }
+
+  document.title = `${snapshot.title} — Export`;
+  mount.innerHTML = snapshot.html;
+  groupHeadingWithFollowingBlock(mount);
+  renderWarnings(snapshot);
+}
+
+async function bootstrap() {
+  try {
+    setStatus('Loading export content…');
+    const payload = await waitForBootstrapPayload();
+    const snapshot = await prepareExportSnapshot(payload);
+    renderSnapshot(snapshot);
+    setStatus(payload.action === 'pdf' ? 'Opening print dialog…' : 'Preparing DOCX download…');
+    await runExportAdapter(snapshot, payload.action);
+    setStatus(payload.action === 'pdf' ? 'Print dialog opened.' : 'DOCX download started.');
+    postExportPageMessage('complete', { jobId: new URL(window.location.href).searchParams.get('job') || '' });
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Export failed';
+    setStatus(message);
+    postExportPageMessage('error', {
+      jobId: new URL(window.location.href).searchParams.get('job') || '',
+      message,
+    });
+  }
+}
+
+void bootstrap();