@1agh/maude 0.46.0 → 0.47.0

package/apps/studio/grid-track-handles.ts

@@ -0,0 +1,179 @@
+/**
+ * @file       grid-track-handles.ts — feature-3-web-artboards T5 (absorbed
+ *             feature-grid-track-editor stub).
+ * @purpose    Pure geometry + value math for the on-canvas grid gutter
+ *             drag-resize overlay. Framework-free (unit-testable without a
+ *             DOM), mirroring `spacing-handles.ts`'s shape exactly — this is
+ *             the CSS-Grid sibling of that flex/box-model module, deferred
+ *             there in a doc comment ("CSS-Grid gap editing is out of v1
+ *             scope — grid tracks are a separate follow-up plan").
+ *
+ *             Track SIZING math is a two-layer split, same idiom as the
+ *             padding/gap overlay: geometry (gutter positions) reads the
+ *             browser's RESOLVED px sizes (the caller reads
+ *             `getComputedStyle(el).gridTemplateColumns` — the browser
+ *             already ran the grid-sizing algorithm, resolving `fr`/`auto`/
+ *             `%` tracks to concrete px, so this module never re-implements
+ *             that algorithm); DRAG math re-derives a new AUTHORED value
+ *             (the JSX-authored unit — px/%/fr/em — read from the element's
+ *             inline style, since these on-canvas tools only edit inline-
+ *             style-authored values, same constraint as every other curated
+ *             knob) from the ratio between the target resolved size and the
+ *             track's CURRENT resolved size.
+ */
+
+export type GridTrackUnit = 'px' | '%' | 'fr' | 'em' | 'auto' | 'min-content' | 'max-content';
+
+export const GRID_KEYWORD_UNITS: ReadonlySet<GridTrackUnit> = new Set([
+  'auto',
+  'min-content',
+  'max-content',
+]);
+
+export interface GridTrack {
+  /** Numeric value; 0 (ignored) for keyword-only units. */
+  value: number;
+  unit: GridTrackUnit;
+}
+
+const NUMERIC_TRACK_RE = /^(-?\d+(?:\.\d+)?)(px|%|fr|em)$/;
+
+/**
+ * Parse a `grid-template-columns`/`grid-template-rows` value into a track
+ * list. Handles a plain space-separated list of numeric (px/%/fr/em) and
+ * keyword (auto/min-content/max-content) tracks. Returns `[]` for an empty
+ * string OR anything it can't parse token-for-token (e.g. `repeat(...)`,
+ * `minmax(...)`, `subgrid`) — the caller treats an empty parse as "no
+ * drag-editable tracks", falling back to the Inspector's raw-value field
+ * rather than guessing at a lossy round-trip.
+ */
+export function parseTrackList(raw: string | null | undefined): GridTrack[] {
+  const s = (raw ?? '').trim();
+  if (!s) return [];
+  const parts = s.split(/\s+/);
+  const out: GridTrack[] = [];
+  for (const part of parts) {
+    if (GRID_KEYWORD_UNITS.has(part as GridTrackUnit)) {
+      out.push({ value: 0, unit: part as GridTrackUnit });
+      continue;
+    }
+    const m = NUMERIC_TRACK_RE.exec(part);
+    if (!m) return [];
+    out.push({ value: Number(m[1]), unit: m[2] as GridTrackUnit });
+  }
+  return out;
+}
+
+/** Serialize a track list back to a `grid-template-columns`/`-rows` value —
+ *  the inverse of `parseTrackList`. `fr` (and every other unit) round-trips
+ *  byte-for-byte modulo the `round2` value rounding applied during drag. */
+export function serializeTrackList(tracks: GridTrack[]): string {
+  return tracks
+    .map((t) => (GRID_KEYWORD_UNITS.has(t.unit) ? t.unit : `${round2(t.value)}${t.unit}`))
+    .join(' ');
+}
+
+export interface ScreenRect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export interface GutterLine {
+  /** Index of the track BEFORE this gutter; track `index + 1` is after it. */
+  index: number;
+  axis: 'x' | 'y';
+  x: number;
+  y: number;
+}
+
+/**
+ * Compute gutter handle positions from a grid container's screen rect, each
+ * track's RESOLVED size in screen px (already zoom-scaled — same convention
+ * as `computePaddingLines`'s `padding` argument), and the resolved gap
+ * between tracks. One gutter per adjacent pair, positioned at the gap's
+ * midpoint. Fewer than 2 tracks → no gutters.
+ */
+export function computeGutterLines(
+  rect: ScreenRect,
+  resolvedSizesPx: number[],
+  gapPx: number,
+  axis: 'col' | 'row'
+): GutterLine[] {
+  if (resolvedSizesPx.length < 2) return [];
+  const out: GutterLine[] = [];
+  let cum = axis === 'col' ? rect.x : rect.y;
+  for (let i = 0; i < resolvedSizesPx.length - 1; i++) {
+    cum += resolvedSizesPx[i] as number;
+    const mid = cum + gapPx / 2;
+    if (axis === 'col') {
+      out.push({ index: i, axis: 'x', x: mid, y: rect.y + rect.h / 2 });
+    } else {
+      out.push({ index: i, axis: 'y', x: rect.x + rect.w / 2, y: mid });
+    }
+    cum += gapPx;
+  }
+  return out;
+}
+
+/**
+ * New AUTHORED value for one track being dragged, given the screen-px delta
+ * (world units — the caller already divides by zoom, same convention as
+ * `computePaddingDrag`/`computeGapDrag`... actually this one takes the RAW
+ * screen delta + zoom together, dividing internally, to match those two
+ * functions' own signature exactly) and the track's CURRENT resolved px size.
+ *
+ * - `px` / `em` — additive: 1 world px of drag = 1 unit (em is treated as a
+ *   px-equivalent for drag purposes — a precise em→px conversion would need
+ *   the element's own font-size; this is a disclosed simplification, same
+ *   spirit as the rest of this drag lane favoring predictable math over
+ *   pixel-perfect unit fidelity mid-drag).
+ * - `fr` / `%` — proportional SHARE units, not absolute sizes: the new value
+ *   is the OLD value scaled by (targetResolvedPx / currentResolvedPx) — the
+ *   same "re-derive the ratio" approach a flex-grow-style drag uses. Clamped
+ *   to a small positive floor so a track never collapses to (or past) zero
+ *   share.
+ * - keyword tracks (auto/min-content/max-content) have no numeric value —
+ *   returns the track unchanged; the caller must not offer this as a
+ *   drag target (see `gutterTrackIndices` — the hook filters keyword-only
+ *   tracks out of the touched set before calling this).
+ */
+export function computeTrackDrag(
+  track: GridTrack,
+  resolvedPx: number,
+  dxScreen: number,
+  dyScreen: number,
+  zoom: number,
+  axis: 'x' | 'y'
+): number {
+  if (GRID_KEYWORD_UNITS.has(track.unit)) return track.value;
+  const z = zoom > 0 ? zoom : 1;
+  const d = (axis === 'x' ? dxScreen : dyScreen) / z;
+  if (track.unit === 'px' || track.unit === 'em') {
+    return Math.max(0, round2(track.value + d));
+  }
+  const targetPx = Math.max(1, resolvedPx + d);
+  if (resolvedPx <= 0) return track.value; // no ratio to derive from — no-op
+  const ratio = targetPx / resolvedPx;
+  const floor = track.unit === '%' ? 1 : 0.1;
+  return Math.max(floor, round2(track.value * ratio));
+}
+
+/**
+ * Which track indices a gutter drag touches, given the Shift modifier —
+ * mirrors `paddingSideSet`'s Alt/Shift convention: plain drag touches only
+ * the track BEFORE the gutter; Shift touches BOTH neighbors (each driven to
+ * its own new value from the SAME cursor delta — "symmetric" in this
+ * codebase's established vocabulary means both move together, not an
+ * inversely-linked splitter, matching how `paddingSideSet`'s Alt sets both
+ * opposite padding sides to the identical dragged value rather than trading
+ * space between them).
+ */
+export function gutterTrackIndices(gutterIndex: number, shiftKey: boolean): number[] {
+  return shiftKey ? [gutterIndex, gutterIndex + 1] : [gutterIndex];
+}
+
+function round2(n: number): number {
+  return Math.round(n * 100) / 100;
+}

package/apps/studio/handoff.ts

@@ -80,6 +80,15 @@ export interface RegistryItem {
     light?: Record<string, string>;
     dark?: Record<string, string>;
   };
+  /**
+   * shadcn's generic item-specific-metadata extension point. feature-3-web-
+   * artboards T6 — carries the resolved artboard `kind` (`digital` | `print`
+   * | `web` | `video` | `mixed`) so a consumer (or a future re-import) knows
+   * what authoring contract produced this drop without re-parsing the TSX.
+   */
+  meta?: {
+    kind: string;
+  };
 }
 
 export interface EmitOptions {
@@ -103,6 +112,31 @@ export interface EmitOptions {
   designRoot?: string;
 }
 
+// ---------------------------------------------------------------------------
+// feature-3-web-artboards T6 — thread the artboard kind into the emitted
+// registry-item's `meta` (a first-class shadcn registry-item.json extension
+// point for item-specific metadata, not a maude-invented field). A regex scan
+// is deliberate here (not an AST walk like stripDataCdId) — this only needs
+// the `kind="…"` string values, never a node reference to edit.
+
+/**
+ * Resolve a single `kind` value for the whole canvas file, from its
+ * `<DCArtboard kind="…">` occurrences. A canvas with zero explicit `kind`
+ * attributes resolves to `'digital'` (DCArtboard's own implicit default). A
+ * canvas whose artboards carry more than one distinct explicit kind (e.g. a
+ * multi-breakpoint web canvas assembled via "Duplicate at width…" next to an
+ * unrelated screen) resolves to `'mixed'` rather than picking one arbitrarily.
+ */
+export function resolveCanvasKind(rawSource: string): string {
+  const kinds = new Set<string>();
+  for (const m of rawSource.matchAll(/<DCArtboard\b[^>]*\bkind="([a-z]+)"/g)) {
+    if (m[1]) kinds.add(m[1]);
+  }
+  if (kinds.size === 0) return 'digital';
+  if (kinds.size === 1) return [...kinds][0] as string;
+  return 'mixed';
+}
+
 // ---------------------------------------------------------------------------
 // Strip data-cd-id from source — the inverse of canvas-pipeline.ts pass 1.
 
@@ -668,6 +702,7 @@ export async function emitRegistryItem(opts: EmitOptions): Promise<RegistryItem>
     registryDependencies,
     files,
     ...(cssVars ? { cssVars } : {}),
+    meta: { kind: resolveCanvasKind(rawTsx) },
   };
 
   // Drop undefined keys for a clean JSON.

package/apps/studio/http.ts

@@ -2221,6 +2221,70 @@ export function createHttp(
       );
     },
 
+    '/_api/convert-to-absolute': async (req: Request) => {
+      // feature-4 T8 (convert-to-absolute, DDR-188) — "Remove auto layout": POST
+      // { canvas, containerId, containerIdIndex?, containerSetRelative,
+      //   children: [{ id, idIndex?, left, top, width, height }] } →
+      // api.convertChildrenToAbsoluteOp. ONE whole-file undo seq. MAIN-ORIGIN
+      // ONLY (absent from both allowlists); sameOriginWrite + loopback-Host gated
+      // — same DDR-054 posture as /_api/insert-element.
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const body = await readJson<{
+        canvas?: unknown;
+        containerId?: unknown;
+        containerIdIndex?: unknown;
+        containerSetRelative?: unknown;
+        allowShared?: unknown;
+        children?: unknown;
+        containers?: unknown;
+        dissolve?: unknown;
+      }>(req, 256 * 1024);
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.convertChildrenToAbsoluteOp(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, seq: result.seq },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/detach-component': async (req: Request) => {
+      // feature-4 detach-component (2026-07-19) — POST { canvas, id, idIndex? }
+      // → api.detachComponentOp (clone definition + repoint this usage; one
+      // whole-file undo seq). MAIN-ORIGIN ONLY; sameOriginWrite + loopback-Host
+      // gated — same DDR-054 posture as the other structural writes.
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const body = await readJson<{ canvas?: unknown; id?: unknown; idIndex?: unknown }>(
+        req,
+        8 * 1024
+      );
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.detachComponentOp(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, detachedName: result.detachedName, seq: result.seq },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
     '/_api/duplicate-element': async (req: Request) => {
       // Cmd+D (Task L3) — duplicate an element (a copy as the next sibling). POST
       // { canvas, id, idIndex? } → api.duplicateElementOp. Whole-file undo seq.
@@ -2280,6 +2344,38 @@ export function createHttp(
       );
     },
 
+    '/_api/duplicate-artboard': async (req: Request) => {
+      // feature-3-web-artboards T3 — "Duplicate at width…". POST
+      // { canvas, artboardId, width } → api.duplicateArtboardOp (clones the
+      // artboard as the next sibling with a suffixed id/label + the new
+      // width; every other prop, incl. kind/guides/print, carries over
+      // verbatim). Whole-file undo seq. MAIN-ORIGIN ONLY (absent from both
+      // allowlists); sameOriginWrite + loopback-Host gated, same posture as
+      // /_api/insert-artboard above.
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const body = await readJson<{
+        canvas?: unknown;
+        artboardId?: unknown;
+        width?: unknown;
+      }>(req, 8 * 1024);
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.duplicateArtboardOp(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, artboardId: result.artboardId, seq: result.seq },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
     '/_api/assets': async (req: Request) => {
       // Stage F1 (feature-element-editing-robustness) — list content-addressed
       // image/video assets under <designRoot>/assets/ for the AssetPicker (Replace
@@ -2340,6 +2436,28 @@ export function createHttp(
       return Response.json(result, { headers: { 'Cache-Control': 'no-store' } });
     },
 
+    '/_api/component-map': async (req: Request) => {
+      // feature-4 T7a — Layers-panel purple instance rows. GET ?canvas →
+      // { ok, map: { [cdId]: { component, root, usages } } }. READ-only parse
+      // (same posture as /_api/edit-scope). MAIN-ORIGIN ONLY: absent from
+      // CANVAS_SAFE_API + startCanvasServer routes (DDR-054); loopback-Host
+      // gated; no sameOriginWrite (GET).
+      if (req.method !== 'GET') return new Response('Method not allowed', { status: 405 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const url = new URL(req.url);
+      const result = await api.componentMapOp({
+        canvas: url.searchParams.get('canvas') ?? undefined,
+      });
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(result, { headers: { 'Cache-Control': 'no-store' } });
+    },
+
     '/_api/resize-artboard': async (req: Request) => {
       // Stage D4 — free-hand artboard resize. POST { canvas, artboardId, width?,
       // height? } → api.resizeArtboardOp (writes the NUMERIC width/height props on

package/apps/studio/input-router.tsx

@@ -64,6 +64,12 @@ export function crossedDragThreshold(
  * can grab them natively.
  */
 export type Tool =
+  // feature-4 (browse/move split) — `browse` is the BOOT default: a pure
+  // native pass-through so a freshly-opened mock stays ALIVE (buttons click,
+  // links follow, inputs focus). It carries ZERO select machinery — the router
+  // returns `no-op` for every browse-tool pointer event so descendants see them
+  // untouched. Pressing V flips to `move` (the select tool). See DDR-187.
+  | 'browse'
   | 'move'
   | 'hand'
   | 'comment'
@@ -113,9 +119,12 @@ export type RouterAction =
       /**
        * `true` resolves to the deepest descendant under the cursor (Cmd-held
        * mode). `false` resolves to the topmost interesting ancestor (top mode).
-       * Phase 4.1 Move-tool selection always uses deep=true — bare clicks
-       * are passthrough (no select), and the only entry points are Cmd
-       * (replace deep) and Cmd+Shift (add deep).
+       * feature-4 (browse/move split, DDR-187) — the Move (select) tool now
+       * fires the FULL Figma ladder: a BARE click selects the TOP-level object
+       * (`deep:false`), Cmd selects the DEEPEST element (`deep:true`), Shift
+       * adds, Cmd+Shift adds-deep. (Pre-feature-4 Move-tool select was
+       * Cmd-only and always deep; bare clicks were passthrough — that role now
+       * belongs to the `browse` tool, which never selects at all.)
        */
       deep: boolean;
       clientX: number;
@@ -210,6 +219,19 @@ export function classify(input: ClassifyInput): RouterAction {
     if (isAnnotationTool(input.activeTool)) return { kind: 'no-op' };
     // Hand tool: drag pan is owned by useViewportController; no hover paint.
     if (input.activeTool === 'hand') return { kind: 'no-op' };
+    // Browse tool (feature-4 boot default): pass-through — no hover halo,
+    // native interactions flow. Cmd-held hover previews the deepest element
+    // (the escape-hatch select affordance, mirroring the old move-tool
+    // behavior); bare hover stays native.
+    if (input.activeTool === 'browse') {
+      if (!metaOrCtrl(input)) return { kind: 'no-op' };
+      return {
+        kind: 'hover',
+        deep: true,
+        clientX: input.clientX ?? 0,
+        clientY: input.clientY ?? 0,
+      };
+    }
     // Comment tool: always paint a preview halo on the deepest element under
     // cursor — that's the element the user is about to comment on. Comment
     // pin attachment is to the same element they were hovering.
@@ -221,12 +243,12 @@ export function classify(input: ClassifyInput): RouterAction {
         clientY: input.clientY ?? 0,
       };
     }
-    // Move tool: bare hover does nothing (native interactions pass through);
-    // Cmd-held hover paints a halo on the deepest element (preview).
-    if (!metaOrCtrl(input)) return { kind: 'no-op' };
+    // Move (select) tool: paint a preview halo of exactly what a click would
+    // select — the TOP-level object on a bare hover (Figma's hover outline),
+    // the DEEPEST element while Cmd is held (deep-select preview).
     return {
       kind: 'hover',
-      deep: true,
+      deep: metaOrCtrl(input),
       clientX: input.clientX ?? 0,
       clientY: input.clientY ?? 0,
     };
@@ -267,17 +289,38 @@ export function classify(input: ClassifyInput): RouterAction {
     // the controller's pointerdown listener on the same host claims the drag.
     if (input.activeTool === 'hand') return { kind: 'no-op' };
 
-    // Move tool. Selection ONLY fires with Cmd / Cmd+Shift. Bare clicks and
-    // Shift-without-Cmd pass through so native canvas interactions (button
-    // presses, link clicks, input focus) still work — exactly the same as
-    // pre-Phase-4.1 behavior for everything except Cmd-modified gestures.
+    // Browse tool (feature-4 boot default): bare/Shift left-clicks pass
+    // through so the mock stays alive (a button press fires, a link follows,
+    // an input focuses). Cmd/Ctrl+click is the ESCAPE HATCH (user steer
+    // 2026-07-19): it selects the deepest element AND the consumer flips the
+    // tool to Move — "I clicked to edit" shouldn't require pressing V first.
+    if (input.activeTool === 'browse') {
+      if (!metaOrCtrl(input)) return { kind: 'no-op' };
+      return {
+        kind: 'select',
+        mode: input.shiftKey ? 'add' : 'replace',
+        deep: true,
+        clientX: input.clientX ?? 0,
+        clientY: input.clientY ?? 0,
+      };
+    }
+
+    // Move (select) tool. feature-4 (DDR-187) — the full Figma ladder:
+    //   bare click       → select TOP-level object   (deep:false, replace)
+    //   Shift+click      → add TOP-level object        (deep:false, add)
+    //   Cmd/Ctrl+click   → select DEEPEST element      (deep:true, replace)
+    //   Cmd+Shift+click  → add DEEPEST element          (deep:true, add)
+    // Bare clicks are claimed (preventDefault) so native canvas interactions do
+    // NOT fire in select mode — that's the browse tool's job. The click-vs-drag
+    // threshold (canvas-shell.tsx ReorderDrag / marquee overlays, all still
+    // gated on `tool === 'move'`) means a press that turns into a drag reorders
+    // / marquees instead; a release-in-place is the select.
     const cmd = metaOrCtrl(input);
-    if (!cmd) return { kind: 'no-op' };
     const shift = !!input.shiftKey;
     return {
       kind: 'select',
       mode: shift ? 'add' : 'replace',
-      deep: true,
+      deep: cmd,
       clientX: input.clientX ?? 0,
       clientY: input.clientY ?? 0,
     };
@@ -434,6 +477,11 @@ export function useInputRouter(opts: UseInputRouterOptions): void {
       // their own clicks. The router is in capture phase, so we have to
       // bail HERE before classify can claim the event.
       if (isOverlayTarget(e.target)) return;
+      // feature-4 text-gestures (2026-07-20) — an ACTIVE inline text editor
+      // (contenteditable) owns its clicks natively: single click places the
+      // caret, dblclick selects a word, triple-click selects all. Claiming
+      // these as `select` killed every in-edit gesture.
+      if (isEditableTarget(e.target)) return;
       const action = claim(
         classify({
           type: 'pointerdown',
@@ -468,6 +516,7 @@ export function useInputRouter(opts: UseInputRouterOptions): void {
      */
     const onMouseDown = (e: MouseEvent): void => {
       if (isOverlayTarget(e.target)) return;
+      if (isEditableTarget(e.target)) return;
       const action = claim(
         classify({
           type: 'pointerdown',
@@ -508,19 +557,26 @@ export function useInputRouter(opts: UseInputRouterOptions): void {
      */
     const onClick = (e: MouseEvent): void => {
       if (isOverlayTarget(e.target)) return;
+      if (isEditableTarget(e.target)) return;
       const tool = getActiveTool();
       const mod = e.metaKey || e.ctrlKey;
       // Map the click to the action kind the matching pointerdown would have
       // produced, then honor the claim allowlist so a scoped router (the
       // comment mount layer) doesn't suppress clicks it never claimed.
+      // feature-4 — in the Move (select) tool EVERY bare left click is a select
+      // (not just Cmd), so its synthetic click must be swallowed too or the
+      // native handler under the just-selected element would still fire. Draw
+      // tools keep the Cmd-only escape-hatch select. Browse claims nothing.
       const wouldRouteKind: RouterAction['kind'] | null =
         tool === 'comment'
           ? 'drop-comment'
-          : tool === 'move' && mod && e.button === 0
+          : tool === 'move' && e.button === 0
             ? 'select'
-            : e.button === 2
-              ? 'context-menu'
-              : null;
+            : (isAnnotationTool(tool) || tool === 'browse') && mod && e.button === 0
+              ? 'select'
+              : e.button === 2
+                ? 'context-menu'
+                : null;
       if (wouldRouteKind && (!claimableActions || claimableActions.has(wouldRouteKind))) {
         e.preventDefault();
         e.stopImmediatePropagation();