collabmd 0.1.29 → 0.1.31

package/src/client/application/preview-render-compiler.js

@@ -3,6 +3,7 @@ import hljs from 'highlight.js';
 
 import { isImageAttachmentFilePath } from '../../domain/file-kind.js';
 import { escapeHtml, resolveVaultRelativePath, resolveWikiTarget } from '../domain/vault-utils.js';
+import { extractYamlFrontmatter, renderFrontmatterBlock } from './markdown-frontmatter.js';
 import { analyzeMarkdownComplexity } from './preview-render-profile.js';
 
 const DIRECT_VIDEO_MIME_TYPES = Object.freeze({
@@ -83,6 +84,18 @@ function createDrawioPlaceholder({ embedKey, label, target }) {
   return `<span class="drawio-embed-placeholder diagram-preview-shell" data-drawio-key="${escapeHtml(embedKey)}" data-drawio-target="${escapeHtml(target)}" data-drawio-label="${escapeHtml(label)}" data-drawio-mode="view"><span class="drawio-embed-placeholder-card diagram-preview-placeholder-card"><span class="drawio-embed-placeholder-copy diagram-preview-placeholder-copy"><strong>${escapeHtml(label)}</strong><span>Loads when visible</span></span><button type="button" class="drawio-embed-placeholder-btn diagram-preview-placeholder-btn" data-drawio-key="${escapeHtml(embedKey)}">Load diagram</button></span></span>`;
 }
 
+function createBasePlaceholder({ key, sourceAttributes, sourceFilePath, sourceText, viewName = '' }) {
+  const sourceFileAttribute = sourceFilePath ? ` data-base-source-path="${escapeHtml(sourceFilePath)}"` : '';
+  const viewAttribute = viewName ? ` data-base-view="${escapeHtml(viewName)}"` : '';
+  return `<div class="bases-embed-placeholder diagram-preview-shell"${sourceAttributes} data-base-key="${escapeHtml(key)}" data-base-source="${escapeHtml(sourceText)}"${sourceFileAttribute}${viewAttribute}><div class="diagram-preview-placeholder-card"><div class="diagram-preview-placeholder-copy"><strong>Base view</strong><span>Loads query results when preview renders</span></div></div></div>`;
+}
+
+function createBaseFileEmbedPlaceholder({ embedKey, label, target, viewName = '', sourceFilePath = '' }) {
+  const sourceFileAttribute = sourceFilePath ? ` data-base-source-path="${escapeHtml(sourceFilePath)}"` : '';
+  const viewAttribute = viewName ? ` data-base-view="${escapeHtml(viewName)}"` : '';
+  return `<span class="bases-embed-placeholder diagram-preview-shell" data-base-key="${escapeHtml(embedKey)}" data-base-path="${escapeHtml(target)}" data-base-label="${escapeHtml(label)}"${viewAttribute}${sourceFileAttribute}><span class="diagram-preview-placeholder-card"><span class="diagram-preview-placeholder-copy"><strong>${escapeHtml(label)}</strong><span>Loads query results when preview renders</span></span></span></span>`;
+}
+
 function getDirectVideoMimeType(pathname = '') {
   const match = pathname.toLowerCase().match(/\.(mp4|ogg|webm)$/i);
   if (!match) {
@@ -227,13 +240,15 @@ function resolveLocalAttachmentUrl(source = '', {
 }
 
 function renderInlineWikiText(content, {
+  baseEmbedCounts,
   drawioEmbedCounts,
   excalidrawEmbedCounts,
   fileList,
   mermaidEmbedCounts,
   plantUmlEmbedCounts,
+  sourceFilePath = '',
 }) {
-  const regex = /!\[\[([^\]|]+\.(?:excalidraw|drawio|mmd|mermaid|puml|plantuml))(?:\|([^\]]+))?\]\]|\[\[([^\]|]+)(?:\|([^\]]+))?\]\]/gi;
+  const regex = /!\[\[([^\]|#]+\.(?:base|excalidraw|drawio|mmd|mermaid|puml|plantuml))(?:#([^\]|]+))?(?:\|([^\]]+))?\]\]|\[\[([^\]|]+)(?:\|([^\]]+))?\]\]/gi;
   let lastIndex = 0;
   let html = '';
   let match;
@@ -245,9 +260,20 @@ function renderInlineWikiText(content, {
 
     if (match[1]) {
       const target = match[1].trim();
-      const label = (match[2] || target).trim();
-
-      if (/\.excalidraw$/i.test(target)) {
+      const viewName = (match[2] || '').trim();
+      const label = (match[3] || target).trim();
+
+      if (/\.base$/i.test(target)) {
+        const occurrenceIndex = baseEmbedCounts.get(`${target}#${viewName}`) ?? 0;
+        baseEmbedCounts.set(`${target}#${viewName}`, occurrenceIndex + 1);
+        html += createBaseFileEmbedPlaceholder({
+          embedKey: `${target}#${viewName || 'default'}#${occurrenceIndex}`,
+          label: normalizePreviewTypography(label.replace(/\.base$/i, '')),
+          sourceFilePath,
+          target,
+          viewName,
+        });
+      } else if (/\.excalidraw$/i.test(target)) {
         const occurrenceIndex = excalidrawEmbedCounts.get(target) ?? 0;
         excalidrawEmbedCounts.set(target, occurrenceIndex + 1);
         html += createExcalidrawPlaceholder({
@@ -281,8 +307,8 @@ function renderInlineWikiText(content, {
         });
       }
     } else {
-      const target = match[3].trim();
-      const display = (match[4] || match[3]).trim();
+      const target = match[4].trim();
+      const display = (match[5] || match[4]).trim();
       const resolved = resolveWikiTarget(target, fileList);
       const classes = resolved ? 'wiki-link' : 'wiki-link wiki-link-new';
       const title = resolved ? normalizePreviewTypography(display) : `Create "${target}"`;
@@ -343,6 +369,7 @@ function createMarkdownRenderer(fileList = [], {
 
   const drawioEmbedCounts = new Map();
   const excalidrawEmbedCounts = new Map();
+  const baseCounts = new Map();
   const mermaidCounts = new Map();
   const mermaidEmbedCounts = new Map();
   const plantUmlCounts = new Map();
@@ -388,6 +415,18 @@ function createMarkdownRenderer(fileList = [], {
       });
     }
 
+    if (info === 'base') {
+      const sourceHash = hashString(token.content);
+      const occurrenceIndex = baseCounts.get(sourceHash) ?? 0;
+      baseCounts.set(sourceHash, occurrenceIndex + 1);
+      return createBasePlaceholder({
+        key: `base-${sourceHash}-${occurrenceIndex}`,
+        sourceAttributes,
+        sourceFilePath,
+        sourceText: token.content,
+      });
+    }
+
     const rendered = renderToken(fallbackFence, tokens, index, options, env, self);
     if (!sourceLine) {
       return rendered;
@@ -415,30 +454,36 @@ function createMarkdownRenderer(fileList = [], {
 
     if (content.startsWith('[x] ') || content.startsWith('[X] ')) {
       return `<input type="checkbox" checked data-task-checkbox="true"> ${renderInlineWikiText(content.slice(4), {
+        baseEmbedCounts: baseCounts,
         drawioEmbedCounts,
         excalidrawEmbedCounts,
         fileList,
         mermaidEmbedCounts,
         plantUmlEmbedCounts,
+        sourceFilePath,
       })}`;
     }
 
     if (content.startsWith('[ ] ')) {
       return `<input type="checkbox" data-task-checkbox="true"> ${renderInlineWikiText(content.slice(4), {
+        baseEmbedCounts: baseCounts,
         drawioEmbedCounts,
         excalidrawEmbedCounts,
         fileList,
         mermaidEmbedCounts,
         plantUmlEmbedCounts,
+        sourceFilePath,
       })}`;
     }
 
     return renderInlineWikiText(content, {
+      baseEmbedCounts: baseCounts,
       drawioEmbedCounts,
       excalidrawEmbedCounts,
       fileList,
       mermaidEmbedCounts,
       plantUmlEmbedCounts,
+      sourceFilePath,
     });
   };
 
@@ -480,17 +525,25 @@ function createMarkdownRenderer(fileList = [], {
 export function compilePreviewDocument({
   attachmentApiPath = '/api/attachment',
   fileList = [],
+  frontmatterCollapsed = false,
+  frontmatterInteractive = false,
   markdownText = '',
   sourceFilePath = '',
 } = {}) {
   const normalizedMarkdown = String(markdownText);
+  const frontmatter = extractYamlFrontmatter(normalizedMarkdown);
   const renderer = createMarkdownRenderer(fileList, {
     attachmentApiPath,
     sourceFilePath,
   });
+  const renderedMarkdown = frontmatter ? frontmatter.bodyMarkdown : normalizedMarkdown;
+  const frontmatterHtml = renderFrontmatterBlock(frontmatter, {
+    collapsed: frontmatterCollapsed,
+    interactive: frontmatterInteractive,
+  });
 
   return {
-    html: renderer.render(normalizedMarkdown),
+    html: `${frontmatterHtml}${renderer.render(renderedMarkdown)}`,
     stats: analyzeMarkdownComplexity(normalizedMarkdown),
   };
 }

package/src/client/application/preview-render-executor.js

@@ -97,7 +97,10 @@ export class PreviewRenderExecutor {
     }
   }
 
-  async compile(markdownText, renderVersion) {
+  async compile(markdownText, renderVersion, {
+    frontmatterCollapsed = false,
+    frontmatterInteractive = false,
+  } = {}) {
     const worker = this.ensureWorker();
 
     if (worker) {
@@ -111,6 +114,8 @@ export class PreviewRenderExecutor {
         activeWorker.postMessage({
           attachmentApiPath: this.attachmentApiPath,
           fileList: this.getFileList?.() ?? [],
+          frontmatterCollapsed,
+          frontmatterInteractive,
           markdownText,
           renderVersion,
           sourceFilePath: this.getSourceFilePath?.() ?? '',
@@ -122,6 +127,8 @@ export class PreviewRenderExecutor {
     return compilePreviewDocument({
       attachmentApiPath: this.attachmentApiPath,
       fileList: this.getFileList?.() ?? [],
+      frontmatterCollapsed,
+      frontmatterInteractive,
       markdownText,
       sourceFilePath: this.getSourceFilePath?.() ?? '',
     });

package/src/client/application/preview-render-worker.js

@@ -4,6 +4,8 @@ self.onmessage = (event) => {
   const {
     attachmentApiPath,
     fileList,
+    frontmatterCollapsed,
+    frontmatterInteractive,
     markdownText,
     renderVersion,
     sourceFilePath,
@@ -13,6 +15,8 @@ self.onmessage = (event) => {
     const result = compilePreviewDocument({
       attachmentApiPath,
       fileList,
+      frontmatterCollapsed,
+      frontmatterInteractive,
       markdownText,
       sourceFilePath,
     });

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

@@ -1,4 +1,5 @@
 import {
+  isBaseFilePath,
   isMarkdownFilePath,
   supportsBacklinksForFilePath,
 } from '../../domain/file-kind.js';
@@ -12,6 +13,7 @@ export class WorkspaceChromeController {
     onRenderDrawioPreview,
     onFileOpenError,
     onFileOpenReady,
+    onRenderBasePreview,
     onRenderExcalidrawPreview,
     onRenderImagePreview,
     onSyncWrapToggle,
@@ -24,23 +26,24 @@ export class WorkspaceChromeController {
     showEditorLoading,
     stateStore,
   }) {
-    this.beginDocumentLoad = beginDocumentLoad;
-    this.getDisplayName = getDisplayName;
-    this.loadBacklinks = loadBacklinks;
-    this.onBeforeFileOpen = onBeforeFileOpen;
-    this.onRenderDrawioPreview = onRenderDrawioPreview;
-    this.onFileOpenError = onFileOpenError;
-    this.onFileOpenReady = onFileOpenReady;
-    this.onRenderExcalidrawPreview = onRenderExcalidrawPreview;
-    this.onRenderImagePreview = onRenderImagePreview;
-    this.onSyncWrapToggle = onSyncWrapToggle;
-    this.onUpdateActiveFile = onUpdateActiveFile;
-    this.onUpdateCurrentFile = onUpdateCurrentFile;
-    this.onUpdateLobbyCurrentFile = onUpdateLobbyCurrentFile;
-    this.onUpdateVisibleChrome = onUpdateVisibleChrome;
-    this.onViewModeReset = onViewModeReset;
-    this.renderPresence = renderPresence;
-    this.showEditorLoading = showEditorLoading;
+    this.beginDocumentLoad = beginDocumentLoad ?? (() => {});
+    this.getDisplayName = getDisplayName ?? ((filePath) => filePath);
+    this.loadBacklinks = loadBacklinks ?? (() => {});
+    this.onBeforeFileOpen = onBeforeFileOpen ?? (() => {});
+    this.onRenderDrawioPreview = onRenderDrawioPreview ?? (() => {});
+    this.onFileOpenError = onFileOpenError ?? (() => {});
+    this.onFileOpenReady = onFileOpenReady ?? (() => {});
+    this.onRenderBasePreview = onRenderBasePreview ?? (() => {});
+    this.onRenderExcalidrawPreview = onRenderExcalidrawPreview ?? (() => {});
+    this.onRenderImagePreview = onRenderImagePreview ?? (() => {});
+    this.onSyncWrapToggle = onSyncWrapToggle ?? (() => {});
+    this.onUpdateActiveFile = onUpdateActiveFile ?? (() => {});
+    this.onUpdateCurrentFile = onUpdateCurrentFile ?? (() => {});
+    this.onUpdateLobbyCurrentFile = onUpdateLobbyCurrentFile ?? (() => {});
+    this.onUpdateVisibleChrome = onUpdateVisibleChrome ?? (() => {});
+    this.onViewModeReset = onViewModeReset ?? (() => {});
+    this.renderPresence = renderPresence ?? (() => {});
+    this.showEditorLoading = showEditorLoading ?? (() => {});
     this.stateStore = stateStore;
   }
 
@@ -75,16 +78,19 @@ export class WorkspaceChromeController {
   }
 
   finalizeFileOpen({
+    isBase = false,
     isDrawio = false,
     filePath,
     isExcalidraw = false,
     isImage = false,
-    session = null,
     supportsBacklinks,
   }) {
     if (isExcalidraw) {
       this.onRenderExcalidrawPreview(filePath);
     }
+    if (isBase || isBaseFilePath(filePath)) {
+      this.onRenderBasePreview(filePath);
+    }
     if (isDrawio) {
       this.onRenderDrawioPreview(filePath);
     }
@@ -92,7 +98,7 @@ export class WorkspaceChromeController {
       this.onRenderImagePreview(filePath);
     }
     this.onSyncWrapToggle();
-    if (supportsBacklinks && session) {
+    if (supportsBacklinks) {
       this.loadBacklinks(filePath);
     }
   }

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

@@ -21,6 +21,7 @@ export class WorkspaceCoordinator {
     getLocalUser,
     getStoredUserName,
     getTheme,
+    isBaseFile,
     isDrawioFile,
     isExcalidrawFile,
     isImageFile,
@@ -41,6 +42,7 @@ export class WorkspaceCoordinator {
     onSelectionChange,
     onSessionAssigned = null,
     onFileOpenMetric = null,
+    onRenderBasePreview,
     onRenderExcalidrawPreview,
     onRenderDrawioPreview,
     onRenderImagePreview,
@@ -66,6 +68,7 @@ export class WorkspaceCoordinator {
     this.getLocalUser = getLocalUser;
     this.getStoredUserName = getStoredUserName;
     this.getTheme = getTheme;
+    this.isBaseFile = isBaseFile ?? (() => false);
     this.isDrawioFile = isDrawioFile ?? (() => false);
     this.isExcalidrawFile = isExcalidrawFile ?? (() => false);
     this.isImageFile = isImageFile ?? (() => false);
@@ -86,6 +89,7 @@ export class WorkspaceCoordinator {
     this.onSelectionChange = onSelectionChange;
     this.onSessionAssigned = onSessionAssigned;
     this.onFileOpenMetric = onFileOpenMetric;
+    this.onRenderBasePreview = onRenderBasePreview;
     this.onRenderExcalidrawPreview = onRenderExcalidrawPreview;
     this.onSyncWrapToggle = onSyncWrapToggle;
     this.onUpdateActiveFile = onUpdateActiveFile;
@@ -110,6 +114,7 @@ export class WorkspaceCoordinator {
       onRenderDrawioPreview,
       onFileOpenError,
       onFileOpenReady,
+      onRenderBasePreview,
       onRenderExcalidrawPreview,
       onRenderImagePreview,
       onSyncWrapToggle,
@@ -164,6 +169,7 @@ export class WorkspaceCoordinator {
     const currentDrawioMode = this.stateStore.get('currentDrawioMode') ?? null;
     const isDrawio = this.isDrawioFile(filePath) && drawioMode !== 'text' && this.shouldUseDrawioPreview(filePath);
     const isExcalidraw = this.isExcalidrawFile(filePath);
+    const isBase = this.isBaseFile(filePath);
     const isImage = this.isImageFile(filePath);
     const isMermaid = this.isMermaidFile(filePath);
     const isPlantUml = this.isPlantUmlFile(filePath);
@@ -198,6 +204,7 @@ export class WorkspaceCoordinator {
       this.chromeController.markFileOpenReady(null);
       this.chromeController.finalizeFileOpen({
         filePath,
+        isBase,
         isDrawio,
         isExcalidraw,
         isImage,
@@ -221,6 +228,7 @@ export class WorkspaceCoordinator {
         }
 
         this.onContentChange({
+          isBase,
           isMermaid,
           isPlantUml,
         });
@@ -259,6 +267,7 @@ export class WorkspaceCoordinator {
         fileOpenFinalized = true;
         this.chromeController.finalizeFileOpen({
           filePath,
+          isBase,
           isExcalidraw,
           session,
           supportsBacklinks: chromeState.supportsBacklinks,

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

@@ -1,4 +1,5 @@
 import {
+  isBaseFilePath,
   isDiagramFilePath,
   isMarkdownFilePath,
 } from '../../domain/file-kind.js';
@@ -7,6 +8,7 @@ import { resolveApiUrl } from '../domain/runtime-paths.js';
 export class WorkspacePreviewController {
   constructor({
     backlinksPanel,
+    basesPreview = null,
     drawioEmbed,
     elements,
     excalidrawEmbed,
@@ -14,6 +16,7 @@ export class WorkspacePreviewController {
     getSession,
     isDrawioFile,
     isExcalidrawFile,
+    isBaseFile,
     isImageFile,
     isMermaidFile,
     isPlantUmlFile,
@@ -25,6 +28,7 @@ export class WorkspacePreviewController {
     videoEmbed,
   }) {
     this.backlinksPanel = backlinksPanel;
+    this.basesPreview = basesPreview ?? { reconcileEmbeds() {}, renderStandalone() {} };
     this.drawioEmbed = drawioEmbed ?? {
       detachForCommit() {},
       hydrateVisibleEmbeds() {},
@@ -40,6 +44,7 @@ export class WorkspacePreviewController {
     this.getSession = getSession;
     this.isDrawioFile = isDrawioFile ?? (() => false);
     this.isExcalidrawFile = isExcalidrawFile ?? (() => false);
+    this.isBaseFile = isBaseFile ?? isBaseFilePath;
     this.isImageFile = isImageFile ?? (() => false);
     this.isMermaidFile = isMermaidFile ?? (() => false);
     this.isPlantUmlFile = isPlantUmlFile ?? (() => false);
@@ -78,27 +83,33 @@ export class WorkspacePreviewController {
   resetPreviewMode() {
     this.elements.previewContent?.classList.remove('is-drawio-file-preview');
     this.elements.previewContent?.classList.remove('is-excalidraw-file-preview');
+    this.elements.previewContent?.classList.remove('is-base-file-preview');
     this.elements.previewContent?.classList.remove('is-image-file-preview');
     this.elements.previewContent?.classList.remove('is-mermaid-file-preview');
     this.elements.previewContent?.classList.remove('is-plantuml-file-preview');
   }
 
-  syncFileChrome(filePath, { drawioMode = null } = {}) {
+  syncFileChrome(filePath, { drawioMode = null, preferPreviewForBase = false } = {}) {
     const isDrawio = this.isDrawioFile(filePath);
     const isExcalidraw = this.isExcalidrawFile(filePath);
+    const isBase = this.isBaseFile(filePath);
     const isImage = this.isImageFile(filePath);
     const isMarkdown = isMarkdownFilePath(filePath);
     const isMermaid = this.isMermaidFile(filePath);
     const isPlantUml = this.isPlantUmlFile(filePath);
     const isDiagramFile = isDiagramFilePath(filePath);
+    const usesHeaderBacklinks = isExcalidraw || (isDrawio && drawioMode !== 'text');
 
+    this.backlinksPanel.setDisplayMode?.(usesHeaderBacklinks ? 'header' : 'dock');
+
+    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.outlineToggle?.classList.toggle('hidden', isDiagramFile || isImage || isBase);
     this.elements.previewContent?.classList.toggle('is-mermaid-file-preview', isMermaid);
     this.elements.previewContent?.classList.toggle('is-plantuml-file-preview', isPlantUml);
 
-    if ((isDrawio && drawioMode !== 'text') || isExcalidraw || isImage) {
+    if ((isDrawio && drawioMode !== 'text') || isExcalidraw || isImage || (isBase && preferPreviewForBase)) {
       this.layoutController.setView('preview', { persist: false });
       this.outlineController.close();
       this.backlinksPanel.clear();
@@ -227,6 +238,41 @@ export class WorkspacePreviewController {
     this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
   }
 
+  async renderBaseFilePreview(filePath, { source = null } = {}) {
+    const previewElement = this.elements.previewContent;
+    if (!previewElement) {
+      return;
+    }
+
+    this.videoEmbed?.detachForCommit();
+    this.drawioEmbed.detachForCommit();
+    this.excalidrawEmbed.detachForCommit();
+    this.resetPreviewMode();
+    previewElement.classList.add('is-base-file-preview');
+    const renderHost = this.previewRenderer.ensureRenderHost();
+    this.previewRenderer.normalizePreviewChildren(renderHost);
+
+    if (renderHost) {
+      renderHost.replaceChildren();
+      renderHost.style.minHeight = '';
+    }
+
+    await this.basesPreview.renderStandalone({
+      filePath,
+      renderHost,
+      source: typeof source === 'string'
+        ? source
+        : (this.getSession()?.getText?.() ?? null),
+    });
+
+    previewElement.dataset.renderPhase = 'ready';
+    this.outlineController.close();
+    this.scrollSyncController.setLargeDocumentMode(false);
+    this.scrollSyncController.invalidatePreviewBlocks();
+    this.videoEmbed?.reconcileEmbeds(previewElement);
+    this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
+  }
+
   renderTextFilePreview({ content = '' } = {}) {
     const previewElement = this.elements.previewContent;
     if (!previewElement) {