@hyperframes/studio 0.8.110 → 0.8.112

package/src/player/components/TimelineLanes.tsx

@@ -54,7 +54,6 @@ export function TimelineLanes({
   pinnedClipIdentities,
   trackOrder,
   tracks,
-  trackStyles,
   groups,
   laneCounts,
   selectedElementId,
@@ -197,9 +196,26 @@ export function TimelineLanes({
                 actorWindows,
               )
             : els;
-          const ts = trackStyles.get(trackNum) ?? getTrackStyle("");
           const isPendingTrack =
             draggedClip?.started === true && !trackOrder.includes(trackNum) && els.length === 0;
+          if (isPendingTrack)
+            return (
+              <div
+                key={rowKey}
+                data-timeline-new-track-lane={row}
+                aria-hidden="true"
+                className={rowsVirtualized ? "absolute" : "relative"}
+                style={{
+                  top: rowsVirtualized ? rowGeometry.getRowTop(row) : undefined,
+                  marginLeft: contentOrigin,
+                  width: trackContentWidth,
+                  height: TRACK_H,
+                  border: "1px dashed var(--timeline-accent)",
+                  background: "color-mix(in srgb, var(--timeline-accent) 5%, transparent)",
+                  pointerEvents: "none",
+                }}
+              />
+            );
           const rowBackground = theme.rowBackground;
           const beatStripOnTrack = trackShowsBeatStrip(els, beatAnalysis?.beatTimes, {
             selectedElementId,
@@ -343,20 +359,6 @@ export function TimelineLanes({
                     renderTimeRange={rowsVirtualized ? renderTimeRange : undefined}
                   />
                 )}
-                {isPendingTrack && (
-                  <div
-                    className="absolute inset-0 flex items-center"
-                    style={{
-                      paddingLeft: 16,
-                      color: ts.label,
-                      fontSize: 11,
-                      letterSpacing: "0.06em",
-                      textTransform: "uppercase",
-                    }}
-                  >
-                    New track
-                  </div>
-                )}
                 {
                   // fallow-ignore-next-line complexity
                   renderElements.map((el) => {

package/src/player/components/timelineCallbacks.ts

@@ -1,8 +1,10 @@
 // fallow-ignore-file code-duplication
-// fallow-ignore-file dead-code
 import type { TimelineEditOutcome } from "../../hooks/timelineEditPermission";
 import type { TimelineElement } from "../store/playerStore";
-import type { TimelineMoveOperation } from "../../hooks/timelineMoveAdapter";
+import type {
+  TimelineMoveOperation,
+  TimelineAtomicMoveUpdates,
+} from "../../hooks/timelineMoveAdapter";
 import type { BlockedTimelineEditIntent } from "./timelineEditing";
 import type { PropertyGroupName } from "@hyperframes/core/gsap-parser";
 import type { TimelineKeyframeTarget } from "./timelineKeyframeIdentity";
@@ -50,7 +52,7 @@ export type TimelineLinkEdit =
 export interface TimelineEditCallbacks {
   onMoveElement?: (
     element: TimelineElement,
-    updates: Pick<TimelineElement, "start" | "track">,
+    updates: TimelineAtomicMoveUpdates,
   ) => Promise<void> | void;
   /** Atomic multi-clip move (single undo) for main-track ripple + track-insert.
    *  `coalesceKey` (drag-commit gesture id) merges the move history entry with a
@@ -58,7 +60,7 @@ export interface TimelineEditCallbacks {
    *  widens that entry's fold window when a server round-trip separates the
    *  gesture's records (per-gesture-unique keys keep the fold gesture-scoped). */
   onMoveElements?: (
-    edits: Array<{ element: TimelineElement; updates: Pick<TimelineElement, "start" | "track"> }>,
+    edits: Array<{ element: TimelineElement; updates: TimelineAtomicMoveUpdates }>,
     coalesceKey?: string,
     operation?: TimelineMoveOperation,
     coalesceMs?: number,

package/src/player/components/timelineClipChildren.tsx

@@ -2,7 +2,7 @@ import { useState, type ReactNode } from "react";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import type { TimelineTimeRange } from "../lib/timelineClipIndex";
 import type { TrackVisualStyle } from "./timelineIcons";
-import type { TimelineClipRenderContext } from "./TimelineTypes";
+import type { TimelineProps, TimelineClipRenderContext } from "./TimelineTypes";
 
 export function resolveClipRenderContext(
   element: TimelineElement,
@@ -23,7 +23,7 @@ function ClipLintDot({ element }: { element: TimelineElement }) {
   return (
     <span
       className="absolute w-1.5 h-1.5 rounded-full bg-warning-ink"
-      style={{ top: 7, right: 7 }}
+      style={{ bottom: 7, right: 7 }}
       title={lint.messages.join("\n")}
     />
   );
@@ -42,14 +42,8 @@ export function ClipContentOnceShown({ hold, children }: { hold: boolean; childr
 export function renderClipChildren(
   element: TimelineElement,
   clipStyle: TrackVisualStyle,
-  renderClipContent:
-    | ((
-        element: TimelineElement,
-        style: { clip: string; label: string },
-        context: TimelineClipRenderContext,
-      ) => ReactNode)
-    | undefined,
-  renderClipOverlay: ((element: TimelineElement) => ReactNode) | undefined,
+  renderClipContent: TimelineProps["renderClipContent"],
+  renderClipOverlay: TimelineProps["renderClipOverlay"],
   context: TimelineClipRenderContext = { priority: "visible", rich: false },
 ): ReactNode {
   return (
@@ -58,11 +52,11 @@ export function renderClipChildren(
       {!renderClipContent && <ClipLintDot element={element} />}
       {renderClipContent && (
         // The picture can paint above the trim handles, so it takes no input and presses reach them.
-        // borderRadius: inherit clips it to the clip's rounded corners; the clip itself is
+        // The content inherits the clip's rounded corners; the clip itself is
         // overflow-visible because keyframe diamonds hang outside its bounds.
         <div
-          className="absolute inset-0 overflow-hidden"
-          style={{ borderRadius: "inherit", pointerEvents: "none" }}
+          className="timeline-clip__content absolute inset-0 overflow-hidden"
+          style={{ pointerEvents: "none" }}
         >
           {renderClipContent(element, clipStyle, context)}
         </div>

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

@@ -1483,6 +1483,57 @@ describe("persistMoveEdits: a nested row dropped before its host", () => {
 });
 
 describe("persistMoveEdits convergence", () => {
+  it.each([
+    { successor: "timing", detach: false, expectedGroup: "G" },
+    { successor: "detach", detach: true, expectedGroup: undefined },
+  ])(
+    "preserves newer $successor while rolling back a refused detach",
+    async ({ detach, expectedGroup }) => {
+      let current: TimelineElement = { ...el("grouped", 0, 0, 4), audioGroup: "G" };
+      let rejectDetach!: (error: Error) => void;
+      let resolveSuccessor!: () => void;
+      const refused = new Promise<void>((_resolve, reject) => {
+        rejectDetach = reject;
+      });
+      const successor = new Promise<void>((resolve) => {
+        resolveSuccessor = resolve;
+      });
+      const updateElement = (_key: string, updates: Partial<TimelineElement>) => {
+        current = { ...current, ...updates };
+      };
+      const deps = { elements: [current], trackOrder: [0, 1], updateElement };
+      const first = persistMoveEdits(
+        [{ element: current, updates: { start: 0, track: 1, audioGroup: null } }],
+        { ...deps, onMoveElements: () => refused },
+        undefined,
+        "track-insert",
+      );
+      expect(current.audioGroup).toBeUndefined();
+      const second = persistMoveEdits(
+        [
+          {
+            element: current,
+            updates: { start: 5, track: 1, ...(detach ? { audioGroup: null } : {}) },
+          },
+        ],
+        { ...deps, onMoveElements: () => successor },
+      );
+      const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
+      try {
+        rejectDetach(new Error("save refused"));
+        await expect(first).resolves.toBe(false);
+        expect(current).toMatchObject({ start: 5, track: 1 });
+        expect(current.audioGroup).toBe(expectedGroup);
+        resolveSuccessor();
+        await expect(second).resolves.toBe(true);
+        expect(current).toMatchObject({ start: 5, track: 1 });
+        expect(current.audioGroup).toBe(expectedGroup);
+      } finally {
+        consoleError.mockRestore();
+      }
+    },
+  );
+
   it("reasserts a saved lane after a stale runtime sync", async () => {
     const clip = { ...el("headline", 2, 0.5, 4.9), authoredTrack: 2 };
     let releaseSave: (() => void) | undefined;

package/src/player/components/timelineClipDragCommit.ts

@@ -6,12 +6,17 @@ import type { DraggedClipState } from "./useTimelineClipDrag";
 import type { ZMirrorLaneMove } from "./timelineZMirror";
 import { classifyZone } from "./timelineZones";
 import { layoutAfterTrackInsert } from "./timelineDragLanding";
+import type { TimelineTrackInsertLayout } from "./timelineTrackInsertLayout";
 import { computeStackingPatches, type StackingPatch } from "./timelineStackingSync";
 import {
   canMoveTimelineElement as canMoveElement,
   resolveExpandedHostAlias,
 } from "./timelineAuthoredMoveTarget";
-import type { TimelineMoveOperation } from "../../hooks/timelineMoveAdapter";
+import type {
+  TimelineMoveOperation,
+  TimelineAtomicMoveUpdates,
+  TimelineAtomicMoveEdit,
+} from "../../hooks/timelineMoveAdapter";
 import {
   beginTimelineOptimisticGesture,
   isLatestTimelineOptimisticGesture,
@@ -21,10 +26,8 @@ import { refreshAfterDurableLaneMove } from "./timelineLaneMoveRefresh";
 import { authoredTrackForLane } from "./timelineAuthoredTrack";
 import { resolveGroupMovers } from "./timelineMultiDragPreview";
 
-type StartTrack = Pick<TimelineElement, "start" | "track">;
-export interface TimelineMoveEdit {
-  element: TimelineElement;
-  updates: StartTrack;
+type StartTrack = TimelineAtomicMoveUpdates;
+export interface TimelineMoveEdit extends TimelineAtomicMoveEdit {
   /**
    * File-space track override for the persist. The store's `updates.track` is a
    * DISPLAY lane; when the source file's numbering is sparse (authored tracks
@@ -37,6 +40,7 @@ export interface TimelineMoveEdit {
 export interface DragCommitDeps {
   elements: TimelineElement[];
   trackOrder: number[];
+  trackInsertLayout?: TimelineTrackInsertLayout;
   updateElement: (key: string, updates: Partial<TimelineElement>) => void;
   /** Single-clip, SDK-cutover-aware persist (pure time-moves keep this path). */
   onMoveElement?: (element: TimelineElement, updates: StartTrack) => Promise<void> | void;
@@ -85,6 +89,17 @@ const round3 = (v: number) => Math.round(v * 1000) / 1000;
 // One deterministic coalesce key shared by both records in a lane-change gesture.
 let laneChangeGestureSeq = 0;
 
+function moveStoreUpdates(edit: TimelineMoveEdit) {
+  const writtenTrack =
+    edit.persistTrack ??
+    (edit.updates.track !== edit.element.track ? edit.updates.track : undefined);
+  const { audioGroup, ...timing } = edit.updates;
+  return {
+    timing: writtenTrack == null ? timing : { ...timing, authoredTrack: writtenTrack },
+    detach: audioGroup === null,
+  };
+}
+
 /**
  * Optimistically apply + persist a batch of moves with rollback on failure.
  *
@@ -123,26 +138,42 @@ export function persistMoveEdits(
   }
   const prev = edits.map((e) => ({
     key: keyOf(e.element),
-    start: e.element.start,
-    track: e.element.track,
-    authoredTrack: e.element.authoredTrack,
+    updates: {
+      start: e.element.start,
+      track: e.element.track,
+      authoredTrack: e.element.authoredTrack,
+      ...(e.updates.audioGroup === null ? { audioGroup: e.element.audioGroup } : {}),
+    },
   }));
   const revision = beginTimelineOptimisticGesture(
     updateElement,
     edits.map((edit) => keyOf(edit.element)),
   );
+  const membershipRevision = beginTimelineOptimisticGesture(
+    updateElement,
+    edits.filter((edit) => edit.updates.audioGroup === null).map((edit) => keyOf(edit.element)),
+    "membership",
+  );
   // The file write below targets `persistTrack` (authored space) when supplied,
   // or `updates.track` on a genuine lane write (track insert renumber). Mirror
   // that written value into the store's `authoredTrack` so a SECOND drag before
   // any reload resolves authored tracks from what the file now says, not stale
   // pre-edit data. Pure time-moves leave authoredTrack untouched.
-  const applyEdit = (e: TimelineMoveEdit) => {
-    const writtenTrack =
-      e.persistTrack ?? (e.updates.track !== e.element.track ? e.updates.track : undefined);
-    updateElement(
-      keyOf(e.element),
-      writtenTrack == null ? e.updates : { ...e.updates, authoredTrack: writtenTrack },
-    );
+  const applyEdit = (e: TimelineMoveEdit, reassert = false) => {
+    const { timing, detach } = moveStoreUpdates(e);
+    const key = keyOf(e.element);
+    const updates: Partial<TimelineElement> = {};
+    if (!reassert || isLatestTimelineOptimisticGesture(updateElement, revision, key)) {
+      Object.assign(updates, timing);
+    }
+    if (
+      detach &&
+      (!reassert ||
+        isLatestTimelineOptimisticGesture(updateElement, membershipRevision, key, "membership"))
+    ) {
+      updates.audioGroup = undefined;
+    }
+    if (Object.keys(updates).length) updateElement(key, updates);
   };
   for (const e of edits) applyEdit(e);
   // The store above gets DISPLAY lanes; the file below gets the authored-space
@@ -161,17 +192,21 @@ export function persistMoveEdits(
       // restore the preview manifest's pre-gesture lane. Reassert the durable
       // result after persistence, but only while this remains the latest
       // optimistic gesture so an older save can never clobber a newer drag.
-      for (const e of edits) {
-        const key = keyOf(e.element);
-        if (isLatestTimelineOptimisticGesture(updateElement, revision, key)) applyEdit(e);
-      }
+      for (const e of edits) applyEdit(e, true);
       return true;
     },
     (error) => {
       for (const p of prev) {
+        const { audioGroup, ...timing } = p.updates;
+        const updates: Partial<TimelineElement> = {};
         if (isLatestTimelineOptimisticGesture(updateElement, revision, p.key)) {
-          updateElement(p.key, { start: p.start, track: p.track, authoredTrack: p.authoredTrack });
+          Object.assign(updates, timing);
         }
+        if (
+          isLatestTimelineOptimisticGesture(updateElement, membershipRevision, p.key, "membership")
+        )
+          updates.audioGroup = audioGroup;
+        if (Object.keys(updates).length) updateElement(p.key, updates);
       }
       console.error("[Timeline] Failed to persist clip edits", error);
       return false;
@@ -370,7 +405,14 @@ function buildTrackInsertEdits(
     let start = src.start;
     if (normKey === editKey) start = previewStart;
     else if (multi?.keys.has(normKey)) start = multi.movedStart(src);
-    edits.push({ element: src, updates: { start, track: norm.track } });
+    edits.push({
+      element: src,
+      updates: {
+        start,
+        track: norm.track,
+        ...(normKey === editKey && src.audioGroup ? { audioGroup: null } : {}),
+      },
+    });
   }
   return { candidate, edits };
 }

package/src/player/components/timelineClipDragGestureLifecycle.ts

@@ -1,3 +1,4 @@
+import type { TimelineTrackInsertLayout } from "./timelineTrackInsertLayout";
 import type { Dispatch, RefObject, SetStateAction } from "react";
 import { resolveTimelineDragEscape } from "./timelineEditing";
 import { commitDraggedClipMove } from "./timelineClipDragCommit";
@@ -37,6 +38,8 @@ interface TimelineGestureCommit {
 type UpdateElement = ReturnType<typeof usePlayerStore.getState>["updateElement"];
 
 interface TimelineClipDragGestureLifecycleInput {
+  commitGestureRef?: RefObject<() => void>;
+  trackInsertLayoutRef?: RefObject<TimelineTrackInsertLayout | undefined>;
   lifecycleRef: RefObject<TimelineGestureLifecycle>;
   sessionEpochRef: RefObject<number>;
   cancelGestureRef: RefObject<
@@ -81,6 +84,8 @@ interface TimelineClipDragGestureLifecycleInput {
 export function mountTimelineClipDragGestureLifecycle({
   // The explicit destructuring mirrors the single call site's dependency object by design.
   // fallow-ignore-next-line code-duplication
+  commitGestureRef,
+  trackInsertLayoutRef,
   lifecycleRef,
   sessionEpochRef,
   cancelGestureRef,
@@ -120,6 +125,7 @@ export function mountTimelineClipDragGestureLifecycle({
   };
 
   const pointerMatchesGesture = (event: PointerEvent): boolean => {
+    if (draggedClipRef.current?.pointerId === null) return false;
     const pointerId = lifecycleRef.current.pointerId;
     return pointerId === null || event.pointerId === pointerId;
   };
@@ -293,6 +299,7 @@ export function mountTimelineClipDragGestureLifecycle({
     commitDraggedClipMove(drag, {
       elements: elementsRef.current,
       trackOrder: trackOrderRef.current,
+      trackInsertLayout: trackInsertLayoutRef?.current,
       updateElement,
       onMoveElement: onMoveElementRef.current,
       onMoveElements: onMoveElementsRef.current,
@@ -315,10 +322,12 @@ export function mountTimelineClipDragGestureLifecycle({
     );
   };
 
-  const claimActiveGesture = (event: PointerEvent): TimelineGestureCommit | "ignored" | null => {
+  const claimActiveGesture = (
+    event: PointerEvent | null,
+  ): TimelineGestureCommit | "ignored" | null => {
     const lifecycle = lifecycleRef.current;
     if (lifecycle.phase !== "active") return null;
-    if (!pointerMatchesGesture(event)) return "ignored";
+    if (event && !pointerMatchesGesture(event)) return "ignored";
     if (lifecycle.sessionEpoch !== sessionEpochRef.current) {
       cancelGesture();
       return "ignored";
@@ -358,6 +367,12 @@ export function mountTimelineClipDragGestureLifecycle({
     }
   };
 
+  if (commitGestureRef)
+    commitGestureRef.current = () => {
+      const claimed = claimActiveGesture(null);
+      if (claimed && claimed !== "ignored") commitClaimedGesture(claimed);
+    };
+
   const handleWindowPointerUp = (event: PointerEvent) => {
     if (releasedOutsideWindow(event)) return handleWindowPointerCancel(event);
     const claimed = claimActiveGesture(event);
@@ -411,6 +426,7 @@ export function mountTimelineClipDragGestureLifecycle({
   return () => {
     cancelGesture({ updateReact: false });
     cancelGestureRef.current = () => false;
+    if (commitGestureRef) commitGestureRef.current = () => {};
     window.removeEventListener("pointermove", handleWindowPointerMove);
     window.removeEventListener("pointerup", handleWindowPointerUp);
     window.removeEventListener("pointercancel", handleWindowPointerCancel);

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

@@ -7,8 +7,18 @@ import {
   type DragPreviewContext,
 } from "./timelineClipDragPreview";
 import type { DraggedClipState } from "./timelineClipDragTypes";
-import { commitDraggedClipMove, persistMoveEdits } from "./timelineClipDragCommit";
-import { LANE_H, RULER_H, TRACKS_TOP_PAD, TRACK_H } from "./timelineLayout";
+import {
+  commitDraggedClipMove,
+  persistMoveEdits,
+  type TimelineMoveEdit,
+} from "./timelineClipDragCommit";
+import {
+  LANE_H,
+  RULER_H,
+  TRACKS_TOP_PAD,
+  TRACK_H,
+  createTimelineRowGeometry,
+} from "./timelineLayout";
 import { isMultiDragPassenger } from "./timelineMultiDragPreview";
 import { resolveMultiDragPreview } from "./timelineProviderStateBuilders";
 
@@ -110,6 +120,20 @@ function horizontalDrag(
 }
 
 describe("computeDragPreview — plain horizontal drag never arms a phantom insert (BUG 1)", () => {
+  it("opens the physical seam below a zero-padding ruler and keeps it armed inside the new lane", () => {
+    const geometry = createTimelineRowGeometry([0, 1, 2], [104, 48, 48], { top: 0 });
+    const context = { ...ctx(geometry.rowHeights), rowGeometry: geometry };
+    const { drag, clientX } = horizontalDrag(moodboard, 0.5, 2);
+    const top = computeDragPreview(drag, clientX, 24, context);
+    expect(top.insertRow).toBe(0);
+    const between = computeDragPreview(drag, clientX, 128, context);
+    expect(between.insertRow).toBe(1);
+    const inside = computeDragPreview(between, clientX, 150, context);
+    expect(inside.insertRow).toBe(1);
+    const below = computeDragPreview(inside, clientX, 202, context);
+    expect(below.insertRow).toBeNull();
+  });
+
   it("dragging v-moodboard +2s while grabbing its clip body keeps it a pure time move", () => {
     const { drag, clientX, clientY } = horizontalDrag(moodboard, 0.5, 2);
     const next = computeDragPreview(drag, clientX, clientY, ctx());
@@ -470,11 +494,10 @@ describe("computeDragPreview — the ghost start is the committed start", () =>
       expect(committedStart(ghost, tag, rows)).toBe(10);
     });
 
-    it("the edge of a row is still that row, not a new track", () => {
+    it("a clip aimed at a seam opens a new track at that boundary", () => {
       for (const edge of [0.02, 0.98, 1.02]) {
         const ghost = preview(tag, rows, 2, edge);
-        expect(ghost.insertRow).toBeNull();
-        expect(ghost.previewTrack).toBe(Math.floor(edge));
+        expect(ghost.insertRow).toBe(Math.round(edge));
       }
     });
   });
@@ -550,6 +573,23 @@ describe("computeDragPreview — the ghost start is the committed start", () =>
 });
 
 describe("computeDragPreview — a group move keeps its shape", () => {
+  function commitPreview(
+    ghost: DraggedClipState,
+    elements: TimelineElement[],
+    selectedKeys: ReadonlySet<string>,
+  ) {
+    const onMoveElements = vi.fn<(edits: TimelineMoveEdit[]) => void>();
+    commitDraggedClipMove(ghost, {
+      elements,
+      trackOrder: [0, 1, 2],
+      updateElement: vi.fn(),
+      onMoveElement: vi.fn(),
+      onMoveElements,
+      selectedKeys,
+    });
+    return onMoveElements.mock.calls[0][0];
+  }
+
   it("never bumps the grabbed clip further left than the group's 0 limit", () => {
     const a = clip("a", 1, 0.5, 1, 1);
     const b = clip("b", 2, 7, 2, 1);
@@ -563,19 +603,7 @@ describe("computeDragPreview — a group move keeps its shape", () => {
       selectedKeys,
     });
     expect(ghost).toMatchObject({ previewTrack: 0, insertRow: null, previewStart: 10 });
-    const onMoveElements = vi.fn();
-    commitDraggedClipMove(ghost, {
-      elements,
-      trackOrder: [0, 1, 2],
-      updateElement: vi.fn(),
-      onMoveElement: vi.fn(),
-      onMoveElements,
-      selectedKeys,
-    });
-    const edits = onMoveElements.mock.calls[0][0] as Array<{
-      element: TimelineElement;
-      updates: { start: number };
-    }>;
+    const edits = commitPreview(ghost, elements, selectedKeys);
     const moved = Object.fromEntries(
       edits.map((e) => [e.element.id, e.updates.start - e.element.start]),
     );
@@ -595,19 +623,7 @@ describe("computeDragPreview — a group move keeps its shape", () => {
       ...ctx(undefined, elements),
       selectedKeys,
     });
-    const onMoveElements = vi.fn();
-    commitDraggedClipMove(ghost, {
-      elements,
-      trackOrder: [0, 1, 2],
-      updateElement: vi.fn(),
-      onMoveElement: vi.fn(),
-      onMoveElements,
-      selectedKeys,
-    });
-    const edits = onMoveElements.mock.calls[0][0] as Array<{
-      element: TimelineElement;
-      updates: { start: number; track: number };
-    }>;
+    const edits = commitPreview(ghost, elements, selectedKeys);
     return Object.fromEntries(edits.map((e) => [e.element.id, e.updates]));
   }