@1agh/maude 0.28.1 → 0.30.0

package/apps/studio/client/whats-new.jsx

@@ -0,0 +1,250 @@
+// whats-new.jsx — Maude UI "What's New" surfaces.
+//
+//   useWhatsNew(version)  → headless handle (fetch + seen-state + open-state)
+//   <WhatsNewBadge>       → menubar entry point (✦ + unseen-count dot)
+//   <WhatsNewToast>       → first-run notice (bottom-left, mirrors ai-banner.tsx)
+//   <WhatsNewPanel>       → list of entries (reuses the help-modal backdrop)
+//
+// Styling lives in client/styles/4-components.css (.mdcc-wn-*). Spotlight tours
+// (entry.tour[]) land in Phase 3 — the panel/toast leave a hook for them.
+
+import { useCallback, useEffect, useState } from 'react';
+import { bestSeenVersion, computeUnseen } from './whats-new-seen.js';
+
+const WN_SEEN = 'mdcc-whatsnew-seen';
+const WN_TOAST = 'mdcc-whatsnew-toast-dismissed';
+
+// learnMore renders as <a href> in the privileged main origin. Only bind an
+// http(s) URL — belt-and-suspenders next to React's built-in URL sanitizer and
+// the schema's pattern (security review, defense-in-depth).
+function isSafeHref(url) {
+  return typeof url === 'string' && /^https?:\/\//i.test(url);
+}
+
+function readSeen(currentVersion) {
+  try {
+    const v = localStorage.getItem(WN_SEEN);
+    if (v) return v;
+    // First ever run: acknowledge the current version silently so a brand-new
+    // user isn't greeted with the entire backlog as "new". Only true upgrades
+    // (and pending dev entries) surface after this.
+    localStorage.setItem(WN_SEEN, currentVersion);
+  } catch {}
+  return currentVersion;
+}
+
+function readToastDismissed() {
+  try {
+    return localStorage.getItem(WN_TOAST);
+  } catch {
+    return null;
+  }
+}
+
+export function useWhatsNew(currentVersion) {
+  const [entries, setEntries] = useState([]);
+  const [feedVersion, setFeedVersion] = useState(currentVersion);
+  const [seenVersion, setSeenVersion] = useState(() => readSeen(currentVersion));
+  const [toastDismissed, setToastDismissed] = useState(() => readToastDismissed());
+  const [panelOpen, setPanelOpen] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch('/_api/whats-new')
+      .then((r) => r.json())
+      .then((j) => {
+        if (cancelled) return;
+        setEntries(Array.isArray(j?.entries) ? j.entries : []);
+        if (typeof j?.version === 'string') setFeedVersion(j.version);
+      })
+      .catch(() => {
+        /* offline / restart — no banner */
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const unseen = computeUnseen(entries, seenVersion);
+  const showToast = unseen.length > 0 && toastDismissed !== feedVersion && !panelOpen;
+  const toastEntry = unseen[0] ?? null;
+
+  const markAllSeen = useCallback(() => {
+    const next = bestSeenVersion(entries, feedVersion);
+    setSeenVersion(next);
+    setToastDismissed(feedVersion);
+    try {
+      localStorage.setItem(WN_SEEN, next);
+      localStorage.setItem(WN_TOAST, feedVersion);
+    } catch {}
+  }, [entries, feedVersion]);
+
+  const dismissToast = useCallback(() => {
+    setToastDismissed(feedVersion);
+    try {
+      localStorage.setItem(WN_TOAST, feedVersion);
+    } catch {}
+  }, [feedVersion]);
+
+  const openPanel = useCallback(() => setPanelOpen(true), []);
+  const closePanel = useCallback(() => {
+    setPanelOpen(false);
+    markAllSeen();
+  }, [markAllSeen]);
+
+  return {
+    entries,
+    unseen,
+    feedVersion,
+    panelOpen,
+    openPanel,
+    closePanel,
+    showToast,
+    toastEntry,
+    dismissToast,
+    markAllSeen,
+  };
+}
+
+export function WhatsNewBadge({ count = 0, onOpen }) {
+  return (
+    <button
+      type="button"
+      className="mdcc-wn-badge"
+      data-tour="whatsnew"
+      onClick={onOpen}
+      title="What's new"
+      aria-label={count > 0 ? `What's new — ${count} new` : "What's new"}
+    >
+      <span aria-hidden="true">✦</span>
+      <span className="mdcc-wn-badge__label">New</span>
+      {count > 0 && (
+        <span className="mdcc-wn-badge__dot" aria-hidden="true">
+          {count}
+        </span>
+      )}
+    </button>
+  );
+}
+
+export function WhatsNewToast({ wn }) {
+  if (!wn.showToast || !wn.toastEntry) return null;
+  const e = wn.toastEntry;
+  const total = wn.unseen.length;
+  // Plan C P6 — restyled to the maude `.st-toast` family (was `mdcc-wn-toast`),
+  // matching `.design/ui/Studio.tsx` AB-D. Behavior unchanged.
+  return (
+    <div className="st-toast" role="status" aria-live="polite">
+      <button
+        type="button"
+        className="st-toast-close"
+        aria-label="Dismiss"
+        onClick={wn.dismissToast}
+      >
+        ×
+      </button>
+      <div className="st-toast-hd">
+        <span aria-hidden="true">✦</span>
+        What's new{e.version ? ` · v${e.version}` : ''}
+      </div>
+      <div className="st-toast-title">{e.title}</div>
+      <div className="st-toast-txt">{e.summary}</div>
+      <div className="st-toast-actions">
+        <button type="button" className="btn btn--primary btn--sm" onClick={wn.openPanel}>
+          {total > 1 ? `See all (${total})` : 'Details'}
+        </button>
+        <button type="button" className="btn btn--ghost btn--sm" onClick={wn.dismissToast}>
+          Dismiss
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export function WhatsNewPanel({ wn, onStartTour }) {
+  const { panelOpen, closePanel } = wn;
+  useEffect(() => {
+    if (!panelOpen) return;
+    function onKey(e) {
+      if (e.key === 'Escape') closePanel();
+    }
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [panelOpen, closePanel]);
+
+  if (!panelOpen) return null;
+  const unseenIds = new Set(wn.unseen.map((e) => e.id));
+  return (
+    <div
+      className="help-modal-backdrop"
+      role="presentation"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) closePanel();
+      }}
+    >
+      <div
+        className="mdcc-wn-panel"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="mdcc-wn-title"
+      >
+        <header className="help-modal-hd">
+          <span className="title" id="mdcc-wn-title">
+            ✦ What’s new in maude
+          </span>
+          <button
+            type="button"
+            className="help-modal-close"
+            aria-label="Close (Esc)"
+            onClick={closePanel}
+          >
+            ×
+          </button>
+        </header>
+        <div className="mdcc-wn-panel__body">
+          {wn.entries.length === 0 ? (
+            <p className="mdcc-wn-empty">Nothing new yet.</p>
+          ) : (
+            <ul className="mdcc-wn-list">
+              {wn.entries.map((e) => (
+                <li
+                  key={e.id}
+                  className={'mdcc-wn-item' + (unseenIds.has(e.id) ? ' is-unseen' : '')}
+                >
+                  <div className="mdcc-wn-item__hd">
+                    <span className={'mdcc-wn-kind mdcc-wn-kind--' + e.kind}>{e.kind}</span>
+                    <span className="mdcc-wn-item__title">{e.title}</span>
+                    <span className="mdcc-wn-item__ver">{e.version ? `v${e.version}` : 'next'}</span>
+                  </div>
+                  <p className="mdcc-wn-item__summary">{e.summary}</p>
+                  {isSafeHref(e.learnMore) && (
+                    <a
+                      className="mdcc-wn-item__more"
+                      href={e.learnMore}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      Learn more →
+                    </a>
+                  )}
+                  {onStartTour && Array.isArray(e.tour) && e.tour.length > 0 && (
+                    <button
+                      type="button"
+                      className="mdcc-wn-item__tour"
+                      onClick={() => {
+                        closePanel();
+                        onStartTour(e.tour);
+                      }}
+                    >
+                      ▶ Take tour
+                    </button>
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/{plugins/design/dev-server → apps/studio}/commands/annotation-strokes-command.ts

@@ -1,7 +1,7 @@
 /**
  * @file       commands/annotation-strokes-command.ts — undo entry for annotation
  *             stroke add / erase / batch-translate.
- * @scope      plugins/design/dev-server/commands/annotation-strokes-command.ts
+ * @scope      apps/studio/commands/annotation-strokes-command.ts
  * @purpose    Records a `Stroke[]` pair (before/after) and routes both
  *             directions through a single `putFn`. The server endpoint is
  *             `PUT /_api/annotations` which replaces the entire SVG; we
@@ -20,7 +20,7 @@
  */
 
 import type { Stroke } from '../annotations-layer.tsx';
-import type { CommandRecord, CommandSinks, EditCommand } from '../undo-stack.ts';
+import type { CommandRecord, EditCommand } from '../undo-stack.ts';
 import { registerCommand } from '../undo-stack.ts';
 
 /**

package/{plugins/design/dev-server → apps/studio}/commands/equal-spacing-command.ts

@@ -1,7 +1,7 @@
 /**
  * @file       commands/equal-spacing-command.ts — undo label helpers for
  *             equal-spacing / align gestures.
- * @scope      plugins/design/dev-server/commands/equal-spacing-command.ts
+ * @scope      apps/studio/commands/equal-spacing-command.ts
  * @purpose    Distribute + align both call `dragBus.commitPositions(moved)`,
  *             which wraps the move in a generic MoveArtboardsCommand. Per
  *             DDR-050 the underlying command type is shared (the inverse

package/{plugins/design/dev-server → apps/studio}/commands/move-artboards-command.ts

@@ -1,6 +1,6 @@
 /**
  * @file       commands/move-artboards-command.ts — undo entry for artboard moves
- * @scope      plugins/design/dev-server/commands/move-artboards-command.ts
+ * @scope      apps/studio/commands/move-artboards-command.ts
  * @purpose    Reversible record of an artboard-layout PATCH. Pairs the full
  *             `before` and `after` layout snapshots with an injected
  *             `patchFn` (in production, `applyArtboardLayout`; in tests, a
@@ -17,7 +17,7 @@
  * stale layout.
  */
 
-import type { CommandRecord, CommandSinks, EditCommand } from '../undo-stack.ts';
+import type { CommandRecord, EditCommand } from '../undo-stack.ts';
 import { registerCommand } from '../undo-stack.ts';
 
 export interface ArtboardLayoutEntry {

package/{plugins/design/dev-server → apps/studio}/comments-overlay.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       comments-overlay.tsx — FigJam-style in-place comments overlay
- * @scope      plugins/design/dev-server/comments-overlay.tsx
+ * @scope      apps/studio/comments-overlay.tsx
  * @purpose    Renders DS-styled comment pins (Phase 6 Task 2), the in-place
  *             composer bubble (Task 3), and the thread popover (Task 4)
  *             inside the canvas iframe. Sibling to `annotations-layer` —
@@ -81,6 +81,9 @@ export interface OverlayComment {
   id: string;
   file: string;
   selector: string;
+  /** Occurrence index among `querySelectorAll(selector)` — disambiguates a
+   * component repeated within one artboard. Absent (old comments) → first. */
+  index?: number;
   bounds: OverlayBounds | null;
   text: string;
   status: 'open' | 'resolved';
@@ -138,7 +141,10 @@ function deriveFile(): string | null {
 // halo chrome at z-index 5) instead of being portaled into `.dc-world` where
 // it would lose the stacking battle.
 
-function screenRectFor(selector: string): {
+function screenRectFor(
+  selector: string,
+  index?: number
+): {
   x: number;
   y: number;
   w: number;
@@ -147,11 +153,15 @@ function screenRectFor(selector: string): {
   if (!selector) return null;
   let el: HTMLElement | null = null;
   try {
-    el = document.querySelector(selector) as HTMLElement | null;
+    // index disambiguates a component repeated within one artboard (querySelector
+    // alone would always grab the first match). Absent/0 → first.
+    const all = document.querySelectorAll(selector);
+    const i = index && index > 0 && index < all.length ? index : 0;
+    el = (all[i] ?? all[0] ?? null) as HTMLElement | null;
   } catch {
     return null;
   }
-  if (!el || !el.isConnected) return null;
+  if (!el?.isConnected) return null;
   const r = el.getBoundingClientRect();
   if (r.width === 0 && r.height === 0) return null;
   return { x: r.left, y: r.top, w: r.width, h: r.height };
@@ -194,7 +204,7 @@ export function CommentsOverlay(): React.ReactNode {
   const mirrorSelection = useCallback(
     (comment: OverlayComment | undefined) => {
       if (!selSet) return;
-      if (!comment || !comment.selector) {
+      if (!comment?.selector) {
         selSet.clear();
         return;
       }
@@ -288,7 +298,7 @@ export function CommentsOverlay(): React.ReactNode {
       const detail = (
         e as CustomEvent<{ selection?: ComposeSelection; clientX?: number; clientY?: number }>
       ).detail;
-      if (!detail || !detail.selection) return;
+      if (!detail?.selection) return;
       setComposer({
         selection: detail.selection,
         clientX: typeof detail.clientX === 'number' ? detail.clientX : 0,
@@ -316,6 +326,7 @@ export function CommentsOverlay(): React.ReactNode {
       const payload = {
         file: sel.file,
         selector: sel.selector,
+        index: sel.index,
         dom_path: sel.dom_path,
         tag: sel.tag,
         classes: sel.classes,
@@ -372,7 +383,9 @@ export function CommentsOverlay(): React.ReactNode {
   const indexById = useMemo(() => {
     const m = new Map<string, number>();
     const all = comments.slice().sort((a, b) => a.created.localeCompare(b.created));
-    all.forEach((c, i) => m.set(c.id, i + 1));
+    all.forEach((c, i) => {
+      m.set(c.id, i + 1);
+    });
     return m;
   }, [comments]);
 
@@ -453,6 +466,7 @@ export function CommentsOverlay(): React.ReactNode {
         return (
           <CommentThread
             comment={focused}
+            sequence={indexById.get(focused.id) ?? 0}
             onClose={() => {
               setFocusedId(null);
               // Drop the canvas halo when the thread closes — symmetric with
@@ -745,7 +759,7 @@ function CommentPin({
       // Live screen-coord lookup mirrors SelectionHalos in canvas-shell.tsx.
       // Falls back to stored bounds (a screen-coord capture at create time)
       // when the target element is gone — better than vanishing entirely.
-      let pos = screenRectFor(comment.selector);
+      let pos = screenRectFor(comment.selector, comment.index);
       if (!pos && comment.bounds) {
         pos = {
           x: comment.bounds.x,
@@ -772,7 +786,7 @@ function CommentPin({
     return () => {
       if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
     };
-  }, [comment.selector, comment.bounds]);
+  }, [comment.selector, comment.bounds, comment.index]);
 
   const author = comment.author?.trim() || 'unknown';
   const label = `Comment ${sequence} by ${author}`;
@@ -925,12 +939,14 @@ function CommentComposer({
 
 function CommentThread({
   comment,
+  sequence,
   onClose,
   onPatch,
   onDelete,
   onReply,
 }: {
   comment: OverlayComment;
+  sequence: number;
   onClose: () => void;
   onPatch: (patch: Record<string, unknown>) => void;
   onDelete: () => void;
@@ -1027,6 +1043,11 @@ function CommentThread({
     >
       <div className="cm-thread__head" id={headId}>
         <div className="cm-thread__head-row">
+          {/* Plan C P18 — pin/sequence badge in the popover header (parity with
+              `.design/ui/Studio.tsx` thread popover). */}
+          <span className="cm-thread__seq" aria-hidden="true">
+            {sequence}
+          </span>
           <span className="cm-thread__author">{comment.author?.trim() || 'unknown'}</span>
           <span className="cm-thread__time">{formatRelativeTime(comment.created)}</span>
           <button
@@ -1159,7 +1180,7 @@ function computeThreadAnchor(comment: OverlayComment): { x: number; y: number }
   // Resolve target's live screen rect; popover drops below the pin with small
   // breathing room. Stored bounds (capture-time screen coords) are the
   // last-resort fallback for orphaned pins.
-  const rect = comment.selector ? screenRectFor(comment.selector) : null;
+  const rect = comment.selector ? screenRectFor(comment.selector, comment.index) : null;
   if (rect) {
     // Pin sits at (rect.right - 12, rect.top - 12). Place popover at the same
     // x for visual continuity, 16px below the top so it clears the pin.
@@ -1184,7 +1205,7 @@ function computeAnchor(state: ComposerState): { x: number; y: number } {
     return { x: state.clientX, y: state.clientY + 8 };
   }
   if (state.selection.selector) {
-    const rect = screenRectFor(state.selection.selector);
+    const rect = screenRectFor(state.selection.selector, state.selection.index);
     if (rect) {
       return { x: rect.x, y: rect.y + rect.h + 8 };
     }

package/{plugins/design/dev-server → apps/studio}/context-menu.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       context-menu.tsx — Phase 4.1 right-click context menu
- * @scope      plugins/design/dev-server/context-menu.tsx
+ * @scope      apps/studio/context-menu.tsx
  * @purpose    Floating, context-aware right-click menu. The router calls
  *             `openContextMenu({ clientX, clientY, target })`; the menu
  *             resolves the section list via the ContextRegistry and renders
@@ -237,7 +237,9 @@ const MENU_CSS = `
 .dc-context-menu .dc-menu-flyout.is-flip { left: auto; right: calc(100% + 3px); }
 `.trim();
 
-function ensureMenuStyles(): void {
+// Exported (FigJam v3) — the annotation layer's right-click menu reuses the
+// same .dc-context-menu visual language without duplicating the stylesheet.
+export function ensureMenuStyles(): void {
   if (typeof document === 'undefined') return;
   if (document.getElementById('dc-context-menu-css')) return;
   const s = document.createElement('style');
@@ -342,7 +344,7 @@ function ContextMenuView({
           el.querySelectorAll<HTMLButtonElement>('button.dc-menu-item:not([disabled])')
         );
         if (items.length === 0) return;
-        const idx = items.findIndex((b) => b === document.activeElement);
+        const idx = items.indexOf(document.activeElement);
         const nextIdx =
           e.key === 'ArrowDown'
             ? (idx + 1) % items.length
@@ -368,7 +370,6 @@ function ContextMenuView({
       {sections.map((section, si) => {
         const sectionKey = section.map((i) => i.id).join('|') || `s${si}`;
         return (
-          // biome-ignore lint/a11y/useSemanticElements: ARIA group within role="menu"; no native equivalent.
           <div key={sectionKey} role="group">
             {si > 0 ? <div className="dc-menu-sep" aria-hidden="true" /> : null}
             {section.map((item) => (

package/{plugins/design/dev-server → apps/studio}/contextual-toolbar.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       contextual-toolbar.tsx — T30 (Wave 3)
- * @scope      plugins/design/dev-server/contextual-toolbar.tsx
+ * @scope      apps/studio/contextual-toolbar.tsx
  * @purpose    Selection-anchored floating chrome for ELEMENT selections
  *             (cd-id entries in the selection set). Mirrors the
  *             MultiArtboardToolbar pattern but scopes to user content inside
@@ -30,6 +30,7 @@
 
 import { useEffect, useRef } from 'react';
 
+import { resolveSelectionEl } from './dom-selection.ts';
 import { useSelectionSet } from './use-selection-set.tsx';
 
 const CTX_TOOLBAR_CSS = `
@@ -159,9 +160,7 @@ export function ContextualToolbar() {
       let yMax = Number.NEGATIVE_INFINITY;
       let any = false;
       for (const sel of elementSelections) {
-        const node = sel.id
-          ? document.querySelector(`[data-cd-id="${sel.id}"]`)
-          : document.querySelector(sel.selector);
+        const node = resolveSelectionEl(document, sel);
         if (!node) continue;
         const r = (node as HTMLElement).getBoundingClientRect();
         if (r.width === 0 && r.height === 0) continue;
@@ -208,6 +207,20 @@ export function ContextualToolbar() {
   return (
     <div ref={ref} className="dc-elem-ctx-tb" role="toolbar" aria-label="Element actions">
       <span className="dc-elem-ctx-count">{count === 1 ? '1 element' : `${count} elements`}</span>
+      <button
+        type="button"
+        title="Inspect — open the right panel (Inspect / Layers / CSS)"
+        onClick={() => {
+          // Phase 12 — open the shell's Inspector on the current selection.
+          try {
+            window.parent.postMessage({ dgn: 'open-inspector' }, '*');
+          } catch {
+            /* detached / cross-origin */
+          }
+        }}
+      >
+        Inspect
+      </button>
       <button
         type="button"
         title="Copy CSS selector"
@@ -228,9 +241,7 @@ export function ContextualToolbar() {
         title="Add comment on this element"
         onClick={() => {
           if (!primary) return;
-          const node = primary.id
-            ? document.querySelector(`[data-cd-id="${primary.id}"]`)
-            : document.querySelector(primary.selector);
+          const node = resolveSelectionEl(document, primary);
           openComposerForSelection(primary, node);
         }}
       >

package/{plugins/design/dev-server → apps/studio}/cursors-overlay.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       cursors-overlay.tsx — foreign peer cursors rendered on the canvas
- * @scope      plugins/design/dev-server/cursors-overlay.tsx
+ * @scope      apps/studio/cursors-overlay.tsx
  * @purpose    Renders one colored SVG arrow + name label per foreign peer at
  *             their published world coords, transformed through the local
  *             viewport so the cursor anchors to canvas content (not to my
@@ -43,24 +43,28 @@ const CURSOR_CSS = `
 }
 .dc-cursor-arrow {
   display: block;
-  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
+  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
 }
+/* DS colors-presence .cur-label recipe — hue pill, mono 10px, dark
+ * accent-fg text (never white-on-hue, which washed out on light hues).
+ * NOTE: keep this comment backtick-free — it lives inside the CURSOR_CSS
+ * template literal and a stray backtick closes it. */
 .dc-cursor-label {
   position: absolute;
-  top: 18px;
-  left: 14px;
-  padding: 2px 6px;
-  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
+  /* specimen geometry: the pill hangs below-right of the 15px triangle */
+  top: 14px;
+  left: 10px;
+  padding: 1px 8px;
+  font-family: var(--font-mono, ui-monospace, monospace);
   font-weight: 500;
-  font-size: 11px;
-  line-height: 1.2;
-  color: var(--maude-hud-accent-fg, #fff);
-  border-radius: var(--radius-sm, 2px);
+  font-size: 10px;
+  line-height: 1.4;
+  color: var(--maude-hud-accent-fg, oklch(0.180 0.030 268));
+  border-radius: 999px;
   white-space: nowrap;
   max-width: 180px;
   overflow: hidden;
   text-overflow: ellipsis;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 .dc-peer-selection {
   position: absolute;
@@ -117,20 +121,16 @@ const Cursor = memo(function Cursor({ peer, viewport }: CursorProps): JSX.Elemen
   const screenY = peer.cursor.y * viewport.zoom + viewport.y;
   return (
     <div className="dc-cursor" style={{ transform: `translate(${screenX}px, ${screenY}px)` }}>
+      {/* DS colors-presence Pointer — one plain triangle glyph, tinted by its
+          owner (the specimen's exact 24-grid path, no tail/notch). */}
       <svg
         className="dc-cursor-arrow"
-        width="20"
-        height="22"
-        viewBox="0 0 20 22"
+        width="15"
+        height="15"
+        viewBox="0 0 24 24"
         aria-hidden="true"
       >
-        <path
-          d="M 2 2 L 2 18 L 6 14 L 9 21 L 12 20 L 9 13 L 14 13 Z"
-          fill={peer.color}
-          stroke="#fff"
-          strokeWidth="1.2"
-          strokeLinejoin="round"
-        />
+        <path d="M4 3 L20 11.5 L12.5 13 L10 21 Z" fill={peer.color} />
       </svg>
       <div className="dc-cursor-label" style={{ background: peer.color }}>
         {peer.name}