@1agh/maude 0.19.1 → 0.21.0

package/plugins/design/dev-server/canvas-shell.tsx

@@ -36,6 +36,7 @@ import {
   useState,
 } from 'react';
 
+import { AiBanner } from './ai-banner.tsx';
 import { AnnotationsLayer } from './annotations-layer.tsx';
 import { ArtboardMarqueeOverlay } from './artboard-marquee.tsx';
 import {
@@ -46,6 +47,7 @@ import {
   useDragStateContext,
   useViewportControllerContext,
 } from './canvas-lib.tsx';
+import { type AlignMode, alignLabel, equalSpacingLabel } from './commands/equal-spacing-command.ts';
 import { CommentsOverlay } from './comments-overlay.tsx';
 import {
   ContextMenuProvider,
@@ -55,16 +57,27 @@ import {
   type MenuItem,
   useContextMenu,
 } from './context-menu.tsx';
+import { ContextualToolbar } from './contextual-toolbar.tsx';
+import { CursorsOverlay } from './cursors-overlay.tsx';
+import { EqualSpacingHandles } from './equal-spacing-handles.tsx';
 import { ExportDialogProvider } from './export-dialog.tsx';
 import { type HoverTarget, resolveHoverTarget, useInputRouter } from './input-router.tsx';
+import { ElementMarqueeOverlay } from './marquee-overlay.tsx';
+import { ParticipantsChrome } from './participants-chrome.tsx';
 import { ToolPalette } from './tool-palette.tsx';
+import { UndoHud } from './undo-hud.tsx';
 import {
   AnnotationSelectionProvider,
   useAnnotationSelection,
+  useAnnotationSelectionOptional,
 } from './use-annotation-selection.tsx';
 import { AnnotationsVisibilityProvider } from './use-annotations-visibility.tsx';
+import { useCollab } from './use-collab.tsx';
+import { useCursorModifiers } from './use-cursor-modifiers.tsx';
+import { useKeyboardDiscipline } from './use-keyboard-discipline.tsx';
 import { type Selection, SelectionSetProvider, useSelectionSet } from './use-selection-set.tsx';
 import { useToolMode } from './use-tool-mode.tsx';
+import { useUndoStack } from './use-undo-stack.tsx';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Styles — halos render as `position: fixed` siblings of the canvas. Reading
@@ -73,6 +86,28 @@ import { useToolMode } from './use-tool-mode.tsx';
 // plane would otherwise scale a 2 px outline to 0.84 px at 42 % zoom (subpixel
 // = invisible). No per-element class stamping is used.
 
+// HUD-namespace token block. System-review 2026-05-27 (D-4) flagged that the
+// dev-server chrome (toolbar + minimap + halos + marquee + AI banner) used
+// `var(--accent, …)` which inherited the canvas DS palette — a violet StudyFi
+// canvas turned the floating cursor toolbar violet. The HUD owns its own
+// `--maude-hud-*` token family, set on `:root` of the canvas iframe document
+// here. Canvas DSs do NOT define `--maude-hud-*`, so HUD CSS resolves against
+// this block regardless of what the imported `:root { --accent: … }` looks like.
+//
+// Defaults match the existing inline fallback color (`#d63b1f`, Maude brand
+// orange-rust) so no visual change to the default theme. Users who want to
+// re-theme the HUD can set `--maude-hud-accent` etc. via a `<style>` block
+// AFTER this one (CSS cascade — later wins).
+const HUD_TOKENS_CSS = `
+:root {
+  --maude-hud-accent:        #d63b1f;
+  --maude-hud-accent-hover:  #b8331b;
+  --maude-hud-accent-active: #962a16;
+  --maude-hud-accent-fg:     #ffffff;
+  --maude-hud-accent-tint:   color-mix(in oklab, #d63b1f 14%, transparent);
+}
+`;
+
 // DDR-046 — Three-state halo language. Each state has its own border weight,
 // color treatment, and geometric idiom so 8+ semantic states (hover / selected
 // / member-of-multi / group / snap-sibling / snap-grid / marquee / annotation
@@ -90,20 +125,20 @@ const HALO_CSS = `
 /* Hover — lighter 1.5px tinted line + white inner ring for contrast on dark
    elements. NO ring, NO ticks. Synchronous paint (no debounce). */
 .dc-cv-halo--hover {
-  border: 1.5px solid color-mix(in oklab, var(--accent, #0d99ff) 60%, transparent);
+  border: 1.5px solid color-mix(in oklab, var(--maude-hud-accent, #0d99ff) 60%, transparent);
   box-shadow: inset 0 0 0 1px var(--bg-0, #ffffff);
 }
 /* Selected (single) — 2px solid + 18% ring halo + 4 filled corner ticks.
    Ticks are <i class="tick tick-*"> children at inset:-3px, 8x8, accent fill. */
 .dc-cv-halo--selected {
-  border: 2px solid var(--accent, #0d99ff);
-  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent, #0d99ff) 18%, transparent);
+  border: 2px solid var(--maude-hud-accent, #0d99ff);
+  box-shadow: 0 0 0 4px color-mix(in oklab, var(--maude-hud-accent, #0d99ff) 18%, transparent);
 }
 .dc-cv-halo--selected .tick {
   position: absolute;
   width: 8px;
   height: 8px;
-  background: var(--accent, #0d99ff);
+  background: var(--maude-hud-accent, #0d99ff);
   border-radius: 1px;
   box-shadow: 0 0 0 1px var(--bg-0, #ffffff);
 }
@@ -117,7 +152,7 @@ const HALO_CSS = `
    as "draft / placeholder" and members would melt away inside artboards once
    the artboard border itself is 22%-tinted (T15). */
 .dc-cv-halo--selected-member {
-  border: 1.5px solid var(--accent, #0d99ff);
+  border: 1.5px solid var(--maude-hud-accent, #0d99ff);
 }
 /* Group bbox — 1 px DASHED full accent + four 6 × 6 square corner handles.
    T16 / DDR-046 rev 2 — dashed is the canonical group-container affordance
@@ -130,14 +165,14 @@ const HALO_CSS = `
   position: fixed;
   pointer-events: none;
   z-index: 5;
-  border: 1px dashed var(--accent, #0d99ff);
+  border: 1px dashed var(--maude-hud-accent, #0d99ff);
   border-radius: 2px;
 }
 .dc-cv-group-bbox .tick {
   position: absolute;
   width: 6px;
   height: 6px;
-  background: var(--accent, #0d99ff);
+  background: var(--maude-hud-accent, #0d99ff);
   border-radius: 1px;
   box-shadow: 0 0 0 1px var(--bg-0, #ffffff);
 }
@@ -157,7 +192,7 @@ const HALO_CSS = `
      (3 px ring + hard 6×6×0 offset) was readable but visually expensive once
      the frame itself lost its brutalist treatment. A 2 px ring on a 22 %
      tinted hairline reads unambiguous without claiming subject-ness. */
-  box-shadow: 0 0 0 2px var(--accent, #0d99ff);
+  box-shadow: 0 0 0 2px var(--maude-hud-accent, #0d99ff);
   transition: box-shadow 120ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 /* Respect prefers-reduced-motion across all chrome transitions. */
@@ -215,10 +250,39 @@ const HALO_CSS = `
 .dc-canvas[data-active-tool="eraser"] * {
   cursor: var(--cursor-eraser), cell !important;
 }
+
+/* T31 — Level of detail. Below 0.35 zoom we hide pre-attentive chrome that
+   becomes visual noise (corner ticks, distance pills, active-artboard ring,
+   snap pills). Above 4.0 we coax the browser into crisper text rendering.
+   The "normal" band 0.35..4.0 carries the full chrome. */
+.dc-canvas[data-cv-zoom-lod="low"] .dc-cv-halo .tick,
+.dc-canvas[data-cv-zoom-lod="low"] .dc-cv-group-bbox .tick {
+  display: none;
+}
+.dc-canvas[data-cv-zoom-lod="low"] .dc-snap-pill,
+.dc-canvas[data-cv-zoom-lod="low"] .dc-cv-eq-pill {
+  display: none;
+}
+.dc-canvas[data-cv-zoom-lod="low"] .dc-artboard[aria-current="true"] {
+  box-shadow: none;
+}
+.dc-canvas[data-cv-zoom-lod="crisp"] {
+  -webkit-font-smoothing: subpixel-antialiased;
+  font-smooth: always;
+}
 `.trim();
 
 function ensureHaloStyles(): void {
   if (typeof document === 'undefined') return;
+  // HUD tokens MUST be injected before HALO_CSS so the cascade resolves
+  // `var(--maude-hud-accent, …)` against the dev-server's brand defaults
+  // even when the canvas DS's tokens.css later sets `:root { --accent: … }`.
+  if (!document.getElementById('dc-cv-hud-tokens-css')) {
+    const t = document.createElement('style');
+    t.id = 'dc-cv-hud-tokens-css';
+    t.textContent = HUD_TOKENS_CSS;
+    document.head.appendChild(t);
+  }
   if (document.getElementById('dc-cv-halo-css')) return;
   const s = document.createElement('style');
   s.id = 'dc-cv-halo-css';
@@ -279,9 +343,142 @@ function CanvasCore({
     };
   }, [hostRef, tool]);
 
+  // T28 — modifier-aware cursor (Alt → copy on cd-id, Shift → crosshair on
+  // body padding). CSS-driven once data-mod-* is reflected on the host.
+  useCursorModifiers(hostRef);
+  // T29 — arrow nudge (artboards) + Cmd+A select-all (active artboard).
+  // Cmd+D duplicate deferred; no live duplicate channel for either artboards
+  // or stamped elements yet.
+  useKeyboardDiscipline();
+
   const artboardsCtx = useArtboardsContext();
   const dragBus = useDragStateContext();
 
+  // T33 — programmatic-zoom easing via double-click on empty world only.
+  // Per post-Wave-3 user feedback, dblclick-on-artboard auto-zoom was
+  // surprising (interfered with native dblclick text-select inside chrome
+  // and felt magnetic). We keep the dblclick-empty → `fit()` path because
+  // it's a discoverable "back to overview" gesture; artboard zoom is still
+  // reachable via Cmd+1 and the zoom HUD.
+  useEffect(() => {
+    if (!controller) return;
+    const host = hostRef.current;
+    if (!host) return;
+    const onDbl = (e: MouseEvent) => {
+      const t = e.target as Element | null;
+      if (!t || !t.closest) return;
+      // Floating chrome / overlays / drawn user content / any artboard
+      // surface → leave alone. Only dblclick that lands on the canvas
+      // background outside every artboard triggers `fit()`.
+      if (
+        t.closest(
+          '.dc-mm, .dc-zoom-tb, .dc-tool-palette, .dc-context-menu, .dc-annot-svg, .dc-annot-ctx, .cm-composer, .cm-thread, .cm-mention-popup, .cm-pin'
+        )
+      ) {
+        return;
+      }
+      if (t.closest('[data-dc-screen]')) return; // any part of an artboard
+      e.preventDefault();
+      controller.fit();
+    };
+    host.addEventListener('dblclick', onDbl);
+    return () => host.removeEventListener('dblclick', onDbl);
+  }, [controller, hostRef]);
+
+  // T31 — level-of-detail attribute on `.dc-canvas`. CSS rules hide
+  // pre-attentive chrome (ticks, distance pills, accent ring) below 0.35
+  // zoom and sharpen text above 4.0. tldraw's textShadowLod = 0.35 is the
+  // canonical threshold. Reads the published viewport (settle-cadence) so
+  // the LOD doesn't flicker between bands mid-zoom — chrome should settle
+  // once per gesture, not on every frame.
+  const publishedZoom = artboardsCtx?.viewport?.zoom ?? 1;
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const lod = publishedZoom < 0.35 ? 'low' : publishedZoom > 4 ? 'crisp' : 'normal';
+    host.setAttribute('data-cv-zoom-lod', lod);
+    return () => host.removeAttribute('data-cv-zoom-lod');
+  }, [hostRef, publishedZoom]);
+
+  // Phase 8 — publish local cursor (world coords) + viewport to Awareness
+  // so foreign peers can render our cursor on their CursorsOverlay. The
+  // collab.publishAwareness call is already throttled to ~30 Hz internally
+  // (use-collab.tsx) — we just need to compute screen → world per move.
+  const collab = useCollab();
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host || !collab || !controller) return;
+    const onMove = (e: MouseEvent) => {
+      const v = controller.viewport;
+      // screen → world: world = (screen - viewport.{x,y}) / zoom.
+      const worldX = (e.clientX - v.x) / Math.max(v.zoom, 0.0001);
+      const worldY = (e.clientY - v.y) / Math.max(v.zoom, 0.0001);
+      collab.publishAwareness({ cursor: { x: worldX, y: worldY } });
+    };
+    const onLeave = () => {
+      collab.publishAwareness({ cursor: null });
+    };
+    host.addEventListener('mousemove', onMove);
+    host.addEventListener('mouseleave', onLeave);
+    return () => {
+      host.removeEventListener('mousemove', onMove);
+      host.removeEventListener('mouseleave', onLeave);
+    };
+  }, [hostRef, collab, controller]);
+
+  // Phase 8 — publish viewport when it settles. The CursorsOverlay only
+  // needs the LOCAL viewport (to transform foreign world coords back to
+  // screen), but exposing ours over Awareness sets up Task 6's follow-mode.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: deliberate settle-cadence — re-publish only when x/y/zoom change, not on every viewport field.
+  useEffect(() => {
+    if (!collab || !controller) return;
+    collab.publishAwareness({ viewport: controller.viewport });
+  }, [
+    collab,
+    controller,
+    controller?.viewport.x,
+    controller?.viewport.y,
+    controller?.viewport.zoom,
+  ]);
+
+  // Phase 8 — publish local selection so foreign PeerSelection halos can
+  // render around what *I* selected. Convert the first entry's selector
+  // (CSS path the peer resolves in their own DOM) + current bounds. The
+  // bounds are screen-px from publish time — peers re-resolve cssPath
+  // when possible and fall back to bounds otherwise.
+  useEffect(() => {
+    if (!collab) return;
+    const first = selSet.selected[0];
+    if (!first || !first.selector) {
+      collab.publishAwareness({ selection: null });
+      return;
+    }
+    const b = first.bounds;
+    const bounds =
+      b && typeof b === 'object'
+        ? {
+            x: Number(b.x) || 0,
+            y: Number(b.y) || 0,
+            w: Number(b.w) || 0,
+            h: Number(b.h) || 0,
+          }
+        : { x: 0, y: 0, w: 0, h: 0 };
+    collab.publishAwareness({ selection: { cssPath: first.selector, bounds } });
+  }, [collab, selSet.selected]);
+
+  // Phase 8 — publish annotation selection (Phase 5 strokes). Separate from
+  // selSet because annotations have their own selection registry. Peers
+  // render halos by querying `[data-id="<id>"]` so the same halo follows
+  // resize / move (SVG re-emits with the same data-id). `Optional` flavor
+  // because CanvasCore is mounted INSIDE the AnnotationSelectionProvider
+  // tree but TypeScript / a defensive boot path can't always prove it.
+  const annotSelForPublish = useAnnotationSelectionOptional();
+  const annotSelectedIds = annotSelForPublish?.selectedIds;
+  useEffect(() => {
+    if (!collab) return;
+    collab.publishAwareness({ annotationSelection: annotSelectedIds ?? [] });
+  }, [collab, annotSelectedIds]);
+
   /**
    * T24 — distribute the currently-selected artboards evenly on the given
    * axis. Requires ≥ 3 selected artboards. Sort by leading edge, hold the
@@ -323,11 +520,98 @@ function CanvasCore({
         }
       }
       if (moved.length === 0) return;
-      dragBus.commitPositions(moved);
+      dragBus.commitPositions(moved, { label: equalSpacingLabel(sorted.length) });
     },
     [artboardsCtx, dragBus, selSet.selected]
   );
 
+  /**
+   * G7 — align selected artboards to a common edge / midline. Requires ≥ 2
+   * selected artboards. Six modes:
+   *   - 'left'      → all artboards share the minimum x of the set
+   *   - 'right'     → all artboards share the maximum (x + w) edge
+   *   - 'center-x'  → all artboards share the midpoint of the set's x extent
+   *   - 'top'       → all artboards share the minimum y
+   *   - 'bottom'    → all artboards share the maximum (y + h) edge
+   *   - 'center-y'  → all artboards share the midpoint of the set's y extent
+   *
+   * Holds the reference edge constant; only the perpendicular axis stays as
+   * each artboard already was (alignment doesn't relocate on the orthogonal
+   * axis). This matches Figma / Sketch / FigJam align semantics.
+   */
+  const alignArtboards = useCallback(
+    (mode: AlignMode) => {
+      if (!artboardsCtx || !dragBus) return;
+      const ids = new Set(
+        selSet.selected.filter((s) => !!s.artboardId).map((s) => s.artboardId as string)
+      );
+      if (ids.size < 2) return;
+      const targets: ArtboardRect[] = artboardsCtx.artboards.filter((r) => ids.has(r.id));
+      if (targets.length < 2) return;
+
+      // Union bbox for center modes.
+      let xMin = Number.POSITIVE_INFINITY;
+      let yMin = Number.POSITIVE_INFINITY;
+      let xMax = Number.NEGATIVE_INFINITY;
+      let yMax = Number.NEGATIVE_INFINITY;
+      for (const r of targets) {
+        if (r.x < xMin) xMin = r.x;
+        if (r.y < yMin) yMin = r.y;
+        if (r.x + r.w > xMax) xMax = r.x + r.w;
+        if (r.y + r.h > yMax) yMax = r.y + r.h;
+      }
+      const cx = (xMin + xMax) / 2;
+      const cy = (yMin + yMax) / 2;
+
+      const moved: { id: string; x: number; y: number }[] = [];
+      for (const r of targets) {
+        let nx = r.x;
+        let ny = r.y;
+        switch (mode) {
+          case 'left':
+            nx = xMin;
+            break;
+          case 'right':
+            nx = xMax - r.w;
+            break;
+          case 'center-x':
+            nx = cx - r.w / 2;
+            break;
+          case 'top':
+            ny = yMin;
+            break;
+          case 'bottom':
+            ny = yMax - r.h;
+            break;
+          case 'center-y':
+            ny = cy - r.h / 2;
+            break;
+        }
+        if (Math.round(nx) === r.x && Math.round(ny) === r.y) continue;
+        moved.push({ id: r.id, x: Math.round(nx), y: Math.round(ny) });
+      }
+      if (moved.length === 0) return;
+      dragBus.commitPositions(moved, { label: alignLabel(mode, targets.length) });
+    },
+    [artboardsCtx, dragBus, selSet.selected]
+  );
+
+  /**
+   * G2v2 — "Fit just this artboard" context-menu entry previously bridged
+   * via a synthetic click on the label button (which used to call
+   * controller.jumpTo). Now that the label is purely a11y, the menu entry
+   * needs a direct path: look the rect up from the live artboards list and
+   * call jumpTo straight on the controller.
+   */
+  const focusArtboard = useCallback(
+    (artboardId: string) => {
+      if (!controller || !artboardsCtx) return;
+      const rect = artboardsCtx.artboards.find((r) => r.id === artboardId);
+      if (rect) controller.jumpTo(rect);
+    },
+    [controller, artboardsCtx]
+  );
+
   const registry = useMemo<ContextRegistry>(
     () =>
       buildRegistry({
@@ -335,8 +619,10 @@ function CanvasCore({
         clearSelection: selSet.clear,
         selSet,
         distributeArtboards,
+        alignArtboards,
+        focusArtboard,
       }),
-    [controller, selSet, distributeArtboards]
+    [controller, selSet, distributeArtboards, alignArtboards, focusArtboard]
   );
 
   // Distribute is reached via the MultiArtboardToolbar (floating chrome
@@ -346,7 +632,11 @@ function CanvasCore({
   return (
     <ExportDialogProvider>
       <ContextMenuProvider registry={registry}>
-        <CanvasRouter hostRef={hostRef} distributeArtboards={distributeArtboards}>
+        <CanvasRouter
+          hostRef={hostRef}
+          distributeArtboards={distributeArtboards}
+          alignArtboards={alignArtboards}
+        >
           {children}
         </CanvasRouter>
       </ContextMenuProvider>
@@ -362,14 +652,19 @@ function buildRegistry(deps: {
   clearSelection: () => void;
   selSet: { selected: Selection[] };
   distributeArtboards: (axis: 'x' | 'y') => void;
+  alignArtboards: (mode: 'left' | 'right' | 'center-x' | 'top' | 'bottom' | 'center-y') => void;
+  focusArtboard: (artboardId: string) => void;
 }): ContextRegistry {
-  const { controller, clearSelection, selSet, distributeArtboards } = deps;
+  const { controller, clearSelection, selSet, distributeArtboards, alignArtboards, focusArtboard } =
+    deps;
 
   // T24 — distribute commands are only enabled when ≥ 3 artboards are
   // selected. Below that, the menu items render as `disabled` so the user
   // sees the affordance but understands the precondition.
+  // G7 — align commands are enabled at ≥ 2 (alignment is well-defined with 2).
   const selectedArtboardCount = selSet.selected.filter((s) => !!s.artboardId).length;
   const distributeEnabled = selectedArtboardCount >= 3;
+  const alignEnabled = selectedArtboardCount >= 2;
 
   const copy = (text: string): void => {
     if (typeof navigator === 'undefined' || !navigator.clipboard) return;
@@ -492,19 +787,54 @@ function buildRegistry(deps: {
           id: 'fit-one',
           label: 'Fit just this artboard',
           onSelect: (target) => {
-            if (!controller || !target.artboardId) return;
-            // controller exposes jumpTo(rect) — DCArtboard.onFocus uses the
-            // same pattern. The artboard label button already wires to
-            // onFocus; dispatch a synthetic click as the simplest bridge.
-            const btn = (target.el ?? document)
-              .closest?.('[data-dc-screen]')
-              ?.querySelector('button.dc-artboard-label');
-            (btn as HTMLButtonElement | null)?.click();
+            if (!target.artboardId) return;
+            focusArtboard(target.artboardId);
           },
         },
         fitItem,
         resetItem,
       ],
+      [
+        // G7 — align commands. Six modes; gated on ≥ 2 selected artboards
+        // (alignment is well-defined with 2). Primary surface is the
+        // MultiArtboardToolbar; menu entries are discoverability backup.
+        {
+          id: 'align-left',
+          label: 'Align left',
+          disabled: !alignEnabled,
+          onSelect: () => alignArtboards('left'),
+        },
+        {
+          id: 'align-center-x',
+          label: 'Align center (horizontal)',
+          disabled: !alignEnabled,
+          onSelect: () => alignArtboards('center-x'),
+        },
+        {
+          id: 'align-right',
+          label: 'Align right',
+          disabled: !alignEnabled,
+          onSelect: () => alignArtboards('right'),
+        },
+        {
+          id: 'align-top',
+          label: 'Align top',
+          disabled: !alignEnabled,
+          onSelect: () => alignArtboards('top'),
+        },
+        {
+          id: 'align-center-y',
+          label: 'Align center (vertical)',
+          disabled: !alignEnabled,
+          onSelect: () => alignArtboards('center-y'),
+        },
+        {
+          id: 'align-bottom',
+          label: 'Align bottom',
+          disabled: !alignEnabled,
+          onSelect: () => alignArtboards('bottom'),
+        },
+      ],
       [
         // T24 — distribute commands. Primary surface is the floating
         // MultiArtboardToolbar above the group bbox; the menu entries are
@@ -553,15 +883,18 @@ function CanvasRouter({
   hostRef,
   children,
   distributeArtboards,
+  alignArtboards,
 }: {
   hostRef: RefObject<HTMLDivElement | null>;
   children: ReactNode;
   distributeArtboards: (axis: 'x' | 'y') => void;
+  alignArtboards: (mode: 'left' | 'right' | 'center-x' | 'top' | 'bottom' | 'center-y') => void;
 }) {
   const { tool, setTool, clearSticky } = useToolMode();
   const selSet = useSelectionSet();
   const annotSel = useAnnotationSelection();
   const ctxMenu = useContextMenu();
+  const undoStack = useUndoStack();
 
   // Hover state drives the floating .dc-cv-halo--hover overlay. The overlay
   // itself reads getBoundingClientRect on every rAF tick to follow pan/zoom.
@@ -663,6 +996,12 @@ function CanvasRouter({
         ctxMenu.open(ctxTarget);
       },
       onTool: ({ tool: t }) => setTool(t),
+      onUndo: () => {
+        void undoStack.undo();
+      },
+      onRedo: () => {
+        void undoStack.redo();
+      },
       onEscape: () => {
         // T21 — abort any mid-stroke draw FIRST. The annotations layer
         // listens for `maude:cancel-stroke` and drops the in-progress
@@ -781,11 +1120,21 @@ function CanvasRouter({
       <AnnotationsLayer />
       <ToolPalette />
       <ArtboardMarqueeOverlay />
+      <ElementMarqueeOverlay />
       <HoverHalo el={hoverEl} />
       <SelectionHalos />
       <GroupBbox />
-      <MultiArtboardToolbar distributeArtboards={distributeArtboards} />
+      <EqualSpacingHandles />
+      <ContextualToolbar />
+      <MultiArtboardToolbar
+        distributeArtboards={distributeArtboards}
+        alignArtboards={alignArtboards}
+      />
       <SnapGuideOverlay />
+      <UndoHud />
+      <CursorsOverlay />
+      <AiBanner />
+      <ParticipantsChrome />
     </>
   );
 }
@@ -831,7 +1180,7 @@ const MULTI_TOOLBAR_CSS = `
   transition: background-color 80ms linear;
 }
 .dc-multi-artboard-tb button:hover:not(:disabled) {
-  background: color-mix(in oklab, var(--accent, #d63b1f) 8%, transparent);
+  background: color-mix(in oklab, var(--maude-hud-accent, #d63b1f) 8%, transparent);
 }
 .dc-multi-artboard-tb button:disabled {
   cursor: default;
@@ -849,6 +1198,12 @@ const MULTI_TOOLBAR_CSS = `
   align-items: center;
   justify-content: center;
 }
+.dc-multi-artboard-tb .dc-mab-divider {
+  width: 1px;
+  align-self: stretch;
+  background: var(--u-border-subtle, rgba(0,0,0,0.10));
+  margin: 0 4px;
+}
 @media (prefers-reduced-motion: reduce) {
   .dc-multi-artboard-tb button { transition: none; }
 }
@@ -865,8 +1220,10 @@ function ensureMultiToolbarStyles(): void {
 
 function MultiArtboardToolbar({
   distributeArtboards,
+  alignArtboards,
 }: {
   distributeArtboards: (axis: 'x' | 'y') => void;
+  alignArtboards: (mode: 'left' | 'right' | 'center-x' | 'top' | 'bottom' | 'center-y') => void;
 }) {
   ensureMultiToolbarStyles();
   const { selected } = useSelectionSet();
@@ -875,7 +1232,8 @@ function MultiArtboardToolbar({
 
   const artboardSelections = useMemo(() => selected.filter((s) => !!s.artboardId), [selected]);
   const artboardCount = artboardSelections.length;
-  const enabled = artboardCount >= 3;
+  const distributeOk = artboardCount >= 3;
+  const alignOk = artboardCount >= 2;
 
   useEffect(() => {
     const div = ref.current;
@@ -943,11 +1301,105 @@ function MultiArtboardToolbar({
       aria-label="Multi-artboard actions"
     >
       <span className="dc-mab-count">{artboardCount} artboards</span>
+      {/* G7 — align cluster. Icon-only to keep the toolbar narrow; full
+          label lives in the tooltip + the right-click menu. Enabled at ≥ 2
+          artboards (alignment is well-defined with 2). */}
+      <button
+        type="button"
+        disabled={!alignOk}
+        title={alignOk ? 'Align left' : 'Select at least 2 artboards to align'}
+        aria-label="Align left"
+        onClick={() => alignArtboards('left')}
+      >
+        <span className="dc-mab-icon" aria-hidden="true">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+            <line x1="0.5" y1="0.5" x2="0.5" y2="13.5" stroke="currentColor" />
+            <rect x="1" y="2" width="7" height="3" fill="currentColor" />
+            <rect x="1" y="9" width="11" height="3" fill="currentColor" />
+          </svg>
+        </span>
+      </button>
+      <button
+        type="button"
+        disabled={!alignOk}
+        title={alignOk ? 'Align center (horizontal)' : 'Select at least 2 artboards to align'}
+        aria-label="Align center horizontally"
+        onClick={() => alignArtboards('center-x')}
+      >
+        <span className="dc-mab-icon" aria-hidden="true">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+            <line x1="7" y1="0.5" x2="7" y2="13.5" stroke="currentColor" />
+            <rect x="3.5" y="2" width="7" height="3" fill="currentColor" />
+            <rect x="1.5" y="9" width="11" height="3" fill="currentColor" />
+          </svg>
+        </span>
+      </button>
+      <button
+        type="button"
+        disabled={!alignOk}
+        title={alignOk ? 'Align right' : 'Select at least 2 artboards to align'}
+        aria-label="Align right"
+        onClick={() => alignArtboards('right')}
+      >
+        <span className="dc-mab-icon" aria-hidden="true">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+            <line x1="13.5" y1="0.5" x2="13.5" y2="13.5" stroke="currentColor" />
+            <rect x="6" y="2" width="7" height="3" fill="currentColor" />
+            <rect x="2" y="9" width="11" height="3" fill="currentColor" />
+          </svg>
+        </span>
+      </button>
+      <button
+        type="button"
+        disabled={!alignOk}
+        title={alignOk ? 'Align top' : 'Select at least 2 artboards to align'}
+        aria-label="Align top"
+        onClick={() => alignArtboards('top')}
+      >
+        <span className="dc-mab-icon" aria-hidden="true">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+            <line x1="0.5" y1="0.5" x2="13.5" y2="0.5" stroke="currentColor" />
+            <rect x="2" y="1" width="3" height="7" fill="currentColor" />
+            <rect x="9" y="1" width="3" height="11" fill="currentColor" />
+          </svg>
+        </span>
+      </button>
+      <button
+        type="button"
+        disabled={!alignOk}
+        title={alignOk ? 'Align center (vertical)' : 'Select at least 2 artboards to align'}
+        aria-label="Align center vertically"
+        onClick={() => alignArtboards('center-y')}
+      >
+        <span className="dc-mab-icon" aria-hidden="true">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+            <line x1="0.5" y1="7" x2="13.5" y2="7" stroke="currentColor" />
+            <rect x="2" y="3.5" width="3" height="7" fill="currentColor" />
+            <rect x="9" y="1.5" width="3" height="11" fill="currentColor" />
+          </svg>
+        </span>
+      </button>
+      <button
+        type="button"
+        disabled={!alignOk}
+        title={alignOk ? 'Align bottom' : 'Select at least 2 artboards to align'}
+        aria-label="Align bottom"
+        onClick={() => alignArtboards('bottom')}
+      >
+        <span className="dc-mab-icon" aria-hidden="true">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+            <line x1="0.5" y1="13.5" x2="13.5" y2="13.5" stroke="currentColor" />
+            <rect x="2" y="6" width="3" height="7" fill="currentColor" />
+            <rect x="9" y="2" width="3" height="11" fill="currentColor" />
+          </svg>
+        </span>
+      </button>
+      <span className="dc-mab-divider" aria-hidden="true" />
       <button
         type="button"
-        disabled={!enabled}
+        disabled={!distributeOk}
         title={
-          enabled
+          distributeOk
             ? 'Distribute horizontally — equal gaps between artboards'
             : 'Select at least 3 artboards to distribute'
         }
@@ -961,13 +1413,12 @@ function MultiArtboardToolbar({
             <rect x="10.5" y="3" width="3" height="8" fill="currentColor" />
           </svg>
         </span>
-        Distribute H
       </button>
       <button
         type="button"
-        disabled={!enabled}
+        disabled={!distributeOk}
         title={
-          enabled
+          distributeOk
             ? 'Distribute vertically — equal gaps between artboards'
             : 'Select at least 3 artboards to distribute'
         }
@@ -981,7 +1432,6 @@ function MultiArtboardToolbar({
             <rect x="3" y="10.5" width="8" height="3" fill="currentColor" />
           </svg>
         </span>
-        Distribute V
       </button>
     </div>
   );