collabmd 0.1.30 → 0.1.31

package/src/client/presentation/file-tree-state.js

@@ -7,6 +7,7 @@ function flattenTree(nodes, files = [], searchEntries = []) {
     }
 
     searchEntries.push({
+      lowerPath: String(node.path).toLowerCase(),
       name: node.name,
       path: node.path,
       type: node.type,
@@ -14,6 +15,7 @@ function flattenTree(nodes, files = [], searchEntries = []) {
 
     if (
       node.type === 'file'
+      || node.type === 'base'
       || node.type === 'excalidraw'
       || node.type === 'drawio'
       || node.type === 'mermaid'
@@ -102,7 +104,13 @@ export class FileTreeState {
       return [];
     }
 
-    return this.flatSearchEntries.filter((entry) => entry.path.toLowerCase().includes(this.searchQuery));
+    return this.flatSearchEntries
+      .filter((entry) => entry.lowerPath.includes(this.searchQuery))
+      .map((entry) => ({
+        name: entry.name,
+        path: entry.path,
+        type: entry.type,
+      }));
   }
 
   getNode(pathValue) {

package/src/client/presentation/quick-switcher-controller.js

@@ -7,6 +7,20 @@ function stripDisplayExtension(filePath) {
   return stripVaultFileExtension(filePath);
 }
 
+function createCorpusEntry(filePath) {
+  const displayName = stripDisplayExtension(filePath);
+  const fileName = displayName.split('/').pop() || displayName;
+
+  return {
+    displayName,
+    fileName,
+    filePath,
+    lowerDisplayName: displayName.toLowerCase(),
+    lowerFileName: fileName.toLowerCase(),
+    lowerPath: String(filePath).toLowerCase(),
+  };
+}
+
 export class QuickSwitcherController {
   constructor({ getFileList, onFileSelect }) {
     this.getFileList = getFileList;
@@ -18,6 +32,8 @@ export class QuickSwitcherController {
     this.hint = document.getElementById('quickSwitcherHint');
 
     this.filteredFiles = [];
+    this.fileCorpus = [];
+    this.lastFileListRef = null;
     this.selectedIndex = 0;
     this.isOpen = false;
 
@@ -139,28 +155,53 @@ export class QuickSwitcherController {
   filterFiles() {
     const query = this.input?.value.trim().toLowerCase() ?? '';
     const allFiles = this.getFileList?.() ?? [];
+    if (allFiles !== this.lastFileListRef) {
+      this.lastFileListRef = allFiles;
+      this.fileCorpus = allFiles.map((filePath) => createCorpusEntry(filePath));
+    }
 
     if (!query) {
-      this.filteredFiles = allFiles.slice(0, MAX_VISIBLE_RESULTS);
-    } else {
-      this.filteredFiles = allFiles
-        .map((filePath) => {
-          const score = this.fuzzyScore(filePath.toLowerCase(), query);
-          return { filePath, score };
-        })
-        .filter((item) => item.score > 0)
-        .sort((a, b) => b.score - a.score)
+      this.filteredFiles = this.fileCorpus
         .slice(0, MAX_VISIBLE_RESULTS)
-        .map((item) => item.filePath);
+        .map((entry) => entry.filePath);
+    } else {
+      const ranked = [];
+      this.fileCorpus.forEach((entry) => {
+        const score = this.fuzzyScore(entry, query);
+        if (score <= 0) {
+          return;
+        }
+
+        const rankedEntry = { filePath: entry.filePath, score };
+        let inserted = false;
+        for (let index = 0; index < ranked.length; index += 1) {
+          const current = ranked[index];
+          if (score > current.score || (score === current.score && entry.lowerPath < String(current.filePath).toLowerCase())) {
+            ranked.splice(index, 0, rankedEntry);
+            inserted = true;
+            break;
+          }
+        }
+
+        if (!inserted && ranked.length < MAX_VISIBLE_RESULTS) {
+          ranked.push(rankedEntry);
+        }
+
+        if (ranked.length > MAX_VISIBLE_RESULTS) {
+          ranked.length = MAX_VISIBLE_RESULTS;
+        }
+      });
+
+      this.filteredFiles = ranked.map((entry) => entry.filePath);
     }
 
     this.selectedIndex = 0;
     this.renderResults(query);
   }
 
-  fuzzyScore(text, query) {
-    const name = stripDisplayExtension(text);
-    const nameOnly = name.split('/').pop();
+  fuzzyScore(entry, query) {
+    const name = entry.lowerDisplayName;
+    const nameOnly = entry.lowerFileName;
 
     // Exact substring match in filename gets highest score
     if (nameOnly.includes(query)) return 100 + (1 / nameOnly.length);

package/src/client/styles/export-document.css

@@ -1,4 +1,16 @@
+html[data-surface='export-document'] {
+  height: auto;
+  min-height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: auto;
+}
+
 body[data-surface='export-document'] {
+  height: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: auto;
   background: var(--color-bg);
   color: var(--color-text);
 }

package/src/client/styles/features/backlinks.css

@@ -9,12 +9,17 @@
   min-width: 0;
 }
 
+.backlinks-panel-header {
+  position: relative;
+  pointer-events: auto;
+}
+
 .backlinks-panel-layer {
   position: absolute;
-  left: max(var(--space-4), calc((100% - min(var(--preview-content-max-width), 100%)) / 2));
-  bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
+  left: var(--backlinks-dock-left, max(var(--space-4), calc((100% - min(var(--preview-content-max-width), 100%)) / 2)));
+  bottom: var(--backlinks-dock-bottom, calc(var(--space-5) + env(safe-area-inset-bottom, 0px)));
   z-index: 14;
-  width: min(320px, calc(min(var(--preview-content-max-width), 100%) - var(--space-8)));
+  width: var(--backlinks-dock-width, min(320px, calc(min(var(--preview-content-max-width), 100%) - var(--space-8))));
   pointer-events: none;
 }
 
@@ -36,6 +41,27 @@
   box-shadow: var(--shadow-floating-hover);
 }
 
+.backlinks-panel-header .backlinks-header {
+  min-height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-full);
+  background: var(--surface-overlay);
+  box-shadow: var(--shadow-sm);
+  color: var(--color-text-muted);
+  backdrop-filter: blur(12px);
+}
+
+.backlinks-panel-header .backlinks-header:hover {
+  border-color: var(--border-accent-muted);
+  background: var(--surface-overlay-strong);
+}
+
+.backlinks-panel-header .backlinks-count {
+  min-width: 18px;
+  padding: 0 6px;
+}
+
 .backlinks-panel-inline {
   margin-top: var(--space-6);
   padding: 0 var(--space-4);
@@ -125,6 +151,32 @@
   background: var(--surface-overlay-raised);
 }
 
+.backlinks-panel-header .backlinks-body {
+  position: absolute;
+  top: calc(100% + var(--space-2));
+  right: 0;
+  z-index: 24;
+  width: min(320px, calc(100vw - var(--space-8)));
+  max-height: none;
+  border: 1px solid var(--border-accent-muted);
+  border-radius: var(--radius-xl);
+  background: var(--surface-overlay-strong);
+  box-shadow: var(--shadow-floating-soft);
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  transform: translateY(-4px);
+  transition: opacity 160ms ease, transform 160ms ease;
+}
+
+.backlinks-panel-header.expanded .backlinks-body {
+  max-height: min(44vh, 400px);
+  overflow-y: auto;
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
 .backlinks-panel-dock.expanded .backlinks-body {
   max-height: min(44vh, 400px);
   overflow-y: auto;
@@ -147,6 +199,10 @@
   padding: 10px;
 }
 
+.backlinks-panel-header .backlinks-list {
+  padding: 10px;
+}
+
 .backlink-item {
   display: block;
   width: 100%;
@@ -216,3 +272,9 @@
     display: none !important;
   }
 }
+
+@media (max-width: 768px) {
+  .backlinks-panel-header {
+    display: none !important;
+  }
+}

package/src/client/styles/features/preview-markdown.css

@@ -167,12 +167,221 @@
 }
 
 .preview-content p:has(> .excalidraw-embed-placeholder:only-child),
+.preview-content p:has(> .bases-embed-placeholder:only-child),
 .preview-content p:has(> .video-embed-placeholder:only-child),
 .preview-content p:has(> .plantuml-shell:only-child) {
   max-width: none;
   margin-bottom: 0;
 }
 
+.preview-content .bases-shell {
+  width: 100%;
+  margin: 0 0 var(--space-5);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: color-mix(in oklab, var(--color-surface-offset) 65%, var(--color-surface));
+  overflow: hidden;
+}
+
+.preview-content .bases-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--color-divider);
+}
+
+.preview-content .bases-toolbar-main,
+.preview-content .bases-toolbar-actions,
+.preview-content .bases-tabs,
+.preview-content .bases-summaries,
+.preview-content .bases-value-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  align-items: center;
+}
+
+.preview-content .bases-view-tab,
+.preview-content .bases-export-btn,
+.preview-content .bases-link-button {
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  background: var(--color-surface);
+  color: var(--color-text);
+  cursor: pointer;
+  font: inherit;
+}
+
+.preview-content .bases-view-tab,
+.preview-content .bases-export-btn {
+  min-height: 34px;
+  padding: 0 var(--space-3);
+}
+
+.preview-content .bases-view-tab.is-active {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: var(--color-primary-contrast);
+}
+
+.preview-content .bases-search-input {
+  min-width: 200px;
+  min-height: 34px;
+  padding: 0 var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  background: var(--color-surface);
+  color: var(--color-text);
+  font: inherit;
+}
+
+.preview-content .bases-meta,
+.preview-content .bases-summary-label,
+.preview-content .bases-card-label {
+  color: var(--color-text-muted);
+  font-size: var(--text-ui-sm);
+}
+
+.preview-content .bases-summaries {
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--color-divider);
+}
+
+.preview-content .bases-summary {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: 28px;
+  padding: 0 var(--space-3);
+  border-radius: 999px;
+  background: var(--color-surface);
+}
+
+.preview-content .bases-content {
+  padding: var(--space-4);
+}
+
+.preview-content .bases-group + .bases-group {
+  margin-top: var(--space-5);
+}
+
+.preview-content .bases-group-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+}
+
+.preview-content .bases-group-header h3 {
+  margin: 0;
+}
+
+.preview-content .bases-table-shell {
+  overflow-x: auto;
+}
+
+.preview-content .bases-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.preview-content .bases-table th,
+.preview-content .bases-table td {
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--color-divider);
+  text-align: left;
+  vertical-align: top;
+}
+
+.preview-content .bases-list,
+.preview-content .bases-cards {
+  margin: 0;
+  padding: 0;
+  max-width: none;
+}
+
+.preview-content .bases-list {
+  list-style: none;
+}
+
+.preview-content .bases-list-item {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  padding: var(--space-3) 0;
+  border-bottom: 1px solid var(--color-divider);
+}
+
+.preview-content .bases-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: var(--space-3);
+}
+
+.preview-content .bases-card {
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+}
+
+.preview-content .bases-card-media {
+  display: block;
+  width: 100%;
+  height: 140px;
+  object-fit: cover;
+  background: color-mix(in oklab, var(--color-surface-offset) 50%, var(--color-surface));
+}
+
+.preview-content .bases-card-media-color {
+  background: var(--bases-card-swatch);
+}
+
+.preview-content .bases-card-body {
+  padding: var(--space-3);
+}
+
+.preview-content .bases-card-field + .bases-card-field {
+  margin-top: var(--space-3);
+}
+
+.preview-content .bases-link-button {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--color-primary);
+}
+
+.preview-content .bases-value-pill {
+  display: inline-flex;
+  align-items: center;
+  min-height: 26px;
+  padding: 0 var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  background: var(--color-surface);
+  font-size: var(--text-ui-sm);
+}
+
+.preview-content .bases-inline-image {
+  display: block;
+  max-width: 120px;
+  max-height: 80px;
+  border-radius: var(--radius-md);
+}
+
+.preview-content .bases-unsupported {
+  padding: var(--space-4);
+  border: 1px dashed var(--color-border);
+  border-radius: var(--radius-lg);
+  color: var(--color-text-muted);
+}
+
 .preview-content a {
   color: var(--color-primary);
   text-decoration: none;

package/src/client/styles/layout/shell.css

@@ -220,6 +220,12 @@
   padding: var(--space-4);
 }
 
+.preview-content.is-base-file-preview {
+  width: 100%;
+  min-height: 100%;
+  max-width: none;
+}
+
 .preview-content.is-plantuml-file-preview,
 .preview-content.is-mermaid-file-preview {
   width: 100%;
@@ -246,7 +252,8 @@
 
 .preview-content.is-drawio-file-preview [data-preview-render-host='true'],
 .preview-content.is-excalidraw-file-preview [data-preview-render-host='true'],
-.preview-content.is-image-file-preview [data-preview-render-host='true'] {
+.preview-content.is-image-file-preview [data-preview-render-host='true'],
+.preview-content.is-base-file-preview [data-preview-render-host='true'] {
   display: flex;
   flex: 1;
   width: 100%;

package/src/client/styles/layout/view-modes.css

@@ -16,6 +16,9 @@
 
 .editor-layout[data-view="preview"] .preview-body {
   --preview-content-max-width: 1080px;
+  --backlinks-dock-left: var(--space-6);
+  --backlinks-dock-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
+  --backlinks-dock-width: min(320px, calc(100% - var(--space-12)));
 }
 
 .editor-layout[data-view="preview"] .preview-content {
@@ -24,6 +27,7 @@
 
 .editor-layout[data-view="preview"] .preview-content.is-excalidraw-file-preview,
 .editor-layout[data-view="preview"] .preview-content.is-drawio-file-preview,
+.editor-layout[data-view="preview"] .preview-content.is-base-file-preview,
 .editor-layout[data-view="preview"] .preview-content.is-image-file-preview,
 .editor-layout[data-view="preview"] .preview-content.is-mermaid-file-preview,
 .editor-layout[data-view="preview"] .preview-content.is-plantuml-file-preview {
@@ -35,6 +39,7 @@
 }
 
 .editor-layout[data-view="preview"] .preview-content p:has(> .excalidraw-embed-placeholder:only-child),
+.editor-layout[data-view="preview"] .preview-content p:has(> .bases-embed-placeholder:only-child),
 .editor-layout[data-view="preview"] .preview-content p:has(> .video-embed-placeholder:only-child),
 .editor-layout[data-view="preview"] .preview-content p:has(> .mermaid-shell:only-child),
 .editor-layout[data-view="preview"] .preview-content p:has(> .plantuml-shell:only-child) {

package/src/domain/file-kind.js

@@ -1,4 +1,5 @@
 const MARKDOWN_FILE_EXTENSIONS = Object.freeze(['.md', '.markdown', '.mdx']);
+const BASE_FILE_EXTENSION = '.base';
 const EXCALIDRAW_FILE_EXTENSION = '.excalidraw';
 const DRAWIO_FILE_EXTENSION = '.drawio';
 const MERMAID_FILE_EXTENSIONS = Object.freeze(['.mmd', '.mermaid']);
@@ -12,10 +13,11 @@ const DIAGRAM_FILE_EXTENSIONS = Object.freeze([
 ]);
 const VAULT_FILE_EXTENSIONS = Object.freeze([
   ...MARKDOWN_FILE_EXTENSIONS,
+  BASE_FILE_EXTENSION,
   ...DIAGRAM_FILE_EXTENSIONS,
   ...IMAGE_ATTACHMENT_EXTENSIONS,
 ]);
-const STRIP_VAULT_EXTENSION_PATTERN = /\.(?:md|markdown|mdx|excalidraw|drawio|mmd|mermaid|puml|plantuml|png|jpe?g|webp|gif|svg)$/i;
+const STRIP_VAULT_EXTENSION_PATTERN = /\.(?:md|markdown|mdx|base|excalidraw|drawio|mmd|mermaid|puml|plantuml|png|jpe?g|webp|gif|svg)$/i;
 
 function normalizeFilePath(filePath) {
   return String(filePath ?? '').trim().toLowerCase();
@@ -27,6 +29,7 @@ function hasFileExtension(filePath, extensions) {
 }
 
 export {
+  BASE_FILE_EXTENSION,
   DIAGRAM_FILE_EXTENSIONS,
   DRAWIO_FILE_EXTENSION,
   EXCALIDRAW_FILE_EXTENSION,
@@ -42,6 +45,10 @@ export function getVaultFileKind(filePath) {
     return 'markdown';
   }
 
+  if (hasFileExtension(filePath, [BASE_FILE_EXTENSION])) {
+    return 'base';
+  }
+
   if (hasFileExtension(filePath, [EXCALIDRAW_FILE_EXTENSION])) {
     return 'excalidraw';
   }
@@ -75,6 +82,10 @@ export function getVaultTreeNodeType(filePath) {
     return 'image';
   }
 
+  if (kind === 'base') {
+    return 'base';
+  }
+
   return kind === 'markdown' ? 'file' : kind;
 }
 
@@ -91,6 +102,10 @@ export function isExcalidrawFilePath(filePath) {
   return getVaultFileKind(filePath) === 'excalidraw';
 }
 
+export function isBaseFilePath(filePath) {
+  return getVaultFileKind(filePath) === 'base';
+}
+
 export function isMermaidFilePath(filePath) {
   return getVaultFileKind(filePath) === 'mermaid';
 }
@@ -122,7 +137,7 @@ export function supportsCommentsForFilePath(filePath) {
 }
 
 export function supportsBacklinksForFilePath(filePath) {
-  return isMarkdownFilePath(filePath);
+  return isVaultFilePath(filePath);
 }
 
 export function stripVaultFileExtension(name) {

package/src/domain/wiki-link-resolver.js

@@ -1,15 +1,16 @@
+import { getVaultFileExtension, isMarkdownFilePath } from './file-kind.js';
+
 function normalizeWikiTarget(target) {
   const trimmed = String(target ?? '').trim();
   if (!trimmed) {
     return null;
   }
 
-  return trimmed.endsWith('.md') ? trimmed : `${trimmed}.md`;
+  return trimmed;
 }
 
 export function createWikiTargetIndex(files = []) {
   const exactPaths = new Set();
-  const pathWithoutMd = new Map();
   const suffixMatch = new Map();
 
   for (const filePath of files) {
@@ -19,11 +20,6 @@ export function createWikiTargetIndex(files = []) {
 
     exactPaths.add(filePath);
 
-    const rawPath = filePath.replace(/\.md$/i, '');
-    if (!pathWithoutMd.has(rawPath)) {
-      pathWithoutMd.set(rawPath, filePath);
-    }
-
     const segments = filePath.split('/');
     for (let index = 0; index < segments.length; index += 1) {
       const suffix = segments.slice(index).join('/');
@@ -35,52 +31,74 @@ export function createWikiTargetIndex(files = []) {
 
   return {
     exactPaths,
-    pathWithoutMd,
     suffixMatch,
   };
 }
 
 export function resolveWikiTargetWithIndex(target, index) {
-  const normalizedTarget = normalizeWikiTarget(target);
-  if (!normalizedTarget || !index) {
+  const rawTarget = normalizeWikiTarget(target);
+  if (!rawTarget || !index) {
     return null;
   }
 
-  if (index.exactPaths?.has(normalizedTarget)) {
-    return normalizedTarget;
+  if (index.exactPaths?.has(rawTarget)) {
+    return rawTarget;
   }
 
-  const suffixMatch = index.suffixMatch?.get(normalizedTarget);
+  const suffixMatch = index.suffixMatch?.get(rawTarget);
   if (suffixMatch) {
     return suffixMatch;
   }
 
-  const rawTarget = String(target ?? '').trim();
-  return index.pathWithoutMd?.get(rawTarget) ?? null;
+  if (getVaultFileExtension(rawTarget)) {
+    return null;
+  }
+
+  const markdownTarget = `${rawTarget}.md`;
+  if (index.exactPaths?.has(markdownTarget)) {
+    return markdownTarget;
+  }
+
+  return index.suffixMatch?.get(markdownTarget) ?? null;
 }
 
 export function resolveWikiTargetPath(target, files) {
-  const normalizedTarget = normalizeWikiTarget(target);
-  if (!normalizedTarget || !Array.isArray(files) || files.length === 0) {
+  const rawTarget = normalizeWikiTarget(target);
+  if (!rawTarget || !Array.isArray(files) || files.length === 0) {
     return null;
   }
 
-  const rawTarget = String(target ?? '').trim();
   let fallbackSuffixMatch = null;
 
   for (const filePath of files) {
-    if (filePath === normalizedTarget) {
+    if (filePath === rawTarget) {
       return filePath;
     }
 
-    if (filePath.replace(/\.md$/i, '') === rawTarget) {
+    if (!fallbackSuffixMatch && filePath.endsWith(`/${rawTarget}`)) {
+      fallbackSuffixMatch = filePath;
+    }
+  }
+
+  if (fallbackSuffixMatch || getVaultFileExtension(rawTarget)) {
+    return fallbackSuffixMatch;
+  }
+
+  const markdownTarget = `${rawTarget}.md`;
+  let markdownSuffixMatch = null;
+  for (const filePath of files) {
+    if (!isMarkdownFilePath(filePath)) {
+      continue;
+    }
+
+    if (filePath === markdownTarget) {
       return filePath;
     }
 
-    if (!fallbackSuffixMatch && filePath.endsWith(`/${normalizedTarget}`)) {
-      fallbackSuffixMatch = filePath;
+    if (!markdownSuffixMatch && filePath.endsWith(`/${markdownTarget}`)) {
+      markdownSuffixMatch = filePath;
     }
   }
 
-  return fallbackSuffixMatch;
+  return markdownSuffixMatch;
 }