collabmd 0.1.31 → 0.1.32

package/src/client/styles/features/auth-gate.css

@@ -27,11 +27,12 @@
   box-shadow:
     var(--shadow-card-strong),
     var(--shadow-sheet-inset);
-  font-family: var(--font-display);
+  font-family: var(--font-body);
 }
 
 .auth-gate-card h1 {
   margin: 0 0 10px;
+  font-family: var(--font-display);
   font-size: var(--text-xl);
   line-height: 1.05;
   letter-spacing: -0.04em;
@@ -58,20 +59,14 @@
 }
 
 .auth-gate-input {
-  width: 100%;
-  padding: 14px 16px;
-  border: 1px solid var(--color-border);
+  min-height: var(--control-h-lg);
   border-radius: var(--radius-xl);
   background: var(--surface-overlay);
   color: inherit;
-  font: inherit;
-  box-sizing: border-box;
 }
 
 .auth-gate-input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-  box-shadow: var(--shadow-focus);
+  background: var(--surface-overlay-soft);
 }
 
 .auth-gate-actions {
@@ -81,14 +76,16 @@
 
 .auth-gate-button,
 .auth-gate-secondary-button {
+  width: 100%;
+  justify-content: center;
+  min-height: var(--control-h-lg);
   border-radius: var(--radius-xl);
-  font: inherit;
-  cursor: pointer;
   transition:
     transform 160ms ease,
     box-shadow 160ms ease,
     border-color 160ms ease,
-    background-color 160ms ease;
+    background-color 160ms ease,
+    color 160ms ease;
 }
 
 .auth-gate-button:hover,
@@ -103,15 +100,6 @@
 }
 
 .auth-gate-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-3);
-  width: 100%;
-  padding: 14px 18px;
-  border: 1px solid transparent;
-  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
-  color: var(--color-text-inverse);
   font-weight: 600;
   box-shadow: var(--shadow-floating-soft);
 }
@@ -121,10 +109,11 @@
 }
 
 .auth-gate-secondary-button {
-  padding: 13px 16px;
-  border: 1px solid var(--color-border);
   background: var(--surface-overlay);
-  color: var(--color-text);
+}
+
+.auth-gate-secondary-button:hover {
+  background: var(--surface-overlay-soft);
 }
 
 .auth-gate-button[disabled],

package/src/client/styles/features/comment-card.css

@@ -106,6 +106,12 @@
   justify-content: flex-end;
 }
 
+.comment-card-input,
+.comment-reply-input {
+  padding: var(--space-3) var(--space-4);
+  line-height: 1.5;
+}
+
 .comment-card-input {
   resize: vertical;
   min-height: 88px;

package/src/client/styles/features/comments-drawer.css

@@ -12,7 +12,7 @@
 }
 
 .comments-drawer-header {
-  padding: var(--space-4);
+  padding: var(--space-3);
   border-bottom: 1px solid var(--color-divider);
   background: var(--surface-comment-shell-header);
 }
@@ -34,15 +34,15 @@
 .comments-drawer-list {
   display: flex;
   flex-direction: column;
-  gap: var(--space-3);
+  gap: var(--space-1);
   overflow: auto;
-  padding: var(--space-3);
+  padding: calc(var(--space-2) + 2px);
 }
 
 .comments-drawer-item {
-  --ui-record-padding: var(--space-4);
-  --ui-record-gap: var(--space-3);
-  --ui-record-radius: calc(var(--radius-lg) + 4px);
+  --ui-record-padding: calc(var(--space-2) + 2px);
+  --ui-record-gap: var(--space-1);
+  --ui-record-radius: var(--radius-lg);
   --ui-record-border: var(--border-comment-soft);
   --ui-record-bg: var(--surface-comment-record);
   --ui-record-border-hover: oklch(from var(--color-comment) l c h / 0.18);
@@ -54,16 +54,21 @@
   --ui-record-hover-transform: translateY(-1px);
 }
 
+.comments-drawer-item-header {
+  align-items: flex-start;
+}
+
 .comments-drawer-item-title {
   color: var(--color-comment);
   font-size: var(--text-meta);
   font-weight: 700;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.04em;
   text-transform: uppercase;
 }
 
 .comments-drawer-item-count {
-  min-height: 20px;
+  min-height: 17px;
+  padding-inline: 6px;
   border: 1px solid oklch(from var(--color-comment) l c h / 0.18);
   background: var(--color-comment-soft);
   color: var(--color-comment);
@@ -71,44 +76,59 @@
 }
 
 .comments-drawer-item-quote {
-  max-height: 9.5rem;
-  margin: var(--space-3) 0;
+  max-height: 5.8rem;
+  margin: 0;
   overflow: auto;
   overflow-wrap: anywhere;
-  padding: var(--space-3);
-  padding-bottom: calc(var(--space-3) + 2px);
+  padding: 6px 10px;
   border: 1px solid var(--border-comment-soft);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-sm);
   background: var(--surface-comment-offset);
   color: var(--color-text-muted);
   white-space: pre-wrap;
   word-break: break-word;
   scrollbar-width: thin;
   font-family: var(--font-mono);
-  font-size: var(--text-code-sm);
-  line-height: 1.65;
+  font-size: var(--text-meta);
+  line-height: 1.45;
 }
 
 .comments-drawer-item-preview {
   position: relative;
-  max-height: 7.8rem;
+  max-height: 3.4rem;
   overflow: hidden;
   color: var(--color-text-muted);
+  font-size: var(--text-label);
+  line-height: 1.45;
+}
+
+.comments-drawer-item-preview p,
+.comments-drawer-item-preview ul,
+.comments-drawer-item-preview ol,
+.comments-drawer-item-preview blockquote,
+.comments-drawer-item-preview pre,
+.comments-drawer-item-preview .comment-markdown-table {
+  margin: 0;
+}
+
+.comments-drawer-item-preview > * + * {
+  margin-top: var(--space-1);
 }
 
 .comments-drawer-item-preview:after {
   content: '';
   position: absolute;
   inset: auto 0 0 0;
-  height: 2.5rem;
+  height: 1.3rem;
   background: var(--surface-comment-preview-fade);
   pointer-events: none;
 }
 
 .comments-drawer-item-footer {
-  align-items: flex-end;
+  align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
+  padding-top: 2px;
   color: var(--color-text-muted);
   font-size: var(--text-meta);
   font-weight: 600;

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

@@ -277,6 +277,16 @@ body.drawio-maximized-open::before {
   pointer-events: none;
 }
 
+.excalidraw-warm-cache-root {
+  position: fixed;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  inset: 0 auto auto 0;
+}
+
 body.excalidraw-maximized-open {
   overflow: hidden;
 }
@@ -303,6 +313,29 @@ body.excalidraw-maximized-open .resizer {
   box-shadow: var(--shadow-elevated-soft);
 }
 
+.excalidraw-embed.is-loading {
+  position: relative;
+}
+
+.excalidraw-embed.is-loading::after {
+  content: 'Loading Excalidraw...';
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in oklab, var(--color-surface) 82%, transparent);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+  letter-spacing: 0.01em;
+  z-index: 2;
+}
+
+.excalidraw-embed.is-loading .excalidraw-embed-iframe {
+  visibility: hidden;
+  pointer-events: none;
+}
+
 .excalidraw-embed-placeholder.is-hydrated {
   visibility: hidden;
 }

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

@@ -5,6 +5,10 @@
   background: var(--surface-media-canvas);
 }
 
+.preview-content .bases-embed-placeholder {
+  display: block;
+}
+
 .preview-content .video-embed,
 .preview-content .video-embed-placeholder {
   display: block;
@@ -58,43 +62,52 @@
   object-fit: contain;
 }
 
-.preview-content .mermaid-shell {
+.preview-content .mermaid-shell,
+.mermaid-maximized-root .mermaid-shell {
   display: grid;
   gap: 0;
 }
 
-.preview-content .mermaid-placeholder-card {
+.preview-content .mermaid-placeholder-card,
+.mermaid-maximized-root .mermaid-placeholder-card {
   border-radius: 0;
 }
 
-.preview-content .mermaid-toolbar {
+.preview-content .mermaid-toolbar,
+.mermaid-maximized-root .mermaid-toolbar {
   justify-content: flex-end;
 }
 
-.preview-content .mermaid-zoom-btn {
+.preview-content .mermaid-zoom-btn,
+.mermaid-maximized-root .mermaid-zoom-btn {
   min-width: 32px;
   line-height: 1.5;
 }
 
-.preview-content .mermaid-zoom-btn:disabled {
+.preview-content .mermaid-zoom-btn:disabled,
+.mermaid-maximized-root .mermaid-zoom-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-.preview-content .mermaid-frame {
+.preview-content .mermaid-frame,
+.mermaid-maximized-root .mermaid-frame {
   max-width: none;
 }
 
-.preview-content .mermaid-frame.is-pannable {
+.preview-content .mermaid-frame.is-pannable,
+.mermaid-maximized-root .mermaid-frame.is-pannable {
   cursor: grab;
 }
 
-.preview-content .mermaid-frame.is-dragging {
+.preview-content .mermaid-frame.is-dragging,
+.mermaid-maximized-root .mermaid-frame.is-dragging {
   cursor: grabbing;
   user-select: none;
 }
 
-.preview-content .mermaid-frame svg {
+.preview-content .mermaid-frame svg,
+.mermaid-maximized-root .mermaid-frame svg {
   display: block;
 }
 
@@ -111,7 +124,15 @@ body.mermaid-maximized-open::before {
   backdrop-filter: blur(2px);
 }
 
-.preview-content .mermaid-shell.is-maximized {
+.mermaid-maximized-root {
+  position: fixed;
+  inset: 0;
+  z-index: 171;
+  pointer-events: none;
+}
+
+.preview-content .mermaid-shell.is-maximized,
+.mermaid-maximized-root .mermaid-shell.is-maximized {
   position: fixed;
   inset: var(--space-4);
   z-index: 171;
@@ -122,7 +143,12 @@ body.mermaid-maximized-open::before {
   grid-template-rows: auto minmax(0, 1fr);
 }
 
-.preview-content .mermaid-shell.is-maximized .mermaid-frame {
+.mermaid-maximized-root .mermaid-shell.is-maximized {
+  pointer-events: auto;
+}
+
+.preview-content .mermaid-shell.is-maximized .mermaid-frame,
+.mermaid-maximized-root .mermaid-shell.is-maximized .mermaid-frame {
   max-height: none;
   height: 100%;
 }

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

@@ -1,5 +1,18 @@
 /* ===== PREVIEW / MARKDOWN ===== */
 
+.preview-content {
+  font-family: var(--font-prose);
+}
+
+.preview-content h1,
+.preview-content h2,
+.preview-content h3,
+.preview-content h4,
+.preview-content h5,
+.preview-content h6 {
+  font-family: var(--font-prose);
+}
+
 .preview-content h1 {
   margin: var(--space-8) 0 var(--space-4);
   padding-bottom: var(--space-2);
@@ -183,11 +196,12 @@
   overflow: hidden;
 }
 
+.preview-content .bases-embed-placeholder > .bases-shell {
+  margin: 0;
+}
+
 .preview-content .bases-toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
+  display: grid;
   gap: var(--space-3);
   padding: var(--space-4);
   border-bottom: 1px solid var(--color-divider);
@@ -195,7 +209,6 @@
 
 .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;
@@ -204,38 +217,90 @@
   align-items: center;
 }
 
-.preview-content .bases-view-tab,
+.preview-content .bases-toolbar-main {
+  display: flex;
+  flex-wrap: wrap;
+  min-width: 0;
+  justify-content: flex-start;
+  gap: var(--space-3);
+}
+
+.preview-content .bases-tabs {
+  min-width: 0;
+  max-width: 100%;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+.preview-content .bases-tabs::-webkit-scrollbar {
+  display: none;
+}
+
 .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;
+  flex-shrink: 0;
 }
 
-.preview-content .bases-view-tab,
-.preview-content .bases-export-btn {
-  min-height: 34px;
-  padding: 0 var(--space-3);
+.preview-content .bases-toolbar-actions {
+  width: 100%;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: var(--space-3);
+}
+
+.preview-content .bases-search-shell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1 1 320px;
+  width: 100%;
+  min-width: min(320px, 100%);
+  border: 1px solid color-mix(in oklab, var(--color-border) 82%, var(--color-primary) 18%);
+  border-radius: var(--radius-lg);
+  background:
+    linear-gradient(180deg, color-mix(in oklab, var(--color-surface) 92%, white 8%), var(--color-surface)),
+    var(--color-surface);
+  box-shadow: inset 0 1px 0 oklch(from var(--color-text) l c h / 0.04);
+  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive), background var(--transition-interactive);
 }
 
-.preview-content .bases-view-tab.is-active {
-  background: var(--color-primary);
+.preview-content .bases-search-shell:focus-within {
   border-color: var(--color-primary);
-  color: var(--color-primary-contrast);
+  box-shadow: var(--shadow-focus), inset 0 1px 0 oklch(from var(--color-text) l c h / 0.04);
+}
+
+.preview-content .bases-search-icon {
+  position: absolute;
+  left: var(--space-3);
+  color: var(--color-text-faint);
+  pointer-events: none;
 }
 
 .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;
+  min-width: 0;
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  box-shadow: none;
+  padding-left: calc(var(--space-3) * 2 + 16px);
+}
+
+.preview-content .bases-search-input:focus {
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.preview-content .bases-export-btn {
+  min-height: var(--control-h-md);
+  padding-inline: var(--space-4);
+  font-size: var(--text-sm);
+  font-weight: 600;
+}
+
+.preview-content .bases-export-btn:hover {
+  border-color: color-mix(in oklab, var(--color-border) 45%, var(--color-primary) 55%);
 }
 
 .preview-content .bases-meta,
@@ -245,6 +310,16 @@
   font-size: var(--text-ui-sm);
 }
 
+.preview-content .bases-meta {
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  padding: 0 var(--space-3);
+  border-radius: var(--radius-full);
+  background: color-mix(in oklab, var(--color-surface-offset) 72%, var(--color-surface));
+  white-space: nowrap;
+}
+
 .preview-content .bases-summaries {
   padding: var(--space-3) var(--space-4);
   border-bottom: 1px solid var(--color-divider);
@@ -429,7 +504,7 @@
 
 .preview-content .task-list-item input[type='checkbox'] {
   position: absolute;
-  top: 0.3em;
+  top: 0.5em;
   left: calc(var(--space-5) * -1);
   margin: 0;
   accent-color: var(--color-primary);

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

@@ -21,6 +21,7 @@
   --color-primary: #4f46e5;
   --color-primary-hover: #4338ca;
   --color-primary-active: #3730a3;
+  --color-primary-contrast: #f5f5f7;
   --color-primary-highlight: #e0e0ff;
   --color-comment: #4f46e5;
   --color-comment-soft: rgba(79, 70, 229, 0.08);
@@ -28,6 +29,7 @@
   --color-comment-text: #3730a3;
 
   --color-error: #dc2626;
+  --color-danger: #dc2626;
   --color-error-highlight: #fce8e8;
   --color-success: #16a34a;
   --color-success-highlight: #dcfce7;
@@ -140,6 +142,7 @@
   --color-primary: #818cf8;
   --color-primary-hover: #6366f1;
   --color-primary-active: #4f46e5;
+  --color-primary-contrast: #0f1117;
   --color-primary-highlight: #1e1e3a;
   --color-comment: #818cf8;
   --color-comment-soft: rgba(129, 140, 248, 0.1);
@@ -147,6 +150,7 @@
   --color-comment-text: #c7d2fe;
 
   --color-error: #f87171;
+  --color-danger: #f87171;
   --color-error-highlight: #2a1a1a;
   --color-success: #4ade80;
   --color-success-highlight: #1a2a1a;

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

@@ -17,9 +17,10 @@
   --text-title-sm: 15px;
   --text-title-md: 18px;
 
-  --font-body: 'Inter', system-ui, sans-serif;
-  --font-display: 'Geist', 'Cal Sans', 'Inter', system-ui, sans-serif;
-  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+  --font-body: 'Inter Variable', 'Inter', system-ui, sans-serif;
+  --font-display: 'Inter Variable', 'Inter', system-ui, sans-serif;
+  --font-prose: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'SF Mono', monospace;
 
   --space-1: 0.25rem;
   --space-2: 0.5rem;

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

@@ -118,6 +118,17 @@
   overflow-x: hidden;
   overflow-y: auto;
   padding: var(--space-2) 0;
+  transition: box-shadow var(--transition-interactive), background var(--transition-interactive);
+}
+
+.file-tree.is-drop-target-root {
+  background: color-mix(in oklab, var(--color-primary-highlight) 58%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-primary) 48%, transparent);
+}
+
+.file-tree.is-drop-invalid {
+  background: color-mix(in oklab, var(--color-danger) 8%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-danger) 42%, transparent);
 }
 
 .file-tree-empty {
@@ -127,6 +138,43 @@
   font-size: var(--text-xs);
 }
 
+.file-tree-root-drop-zone {
+  display: block;
+  margin: 0 var(--space-2);
+  margin-bottom: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border: 1px dashed transparent;
+  border-radius: var(--radius-lg);
+  background: transparent;
+  color: var(--color-text-faint);
+  font-size: var(--text-xs);
+  line-height: 1.3;
+  opacity: 0.88;
+  transition:
+    opacity var(--transition-interactive),
+    border-color var(--transition-interactive),
+    background var(--transition-interactive),
+    color var(--transition-interactive);
+}
+
+.file-tree-root-drop-zone:hover {
+  border-color: color-mix(in oklab, var(--color-border) 85%, transparent);
+  background: color-mix(in oklab, var(--color-surface-offset) 72%, transparent);
+  color: var(--color-text);
+}
+
+.file-tree-root-drop-zone.is-drop-target {
+  border-color: color-mix(in oklab, var(--color-primary) 54%, transparent);
+  background: color-mix(in oklab, var(--color-primary-highlight) 72%, transparent);
+  color: var(--color-primary);
+}
+
+.file-tree-root-drop-zone.is-drop-invalid {
+  border-color: color-mix(in oklab, var(--color-danger) 48%, transparent);
+  background: color-mix(in oklab, var(--color-danger) 10%, transparent);
+  color: var(--color-danger);
+}
+
 .file-tree-item {
   position: relative;
   display: flex;
@@ -151,6 +199,16 @@
   font-size: var(--text-ui-sm);
 }
 
+.file-tree-item.is-dragging,
+.file-tree-item[draggable='true']:active {
+  cursor: grabbing;
+}
+
+body.is-file-tree-dragging,
+body.is-file-tree-dragging * {
+  cursor: grabbing !important;
+}
+
 .file-tree-item:not([data-depth='0'])::before {
   content: '';
   position: absolute;
@@ -171,6 +229,20 @@
   color: var(--color-text);
 }
 
+.file-tree-item.is-dragging {
+  opacity: 0.52;
+}
+
+.file-tree-dir.is-drop-target {
+  background: color-mix(in oklab, var(--color-primary-highlight) 78%, transparent);
+  color: var(--color-primary);
+}
+
+.file-tree-dir.is-drop-invalid {
+  background: color-mix(in oklab, var(--color-danger) 10%, transparent);
+  color: var(--color-danger);
+}
+
 .file-tree-file.active {
   background: var(--color-primary-highlight);
   color: var(--color-primary);