@1agh/maude 0.19.1 → 0.21.0

package/plugins/design/dev-server/input-router.tsx

@@ -29,6 +29,30 @@
 
 import { type RefObject, useEffect } from 'react';
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Drag-vs-click threshold (T25)
+//
+// 4 px screen-pixel hypot separates "click" from "drag" — Microsoft Win32
+// canonical (`SM_CXDRAG`/`SM_CYDRAG` default), also d3-drag and tldraw default.
+// Owned here so artboard-drag, artboard-marquee, element-marquee, annotation-
+// drag-vs-tap, and any future drag-class gesture all read the same constant.
+// Wheel + pinch-zoom are EXEMPT — threshold is for `pointerdown → pointermove`
+// drag classification only.
+
+export const DRAG_THRESHOLD_PX = 4;
+
+/** True once the pointer has moved ≥ DRAG_THRESHOLD_PX from its start. */
+export function crossedDragThreshold(
+  startX: number,
+  startY: number,
+  curX: number,
+  curY: number
+): boolean {
+  const dx = curX - startX;
+  const dy = curY - startY;
+  return Math.hypot(dx, dy) >= DRAG_THRESHOLD_PX;
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Types
 
@@ -68,7 +92,9 @@ export type RouterAction =
   | { kind: 'drop-comment'; clientX: number; clientY: number }
   | { kind: 'context-menu'; clientX: number; clientY: number }
   | { kind: 'tool'; tool: Tool }
-  | { kind: 'escape' };
+  | { kind: 'escape' }
+  | { kind: 'undo' }
+  | { kind: 'redo' };
 
 export interface ClassifyInput {
   type: 'pointermove' | 'pointerdown' | 'contextmenu' | 'keydown';
@@ -101,6 +127,15 @@ export function classify(input: ClassifyInput): RouterAction {
     if (input.metaKey || input.ctrlKey || input.altKey) {
       // Esc with modifiers still dismisses.
       if (input.key === 'Escape') return { kind: 'escape' };
+      // Undo / redo (Phase 20). Alt is reserved — Cmd+Opt+Z is a browser
+      // text-input gesture we don't claim. `metaKey || ctrlKey` covers both
+      // mac and Windows / Linux without a platform sniff.
+      const k = (input.key || '').toLowerCase();
+      if (!input.altKey && (input.metaKey || input.ctrlKey)) {
+        if (k === 'z' && input.shiftKey) return { kind: 'redo' };
+        if (k === 'z') return { kind: 'undo' };
+        if (k === 'y' && !input.shiftKey) return { kind: 'redo' };
+      }
       return { kind: 'no-op' };
     }
     const k = (input.key || '').toLowerCase();
@@ -218,6 +253,10 @@ export interface RouterCallbacks {
   onContextMenu?: (a: Extract<RouterAction, { kind: 'context-menu' }>) => void;
   onTool?: (a: Extract<RouterAction, { kind: 'tool' }>) => void;
   onEscape?: () => void;
+  /** Phase 20 — Cmd+Z / Ctrl+Z. */
+  onUndo?: () => void;
+  /** Phase 20 — Cmd+Shift+Z / Ctrl+Y / Cmd+Y. */
+  onRedo?: () => void;
 }
 
 export interface UseInputRouterOptions {
@@ -283,6 +322,12 @@ export function useInputRouter(opts: UseInputRouterOptions): void {
         case 'escape':
           callbacks.onEscape?.();
           break;
+        case 'undo':
+          callbacks.onUndo?.();
+          break;
+        case 'redo':
+          callbacks.onRedo?.();
+          break;
         case 'no-op':
           break;
       }
@@ -404,7 +449,12 @@ export function useInputRouter(opts: UseInputRouterOptions): void {
         isEditable: isEditableTarget(e.target),
         activeTool: getActiveTool(),
       });
-      if (action.kind === 'tool' || action.kind === 'escape') {
+      if (
+        action.kind === 'tool' ||
+        action.kind === 'escape' ||
+        action.kind === 'undo' ||
+        action.kind === 'redo'
+      ) {
         e.preventDefault();
       }
       dispatch(action);

package/plugins/design/dev-server/marquee-overlay.tsx

@@ -0,0 +1,282 @@
+/**
+ * @file       marquee-overlay.tsx — T26 (Wave 3)
+ * @scope      plugins/design/dev-server/marquee-overlay.tsx
+ * @purpose    Element-level marquee selection. Drag from empty padding inside
+ *             an artboard body (NOT on top of a `[data-cd-id]` element) to
+ *             lasso multiple stamped elements. Aseprite modifier vocabulary:
+ *             bare = replace, Shift = add, Alt = subtract, Shift+Alt =
+ *             intersect. Modifier state re-read at pointerup so the user can
+ *             flip mid-drag.
+ *
+ *             Co-exists with `artboard-marquee.tsx` — that overlay triggers
+ *             when pointerdown lands OUTSIDE any artboard (empty world);
+ *             this overlay triggers when pointerdown lands INSIDE an artboard
+ *             body on padding (no cd-id under cursor). The two are mutually
+ *             exclusive by start position.
+ *
+ *             Renders the marquee rect per DDR-046 rev 2:
+ *                 1 px solid accent + 8 % accent fill
+ *             (same idiom as artboard marquee — active gesture is solid +
+ *             tinted; dashed reserved for persistent group bbox.)
+ */
+
+import { useEffect, useRef } from 'react';
+
+import { DRAG_THRESHOLD_PX } from './input-router.tsx';
+import { type Selection, useSelectionSet } from './use-selection-set.tsx';
+import { useToolMode } from './use-tool-mode.tsx';
+
+const ELEM_MARQUEE_CSS = `
+.dc-cv-elem-marquee {
+  position: fixed;
+  pointer-events: none;
+  z-index: 5;
+  border: 1px solid var(--maude-hud-accent, #0d99ff);
+  background: color-mix(in oklab, var(--maude-hud-accent, #0d99ff) 8%, transparent);
+  display: none;
+}
+`.trim();
+
+function ensureMarqueeStyles(): void {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById('dc-cv-elem-marquee-css')) return;
+  const s = document.createElement('style');
+  s.id = 'dc-cv-elem-marquee-css';
+  s.textContent = ELEM_MARQUEE_CSS;
+  document.head.appendChild(s);
+}
+
+// Skip the same chrome / overlay surfaces as artboard-marquee — the user is
+// interacting with floating UI, not the world.
+function isChromeTarget(t: EventTarget | null): boolean {
+  if (!t || !(t as Element).closest) return true;
+  const el = t as Element;
+  if (
+    el.closest(
+      '.dc-mm, .dc-zoom-tb, .dc-tool-palette, .dc-context-menu, .dc-cv-halo, .dc-cv-group-bbox, .cm-composer, .cm-thread, .cm-mention-popup, .cm-pin, .dc-annot-svg, .dc-annot-ctx, .dc-tp-popover, .dc-annot-resize-handle, .dc-multi-artboard-tb, .dc-elem-ctx-tb, .dc-cv-eq-spacing-layer'
+    )
+  ) {
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Walk from `hit` upward and decide if the pointerdown landed on "empty body
+ * padding" (no `[data-cd-id]` encountered before reaching `.dc-artboard-body`).
+ * Returns the body element when yes; null when the pointerdown should not
+ * start an element marquee.
+ */
+function resolveBodyOrNull(hit: Element): Element | null {
+  let cur: Element | null = hit;
+  while (cur) {
+    if (cur.hasAttribute?.('data-cd-id')) return null; // on user content
+    if ((cur as HTMLElement).classList?.contains('dc-artboard-body')) return cur;
+    cur = cur.parentElement;
+  }
+  return null;
+}
+
+/**
+ * Mode resolved from the current modifier state. Re-read at pointerup so a
+ * user can flip mid-drag — e.g. start without modifiers, press Shift before
+ * releasing, the gesture commits as `add` instead of `replace`.
+ */
+type Mode = 'replace' | 'add' | 'subtract' | 'intersect';
+
+function modeOf(e: { shiftKey: boolean; altKey: boolean }): Mode {
+  if (e.shiftKey && e.altKey) return 'intersect';
+  if (e.shiftKey) return 'add';
+  if (e.altKey) return 'subtract';
+  return 'replace';
+}
+
+/**
+ * Build a minimal `Selection` from a `[data-cd-id]` element — just the fields
+ * downstream consumers actually read for bulk marquee hits. The rich shape
+ * (html, dom_path, text) is only enriched when a single click sets focus
+ * through `hoverTargetToSelection`.
+ */
+function elementToSelection(el: Element, bodyAncestor: Element): Selection | null {
+  const cdId = el.getAttribute('data-cd-id');
+  if (!cdId) return null;
+  const artboardEl = bodyAncestor.closest('[data-dc-screen]');
+  const artboardId = artboardEl?.getAttribute('data-dc-screen') ?? null;
+  const rect = (el as HTMLElement).getBoundingClientRect();
+  return {
+    id: cdId,
+    selector: `[data-cd-id="${cdId}"]`,
+    artboardId,
+    tag: el.tagName.toLowerCase(),
+    classes: (el.getAttribute('class') ?? '')
+      .trim()
+      .split(/\s+/)
+      .filter((c) => c && !c.startsWith('dgn-') && !c.startsWith('dc-cv-'))
+      .join(' '),
+    bounds: {
+      x: Math.round(rect.left),
+      y: Math.round(rect.top),
+      w: Math.round(rect.width),
+      h: Math.round(rect.height),
+    },
+  };
+}
+
+function rectsIntersect(
+  a: { left: number; top: number; right: number; bottom: number },
+  b: { left: number; top: number; right: number; bottom: number }
+): boolean {
+  if (a.right < b.left || a.left > b.right) return false;
+  if (a.bottom < b.top || a.top > b.bottom) return false;
+  return true;
+}
+
+export function ElementMarqueeOverlay() {
+  ensureMarqueeStyles();
+  const selSet = useSelectionSet();
+  const { tool } = useToolMode();
+  const overlayRef = useRef<HTMLDivElement | null>(null);
+  const stateRef = useRef<{
+    pointerId: number;
+    startX: number;
+    startY: number;
+    crossed: boolean;
+    bodyEl: Element;
+    /** Snapshot of `selSet.selected` at gesture start — needed for subtract /
+     *  intersect / add to compute deltas against the original set. */
+    startSet: Selection[];
+  } | null>(null);
+
+  useEffect(() => {
+    if (tool !== 'move') return;
+    if (typeof document === 'undefined') return;
+
+    const onDown = (e: PointerEvent) => {
+      if (e.button !== 0) return;
+      // Cmd / Ctrl reserved for single-element select (Cmd-click). Never start
+      // an element marquee when those are held — that gesture means "select
+      // the single element under cursor."
+      if (e.metaKey || e.ctrlKey) return;
+      const target = e.target as Element | null;
+      if (!target || isChromeTarget(target)) return;
+      const bodyEl = resolveBodyOrNull(target);
+      if (!bodyEl) return; // either over user content or outside any artboard
+      stateRef.current = {
+        pointerId: e.pointerId,
+        startX: e.clientX,
+        startY: e.clientY,
+        crossed: false,
+        bodyEl,
+        startSet: selSet.selected.slice(),
+      };
+    };
+
+    const onMove = (e: PointerEvent) => {
+      const s = stateRef.current;
+      if (!s || e.pointerId !== s.pointerId) return;
+      const dx = e.clientX - s.startX;
+      const dy = e.clientY - s.startY;
+      if (!s.crossed) {
+        if (Math.hypot(dx, dy) < DRAG_THRESHOLD_PX) return;
+        s.crossed = true;
+      }
+      const div = overlayRef.current;
+      if (!div) return;
+      const left = Math.min(s.startX, e.clientX);
+      const top = Math.min(s.startY, e.clientY);
+      div.style.display = 'block';
+      div.style.left = `${left}px`;
+      div.style.top = `${top}px`;
+      div.style.width = `${Math.abs(dx)}px`;
+      div.style.height = `${Math.abs(dy)}px`;
+    };
+
+    const finish = (e: PointerEvent) => {
+      const s = stateRef.current;
+      if (!s || e.pointerId !== s.pointerId) return;
+      stateRef.current = null;
+      const div = overlayRef.current;
+      if (div) div.style.display = 'none';
+      if (!s.crossed) return;
+
+      const left = Math.min(s.startX, e.clientX);
+      const top = Math.min(s.startY, e.clientY);
+      const right = Math.max(s.startX, e.clientX);
+      const bottom = Math.max(s.startY, e.clientY);
+      const marqueeBox = { left, top, right, bottom };
+
+      // Intersect against every stamped element inside the originating
+      // artboard body. Scoping to the start body is intentional — drags
+      // that extend across artboards still only capture from the artboard
+      // the gesture started in. Cross-artboard marquee is an unimplemented
+      // affordance (no peer tool ships it; users rely on multi-artboard
+      // distribute + per-artboard marquees).
+      const stamped = s.bodyEl.querySelectorAll('[data-cd-id]');
+      const hits: Selection[] = [];
+      for (const el of stamped) {
+        const b = (el as HTMLElement).getBoundingClientRect();
+        if (b.width === 0 && b.height === 0) continue;
+        if (!rectsIntersect(marqueeBox, b)) continue;
+        const sel = elementToSelection(el, s.bodyEl);
+        if (sel) hits.push(sel);
+      }
+
+      const mode = modeOf(e);
+      applyMarqueeMode(selSet, mode, s.startSet, hits);
+    };
+
+    document.addEventListener('pointerdown', onDown, true);
+    document.addEventListener('pointermove', onMove);
+    document.addEventListener('pointerup', finish);
+    document.addEventListener('pointercancel', finish);
+    return () => {
+      document.removeEventListener('pointerdown', onDown, true);
+      document.removeEventListener('pointermove', onMove);
+      document.removeEventListener('pointerup', finish);
+      document.removeEventListener('pointercancel', finish);
+    };
+  }, [tool, selSet]);
+
+  return <div ref={overlayRef} className="dc-cv-elem-marquee" aria-hidden="true" />;
+}
+
+/**
+ * Apply marquee hits to `selSet` per Aseprite modifier semantics. Pulled out
+ * of the hook for unit-test reachability.
+ */
+export function applyMarqueeMode(
+  selSet: {
+    replace: (s: Selection | Selection[]) => void;
+    add: (s: Selection | Selection[]) => void;
+  },
+  mode: Mode,
+  startSet: Selection[],
+  hits: Selection[]
+): void {
+  if (mode === 'replace') {
+    if (hits.length === 0) return; // empty marquee preserves selection
+    selSet.replace(hits);
+    return;
+  }
+  if (mode === 'add') {
+    if (hits.length === 0) return;
+    selSet.add(hits);
+    return;
+  }
+  if (mode === 'subtract') {
+    const keyOf = (x: Selection) => (x.id ? `id:${x.id}` : `sel:${x.selector}`);
+    const removeKeys = new Set(hits.map(keyOf));
+    const next = startSet.filter((x) => !removeKeys.has(keyOf(x)));
+    selSet.replace(next);
+    return;
+  }
+  // intersect
+  const keyOf = (x: Selection) => (x.id ? `id:${x.id}` : `sel:${x.selector}`);
+  const hitKeys = new Set(hits.map(keyOf));
+  const next = startSet.filter((x) => hitKeys.has(keyOf(x)));
+  selSet.replace(next);
+}
+
+// Re-export for tests.
+export { modeOf };
+export type { Mode };

package/plugins/design/dev-server/participants-chrome.tsx

@@ -0,0 +1,261 @@
+/**
+ * @file       participants-chrome.tsx — top-right avatar stack of live peers
+ * @scope      plugins/design/dev-server/participants-chrome.tsx
+ * @purpose    Phase 8 Task 6 — show who's currently on the canvas. Colored
+ *             initials in a circle per peer, with a popover for full name +
+ *             "Follow" button. Follow mode publishes `followTarget` on my
+ *             Awareness; a separate effect pulls the target's viewport on
+ *             every update and calls controller.setViewport, snapping my pan
+ *             + zoom to theirs in lockstep.
+ *
+ * Follow semantics — soft and one-way. The target peer doesn't know they're
+ * being followed (no UI, no Awareness echo). Either party panning the canvas
+ * breaks nothing on the other end; I just keep mirroring until I click my
+ * own avatar to release. tldraw-style.
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { useViewportControllerContext } from './canvas-lib.tsx';
+import { type ForeignAwareness, useCollab, useForeignAwareness } from './use-collab.tsx';
+
+const CHROME_CSS = `
+.dc-participants {
+  position: fixed;
+  top: 12px;
+  right: 12px;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  pointer-events: auto;
+  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
+}
+.dc-participant {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  color: var(--maude-hud-accent-fg, #fff);
+  border: 1.5px solid var(--bg-0, #fff);
+  margin-left: -6px;
+  cursor: pointer;
+  position: relative;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
+  user-select: none;
+  transition: transform 120ms ease, z-index 0ms 120ms;
+}
+.dc-participant:first-child { margin-left: 0; }
+.dc-participant:hover {
+  transform: scale(1.06);
+  z-index: 10;
+  transition-delay: 0ms;
+}
+.dc-participant:focus-visible {
+  outline: 2px solid var(--maude-hud-accent, oklch(56% 0.170 50));
+  outline-offset: 2px;
+}
+.dc-participant--following {
+  outline: 1.5px solid var(--maude-hud-accent, oklch(56% 0.170 50));
+  outline-offset: 1.5px;
+}
+.dc-participant-popover {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  min-width: 168px;
+  padding: 10px 12px;
+  background: var(--bg-1, #fff);
+  color: var(--fg-0, #111);
+  border: 1px solid var(--border-default, rgba(0,0,0,0.16));
+  border-radius: var(--radius-md, 4px);
+  font-size: 12px;
+  line-height: 1.35;
+  white-space: nowrap;
+  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
+  z-index: 11;
+}
+.dc-participant-popover__name {
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--fg-0, #111);
+  letter-spacing: 0.01em;
+}
+.dc-participant-popover__btn {
+  display: inline-block;
+  padding: 4px 10px;
+  background: var(--maude-hud-accent, oklch(56% 0.170 50));
+  color: var(--maude-hud-accent-fg, #fff);
+  border: none;
+  border-radius: var(--radius-sm, 2px);
+  font-family: inherit;
+  font-weight: 500;
+  font-size: 11px;
+  line-height: 1.3;
+  cursor: pointer;
+  letter-spacing: 0.02em;
+}
+.dc-participant-popover__btn:hover { background: var(--maude-hud-accent-hover, var(--maude-hud-accent, oklch(50% 0.170 50))); }
+.dc-participant-popover__btn--stop {
+  background: var(--bg-3, #e5e5e5);
+  color: var(--fg-0, #111);
+  border: 1px solid var(--border-subtle, rgba(0,0,0,0.12));
+}
+.dc-participant-popover__btn--stop:hover { background: var(--bg-4, #d8d8d8); }
+@media (prefers-reduced-motion: reduce) {
+  .dc-participant { transition: none; }
+}
+`.trim();
+
+function ensureChromeStyles(): void {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById('dc-participants-css')) return;
+  const s = document.createElement('style');
+  s.id = 'dc-participants-css';
+  s.textContent = CHROME_CSS;
+  document.head.appendChild(s);
+}
+
+function initialsFor(name: string): string {
+  const cleaned = name.trim();
+  if (!cleaned) return '?';
+  const parts = cleaned.split(/\s+/).filter(Boolean);
+  const first = parts[0] ?? '';
+  if (parts.length === 1) return first.slice(0, 2).toUpperCase();
+  const second = parts[1] ?? '';
+  return ((first[0] ?? '') + (second[0] ?? '')).toUpperCase();
+}
+
+interface AvatarProps {
+  peer: ForeignAwareness;
+  isFollowing: boolean;
+  onToggleFollow: (clientID: number) => void;
+}
+
+function Avatar({ peer, isFollowing, onToggleFollow }: AvatarProps): JSX.Element {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDocClick = (e: MouseEvent) => {
+      if (!rootRef.current) return;
+      if (!rootRef.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', onDocClick);
+    return () => document.removeEventListener('mousedown', onDocClick);
+  }, [open]);
+
+  return (
+    <div
+      ref={rootRef}
+      className={`dc-participant${isFollowing ? ' dc-participant--following' : ''}`}
+      style={{ background: peer.color }}
+      onClick={() => setOpen((v) => !v)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          setOpen((v) => !v);
+        }
+      }}
+      // biome-ignore lint/a11y/useSemanticElements: 28px round chip needs raw <div> + inline bg + custom focus ring; <button> reset is more code than the rule saves.
+      role="button"
+      tabIndex={0}
+      title={peer.name}
+      aria-label={peer.name}
+      aria-expanded={open}
+    >
+      {initialsFor(peer.name)}
+      {open && (
+        // biome-ignore lint/a11y/useKeyWithClickEvents: stop-propagation wrapper; keyboard focus stays in the button child.
+        // biome-ignore lint/a11y/useSemanticElements: popover wrapper carries no semantic role; the inner <button> is the actionable element.
+        <div className="dc-participant-popover" onClick={(e) => e.stopPropagation()}>
+          <div className="dc-participant-popover__name">{peer.name}</div>
+          <button
+            type="button"
+            className={`dc-participant-popover__btn${isFollowing ? ' dc-participant-popover__btn--stop' : ''}`}
+            onClick={() => {
+              onToggleFollow(peer.clientID);
+              setOpen(false);
+            }}
+          >
+            {isFollowing ? 'Stop following' : `Follow ${peer.name.split(/\s+/)[0]}`}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function ParticipantsChrome(): JSX.Element | null {
+  ensureChromeStyles();
+  const collab = useCollab();
+  const peers = useForeignAwareness();
+  const controller = useViewportControllerContext();
+
+  const [followTarget, setFollowTarget] = useState<number | null>(null);
+
+  const onToggleFollow = useCallback(
+    (clientID: number) => {
+      setFollowTarget((prev) => (prev === clientID ? null : clientID));
+      if (collab) {
+        collab.publishAwareness({
+          selection: collab.awareness.getLocalState()?.selection ?? null,
+        });
+        // Tag follow target as an Awareness key so Phase 9 follow-back UIs
+        // can read it; not currently used by anything else.
+        const state = collab.awareness.getLocalState() ?? {};
+        collab.awareness.setLocalState({
+          ...state,
+          followTarget: clientID === followTarget ? null : clientID,
+        });
+      }
+    },
+    [collab, followTarget]
+  );
+
+  // Apply follow — when followTarget is set, mirror the target's viewport
+  // onto our local controller. Each peer-Awareness update re-fires this; we
+  // skip when the viewport hasn't actually changed (saves a controller write).
+  const lastAppliedRef = useRef<{ x: number; y: number; zoom: number } | null>(null);
+  useEffect(() => {
+    if (followTarget === null) {
+      lastAppliedRef.current = null;
+      return;
+    }
+    if (!controller) return;
+    const target = peers.find((p) => p.clientID === followTarget);
+    if (!target) {
+      // Target peer disconnected; release follow.
+      setFollowTarget(null);
+      return;
+    }
+    const v = target.viewport;
+    const last = lastAppliedRef.current;
+    if (last && last.x === v.x && last.y === v.y && last.zoom === v.zoom) return;
+    lastAppliedRef.current = { x: v.x, y: v.y, zoom: v.zoom };
+    controller.setViewport(v);
+  }, [controller, followTarget, peers]);
+
+  if (peers.length === 0) return null;
+
+  return (
+    <div className="dc-participants" aria-label="Active collaborators">
+      {peers.map((p) => (
+        <Avatar
+          key={p.clientID}
+          peer={p}
+          isFollowing={followTarget === p.clientID}
+          onToggleFollow={onToggleFollow}
+        />
+      ))}
+    </div>
+  );
+}
+
+export { initialsFor };

package/plugins/design/dev-server/runtime-bundle.ts

@@ -53,6 +53,21 @@ export const RUNTIME_PACKAGES = [
   // (DDR-024 deferred path) and any high-end designer-tool overlays a canvas
   // wants to draw via WebGL.
   'pixi.js',
+  // Phase 3.7 / DDR-049 — Motion One (motion/react) is the canonical motion
+  // library for the canvas-lib + handoff pipeline. Externalised here so the
+  // canvas-lib motion helpers (<MotionDemo>, etc.) resolve through the same
+  // importmap path; consumers of /design:handoff still see a "motion" peer
+  // dep declaration on the registry-item.json output.
+  'motion',
+  'motion/react',
+  // Phase 8 / DDR-051 — Yjs + y-protocols for the canvas-shell collab client.
+  // Each canvas iframe opens a WS to /_ws/collab/:slug and owns a per-iframe
+  // Y.Doc + Awareness instance. Externalised here so the client-side
+  // use-collab.tsx + cursors-overlay.tsx resolve via the importmap; canvases
+  // that don't use collab pay zero bundle cost (tree-shaken).
+  'yjs',
+  'y-protocols/sync',
+  'y-protocols/awareness',
 ] as const;
 
 export type RuntimePackage = (typeof RUNTIME_PACKAGES)[number];