collabmd 0.1.43 → 0.1.45

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

@@ -35,21 +35,11 @@
 }
 
 .chat-panel {
-  position: absolute;
-  top: calc(100% + var(--space-2));
-  right: 0;
-  z-index: 30;
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
-  width: min(360px, calc(100vw - var(--space-6)));
   max-height: min(70vh, 520px);
   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);
-  box-shadow: var(--shadow-lg);
-  backdrop-filter: blur(14px);
 }
 
 .chat-container > .chat-toast-container {
@@ -61,21 +51,6 @@
   align-items: flex-end;
 }
 
-.chat-toast-container .toast {
-  width: 100%;
-  max-width: 100%;
-  padding: 12px 14px;
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--border-warning-toast);
-  border-left-width: 4px;
-  background: var(--surface-warning-toast);
-  color: var(--text-warning-toast);
-  font-size: var(--text-ui-sm);
-  font-weight: 600;
-  box-shadow: var(--shadow-warning-toast);
-}
-
 .chat-panel-header {
   display: flex;
   align-items: flex-start;
@@ -83,38 +58,66 @@
   gap: var(--space-3);
 }
 
-.chat-panel-title {
-  margin: 0;
-  font-size: var(--text-sm);
-  font-weight: 700;
+.chat-panel-heading {
+  min-width: 0;
+  flex: 1;
 }
 
-.chat-panel-status {
-  margin: var(--space-1) 0 0;
-  color: var(--color-text-muted);
-  font-size: var(--text-meta);
+.chat-panel-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  flex-shrink: 0;
 }
 
 .chat-notification-action {
   flex-shrink: 0;
 }
 
-.chat-notification-action.is-enabled {
-  border-color: oklch(from var(--color-success) l c h / 0.45);
-  background: var(--surface-success-soft);
-  color: var(--color-success);
+.chat-notification-mute-action,
+.chat-close-btn {
+  width: var(--control-h-md);
+  min-width: var(--control-h-md);
+  height: var(--control-h-md);
+  flex-shrink: 0;
 }
 
-.chat-notification-action.is-blocked {
-  border-color: var(--color-divider);
-  color: var(--color-text-faint);
+.chat-notification-mute-action .chat-notification-mute-slash {
+  display: none;
 }
 
-.chat-empty-state {
-  padding: var(--space-3) var(--space-1);
+.chat-notification-mute-action[aria-pressed='true'] {
+  background: var(--color-surface-offset);
+  color: var(--color-text);
+}
+
+.chat-notification-mute-action[aria-pressed='true'] .chat-notification-mute-slash {
+  display: block;
+}
+
+.chat-notification-status {
+  white-space: nowrap;
+}
+
+.chat-panel-title {
+  margin: 0;
+  overflow: hidden;
+  font-size: var(--text-sm);
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chat-panel-status {
+  margin: var(--space-1) 0 0;
   color: var(--color-text-muted);
-  font-size: var(--text-label);
-  line-height: 1.45;
+  font-size: var(--text-meta);
+}
+
+.chat-empty-state {
+  min-height: 140px;
+  text-align: left;
 }
 
 .chat-messages {
@@ -186,12 +189,6 @@
   font-size: var(--text-caption);
 }
 
-.chat-message-file {
-  padding: 2px 6px;
-  border-radius: var(--radius-full);
-  background: var(--color-surface-offset);
-}
-
 .chat-message-text {
   width: fit-content;
   max-width: 78%;
@@ -207,8 +204,8 @@
 }
 
 .chat-message.is-local .chat-message-text {
-  background: oklch(from var(--color-primary) l c h / 0.14);
-  border-color: oklch(from var(--color-primary) l c h / 0.25);
+  background: var(--surface-accent-soft);
+  border-color: var(--border-accent-soft);
 }
 
 .chat-form {
@@ -223,5 +220,4 @@
 
 .chat-send-btn {
   flex-shrink: 0;
-  padding-inline: var(--space-4);
 }

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

@@ -130,22 +130,24 @@
   color: var(--color-text-muted);
 }
 
-.presence-panel {
+.collaboration-popover {
   position: absolute;
   top: calc(100% + var(--space-2));
   right: 0;
   z-index: 30;
+  width: min(360px, calc(100vw - var(--space-6)));
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-lg);
+}
+
+.presence-panel {
   display: flex;
   flex-direction: column;
   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);
-  background: oklch(from var(--color-surface) l c h / 0.98);
-  box-shadow: var(--shadow-lg);
-  backdrop-filter: blur(14px);
 }
 
 .presence-panel-header {

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

@@ -8,11 +8,11 @@
 .comment-card {
   display: flex;
   flex-direction: column;
-  gap: var(--space-3);
+  gap: var(--space-2);
   width: min(100%, 520px);
   max-height: min(78vh, 720px);
   overflow: hidden;
-  padding: var(--space-4);
+  padding: var(--space-3);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-xl);
   background: var(--color-surface);
@@ -27,7 +27,7 @@
 .comment-card-scroll {
   display: flex;
   flex-direction: column;
-  gap: var(--space-3);
+  gap: var(--space-2);
   min-height: 0;
   overflow: auto;
   padding-right: 2px;
@@ -48,17 +48,29 @@
   text-transform: uppercase;
 }
 
+.comment-card-anchor-note {
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  background: var(--surface-comment-offset-soft);
+  color: var(--color-text-muted);
+  font-size: var(--text-label);
+}
+
 .comment-card-close,
 .comment-thread-card-action {
+  min-height: 26px;
+  padding-inline: 7px;
   border: 1px solid transparent;
-  background: var(--surface-comment-offset-soft);
-  color: var(--color-text-muted);
+  background: transparent;
+  color: var(--color-text-faint);
+  font-size: var(--text-meta);
   transition: color var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive);
 }
 
 .comment-card-close:hover,
 .comment-thread-card-action:hover {
   color: var(--color-text);
+  background: var(--surface-comment-offset-soft);
   border-color: oklch(from var(--color-comment) l c h / 0.16);
 }
 
@@ -136,8 +148,8 @@
 .comment-thread-card {
   display: flex;
   flex-direction: column;
-  gap: var(--space-3);
-  padding-top: var(--space-3);
+  gap: var(--space-2);
+  padding-top: var(--space-2);
   border-top: 1px solid var(--color-divider);
 }
 
@@ -154,10 +166,11 @@
 .comment-thread-card-actions {
   margin-left: auto;
   justify-content: flex-end;
+  gap: var(--space-1);
 }
 
 .comment-message-card {
-  padding: var(--space-3) 0 0;
+  padding: var(--space-2) 0 0;
   border: 0;
   border-top: 1px solid var(--color-divider);
   border-radius: 0;
@@ -172,7 +185,7 @@
 .comment-message-card-body {
   margin-top: var(--space-1);
   font-size: var(--text-label);
-  line-height: 1.65;
+  line-height: 1.55;
 }
 
 .comment-reaction-bar {
@@ -187,16 +200,25 @@
 .comment-reaction-chips {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--space-2);
+  gap: var(--space-1);
 }
 
 .comment-reaction-actions {
   display: flex;
   align-items: center;
-  gap: var(--space-2);
+  gap: var(--space-1);
   flex-wrap: wrap;
 }
 
+.comment-reaction-quick-add,
+.comment-reaction-picker-btn {
+  width: 30px;
+  min-width: 30px;
+  min-height: 30px;
+  border-radius: var(--radius-sm);
+  font-size: var(--text-title-sm);
+}
+
 .comment-reaction-chip-emoji,
 .comment-reaction-chip-count {
   line-height: 1;

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

@@ -9,10 +9,6 @@
   pointer-events: none;
 }
 
-.comment-preview-badge {
-  right: calc(var(--preview-comment-rail-inset) - var(--preview-comment-rail-offset, 0px));
-}
-
 .comment-marker-icon {
   display: inline-flex;
   width: 12px;
@@ -34,6 +30,21 @@
   position: absolute;
 }
 
+.comment-preview-selection-chip {
+  --ui-chip-color: var(--color-comment);
+  position: absolute;
+  z-index: 2;
+  box-shadow: var(--shadow-sm);
+  pointer-events: auto;
+}
+
+@media (pointer: coarse) {
+  .comment-preview-selection-chip {
+    min-height: 44px;
+    padding-inline: var(--space-3);
+  }
+}
+
 .comment-preview-highlight {
   position: absolute;
   border: 1px solid oklch(from var(--color-comment) l c h / 0.16);

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

@@ -2,7 +2,7 @@
   flex: 1;
   overflow-x: hidden;
   overflow-y: auto;
-  padding: var(--space-2);
+  padding: var(--space-2) var(--space-2) var(--space-4);
   background: var(--color-surface);
 }
 
@@ -11,12 +11,13 @@
 }
 
 .comment-overview-file {
-  padding: var(--space-2) 0;
-  border-bottom: 1px solid color-mix(in oklab, var(--color-divider) 80%, transparent);
+  padding: var(--space-2) 0 var(--space-1);
 }
 
-.comment-overview-file:last-child {
-  border-bottom: none;
+.comment-overview-file + .comment-overview-file {
+  margin-top: var(--space-3);
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--color-divider);
 }
 
 .comment-overview-file-header {
@@ -24,7 +25,7 @@
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--space-2);
-  padding: 2px 4px 7px;
+  padding: 2px var(--space-1) var(--space-1);
 }
 
 .comment-overview-file-title-wrap {
@@ -72,8 +73,8 @@
 .comment-overview-thread {
   display: grid;
   width: 100%;
-  gap: 6px;
-  margin: 0 0 4px;
+  gap: var(--space-1);
+  margin: 0 0 2px;
   padding: var(--space-2);
   border: 1px solid transparent;
   border-radius: var(--radius-md);
@@ -140,37 +141,59 @@
 
 .comment-overview-thread-body {
   display: grid;
-  gap: 5px;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.comment-overview-thread-section {
+  display: grid;
+  gap: 2px;
   min-width: 0;
 }
 
+.comment-overview-thread-section-label {
+  color: var(--color-comment);
+  font-size: var(--text-micro);
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
 .comment-overview-thread-quote,
 .comment-overview-thread-preview,
 .comment-overview-thread-author,
 .comment-overview-thread-message-count {
-  display: -webkit-box;
+  display: block;
   overflow: hidden;
   margin: 0;
-  -webkit-box-orient: vertical;
-  text-overflow: ellipsis;
-  line-height: 1.25;
+  overflow-wrap: anywhere;
+  text-wrap: pretty;
 }
 
 .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);
+  padding-left: var(--space-2);
+  border-left: 2px solid var(--border-comment-active);
+  color: var(--color-text-muted);
   font-family: var(--font-mono);
   font-size: var(--text-meta);
+  line-height: 1.35;
+  white-space: pre-wrap;
 }
 
-.comment-overview-thread-preview {
-  -webkit-line-clamp: 1;
+.comment-overview-thread-preview.comment-markdown {
   color: var(--color-text);
-  font-size: 13px;
+  font-size: var(--text-ui-sm);
   font-weight: 520;
-  line-height: 1.3;
+  line-height: 1.35;
+}
+
+.comment-overview-thread-preview.comment-markdown > * {
+  margin: 0;
+}
+
+.comment-overview-thread-preview.comment-markdown > * + * {
+  margin-top: var(--space-1);
 }
 
 .comment-overview-thread-author,

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

@@ -31,105 +31,7 @@
 .comments-drawer-list {
   display: flex;
   flex-direction: column;
-  gap: var(--space-1);
+  gap: 0;
   overflow: auto;
-  padding: calc(var(--space-2) + 2px);
-}
-
-.comments-drawer-item {
-  --ui-record-padding: calc(var(--space-2) + 2px);
-  --ui-record-gap: var(--space-1);
-  --ui-record-radius: var(--radius-lg);
-  --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(--color-surface-offset);
-}
-
-.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.04em;
-  text-transform: uppercase;
-}
-
-.comments-drawer-item-count {
-  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);
-  font-weight: 700;
-}
-
-.comments-drawer-item-quote {
-  max-height: 5.8rem;
-  margin: 0;
-  overflow: auto;
-  overflow-wrap: anywhere;
-  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;
-  scrollbar-width: thin;
-  font-family: var(--font-mono);
-  font-size: var(--text-meta);
-  line-height: 1.45;
-}
-
-.comments-drawer-item-preview {
-  position: relative;
-  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: 1.3rem;
-  background: var(--surface-comment-preview-fade);
-  pointer-events: none;
-}
-
-.comments-drawer-item-footer {
-  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;
-  letter-spacing: 0.01em;
-}
-
-.comments-drawer-item-updated {
-  color: var(--color-text-faint);
+  padding: var(--space-2) var(--space-2) var(--space-4);
 }

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

@@ -49,6 +49,26 @@
   background: var(--color-surface-offset);
 }
 
+.diagram-preview-error-card {
+  align-items: flex-start;
+  border-top: 1px solid var(--color-divider);
+  background: var(--color-error-highlight);
+  color: var(--color-error);
+  font-size: var(--text-xs);
+}
+
+.diagram-preview-error-card .diagram-preview-placeholder-copy details {
+  color: var(--color-text-muted);
+}
+
+.diagram-preview-error-card .diagram-preview-placeholder-copy code {
+  display: block;
+  max-width: min(60ch, 100%);
+  margin-top: var(--space-2);
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
 .diagram-preview-toolbar {
   display: flex;
   align-items: center;
@@ -75,10 +95,6 @@
   flex: 0 0 auto;
 }
 
-.diagram-preview-toolbar-group--zoom {
-  flex: 0 0 auto;
-}
-
 .diagram-preview-toolbar-group--actions {
   margin-left: auto;
   justify-content: flex-end;
@@ -100,10 +116,15 @@
   max-height: min(70vh, 720px);
   overflow: auto;
   padding: var(--space-3);
+  touch-action: pan-x pan-y;
   background: transparent;
   overscroll-behavior: contain;
 }
 
+.diagram-preview-frame > svg {
+  margin-inline: auto;
+}
+
 .diagram-preview-toolbar .ui-preview-action {
   width: 30px;
   min-width: 30px;
@@ -270,12 +291,6 @@
   margin-right: auto;
 }
 
-.drawio-viewer-frame svg {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .drawio-embed-overlay-root {
   position: absolute;
   inset: 0;
@@ -297,10 +312,6 @@ body.drawio-maximized-open {
   overflow: hidden;
 }
 
-body.drawio-maximized-open::before {
-  content: none;
-}
-
 body.drawio-maximized-open .drawio-embed.is-maximized {
   pointer-events: auto;
 }
@@ -382,10 +393,6 @@ body.excalidraw-maximized-open {
   overflow: hidden;
 }
 
-body.excalidraw-maximized-open::before {
-  content: none;
-}
-
 body.excalidraw-maximized-open .resizer {
   opacity: 0;
   pointer-events: none;

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

@@ -94,20 +94,10 @@
   max-width: none;
 }
 
-.preview-content .mermaid-frame.is-pannable,
-.mermaid-maximized-root .mermaid-frame.is-pannable {
-  cursor: grab;
-}
-
-.preview-content .mermaid-frame.is-dragging,
-.mermaid-maximized-root .mermaid-frame.is-dragging {
-  cursor: grabbing;
-  user-select: none;
-}
-
-.preview-content .mermaid-frame svg,
-.mermaid-maximized-root .mermaid-frame svg {
-  display: block;
+.preview-content .mermaid-frame :is(text, tspan, foreignObject),
+.mermaid-maximized-root .mermaid-frame :is(text, tspan, foreignObject) {
+  cursor: text;
+  user-select: text;
 }
 
 body.mermaid-maximized-open {
@@ -181,25 +171,10 @@ body.mermaid-maximized-open::before {
   flex-shrink: 0;
 }
 
-.preview-content .plantuml-frame,
-.plantuml-maximized-root .plantuml-frame {
-  max-width: 100%;
-}
-
-.preview-content .plantuml-frame.is-pannable,
-.plantuml-maximized-root .plantuml-frame.is-pannable {
-  cursor: grab;
-}
-
-.preview-content .plantuml-frame.is-dragging,
-.plantuml-maximized-root .plantuml-frame.is-dragging {
-  cursor: grabbing;
-  user-select: none;
-}
-
-.preview-content .plantuml-frame svg,
-.plantuml-maximized-root .plantuml-frame svg {
-  display: block;
+.preview-content .plantuml-frame :is(text, tspan, foreignObject),
+.plantuml-maximized-root .plantuml-frame :is(text, tspan, foreignObject) {
+  cursor: text;
+  user-select: text;
 }
 
 body.plantuml-maximized-open {