@hyperframes/studio 0.8.49 → 0.8.51

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

@@ -70,6 +70,9 @@ interface RenderLanesOptions {
   draggedClip?: DraggedClipState | null;
   onToggleTrackHidden?: TimelineEditCallbacks["onToggleTrackHidden"];
   onContextMenuLane?: (e: React.MouseEvent, track: number, time: number) => void;
+  hoveredClip?: string | null;
+  renderClipContent?: React.ComponentProps<typeof TimelineLanes>["renderClipContent"];
+  snapGuide?: { time: number; type: "beat" | "clip-edge" | "playhead" } | null;
 }
 
 function renderLanes(options: RenderLanesOptions = {}): {
@@ -135,9 +138,11 @@ function renderLanes(options: RenderLanesOptions = {}): {
           laneCounts={laneCounts}
           selectedElementId={null}
           selectedElementIds={next.selectedElementIds ?? new Set()}
-          hoveredClip={null}
+          hoveredClip={next.hoveredClip ?? null}
+          renderClipContent={next.renderClipContent}
           draggedClip={next.draggedClip ?? null}
           draggedElement={null}
+          snapGuide={next.snapGuide ?? null}
           multiDragPreview={next.multiDragPreview ?? null}
           blockedClipRef={createRef<BlockedClipState | null>()}
           suppressClickRef={{ current: false }}
@@ -176,6 +181,36 @@ function visibilityLabels(host: HTMLElement): (string | null)[] {
   );
 }
 
+/** The beat guide's own highlight div, keyed by the green glow every other beat lacks. */
+function beatHighlight(host: HTMLElement): HTMLElement | undefined {
+  return Array.from(host.querySelectorAll("div")).find((div) =>
+    (div.style.boxShadow ?? "").includes("34,197,94"),
+  );
+}
+
+describe("TimelineLanes beat guide", () => {
+  it("draws the beat highlight from snapGuide, not from the stale draggedClip prop", () => {
+    const view = renderLanes({
+      elements: [element("clip-a", TRACK_A)],
+      snapGuide: { time: 1.5, type: "beat" },
+    });
+
+    expect(beatHighlight(view.host)?.style.left).toBe("150px");
+    act(() => view.root.unmount());
+  });
+
+  it("clears the highlight once the trim it belonged to ends", () => {
+    const view = renderLanes({
+      elements: [element("clip-a", TRACK_A)],
+      snapGuide: { time: 1.5, type: "beat" },
+    });
+    view.rerender({ elements: [element("clip-a", TRACK_A)], snapGuide: null });
+
+    expect(beatHighlight(view.host)).toBeUndefined();
+    act(() => view.root.unmount());
+  });
+});
+
 describe("TimelineLanes track numbering", () => {
   // Screen readers literally announced "Hide track 0.16666666666666666".
   it("numbers tracks contiguously from 1 regardless of the fractional sort keys", () => {
@@ -395,3 +430,21 @@ describe("TimelineLanes selection", () => {
     act(() => view.root.unmount());
   });
 });
+
+describe("TimelineLanes clip thumbnails", () => {
+  it("asks for the same frames at rest, hovered and selected", () => {
+    const rich: unknown[] = [];
+    const renderClipContent = vi.fn(
+      (_el: TimelineElement, _style: unknown, context: { rich: boolean }) => {
+        rich.push(context.rich);
+        return null;
+      },
+    );
+    const elements = [element("clip-a", TRACK_A)];
+    const view = renderLanes({ elements, renderClipContent });
+    view.rerender({ elements, renderClipContent, hoveredClip: "clip-a" });
+    view.rerender({ elements, renderClipContent, selectedElementIds: new Set(["clip-a"]) });
+    expect(new Set(rich)).toEqual(new Set([false]));
+    act(() => view.root.unmount());
+  });
+});

package/src/player/components/TimelineLanes.tsx

@@ -59,6 +59,7 @@ export function TimelineLanes({
   hoveredClip,
   draggedClip,
   draggedElement,
+  snapGuide,
   multiDragPreview,
   blockedClipRef,
   suppressClickRef,
@@ -331,11 +332,7 @@ export function TimelineLanes({
                   beatTimes={beatAnalysis?.beatTimes}
                   beatStrengths={beatAnalysis?.beatStrengths}
                   pps={pps}
-                  highlightTime={
-                    draggedClip?.started && draggedClip.snapType === "beat"
-                      ? draggedClip.snapTime
-                      : null
-                  }
+                  highlightTime={snapGuide?.type === "beat" ? snapGuide.time : null}
                   renderTimeRange={rowsVirtualized ? renderTimeRange : undefined}
                 />
                 {/* Beat dots on the active track (the one holding the selection),

package/src/player/components/TimelineLayerGroupHeader.tsx

@@ -56,14 +56,14 @@ export function TimelineLayerGroupHeader({
       }}
     >
       <div
-        className="sticky left-0 z-[13] flex h-full items-center"
+        className="sticky left-0 z-13 flex h-full items-center"
         style={{
           width: Math.min(GUTTER + 220, GUTTER + trackContentWidth),
           background: theme.gutterBackground,
         }}
       >
         <div
-          className="relative h-full flex-shrink-0"
+          className="relative h-full shrink-0"
           style={{
             width: GUTTER,
             borderRight: `1px solid ${theme.gutterBorder}`,

package/src/player/components/TimelineOverlays.tsx

@@ -52,6 +52,10 @@ interface TimelineOverlaysProps {
   onSplitElement: TimelineEditCallbacks["onSplitElement"];
   pinZoomBeforeEdit: () => void;
   onDeleteElement?: (element: TimelineElement) => Promise<void> | void;
+  onCopyClip?: () => boolean;
+  onPasteClip?: () => Promise<void>;
+  onDuplicateClip?: () => Promise<boolean>;
+  canPasteClip?: () => boolean;
   gapContextMenu: TrackGapContextMenuState | null;
   onDismissGapContextMenu: () => void;
   onCloseTrackGap: () => void;
@@ -119,6 +123,10 @@ export function TimelineOverlays({
   onSplitElement,
   pinZoomBeforeEdit,
   onDeleteElement,
+  onCopyClip,
+  onPasteClip,
+  onDuplicateClip,
+  canPasteClip,
   gapContextMenu,
   onDismissGapContextMenu,
   onCloseTrackGap,
@@ -249,6 +257,10 @@ export function TimelineOverlays({
             pinZoomBeforeEdit();
             onDeleteElement?.(element);
           }}
+          onCopy={onCopyClip}
+          onPaste={onPasteClip}
+          onDuplicate={onDuplicateClip}
+          canPaste={canPasteClip?.() ?? false}
         />
       )}
 

package/src/player/components/TimelineRuler.tsx

@@ -85,7 +85,7 @@ export const TimelineRuler = memo(function TimelineRuler({
         style={{ height: RULER_H, width: contentOrigin + trackContentWidth, zIndex: 70 }}
       >
         <div
-          className="sticky left-0 z-[12] flex-shrink-0"
+          className="sticky left-0 z-12 shrink-0"
           style={{
             width: contentOrigin,
             // Ruler corner uses the panel surface — same as the ruler strip itself.

package/src/player/components/TimelineShortcutHint.tsx

@@ -12,7 +12,7 @@ export function TimelineShortcutHint({ theme }: TimelineShortcutHintProps) {
         style={{ background: "rgba(17,23,35,0.84)", borderColor: theme.gutterBorder }}
       >
         <kbd
-          className="text-[9px] font-mono px-1 py-0.5 rounded"
+          className="text-[9px] font-mono px-1 py-0.5 rounded-sm"
           style={{ color: theme.textSecondary, background: "rgba(255,255,255,0.06)" }}
         >
           Shift

package/src/player/components/TimelineTrackHeader.tsx

@@ -259,7 +259,7 @@ export function TimelineTrackHeader({
     <div
       role="rowheader"
       aria-colindex={1}
-      className="sticky left-0 z-[12] shrink-0"
+      className="sticky left-0 z-12 shrink-0"
       style={{
         width: showTrackLabel ? LABEL_COL_W : contentOrigin,
         background: gutterFill(theme.gutterBackground, isGroupMember),

package/src/player/components/TimelineTrackPlainHeader.tsx

@@ -39,7 +39,7 @@ export function VisibilityButton({
       type="button"
       aria-label={label}
       title={label}
-      className={`flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 transition-colors focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-[-1px] focus-visible:outline-[#3CE6AC] ${
+      className={`flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 transition-colors focus-visible:outline-solid focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-[#3CE6AC] ${
         hidden ? "text-[#3CE6AC] hover:text-white" : "text-white/35 hover:text-white/75"
       }`}
       onPointerDown={(event) => event.stopPropagation()}
@@ -97,10 +97,10 @@ export function PlainTrackHeader({
 
             Wraps rather than truncating: a truncated name needs a hover to be
             read at all, and a tooltip is no use to a name you are scanning a
-            column of. `break-words` so a long single token breaks instead of
+            column of. `wrap-break-word` so a long single token breaks instead of
             forcing the column wider. */}
         {showTrackLabel && (
-          <span className="min-w-0 break-words text-[11px] leading-tight">{trackLabel}</span>
+          <span className="min-w-0 wrap-break-word text-[11px] leading-tight">{trackLabel}</span>
         )}
         {showTrackLabel && <TrackClipCount clipCount={clipCount} />}
         {/* `ml-auto` is what anchors the group right: it absorbs the slack the

package/src/player/components/TimelineTypes.ts

@@ -12,7 +12,8 @@ export interface TimelineClipRenderContext {
 export interface TimelineProps extends TimelineDropCallbacks, TimelineEditOverrides {
   /** Project-scoped reset boundary; soft source refreshes retain the same epoch. */
   sessionEpoch?: number;
-  onSeek?: (time: number) => void;
+  /** keepPlaying: true preserves the current play state across the seek. */
+  onSeek?: (time: number, options?: { keepPlaying?: boolean }) => void;
   onDrillDown?: (element: TimelineElement) => void;
   renderClipContent?: (
     element: TimelineElement,
@@ -22,5 +23,9 @@ export interface TimelineProps extends TimelineDropCallbacks, TimelineEditOverri
   renderClipOverlay?: (element: TimelineElement) => ReactNode;
   onDeleteElement?: (element: TimelineElement) => Promise<void> | void;
   onSelectElement?: (element: TimelineElement | null) => void;
+  onCopyClip?: () => boolean;
+  onPasteClip?: () => Promise<void>;
+  onDuplicateClip?: () => Promise<boolean>;
+  canPasteClip?: () => boolean;
   theme?: Partial<TimelineTheme>;
 }

package/src/player/components/TrackGapContextMenu.tsx

@@ -75,7 +75,7 @@ export const TrackGapContextMenu = memo(function TrackGapContextMenu({
   return createPortal(
     <div
       ref={menuRef}
-      className="fixed z-[200] bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
+      className="fixed z-200 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
       style={{ left: adjustedX, top: adjustedY }}
       onPointerLeave={() => onHoverAction(null)}
     >

package/src/player/components/VideoThumbnail.tsx

@@ -94,7 +94,7 @@ export const VideoThumbnail = memo(function VideoThumbnail({
             return (
               <div
                 key={index}
-                className="relative h-full flex-shrink-0 overflow-hidden bg-neutral-900"
+                className="relative h-full shrink-0 overflow-hidden bg-neutral-900"
                 style={{ width: frameW }}
               >
                 <img
@@ -119,7 +119,9 @@ export const VideoThumbnail = memo(function VideoThumbnail({
       )}
       {snapshot.status === "error" && (
         <div className="absolute inset-0 flex items-center justify-center bg-neutral-900/60">
-          <span className="rounded bg-black/50 px-1 text-[8px] text-neutral-500">no preview</span>
+          <span className="rounded-sm bg-black/50 px-1 text-[8px] text-neutral-500">
+            no preview
+          </span>
         </div>
       )}
       {label && (

package/src/player/components/VolumeControl.tsx

@@ -52,7 +52,7 @@ export const VolumeControl = memo(function VolumeControl({
   const muteLabel = silent ? "Unmute audio" : "Mute audio";
 
   return (
-    <div className="group flex flex-shrink-0 items-center">
+    <div className="group flex shrink-0 items-center">
       <div className="w-0 overflow-hidden opacity-0 transition-[width,opacity] duration-150 ease-out group-hover:w-14 group-hover:opacity-100 group-focus-within:w-14 group-focus-within:opacity-100">
         <div className="relative mx-1 flex h-6 w-12 items-center">
           <div className="absolute inset-x-0 h-0.5 overflow-hidden rounded-full bg-neutral-700">
@@ -92,7 +92,7 @@ export const VolumeControl = memo(function VolumeControl({
           disabled={disabled}
           aria-label={muteLabel}
           aria-pressed={silent}
-          className={`flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md transition-colors disabled:pointer-events-none disabled:opacity-30 ${
+          className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors disabled:pointer-events-none disabled:opacity-30 ${
             silent ? "text-studio-accent" : "text-neutral-500 hover:text-neutral-200"
           }`}
         >

package/src/player/components/timelineAuthoredMoveTarget.ts

@@ -3,7 +3,7 @@ import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
 import { getTimelineEditCapabilities } from "./timelineEditing";
 import type { DraggedClipState } from "./timelineClipDragTypes";
 
-/** Whether Studio may write timing to this clip (false for locked/implicit rows). */
+/** Whether Studio may write timing to this clip (false for locked rows). */
 export function canMoveTimelineElement(element: TimelineElement): boolean {
   return getTimelineEditCapabilities({
     tag: element.tag,
@@ -16,7 +16,6 @@ export function canMoveTimelineElement(element: TimelineElement): boolean {
     playbackStart: element.playbackStart,
     playbackStartAttr: element.playbackStartAttr,
     sourceDuration: element.sourceDuration,
-    timingSource: element.timingSource,
     timelineLocked: element.timelineLocked,
   }).canMove;
 }

package/src/player/components/timelineCallbacks.ts

@@ -14,20 +14,20 @@ export interface TimelinePropertyGroupKeyframeToggle {
   remove: boolean;
 }
 
+/** Where an outside drop lands; `insertRow` opens a new track at that row boundary of `trackOrder`. */
+export type TimelineDropPlacement = { start: number; track: number } & (
+  | { insertRow?: null; trackOrder?: undefined }
+  | { insertRow: number; trackOrder: readonly number[] }
+);
+
 /**
  * Shared callback signatures for timeline editing operations.
  * Used by NLELayout, Timeline, and any component that passes through
  * the standard set of timeline mutation handlers.
  */
 export interface TimelineDropCallbacks {
-  onFileDrop?: (
-    files: File[],
-    placement?: { start: number; track: number },
-  ) => Promise<void> | void;
-  onAssetDrop?: (
-    assetPath: string,
-    placement: { start: number; track: number },
-  ) => Promise<void> | void;
+  onFileDrop?: (files: File[], placement?: TimelineDropPlacement) => Promise<void> | void;
+  onAssetDrop?: (assetPath: string, placement: TimelineDropPlacement) => Promise<void> | void;
   onBlockDrop?: (
     blockName: string,
     placement: { start: number; track: number },

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

@@ -11,10 +11,10 @@ const clip: TimelineElement = {
 };
 
 describe("resolveClipRenderContext", () => {
-  it("prioritizes interactive clips and enables rich thumbnails", () => {
+  it("prioritizes interactive clips without changing their thumbnail frames", () => {
     expect(resolveClipRenderContext(clip, { start: 0, end: 1 }, true)).toEqual({
       priority: "interaction",
-      rich: true,
+      rich: false,
     });
   });
 

package/src/player/components/timelineClipChildren.tsx

@@ -9,7 +9,8 @@ export function resolveClipRenderContext(
   visibleTimeRange: TimelineTimeRange,
   interactive: boolean,
 ): TimelineClipRenderContext {
-  if (interactive) return { priority: "interaction", rich: true };
+  // Interaction only reorders loading; `rich` would swap the frames under the pointer.
+  if (interactive) return { priority: "interaction", rich: false };
   const visible =
     element.start < visibleTimeRange.end &&
     element.start + element.duration > visibleTimeRange.start;

package/src/player/components/timelineClipDragCommit.ts

@@ -176,8 +176,8 @@ export function persistMoveEdits(
 /**
  * Build the time-shift resolver for a multi-selection drag: every member of the
  * selection moves by the dragged clip's delta (clamped ≥ 0); non-members are
- * untouched. Returns null when this is not a multi-selection drag. A locked /
- * implicit member is dropped from the moving set (a marquee can sweep one in).
+ * untouched. Returns null when this is not a multi-selection drag. A locked
+ * member is dropped from the moving set (a marquee can sweep one in).
  */
 function resolveMultiSelection(
   drag: DraggedClipState,

package/src/player/components/timelineClipDragPreview.ts

@@ -12,6 +12,7 @@ import {
   snapMoveToTargets,
   snapTimelineTime,
   type TimelineSnapTarget,
+  type TimelineSnapType,
 } from "./timelineSnapping";
 import { resolveInsertRow, resolveZoneDropPlacement } from "./timelineCollision";
 import {
@@ -21,11 +22,13 @@ import {
 import { clampGroupMoveDelta } from "./timelineMultiDragPreview";
 import type { DraggedClipState, ResizingClipState } from "./timelineClipDragTypes";
 import { resolveDragLandingStart } from "./timelineDragLanding";
+import { STUDIO_PREVIEW_FPS } from "../lib/time";
 
 /** Snap-target builder closure supplied by the hook (closes over refs + store). */
 type BuildSnapTargets = (
   excludeElementKey: string | null,
   includeBeats: boolean,
+  includePlayhead?: boolean,
 ) => TimelineSnapTarget[];
 
 export interface DragPreviewContext {
@@ -223,6 +226,14 @@ export function computeDragPreview(
   };
 }
 
+/** One frame: the last visible frame of a clip sits just before its end time. */
+const TRIM_END_FRAME_LEAD_S = 1 / STUDIO_PREVIEW_FPS;
+
+/** The composition time whose frame a trim shows: the edge being dragged. */
+export function trimPreviewTime(edge: "start" | "end", start: number, duration: number): number {
+  return edge === "start" ? start : Math.max(start, start + duration - TRIM_END_FRAME_LEAD_S);
+}
+
 export interface ResizePreviewContext {
   scroll: HTMLDivElement | null;
   pps: number;
@@ -234,6 +245,9 @@ export interface ResizePreviewResult {
   previewStart: number;
   previewDuration: number;
   previewPlaybackStart?: number;
+  /** The target the trimmed edge snapped to; null when the edge is free. */
+  snapTime: number | null;
+  snapType: TimelineSnapType | null;
 }
 
 /** Compute the trim preview for a pointer x (pure — the hook applies the state). */
@@ -287,28 +301,31 @@ export function computeResizePreview(
     effectiveClientX,
   );
 
-  // Snap edge to unified targets (beats + clip edges + playhead) when available.
-  // The snap must stay inside the same limits resolveTimelineResize enforces, or
-  // it would push the edge past the available source media / composition end.
-  // The music track defines the beats, so it must not snap to them — but it
-  // still snaps to the playhead and other clip edges.
+  // Snap to beats and clip edges, never the playhead (the dragged edge drives
+  // its own preview seek, so that would be circular). Stay inside the same
+  // limits resolveTimelineResize enforces. The music track defines the
+  // beats, so it must not snap to them, but still snaps to clip edges.
   const trimTargets = buildSnapTargets(
     resize.element.key ?? resize.element.id,
     !isMusicTrack(resize.element),
+    false,
   );
+  let snap: TimelineSnapTarget | null = null;
   if (trimTargets.length > 0) {
     const snapSecs = TIMELINE_SNAP_PX / Math.max(pps, 1);
     if (resize.edge === "end") {
       const edgeTime = nextResize.start + nextResize.duration;
-      const snapped = snapTimelineTime(edgeTime, trimTargets, snapSecs).time;
+      const { time: snapped, target } = snapTimelineTime(edgeTime, trimTargets, snapSecs);
       // Stay within [start+minDuration, maxEnd] so the snap can't create a
       // degenerate clip or run past the source/composition limit.
       const snappedDuration = Math.round((snapped - nextResize.start) * 1000) / 1000;
-      if (snapped !== edgeTime && snapped <= maxEnd + 1e-6 && snappedDuration >= 0.05) {
-        nextResize = { ...nextResize, duration: snappedDuration };
+      if (target && snapped <= maxEnd + 1e-6 && snappedDuration >= 0.05) {
+        // An edge already on the target still owns the guide; only move it when off.
+        if (snapped !== edgeTime) nextResize = { ...nextResize, duration: snappedDuration };
+        snap = target;
       }
     } else {
-      const snapped = snapTimelineTime(nextResize.start, trimTargets, snapSecs).time;
+      const { time: snapped, target } = snapTimelineTime(nextResize.start, trimTargets, snapSecs);
       const delta = nextResize.start - snapped; // >0 when snapping left
       // Leftward snap reveals more source; cap so playbackStart can't go < 0.
       const maxLeftDelta =
@@ -318,22 +335,20 @@ export function computeResizePreview(
       // Also require the resulting duration to stay >= minDuration so a rightward
       // snap (delta < 0) can't collapse the clip to zero/negative.
       const snappedDuration = Math.round((nextResize.duration + delta) * 1000) / 1000;
-      if (
-        snapped !== nextResize.start &&
-        snapped >= 0 &&
-        delta <= maxLeftDelta + 1e-6 &&
-        snappedDuration >= 0.05
-      ) {
-        nextResize = {
-          ...nextResize,
-          start: snapped,
-          duration: snappedDuration,
-          playbackStart:
-            nextResize.playbackStart != null
-              ? Math.round(Math.max(0, nextResize.playbackStart - delta * playbackRate) * 1000) /
-                1000
-              : undefined,
-        };
+      if (target && snapped >= 0 && delta <= maxLeftDelta + 1e-6 && snappedDuration >= 0.05) {
+        if (snapped !== nextResize.start) {
+          nextResize = {
+            ...nextResize,
+            start: snapped,
+            duration: snappedDuration,
+            playbackStart:
+              nextResize.playbackStart != null
+                ? Math.round(Math.max(0, nextResize.playbackStart - delta * playbackRate) * 1000) /
+                  1000
+                : undefined,
+          };
+        }
+        snap = target;
       }
     }
   }
@@ -343,6 +358,8 @@ export function computeResizePreview(
     previewStart: nextResize.start,
     previewDuration: nextResize.duration,
     previewPlaybackStart: nextResize.playbackStart,
+    snapTime: snap?.time ?? null,
+    snapType: snap?.type ?? null,
   };
 }
 
@@ -359,11 +376,18 @@ export function previewGroupResize(
   ) => void,
 ): void {
   const grabbedChange = applyTimelineGroupResizePreview(session, next);
+  const previewStart = grabbedChange?.start ?? next.previewStart;
+  const previewDuration = grabbedChange?.duration ?? next.previewDuration;
+  // A member clamp can pull the grabbed edge off the raw snap target; then no guide.
+  const edgeTime = session.edge === "end" ? previewStart + previewDuration : previewStart;
+  const stillSnapped = next.snapTime != null && Math.abs(edgeTime - next.snapTime) < 1e-3;
   setResizeState({
     originScrollLeft: next.originScrollLeft,
-    previewStart: grabbedChange?.start ?? next.previewStart,
-    previewDuration: grabbedChange?.duration ?? next.previewDuration,
+    previewStart,
+    previewDuration,
     previewPlaybackStart: grabbedChange?.playbackStart ?? next.previewPlaybackStart,
+    snapTime: stillSnapped ? next.snapTime : null,
+    snapType: stillSnapped ? next.snapType : null,
     groupPreview: session.changes,
   });
 }

package/src/player/components/timelineClipDragTypes.ts

@@ -57,6 +57,9 @@ export interface ResizingClipState {
   previewStart: number;
   previewDuration: number;
   previewPlaybackStart?: number;
+  /** Snap target the trimmed edge landed on, for the guide highlight. */
+  snapTime?: number | null;
+  snapType?: TimelineSnapType | null;
   /** Coordinator-owned group projection; canonical elements change only on commit. */
   groupPreview?: readonly {
     key: string;

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

@@ -6,7 +6,8 @@ import { afterEach, describe, expect, it, vi, type Mock } from "vitest";
 import { TIMELINE_ASSET_MIME, TIMELINE_BLOCK_MIME } from "../../utils/timelineAssetDrop";
 import { usePlayerStore } from "../store/playerStore";
 import { createTimelineRowGeometry } from "./timelineLayout";
-import { useTimelineAssetDrop } from "./timelineDragDrop";
+import { resolveDropInsertRow, useTimelineAssetDrop } from "./timelineDragDrop";
+import { getTimelineRowTop, TRACK_H } from "./timelineLayout";
 import { configureTimelineTestViewport } from "./timelineTestViewport";
 
 (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
@@ -220,4 +221,94 @@ describe("useTimelineAssetDrop", () => {
     expect(view.api.isDragOver).toBe(false);
     act(() => view.root.unmount());
   });
+
+  it("previews the exact placement the drop commits, and clears it after", () => {
+    const onAssetDrop = vi.fn();
+    const view = renderHarness(onAssetDrop);
+    const payload = JSON.stringify({ path: "assets/a.png" });
+
+    act(() => view.api.handleAssetDragOver(dragEvent(assetTransfer(payload), 400, 100)));
+    const preview = view.api.dropPreview;
+    expect(preview).toEqual({ start: 10, track: 0 });
+
+    act(() => view.api.handleAssetDrop(dragEvent(assetTransfer(payload), 400, 100)));
+    expect(onAssetDrop).toHaveBeenCalledExactlyOnceWith("assets/a.png", preview);
+    expect(view.api.dropPreview).toBeNull();
+    act(() => view.root.unmount());
+  });
+
+  it("moves the preview with the pointer and drops it when the drag leaves", () => {
+    const view = renderHarness(vi.fn());
+    act(() => view.api.handleAssetDragOver(dragEvent(assetTransfer("{}"), 400, 100)));
+    act(() => view.api.handleAssetDragOver(dragEvent(assetTransfer("{}"), 800, 100)));
+    expect(view.api.dropPreview?.start).toBe(20);
+
+    act(() =>
+      view.api.handleAssetDragLeave({
+        relatedTarget: null,
+        currentTarget: document.body,
+      } as unknown as React.DragEvent),
+    );
+    expect(view.api.dropPreview).toBeNull();
+    act(() => view.root.unmount());
+  });
+});
+
+describe("resolveDropInsertRow", () => {
+  const rows = [TRACK_H, TRACK_H, TRACK_H];
+  it("arms a new track at the boundary between two lanes", () => {
+    expect(resolveDropInsertRow(getTimelineRowTop(1, rows), rows, 3)).toBe(1);
+  });
+  it("arms a new track above the first lane", () => {
+    expect(resolveDropInsertRow(getTimelineRowTop(0, rows) - 4, rows, 3)).toBe(0);
+  });
+  it("stays on the lane when the pointer is over its middle", () => {
+    expect(resolveDropInsertRow(getTimelineRowTop(1, rows) + TRACK_H / 2, rows, 3)).toBeNull();
+  });
+  it("leaves the area below the last lane to the append path", () => {
+    expect(resolveDropInsertRow(getTimelineRowTop(2, rows) + TRACK_H + 4, rows, 3)).toBeNull();
+  });
+  it("never arms on an empty timeline", () => {
+    expect(resolveDropInsertRow(80, [], 0)).toBeNull();
+  });
+});
+
+describe("useTimelineAssetDrop new-track drops", () => {
+  it("previews and commits an insert row for an asset dropped between lanes", () => {
+    const onAssetDrop = vi.fn();
+    const view = renderHarness(onAssetDrop);
+    const transfer = assetTransfer(JSON.stringify({ path: "assets/a.png" }));
+    const y = getTimelineRowTop(1) + 1;
+
+    act(() => view.api.handleAssetDragOver(dragEvent(transfer, 400, y)));
+    expect(view.api.dropPreview).toMatchObject({ start: 10, insertRow: 1 });
+    act(() => view.api.handleAssetDrop(dragEvent(transfer, 400, y)));
+    expect(onAssetDrop).toHaveBeenCalledWith(
+      "assets/a.png",
+      expect.objectContaining({
+        start: 10,
+        insertRow: 1,
+        trackOrder: Array.from({ length: 100 }, (_, index) => index),
+      }),
+    );
+    act(() => view.root.unmount());
+  });
+
+  it("does not ask a block drop to insert a track", () => {
+    const onBlockDrop = vi.fn();
+    const view = renderHarness(vi.fn(), 1, { onBlockDrop });
+    const transfer: DropTransfer = {
+      types: [TIMELINE_BLOCK_MIME],
+      files: [],
+      dropEffect: "none",
+      getData: (type) => (type === TIMELINE_BLOCK_MIME ? JSON.stringify({ name: "b" }) : ""),
+    };
+    const y = getTimelineRowTop(1) + 1;
+    act(() => {
+      view.api.handleAssetDragOver(dragEvent(transfer, 400, y));
+      view.api.handleAssetDrop(dragEvent(transfer, 400, y));
+    });
+    expect(onBlockDrop).toHaveBeenCalledWith("b", { start: 10, track: 1 });
+    act(() => view.root.unmount());
+  });
 });