collabmd 0.1.46 → 0.1.47

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

@@ -54,7 +54,16 @@ function findFuzzyMatch(text, query) {
   let consecutiveBonus = 0;
 
   for (let index = 0; index < text.length && queryIndex < query.length; index += 1) {
+    if (/\s/u.test(query[queryIndex]) && /[\s/\\_-]/u.test(text[index])) {
+      queryIndex += 1;
+      consecutiveBonus = 0;
+      continue;
+    }
+
     if (text[index] !== query[queryIndex]) {
+      if (queryIndex > 0) {
+        score -= 0.25;
+      }
       consecutiveBonus = 0;
       continue;
     }
@@ -193,6 +202,12 @@ export class QuickSwitcherController {
     this.hint = document.getElementById('quickSwitcherHint');
     this.scope = document.getElementById('quickSwitcherScope');
     this.modeTabs = Array.from(document.querySelectorAll?.('[data-qs-mode]') ?? []);
+    const searchConfig = this.getSearchConfig?.() ?? {};
+    const textTab = this.modeTabs.find((tab) => tab.dataset.qsMode === 'text');
+    if (textTab && searchConfig.available === false) {
+      textTab.disabled = true;
+      textTab.setAttribute('title', searchConfig.unavailableReason || 'Text search is unavailable');
+    }
 
     this.filteredFiles = [];
     this.fileMatches = new Map();
@@ -219,9 +234,32 @@ export class QuickSwitcherController {
       if (e.target === this.overlay) this.close();
     });
 
-    this.modeTabs.forEach((tab) => {
+    this.overlay?.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        this.close();
+      }
+    });
+
+    this.modeTabs.forEach((tab, index) => {
       tab.addEventListener('click', () => {
         this.setMode(tab.dataset.qsMode === 'text' ? 'text' : 'files', { preserveInput: true });
+        this.input?.focus?.();
+      });
+      tab.addEventListener('keydown', (event) => {
+        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {
+          return;
+        }
+
+        event.preventDefault();
+        const nextIndex = (index + (event.key === 'ArrowRight' ? 1 : -1) + this.modeTabs.length)
+          % this.modeTabs.length;
+        const nextTab = this.modeTabs[nextIndex];
+        if (nextTab.disabled) {
+          return;
+        }
+        this.setMode(nextTab.dataset.qsMode === 'text' ? 'text' : 'files', { preserveInput: true });
+        nextTab.focus();
       });
     });
 
@@ -243,13 +281,9 @@ export class QuickSwitcherController {
           e.preventDefault();
           this.confirmSelection();
           break;
-        case 'Escape':
-          e.preventDefault();
-          this.close();
-          break;
         case 'Tab':
           e.preventDefault();
-          if (this.modeTabs.length > 1 && !e.shiftKey) {
+          if (this.modeTabs.filter((tab) => !tab.disabled).length > 1 && !e.shiftKey) {
             this.setMode(this.mode === 'files' ? 'text' : 'files', { preserveInput: true });
           } else {
             this.moveSelection(e.shiftKey ? -1 : 1);
@@ -269,6 +303,7 @@ export class QuickSwitcherController {
     this.selectedTextIndex = 0;
     this.overlay.classList.add('visible');
     this.overlay.setAttribute('aria-hidden', 'false');
+    this.input?.setAttribute('aria-expanded', 'true');
     this.setMode('files', { preserveInput: true });
 
     // The overlay transitions visibility hidden→visible over 120ms.
@@ -325,6 +360,7 @@ export class QuickSwitcherController {
     this.isOpen = false;
     this.overlay.classList.remove('visible');
     this.overlay.setAttribute('aria-hidden', 'true');
+    this.input?.setAttribute('aria-expanded', 'false');
     this.input.value = '';
     this.resultsList.innerHTML = '';
     this.setActiveDescendant('');
@@ -344,7 +380,8 @@ export class QuickSwitcherController {
   }
 
   setMode(mode = 'files', { preserveInput = false } = {}) {
-    const normalizedMode = mode === 'text' ? 'text' : 'files';
+    const textTab = this.modeTabs.find((tab) => tab.dataset.qsMode === 'text');
+    const normalizedMode = mode === 'text' && !textTab?.disabled ? 'text' : 'files';
     this.mode = normalizedMode;
     this.selectedIndex = 0;
     this.selectedTextIndex = 0;
@@ -357,6 +394,7 @@ export class QuickSwitcherController {
       const isActive = tab.dataset.qsMode === normalizedMode;
       tab.classList.toggle('active', isActive);
       tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
+      tab.setAttribute('tabindex', isActive ? '0' : '-1');
     });
 
     this.scope?.classList.toggle('hidden', normalizedMode !== 'text');
@@ -386,7 +424,8 @@ export class QuickSwitcherController {
   }
 
   filterFiles() {
-    const query = this.input?.value.trim().toLowerCase() ?? '';
+    this.resultsList?.setAttribute('aria-busy', 'false');
+    const query = this.input?.value.trim().toLowerCase().replace(/\s+/gu, ' ') ?? '';
     const allFiles = this.getFileList?.() ?? [];
     if (allFiles !== this.lastFileListRef) {
       this.lastFileListRef = allFiles;
@@ -520,7 +559,7 @@ export class QuickSwitcherController {
       item.innerHTML = `
         ${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>` : ''}
+        ${dirPath ? `<span class="qs-result-path" title="${escapeHtml(dirPath)}">${highlightText(dirPath, matchIndices.dirPath)}</span>` : ''}
       `;
 
       item.addEventListener('click', () => {

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

@@ -1026,6 +1026,7 @@
 }
 
 .preview-content pre {
+  position: relative;
   max-width: 100%;
   margin: var(--space-4) 0;
   overflow-x: auto;
@@ -1049,6 +1050,30 @@
   overflow-wrap: normal;
 }
 
+.preview-content .preview-code-block {
+  position: relative;
+}
+
+.preview-content .preview-code-block pre code {
+  padding-right: 84px;
+}
+
+.preview-content .preview-code-actions {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  height: 0;
+}
+
+.preview-content .preview-code-copy-button {
+  position: absolute;
+  top: calc(var(--space-2) + 1px);
+  right: var(--space-2);
+  background: color-mix(in oklab, var(--color-surface) 90%, transparent);
+  box-shadow: var(--shadow-sm);
+  backdrop-filter: blur(8px);
+}
+
 .preview-content .table-wrapper {
   margin: var(--space-4) 0;
   overflow-x: auto;

package/src/client/styles/features/quick-switcher.css

@@ -78,6 +78,12 @@
   color: var(--color-primary);
 }
 
+.qs-mode-tab:disabled {
+  color: var(--color-text-faint);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
 .qs-overlay.visible .qs-modal {
   transform: translateY(0) scale(1);
 }
@@ -214,6 +220,8 @@
   max-width: 180px;
   overflow: hidden;
   color: var(--color-text-faint);
+  direction: rtl;
+  text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: var(--text-xs);

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

@@ -141,6 +141,7 @@
   --color-text-muted: #9aa7b4;
   --color-text-faint: #687584;
   --color-text-inverse: #0b0f14;
+  --color-code-text: #abb2bf;
 
   --color-primary: #60a5fa;
   --color-primary-hover: #3b82f6;

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

@@ -171,10 +171,6 @@
   overscroll-behavior: contain;
 }
 
-.preview-container.is-pdf-file-preview {
-  overflow-x: auto;
-}
-
 .preview-content {
   position: relative;
   min-width: 0;
@@ -312,340 +308,26 @@
   box-shadow: var(--shadow-lg);
 }
 
-.pdf-file-preview-shell {
-  display: flex;
-  flex: 0 0 auto;
-  flex-direction: column;
+.pdf-file-preview-viewer {
   width: 100%;
-  min-height: 100%;
-  margin: 0;
-  gap: var(--space-3);
-}
-
-.pdf-file-preview-toolbar {
-  position: sticky;
-  top: var(--space-3);
-  z-index: 2;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-  width: min(100%, 960px);
-  min-height: 32px;
-  margin: 0 auto;
-  padding: var(--space-2) var(--space-3);
+  height: calc(var(--app-viewport-height, 100dvh) - var(--toolbar-h) - 43px);
+  min-height: 320px;
+  overflow: hidden;
   border: 1px solid var(--color-divider);
   border-radius: var(--radius-lg);
   background: var(--color-surface);
-  box-shadow: var(--shadow-md);
-}
-
-.pdf-file-preview-toolbar-start,
-.pdf-file-preview-zoom-controls {
-  display: inline-flex;
-  align-items: center;
-}
-
-.pdf-file-preview-toolbar-start {
-  display: flex;
-  flex: 1 1 auto;
-  min-width: 0;
-  flex-wrap: wrap;
-  gap: var(--space-3);
-}
-
-.pdf-file-preview-zoom-controls {
-  gap: 4px;
-}
-
-.pdf-file-preview-zoom-button,
-.pdf-file-preview-back-button {
-  width: 28px;
-  min-width: 28px;
-  height: 28px;
-  padding: 0;
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 1;
-}
-
-.pdf-file-preview-zoom-label {
-  min-width: 48px;
-  color: var(--color-text-muted);
-  font-size: var(--text-xs);
-  font-variant-numeric: tabular-nums;
-  font-weight: 600;
-  text-align: center;
-}
-
-.pdf-file-preview-status {
-  color: var(--color-text-muted);
-  font-size: var(--text-meta);
-  white-space: nowrap;
-}
-
-.pdf-file-preview-find-controls {
-  display: inline-flex;
-  min-width: 0;
-  align-items: center;
-  gap: 4px;
-}
-
-.pdf-file-preview-find-input {
-  box-sizing: border-box;
-  width: min(190px, 24vw);
-  min-width: 120px;
-  height: 28px;
-  padding: 0 8px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-surface-offset);
-  color: var(--color-text);
-  font: inherit;
-  font-size: var(--text-xs);
-}
-
-.pdf-file-preview-find-input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-  box-shadow: var(--shadow-focus);
-}
-
-.pdf-file-preview-find-input::placeholder {
-  color: var(--color-text-faint);
-}
-
-.pdf-file-preview-find-status {
-  min-width: 48px;
-  color: var(--color-text-muted);
-  font-size: var(--text-xs);
-  font-variant-numeric: tabular-nums;
-  text-align: center;
-  white-space: nowrap;
-}
-
-.pdf-file-preview-find-button {
-  width: 28px;
-  min-width: 28px;
-  height: 28px;
-  padding: 0;
-  font-size: 20px;
-  line-height: 1;
-}
-
-.pdf-file-preview-download {
-  color: var(--color-primary);
-  font-size: var(--text-meta);
-  font-weight: 600;
-}
-
-.pdf-file-preview-pages {
-  --pdf-page-width: min(100%, 960px);
-  touch-action: pan-x pan-y;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  width: 100%;
-  gap: var(--space-4);
-  padding: 0 var(--space-2) var(--space-8);
-}
-
-.pdf-page {
-  position: relative;
-  flex: 0 0 auto;
-  width: var(--pdf-page-width, min(100%, 960px));
-  max-width: none;
-  margin-inline: auto;
-  overflow: hidden;
-  border-radius: var(--radius-sm);
-  background: var(--color-surface);
-  box-shadow: var(--shadow-lg);
-  --scale-factor: 1;
-  --user-unit: 1;
-  --total-scale-factor: calc(var(--scale-factor) * var(--user-unit));
-  --scale-round-x: 1px;
-  --scale-round-y: 1px;
-}
-
-.pdf-page > .page {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  overflow: visible;
-}
-
-.pdf-page .canvasWrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
 }
 
-.pdf-page-canvas {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  display: block;
-  width: 100%;
+.pdf-file-preview-error {
+  display: grid;
   height: 100%;
-  background: var(--color-surface);
-}
-
-.pdf-page .textLayer {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  overflow: hidden;
-  color-scheme: only light;
-  text-align: initial;
-  opacity: 1;
-  line-height: 1;
-  letter-spacing: normal;
-  word-spacing: normal;
-  transform-origin: 0 0;
-  caret-color: CanvasText;
-}
-
-.pdf-page .annotationLayer {
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-  pointer-events: none;
-  transform-origin: 0 0;
-}
-
-.pdf-page .annotationLayer section {
-  position: absolute;
-  box-sizing: border-box;
-  pointer-events: auto;
-}
-
-.pdf-page .annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
-  position: absolute;
-  inset: 0;
-  cursor: pointer;
-}
-
-.pdf-page .textLayer :is(span, br) {
-  position: absolute;
-  color: transparent;
-  white-space: pre;
-  cursor: text;
-  transform-origin: 0% 0%;
-  -webkit-user-select: text;
-  user-select: text;
-}
-
-.pdf-page .textLayer {
-  --min-font-size: 1;
-  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
-  --min-font-size-inv: calc(1 / var(--min-font-size));
-}
-
-.pdf-page .textLayer > :not(.markedContent),
-.pdf-page .textLayer .markedContent span:not(.markedContent) {
-  z-index: 1;
-  --font-height: 0;
-  font-size: calc(var(--text-scale-factor) * var(--font-height));
-  --scale-x: 1;
-  --rotate: 0deg;
-  transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
-}
-
-.pdf-page .textLayer .markedContent {
-  display: contents;
-}
-
-.pdf-page .textLayer .highlight {
-  margin: -1px;
-  padding: 1px;
-  border-radius: 4px;
-  background: var(--pdf-highlight-bg);
-}
-
-.pdf-page .textLayer .highlight.selected {
-  background: var(--pdf-highlight-selected-bg);
-  scroll-margin-top: 50px;
-}
-
-.pdf-page .textLayer .highlight.begin {
-  border-radius: 4px 0 0 4px;
-}
-
-.pdf-page .textLayer .highlight.middle {
-  border-radius: 0;
-}
-
-.pdf-page .textLayer .highlight.end {
-  border-radius: 0 4px 4px 0;
-}
-
-.pdf-page .textLayer ::selection {
-  background: var(--pdf-selection-bg);
-  color: transparent;
-}
-
-.pdf-page .textLayer .endOfContent {
-  position: absolute;
-  inset: 100% 0 0;
-  z-index: 0;
-  display: block;
-  cursor: default;
-  user-select: none;
-}
-
-.pdf-page .textLayer.selecting .endOfContent {
-  top: 0;
-}
-
-.pdf-file-preview-error,
-.pdf-file-preview-password-prompt {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-3);
-  width: min(100%, 960px);
   min-height: 240px;
-  margin: 0 auto;
+  place-items: center;
   padding: var(--space-6);
-  border: 1px solid var(--color-divider);
-  border-radius: var(--radius-lg);
   color: var(--color-text-muted);
   text-align: center;
 }
 
-.pdf-file-preview-password-prompt {
-  box-sizing: border-box;
-  align-items: stretch;
-  width: min(100%, 440px);
-  background: var(--color-surface);
-}
-
-.pdf-file-preview-password-title,
-.pdf-file-preview-password-copy {
-  margin: 0;
-}
-
-.pdf-file-preview-password-title {
-  color: var(--color-text);
-  font-size: var(--text-lg);
-}
-
-.pdf-file-preview-password-field {
-  display: grid;
-  gap: var(--space-2);
-  color: var(--color-text-muted);
-  font-size: var(--text-meta);
-  text-align: left;
-}
-
-.pdf-file-preview-password-field .ui-input {
-  width: 100%;
-}
-
 .preview-content.is-mermaid-file-preview .mermaid-shell,
 .preview-content.is-plantuml-file-preview .plantuml-shell {
   flex: 1;

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

@@ -131,7 +131,7 @@
 }
 
 .sidebar-search-input::placeholder {
-  color: var(--color-text-faint);
+  color: var(--color-text-muted);
 }
 
 .sidebar-search-input:hover:not(:focus) {
@@ -144,6 +144,12 @@
   box-shadow: var(--shadow-focus);
 }
 
+.sidebar-search-status {
+  padding: 5px 2px 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-caption);
+}
+
 @keyframes pulse-dot {
   0%,
   100% {
@@ -237,7 +243,7 @@ body.is-file-tree-dragging .file-tree-root-drop-zone {
   padding-top: 4px;
   padding-right: 8px;
   padding-bottom: 4px;
-  padding-left: calc(8px + var(--depth, 0) * 16px);
+  padding-left: calc(8px + var(--depth, 0) * 12px);
   border: none;
   border-radius: var(--radius-md);
   background: none;
@@ -266,14 +272,14 @@ body.is-file-tree-dragging * {
   position: absolute;
   top: 0;
   bottom: 0;
-  left: calc(8px + (var(--depth, 1) - 1) * 16px + 6px);
+  left: calc(8px + (var(--depth, 1) - 1) * 12px + 6px);
   width: 1px;
   background-color: var(--color-border);
   opacity: 0.2;
 }
 
 .file-tree-file {
-  padding-left: calc(8px + var(--depth, 0) * 16px + 18px);
+  padding-left: calc(8px + var(--depth, 0) * 12px + 18px);
 }
 
 .file-tree-item:hover {
@@ -316,8 +322,40 @@ body.is-file-tree-dragging * {
 }
 
 .file-tree-name {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-tree-search-result {
+  align-items: flex-start;
+  padding: 6px 8px;
+}
+
+.file-tree-search-result .file-tree-icon {
+  margin-top: 2px;
+}
+
+.file-tree-search-copy {
+  display: grid;
+  flex: 1 1 auto;
+  min-width: 0;
+  gap: 1px;
+}
+
+.file-tree-search-copy .file-tree-name,
+.file-tree-search-path {
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-tree-search-path {
+  color: var(--color-text-faint);
+  font-size: var(--text-caption);
+  font-weight: 400;
 }
 
 .file-tree-children {

package/src/client/styles/overrides/highlightjs.css

@@ -1,7 +1,23 @@
 /* ===== OVERRIDES / HIGHLIGHTJS ===== */
 
-[data-theme="light"] .preview-content pre,
-[data-theme="light"] .preview-content pre code,
-[data-theme="light"] .hljs {
-  background: var(--color-surface) !important;
+[data-theme="light"] .preview-content pre {
+  border-color: color-mix(in oklab, var(--color-border) 78%, var(--color-primary) 22%);
+  background: color-mix(in oklab, var(--color-bg) 94%, var(--color-primary) 6%) !important;
+  box-shadow: var(--shadow-sm);
+}
+
+[data-theme="light"] .preview-content pre code {
+  background: transparent !important;
+  color: var(--color-text) !important;
+}
+
+[data-theme="dark"] .preview-content pre {
+  border-color: color-mix(in oklab, var(--color-border) 74%, var(--color-primary) 26%);
+  background: color-mix(in oklab, var(--color-bg) 88%, var(--color-primary) 12%) !important;
+  box-shadow: var(--shadow-elevated-soft);
+}
+
+[data-theme="dark"] .preview-content pre code {
+  background: transparent !important;
+  color: var(--color-code-text) !important;
 }