React

import { Preview, usePlayback } from "@miraiclip/react";

// Inside <ProjectProvider> and <PlaybackProvider>.
export function PreviewPanel() {
  const { isPlaying, toggle } = usePlayback();
  return (
    <>
      {/* Hands its canvas to <PlaybackProvider>, keeps it sized, releases it on unmount. */}
      <Preview width={640} height={360} />
      <button type="button" onClick={toggle}>
        {isPlaying ? "Pause" : "Play"}
      </button>
    </>
  );
}

import { useProjectState, useSelection, useUndoRedo } from "@miraiclip/react";

// Inside <ProjectProvider>. Each hook re-renders only when its slice changes.
export function StatusBar() {
  const playheadUs = useProjectState((s) => s.playheadUs);
  const selection = useSelection();
  const { canUndo, undo } = useUndoRedo();

  return (
    <div>
      {(playheadUs / 1e6).toFixed(2)}s · {selection.length} selected
      <button disabled={!canUndo} onClick={undo}>Undo</button>
    </div>
  );
}

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

// Inside <ProjectProvider> and <PlaybackProvider>.
// <Timeline.*> handles placement, select, drag (one clip/move on release), trim and snapping.
export function TimelineTrack({ trackId, pxPerSecond }: { trackId: string; pxPerSecond: number }) {
  const track = useTrack(trackId);
  if (!track) return null;

  return (
    <Timeline.Root pxPerSecond={pxPerSecond}>
      <Timeline.Viewport style={{ height: 64 }}>
        <Timeline.Track track={track} style={{ height: 48 }}>
          <Timeline.Lane>
            {(clip) => (
              // State arrives as data attributes: style .clip[data-selected], .clip[data-dragging].
              <Timeline.Clip clip={clip} className="clip" style={{ top: 4, bottom: 4 }}>
                {clip.id}
                <Timeline.TrimHandle side="start" style={{ width: 6 }} />
                <Timeline.TrimHandle side="end" style={{ width: 6 }} />
              </Timeline.Clip>
            )}
          </Timeline.Lane>
        </Timeline.Track>
      </Timeline.Viewport>
    </Timeline.Root>
  );
}