collabmd 0.1.30 → 0.1.32

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/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);
@@ -167,12 +180,283 @@
 }
 
 .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-embed-placeholder > .bases-shell {
+  margin: 0;
+}
+
+.preview-content .bases-toolbar {
+  display: grid;
+  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-summaries,
+.preview-content .bases-value-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  align-items: center;
+}
+
+.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 {
+  flex-shrink: 0;
+}
+
+.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-search-shell:focus-within {
+  border-color: var(--color-primary);
+  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: 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,
+.preview-content .bases-summary-label,
+.preview-content .bases-card-label {
+  color: var(--color-text-muted);
+  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);
+}
+
+.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;
@@ -220,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);