@pixerate/editor-react 0.77.0 → 0.78.0

package/dist/video-editor/index.d.cts

@@ -1,6 +1,7 @@
-import { VideoEditorController, VideoEditorState, VideoEditResult, VideoEditorOptions, VideoEditorToolProviderOptions, VideoPreviewOptions, VideoScopeKind, VideoWaveformMode, probeVideoMedia } from '@pixerate/editor/video-editor';
+import { VideoEditorController, VideoEditorState, VideoEditResult, VideoEditorOptions, VideoEditorToolProviderOptions, VideoEffectsToolProviderOptions, VideoPreviewOptions, VideoScopeKind, VideoWaveformMode, probeVideoMedia } from '@pixerate/editor/video-editor';
 import { ToolRegistry } from '@pixerate/editor/tools';
 import React__default from 'react';
+import { EffectProvider } from '@pixerate/editor/effects';
 
 /** A `VideoEditorController` created once for the component's lifetime (destroyed on unmount). */
 declare function useVideoEditorController(options?: VideoEditorOptions): VideoEditorController;
@@ -35,6 +36,13 @@ declare function useVideoEditor(controllerOrOptions?: VideoEditorController | Vi
  * `trim_video_clip`, …) in `registry` while mounted.
  */
 declare function useVideoEditorTools(registry: ToolRegistry | null | undefined, controller: VideoEditorController, options?: VideoEditorToolProviderOptions): void;
+/**
+ * Registers the video editor's effect tools (`search_effects`, `describe_effect`, `apply_effect`,
+ * `add_video_effect_clip`, `set_video_effect_transition`, …) in `registry` while mounted. They
+ * work once an effects provider is registered (see `useEffects`); before that the read tools say
+ * so and the write tools refuse.
+ */
+declare function useVideoEffectsTools(registry: ToolRegistry | null | undefined, controller: VideoEditorController, options?: VideoEffectsToolProviderOptions): void;
 
 interface VideoPreviewProps {
     controller: VideoEditorController;
@@ -163,6 +171,14 @@ interface VideoEditorProps {
     showTranscript?: boolean;
     /** Show colour scopes (histogram, luma waveform, vectorscope) of the preview under it (default false). */
     showScopes?: boolean;
+    /**
+     * An effects provider (see `@pixerate/editor/effects`), registered with the controller while
+     * mounted: clip effects, effect transitions and effect clips, with the effects panel. Optional:
+     * without one the editor is as before (effects in a project show as placeholders).
+     */
+    effects?: EffectProvider | null;
+    /** Show the effects panel (default: when a provider is given or the project has effects). */
+    showEffects?: boolean;
     className?: string;
 }
 /**
@@ -170,6 +186,18 @@ interface VideoEditorProps {
  * transport, the timeline and the clip inspector, with the project's issues listed under the
  * timeline. Every edit is one undo step; the controller's agent tools edit the same project.
  */
-declare function VideoEditor({ controller: given, options, editable, pxPerSecond, onPxPerSecondChange, resolution, showIssues, showTranscript, showScopes, className }: VideoEditorProps): React__default.JSX.Element;
+declare function VideoEditor({ controller: given, options, editable, pxPerSecond, onPxPerSecondChange, resolution, showIssues, showTranscript, showScopes, effects, showEffects, className }: VideoEditorProps): React__default.JSX.Element;
+
+interface VideoEffectsPanelProps {
+    controller: VideoEditorController;
+    className?: string;
+}
+/**
+ * Provider effects for the selected clip: its effect stack (add, turn on and off, reorder, change
+ * controls, remove), its effect transition, and an effect clip's own controls; plus adding effect
+ * clips at the playhead. Every change is one undo step (a slider drag is one). Without a provider it
+ * lists what the project holds and says why nothing can be added.
+ */
+declare function VideoEffectsPanel({ controller, className }: VideoEffectsPanelProps): React__default.JSX.Element;
 
-export { ClipInspector, type ClipInspectorProps, MediaBin, type MediaBinProps, TranscriptPanel, type TranscriptPanelProps, type UseVideoEditorResult, VideoEditor, type VideoEditorProps, VideoPreview, type VideoPreviewProps, VideoScopes, type VideoScopesProps, VideoTimeline, type VideoTimelineProps, VideoTransport, type VideoTransportProps, useVideoEditor, useVideoEditorController, useVideoEditorState, useVideoEditorTools };
+export { ClipInspector, type ClipInspectorProps, MediaBin, type MediaBinProps, TranscriptPanel, type TranscriptPanelProps, type UseVideoEditorResult, VideoEditor, type VideoEditorProps, VideoEffectsPanel, type VideoEffectsPanelProps, VideoPreview, type VideoPreviewProps, VideoScopes, type VideoScopesProps, VideoTimeline, type VideoTimelineProps, VideoTransport, type VideoTransportProps, useVideoEditor, useVideoEditorController, useVideoEditorState, useVideoEditorTools, useVideoEffectsTools };

package/dist/video-editor/index.d.ts

@@ -1,6 +1,7 @@
-import { VideoEditorController, VideoEditorState, VideoEditResult, VideoEditorOptions, VideoEditorToolProviderOptions, VideoPreviewOptions, VideoScopeKind, VideoWaveformMode, probeVideoMedia } from '@pixerate/editor/video-editor';
+import { VideoEditorController, VideoEditorState, VideoEditResult, VideoEditorOptions, VideoEditorToolProviderOptions, VideoEffectsToolProviderOptions, VideoPreviewOptions, VideoScopeKind, VideoWaveformMode, probeVideoMedia } from '@pixerate/editor/video-editor';
 import { ToolRegistry } from '@pixerate/editor/tools';
 import React__default from 'react';
+import { EffectProvider } from '@pixerate/editor/effects';
 
 /** A `VideoEditorController` created once for the component's lifetime (destroyed on unmount). */
 declare function useVideoEditorController(options?: VideoEditorOptions): VideoEditorController;
@@ -35,6 +36,13 @@ declare function useVideoEditor(controllerOrOptions?: VideoEditorController | Vi
  * `trim_video_clip`, …) in `registry` while mounted.
  */
 declare function useVideoEditorTools(registry: ToolRegistry | null | undefined, controller: VideoEditorController, options?: VideoEditorToolProviderOptions): void;
+/**
+ * Registers the video editor's effect tools (`search_effects`, `describe_effect`, `apply_effect`,
+ * `add_video_effect_clip`, `set_video_effect_transition`, …) in `registry` while mounted. They
+ * work once an effects provider is registered (see `useEffects`); before that the read tools say
+ * so and the write tools refuse.
+ */
+declare function useVideoEffectsTools(registry: ToolRegistry | null | undefined, controller: VideoEditorController, options?: VideoEffectsToolProviderOptions): void;
 
 interface VideoPreviewProps {
     controller: VideoEditorController;
@@ -163,6 +171,14 @@ interface VideoEditorProps {
     showTranscript?: boolean;
     /** Show colour scopes (histogram, luma waveform, vectorscope) of the preview under it (default false). */
     showScopes?: boolean;
+    /**
+     * An effects provider (see `@pixerate/editor/effects`), registered with the controller while
+     * mounted: clip effects, effect transitions and effect clips, with the effects panel. Optional:
+     * without one the editor is as before (effects in a project show as placeholders).
+     */
+    effects?: EffectProvider | null;
+    /** Show the effects panel (default: when a provider is given or the project has effects). */
+    showEffects?: boolean;
     className?: string;
 }
 /**
@@ -170,6 +186,18 @@ interface VideoEditorProps {
  * transport, the timeline and the clip inspector, with the project's issues listed under the
  * timeline. Every edit is one undo step; the controller's agent tools edit the same project.
  */
-declare function VideoEditor({ controller: given, options, editable, pxPerSecond, onPxPerSecondChange, resolution, showIssues, showTranscript, showScopes, className }: VideoEditorProps): React__default.JSX.Element;
+declare function VideoEditor({ controller: given, options, editable, pxPerSecond, onPxPerSecondChange, resolution, showIssues, showTranscript, showScopes, effects, showEffects, className }: VideoEditorProps): React__default.JSX.Element;
+
+interface VideoEffectsPanelProps {
+    controller: VideoEditorController;
+    className?: string;
+}
+/**
+ * Provider effects for the selected clip: its effect stack (add, turn on and off, reorder, change
+ * controls, remove), its effect transition, and an effect clip's own controls; plus adding effect
+ * clips at the playhead. Every change is one undo step (a slider drag is one). Without a provider it
+ * lists what the project holds and says why nothing can be added.
+ */
+declare function VideoEffectsPanel({ controller, className }: VideoEffectsPanelProps): React__default.JSX.Element;
 
-export { ClipInspector, type ClipInspectorProps, MediaBin, type MediaBinProps, TranscriptPanel, type TranscriptPanelProps, type UseVideoEditorResult, VideoEditor, type VideoEditorProps, VideoPreview, type VideoPreviewProps, VideoScopes, type VideoScopesProps, VideoTimeline, type VideoTimelineProps, VideoTransport, type VideoTransportProps, useVideoEditor, useVideoEditorController, useVideoEditorState, useVideoEditorTools };
+export { ClipInspector, type ClipInspectorProps, MediaBin, type MediaBinProps, TranscriptPanel, type TranscriptPanelProps, type UseVideoEditorResult, VideoEditor, type VideoEditorProps, VideoEffectsPanel, type VideoEffectsPanelProps, VideoPreview, type VideoPreviewProps, VideoScopes, type VideoScopesProps, VideoTimeline, type VideoTimelineProps, VideoTransport, type VideoTransportProps, useVideoEditor, useVideoEditorController, useVideoEditorState, useVideoEditorTools, useVideoEffectsTools };

package/dist/video-editor/index.js

@@ -1,8 +1,17 @@
+import {
+  EffectParameters,
+  EffectsBrowser,
+  useEffectDescription,
+  useEffects
+} from "../chunk-FX3EREF5.js";
+import "../chunk-ZQZAKUUM.js";
+
 // src/video-editor/useVideoEditor.ts
 import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
 import {
   VideoEditorController,
-  createVideoEditorToolProvider
+  createVideoEditorToolProvider,
+  createVideoEffectsToolProvider
 } from "@pixerate/editor/video-editor";
 function useVideoEditorController(options = {}) {
   const ref = useRef(null);
@@ -47,6 +56,13 @@ function useVideoEditorTools(registry, controller, options = {}) {
     return registry.register(createVideoEditorToolProvider(controller, { id, namespace, readOnly, rasterize, framePixels, framePixelsTimeout }));
   }, [registry, controller, id, namespace, readOnly, rasterize, framePixels, framePixelsTimeout]);
 }
+function useVideoEffectsTools(registry, controller, options = {}) {
+  const { id, namespace, readOnly } = options;
+  useEffect(() => {
+    if (!registry) return;
+    return registry.register(createVideoEffectsToolProvider(controller, { id, namespace, readOnly }));
+  }, [registry, controller, id, namespace, readOnly]);
+}
 
 // src/video-editor/VideoPreview.tsx
 import { useEffect as useEffect2, useRef as useRef2 } from "react";
@@ -823,6 +839,7 @@ function ClipInspector({ controller, className = "" }) {
       ] }) }),
       /* @__PURE__ */ jsx5(Row, { label: "Muted", name: "muted", children: /* @__PURE__ */ jsx5("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 === "effect" && /* @__PURE__ */ jsx5(Row, { label: "Effect", name: "effect", children: /* @__PURE__ */ jsx5("span", { className: "truncate text-xs", title: "Change its controls in the Effects panel", children: clip.name ?? clip.effect }) }),
     clip.type === "color" && /* @__PURE__ */ jsx5(Row, { label: "Colour", name: "color", children: /* @__PURE__ */ jsx5(Commit, { value: clip.color, "aria-label": "Colour", disabled, onCommit: (raw) => raw.trim() && set("color", raw.trim(), "Change colour") }) }),
     /* @__PURE__ */ jsx5(Row, { label: "Transition in", name: "transition", children: /* @__PURE__ */ jsxs4(
       "select",
@@ -833,14 +850,15 @@ function ClipInspector({ controller, className = "" }) {
         "aria-label": "Transition",
         onChange: (e) => {
           const type = e.target.value;
+          const { effect: _effect, ...rest } = transition ?? { duration: DEFAULT_TRANSITION };
           controller.apply(
-            { op: "set_transition", clip: clip.id, transition: type ? { ...transition, type, duration: transition?.duration ?? DEFAULT_TRANSITION } : null },
+            { op: "set_transition", clip: clip.id, transition: type ? { ...rest, type, duration: transition?.duration ?? DEFAULT_TRANSITION } : null },
             type ? "Set transition" : "Remove transition"
           );
         },
         children: [
           /* @__PURE__ */ jsx5("option", { value: "", children: "None" }),
-          VIDEO_TRANSITION_TYPES.map((t) => /* @__PURE__ */ jsx5("option", { value: t, children: VIDEO_TRANSITION_LABELS[t] }, t))
+          VIDEO_TRANSITION_TYPES.filter((t) => t !== "effect" || transition?.type === "effect").map((t) => /* @__PURE__ */ jsx5("option", { value: t, children: t === "effect" ? `Effect: ${transition?.effect?.name ?? transition?.effect?.effect}` : VIDEO_TRANSITION_LABELS[t] }, t))
         ]
       }
     ) }),
@@ -1155,9 +1173,153 @@ function TranscriptPanel({ controller, track, editable = true, className = "" })
 
 // src/video-editor/VideoEditor.tsx
 import { useEffect as useEffect5 } from "react";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-function VideoEditor({ controller: given, options, editable = true, pxPerSecond, onPxPerSecondChange, resolution, showIssues = true, showTranscript = true, showScopes = false, className = "" }) {
+
+// src/video-editor/VideoEffectsPanel.tsx
+import { useState as useState6 } from "react";
+import {
+  findVideoClip as findVideoClip2,
+  isVideoKeyframes
+} from "@pixerate/editor/video-editor";
+import { Fragment as Fragment6, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var btn5 = "rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40";
+var keyedOf = (values) => new Set(Object.entries(values ?? {}).filter(([, v]) => isVideoKeyframes(v)).map(([k]) => k));
+function EffectControls({
+  provider,
+  effect,
+  name,
+  values,
+  disabled,
+  onChange,
+  onPreset
+}) {
+  const { description, error } = useEffectDescription(provider, effect);
+  if (!provider) return /* @__PURE__ */ jsxs7("p", { className: "text-[11px] text-muted-foreground", children: [
+    'No effects provider: "',
+    name ?? effect,
+    '" is kept and shown as a placeholder.'
+  ] });
+  if (error) return /* @__PURE__ */ jsx8("p", { className: "text-[11px] text-amber-500", children: error });
+  if (!description) return /* @__PURE__ */ jsx8("p", { className: "text-[11px] text-muted-foreground", children: "Loading\u2026" });
+  return /* @__PURE__ */ jsx8(EffectParameters, { description, values: values ?? {}, keyframed: keyedOf(values), disabled, onChange, onReset: (k) => onChange(k, description.defaults[k], null), onPreset });
+}
+function VideoEffectsPanel({ controller, className = "" }) {
+  const state = useVideoEditorState(controller);
+  const provider = state.effectsProvider;
+  const [browse, setBrowse] = useState6(null);
+  const [message, setMessage] = useState6(null);
+  const [open, setOpen] = useState6(null);
+  const selected = state.selection[0];
+  const at = selected ? findVideoClip2(state.project, selected) : null;
+  const clip = at?.clip ?? null;
+  const disabled = state.readOnly;
+  const report = (r) => void Promise.resolve(r).then((x) => setMessage(x.ok ? null : x.error));
+  const addEffectClip = (effect) => {
+    const track = at && at.track.kind === "video" ? at.track.id : state.project.tracks.find((t) => t.kind === "video")?.id;
+    if (!track) return setMessage("Add a video track first.");
+    report(controller.addEffectClip(track, effect, { start: Math.round(state.time), mode: "overwrite" }).then((r) => (r.ok && r.clip && controller.select([r.clip]), r)));
+  };
+  return /* @__PURE__ */ jsxs7("section", { className: `flex flex-col gap-2 rounded-md border border-border p-2 text-xs ${className}`, "aria-label": "Effects", "data-video-effects": "", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx8("h3", { className: "flex-1 font-semibold", children: "Effects" }),
+      /* @__PURE__ */ jsx8("button", { type: "button", className: btn5, disabled: disabled || !provider, onClick: () => setBrowse(browse === "generator" ? null : "generator"), "aria-pressed": browse === "generator", children: "Add effect clip" })
+    ] }),
+    !provider && /* @__PURE__ */ jsx8("p", { className: "text-[11px] text-muted-foreground", children: "No effects provider is registered. Effects in the project are kept and drawn as placeholders." }),
+    browse === "generator" && /* @__PURE__ */ jsx8(EffectsBrowser, { provider, uses: ["generator", "title", "overlay"], title: "Generators and titles", onPick: (e) => (setBrowse(null), addEffectClip(e.id)) }),
+    !clip && /* @__PURE__ */ jsx8("p", { className: "text-[11px] text-muted-foreground", children: "Select a clip to see its effects." }),
+    clip && /* @__PURE__ */ jsxs7(Fragment6, { children: [
+      clip.type === "effect" && /* @__PURE__ */ jsxs7("div", { className: "space-y-1", "data-effect-part": "generator", children: [
+        /* @__PURE__ */ jsx8("div", { className: "font-medium", children: clip.name ?? clip.effect }),
+        /* @__PURE__ */ jsx8(
+          EffectControls,
+          {
+            provider,
+            effect: clip.effect,
+            name: clip.name,
+            values: clip.values,
+            disabled,
+            onChange: (k, v, gesture) => report(controller.updateEffectValues(clip.id, "generator", { [k]: v }, { merge: gesture ?? void 0 })),
+            onPreset: (values) => report(controller.updateEffectValues(clip.id, "generator", values))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs7("div", { className: "space-y-1", "data-effect-part": "transition", children: [
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx8("span", { className: "flex-1 font-medium", children: "Transition in" }),
+          clip.transition?.type === "effect" ? /* @__PURE__ */ jsx8("button", { type: "button", className: btn5, disabled, onClick: () => report(controller.apply({ op: "set_transition", clip: clip.id, transition: null }, "Remove transition")), children: "Remove" }) : /* @__PURE__ */ jsx8("button", { type: "button", className: btn5, disabled: disabled || !provider, "aria-pressed": browse === "transition", onClick: () => setBrowse(browse === "transition" ? null : "transition"), children: "Effect transition\u2026" })
+        ] }),
+        browse === "transition" && /* @__PURE__ */ jsx8(EffectsBrowser, { provider, uses: ["transition"], title: "Transitions", onPick: (e) => (setBrowse(null), report(controller.setEffectTransition(clip.id, e.id))) }),
+        clip.transition?.type === "effect" && clip.transition.effect && /* @__PURE__ */ jsx8(
+          EffectControls,
+          {
+            provider,
+            effect: clip.transition.effect.effect,
+            name: clip.transition.effect.name,
+            values: clip.transition.effect.values,
+            disabled,
+            onChange: (k, v, gesture) => report(controller.updateEffectValues(clip.id, "transition", { [k]: v }, { merge: gesture ?? void 0 })),
+            onPreset: (values) => report(controller.updateEffectValues(clip.id, "transition", values))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs7("div", { className: "space-y-1", "data-effect-part": "stack", children: [
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx8("span", { className: "flex-1 font-medium", children: "On this clip" }),
+          /* @__PURE__ */ jsx8("button", { type: "button", className: btn5, disabled: disabled || !provider, "aria-pressed": browse === "clip", onClick: () => setBrowse(browse === "clip" ? null : "clip"), children: "Add effect\u2026" })
+        ] }),
+        browse === "clip" && /* @__PURE__ */ jsx8(EffectsBrowser, { provider, uses: ["filter", "overlay"], title: "Filters and overlays", onPick: (e) => (setBrowse(null), report(controller.applyClipEffect(clip.id, e.id))) }),
+        /* @__PURE__ */ jsx8("ol", { className: "space-y-1", children: (clip.effects ?? []).map((e, i, all) => /* @__PURE__ */ jsxs7("li", { className: "rounded border border-border p-1", "data-clip-effect": e.id, children: [
+          /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx8("input", { type: "checkbox", checked: e.enabled !== false, disabled, "aria-label": `${e.name ?? e.effect} on`, onChange: (ev) => report(controller.updateClipEffect(clip.id, e.id, { enabled: ev.currentTarget.checked })) }),
+            /* @__PURE__ */ jsx8("button", { type: "button", className: "min-w-0 flex-1 truncate text-left", "aria-expanded": open === e.id, onClick: () => setOpen(open === e.id ? null : e.id), children: e.name ?? e.effect }),
+            /* @__PURE__ */ jsx8("button", { type: "button", className: btn5, disabled: disabled || i === 0, "aria-label": "Move up", onClick: () => report(controller.updateClipEffect(clip.id, e.id, { index: i - 1 })), children: "\u2191" }),
+            /* @__PURE__ */ jsx8("button", { type: "button", className: btn5, disabled: disabled || i === all.length - 1, "aria-label": "Move down", onClick: () => report(controller.updateClipEffect(clip.id, e.id, { index: i + 1 })), children: "\u2193" }),
+            /* @__PURE__ */ jsx8("button", { type: "button", className: btn5, disabled, "aria-label": `Remove ${e.name ?? e.effect}`, onClick: () => report(controller.removeClipEffect(clip.id, e.id)), children: "\u2715" })
+          ] }),
+          open === e.id && /* @__PURE__ */ jsxs7("div", { className: "mt-1 space-y-2", children: [
+            /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx8("span", { className: "w-14 text-[11px]", children: "Opacity" }),
+              /* @__PURE__ */ jsx8(
+                "input",
+                {
+                  type: "range",
+                  min: 0,
+                  max: 1,
+                  step: 0.01,
+                  className: "flex-1",
+                  disabled: disabled || isVideoKeyframes(e.opacity),
+                  value: typeof e.opacity === "number" ? e.opacity : 1,
+                  "aria-label": `${e.name ?? e.effect} opacity`,
+                  onChange: (ev) => report(controller.updateClipEffect(clip.id, e.id, { opacity: Number(ev.currentTarget.value) }, { merge: `opacity:${clip.id}:${e.id}` }))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx8(
+              EffectControls,
+              {
+                provider,
+                effect: e.effect,
+                name: e.name,
+                values: e.values,
+                disabled,
+                onChange: (k, v, gesture) => report(controller.updateClipEffect(clip.id, e.id, { values: { [k]: v } }, { merge: gesture ?? void 0 })),
+                onPreset: (values) => report(controller.updateClipEffect(clip.id, e.id, { values }))
+              }
+            )
+          ] })
+        ] }, e.id)) }),
+        !clip.effects?.length && /* @__PURE__ */ jsx8("p", { className: "text-[11px] text-muted-foreground", children: "No effects on this clip." })
+      ] })
+    ] }),
+    message && /* @__PURE__ */ jsx8("p", { role: "alert", className: "text-[11px] text-destructive", children: message })
+  ] });
+}
+
+// src/video-editor/VideoEditor.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function VideoEditor({ controller: given, options, editable = true, pxPerSecond, onPxPerSecondChange, resolution, showIssues = true, showTranscript = true, showScopes = false, effects, showEffects, className = "" }) {
   const { controller, state } = useVideoEditor(given ?? options ?? {});
+  useEffects(controller, effects);
+  const effectsShown = showEffects ?? !!(state.effectsProvider || state.project.tracks.some((t) => t.clips.some((c) => c.type === "effect" || c.effects?.length || c.transition?.type === "effect")));
   useEffect5(() => {
     if (editable) return;
     const was = controller.getState().readOnly;
@@ -1165,19 +1327,22 @@ function VideoEditor({ controller: given, options, editable = true, pxPerSecond,
     return () => controller.setReadOnly(was);
   }, [controller, editable]);
   const { issues } = state;
-  const issueList = showIssues && issues.length > 0 && /* @__PURE__ */ jsx8("ul", { className: "space-y-0.5 text-xs", "aria-label": "Video issues", "data-video-issues": "", children: issues.map((issue, i) => /* @__PURE__ */ jsx8("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__ */ jsxs7("div", { className: `flex flex-col gap-3 ${className}`, "data-video-editor": "", children: [
-    /* @__PURE__ */ jsxs7("div", { className: `grid gap-3 ${editable ? "lg:grid-cols-[16rem_minmax(0,1fr)_18rem]" : ""}`, children: [
-      editable && /* @__PURE__ */ jsx8(MediaBin, { controller, className: "min-w-0" }),
-      /* @__PURE__ */ jsxs7("div", { className: "flex min-w-0 flex-col gap-2", children: [
-        /* @__PURE__ */ jsx8(VideoPreview, { controller, resolution, className: "rounded-md border border-border" }),
-        /* @__PURE__ */ jsx8(VideoTransport, { controller, editable }),
-        showScopes && /* @__PURE__ */ jsx8(VideoScopes, { controller })
+  const issueList = showIssues && issues.length > 0 && /* @__PURE__ */ jsx9("ul", { className: "space-y-0.5 text-xs", "aria-label": "Video issues", "data-video-issues": "", children: issues.map((issue, i) => /* @__PURE__ */ jsx9("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__ */ jsxs8("div", { className: `flex flex-col gap-3 ${className}`, "data-video-editor": "", children: [
+    /* @__PURE__ */ jsxs8("div", { className: `grid gap-3 ${editable ? "lg:grid-cols-[16rem_minmax(0,1fr)_18rem]" : ""}`, children: [
+      editable && /* @__PURE__ */ jsx9(MediaBin, { controller, className: "min-w-0" }),
+      /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 flex-col gap-2", children: [
+        /* @__PURE__ */ jsx9(VideoPreview, { controller, resolution, className: "rounded-md border border-border" }),
+        /* @__PURE__ */ jsx9(VideoTransport, { controller, editable }),
+        showScopes && /* @__PURE__ */ jsx9(VideoScopes, { controller })
       ] }),
-      editable && /* @__PURE__ */ jsx8(ClipInspector, { controller, className: "min-w-0" })
+      editable && /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 flex-col gap-3", children: [
+        /* @__PURE__ */ jsx9(ClipInspector, { controller, className: "min-w-0" }),
+        effectsShown && /* @__PURE__ */ jsx9(VideoEffectsPanel, { controller, className: "min-w-0" })
+      ] })
     ] }),
-    /* @__PURE__ */ jsx8(VideoTimeline, { controller, editable, pxPerSecond, onPxPerSecondChange }),
-    showTranscript && /* @__PURE__ */ jsx8(TranscriptPanel, { controller, editable }),
+    /* @__PURE__ */ jsx9(VideoTimeline, { controller, editable, pxPerSecond, onPxPerSecondChange }),
+    showTranscript && /* @__PURE__ */ jsx9(TranscriptPanel, { controller, editable }),
     issueList
   ] });
 }
@@ -1186,6 +1351,7 @@ export {
   MediaBin,
   TranscriptPanel,
   VideoEditor,
+  VideoEffectsPanel,
   VideoPreview,
   VideoScopes,
   VideoTimeline,
@@ -1193,6 +1359,7 @@ export {
   useVideoEditor,
   useVideoEditorController,
   useVideoEditorState,
-  useVideoEditorTools
+  useVideoEditorTools,
+  useVideoEffectsTools
 };
 //# sourceMappingURL=index.js.map