collabmd 0.1.30 → 0.1.31

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,28 +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();
@@ -228,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) {

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

@@ -22,6 +22,7 @@ import { TabActivityLock } from '../infrastructure/tab-activity-lock.js';
 import { vaultApiClient } from '../infrastructure/vault-api-client.js';
 import { WorkspaceSyncClient } from '../infrastructure/workspace-sync-client.js';
 import { BacklinksPanel } from '../presentation/backlinks-panel.js';
+import { BasesPreviewController } from '../presentation/bases-preview-controller.js';
 import { CommentUiController } from '../presentation/comment-ui-controller.js';
 import { DrawioEmbedController } from '../presentation/drawio-embed-controller.js';
 import { ExcalidrawEmbedController } from '../presentation/excalidraw-embed-controller.js';
@@ -185,6 +186,13 @@ export class CollabMdAppShell {
     this.videoEmbed = new VideoEmbedController({
       previewElement: this.elements.previewContent,
     });
+    this.basesPreview = new BasesPreviewController({
+      getActiveFilePath: () => this.currentFilePath,
+      onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+      previewElement: this.elements.previewContent,
+      toastController: this.toastController,
+      vaultApiClient: this.vaultApiClient,
+    });
     this.imageLightbox = new ImageLightboxController({
       previewElement: this.elements.previewContent,
     });
@@ -199,6 +207,7 @@ export class CollabMdAppShell {
         });
         this.videoEmbed.reconcileEmbeds(this.elements.previewContent);
         this.videoEmbed.syncLayout();
+        this.basesPreview.reconcileEmbeds(this.elements.previewContent);
         this.drawioEmbed.reconcileEmbeds(this.elements.previewContent);
         this.drawioEmbed.syncLayout();
         this.excalidrawEmbed.reconcileEmbeds(this.elements.previewContent, { isLargeDocument: stats.isLargeDocument });
@@ -242,6 +251,7 @@ export class CollabMdAppShell {
       scrollEditorToLine: (lineNumber, viewportRatio) => this.session?.scrollToLine(lineNumber, viewportRatio),
     });
     this.backlinksPanel = new BacklinksPanel({
+      headerPanelElement: this.elements.backlinksHeaderPanel,
       inlinePanelElement: this.elements.backlinksInlinePanel,
       onFileSelect: (filePath) => this.handleFileSelection(filePath, { closeSidebarOnMobile: true }),
       panelElement: this.elements.backlinksPanel,
@@ -284,11 +294,13 @@ export class CollabMdAppShell {
     });
     this.workspacePreviewController = new WorkspacePreviewController({
       backlinksPanel: this.backlinksPanel,
+      basesPreview: this.basesPreview,
       drawioEmbed: this.drawioEmbed,
       elements: this.elements,
       excalidrawEmbed: this.excalidrawEmbed,
       getDisplayName: (filePath) => this.getDisplayName(filePath),
       getSession: () => this.session,
+      isBaseFile: (filePath) => this.isBaseFile(filePath),
       isDrawioFile: (filePath) => this.isDrawioFile(filePath),
       isExcalidrawFile: (filePath) => this.isExcalidrawFile(filePath),
       isImageFile: (filePath) => this.isImageFile(filePath),
@@ -374,6 +386,7 @@ export class CollabMdAppShell {
       getLocalUser: () => this.lobby.getLocalUser(),
       getStoredUserName: () => this.getStoredUserName(),
       getTheme: () => this.themeController.getTheme(),
+      isBaseFile: (filePath) => this.isBaseFile(filePath),
       isDrawioFile: (filePath) => this.isDrawioFile(filePath),
       isExcalidrawFile: (filePath) => this.isExcalidrawFile(filePath),
       isImageFile: (filePath) => this.isImageFile(filePath),
@@ -397,8 +410,15 @@ export class CollabMdAppShell {
         this.clearInitialFileBootstrap();
       },
       onConnectionChange: (state) => this.handleConnectionChange(state),
-      onContentChange: ({ isMermaid, isPlantUml }) => {
+      onContentChange: ({ isBase, isMermaid, isPlantUml }) => {
         this.handleCommentEditorContentChange();
+        if (isBase) {
+          void this.renderBaseFilePreview(this.currentFilePath, {
+            source: this.session?.getText?.() ?? '',
+          });
+          return;
+        }
+
         this.previewRenderer.queueRender();
         if (!isMermaid && !isPlantUml) {
           this.scheduleBacklinkRefresh();
@@ -422,6 +442,7 @@ export class CollabMdAppShell {
         this.commentUi.attachSession(session);
       },
       onRenderDrawioPreview: (filePath) => this.renderDrawioFilePreview(filePath),
+      onRenderBasePreview: (filePath) => this.renderBaseFilePreview(filePath),
       onRenderExcalidrawPreview: (filePath) => this.renderExcalidrawFilePreview(filePath),
       onRenderImagePreview: (filePath) => this.renderImageFilePreview(filePath),
       onSyncWrapToggle: () => this.syncWrapToggle(),
@@ -431,7 +452,10 @@ export class CollabMdAppShell {
       },
       onUpdateLobbyCurrentFile: (filePath) => this.lobby.setCurrentFile(filePath),
       onUpdateVisibleChrome: (filePath, { displayName }) => {
-        this.syncFileChrome(filePath, { drawioMode: this.currentDrawioMode });
+        this.syncFileChrome(filePath, {
+          drawioMode: this.currentDrawioMode,
+          preferPreviewForBase: this.isBaseFile(filePath),
+        });
         this.syncCommentChrome(filePath);
         this.syncFileHistoryButton({ filePath, mode: 'editor' });
         if (this.elements.activeFileName) {

package/src/client/domain/vault-paths.js

@@ -1,4 +1,5 @@
 import {
+  isBaseFilePath,
   isDrawioFilePath,
   isMermaidFilePath,
   isPlantUmlFilePath,
@@ -47,6 +48,24 @@ export function createMarkdownStarter(filePath) {
   return `# ${title}\n\n`;
 }
 
+export function createBaseStarter(filePath) {
+  const normalizedPath = normalizeVaultPathInput(filePath);
+  const nextPath = isBaseFilePath(normalizedPath)
+    ? normalizedPath
+    : `${normalizedPath}.base`;
+  return {
+    content: [
+      'views:',
+      '  - type: table',
+      '    name: Table',
+      '    order:',
+      '      - file.name',
+      '',
+    ].join('\n'),
+    path: nextPath,
+  };
+}
+
 export function createMermaidStarter(filePath) {
   const normalizedPath = normalizeVaultPathInput(filePath);
   const nextPath = isMermaidFilePath(normalizedPath)

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

@@ -1,4 +1,10 @@
-import { runExportAdapter, postExportPageMessage, prepareExportSnapshot, waitForBootstrapPayload } from './export-pipeline.js';
+import {
+  postExportPageMessage,
+  prepareExportSnapshot,
+  runExportAdapter,
+  waitForBootstrapPayload,
+  waitForRenderedExportContent,
+} from './export-pipeline.js';
 import { groupHeadingWithFollowingBlock } from './export-print-layout.js';
 
 function setStatus(message) {
@@ -28,13 +34,14 @@ function renderWarnings(snapshot) {
 function renderSnapshot(snapshot) {
   const mount = document.getElementById('exportContent');
   if (!mount) {
-    return;
+    return null;
   }
 
   document.title = `${snapshot.title} — Export`;
   mount.innerHTML = snapshot.html;
   groupHeadingWithFollowingBlock(mount);
   renderWarnings(snapshot);
+  return mount;
 }
 
 async function bootstrap() {
@@ -42,7 +49,8 @@ async function bootstrap() {
     setStatus('Loading export content…');
     const payload = await waitForBootstrapPayload();
     const snapshot = await prepareExportSnapshot(payload);
-    renderSnapshot(snapshot);
+    const mount = renderSnapshot(snapshot);
+    snapshot.html = await waitForRenderedExportContent(mount);
     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.');

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

@@ -23,6 +23,7 @@ const LIGHT_EXPORT_MERMAID_THEME = Object.freeze({
 });
 const EXPORT_ASSET_FETCH_TIMEOUT_MS = 10_000;
 const EXPORT_ASSET_MAX_BYTES = 10 * 1024 * 1024;
+const EXPORT_RENDER_SETTLE_TIMEOUT_MS = 10_000;
 const VIDEO_POSTER_CAPTURE_TIMEOUT_MS = 10_000;
 const VIDEO_POSTER_CAPTURE_SEEK_SECONDS = 1;
 
@@ -48,6 +49,10 @@ function encodeSvgDataUrl(svgMarkup) {
   return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgMarkup)}`;
 }
 
+function waitForAnimationFrame() {
+  return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+}
+
 function blobToDataUrl(blob) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -177,6 +182,49 @@ async function imageDataUrlToPngDataUrl(dataUrl) {
   return canvas.toDataURL('image/png');
 }
 
+async function waitForImageElement(image, {
+  timeoutMs = EXPORT_RENDER_SETTLE_TIMEOUT_MS,
+} = {}) {
+  if (!(image instanceof HTMLImageElement)) {
+    return;
+  }
+
+  if (!image.getAttribute('src')) {
+    return;
+  }
+
+  if (!image.complete) {
+    await new Promise((resolve) => {
+      let settled = false;
+      const cleanup = () => {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        window.clearTimeout(timeoutId);
+        image.removeEventListener('load', handleDone);
+        image.removeEventListener('error', handleDone);
+      };
+      const handleDone = () => {
+        cleanup();
+        resolve();
+      };
+      const timeoutId = window.setTimeout(handleDone, timeoutMs);
+
+      image.addEventListener('load', handleDone, { once: true });
+      image.addEventListener('error', handleDone, { once: true });
+
+      if (image.complete) {
+        handleDone();
+      }
+    });
+  }
+
+  if (typeof image.decode === 'function') {
+    await image.decode().catch(() => {});
+  }
+}
+
 async function fetchJson(url, init = {}) {
   const response = await fetch(url, {
     headers: {
@@ -1322,8 +1370,8 @@ export async function docxAdapter(snapshot) {
 }
 
 export async function printPdfAdapter() {
-  await new Promise((resolve) => requestAnimationFrame(() => resolve()));
-  await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+  await waitForAnimationFrame();
+  await waitForAnimationFrame();
 
   await new Promise((resolve) => {
     const timeoutId = window.setTimeout(resolve, 1500);
@@ -1337,6 +1385,33 @@ export async function printPdfAdapter() {
   });
 }
 
+export async function waitForRenderedExportContent(container, {
+  settleFrames = 2,
+  timeoutMs = EXPORT_RENDER_SETTLE_TIMEOUT_MS,
+} = {}) {
+  if (!container) {
+    return '';
+  }
+
+  const imageWaiters = Array.from(container.querySelectorAll('img')).map((image) => (
+    waitForImageElement(image, { timeoutMs })
+  ));
+  const fontReadyPromise = document.fonts?.ready
+    ? Promise.resolve(document.fonts.ready).catch(() => {})
+    : Promise.resolve();
+
+  await Promise.allSettled([
+    fontReadyPromise,
+    ...imageWaiters,
+  ]);
+
+  for (let index = 0; index < settleFrames; index += 1) {
+    await waitForAnimationFrame();
+  }
+
+  return container.innerHTML;
+}
+
 export async function runExportAdapter(snapshot, format) {
   if (format === 'pdf') {
     await printPdfAdapter(snapshot);

package/src/client/infrastructure/editor-view-adapter.js

@@ -10,6 +10,7 @@ import {
   undo,
 } from '@codemirror/commands';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import { yaml } from '@codemirror/lang-yaml';
 import {
   bracketMatching,
   defaultHighlightStyle,
@@ -37,6 +38,7 @@ import {
 } from '@codemirror/view';
 import { yCollab } from 'y-codemirror.next';
 
+import { isBaseFilePath, isPlantUmlFilePath } from '../../domain/file-kind.js';
 import { normalizeCommentQuote } from '../../domain/comment-threads.js';
 import { createMarkdownToolbarEdit } from '../domain/markdown-formatting.js';
 import { wikiLinkCompletions } from '../domain/wiki-link-completions.js';
@@ -296,14 +298,15 @@ function createEditorTheme(theme) {
   }, { dark: theme === 'dark' });
 }
 
-function createLanguageExtension(filePath) {
-  if (
-    typeof filePath === 'string'
-    && (filePath.toLowerCase().endsWith('.puml') || filePath.toLowerCase().endsWith('.plantuml'))
-  ) {
+export function createLanguageExtension(filePath) {
+  if (isPlantUmlFilePath(filePath)) {
     return plantUmlLanguage;
   }
 
+  if (isBaseFilePath(filePath)) {
+    return yaml();
+  }
+
   return markdown({ base: markdownLanguage, codeLanguages: markdownCodeLanguages });
 }
 

package/src/client/infrastructure/vault-api-client.js

@@ -36,6 +36,60 @@ export class VaultApiClient {
     return parseApiResponse(response, 'Failed to read file');
   }
 
+  async queryBase({
+    activeFilePath = '',
+    path = '',
+    search = '',
+    source = null,
+    sourcePath = '',
+    view = '',
+  } = {}) {
+    const response = await fetch(resolveApiUrl('/base/query'), {
+      body: JSON.stringify({
+        activeFilePath,
+        path,
+        search,
+        source,
+        sourcePath,
+        view,
+      }),
+      headers: { 'Content-Type': 'application/json' },
+      method: 'POST',
+    });
+    return parseApiResponse(response, 'Failed to query base');
+  }
+
+  async exportBaseCsv({
+    activeFilePath = '',
+    path = '',
+    search = '',
+    source = null,
+    sourcePath = '',
+    view = '',
+  } = {}) {
+    const response = await fetch(resolveApiUrl('/base/export'), {
+      body: JSON.stringify({
+        activeFilePath,
+        path,
+        search,
+        source,
+        sourcePath,
+        view,
+      }),
+      headers: { 'Content-Type': 'application/json' },
+      method: 'POST',
+    });
+    if (!response.ok) {
+      const payload = await response.json().catch(() => ({}));
+      throw new Error(payload.error || 'Failed to export base CSV');
+    }
+
+    return {
+      blob: await response.blob(),
+      contentDisposition: response.headers.get('content-disposition') || '',
+    };
+  }
+
   async createFile({ content, path, requestId = null }) {
     const response = await fetch(resolveApiUrl('/file'), {
       body: JSON.stringify({ content, path }),

package/src/client/presentation/app-shell-template.js

@@ -378,6 +378,18 @@ export function appShellTemplate() {
               <div class="pane-header">
                 <span class="pane-label">Preview</span>
                 <div class="pane-header-actions">
+                  <div id="backlinksHeaderPanel" class="backlinks-panel backlinks-panel-header hidden" data-backlinks-variant="header">
+                    <button type="button" class="backlinks-header" aria-expanded="false">
+                      <svg class="backlinks-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                        <polyline points="9 18 15 12 9 6"></polyline>
+                      </svg>
+                      <span class="backlinks-toggle">0 Linked Mentions</span>
+                      <span class="backlinks-count"></span>
+                    </button>
+                    <div class="backlinks-body" aria-hidden="true" inert>
+                      <div class="backlinks-list"></div>
+                    </div>
+                  </div>
                   <button class=${buttonClassNames({ variant: 'ghost', size: 'compact', toggle: true, extra: 'hidden' })} id="commentsToggle" aria-label="Toggle comments" title="Toggle comments">
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                       <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>