feat(studio): shape and simplify menu on an automation selection

Right-click inside an active time-selection rectangle on an automation
lane now opens a menu offering the four utility shapes (Ramp up, Ramp
down, Swell, Dip) and Simplify, composing generateShape/simplifyPoints
with pointsIn/replaceRange from the prior selection tasks. A point's own
right-click still stops propagation and deletes it, unaffected.

Author: vanceingalls

packages/studio/src/player/components/AutomationSelectionMenu.tsx

@@ -0,0 +1,68 @@
+/**
+ * Context menu for a right-click inside an automation time selection: the four
+ * utility shapes, then Simplify. Portal + dismiss handling mirror
+ * TrackGapContextMenu; rows never vanish — an inapplicable Simplify dims with
+ * a reason instead of leaving a shorter menu.
+ */
+import { memo } from "react";
+import { createPortal } from "react-dom";
+import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
+import { AUTOMATION_SHAPES, type AutomationShapeId } from "./automationShapes";
+
+interface AutomationSelectionMenuProps {
+  x: number;
+  y: number;
+  onClose(): void;
+  onInsertShape(shape: AutomationShapeId): void;
+  onSimplify(): void;
+  /** At least three points in the range — fewer has nothing to thin. */
+  canSimplify: boolean;
+}
+
+export const AutomationSelectionMenu = memo(function AutomationSelectionMenu({
+  x,
+  y,
+  onClose,
+  onInsertShape,
+  onSimplify,
+  canSimplify,
+}: AutomationSelectionMenuProps) {
+  const menuRef = useContextMenuDismiss(onClose);
+  const row =
+    "block w-full px-2 py-1 text-left text-[11px] text-panel-text-1 hover:bg-panel-bg-3 disabled:opacity-40";
+  return createPortal(
+    <div
+      ref={menuRef}
+      className="hf-automation-menu fixed z-50 min-w-[140px] rounded border border-panel-border-input bg-panel-bg-2 py-1 shadow-lg"
+      style={{ left: x, top: y }}
+    >
+      {AUTOMATION_SHAPES.map((shape) => (
+        <button
+          key={shape.id}
+          type="button"
+          className={row}
+          onClick={() => {
+            onInsertShape(shape.id);
+            onClose();
+          }}
+        >
+          {shape.label}
+        </button>
+      ))}
+      <div className="my-1 border-t border-panel-border-input" />
+      <button
+        type="button"
+        className={row}
+        disabled={!canSimplify}
+        title={canSimplify ? undefined : "Fewer than three points in the selection"}
+        onClick={() => {
+          onSimplify();
+          onClose();
+        }}
+      >
+        Simplify
+      </button>
+    </div>,
+    document.body,
+  );
+});

packages/studio/src/player/components/TimelineAutomationLane.test.tsx

@@ -649,3 +649,40 @@ describe("TimelineAutomationLane range selection", () => {
     expect(props.onCommit).toHaveBeenCalled();
   });
 });
+
+describe("TimelineAutomationLane selection menu", () => {
+  it("right-click inside the selection opens the shape menu", () => {
+    const { container, svg } = mount(ramp, { rangeSelection: { t0: 1, t1: 3 } });
+    fire(svg, "contextmenu", at(2, 0.5));
+    expect(document.querySelector(".hf-automation-menu")).not.toBeNull();
+    // The menu portals to document.body, outside `container` — dismiss it via
+    // Escape before tearing down, or it leaks into the next test's DOM query.
+    const escape = new Event("keydown", { bubbles: true, cancelable: true });
+    Object.assign(escape, { key: "Escape" });
+    act(() => {
+      document.dispatchEvent(escape);
+    });
+    expect(document.querySelector(".hf-automation-menu")).toBeNull();
+    act(() => container.remove());
+  });
+
+  it("inserting a swell replaces the range and commits once", () => {
+    const { svg, props } = mount(ramp, { rangeSelection: { t0: 1, t1: 3 } });
+    fire(svg, "contextmenu", at(2, 0.5));
+    const swell = Array.from(
+      document.querySelectorAll<HTMLButtonElement>(".hf-automation-menu button"),
+    ).find((b) => b.textContent === "Swell");
+    expect(swell).toBeTruthy();
+    act(() => swell?.click());
+    expect(props.onCommit).toHaveBeenCalledTimes(1);
+    const points =
+      (props.onCommit.mock.calls.at(-1)?.[0] as HfAutomation | undefined)?.lanes[0]?.points ?? [];
+    expect(points.some((p) => p.t === 2 && p.v === 1)).toBe(true); // peak at range.max
+  });
+
+  it("right-click outside the selection does not open it", () => {
+    const { svg } = mount(ramp, { rangeSelection: { t0: 1, t1: 3 } });
+    fire(svg, "contextmenu", at(3.8, 0.5));
+    expect(document.querySelector(".hf-automation-menu")).toBeNull();
+  });
+});

packages/studio/src/player/components/TimelineAutomationLane.tsx

@@ -14,7 +14,14 @@
  * same principle the property panel's controls follow.
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type MouseEvent as ReactMouseEvent,
+} from "react";
 import {
   resolveAutomationRange,
   sampleAutomationLane,
@@ -34,7 +41,11 @@ import {
 } from "./automationLaneGeometry";
 import { useAutomationLaneGestures } from "./useAutomationLaneGestures";
 import { AutomationValueInput } from "./AutomationValueInput";
+import { AutomationSelectionMenu } from "./AutomationSelectionMenu";
 import { AUTOMATION_LANE_H } from "./automationLaneHeight";
+import { generateShape, type AutomationShapeId } from "./automationShapes";
+import { simplifyPoints } from "./automationSimplify";
+import { pointsIn, replaceRange } from "./automationLaneSelection";
 import { getTimelineLaneTop } from "./timelineLayout";
 import type { TimelineElement } from "../store/playerStore";
 import type { UseAutomationLanesResult } from "./useAutomationLanes";
@@ -207,6 +218,44 @@ export function TimelineAutomationLane({
     [lane, commitPoints, readOnly],
   );
 
+  /** Client-coordinate position of an open selection menu, or null when closed. */
+  const [menuAt, setMenuAt] = useState<{ x: number; y: number } | null>(null);
+
+  const insertShape = useCallback(
+    (shape: AutomationShapeId): void => {
+      if (!rangeSelection) return;
+      const inner = generateShape({
+        shape,
+        lane,
+        range,
+        t0: rangeSelection.t0,
+        t1: rangeSelection.t1,
+      });
+      commitPoints(replaceRange({ lane, range, ...rangeSelection, inner }), true);
+    },
+    [rangeSelection, lane, range, commitPoints],
+  );
+
+  const simplifySelection = useCallback((): void => {
+    if (!rangeSelection) return;
+    const inner = simplifyPoints(pointsIn(lane, rangeSelection.t0, rangeSelection.t1), range);
+    commitPoints(replaceRange({ lane, range, ...rangeSelection, inner }), true);
+  }, [rangeSelection, lane, range, commitPoints]);
+
+  // A point's own right-click already stops propagation and still deletes;
+  // this only fires when the press lands on the background inside the
+  // active selection.
+  const onSvgContextMenu = useCallback(
+    (e: ReactMouseEvent<SVGSVGElement>): void => {
+      if (readOnly || !rangeSelection) return;
+      const { t } = pointAt(e.clientX, e.clientY);
+      if (t < rangeSelection.t0 || t > rangeSelection.t1) return;
+      e.preventDefault();
+      setMenuAt({ x: e.clientX, y: e.clientY });
+    },
+    [readOnly, rangeSelection, pointAt],
+  );
+
   const currentValue =
     lane.points.length > 0 && playheadSec !== null
       ? sampleAutomationLane(lane, playheadSec, range.scale)
@@ -247,6 +296,7 @@ export function TimelineAutomationLane({
         onPointerUp={gestures.endDrag}
         onPointerCancel={gestures.endDrag}
         onDoubleClick={gestures.onDoubleClick}
+        onContextMenu={onSvgContextMenu}
         role="group"
         aria-label={`${range.label} automation`}
       >
@@ -347,6 +397,17 @@ export function TimelineAutomationLane({
           {hint}
         </div>
       ) : null}
+
+      {menuAt && rangeSelection ? (
+        <AutomationSelectionMenu
+          x={menuAt.x}
+          y={menuAt.y}
+          onClose={() => setMenuAt(null)}
+          onInsertShape={insertShape}
+          onSimplify={simplifySelection}
+          canSimplify={pointsIn(lane, rangeSelection.t0, rangeSelection.t1).length >= 3}
+        />
+      ) : null}
     </div>
   );
 }