Timeline

import { useState } from "react";
import { Timeline, useTracks } from "@miraiclip/react";

const HEADER_WIDTH = 120;
const RULER_HEIGHT = 28;
const TRACK_HEIGHT = 48;

// Inside <ProjectProvider> and <PlaybackProvider>.
export function EditorTimeline() {
  const [pxPerSecond, setPxPerSecond] = useState(60);
  // useTracks() is in render order (bottom layer first); list the top layer first, like most editors.
  const tracks = useTracks().slice().reverse();

  return (
    <Timeline.Root
      pxPerSecond={pxPerSecond}
      onPxPerSecondChange={setPxPerSecond} // Ctrl/⌘ + wheel zooms around the pointer
      headerWidth={HEADER_WIDTH}
      className="relative flex h-64 flex-col bg-neutral-950 text-xs text-neutral-300"
    >
      <Timeline.Viewport className="min-h-0 flex-1">
        {/* Ruler row: sticks to the top; its first cell sticks to the left too. */}
        <div className="sticky top-0 z-30 flex" style={{ height: RULER_HEIGHT }}>
          <div
            className="sticky left-0 z-20 shrink-0 border-r border-b border-neutral-800 bg-neutral-950"
            style={{ width: HEADER_WIDTH }}
          />
          <Timeline.Ruler
            className="flex-1 cursor-pointer border-b border-neutral-800 bg-neutral-950"
            renderTick={(tick) => (
              <span
                className="absolute top-0 flex h-full items-center border-l border-neutral-800 pl-1 text-[10px] tabular-nums text-neutral-500"
                style={{ left: tick.x }}
              >
                {tick.label}
              </span>
            )}
          >
            <Timeline.Playhead className="z-10 h-full w-px bg-sky-400" />
          </Timeline.Ruler>
        </div>

        {tracks.map((track) => (
          <Timeline.Track key={track.id} track={track} style={{ height: TRACK_HEIGHT }}>
            <Timeline.TrackHeader className="flex items-center border-r border-b border-neutral-800 bg-neutral-950 px-3">
              {track.name}
            </Timeline.TrackHeader>
            <Timeline.Lane className="border-b border-neutral-900 data-[drop-target]:bg-sky-400/10">
              {(clip) => (
                <Timeline.Clip
                  clip={clip}
                  insetPx={2}
                  className="group top-1.5 bottom-1.5 flex cursor-grab items-center overflow-hidden rounded-md border border-sky-400/40 bg-sky-400/15 px-2 text-sky-100 data-[dragging]:z-10 data-[dragging]:cursor-grabbing data-[dragging]:shadow-lg data-[locked]:opacity-50 data-[selected]:ring-2 data-[selected]:ring-sky-400"
                >
                  <span className="pointer-events-none truncate">{"text" in clip ? clip.text : clip.kind}</span>
                  <Timeline.TrimHandle side="start" className="w-1.5 bg-sky-400 opacity-0 group-data-[selected]:opacity-100" />
                  <Timeline.TrimHandle side="end" className="w-1.5 bg-sky-400 opacity-0 group-data-[selected]:opacity-100" />
                </Timeline.Clip>
              )}
            </Timeline.Lane>
          </Timeline.Track>
        ))}

        {/* The playhead line over the lanes: a layer that starts where the lanes start. */}
        <div
          className="pointer-events-none absolute z-10"
          style={{ left: HEADER_WIDTH, top: RULER_HEIGHT, height: tracks.length * TRACK_HEIGHT }}
        >
          <Timeline.Playhead className="h-full w-px bg-sky-400" />
        </div>
      </Timeline.Viewport>
    </Timeline.Root>
  );
}

<Timeline.Root pxPerSecond={…}>          // zoom, drag state, context
  <Timeline.PlayheadFollow />            // optional: keeps the playhead in view
  <Timeline.Viewport>                    // the scroll container, both axes
    <Timeline.Ruler>                     // ticks; press or drag to seek
      <Timeline.Playhead />
    </Timeline.Ruler>
    <Timeline.Track track={track}>       // one row
      <Timeline.TrackHeader />           // sticks to the left edge
      <Timeline.Lane overlay={<Timeline.Cuts>…</Timeline.Cuts>}>
        {(clip) => (
          <Timeline.Clip clip={clip}>
            <Timeline.TrimHandle side="start" />
            <Timeline.TrimHandle side="end" />
          </Timeline.Clip>
        )}
      </Timeline.Lane>
    </Timeline.Track>
  </Timeline.Viewport>
</Timeline.Root>

<Timeline.Lane
  overlay={
    <Timeline.Cuts>
      {({ x, from, to, transition }) => (
        <button
          type="button"
          className="absolute top-1 h-4 w-4 -translate-x-1/2 rounded-full bg-white text-[10px]"
          style={{ left: x }}
          onClick={() => openTransitionPicker(from.id, to.id)}
        >
          {transition ? "◆" : "+"}
        </button>
      )}
    </Timeline.Cuts>
  }
>
  {(clip) => <Timeline.Clip clip={clip} />}
</Timeline.Lane>

<Timeline.PlayheadFollow>
  {({ side, us, reveal }) =>
    side && (
      <button type="button" onClick={reveal} className="absolute top-1 z-40 rounded-full bg-sky-500 px-2 text-xs text-white" style={side === "left" ? { left: 128 } : { right: 8 }}>
        {formatClock(us)}
      </button>
    )
  }
</Timeline.PlayheadFollow>