improvement(ui): source collaborator colours from CSS palette (#8210)

* improvement(ui): source collaborator colours from CSS palette

* fix(ui): map resolved collaborator colours to palette slots

* docs(ui): document collaborator palette lookup

Author: BillLeoutsakosvl346

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/collaboration/caret-presence.test.ts

@@ -1,8 +1,16 @@
 /**
  * @vitest-environment jsdom
  */
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { activateCaretLabel, CARET_LABEL_HOLD_MS, renderCaret } from './caret-presence'
+import { USER_COLORS } from '@/lib/workspaces/colors'
+import {
+  activateCaretLabel,
+  CARET_LABEL_HOLD_MS,
+  caretColorSlot,
+  renderCaret,
+} from './caret-presence'
 
 const ACTIVE = 'collaboration-carets__caret--active'
 const FLIP = 'collaboration-carets__caret--flip'
@@ -12,10 +20,11 @@ describe('caret-presence', () => {
   afterEach(() => vi.useRealTimers())
 
   it('builds a tagged caret with a name label, shown on appearance', () => {
-    const caret = renderCaret({ name: 'Ada', color: '#f783ac', clientId: 4242 })
+    const caret = renderCaret({ name: 'Ada', color: USER_COLORS[1], clientId: 4242 })
     expect(caret.classList.contains('collaboration-carets__caret')).toBe(true)
     expect(caret.dataset.caretClientId).toBe('4242')
-    expect(caret.style.getPropertyValue('--caret-color')).toBeTruthy()
+    expect(caret.dataset.colorSlot).toBe('1')
+    expect(caret.style.getPropertyValue('--caret-color')).toBe('')
     const label = caret.querySelector('.collaboration-carets__label')
     expect(label?.textContent).toBe('Ada')
     expect(caret.classList.contains(ACTIVE)).toBe(true)
@@ -24,10 +33,64 @@ describe('caret-presence', () => {
   it('falls back to a default name for a bare user state', () => {
     const caret = renderCaret({ clientId: 1 })
     expect(caret.querySelector('.collaboration-carets__label')?.textContent).toBe('Collaborator')
+    expect(caret.dataset.colorSlot).toBeUndefined()
+  })
+
+  it('maps the current and historical identity palettes to the same CSS slots', () => {
+    const legacy = ['#4ADE80', '#F472B6', '#60C5FF', '#FF8533', '#C084FC', '#FCD34D']
+    for (const [slot, color] of USER_COLORS.entries()) {
+      expect(caretColorSlot(color)).toBe(slot)
+      expect(renderCaret({ color }).dataset.colorSlot).toBe(String(slot))
+      expect(caretColorSlot(legacy[slot].toLowerCase())).toBe(slot)
+      expect(renderCaret({ color: legacy[slot].toLowerCase() }).dataset.colorSlot).toBe(
+        String(slot)
+      )
+    }
+    expect(caretColorSlot('#f783ac')).toBe(-1)
+    expect(renderCaret({ color: '#f783ac' }).dataset.colorSlot).toBeUndefined()
+  })
+
+  it('maps resolved awareness colours back to their CSS palette slots', () => {
+    const resolved = ['#4ade80', '#f472b6', '#33b4ff', '#fb923c', '#c084fc', '#fcd34d']
+    try {
+      for (const [slot, reference] of USER_COLORS.entries()) {
+        const token = /^var\((--[\w-]+)\)$/.exec(reference)?.[1]
+        if (!token) throw new Error(`Missing CSS token for slot ${slot}`)
+        document.documentElement.style.setProperty(token, resolved[slot])
+      }
+      for (const [slot, color] of resolved.entries()) {
+        expect(caretColorSlot(color)).toBe(slot)
+        expect(renderCaret({ color }).dataset.colorSlot).toBe(String(slot))
+      }
+    } finally {
+      for (const reference of USER_COLORS) {
+        const token = /^var\((--[\w-]+)\)$/.exec(reference)?.[1]
+        if (token) document.documentElement.style.removeProperty(token)
+      }
+    }
+  })
+
+  it('keeps stylesheet slot colours aligned with the shared identity palette', () => {
+    const css = readFileSync(
+      path.join(
+        process.cwd(),
+        'app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css'
+      ),
+      'utf8'
+    )
+    for (const [slot, color] of USER_COLORS.entries()) {
+      const rule = new RegExp(
+        `\\.collaboration-carets__caret\\[data-color-slot="${slot}"\\],[^{}]*\\.collaboration-carets__selection\\[data-color-slot="${slot}"\\]\\s*\\{([^}]*)\\}`
+      )
+      expect(rule.exec(css)?.[1].match(/--caret-color:\s*([^;]+);/)?.[1]).toBe(color)
+    }
+    expect(css).toContain(
+      'background-color: color-mix(in srgb, var(--caret-color) 20%, transparent)'
+    )
   })
 
   it('hides the label after the inactivity hold, and re-activation restarts it', () => {
-    const caret = renderCaret({ name: 'Ada', color: '#f783ac', clientId: 4242 })
+    const caret = renderCaret({ name: 'Ada', color: '#F472B6', clientId: 4242 })
     vi.advanceTimersByTime(CARET_LABEL_HOLD_MS - 1)
     expect(caret.classList.contains(ACTIVE)).toBe(true)
     vi.advanceTimersByTime(1)
@@ -40,7 +103,7 @@ describe('caret-presence', () => {
   })
 
   it('flips the label left only when it would overflow the editor right edge', () => {
-    const caret = renderCaret({ name: 'Ada', color: '#f783ac', clientId: 4242 })
+    const caret = renderCaret({ name: 'Ada', color: '#F472B6', clientId: 4242 })
     const label = caret.querySelector<HTMLElement>('.collaboration-carets__label')
     if (!label) throw new Error('label missing')
     // double-cast-allowed: jsdom has no layout; stub the label's right edge for the measure

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/collaboration/caret-presence.ts

@@ -1,6 +1,7 @@
 import { Extension } from '@tiptap/core'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
 import type { Awareness } from 'y-protocols/awareness'
+import { USER_COLORS } from '@/lib/workspaces/colors'
 
 /**
  * Remote-collaborator caret presence for the file editor: the name label's
@@ -17,8 +18,38 @@ import type { Awareness } from 'y-protocols/awareness'
  */
 export const CARET_LABEL_HOLD_MS = 2000
 
-/** Fallback caret color when a peer's awareness carries no `color`. */
-export const DEFAULT_CARET_COLOR = 'var(--color-black)'
+/** Earlier clients published these fixed palette values in awareness. Match them by slot only. */
+const LEGACY_USER_COLORS = [
+  '#4ADE80',
+  '#F472B6',
+  '#60C5FF',
+  '#FF8533',
+  '#C084FC',
+  '#FCD34D',
+] as const
+
+/**
+ * Maps a current token, resolved CSS value, or historical collaborator colour
+ * to its stable palette slot. Returns `-1` for missing or unrecognized colours.
+ */
+export function caretColorSlot(color: unknown): number {
+  if (typeof color !== 'string') return -1
+  const current = USER_COLORS.findIndex((value) => value === color)
+  if (current >= 0) return current
+
+  // CollaborationCaret publishes the resolved CSS value in awareness for older peers.
+  // Resolve the same palette here so incoming hex values keep their original slots.
+  if (color && typeof document !== 'undefined') {
+    const styles = getComputedStyle(document.documentElement)
+    const resolved = USER_COLORS.findIndex((value) => {
+      const token = /^var\((--[\w-]+)\)$/.exec(value)?.[1]
+      return token && styles.getPropertyValue(token).trim().toUpperCase() === color.toUpperCase()
+    })
+    if (resolved >= 0) return resolved
+  }
+
+  return LEGACY_USER_COLORS.findIndex((value) => value === color.toUpperCase())
+}
 
 /**
  * The active-state class {@link activateCaretLabel} toggles on the caret node to reveal the
@@ -76,13 +107,12 @@ export function activateCaretLabel(caret: HTMLElement, editorRight?: number) {
  * `doc.clientID`; see `use-file-doc-collaboration.ts`).
  */
 export function renderCaret(user: Record<string, unknown>): HTMLElement {
-  const color = typeof user.color === 'string' ? user.color : DEFAULT_CARET_COLOR
+  const slot = caretColorSlot(user.color)
   const name = typeof user.name === 'string' && user.name ? user.name : 'Collaborator'
   const clientId = typeof user.clientId === 'number' ? user.clientId : undefined
   const caret = document.createElement('span')
   caret.className = 'collaboration-carets__caret'
-  // One inline var drives the caret bar, the dormant cap, and the name tag (all in CSS).
-  caret.style.setProperty('--caret-color', color)
+  if (slot >= 0) caret.dataset.colorSlot = String(slot)
   if (clientId !== undefined) caret.dataset.caretClientId = String(clientId)
   // The visible caret bar is a SEPARATE, absolutely-positioned child — never an inline border on the
   // caret span. The caret is a ProseMirror inline widget inserted between characters; an in-flow bar

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/editor-extensions.ts

@@ -3,13 +3,12 @@ import CollaborationCaret from '@tiptap/extension-collaboration-caret'
 import Placeholder from '@tiptap/extension-placeholder'
 import type { Awareness } from 'y-protocols/awareness'
 import type * as Y from 'yjs'
-import { withAlpha } from '@/lib/workspaces/colors'
 import { BlockMover } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/block-mover'
 import { CodeBlockWithLanguage } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/code-block'
 import { CodeBlockHighlight } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/code-highlight'
 import {
+  caretColorSlot,
   createCaretActivityExtension,
-  DEFAULT_CARET_COLOR,
   renderCaret,
 } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/collaboration/caret-presence'
 import { FileCollaboration } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/collaboration/file-collaboration'
@@ -106,10 +105,10 @@ export function createMarkdownEditorExtensions({
             user: collaboration.user,
             render: renderCaret,
             selectionRender: (user) => {
-              const color = typeof user.color === 'string' ? user.color : DEFAULT_CARET_COLOR
+              const slot = caretColorSlot(user.color)
               return {
                 class: 'collaboration-carets__selection',
-                style: `background-color: ${withAlpha(color, 0.2)};`,
+                ...(slot >= 0 ? { 'data-color-slot': String(slot) } : {}),
               }
             },
           }),

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css

@@ -469,14 +469,19 @@
 
 /*
  * Collaborative carets (TipTap CollaborationCaret). The caret bar and the name
- * label's background are colored inline from each collaborator's identity color
+ * label's background use the collaborator's identity palette slot from CSS
  * (the same `getUserColor` mechanism the canvas cursors use); the selection is a
- * translucent tint of that color (set via selectionRender). The name label shows
+ * translucent tint of that color. The name label shows
  * while the peer is active (JS toggles `--active` on each awareness change) or on
  * hover, then fades after inactivity — matching Google Docs. `z-index` lifts the
  * caret (and its label) above table cell backgrounds so a caret inside a table
  * cell is not hidden behind adjacent cells.
  */
+.rich-markdown-nodes .collaboration-carets__caret,
+.rich-markdown-nodes .collaboration-carets__selection {
+  --caret-color: var(--color-black);
+}
+
 .rich-markdown-nodes .collaboration-carets__caret {
   /* Zero inline footprint: a positioned anchor with NO width/border/margin, so inserting or moving this
    * inline widget never reflows the surrounding text. The visible bar, dormant cap (::before), name label,
@@ -486,6 +491,36 @@
   z-index: 20;
 }
 
+.rich-markdown-nodes .collaboration-carets__caret[data-color-slot="0"],
+.rich-markdown-nodes .collaboration-carets__selection[data-color-slot="0"] {
+  --caret-color: var(--indicator-active);
+}
+
+.rich-markdown-nodes .collaboration-carets__caret[data-color-slot="1"],
+.rich-markdown-nodes .collaboration-carets__selection[data-color-slot="1"] {
+  --caret-color: var(--color-pink-400);
+}
+
+.rich-markdown-nodes .collaboration-carets__caret[data-color-slot="2"],
+.rich-markdown-nodes .collaboration-carets__selection[data-color-slot="2"] {
+  --caret-color: var(--brand-secondary);
+}
+
+.rich-markdown-nodes .collaboration-carets__caret[data-color-slot="3"],
+.rich-markdown-nodes .collaboration-carets__selection[data-color-slot="3"] {
+  --caret-color: var(--color-orange-400);
+}
+
+.rich-markdown-nodes .collaboration-carets__caret[data-color-slot="4"],
+.rich-markdown-nodes .collaboration-carets__selection[data-color-slot="4"] {
+  --caret-color: var(--color-purple-400);
+}
+
+.rich-markdown-nodes .collaboration-carets__caret[data-color-slot="5"],
+.rich-markdown-nodes .collaboration-carets__selection[data-color-slot="5"] {
+  --caret-color: var(--color-amber-300);
+}
+
 /* The visible caret bar — absolutely positioned so it draws over the text without occupying inline
  * width. `left: -1px` centers the 2px bar on the cursor position; top/bottom span the line box height. */
 .rich-markdown-nodes .collaboration-carets__bar {
@@ -579,9 +614,8 @@
   border-radius: 2px 2px 0 2px;
 }
 
-/* Remote text selection: a rounded translucent tint of the collaborator's identity
- * color (the alpha fill is set inline by selectionRender). */
 .rich-markdown-nodes .collaboration-carets__selection {
+  background-color: color-mix(in srgb, var(--caret-color) 20%, transparent);
   border-radius: 2px;
   pointer-events: none;
 }