@hyperframes/studio 0.8.11 → 0.8.13

package/src/player/components/TimelineTrackPlainHeader.test.tsx

@@ -3,12 +3,15 @@
 /**
  * The visibility control's accessible contract.
  *
- * The audio wording ran behind the `audio-track-mute` canary at 0%, so it had
- * never rendered in any suite: it returned "Muted" / "Mute", which named the
- * CURRENT state rather than the action, and dropped the track suffix so every
- * audio row shared one accessible name. Music plus VO is the ordinary case, so
- * that is two identical buttons. Pinned here because the label and the icon are
- * the whole identity of this control.
+ * The wording ran behind the `audio-track-mute` canary at 0%, so it had never
+ * rendered in any suite: it returned "Muted" / "Mute", which named the CURRENT
+ * state rather than the action, and dropped the track suffix so every audio row
+ * shared one accessible name. Pinned here because the label, the icon and the
+ * callback's arguments are the whole identity of this control.
+ *
+ * The mute presentation itself is gone (`remove mute and solo from tracks and
+ * groups`): the control is the visibility eye it always was, and an audio row
+ * renders it only when already hidden, which is the way back out.
  */
 
 import React, { act } from "react";
@@ -24,7 +27,7 @@ afterEach(() => {
 
 function renderButton(props: {
   hidden: boolean;
-  isAudioTrack?: boolean;
+  visible?: boolean;
   trackDisplayNumber: number | null;
 }): { host: HTMLElement; unmount: () => void; onToggle: ReturnType<typeof vi.fn> } {
   const host = document.createElement("div");
@@ -37,8 +40,7 @@ function renderButton(props: {
         hidden: props.hidden,
         trackNumber: 7,
         trackDisplayNumber: props.trackDisplayNumber,
-        visible: true,
-        isAudioTrack: props.isAudioTrack,
+        visible: props.visible ?? true,
         onToggle,
       }),
     ),
@@ -49,31 +51,7 @@ function renderButton(props: {
 const labelOf = (host: HTMLElement) => host.querySelector("button")?.getAttribute("aria-label");
 
 describe("VisibilityButton", () => {
-  it("names the action, not the state, on an audible audio track", () => {
-    const view = renderButton({ hidden: false, isAudioTrack: true, trackDisplayNumber: 2 });
-    expect(labelOf(view.host)).toBe("Mute track 2");
-    view.unmount();
-  });
-
-  // The half that was wrong: a muted row read "Muted", so nothing told a
-  // screen-reader user that activating it would unmute.
-  it("promises the un-mute when the audio track is already muted", () => {
-    const view = renderButton({ hidden: true, isAudioTrack: true, trackDisplayNumber: 2 });
-    expect(labelOf(view.host)).toBe("Unmute track 2");
-    view.unmount();
-  });
-
-  it("keeps each audio row's name unique, so two tracks are distinguishable", () => {
-    const first = renderButton({ hidden: false, isAudioTrack: true, trackDisplayNumber: 1 });
-    const second = renderButton({ hidden: false, isAudioTrack: true, trackDisplayNumber: 3 });
-    expect(labelOf(first.host)).toBe("Mute track 1");
-    expect(labelOf(second.host)).toBe("Mute track 3");
-    expect(labelOf(first.host)).not.toBe(labelOf(second.host));
-    first.unmount();
-    second.unmount();
-  });
-
-  it("still says Hide/Show on a visual track", () => {
+  it("names the action, not the state", () => {
     const shown = renderButton({ hidden: false, trackDisplayNumber: 2 });
     expect(labelOf(shown.host)).toBe("Hide track 2");
     shown.unmount();
@@ -82,15 +60,34 @@ describe("VisibilityButton", () => {
     hiddenRow.unmount();
   });
 
+  it("keeps each row's name unique, so two tracks are distinguishable", () => {
+    const first = renderButton({ hidden: false, trackDisplayNumber: 1 });
+    const second = renderButton({ hidden: false, trackDisplayNumber: 3 });
+    expect(labelOf(first.host)).toBe("Hide track 1");
+    expect(labelOf(second.host)).toBe("Hide track 3");
+    expect(labelOf(first.host)).not.toBe(labelOf(second.host));
+    first.unmount();
+    second.unmount();
+  });
+
   // The callback acts on the REAL track key; the display row rides along so the
   // undo-history label announces the same row this button just did, instead of
   // re-deriving it from an ordering that has no group anchors in it.
   it("toggles the real track number and passes the row it announced", () => {
-    const view = renderButton({ hidden: false, isAudioTrack: true, trackDisplayNumber: 2 });
+    const view = renderButton({ hidden: false, trackDisplayNumber: 2 });
     view.host.querySelector("button")?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
     expect(view.onToggle).toHaveBeenCalledWith(7, true, 2);
     view.unmount();
   });
+
+  // `visible={false}` renders a SPACER, not nothing: every row's control
+  // columns have to line up whether or not this row offers the control.
+  it("holds the column with a spacer when withheld", () => {
+    const view = renderButton({ hidden: false, visible: false, trackDisplayNumber: 2 });
+    expect(view.host.querySelector("button")).toBeNull();
+    expect(view.host.querySelector("span")).toBeTruthy();
+    view.unmount();
+  });
 });
 
 describe("PlainTrackHeader", () => {
@@ -98,7 +95,6 @@ describe("PlainTrackHeader", () => {
     const host = document.createElement("div");
     document.body.append(host);
     const root = createRoot(host);
-    const onToggleSolo = vi.fn();
     act(() =>
       root.render(
         React.createElement(PlainTrackHeader, {
@@ -110,52 +106,34 @@ describe("PlainTrackHeader", () => {
           isAudioTrack: true,
           onToggleTrackHidden: vi.fn(),
           showTrackLabel: true,
-          isGroupMuted: false,
-          isSoloed: false,
-          onToggleSolo,
           ...overrides,
         }),
       ),
     );
-    return { host, unmount: () => act(() => root.unmount()), onToggleSolo };
+    return { host, unmount: () => act(() => root.unmount()) };
   }
 
-  const soloButton = (host: HTMLElement) =>
-    host.querySelector('button[aria-label="Hear only this"]');
-  const labelSpan = (host: HTMLElement) => host.querySelector("span.min-w-0");
-
-  it("offers solo on an audio track and reports its pressed state", () => {
-    const view = renderHeader({ isSoloed: true });
-    expect(soloButton(view.host)?.getAttribute("aria-pressed")).toBe("true");
-    view.unmount();
-  });
-
-  it("withholds solo from a visual track", () => {
-    const view = renderHeader({ isAudioTrack: false });
-    expect(soloButton(view.host)).toBeNull();
+  // A row that says what it is with a speaker does not also need the hide
+  // affordance sitting in the eye's slot.
+  it("withholds the eye from an audible audio track", () => {
+    const view = renderHeader();
+    expect(view.host.querySelector("button")).toBeNull();
     view.unmount();
   });
 
-  // A group-muted member is silent without being hidden itself, so the strike
-  // is the only thing that says so — and the title has to explain why, since a
-  // user who never touched THIS row's mute is looking for the reason.
-  it("strikes the label through when the row's own mute is on", () => {
+  // Withholding it unconditionally withheld the only way back: `data-hidden`
+  // silences the clip in preview and drops it from the render, and nothing else
+  // writes it, so a track hidden by hand or by "Hide all" was silent with no
+  // control anywhere to restore it.
+  it("offers it back once the audio track is hidden", () => {
     const view = renderHeader({ isTrackHidden: true });
-    expect(labelSpan(view.host)?.className).toContain("line-through");
+    expect(labelOf(view.host)).toBe("Show track 1");
     view.unmount();
   });
 
-  it("strikes it through for a group mute too, and says which", () => {
-    const view = renderHeader({ isGroupMuted: true });
-    expect(labelSpan(view.host)?.className).toContain("line-through");
-    expect(labelSpan(view.host)?.getAttribute("title")).toBe("Voiceover (group muted)");
-    view.unmount();
-  });
-
-  it("leaves an audible row unstruck", () => {
-    const view = renderHeader();
-    expect(labelSpan(view.host)?.className).not.toContain("line-through");
-    expect(labelSpan(view.host)?.getAttribute("title")).toBe("Voiceover");
+  it("keeps the eye on a visual track", () => {
+    const view = renderHeader({ isAudioTrack: false });
+    expect(labelOf(view.host)).toBe("Hide track 1");
     view.unmount();
   });
 });

package/src/player/components/TimelineTrackPlainHeader.tsx

@@ -1,29 +1,18 @@
-import { Eye, EyeSlash, SpeakerHigh, SpeakerSlash } from "@phosphor-icons/react";
+import type React from "react";
+import { Eye, EyeSlash } from "@phosphor-icons/react";
 import { Music } from "../../icons/SystemIcons";
-import { TimelineSoloButton } from "./TimelineSoloButton";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
 import { TrackClipCount } from "./TrackClipCount";
 import { trackDisplaySuffix } from "./timelineTrackDisplay";
 
-/**
- * Audio tracks say "Mute", not "Hide" — the eye IS mute for sound-only rows.
- *
- * Action-phrased and per-track, like the visual branch: `hidden` here is the
- * CURRENT state, so the name has to promise the opposite. It read "Muted" /
- * "Mute" until the rollout, which named the state instead of the action (a
- * screen-reader user could not tell that activating an already-muted row would
- * unmute it) and dropped `suffix`, so every audio row shared one accessible
- * name — music plus VO being the ordinary case. The wording matches the undo
- * entry `timelineTrackVisibility` writes for the same click, where `hidden` is
- * the INCOMING state and the two therefore read inverted.
- */
-function visibilityButtonLabel(showAsMute: boolean, hidden: boolean, suffix: string): string {
-  if (showAsMute) return hidden ? `Unmute track${suffix}` : `Mute track${suffix}`;
+// Hide, plainly. The speaker variant was the mute presentation; with mute gone
+// this is the visibility eye it always was, and audio rows do not render it.
+function visibilityButtonLabel(hidden: boolean, suffix: string): string {
   return hidden ? `Show track${suffix}` : `Hide track${suffix}`;
 }
 
-function visibilityButtonIcon(showAsMute: boolean, hidden: boolean) {
-  const Icon = showAsMute ? (hidden ? SpeakerSlash : SpeakerHigh) : hidden ? EyeSlash : Eye;
+function visibilityButtonIcon(hidden: boolean) {
+  const Icon = hidden ? EyeSlash : Eye;
   return <Icon size={14} weight="bold" aria-hidden="true" />;
 }
 
@@ -32,22 +21,19 @@ export function VisibilityButton({
   trackNumber,
   trackDisplayNumber,
   visible,
-  isAudioTrack,
   onToggle,
 }: {
   hidden: boolean;
   trackNumber: number;
   trackDisplayNumber: number | null;
   visible: boolean;
-  isAudioTrack?: boolean;
   onToggle: TimelineEditCallbacks["onToggleTrackHidden"];
 }) {
   if (!visible) return <span aria-hidden="true" className="h-6 w-6 shrink-0" />;
   // Display number in the text, real key in the callback. The two must not be
   // conflated in either direction.
   const suffix = trackDisplaySuffix(trackDisplayNumber);
-  const showAsMute = Boolean(isAudioTrack);
-  const label = visibilityButtonLabel(showAsMute, hidden, suffix);
+  const label = visibilityButtonLabel(hidden, suffix);
   return (
     <button
       type="button"
@@ -59,10 +45,12 @@ export function VisibilityButton({
       onPointerDown={(event) => event.stopPropagation()}
       onClick={(event) => {
         event.stopPropagation();
+        // Display number alongside the real key: the undo-history label must
+        // announce the same row this button just did (see `onToggleTrackHidden`).
         void onToggle?.(trackNumber, !hidden, trackDisplayNumber);
       }}
     >
-      {visibilityButtonIcon(showAsMute, hidden)}
+      {visibilityButtonIcon(hidden)}
     </button>
   );
 }
@@ -77,10 +65,8 @@ export function PlainTrackHeader({
   showTrackLabel,
   isTrackHidden,
   isAudioTrack,
-  isGroupMuted,
-  isSoloed,
-  onToggleSolo,
   onToggleTrackHidden,
+  trailing,
 }: {
   trackNumber: number;
   trackDisplayNumber: number | null;
@@ -90,37 +76,61 @@ export function PlainTrackHeader({
   isAudioTrack: boolean;
   onToggleTrackHidden: TimelineEditCallbacks["onToggleTrackHidden"];
   showTrackLabel: boolean;
-  isGroupMuted: boolean;
-  isSoloed: boolean;
-  onToggleSolo?: (options?: { add?: boolean }) => void;
+  /** Trailing controls that belong on the control line — the FX entry points,
+   *  which the caller owns because only it knows the clip they act on. */
+  trailing?: React.ReactNode;
 }) {
   return (
     <>
-      {isAudioTrack && (
-        <Music size={12} weight="fill" aria-hidden="true" className="text-white/35" />
-      )}
-      {showTrackLabel && (
-        <span
-          className={`min-w-0 flex-1 truncate text-[11px] ${
-            isAudioTrack && (isTrackHidden || isGroupMuted) ? "line-through" : ""
-          }`}
-          title={isGroupMuted && !isTrackHidden ? `${trackLabel} (group muted)` : trackLabel}
-        >
-          {trackLabel}
-        </span>
-      )}
-      {showTrackLabel && <TrackClipCount clipCount={clipCount} />}
-      <VisibilityButton
-        hidden={isTrackHidden}
-        trackNumber={trackNumber}
-        trackDisplayNumber={trackDisplayNumber}
-        visible
-        isAudioTrack={isAudioTrack}
-        onToggle={onToggleTrackHidden}
-      />
-      {isAudioTrack && onToggleSolo && (
-        <TimelineSoloButton isSoloed={isSoloed} onToggle={onToggleSolo} />
-      )}
+      {/* One line: the name, then every control pushed to the right edge. The
+          two-line split this replaced existed to stop four controls truncating
+          the name — but the name already truncates on its own (`min-w-0` plus
+          `truncate`), and the controls are `shrink-0`, so they hold the edge
+          and the name gives way instead. */}
+      <div className="flex min-w-0 items-center gap-1">
+        {isAudioTrack && (
+          <Music size={12} weight="fill" aria-hidden="true" className="text-white/35" />
+        )}
+        {/* No `flex-1`: the name takes only the width it needs, so the clip
+            count sits against it rather than being pushed out to meet the
+            controls. The slack goes to the `ml-auto` group below instead.
+
+            Wraps rather than truncating: a truncated name needs a hover to be
+            read at all, and a tooltip is no use to a name you are scanning a
+            column of. `break-words` so a long single token breaks instead of
+            forcing the column wider. */}
+        {showTrackLabel && (
+          <span className="min-w-0 break-words text-[11px] leading-tight">{trackLabel}</span>
+        )}
+        {showTrackLabel && <TrackClipCount clipCount={clipCount} />}
+        {/* `ml-auto` is what anchors the group right: it absorbs the slack the
+            truncating name leaves, so the controls sit on the edge whatever the
+            name's length. */}
+        <div className="ml-auto flex shrink-0 items-center gap-1">
+          {/* Not on an audio track. The control is the old visibility eye, and
+            on audio it silences rather than hides — but a row that already says
+            what it is with a speaker does not also need the hide affordance
+            sitting in the eye's slot. `visible={false}` rather than omitting the
+            element, so the spacer keeps every row's control columns aligned.
+
+            EXCEPT when the audio track is ALREADY hidden. Withholding the
+            control unconditionally withheld the only way back: `data-hidden`
+            silences the clip in preview and drops it from the render, the
+            panel's "Muted" is the unrelated HTML `muted` attribute, and nothing
+            else writes it — so a track hidden before this rule (or by "Hide
+            all", or by hand) was silent with no control anywhere to restore it.
+            Offering the eye only in that state keeps the affordance off a normal
+            audio row while leaving the door open from the inside. */}
+          <VisibilityButton
+            hidden={isTrackHidden}
+            trackNumber={trackNumber}
+            trackDisplayNumber={trackDisplayNumber}
+            visible={!isAudioTrack || isTrackHidden}
+            onToggle={onToggleTrackHidden}
+          />
+          {trailing}
+        </div>
+      </div>
     </>
   );
 }

package/src/player/components/automationLaneData.test.ts

@@ -4,9 +4,11 @@ import {
   automationLaneLabel,
   automationLaneLabelParts,
   elementAutomation,
+  elementAutomationLanes,
   groupAutomationLanes,
   laneGroupKey,
   elementFxChain,
+  isCarveLane,
 } from "./automationLaneData";
 import type { TimelineElement } from "../store/timelineElement";
 
@@ -268,3 +270,95 @@ describe("groupAutomationLanes", () => {
     expect(groupAutomationLanes([stale]).map((g) => g.key)).toEqual(["Volume"]);
   });
 });
+
+// A carve writes its own filter bands AND the lanes that drive them, and
+// `withoutCarveLanes` replaces every one of them on each re-run — so a drag on
+// one is discarded the next time the carve analyses. The rack also counts the
+// carve as ONE module rather than the filters it compiles to, so a lane per
+// band reads as "automation on effects I removed", which is exactly how it was
+// reported.
+describe("carve-generated lanes", () => {
+  const carved = (): TimelineElement => ({
+    id: "vo",
+    tag: "audio",
+    start: 0,
+    duration: 5,
+    track: 0,
+    fxChain: JSON.stringify({
+      version: 1,
+      nodes: [
+        {
+          type: "peaking",
+          id: "n1",
+          fromCarve: true,
+          params: { frequency: 160, gain: -6, q: 1.4 },
+        },
+        { type: "peaking", id: "n2", params: { frequency: 900, gain: -3, q: 1 } },
+      ],
+    }),
+    automation: JSON.stringify({
+      version: 1,
+      lanes: [
+        {
+          target: "fx.n1.gain",
+          points: [
+            { t: 0, v: 0 },
+            { t: 1, v: -4 },
+          ],
+        },
+        {
+          target: "fx.n2.gain",
+          points: [
+            { t: 0, v: 0 },
+            { t: 1, v: -2 },
+          ],
+        },
+        {
+          target: "volume",
+          points: [
+            { t: 0, v: 1 },
+            { t: 1, v: 0.5 },
+          ],
+        },
+      ],
+    }),
+  });
+
+  // These lanes used to be withheld. A bed whose EVERY lane is the carve's —
+  // which is what a plain voiceover carve produces — then showed no automation
+  // at all and no control to reveal any, so the carve looked like it had done
+  // nothing. The ducking curve is what a carve IS; it is shown, and marked
+  // read-only because the carve rewrites it on each analysis.
+  it("draws the carve's lanes alongside the author's", () => {
+    const targets = elementAutomationLanes(carved()).map((lane) => lane.target);
+    expect(targets).toContain("fx.n1.gain");
+    expect(targets).toContain("fx.n2.gain");
+    expect(targets).toContain("volume");
+  });
+
+  it("counts a carve band as a timeline row, so the row reserves its height", () => {
+    const rows = groupAutomationLanes([carved()]);
+    expect(rows).toHaveLength(3);
+  });
+
+  it("tells a carve's lane from the author's on the same element", () => {
+    const chain = elementFxChain(carved());
+    expect(isCarveLane("fx.n1.gain", chain)).toBe(true);
+    // n2 is a hand-built peaking band with the same parameter — only the
+    // `fromCarve` tag separates them.
+    expect(isCarveLane("fx.n2.gain", chain)).toBe(false);
+    expect(isCarveLane("volume", chain)).toBe(false);
+  });
+
+  it("treats every lane as the author's when nothing is carve-tagged", () => {
+    const plain = {
+      ...carved(),
+      fxChain: JSON.stringify({
+        version: 1,
+        nodes: [{ type: "peaking", id: "n1", params: { frequency: 160, gain: -6, q: 1.4 } }],
+      }),
+    };
+    expect(elementAutomationLanes(plain).map((l) => l.target)).toContain("fx.n1.gain");
+    expect(isCarveLane("fx.n1.gain", elementFxChain(plain))).toBe(false);
+  });
+});

package/src/player/components/automationLaneData.ts

@@ -91,7 +91,30 @@ export function elementAutomation(element: TimelineElement): HfAutomation {
   });
 }
 
+/**
+ * Is this lane one the CARVE wrote, rather than the author?
+ *
+ * The carve compiles to tagged nodes and rewrites their envelopes on every
+ * re-run (`withoutCarveLanes` replaces each one), so a drag on such a lane is
+ * silently discarded the next time it analyses. Read-only rather than hidden:
+ * the ducking curve is what a carve IS, and the whole reason to look at a
+ * carved bed in the timeline is to see where it makes room. Hiding them left a
+ * bed whose every lane was the carve's showing no automation at all and no
+ * control to reveal any — which reads as the carve having done nothing.
+ */
+export function isCarveLane(target: string, chain: HfAudioFxChain | null): boolean {
+  return (chain?.nodes ?? []).some(
+    (node) => node.fromCarve && node.id && target.startsWith(`fx.${node.id}.`),
+  );
+}
+
 /** Lanes in the order they are drawn, one row each. */
+/**
+ * The lanes a TIMELINE row should draw.
+ *
+ * Every lane the element carries, the carve's included — see `isCarveLane` for
+ * why those are shown read-only instead of withheld.
+ */
 export function elementAutomationLanes(element: TimelineElement): HfAutomationLane[] {
   return elementAutomation(element).lanes;
 }

package/src/player/components/automationLaneDragMath.ts

@@ -59,6 +59,34 @@ export function armGroupDrag(
   };
 }
 
+/**
+ * Snapshot the two endpoints owned by a segment drag.
+ *
+ * The pointer itself is the anchor: a line can be grabbed anywhere along its
+ * span, and the segment must not jump so either endpoint takes the pointer's
+ * place when the gesture starts.
+ */
+export function armSegmentDrag(
+  lane: HfAutomationLane,
+  index: number,
+  anchor: { t: number; v: number },
+): GroupDragSnapshot | null {
+  const a = lane.points[index];
+  const b = lane.points[index + 1];
+  if (!a || !b) return null;
+  return {
+    points: lane.points.map((p) => ({ ...p })),
+    indices: [index, index + 1],
+    anchor: { ...anchor },
+    selection: {
+      t0: a.t,
+      t1: b.t,
+      v0: Math.min(a.v, b.v),
+      v1: Math.max(a.v, b.v),
+    },
+  };
+}
+
 export interface GroupMoveResult {
   points: HfAutomationLane["points"];
   selection: AutomationSelectionBox;

package/src/player/components/automationLaneGeometry.ts

@@ -35,6 +35,8 @@ export const POINT_MERGE_SEC = 0.02;
 export const MIN_POINT_GAP_SEC = 0.001;
 /** Hit radius for grabbing a point, in px. */
 export const GRAB_PX = 7;
+/** Distance from the drawn envelope that offers a segment drag, in px. */
+export const SEGMENT_GRAB_PX = 5;
 /** Samples used to draw a segment the eye should see as curved. */
 export const DRAW_SAMPLES = 64;
 /**
@@ -222,6 +224,29 @@ export function snapLaneTime(t: number, targets: readonly number[], thresholdSec
   return best;
 }
 
+/** Draw commands from one breakpoint to the next, sampled when it is curved. */
+function segmentLineCommands(input: {
+  lane: HfAutomationLane;
+  range: AutomationRange;
+  index: number;
+  xOf(t: number): number;
+  yOf(v: number): number;
+}): string[] {
+  const { lane, range, index, xOf, yOf } = input;
+  const a = lane.points[index];
+  const b = lane.points[index + 1];
+  if (!a || !b) return [];
+  // A via point bends the segment with no `curve` of its own, so the
+  // straight-line shortcut has to rule out both.
+  if (!a.curve && a.viaX === undefined && range.scale === "linear") {
+    return [`L ${xOf(b.t)} ${yOf(b.v)}`];
+  }
+  return Array.from({ length: DRAW_SAMPLES }, (_, sample) => {
+    const t = a.t + ((b.t - a.t) * (sample + 1)) / DRAW_SAMPLES;
+    return `L ${xOf(t)} ${yOf(sampleAutomationLane(lane, t, range.scale))}`;
+  });
+}
+
 /**
  * The svg path for one lane's envelope.
  *
@@ -247,24 +272,38 @@ export function envelopePath(input: {
   }
   const pts = [`M ${PAD_X} ${yOf(first.v)}`, `L ${xOf(first.t)} ${yOf(first.v)}`];
   for (let i = 0; i + 1 < lane.points.length; i += 1) {
-    const a = lane.points[i];
-    const b = lane.points[i + 1];
-    if (!a || !b) continue;
-    // A via point bends the segment with no `curve` of its own, so the
-    // straight-line shortcut has to rule out both.
-    if (!a.curve && a.viaX === undefined && range.scale === "linear") {
-      pts.push(`L ${xOf(b.t)} ${yOf(b.v)}`);
-      continue;
-    }
-    for (let k = 1; k <= DRAW_SAMPLES; k += 1) {
-      const t = a.t + ((b.t - a.t) * k) / DRAW_SAMPLES;
-      pts.push(`L ${xOf(t)} ${yOf(sampleAutomationLane(lane, t, range.scale))}`);
-    }
+    pts.push(...segmentLineCommands({ lane, range, index: i, xOf, yOf }));
   }
   pts.push(`L ${PAD_X + widthPx} ${yOf(last.v)}`);
   return pts.join(" ");
 }
 
+/**
+ * The visible path for one segment, without the lane's constant extensions.
+ *
+ * Used for the hover/drag affordance: only the segment under the pointer grows
+ * heavier, rather than making the entire envelope look selected. It samples by
+ * the same rule as `envelopePath`, so a curved or logarithmic segment's hover
+ * stroke sits exactly on the line the audio model draws.
+ */
+export function envelopeSegmentPath(input: {
+  lane: HfAutomationLane;
+  range: AutomationRange;
+  index: number;
+  xOf(t: number): number;
+  yOf(v: number): number;
+}): string | null {
+  const { lane, range, index, xOf, yOf } = input;
+  const a = lane.points[index];
+  const b = lane.points[index + 1];
+  if (!a || !b) return null;
+  const pts = [
+    `M ${xOf(a.t)} ${yOf(a.v)}`,
+    ...segmentLineCommands({ lane, range, index, xOf, yOf }),
+  ];
+  return pts.join(" ");
+}
+
 export function laneFor(automation: HfAutomation, target: string): HfAutomationLane {
   return automation.lanes.find((l) => l.target === target) ?? { target, points: [] };
 }