@hyperframes/studio 0.7.107 → 0.7.108

package/src/player/components/useAutomationLanes.ts

@@ -0,0 +1,170 @@
+/**
+ * Writes for the timeline's audio automation lanes.
+ *
+ * Kept out of TimelineLanes so that component does not grow another concern.
+ * Reading lives in `automationLaneData`, shared with the row layout, which needs
+ * the lane count to reserve height.
+ *
+ * Edits go to the *selected* element, because that is what the attribute commit
+ * path targets. An unselected clip still draws its envelopes — they are just
+ * read only, which is also what stops a stray drag from editing the wrong track.
+ */
+
+import { useCallback, useMemo, useRef } from "react";
+import {
+  HF_AUDIO_AUTOMATION_ATTR,
+  serializeAutomation,
+  type HfAutomation,
+  type HfAutomationLane,
+} from "@hyperframes/core/audio-automation";
+import type { HfAudioFxChain } from "@hyperframes/core/audio-fx";
+import {
+  useDomEditActionsContextOptional,
+  useDomEditSelectionContextOptional,
+} from "../../contexts/DomEditContext";
+import { resolveTimelineIdForSelection } from "../../utils/studioHelpers";
+import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+import type { AutomationSelection } from "../store/automationSelectionSlice";
+import { elementAutomation, elementFxChain } from "./automationLaneData";
+import { createAutomationGestureKeys } from "./automationGestureKeys";
+
+export interface AutomationLaneBinding {
+  automation: HfAutomation;
+  /** One entry per lane, in draw order — each gets its own row. */
+  lanes: HfAutomationLane[];
+  chain: HfAudioFxChain | null;
+  /** Continuous write while dragging; does not persist. */
+  onPreview(next: HfAutomation): void;
+  /** Gesture-end write; this is the one that persists and lands in undo. */
+  onCommit(next: HfAutomation): void;
+  /**
+   * Select this clip, which is what makes its lanes editable. A lane calls this
+   * instead of writing when it is read-only — pressing the lane is the only
+   * route in, since lanes sit below the clip bar where the timeline's own
+   * selection handler never sees them.
+   */
+  onSelect(): void;
+  readOnly: boolean;
+  /**
+   * The timeline clip `onCommit`/`onPreview` will ACTUALLY persist to, which is
+   * whatever the dom-edit layer has selected — not necessarily the element this
+   * binding was made for (see `onSelect` below). Null outside an edit session or
+   * when the dom-edit selection maps to no clip. Resolved exactly the way
+   * applyDomSelection resolves it, so in a settled selection it equals the bound
+   * element's key; it lags only in the window a non-gesture caller can hit.
+   */
+  commitTargetKey: string | null;
+  /** This element's active selection box, or null if none / it belongs to a
+   *  different element. */
+  selection: AutomationSelection | null;
+  /** Live write while dragging a selection box on the given lane; does not
+   *  persist — the selection is ephemeral store state, not part of the
+   *  composition. */
+  onRangeSelect(target: string, t0: number, t1: number, v0: number, v1: number): void;
+  onRangeClear(): void;
+}
+
+export interface UseAutomationLanesResult {
+  bind(element: TimelineElement, isSelected: boolean): AutomationLaneBinding;
+}
+
+export function useAutomationLanes(): UseAutomationLanesResult {
+  // One per hook instance, held across renders: a gesture spans many commits and
+  // they all have to record under the same key for undo to take the whole drag.
+  const gestureKeys = useRef(createAutomationGestureKeys());
+  // Optional: the player also runs outside Studio, where there is no edit
+  // session. There the lanes render read-only, which is the right fallback.
+  const domEdit = useDomEditActionsContextOptional();
+  const domEditSelection = useDomEditSelectionContextOptional()?.domEditSelection ?? null;
+  const elements = usePlayerStore((s) => s.elements);
+  const automationSelection = usePlayerStore((s) => s.automationSelection);
+  const setAutomationSelection = usePlayerStore((s) => s.setAutomationSelection);
+  const clearAutomationSelection = usePlayerStore((s) => s.clearAutomationSelection);
+
+  // Read from the SAME render as the commit handlers below: both contexts update
+  // in one commit, so a handler and this key can never describe different
+  // moments. activeCompPath is not needed — resolveTimelineIdForSelection only
+  // uses it as a fallback for a selection with no sourceFile of its own, and
+  // DomEditSelection always carries one.
+  const commitTargetKey = useMemo(
+    () =>
+      domEditSelection ? resolveTimelineIdForSelection(domEditSelection, elements, null) : null,
+    [domEditSelection, elements],
+  );
+
+  const bind = useCallback(
+    (element: TimelineElement, isSelected: boolean): AutomationLaneBinding => {
+      const chain = elementFxChain(element);
+      const automation = elementAutomation(element);
+      const elementKey = getTimelineElementIdentity(element);
+
+      const write = (next: HfAutomation, persist: boolean): void => {
+        if (!domEdit || !isSelected) return;
+        const value = next.lanes.length > 0 ? serializeAutomation(next) : "";
+        // Every write of one gesture under one key, so undo takes back the whole
+        // drag rather than the last fragment history happened to keep.
+        const coalesce = persist ? gestureKeys.current.commit() : gestureKeys.current.live();
+        // Quiet, not the refreshing commit: releasing a dragged point used to
+        // reload the preview, which restarts every playing track — the same chop
+        // the live write during the drag exists to avoid. Quiet still persists
+        // and still resyncs the selection, so the next edit sees this one.
+        if (persist) {
+          void domEdit.handleDomAttributeQuietCommit(HF_AUDIO_AUTOMATION_ATTR, value, coalesce);
+        }
+        // Dragging a point writes live: no preview refresh, so the composition
+        // does not reload and restart playback on every pixel.
+        else {
+          // Preview only, because a gesture writes on every pointermove: the
+          // preview and the running audio follow the pointer, and the release
+          // below is the one write that reaches the file and the undo stack.
+          void domEdit.handleDomAttributeLiveCommit(
+            HF_AUDIO_AUTOMATION_ATTR,
+            value || null,
+            undefined,
+            {
+              coalesce,
+              previewOnly: true,
+            },
+          );
+        }
+      };
+
+      return {
+        automation,
+        lanes: automation.lanes,
+        chain,
+        onPreview: (next) => write(next, false),
+        onCommit: (next) => write(next, true),
+        // Deliberately not awaited before an edit: the commit handlers close
+        // over the selection as it was when they were built, so writing in the
+        // same tick would land on whichever element was selected before.
+        // Selecting is its own gesture; the lane goes live after it.
+        onSelect: () => void domEdit?.handleTimelineElementSelect(element),
+        readOnly: !domEdit || !isSelected,
+        commitTargetKey: domEdit ? commitTargetKey : null,
+        selection: automationSelection?.elementKey === elementKey ? automationSelection : null,
+        // Not gated on `isSelected`, unlike the writes above. A selection is
+        // ephemeral store state, and the drag that draws one on a read-only lane is
+        // the same press that selects the clip — refusing it here meant the first
+        // drag on a lane silently did nothing and the author had to drag again.
+        // Nothing can be written through it while the lane is read-only: every
+        // consumer resolves the binding again and finds `readOnly`.
+        onRangeSelect: (target, t0, t1, v0, v1) => {
+          if (!domEdit) return;
+          setAutomationSelection({ elementKey, target, t0, t1, v0, v1 });
+        },
+        onRangeClear: () => clearAutomationSelection(),
+      };
+    },
+    [
+      domEdit,
+      commitTargetKey,
+      automationSelection,
+      setAutomationSelection,
+      clearAutomationSelection,
+    ],
+  );
+
+  return useMemo(() => ({ bind }), [bind]);
+}

package/src/player/components/useAutomationRangeDrag.ts

@@ -0,0 +1,114 @@
+/**
+ * Drawing a new selection box over an automation lane's empty background.
+ *
+ * Its own module for the same reason useAutomationEdgeStretch is: a sixth
+ * mutually-exclusive gesture on a hook already at the file's complexity
+ * budget, and one with no use for anything the others snapshot.
+ */
+
+import { useCallback, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
+import { snapLaneTime } from "./automationLaneGeometry";
+import { capturePointer } from "./automationLanePointer";
+import { SNAP_SEC } from "./automationLaneDragMath";
+
+export interface UseAutomationRangeDragInput {
+  pointAt(clientX: number, clientY: number): { t: number; v: number };
+  xOf(t: number): number;
+  yOf(v: number): number;
+  duration: number;
+  snapTimes?: readonly number[] | undefined;
+  onRangeSelect?: ((t0: number, t1: number, v0: number, v1: number) => void) | undefined;
+  onRangeClear?: (() => void) | undefined;
+}
+
+export interface UseAutomationRangeDragResult {
+  /** Whether a box is being drawn right now. */
+  dragging: boolean;
+  /** Arms a new box at the press, or declines when no caller wants to hear
+   *  about one (a read-only lane). */
+  arm(e: ReactPointerEvent<SVGSVGElement>): void;
+  move(e: ReactPointerEvent<SVGSVGElement>): void;
+  /** A sub-threshold press clears the selection rather than leaving a
+   *  zero-width one behind. */
+  finish(): void;
+}
+
+/**
+ * A corner of the selection box under the pointer.
+ *
+ * Time is clamped to the clip and snaps to the grid, because the box's span is
+ * also what a shape insert or a paste acts over and those want beat-aligned
+ * edges. The value is taken as it lies: there is no grid on a parameter axis,
+ * and rounding a dB bound would move which points the box catches.
+ */
+function boxCornerAt(
+  e: ReactPointerEvent<SVGSVGElement>,
+  input: Pick<UseAutomationRangeDragInput, "pointAt" | "duration" | "snapTimes">,
+): { t: number; v: number } {
+  const raw = input.pointAt(e.clientX, e.clientY);
+  const clamped = Math.min(input.duration, Math.max(0, raw.t));
+  return {
+    t: e.altKey ? clamped : snapLaneTime(clamped, input.snapTimes ?? [], SNAP_SEC),
+    v: raw.v,
+  };
+}
+
+export function useAutomationRangeDrag({
+  pointAt,
+  xOf,
+  yOf,
+  duration,
+  snapTimes,
+  onRangeSelect,
+  onRangeClear,
+}: UseAutomationRangeDragInput): UseAutomationRangeDragResult {
+  const [box, setBox] = useState<{
+    from: { t: number; v: number };
+    to: { t: number; v: number };
+  } | null>(null);
+  /** Whether the live drag has crossed the pixel threshold that turns a press
+   *  into an actual box, rather than a click that should just clear one. */
+  const crossed = useRef(false);
+
+  const arm = useCallback(
+    (e: ReactPointerEvent<SVGSVGElement>): void => {
+      if (!onRangeSelect) return;
+      e.preventDefault();
+      capturePointer(e);
+      const corner = boxCornerAt(e, { pointAt, duration, snapTimes });
+      crossed.current = false;
+      setBox({ from: corner, to: corner });
+    },
+    [onRangeSelect, pointAt, duration, snapTimes],
+  );
+
+  const move = useCallback(
+    (e: ReactPointerEvent<SVGSVGElement>): void => {
+      if (box === null) return;
+      const to = boxCornerAt(e, { pointAt, duration, snapTimes });
+      const { from } = box;
+      setBox({ from, to });
+      const travelled = Math.max(
+        Math.abs(xOf(to.t) - xOf(from.t)),
+        Math.abs(yOf(to.v) - yOf(from.v)),
+      );
+      if (travelled <= 3) return;
+      crossed.current = true;
+      onRangeSelect?.(
+        Math.min(from.t, to.t),
+        Math.max(from.t, to.t),
+        Math.min(from.v, to.v),
+        Math.max(from.v, to.v),
+      );
+    },
+    [box, pointAt, duration, snapTimes, xOf, yOf, onRangeSelect],
+  );
+
+  const finish = useCallback((): void => {
+    if (!crossed.current) onRangeClear?.();
+    crossed.current = false;
+    setBox(null);
+  }, [onRangeClear]);
+
+  return { dragging: box !== null, arm, move, finish };
+}

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

@@ -6,8 +6,9 @@ import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { afterEach, describe, expect, it } from "vitest";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import { LANE_H, TRACK_H } from "./timelineLayout";
+import { AUTOMATION_LANE_H } from "./automationLaneHeight";
 import { getTimelinePropertyLanes } from "./TimelinePropertyLanes";
-import { useTimelineTrackLayout } from "./useTimelineTrackLayout";
+import { resolveTrackKeyframeClip, useTimelineTrackLayout } from "./useTimelineTrackLayout";
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -92,3 +93,108 @@ describe("useTimelineTrackLayout", () => {
     unmount();
   });
 });
+const audioClip = (id: string, over: Partial<TimelineElement> = {}): TimelineElement => ({
+  id,
+  key: id,
+  tag: "audio",
+  start: 0,
+  duration: 10,
+  track: 10,
+  ...over,
+});
+
+/**
+ * Clips sharing a row share a lane row per property, so the height they reserve
+ * is the track's grouped count — and the row is open when ANY of them is
+ * expanded, or clicking a sibling collapsed it.
+ */
+describe("a track several clips share", () => {
+  const peaking = (gain: number) =>
+    JSON.stringify({
+      version: 1,
+      nodes: [{ type: "peaking", id: "n1", params: { frequency: 1000, gain, q: 1.4 } }],
+    });
+  const lanes = (...targets: string[]) =>
+    JSON.stringify({
+      version: 1,
+      lanes: targets.map((target) => ({ target, points: [{ t: 0, v: 1 }] })),
+    });
+  const narration1 = audioClip("narration-1", {
+    fxChain: peaking(-3),
+    automation: lanes("fx.n1.gain"),
+  });
+  const narration2 = audioClip("narration-2", {
+    start: 10,
+    fxChain: peaking(-6),
+    automation: lanes("fx.n1.gain", "volume"),
+  });
+
+  /** Reserved height for the row, with only narration-1 ever expanded. */
+  function rowHeight(selectedElementId: string | null): number {
+    usePlayerStore.setState({ expandedClipIds: new Set(["narration-1"]) });
+    let height = 0;
+    function Probe() {
+      height =
+        useTimelineTrackLayout([narration1, narration2], new Map(), selectedElementId, new Set())
+          .rowHeights[0] ?? 0;
+      return null;
+    }
+    const root = createRoot(document.createElement("div"));
+    act(() => root.render(React.createElement(Probe)));
+    act(() => root.unmount());
+    return height;
+  }
+
+  it("reserves one row per property, not per clip's lane", () => {
+    // Two properties across the two clips — a shared 1 kHz peaking gain and a
+    // volume envelope on one of them — so two rows, not three.
+    expect(rowHeight("narration-1")).toBe(TRACK_H + 2 * AUTOMATION_LANE_H);
+  });
+
+  it("stays open at the same height when the selection moves to a sibling", () => {
+    // Expansion is stored per clip but reads as the row's: asking only about the
+    // active clip collapsed the row the moment another was clicked.
+    expect(rowHeight("narration-2")).toBe(rowHeight("narration-1"));
+  });
+});
+
+describe("resolveTrackKeyframeClip", () => {
+  const none = new Map<string, number>();
+
+  it("picks an audio clip that has only automation, no tweens", () => {
+    // Gating on tweens alone left an audio clip's envelopes unreachable: no
+    // clip resolved, so the track got no caret, no height and no lanes.
+    const bgm = audioClip("bgm");
+    const picked = resolveTrackKeyframeClip([bgm], none, null, new Set(), () => 1);
+    expect(picked).toBe(bgm);
+  });
+
+  it("still resolves nothing when a clip has neither", () => {
+    expect(resolveTrackKeyframeClip([audioClip("bgm")], none, null, new Set(), () => 0)).toBeNull();
+  });
+
+  it("prefers the selected clip over the one with more to show", () => {
+    const a = audioClip("a");
+    const b = audioClip("b");
+    const picked = resolveTrackKeyframeClip([a, b], new Map([["b", 4]]), "a", new Set(), (e) =>
+      e.id === "a" ? 1 : 0,
+    );
+    expect(picked).toBe(a);
+  });
+
+  it("counts tweens and automation together when breaking a tie", () => {
+    const a = audioClip("a");
+    const b = audioClip("b");
+    const picked = resolveTrackKeyframeClip(
+      [a, b],
+      new Map([
+        ["a", 1],
+        ["b", 1],
+      ]),
+      null,
+      new Set(),
+      (e) => (e.id === "b" ? 3 : 0),
+    );
+    expect(picked).toBe(b);
+  });
+});

package/src/player/components/useTimelineTrackLayout.ts

@@ -1,6 +1,8 @@
 import { useMemo, useRef } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { animationLaneGroups } from "./TimelinePropertyLanes";
+import { isAudioTimelineElement } from "../../utils/timelineInspector";
+import { elementAutomationLanes, groupAutomationLanes } from "./automationLaneData";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import type { DraggedClipState } from "./timelineClipDragTypes";
 import { useTimelineTrackDerivations } from "./useTimelineTrackDerivations";
@@ -14,6 +16,60 @@ import {
 
 export { getTrackStyle } from "./timelineIcons";
 
+/**
+ * Whether this track draws the beat-dot strip: only where there are beats to
+ * draw, and only on the track the user is working in — the selected clip's, or
+ * the music track's when nothing is selected.
+ */
+export function trackShowsBeatStrip(
+  els: readonly TimelineElement[],
+  beatTimes: readonly number[] | undefined,
+  ctx: {
+    selectedElementId: string | null;
+    isMusicTrack(element: TimelineElement): boolean;
+  },
+): boolean {
+  if ((beatTimes?.length ?? 0) < 2) return false;
+  return ctx.selectedElementId
+    ? els.some((e) => (e.key ?? e.id) === ctx.selectedElementId)
+    : els.some((e) => ctx.isMusicTrack(e));
+}
+
+/**
+ * Automation lanes on one clip, or 0 for anything that is not audio.
+ *
+ * An audio clip can be worth expanding without carrying a single tween, so this
+ * counts toward whether a track has anything to disclose. A function rather than
+ * a map so every caller reads the same cached parse and none can drift.
+ */
+function automationLaneCountOf(element: TimelineElement): number {
+  return isAudioTimelineElement(element) ? elementAutomationLanes(element).length : 0;
+}
+
+/**
+ * Automation rows a TRACK reserves: the union over the clips sharing it, since
+ * clips on one row share a lane row per property. Counting only the active clip's
+ * lanes reserved a height that changed with the selection.
+ */
+function trackAutomationLaneCount(elements: readonly TimelineElement[]): number {
+  return groupAutomationLanes(elements).length;
+}
+
+/**
+ * Is this row disclosed? Expansion is stored per clip, but it reads as a property
+ * of the ROW: the active clip changes with the selection, so asking only about it
+ * collapsed the row the moment you clicked a sibling. Any expanded clip on the
+ * track holds the row open — and the caret expands and collapses all of them
+ * together (see TimelineLanes), so the two can only disagree on state predating
+ * this rule or written by the keyframe auto-expand.
+ */
+export function isTrackRowExpanded(
+  elements: readonly TimelineElement[],
+  expandedClipIds: ReadonlySet<string>,
+): boolean {
+  return elements.some((element) => expandedClipIds.has(element.key ?? element.id));
+}
+
 /**
  * The single keyframed element whose property lanes a track shows when expanded.
  * A track can hold several elements (same z-index is common), but keyframes are
@@ -27,10 +83,15 @@ export function resolveTrackKeyframeClip(
   laneCounts: ReadonlyMap<string, number>,
   selectedElementId: string | null,
   selectedElementIds: ReadonlySet<string>,
+  automationLaneCount: (element: TimelineElement) => number = automationLaneCountOf,
 ): TimelineElement | null {
-  const keyframed = elements.filter(
-    (element) => (laneCounts.get(element.key ?? element.id) ?? 0) >= 1,
-  );
+  // Automation counts toward "has something to disclose". Without it an audio
+  // clip carrying envelopes but no tweens resolved to null, so its track got no
+  // caret, no reserved height and no lanes — the automation was unreachable for
+  // exactly the tracks the feature is for.
+  const disclosable = (element: TimelineElement): number =>
+    (laneCounts.get(element.key ?? element.id) ?? 0) + automationLaneCount(element);
+  const keyframed = elements.filter((element) => disclosable(element) >= 1);
   if (keyframed.length === 0) return null;
   const selected = keyframed.find((element) => {
     const key = element.key ?? element.id;
@@ -39,8 +100,9 @@ export function resolveTrackKeyframeClip(
   if (selected) return selected;
   // Most lanes wins, first one on a tie (same as the old stable sort), but as a
   // reduce over the already non-empty list so there's no index to assert on.
-  const lanesOf = (element: TimelineElement) => laneCounts.get(element.key ?? element.id) ?? 0;
-  return keyframed.reduce((best, element) => (lanesOf(element) > lanesOf(best) ? element : best));
+  return keyframed.reduce((best, element) =>
+    disclosable(element) > disclosable(best) ? element : best,
+  );
 }
 
 /** Lanes per clip: the count of distinct property groups whose tween contributes
@@ -74,8 +136,9 @@ function useTimelineRowHeights(
   const expandedClipIds = usePlayerStore((s) => s.expandedClipIds);
   const { laneCounts, rowGeometry } = useMemo(() => {
     const laneCounts = computeLaneCounts(tracks, gsapAnimations);
-    // Row height follows only the active keyframe clip, so a track with several
+    // Keyframe lanes follow only the active clip, so a track with several
     // keyframed elements never reserves empty lanes for the ones not shown.
+    // Automation lanes follow the whole row: they are shared per property.
     const heightTracks: TimelineTrackHeightClip[][] = tracks.map(([, elements]) => {
       const active = resolveTrackKeyframeClip(
         elements,
@@ -85,7 +148,20 @@ function useTimelineRowHeights(
       );
       if (!active) return [];
       const clipId = active.key ?? active.id;
-      return [{ clipId, laneCount: laneCounts.get(clipId) ?? 0 }];
+      // `trackHeights` gates the reserved lanes on this id being expanded, and the
+      // row is expanded when ANY of its clips is — so hand it whichever clip holds
+      // the row open, while the lane counts stay the active clip's (keyframes) and
+      // the track's (automation, shared across the row).
+      const holdingOpen = elements.find((element) =>
+        expandedClipIds.has(element.key ?? element.id),
+      );
+      return [
+        {
+          clipId: holdingOpen ? (holdingOpen.key ?? holdingOpen.id) : clipId,
+          laneCount: laneCounts.get(clipId) ?? 0,
+          automationLaneCount: trackAutomationLaneCount(elements),
+        },
+      ];
     });
     const rowHeights = trackHeights(heightTracks, expandedClipIds);
     return {

package/src/player/hooks/useExpandedTimelineElements.ts

@@ -152,6 +152,13 @@ function hostElementState(flat: TimelineElement | undefined): Partial<TimelineEl
     hidden: flat.hidden,
     timelineLocked: flat.timelineLocked,
     timelineRole: flat.timelineRole,
+    // Same reason as the three above: these are read off the host element, which
+    // an expanded child is built without. Missing them, an audio child inside a
+    // sub-composition reserved no automation height and drew no lanes, while the
+    // property panel — reading the live DOM selection rather than this row —
+    // still showed the chain and its toggles.
+    fxChain: flat.fxChain,
+    automation: flat.automation,
   };
 }
 

package/src/player/hooks/useTimelinePlayer.ts

@@ -389,8 +389,20 @@ export function useTimelinePlayer() {
         seek(state.requestedSeekTime);
         usePlayerStore.getState().clearSeekRequest();
       }
+      // Play or stop from outside the loop — the FX rack auditioning a preset
+      // while paused, which is silent otherwise. `returnTo` puts the playhead
+      // back where the request found it: hovering is not an edit.
+      const request = state.playbackRequest;
+      if (request && request.nonce !== prev.playbackRequest?.nonce) {
+        if (request.playing) play();
+        else {
+          pause();
+          if (request.returnTo !== null) seek(request.returnTo);
+        }
+        usePlayerStore.getState().clearPlaybackRequest();
+      }
     });
-  }, [seek]);
+  }, [seek, play, pause]);
   const { playbackKeyDownRef, playbackKeyUpRef, attachIframeShortcutListeners, togglePlay } =
     usePlaybackKeyboard({
       iframeRef,

package/src/player/lib/automationStoreSync.test.ts

@@ -0,0 +1,83 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it } from "vitest";
+import { syncStoredAutomationFromPreview } from "./automationStoreSync";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+
+const TWO_POINTS = '{"version":1,"lanes":[{"target":"volume","points":[{"t":0,"v":1}]}]}';
+const RESTORED =
+  '{"version":1,"lanes":[{"target":"volume","points":[{"t":0,"v":1},{"t":4,"v":0}]}]}';
+
+const el = (over: Partial<TimelineElement> = {}): TimelineElement => ({
+  id: "bgm",
+  key: "bgm",
+  tag: "audio",
+  start: 0,
+  duration: 10,
+  track: 1,
+  domId: "bgm",
+  ...over,
+});
+
+/** A stand-in preview document carrying the attributes an undo would have written. */
+function previewWith(attrs: Record<string, string>): Document {
+  const doc = document.implementation.createHTMLDocument("preview");
+  const audio = doc.createElement("audio");
+  audio.id = "bgm";
+  for (const [name, value] of Object.entries(attrs)) audio.setAttribute(name, value);
+  doc.body.append(audio);
+  return doc;
+}
+
+beforeEach(() => {
+  usePlayerStore.getState().reset();
+});
+
+describe("syncStoredAutomationFromPreview", () => {
+  it("reads back an envelope an undo restored on the preview", () => {
+    // The bug: a soft undo patches the preview document and re-runs the timeline, but
+    // the store keeps its own copy of the attributes and that copy is what a lane
+    // draws — so an undone delete stayed invisible until the page was reloaded.
+    usePlayerStore.setState({ elements: [el({ automation: TWO_POINTS })] });
+    syncStoredAutomationFromPreview(previewWith({ "data-automation": RESTORED }));
+    expect(usePlayerStore.getState().elements[0]?.automation).toBe(RESTORED);
+  });
+
+  it("reads back an undone FX chain too, since a lane's targets come from it", () => {
+    const chain = '{"version":1,"nodes":[{"type":"lowpass","id":"n1","params":{}}]}';
+    usePlayerStore.setState({ elements: [el()] });
+    syncStoredAutomationFromPreview(previewWith({ "data-fx-chain": chain }));
+    expect(usePlayerStore.getState().elements[0]?.fxChain).toBe(chain);
+  });
+
+  it("clears an attribute the undo removed", () => {
+    usePlayerStore.setState({ elements: [el({ automation: TWO_POINTS })] });
+    syncStoredAutomationFromPreview(previewWith({}));
+    expect(usePlayerStore.getState().elements[0]?.automation).toBeUndefined();
+  });
+
+  it("finds the node by data-hf-id when the dom id does not match", () => {
+    // Studio stamps hf-ids; an element discovered under a suffixed dom id still has
+    // to resolve, or the sync silently skips it.
+    const doc = document.implementation.createHTMLDocument("preview");
+    const audio = doc.createElement("audio");
+    audio.setAttribute("data-hf-id", "hf-snao");
+    audio.setAttribute("data-automation", RESTORED);
+    doc.body.append(audio);
+    usePlayerStore.setState({ elements: [el({ domId: "bgm-2", hfId: "hf-snao" })] });
+    syncStoredAutomationFromPreview(doc);
+    expect(usePlayerStore.getState().elements[0]?.automation).toBe(RESTORED);
+  });
+
+  it("keeps the same array when nothing changed, so nothing re-renders", () => {
+    usePlayerStore.setState({ elements: [el({ automation: RESTORED })] });
+    const before = usePlayerStore.getState().elements;
+    syncStoredAutomationFromPreview(previewWith({ "data-automation": RESTORED }));
+    expect(usePlayerStore.getState().elements).toBe(before);
+  });
+
+  it("does nothing without a preview document", () => {
+    usePlayerStore.setState({ elements: [el({ automation: TWO_POINTS })] });
+    syncStoredAutomationFromPreview(null);
+    expect(usePlayerStore.getState().elements[0]?.automation).toBe(TWO_POINTS);
+  });
+});