collabmd 0.1.41 → 0.1.43

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

@@ -6,32 +6,23 @@
   align-items: center;
   justify-content: center;
   padding: var(--space-6);
-  background:
-    radial-gradient(circle at 50% 8%, oklch(from var(--color-primary) l c h / 0.18), transparent 28%),
-    radial-gradient(circle at 60% 45%, oklch(from var(--color-primary) l c h / 0.08), transparent 18%),
-    linear-gradient(
-      180deg,
-      oklch(from var(--color-bg) calc(l - 0.06) c h / 0.9),
-      oklch(from var(--color-bg) calc(l - 0.08) c h / 0.96)
-    );
-  backdrop-filter: blur(18px);
+  background: oklch(from var(--color-bg) l c h / 0.94);
+  backdrop-filter: blur(12px);
 }
 
 .auth-gate-card {
   width: min(100%, 440px);
   padding: var(--space-8);
   border: 1px solid var(--border-accent-soft);
-  border-radius: var(--radius-xl-plus);
-  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-2));
+  border-radius: var(--radius-xl);
+  background: var(--color-surface);
   color: var(--color-text);
-  box-shadow:
-    var(--shadow-card-strong),
-    var(--shadow-sheet-inset);
+  box-shadow: var(--shadow-card-strong);
   font-family: var(--font-body);
 }
 
 .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 +30,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 +51,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 +70,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,13 @@
 }
 
 .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);
 }
 
 .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;
 }
 
@@ -114,7 +115,7 @@
   display: grid;
   place-items: center;
   padding: var(--space-6);
-  background: radial-gradient(circle at top, oklch(from var(--color-primary) l c h / 0.16), transparent 38%), oklch(from var(--color-bg) l c h / 0.82);
+  background: oklch(from var(--color-bg) l c h / 0.86);
   backdrop-filter: blur(10px);
 }
 
@@ -125,7 +126,7 @@
   padding: var(--space-6);
   border: 1px solid oklch(from var(--color-primary) l c h / 0.25);
   border-radius: var(--radius-xl);
-  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-2));
+  background: var(--color-surface);
   box-shadow: var(--shadow-lg);
 }
 

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);
 }
@@ -106,12 +107,27 @@
   justify-content: flex-end;
 }
 
-.comment-card-input,
-.comment-reply-input {
-  padding: var(--space-3) var(--space-4);
+.ui-input.comment-card-input,
+.ui-input.comment-reply-input {
+  padding: var(--space-2) var(--space-3);
+  border-color: var(--border-comment-strong);
+  background: var(--surface-comment-subtle);
+  caret-color: var(--color-comment);
   line-height: 1.5;
 }
 
+.ui-input.comment-card-input:hover:not(:focus),
+.ui-input.comment-reply-input:hover:not(:focus) {
+  border-color: var(--border-comment-active);
+}
+
+.ui-input.comment-card-input:focus,
+.ui-input.comment-reply-input:focus {
+  border-color: var(--color-comment);
+  background: var(--surface-comment-elevated);
+  box-shadow: var(--shadow-comment-outline), 0 0 0 3px var(--color-comment-soft);
+}
+
 .comment-card-input {
   resize: vertical;
   min-height: 88px;
@@ -125,26 +141,11 @@
   border-top: 1px solid var(--color-divider);
 }
 
-.comment-thread-card-header {
-  align-items: flex-start;
-  flex-wrap: wrap;
-}
-
-.comment-thread-card-heading {
-  display: flex;
-  flex: 1 1 160px;
-  flex-wrap: wrap;
-  gap: var(--space-1) var(--space-2);
-  min-width: 0;
-}
-
-.comment-thread-card-author,
 .comment-message-card-author {
   font-size: var(--text-label);
   font-weight: 700;
 }
 
-.comment-thread-card-time,
 .comment-message-card-time {
   color: var(--color-text-faint);
   font-size: var(--text-meta);
@@ -156,10 +157,16 @@
 }
 
 .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.is-thread-start {
+  padding-top: 0;
+  border-top: 0;
 }
 
 .comment-message-card-body {

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

@@ -2,19 +2,16 @@
   flex: 1;
   overflow-x: hidden;
   overflow-y: auto;
-  padding: 6px;
+  padding: var(--space-2);
   background: var(--color-surface);
 }
 
 .comment-overview-empty {
-  padding: var(--space-5) var(--space-3);
-  color: var(--color-text-faint);
-  text-align: center;
-  font-size: var(--text-xs);
+  min-height: 160px;
 }
 
 .comment-overview-file {
-  padding: 9px 0 10px;
+  padding: var(--space-2) 0;
   border-bottom: 1px solid color-mix(in oklab, var(--color-divider) 80%, transparent);
 }
 
@@ -77,10 +74,10 @@
   width: 100%;
   gap: 6px;
   margin: 0 0 4px;
-  padding: 8px;
-  border: 1px solid color-mix(in oklab, var(--color-border) 58%, transparent);
-  border-radius: var(--radius-sm);
-  background: color-mix(in oklab, var(--color-surface-2) 88%, var(--color-surface) 12%);
+  padding: var(--space-2);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  background: transparent;
   color: var(--color-text);
   text-align: left;
   cursor: pointer;
@@ -90,11 +87,16 @@
     box-shadow var(--transition-interactive);
 }
 
-.comment-overview-thread:hover,
+.comment-overview-thread:hover {
+  border-color: transparent;
+  background: var(--surface-comment-record-hover);
+  box-shadow: none;
+}
+
 .comment-overview-thread:focus-visible {
-  border-color: color-mix(in oklab, var(--color-comment) 36%, var(--color-border));
-  background: var(--color-surface-offset);
-  box-shadow: inset 2px 0 0 color-mix(in oklab, var(--color-comment) 88%, transparent);
+  border-color: var(--border-comment-strong);
+  background: var(--surface-comment-record-hover);
+  box-shadow: var(--shadow-focus-compact);
   outline: none;
 }
 
@@ -119,7 +121,7 @@
   color: var(--color-comment);
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 10px;
+  font-size: var(--text-caption);
   font-weight: 700;
   line-height: 1.2;
 }
@@ -188,7 +190,7 @@
   min-width: 16px;
   height: 16px;
   margin-left: auto;
-  font-size: 10px;
+  font-size: var(--text-caption);
 }
 
 .file-tree-file.has-comments .file-tree-name {

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,12 @@
   --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);
 }
 
 .comments-drawer-item-header {
@@ -80,10 +74,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/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);
 }