feat(editor): render color swatches in inline code

Add a TipTap extension that auto-detects CSS color values inside inline
code and renders a small colored square swatch to the left — similar to
Chrome DevTools.

Supports hex (#rgb, #rrggbb, #rrggbbaa), rgb(), rgba(), hsl(), hsla(),
oklch(), oklab(), lch(), lab(), hwb(), color(), and all 148 CSS named
colors. Uses a ProseMirror decoration plugin so the underlying markdown
is unchanged — no special authoring syntax needed.

Swatch has a checkerboard background pattern to reveal transparency in
alpha colors, with dark mode border adaptation.

https://claude.ai/code/session_01G7EiAdwAzdi7qzeYditnic

Author: claude

packages/ui/src/components/editor/CeptEditor.tsx

@@ -27,6 +27,7 @@ import { MathBlock, InlineMath } from './extensions/math.js';
 import { Mermaid } from './extensions/mermaid.js';
 import { SlashCommand, defaultSlashCommands, filterSlashCommands } from './extensions/slash-command.js';
 import type { SlashCommandItem } from './extensions/slash-command.js';
+import { CodeColorSwatch } from './extensions/code-color-swatch.js';
 import { SlashCommandMenu, type SlashCommandMenuRef } from './SlashCommandMenu.js';
 import { InlineToolbar } from './InlineToolbar.js';
 import tippy, { type Instance as TippyInstance } from 'tippy.js';
@@ -149,6 +150,7 @@ export function CeptEditor({
         },
       }),
       Mermaid,
+      CodeColorSwatch,
       GlobalDragHandle.configure({
         dragHandleWidth: 24,
         scrollTreshold: 100,

packages/ui/src/components/editor/editor-styles.css

@@ -162,6 +162,25 @@
   font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
 }
 
+/* Color swatch for inline code containing CSS color values */
+.cept-color-swatch {
+  display: inline-block;
+  width: 0.8em;
+  height: 0.8em;
+  border-radius: 2px;
+  margin-right: 0.25em;
+  vertical-align: -0.05em;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  /* Checkerboard pattern to reveal transparency in alpha colors */
+  background-image:
+    linear-gradient(45deg, #ccc 25%, transparent 25%),
+    linear-gradient(-45deg, #ccc 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #ccc 75%),
+    linear-gradient(-45deg, transparent 75%, #ccc 75%);
+  background-size: 6px 6px;
+  background-position: 0 0, 0 3px, 3px -3px, -3px 0;
+}
+
 /* Mentions */
 .cept-editor .tiptap .cept-mention {
   background-color: rgba(35, 131, 226, 0.1);
@@ -934,6 +953,7 @@
 @media (prefers-color-scheme: dark) {
   .cept-editor .tiptap p.is-editor-empty:first-child::before { color: #52525b; }
   .cept-editor .tiptap code { background-color: rgba(255, 255, 255, 0.1); }
+  .cept-color-swatch { border-color: rgba(255, 255, 255, 0.2); }
   .cept-editor .tiptap hr, .cept-editor .tiptap hr.cept-divider { border-top-color: #404040; }
   .cept-editor .tiptap blockquote.cept-blockquote { border-left-color: #404040; color: #a1a1aa; }
   .cept-editor .tiptap pre.cept-code-block { background-color: #1e1e1e; }

packages/ui/src/components/editor/extensions/code-color-swatch.test.ts

@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest';
+import { CodeColorSwatch, colorSwatchPluginKey } from './code-color-swatch.js';
+
+describe('CodeColorSwatch extension', () => {
+  it('has correct name', () => {
+    expect(CodeColorSwatch.name).toBe('codeColorSwatch');
+  });
+
+  it('exports a plugin key', () => {
+    expect(colorSwatchPluginKey).toBeDefined();
+  });
+
+  it('defines ProseMirror plugins', () => {
+    expect(CodeColorSwatch.config.addProseMirrorPlugins).toBeDefined();
+  });
+
+  it('is an Extension (not a Node or Mark)', () => {
+    expect(CodeColorSwatch.type).toBe('extension');
+  });
+});

packages/ui/src/components/editor/extensions/code-color-swatch.ts

@@ -0,0 +1,78 @@
+/**
+ * CodeColorSwatch — TipTap extension that renders a small color swatch
+ * next to inline code elements whose text content is a valid CSS color value.
+ *
+ * Works like Chrome DevTools: if inline code text looks like a color
+ * (hex, rgb, hsl, named colors, etc.), a tiny colored square appears
+ * to the left of the code text.
+ *
+ * No special authoring syntax required — standard `#ff0000` inline code
+ * gets a swatch automatically.
+ */
+
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+import { detectCSSColor } from './color-utils.js';
+
+export const colorSwatchPluginKey = new PluginKey('colorSwatch');
+
+export const CodeColorSwatch = Extension.create({
+  name: 'codeColorSwatch',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: colorSwatchPluginKey,
+        state: {
+          init(_, state) {
+            return buildDecorations(state.doc);
+          },
+          apply(tr, oldDecorations) {
+            if (!tr.docChanged) return oldDecorations;
+            return buildDecorations(tr.doc);
+          },
+        },
+        props: {
+          decorations(state) {
+            return this.getState(state) ?? DecorationSet.empty;
+          },
+        },
+      }),
+    ];
+  },
+});
+
+function buildDecorations(doc: import('@tiptap/pm/model').Node): DecorationSet {
+  const decorations: Decoration[] = [];
+
+  doc.descendants((node, pos) => {
+    // We only care about text nodes that carry the "code" mark
+    if (!node.isText) return;
+
+    const codeMark = node.marks.find((m) => m.type.name === 'code');
+    if (!codeMark) return;
+
+    const text = node.text ?? '';
+    const color = detectCSSColor(text);
+    if (!color) return;
+
+    // Sanitise the color value for use in a style attribute.
+    // Only allow characters valid in CSS color values.
+    const safeColor = color.replace(/[^a-zA-Z0-9#(),.\s/%°\-+]/g, '');
+
+    // Create a widget decoration placed at the start of the code text.
+    const widget = Decoration.widget(pos, () => {
+      const swatch = document.createElement('span');
+      swatch.className = 'cept-color-swatch';
+      swatch.style.backgroundColor = safeColor;
+      swatch.setAttribute('aria-hidden', 'true');
+      swatch.contentEditable = 'false';
+      return swatch;
+    }, { side: -1, key: `swatch-${pos}-${safeColor}` });
+
+    decorations.push(widget);
+  });
+
+  return DecorationSet.create(doc, decorations);
+}

packages/ui/src/components/editor/extensions/color-utils.test.ts

@@ -0,0 +1,113 @@
+import { describe, it, expect } from 'vitest';
+import { detectCSSColor } from './color-utils.js';
+
+describe('detectCSSColor', () => {
+  describe('hex colors', () => {
+    it('detects 3-digit hex', () => {
+      expect(detectCSSColor('#fff')).toBe('#fff');
+      expect(detectCSSColor('#ABC')).toBe('#ABC');
+    });
+
+    it('detects 4-digit hex (with alpha)', () => {
+      expect(detectCSSColor('#fffa')).toBe('#fffa');
+    });
+
+    it('detects 6-digit hex', () => {
+      expect(detectCSSColor('#ff0000')).toBe('#ff0000');
+      expect(detectCSSColor('#EEAAFF')).toBe('#EEAAFF');
+    });
+
+    it('detects 8-digit hex (with alpha)', () => {
+      expect(detectCSSColor('#ff000080')).toBe('#ff000080');
+    });
+
+    it('rejects invalid hex', () => {
+      expect(detectCSSColor('#ff')).toBeNull();
+      expect(detectCSSColor('#gggggg')).toBeNull();
+      expect(detectCSSColor('#12345')).toBeNull();
+      expect(detectCSSColor('#1234567890')).toBeNull();
+    });
+  });
+
+  describe('rgb/rgba', () => {
+    it('detects rgb()', () => {
+      expect(detectCSSColor('rgb(255, 0, 0)')).toBe('rgb(255, 0, 0)');
+    });
+
+    it('detects rgba()', () => {
+      expect(detectCSSColor('rgba(255, 0, 0, 0.5)')).toBe('rgba(255, 0, 0, 0.5)');
+    });
+
+    it('detects modern rgb with slash alpha', () => {
+      expect(detectCSSColor('rgb(255 0 0 / 50%)')).toBe('rgb(255 0 0 / 50%)');
+    });
+  });
+
+  describe('hsl/hsla', () => {
+    it('detects hsl()', () => {
+      expect(detectCSSColor('hsl(0, 100%, 50%)')).toBe('hsl(0, 100%, 50%)');
+    });
+
+    it('detects hsla()', () => {
+      expect(detectCSSColor('hsla(0, 100%, 50%, 0.5)')).toBe('hsla(0, 100%, 50%, 0.5)');
+    });
+  });
+
+  describe('modern color functions', () => {
+    it('detects oklch()', () => {
+      expect(detectCSSColor('oklch(0.7 0.15 180)')).toBe('oklch(0.7 0.15 180)');
+    });
+
+    it('detects oklab()', () => {
+      expect(detectCSSColor('oklab(0.7 -0.1 0.1)')).toBe('oklab(0.7 -0.1 0.1)');
+    });
+  });
+
+  describe('named colors', () => {
+    it('detects common named colors', () => {
+      expect(detectCSSColor('red')).toBe('red');
+      expect(detectCSSColor('blue')).toBe('blue');
+      expect(detectCSSColor('cornflowerblue')).toBe('cornflowerblue');
+      expect(detectCSSColor('transparent')).toBe('transparent');
+    });
+
+    it('is case-insensitive for named colors', () => {
+      expect(detectCSSColor('Red')).toBe('Red');
+      expect(detectCSSColor('BLUE')).toBe('BLUE');
+    });
+
+    it('rejects non-color words', () => {
+      expect(detectCSSColor('hello')).toBeNull();
+      expect(detectCSSColor('function')).toBeNull();
+      expect(detectCSSColor('const')).toBeNull();
+    });
+  });
+
+  describe('whitespace handling', () => {
+    it('trims whitespace', () => {
+      expect(detectCSSColor('  #fff  ')).toBe('#fff');
+    });
+
+    it('returns null for empty string', () => {
+      expect(detectCSSColor('')).toBeNull();
+      expect(detectCSSColor('   ')).toBeNull();
+    });
+  });
+
+  describe('non-color values', () => {
+    it('rejects plain numbers', () => {
+      expect(detectCSSColor('123')).toBeNull();
+    });
+
+    it('rejects code snippets', () => {
+      expect(detectCSSColor('console.log()')).toBeNull();
+      expect(detectCSSColor('var x = 1')).toBeNull();
+    });
+
+    it('rejects partial color-like strings', () => {
+      expect(detectCSSColor('#')).toBeNull();
+      expect(detectCSSColor('rgb')).toBeNull();
+      expect(detectCSSColor('hsl(')).toBeNull();
+    });
+  });
+});

packages/ui/src/components/editor/extensions/color-utils.ts

@@ -0,0 +1,67 @@
+/**
+ * Color detection utilities for inline code swatch rendering.
+ *
+ * Detects CSS color values in text and normalises them to a format
+ * suitable for use as a CSS `background-color` value.
+ */
+
+// CSS named colors (Level 4) — lowercase for comparison
+const CSS_NAMED_COLORS = new Set([
+  'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure',
+  'beige', 'bisque', 'black', 'blanchedalmond', 'blue',
+  'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse',
+  'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson',
+  'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray',
+  'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen',
+  'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen',
+  'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise',
+  'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey',
+  'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fuchsia',
+  'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green',
+  'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo',
+  'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen',
+  'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan',
+  'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey',
+  'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue',
+  'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow',
+  'lime', 'limegreen', 'linen', 'magenta', 'maroon', 'mediumaquamarine',
+  'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen',
+  'mediumslateblue', 'mediumspringgreen', 'mediumturquoise',
+  'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose',
+  'moccasin', 'navajowhite', 'navy', 'oldlace', 'olive', 'olivedrab',
+  'orange', 'orangered', 'orchid', 'palegoldenrod', 'palegreen',
+  'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru',
+  'pink', 'plum', 'powderblue', 'purple', 'rebeccapurple', 'red',
+  'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown',
+  'seagreen', 'seashell', 'sienna', 'silver', 'skyblue', 'slateblue',
+  'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue', 'tan',
+  'teal', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'white',
+  'whitesmoke', 'yellow', 'yellowgreen', 'transparent',
+]);
+
+// Hex: #rgb, #rgba, #rrggbb, #rrggbbaa
+const HEX_RE = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+
+// Functional: rgb(), rgba(), hsl(), hsla(), oklch(), oklab(), lch(), lab(), color()
+// Deliberately permissive on inner content — we only need to know it *is* a color function.
+const FUNC_RE = /^(?:rgba?|hsla?|oklch|oklab|lch|lab|color|hwb)\(\s*[\d.,%/\s\-+a-z°]+\s*\)$/i;
+
+/**
+ * Detect whether `text` looks like a CSS color value.
+ * Returns the normalised color string suitable for `background-color`, or `null`.
+ */
+export function detectCSSColor(text: string): string | null {
+  const trimmed = text.trim();
+  if (!trimmed) return null;
+
+  // Hex colors
+  if (HEX_RE.test(trimmed)) return trimmed;
+
+  // Functional notation
+  if (FUNC_RE.test(trimmed)) return trimmed;
+
+  // Named colors (case-insensitive)
+  if (CSS_NAMED_COLORS.has(trimmed.toLowerCase())) return trimmed;
+
+  return null;
+}

packages/ui/src/components/editor/extensions/index.ts

@@ -18,3 +18,5 @@ export { Mermaid, defaultMermaidContent, mermaidExamples } from './mermaid.js';
 export type { MermaidOptions } from './mermaid.js';
 export { SlashCommand, defaultSlashCommands, filterSlashCommands, slashCommandPluginKey } from './slash-command.js';
 export type { SlashCommandItem, SlashCommandOptions } from './slash-command.js';
+export { CodeColorSwatch, colorSwatchPluginKey } from './code-color-swatch.js';
+export { detectCSSColor } from './color-utils.js';