@hyperframes/studio 0.7.46 → 0.7.48

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

@@ -102,4 +102,15 @@ describe("TimelineClip", () => {
 
     act(() => root.unmount());
   });
+
+  it("applies selected styling when rendered as selected", () => {
+    const { host, root } = renderClip({
+      element: { id: "selected", label: "Selected", tag: "div", start: 0, duration: 1, track: 0 },
+      isSelected: true,
+    });
+
+    expect(host.querySelector(".timeline-clip")?.classList.contains("is-selected")).toBe(true);
+
+    act(() => root.unmount());
+  });
 });

package/src/player/components/TimelineClipDiamonds.tsx

@@ -1,10 +1,12 @@
 import { memo, useRef, useState } from "react";
 import { BEAT_BAND_H } from "./BeatStrip";
 import {
+  clampToNeighbors,
   KEYFRAME_DRAG_THRESHOLD_PX,
   previewClipPct,
   resolveKeyframeDrag,
 } from "../../components/editor/keyframeDrag";
+import { snapKeyframePctToBeat } from "./timelineEditing";
 
 interface KeyframeEntry {
   percentage: number;
@@ -28,6 +30,14 @@ interface TimelineClipDiamondsProps {
   /** Beat-dot strip is shown on this track → shrink diamonds + drop them into
    *  the bottom half so they clear the strip at the top. */
   beatsActive?: boolean;
+  /** Composition-time beat positions (same source the beat strip renders from).
+   *  When present and `beatsActive`, a dragged keyframe snaps to the nearest beat. */
+  beatTimes?: number[];
+  /** Clip start / duration (seconds) + pixels-per-second, needed to map a
+   *  dragged keyframe's clip-% to composition time for beat snapping. */
+  clipStart?: number;
+  clipDurationSeconds?: number;
+  pixelsPerSecond?: number;
   accentColor: string;
   isSelected: boolean;
   currentPercentage: number;
@@ -71,6 +81,10 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
   clipWidthPx,
   clipHeightPx,
   beatsActive,
+  beatTimes,
+  clipStart = 0,
+  clipDurationSeconds = 0,
+  pixelsPerSecond = 1,
   accentColor,
   isSelected,
   currentPercentage,
@@ -121,6 +135,20 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
   const baseOpacity = isSelected ? 0.4 : 0.25;
   const canDrag = isSelected && !!onMoveKeyframe;
 
+  // Snap a dragged keyframe's clip-% to the nearest beat (within ~8px), then
+  // re-clamp to neighbours so the snap can't cross a sibling keyframe. No-op
+  // when the beat strip isn't active for this track or no beats are loaded.
+  const snapClipPctToBeat = (clipPct: number, draggedIndex: number): number => {
+    if (!beatsActive || !beatTimes || beatTimes.length === 0) return clipPct;
+    const snapped = snapKeyframePctToBeat(
+      { start: clipStart, duration: clipDurationSeconds },
+      clipPct,
+      beatTimes,
+      pixelsPerSecond,
+    );
+    return clampToNeighbors(snapped, sortedClipPcts, draggedIndex);
+  };
+
   return (
     <div
       className="absolute inset-0"
@@ -195,14 +223,17 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
           if (d.moved) {
             setPreview({
               kfKey,
-              clipPct: previewClipPct({
-                pointerDownX: d.startX,
-                pointerMoveX: e.clientX,
-                clipWidthPx,
-                draggedClipPct: d.fromClipPct,
-                draggedIndex: i,
-                sortedClipPcts,
-              }),
+              clipPct: snapClipPctToBeat(
+                previewClipPct({
+                  pointerDownX: d.startX,
+                  pointerMoveX: e.clientX,
+                  clipWidthPx,
+                  draggedClipPct: d.fromClipPct,
+                  draggedIndex: i,
+                  sortedClipPcts,
+                }),
+                i,
+              ),
             });
           }
         };
@@ -238,7 +269,7 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
             if (e.shiftKey) onShiftClickKeyframe?.(elementId, kf.percentage);
             else onClickKeyframe?.(kf.percentage);
           } else if (res.kind === "move" && res.toClipPct != null) {
-            onMoveKeyframe?.(elementId, d.fromClipPct, res.toClipPct);
+            onMoveKeyframe?.(elementId, d.fromClipPct, snapClipPctToBeat(res.toClipPct, i));
             // A retime still targeted this exact diamond — park/select it at its
             // new position, same as a plain click, or a drag that actually moved
             // something looks identical to one that silently did nothing.

package/src/player/components/TimelineDragGhost.tsx

@@ -0,0 +1,59 @@
+import type { ReactNode } from "react";
+import { TimelineClip } from "./TimelineClip";
+import { getTimelineEditCapabilities } from "./timelineEditing";
+import { CLIP_Y, TRACK_H } from "./timelineLayout";
+import type { TimelineTheme } from "./timelineTheme";
+import type { TimelineElement } from "../store/playerStore";
+
+interface TimelineDragGhostProps {
+  element: TimelineElement;
+  position: { left: number; top: number };
+  pps: number;
+  selectedElementId: string | null;
+  hasCustomContent: boolean;
+  theme: TimelineTheme;
+  children: ReactNode;
+}
+
+export function TimelineDragGhost({
+  element,
+  position,
+  pps,
+  selectedElementId,
+  hasCustomContent,
+  theme,
+  children,
+}: TimelineDragGhostProps) {
+  return (
+    <div
+      className="absolute pointer-events-none"
+      style={{
+        top: position.top,
+        left: position.left,
+        width: Math.max(element.duration * pps, 4),
+        height: TRACK_H - CLIP_Y * 2,
+        zIndex: 40,
+      }}
+    >
+      <TimelineClip
+        el={{ ...element, start: 0 }}
+        pps={pps}
+        clipY={0}
+        isSelected={selectedElementId === (element.key ?? element.id)}
+        isHovered={false}
+        isDragging={true}
+        hasCustomContent={hasCustomContent}
+        capabilities={getTimelineEditCapabilities(element)}
+        theme={theme}
+        isComposition={!!element.compositionSrc}
+        onHoverStart={() => {}}
+        onHoverEnd={() => {}}
+        onResizeStart={() => {}}
+        onClick={() => {}}
+        onDoubleClick={() => {}}
+      >
+        {children}
+      </TimelineClip>
+    </div>
+  );
+}

package/src/player/components/TimelineDropInsertionLine.tsx

@@ -0,0 +1,32 @@
+interface TimelineDropInsertionLineProps {
+  edge: "top" | "bottom";
+  accentColor: string;
+}
+
+export function TimelineDropInsertionLine({ edge, accentColor }: TimelineDropInsertionLineProps) {
+  return (
+    <div
+      className="absolute left-0 right-0 pointer-events-none"
+      style={{
+        top: edge === "top" ? -1 : undefined,
+        bottom: edge === "bottom" ? -1 : undefined,
+        height: 2,
+        background: accentColor,
+        boxShadow: `0 0 8px ${accentColor}`,
+        zIndex: 30,
+      }}
+    >
+      <span
+        className="absolute rounded-full"
+        style={{
+          left: 0,
+          top: -3,
+          width: 8,
+          height: 8,
+          background: accentColor,
+          boxShadow: `0 0 8px ${accentColor}`,
+        }}
+      />
+    </div>
+  );
+}

package/src/player/components/TimelineLayerGroupHeader.tsx

@@ -0,0 +1,97 @@
+import type { TimelineTheme } from "./timelineTheme";
+import { GUTTER } from "./timelineLayout";
+import type { StackingTimelineLayer, TimelineLayerId } from "./timelineTrackOrder";
+
+export const TIMELINE_LAYER_GROUP_HEADER_H = 18;
+
+export function shouldShowTimelineLayerGroupHeader(
+  contextKey: string,
+  previousContextKey: string,
+): boolean {
+  return contextKey !== "" && contextKey !== previousContextKey;
+}
+
+export function getTimelineLayerGroupHeaderTotalHeight(
+  layerOrder: readonly TimelineLayerId[],
+  layers: readonly StackingTimelineLayer[],
+): number {
+  const layerById = new Map<TimelineLayerId, StackingTimelineLayer>();
+  for (const layer of layers) layerById.set(layer.id, layer);
+
+  let previousContextKey = "";
+  let count = 0;
+  for (const layerId of layerOrder) {
+    const contextKey = layerById.get(layerId)?.contextKey ?? "";
+    if (shouldShowTimelineLayerGroupHeader(contextKey, previousContextKey)) count += 1;
+    previousContextKey = contextKey;
+  }
+  return count * TIMELINE_LAYER_GROUP_HEADER_H;
+}
+
+interface TimelineLayerGroupHeaderProps {
+  contextKey: string;
+  trackContentWidth: number;
+  theme: TimelineTheme;
+  accentColor: string;
+}
+
+export function TimelineLayerGroupHeader({
+  contextKey,
+  trackContentWidth,
+  theme,
+  accentColor,
+}: TimelineLayerGroupHeaderProps) {
+  return (
+    <div
+      className="relative"
+      style={{
+        height: TIMELINE_LAYER_GROUP_HEADER_H,
+        // Fill the full canvas width (min 100% of the panel) so the context
+        // header spans the timeline at any zoom; minWidth preserves the intrinsic
+        // composition width when zoomed in and scrolling.
+        width: "100%",
+        minWidth: GUTTER + trackContentWidth,
+        background: theme.gutterBackground,
+        borderBottom: `1px solid ${theme.rowBorder}`,
+      }}
+    >
+      <div
+        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"
+          style={{
+            width: GUTTER,
+            borderRight: `1px solid ${theme.gutterBorder}`,
+          }}
+        >
+          <span
+            className="absolute bottom-0 top-0"
+            style={{
+              left: 8,
+              width: 2,
+              background: accentColor,
+              opacity: 0.72,
+            }}
+          />
+        </div>
+        <div className="min-w-0 px-2">
+          <span
+            className="block truncate font-mono uppercase leading-none"
+            style={{
+              color: theme.textSecondary,
+              fontSize: 10,
+              letterSpacing: 0,
+            }}
+          >
+            Inside: {contextKey}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/player/components/TimelineLayerGutter.tsx

@@ -0,0 +1,61 @@
+import { Eye, EyeSlash } from "@phosphor-icons/react";
+import { Music } from "../../icons/SystemIcons";
+import type { TimelineTheme } from "./timelineTheme";
+import { GUTTER } from "./timelineLayout";
+
+interface TimelineLayerGutterProps {
+  isAudio: boolean;
+  isTrackHidden: boolean;
+  rowTrack: number;
+  theme: TimelineTheme;
+  onToggleHidden: () => void;
+}
+
+export function TimelineLayerGutter({
+  isAudio,
+  isTrackHidden,
+  rowTrack,
+  theme,
+  onToggleHidden,
+}: TimelineLayerGutterProps) {
+  return (
+    <div
+      className="sticky left-0 z-[12] flex-shrink-0 flex flex-col items-center justify-center gap-0.5"
+      style={{
+        width: GUTTER,
+        background: theme.gutterBackground,
+        borderRight: `1px solid ${theme.gutterBorder}`,
+      }}
+    >
+      {isAudio && (
+        <Music
+          size={12}
+          weight="fill"
+          aria-hidden="true"
+          style={{ color: theme.textSecondary, opacity: 0.7 }}
+        />
+      )}
+      <button
+        type="button"
+        aria-label={isTrackHidden ? `Show track ${rowTrack}` : `Hide track ${rowTrack}`}
+        title={isTrackHidden ? `Show track ${rowTrack}` : `Hide track ${rowTrack}`}
+        className={`flex h-6 w-6 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] ${
+          isTrackHidden ? "text-[#3CE6AC] hover:text-white" : "text-white/35 hover:text-white/75"
+        }`}
+        onPointerDown={(e) => {
+          e.stopPropagation();
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+          onToggleHidden();
+        }}
+      >
+        {isTrackHidden ? (
+          <EyeSlash size={14} weight="bold" aria-hidden="true" />
+        ) : (
+          <Eye size={14} weight="bold" aria-hidden="true" />
+        )}
+      </button>
+    </div>
+  );
+}

package/src/player/components/TimelineRuler.tsx

@@ -79,13 +79,15 @@ export const TimelineRuler = memo(function TimelineRuler({
           })}
       </svg>
 
-      {/* Ruler */}
+      {/* Ruler. The bar fills the full panel width (canvas is min 100% wide);
+          calc(100% - GUTTER) equals trackContentWidth when zoomed in and extends
+          past the content when zoomed out. Ticks stay at composition coordinates. */}
       <div
         className="relative overflow-hidden"
         style={{
           height: RULER_H,
           marginLeft: GUTTER,
-          width: trackContentWidth,
+          width: `calc(100% - ${GUTTER}px)`,
           background: theme.gutterBackground,
           borderBottom: `1px solid ${theme.rulerBorder}`,
         }}

package/src/player/components/TimelineSelectionOverlays.tsx

@@ -0,0 +1,55 @@
+import type { TimelineRangeSelection } from "./timelineEditing";
+import { GUTTER, RULER_H } from "./timelineLayout";
+import type { TimelineMarqueeOverlayRect } from "./useTimelineMarqueeSelection";
+
+interface TimelineSelectionOverlaysProps {
+  rangeSelection: TimelineRangeSelection | null;
+  marqueeRect: TimelineMarqueeOverlayRect | null;
+  pps: number;
+  /** Primary/accent color (hex) shared with the rest of the timeline chrome. */
+  accentColor: string;
+}
+
+export function TimelineSelectionOverlays({
+  rangeSelection,
+  marqueeRect,
+  pps,
+  accentColor,
+}: TimelineSelectionOverlaysProps) {
+  return (
+    <>
+      {rangeSelection && (
+        <div
+          className="absolute pointer-events-none"
+          style={{
+            left: GUTTER + Math.min(rangeSelection.start, rangeSelection.end) * pps,
+            width: Math.abs(rangeSelection.end - rangeSelection.start) * pps,
+            top: RULER_H,
+            bottom: 0,
+            backgroundColor: `${accentColor}1f`,
+            borderLeft: `1px solid ${accentColor}`,
+            borderRight: `1px solid ${accentColor}`,
+            zIndex: 50,
+          }}
+        />
+      )}
+      {marqueeRect && (
+        <div
+          aria-hidden="true"
+          className="absolute pointer-events-none"
+          data-timeline-marquee="true"
+          style={{
+            left: marqueeRect.left,
+            top: marqueeRect.top,
+            width: marqueeRect.width,
+            height: marqueeRect.height,
+            backgroundColor: `${accentColor}29`,
+            border: `1px solid ${accentColor}`,
+            boxShadow: "0 0 0 1px rgba(15, 23, 42, 0.35)",
+            zIndex: 60,
+          }}
+        />
+      )}
+    </>
+  );
+}

package/src/player/components/timelineCallbacks.ts

@@ -1,7 +1,12 @@
 // fallow-ignore-file code-duplication
 // fallow-ignore-file dead-code
 import type { TimelineElement } from "../store/playerStore";
-import type { BlockedTimelineEditIntent } from "./timelineEditing";
+import type { BlockedTimelineEditIntent, TimelineStackingReorderIntent } from "./timelineEditing";
+import type {
+  TimelineGroupCommitOptions,
+  TimelineGroupMoveChange,
+  TimelineGroupResizeChange,
+} from "../../hooks/useTimelineGroupEditing";
 
 /**
  * Shared callback signatures for timeline editing operations.
@@ -26,13 +31,26 @@ export interface TimelineDropCallbacks {
 export interface TimelineEditCallbacks {
   onMoveElement?: (
     element: TimelineElement,
-    updates: Pick<TimelineElement, "start" | "track">,
+    updates: Pick<TimelineElement, "start" | "track"> & {
+      stackingReorder?: TimelineStackingReorderIntent | null;
+    },
   ) => 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,
+  ) => 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/timelineClipDragPreview.ts

@@ -0,0 +1,52 @@
+import type { TimelineElement } from "../store/playerStore";
+import type { TimelineStackingReorderIntent } from "./timelineEditing";
+import type { TimelineLayerId } from "./timelineTrackOrder";
+
+interface DragPreviewState {
+  element: Pick<TimelineElement, "track">;
+  previewLayerId: TimelineLayerId;
+  previewLayerIndex: number;
+}
+
+export interface TimelineMovePreview {
+  start: number;
+  track: number;
+  previewLayerId?: TimelineLayerId;
+  previewLayerIndex?: number;
+  stackingReorder?: TimelineStackingReorderIntent | null;
+}
+
+export interface TimelineGroupMovePreview {
+  active: boolean;
+  previewStart: number;
+}
+
+export function resolveDragPreviewPlacement(
+  drag: DragPreviewState,
+  nextMove: TimelineMovePreview,
+  groupMove: TimelineGroupMovePreview,
+): {
+  previewStart: number;
+  previewTrack: number;
+  previewLayerId: TimelineLayerId;
+  previewLayerIndex: number;
+  previewStackingReorder: TimelineStackingReorderIntent | null;
+} {
+  if (groupMove.active) {
+    return {
+      previewStart: groupMove.previewStart,
+      previewTrack: drag.element.track,
+      previewLayerId: drag.previewLayerId,
+      previewLayerIndex: drag.previewLayerIndex,
+      previewStackingReorder: null,
+    };
+  }
+
+  return {
+    previewStart: groupMove.previewStart,
+    previewTrack: nextMove.track,
+    previewLayerId: nextMove.previewLayerId ?? drag.previewLayerId,
+    previewLayerIndex: nextMove.previewLayerIndex ?? drag.previewLayerIndex,
+    previewStackingReorder: nextMove.stackingReorder ?? null,
+  };
+}

package/src/player/components/timelineDragDrop.ts

@@ -2,12 +2,14 @@ import { useCallback, useState, type RefObject } from "react";
 import { TIMELINE_ASSET_MIME, TIMELINE_BLOCK_MIME } from "../../utils/timelineAssetDrop";
 import { TRACK_H, resolveTimelineAssetDrop } from "./timelineLayout";
 import type { TimelineDropCallbacks } from "./timelineCallbacks";
+import type { StackingTimelineLayer, TimelineLayerId } from "./timelineTrackOrder";
 
 interface UseTimelineAssetDropOptions extends TimelineDropCallbacks {
   scrollRef: RefObject<HTMLDivElement | null>;
   ppsRef: RefObject<number>;
   durationRef: RefObject<number>;
-  trackOrderRef: RefObject<number[]>;
+  trackOrderRef: RefObject<TimelineLayerId[]>;
+  timelineLayersRef: RefObject<StackingTimelineLayer[]>;
 }
 
 export function useTimelineAssetDrop({
@@ -15,6 +17,7 @@ export function useTimelineAssetDrop({
   ppsRef,
   durationRef,
   trackOrderRef,
+  timelineLayersRef,
   onFileDrop,
   onAssetDrop,
   onBlockDrop,
@@ -39,6 +42,10 @@ export function useTimelineAssetDrop({
       setIsDragOver(false);
       const scroll = scrollRef.current;
       const rect = scroll?.getBoundingClientRect();
+      const layerById = new Map(timelineLayersRef.current.map((layer) => [layer.id, layer]));
+      const trackOrder = trackOrderRef.current
+        .map((id) => layerById.get(id)?.placementTrack)
+        .filter((track): track is number => track != null);
       const dropInput = {
         rectLeft: rect?.left ?? 0,
         rectTop: rect?.top ?? 0,
@@ -47,7 +54,7 @@ export function useTimelineAssetDrop({
         pixelsPerSecond: ppsRef.current,
         duration: durationRef.current,
         trackHeight: TRACK_H,
-        trackOrder: trackOrderRef.current,
+        trackOrder,
       };
       if (onFileDrop && e.dataTransfer.files.length > 0) {
         void onFileDrop(
@@ -84,7 +91,16 @@ export function useTimelineAssetDrop({
         }
       }
     },
-    [onAssetDrop, onBlockDrop, onFileDrop, scrollRef, ppsRef, durationRef, trackOrderRef],
+    [
+      onAssetDrop,
+      onBlockDrop,
+      onFileDrop,
+      scrollRef,
+      ppsRef,
+      durationRef,
+      trackOrderRef,
+      timelineLayersRef,
+    ],
   );
 
   return { isDragOver, setIsDragOver, handleAssetDragOver, handleAssetDrop };

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

@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+import type { TimelineLayerDropPlacement } from "./timelineStacking";
+import { resolveTimelineDropIndicator } from "./timelineDropIndicator";
+
+const layerOrder = ["front", "middle", "back"];
+
+describe("resolveTimelineDropIndicator", () => {
+  it("highlights only the row targeted by an onto placement", () => {
+    const placement: TimelineLayerDropPlacement = { type: "onto", layerId: "middle" };
+
+    expect(resolveTimelineDropIndicator({ placement, layerId: "front", layerOrder })).toBeNull();
+    expect(resolveTimelineDropIndicator({ placement, layerId: "middle", layerOrder })).toEqual({
+      kind: "onto",
+    });
+  });
+
+  it("renders a single insertion line at the bottom edge of the before row", () => {
+    const placement: TimelineLayerDropPlacement = {
+      type: "between",
+      beforeLayerId: "front",
+      afterLayerId: "middle",
+    };
+
+    expect(resolveTimelineDropIndicator({ placement, layerId: "front", layerOrder })).toEqual({
+      kind: "line",
+      edge: "bottom",
+    });
+    expect(resolveTimelineDropIndicator({ placement, layerId: "middle", layerOrder })).toBeNull();
+  });
+
+  it("renders above placements on the target row top edge", () => {
+    const placement: TimelineLayerDropPlacement = { type: "above", layerId: "front" };
+
+    expect(resolveTimelineDropIndicator({ placement, layerId: "front", layerOrder })).toEqual({
+      kind: "line",
+      edge: "top",
+    });
+  });
+
+  it("renders below placements on the target row bottom edge", () => {
+    const placement: TimelineLayerDropPlacement = { type: "below", layerId: "back" };
+
+    expect(resolveTimelineDropIndicator({ placement, layerId: "back", layerOrder })).toEqual({
+      kind: "line",
+      edge: "bottom",
+    });
+  });
+});

package/src/player/components/timelineDropIndicator.ts

@@ -0,0 +1,33 @@
+import type { TimelineLayerDropPlacement } from "./timelineStacking";
+import type { TimelineLayerId } from "./timelineTrackOrder";
+
+export type TimelineDropIndicator = { kind: "onto" } | { kind: "line"; edge: "top" | "bottom" };
+
+interface ResolveTimelineDropIndicatorInput {
+  placement: TimelineLayerDropPlacement | null;
+  layerId: TimelineLayerId;
+  layerOrder: readonly TimelineLayerId[];
+}
+
+export function resolveTimelineDropIndicator({
+  placement,
+  layerId,
+  layerOrder,
+}: ResolveTimelineDropIndicatorInput): TimelineDropIndicator | null {
+  if (!placement || !layerOrder.includes(layerId)) return null;
+
+  switch (placement.type) {
+    case "onto":
+      return placement.layerId === layerId ? { kind: "onto" } : null;
+    case "between":
+      if (placement.beforeLayerId === layerId) return { kind: "line", edge: "bottom" };
+      if (!layerOrder.includes(placement.beforeLayerId) && placement.afterLayerId === layerId) {
+        return { kind: "line", edge: "top" };
+      }
+      return null;
+    case "above":
+      return placement.layerId === layerId ? { kind: "line", edge: "top" } : null;
+    case "below":
+      return placement.layerId === layerId ? { kind: "line", edge: "bottom" } : null;
+  }
+}