collabmd 0.1.40 → 0.1.42

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

@@ -36,11 +36,49 @@
   background: var(--color-surface-offset-2);
   color: var(--color-text-faint);
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: var(--text-micro);
   font-weight: 700;
   letter-spacing: 0.02em;
 }
 
+.ui-empty-state {
+  display: grid;
+  place-content: center;
+  gap: var(--space-1);
+  min-height: 120px;
+  padding: var(--space-6) var(--space-4);
+  color: var(--color-text-muted);
+  text-align: center;
+}
+
+.ui-empty-state--compact {
+  min-height: 88px;
+  padding: var(--space-4) var(--space-3);
+}
+
+.ui-empty-state-title,
+.ui-empty-state-copy {
+  margin: 0;
+}
+
+.ui-empty-state-title {
+  color: var(--color-text);
+  font-size: var(--text-ui-sm);
+  font-weight: 650;
+  letter-spacing: -0.01em;
+}
+
+.ui-empty-state-copy {
+  max-width: 30ch;
+  color: var(--color-text-faint);
+  font-size: var(--text-meta);
+  line-height: 1.45;
+}
+
+.ui-empty-state[data-tone='error'] .ui-empty-state-title {
+  color: var(--color-error);
+}
+
 .ui-status-badge {
   display: inline-flex;
   align-items: center;

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

@@ -4,8 +4,8 @@
   --ui-record-padding: var(--space-3);
   --ui-record-gap: var(--space-2);
   --ui-record-radius: var(--radius-md);
-  --ui-record-border: var(--color-border);
-  --ui-record-bg: var(--color-surface-2);
+  --ui-record-border: var(--color-divider);
+  --ui-record-bg: var(--color-surface);
   --ui-record-color: var(--color-text-muted);
   --ui-record-border-hover: var(--ui-record-border);
   --ui-record-bg-hover: var(--color-surface-offset);
@@ -68,6 +68,8 @@
 .ui-record-meta {
   flex-wrap: wrap;
   color: var(--color-text-faint);
+  font-size: var(--text-meta);
+  line-height: 1.35;
 }
 
 .ui-record-copy {
@@ -87,6 +89,7 @@
 .ui-record-subtitle {
   overflow: hidden;
   color: var(--color-text-faint);
+  line-height: 1.4;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

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

@@ -21,7 +21,7 @@
   width: min(100%, 440px);
   padding: var(--space-8);
   border: 1px solid var(--border-accent-soft);
-  border-radius: var(--radius-xl-plus);
+  border-radius: var(--radius-xl);
   background: linear-gradient(180deg, var(--color-surface), var(--color-surface-2));
   color: var(--color-text);
   box-shadow:
@@ -31,7 +31,7 @@
 }
 
 .auth-gate-card h1 {
-  margin: 0 0 10px;
+  margin: 0 0 var(--space-3);
   font-family: var(--font-display);
   font-size: var(--text-xl);
   line-height: 1.05;
@@ -39,7 +39,7 @@
 }
 
 .auth-gate-card p {
-  margin: 0 0 22px;
+  margin: 0 0 var(--space-6);
   color: var(--color-text-muted);
   line-height: 1.5;
   font-size: var(--text-sm);
@@ -60,7 +60,7 @@
 
 .auth-gate-input {
   min-height: var(--control-h-lg);
-  border-radius: var(--radius-xl);
+  border-radius: var(--radius-md);
   background: var(--surface-overlay);
   color: inherit;
 }
@@ -79,7 +79,7 @@
   width: 100%;
   justify-content: center;
   min-height: var(--control-h-lg);
-  border-radius: var(--radius-xl);
+  border-radius: var(--radius-md);
   transition:
     transform 160ms ease,
     box-shadow 160ms ease,

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

@@ -28,7 +28,7 @@
   flex-direction: column-reverse;
   overflow: hidden;
   border: 1px solid var(--color-divider);
-  border-radius: var(--radius-xl-plus);
+  border-radius: var(--radius-lg);
   background: var(--surface-overlay);
   box-shadow: var(--shadow-floating-soft);
   backdrop-filter: blur(16px);
@@ -37,8 +37,7 @@
 }
 
 .backlinks-panel-dock:hover {
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-floating-hover);
+  box-shadow: var(--shadow-floating-soft);
 }
 
 .backlinks-panel-header .backlinks-header {
@@ -91,7 +90,7 @@
 }
 
 .backlinks-panel-dock .backlinks-header {
-  padding: 11px 14px;
+  padding: var(--space-3) var(--space-4);
   background: var(--surface-overlay-header);
 }
 
@@ -159,7 +158,7 @@
   width: min(320px, calc(100vw - var(--space-8)));
   max-height: none;
   border: 1px solid var(--border-accent-muted);
-  border-radius: var(--radius-xl);
+  border-radius: var(--radius-lg);
   background: var(--surface-overlay-strong);
   box-shadow: var(--shadow-floating-soft);
   opacity: 0;
@@ -196,18 +195,18 @@
 }
 
 .backlinks-panel-dock .backlinks-list {
-  padding: 10px;
+  padding: var(--space-2) var(--space-3);
 }
 
 .backlinks-panel-header .backlinks-list {
-  padding: 10px;
+  padding: var(--space-2) var(--space-3);
 }
 
 .backlink-item {
   display: block;
   width: 100%;
   padding: var(--space-3);
-  border: 1px solid var(--color-divider);
+  border: 1px solid transparent;
   border-radius: var(--radius-md);
   background: var(--color-surface);
   text-align: left;
@@ -216,13 +215,14 @@
 }
 
 .backlinks-panel-dock .backlink-item {
-  border-radius: var(--radius-lg);
-  background: var(--surface-overlay-soft);
+  border-radius: var(--radius-md);
+  background: transparent;
 }
 
 .backlink-item:hover {
-  border-color: var(--color-primary);
-  background: oklch(from var(--color-primary) l c h / 0.04);
+  border-color: transparent;
+  background: var(--color-surface-offset);
+  box-shadow: inset 3px 0 0 var(--color-primary);
 }
 
 .backlink-item:focus-visible {

package/src/client/styles/features/collaboration-chat.css

@@ -44,7 +44,7 @@
   gap: var(--space-3);
   width: min(360px, calc(100vw - var(--space-6)));
   max-height: min(70vh, 520px);
-  padding: var(--space-3);
+  padding: var(--space-4);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   background: oklch(from var(--color-surface) l c h / 0.98);
@@ -106,16 +106,15 @@
 }
 
 .chat-notification-action.is-blocked {
-  color: var(--color-warning);
+  border-color: var(--color-divider);
+  color: var(--color-text-faint);
 }
 
 .chat-empty-state {
-  padding: var(--space-4);
-  border: 1px dashed var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface-2);
+  padding: var(--space-3) var(--space-1);
   color: var(--color-text-muted);
   font-size: var(--text-label);
+  line-height: 1.45;
 }
 
 .chat-messages {
@@ -197,9 +196,9 @@
   width: fit-content;
   max-width: 78%;
   margin: 0;
-  padding: 10px 12px;
+  padding: 8px 12px;
   border: 1px solid var(--color-divider);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-lg);
   background: var(--color-surface-2);
   color: var(--color-text);
   font-size: var(--text-ui-sm);

package/src/client/styles/features/collaboration-dialogs.css

@@ -46,7 +46,7 @@
 .app-dialog-form {
   display: grid;
   gap: var(--space-4);
-  padding: var(--space-5);
+  padding: var(--space-6);
 }
 
 .app-dialog-header {
@@ -56,7 +56,8 @@
 
 .app-dialog-title {
   font-size: var(--text-base);
-  font-weight: 600;
+  font-weight: 650;
+  letter-spacing: -0.01em;
 }
 
 .app-dialog-copy {
@@ -71,9 +72,9 @@
 
 .app-dialog-label {
   color: var(--color-text-muted);
-  font-size: var(--text-xs);
-  font-weight: 600;
-  letter-spacing: 0.08em;
+  font-size: var(--text-meta);
+  font-weight: 700;
+  letter-spacing: 0.06em;
   text-transform: uppercase;
 }
 

package/src/client/styles/features/collaboration-presence.css

@@ -137,9 +137,9 @@
   z-index: 30;
   display: flex;
   flex-direction: column;
-  gap: var(--space-3);
-  width: min(420px, calc(100vw - var(--space-6)));
-  max-height: min(72vh, 540px);
+  gap: var(--space-2);
+  width: min(360px, calc(100vw - var(--space-6)));
+  max-height: min(72vh, 480px);
   padding: var(--space-3);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
@@ -170,7 +170,7 @@
 .presence-panel-list {
   display: flex;
   flex-direction: column;
-  gap: var(--space-2);
+  gap: var(--space-1);
   overflow-y: auto;
   min-height: 0;
   padding-right: var(--space-1);
@@ -193,7 +193,7 @@
   padding: 2px;
   border-radius: var(--radius-md);
   border: 1px solid transparent;
-  background: var(--surface-fill-subtle);
+  background: transparent;
 }
 
 .presence-panel-user.is-following {
@@ -208,8 +208,8 @@
   gap: var(--space-3);
   width: 100%;
   min-width: 0;
-  padding: 10px 12px;
-  border-radius: calc(var(--radius-md) - 2px);
+  padding: 9px 10px;
+  border-radius: var(--radius-sm);
   color: inherit;
   text-align: left;
   transition: background var(--transition-interactive), transform var(--transition-interactive);

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

@@ -13,9 +13,9 @@
   max-height: min(78vh, 720px);
   overflow: hidden;
   padding: var(--space-4);
-  border: 1px solid var(--border-comment-strong);
-  border-radius: var(--radius-xl-plus);
-  background: var(--surface-comment-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  background: var(--color-surface);
   box-shadow: var(--shadow-card-strong);
   animation: comment-card-in 140ms cubic-bezier(0.16, 1, 0.3, 1);
 }
@@ -75,9 +75,10 @@
 .comment-card-quote,
 .comment-thread-card-excerpt {
   padding: var(--space-2) var(--space-3);
-  border: 1px solid var(--border-comment-muted);
-  border-radius: var(--radius-md);
-  background: var(--surface-comment-offset);
+  border: 0;
+  border-left: 2px solid var(--border-comment-active);
+  border-radius: 0;
+  background: var(--color-surface-offset);
   color: var(--color-text-muted);
   font-size: var(--text-label);
 }
@@ -156,10 +157,11 @@
 }
 
 .comment-message-card {
-  padding: var(--space-2) var(--space-3);
-  border: 1px solid var(--border-comment-soft);
-  border-radius: var(--radius-md);
-  background: var(--surface-comment-subtle-strong);
+  padding: var(--space-3) 0 0;
+  border: 0;
+  border-top: 1px solid var(--color-divider);
+  border-radius: 0;
+  background: transparent;
 }
 
 .comment-message-card-body {

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

@@ -0,0 +1,193 @@
+.comment-overview-panel {
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: var(--space-2);
+  background: var(--color-surface);
+}
+
+.comment-overview-empty {
+  min-height: 160px;
+}
+
+.comment-overview-file {
+  padding: var(--space-2) 0;
+  border-bottom: 1px solid color-mix(in oklab, var(--color-divider) 80%, transparent);
+}
+
+.comment-overview-file:last-child {
+  border-bottom: none;
+}
+
+.comment-overview-file-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-2);
+  padding: 2px 4px 7px;
+}
+
+.comment-overview-file-title-wrap {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+}
+
+.comment-overview-file-title {
+  overflow: hidden;
+  margin: 0;
+  color: var(--color-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.comment-overview-file-path {
+  overflow: hidden;
+  color: var(--color-text-faint);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-meta);
+  line-height: 1.1;
+}
+
+.comment-overview-file-count,
+.file-tree-comment-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border: 1px solid oklch(from var(--color-comment) l c h / 0.2);
+  border-radius: var(--radius-full);
+  background: var(--color-comment-soft);
+  color: var(--color-comment);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.comment-overview-thread {
+  display: grid;
+  width: 100%;
+  gap: 6px;
+  margin: 0 0 4px;
+  padding: var(--space-2);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background var(--transition-interactive),
+    border-color var(--transition-interactive),
+    box-shadow var(--transition-interactive);
+}
+
+.comment-overview-thread:hover,
+.comment-overview-thread:focus-visible {
+  border-color: transparent;
+  background: var(--color-surface-offset);
+  box-shadow: inset 3px 0 0 var(--color-comment);
+  outline: none;
+}
+
+.comment-overview-thread-header,
+.comment-overview-thread-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.comment-overview-thread-line {
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+  min-width: 0;
+  max-width: 58%;
+  padding: 2px 6px;
+  border-radius: var(--radius-full);
+  background: var(--color-comment-soft);
+  color: var(--color-comment);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-caption);
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.comment-overview-thread-meta {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.comment-overview-thread-meta,
+.comment-overview-thread-footer {
+  color: var(--color-text-faint);
+  font-size: var(--text-meta);
+  line-height: 1.2;
+}
+
+.comment-overview-thread-body {
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+}
+
+.comment-overview-thread-quote,
+.comment-overview-thread-preview,
+.comment-overview-thread-author,
+.comment-overview-thread-message-count {
+  display: -webkit-box;
+  overflow: hidden;
+  margin: 0;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  line-height: 1.25;
+}
+
+.comment-overview-thread-quote {
+  -webkit-line-clamp: 1;
+  padding-left: 7px;
+  border-left: 2px solid color-mix(in oklab, var(--color-comment) 34%, var(--color-border));
+  color: var(--color-text-faint);
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+}
+
+.comment-overview-thread-preview {
+  -webkit-line-clamp: 1;
+  color: var(--color-text);
+  font-size: 13px;
+  font-weight: 520;
+  line-height: 1.3;
+}
+
+.comment-overview-thread-author,
+.comment-overview-thread-message-count {
+  -webkit-line-clamp: 1;
+}
+
+.comment-overview-thread-author {
+  min-width: 0;
+}
+
+.comment-overview-thread-message-count {
+  flex-shrink: 0;
+}
+
+.file-tree-comment-count {
+  min-width: 16px;
+  height: 16px;
+  margin-left: auto;
+  font-size: var(--text-caption);
+}
+
+.file-tree-file.has-comments .file-tree-name {
+  padding-right: 4px;
+}

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

@@ -4,17 +4,16 @@
   width: var(--preview-floating-comments-width, var(--panel-comments-width));
   min-width: var(--panel-comments-min-width);
   border-left: 1px solid var(--color-divider);
-  background: var(--surface-comment-shell);
+  background: var(--color-surface);
   display: flex;
   flex-direction: column;
   min-height: 0;
-  box-shadow: inset 1px 0 0 oklch(from var(--color-comment) l c h / 0.06);
 }
 
 .comments-drawer-header {
   padding: var(--space-3);
   border-bottom: 1px solid var(--color-divider);
-  background: var(--surface-comment-shell-header);
+  background: var(--color-surface);
 }
 
 .comments-drawer-title {
@@ -26,9 +25,7 @@
 }
 
 .comments-drawer-empty {
-  padding: var(--space-4);
-  color: var(--color-text-muted);
-  font-size: var(--text-label);
+  margin: auto 0;
 }
 
 .comments-drawer-list {
@@ -43,15 +40,13 @@
   --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);
-  --ui-record-bg-hover: var(--surface-comment-record-hover);
-  --ui-record-shadow-hover: var(--shadow-md);
+  --ui-record-border: transparent;
+  --ui-record-bg: transparent;
+  --ui-record-border-hover: transparent;
+  --ui-record-bg-hover: var(--color-surface-offset);
   --ui-record-border-active: var(--border-comment-active);
-  --ui-record-bg-active: var(--surface-comment-record-active);
-  --ui-record-shadow-active: var(--shadow-comment-outline);
-  --ui-record-hover-transform: translateY(-1px);
+  --ui-record-bg-active: var(--color-surface-offset);
+  --ui-record-shadow-active: inset 3px 0 0 var(--color-comment);
 }
 
 .comments-drawer-item-header {
@@ -80,10 +75,11 @@
   margin: 0;
   overflow: auto;
   overflow-wrap: anywhere;
-  padding: 6px 10px;
-  border: 1px solid var(--border-comment-soft);
-  border-radius: var(--radius-sm);
-  background: var(--surface-comment-offset);
+  padding: var(--space-2) var(--space-3);
+  border: 0;
+  border-left: 2px solid var(--border-comment-active);
+  border-radius: 0;
+  background: transparent;
   color: var(--color-text-muted);
   white-space: pre-wrap;
   word-break: break-word;

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

@@ -1,4 +1,5 @@
 @import './comments-drawer.css';
+@import './comment-overview.css';
 @import './comment-overlays.css';
 @import './comment-card.css';
 @import './comment-markdown.css';

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

@@ -7,7 +7,7 @@
   overflow: hidden;
   margin: var(--space-4) 0;
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-lg);
   background: var(--color-surface);
 }
 
@@ -60,8 +60,8 @@
   scrollbar-width: thin;
   -webkit-overflow-scrolling: touch;
   padding: var(--space-2) var(--space-3);
-  border-bottom: 1px solid var(--color-border);
-  background: var(--color-surface-raised);
+  border-bottom: 1px solid var(--color-divider);
+  background: var(--color-surface-2);
   color: var(--color-text-muted);
   font-size: var(--text-xs);
   user-select: none;
@@ -162,7 +162,7 @@
   max-width: none;
   overflow: hidden;
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-lg);
   background: var(--color-surface);
 }