@hyperframes/studio 0.7.90 → 0.7.93

package/src/player/components/BeatStrip.tsx

@@ -1,12 +1,285 @@
-import { memo, useRef, useState } from "react";
-import { moveBeatCompositionTime, deleteBeatAtCompositionTime } from "../../utils/beatEditActions";
+import { memo, useSyncExternalStore } from "react";
+import {
+  deleteBeatAtCompositionTime,
+  moveBeatCompositionTime,
+  remapBeatAnalysisToComposition,
+} from "../../utils/beatEditActions";
 import { usePlayerStore } from "../store/playerStore";
 import { CLIP_Y, getTimelineBeatEntries } from "./timelineLayout";
 import type { TimelineTimeRange } from "../lib/timelineClipIndex";
+import {
+  applyTimelineAutoScrollStep,
+  resolveTimelineAutoScrollLoopAction,
+} from "./timelineEditing";
+import { getTimelineElementIndexes } from "../lib/timelineElementIndexes";
 
 export const BEAT_BAND_H = 14; // dark band height at top of track
 const BEAT_HIT_W = 12; // grab width per beat (px)
 
+interface BeatDragActor {
+  readonly pointerId: number;
+  readonly startX: number;
+  readonly clientX: number;
+  readonly clientY: number;
+  readonly originalTime: number;
+  readonly pixelsPerSecond: number;
+  readonly startScrollLeft: number;
+  readonly dx: number;
+  readonly started: boolean;
+  readonly sessionEpoch: number;
+  readonly projectId: string | null;
+  readonly musicElement: NonNullable<ReturnType<typeof getTimelineElementIndexes>["musicElement"]>;
+  readonly musicKey: string;
+  readonly musicSrc: string;
+  readonly scroll: HTMLElement;
+}
+
+let beatDragActor: BeatDragActor | null = null;
+let beatDragRaf = 0;
+let unsubscribeBeatDragSession: (() => void) | null = null;
+let beatDragViewportObserver: MutationObserver | null = null;
+const beatDragSubscribers = new Set<() => void>();
+
+function publishBeatDrag(next: BeatDragActor | null): void {
+  beatDragActor = next;
+  for (const subscriber of beatDragSubscribers) subscriber();
+}
+
+function subscribeBeatDrag(subscriber: () => void): () => void {
+  beatDragSubscribers.add(subscriber);
+  return () => beatDragSubscribers.delete(subscriber);
+}
+
+function getBeatDragSnapshot(): BeatDragActor | null {
+  return beatDragActor;
+}
+
+function releaseBeatDragResources(actor: BeatDragActor): void {
+  if (beatDragRaf !== 0) {
+    cancelAnimationFrame(beatDragRaf);
+    beatDragRaf = 0;
+  }
+  unsubscribeBeatDragSession?.();
+  unsubscribeBeatDragSession = null;
+  beatDragViewportObserver?.disconnect();
+  beatDragViewportObserver = null;
+  window.removeEventListener("pointermove", handleBeatDragPointerMove);
+  window.removeEventListener("pointerup", handleBeatDragPointerUp);
+  window.removeEventListener("pointercancel", handleBeatDragPointerCancel);
+  window.removeEventListener("lostpointercapture", handleBeatDragPointerCancel);
+  window.removeEventListener("keydown", handleBeatDragKeyDown);
+  window.removeEventListener("blur", cancelBeatDrag);
+  try {
+    if (actor.scroll.hasPointerCapture?.(actor.pointerId)) {
+      actor.scroll.releasePointerCapture(actor.pointerId);
+    }
+  } catch {
+    // Window listeners retain terminal ownership when pointer capture is unavailable.
+  }
+  usePlayerStore.getState().setBeatDragging(false);
+}
+
+/** Claiming clears the shared actor before cleanup, so later terminal events are no-ops. */
+function claimBeatDrag(pointerId?: number): BeatDragActor | null {
+  const actor = beatDragActor;
+  if (!actor || (pointerId !== undefined && actor.pointerId !== pointerId)) return null;
+  publishBeatDrag(null);
+  releaseBeatDragResources(actor);
+  return actor;
+}
+
+function cancelBeatDrag(): void {
+  claimBeatDrag();
+}
+
+function beatDragTime(actor: BeatDragActor): number {
+  return Math.max(0, actor.originalTime + actor.dx / actor.pixelsPerSecond);
+}
+
+function isBeatDragSourceCurrent(
+  actor: BeatDragActor,
+  state: ReturnType<typeof usePlayerStore.getState>,
+): boolean {
+  const currentMusic = getTimelineElementIndexes(state.elements).musicElement;
+  if (
+    !actor.scroll.isConnected ||
+    state.timelineSessionEpoch !== actor.sessionEpoch ||
+    state.timelineProjectId !== actor.projectId ||
+    currentMusic !== actor.musicElement ||
+    (currentMusic.key ?? currentMusic.id) !== actor.musicKey ||
+    currentMusic.src !== actor.musicSrc
+  ) {
+    return false;
+  }
+  const analysis = remapBeatAnalysisToComposition(
+    state.beatAnalysis,
+    currentMusic,
+    state.beatEdits,
+  );
+  return analysis?.beatTimes.some((time) => Math.abs(time - actor.originalTime) < 1e-3) === true;
+}
+
+function updateBeatDrag(clientX: number, clientY: number): BeatDragActor | null {
+  const actor = beatDragActor;
+  if (!actor) return null;
+  const pointerDx = clientX - actor.startX;
+  const next = {
+    ...actor,
+    clientX,
+    clientY,
+    dx: pointerDx + actor.scroll.scrollLeft - actor.startScrollLeft,
+    started: actor.started || Math.abs(pointerDx) > 2,
+  };
+  publishBeatDrag(next);
+  usePlayerStore.getState().requestSeek(beatDragTime(next));
+  return next;
+}
+
+function stepBeatDragAutoScroll(): void {
+  beatDragRaf = 0;
+  const actor = beatDragActor;
+  if (!actor?.started) return;
+  if (!applyTimelineAutoScrollStep(actor.scroll, actor.clientX, actor.clientY)) return;
+  updateBeatDrag(actor.clientX, actor.clientY);
+  beatDragRaf = requestAnimationFrame(stepBeatDragAutoScroll);
+}
+
+function syncBeatDragAutoScroll(actor: BeatDragActor): void {
+  const action = resolveTimelineAutoScrollLoopAction(
+    actor.scroll,
+    actor.clientX,
+    actor.clientY,
+    beatDragRaf !== 0,
+  );
+  if (action === "start" && actor.started) {
+    beatDragRaf = requestAnimationFrame(stepBeatDragAutoScroll);
+  } else if (action === "stop" && beatDragRaf !== 0) {
+    cancelAnimationFrame(beatDragRaf);
+    beatDragRaf = 0;
+  }
+}
+
+function handleBeatDragPointerMove(event: PointerEvent): void {
+  if (event.pointerId !== beatDragActor?.pointerId) return;
+  event.preventDefault();
+  const actor = updateBeatDrag(event.clientX, event.clientY);
+  if (actor) syncBeatDragAutoScroll(actor);
+}
+
+function handleBeatDragPointerUp(event: PointerEvent): void {
+  if (event.pointerId !== beatDragActor?.pointerId) return;
+  const latest = updateBeatDrag(event.clientX, event.clientY);
+  const actor = claimBeatDrag(event.pointerId);
+  if (!actor || !latest?.started) return;
+  const store = usePlayerStore.getState();
+  if (!isBeatDragSourceCurrent(actor, store)) return;
+  const newTime = beatDragTime(latest);
+  moveBeatCompositionTime(actor.originalTime, newTime);
+  store.requestSeek(newTime);
+}
+
+function handleBeatDragPointerCancel(event: PointerEvent): void {
+  claimBeatDrag(event.pointerId);
+}
+
+function handleBeatDragKeyDown(event: KeyboardEvent): void {
+  if (event.key !== "Escape" || !beatDragActor) return;
+  event.preventDefault();
+  cancelBeatDrag();
+}
+
+function resolveBeatDragViewport(
+  event: React.PointerEvent<HTMLDivElement>,
+  pixelsPerSecond: number,
+): HTMLElement | null {
+  if (event.button !== 0 || !(pixelsPerSecond > 0)) return null;
+  return event.currentTarget.closest<HTMLElement>("[data-timeline-scroll-viewport]");
+}
+
+function createBeatDragActor(
+  event: React.PointerEvent<HTMLDivElement>,
+  originalTime: number,
+  pixelsPerSecond: number,
+  scroll: HTMLElement,
+): BeatDragActor | null {
+  const store = usePlayerStore.getState();
+  const musicElement = getTimelineElementIndexes(store.elements).musicElement;
+  if (!musicElement?.src) return null;
+  const actor: BeatDragActor = {
+    pointerId: event.pointerId,
+    startX: event.clientX,
+    clientX: event.clientX,
+    clientY: event.clientY,
+    originalTime,
+    pixelsPerSecond,
+    startScrollLeft: scroll.scrollLeft,
+    dx: 0,
+    started: false,
+    sessionEpoch: store.timelineSessionEpoch,
+    projectId: store.timelineProjectId,
+    musicElement,
+    musicKey: musicElement.key ?? musicElement.id,
+    musicSrc: musicElement.src,
+    scroll,
+  };
+  return isBeatDragSourceCurrent(actor, store) ? actor : null;
+}
+
+function activateBeatDrag(actor: BeatDragActor): void {
+  publishBeatDrag(actor);
+  window.addEventListener("pointermove", handleBeatDragPointerMove);
+  window.addEventListener("pointerup", handleBeatDragPointerUp);
+  window.addEventListener("pointercancel", handleBeatDragPointerCancel);
+  window.addEventListener("lostpointercapture", handleBeatDragPointerCancel);
+  window.addEventListener("keydown", handleBeatDragKeyDown);
+  window.addEventListener("blur", cancelBeatDrag);
+  unsubscribeBeatDragSession = usePlayerStore.subscribe((state, previous) => {
+    // Unlike gestures that can validate only at pointerup, beat drag must stop
+    // immediately when its music source disappears or changes mid-stream. This
+    // subscription owns that interruption; the identity guard keeps requestSeek's
+    // per-frame store writes allocation-free unless a source input changed.
+    if (
+      state.timelineSessionEpoch === previous.timelineSessionEpoch &&
+      state.timelineProjectId === previous.timelineProjectId &&
+      state.elements === previous.elements &&
+      state.beatAnalysis === previous.beatAnalysis &&
+      state.beatEdits === previous.beatEdits
+    ) {
+      return;
+    }
+    if (!isBeatDragSourceCurrent(actor, state)) cancelBeatDrag();
+  });
+  const viewportParent = actor.scroll.parentNode;
+  if (viewportParent) {
+    beatDragViewportObserver = new MutationObserver(() => {
+      if (!actor.scroll.isConnected) cancelBeatDrag();
+    });
+    beatDragViewportObserver.observe(viewportParent, { childList: true });
+  }
+  try {
+    actor.scroll.setPointerCapture?.(actor.pointerId);
+  } catch {
+    // Window listeners retain terminal ownership when pointer capture is unavailable.
+  }
+  const store = usePlayerStore.getState();
+  store.setBeatDragging(true);
+  store.requestSeek(Math.max(0, actor.originalTime));
+}
+
+function beginBeatDrag(
+  event: React.PointerEvent<HTMLDivElement>,
+  originalTime: number,
+  pixelsPerSecond: number,
+): void {
+  // One pointer owns the actor until a terminal event claims it. A second touch
+  // must not silently discard the first gesture and make its release a no-op.
+  if (beatDragActor) return;
+  const scroll = resolveBeatDragViewport(event, pixelsPerSecond);
+  if (!scroll) return;
+  const actor = createBeatDragActor(event, originalTime, pixelsPerSecond, scroll);
+  if (actor) activateBeatDrag(actor);
+}
+
 /** Hide both layers when beats are packed tighter than this (px) — too dense to read. */
 function beatsTooDense(beatTimes: number[], pps: number): boolean {
   if (beatTimes.length < 2) return true;
@@ -96,17 +369,31 @@ export const BeatStrip = memo(function BeatStrip({
   pps: number;
   renderTimeRange?: TimelineTimeRange;
 }) {
-  // Active drag: which beat and how far (px) it's been dragged.
-  const [drag, setDrag] = useState<{ index: number; dx: number } | null>(null);
-  const dragRef = useRef<{ index: number; startX: number; origTime: number } | null>(null);
+  const activeActor = useSyncExternalStore(
+    subscribeBeatDrag,
+    getBeatDragSnapshot,
+    getBeatDragSnapshot,
+  );
+  const sessionEpoch = usePlayerStore((state) => state.timelineSessionEpoch);
+  const projectId = usePlayerStore((state) => state.timelineProjectId);
 
   if (!beatTimes || beatsTooDense(beatTimes, pps)) return null;
+  const activeBeatIndex = activeActor
+    ? beatTimes.findIndex((time) => Math.abs(time - activeActor.originalTime) < 1e-3)
+    : -1;
+  const drag =
+    activeActor &&
+    activeActor.sessionEpoch === sessionEpoch &&
+    activeActor.projectId === projectId &&
+    activeBeatIndex >= 0
+      ? activeActor
+      : null;
   const cy = BEAT_BAND_H / 2;
   const beatEntries = getTimelineBeatEntries(
     beatTimes,
     beatStrengths,
     renderTimeRange,
-    drag ? new Set([drag.index]) : undefined,
+    drag ? new Set([activeBeatIndex]) : undefined,
   );
 
   return (
@@ -119,7 +406,7 @@ export const BeatStrip = memo(function BeatStrip({
         const strength = Math.pow(Math.min(1, beatStrength ?? 0.5), 2.2);
         const r = 1.5 + strength * 2.5;
         const opacity = 0.25 + strength * 0.75;
-        const dxPx = drag?.index === i ? drag.dx : 0;
+        const dxPx = drag && activeBeatIndex === i ? drag.dx : 0;
         const x = t * pps + dxPx;
         return (
           <div
@@ -141,36 +428,7 @@ export const BeatStrip = memo(function BeatStrip({
               // selection (which otherwise "selects" the whole panel mid-drag).
               e.preventDefault();
               e.stopPropagation();
-              e.currentTarget.setPointerCapture(e.pointerId);
-              dragRef.current = { index: i, startX: e.clientX, origTime: t };
-              setDrag({ index: i, dx: 0 });
-              usePlayerStore.getState().setBeatDragging(true); // hide the playhead guideline
-              usePlayerStore.getState().requestSeek(Math.max(0, t)); // scrub audio at beat
-            }}
-            onPointerMove={(e) => {
-              const d = dragRef.current;
-              if (!d || d.index !== i) return;
-              e.preventDefault();
-              const dx = e.clientX - d.startX;
-              setDrag({ index: i, dx });
-              // Scrub the audio (and move the playhead) to follow the dragged beat.
-              usePlayerStore.getState().requestSeek(Math.max(0, d.origTime + dx / pps));
-            }}
-            onPointerUp={(e) => {
-              const d = dragRef.current;
-              dragRef.current = null;
-              setDrag(null);
-              usePlayerStore.getState().setBeatDragging(false);
-              if (e.currentTarget.hasPointerCapture?.(e.pointerId)) {
-                e.currentTarget.releasePointerCapture(e.pointerId);
-              }
-              if (!d || d.index !== i) return;
-              const dx = e.clientX - d.startX;
-              if (Math.abs(dx) > 2) {
-                const newTime = Math.max(0, d.origTime + dx / pps);
-                moveBeatCompositionTime(d.origTime, newTime);
-                usePlayerStore.getState().requestSeek(newTime); // park scrubber at new beat
-              }
+              beginBeatDrag(e, t, pps);
             }}
             onDoubleClick={(e) => {
               e.stopPropagation();

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

@@ -1,7 +1,7 @@
 // @vitest-environment happy-dom
 import { act } from "react";
 import { createRoot } from "react-dom/client";
-import { describe, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import type { TimelineElement } from "../store/playerStore";
 import {
   KeyframeDiamondContextMenu,
@@ -10,6 +10,10 @@ import {
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
 const element = { id: "box", start: 0, duration: 2, track: 0 } as unknown as TimelineElement;
 
 const state: KeyframeDiamondContextMenuState = {
@@ -87,4 +91,15 @@ describe("KeyframeDiamondContextMenu", () => {
     act(() => root.unmount());
     host.remove();
   });
+
+  // The layer-wide delete takes every keyframed tween. Opened from a diamond it
+  // has to stay on that diamond's own lane, or right-clicking the opacity lane
+  // silently clears position too.
+  it("deletes all keyframes from the animation that opened the menu", () => {
+    const onDeleteAll = vi.fn();
+
+    clickMenuItem("Delete All Keyframes", { onDeleteAll });
+
+    expect(onDeleteAll).toHaveBeenCalledExactlyOnceWith(element, "box-to-1-position");
+  });
 });

package/src/player/components/KeyframeDiamondContextMenu.tsx

@@ -1,4 +1,3 @@
-import { memo } from "react";
 import { createPortal } from "react-dom";
 import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
 import type { TimelineElement } from "../store/playerStore";
@@ -7,6 +6,8 @@ import type { TimelineKeyframeTarget } from "./timelineKeyframeIdentity";
 export interface KeyframeDiamondContextMenuState {
   x: number;
   y: number;
+  /** Timeline project session that created this portaled target. */
+  sessionEpoch?: number;
   element: TimelineElement;
   elementId: string;
   percentage: number;
@@ -23,12 +24,12 @@ interface KeyframeDiamondContextMenuProps {
    *  floor in removeMotionPathPointInScript): an entry that silently no-ops is
    *  worse than no entry. */
   onDelete?: (elementId: string, keyframe: TimelineKeyframeTarget) => void;
-  onDeleteAll: (element: TimelineElement) => void;
+  onDeleteAll: (element: TimelineElement, animationId?: string) => void;
   /** Retime the keyframe to the current playhead, preserving its value + ease. */
   onMoveToPlayhead?: (element: TimelineElement, keyframe: TimelineKeyframeTarget) => void;
 }
 
-export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMenu({
+export function KeyframeDiamondContextMenu({
   state,
   onClose,
   onDelete,
@@ -93,7 +94,7 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe
         type="button"
         className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 cursor-pointer text-left"
         onClick={() => {
-          onDeleteAll(state.element);
+          onDeleteAll(state.element, state.animationId);
           onClose();
         }}
       >
@@ -102,4 +103,4 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe
     </div>,
     document.body,
   );
-});
+}

package/src/player/components/LayerDisclosureRow.tsx

@@ -44,6 +44,8 @@ export function LayerDisclosureRow({
     >
       <button
         type="button"
+        // ponytail: No focus id here; keyboard routing belongs to the enclosing logical row.
+        tabIndex={-1}
         aria-expanded={isExpanded}
         aria-controls={lanesId}
         aria-label={`${isExpanded ? "Collapse" : "Expand"} ${name} keyframes`}

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

@@ -244,6 +244,25 @@ describe("Timeline provider boundary", () => {
     expect(propertyLane.style.background).toBe("");
     expect(propertyLane.style.border).toBe("");
     expect(propertyLane.style.borderRadius).toBe("");
+    const treegrid = host.querySelector<HTMLElement>('[role="treegrid"]');
+    const semanticRows = treegrid?.querySelectorAll<HTMLElement>('[role="row"]') ?? [];
+    expect(treegrid?.getAttribute("aria-rowcount")).toBe("3");
+    expect([...semanticRows].map((row) => row.getAttribute("aria-rowindex"))).toEqual([
+      "1",
+      "2",
+      "3",
+    ]);
+    expect(semanticRows[0]?.getAttribute("aria-level")).toBe("1");
+    expect(semanticRows[0]?.getAttribute("aria-expanded")).toBe("true");
+    expect(semanticRows[1]?.getAttribute("aria-level")).toBe("2");
+    expect(semanticRows[1]?.textContent).toContain("position");
+    expect(semanticRows[1]?.querySelector('[role="rowheader"]')?.getAttribute("aria-owns")).toBe(
+      headerLane.id,
+    );
+    expect(semanticRows[1]?.querySelector('[role="gridcell"]')?.getAttribute("aria-owns")).toBe(
+      propertyLane.id,
+    );
+    expect(semanticRows[2]?.hasAttribute("aria-expanded")).toBe(false);
     expect(trackHeader.style.width).toBe(`${LABEL_COL_W}px`);
     expect(rulerOrigin.style.width).toBe(`${LABEL_COL_W + GUTTER}px`);
     expect(playhead.style.left).toBe(`${LABEL_COL_W + GUTTER + 1000 - PLAYHEAD_HEAD_W / 2}px`);
@@ -295,17 +314,16 @@ describe("Timeline provider boundary", () => {
     const root = createRoot(host);
     act(() => root.render(React.createElement(Timeline)));
 
-    const list = host.querySelector<HTMLElement>('[role="list"]');
-    const rows = list?.querySelectorAll('[role="listitem"]') ?? [];
+    const treegrid = host.querySelector<HTMLElement>('[role="treegrid"]');
+    const rows = treegrid?.querySelectorAll('[role="row"]') ?? [];
     expect(rows).toHaveLength(12);
-    expect(rows[0]?.getAttribute("aria-posinset")).toBe("1");
-    expect(rows[0]?.getAttribute("aria-setsize")).toBe("12");
-    expect(rows[11]?.getAttribute("aria-posinset")).toBe("12");
+    expect(treegrid?.getAttribute("aria-rowcount")).toBe("12");
+    expect(rows[0]?.getAttribute("aria-rowindex")).toBe("1");
+    expect(rows[11]?.getAttribute("aria-rowindex")).toBe("12");
 
     act(() => root.unmount());
   });
 
-  // fallow-ignore-next-line code-duplication
   it("renders the gutter without legacy icons or hue dots", () => {
     const { host, root } = renderBasicTimeline();
 
@@ -404,8 +422,8 @@ describe("Timeline provider boundary", () => {
       );
     });
 
-    const viewport = host.querySelector('[aria-label="Timeline"]')?.firstElementChild;
-    expect(viewport).toBeInstanceOf(HTMLElement);
+    const viewport = host.querySelector<HTMLElement>("[data-timeline-scroll-viewport]");
+    expect(viewport).not.toBeNull();
     act(() => {
       viewport?.dispatchEvent(
         new MouseEvent("pointerdown", {