@1agh/maude 0.19.0 → 0.19.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1agh/maude",
-  "version": "0.19.0",
+  "version": "0.19.1",
   "description": "Marketplace of Claude Code plugins by Michal Dovrtěl: `design` (canvas-first design iteration) + `flow` (generic agentic workflow loop with .ai second brain). Ships the `maude` CLI (with `mdcc` legacy alias) to scaffold workspace, run the design dev server, and manage configs.",
   "type": "module",
   "engines": {
@@ -41,13 +41,13 @@
     "prepublishOnly": "bash scripts/check-version-parity.sh"
   },
   "optionalDependencies": {
-    "@1agh/maude-darwin-arm64": "0.19.0",
-    "@1agh/maude-darwin-x64": "0.19.0",
-    "@1agh/maude-linux-arm64": "0.19.0",
-    "@1agh/maude-linux-arm64-musl": "0.19.0",
-    "@1agh/maude-linux-x64": "0.19.0",
-    "@1agh/maude-linux-x64-musl": "0.19.0",
-    "@1agh/maude-win32-x64": "0.19.0"
+    "@1agh/maude-darwin-arm64": "0.19.1",
+    "@1agh/maude-darwin-x64": "0.19.1",
+    "@1agh/maude-linux-arm64": "0.19.1",
+    "@1agh/maude-linux-arm64-musl": "0.19.1",
+    "@1agh/maude-linux-x64": "0.19.1",
+    "@1agh/maude-linux-x64-musl": "0.19.1",
+    "@1agh/maude-win32-x64": "0.19.1"
   },
   "files": [
     "cli",

package/plugins/design/dev-server/annotations-context-toolbar.tsx

@@ -36,11 +36,11 @@ const TOOLBAR_CSS = `
   display: flex;
   align-items: center;
   gap: 6px;
-  background: var(--u-bg-2, var(--bg-1, rgba(255,255,255,0.98)));
+  background: var(--u-bg-0, var(--bg-0, rgba(255,255,255,0.98)));
   border: 1px solid var(--u-fg-0, #1c1917);
-  border-radius: 0;
+  border-radius: 8px;
   padding: 6px 8px;
-  box-shadow: 4px 4px 0 var(--u-fg-0, #1c1917);
+  box-shadow: 0 6px 24px color-mix(in oklab, var(--u-fg-0, #1c1917) 10%, transparent);
   font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 12px;
   color: var(--u-fg-0, var(--fg-0, #1a1a1a));
@@ -147,7 +147,10 @@ export function AnnotationContextToolbar() {
       return { color: false, fill: false, thickness: false, fontSize: false };
     }
     const allFillable = selectedStrokes.every((s) => s.tool === 'rect' || s.tool === 'ellipse');
-    const allThickness = selectedStrokes.every((s) => s.tool === 'pen' || s.tool === 'arrow');
+    // T20 — rect + ellipse now carry stroke weight too.
+    const allThickness = selectedStrokes.every(
+      (s) => s.tool === 'pen' || s.tool === 'arrow' || s.tool === 'rect' || s.tool === 'ellipse'
+    );
     const anyText = selectedStrokes.some((s) => s.tool === 'text');
     return {
       color: true,
@@ -226,7 +229,8 @@ export function AnnotationContextToolbar() {
     (w: number) => {
       if (!store) return;
       for (const s of selectedStrokes) {
-        if (s.tool === 'pen' || s.tool === 'arrow') {
+        // T20 — rect + ellipse now carry stroke weight.
+        if (s.tool === 'pen' || s.tool === 'arrow' || s.tool === 'rect' || s.tool === 'ellipse') {
           store.updateStroke(s.id, { width: w } as Partial<Stroke>);
         }
       }
@@ -263,7 +267,11 @@ export function AnnotationContextToolbar() {
     : undefined;
   const uniqThickness = caps.thickness
     ? uniformValue(
-        selectedStrokes.map((s) => (s.tool === 'pen' || s.tool === 'arrow' ? s.width : undefined))
+        selectedStrokes.map((s) =>
+          s.tool === 'pen' || s.tool === 'arrow' || s.tool === 'rect' || s.tool === 'ellipse'
+            ? s.width
+            : undefined
+        )
       )
     : undefined;
   const uniqFontSize = caps.fontSize

package/plugins/design/dev-server/annotations-layer.tsx

@@ -35,6 +35,7 @@ import { createPortal } from 'react-dom';
 
 import { AnnotationContextToolbar } from './annotations-context-toolbar.tsx';
 import { useViewportControllerContext, useWorldRefContext } from './canvas-lib.tsx';
+import { AnnotationResizeOverlay } from './use-annotation-resize.tsx';
 import { useAnnotationSelectionOptional } from './use-annotation-selection.tsx';
 import { useAnnotationsVisibility } from './use-annotations-visibility.tsx';
 import { useSelectionSetOptional } from './use-selection-set.tsx';
@@ -457,15 +458,15 @@ const ANNOT_CSS = `
   display: flex;
   align-items: center;
   gap: 8px;
-  background: var(--u-bg-2, var(--bg-1, rgba(255,255,255,0.98)));
+  background: var(--u-bg-0, var(--bg-0, rgba(255,255,255,0.98)));
   border: 1px solid var(--u-fg-0, #1c1917);
-  border-radius: 0;
+  border-radius: 8px;
   padding: 6px 10px;
   font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 11px;
   color: var(--u-fg-0, rgba(40,30,20,0.85));
   z-index: 6;
-  box-shadow: 4px 4px 0 var(--u-fg-0, #1c1917);
+  box-shadow: 0 6px 24px color-mix(in oklab, var(--u-fg-0, #1c1917) 10%, transparent);
   user-select: none;
 }
 .dc-annot-chrome .dc-annot-swatches { display: flex; gap: 4px; }
@@ -618,7 +619,7 @@ export { useAnnotationsVisibility } from './use-annotations-visibility.tsx';
 
 export function AnnotationsLayer() {
   ensureAnnotStyles();
-  const { tool } = useToolMode();
+  const { tool, setTool, sticky } = useToolMode();
   const controller = useViewportControllerContext();
   const vp = controller?.viewport ?? null;
   const worldRef = useWorldRefContext();
@@ -653,7 +654,11 @@ export function AnnotationsLayer() {
   const isDraw = tool === 'pen' || tool === 'rect' || tool === 'arrow' || tool === 'ellipse';
   const isErase = tool === 'eraser';
   const isActive = isDraw || isErase;
-  const supportsThickness = tool === 'pen' || tool === 'arrow';
+  // T20 — rect + ellipse expose stroke weight too (FigJam ships thickness on
+  // every shape). The annotation toolbar reads supportsThickness to decide
+  // whether to render the Thin / Thick chips.
+  const supportsThickness =
+    tool === 'pen' || tool === 'arrow' || tool === 'rect' || tool === 'ellipse';
   const supportsFill = tool === 'rect' || tool === 'ellipse';
 
   // Load existing annotations on mount.
@@ -839,7 +844,7 @@ export function AnnotationsLayer() {
           id,
           tool: 'rect',
           color,
-          width: STROKE_WIDTH_THIN,
+          width,
           x: wx,
           y: wy,
           w: 0,
@@ -851,7 +856,7 @@ export function AnnotationsLayer() {
           id,
           tool: 'ellipse',
           color,
-          width: STROKE_WIDTH_THIN,
+          width,
           cx: wx,
           cy: wy,
           rx: 0,
@@ -935,9 +940,38 @@ export function AnnotationsLayer() {
         scheduleSave(next);
         return next;
       });
+      // T18 — auto-select the freshly drawn shape so the user can immediately
+      // see + adjust it. annotSel is optional (some test harnesses mount
+      // AnnotationsLayer without the provider), so guard the call.
+      if (annotSel) annotSel.replace(committed.id);
     }
+    // T18 / T19 — flip the tool back to Move after every commit UNLESS sticky
+    // mode is locked on this tool. Sticky lets the user draw many shapes in a
+    // row (canonical pattern: tldraw double-click to lock). Eraser stays
+    // armed by default — that tool is destructive, not constructive.
+    const toolJustUsed = cur.tool;
+    if (toolJustUsed !== 'eraser') {
+      const stickyOnThis = sticky.locked && sticky.tool === toolJustUsed;
+      if (!stickyOnThis) setTool('move');
+    }
+    setDrawing(null);
+  }, [isActive, isErase, visible, scheduleSave, annotSel, setTool, sticky]);
+
+  // T21 — abort a mid-stroke draw without committing. Dispatched by the
+  // canvas-shell Esc handler (`maude:cancel-stroke`). Safe to call when
+  // nothing is being drawn — the early-return on drawingRef keeps it
+  // a no-op.
+  const cancelStroke = useCallback(() => {
+    if (!drawingRef.current) return;
     setDrawing(null);
-  }, [isActive, isErase, visible, scheduleSave]);
+  }, []);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const onCancel = () => cancelStroke();
+    document.addEventListener('maude:cancel-stroke', onCancel);
+    return () => document.removeEventListener('maude:cancel-stroke', onCancel);
+  }, [cancelStroke]);
 
   const renderStrokes = useMemo(
     () => (drawing ? [...strokes, drawing] : strokes),
@@ -1064,8 +1098,9 @@ export function AnnotationsLayer() {
         return;
       }
 
-      // Empty world — start a drag-select gesture. A small movement falls
-      // back to a "click on empty world → clear selection" (Figma-style).
+      // Empty world — start a drag-select gesture. A bare click without
+      // moving is a no-op (post-Wave-2 feedback: click-on-empty-space
+      // does NOT clear selection; Esc is the canonical deselect).
       const addToSelection = e.shiftKey;
       let moved = false;
       const onMove = (mv: PointerEvent) => {
@@ -1080,8 +1115,8 @@ export function AnnotationsLayer() {
         document.removeEventListener('pointerup', onUp, true);
         document.removeEventListener('pointercancel', onUp, true);
         if (!moved) {
-          // True click on empty world → clear (unless modifier add-mode).
-          if (!addToSelection && annotSel.selectedIds.length > 0) annotSel.clear();
+          // Click without movement on empty world → no-op. Selection
+          // survives accidental misses; Esc is how the user deselects.
           return;
         }
         const final = marqueeRef.current;
@@ -1100,13 +1135,10 @@ export function AnnotationsLayer() {
             hits.push(s.id);
           }
         }
-        if (addToSelection) {
-          annotSel.add(hits);
-        } else if (hits.length === 0) {
-          annotSel.clear();
-        } else {
-          annotSel.replace(hits);
-        }
+        // Marquee that captured no strokes — preserve existing selection.
+        if (hits.length === 0) return;
+        if (addToSelection) annotSel.add(hits);
+        else annotSel.replace(hits);
       };
       document.addEventListener('pointermove', onMove, true);
       document.addEventListener('pointerup', onUp, true);
@@ -1257,6 +1289,7 @@ export function AnnotationsLayer() {
           />
         ) : null}
         <AnnotationContextToolbar />
+        {visible && tool === 'move' ? <AnnotationResizeOverlay store={strokesStore} /> : null}
         {isActive ? (
           <AnnotationsChrome
             color={color}
@@ -1382,8 +1415,14 @@ function AnnotationsSvg({
         <StrokeNode key={s.id} stroke={s} anchorsById={anchorsById} interactive={selectMode} />
       ))}
       {selectedStrokes.map((s) => (
-        <SelectionHalo key={`halo-${s.id}`} stroke={s} anchorsById={anchorsById} />
+        <SelectionHalo
+          key={`halo-${s.id}`}
+          stroke={s}
+          anchorsById={anchorsById}
+          multi={selectedStrokes.length > 1}
+        />
       ))}
+      <AnnotGroupBbox selectedStrokes={selectedStrokes} anchorsById={anchorsById} />
       {marquee ? (
         <rect
           className="dc-annot-marquee"
@@ -1507,12 +1546,26 @@ function TextEditor({
 function SelectionHalo({
   stroke,
   anchorsById,
+  multi,
 }: {
   stroke: Stroke;
   anchorsById: Map<string, RectStroke | EllipseStroke>;
+  multi: boolean;
 }) {
   const bbox = strokeBBox(stroke, anchorsById);
   if (!bbox) return null;
+  // T17 + post-Wave-2 fix — annotation halo idioms:
+  //   * Single select → 2 px solid border, NO ring, NO corner ticks.
+  //     The resize overlay (T23) renders the corner handles in screen-space,
+  //     so painting SVG ticks here too would duplicate them. The element
+  //     halo uses CSS box-shadow for the 18% ring; the SVG equivalent (a
+  //     second outline rect) reads as "double frame" rather than a halo —
+  //     user feedback flagged this immediately. Solid 2 px is enough signal
+  //     once the resize handles claim the corners.
+  //   * Multi member → 1.5 px solid full accent, no ring, no ticks (group
+  //     bbox above carries the container affordance).
+  // Marquee STAYS dashed (drawn elsewhere) — dashed is reserved for the
+  // ambient group-container + active-gesture idioms per DDR-046 rev 2.
   const pad = 4;
   return (
     <rect
@@ -1522,8 +1575,7 @@ function SelectionHalo({
       height={bbox.h + pad * 2}
       fill="none"
       stroke="var(--accent, #d63b1f)"
-      strokeWidth={1.5}
-      strokeDasharray="4 3"
+      strokeWidth={multi ? 1.5 : 2}
       vectorEffect="non-scaling-stroke"
       pointerEvents="none"
       rx={2}
@@ -1531,6 +1583,76 @@ function SelectionHalo({
   );
 }
 
+// T17 — group bbox dashed rect for multi-stroke annotation selection. Mirrors
+// the element-side GroupBbox idiom (1 px dashed accent + 6 × 6 corner handles).
+function AnnotGroupBbox({
+  selectedStrokes,
+  anchorsById,
+}: {
+  selectedStrokes: readonly Stroke[];
+  anchorsById: Map<string, RectStroke | EllipseStroke>;
+}) {
+  if (selectedStrokes.length < 2) return null;
+  let xMin = Number.POSITIVE_INFINITY;
+  let yMin = Number.POSITIVE_INFINITY;
+  let xMax = Number.NEGATIVE_INFINITY;
+  let yMax = Number.NEGATIVE_INFINITY;
+  let any = false;
+  for (const s of selectedStrokes) {
+    const b = strokeBBox(s, anchorsById);
+    if (!b) continue;
+    any = true;
+    if (b.x < xMin) xMin = b.x;
+    if (b.y < yMin) yMin = b.y;
+    if (b.x + b.w > xMax) xMax = b.x + b.w;
+    if (b.y + b.h > yMax) yMax = b.y + b.h;
+  }
+  if (!any) return null;
+  const pad = 6;
+  const x = xMin - pad;
+  const y = yMin - pad;
+  const w = xMax - xMin + pad * 2;
+  const h = yMax - yMin + pad * 2;
+  const handle = 6;
+  const inset = 3;
+  const handles = [
+    { corner: 'nw', x: x - inset, y: y - inset },
+    { corner: 'ne', x: x + w - handle + inset, y: y - inset },
+    { corner: 'sw', x: x - inset, y: y + h - handle + inset },
+    { corner: 'se', x: x + w - handle + inset, y: y + h - handle + inset },
+  ];
+  return (
+    <g pointerEvents="none">
+      <rect
+        x={x}
+        y={y}
+        width={w}
+        height={h}
+        fill="none"
+        stroke="var(--accent, #d63b1f)"
+        strokeWidth={1}
+        strokeDasharray="4 3"
+        vectorEffect="non-scaling-stroke"
+        rx={2}
+      />
+      {handles.map((c) => (
+        <rect
+          key={c.corner}
+          x={c.x}
+          y={c.y}
+          width={handle}
+          height={handle}
+          fill="var(--accent, #d63b1f)"
+          stroke="var(--bg-0, #ffffff)"
+          strokeWidth={1}
+          vectorEffect="non-scaling-stroke"
+          rx={1}
+        />
+      ))}
+    </g>
+  );
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Stroke renderer
 

package/plugins/design/dev-server/api.ts

@@ -155,7 +155,7 @@ export interface Api {
   saveAnnotations(file: string, svg: string): Promise<boolean>;
   // Aggregate data
   buildIndexData(): Promise<unknown>;
-  buildSystemData(): Promise<unknown>;
+  buildSystemData(dsName?: string | null): Promise<unknown>;
   // Export history (Phase 6.5 T10)
   loadExportHistory(): Promise<ExportHistoryEntry[]>;
   appendExportHistory(entry: ExportHistoryEntry): Promise<void>;
@@ -765,9 +765,34 @@ export function createApi(ctx: Context, onCommentsChanged: (file: string) => voi
     return tokens;
   }
 
-  async function buildSystemData() {
-    const sysAbs = path.join(paths.designRoot, paths.systemDirRel);
-    const sysRel = path.posix.join(paths.designRel, paths.systemDirRel);
+  /**
+   * Build the System view payload.
+   *
+   * - When `dsName` is null/undefined, scope to the top-level system dir
+   *   (`paths.systemDirRel`) and read tokens from `cfg.tokensCssRel`. This is
+   *   the legacy single-DS shape every pre-DDR-048 caller sees.
+   * - When `dsName` is provided, scope to the matching `designSystems[]` entry:
+   *   `sysAbs`/`sysRel` point at the DS folder, `tokensAbs` reads from the
+   *   per-DS `tokensCssRel` (auto-resolved by `normalizeDesignSystems`), and
+   *   the previews/ui_kits galleries are restricted to that DS subtree.
+   *
+   * Returns `null` when `dsName` is set but not found in `cfg.designSystems` so
+   * the HTTP handler can 404 instead of silently falling back.
+   *
+   * DDR-048 — system view renders user tokens only; the per-DS scope is what
+   * keeps multi-DS projects from blending the wrong tokens into the wrong
+   * preview gallery.
+   */
+  async function buildSystemData(dsName?: string | null) {
+    let dsEntry: NonNullable<typeof cfg.designSystems>[number] | null = null;
+    if (dsName) {
+      dsEntry = cfg.designSystems?.find((d) => d.name === dsName) ?? null;
+      if (!dsEntry) return null;
+    }
+
+    const scopedSystemRel = dsEntry ? dsEntry.path : paths.systemDirRel;
+    const sysAbs = path.join(paths.designRoot, scopedSystemRel);
+    const sysRel = path.posix.join(paths.designRel, scopedSystemRel);
 
     let readme: string | null = null;
     let readmePath: string | null = null;
@@ -794,8 +819,12 @@ export function createApi(ctx: Context, onCommentsChanged: (file: string) => voi
 
     let tokens: ReturnType<typeof parseTokens> = [];
     let tokensPath: string | null = null;
+    // Per-DS tokens path (auto-resolved by normalizeDesignSystems) wins; the
+    // top-level cfg.tokensCssRel is a project-wide fallback for legacy
+    // single-DS configs that don't declare `designSystems[]`. DDR-048.
+    const tokensCssRel = dsEntry?.tokensCssRel ?? cfg.tokensCssRel;
     try {
-      const tokensAbs = path.join(paths.designRoot, cfg.tokensCssRel);
+      const tokensAbs = path.join(paths.designRoot, tokensCssRel);
       const css = await readFile(tokensAbs, 'utf8');
       tokens = parseTokens(css);
       tokensPath = path.relative(paths.repoRoot, tokensAbs);
@@ -812,16 +841,21 @@ export function createApi(ctx: Context, onCommentsChanged: (file: string) => voi
     async function galleryFor(folderName: string) {
       const matches: { abs: string; rel: string }[] = [];
       try {
-        const subs = await readdir(sysAbs, { withFileTypes: true });
-        for (const s of subs) {
-          if (!s.isDirectory()) continue;
-          const candidate = path.join(sysAbs, s.name, folderName);
-          try {
-            const st = await statp(candidate);
-            if (st.isDirectory())
-              matches.push({ abs: candidate, rel: path.posix.join(sysRel, s.name, folderName) });
-          } catch {
-            /* ignore */
+        // When scoped to a single DS (sysAbs IS the DS folder), only check
+        // the DS-relative `<folderName>` subdir — scanning sub-dirs here
+        // would treat the DS's own `preview/` as a sibling DS root.
+        if (!dsEntry) {
+          const subs = await readdir(sysAbs, { withFileTypes: true });
+          for (const s of subs) {
+            if (!s.isDirectory()) continue;
+            const candidate = path.join(sysAbs, s.name, folderName);
+            try {
+              const st = await statp(candidate);
+              if (st.isDirectory())
+                matches.push({ abs: candidate, rel: path.posix.join(sysRel, s.name, folderName) });
+            } catch {
+              /* ignore */
+            }
           }
         }
         try {
@@ -856,10 +890,29 @@ export function createApi(ctx: Context, onCommentsChanged: (file: string) => voi
     const previewGallery = await galleryFor('preview');
     const uiKitsGallery = await galleryFor('ui_kits');
 
+    // Always advertise the available DSes so the client can render the picker
+    // even when the initial fetch was unscoped — avoids a second roundtrip.
+    const availableDesignSystems = (cfg.designSystems ?? []).map((d) => ({
+      name: d.name,
+      path: d.path,
+      description: d.description ?? null,
+    }));
+
     return {
       project: cfg.name,
       designRoot: paths.designRel,
       systemDir: sysRel,
+      ds: dsEntry
+        ? {
+            name: dsEntry.name,
+            path: dsEntry.path,
+            description: dsEntry.description ?? null,
+            rootClass: dsEntry.rootClass ?? null,
+            themeDefault: dsEntry.themeDefault ?? null,
+          }
+        : null,
+      availableDesignSystems,
+      defaultDesignSystem: cfg.defaultDesignSystem ?? availableDesignSystems[0]?.name ?? null,
       readme,
       readmePath,
       tokens,
@@ -867,8 +920,8 @@ export function createApi(ctx: Context, onCommentsChanged: (file: string) => voi
       tokensPath,
       previewGallery,
       uiKitsGallery,
-      rootClass: cfg.rootClass,
-      themeDefault: cfg.themeDefault,
+      rootClass: dsEntry?.rootClass ?? cfg.rootClass,
+      themeDefault: dsEntry?.themeDefault ?? cfg.themeDefault,
       teamAccentDefault: cfg.teamAccentDefault,
     };
   }

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

@@ -0,0 +1,170 @@
+/**
+ * @file       artboard-marquee.tsx — Task 24 sub-item (Wave 2 follow-up, G8)
+ * @scope      plugins/design/dev-server/artboard-marquee.tsx
+ * @purpose    Drag-to-lasso multi-select for artboards. Bare-button pointerdown
+ *             on empty world (NOT inside any artboard, NOT on floating chrome)
+ *             starts a marquee. 4 px drag threshold suppresses click jitter.
+ *             pointerup intersects the marquee AABB with every artboard's
+ *             screen-coord bbox; hits become Selection entries with
+ *             `artboardId` set. Modifier semantics — bare = replace, Shift
+ *             = add (Alt-subtract / Shift+Alt-intersect are deferred).
+ *
+ *             The marquee rect itself follows DDR-046 rev 2: 1 px solid
+ *             accent border + 8 % accent fill. SOLID, not dashed — solid +
+ *             tinted fill = "active gesture" idiom, dashed = persistent
+ *             group bbox.
+ */
+
+import { useEffect, useRef } from 'react';
+
+import { useArtboardsContext } from './canvas-lib.tsx';
+import { type Selection, useSelectionSet } from './use-selection-set.tsx';
+import { useToolMode } from './use-tool-mode.tsx';
+
+const DRAG_THRESHOLD_PX = 4;
+
+const MARQUEE_CSS = `
+.dc-cv-marquee {
+  position: fixed;
+  pointer-events: none;
+  z-index: 5;
+  border: 1px solid var(--accent, #0d99ff);
+  background: color-mix(in oklab, var(--accent, #0d99ff) 8%, transparent);
+  display: none;
+}
+`.trim();
+
+function ensureMarqueeStyles(): void {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById('dc-cv-marquee-css')) return;
+  const s = document.createElement('style');
+  s.id = 'dc-cv-marquee-css';
+  s.textContent = MARQUEE_CSS;
+  document.head.appendChild(s);
+}
+
+function shouldIgnoreTarget(t: EventTarget | null): boolean {
+  if (!t || !(t as Element).closest) return true;
+  const el = t as Element;
+  // Skip if the pointerdown landed inside any artboard — that's a select-
+  // or-drag gesture, not a marquee. Same hard ceiling as resolveHoverTarget.
+  if (el.closest('[data-dc-screen]')) return true;
+  // Skip floating chrome and existing overlays (their click handlers run).
+  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'
+    )
+  ) {
+    return true;
+  }
+  return false;
+}
+
+export function ArtboardMarqueeOverlay() {
+  ensureMarqueeStyles();
+  const selSet = useSelectionSet();
+  const artboardsCtx = useArtboardsContext();
+  const { tool } = useToolMode();
+  const overlayRef = useRef<HTMLDivElement | null>(null);
+  const stateRef = useRef<{
+    pointerId: number;
+    startX: number;
+    startY: number;
+    crossed: boolean;
+    shift: boolean;
+  } | null>(null);
+
+  useEffect(() => {
+    if (tool !== 'move') return;
+    if (typeof document === 'undefined') return;
+
+    const onDown = (e: PointerEvent) => {
+      if (e.button !== 0) return;
+      // Bare or Shift only — Cmd/Ctrl/Alt clicks belong to other gestures
+      // (Cmd-select, Alt-copy-drag) and shouldn't start a marquee.
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+      if (shouldIgnoreTarget(e.target)) return;
+      stateRef.current = {
+        pointerId: e.pointerId,
+        startX: e.clientX,
+        startY: e.clientY,
+        crossed: false,
+        shift: e.shiftKey,
+      };
+    };
+
+    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;
+        // Per post-Wave-2 feedback, the marquee never pre-emptively clears
+        // the existing selection. The set is only updated on pointerup if
+        // the marquee actually captured something — empty-marquee + bare-
+        // click preserve the previous selection. Esc is the only deselect.
+      }
+      const div = overlayRef.current;
+      if (!div) return;
+      const left = Math.min(s.startX, e.clientX);
+      const top = Math.min(s.startY, e.clientY);
+      const w = Math.abs(dx);
+      const h = Math.abs(dy);
+      div.style.display = 'block';
+      div.style.left = `${left}px`;
+      div.style.top = `${top}px`;
+      div.style.width = `${w}px`;
+      div.style.height = `${h}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;
+      if (!artboardsCtx) return;
+
+      // Intersect the marquee AABB with each artboard's screen-coord bbox.
+      // getBoundingClientRect on the article reads the post-zoom, post-pan
+      // screen position — exactly what we want, no manual world↔screen math.
+      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 hits: Selection[] = [];
+      for (const r of artboardsCtx.artboards) {
+        const el = document.querySelector(`[data-dc-screen="${r.id}"]`);
+        if (!el) continue;
+        const b = (el as HTMLElement).getBoundingClientRect();
+        if (b.width === 0 && b.height === 0) continue;
+        // AABB intersection test — any overlap counts as a hit.
+        if (b.right < left || b.left > right) continue;
+        if (b.bottom < top || b.top > bottom) continue;
+        hits.push({
+          selector: `[data-dc-screen="${r.id}"]`,
+          artboardId: r.id,
+        });
+      }
+      if (hits.length === 0) return;
+      if (s.shift) selSet.add(hits);
+      else selSet.replace(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, artboardsCtx]);
+
+  return <div ref={overlayRef} className="dc-cv-marquee" aria-hidden="true" />;
+}