@pixerate/editor-react 0.77.0 → 0.78.1

package/dist/video-editor/index.cjs

@@ -34,6 +34,7 @@ __export(video_editor_exports, {
   MediaBin: () => MediaBin,
   TranscriptPanel: () => TranscriptPanel,
   VideoEditor: () => VideoEditor,
+  VideoEffectsPanel: () => VideoEffectsPanel,
   VideoPreview: () => VideoPreview,
   VideoScopes: () => VideoScopes,
   VideoTimeline: () => VideoTimeline,
@@ -41,7 +42,8 @@ __export(video_editor_exports, {
   useVideoEditor: () => useVideoEditor,
   useVideoEditorController: () => useVideoEditorController,
   useVideoEditorState: () => useVideoEditorState,
-  useVideoEditorTools: () => useVideoEditorTools
+  useVideoEditorTools: () => useVideoEditorTools,
+  useVideoEffectsTools: () => useVideoEffectsTools
 });
 module.exports = __toCommonJS(video_editor_exports);
 
@@ -91,6 +93,13 @@ function useVideoEditorTools(registry, controller, options = {}) {
     return registry.register((0, import_video_editor.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;
+  (0, import_react.useEffect)(() => {
+    if (!registry) return;
+    return registry.register((0, import_video_editor.createVideoEffectsToolProvider)(controller, { id, namespace, readOnly }));
+  }, [registry, controller, id, namespace, readOnly]);
+}
 
 // src/video-editor/VideoPreview.tsx
 var import_react2 = require("react");
@@ -830,6 +839,7 @@ function ClipInspector({ controller, className = "" }) {
       ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "Muted", name: "muted", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "Effect", name: "effect", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "truncate text-xs", title: "Change its controls in the Effects panel", children: clip.name ?? clip.effect }) }),
     clip.type === "color" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "Colour", name: "color", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Commit, { value: clip.color, "aria-label": "Colour", disabled, onCommit: (raw) => raw.trim() && set("color", raw.trim(), "Change colour") }) }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "Transition in", name: "transition", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "select",
@@ -840,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__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: "None" }),
-          import_video_editor6.VIDEO_TRANSITION_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: t, children: import_video_editor6.VIDEO_TRANSITION_LABELS[t] }, t))
+          import_video_editor6.VIDEO_TRANSITION_TYPES.filter((t) => t !== "effect" || transition?.type === "effect").map((t) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: t, children: t === "effect" ? `Effect: ${transition?.effect?.name ?? transition?.effect?.effect}` : import_video_editor6.VIDEO_TRANSITION_LABELS[t] }, t))
         ]
       }
     ) }),
@@ -1148,30 +1159,732 @@ function TranscriptPanel({ controller, track, editable = true, className = "" })
 }
 
 // src/video-editor/VideoEditor.tsx
+var import_react14 = require("react");
+
+// src/effects/useEffects.ts
 var import_react8 = require("react");
+function useEffects(host, provider) {
+  (0, import_react8.useEffect)(() => {
+    if (!host || !provider) return;
+    return host.useEffects(provider);
+  }, [host, provider]);
+}
+function useEffectDescription(provider, effect) {
+  const [state, setState] = (0, import_react8.useState)({ key: "", description: null, error: null });
+  const key = provider && effect ? `${provider.id}:${effect}` : "";
+  (0, import_react8.useEffect)(() => {
+    if (!provider || !effect) return;
+    let live = true;
+    Promise.resolve().then(() => provider.describe(effect)).then(
+      (description) => live && setState({ key, description, error: null }),
+      (e) => live && setState({ key, description: null, error: e instanceof Error ? e.message : String(e) })
+    );
+    return () => {
+      live = false;
+    };
+  }, [provider, effect, key]);
+  return state.key === key ? { description: state.description, error: state.error } : { description: null, error: null };
+}
+
+// src/effects/EffectThumbnail.tsx
+var import_react9 = require("react");
+var import_effects = require("@pixerate/editor/effects");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-function VideoEditor({ controller: given, options, editable = true, pxPerSecond, onPxPerSecondChange, resolution, showIssues = true, showTranscript = true, showScopes = false, className = "" }) {
+function EffectThumbnail({ provider, effect, width = 96, height = 54, className = "" }) {
+  const ref = (0, import_react9.useRef)(null);
+  const [failed, setFailed] = (0, import_react9.useState)(effect.kind === "motion");
+  (0, import_react9.useEffect)(() => {
+    if (effect.kind === "motion") return;
+    let live = true;
+    (0, import_effects.renderEffectThumbnail)(provider, effect, { width, height }).then(
+      (pixels) => {
+        const ctx = live ? ref.current?.getContext("2d") : null;
+        if (!ctx || typeof ImageData === "undefined") return;
+        ctx.putImageData(new ImageData(new Uint8ClampedArray(pixels.data), pixels.width, pixels.height), 0, 0);
+      },
+      () => live && setFailed(true)
+    );
+    return () => {
+      live = false;
+    };
+  }, [provider, effect, width, height]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      className: `relative overflow-hidden rounded border border-border bg-[repeating-conic-gradient(#8884_0_25%,transparent_0_50%)] bg-[length:12px_12px] ${className}`,
+      style: { aspectRatio: `${width} / ${height}` },
+      "data-effect-thumbnail": effect.id,
+      children: failed ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "absolute inset-0 flex items-center justify-center text-[10px] text-muted-foreground", children: effect.kind === "motion" ? "Motion" : "No preview" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("canvas", { ref, width, height, className: "h-full w-full", "aria-hidden": "true" })
+    }
+  );
+}
+
+// src/effects/EffectsBrowser.tsx
+var import_react10 = require("react");
+var import_effects2 = require("@pixerate/editor/effects");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function EffectsBrowser({ provider, uses, onPick, thumbnails = true, title = "Effects", className = "" }) {
+  const [all, setAll] = (0, import_react10.useState)([]);
+  const [query, setQuery] = (0, import_react10.useState)("");
+  const [category, setCategory] = (0, import_react10.useState)("");
+  const [use, setUse] = (0, import_react10.useState)("");
+  const [error, setError] = (0, import_react10.useState)(null);
+  (0, import_react10.useEffect)(() => {
+    if (!provider) return setAll([]);
+    let live = true;
+    Promise.resolve().then(() => provider.list()).then(
+      (list) => live && (setAll(list), setError(null)),
+      (e) => live && setError(e instanceof Error ? e.message : String(e))
+    );
+    return () => {
+      live = false;
+    };
+  }, [provider]);
+  const [found, setFound] = (0, import_react10.useState)([]);
+  (0, import_react10.useEffect)(() => {
+    if (!provider) return setFound([]);
+    let live = true;
+    Promise.resolve().then(() => provider.search(query, { ...category ? { category } : {}, ...use ? { use } : {} })).then((list) => live && setFound(list), () => live && setFound([]));
+    return () => {
+      live = false;
+    };
+  }, [provider, query, category, use]);
+  const allowed = (e) => (uses ? e.kind !== "motion" || uses.includes("motion") : e.kind !== "motion") && (!uses || e.uses.some((u) => uses.includes(u)));
+  const categories = (0, import_react10.useMemo)(() => [...new Set(all.filter(allowed).map((e) => e.category))], [all, uses]);
+  const shown = found.filter(allowed);
+  if (!provider)
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `rounded-md border border-dashed border-border p-3 text-xs text-muted-foreground ${className}`, "data-effects-browser": "", "data-effects-unavailable": "", children: "No effects provider is registered, so effects cannot be added. Effects already in the document are kept." });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { className: `flex flex-col gap-2 ${className}`, "data-effects-browser": "", "aria-label": "Effects browser", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "text-xs font-semibold", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "input",
+        {
+          type: "search",
+          className: "min-w-0 flex-1 rounded border border-border bg-transparent px-1.5 py-0.5 text-xs",
+          placeholder: "Search effects",
+          "aria-label": "Search effects",
+          value: query,
+          onChange: (e) => setQuery(e.currentTarget.value)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("select", { className: "rounded border border-border bg-transparent px-1 py-0.5 text-xs", "aria-label": "Category", value: category, onChange: (e) => setCategory(e.currentTarget.value), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "", children: "All categories" }),
+        categories.map((c) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: c, children: c }, c))
+      ] }),
+      uses && uses.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("select", { className: "rounded border border-border bg-transparent px-1 py-0.5 text-xs", "aria-label": "Use", value: use, onChange: (e) => setUse(e.currentTarget.value), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "", children: "Any use" }),
+        uses.map((u) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: u, children: import_effects2.EFFECT_USE_LABELS[u] }, u))
+      ] })
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { role: "alert", className: "text-[11px] text-destructive", children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { className: "grid max-h-96 grid-cols-[repeat(auto-fill,minmax(6.5rem,1fr))] gap-1.5 overflow-y-auto", role: "list", children: shown.map((e) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "flex w-full flex-col gap-1 rounded border border-transparent p-1 text-left hover:border-border focus-visible:border-border",
+        title: e.description ?? e.name,
+        "data-effect-id": e.id,
+        onClick: () => onPick(e),
+        children: [
+          thumbnails && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EffectThumbnail, { provider, effect: e }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "truncate text-[11px] font-medium", children: e.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "truncate text-[10px] text-muted-foreground", children: e.uses.map((u) => import_effects2.EFFECT_USE_LABELS[u]).join(" \xB7 ") })
+        ]
+      }
+    ) }, e.id)) }),
+    !shown.length && !error && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "No effects match." })
+  ] });
+}
+
+// src/effects/EffectParameters.tsx
+var import_react12 = __toESM(require("react"), 1);
+var import_effects3 = require("@pixerate/editor/effects");
+var import_parameters2 = require("@pixerate/editor/parameters");
+
+// src/parameters/fields.tsx
+var import_react11 = require("react");
+var import_parameters = require("@pixerate/editor/parameters");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var parameterInputClass = "h-7 w-full min-w-0 rounded-md border border-input bg-background px-2 text-xs text-foreground tabular-nums focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50";
+var parameterButtonClass = "inline-flex h-7 items-center justify-center gap-1 rounded-md border border-input bg-background px-2 text-xs text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50";
+var rangeClass = "h-4 w-full min-w-0 flex-1 cursor-pointer accent-primary disabled:cursor-not-allowed disabled:opacity-50";
+function ParameterCommitInput({ value, onCommit, multiline, className, onKeyDown, ...rest }) {
+  const commit = (el) => {
+    if (el.value !== value) onCommit(el.value, el);
+  };
+  const keyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    if (e.key === "Enter" && (!multiline || e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      commit(e.currentTarget);
+    }
+    if (e.key === "Escape") e.currentTarget.value = value;
+  };
+  const props = {
+    defaultValue: value,
+    className: className ?? parameterInputClass,
+    onBlur: (e) => commit(e.currentTarget),
+    onKeyDown: keyDown,
+    ...rest
+  };
+  return multiline ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("textarea", { ...props, className: `${props.className} h-auto min-h-[3.5rem] py-1` }, value) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("input", { type: "text", ...props }, value);
+}
+var plainNumber = (field2, value) => (0, import_parameters.formatParameterNumber)({ ...field2, unit: void 0 }, value);
+function ParameterNumberInput({
+  field: field2,
+  value,
+  onChange,
+  disabled,
+  id,
+  "aria-label": ariaLabel
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative min-w-0 flex-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      ParameterCommitInput,
+      {
+        id,
+        inputMode: "decimal",
+        "aria-label": ariaLabel ?? (0, import_parameters.parameterLabel)(field2),
+        value: plainNumber(field2, value),
+        disabled: disabled || field2.readOnly,
+        className: `${parameterInputClass} ${field2.unit ? "pr-6" : ""}`,
+        onCommit: (text, input) => {
+          const n = (0, import_parameters.parseParameterNumberInput)(field2, text);
+          if (n === null || n === value) input.value = plainNumber(field2, value);
+          else onChange(n);
+        },
+        onKeyDown: (e) => {
+          if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+          e.preventDefault();
+          const step = (0, import_parameters.parameterStep)(field2) * (e.shiftKey ? 10 : 1);
+          onChange((0, import_parameters.clampParameterNumber)(field2, value + (e.key === "ArrowUp" ? step : -step)));
+        }
+      }
+    ),
+    field2.unit && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-[10px] text-muted-foreground", children: field2.unit })
+  ] });
+}
+function ParameterSlider(props) {
+  const { field: field2, value, onChange, onGestureStart, onGestureEnd, disabled } = props;
+  const dragging = (0, import_react11.useRef)(false);
+  const end = () => {
+    if (!dragging.current) return;
+    dragging.current = false;
+    onGestureEnd?.();
+  };
+  if (!(0, import_parameters.isSliderField)(field2)) return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ParameterNumberInput, { ...props });
+  const step = (0, import_parameters.parameterStep)(field2);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "input",
+      {
+        type: "range",
+        "aria-label": (0, import_parameters.parameterLabel)(field2),
+        "aria-valuetext": (0, import_parameters.formatParameterNumber)(field2, value),
+        min: field2.min,
+        max: field2.max,
+        step,
+        value,
+        disabled: disabled || field2.readOnly,
+        className: rangeClass,
+        onPointerDown: () => {
+          if (dragging.current) return;
+          dragging.current = true;
+          onGestureStart?.();
+        },
+        onPointerUp: end,
+        onPointerCancel: end,
+        onBlur: end,
+        onChange: (e) => onChange((0, import_parameters.clampParameterNumber)(field2, Number(e.target.value)))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-20 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ParameterNumberInput, { ...props, id: props.id, "aria-label": `${(0, import_parameters.parameterLabel)(field2)} value` }) })
+  ] });
+}
+function ParameterToggle({ field: field2, value, onChange, disabled, id }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      id,
+      "aria-checked": value,
+      "aria-label": (0, import_parameters.parameterLabel)(field2),
+      disabled: disabled || field2.readOnly,
+      onClick: () => onChange(!value),
+      className: `relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:opacity-50 ${value ? "bg-primary" : "bg-muted"}`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "span",
+        {
+          className: `pointer-events-none block h-4 w-4 rounded-full bg-background shadow transition-transform ${value ? "translate-x-4" : "translate-x-0.5"}`
+        }
+      )
+    }
+  );
+}
+function ParameterSelect({ field: field2, value, onChange, disabled, id }) {
+  const options = (0, import_parameters.getChoiceOptions)(field2);
+  const off = disabled || field2.readOnly;
+  if (field2.control === "segmented") {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { role: "radiogroup", "aria-label": (0, import_parameters.parameterLabel)(field2), className: "inline-flex flex-wrap rounded-md border border-input bg-muted p-0.5", children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "button",
+      {
+        type: "button",
+        role: "radio",
+        "aria-checked": o.value === value,
+        title: o.description,
+        disabled: off,
+        onClick: () => onChange(o.value),
+        className: `rounded px-2 py-0.5 text-xs disabled:opacity-50 ${o.value === value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+        children: (0, import_parameters.choiceOptionLabel)(o)
+      },
+      String(o.value)
+    )) });
+  }
+  const index = options.findIndex((o) => o.value === value);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "select",
+    {
+      id,
+      "aria-label": (0, import_parameters.parameterLabel)(field2),
+      value: String(index),
+      disabled: off,
+      onChange: (e) => {
+        const option = options[Number(e.target.value)];
+        if (option) onChange(option.value);
+      },
+      className: parameterInputClass,
+      children: options.map((o, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: String(i), title: o.description, children: (0, import_parameters.choiceOptionLabel)(o) }, String(o.value)))
+    }
+  );
+}
+function ParameterColor({ field: field2, value, onChange, onGestureStart, onGestureEnd, disabled, id }) {
+  const picking = (0, import_react11.useRef)(false);
+  const alpha = !!field2.alpha;
+  const hex = (0, import_parameters.normalizeHexColor)(value, true) ?? "#000000ff";
+  const rgb = hex.slice(0, 7);
+  const a = hex.slice(7);
+  const off = disabled || field2.readOnly;
+  const start = () => {
+    if (picking.current) return;
+    picking.current = true;
+    onGestureStart?.();
+  };
+  const end = () => {
+    if (!picking.current) return;
+    picking.current = false;
+    onGestureEnd?.();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "relative h-7 w-9 shrink-0 overflow-hidden rounded-md border border-input bg-[repeating-conic-gradient(#d4d4d8_0_25%,#fff_0_50%)] bg-[length:8px_8px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "absolute inset-0", style: { background: alpha ? hex : rgb } }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "input",
+          {
+            type: "color",
+            "aria-label": (0, import_parameters.parameterLabel)(field2),
+            value: rgb,
+            disabled: off,
+            className: "absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
+            onChange: (e) => {
+              start();
+              onChange(alpha ? `${e.target.value}${a}` : e.target.value);
+            },
+            onBlur: end
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        ParameterCommitInput,
+        {
+          id,
+          "aria-label": `${(0, import_parameters.parameterLabel)(field2)} hex`,
+          value: alpha ? hex : rgb,
+          disabled: off,
+          spellCheck: false,
+          className: `${parameterInputClass} font-mono`,
+          onCommit: (text) => {
+            const next = (0, import_parameters.normalizeHexColor)(text, alpha);
+            if (next) onChange(next);
+          }
+        }
+      )
+    ] }),
+    alpha && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "input",
+      {
+        type: "range",
+        "aria-label": `${(0, import_parameters.parameterLabel)(field2)} opacity`,
+        min: 0,
+        max: 255,
+        step: 1,
+        value: parseInt(a, 16),
+        disabled: off,
+        className: rangeClass,
+        onPointerDown: start,
+        onPointerUp: end,
+        onPointerCancel: end,
+        onBlur: end,
+        onChange: (e) => onChange(`${rgb}${Number(e.target.value).toString(16).padStart(2, "0")}`)
+      }
+    ),
+    field2.swatches && field2.swatches.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap gap-1", children: field2.swatches.map((s) => {
+      const swatch = (0, import_parameters.normalizeHexColor)(s, alpha);
+      if (!swatch) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "button",
+        {
+          type: "button",
+          title: swatch,
+          "aria-label": `${(0, import_parameters.parameterLabel)(field2)} ${swatch}`,
+          "aria-pressed": swatch === (alpha ? hex : rgb),
+          disabled: off,
+          onClick: () => onChange(swatch),
+          className: "h-5 w-5 rounded border border-input aria-pressed:ring-1 aria-pressed:ring-primary",
+          style: { background: swatch }
+        },
+        s
+      );
+    }) })
+  ] });
+}
+function ParameterVector({ field: field2, value, onChange, disabled, id }) {
+  const size = (0, import_parameters.vectorSize)(field2);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "grid gap-1.5", style: { gridTemplateColumns: `repeat(${size}, minmax(0, 1fr))` }, children: Array.from({ length: size }, (_, i) => {
+    const component = (0, import_parameters.vectorComponentField)(field2, i);
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: "flex min-w-0 items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "w-3 shrink-0 text-[10px] uppercase text-muted-foreground", children: component.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        ParameterNumberInput,
+        {
+          field: component,
+          value: value[i] ?? 0,
+          id: i === 0 ? id : void 0,
+          "aria-label": `${(0, import_parameters.parameterLabel)(field2)} ${component.label}`,
+          disabled: disabled || field2.readOnly,
+          onChange: (n) => onChange(Array.from({ length: size }, (_2, j) => j === i ? n : value[j] ?? 0))
+        }
+      )
+    ] }, i);
+  }) });
+}
+function ParameterImage({ field: field2, value, onChange, disabled, id, resolveFile }) {
+  const off = disabled || field2.readOnly;
+  const name = (0, import_parameters.parameterLabel)(field2);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex h-12 w-16 shrink-0 items-center justify-center overflow-hidden rounded-md border border-input bg-muted", children: value ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("img", { src: value, alt: name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] text-muted-foreground", children: "None" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          ParameterCommitInput,
+          {
+            id,
+            "aria-label": `${name} URL`,
+            placeholder: "Image URL",
+            value: value.startsWith("data:") ? "" : value,
+            disabled: off,
+            onCommit: (text) => onChange(text.trim())
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex gap-1", children: [
+          resolveFile && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: `${parameterButtonClass} cursor-pointer ${off ? "pointer-events-none opacity-50" : ""}`, children: [
+            "Choose file\u2026",
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "input",
+              {
+                type: "file",
+                className: "sr-only",
+                accept: field2.accept ?? "image/*",
+                disabled: off,
+                "aria-label": `${name} file`,
+                onChange: async (e) => {
+                  const file = e.target.files?.[0];
+                  e.target.value = "";
+                  if (file) onChange(await resolveFile(file));
+                }
+              }
+            )
+          ] }),
+          value && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: parameterButtonClass, disabled: off, onClick: () => onChange(""), "aria-label": `Clear ${name}`, children: "Clear" })
+        ] })
+      ] })
+    ] }),
+    field2.options && field2.options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap gap-1", children: field2.options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "button",
+      {
+        type: "button",
+        title: o.label ?? o.url,
+        "aria-label": o.label ?? o.url,
+        "aria-pressed": o.url === value,
+        disabled: off,
+        onClick: () => onChange(o.url),
+        className: "h-9 w-12 overflow-hidden rounded border border-input aria-pressed:ring-2 aria-pressed:ring-primary",
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("img", { src: o.url, alt: "", className: "h-full w-full object-cover" })
+      },
+      o.url
+    )) })
+  ] });
+}
+function ParameterText({ field: field2, value, onChange, disabled, id }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    ParameterCommitInput,
+    {
+      id,
+      "aria-label": (0, import_parameters.parameterLabel)(field2),
+      multiline: field2.multiline,
+      placeholder: field2.placeholder,
+      maxLength: field2.maxLength,
+      value,
+      disabled: disabled || field2.readOnly,
+      onCommit: onChange
+    }
+  );
+}
+function ParameterFieldControl({ field: field2, value, onChange, resolveFile, ...rest }) {
+  const set = onChange;
+  switch (field2.type) {
+    case "number":
+    case "int":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ParameterSlider, { field: field2, value, onChange: set, ...rest });
+    case "boolean":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ParameterToggle, { field: field2, value, onChange: set, ...rest });
+    case "choice":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ParameterSelect, { field: field2, value, onChange: set, ...rest });
+    case "color":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ParameterColor, { field: field2, value, onChange: set, ...rest });
+    case "vector":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ParameterVector, { field: field2, value, onChange: set, ...rest });
+    case "image":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ParameterImage, { field: field2, value, onChange: set, resolveFile, ...rest });
+    case "text":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ParameterText, { field: field2, value, onChange: set, ...rest });
+  }
+}
+
+// src/effects/EffectParameters.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function EffectParameters({ description, values, onChange, onReset, keyframed, onPreset, disabled = false, className = "" }) {
+  const fields = (0, import_react12.useMemo)(() => (0, import_effects3.effectParameterFields)(description), [description]);
+  const idBase = (0, import_react12.useId)();
+  const gesture = import_react12.default.useRef(null);
+  const count = import_react12.default.useRef(0);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `space-y-2 ${className}`, "data-effect-parameters": description.id, children: [
+    onPreset && description.presets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      "select",
+      {
+        className: "w-full rounded border border-border bg-transparent px-1 py-0.5 text-xs",
+        "aria-label": `${description.name} presets`,
+        value: "",
+        disabled,
+        onChange: (e) => {
+          const preset = description.presets.find((p) => p.name === e.currentTarget.value);
+          if (preset) onPreset({ ...description.defaults, ...preset.values });
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: "", children: "Presets\u2026" }),
+          description.presets.map((p) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: p.name, children: p.name }, p.name))
+        ]
+      }
+    ),
+    fields.map((field2) => {
+      const label = (0, import_parameters2.parameterLabel)(field2);
+      const inputId = `${idBase}-${field2.id}`;
+      const keyed = keyframed?.has(field2.id) ?? false;
+      const value = (0, import_effects3.effectFieldValue)(field2, values[field2.id]);
+      const changed = !keyed && !(0, import_parameters2.parameterValuesEqual)(value, field2.default);
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-1", "data-effect-control": field2.id, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { htmlFor: inputId, className: "min-w-0 flex-1 truncate text-xs font-medium", title: field2.description, children: label }),
+          keyed && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-[10px] text-muted-foreground", children: "keyframed" }),
+          onReset && changed && !disabled && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: "rounded px-1 text-[11px] text-muted-foreground hover:text-foreground", "aria-label": `Reset ${label}`, onClick: () => onReset(field2.id), children: "\u21BA" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          ParameterFieldControl,
+          {
+            field: field2,
+            value,
+            id: inputId,
+            disabled: disabled || keyed,
+            onChange: (v) => onChange(field2.id, v, gesture.current),
+            onGestureStart: () => gesture.current = `${idBase}:${field2.id}:${++count.current}`,
+            onGestureEnd: () => gesture.current = null
+          }
+        )
+      ] }, field2.id);
+    }),
+    !fields.length && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "No controls." })
+  ] });
+}
+
+// src/video-editor/VideoEffectsPanel.tsx
+var import_react13 = require("react");
+var import_video_editor9 = require("@pixerate/editor/video-editor");
+var import_jsx_runtime12 = require("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]) => (0, import_video_editor9.isVideoKeyframes)(v)).map(([k]) => k));
+function EffectControls({
+  provider,
+  effect,
+  name,
+  values,
+  disabled,
+  onChange,
+  onPreset
+}) {
+  const { description, error } = useEffectDescription(provider, effect);
+  if (!provider) return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: "text-[11px] text-muted-foreground", children: [
+    'No effects provider: "',
+    name ?? effect,
+    '" is kept and shown as a placeholder.'
+  ] });
+  if (error) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-[11px] text-amber-500", children: error });
+  if (!description) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "Loading\u2026" });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(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] = (0, import_react13.useState)(null);
+  const [message, setMessage] = (0, import_react13.useState)(null);
+  const [open, setOpen] = (0, import_react13.useState)(null);
+  const selected = state.selection[0];
+  const at = selected ? (0, import_video_editor9.findVideoClip)(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__ */ (0, import_jsx_runtime12.jsxs)("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__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "flex-1 font-semibold", children: "Effects" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: btn5, disabled: disabled || !provider, onClick: () => setBrowse(browse === "generator" ? null : "generator"), "aria-pressed": browse === "generator", children: "Add effect clip" })
+    ] }),
+    !provider && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)(EffectsBrowser, { provider, uses: ["generator", "title", "overlay"], title: "Generators and titles", onPick: (e) => (setBrowse(null), addEffectClip(e.id)) }),
+    !clip && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "Select a clip to see its effects." }),
+    clip && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      clip.type === "effect" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-1", "data-effect-part": "generator", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "font-medium", children: clip.name ?? clip.effect }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          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__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-1", "data-effect-part": "transition", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex-1 font-medium", children: "Transition in" }),
+          clip.transition?.type === "effect" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: btn5, disabled, onClick: () => report(controller.apply({ op: "set_transition", clip: clip.id, transition: null }, "Remove transition")), children: "Remove" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)(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__ */ (0, import_jsx_runtime12.jsx)(
+          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__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-1", "data-effect-part": "stack", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex-1 font-medium", children: "On this clip" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)(EffectsBrowser, { provider, uses: ["filter", "overlay"], title: "Filters and overlays", onPick: (e) => (setBrowse(null), report(controller.applyClipEffect(clip.id, e.id))) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ol", { className: "space-y-1", children: (clip.effects ?? []).map((e, i, all) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("li", { className: "rounded border border-border p-1", "data-clip-effect": e.id, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "mt-1 space-y-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-14 text-[11px]", children: "Opacity" }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "input",
+                {
+                  type: "range",
+                  min: 0,
+                  max: 1,
+                  step: 0.01,
+                  className: "flex-1",
+                  disabled: disabled || (0, import_video_editor9.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__ */ (0, import_jsx_runtime12.jsx)(
+              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__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "No effects on this clip." })
+      ] })
+    ] }),
+    message && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { role: "alert", className: "text-[11px] text-destructive", children: message })
+  ] });
+}
+
+// src/video-editor/VideoEditor.tsx
+var import_jsx_runtime13 = require("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 ?? {});
-  (0, import_react8.useEffect)(() => {
+  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")));
+  (0, import_react14.useEffect)(() => {
     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__ */ (0, import_jsx_runtime8.jsx)("ul", { className: "space-y-0.5 text-xs", "aria-label": "Video issues", "data-video-issues": "", children: issues.map((issue, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `flex flex-col gap-3 ${className}`, "data-video-editor": "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `grid gap-3 ${editable ? "lg:grid-cols-[16rem_minmax(0,1fr)_18rem]" : ""}`, children: [
-      editable && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MediaBin, { controller, className: "min-w-0" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex min-w-0 flex-col gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VideoPreview, { controller, resolution, className: "rounded-md border border-border" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VideoTransport, { controller, editable }),
-        showScopes && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VideoScopes, { controller })
+  const issueList = showIssues && issues.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ul", { className: "space-y-0.5 text-xs", "aria-label": "Video issues", "data-video-issues": "", children: issues.map((issue, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `flex flex-col gap-3 ${className}`, "data-video-editor": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `grid gap-3 ${editable ? "lg:grid-cols-[16rem_minmax(0,1fr)_18rem]" : ""}`, children: [
+      editable && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MediaBin, { controller, className: "min-w-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex min-w-0 flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VideoPreview, { controller, resolution, className: "rounded-md border border-border" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VideoTransport, { controller, editable }),
+        showScopes && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VideoScopes, { controller })
       ] }),
-      editable && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ClipInspector, { controller, className: "min-w-0" })
+      editable && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ClipInspector, { controller, className: "min-w-0" }),
+        effectsShown && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VideoEffectsPanel, { controller, className: "min-w-0" })
+      ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VideoTimeline, { controller, editable, pxPerSecond, onPxPerSecondChange }),
-    showTranscript && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TranscriptPanel, { controller, editable }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VideoTimeline, { controller, editable, pxPerSecond, onPxPerSecondChange }),
+    showTranscript && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TranscriptPanel, { controller, editable }),
     issueList
   ] });
 }
@@ -1181,6 +1894,7 @@ function VideoEditor({ controller: given, options, editable = true, pxPerSecond,
   MediaBin,
   TranscriptPanel,
   VideoEditor,
+  VideoEffectsPanel,
   VideoPreview,
   VideoScopes,
   VideoTimeline,
@@ -1188,6 +1902,7 @@ function VideoEditor({ controller: given, options, editable = true, pxPerSecond,
   useVideoEditor,
   useVideoEditorController,
   useVideoEditorState,
-  useVideoEditorTools
+  useVideoEditorTools,
+  useVideoEffectsTools
 });
 //# sourceMappingURL=index.cjs.map