@pixerate/editor-svelte 0.87.0 → 0.88.1

package/dist/image-editor/ImageProviderEffectsPanel.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+  import { findLayer, type ImageEditorController, type ImageLayer, type SmartObjectLayer } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
+  import EffectsBrowser from '../effects/EffectsBrowser.svelte';
+  import ImageEffectControls from './ImageEffectControls.svelte';
+
+  interface Props {
+    controller: ImageEditorController;
+    class?: string;
+  }
+
+  let { controller, class: className = '' }: Props = $props();
+  let tick = $state(0);
+  $effect(() => {
+    const c = controller;
+    return untrack(() => c.subscribe(() => tick++));
+  });
+  let browse = $state<null | 'filter' | 'layer'>(null);
+  let message = $state<string | null>(null);
+  let open = $state<string | null>(null);
+  const snapshot = $derived.by(() => {
+    void tick;
+    const s = controller.getState();
+    const layer: ImageLayer | null = s.activeLayerId ? (findLayer(s.layers, s.activeLayerId)?.layer ?? null) : null;
+    return { provider: controller.effectsProvider, layer };
+  });
+  const provider = $derived(snapshot.provider);
+  const layer = $derived(snapshot.layer);
+  const all = $derived(layer?.type === 'smart' ? ((layer as SmartObjectLayer).smartFilters?.filters ?? []) : []);
+  const generator = $derived(layer?.type === 'pixel' ? layer.generator : undefined);
+  const canFilter = $derived(!!layer && layer.type !== 'adjustment' && layer.type !== 'annotation');
+  const btn = 'rounded border border-slate-700 px-1.5 py-0.5 text-[11px] text-slate-300 hover:text-white disabled:opacity-40';
+  const drags = new Set<string>();
+  /** Changes during a drag skip the undo stack after the first, so the drag is one step. */
+  function commit(gesture: string | null) {
+    if (!gesture) return true;
+    if (drags.has(gesture)) return false;
+    drags.add(gesture);
+    return true;
+  }
+  function run(work: () => unknown) {
+    message = null;
+    Promise.resolve()
+      .then(work)
+      .catch((e: unknown) => (message = e instanceof Error ? e.message : String(e)));
+  }
+</script>
+
+<!--
+  Provider effects for the active layer: its effect smart filters (apply, turn on and off, opacity,
+  reorder, change controls, remove) and, for an effect layer, its own controls; plus adding effect
+  layers. Applying a filter effect to a pixel layer converts it to a smart object in the same undo
+  step. Without a provider it says why nothing can be added.
+-->
+<section class="flex flex-col gap-2 text-xs {className}" aria-label="Provider effects" data-image-provider-effects="">
+  <div class="flex items-center gap-1">
+    <span class="flex-1 text-[11px] font-semibold uppercase tracking-wider text-slate-200">Effects</span>
+    <button type="button" class={btn} disabled={!provider || !canFilter} aria-pressed={browse === 'filter'} onclick={() => (browse = browse === 'filter' ? null : 'filter')}>Apply effect…</button>
+    <button type="button" class={btn} disabled={!provider} aria-pressed={browse === 'layer'} onclick={() => (browse = browse === 'layer' ? null : 'layer')}>Effect layer…</button>
+  </div>
+  {#if !provider}<p class="text-[11px] text-slate-400">No effects provider is registered. Effects in the document are kept.</p>{/if}
+  {#if browse === 'filter' && layer}
+    {@const id = layer.id}
+    <EffectsBrowser {provider} uses={['filter']} title="Filters" onpick={(e) => ((browse = null), run(() => controller.applyEffectFilter(id, e.id)))} />
+  {/if}
+  {#if browse === 'layer'}
+    <EffectsBrowser {provider} uses={['generator', 'overlay', 'title']} title="Generators and overlays" onpick={(e) => ((browse = null), run(() => controller.addEffectLayer(e.id)))} />
+  {/if}
+  {#if generator && layer}
+    {@const id = layer.id}
+    <div class="space-y-1" data-effect-part="generator">
+      <div class="flex items-center gap-1">
+        <span class="flex-1 font-medium text-slate-200">{generator.name ?? generator.effect}</span>
+        <button type="button" class={btn} title="Keep the pixels as a plain layer" onclick={() => run(() => controller.rasterizeEffectLayer(id))}>Rasterize</button>
+      </div>
+      <ImageEffectControls
+        {provider}
+        effect={generator.effect}
+        name={generator.name}
+        values={generator.values}
+        onchange={(k, v, g) => run(() => controller.updateEffectLayer(id, { values: { [k]: v as never } }, commit(g)))}
+        onpreset={(values) => run(() => controller.updateEffectLayer(id, { values: values as never }))}
+      />
+    </div>
+  {/if}
+  {#if layer && all.some((f) => f.kind === 'effect')}
+    {@const id = layer.id}
+    <ol class="space-y-1" data-effect-part="filters">
+      {#each all as f, index (f.id)}
+        {#if f.kind === 'effect'}
+          {@const label = f.name ?? f.effect}
+          <li class="rounded border border-slate-700 p-1" data-smart-effect={f.id}>
+            <div class="flex items-center gap-1">
+              <input type="checkbox" checked={f.enabled} aria-label="{label} on" onchange={(e) => {
+                const enabled = e.currentTarget.checked;
+                run(() => controller.updateEffectFilter(id, f.id, { enabled }));
+              }} />
+              <button type="button" class="min-w-0 flex-1 truncate text-left text-slate-200" aria-expanded={open === f.id} onclick={() => (open = open === f.id ? null : f.id)}>{label}</button>
+              <button type="button" class={btn} disabled={index === all.length - 1} aria-label="Move up" onclick={() => run(() => controller.updateEffectFilter(id, f.id, { index: index + 1 }))}>↑</button>
+              <button type="button" class={btn} disabled={index === 0} aria-label="Move down" onclick={() => run(() => controller.updateEffectFilter(id, f.id, { index: index - 1 }))}>↓</button>
+              <button type="button" class={btn} aria-label="Remove {label}" onclick={() => run(() => controller.removeSmartFilter(id, f.id))}>✕</button>
+            </div>
+            {#if open === f.id}
+              <div class="mt-1 space-y-2">
+                <label class="flex items-center gap-1">
+                  <span class="w-14 text-[11px] text-slate-300">Opacity</span>
+                  <input type="range" min="0" max="1" step="0.01" class="flex-1" value={f.opacity} aria-label="{label} opacity" oninput={(e) => {
+                    const opacity = Number(e.currentTarget.value);
+                    run(() => controller.updateEffectFilter(id, f.id, { opacity }));
+                  }} />
+                </label>
+                <ImageEffectControls
+                  {provider}
+                  effect={f.effect}
+                  name={f.name}
+                  values={f.values}
+                  onchange={(k, v, g) => run(() => controller.updateEffectFilter(id, f.id, { values: { [k]: v as never } }, commit(g)))}
+                  onpreset={(values) => run(() => controller.updateEffectFilter(id, f.id, { values: values as never }))}
+                />
+              </div>
+            {/if}
+          </li>
+        {/if}
+      {/each}
+    </ol>
+  {/if}
+  {#if !layer}<p class="text-[11px] text-slate-400">Select a layer to apply effects to it.</p>{/if}
+  {#if message}<p role="alert" class="text-[11px] text-rose-400">{message}</p>{/if}
+</section>

package/dist/image-editor/ImageProviderEffectsPanel.svelte.d.ts

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

package/dist/image-editor/ImageProviderEffectsPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageProviderEffectsPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/ImageProviderEffectsPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,qBAAqB,EAA0C,MAAM,+BAA+B,CAAC;AAM5H,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8GH,QAAA,MAAM,yBAAyB,2CAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}

package/dist/image-editor/imageEditorState.svelte.d.ts

@@ -1,4 +1,5 @@
-import { ImageEditorController, type ImageEditorFit, type ImageEditorOptions, type ImageEditorState, type ImageEditorTool, type CropBox, type AspectRatio, type ImageAdjustments, type DepthMaskOptions, type Annotation, type CreateAnnotationPayload, type ExportOptions, type SerializedImageEditorState, type AIResultOptions, type ImagePoint, type AdjustmentKind, type AdjustmentLayerInit, type AdjustmentLayerUpdate, type ImageHistogram } from '@pixerate/editor/image-editor';
+import type { ToolRegistry } from '@pixerate/editor/tools';
+import { ImageEditorController, type ImageEffectsToolProviderOptions, type ImageEditorFit, type ImageEditorOptions, type ImageEditorState, type ImageEditorTool, type CropBox, type AspectRatio, type ImageAdjustments, type DepthMaskOptions, type Annotation, type CreateAnnotationPayload, type ExportOptions, type SerializedImageEditorState, type AIResultOptions, type ImagePoint, type AdjustmentKind, type AdjustmentLayerInit, type AdjustmentLayerUpdate, type ImageHistogram } from '@pixerate/editor/image-editor';
 export declare function createReactiveImageEditor(options?: ImageEditorOptions): {
     readonly controller: ImageEditorController;
     readonly state: ImageEditorState;
@@ -68,4 +69,11 @@ export declare function createImageHistogram(controller: ImageEditorController):
     readonly current: ImageHistogram | null;
     destroy(): void;
 };
+/**
+ * Registers the image editor's provider-effect tools (`search_effects`, `describe_effect`,
+ * `apply_effect`, `add_effect_layer`, …) 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 useImageEffectsTools(registry: ToolRegistry | null | undefined | (() => ToolRegistry | null | undefined), controller: ImageEditorController, options?: ImageEffectsToolProviderOptions): void;
 //# sourceMappingURL=imageEditorState.svelte.d.ts.map

package/dist/image-editor/imageEditorState.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"imageEditorState.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/imageEditorState.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,OAAO,EACZ,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,KAAK,uBAAuB,EAC5B,KAAK,aAAa,EAClB,KAAK,0BAA0B,EAC/B,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EACpB,MAAM,+BAA+B,CAAC;AAEvC,wBAAgB,yBAAyB,CAAC,OAAO,GAAE,kBAAuB;;;;IA2BtE,mGAAmG;;;kBAQrF,eAAe;kBAGf,OAAO,GAAG,IAAI;2BAGL,WAAW;;oBAMlB,MAAM;yBAGD,MAAM;;;4BASH,OAAO,CAAC,gBAAgB,CAAC;;IAMjD,oGAAoG;;IAIpG,mEAAmE;6BAC1C,cAAc,GAAG,mBAAmB,UAAU,MAAM;8BAGnD,MAAM,UAAU,qBAAqB;8BAGrC,MAAM;4BAGR,MAAM,WAAW,MAAM;8BAGrB,MAAM,YAAY,OAAO;0BAG7B,OAAO,CAAC,gBAAgB,CAAC;;uBAM5B,uBAAuB;yBAGrB,MAAM,WAAW,OAAO,CAAC,UAAU,CAAC;yBAGpC,MAAM;;yBAMN,MAAM,GAAG,IAAI;;;;oBAYlB,MAAM;qBAGL,MAAM;;kBAMT,MAAM;gBAGR,UAAU;4BAGE,OAAO;gBAGnB,cAAc;mBAGX,MAAM,GAAG,gBAAgB;qBAGvB,aAAa;kBAGhB,aAAa;;mBAMZ,0BAA0B;sBAGvB;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;yBAG5C;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;2BAG7C,IAAI,CAAC,aAAa,EAAE,QAAQ,GAAG,SAAS,CAAC;IAGhE,kGAAkG;oCAClE,MAAM,YAAY,eAAe;IAGjE,6GAA6G;4CACrE,MAAM,YAAY,eAAe;IAGzE,8EAA8E;;EAMjF;AAED,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAE/E,6GAA6G;AAC7G,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,qBAAqB;;;EAarE"}
+{"version":3,"file":"imageEditorState.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/imageEditorState.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EACL,qBAAqB,EAErB,KAAK,+BAA+B,EACpC,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,OAAO,EACZ,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,KAAK,uBAAuB,EAC5B,KAAK,aAAa,EAClB,KAAK,0BAA0B,EAC/B,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EACpB,MAAM,+BAA+B,CAAC;AAEvC,wBAAgB,yBAAyB,CAAC,OAAO,GAAE,kBAAuB;;;;IA2BtE,mGAAmG;;;kBAQrF,eAAe;kBAGf,OAAO,GAAG,IAAI;2BAGL,WAAW;;oBAMlB,MAAM;yBAGD,MAAM;;;4BASH,OAAO,CAAC,gBAAgB,CAAC;;IAMjD,oGAAoG;;IAIpG,mEAAmE;6BAC1C,cAAc,GAAG,mBAAmB,UAAU,MAAM;8BAGnD,MAAM,UAAU,qBAAqB;8BAGrC,MAAM;4BAGR,MAAM,WAAW,MAAM;8BAGrB,MAAM,YAAY,OAAO;0BAG7B,OAAO,CAAC,gBAAgB,CAAC;;uBAM5B,uBAAuB;yBAGrB,MAAM,WAAW,OAAO,CAAC,UAAU,CAAC;yBAGpC,MAAM;;yBAMN,MAAM,GAAG,IAAI;;;;oBAYlB,MAAM;qBAGL,MAAM;;kBAMT,MAAM;gBAGR,UAAU;4BAGE,OAAO;gBAGnB,cAAc;mBAGX,MAAM,GAAG,gBAAgB;qBAGvB,aAAa;kBAGhB,aAAa;;mBAMZ,0BAA0B;sBAGvB;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;yBAG5C;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;2BAG7C,IAAI,CAAC,aAAa,EAAE,QAAQ,GAAG,SAAS,CAAC;IAGhE,kGAAkG;oCAClE,MAAM,YAAY,eAAe;IAGjE,6GAA6G;4CACrE,MAAM,YAAY,eAAe;IAGzE,8EAA8E;;EAMjF;AAED,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAE/E,6GAA6G;AAC7G,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,qBAAqB;;;EAarE;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/image-editor/imageEditorState.svelte.js

@@ -1,4 +1,4 @@
-import { ImageEditorController, } from '@pixerate/editor/image-editor';
+import { ImageEditorController, createImageEffectsToolProvider, } from '@pixerate/editor/image-editor';
 export function createReactiveImageEditor(options = {}) {
     const controller = new ImageEditorController(options);
     let state = $state(controller.getState());
@@ -186,3 +186,17 @@ export function createImageHistogram(controller) {
         },
     };
 }
+/**
+ * Registers the image editor's provider-effect tools (`search_effects`, `describe_effect`,
+ * `apply_effect`, `add_effect_layer`, …) 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 useImageEffectsTools(registry, controller, options = {}) {
+    $effect(() => {
+        const target = typeof registry === 'function' ? registry() : registry;
+        if (!target)
+            return;
+        return target.register(createImageEffectsToolProvider(controller, options));
+    });
+}

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

@@ -13,6 +13,7 @@ import type BrushOptionsBarComponent from "./BrushOptionsBar.svelte";
 import type FreeTransformOptionsBarComponent from "./FreeTransformOptionsBar.svelte";
 import type ShapeOptionsBarComponent from "./ShapeOptionsBar.svelte";
 import type TypeOptionsBarComponent from "./TypeOptionsBar.svelte";
+import type ImageProviderEffectsPanelComponent from "./ImageProviderEffectsPanel.svelte";
 export { default as ImageEditor } from './ImageEditor.svelte';
 export { default as PaintGradientEditor } from './PaintGradientEditor.svelte';
 export { default as Histogram } from './Histogram.svelte';
@@ -28,6 +29,7 @@ export { default as BrushOptionsBar } from './BrushOptionsBar.svelte';
 export { default as FreeTransformOptionsBar } from './FreeTransformOptionsBar.svelte';
 export { default as ShapeOptionsBar } from './ShapeOptionsBar.svelte';
 export { default as TypeOptionsBar } from './TypeOptionsBar.svelte';
+export { default as ImageProviderEffectsPanel } from './ImageProviderEffectsPanel.svelte';
 export * from './imageEditorState.svelte.js';
 export type ImageEditorProps = ComponentProps<typeof ImageEditorComponent>;
 export type HistogramProps = ComponentProps<typeof HistogramComponent>;
@@ -43,5 +45,6 @@ export type BrushOptionsBarProps = ComponentProps<typeof BrushOptionsBarComponen
 export type FreeTransformOptionsBarProps = ComponentProps<typeof FreeTransformOptionsBarComponent>;
 export type ShapeOptionsBarProps = ComponentProps<typeof ShapeOptionsBarComponent>;
 export type TypeOptionsBarProps = ComponentProps<typeof TypeOptionsBarComponent>;
+export type ImageProviderEffectsPanelProps = ComponentProps<typeof ImageProviderEffectsPanelComponent>;
 export { applyRegionMosaic, applyRegionBlur, resolveMosaicRegionBounds, type MosaicRegion, type MosaicImageDataLike } from '@pixerate/editor/image-editor';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/image-editor/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/image-editor/index.ts"],"names":[],"mappings":"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"}

package/dist/image-editor/index.js

@@ -13,5 +13,6 @@ export { default as BrushOptionsBar } from './BrushOptionsBar.svelte';
 export { default as FreeTransformOptionsBar } from './FreeTransformOptionsBar.svelte';
 export { default as ShapeOptionsBar } from './ShapeOptionsBar.svelte';
 export { default as TypeOptionsBar } from './TypeOptionsBar.svelte';
+export { default as ImageProviderEffectsPanel } from './ImageProviderEffectsPanel.svelte';
 export * from './imageEditorState.svelte.js';
 export { applyRegionMosaic, applyRegionBlur, resolveMosaicRegionBounds } from '@pixerate/editor/image-editor';

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"}