@pixerate/editor-svelte 0.117.1 → 0.118.0

package/dist/video-editor/ClipInspector.svelte

@@ -25,6 +25,16 @@
     videoTransitionAudioCurve,
     videoKeyframeToggleEdit,
     videoKeyframeValueEdit,
+    videoClipHeading,
+    videoMaskEdit,
+    videoSkinProtectionEdits,
+    VIDEO_ADJUSTMENT_SCOPES,
+    VIDEO_ADJUSTMENT_SCOPE_LABELS,
+    VIDEO_MASK_SHAPES,
+    VIDEO_MASK_SHAPE_LABELS,
+    type VideoAdjustmentScope,
+    type VideoClipMask,
+    type VideoMaskShape,
     type VideoEdit,
     type VideoEditorController,
     type VideoFadeCurve,
@@ -166,6 +176,46 @@
     // A strength of 0 changes nothing, so it takes the LUT off.
     setLut(n > 0 ? { ...lut, strength: Math.min(1, n) } : null, n > 0 ? 'Change LUT strength' : 'Remove LUT');
   }
+  function skinProtection(raw: string) {
+    const n = Number(raw);
+    if (!clip || !raw.trim() || !Number.isFinite(n)) return;
+    const r = controller.apply(videoSkinProtectionEdits(editor.project, [clip.id], n), n > 0 ? 'Protect skin tones' : 'Stop protecting skin tones');
+    if (!r.ok) localError = { text: r.error, revision: editor.revision };
+  }
+  function setScope(scope: VideoAdjustmentScope) {
+    if (!clip || !at) return;
+    const target = editor.project.tracks.find((t) => t.kind === 'video' && t.id !== at.track.id)?.id;
+    if (scope === 'track') apply({ op: 'update_clip', clip: clip.id, set: { scope, targetTrack: (clip.type === 'adjustment' ? clip.targetTrack : undefined) ?? target ?? at.track.id } }, 'Change adjustment scope');
+    else apply({ op: 'update_clip', clip: clip.id, ...(scope === 'underneath' ? { remove: ['scope', 'targetTrack'] } : { set: { scope }, remove: ['targetTrack'] }) }, 'Change adjustment scope');
+  }
+  function setMaskShape(shape: VideoMaskShape | '') {
+    if (!clip) return;
+    const { points: _p, cornerRadius: _c, ...rest } = clip.mask ?? ({ shape: 'ellipse' } as VideoClipMask);
+    const points = [
+      { x: 0.5, y: 0.2 },
+      { x: 0.8, y: 0.8 },
+      { x: 0.2, y: 0.8 }
+    ];
+    apply(videoMaskEdit(clip.id, shape ? { ...rest, shape, ...(shape === 'polygon' ? { points } : {}) } : null), shape ? 'Mask clip' : 'Remove mask');
+  }
+  function setMaskValue(key: 'width' | 'height' | 'feather' | 'rotation', raw: string) {
+    if (!clip?.mask) return;
+    const n = Number(raw);
+    if (raw.trim() && !Number.isFinite(n)) return;
+    const { [key]: _old, ...rest } = clip.mask;
+    apply(videoMaskEdit(clip.id, raw.trim() ? { ...rest, [key]: n } : rest), 'Change mask');
+  }
+  function invertMask(on: boolean) {
+    if (!clip?.mask) return;
+    const { inverted: _i, ...rest } = clip.mask;
+    apply(videoMaskEdit(clip.id, on ? { ...rest, inverted: true } : rest), 'Invert mask');
+  }
+  const MASK_FIELDS = [
+    { key: 'width', label: 'Mask width', step: 0.05, placeholder: '0.5' },
+    { key: 'height', label: 'Mask height', step: 0.05, placeholder: '0.5' },
+    { key: 'feather', label: 'Feather (px)', step: 5, placeholder: '0' },
+    { key: 'rotation', label: 'Mask angle', step: 5, placeholder: '0' }
+  ] as const;
   function transitionAudioCurve(curve: string) {
     if (!clip?.transition) return;
     const { audioCurve: _, ...rest } = clip.transition;
@@ -198,9 +248,8 @@
     </p>
   {:else}
     <div class="flex items-center gap-1">
-      <span class="font-medium">Clip</span>
+      <span class="font-medium">{videoClipHeading(clip)}</span>
       <code class="text-[10px] text-muted-foreground">{clip.id}</code>
-      <span class="text-[10px] text-muted-foreground">{clip.type}</span>
       {#if at?.track.locked}<span class="ml-auto text-[10px] text-amber-500">Track {at.track.name ?? at.track.id} is locked</span>{/if}
     </div>
     <div class="grid grid-cols-[5.5rem_1fr] items-center gap-x-2 gap-y-1">
@@ -244,6 +293,41 @@
         {#if clip.grade?.lut}
           <span class="text-muted-foreground">LUT strength</span>
           <input class={input} type="number" min="0" max="1" step="0.05" aria-label="LUT strength" {disabled} value={clip.grade.lut.strength ?? 1} onchange={(e) => lutStrength(e.currentTarget.value)} data-field="grade.lut.strength" />
+          <span class="text-muted-foreground">Protect skin</span>
+          <input class={input} type="number" min="0" max="1" step="0.1" aria-label="Protect skin tones" title="How much of the LUT to hold back on skin tones (0 to 1)" {disabled} value={clip.grade.lut.preserveSkinTones ?? 0} onchange={(e) => skinProtection(e.currentTarget.value)} data-field="grade.lut.preserveSkinTones" />
+        {/if}
+      {/if}
+      {#if clip.type === 'adjustment'}
+        <span class="text-muted-foreground">Changes</span>
+        <select class={input} aria-label="Adjustment scope" {disabled} value={clip.scope ?? 'underneath'} onchange={(e) => setScope(e.currentTarget.value as VideoAdjustmentScope)} data-field="scope">
+          {#each VIDEO_ADJUSTMENT_SCOPES as s (s)}
+            <option value={s}>{VIDEO_ADJUSTMENT_SCOPE_LABELS[s]}</option>
+          {/each}
+        </select>
+        {#if clip.scope === 'track'}
+          <span class="text-muted-foreground">Track</span>
+          <select class={input} aria-label="Adjusted track" {disabled} value={clip.targetTrack ?? ''} onchange={(e) => set('targetTrack', e.currentTarget.value, 'Change adjusted track')} data-field="targetTrack">
+            {#each editor.project.tracks.filter((t) => t.kind === 'video') as t (t.id)}
+              <option value={t.id}>{t.name ?? t.id}</option>
+            {/each}
+          </select>
+        {/if}
+      {/if}
+      {#if at?.track.kind === 'video'}
+        <span class="text-muted-foreground">Mask</span>
+        <select class={input} aria-label="Mask shape" {disabled} value={clip.mask?.shape ?? ''} onchange={(e) => setMaskShape(e.currentTarget.value as VideoMaskShape | '')} data-field="mask">
+          <option value="">none</option>
+          {#each VIDEO_MASK_SHAPES as s (s)}
+            <option value={s}>{VIDEO_MASK_SHAPE_LABELS[s]}</option>
+          {/each}
+        </select>
+        {#if clip.mask}
+          {#each MASK_FIELDS as f (f.key)}
+            <span class="text-muted-foreground">{f.label}</span>
+            <input class={input} type="number" step={f.step} min={f.key === 'rotation' ? undefined : 0} placeholder={f.placeholder} aria-label={f.label} {disabled} value={clip.mask[f.key] ?? ''} onchange={(e) => setMaskValue(f.key, e.currentTarget.value)} data-field="mask.{f.key}" />
+          {/each}
+          <span class="text-muted-foreground">Invert mask</span>
+          <input type="checkbox" class="justify-self-start" aria-label="Invert mask" {disabled} checked={!!clip.mask.inverted} onchange={(e) => invertMask(e.currentTarget.checked)} data-field="mask.inverted" />
         {/if}
       {/if}
       {#if at?.track.kind === 'video'}
@@ -325,7 +409,7 @@
       {: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}
+      {:else if clip.type === 'color'}
         <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" />
       {/if}

package/dist/video-editor/EditPlanPreview.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { describeVideoEditPlan, formatVideoSeconds, type VideoEditorController } from '@pixerate/editor/video-editor';
+  import { videoEditorStateOf } from './createVideoEditor.svelte.js';
+
+  interface Props {
+    controller: VideoEditorController;
+    /** Allow accepting plans (default true; discarding is always allowed). */
+    editable?: boolean;
+    class?: string;
+  }
+
+  let { controller, editable = true, class: className = '' }: Props = $props();
+  const view = videoEditorStateOf(() => controller);
+  const editor = $derived(view.current);
+  const total = $derived(Math.max(1, editor.duration));
+  let message = $state<string | null>(null);
+  const btn = 'rounded border border-border px-2 py-0.5 text-[11px] disabled:opacity-40';
+
+  function accept(id: string) {
+    const r = controller.applyPlan(id);
+    message = r.ok ? null : r.error;
+  }
+  function discard(id: string) {
+    controller.discardPlan(id);
+    message = null;
+  }
+</script>
+
+<!--
+  Proposed edit plans waiting for review: title, what each would do (length change, clips added,
+  changed and removed, new problems), a strip of the stretches it cuts (click to go there) and
+  Accept / Discard. Accepting applies the plan as one undo step. Renders nothing without plans.
+-->
+{#if editor.plans.length}
+  <section class="flex flex-col gap-2 rounded-md border border-amber-500/50 bg-amber-500/5 p-2 text-xs {className}" aria-label="Proposed edits" data-edit-plans="">
+    {#each editor.plans as plan (plan.id)}
+      {@const s = plan.summary}
+      {@const stale = editor.revision >= 0 && controller.isPlanStale(plan.id)}
+      <article class="flex flex-col gap-1" data-edit-plan={plan.id}>
+        <div class="flex items-center gap-2">
+          <h3 class="flex-1 font-semibold">{plan.title}</h3>
+          <span class="tabular-nums {s.durationDelta < 0 ? 'text-emerald-600' : 'text-muted-foreground'}" data-plan-delta="">
+            {s.durationDelta < 0 ? '−' : s.durationDelta > 0 ? '+' : '±'}{formatVideoSeconds(Math.abs(s.durationDelta))}
+          </span>
+        </div>
+        {#if plan.description}<p class="text-muted-foreground">{plan.description}</p>{/if}
+        <p class="text-muted-foreground" data-plan-summary="">{describeVideoEditPlan(plan)} · {formatVideoSeconds(s.durationBefore)} → {formatVideoSeconds(s.durationAfter)}</p>
+        {#if plan.ranges?.length}
+          <div class="relative h-3 w-full overflow-hidden rounded bg-muted" aria-label="Stretches the plan cuts" data-plan-strip="">
+            {#each plan.ranges as r, i (i)}
+              <button
+                type="button"
+                class="absolute top-0 h-full bg-rose-500/70 hover:bg-rose-600"
+                style="left: {(r.from / total) * 100}%; width: {Math.max(0.4, ((r.to - r.from) / total) * 100)}%"
+                title={`${r.reason ? `${r.reason}: ` : ''}${r.text ?? ''} (${formatVideoSeconds(r.from)})`}
+                aria-label={`Go to ${r.reason ?? 'cut'} at ${formatVideoSeconds(r.from)}`}
+                onclick={() => controller.seek(r.from)}
+              ></button>
+            {/each}
+          </div>
+        {/if}
+        {#if s.newIssues.length}<p class="text-amber-600">It would add {s.newIssues.length} problem{s.newIssues.length > 1 ? 's' : ''}: {s.newIssues[0].message}</p>{/if}
+        {#if stale}<p class="text-amber-600" data-plan-stale="">The project changed since this plan was made; it is checked again when accepted.</p>{/if}
+        <div class="flex gap-1">
+          <button type="button" class={btn} disabled={!editable || editor.readOnly} onclick={() => accept(plan.id)} data-accept-plan="">Accept plan</button>
+          <button type="button" class={btn} onclick={() => discard(plan.id)} data-discard-plan="">Discard</button>
+        </div>
+      </article>
+    {/each}
+    {#if message}<p class="text-red-500" role="alert" data-plan-error="">{message}</p>{/if}
+  </section>
+{/if}

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

@@ -0,0 +1,10 @@
+import { type VideoEditorController } from '@pixerate/editor/video-editor';
+interface Props {
+    controller: VideoEditorController;
+    /** Allow accepting plans (default true; discarding is always allowed). */
+    editable?: boolean;
+    class?: string;
+}
+declare const EditPlanPreview: import("svelte").Component<Props, {}, "">;
+type EditPlanPreview = ReturnType<typeof EditPlanPreview>;
+export default EditPlanPreview;

package/dist/video-editor/TranscriptEditor.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import type { VideoDisfluencyKind, VideoEditorController } from '@pixerate/editor/video-editor';
+  import { transcriptVideoOf } from './createVideoEditor.svelte.js';
+
+  interface Props {
+    controller: VideoEditorController;
+    /** Track whose words to show (default: the first audio track with a transcribed clip, else the first video track with one). */
+    track?: string;
+    /** Deleting words proposes a plan for review instead of cutting at once (default false). */
+    planFirst?: boolean;
+    /** Allow cutting by text (default true). */
+    editable?: boolean;
+    class?: string;
+  }
+
+  let { controller, track, planFirst = false, editable = true, class: className = '' }: Props = $props();
+  const view = transcriptVideoOf(() => controller, () => ({ track, planFirst }));
+  const ts = $derived(view.current);
+  const canEdit = $derived(editable && ts.editable);
+  let anchor = $state<number | null>(null);
+  const btn = 'rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40';
+  const CHIP: Record<VideoDisfluencyKind, string> = {
+    filler: 'bg-amber-400/30 text-amber-700 dark:text-amber-300',
+    pause: 'bg-sky-400/25 text-sky-700 dark:text-sky-300',
+    repetition: 'bg-violet-400/25 text-violet-700 dark:text-violet-300'
+  };
+  const KIND_LABEL: Record<VideoDisfluencyKind, string> = { filler: 'filler', pause: 'pause', repetition: 'repeat' };
+
+  function pick(e: MouseEvent, i: number) {
+    const t = view.transcript;
+    if (e.shiftKey && anchor !== null) t.select(anchor, i);
+    else {
+      anchor = i;
+      t.select(i);
+      t.seekToWord(i);
+    }
+  }
+  function onKey(e: KeyboardEvent) {
+    if (canEdit && ts.selection && (e.key === 'Delete' || e.key === 'Backspace')) {
+      e.preventDefault();
+      view.transcript.deleteSelection();
+    }
+  }
+</script>
+
+<!--
+  Edit by text, with disfluencies marked: the word under the playhead highlighted as it plays,
+  fillers, long pauses and stutters marked and listed as chips that cut each one out with a click.
+  Click a word to go to it, Shift-click to select a run, Delete to cut it (or propose the cut with
+  planFirst). "Plan cleanup" proposes every disfluency as one plan for review (see EditPlanPreview).
+-->
+{#if !ts.words.length}
+  <p class="text-xs text-muted-foreground {className}" data-transcript-editor="" data-transcript-empty="">
+    No transcribed media on the timeline. Attach a transcript (Whisper JSON, .srt or .vtt) to edit by text.
+  </p>
+{:else}
+  <div class="flex flex-col gap-2 text-xs {className}" data-transcript-editor="">
+    <div class="max-h-56 overflow-y-auto leading-6" role="listbox" aria-label="Transcript" aria-multiselectable="true" tabindex="0" onkeydown={onKey}>
+      {#each ts.words as w, i (`${w.clip}:${w.index}`)}
+        {@const selected = !!ts.selection && i >= ts.selection[0] && i <= ts.selection[1]}
+        {@const kinds = ts.flags[i]}
+        <span
+          role="option"
+          aria-selected={selected}
+          tabindex="-1"
+          class="cursor-pointer rounded px-0.5 {selected ? 'bg-rose-500/30' : i === ts.current ? 'bg-amber-400/50' : kinds?.length ? CHIP[kinds[0]] : 'hover:bg-muted'}"
+          data-word={i}
+          data-current={i === ts.current ? '' : undefined}
+          data-selected={selected ? '' : undefined}
+          data-disfluency={kinds?.join(' ') || undefined}
+          title={kinds?.length ? kinds.map((k) => KIND_LABEL[k]).join(', ') : undefined}
+          onclick={(e) => pick(e, i)}
+          onkeydown={() => {}}>{w.word}</span
+        >{#if kinds?.includes('pause')}<span class="mx-0.5 text-sky-500" aria-hidden="true">⏸</span>{:else}{' '}{/if}
+      {/each}
+    </div>
+    {#if canEdit}
+      <div class="flex flex-wrap items-center gap-1">
+        <button type="button" class={btn} disabled={!ts.selection} onclick={() => view.transcript.deleteSelection()} data-delete-words="">
+          {planFirst ? 'Propose deleting words' : 'Delete words'}
+        </button>
+        <button type="button" class={btn} disabled={!ts.disfluencies.length} onclick={() => view.transcript.planCleanup()} data-plan-cleanup="">
+          Plan cleanup ({ts.disfluencies.length})
+        </button>
+      </div>
+    {/if}
+    {#if ts.disfluencies.length}
+      <ul class="flex flex-wrap gap-1" aria-label="Disfluencies" data-disfluencies="">
+        {#each ts.disfluencies as d, i (`${d.kind}:${d.from}`)}
+          <li class="flex items-center gap-1 rounded px-1 {CHIP[d.kind]}" data-disfluency-chip={d.kind}>
+            <button type="button" class="tabular-nums" title="Go to it" onclick={() => controller.seek(d.from)}>
+              {KIND_LABEL[d.kind]}: {d.kind === 'pause' ? `${((d.to - d.from) / 1000).toFixed(1)} s` : d.text}
+            </button>
+            {#if canEdit}
+              <button type="button" aria-label={`Cut ${KIND_LABEL[d.kind]} ${d.text}`} onclick={() => view.transcript.removeDisfluency(i)} data-cut-disfluency={i}>✕</button>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+    {#if ts.error}
+      <p class="text-red-500" role="alert" data-transcript-error="">{ts.error}</p>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,14 @@
+import type { VideoEditorController } from '@pixerate/editor/video-editor';
+interface Props {
+    controller: VideoEditorController;
+    /** Track whose words to show (default: the first audio track with a transcribed clip, else the first video track with one). */
+    track?: string;
+    /** Deleting words proposes a plan for review instead of cutting at once (default false). */
+    planFirst?: boolean;
+    /** Allow cutting by text (default true). */
+    editable?: boolean;
+    class?: string;
+}
+declare const TranscriptEditor: import("svelte").Component<Props, {}, "">;
+type TranscriptEditor = ReturnType<typeof TranscriptEditor>;
+export default TranscriptEditor;

package/dist/video-editor/VideoEditor.svelte

@@ -5,6 +5,8 @@
   import ClipInspector from './ClipInspector.svelte';
   import MediaBin from './MediaBin.svelte';
   import TranscriptPanel from './TranscriptPanel.svelte';
+  import TranscriptEditor from './TranscriptEditor.svelte';
+  import EditPlanPreview from './EditPlanPreview.svelte';
   import VideoPreview from './VideoPreview.svelte';
   import VideoScopes from './VideoScopes.svelte';
   import VideoTimeline from './VideoTimeline.svelte';
@@ -30,6 +32,12 @@
     showIssues?: boolean;
     /** Show the transcript panel for editing by text (default true). */
     showTranscript?: boolean;
+    /**
+     * How the transcript is shown: `panel` (default) is `TranscriptPanel`, which also loads
+     * transcript files; `editor` marks fillers, pauses and stutters and plans cleanups for review
+     * (`TranscriptEditor`).
+     */
+    transcriptMode?: 'editor' | 'panel';
     /** Show colour scopes (histogram, luma waveform, vectorscope) of the preview under it (default false). */
     showScopes?: boolean;
     /**
@@ -47,7 +55,7 @@
     onplaybackreveal?: () => void | Promise<void>;
   }
 
-  let { controller, options, editable = true, pxPerSecond = $bindable(100), showIssues = true, showTranscript = true, showScopes = false, effects, showEffects, class: className = '', playback, onplaybackreveal }: Props = $props();
+  let { controller, options, editable = true, pxPerSecond = $bindable(100), showIssues = true, showTranscript = true, transcriptMode = 'panel', showScopes = false, effects, showEffects, class: className = '', playback, onplaybackreveal }: 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)));
@@ -55,7 +63,7 @@
   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'))));
+  const effectsShown = $derived(showEffects ?? !!(editor.effectsProvider || editor.project.tracks.some((t) => t.clips.some((c) => c.type === 'effect' || c.type === 'adjustment' || c.effects?.length || c.transition?.type === 'effect'))));
 </script>
 
 {#snippet issueList()}
@@ -79,7 +87,8 @@
     <VideoTransport controller={ctl} editable={false} />
     {#if showScopes}<VideoScopes controller={ctl} />{/if}
     <VideoTimeline controller={ctl} bind:pxPerSecond editable={false} {playback} {onplaybackreveal} />
-    {#if showTranscript}<TranscriptPanel controller={ctl} editable={false} />{/if}
+    <EditPlanPreview controller={ctl} editable={false} />
+    {#if showTranscript}{#if transcriptMode === 'editor'}<TranscriptEditor controller={ctl} editable={false} />{:else}<TranscriptPanel controller={ctl} editable={false} />{/if}{/if}
     {@render issueList()}
   </div>
 {:else}
@@ -96,7 +105,8 @@
     </div>
     <div class="flex min-w-0 flex-col gap-2 lg:col-span-3">
       <VideoTimeline controller={ctl} bind:pxPerSecond {playback} {onplaybackreveal} />
-      {#if showTranscript}<TranscriptPanel controller={ctl} />{/if}
+      <EditPlanPreview controller={ctl} />
+      {#if showTranscript}{#if transcriptMode === 'editor'}<TranscriptEditor controller={ctl} />{:else}<TranscriptPanel controller={ctl} />{/if}{/if}
       {@render issueList()}
     </div>
   </div>

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

@@ -17,6 +17,12 @@ interface Props {
     showIssues?: boolean;
     /** Show the transcript panel for editing by text (default true). */
     showTranscript?: boolean;
+    /**
+     * How the transcript is shown: `panel` (default) is `TranscriptPanel`, which also loads
+     * transcript files; `editor` marks fillers, pauses and stutters and plans cleanups for review
+     * (`TranscriptEditor`).
+     */
+    transcriptMode?: 'editor' | 'panel';
     /** Show colour scopes (histogram, luma waveform, vectorscope) of the preview under it (default false). */
     showScopes?: boolean;
     /**

package/dist/video-editor/VideoEffectsPanel.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
-  import { findVideoClip, isVideoKeyframes, type VideoEditorController, type VideoEffectEditResult, type VideoEffectValues } from '@pixerate/editor/video-editor';
+  import { findVideoClip, isVideoKeyframes, openVideoClipEffectAuthoring, type VideoClipEffectAuthoring, type VideoEditorController, type VideoEffectEditResult, type VideoEffectValues } from '@pixerate/editor/video-editor';
+  import { onDestroy } from 'svelte';
   import EffectsBrowser from '../effects/EffectsBrowser.svelte';
+  import EffectAuthoringEditor from '../effects/EffectAuthoringEditor.svelte';
   import EffectControls from './EffectControls.svelte';
   import { videoEditorStateOf } from './createVideoEditor.svelte.js';
 
@@ -35,6 +37,25 @@
     );
   }
   const merge = (gesture: string | null) => ({ merge: gesture ?? undefined });
+  let authoring = $state.raw<VideoClipEffectAuthoring | null>(null);
+  function closeAuthoring() {
+    authoring?.dispose();
+    authoring = null;
+  }
+  function author(clipId: string, instance: string) {
+    closeAuthoring();
+    openVideoClipEffectAuthoring(controller, clipId, instance).then(
+      (a) => (authoring = a),
+      (err: unknown) => (message = err instanceof Error ? err.message : String(err))
+    );
+  }
+  async function commitAuthoring() {
+    if (!authoring) return;
+    const r = await authoring.commit();
+    message = r.ok ? (r.notes?.join(' ') ?? null) : r.error;
+    if (r.ok) closeAuthoring();
+  }
+  onDestroy(closeAuthoring);
 </script>
 
 <!--
@@ -115,6 +136,7 @@
               <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={disabled || !provider} aria-label="Author {label}" title="Tune and keyframe it in the effect authoring editor" onclick={() => author(clip!.id, e.id)} data-author-effect={e.id}>✎</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}
@@ -150,5 +172,14 @@
       {#if !clip.effects?.length}<p class="text-[11px] text-muted-foreground">No effects on this clip.</p>{/if}
     </div>
   {/if}
+  {#if authoring}
+    <div class="space-y-1 rounded border border-border p-1" data-effect-authoring={authoring.instance}>
+      <EffectAuthoringEditor session={authoring.session} showSource={false} previewSize={{ width: 240, height: 135 }} />
+      <div class="flex gap-1">
+        <button type="button" class={btn} {disabled} onclick={commitAuthoring} data-apply-authoring="">Apply to clip</button>
+        <button type="button" class={btn} onclick={closeAuthoring}>Close</button>
+      </div>
+    </div>
+  {/if}
   {#if message}<p role="alert" class="text-[11px] text-destructive">{message}</p>{/if}
 </section>

package/dist/video-editor/VideoTransport.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { formatVideoTimecode, parseVideoPreviewScale, VIDEO_PREVIEW_SCALE_OPTIONS, videoProjectHasProxies, type VideoEditorController } from '@pixerate/editor/video-editor';
+  import { formatVideoTimecode, parseVideoPreviewScale, VIDEO_PREVIEW_SCALE_OPTIONS, videoAddAdjustmentEdits, videoProjectHasProxies, type VideoEditorController } from '@pixerate/editor/video-editor';
   import { videoEditorStateOf } from './createVideoEditor.svelte.js';
 
   interface Props {
@@ -15,9 +15,16 @@
   const fps = $derived(editor.project.fps);
   const btn = 'rounded border border-border px-2 py-0.5 text-xs disabled:opacity-40';
   const locked = $derived(editor.readOnly);
+  function addAdjustment() {
+    const r = controller.apply(videoAddAdjustmentEdits(editor.project, editor.time), 'Add adjustment clip');
+    if (r.ok) {
+      const added = r.outcomes[r.outcomes.length - 1].clip;
+      if (added) controller.select([added]);
+    }
+  }
 </script>
 
-<!-- Play / pause, frame steps, the playhead's timecode, a preview size when there are proxies, and split, delete, undo and redo. -->
+<!-- Play / pause, frame steps, the playhead's timecode, a preview size when there are proxies, and split, delete, add an adjustment clip, undo and redo. -->
 <div class="flex flex-wrap items-center gap-1.5 text-xs {className}" data-video-transport="">
   <button type="button" class={btn} aria-label="Step back one frame" onclick={() => controller.step(-1)} data-step-back="">◀︎|</button>
   <button type="button" class={btn} aria-label={editor.playing ? 'Pause' : 'Play'} onclick={() => controller.toggle()} disabled={editor.duration <= 0} data-play="">
@@ -37,6 +44,7 @@
       <button type="button" class={btn} disabled={locked} onclick={() => controller.splitAtPlayhead()} title="Split at the playhead (S)" data-split="">Split</button>
       <button type="button" class={btn} disabled={locked || !editor.selection.length} onclick={() => controller.deleteSelection()} title="Delete the selected clips (Delete)" data-delete="">Delete</button>
       <button type="button" class={btn} disabled={locked || !editor.selection.length} onclick={() => controller.deleteSelection({ ripple: true })} title="Delete and close the gaps (Shift+Delete)" data-ripple-delete="">Ripple delete</button>
+      <button type="button" class={btn} disabled={locked} onclick={addAdjustment} title="Add an adjustment clip at the playhead over every track: its grade, effects and mask change the pictures underneath" data-add-adjustment="">Adjustment</button>
       <button type="button" class={btn} disabled={locked || !editor.canUndo} onclick={() => controller.undo()} title={editor.canUndo ? `Undo ${editor.undoLabel}` : 'Nothing to undo'} data-undo="">Undo</button>
       <button type="button" class={btn} disabled={locked || !editor.canRedo} onclick={() => controller.redo()} title={editor.canRedo ? `Redo ${editor.redoLabel}` : 'Nothing to redo'} data-redo="">Redo</button>
     </span>

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

@@ -1,4 +1,4 @@
-import { VideoEditorController, type VideoEffectsToolProviderOptions, type VideoEditorOptions, type VideoEditorState, type VideoEditorToolProviderOptions, type VideoEditResult, type VideoProject } from "@pixerate/editor/video-editor";
+import { VideoEditorController, TranscriptVideoController, type TranscriptVideoOptions, type TranscriptVideoState, type VideoDialogueToolProviderOptions, type VideoMusicToolProviderOptions, type VideoEffectsToolProviderOptions, type VideoEditorOptions, type VideoEditorState, type VideoEditorToolProviderOptions, type VideoEditResult, type VideoProject } from "@pixerate/editor/video-editor";
 import type { EditorDocument } from "@pixerate/editor/persistence";
 import type { ToolRegistry } from "@pixerate/editor/tools";
 export interface SvelteVideoEditor {
@@ -47,3 +47,22 @@ export declare function useVideoEditorTools(registry: ToolRegistry | null | unde
  * 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;
+/**
+ * Registers the talking-head cleanup tools (`find_video_disfluencies`, `plan_video_dialogue_cleanup`)
+ * for the lifetime of the calling component (skill `pixerate-talking-head-edit`).
+ */
+export declare function useVideoDialogueTools(registry: ToolRegistry | null | undefined | (() => ToolRegistry | null | undefined), controller: VideoEditorController, options?: VideoDialogueToolProviderOptions): void;
+/**
+ * Registers the music and mix tools (`find_video_beats`, `plan_video_beat_snap`, `duck_video_music`,
+ * `measure_video_loudness`, `normalize_video_loudness`) for the lifetime of the calling component
+ * (skill `pixerate-bgm-alignment`).
+ */
+export declare function useVideoMusicTools(registry: ToolRegistry | null | undefined | (() => ToolRegistry | null | undefined), controller: VideoEditorController, options?: VideoMusicToolProviderOptions): void;
+/**
+ * Svelte 5 rune: a `TranscriptVideoController` over a video editor and its reactive state. It is
+ * rebuilt when the editor, track or `planFirst` change, and destroyed with the calling component.
+ */
+export declare function transcriptVideoOf(getController: () => VideoEditorController, getOptions?: () => TranscriptVideoOptions): {
+    readonly current: TranscriptVideoState;
+    readonly transcript: TranscriptVideoController;
+};

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

@@ -1,5 +1,5 @@
 import { untrack } from "svelte";
-import { VideoEditorController, createVideoEditorToolProvider, createVideoEffectsToolProvider, createVideoEditorDocument, } from "@pixerate/editor/video-editor";
+import { VideoEditorController, createVideoEditorToolProvider, createVideoEffectsToolProvider, createVideoDialogueToolProvider, createVideoMusicToolProvider, TranscriptVideoController, createVideoEditorDocument, } 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.
@@ -78,3 +78,62 @@ export function useVideoEffectsTools(registry, controller, options = {}) {
         return target.register(createVideoEffectsToolProvider(controller, options));
     });
 }
+/**
+ * Registers the talking-head cleanup tools (`find_video_disfluencies`, `plan_video_dialogue_cleanup`)
+ * for the lifetime of the calling component (skill `pixerate-talking-head-edit`).
+ */
+export function useVideoDialogueTools(registry, controller, options = {}) {
+    $effect(() => {
+        const target = typeof registry === "function" ? registry() : registry;
+        if (!target)
+            return;
+        return target.register(createVideoDialogueToolProvider(controller, options));
+    });
+}
+/**
+ * Registers the music and mix tools (`find_video_beats`, `plan_video_beat_snap`, `duck_video_music`,
+ * `measure_video_loudness`, `normalize_video_loudness`) for the lifetime of the calling component
+ * (skill `pixerate-bgm-alignment`).
+ */
+export function useVideoMusicTools(registry, controller, options = {}) {
+    $effect(() => {
+        const target = typeof registry === "function" ? registry() : registry;
+        if (!target)
+            return;
+        return target.register(createVideoMusicToolProvider(controller, options));
+    });
+}
+/**
+ * Svelte 5 rune: a `TranscriptVideoController` over a video editor and its reactive state. It is
+ * rebuilt when the editor, track or `planFirst` change, and destroyed with the calling component.
+ */
+export function transcriptVideoOf(getController, getOptions = () => ({})) {
+    const initial = untrack(() => ({ controller: getController(), ...getOptions() }));
+    let built = initial;
+    let transcript = $state.raw(new TranscriptVideoController(initial.controller, initial));
+    let view = $state.raw(untrack(() => transcript.getState()));
+    $effect(() => {
+        const next = { controller: getController(), ...getOptions() };
+        untrack(() => {
+            if (next.controller !== built.controller || next.track !== built.track || !!next.planFirst !== !!built.planFirst) {
+                transcript.destroy();
+                transcript = new TranscriptVideoController(next.controller, next);
+                built = next;
+            }
+        });
+        const current = untrack(() => transcript);
+        view = current.getState();
+        return current.subscribe((state) => {
+            view = state;
+        });
+    });
+    $effect(() => () => untrack(() => transcript).destroy());
+    return {
+        get current() {
+            return view;
+        },
+        get transcript() {
+            return transcript;
+        },
+    };
+}

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

@@ -7,6 +7,8 @@ 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 TranscriptEditorComponent from "./TranscriptEditor.svelte";
+import type EditPlanPreviewComponent from "./EditPlanPreview.svelte";
 import type VideoEffectsPanelComponent from "./VideoEffectsPanel.svelte";
 export { default as VideoEditor } from "./VideoEditor.svelte";
 export { default as VideoPreview } from "./VideoPreview.svelte";
@@ -16,6 +18,8 @@ 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 TranscriptEditor } from "./TranscriptEditor.svelte";
+export { default as EditPlanPreview } from "./EditPlanPreview.svelte";
 export { default as VideoEffectsPanel } from "./VideoEffectsPanel.svelte";
 export * from "./createVideoEditor.svelte.js";
 export type VideoEditorProps = ComponentProps<typeof VideoEditorComponent>;
@@ -26,4 +30,6 @@ 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 TranscriptEditorProps = ComponentProps<typeof TranscriptEditorComponent>;
+export type EditPlanPreviewProps = ComponentProps<typeof EditPlanPreviewComponent>;
 export type VideoEffectsPanelProps = ComponentProps<typeof VideoEffectsPanelComponent>;

package/dist/video-editor/index.js

@@ -6,5 +6,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 TranscriptEditor } from "./TranscriptEditor.svelte";
+export { default as EditPlanPreview } from "./EditPlanPreview.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.117.1",
+  "version": "0.118.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -160,7 +160,7 @@
     "@tiptap/extension-bubble-menu": "^2.27.3",
     "@tiptap/extension-placeholder": "^2.27.3",
     "@tiptap/starter-kit": "^2.27.3",
-    "@pixerate/editor": "0.160.0"
+    "@pixerate/editor": "0.161.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",