@hyperframes/studio 0.7.90 → 0.7.93

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

@@ -3,23 +3,51 @@
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { TimelineClipDiamonds, TimelineDiamondLane } from "./TimelineClipDiamonds";
+import type { TimelineElement } from "../store/playerStore";
+import { usePlayerStore } from "../store/playerStore";
+import {
+  TimelineClipDiamonds,
+  TimelineDiamondLane,
+  type TimelineDiamondKeyframe,
+} from "./TimelineClipDiamonds";
 import { timelineKeyframeSelectionKey } from "./timelineKeyframeIdentity";
+import { configureTimelineTestViewport } from "./timelineTestViewport";
+import { readPendingTimelineKeyframeRetimes } from "./useTimelineKeyframeHandlers";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 afterEach(() => {
   document.body.innerHTML = "";
+  usePlayerStore.setState({ elements: [], timelineSessionEpoch: 0 });
 });
 
+const RETIME_ELEMENT: TimelineElement = {
+  id: "clip-1",
+  label: "Clip",
+  tag: "div",
+  start: 0,
+  duration: 10,
+  track: 0,
+};
+
 function pointerEvent(type: string, init: PointerEventInit): Event {
-  if (typeof PointerEvent === "function") return new PointerEvent(type, init);
-  return new MouseEvent(type, init);
+  const event =
+    typeof PointerEvent === "function" ? new PointerEvent(type, init) : new MouseEvent(type, init);
+  if (!("pointerId" in event)) {
+    Object.defineProperty(event, "pointerId", { value: init.pointerId ?? 0 });
+  }
+  return event;
 }
 
-function renderDiamonds(onClickKeyframe = vi.fn()) {
+function createTimelineHost() {
   const host = document.createElement("div");
+  host.setAttribute("data-timeline-scroll-viewport", "");
   document.body.append(host);
+  return host;
+}
+
+function renderDiamonds(onClickKeyframe = vi.fn(), onShiftClickKeyframe = vi.fn()) {
+  const host = createTimelineHost();
   const root = createRoot(host);
   act(() => {
     root.render(
@@ -33,17 +61,130 @@ function renderDiamonds(onClickKeyframe = vi.fn()) {
         }}
         clipWidthPx={200}
         clipHeightPx={48}
-        clipDuration={10}
         accentColor="#4ba3d2"
         isSelected
         currentPercentage={0}
         elementId="clip-1"
+        clipStart={10}
+        clipDuration={10}
         selectedKeyframes={new Set()}
         onClickKeyframe={onClickKeyframe}
+        onShiftClickKeyframe={onShiftClickKeyframe}
+      />,
+    );
+  });
+  return { host, root, onClickKeyframe, onShiftClickKeyframe };
+}
+
+it("pins authored keyframes outside the clip to an inspectable boundary marker", () => {
+  const host = createTimelineHost();
+  const root = createRoot(host);
+  act(() => {
+    root.render(
+      <TimelineDiamondLane
+        keyframesData={{
+          format: "percentage",
+          keyframes: [
+            { percentage: -40, properties: { x: 0 }, propertyGroup: "position" },
+            { percentage: -20, properties: { x: 25 }, propertyGroup: "position" },
+            { percentage: 5, properties: { x: 50 }, propertyGroup: "position" },
+            { percentage: 120, properties: { x: 100 }, propertyGroup: "position" },
+          ],
+        }}
+        clipWidthPx={200}
+        clipHeightPx={48}
+        accentColor="#4ba3d2"
+        isSelected
+        currentPercentage={5}
+        elementId="clip-1"
+        clipStart={10}
+        clipDuration={10}
+        selectedKeyframes={new Set()}
       />,
     );
   });
-  return { host, root, onClickKeyframe };
+
+  const before = host.querySelectorAll<HTMLButtonElement>('[data-keyframe-outside-clip="before"]');
+  const after = host.querySelector<HTMLButtonElement>('[data-keyframe-outside-clip="after"]');
+  expect(Array.from(before, (marker) => marker.style.left)).toEqual(["-35px", "-23px"]);
+  expect(before[0]?.getAttribute("aria-label")).toBe("position keyframe at 6s (before clip)");
+  expect(after?.style.left).toBe("201px");
+  expect(after?.getAttribute("aria-label")).toBe("position keyframe at 22s (after clip)");
+  expect(host.querySelectorAll('button[aria-label*="keyframe at"]')).toHaveLength(4);
+
+  act(() => root.unmount());
+});
+
+function renderRetimeLane(
+  onMoveKeyframe = vi.fn().mockResolvedValue(true),
+  strict = false,
+  options: {
+    elementId?: string;
+    host?: HTMLDivElement;
+    keyframes?: TimelineDiamondKeyframe[];
+  } = {},
+) {
+  const elementId = options.elementId ?? RETIME_ELEMENT.id;
+  if (!options.host) {
+    usePlayerStore.setState({ elements: [{ ...RETIME_ELEMENT, id: elementId, key: elementId }] });
+  }
+  const host = options.host ?? createTimelineHost();
+  const keyframes = options.keyframes ?? [
+    {
+      percentage: 0,
+      tweenPercentage: 0,
+      propertyGroup: "position",
+      animationId: "anim-1",
+      properties: { x: 0 },
+    },
+    {
+      percentage: 50,
+      tweenPercentage: 50,
+      propertyGroup: "position",
+      animationId: "anim-1",
+      properties: { x: 100 },
+    },
+    {
+      percentage: 100,
+      tweenPercentage: 100,
+      propertyGroup: "position",
+      animationId: "anim-1",
+      properties: { x: 200 },
+    },
+  ];
+  const onClickKeyframe = vi.fn();
+  const mountLane = () => {
+    const laneHost = document.createElement("div");
+    host.append(laneHost);
+    const root = createRoot(laneHost);
+    const lane = (
+      <TimelineDiamondLane
+        keyframesData={{
+          format: "percentage",
+          keyframes,
+        }}
+        clipWidthPx={200}
+        clipHeightPx={48}
+        accentColor="#4ba3d2"
+        isSelected
+        currentPercentage={0}
+        elementId={elementId}
+        selectedKeyframes={new Set()}
+        onClickKeyframe={onClickKeyframe}
+        onMoveKeyframe={onMoveKeyframe}
+        groupAware
+      />
+    );
+    act(() => {
+      root.render(strict ? <React.StrictMode>{lane}</React.StrictMode> : lane);
+    });
+    const diamond = laneHost.querySelector<HTMLButtonElement>(
+      `button[title="${keyframes[1]?.percentage}%"]`,
+    );
+    expect(diamond).not.toBeNull();
+    return { diamond: diamond!, root };
+  };
+  return { ...mountLane(), host, mountLane, onClickKeyframe, onMoveKeyframe };
 }
 
 describe("TimelineClipDiamonds", () => {
@@ -161,6 +302,50 @@ describe("TimelineClipDiamonds", () => {
     act(() => root.unmount());
   });
 
+  it("gives keyframes time-based names and native keyboard selection semantics", () => {
+    const { host, root, onClickKeyframe } = renderDiamonds();
+    const diamond = host.querySelector<HTMLButtonElement>('button[title="50%"]')!;
+    expect(diamond.getAttribute("aria-label")).toBe("Motion keyframe at 15s");
+    expect(diamond.getAttribute("aria-pressed")).toBe("false");
+    act(() => diamond.dispatchEvent(new MouseEvent("click", { bubbles: true, detail: 0 })));
+    expect(onClickKeyframe).toHaveBeenCalledWith(
+      "clip-1",
+      expect.objectContaining({ percentage: 50 }),
+    );
+    act(() => root.unmount());
+  });
+
+  it("uses Shift+Space's native click for additive keyframe selection", () => {
+    const { host, root, onClickKeyframe, onShiftClickKeyframe } = renderDiamonds();
+    const diamond = host.querySelector<HTMLButtonElement>('button[title="50%"]')!;
+    act(() =>
+      diamond.dispatchEvent(new MouseEvent("click", { bubbles: true, detail: 0, shiftKey: true })),
+    );
+    expect(onShiftClickKeyframe).toHaveBeenCalledWith(
+      "clip-1",
+      expect.objectContaining({ percentage: 50 }),
+    );
+    expect(onClickKeyframe).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+
+  it("publishes retime previews after StrictMode effect replay", () => {
+    const { diamond, host, root } = renderRetimeLane(undefined, true);
+    const initialLeft = diamond.style.left;
+    act(() => {
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 7 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointermove", { bubbles: true, clientX: 120, pointerId: 7 }),
+      );
+    });
+    expect(host.querySelector<HTMLButtonElement>('button[title="50%"]')?.style.left).not.toBe(
+      initialLeft,
+    );
+    act(() => root.unmount());
+  });
+
   it("treats primary pointerup without drag as a keyframe click", () => {
     const { host, root, onClickKeyframe } = renderDiamonds();
     const diamond = host.querySelector<HTMLButtonElement>('button[title="50%"]');
@@ -246,8 +431,7 @@ describe("TimelineClipDiamonds", () => {
   it("treats a drag-armed press that resolves to a no-op move as a click", () => {
     const onClickKeyframe = vi.fn();
     const onMoveKeyframe = vi.fn();
-    const host = document.createElement("div");
-    document.body.append(host);
+    const host = createTimelineHost();
     const root = createRoot(host);
     act(() => {
       root.render(
@@ -314,8 +498,7 @@ describe("TimelineClipDiamonds", () => {
   it("reselects a retimed keyframe with its post-move tween percentage", () => {
     const onClickKeyframe = vi.fn();
     const onMoveKeyframe = vi.fn().mockResolvedValue(true);
-    const host = document.createElement("div");
-    document.body.append(host);
+    const host = createTimelineHost();
     const root = createRoot(host);
     act(() => {
       root.render(
@@ -474,8 +657,7 @@ describe("TimelineClipDiamonds", () => {
 
   it("composes a rapid second retime from the pending position", () => {
     const onMoveKeyframe = vi.fn().mockResolvedValue(true);
-    const host = document.createElement("div");
-    document.body.append(host);
+    const host = createTimelineHost();
     const root = createRoot(host);
     act(() => {
       root.render(
@@ -548,16 +730,120 @@ describe("TimelineClipDiamonds", () => {
       },
       85,
     );
+
+    act(() => {
+      usePlayerStore.setState({ timelineSessionEpoch: 1 });
+      diamond!.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100 }),
+      );
+      diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 120 }));
+    });
+    expect(onMoveKeyframe).toHaveBeenNthCalledWith(
+      3,
+      expect.objectContaining({ percentage: 50 }),
+      60,
+    );
     act(() => root.unmount());
   });
 
+  it("preserves another element's pending retime when the active source is removed", () => {
+    const host = createTimelineHost();
+    const elementA = { ...RETIME_ELEMENT, id: "clip-a", key: "clip-a" };
+    const elementB = { ...RETIME_ELEMENT, id: "clip-b", key: "clip-b" };
+    usePlayerStore.setState({ elements: [elementA, elementB] });
+    const laneA = renderRetimeLane(vi.fn().mockResolvedValue(true), false, {
+      elementId: "clip-a",
+      host,
+    });
+    const onMoveB = vi.fn().mockResolvedValue(true);
+    const laneB = renderRetimeLane(onMoveB, false, { elementId: "clip-b", host });
+
+    act(() => {
+      laneB.diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 7 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 150, pointerId: 7 }),
+      );
+
+      laneA.diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 9 }),
+      );
+      usePlayerStore.setState({ elements: [elementB] });
+
+      laneB.diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 150, pointerId: 11 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 170, pointerId: 11 }),
+      );
+    });
+
+    expect(onMoveB).toHaveBeenNthCalledWith(2, expect.objectContaining({ percentage: 75 }), 85);
+    act(() => {
+      laneA.root.unmount();
+      laneB.root.unmount();
+    });
+  });
+
+  it("retires a pending retime once the cache exposes its destination identity", () => {
+    const first = renderRetimeLane();
+    act(() => {
+      first.diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 7 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 150, pointerId: 7 }),
+      );
+    });
+    expect(readPendingTimelineKeyframeRetimes(first.host).size).toBe(1);
+    act(() => first.root.unmount());
+
+    const destination = renderRetimeLane(vi.fn().mockResolvedValue(true), false, {
+      host: first.host,
+      keyframes: [
+        {
+          percentage: 0,
+          tweenPercentage: 0,
+          propertyGroup: "position",
+          animationId: "anim-1",
+          properties: { x: 0 },
+        },
+        {
+          percentage: 75,
+          tweenPercentage: 75,
+          propertyGroup: "position",
+          animationId: "anim-1",
+          properties: { x: 100 },
+        },
+        {
+          percentage: 100,
+          tweenPercentage: 100,
+          propertyGroup: "position",
+          animationId: "anim-1",
+          properties: { x: 200 },
+        },
+      ],
+    });
+    act(() => {
+      destination.diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 150, pointerId: 9 }),
+      );
+    });
+    expect(readPendingTimelineKeyframeRetimes(first.host).size).toBe(0);
+
+    act(() => {
+      window.dispatchEvent(pointerEvent("pointercancel", { bubbles: true, pointerId: 9 }));
+      destination.root.unmount();
+    });
+  });
+
   it.each([
     ["returns false", () => Promise.resolve(false)],
     ["rejects", () => Promise.reject(new Error("retime failed"))],
   ])("clears a failed pending retime when the callback %s", async (_label, settle) => {
     const onMoveKeyframe = vi.fn().mockImplementationOnce(settle).mockResolvedValue(true);
-    const host = document.createElement("div");
-    document.body.append(host);
+    const host = createTimelineHost();
     const root = createRoot(host);
     act(() => {
       root.render(
@@ -678,17 +964,224 @@ describe("TimelineClipDiamonds", () => {
     act(() => root.unmount());
   });
 
+  it("commits once from the stable viewport after the source lane unmounts", () => {
+    const { diamond, onMoveKeyframe, root } = renderRetimeLane();
+
+    act(() => {
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 7 }),
+      );
+      root.unmount();
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 120, pointerId: 7 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 140, pointerId: 7 }),
+      );
+    });
+
+    expect(onMoveKeyframe).toHaveBeenCalledExactlyOnceWith(
+      {
+        percentage: 50,
+        tweenPercentage: 50,
+        propertyGroup: "position",
+        animationId: "anim-1",
+      },
+      60,
+    );
+  });
+
+  it("keeps the retime preview coherent when the source lane remounts", () => {
+    const { diamond, mountLane, onMoveKeyframe, root } = renderRetimeLane();
+
+    act(() => {
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 7 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointermove", { bubbles: true, button: 0, clientX: 120, pointerId: 7 }),
+      );
+    });
+    const beforeUnmountLeft = Number.parseFloat(diamond.style.left);
+
+    act(() => {
+      root.unmount();
+      window.dispatchEvent(
+        pointerEvent("pointermove", { bubbles: true, button: 0, clientX: 140, pointerId: 7 }),
+      );
+    });
+    const { diamond: remountedDiamond, root: remountedRoot } = mountLane();
+    const remountedLeft = Number.parseFloat(remountedDiamond.style.left);
+    expect(remountedLeft).toBeGreaterThan(beforeUnmountLeft);
+
+    act(() => {
+      window.dispatchEvent(
+        pointerEvent("pointermove", { bubbles: true, button: 0, clientX: 160, pointerId: 7 }),
+      );
+    });
+    expect(Number.parseFloat(remountedDiamond.style.left)).toBeGreaterThan(remountedLeft);
+
+    act(() => {
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 160, pointerId: 7 }),
+      );
+    });
+    expect(onMoveKeyframe).toHaveBeenCalledExactlyOnceWith(expect.any(Object), 80);
+    act(() => remountedRoot.unmount());
+  });
+
+  it("includes horizontal viewport scrolling in the retime destination", () => {
+    const { diamond, host, onMoveKeyframe, root } = renderRetimeLane();
+
+    act(() => {
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 7 }),
+      );
+      host.scrollLeft = 20;
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 100, pointerId: 7 }),
+      );
+    });
+
+    expect(onMoveKeyframe).toHaveBeenCalledExactlyOnceWith(expect.any(Object), 60);
+    act(() => root.unmount());
+  });
+
+  it("auto-scrolls horizontally without virtualizing the source row away", () => {
+    let frame: FrameRequestCallback | null = null;
+    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((callback) => {
+      frame = callback;
+      return 1;
+    });
+    vi.spyOn(globalThis, "cancelAnimationFrame").mockImplementation(() => undefined);
+    const { diamond, host, root } = renderRetimeLane();
+    configureTimelineTestViewport(host, 10_000);
+
+    act(() => {
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 7 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointermove", {
+          bubbles: true,
+          button: 0,
+          clientX: 790,
+          clientY: 239,
+          pointerId: 7,
+        }),
+      );
+    });
+    expect(frame).not.toBeNull();
+    act(() => frame?.(0));
+    expect(host.scrollLeft).toBeGreaterThan(0);
+    expect(host.scrollTop).toBe(0);
+
+    act(() => {
+      window.dispatchEvent(pointerEvent("pointercancel", { bubbles: true, pointerId: 7 }));
+      root.unmount();
+    });
+  });
+
+  it("ignores another pointer and lets the owning pointer finish", () => {
+    const { diamond, onMoveKeyframe, root } = renderRetimeLane();
+
+    act(() => {
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 7 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 140, pointerId: 8 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 120, pointerId: 7 }),
+      );
+    });
+
+    expect(onMoveKeyframe).toHaveBeenCalledOnce();
+    act(() => root.unmount());
+  });
+
+  it("cancels without mutation on pointer cancel or Escape and allows the next retime", () => {
+    const { diamond, onMoveKeyframe, root } = renderRetimeLane();
+
+    act(() => {
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 7 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointercancel", {
+          bubbles: true,
+          button: 0,
+          clientX: 120,
+          pointerId: 7,
+        }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 120, pointerId: 7 }),
+      );
+
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 9 }),
+      );
+      window.dispatchEvent(new KeyboardEvent("keydown", { bubbles: true, key: "Escape" }));
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 120, pointerId: 9 }),
+      );
+
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 11 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 120, pointerId: 11 }),
+      );
+    });
+
+    expect(onMoveKeyframe).toHaveBeenCalledOnce();
+    act(() => root.unmount());
+  });
+
+  it("cancels on project switch or source removal without poisoning the next gesture", () => {
+    const { diamond, onMoveKeyframe, root } = renderRetimeLane();
+
+    act(() => {
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 7 }),
+      );
+      usePlayerStore.setState({ timelineSessionEpoch: 1 });
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 120, pointerId: 7 }),
+      );
+
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 9 }),
+      );
+      usePlayerStore.setState({ elements: [] });
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 120, pointerId: 9 }),
+      );
+
+      usePlayerStore.setState({ elements: [RETIME_ELEMENT] });
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 11 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 120, pointerId: 11 }),
+      );
+    });
+
+    expect(onMoveKeyframe).toHaveBeenCalledOnce();
+    act(() => root.unmount());
+  });
+
   // Regression: onClickKeyframe's state updates can re-render the diamond
   // button out from under the gesture before the browser auto-synthesizes the
   // "click" event that follows a button's pointerdown+pointerup. That orphaned
-  // click then bubbles to the ancestor clip's onClick, which toggles selection
-  // off whenever the clip is already selected — the state a diamond click
-  // always happens in — so every keyframe click immediately deselected its
-  // own clip. suppressClickRef lets that ancestor ignore the stray click.
+  // click then bubbles to the ancestor clip's onClick. That stray click can
+  // replace keyframe focus or collapse a marquee selection, so suppressClickRef
+  // lets the ancestor ignore it.
   it("arms suppressClickRef synchronously on a keyframe click", () => {
     const suppressClickRef = { current: false };
-    const host = document.createElement("div");
-    document.body.append(host);
+    const host = createTimelineHost();
     const root = createRoot(host);
     act(() => {
       root.render(
@@ -722,9 +1215,9 @@ describe("TimelineClipDiamonds", () => {
   });
 
   const renderSegmentLane = (lastAmbiguous: boolean, clipWidthPx = 200) => {
-    const host = document.createElement("div");
-    document.body.append(host);
+    const host = createTimelineHost();
     const root = createRoot(host);
+    const onSelectSegment = vi.fn();
     const kf = (percentage: number, extra: Record<string, unknown> = {}) => ({
       percentage,
       tweenPercentage: percentage,
@@ -757,13 +1250,15 @@ describe("TimelineClipDiamonds", () => {
           isSelected
           currentPercentage={0}
           elementId="clip-1"
+          clipStart={10}
+          clipDuration={10}
           selectedKeyframes={new Set()}
-          onSelectSegment={vi.fn()}
+          onSelectSegment={onSelectSegment}
           groupAware
         />,
       );
     });
-    return { host, root };
+    return { host, onSelectSegment, root };
   };
 
   it("shows the inline ease button on a colliding merged segment (bulk edit)", () => {
@@ -776,8 +1271,23 @@ describe("TimelineClipDiamonds", () => {
   });
 
   it("shows the inline ease button on single-animation merged segments", () => {
-    const { host, root } = renderSegmentLane(false);
+    const { host, onSelectSegment, root } = renderSegmentLane(false);
     expect(host.querySelectorAll("[data-keyframe-ease-segment]").length).toBe(2);
+    const ease = host.querySelector<HTMLButtonElement>("[data-keyframe-ease-button]")!;
+    expect(ease.getAttribute("aria-label")).toBe("Edit none easing after 10s");
+    expect(ease.classList.contains("opacity-0")).toBe(true);
+    act(() => ease.click());
+    expect(onSelectSegment).toHaveBeenCalledOnce();
+    expect(usePlayerStore.getState().requestedSeekTime).toBeNull();
+    act(() => root.unmount());
+  });
+
+  it("ends connectors at the diamond boundaries", () => {
+    const { host, root } = renderSegmentLane(false);
+    const connectors = host.querySelectorAll<HTMLElement>("[data-keyframe-connector]");
+
+    expect(Array.from(connectors, (connector) => connector.style.left)).toEqual(["11px", "111px"]);
+    expect(Array.from(connectors, (connector) => connector.style.width)).toEqual(["78px", "78px"]);
     act(() => root.unmount());
   });
 
@@ -811,8 +1321,7 @@ describe("TimelineClipDiamonds", () => {
   it("hides the inline ease button on a segment with no source animation id", () => {
     // A runtime-scanned keyframe has no animationId, so there is no tween to
     // target; the segment ending on it must not render a (dead) ease button.
-    const host = document.createElement("div");
-    document.body.append(host);
+    const host = createTimelineHost();
     const root = createRoot(host);
     const kf = (percentage: number, animationId?: string) => ({
       percentage,