collabmd 0.1.45 → 0.1.46

package/src/client/presentation/outline-controller.js

@@ -9,6 +9,8 @@ export class OutlineController {
     this.activeHeadingId = null;
     this.headings = [];
     this.pinnedHeadingId = null;
+    this.pdfOutline = null;
+    this.onNavigateToPdfOutline = null;
     this.onNavigateToHeading = onNavigateToHeading;
     this.onWillOpen = onWillOpen;
     this.panel = document.getElementById('outlinePanel');
@@ -81,6 +83,11 @@ export class OutlineController {
       return;
     }
 
+    if (this.pdfOutline) {
+      this.renderPdfOutline();
+      return;
+    }
+
     const previewContent = document.getElementById('previewContent');
     const headings = previewContent?.querySelectorAll('h1, h2, h3, h4, h5, h6') ?? [];
 
@@ -124,6 +131,85 @@ export class OutlineController {
     this.observeHeadings(Array.from(headings));
   }
 
+  setPdfOutline(outline, onNavigate) {
+    this.cleanup();
+    this.pdfOutline = Array.isArray(outline) && outline.length > 0 ? outline : null;
+    this.onNavigateToPdfOutline = this.pdfOutline ? onNavigate : null;
+    this.activeHeadingId = null;
+    this.toggleButton?.classList.toggle('hidden', !this.pdfOutline);
+
+    if (!this.pdfOutline) {
+      this.navigation?.replaceChildren();
+      this.close();
+      return;
+    }
+
+    if (this.outlineOpen) {
+      this.renderPdfOutline();
+    }
+  }
+
+  clearPdfOutline() {
+    this.pdfOutline = null;
+    this.onNavigateToPdfOutline = null;
+    this.activeHeadingId = null;
+    this.pinnedHeadingId = null;
+    this.navigation?.replaceChildren();
+    this.toggleButton?.classList.add('hidden');
+    this.close();
+  }
+
+  renderPdfOutline() {
+    if (!this.navigation || !this.pdfOutline) {
+      return;
+    }
+
+    this.cleanup();
+    this.navigation.replaceChildren();
+    const fragment = document.createDocumentFragment();
+    let itemIndex = 0;
+    const appendItems = (items, level = 1) => {
+      items.forEach((item) => {
+        if (!item || typeof item !== 'object') {
+          return;
+        }
+
+        const title = String(item.title ?? '').trim();
+        if (title) {
+          const id = `pdf-outline-${itemIndex}`;
+          const button = document.createElement('button');
+          button.type = 'button';
+          button.className = 'outline-item';
+          button.dataset.level = String(Math.min(level, 6));
+          button.dataset.target = id;
+          button.title = title;
+          button.textContent = title;
+          button.addEventListener('click', () => {
+            this.setActiveItem(id, { behavior: 'auto' });
+            this.onNavigateToPdfOutline?.(item);
+            if (this.mobileBreakpointQuery.matches) {
+              this.close();
+            }
+          });
+          fragment.appendChild(button);
+          itemIndex += 1;
+        }
+
+        if (Array.isArray(item.items)) {
+          appendItems(item.items, Math.min(level + 1, 6));
+        }
+      });
+    };
+
+    appendItems(this.pdfOutline);
+    if (fragment.childNodes.length === 0) {
+      this.navigation.innerHTML = '<div class="outline-empty">No outline found</div>';
+      return;
+    }
+
+    this.navigation.appendChild(fragment);
+  }
+
   cleanup({ preservePinnedHeading = false } = {}) {
     if (this.activeHeadingFrame) {
       cancelAnimationFrame(this.activeHeadingFrame);

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

@@ -1,5 +1,6 @@
 import { stripVaultFileExtension } from '../../domain/file-kind.js';
 import { escapeHtml } from '../domain/vault-utils.js';
+import { getVaultFileIconSvg } from './file-icon-svg.js';
 import {
   DEFAULT_SEARCH_DEBOUNCE_MS,
   QuickSwitcherTextSearchRunner,
@@ -19,6 +20,7 @@ function getRawFileName(filePath) {
 function createCorpusEntry(filePath) {
   const displayName = stripVaultFileExtension(filePath);
   const fileName = displayName.split('/').pop() || displayName;
+  const rawFileName = getRawFileName(filePath);
 
   return {
     displayName,
@@ -27,6 +29,7 @@ function createCorpusEntry(filePath) {
     lowerDisplayName: displayName.toLowerCase(),
     lowerFileName: fileName.toLowerCase(),
     lowerPath: String(filePath).toLowerCase(),
+    lowerRawFileName: rawFileName.toLowerCase(),
   };
 }
 
@@ -94,6 +97,25 @@ function findCorpusMatch(entry, query) {
     };
   }
 
+  const rawFileIndex = entry.lowerRawFileName.indexOf(query);
+  if (rawFileIndex >= 0) {
+    return {
+      indices: createRangeIndices(
+        rawFileIndex + (entry.displayName.length - entry.fileName.length),
+        query.length,
+      ),
+      score: 40 + (1 / entry.lowerRawFileName.length),
+    };
+  }
+
+  const rawPathIndex = entry.lowerPath.indexOf(query);
+  if (rawPathIndex >= 0) {
+    return {
+      indices: createRangeIndices(rawPathIndex, query.length),
+      score: 25 + (1 / entry.lowerPath.length),
+    };
+  }
+
   return findFuzzyMatch(entry.lowerDisplayName, query);
 }
 
@@ -174,7 +196,6 @@ export class QuickSwitcherController {
 
     this.filteredFiles = [];
     this.fileMatches = new Map();
-    this.fileNameCounts = new Map();
     this.fileMatchCount = 0;
     this.fileResultsTruncated = false;
     this.fileCorpus = [];
@@ -370,11 +391,6 @@ export class QuickSwitcherController {
     if (allFiles !== this.lastFileListRef) {
       this.lastFileListRef = allFiles;
       this.fileCorpus = allFiles.map((filePath) => createCorpusEntry(filePath));
-      this.fileNameCounts = new Map();
-      this.fileCorpus.forEach((entry) => {
-        const count = this.fileNameCounts.get(entry.lowerFileName) ?? 0;
-        this.fileNameCounts.set(entry.lowerFileName, count + 1);
-      });
     }
 
     this.fileMatches.clear();
@@ -495,19 +511,15 @@ export class QuickSwitcherController {
       item.setAttribute('aria-selected', index === this.selectedIndex ? 'true' : 'false');
       item.dataset.index = String(index);
 
-      const fileName = getFileName(filePath);
-      const rawFileName = getRawFileName(filePath);
+      const fileName = getRawFileName(filePath);
       const dirPath = getDirPath(filePath);
       const match = this.fileMatches.get(filePath);
       const corpusEntry = this.fileCorpus.find((entry) => entry.filePath === filePath);
       const matchIndices = corpusEntry ? splitMatchIndices(corpusEntry, match?.indices) : { dirPath: [], fileName: [] };
-      const displayFileName = (this.fileNameCounts.get(fileName.toLowerCase()) ?? 0) > 1
-        ? rawFileName
-        : fileName;
 
       item.innerHTML = `
-        <svg class="qs-result-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
-        <span class="qs-result-name">${highlightText(displayFileName, matchIndices.fileName)}</span>
+        ${getVaultFileIconSvg(filePath, { className: 'qs-result-icon' })}
+        <span class="qs-result-name">${highlightText(fileName, matchIndices.fileName)}</span>
         ${dirPath ? `<span class="qs-result-path">${highlightText(dirPath, matchIndices.dirPath)}</span>` : ''}
       `;
 

package/src/client/presentation/quick-switcher-text-search.js

@@ -1,4 +1,4 @@
-export const DEFAULT_SEARCH_DEBOUNCE_MS = 220;
+export const DEFAULT_SEARCH_DEBOUNCE_MS = 300;
 const TEXT_RESULT_LIMIT = 50;
 
 export function formatMatchCount(count = 0, { truncated = false } = {}) {

package/src/client/styles/components/navigation.css

@@ -25,13 +25,23 @@
   white-space: nowrap;
 }
 
-.toolbar-theme-icon {
+.toolbar-theme-icon,
+.toolbar-vim-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 
+.toolbar-vim-button .toolbar-vim-state {
+  margin-left: auto;
+}
+
+.toolbar-vim-button[aria-pressed='true'] .toolbar-vim-state {
+  background: var(--color-primary-highlight);
+  color: var(--color-primary);
+}
+
 .toolbar-theme-button {
   width: 32px;
   min-width: 32px;

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

@@ -524,6 +524,82 @@ body.excalidraw-maximized-open .resizer {
   color: var(--color-primary);
 }
 
+.file-tree-file.is-pdf .file-tree-icon {
+  color: var(--color-danger);
+}
+
 .file-tree-file.is-mermaid .file-tree-icon {
   color: oklch(from var(--color-primary) calc(l * 0.96) calc(c * 0.86) 215);
 }
+
+.file-tree-file.is-structurizr .file-tree-icon {
+  color: var(--color-primary);
+}
+
+.structurizr-preview-shell {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  margin: 0;
+  overflow: hidden;
+}
+
+.structurizr-preview-header {
+  flex-shrink: 0;
+}
+
+.structurizr-preview-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.structurizr-preview-status {
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--color-divider);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
+
+.structurizr-preview-status.is-error {
+  background: var(--color-error-highlight);
+  color: var(--color-error);
+}
+
+.structurizr-preview-stage {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.structurizr-preview-iframe {
+  display: block;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  border: 0;
+  background: var(--color-surface);
+}
+
+.structurizr-preview-shell.is-maximized {
+  position: fixed;
+  inset: var(--space-4);
+  z-index: 172;
+  width: auto !important;
+  height: auto !important;
+  max-width: none;
+  box-shadow: 0 0 0 9999px var(--surface-scrim), var(--shadow-media-modal);
+}
+
+body.structurizr-maximized-open {
+  overflow: hidden;
+}

package/src/client/styles/features/diff-special.css

@@ -0,0 +1,309 @@
+/* ===== DIFF / SPECIAL FILES ===== */
+
+.diff-special {
+  padding: var(--space-4);
+  border-top: 1px solid var(--color-divider);
+  background: var(--color-surface);
+}
+
+.diff-special-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+  margin-bottom: var(--space-3);
+}
+
+.diff-special-eyebrow {
+  display: block;
+  margin-bottom: 3px;
+  color: var(--color-primary);
+  font-size: var(--text-meta);
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.diff-special-title {
+  margin: 0;
+  color: var(--color-text);
+  font-size: var(--text-ui-sm);
+  font-weight: 700;
+}
+
+.diff-special-note,
+.diff-special-footnote {
+  color: var(--color-text-faint);
+  font-size: var(--text-meta);
+}
+
+.diff-special-note {
+  flex-shrink: 0;
+  font-family: var(--font-mono);
+}
+
+.diff-special-footnote {
+  margin: var(--space-3) 0 0;
+}
+
+.diff-media-grid,
+.diff-excalidraw-grid,
+.diff-drawio-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-3);
+}
+
+.diff-media-pane,
+.diff-excalidraw-pane,
+.diff-drawio-pane {
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-offset);
+}
+
+.diff-media-pane-header,
+.diff-excalidraw-pane-header,
+.diff-drawio-pane-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  min-height: 34px;
+  padding: 0 var(--space-3);
+  border-bottom: 1px solid var(--color-divider);
+}
+
+.diff-media-pane-label {
+  color: var(--color-text);
+  font-size: var(--text-label);
+  font-weight: 700;
+}
+
+.diff-media-pane-meta {
+  overflow: hidden;
+  color: var(--color-text-faint);
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.diff-media-canvas {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 280px;
+  padding: var(--space-4);
+  background-color: var(--color-surface);
+  background-image: linear-gradient(45deg, color-mix(in oklab, var(--color-text) 5%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in oklab, var(--color-text) 5%, transparent) 75%), linear-gradient(45deg, color-mix(in oklab, var(--color-text) 5%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in oklab, var(--color-text) 5%, transparent) 75%);
+  background-position: 0 0, 8px 8px;
+  background-size: 16px 16px;
+}
+
+.diff-media-image {
+  display: block;
+  width: auto;
+  max-width: 100%;
+  max-height: 380px;
+  object-fit: contain;
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-md);
+}
+
+.diff-media-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--color-text-faint);
+  font-size: var(--text-meta);
+  text-align: center;
+}
+
+.diff-media-empty-icon {
+  display: grid;
+  width: 30px;
+  height: 30px;
+  place-items: center;
+  border: 1px solid var(--color-divider);
+  border-radius: 50%;
+  color: var(--color-text-muted);
+  font-size: var(--text-title-md);
+}
+
+.diff-file-header-kind {
+  margin-left: auto;
+  color: var(--color-text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+}
+
+.diff-scene-summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+}
+
+.diff-scene-stat {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 5px;
+  padding: 5px 8px;
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-offset);
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+}
+
+.diff-scene-stat strong {
+  font-size: var(--text-ui-sm);
+}
+
+.diff-scene-stat--add strong {
+  color: var(--diff-add-text);
+}
+
+.diff-scene-stat--update strong {
+  color: var(--color-primary);
+}
+
+.diff-scene-stat--remove strong {
+  color: var(--diff-del-text);
+}
+
+.diff-excalidraw-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 220px;
+  padding: var(--space-3);
+  background: var(--surface-embed-canvas);
+}
+
+.diff-excalidraw-preview svg {
+  display: block;
+  width: 100%;
+  height: 220px;
+}
+
+.diff-excalidraw-preview-loading,
+.diff-excalidraw-preview--empty,
+.diff-excalidraw-preview.is-error {
+  color: var(--color-text-faint);
+  font-size: var(--text-meta);
+}
+
+.diff-excalidraw-preview.is-error {
+  background: var(--color-surface-offset);
+}
+
+.diff-excalidraw-source {
+  border-top: 1px solid var(--color-divider);
+}
+
+.diff-excalidraw-source summary {
+  padding: 8px var(--space-3);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  font-size: var(--text-meta);
+  font-weight: 600;
+}
+
+.diff-excalidraw-source summary:hover {
+  color: var(--color-text);
+}
+
+.diff-excalidraw-source pre {
+  max-height: 300px;
+  margin: 0;
+  padding: var(--space-3);
+  overflow: auto;
+  border-top: 1px solid var(--color-divider);
+  color: var(--color-text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  line-height: 1.55;
+  white-space: pre;
+}
+
+.diff-excalidraw-diff .diff-load-full-btn {
+  margin-top: var(--space-3);
+}
+
+.diff-drawio-preview {
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  min-height: 280px;
+  overflow: hidden;
+  background: var(--surface-embed-canvas);
+}
+
+.diff-drawio-preview .drawio-viewer-frame {
+  min-height: 280px;
+  cursor: default;
+}
+
+.diff-drawio-preview-loading,
+.diff-drawio-preview--empty,
+.diff-drawio-preview.is-error {
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  color: var(--color-text-faint);
+  font-size: var(--text-meta);
+}
+
+.diff-drawio-preview.is-error {
+  background: var(--color-surface-offset);
+}
+
+.diff-drawio-source {
+  border-top: 1px solid var(--color-divider);
+}
+
+.diff-drawio-source summary {
+  padding: 8px var(--space-3);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  font-size: var(--text-meta);
+  font-weight: 600;
+}
+
+.diff-drawio-source summary:hover {
+  color: var(--color-text);
+}
+
+.diff-drawio-source pre {
+  max-height: 300px;
+  margin: 0;
+  padding: var(--space-3);
+  overflow: auto;
+  border-top: 1px solid var(--color-divider);
+  color: var(--color-text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  line-height: 1.55;
+  white-space: pre;
+}
+
+@media (max-width: 768px) {
+  .diff-media-grid,
+  .diff-excalidraw-grid,
+  .diff-drawio-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .diff-special-header {
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .diff-media-canvas {
+    min-height: 220px;
+  }
+}

package/src/client/styles/foundation/themes.css

@@ -1,5 +1,11 @@
 /* ===== FOUNDATION / THEMES ===== */
 
+:root {
+  --pdf-highlight-bg: rgb(180 0 170 / 25%);
+  --pdf-highlight-selected-bg: rgb(0 100 0 / 25%);
+  --pdf-selection-bg: rgb(0 90 255 / 25%);
+}
+
 :root,
 [data-theme="light"] {
   --color-bg: #f6f8fa;