@hyperframes/studio 0.7.55 → 0.7.57

package/src/player/components/timelineCallbacks.ts

@@ -1,12 +1,8 @@
 // fallow-ignore-file code-duplication
 // fallow-ignore-file dead-code
 import type { TimelineElement } from "../store/playerStore";
-import type { BlockedTimelineEditIntent, TimelineStackingReorderIntent } from "./timelineEditing";
-import type {
-  TimelineGroupCommitOptions,
-  TimelineGroupMoveChange,
-  TimelineGroupResizeChange,
-} from "../../hooks/useTimelineGroupEditing";
+import type { TimelineMoveOperation } from "../../hooks/timelineMoveAdapter";
+import type { BlockedTimelineEditIntent } from "./timelineEditing";
 
 /**
  * Shared callback signatures for timeline editing operations.
@@ -31,26 +27,30 @@ export interface TimelineDropCallbacks {
 export interface TimelineEditCallbacks {
   onMoveElement?: (
     element: TimelineElement,
-    updates: Pick<TimelineElement, "start" | "track"> & {
-      stackingReorder?: TimelineStackingReorderIntent | null;
-    },
+    updates: Pick<TimelineElement, "start" | "track">,
+  ) => 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
+   *  lane change's follow-up z-reorder entry into one undo step. */
+  onMoveElements?: (
+    edits: Array<{ element: TimelineElement; updates: Pick<TimelineElement, "start" | "track"> }>,
+    coalesceKey?: string,
+    operation?: TimelineMoveOperation,
   ) => Promise<void> | void;
   onResizeElement?: (
     element: TimelineElement,
     updates: Pick<TimelineElement, "start" | "duration" | "playbackStart">,
   ) => Promise<void> | void;
-  onMoveElements?: (
-    changes: TimelineGroupMoveChange[],
-    options?: TimelineGroupCommitOptions,
-  ) => Promise<void> | void;
   onResizeElements?: (
-    changes: TimelineGroupResizeChange[],
-    options?: TimelineGroupCommitOptions,
+    changes: Array<{
+      element: TimelineElement;
+      start: number;
+      duration: number;
+      playbackStart?: number;
+    }>,
+    options?: { coalesceKey?: string },
   ) => Promise<void> | void;
-  onPreviewMoveElements?: (changes: TimelineGroupMoveChange[]) => void;
-  onPreviewResizeElements?: (changes: TimelineGroupResizeChange[]) => void;
   onToggleTrackHidden?: (track: number, hidden: boolean) => Promise<void> | void;
-  onToggleElementHidden?: (elementKey: string, hidden: boolean) => Promise<void> | void;
   onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
   onSplitElement?: (element: TimelineElement, splitTime: number) => Promise<void> | void;
   onRazorSplit?: (element: TimelineElement, splitTime: number) => Promise<void> | void;

package/src/player/components/timelineClipChildren.tsx

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+import type { TrackVisualStyle } from "./timelineIcons";
+
+function ClipLintDot({ element }: { element: TimelineElement }) {
+  const lint = usePlayerStore((s) => s.lintFindingsByElement.get(element.key ?? element.id));
+  if (!lint || lint.count === 0) return null;
+  return (
+    <span
+      className="absolute w-1.5 h-1.5 rounded-full bg-amber-400"
+      style={{ top: 7, right: 7 }}
+      title={lint.messages.join("\n")}
+    />
+  );
+}
+
+export function renderClipChildren(
+  element: TimelineElement,
+  clipStyle: TrackVisualStyle,
+  renderClipContent:
+    | ((element: TimelineElement, style: { clip: string; label: string }) => ReactNode)
+    | undefined,
+  renderClipOverlay: ((element: TimelineElement) => ReactNode) | undefined,
+): ReactNode {
+  return (
+    <>
+      {renderClipOverlay?.(element)}
+      {!renderClipContent && <ClipLintDot element={element} />}
+      {renderClipContent && (
+        // borderRadius: inherit — the clip itself is overflow-visible (keyframe
+        // diamonds hang outside its bounds), so the thumbnail layer must clip
+        // itself to the clip's rounded corners or sharp corners poke out.
+        <div className="absolute inset-0 overflow-hidden" style={{ borderRadius: "inherit" }}>
+          {renderClipContent(element, clipStyle)}
+        </div>
+      )}
+    </>
+  );
+}