collabmd 0.1.21 → 0.1.23

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

@@ -0,0 +1,120 @@
+/* ===== COMMENTS / DRAWER ===== */
+
+.comments-drawer {
+  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);
+  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-4);
+  border-bottom: 1px solid var(--color-divider);
+  background: var(--surface-comment-shell-header);
+}
+
+.comments-drawer-title {
+  color: var(--color-comment);
+  font-size: var(--text-label);
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.comments-drawer-empty {
+  padding: var(--space-4);
+  color: var(--color-text-muted);
+  font-size: var(--text-label);
+}
+
+.comments-drawer-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  overflow: auto;
+  padding: var(--space-3);
+}
+
+.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-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-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);
+}
+
+.comments-drawer-item-title {
+  color: var(--color-comment);
+  font-size: var(--text-meta);
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.comments-drawer-item-count {
+  min-height: 20px;
+  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: 9.5rem;
+  margin: var(--space-3) 0;
+  overflow: auto;
+  overflow-wrap: anywhere;
+  padding: var(--space-3);
+  padding-bottom: calc(var(--space-3) + 2px);
+  border: 1px solid var(--border-comment-soft);
+  border-radius: var(--radius-lg);
+  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;
+}
+
+.comments-drawer-item-preview {
+  position: relative;
+  max-height: 7.8rem;
+  overflow: hidden;
+  color: var(--color-text-muted);
+}
+
+.comments-drawer-item-preview:after {
+  content: '';
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 2.5rem;
+  background: var(--surface-comment-preview-fade);
+  pointer-events: none;
+}
+
+.comments-drawer-item-footer {
+  align-items: flex-end;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  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);
+}

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

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

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

@@ -0,0 +1,227 @@
+/* ===== DIAGRAM PREVIEW ===== */
+
+.diagram-preview-shell {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  margin: var(--space-4) 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+}
+
+.diagram-preview-placeholder-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  background: var(--color-surface);
+}
+
+.diagram-preview-placeholder-copy {
+  display: grid;
+  gap: 2px;
+}
+
+.diagram-preview-placeholder-copy strong {
+  font-size: var(--text-sm);
+}
+
+.diagram-preview-placeholder-copy span {
+  color: var(--color-text-muted);
+  font-size: var(--text-xs);
+}
+
+.diagram-preview-placeholder-btn {
+  flex-shrink: 0;
+  padding: 4px 10px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-2);
+  color: var(--color-text);
+  font-size: var(--text-xs);
+  cursor: pointer;
+}
+
+.diagram-preview-placeholder-btn:hover {
+  background: var(--color-surface-offset);
+}
+
+.diagram-preview-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  flex-wrap: wrap;
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-surface-raised);
+  color: var(--color-text-muted);
+  font-size: var(--text-xs);
+  user-select: none;
+}
+
+.diagram-preview-zoom-label {
+  min-width: 52px;
+  color: var(--color-text-muted);
+  text-align: center;
+  font-size: var(--text-xs);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+.diagram-preview-frame {
+  min-width: 0;
+  max-width: 100%;
+  max-height: min(70vh, 720px);
+  overflow: auto;
+  padding: var(--space-3);
+  background: transparent;
+  overscroll-behavior: contain;
+}
+
+.excalidraw-embed,
+.excalidraw-embed-placeholder {
+  display: block;
+  transition: box-shadow 0.18s ease;
+}
+
+.excalidraw-embed-overlay-root {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.excalidraw-maximized-root {
+  position: fixed;
+  inset: 0;
+  z-index: 171;
+  pointer-events: none;
+}
+
+body.excalidraw-maximized-open {
+  overflow: hidden;
+}
+
+body.excalidraw-maximized-open::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 170;
+  background: var(--surface-scrim);
+  backdrop-filter: blur(2px);
+}
+
+body.excalidraw-maximized-open .excalidraw-maximized-root {
+  z-index: 171;
+}
+
+body.excalidraw-maximized-open .resizer {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.excalidraw-embed:hover {
+  box-shadow: var(--shadow-elevated-soft);
+}
+
+.excalidraw-embed-placeholder.is-hydrated {
+  visibility: hidden;
+}
+
+.excalidraw-embed-header {
+  gap: var(--space-2);
+}
+
+.excalidraw-embed-icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--color-primary);
+}
+
+.excalidraw-embed-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.excalidraw-embed-iframe {
+  display: block;
+  width: 100%;
+  min-height: 200px;
+  border: none;
+  background: var(--surface-embed-canvas);
+}
+
+.excalidraw-embed.is-maximized {
+  position: fixed;
+  inset: var(--space-4);
+  z-index: 172;
+  display: flex;
+  flex-direction: column;
+  width: auto;
+  max-width: none;
+  margin: 0;
+  box-sizing: border-box;
+  border-radius: var(--radius-lg-plus);
+  box-shadow: var(--shadow-media-modal);
+}
+
+.excalidraw-embed.is-maximized .excalidraw-embed-header {
+  flex-shrink: 0;
+}
+
+.excalidraw-embed.is-maximized .excalidraw-embed-iframe {
+  flex: 1;
+  min-height: 0;
+  height: auto !important;
+}
+
+.excalidraw-embed.is-maximized .excalidraw-embed-resizer {
+  display: none;
+}
+
+.excalidraw-embed-resizer {
+  position: relative;
+  height: 6px;
+  background: var(--color-border);
+  cursor: ns-resize;
+  transition: background 0.18s ease;
+}
+
+.excalidraw-embed-resizer::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 32px;
+  height: 3px;
+  border-radius: var(--radius-2xs);
+  background: var(--color-text-faint);
+  opacity: 0;
+  transform: translate(-50%, -50%);
+  transition: opacity 0.18s ease;
+}
+
+.excalidraw-embed-resizer:hover {
+  background: var(--color-primary);
+}
+
+.excalidraw-embed-resizer:hover::after {
+  opacity: 1;
+}
+
+.file-tree-file.is-excalidraw .file-tree-icon {
+  color: var(--color-primary);
+}
+
+.file-tree-file.is-mermaid .file-tree-icon {
+  color: oklch(from var(--color-primary) calc(l * 0.96) calc(c * 0.86) 215);
+}

package/src/client/styles/features/diff-commit.css

@@ -0,0 +1,268 @@
+/* ===== DIFF / COMMIT SHELL ===== */
+
+.diff-commit-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--color-divider);
+  background: linear-gradient(180deg, var(--surface-accent-subtle), var(--color-surface));
+}
+
+.diff-commit-subject {
+  color: var(--color-text);
+  font-size: var(--text-title-md);
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.diff-commit-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--color-text-muted);
+  font-size: var(--text-label);
+}
+
+.diff-commit-meta-secondary {
+  color: var(--color-text-faint);
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+}
+
+.diff-commit-shell {
+  display: grid;
+  grid-template-columns: minmax(210px, 242px) minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+  padding: 10px;
+}
+
+.diff-commit-index {
+  position: sticky;
+  top: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: calc(100dvh - 220px);
+  overflow: hidden;
+  padding: 8px;
+  border: 1px solid var(--color-divider);
+  border-radius: calc(var(--radius-lg) + 2px);
+  background: var(--surface-overlay-raised);
+  box-shadow: var(--shadow-elevated-soft);
+}
+
+.diff-commit-index-header {
+  padding-inline: 1px;
+  color: var(--color-text-faint);
+  font-size: var(--text-caption);
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.diff-commit-index-list {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-block-end: 2px;
+}
+
+.diff-index-item {
+  --ui-record-padding: 8px 9px;
+  --ui-record-gap: 4px;
+  --ui-record-border: var(--color-border);
+  --ui-record-bg: var(--surface-overlay-offset);
+  --ui-record-border-hover: var(--color-border);
+  --ui-record-bg-hover: var(--surface-fill-strong);
+  --ui-record-border-active: var(--border-accent-strong);
+  --ui-record-bg-active: var(--surface-accent-subtle);
+  --ui-record-shadow-active: var(--shadow-accent-inset);
+}
+
+.diff-index-item-top,
+.diff-index-item-meta {
+  gap: 6px;
+}
+
+.diff-index-item-name {
+  font-size: var(--text-label);
+  font-weight: 700;
+}
+
+.diff-index-item-path {
+  font-size: var(--text-caption);
+}
+
+.diff-index-item-meta {
+  font-family: var(--font-mono);
+  font-size: var(--text-caption);
+}
+
+.diff-commit-main {
+  min-width: 0;
+}
+
+.diff-commit-sections {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.diff-commit-section {
+  overflow: hidden;
+  border: 1px solid var(--color-divider);
+  border-radius: calc(var(--radius-lg) + 2px);
+  background: var(--surface-overlay-raised);
+}
+
+.diff-commit-section.active {
+  border-color: var(--border-accent-strong);
+  box-shadow: var(--shadow-accent-outline);
+}
+
+.diff-commit-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  width: 100%;
+  padding: 10px 14px;
+  background: var(--surface-overlay-offset);
+  text-align: left;
+}
+
+.diff-commit-section-header:hover {
+  background: var(--surface-fill-strong);
+}
+
+.diff-commit-section-main,
+.diff-commit-section-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.diff-commit-section-main {
+  flex: 1;
+}
+
+.diff-section-chevron {
+  flex-shrink: 0;
+  color: var(--color-text-faint);
+  transition: transform 150ms ease;
+}
+
+.diff-section-chevron.collapsed {
+  transform: rotate(-90deg);
+}
+
+.diff-commit-section-copy {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.diff-commit-section-name {
+  overflow: hidden;
+  color: var(--color-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-ui-sm);
+  font-weight: 700;
+}
+
+.diff-commit-section-path {
+  overflow: hidden;
+  color: var(--color-text-faint);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-meta);
+}
+
+.diff-commit-section-meta {
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  font-weight: 700;
+}
+
+.diff-commit-section-body {
+  padding: 0;
+}
+
+.diff-commit-shell-focused .diff-commit-main .diff-file-block {
+  overflow: hidden;
+  border: 1px solid var(--color-divider);
+  border-radius: calc(var(--radius-lg) + 2px);
+}
+
+.diff-file-block {
+  margin-bottom: 0;
+}
+
+.diff-file-header {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 8px 14px;
+  border-top: 1px solid var(--color-divider);
+  border-bottom: 1px solid var(--color-divider);
+  background: var(--color-surface-offset);
+}
+
+.diff-file-header:first-child {
+  border-top: none;
+}
+
+.diff-file-path {
+  color: var(--color-text);
+  font-family: var(--font-mono);
+  font-size: var(--text-label);
+  font-weight: 500;
+}
+
+.diff-file-header-stats {
+  display: inline-flex;
+  gap: var(--space-2);
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+}
+
+.diff-binary-message,
+.diff-empty-state {
+  padding: var(--space-4);
+  color: var(--color-text-faint);
+}
+
+.diff-limit-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-2);
+  padding: var(--space-4);
+  border-top: 1px solid var(--color-divider);
+  color: var(--color-text-muted);
+}
+
+.diff-limit-card strong {
+  color: var(--color-text);
+  font-size: var(--text-sm);
+}
+
+.diff-load-full-btn {
+  margin-top: var(--space-1);
+  font-size: var(--text-label);
+  font-weight: 600;
+}