collabmd 0.1.44 → 0.1.46

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

@@ -32,6 +32,12 @@
     display 300ms cubic-bezier(0.16, 1, 0.3, 1) allow-discrete;
 }
 
+.toast[data-tone='warning'] {
+  border-color: var(--border-warning-toast);
+  background: var(--surface-warning-toast);
+  color: var(--text-warning-toast);
+}
+
 .toast__message {
   flex: 1 1 auto;
   min-width: 0;

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

@@ -25,13 +25,23 @@
   white-space: nowrap;
 }
 
-.toolbar-theme-icon {
+.toolbar-theme-icon,
+.toolbar-vim-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 
+.toolbar-vim-button .toolbar-vim-state {
+  margin-left: auto;
+}
+
+.toolbar-vim-button[aria-pressed='true'] .toolbar-vim-state {
+  background: var(--color-primary-highlight);
+  color: var(--color-primary);
+}
+
 .toolbar-theme-button {
   width: 32px;
   min-width: 32px;

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;
@@ -58,15 +58,19 @@
 
 .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);
 }
 
@@ -144,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);
 }
 
@@ -162,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;
@@ -180,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 {
@@ -195,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;

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

@@ -95,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;
@@ -120,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;
@@ -290,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;
@@ -317,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;
 }
@@ -402,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;
@@ -537,6 +524,82 @@ body.excalidraw-maximized-open .resizer {
   color: var(--color-primary);
 }
 
+.file-tree-file.is-pdf .file-tree-icon {
+  color: var(--color-danger);
+}
+
 .file-tree-file.is-mermaid .file-tree-icon {
   color: oklch(from var(--color-primary) calc(l * 0.96) calc(c * 0.86) 215);
 }
+
+.file-tree-file.is-structurizr .file-tree-icon {
+  color: var(--color-primary);
+}
+
+.structurizr-preview-shell {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  margin: 0;
+  overflow: hidden;
+}
+
+.structurizr-preview-header {
+  flex-shrink: 0;
+}
+
+.structurizr-preview-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.structurizr-preview-status {
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--color-divider);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
+
+.structurizr-preview-status.is-error {
+  background: var(--color-error-highlight);
+  color: var(--color-error);
+}
+
+.structurizr-preview-stage {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.structurizr-preview-iframe {
+  display: block;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  border: 0;
+  background: var(--color-surface);
+}
+
+.structurizr-preview-shell.is-maximized {
+  position: fixed;
+  inset: var(--space-4);
+  z-index: 172;
+  width: auto !important;
+  height: auto !important;
+  max-width: none;
+  box-shadow: 0 0 0 9999px var(--surface-scrim), var(--shadow-media-modal);
+}
+
+body.structurizr-maximized-open {
+  overflow: hidden;
+}