@pixerate/editor-react 0.48.0 → 0.50.0

package/dist/video-editor/index.js

@@ -0,0 +1,758 @@
+// src/video-editor/useVideoEditor.ts
+import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
+import {
+  VideoEditorController,
+  createVideoEditorToolProvider
+} from "@pixerate/editor/video-editor";
+function useVideoEditorController(options = {}) {
+  const ref = useRef(null);
+  if (!ref.current) ref.current = new VideoEditorController(options);
+  const controller = ref.current;
+  useEffect(() => () => controller.destroy(), [controller]);
+  return controller;
+}
+function useVideoEditorState(controller) {
+  return useSyncExternalStore(controller.subscribe, controller.getState, controller.getState);
+}
+function useVideoEditor(controllerOrOptions = {}) {
+  const own = useRef(null);
+  let controller;
+  if (controllerOrOptions instanceof VideoEditorController) controller = controllerOrOptions;
+  else {
+    if (!own.current) own.current = new VideoEditorController(controllerOrOptions);
+    controller = own.current;
+  }
+  useEffect(() => () => own.current?.destroy(), []);
+  const state = useVideoEditorState(controller);
+  const actions = useMemo(
+    () => ({
+      play: () => controller.play(),
+      pause: () => controller.pause(),
+      toggle: () => controller.toggle(),
+      seek: (time) => controller.seek(time),
+      step: (frames) => controller.step(frames),
+      undo: () => void controller.undo(),
+      redo: () => void controller.redo(),
+      splitAtPlayhead: () => controller.splitAtPlayhead(),
+      deleteSelection: (options) => controller.deleteSelection(options)
+    }),
+    [controller]
+  );
+  return { controller, state, ...actions };
+}
+function useVideoEditorTools(registry, controller, options = {}) {
+  const { id, namespace, readOnly, rasterize } = options;
+  useEffect(() => {
+    if (!registry) return;
+    return registry.register(createVideoEditorToolProvider(controller, { id, namespace, readOnly, rasterize }));
+  }, [registry, controller, id, namespace, readOnly, rasterize]);
+}
+
+// src/video-editor/VideoPreview.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { VideoPreviewEngine } from "@pixerate/editor/video-editor";
+import { jsx } from "react/jsx-runtime";
+function VideoPreview({ controller, resolution, onFrame, className = "", style }) {
+  const { project } = useVideoEditorState(controller);
+  const canvas = useRef2(null);
+  const frameRef = useRef2(onFrame);
+  frameRef.current = onFrame;
+  useEffect2(() => {
+    const el = canvas.current;
+    if (!el) return;
+    const engine = new VideoPreviewEngine(controller, el, { resolution, onFrame: (frame) => frameRef.current?.(frame) });
+    return () => engine.destroy();
+  }, [controller, resolution]);
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvas,
+      className,
+      style: { display: "block", width: "100%", aspectRatio: `${project.width} / ${project.height}`, background: project.background ?? "#000", ...style },
+      role: "img",
+      "aria-label": `Preview of ${project.name ?? "the video"}`,
+      "data-video-preview": ""
+    }
+  );
+}
+
+// src/video-editor/VideoTransport.tsx
+import { formatVideoTimecode } from "@pixerate/editor/video-editor";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var btn = "rounded border border-border px-2 py-0.5 text-xs disabled:opacity-40";
+function VideoTransport({ controller, editable = true, className = "" }) {
+  const state = useVideoEditorState(controller);
+  const { time, duration, playing, project, selection, readOnly } = state;
+  const canEdit = editable && !readOnly;
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-wrap items-center gap-1.5 text-xs ${className}`, "data-video-transport": "", children: [
+    /* @__PURE__ */ jsx2("button", { type: "button", className: btn, onClick: () => controller.step(-1), "aria-label": "Previous frame", title: "Previous frame (\u2190)", "data-step-back": "", children: "\u25C0|" }),
+    /* @__PURE__ */ jsx2("button", { type: "button", className: btn, onClick: () => controller.toggle(), "aria-label": playing ? "Pause" : "Play", title: "Play / pause (Space)", disabled: duration <= 0, "data-play": "", children: playing ? "Pause" : "Play" }),
+    /* @__PURE__ */ jsx2("button", { type: "button", className: btn, onClick: () => controller.step(1), "aria-label": "Next frame", title: "Next frame (\u2192)", "data-step-forward": "", children: "|\u25B6" }),
+    /* @__PURE__ */ jsxs("span", { className: "px-1 tabular-nums text-muted-foreground", "data-timecode": "", children: [
+      formatVideoTimecode(time, project.fps),
+      " / ",
+      formatVideoTimecode(duration, project.fps)
+    ] }),
+    editable && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx2("span", { className: "mx-1 h-4 w-px bg-border" }),
+      /* @__PURE__ */ jsx2("button", { type: "button", className: btn, onClick: () => controller.splitAtPlayhead(), disabled: !canEdit, title: "Split at the playhead (S)", "data-split": "", children: "Split" }),
+      /* @__PURE__ */ jsx2("button", { type: "button", className: btn, onClick: () => controller.deleteSelection(), disabled: !canEdit || !selection.length, title: "Delete the selected clips (Delete)", "data-delete": "", children: "Delete" }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: btn,
+          onClick: () => controller.deleteSelection({ ripple: true }),
+          disabled: !canEdit || !selection.length,
+          title: "Delete the selected clips and close the gaps (Shift+Delete)",
+          "data-ripple-delete": "",
+          children: "Ripple delete"
+        }
+      ),
+      /* @__PURE__ */ jsx2("button", { type: "button", className: btn, onClick: () => controller.undo(), disabled: !canEdit || !state.canUndo, title: state.canUndo ? `Undo ${state.undoLabel}` : "Nothing to undo", "data-undo": "", children: "Undo" }),
+      /* @__PURE__ */ jsx2("button", { type: "button", className: btn, onClick: () => controller.redo(), disabled: !canEdit || !state.canRedo, title: state.canRedo ? `Redo ${state.redoLabel}` : "Nothing to redo", "data-redo": "", children: "Redo" })
+    ] })
+  ] });
+}
+
+// src/video-editor/VideoTimeline.tsx
+import { useEffect as useEffect3, useRef as useRef3, useState } from "react";
+import {
+  planVideoClipDrag,
+  videoAssetMap,
+  videoClipLabel,
+  videoClipTint,
+  videoDropTracks,
+  videoRulerTicks,
+  formatVideoSeconds
+} from "@pixerate/editor/video-editor";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var HEADER = 150;
+var RULER = 24;
+var ROW = 44;
+var HANDLE = 6;
+var DRAG_THRESHOLD = 3;
+var MIN_ZOOM = 10;
+var MAX_ZOOM = 400;
+var isField = (el) => el instanceof HTMLElement && /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName);
+function VideoTimeline({ controller, pxPerSecond, onPxPerSecondChange, editable = true, className = "" }) {
+  const state = useVideoEditorState(controller);
+  const { project, duration, time, selection, readOnly, error } = state;
+  const [ownZoom, setOwnZoom] = useState(pxPerSecond ?? 100);
+  const px = onPxPerSecondChange ? pxPerSecond ?? 100 : ownZoom;
+  const canEdit = editable && !readOnly;
+  const [drag, setDrag] = useState(null);
+  const dragRef = useRef3(null);
+  const rows = useRef3(/* @__PURE__ */ new Map());
+  const ruler = useRef3(null);
+  const assets = videoAssetMap(project);
+  const msToPx = (ms) => ms * px / 1e3;
+  const span = Math.max(duration + 5e3, 1e4);
+  const width = msToPx(span);
+  const ticks = videoRulerTicks(span, px, project.fps);
+  const seekAt = (clientX) => {
+    const box = ruler.current.getBoundingClientRect();
+    controller.seek(Math.max(0, (clientX - box.left) * 1e3 / px));
+  };
+  const trackAt = (clipId, clientY) => {
+    const allowed = videoDropTracks(project, clipId);
+    for (const [id, el] of rows.current) {
+      const box = el.getBoundingClientRect();
+      if (clientY >= box.top && clientY < box.bottom && allowed.includes(id)) return id;
+    }
+    return void 0;
+  };
+  const planFor = (d, e) => planVideoClipDrag(project, {
+    clip: d.clip,
+    mode: d.mode,
+    delta: (e.clientX - d.x) * 1e3 / px,
+    track: d.mode === "move" ? trackAt(d.clip, e.clientY) : void 0,
+    ripple: e.altKey,
+    snap: (t) => controller.snap(t, { exclude: [d.clip] }).time
+  });
+  const update = (next) => {
+    dragRef.current = next;
+    setDrag(next);
+  };
+  const live = useRef3({ planFor, selection });
+  live.current = { planFor, selection };
+  const stopDrag = useRef3(null);
+  useEffect3(() => () => stopDrag.current?.(), []);
+  const onClipPointerDown = (e, clip, track) => {
+    if (e.button !== void 0 && e.button !== 0) return;
+    e.stopPropagation();
+    if (!editable) return;
+    try {
+      e.currentTarget.setPointerCapture?.(e.pointerId);
+    } catch {
+    }
+    const handle = e.target.closest("[data-handle]")?.getAttribute("data-handle");
+    const mode = handle === "start" ? "trim-start" : handle === "end" ? "trim-end" : "move";
+    const fixed = !canEdit || !!track.locked;
+    stopDrag.current?.();
+    update({ clip: clip.id, mode, x: e.clientX, pointer: e.pointerId, moved: false, plan: null });
+    const move = (ev) => {
+      const d = dragRef.current;
+      if (!d || fixed) return;
+      if (!d.moved && Math.abs(ev.clientX - d.x) < DRAG_THRESHOLD) return;
+      if (!d.moved && !live.current.selection.includes(d.clip)) controller.select([d.clip]);
+      update({ ...d, moved: true, plan: live.current.planFor(d, ev) });
+    };
+    const up = (ev) => {
+      stop();
+      const d = dragRef.current;
+      if (!d) return;
+      update(null);
+      if (!d.moved) {
+        if (ev.shiftKey || ev.metaKey || ev.ctrlKey) controller.select([d.clip], { add: true });
+        else controller.select([d.clip]);
+        return;
+      }
+      const plan = live.current.planFor(d, ev);
+      if (plan?.edit) controller.apply(plan.edit, d.mode === "move" ? "Move clip" : ev.altKey ? "Ripple trim" : "Trim clip");
+    };
+    const cancel = () => {
+      stop();
+      update(null);
+    };
+    const stop = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      window.removeEventListener("pointercancel", cancel);
+      stopDrag.current = null;
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    window.addEventListener("pointercancel", cancel);
+    stopDrag.current = stop;
+  };
+  const onKeyDown = (e) => {
+    if (isField(e.target)) return;
+    const mod = e.metaKey || e.ctrlKey;
+    const key = e.key.toLowerCase();
+    if (e.key === " ") {
+      if (e.target.tagName === "BUTTON") return;
+      controller.toggle();
+    } else if (e.key === "ArrowLeft" && !mod) controller.step(-1);
+    else if (e.key === "ArrowRight" && !mod) controller.step(1);
+    else if (e.key === "Escape") controller.select(null);
+    else if (!canEdit) return;
+    else if (key === "s" && !mod) controller.splitAtPlayhead();
+    else if ((e.key === "Delete" || e.key === "Backspace") && !mod) controller.deleteSelection({ ripple: e.shiftKey });
+    else if (key === "z" && mod) {
+      if (e.shiftKey) controller.redo();
+      else controller.undo();
+    } else return;
+    e.preventDefault();
+  };
+  const placed = project.tracks.map((track) => ({
+    track,
+    clips: project.tracks.flatMap(
+      (t) => t.clips.map((clip) => {
+        const plan = drag?.moved && drag.clip === clip.id ? drag.plan : null;
+        const on = plan ? plan.track : t.id;
+        return on === track.id ? { clip, home: t, start: plan ? plan.start : clip.start, duration: plan ? plan.duration : clip.duration, dragging: !!plan } : null;
+      }).filter((x) => x !== null)
+    )
+  }));
+  const toggle = (track, field2, label) => /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type: "button",
+      className: `rounded border px-1 text-[10px] leading-4 ${track[field2] ? "border-rose-500 bg-rose-500/15 text-rose-600" : "border-border text-muted-foreground"} disabled:opacity-40`,
+      "aria-pressed": !!track[field2],
+      "aria-label": `${label} ${track.name ?? track.id}`,
+      title: label,
+      disabled: !canEdit,
+      "data-track-toggle": field2,
+      onClick: () => controller.apply({ op: "update_track", track: track.id, set: { [field2]: !track[field2] } }, `${track[field2] ? "Un" : ""}${field2 === "muted" ? "mute" : field2 === "hidden" ? "hide" : "lock"} track`),
+      children: field2 === "muted" ? "M" : field2 === "hidden" ? "H" : "L"
+    }
+  );
+  return /* @__PURE__ */ jsxs2("div", { className: `flex flex-col gap-1 ${className}`, "data-video-timeline-wrapper": "", children: [
+    !onPxPerSecondChange && /* @__PURE__ */ jsxs2("label", { className: "flex items-center gap-2 self-end text-xs text-muted-foreground", children: [
+      "Zoom",
+      /* @__PURE__ */ jsx3("input", { type: "range", min: MIN_ZOOM, max: MAX_ZOOM, step: 5, value: ownZoom, "aria-label": "Timeline zoom", onChange: (e) => setOwnZoom(Number(e.target.value)), "data-zoom": "" })
+    ] }),
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: "relative overflow-x-auto rounded border border-border outline-none focus-visible:ring-2 focus-visible:ring-rose-500/50",
+        tabIndex: 0,
+        role: "group",
+        "aria-label": "Video timeline",
+        onKeyDown,
+        "data-video-timeline": "",
+        children: /* @__PURE__ */ jsxs2("div", { className: "relative", style: { width: HEADER + width }, children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex", style: { height: RULER }, children: [
+            /* @__PURE__ */ jsx3("div", { className: "sticky left-0 z-20 shrink-0 border-b border-r border-border bg-background", style: { width: HEADER } }),
+            /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                ref: ruler,
+                className: "relative shrink-0 cursor-ew-resize select-none touch-none border-b border-border text-[10px] text-muted-foreground",
+                style: { width },
+                role: "slider",
+                "aria-label": "Playhead",
+                "aria-valuemin": 0,
+                "aria-valuemax": duration,
+                "aria-valuenow": Math.round(time),
+                "data-ruler": "",
+                onPointerDown: (e) => {
+                  try {
+                    e.currentTarget.setPointerCapture?.(e.pointerId);
+                  } catch {
+                  }
+                  seekAt(e.clientX);
+                },
+                onPointerMove: (e) => {
+                  if (e.buttons & 1) seekAt(e.clientX);
+                },
+                children: [
+                  ticks.map((t) => /* @__PURE__ */ jsx3("div", { className: `absolute bottom-0 w-px ${t.major ? "h-2.5 bg-muted-foreground/70" : "h-1 bg-muted-foreground/40"}`, style: { left: t.x }, "data-tick": t.time, children: t.label && /* @__PURE__ */ jsx3("span", { className: "absolute -top-3.5 left-1 whitespace-nowrap tabular-nums", children: t.label }) }, t.time)),
+                  (project.markers ?? []).map((m) => /* @__PURE__ */ jsx3(
+                    "div",
+                    {
+                      className: "absolute top-0 h-2.5 w-2.5 -translate-x-1/2 rotate-45",
+                      style: { left: msToPx(m.time), background: m.color ?? "#f59e0b" },
+                      title: `${m.label ?? m.id} at ${formatVideoSeconds(m.time)}`,
+                      "data-marker": m.id
+                    },
+                    m.id
+                  ))
+                ]
+              }
+            )
+          ] }),
+          placed.map(({ track, clips }) => /* @__PURE__ */ jsxs2("div", { className: "flex border-b border-border last:border-b-0", style: { height: ROW }, "data-track": track.id, children: [
+            /* @__PURE__ */ jsxs2("div", { className: "sticky left-0 z-20 flex shrink-0 flex-col justify-center gap-0.5 border-r border-border bg-background px-2 text-xs", style: { width: HEADER }, "data-track-header": "", children: [
+              /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx3("span", { className: "truncate font-medium", children: track.name ?? track.id }),
+                /* @__PURE__ */ jsx3("span", { className: "rounded bg-muted px-1 text-[10px] uppercase text-muted-foreground", "data-track-kind": "", children: track.kind })
+              ] }),
+              editable && /* @__PURE__ */ jsxs2("div", { className: "flex gap-1", children: [
+                toggle(track, "muted", "Mute"),
+                track.kind === "video" && toggle(track, "hidden", "Hide"),
+                toggle(track, "locked", "Lock")
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                ref: (el) => {
+                  if (el) rows.current.set(track.id, el);
+                  else rows.current.delete(track.id);
+                },
+                className: `relative shrink-0 ${track.hidden ? "opacity-50" : ""} ${track.locked ? "bg-muted/40" : ""}`,
+                style: { width },
+                "data-track-lane": track.id,
+                onPointerDown: (e) => {
+                  if (e.target === e.currentTarget && editable) controller.select(null);
+                },
+                children: clips.map(({ clip, home, start, duration: length, dragging }) => {
+                  const asset = clip.type === "media" ? assets.get(clip.asset) : void 0;
+                  const selected = selection.includes(clip.id);
+                  const label = videoClipLabel(clip, asset);
+                  return /* @__PURE__ */ jsxs2(
+                    "div",
+                    {
+                      className: `absolute top-1 bottom-1 select-none touch-none overflow-hidden rounded text-[11px] text-white ${canEdit && !home.locked ? "cursor-grab" : "cursor-default"} ${dragging ? "opacity-80 shadow-lg" : ""}`,
+                      style: {
+                        left: msToPx(start),
+                        width: Math.max(2, msToPx(length)),
+                        background: videoClipTint(clip, asset),
+                        outline: selected ? "2px solid #f43f5e" : void 0,
+                        outlineOffset: selected ? 1 : void 0,
+                        zIndex: dragging ? 10 : selected ? 2 : 1
+                      },
+                      title: `${label} \xB7 ${formatVideoSeconds(start)}\u2013${formatVideoSeconds(start + length)}`,
+                      "data-clip": clip.id,
+                      "data-selected": selected ? "" : void 0,
+                      "data-dragging": dragging ? "" : void 0,
+                      "aria-selected": selected,
+                      onPointerDown: (e) => onClipPointerDown(e, clip, home),
+                      children: [
+                        /* @__PURE__ */ jsx3("span", { className: "pointer-events-none block truncate px-1.5 py-0.5 leading-4", children: label }),
+                        clip.transition && /* @__PURE__ */ jsxs2("span", { className: "pointer-events-none absolute left-1 bottom-0.5 rounded bg-black/40 px-1 text-[9px] leading-3", title: `${clip.transition.type} ${clip.transition.duration} ms`, "data-transition": clip.transition.type, children: [
+                          "\u29D3 ",
+                          clip.transition.type
+                        ] }),
+                        canEdit && !home.locked && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+                          /* @__PURE__ */ jsx3("div", { className: "absolute inset-y-0 left-0 cursor-ew-resize bg-white/0 hover:bg-white/40", style: { width: HANDLE }, "data-handle": "start", "aria-hidden": "true" }),
+                          /* @__PURE__ */ jsx3("div", { className: "absolute inset-y-0 right-0 cursor-ew-resize bg-white/0 hover:bg-white/40", style: { width: HANDLE }, "data-handle": "end", "aria-hidden": "true" })
+                        ] })
+                      ]
+                    },
+                    clip.id
+                  );
+                })
+              }
+            )
+          ] }, track.id)),
+          /* @__PURE__ */ jsx3("div", { className: "pointer-events-none absolute top-0 bottom-0 w-0.5 -translate-x-1/2 bg-rose-500", style: { left: HEADER + msToPx(time), zIndex: 15 }, "data-playhead": "" })
+        ] })
+      }
+    ),
+    error && /* @__PURE__ */ jsx3("p", { className: "text-xs text-red-500", role: "alert", "data-edit-error": "", children: error })
+  ] });
+}
+
+// src/video-editor/ClipInspector.tsx
+import {
+  findVideoClip,
+  formatVideoSeconds as formatVideoSeconds2,
+  VIDEO_TRANSITION_TYPES,
+  videoKeyframeRows,
+  videoKeyframeToggleEdit,
+  videoKeyframeValueEdit
+} from "@pixerate/editor/video-editor";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var field = "w-full rounded border border-border bg-transparent px-1 py-0.5 text-xs disabled:opacity-50";
+var DEFAULT_TRANSITION = 500;
+function Commit({
+  value,
+  onCommit,
+  multiline,
+  ...rest
+}) {
+  const commit = (raw) => {
+    if (raw !== value) onCommit(raw);
+  };
+  if (multiline)
+    return /* @__PURE__ */ jsx4(
+      "textarea",
+      {
+        className: field,
+        rows: 2,
+        defaultValue: value,
+        disabled: rest.disabled,
+        "aria-label": rest["aria-label"],
+        onBlur: (e) => commit(e.currentTarget.value)
+      },
+      value
+    );
+  return /* @__PURE__ */ jsx4("input", { className: field, ...rest, defaultValue: value, onKeyDown: (e) => e.key === "Enter" && e.currentTarget.blur(), onBlur: (e) => commit(e.currentTarget.value) }, value);
+}
+function Row({ label, name, children }) {
+  return /* @__PURE__ */ jsxs3("label", { className: "grid grid-cols-[5.5rem_minmax(0,1fr)] items-center gap-2 text-xs", "data-field": name, children: [
+    /* @__PURE__ */ jsx4("span", { className: "text-muted-foreground", children: label }),
+    children
+  ] });
+}
+function ClipInspector({ controller, className = "" }) {
+  const state = useVideoEditorState(controller);
+  const { project, selection, readOnly, time } = state;
+  if (selection.length !== 1)
+    return /* @__PURE__ */ jsx4("p", { className: `text-xs text-muted-foreground ${className}`, "data-clip-inspector": "", children: selection.length ? `${selection.length} clips selected. Select one clip to edit it.` : "Select a clip on the timeline to edit it." });
+  const at = findVideoClip(project, selection[0]);
+  if (!at) return null;
+  const clip = at.clip;
+  const disabled = readOnly || !!at.track.locked;
+  const set = (key, value, label = `Change ${key}`) => {
+    if (value === void 0 || value === "") controller.apply({ op: "update_clip", clip: clip.id, remove: [key] }, label);
+    else controller.apply({ op: "update_clip", clip: clip.id, set: { [key]: value } }, label);
+  };
+  const num = (key, raw, label) => {
+    const trimmed = raw.trim();
+    if (!trimmed) return set(key, void 0, label);
+    const n = Number(trimmed);
+    if (Number.isFinite(n)) set(key, n, label);
+  };
+  const text = (key, label) => {
+    const value = clip[key];
+    return /* @__PURE__ */ jsx4(Commit, { value: value === void 0 ? "" : String(value), "aria-label": label ?? key, disabled, onCommit: (raw) => set(key, raw.trim() || void 0, `Change ${label ?? key}`) });
+  };
+  const number = (key, label, attrs = {}) => {
+    const value = clip[key];
+    return /* @__PURE__ */ jsx4(Commit, { type: "number", value: value === void 0 ? "" : String(value), "aria-label": label, disabled, onCommit: (raw) => num(key, raw, `Change ${label.toLowerCase()}`), ...attrs });
+  };
+  const transition = clip.transition;
+  return /* @__PURE__ */ jsxs3("div", { className: `flex flex-col gap-1.5 ${className}`, "data-clip-inspector": "", "data-clip-id": clip.id, children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 text-xs", children: [
+      /* @__PURE__ */ jsx4("span", { className: "font-medium", children: clip.type === "media" ? "Media clip" : clip.type === "text" ? "Title" : "Colour clip" }),
+      /* @__PURE__ */ jsx4("code", { className: "text-muted-foreground", children: clip.id }),
+      at.track.locked && /* @__PURE__ */ jsx4("span", { className: "text-amber-500", children: "locked track" })
+    ] }),
+    /* @__PURE__ */ jsx4(Row, { label: "Name", name: "name", children: text("name", "Name") }),
+    /* @__PURE__ */ jsx4(Row, { label: "Start", name: "start", children: /* @__PURE__ */ jsx4("span", { className: "tabular-nums text-xs", children: formatVideoSeconds2(clip.start) }) }),
+    /* @__PURE__ */ jsx4(Row, { label: "Duration", name: "duration", children: /* @__PURE__ */ jsx4("span", { className: "tabular-nums text-xs", children: formatVideoSeconds2(clip.duration) }) }),
+    videoKeyframeRows(project, clip.id, time).map((row) => /* @__PURE__ */ jsx4(Row, { label: row.label, name: row.property, children: /* @__PURE__ */ jsxs3("span", { className: "flex min-w-0 items-center gap-1", "data-keyframe-row": row.property, children: [
+      /* @__PURE__ */ jsx4(
+        Commit,
+        {
+          type: "number",
+          value: row.keyed || (row.property === "opacity" ? clip.opacity : row.property === "volume" ? clip.volume : clip.transform?.[row.property]) !== void 0 ? String(row.value) : "",
+          placeholder: String(row.value),
+          "aria-label": row.label,
+          disabled,
+          min: row.min,
+          max: row.max,
+          step: row.step,
+          onCommit: (raw) => {
+            const n = Number(raw);
+            if (raw.trim() && !Number.isFinite(n)) return;
+            const edit = videoKeyframeValueEdit(project, clip.id, row.property, time, raw.trim() ? n : void 0);
+            if (edit) controller.apply(edit, row.keyed ? `Keyframe ${row.label.toLowerCase()}` : `Change ${row.label.toLowerCase()}`);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: `shrink-0 rounded px-1 text-xs disabled:opacity-50 ${row.onKey ? "text-amber-500" : row.keyed ? "text-foreground" : "text-muted-foreground"}`,
+          "aria-label": `${row.onKey ? "Remove" : "Add"} ${row.label.toLowerCase()} keyframe at playhead`,
+          "aria-pressed": row.onKey,
+          title: row.keyed ? `${row.keys} key${row.keys === 1 ? "" : "s"}; ${row.onKey ? "remove the one" : "add one"} at the playhead` : "Animate: add a key at the playhead",
+          disabled,
+          "data-keyframe-toggle": row.property,
+          onClick: () => {
+            const edit = videoKeyframeToggleEdit(project, clip.id, row.property, time);
+            if (edit) controller.apply(edit, `${row.onKey ? "Remove" : "Add"} ${row.label.toLowerCase()} keyframe`);
+          },
+          children: row.onKey ? "\u25C6" : "\u25C7"
+        }
+      ),
+      row.keyed && /* @__PURE__ */ jsx4("span", { className: "shrink-0 text-[10px] tabular-nums text-muted-foreground", "data-keyframe-count": row.property, children: row.keys })
+    ] }) }, row.property)),
+    /* @__PURE__ */ jsx4(Row, { label: "Fade in (ms)", name: "fadeIn", children: number("fadeIn", "Fade in", { min: 0, step: 100 }) }),
+    /* @__PURE__ */ jsx4(Row, { label: "Fade out (ms)", name: "fadeOut", children: number("fadeOut", "Fade out", { min: 0, step: 100 }) }),
+    clip.type === "media" && /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      /* @__PURE__ */ jsx4(Row, { label: "Speed", name: "speed", children: number("speed", "Speed", { min: 0.1, step: 0.25 }) }),
+      /* @__PURE__ */ jsx4(Row, { label: "Muted", name: "muted", children: /* @__PURE__ */ jsx4("input", { type: "checkbox", className: "justify-self-start", checked: !!clip.muted, disabled, "aria-label": "Muted", onChange: (e) => set("muted", e.target.checked || void 0, e.target.checked ? "Mute clip" : "Unmute clip") }) })
+    ] }),
+    clip.type === "text" && /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      /* @__PURE__ */ jsx4(Row, { label: "Text", name: "text", children: /* @__PURE__ */ jsx4(Commit, { multiline: true, value: clip.text, "aria-label": "Text", disabled, onCommit: (raw) => set("text", raw, "Change text") }) }),
+      /* @__PURE__ */ jsx4(Row, { label: "Colour", name: "color", children: text("color", "Colour") }),
+      /* @__PURE__ */ jsx4(Row, { label: "Font size", name: "fontSize", children: number("fontSize", "Font size", { min: 1, step: 2 }) }),
+      /* @__PURE__ */ jsx4(Row, { label: "Background", name: "background", children: text("background", "Background") })
+    ] }),
+    clip.type === "color" && /* @__PURE__ */ jsx4(Row, { label: "Colour", name: "color", children: /* @__PURE__ */ jsx4(Commit, { value: clip.color, "aria-label": "Colour", disabled, onCommit: (raw) => raw.trim() && set("color", raw.trim(), "Change colour") }) }),
+    /* @__PURE__ */ jsx4(Row, { label: "Transition in", name: "transition", children: /* @__PURE__ */ jsxs3(
+      "select",
+      {
+        className: field,
+        value: transition?.type ?? "",
+        disabled,
+        "aria-label": "Transition",
+        onChange: (e) => {
+          const type = e.target.value;
+          controller.apply(
+            { op: "set_transition", clip: clip.id, transition: type ? { ...transition, type, duration: transition?.duration ?? DEFAULT_TRANSITION } : null },
+            type ? "Set transition" : "Remove transition"
+          );
+        },
+        children: [
+          /* @__PURE__ */ jsx4("option", { value: "", children: "None" }),
+          VIDEO_TRANSITION_TYPES.map((t) => /* @__PURE__ */ jsx4("option", { value: t, children: t === "crossfade" ? "Crossfade" : t === "dip" ? "Dip to colour" : "Wipe" }, t))
+        ]
+      }
+    ) }),
+    transition && /* @__PURE__ */ jsx4(Row, { label: "Length (ms)", name: "transitionDuration", children: /* @__PURE__ */ jsx4(
+      Commit,
+      {
+        type: "number",
+        min: 1,
+        step: 100,
+        value: String(transition.duration),
+        "aria-label": "Transition length",
+        disabled,
+        onCommit: (raw) => {
+          const n = Number(raw);
+          if (raw.trim() && Number.isFinite(n) && n > 0) controller.apply({ op: "set_transition", clip: clip.id, transition: { ...transition, duration: n } }, "Change transition length");
+        }
+      }
+    ) })
+  ] });
+}
+
+// src/video-editor/MediaBin.tsx
+import { useState as useState2 } from "react";
+import {
+  formatVideoSeconds as formatVideoSeconds3,
+  probeVideoMedia,
+  videoAssetDropEdit,
+  videoAssetKindOf
+} from "@pixerate/editor/video-editor";
+import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var btn2 = "rounded border border-border px-2 py-0.5 text-xs disabled:opacity-40";
+function MediaBin({ controller, editable = true, fileToUrl, probe = probeVideoMedia, className = "" }) {
+  const { project, readOnly } = useVideoEditorState(controller);
+  const canEdit = editable && !readOnly;
+  const [url, setUrl] = useState2("");
+  const [urlKind, setUrlKind] = useState2("");
+  const [busy, setBusy] = useState2(0);
+  const [problem, setProblem] = useState2(null);
+  const [over, setOver] = useState2(false);
+  const addSource = async (src, kind, name) => {
+    setBusy((n) => n + 1);
+    try {
+      const found = await probe(src, kind).catch(() => null);
+      const result = controller.apply({ op: "add_asset", asset: { kind, src, name, ...found ?? {} } }, `Import ${name}`);
+      if (!result.ok) setProblem(result.error);
+    } finally {
+      setBusy((n) => n - 1);
+    }
+  };
+  const addFiles = async (files) => {
+    setProblem(null);
+    for (const file of Array.from(files ?? [])) {
+      const kind = videoAssetKindOf(file.type || file.name);
+      if (!kind) {
+        setProblem(`"${file.name}" is not a video, audio or image file.`);
+        continue;
+      }
+      const src = fileToUrl ? fileToUrl(file) : URL.createObjectURL(file);
+      await addSource(src, kind, file.name);
+    }
+  };
+  const addUrl = async () => {
+    const src = url.trim();
+    if (!src) return;
+    const kind = urlKind || videoAssetKindOf(src.replace(/[?#].*$/, ""));
+    if (!kind) {
+      setProblem(`Can't tell whether "${src}" is video, audio or an image; choose its kind.`);
+      return;
+    }
+    setProblem(null);
+    await addSource(src, kind, src.replace(/[?#].*$/, "").replace(/^.*[\\/]/, "") || src);
+    setUrl("");
+  };
+  const addToTimeline = (asset) => {
+    const edit = videoAssetDropEdit(project, asset.id);
+    if (!edit) {
+      setProblem(`There is no unlocked ${asset.kind === "audio" ? "audio" : "video"} track to put "${asset.name ?? asset.id}" on.`);
+      return;
+    }
+    setProblem(null);
+    const result = controller.apply(edit, `Add ${asset.name ?? asset.id}`);
+    if (result.ok) {
+      const added = result.outcomes[0]?.clip;
+      if (added) controller.select([added]);
+    }
+  };
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: `flex flex-col gap-2 rounded ${over ? "ring-2 ring-rose-500/60" : ""} ${className}`,
+      "data-media-bin": "",
+      onDragOver: (e) => {
+        if (!canEdit || !e.dataTransfer?.types?.includes("Files")) return;
+        e.preventDefault();
+        setOver(true);
+      },
+      onDragLeave: () => setOver(false),
+      onDrop: (e) => {
+        setOver(false);
+        if (!canEdit || !e.dataTransfer?.files?.length) return;
+        e.preventDefault();
+        void addFiles(e.dataTransfer.files);
+      },
+      children: [
+        /* @__PURE__ */ jsx5("div", { className: "text-xs font-medium", children: "Media" }),
+        project.assets.length ? /* @__PURE__ */ jsx5("ul", { className: "flex flex-col gap-1", "aria-label": "Media assets", children: project.assets.map((asset) => /* @__PURE__ */ jsxs4("li", { className: "flex items-center gap-2 text-xs", "data-asset": asset.id, children: [
+          /* @__PURE__ */ jsx5("span", { className: "rounded bg-muted px-1 text-[10px] uppercase text-muted-foreground", "data-asset-kind": "", children: asset.kind }),
+          /* @__PURE__ */ jsx5("span", { className: "min-w-0 flex-1 truncate", title: asset.src, children: asset.name ?? asset.id }),
+          asset.duration !== void 0 && /* @__PURE__ */ jsx5("span", { className: "tabular-nums text-muted-foreground", children: formatVideoSeconds3(asset.duration) }),
+          editable && /* @__PURE__ */ jsx5("button", { type: "button", className: btn2, disabled: !canEdit, onClick: () => addToTimeline(asset), "data-add-to-timeline": "", children: "Add to timeline" })
+        ] }, asset.id)) }) : /* @__PURE__ */ jsxs4("p", { className: "text-xs text-muted-foreground", children: [
+          "No media yet.",
+          editable ? " Choose or drop files, or add a URL." : ""
+        ] }),
+        editable && /* @__PURE__ */ jsxs4(Fragment4, { children: [
+          /* @__PURE__ */ jsxs4("label", { className: "flex flex-col gap-1 rounded border border-dashed border-border p-2 text-xs text-muted-foreground", children: [
+            "Choose or drop video, audio or image files",
+            /* @__PURE__ */ jsx5(
+              "input",
+              {
+                type: "file",
+                multiple: true,
+                accept: "video/*,audio/*,image/*",
+                disabled: !canEdit,
+                "aria-label": "Import media files",
+                "data-import-files": "",
+                onChange: (e) => {
+                  const files = e.currentTarget.files ? Array.from(e.currentTarget.files) : [];
+                  e.currentTarget.value = "";
+                  void addFiles(files);
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs4(
+            "form",
+            {
+              className: "flex items-center gap-1",
+              onSubmit: (e) => {
+                e.preventDefault();
+                void addUrl();
+              },
+              children: [
+                /* @__PURE__ */ jsx5(
+                  "input",
+                  {
+                    className: "min-w-0 flex-1 rounded border border-border bg-transparent px-1 py-0.5 text-xs",
+                    placeholder: "https://\u2026/clip.mp4",
+                    value: url,
+                    disabled: !canEdit,
+                    "aria-label": "Media URL",
+                    onChange: (e) => setUrl(e.target.value)
+                  }
+                ),
+                /* @__PURE__ */ jsxs4("select", { className: "rounded border border-border bg-transparent px-1 py-0.5 text-xs", value: urlKind, disabled: !canEdit, "aria-label": "Media kind", onChange: (e) => setUrlKind(e.target.value), children: [
+                  /* @__PURE__ */ jsx5("option", { value: "", children: "Auto" }),
+                  /* @__PURE__ */ jsx5("option", { value: "video", children: "Video" }),
+                  /* @__PURE__ */ jsx5("option", { value: "audio", children: "Audio" }),
+                  /* @__PURE__ */ jsx5("option", { value: "image", children: "Image" })
+                ] }),
+                /* @__PURE__ */ jsx5("button", { type: "submit", className: btn2, disabled: !canEdit || !url.trim(), "data-add-url": "", children: "Add" })
+              ]
+            }
+          )
+        ] }),
+        busy > 0 && /* @__PURE__ */ jsx5("p", { className: "text-xs text-muted-foreground", children: "Reading media\u2026" }),
+        problem && /* @__PURE__ */ jsx5("p", { className: "text-xs text-red-500", role: "alert", "data-media-error": "", children: problem })
+      ]
+    }
+  );
+}
+
+// src/video-editor/VideoEditor.tsx
+import { useEffect as useEffect4 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function VideoEditor({ controller: given, options, editable = true, pxPerSecond, onPxPerSecondChange, resolution, showIssues = true, className = "" }) {
+  const { controller, state } = useVideoEditor(given ?? options ?? {});
+  useEffect4(() => {
+    if (editable) return;
+    const was = controller.getState().readOnly;
+    controller.setReadOnly(true);
+    return () => controller.setReadOnly(was);
+  }, [controller, editable]);
+  const { issues } = state;
+  const issueList = showIssues && issues.length > 0 && /* @__PURE__ */ jsx6("ul", { className: "space-y-0.5 text-xs", "aria-label": "Video issues", "data-video-issues": "", children: issues.map((issue, i) => /* @__PURE__ */ jsx6("li", { className: issue.severity === "error" ? "text-red-500" : issue.severity === "warning" ? "text-amber-500" : "text-muted-foreground", "data-issue": issue.code, children: issue.message }, i)) });
+  return /* @__PURE__ */ jsxs5("div", { className: `flex flex-col gap-3 ${className}`, "data-video-editor": "", children: [
+    /* @__PURE__ */ jsxs5("div", { className: `grid gap-3 ${editable ? "lg:grid-cols-[16rem_minmax(0,1fr)_18rem]" : ""}`, children: [
+      editable && /* @__PURE__ */ jsx6(MediaBin, { controller, className: "min-w-0" }),
+      /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 flex-col gap-2", children: [
+        /* @__PURE__ */ jsx6(VideoPreview, { controller, resolution, className: "rounded-md border border-border" }),
+        /* @__PURE__ */ jsx6(VideoTransport, { controller, editable })
+      ] }),
+      editable && /* @__PURE__ */ jsx6(ClipInspector, { controller, className: "min-w-0" })
+    ] }),
+    /* @__PURE__ */ jsx6(VideoTimeline, { controller, editable, pxPerSecond, onPxPerSecondChange }),
+    issueList
+  ] });
+}
+export {
+  ClipInspector,
+  MediaBin,
+  VideoEditor,
+  VideoPreview,
+  VideoTimeline,
+  VideoTransport,
+  useVideoEditor,
+  useVideoEditorController,
+  useVideoEditorState,
+  useVideoEditorTools
+};
+//# sourceMappingURL=index.js.map