@pixerate/editor-svelte 0.117.1 → 0.119.0

package/dist/effects/EffectParameters.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { effectFieldValue, effectParameterFields, type EffectDescription } from '@pixerate/editor/effects';
+  import { effectFieldValue, effectParameterFields, type EffectDescription, type EffectFieldOptions } from '@pixerate/editor/effects';
   import { parameterLabel, parameterValuesEqual, type ParameterValue } from '@pixerate/editor/parameters';
   import ParameterFieldControl from '../parameters/ParameterFieldControl.svelte';
 
@@ -23,12 +23,14 @@
     onpresetname?: (name: string) => void;
     /** Optional addon rendered next to the control label (e.g. keyframe toggle button). */
     addon?: import('svelte').Snippet<[string]>;
+    /** Families offered by font controls (`format: "font"`); default the system font catalog. */
+    fonts?: EffectFieldOptions['fonts'];
     disabled?: boolean;
     class?: string;
   }
 
-  let { description, values, onchange, onreset, keyframed, onpreset, onpresetname, addon, disabled = false, class: className = '' }: Props = $props();
-  const fields = $derived(effectParameterFields(description));
+  let { description, values, onchange, onreset, keyframed, onpreset, onpresetname, addon, fonts, disabled = false, class: className = '' }: Props = $props();
+  const fields = $derived(effectParameterFields(description, { fonts }));
   const idBase = `fx-${Math.random().toString(36).slice(2, 8)}`;
   let gesture: string | null = null;
   let count = 0;

package/dist/effects/EffectParameters.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type EffectDescription } from '@pixerate/editor/effects';
+import { type EffectDescription, type EffectFieldOptions } from '@pixerate/editor/effects';
 import { type ParameterValue } from '@pixerate/editor/parameters';
 interface Props {
     /** The effect's description (`describe`). */
@@ -20,6 +20,8 @@ interface Props {
     onpresetname?: (name: string) => void;
     /** Optional addon rendered next to the control label (e.g. keyframe toggle button). */
     addon?: import('svelte').Snippet<[string]>;
+    /** Families offered by font controls (`format: "font"`); default the system font catalog. */
+    fonts?: EffectFieldOptions['fonts'];
     disabled?: boolean;
     class?: string;
 }

package/dist/typography/FontPicker.svelte

@@ -0,0 +1,243 @@
+<script lang="ts">
+  import { onDestroy, untrack, type Snippet } from 'svelte';
+  import {
+    FONT_CATEGORIES,
+    FONT_CATEGORY_LABELS,
+    FontPickerModel,
+    type FontCategory,
+    type FontProvider,
+    type FontSpec,
+    type FontStyle,
+    type FontSummary
+  } from '@pixerate/editor/typography';
+  import { fontPickerOf } from './picker.svelte.js';
+
+  interface Props {
+    /** The selected font (controlled). */
+    value?: Partial<FontSpec>;
+    /** Called when the user (or an agent through the model's tools) picks a different font, weight or style. */
+    onchange?: (value: FontSpec) => void;
+    onChange?: (value: FontSpec) => void;
+    /** An existing model; when given, `provider`, `fonts` and `previewText` are ignored. */
+    model?: FontPickerModel;
+    /** Where fonts come from (fetched on mount). */
+    provider?: FontProvider;
+    /** A fixed list of fonts. */
+    fonts?: readonly FontSummary[];
+    /** Text for the live preview. */
+    previewText?: string;
+    /** Show the live preview (default true). */
+    showPreview?: boolean;
+    /** Show the category filter (default true). */
+    showCategories?: boolean;
+    /** Show the weight and style selects (default true). */
+    showWeight?: boolean;
+    /** Most options rendered at once (default 200); search to reach the rest. */
+    maxResults?: number;
+    disabled?: boolean;
+    class?: string;
+    className?: string;
+    id?: string;
+    /** Accessible label for the group (default "Font picker"). */
+    'aria-label'?: string;
+    /** Extra controls rendered above the preview (used by `TypographyControl`). */
+    children?: Snippet;
+  }
+
+  let {
+    value,
+    onchange,
+    onChange,
+    model: external,
+    provider,
+    fonts,
+    previewText,
+    showPreview = true,
+    showCategories = true,
+    showWeight = true,
+    maxResults = 200,
+    disabled = false,
+    class: klass,
+    className,
+    id,
+    'aria-label': ariaLabel = 'Font picker',
+    children
+  }: Props = $props();
+
+  const model = untrack(() => external ?? new FontPickerModel({ provider, fonts, value, previewText }));
+  const picker = fontPickerOf(model);
+  const offValue = model.onValueChange((v) => (onchange ?? onChange)?.(v));
+  onDestroy(() => {
+    picker.destroy();
+    offValue();
+  });
+  if (!untrack(() => external) && untrack(() => provider)) void model.refresh();
+
+  $effect(() => {
+    const v = value;
+    if (v) untrack(() => model.setValue(v));
+  });
+
+  const s = $derived(picker.state);
+  const shown = $derived(s.results.slice(0, maxResults));
+  // The model's getters read its current state; reading `s` first makes them update with it.
+  const css = $derived.by(() => {
+    void s;
+    return model.css;
+  });
+  const weights = $derived.by(() => {
+    void s;
+    return model.availableWeights;
+  });
+  const styles = $derived.by(() => {
+    void s;
+    return model.availableStyles;
+  });
+  const status = $derived(
+    s.loading
+      ? 'Loading fonts…'
+      : s.error
+        ? `Could not load fonts: ${s.error}`
+        : s.loadStatus[s.value.family.toLowerCase()] === 'failed'
+          ? `${s.value.family} could not be loaded; a fallback is shown.`
+          : ''
+  );
+
+  const baseId = `pixerate-font-picker-${Math.random().toString(36).slice(2, 10)}`;
+  const listId = `${baseId}-list`;
+  const optionId = (i: number) => `${baseId}-opt-${i}`;
+  let listEl: HTMLUListElement | undefined = $state();
+
+  $effect(() => {
+    const i = s.highlighted;
+    if (i < 0) return;
+    untrack(() => listEl?.ownerDocument.getElementById(optionId(i))?.scrollIntoView?.({ block: 'nearest' }));
+  });
+
+  function onKeydown(e: KeyboardEvent) {
+    if (model.handleKey(e.key)) e.preventDefault();
+  }
+
+  const field =
+    'box-sizing:border-box;width:100%;padding:5px 8px;border-radius:6px;border:1px solid var(--pixerate-font-picker-border, #3a4152);background:var(--pixerate-font-picker-field-bg, #151922);color:inherit;font:inherit;';
+</script>
+
+<div
+  {id}
+  role="group"
+  aria-label={ariaLabel}
+  aria-disabled={disabled || undefined}
+  class={klass ?? className}
+  style="box-sizing:border-box;width:var(--pixerate-font-picker-width, 280px);border-radius:var(--pixerate-font-picker-radius, 8px);background:var(--pixerate-font-picker-bg, #1f2430);color:var(--pixerate-font-picker-fg, #f0f2f5);padding:12px;display:flex;flex-direction:column;gap:8px;font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:12px;opacity:{disabled
+    ? 0.6
+    : 1};pointer-events:{disabled ? 'none' : 'auto'};"
+>
+  <div style="display:flex;gap:6px;">
+    <input
+      type="text"
+      role="combobox"
+      aria-label="Search fonts"
+      aria-expanded="true"
+      aria-controls={listId}
+      aria-autocomplete="list"
+      aria-activedescendant={s.highlighted >= 0 && s.highlighted < shown.length ? optionId(s.highlighted) : undefined}
+      placeholder="Search fonts"
+      value={s.query}
+      {disabled}
+      oninput={(e) => model.setQuery((e.currentTarget as HTMLInputElement).value)}
+      onkeydown={onKeydown}
+      style={field}
+    />
+    {#if showCategories}
+      <select
+        aria-label="Font category"
+        value={s.category}
+        {disabled}
+        onchange={(e) => model.setCategory((e.currentTarget as HTMLSelectElement).value as FontCategory | 'all')}
+        style="{field}width:auto;"
+      >
+        {#each ['all', ...FONT_CATEGORIES] as c (c)}
+          <option value={c}>{FONT_CATEGORY_LABELS[c as FontCategory | 'all']}</option>
+        {/each}
+      </select>
+    {/if}
+  </div>
+
+  <ul
+    bind:this={listEl}
+    id={listId}
+    role="listbox"
+    aria-label="Fonts"
+    style="list-style:none;margin:0;padding:2px;max-height:var(--pixerate-font-picker-list-height, 180px);overflow-y:auto;border-radius:6px;border:1px solid var(--pixerate-font-picker-border, #3a4152);"
+  >
+    {#if shown.length === 0}
+      <li role="presentation" style="padding:6px 8px;opacity:0.7;">{s.loading ? 'Loading…' : 'No fonts match'}</li>
+    {/if}
+    {#each shown as font, i (font.family)}
+      {@const selected = font.family.toLowerCase() === s.value.family.toLowerCase()}
+      {@const highlighted = i === s.highlighted}
+      <li
+        id={optionId(i)}
+        role="option"
+        tabindex="-1"
+        aria-selected={selected}
+        data-highlighted={highlighted || undefined}
+        onmousedown={(e) => e.preventDefault()}
+        onmouseenter={() => model.setHighlight(i)}
+        onclick={() => model.selectFamily(font.family)}
+        onkeydown={() => {}}
+        style="display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:5px 8px;border-radius:4px;cursor:pointer;background:{selected
+          ? 'var(--pixerate-font-picker-selected, #2f3b57)'
+          : highlighted
+            ? 'var(--pixerate-font-picker-hover, #2a3040)'
+            : 'transparent'};"
+      >
+        <span style="font-family:{model.familyCss(font)};font-size:14px;">{font.family}</span>
+        <span style="opacity:0.6;font-size:10px;">{FONT_CATEGORY_LABELS[font.category]}</span>
+      </li>
+    {/each}
+  </ul>
+
+  {#if showWeight}
+    <div style="display:flex;gap:6px;">
+      <select
+        aria-label="Font weight"
+        value={s.value.weight}
+        {disabled}
+        onchange={(e) => model.setWeight(Number((e.currentTarget as HTMLSelectElement).value))}
+        style={field}
+      >
+        {#each weights as w (w)}
+          <option value={w}>{w}</option>
+        {/each}
+      </select>
+      <select
+        aria-label="Font style"
+        value={s.value.style}
+        {disabled}
+        onchange={(e) => model.setStyle((e.currentTarget as HTMLSelectElement).value as FontStyle)}
+        style={field}
+      >
+        {#each styles as st (st)}
+          <option value={st}>{st}</option>
+        {/each}
+      </select>
+    </div>
+  {/if}
+
+  {@render children?.()}
+
+  {#if showPreview}
+    <div
+      aria-label="Font preview"
+      style="font-family:{css.fontFamily};font-weight:{css.fontWeight};font-style:{css.fontStyle};font-size:{Math.min(
+        s.value.size,
+        48
+      )}px;line-height:{css.lineHeight};letter-spacing:{css.letterSpacing};padding:6px 4px;overflow-wrap:anywhere;"
+    >
+      {s.previewText}
+    </div>
+  {/if}
+
+  <div role="status" aria-live="polite" style="opacity:0.75;">{status}</div>
+</div>

package/dist/typography/FontPicker.svelte.d.ts

@@ -0,0 +1,36 @@
+import { type Snippet } from 'svelte';
+import { FontPickerModel, type FontProvider, type FontSpec, type FontSummary } from '@pixerate/editor/typography';
+interface Props {
+    /** The selected font (controlled). */
+    value?: Partial<FontSpec>;
+    /** Called when the user (or an agent through the model's tools) picks a different font, weight or style. */
+    onchange?: (value: FontSpec) => void;
+    onChange?: (value: FontSpec) => void;
+    /** An existing model; when given, `provider`, `fonts` and `previewText` are ignored. */
+    model?: FontPickerModel;
+    /** Where fonts come from (fetched on mount). */
+    provider?: FontProvider;
+    /** A fixed list of fonts. */
+    fonts?: readonly FontSummary[];
+    /** Text for the live preview. */
+    previewText?: string;
+    /** Show the live preview (default true). */
+    showPreview?: boolean;
+    /** Show the category filter (default true). */
+    showCategories?: boolean;
+    /** Show the weight and style selects (default true). */
+    showWeight?: boolean;
+    /** Most options rendered at once (default 200); search to reach the rest. */
+    maxResults?: number;
+    disabled?: boolean;
+    class?: string;
+    className?: string;
+    id?: string;
+    /** Accessible label for the group (default "Font picker"). */
+    'aria-label'?: string;
+    /** Extra controls rendered above the preview (used by `TypographyControl`). */
+    children?: Snippet;
+}
+declare const FontPicker: import("svelte").Component<Props, {}, "">;
+type FontPicker = ReturnType<typeof FontPicker>;
+export default FontPicker;

package/dist/typography/TypographyControl.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { onDestroy, untrack } from 'svelte';
+  import { FontPickerModel, type FontProvider, type FontSpec, type FontSummary } from '@pixerate/editor/typography';
+  import FontPicker from './FontPicker.svelte';
+  import { fontPickerOf } from './picker.svelte.js';
+
+  interface Props {
+    /** The selected font and metrics (controlled). */
+    value?: Partial<FontSpec>;
+    /** Called with the whole spec when anything changes in the control (or through its agent tools). */
+    onchange?: (value: FontSpec) => void;
+    onChange?: (value: FontSpec) => void;
+    /** An existing model; when given, `provider`, `fonts` and `previewText` are ignored. */
+    model?: FontPickerModel;
+    provider?: FontProvider;
+    fonts?: readonly FontSummary[];
+    previewText?: string;
+    showPreview?: boolean;
+    showCategories?: boolean;
+    showWeight?: boolean;
+    maxResults?: number;
+    disabled?: boolean;
+    class?: string;
+    className?: string;
+    id?: string;
+    /** Accessible label for the group (default "Typography"). */
+    'aria-label'?: string;
+  }
+
+  let {
+    value,
+    onchange,
+    onChange,
+    model: external,
+    provider,
+    fonts,
+    previewText,
+    disabled = false,
+    'aria-label': ariaLabel = 'Typography',
+    ...rest
+  }: Props = $props();
+
+  const model = untrack(() => external ?? new FontPickerModel({ provider, fonts, value, previewText }));
+  const picker = fontPickerOf(model);
+  onDestroy(() => picker.destroy());
+  if (!untrack(() => external) && untrack(() => provider)) void model.refresh();
+  const v = $derived(picker.state.value);
+
+  const numberField =
+    'box-sizing:border-box;width:100%;padding:5px 6px;border-radius:6px;border:1px solid var(--pixerate-font-picker-border, #3a4152);background:var(--pixerate-font-picker-field-bg, #151922);color:inherit;font:inherit;';
+
+  function commit(e: Event, set: (n: number) => void) {
+    const n = (e.currentTarget as HTMLInputElement).valueAsNumber;
+    if (Number.isFinite(n)) set(n);
+  }
+</script>
+
+<FontPicker {model} {value} onchange={(next) => (onchange ?? onChange)?.(next)} {disabled} aria-label={ariaLabel} {...rest}>
+  <div style="display:flex;gap:6px;">
+    <label style="display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;">
+      <span style="opacity:0.75;">Font size <span style="opacity:0.6;">px</span></span>
+      <input type="number" aria-label="Font size" value={v.size} step="1" min="1" max="1000" {disabled} oninput={(e) => commit(e, (n) => model.setSize(n))} style={numberField} />
+    </label>
+    <label style="display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;">
+      <span style="opacity:0.75;">Line height <span style="opacity:0.6;">×</span></span>
+      <input type="number" aria-label="Line height" value={v.lineHeight} step="0.05" min="0.5" max="4" {disabled} oninput={(e) => commit(e, (n) => model.setLineHeight(n))} style={numberField} />
+    </label>
+    <label style="display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;">
+      <span style="opacity:0.75;">Letter spacing <span style="opacity:0.6;">em</span></span>
+      <input type="number" aria-label="Letter spacing" value={v.letterSpacing} step="0.01" min="-0.5" max="1" {disabled} oninput={(e) => commit(e, (n) => model.setLetterSpacing(n))} style={numberField} />
+    </label>
+  </div>
+</FontPicker>

package/dist/typography/TypographyControl.svelte.d.ts

@@ -0,0 +1,26 @@
+import { FontPickerModel, type FontProvider, type FontSpec, type FontSummary } from '@pixerate/editor/typography';
+interface Props {
+    /** The selected font and metrics (controlled). */
+    value?: Partial<FontSpec>;
+    /** Called with the whole spec when anything changes in the control (or through its agent tools). */
+    onchange?: (value: FontSpec) => void;
+    onChange?: (value: FontSpec) => void;
+    /** An existing model; when given, `provider`, `fonts` and `previewText` are ignored. */
+    model?: FontPickerModel;
+    provider?: FontProvider;
+    fonts?: readonly FontSummary[];
+    previewText?: string;
+    showPreview?: boolean;
+    showCategories?: boolean;
+    showWeight?: boolean;
+    maxResults?: number;
+    disabled?: boolean;
+    class?: string;
+    className?: string;
+    id?: string;
+    /** Accessible label for the group (default "Typography"). */
+    'aria-label'?: string;
+}
+declare const TypographyControl: import("svelte").Component<Props, {}, "">;
+type TypographyControl = ReturnType<typeof TypographyControl>;
+export default TypographyControl;

package/dist/typography/index.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'svelte';
+import type FontPickerComponent from './FontPicker.svelte';
+import type TypographyControlComponent from './TypographyControl.svelte';
+export { default as FontPicker } from './FontPicker.svelte';
+export { default as TypographyControl } from './TypographyControl.svelte';
+export type FontPickerProps = ComponentProps<typeof FontPickerComponent>;
+export type TypographyControlProps = ComponentProps<typeof TypographyControlComponent>;
+export { fontPickerOf, type FontPickerBinding } from './picker.svelte.js';
+export * from '@pixerate/editor/typography';

package/dist/typography/index.js

@@ -0,0 +1,5 @@
+export { default as FontPicker } from './FontPicker.svelte';
+export { default as TypographyControl } from './TypographyControl.svelte';
+export { fontPickerOf } from './picker.svelte.js';
+// Re-export the core typography module for consumer convenience
+export * from '@pixerate/editor/typography';

package/dist/typography/picker.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { FontPickerModel, FontPickerState } from '@pixerate/editor/typography';
+export interface FontPickerBinding {
+    /** The model's state, reactive. */
+    readonly state: FontPickerState;
+    readonly model: FontPickerModel;
+    /** Stops following the model. */
+    destroy(): void;
+}
+/**
+ * Follows a {@link FontPickerModel} with Svelte 5 runes: `binding.state` updates whenever the model
+ * changes (from the UI or from its agent tools). Call `destroy()` when the component unmounts.
+ */
+export declare function fontPickerOf(model: FontPickerModel): FontPickerBinding;

package/dist/typography/picker.svelte.js

@@ -0,0 +1,19 @@
+/**
+ * Follows a {@link FontPickerModel} with Svelte 5 runes: `binding.state` updates whenever the model
+ * changes (from the UI or from its agent tools). Call `destroy()` when the component unmounts.
+ */
+export function fontPickerOf(model) {
+    let current = $state.raw(model.getState());
+    const unsubscribe = model.subscribe((next) => {
+        current = next;
+    });
+    return {
+        get state() {
+            return current;
+        },
+        model,
+        destroy: () => {
+            unsubscribe();
+        }
+    };
+}

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.119.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -93,6 +93,11 @@
       "svelte": "./dist/color/index.js",
       "default": "./dist/color/index.js"
     },
+    "./typography": {
+      "types": "./dist/typography/index.d.ts",
+      "svelte": "./dist/typography/index.js",
+      "default": "./dist/typography/index.js"
+    },
     "./gradient": {
       "types": "./dist/gradient/index.d.ts",
       "svelte": "./dist/gradient/index.js",
@@ -144,6 +149,9 @@
       "color": [
         "./dist/color/index.d.ts"
       ],
+      "typography": [
+        "./dist/typography/index.d.ts"
+      ],
       "gradient": [
         "./dist/gradient/index.d.ts"
       ]
@@ -160,7 +168,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.162.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",