collabmd 0.1.30 → 0.1.31

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

@@ -1,3 +1,4 @@
+import { stripVaultFileExtension } from '../../domain/file-kind.js';
 import { escapeHtml } from '../domain/vault-utils.js';
 import { resolveApiUrl } from '../domain/runtime-paths.js';
 
@@ -10,25 +11,29 @@ import { resolveApiUrl } from '../domain/runtime-paths.js';
 export class BacklinksPanel {
   constructor({
     documentRef = document,
+    headerPanelElement = null,
     inlinePanelElement = null,
     onFileSelect,
     panelElement,
   }) {
     this.documentRef = documentRef;
+    this.headerPanel = headerPanelElement;
     this.panelRoot = panelElement;
     this.inlinePanel = inlinePanelElement;
     this.onFileSelect = onFileSelect;
 
     this._expanded = false;
     this._currentFile = null;
+    this._displayMode = 'dock';
     this._fetchController = null;
     this._backlinks = [];
     this._pendingOutsidePointer = null;
 
     const desktopPanel = this.panelRoot?.querySelector('[data-backlinks-variant="dock"]') ?? this.panelRoot;
     this.panels = [
-      this._createPanelRef(desktopPanel),
-      this._createPanelRef(this.inlinePanel),
+      this._createPanelRef(desktopPanel, this.panelRoot),
+      this._createPanelRef(this.headerPanel, this.headerPanel),
+      this._createPanelRef(this.inlinePanel, this.inlinePanel),
     ].filter(Boolean);
 
     this.handleDocumentPointerDown = (event) => {
@@ -145,6 +150,18 @@ export class BacklinksPanel {
     this._render();
   }
 
+  setDisplayMode(mode = 'dock') {
+    const normalizedMode = mode === 'header' ? 'header' : 'dock';
+    if (this._displayMode === normalizedMode) {
+      return;
+    }
+
+    this._displayMode = normalizedMode;
+    this._expanded = false;
+    this._pendingOutsidePointer = null;
+    this._render();
+  }
+
   clear() {
     this._currentFile = null;
     this._backlinks = [];
@@ -162,7 +179,7 @@ export class BacklinksPanel {
     this._applyExpandState();
   }
 
-  _createPanelRef(panel) {
+  _createPanelRef(panel, root = panel) {
     if (!panel) {
       return null;
     }
@@ -174,6 +191,7 @@ export class BacklinksPanel {
       countBadge: panel.querySelector('.backlinks-count'),
       body: panel.querySelector('.backlinks-body'),
       list: panel.querySelector('.backlinks-list'),
+      root,
     };
   }
 
@@ -182,19 +200,19 @@ export class BacklinksPanel {
     const label = count === 1 ? 'Linked Mention' : 'Linked Mentions';
     const shouldShow = Boolean(this._currentFile) && count > 0;
 
-    this.panelRoot?.classList?.toggle('hidden', !shouldShow);
-    this.inlinePanel?.classList?.toggle('hidden', !shouldShow);
-
     if (!shouldShow) {
       this._expanded = false;
     }
 
     this.panels.forEach((refs) => {
+      const shouldShowPanel = shouldShow && this._shouldShowPanel(refs);
+
+      refs.root?.classList?.toggle?.('hidden', !shouldShowPanel);
       refs.countBadge.textContent = shouldShow ? String(count) : '';
       refs.toggle.textContent = label;
-      refs.header?.classList.toggle('backlinks-header-empty', !shouldShow);
+      refs.header?.classList.toggle('backlinks-header-empty', !shouldShowPanel);
 
-      if (!shouldShow) {
+      if (!shouldShowPanel) {
         refs.list.innerHTML = '';
       } else {
         this._renderList(refs.list);
@@ -204,6 +222,15 @@ export class BacklinksPanel {
     this._applyExpandState();
   }
 
+  _shouldShowPanel(refs) {
+    const variant = refs.panel?.getAttribute?.('data-backlinks-variant') ?? '';
+    return (
+      variant === 'header'
+        ? this._displayMode === 'header'
+        : (variant === 'dock' ? this._displayMode === 'dock' : true)
+    );
+  }
+
   _renderList(listElement) {
     if (!listElement) return;
     listElement.innerHTML = '';
@@ -221,7 +248,7 @@ export class BacklinksPanel {
   }
 
   _createBacklinkItem(backlink) {
-    const fileName = backlink.file.replace(/\.md$/i, '').split('/').pop();
+    const fileName = stripVaultFileExtension(backlink.file.split('/').pop());
     const dirPath = backlink.file.includes('/')
       ? backlink.file.substring(0, backlink.file.lastIndexOf('/'))
       : '';
@@ -264,9 +291,8 @@ export class BacklinksPanel {
   }
 
   _applyExpandState() {
-    const expanded = this._expanded && this._backlinks.length > 0;
-
     this.panels.forEach((refs) => {
+      const expanded = this._expanded && this._backlinks.length > 0 && this._shouldShowPanel(refs);
       refs.panel.classList.toggle('expanded', expanded);
       refs.header?.setAttribute('aria-expanded', String(expanded));
       refs.header?.setAttribute('aria-disabled', String(this._backlinks.length === 0));

package/src/client/presentation/bases-preview-controller.js

@@ -0,0 +1,444 @@
+import { isImageAttachmentFilePath } from '../../domain/file-kind.js';
+import { resolveApiUrl } from '../domain/runtime-paths.js';
+import { escapeHtml } from '../domain/vault-utils.js';
+
+function createShellKey() {
+  return `base-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+function looksLikeHexColor(value = '') {
+  return /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/iu.test(String(value ?? '').trim());
+}
+
+function looksLikeExternalImageUrl(value = '') {
+  return /^https?:\/\/.+\.(?:png|jpe?g|webp|gif|svg)(?:[?#].*)?$/iu.test(String(value ?? '').trim());
+}
+
+function getCardImageCell(view, columns, row) {
+  const preferred = view.image
+    || columns.find((column) => ['cover', 'image'].includes(String(column.id ?? '').toLowerCase()))?.id
+    || null;
+  return preferred ? row.cells[preferred] ?? null : null;
+}
+
+function formatCellText(cell) {
+  return String(cell?.text ?? '');
+}
+
+function createAttachmentUrl(path = '') {
+  return resolveApiUrl(`/attachment?path=${encodeURIComponent(path)}`);
+}
+
+function getImageUrlFromCell(cell = {}) {
+  if (cell?.type === 'image' && cell.path) {
+    return createAttachmentUrl(cell.path);
+  }
+
+  if (cell?.type === 'link') {
+    if (cell.external && looksLikeExternalImageUrl(cell.url)) {
+      return cell.url;
+    }
+    if (cell.path && isImageAttachmentFilePath(cell.path)) {
+      return createAttachmentUrl(cell.path);
+    }
+  }
+
+  const text = formatCellText(cell);
+  if (looksLikeExternalImageUrl(text)) {
+    return text;
+  }
+  if (isImageAttachmentFilePath(text)) {
+    return createAttachmentUrl(text);
+  }
+
+  return '';
+}
+
+function renderValue(cell = {}) {
+  const type = cell?.type || 'string';
+  if (type === 'empty') {
+    return '<span class="bases-value bases-value-empty">—</span>';
+  }
+  if (type === 'boolean') {
+    return `<span class="bases-value bases-value-boolean">${cell.value ? 'True' : 'False'}</span>`;
+  }
+  if (type === 'image' && cell.path) {
+    return `<img class="bases-inline-image" src="${escapeHtml(createAttachmentUrl(cell.path))}" alt="${escapeHtml(formatCellText(cell))}">`;
+  }
+  if (type === 'list') {
+    return `<span class="bases-value-list">${(cell.items ?? []).map((item) => `<span class="bases-value-pill">${renderValue(item)}</span>`).join('')}</span>`;
+  }
+  if (type === 'link') {
+    if (cell.external && cell.url) {
+      return `<a class="bases-link" href="${escapeHtml(cell.url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(formatCellText(cell))}</a>`;
+    }
+    if (cell.path) {
+      return `<button type="button" class="bases-link bases-link-button" data-base-open-file="${escapeHtml(cell.path)}">${escapeHtml(formatCellText(cell))}</button>`;
+    }
+  }
+  if (type === 'file' && cell.path) {
+    return `<button type="button" class="bases-link bases-link-button" data-base-open-file="${escapeHtml(cell.path)}">${escapeHtml(formatCellText(cell))}</button>`;
+  }
+
+  const text = formatCellText(cell);
+  return `<span class="bases-value">${escapeHtml(text)}</span>`;
+}
+
+function renderRowValue(column, row) {
+  const cell = row?.cells?.[column.id] ?? null;
+  if (
+    row?.path
+    && cell
+    && cell.type !== 'empty'
+    && (column.id === 'file.name' || column.id === 'file.basename')
+  ) {
+    return `<button type="button" class="bases-link bases-link-button" data-base-open-file="${escapeHtml(row.path)}">${escapeHtml(formatCellText(cell))}</button>`;
+  }
+
+  return renderValue(cell);
+}
+
+function renderSummaryBar(summaries = []) {
+  if (!Array.isArray(summaries) || summaries.length === 0) {
+    return '';
+  }
+  return `<div class="bases-summaries">${summaries.map((summary) => (
+    `<div class="bases-summary"><span class="bases-summary-label">${escapeHtml(summary.label)}</span><span class="bases-summary-value">${escapeHtml(formatCellText(summary.value))}</span></div>`
+  )).join('')}</div>`;
+}
+
+function renderTable(columns, groups) {
+  return groups.map((group) => (
+    `<section class="bases-group"><header class="bases-group-header"><h3>${escapeHtml(group.label)}</h3>${renderSummaryBar(group.summaries)}</header><div class="bases-table-shell"><table class="bases-table"><thead><tr>${columns.map((column) => `<th>${escapeHtml(column.label)}</th>`).join('')}</tr></thead><tbody>${(group.rows ?? []).map((row) => `<tr>${columns.map((column) => `<td>${renderRowValue(column, row)}</td>`).join('')}</tr>`).join('')}</tbody></table></div></section>`
+  )).join('');
+}
+
+function renderList(columns, groups) {
+  return groups.map((group) => (
+    `<section class="bases-group"><header class="bases-group-header"><h3>${escapeHtml(group.label)}</h3>${renderSummaryBar(group.summaries)}</header><ul class="bases-list">${(group.rows ?? []).map((row) => (
+      `<li class="bases-list-item">${columns.map((column) => {
+        const cell = row.cells[column.id];
+        if (!cell || cell.type === 'empty') {
+          return '';
+        }
+        return `<span class="bases-list-field"><strong>${escapeHtml(column.label)}:</strong> ${renderRowValue(column, row)}</span>`;
+      }).join('')}</li>`
+    )).join('')}</ul></section>`
+  )).join('');
+}
+
+function renderCards(columns, groups, view) {
+  return groups.map((group) => (
+    `<section class="bases-group"><header class="bases-group-header"><h3>${escapeHtml(group.label)}</h3>${renderSummaryBar(group.summaries)}</header><div class="bases-cards">${(group.rows ?? []).map((row) => {
+      const imageCell = getCardImageCell(view, columns, row);
+      const imageText = formatCellText(imageCell);
+      let mediaHtml = '';
+      if (looksLikeHexColor(imageText)) {
+        mediaHtml = `<div class="bases-card-media bases-card-media-color" style="--bases-card-swatch:${escapeHtml(imageText)}"></div>`;
+      } else {
+        const url = getImageUrlFromCell(imageCell);
+        if (url) {
+          mediaHtml = `<img class="bases-card-media" src="${escapeHtml(url)}" alt="${escapeHtml(imageText)}">`;
+        }
+      }
+
+      return `<article class="bases-card">${mediaHtml}<div class="bases-card-body">${columns.map((column) => {
+        const cell = row.cells[column.id];
+        if (!cell || cell.type === 'empty') {
+          return '';
+        }
+        return `<div class="bases-card-field"><div class="bases-card-label">${escapeHtml(column.label)}</div><div class="bases-card-value">${renderRowValue(column, row)}</div></div>`;
+      }).join('')}</div></article>`;
+    }).join('')}</div></section>`
+  )).join('');
+}
+
+function renderViewBody(result) {
+  if (!result.view.supported) {
+    return `<div class="bases-unsupported">CollabMD parsed this view but does not render the <code>${escapeHtml(result.view.type)}</code> layout yet.</div>`;
+  }
+
+  switch (result.view.type) {
+    case 'cards':
+      return renderCards(result.columns, result.groups, result.view);
+    case 'list':
+      return renderList(result.columns, result.groups);
+    case 'table':
+    default:
+      return renderTable(result.columns, result.groups);
+  }
+}
+
+function renderViewTabs(result) {
+  return (result.views ?? []).map((view) => (
+    `<button type="button" class="bases-view-tab${view.id === result.view.id ? ' is-active' : ''}" data-base-view="${escapeHtml(view.id)}">${escapeHtml(view.name)}</button>`
+  )).join('');
+}
+
+function renderShellHtml(result, state) {
+  return `
+    <section class="bases-shell" data-base-shell-key="${escapeHtml(state.key)}">
+      <header class="bases-toolbar">
+        <div class="bases-toolbar-main">
+          <div class="bases-tabs" data-base-tabs>
+            ${renderViewTabs(result)}
+          </div>
+          <div class="bases-meta" data-base-meta>${escapeHtml(String(result.totalRows ?? 0))} results</div>
+        </div>
+        <div class="bases-toolbar-actions">
+          <input class="bases-search-input" type="search" value="${escapeHtml(state.search)}" placeholder="Search this base">
+          <button type="button" class="bases-export-btn">Export CSV</button>
+        </div>
+      </header>
+      <div data-base-summary-slot>${renderSummaryBar(result.summaries)}</div>
+      <div class="bases-content" data-base-content>${renderViewBody(result)}</div>
+    </section>
+  `;
+}
+
+function findShellElement(entry) {
+  if (!entry?.placeholder?.querySelector) {
+    return null;
+  }
+
+  return entry.placeholder.querySelector(`[data-base-shell-key="${entry.key}"]`)
+    ?? entry.placeholder.querySelector('.bases-shell');
+}
+
+function updateShellContent(entry, result) {
+  const shell = findShellElement(entry);
+  if (!shell?.querySelector) {
+    entry.placeholder.innerHTML = renderShellHtml(result, entry);
+    return;
+  }
+
+  const tabs = shell.querySelector('[data-base-tabs]');
+  if (tabs) {
+    tabs.innerHTML = renderViewTabs(result);
+  }
+
+  const meta = shell.querySelector('[data-base-meta]');
+  if (meta) {
+    meta.textContent = `${String(result.totalRows ?? 0)} results`;
+  }
+
+  const summarySlot = shell.querySelector('[data-base-summary-slot]');
+  if (summarySlot) {
+    summarySlot.innerHTML = renderSummaryBar(result.summaries);
+  }
+
+  const content = shell.querySelector('[data-base-content]');
+  if (content) {
+    content.innerHTML = renderViewBody(result);
+  }
+
+  const input = shell.querySelector('.bases-search-input');
+  if (input && input.value !== entry.search) {
+    input.value = entry.search;
+  }
+}
+
+function downloadBlob(blob, fileName = 'base.csv') {
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = fileName;
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+
+function parseDownloadFileName(contentDisposition = '') {
+  const utfMatch = contentDisposition.match(/filename\*=UTF-8''([^;]+)/iu);
+  if (utfMatch) {
+    return decodeURIComponent(utfMatch[1]);
+  }
+  const asciiMatch = contentDisposition.match(/filename="([^"]+)"/iu);
+  return asciiMatch?.[1] || 'base.csv';
+}
+
+export class BasesPreviewController {
+  constructor({
+    getActiveFilePath = () => '',
+    onOpenFile,
+    previewElement,
+    toastController,
+    vaultApiClient,
+  }) {
+    this.getActiveFilePath = getActiveFilePath;
+    this.onOpenFile = onOpenFile;
+    this.previewElement = previewElement;
+    this.toastController = toastController;
+    this.vaultApiClient = vaultApiClient;
+    this.entries = new Map();
+    this.searchTimers = new Map();
+
+    this.handleClick = (event) => {
+      const openButton = event.target.closest('[data-base-open-file]');
+      if (openButton) {
+        event.preventDefault();
+        this.onOpenFile?.(openButton.dataset.baseOpenFile || '');
+        return;
+      }
+
+      const tab = event.target.closest('.bases-view-tab');
+      if (tab) {
+        const shell = tab.closest('[data-base-shell-key]');
+        const entry = shell ? this.entries.get(shell.dataset.baseShellKey || '') : null;
+        if (!entry) {
+          return;
+        }
+
+        entry.payload.view = tab.dataset.baseView || '';
+        void this.renderEntry(entry);
+        return;
+      }
+
+      const exportButton = event.target.closest('.bases-export-btn');
+      if (exportButton) {
+        const shell = exportButton.closest('[data-base-shell-key]');
+        const entry = shell ? this.entries.get(shell.dataset.baseShellKey || '') : null;
+        if (!entry) {
+          return;
+        }
+
+        void this.exportEntry(entry);
+      }
+    };
+
+    this.handleInput = (event) => {
+      const input = event.target.closest('.bases-search-input');
+      if (!input) {
+        return;
+      }
+
+      const shell = input.closest('[data-base-shell-key]');
+      const entry = shell ? this.entries.get(shell.dataset.baseShellKey || '') : null;
+      if (!entry) {
+        return;
+      }
+
+      entry.search = input.value || '';
+      clearTimeout(this.searchTimers.get(entry.key));
+      this.searchTimers.set(entry.key, setTimeout(() => {
+        entry.payload.search = entry.search;
+        void this.renderEntry(entry);
+      }, 180));
+    };
+
+    this.previewElement?.addEventListener('click', this.handleClick);
+    this.previewElement?.addEventListener('input', this.handleInput);
+  }
+
+  destroy() {
+    this.previewElement?.removeEventListener('click', this.handleClick);
+    this.previewElement?.removeEventListener('input', this.handleInput);
+    this.searchTimers.forEach((timer) => clearTimeout(timer));
+    this.searchTimers.clear();
+    this.entries.clear();
+  }
+
+  reconcileEmbeds(previewElement = this.previewElement) {
+    if (!previewElement) {
+      return;
+    }
+
+    Array.from(previewElement.querySelectorAll('.bases-embed-placeholder[data-base-key]')).forEach((placeholder) => {
+      const key = placeholder.dataset.baseKey || createShellKey();
+      const existing = this.entries.get(key);
+      const payload = {
+        path: placeholder.dataset.basePath || '',
+        search: '',
+        source: placeholder.dataset.baseSource || null,
+        sourcePath: placeholder.dataset.baseSourcePath || '',
+        view: placeholder.dataset.baseView || '',
+      };
+    const entry = existing ?? {
+      key,
+      payload,
+      placeholder,
+      requestVersion: 0,
+      result: null,
+      search: '',
+    };
+      entry.payload = payload;
+      entry.placeholder = placeholder;
+      this.entries.set(key, entry);
+      void this.renderEntry(entry);
+    });
+  }
+
+  async renderStandalone({ filePath, renderHost, source = null }) {
+    const key = `standalone:${filePath}`;
+    const entry = this.entries.get(key) ?? {
+      key,
+      payload: {
+        path: filePath,
+        search: '',
+        source,
+        sourcePath: filePath,
+        view: '',
+      },
+      placeholder: renderHost,
+      requestVersion: 0,
+      result: null,
+      search: '',
+    };
+    entry.placeholder = renderHost;
+    entry.payload.path = filePath;
+    entry.payload.source = typeof source === 'string' ? source : null;
+    entry.payload.sourcePath = filePath;
+    this.entries.set(key, entry);
+    await this.renderEntry(entry);
+  }
+
+  async renderEntry(entry) {
+    if (!entry?.placeholder?.isConnected) {
+      return;
+    }
+
+    const requestVersion = (entry.requestVersion ?? 0) + 1;
+    entry.requestVersion = requestVersion;
+    const hasShell = Boolean(findShellElement(entry));
+    if (!hasShell) {
+      entry.placeholder.innerHTML = '<div class="preview-shell">Loading base…</div>';
+    }
+    try {
+      const response = await this.vaultApiClient.queryBase({
+        activeFilePath: this.getActiveFilePath?.() ?? '',
+        ...entry.payload,
+      });
+      if (requestVersion !== entry.requestVersion || !entry?.placeholder?.isConnected) {
+        return;
+      }
+      entry.result = response.result;
+      updateShellContent(entry, entry.result);
+    } catch (error) {
+      if (requestVersion !== entry.requestVersion || !entry?.placeholder?.isConnected) {
+        return;
+      }
+      if (hasShell) {
+        const shell = findShellElement(entry);
+        const content = shell?.querySelector?.('[data-base-content]') ?? null;
+        if (content) {
+          content.innerHTML = `<div class="preview-shell">Failed to load base: ${escapeHtml(error.message || 'Unknown error')}</div>`;
+          return;
+        }
+      }
+      entry.placeholder.innerHTML = `<div class="preview-shell">Failed to load base: ${escapeHtml(error.message || 'Unknown error')}</div>`;
+    }
+  }
+
+  async exportEntry(entry) {
+    try {
+      const response = await this.vaultApiClient.exportBaseCsv({
+        activeFilePath: this.getActiveFilePath?.() ?? '',
+        ...entry.payload,
+      });
+      downloadBlob(response.blob, parseDownloadFileName(response.contentDisposition));
+    } catch (error) {
+      this.toastController?.show?.(error.message || 'Failed to export base CSV');
+    }
+  }
+}

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

@@ -2,6 +2,7 @@ import {
   getVaultFileExtension,
 } from '../../domain/file-kind.js';
 import {
+  createBaseStarter,
   composeVaultChildPath,
   createDrawioStarter,
   createMarkdownStarter,
@@ -123,6 +124,16 @@ export class FileActionController {
         meta: '.md',
         onSelect: () => this.handleNewFile({ parentDir }),
       },
+      {
+        contextLabel: 'New base file',
+        group: 'Note',
+        hint: 'Base',
+        icon: this.getCreateActionIcon('base'),
+        id: 'base',
+        label: 'Base file',
+        meta: '.base',
+        onSelect: () => this.handleNewBase({ parentDir }),
+      },
       {
         contextLabel: 'New Excalidraw drawing',
         group: 'Diagram',
@@ -220,6 +231,8 @@ export class FileActionController {
 
   getCreateActionIcon(kind) {
     switch (kind) {
+      case 'base':
+        return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4h7l5 5v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/><path d="M14 4v5h5"/><path d="M8 13h8"/><path d="M8 17h6"/><path d="M8 9h3"/></svg>';
       case 'drawio':
       case 'plantuml':
         return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="7" height="6" rx="1"/><rect x="14" y="4" width="7" height="6" rx="1"/><rect x="8.5" y="14" width="7" height="6" rx="1"/><path d="M10 7h4"/><path d="M17.5 10v2.5"/><path d="M6.5 10v2.5"/><path d="M6.5 12.5h11"/></svg>';
@@ -670,6 +683,36 @@ export class FileActionController {
     });
   }
 
+  handleNewBase({ parentDir = '' } = {}) {
+    const context = this.getCreateContext(parentDir);
+
+    this.openActionDialog({
+      title: 'Create base file',
+      copy: context.normalizedParentDir
+        ? 'Add a new `.base` file inside the selected folder. It opens immediately after creation.'
+        : 'Add a new `.base` file to the vault. It opens immediately after creation.',
+      label: `Base ${context.inputLabelSuffix}`,
+      hint: `${context.hintPrefix} ".base" is added automatically.`,
+      note: context.note,
+      placeholder: context.normalizedParentDir ? 'table-view' : 'views/table-view',
+      submitLabel: 'Create base',
+      emptyMessage: 'Base path is required',
+      onSubmit: (value) => {
+        const normalizedPath = normalizeVaultPathInput(value);
+        if (!normalizedPath) {
+          this.showToast('Base path is required');
+          return false;
+        }
+
+        const starter = createBaseStarter(composeVaultChildPath(context.normalizedParentDir, normalizedPath));
+        return this.createVaultFile(starter.path, starter.content, {
+          errorMessage: 'Failed to create base file',
+          openAfterCreate: true,
+        });
+      },
+    });
+  }
+
   handleNewFolder({ parentDir = '' } = {}) {
     const context = this.getCreateContext(parentDir);
 

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

@@ -385,10 +385,14 @@ export class FileExplorerView {
     button.className = 'file-tree-item file-tree-file';
     const isDrawio = fileType === 'drawio';
     const isExcalidraw = fileType === 'excalidraw';
+    const isBase = fileType === 'base';
     const isImage = fileType === 'image';
     const isMermaid = fileType === 'mermaid';
     const isPlantUml = fileType === 'plantuml';
 
+    if (isBase) {
+      button.classList.add('is-base');
+    }
     if (isDrawio) {
       button.classList.add('is-drawio');
     }
@@ -412,7 +416,7 @@ export class FileExplorerView {
     button.dataset.depth = depth;
     button.dataset.path = filePath;
     button.innerHTML = `
-      ${this.getFileIconSvg({ isDrawio, isExcalidraw, isImage, isMermaid, isPlantUml })}
+      ${this.getFileIconSvg({ isBase, isDrawio, isExcalidraw, isImage, isMermaid, isPlantUml })}
       <span class="file-tree-name">${escapeHtml(stripVaultFileExtension(name))}</span>
     `;
 
@@ -534,7 +538,11 @@ export class FileExplorerView {
     return true;
   }
 
-  getFileIconSvg({ isDrawio, isExcalidraw, isImage, isMermaid, isPlantUml }) {
+  getFileIconSvg({ isBase, isDrawio, isExcalidraw, isImage, isMermaid, isPlantUml }) {
+    if (isBase) {
+      return '<svg class="file-tree-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4h7l5 5v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/><path d="M14 4v5h5"/><path d="M8 13h8"/><path d="M8 17h6"/><path d="M8 9h3"/></svg>';
+    }
+
     if (isDrawio) {
       return '<svg class="file-tree-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="7" height="6" rx="1"/><rect x="14" y="4" width="7" height="6" rx="1"/><rect x="8.5" y="14" width="7" height="6" rx="1"/><path d="M10 7h4"/><path d="M17.5 10v2.5"/><path d="M6.5 10v2.5"/><path d="M6.5 12.5h11"/></svg>';
     }