@pixerate/editor-svelte 0.86.3 → 0.88.0

package/dist/video-editor/ClipInspector.svelte

@@ -109,7 +109,11 @@
   function setTransition(type: string) {
     if (!clip) return;
     if (!type) apply({ op: 'set_transition', clip: clip.id, transition: null }, 'Remove transition');
-    else apply({ op: 'set_transition', clip: clip.id, transition: { ...clip.transition, type: type as VideoTransitionType, duration: clip.transition?.duration ?? 500 } }, 'Set transition');
+    else {
+      // A provider transition's effect does not carry over to a built-in type.
+      const { effect: _effect, ...rest } = clip.transition ?? { duration: 500 };
+      apply({ op: 'set_transition', clip: clip.id, transition: { ...rest, type: type as VideoTransitionType, duration: clip.transition?.duration ?? 500 } }, 'Set transition');
+    }
   }
   function gradeValue(c: VideoGradeControl, raw: string) {
     if (!clip) return;
@@ -318,6 +322,9 @@
         <span class="truncate" title="A compound clip plays its sequence as one picture and sound; its clips cannot be edited here yet" data-field="sequence">{sequence?.name ?? clip.sequence} · from {formatVideoSeconds(clip.in ?? 0)}</span>
         <span class="text-muted-foreground">Muted</span>
         <input type="checkbox" class="justify-self-start" aria-label="Muted" {disabled} checked={!!clip.muted} onchange={(e) => set('muted', e.currentTarget.checked || undefined, e.currentTarget.checked ? 'Mute clip' : 'Unmute clip')} data-field="muted" />
+      {:else if clip.type === 'effect'}
+        <span class="text-muted-foreground">Effect</span>
+        <span class="truncate" title="Change its controls in the Effects panel" data-field="effect">{clip.name ?? clip.effect}</span>
       {:else}
         <span class="text-muted-foreground">Colour</span>
         <input class={input} aria-label="Clip colour" {disabled} value={clip.color} onchange={(e) => text('color', e.currentTarget.value, 'Change colour', true)} data-field="color" />
@@ -326,8 +333,8 @@
       <div class="flex items-center gap-1">
         <select class={input} aria-label="Transition" {disabled} value={clip.transition?.type ?? ''} onchange={(e) => setTransition(e.currentTarget.value)} data-field="transition">
           <option value="">none</option>
-          {#each VIDEO_TRANSITION_TYPES as t (t)}
-            <option value={t}>{VIDEO_TRANSITION_LABELS[t]}</option>
+          {#each VIDEO_TRANSITION_TYPES.filter((t) => t !== 'effect' || clip?.transition?.type === 'effect') as t (t)}
+            <option value={t}>{t === 'effect' ? `Effect: ${clip.transition?.effect?.name ?? clip.transition?.effect?.effect}` : VIDEO_TRANSITION_LABELS[t]}</option>
           {/each}
         </select>
         {#if clip.transition}

package/dist/video-editor/ClipInspector.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClipInspector.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/ClipInspector.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EA2BH,KAAK,qBAAqB,EAQ3B,MAAM,+BAA+B,CAAC;AAIvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqTH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ClipInspector.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/ClipInspector.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EA2BH,KAAK,qBAAqB,EAQ3B,MAAM,+BAA+B,CAAC;AAIvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA4TH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/video-editor/EffectControls.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { EffectProvider } from '@pixerate/editor/effects';
+  import { isVideoKeyframes, type VideoEffectValues } from '@pixerate/editor/video-editor';
+  import EffectParameters from '../effects/EffectParameters.svelte';
+  import { effectDescriptionOf } from '../effects/effects.svelte.js';
+
+  interface Props {
+    provider: EffectProvider | null;
+    effect: string;
+    name?: string;
+    values: VideoEffectValues | undefined;
+    disabled: boolean;
+    onchange: (control: string, value: unknown, gesture: string | null) => void;
+    onpreset: (values: Readonly<Record<string, unknown>>) => void;
+  }
+
+  let { provider, effect, name, values, disabled, onchange, onpreset }: Props = $props();
+  const loaded = effectDescriptionOf(() => provider, () => effect);
+  const keyed = $derived(new Set(Object.entries(values ?? {}).filter(([, v]) => isVideoKeyframes(v)).map(([k]) => k)));
+</script>
+
+<!-- One effect's controls, loaded from the provider; a note when the provider does not have it. -->
+{#if !provider}
+  <p class="text-[11px] text-muted-foreground">No effects provider: "{name ?? effect}" is kept and shown as a placeholder.</p>
+{:else if loaded.error}
+  <p class="text-[11px] text-amber-500">{loaded.error}</p>
+{:else if !loaded.description}
+  <p class="text-[11px] text-muted-foreground">Loading…</p>
+{:else}
+  {@const description = loaded.description}
+  <EffectParameters {description} values={values ?? {}} keyframed={keyed} {disabled} {onchange} onreset={(k) => onchange(k, description.defaults[k], null)} {onpreset} />
+{/if}

package/dist/video-editor/EffectControls.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { EffectProvider } from '@pixerate/editor/effects';
+import { type VideoEffectValues } from '@pixerate/editor/video-editor';
+interface Props {
+    provider: EffectProvider | null;
+    effect: string;
+    name?: string;
+    values: VideoEffectValues | undefined;
+    disabled: boolean;
+    onchange: (control: string, value: unknown, gesture: string | null) => void;
+    onpreset: (values: Readonly<Record<string, unknown>>) => void;
+}
+declare const EffectControls: import("svelte").Component<Props, {}, "">;
+type EffectControls = ReturnType<typeof EffectControls>;
+export default EffectControls;
+//# sourceMappingURL=EffectControls.svelte.d.ts.map

package/dist/video-editor/EffectControls.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EffectControls.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/EffectControls.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAoB,KAAK,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAKvF,UAAU,KAAK;IACb,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,iBAAiB,GAAG,SAAS,CAAC;IACtC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5E,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC;CAC/D;AA2BH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/video-editor/VideoEditor.svelte

@@ -9,6 +9,9 @@
   import VideoTimeline from './VideoTimeline.svelte';
   import VideoTransport from './VideoTransport.svelte';
   import { videoEditorStateOf } from './createVideoEditor.svelte.js';
+  import type { EffectProvider } from '@pixerate/editor/effects';
+  import { useEffects } from '../effects/effects.svelte.js';
+  import VideoEffectsPanel from './VideoEffectsPanel.svelte';
 
   interface Props {
     /** The editor to show (default: one made from `options`, destroyed with the component). */
@@ -28,16 +31,26 @@
     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;
     class?: string;
   }
 
-  let { controller, options, editable = true, pxPerSecond = $bindable(100), showIssues = true, showTranscript = true, showScopes = false, class: className = '' }: Props = $props();
+  let { controller, options, editable = true, pxPerSecond = $bindable(100), showIssues = true, showTranscript = true, showScopes = false, effects, showEffects, class: className = '' }: Props = $props();
   let owned: VideoEditorController | null = null;
   // A controller is made only when none is passed, and kept for the component's lifetime.
   const ctl = $derived(controller ?? (owned ??= new VideoEditorController(options)));
   onDestroy(() => owned?.destroy());
   const view = videoEditorStateOf(() => ctl);
   const editor = $derived(view.current);
+  useEffects(() => ctl, () => effects);
+  const effectsShown = $derived(showEffects ?? !!(editor.effectsProvider || editor.project.tracks.some((t) => t.clips.some((c) => c.type === 'effect' || c.effects?.length || c.transition?.type === 'effect'))));
 </script>
 
 {#snippet issueList()}
@@ -72,7 +85,10 @@
       <VideoTransport controller={ctl} />
       {#if showScopes}<VideoScopes controller={ctl} />{/if}
     </div>
-    <ClipInspector controller={ctl} class="min-w-0" />
+    <div class="flex min-w-0 flex-col gap-3">
+      <ClipInspector controller={ctl} class="min-w-0" />
+      {#if effectsShown}<VideoEffectsPanel controller={ctl} class="min-w-0" />{/if}
+    </div>
     <div class="flex min-w-0 flex-col gap-2 lg:col-span-3">
       <VideoTimeline controller={ctl} bind:pxPerSecond />
       {#if showTranscript}<TranscriptPanel controller={ctl} />{/if}

package/dist/video-editor/VideoEditor.svelte.d.ts

@@ -1,4 +1,5 @@
 import { VideoEditorController, type VideoEditorOptions } from '@pixerate/editor/video-editor';
+import type { EffectProvider } from '@pixerate/editor/effects';
 interface Props {
     /** The editor to show (default: one made from `options`, destroyed with the component). */
     controller?: VideoEditorController;
@@ -17,6 +18,14 @@ interface Props {
     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;
     class?: string;
 }
 declare const VideoEditor: import("svelte").Component<Props, {}, "pxPerSecond">;

package/dist/video-editor/VideoEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/VideoEditor.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,qBAAqB,EAAE,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAW7F,UAAU,KAAK;IACb,2FAA2F;IAC3F,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,8EAA8E;IAC9E,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oEAAoE;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0GAA0G;IAC1G,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8DH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"VideoEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/VideoEditor.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,qBAAqB,EAAE,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAS/F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAK7D,UAAU,KAAK;IACb,2FAA2F;IAC3F,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,8EAA8E;IAC9E,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oEAAoE;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0GAA0G;IAC1G,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAChC,6FAA6F;IAC7F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsEH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/video-editor/VideoEffectsPanel.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+  import { findVideoClip, isVideoKeyframes, type VideoEditorController, type VideoEffectEditResult, type VideoEffectValues } from '@pixerate/editor/video-editor';
+  import EffectsBrowser from '../effects/EffectsBrowser.svelte';
+  import EffectControls from './EffectControls.svelte';
+  import { videoEditorStateOf } from './createVideoEditor.svelte.js';
+
+  interface Props {
+    controller: VideoEditorController;
+    class?: string;
+  }
+
+  let { controller, class: className = '' }: Props = $props();
+  const view = videoEditorStateOf(() => controller);
+  const ed = $derived(view.current);
+  const provider = $derived(ed.effectsProvider);
+  let browse = $state<null | 'clip' | 'transition' | 'generator'>(null);
+  let message = $state<string | null>(null);
+  let open = $state<string | null>(null);
+  const at = $derived(ed.selection[0] ? findVideoClip(ed.project, ed.selection[0]) : null);
+  const clip = $derived(at?.clip ?? null);
+  const disabled = $derived(ed.readOnly);
+  const btn = 'rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40';
+
+  function report(r: VideoEffectEditResult | Promise<VideoEffectEditResult>) {
+    void Promise.resolve(r).then((x) => (message = x.ok ? null : x.error));
+  }
+  function addEffectClip(effect: string) {
+    const track = at && at.track.kind === 'video' ? at.track.id : ed.project.tracks.find((t) => t.kind === 'video')?.id;
+    if (!track) return (message = 'Add a video track first.');
+    report(
+      controller.addEffectClip(track, effect, { start: Math.round(ed.time), mode: 'overwrite' }).then((r) => {
+        if (r.ok && r.clip) controller.select([r.clip]);
+        return r;
+      }),
+    );
+  }
+  const merge = (gesture: string | null) => ({ merge: gesture ?? undefined });
+</script>
+
+<!--
+  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.
+-->
+<section class="flex flex-col gap-2 rounded-md border border-border p-2 text-xs {className}" aria-label="Effects" data-video-effects="">
+  <div class="flex items-center gap-1">
+    <h3 class="flex-1 font-semibold">Effects</h3>
+    <button type="button" class={btn} disabled={disabled || !provider} aria-pressed={browse === 'generator'} onclick={() => (browse = browse === 'generator' ? null : 'generator')}>Add effect clip</button>
+  </div>
+  {#if !provider}
+    <p class="text-[11px] text-muted-foreground">No effects provider is registered. Effects in the project are kept and drawn as placeholders.</p>
+  {/if}
+  {#if browse === 'generator'}
+    <EffectsBrowser {provider} uses={['generator', 'title', 'overlay']} title="Generators and titles" onpick={(e) => ((browse = null), addEffectClip(e.id))} />
+  {/if}
+  {#if !clip}
+    <p class="text-[11px] text-muted-foreground">Select a clip to see its effects.</p>
+  {:else}
+    {#if clip.type === 'effect'}
+      {@const c = clip}
+      <div class="space-y-1" data-effect-part="generator">
+        <div class="font-medium">{c.name ?? c.effect}</div>
+        <EffectControls
+          {provider}
+          effect={c.effect}
+          name={c.name}
+          values={c.values}
+          {disabled}
+          onchange={(k, v, g) => report(controller.updateEffectValues(c.id, 'generator', { [k]: v } as VideoEffectValues, merge(g)))}
+          onpreset={(values) => report(controller.updateEffectValues(c.id, 'generator', values as VideoEffectValues))}
+        />
+      </div>
+    {/if}
+    <div class="space-y-1" data-effect-part="transition">
+      <div class="flex items-center gap-1">
+        <span class="flex-1 font-medium">Transition in</span>
+        {#if clip.transition?.type === 'effect'}
+          <button type="button" class={btn} {disabled} onclick={() => report(controller.apply({ op: 'set_transition', clip: clip!.id, transition: null }, 'Remove transition') as VideoEffectEditResult)}>Remove</button>
+        {:else}
+          <button type="button" class={btn} disabled={disabled || !provider} aria-pressed={browse === 'transition'} onclick={() => (browse = browse === 'transition' ? null : 'transition')}>Effect transition…</button>
+        {/if}
+      </div>
+      {#if browse === 'transition'}
+        <EffectsBrowser {provider} uses={['transition']} title="Transitions" onpick={(e) => ((browse = null), report(controller.setEffectTransition(clip!.id, e.id)))} />
+      {/if}
+      {#if clip.transition?.type === 'effect' && clip.transition.effect}
+        {@const t = clip.transition.effect}
+        <EffectControls
+          {provider}
+          effect={t.effect}
+          name={t.name}
+          values={t.values}
+          {disabled}
+          onchange={(k, v, g) => report(controller.updateEffectValues(clip!.id, 'transition', { [k]: v } as VideoEffectValues, merge(g)))}
+          onpreset={(values) => report(controller.updateEffectValues(clip!.id, 'transition', values as VideoEffectValues))}
+        />
+      {/if}
+    </div>
+    <div class="space-y-1" data-effect-part="stack">
+      <div class="flex items-center gap-1">
+        <span class="flex-1 font-medium">On this clip</span>
+        <button type="button" class={btn} disabled={disabled || !provider} aria-pressed={browse === 'clip'} onclick={() => (browse = browse === 'clip' ? null : 'clip')}>Add effect…</button>
+      </div>
+      {#if browse === 'clip'}
+        <EffectsBrowser {provider} uses={['filter', 'overlay']} title="Filters and overlays" onpick={(e) => ((browse = null), report(controller.applyClipEffect(clip!.id, e.id)))} />
+      {/if}
+      <ol class="space-y-1">
+        {#each clip.effects ?? [] as e, i (e.id)}
+          {@const label = e.name ?? e.effect}
+          {@const count = clip.effects?.length ?? 0}
+          <li class="rounded border border-border p-1" data-clip-effect={e.id}>
+            <div class="flex items-center gap-1">
+              <input type="checkbox" checked={e.enabled !== false} {disabled} aria-label="{label} on" onchange={(ev) => report(controller.updateClipEffect(clip!.id, e.id, { enabled: ev.currentTarget.checked }))} />
+              <button type="button" class="min-w-0 flex-1 truncate text-left" aria-expanded={open === e.id} onclick={() => (open = open === e.id ? null : e.id)}>{label}</button>
+              <button type="button" class={btn} disabled={disabled || i === 0} aria-label="Move up" onclick={() => report(controller.updateClipEffect(clip!.id, e.id, { index: i - 1 }))}>↑</button>
+              <button type="button" class={btn} disabled={disabled || i === count - 1} aria-label="Move down" onclick={() => report(controller.updateClipEffect(clip!.id, e.id, { index: i + 1 }))}>↓</button>
+              <button type="button" class={btn} {disabled} aria-label="Remove {label}" onclick={() => report(controller.removeClipEffect(clip!.id, e.id))}>✕</button>
+            </div>
+            {#if open === e.id}
+              <div class="mt-1 space-y-2">
+                <label class="flex items-center gap-1">
+                  <span class="w-14 text-[11px]">Opacity</span>
+                  <input
+                    type="range"
+                    min="0"
+                    max="1"
+                    step="0.01"
+                    class="flex-1"
+                    disabled={disabled || isVideoKeyframes(e.opacity)}
+                    value={typeof e.opacity === 'number' ? e.opacity : 1}
+                    aria-label="{label} opacity"
+                    oninput={(ev) => report(controller.updateClipEffect(clip!.id, e.id, { opacity: Number(ev.currentTarget.value) }, { merge: `opacity:${clip!.id}:${e.id}` }))}
+                  />
+                </label>
+                <EffectControls
+                  {provider}
+                  effect={e.effect}
+                  name={e.name}
+                  values={e.values}
+                  {disabled}
+                  onchange={(k, v, g) => report(controller.updateClipEffect(clip!.id, e.id, { values: { [k]: v as never } }, merge(g)))}
+                  onpreset={(values) => report(controller.updateClipEffect(clip!.id, e.id, { values: values as never }))}
+                />
+              </div>
+            {/if}
+          </li>
+        {/each}
+      </ol>
+      {#if !clip.effects?.length}<p class="text-[11px] text-muted-foreground">No effects on this clip.</p>{/if}
+    </div>
+  {/if}
+  {#if message}<p role="alert" class="text-[11px] text-destructive">{message}</p>{/if}
+</section>

package/dist/video-editor/VideoEffectsPanel.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type VideoEditorController } from '@pixerate/editor/video-editor';
+interface Props {
+    controller: VideoEditorController;
+    class?: string;
+}
+declare const VideoEffectsPanel: import("svelte").Component<Props, {}, "">;
+type VideoEffectsPanel = ReturnType<typeof VideoEffectsPanel>;
+export default VideoEffectsPanel;
+//# sourceMappingURL=VideoEffectsPanel.svelte.d.ts.map

package/dist/video-editor/VideoEffectsPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoEffectsPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/VideoEffectsPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmC,KAAK,qBAAqB,EAAsD,MAAM,+BAA+B,CAAC;AAM9J,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmHH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/video-editor/createVideoEditor.svelte.d.ts

@@ -1,4 +1,4 @@
-import { VideoEditorController, type VideoEditorOptions, type VideoEditorState, type VideoEditorToolProviderOptions, type VideoEditResult } from "@pixerate/editor/video-editor";
+import { VideoEditorController, type VideoEffectsToolProviderOptions, type VideoEditorOptions, type VideoEditorState, type VideoEditorToolProviderOptions, type VideoEditResult } from "@pixerate/editor/video-editor";
 import type { ToolRegistry } from "@pixerate/editor/tools";
 export interface SvelteVideoEditor {
     readonly controller: VideoEditorController;
@@ -37,4 +37,11 @@ export declare function videoEditorStateOf(getController: () => VideoEditorContr
  * initialisation). Pass a getter to follow a changing registry.
  */
 export declare function useVideoEditorTools(registry: ToolRegistry | null | undefined | (() => 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`, …) for the lifetime of the calling
+ * component. They work once an effects provider is registered (see `useEffects`); before that the
+ * read tools say so and the write tools refuse.
+ */
+export declare function useVideoEffectsTools(registry: ToolRegistry | null | undefined | (() => ToolRegistry | null | undefined), controller: VideoEditorController, options?: VideoEffectsToolProviderOptions): void;
 //# sourceMappingURL=createVideoEditor.svelte.d.ts.map

package/dist/video-editor/createVideoEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createVideoEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/createVideoEditor.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EACL,qBAAqB,EAErB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,8BAA8B,EACnC,KAAK,eAAe,EACrB,MAAM,+BAA+B,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,UAAU,EAAE,qBAAqB,CAAC;IAC3C,+EAA+E;IAC/E,QAAQ,CAAC,KAAK,EAAE,gBAAgB,CAAC;IACjC,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,MAAM,IAAI,IAAI,CAAC;IACf,+BAA+B;IAC/B,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,yEAAyE;IACzE,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;IACb,sFAAsF;IACtF,eAAe,IAAI,eAAe,CAAC;IACnC,uEAAuE;IACvE,eAAe,CAAC,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,eAAe,CAAC;IACjE,qFAAqF;IACrF,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,mBAAmB,GAAE,qBAAqB,GAAG,kBAAuB,GAAG,iBAAiB,CA0BzH;AAED,0FAA0F;AAC1F,wBAAgB,kBAAkB,CAAC,aAAa,EAAE,MAAM,qBAAqB,GAAG;IAAE,QAAQ,CAAC,OAAO,EAAE,gBAAgB,CAAA;CAAE,CAgBrH;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,EACnF,UAAU,EAAE,qBAAqB,EACjC,OAAO,GAAE,8BAAmC,GAC3C,IAAI,CAMN"}
+{"version":3,"file":"createVideoEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/createVideoEditor.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EACL,qBAAqB,EAGrB,KAAK,+BAA+B,EACpC,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,8BAA8B,EACnC,KAAK,eAAe,EACrB,MAAM,+BAA+B,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,UAAU,EAAE,qBAAqB,CAAC;IAC3C,+EAA+E;IAC/E,QAAQ,CAAC,KAAK,EAAE,gBAAgB,CAAC;IACjC,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,MAAM,IAAI,IAAI,CAAC;IACf,+BAA+B;IAC/B,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,yEAAyE;IACzE,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;IACb,sFAAsF;IACtF,eAAe,IAAI,eAAe,CAAC;IACnC,uEAAuE;IACvE,eAAe,CAAC,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,eAAe,CAAC;IACjE,qFAAqF;IACrF,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,mBAAmB,GAAE,qBAAqB,GAAG,kBAAuB,GAAG,iBAAiB,CA0BzH;AAED,0FAA0F;AAC1F,wBAAgB,kBAAkB,CAAC,aAAa,EAAE,MAAM,qBAAqB,GAAG;IAAE,QAAQ,CAAC,OAAO,EAAE,gBAAgB,CAAA;CAAE,CAgBrH;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,EACnF,UAAU,EAAE,qBAAqB,EACjC,OAAO,GAAE,8BAAmC,GAC3C,IAAI,CAMN;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,CAAC,MAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,EACnF,UAAU,EAAE,qBAAqB,EACjC,OAAO,GAAE,+BAAoC,GAC5C,IAAI,CAMN"}

package/dist/video-editor/createVideoEditor.svelte.js

@@ -1,5 +1,5 @@
 import { untrack } from "svelte";
-import { VideoEditorController, createVideoEditorToolProvider, } from "@pixerate/editor/video-editor";
+import { VideoEditorController, createVideoEditorToolProvider, createVideoEffectsToolProvider, } from "@pixerate/editor/video-editor";
 /**
  * Svelte 5 rune: subscribes to a `VideoEditorController` (or creates one from options) and
  * exposes its state reactively with bound actions.
@@ -61,3 +61,17 @@ export function useVideoEditorTools(registry, controller, options = {}) {
         return target.register(createVideoEditorToolProvider(controller, options));
     });
 }
+/**
+ * Registers the video editor's effect tools (`search_effects`, `describe_effect`, `apply_effect`,
+ * `add_video_effect_clip`, `set_video_effect_transition`, …) for the lifetime of the calling
+ * component. They work once an effects provider is registered (see `useEffects`); before that the
+ * read tools say so and the write tools refuse.
+ */
+export function useVideoEffectsTools(registry, controller, options = {}) {
+    $effect(() => {
+        const target = typeof registry === "function" ? registry() : registry;
+        if (!target)
+            return;
+        return target.register(createVideoEffectsToolProvider(controller, options));
+    });
+}

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

@@ -7,6 +7,7 @@ import type VideoTimelineComponent from "./VideoTimeline.svelte";
 import type ClipInspectorComponent from "./ClipInspector.svelte";
 import type MediaBinComponent from "./MediaBin.svelte";
 import type TranscriptPanelComponent from "./TranscriptPanel.svelte";
+import type VideoEffectsPanelComponent from "./VideoEffectsPanel.svelte";
 export { default as VideoEditor } from "./VideoEditor.svelte";
 export { default as VideoPreview } from "./VideoPreview.svelte";
 export { default as VideoScopes } from "./VideoScopes.svelte";
@@ -15,6 +16,7 @@ export { default as VideoTimeline } from "./VideoTimeline.svelte";
 export { default as ClipInspector } from "./ClipInspector.svelte";
 export { default as MediaBin } from "./MediaBin.svelte";
 export { default as TranscriptPanel } from "./TranscriptPanel.svelte";
+export { default as VideoEffectsPanel } from "./VideoEffectsPanel.svelte";
 export * from "./createVideoEditor.svelte.js";
 export type VideoEditorProps = ComponentProps<typeof VideoEditorComponent>;
 export type VideoPreviewProps = ComponentProps<typeof VideoPreviewComponent>;
@@ -24,4 +26,5 @@ export type VideoTimelineProps = ComponentProps<typeof VideoTimelineComponent>;
 export type ClipInspectorProps = ComponentProps<typeof ClipInspectorComponent>;
 export type MediaBinProps = ComponentProps<typeof MediaBinComponent>;
 export type TranscriptPanelProps = ComponentProps<typeof TranscriptPanelComponent>;
+export type VideoEffectsPanelProps = ComponentProps<typeof VideoEffectsPanelComponent>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/video-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,uBAAuB,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,iBAAiB,MAAM,mBAAmB,CAAC;AACvD,OAAO,KAAK,wBAAwB,MAAM,0BAA0B,CAAC;AAErE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,cAAc,+BAA+B,CAAC;AAE9C,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,uBAAuB,CAAC,CAAC;AACjF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC;AACrE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/video-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,uBAAuB,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,iBAAiB,MAAM,mBAAmB,CAAC;AACvD,OAAO,KAAK,wBAAwB,MAAM,0BAA0B,CAAC;AACrE,OAAO,KAAK,0BAA0B,MAAM,4BAA4B,CAAC;AAEzE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,cAAc,+BAA+B,CAAC;AAE9C,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,uBAAuB,CAAC,CAAC;AACjF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC;AACrE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC;AACnF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,0BAA0B,CAAC,CAAC"}

package/dist/video-editor/index.js

@@ -6,4 +6,5 @@ export { default as VideoTimeline } from "./VideoTimeline.svelte";
 export { default as ClipInspector } from "./ClipInspector.svelte";
 export { default as MediaBin } from "./MediaBin.svelte";
 export { default as TranscriptPanel } from "./TranscriptPanel.svelte";
+export { default as VideoEffectsPanel } from "./VideoEffectsPanel.svelte";
 export * from "./createVideoEditor.svelte.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.86.3",
+  "version": "0.88.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -18,6 +18,11 @@
       "svelte": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./effects": {
+      "types": "./dist/effects/index.d.ts",
+      "svelte": "./dist/effects/index.js",
+      "default": "./dist/effects/index.js"
+    },
     "./spreadsheet": {
       "types": "./dist/spreadsheet/index.d.ts",
       "svelte": "./dist/spreadsheet/index.js",
@@ -139,7 +144,7 @@
     "@tiptap/extension-bubble-menu": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@pixerate/editor": "0.122.0"
+    "@pixerate/editor": "0.124.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",