collabmd 0.1.44 → 0.1.46

package/src/client/styles/overrides/codemirror.css

@@ -56,38 +56,174 @@
   border-bottom: 1px solid var(--color-divider);
 }
 
+.cm-panels-bottom {
+  border-top: 1px solid var(--color-divider);
+}
+
 .cm-panel.cm-search {
-  gap: var(--space-2);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  width: 100%;
   align-items: center;
-  padding: var(--space-2);
-  background: oklch(from var(--color-surface) l c h / 0.98);
+  padding: 8px !important;
+  border-top: 0;
+  background: var(--color-surface);
   color: var(--color-text);
-  box-shadow: inset 0 -1px 0 var(--color-divider);
   font-family: var(--font-body);
 }
 
+.cm-panel.cm-search > * {
+  margin: 0 !important;
+}
+
 .cm-panel.cm-search label {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  min-height: 22px;
+  gap: var(--space-1);
+  padding: 0 8px 0 6px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
   color: var(--color-text-muted);
-  font-size: var(--text-xs);
+  font-size: var(--text-meta) !important;
   font-weight: 600;
+  line-height: 1;
+  white-space: nowrap !important;
+  transition:
+    background var(--transition-interactive),
+    border-color var(--transition-interactive),
+    color var(--transition-interactive);
+}
+
+.cm-panel.cm-search label:hover {
+  background: var(--color-surface-offset);
+  color: var(--color-text);
+}
+
+.cm-panel.cm-search label:has(input:checked) {
+  border-color: var(--interactive-border);
+  background: var(--interactive-surface);
+  color: var(--color-primary);
+}
+
+.cm-panel.cm-search label input[type='checkbox'] {
+  width: 13px;
+  height: 13px;
+  margin: 0;
+  accent-color: var(--color-primary);
 }
 
 .cm-panel.cm-search .cm-textfield {
-  min-height: 32px;
-  padding: 0 var(--space-2);
+  width: auto;
+  min-width: 0;
+  min-height: var(--control-h-sm);
+  padding: 0 10px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   background: var(--color-surface-offset);
   color: var(--color-text);
   font-family: var(--font-body);
-  font-size: var(--text-sm);
+  font-size: var(--text-ui-sm);
+  line-height: 1;
+  transition:
+    background var(--transition-interactive),
+    border-color var(--transition-interactive),
+    box-shadow var(--transition-interactive);
+}
+
+.cm-panel.cm-search .cm-textfield:hover:not(:focus) {
+  border-color: color-mix(in oklab, var(--color-border) 70%, var(--color-text-faint) 30%);
+}
+
+.cm-panel.cm-search .cm-textfield:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-focus);
+}
+
+.cm-panel.cm-search .cm-textfield::placeholder {
+  color: var(--color-text-faint);
+}
+
+.cm-panel.cm-search > input[name='search'] {
+  order: 1;
+  flex: 1 1 120px;
+}
+
+.cm-panel.cm-search > button[name='next'] {
+  order: 2;
+}
+
+.cm-panel.cm-search > button[name='prev'] {
+  order: 3;
+}
+
+.cm-panel.cm-search > button[name='select'] {
+  order: 4;
+}
+
+.cm-panel.cm-search > button[name='close'] {
+  order: 5;
+}
+
+.cm-panel.cm-search > label:has(input[name='case']) {
+  order: 6;
+}
+
+.cm-panel.cm-search > label:has(input[name='re']) {
+  order: 7;
+}
+
+.cm-panel.cm-search > label:has(input[name='word']) {
+  order: 8;
+}
+
+.cm-panel.cm-search > br {
+  display: none;
+}
+
+.cm-panel.cm-search::before,
+.cm-panel.cm-search::after {
+  content: '';
+  flex: 0 0 100%;
+  width: 0;
+  height: 0;
+  min-height: 0;
+  padding: 0;
+  font-size: 0;
+  line-height: 0;
+}
+
+.cm-panel.cm-search::before {
+  order: 6;
+}
+
+.cm-panel.cm-search::after {
+  order: 9;
+}
+
+.cm-panel.cm-search > input[name='replace'] {
+  order: 10;
+  flex: 1 1 120px;
+}
+
+.cm-panel.cm-search > button[name='replace'] {
+  order: 11;
+}
+
+.cm-panel.cm-search > button[name='replaceAll'] {
+  order: 12;
 }
 
 .cm-panel.cm-search .cm-button {
-  min-height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  min-height: var(--control-h-sm);
   padding: 0 10px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
@@ -96,26 +232,85 @@
   font-family: var(--font-body);
   font-size: var(--text-xs);
   font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  transition:
+    transform var(--transition-interactive),
+    background var(--transition-interactive),
+    border-color var(--transition-interactive),
+    color var(--transition-interactive);
 }
 
 .cm-panel.cm-search .cm-button:hover:not(:disabled),
 .cm-panel.cm-search .cm-button:focus-visible {
   background: var(--color-surface-dynamic);
-  outline: none;
+  border-color: color-mix(in oklab, var(--color-border) 70%, var(--color-text-faint) 30%);
+}
+
+.cm-panel.cm-search .cm-button:active {
+  transform: scale(0.97);
+}
+
+.cm-panel.cm-search > button[name='close'] {
+  position: static !important;
+  align-self: start;
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  min-height: 24px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-faint);
+  font-size: 20px;
+  line-height: 1;
+  transition:
+    background var(--transition-interactive),
+    color var(--transition-interactive);
+}
+
+.cm-panel.cm-search > button[name='close']:hover,
+.cm-panel.cm-search > button[name='close']:focus-visible {
+  background: var(--color-surface-offset);
+  color: var(--color-text);
 }
 
 @media (max-width: 768px) {
   .cm-panel.cm-search {
-    flex-wrap: wrap;
-    align-items: stretch;
+    gap: 6px;
+    padding: 8px;
+  }
+
+  .cm-panel.cm-search > input[name='search'] {
+    flex: 0 0 calc(100% - 38px);
+  }
+
+  .cm-panel.cm-search > button[name='close'] {
+    order: 2;
+  }
+
+  .cm-panel.cm-search > button[name='next'] {
+    order: 3;
+  }
+
+  .cm-panel.cm-search > button[name='prev'] {
+    order: 4;
+  }
+
+  .cm-panel.cm-search > button[name='select'] {
+    order: 5;
+  }
+
+  .cm-panel.cm-search > input[name='replace'] {
+    flex: 0 0 100%;
   }
 
   .cm-panel.cm-search label {
-    flex: 1 1 100%;
+    min-height: 32px;
   }
 
   .cm-panel.cm-search .cm-textfield {
-    width: 100%;
     min-height: 40px;
     font-size: 16px;
   }
@@ -124,4 +319,11 @@
     min-height: 40px;
     padding: 0 12px;
   }
+
+  .cm-panel.cm-search > button[name='close'] {
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
+    min-height: 32px;
+  }
 }

package/src/client/styles/style.css

@@ -17,6 +17,7 @@
 @import './features/diff-toolbar.css';
 @import './features/diff-commit.css';
 @import './features/diff-lines.css';
+@import './features/diff-special.css';
 @import './features/collaboration-presence.css';
 @import './features/collaboration-chat.css';
 @import './features/collaboration-dialogs.css';

package/src/client/styles/surfaces/excalidraw-editor.css

@@ -31,6 +31,300 @@ body[data-surface='excalidraw-editor'][data-document-mode='preview'] .disable-vi
   pointer-events: none;
 }
 
+.diagram-comments-overlay {
+  position: absolute;
+  z-index: 25;
+  inset: 0;
+  pointer-events: none;
+}
+
+.diagram-comments-toolbar {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  pointer-events: auto;
+}
+
+.diagram-comment-button,
+.diagram-comment-close,
+.diagram-comment-back,
+.diagram-comment-marker {
+  border: 0;
+  font: inherit;
+  cursor: pointer;
+}
+
+.diagram-comment-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  min-height: var(--control-h-sm);
+  padding: 0 var(--space-3);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text);
+  box-shadow: none;
+  transition: transform var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive), color var(--transition-interactive);
+}
+
+.diagram-comment-button:hover:not(:disabled),
+.diagram-comment-back:hover {
+  border-color: var(--color-comment);
+}
+
+.diagram-comment-button:hover:not(:disabled),
+.diagram-comment-button.is-active {
+  background: var(--color-surface-raised);
+}
+
+.diagram-comment-button:active:not(:disabled),
+.diagram-comment-add:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.diagram-comment-button:focus-visible,
+.diagram-comment-add:focus-visible,
+.diagram-comment-close:focus-visible,
+.diagram-comment-back:focus-visible,
+.diagram-comment-marker:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.diagram-comment-icon {
+  width: 15px;
+  height: 15px;
+  flex: 0 0 auto;
+}
+
+.diagram-comments-toolbar .diagram-comment-button,
+.diagram-comments-toolbar .diagram-comment-add {
+  position: relative;
+}
+
+.diagram-comment-count {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 1.125rem;
+  height: 1.125rem;
+  padding: 0 0.25rem;
+  border: 2px solid var(--color-surface);
+  border-radius: var(--radius-full);
+  background: var(--color-comment);
+  color: var(--color-primary-contrast);
+  font-family: inherit;
+  font-size: var(--text-caption);
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+  pointer-events: none;
+}
+
+.diagram-comment-add {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--control-h-sm);
+  min-width: var(--control-h-sm);
+  height: var(--control-h-sm);
+  padding: 0;
+  border: 1px solid var(--border-comment-soft);
+  border-radius: var(--radius-md);
+  background: var(--color-comment-soft);
+  color: var(--color-comment-text);
+  cursor: pointer;
+  transition: transform var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive), color var(--transition-interactive);
+}
+
+.diagram-comment-add:hover:not(:disabled) {
+  border-color: var(--border-comment-active);
+  background: var(--surface-comment-offset-active);
+}
+
+.diagram-comment-button.is-primary {
+  border-color: var(--color-primary);
+  background: var(--color-primary);
+  color: var(--color-primary-contrast);
+}
+
+.diagram-comment-button.is-danger {
+  color: var(--color-error);
+}
+
+.diagram-comment-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.diagram-comment-add:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.diagram-comment-markers {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.diagram-comment-marker {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 2px solid var(--color-surface);
+  border-radius: 50%;
+  background: var(--color-comment);
+  color: var(--color-primary-contrast);
+  box-shadow: var(--shadow-accent-ring);
+  pointer-events: auto;
+  transform: translate(-50%, -50%);
+}
+
+.diagram-comment-marker.is-active {
+  box-shadow: var(--shadow-accent-ring-strong);
+}
+
+.diagram-comments-drawer {
+  position: absolute;
+  top: 4.5rem;
+  right: var(--space-3);
+  bottom: var(--space-3);
+  display: flex;
+  flex-direction: column;
+  width: min(22rem, calc(100vw - (2 * var(--space-3))));
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-lg);
+  color: var(--color-text);
+  pointer-events: auto;
+  overflow: hidden;
+}
+
+.diagram-comments-drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3);
+  border-bottom: 1px solid var(--color-divider);
+  background: var(--color-surface);
+}
+
+.diagram-comments-drawer-header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.diagram-comment-close {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--color-text-muted);
+  font-size: 22px;
+}
+
+.diagram-comments-drawer-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  overflow: auto;
+}
+
+.diagram-comment-message-body {
+  margin: 0;
+  color: var(--color-text-muted);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.diagram-comment-message-meta {
+  color: var(--color-comment-text);
+  font-weight: 650;
+}
+
+.diagram-comments-drawer-content.is-list {
+  gap: 0;
+  padding: var(--space-2) var(--space-2) var(--space-4);
+}
+
+.diagram-comment-anchor-label {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-ui-sm);
+}
+
+.diagram-comment-back {
+  align-self: flex-start;
+  padding: 0;
+  background: transparent;
+  color: var(--color-comment-text);
+}
+
+.diagram-comment-messages {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.diagram-comment-message {
+  padding: var(--space-3);
+  border: 1px solid var(--border-comment-soft);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-2);
+}
+
+.diagram-comment-form {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.diagram-comment-input {
+  width: 100%;
+  box-sizing: border-box;
+  resize: vertical;
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  color: var(--color-text);
+  font: inherit;
+}
+
+.diagram-comment-input:focus {
+  border-color: var(--color-primary);
+  outline: none;
+  box-shadow: var(--shadow-focus-compact);
+}
+
+.diagram-comment-form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+}
+
+@media (max-width: 600px) {
+  .diagram-comments-drawer {
+    top: var(--space-3);
+    right: var(--space-3);
+    bottom: 4.25rem;
+  }
+}
+
 .loading-state {
   display: flex;
   align-items: center;

package/src/domain/comment-threads.js

@@ -5,7 +5,7 @@ export const COMMENT_EXCERPT_MAX_LENGTH = 160;
 export const COMMENT_ANCHOR_QUOTE_MAX_LENGTH = 280;
 export const COMMENT_REACTION_EMOJI_MAX_LENGTH = 16;
 
-const COMMENT_ANCHOR_KINDS = new Set(['line', 'text']);
+const COMMENT_ANCHOR_KINDS = new Set(['diagram-element', 'line', 'text']);
 
 function asFiniteNumber(value) {
   return Number.isFinite(value) ? value : null;
@@ -55,6 +55,38 @@ function normalizeAnchorKind(value) {
   return COMMENT_ANCHOR_KINDS.has(value) ? value : null;
 }
 
+function normalizeDiagramElementId(value) {
+  const normalized = asString(value).trim().slice(0, 240);
+  return normalized || null;
+}
+
+function normalizeDiagramAnchorPoint(value) {
+  const point = asObject(value);
+  const x = asFiniteNumber(point?.x);
+  const y = asFiniteNumber(point?.y);
+  return x === null || y === null ? null : { x, y };
+}
+
+function normalizeDiagramAnchorSnapshot(value) {
+  const snapshot = asObject(value);
+  const x = asFiniteNumber(snapshot?.x);
+  const y = asFiniteNumber(snapshot?.y);
+  const width = asFiniteNumber(snapshot?.width);
+  const height = asFiniteNumber(snapshot?.height);
+  if (x === null || y === null || width === null || height === null) {
+    return null;
+  }
+
+  return {
+    height,
+    text: normalizeCommentQuote(snapshot?.text),
+    type: asString(snapshot?.type).trim() || 'element',
+    width,
+    x,
+    y,
+  };
+}
+
 export function normalizeCommentBody(value) {
   const normalized = String(value ?? '')
     .replace(/\r\n?/g, '\n')
@@ -196,6 +228,23 @@ export function createCommentId(prefix = 'comment') {
 
 export function normalizeCommentAnchor(record = {}) {
   const anchorKind = normalizeAnchorKind(record.anchorKind);
+  if (anchorKind === 'diagram-element') {
+    const anchorPoint = normalizeDiagramAnchorPoint(record.anchorPoint);
+    const anchorSnapshot = normalizeDiagramAnchorSnapshot(record.anchorSnapshot);
+    const elementId = normalizeDiagramElementId(record.elementId);
+    if (!anchorPoint || !anchorSnapshot || !elementId) {
+      return null;
+    }
+
+    return {
+      anchorKind,
+      anchorPoint,
+      anchorQuote: normalizeCommentQuote(record.anchorQuote || anchorSnapshot.text),
+      anchorSnapshot,
+      elementId,
+    };
+  }
+
   const anchorStart = asObject(record.anchorStart);
   const anchorEnd = asObject(record.anchorEnd);
   const anchorStartLine = asFiniteNumber(record.anchorStartLine);
@@ -235,12 +284,18 @@ export function createCommentThreadSharedType(record = {}) {
   messages.push(normalizedMessages.length > 0 ? normalizedMessages : [initialMessage]);
 
   const thread = new Y.Map();
-  thread.set('anchorEnd', anchor.anchorEnd);
-  thread.set('anchorEndLine', anchor.anchorEndLine);
   thread.set('anchorKind', anchor.anchorKind);
   thread.set('anchorQuote', anchor.anchorQuote);
-  thread.set('anchorStart', anchor.anchorStart);
-  thread.set('anchorStartLine', anchor.anchorStartLine);
+  if (anchor.anchorKind === 'diagram-element') {
+    thread.set('anchorPoint', anchor.anchorPoint);
+    thread.set('anchorSnapshot', anchor.anchorSnapshot);
+    thread.set('elementId', anchor.elementId);
+  } else {
+    thread.set('anchorEnd', anchor.anchorEnd);
+    thread.set('anchorEndLine', anchor.anchorEndLine);
+    thread.set('anchorStart', anchor.anchorStart);
+    thread.set('anchorStartLine', anchor.anchorStartLine);
+  }
   thread.set('createdAt', asFiniteNumber(record.createdAt) ?? Date.now());
   thread.set('createdByColor', asString(record.createdByColor));
   thread.set('createdByName', asString(record.createdByName) || initialMessage.userName);
@@ -266,6 +321,9 @@ export function serializeCommentThread(thread) {
     anchorQuote: readThreadValue(thread, 'anchorQuote'),
     anchorStart: readThreadValue(thread, 'anchorStart'),
     anchorStartLine: readThreadValue(thread, 'anchorStartLine'),
+    anchorPoint: readThreadValue(thread, 'anchorPoint'),
+    anchorSnapshot: readThreadValue(thread, 'anchorSnapshot'),
+    elementId: readThreadValue(thread, 'elementId'),
   });
   const messages = serializeMessages(readThreadValue(thread, 'messages'));
 

package/src/domain/excalidraw-room-codec.js

@@ -98,13 +98,15 @@ function compareElementVersions(left, right) {
 }
 
 function compareElementIndex(left, right) {
-  const leftIndex = left?.index ?? '';
-  const rightIndex = right?.index ?? '';
+  const leftIndex = String(left?.index ?? '');
+  const rightIndex = String(right?.index ?? '');
   if (leftIndex !== rightIndex) {
-    return String(leftIndex).localeCompare(String(rightIndex));
+    return leftIndex < rightIndex ? -1 : 1;
   }
 
-  return String(left?.id || '').localeCompare(String(right?.id || ''));
+  const leftId = String(left?.id || '');
+  const rightId = String(right?.id || '');
+  return leftId < rightId ? -1 : leftId > rightId ? 1 : 0;
 }
 
 function getNestedMapValue(map, key, { create = false } = {}) {