@pixerate/editor-svelte 0.102.0 → 0.103.1

package/dist/animation-editor/AnimationEditor.svelte

@@ -10,6 +10,9 @@
   import type { EffectProvider } from '@pixerate/editor/effects';
   import { useEffects } from '../effects/effects.svelte.js';
   import AnimationEffectsPanel from './AnimationEffectsPanel.svelte';
+  import type { AgentPlayback } from '@pixerate/editor/tools';
+  import { createElementPlaybackSurface, getAgentPlayback } from '../playback/playback.svelte.js';
+  import PresenceLayer from '../playback/PresenceLayer.svelte';
 
   interface Props {
     controller: AnimationEditorController;
@@ -33,9 +36,32 @@
      */
     effects?: EffectProvider | null;
     class?: string;
+    /**
+     * Agent playback: act out the animation tools' calls here with the agent's cursor (default:
+     * `setAgentPlayback` above; `null` turns it off).
+     */
+    playback?: AgentPlayback | null;
+    /** The playback surface id (default `animation`, where the animation tool providers play). */
+    playbackId?: string;
+    /** Bring the editor on screen (switch to its tab) before the agent acts. */
+    onplaybackreveal?: () => void | Promise<void>;
   }
 
-  let { controller, values, onionSkin, motionPaths, showIssues = true, editable = true, effects, class: className = '' }: Props = $props();
+  let { controller, values, onionSkin, motionPaths, showIssues = true, editable = true, effects, class: className = '', playback, playbackId = 'animation', onplaybackreveal }: Props = $props();
+
+  // Agent playback: the cursor clicks shots in the timeline and visits elements on the stage
+  // (whose SVG keeps the artwork's ids, prefixed `ae-`).
+  let root: HTMLDivElement | undefined = $state();
+  const ambientPlayback = getAgentPlayback();
+  const playing = $derived((playback === undefined ? ambientPlayback : playback) ?? null);
+  const agentPresence = createElementPlaybackSurface(() => playing, () => playbackId, () => root, () => ({
+    defaultKind: 'shot',
+    selectors: {
+      shot: (id: string) => `[data-shot="${CSS.escape(id)}"]`,
+      element: (id: string) => `[data-animation-stage] [id="ae-${CSS.escape(id)}"]`
+    },
+    reveal: onplaybackreveal
+  }));
   useEffects(() => controller, () => effects);
   const view = animationEditorStateOf(() => controller);
   const editor = $derived(view.current);
@@ -84,14 +110,20 @@
   scene settings by hand. Every edit is one undo step.
 -->
 {#if !editable}
-  <div class="flex flex-col gap-2 {className}" data-animation-editor="">
+  <div bind:this={root} class="relative flex flex-col gap-2 {className}" data-animation-editor="">
+    {#if playing}
+      <PresenceLayer presence={agentPresence} />
+    {/if}
     <AnimationStage {controller} {values} onionSkin={onionSkin} {motionPaths} class="rounded-md border border-border bg-muted/40" />
     <PlayheadScrubber {controller} />
     {@render issueList()}
   </div>
 {:else}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div class="grid gap-3 lg:grid-cols-[minmax(0,1fr)_20rem] {className}" data-animation-editor="" {onkeydown}>
+  <div bind:this={root} class="relative grid gap-3 lg:grid-cols-[minmax(0,1fr)_20rem] {className}" data-animation-editor="" {onkeydown}>
+    {#if playing}
+      <PresenceLayer presence={agentPresence} />
+    {/if}
     <div class="flex min-w-0 flex-col gap-2">
       <AnimationStage
         {controller}

package/dist/animation-editor/AnimationEditor.svelte.d.ts

@@ -1,5 +1,6 @@
 import { type AnimationEditorController, type MotionFrameOptions, type MotionOnionSkin } from '@pixerate/editor/animation-editor';
 import type { EffectProvider } from '@pixerate/editor/effects';
+import type { AgentPlayback } from '@pixerate/editor/tools';
 interface Props {
     controller: AnimationEditorController;
     values?: MotionFrameOptions['values'];
@@ -22,6 +23,15 @@ interface Props {
      */
     effects?: EffectProvider | null;
     class?: string;
+    /**
+     * Agent playback: act out the animation tools' calls here with the agent's cursor (default:
+     * `setAgentPlayback` above; `null` turns it off).
+     */
+    playback?: AgentPlayback | null;
+    /** The playback surface id (default `animation`, where the animation tool providers play). */
+    playbackId?: string;
+    /** Bring the editor on screen (switch to its tab) before the agent acts. */
+    onplaybackreveal?: () => void | Promise<void>;
 }
 declare const AnimationEditor: import("svelte").Component<Props, {}, "">;
 type AnimationEditor = ReturnType<typeof AnimationEditor>;

package/dist/chart/ChartEditor.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import type { ComponentProps } from 'svelte';
-  import { describeChartSelection, downloadChartPng, type ChartController, type DownloadChartPngOptions } from '@pixerate/editor/chart';
+  import { describeChartSelection, downloadChartPng, locateChartPoint, ChartPresence, type ChartController, type ChartScene, type DownloadChartPngOptions } from '@pixerate/editor/chart';
+  import type { AgentPlayback, PlaybackPoint, PlaybackRect, PlaybackRef } from '@pixerate/editor/tools';
+  import { createPlaybackSurface, getAgentPlayback } from '../playback/playback.svelte.js';
+  import PresenceLayer from '../playback/PresenceLayer.svelte';
   import ChartCanvas from './ChartCanvas.svelte';
   import ChartDataGrid from './ChartDataGrid.svelte';
   import ChartInspector from './ChartInspector.svelte';
@@ -21,9 +24,83 @@
     height?: number;
     canvasProps?: Omit<ComponentProps<typeof ChartCanvas>, 'controller' | 'height'>;
     class?: string;
+    /**
+     * Agent playback: act out the chart tools' calls here with the agent's cursor, on the inspector,
+     * the data grid and the toolbar (default: `setAgentPlayback` above; `null` turns it off). With
+     * `canvasProps.presence` (a `ChartDirector`'s), the director's drags share the cursor.
+     */
+    playback?: AgentPlayback | null;
+    /** The playback surface id (default `chart`, where the chart tool provider plays). */
+    playbackId?: string;
+    /** Bring the editor on screen (switch to its tab) before the agent acts. */
+    onplaybackreveal?: () => void | Promise<void>;
   }
 
-  let { controller, showInspector = true, showDataGrid = true, showToolbar = true, pngOptions, height = 380, canvasProps = {}, class: className = '' }: Props = $props();
+  let { controller, showInspector = true, showDataGrid = true, showToolbar = true, pngOptions, height = 380, canvasProps = {}, class: className = '', playback, playbackId = 'chart', onplaybackreveal }: Props = $props();
+
+  // Agent playback in the chart's scene coordinates, so a director's drags (in the same presence
+  // store) and the editor's own controls share one cursor. Controls outside the chart are mapped
+  // into scene units through the SVG's box.
+  let root: HTMLDivElement | undefined = $state();
+  const ownScene: { current: ChartScene | null } = { current: null };
+  const sceneRef = $derived(canvasProps.sceneRef ?? ownScene);
+  const ambientPlayback = getAgentPlayback();
+  const playing = $derived((playback === undefined ? ambientPlayback : playback) ?? null);
+  const svgBox = () => {
+    const svg = root?.querySelector<SVGSVGElement>('[data-chart-canvas] svg');
+    const r = svg?.getBoundingClientRect();
+    const vb = svg?.viewBox?.baseVal;
+    if (!svg || !r || !vb || !vb.width || !vb.height) return null;
+    return { left: r.left, top: r.top, sx: r.width / vb.width, sy: r.height / vb.height, vx: vb.x, vy: vb.y };
+  };
+  const sceneToClient = (p: PlaybackPoint): PlaybackPoint | null => {
+    const b = svgBox();
+    return b ? { x: b.left + (p.x - b.vx) * b.sx, y: b.top + (p.y - b.vy) * b.sy } : null;
+  };
+  const clientToScene = (p: PlaybackPoint): PlaybackPoint | null => {
+    const b = svgBox();
+    return b && b.sx && b.sy ? { x: (p.x - b.left) / b.sx + b.vx, y: (p.y - b.top) / b.sy + b.vy } : null;
+  };
+  const elementRect = (selector: string): PlaybackRect | null => {
+    const el = root?.querySelector(selector);
+    // The inspector scrolls on its own: bring the control into its view first.
+    el?.scrollIntoView?.({ block: 'nearest' });
+    const r = el?.getBoundingClientRect();
+    if (!r || r.width <= 0) return null;
+    const a = clientToScene({ x: r.left, y: r.top });
+    const b = clientToScene({ x: r.right, y: r.bottom });
+    return a && b ? { x: a.x, y: a.y, width: b.x - a.x, height: b.y - a.y } : null;
+  };
+  const SELECTORS: Record<string, (id: string) => string> = {
+    control: (id) => `[data-option="${CSS.escape(id)}"]`,
+    'chart-type': (id) => `[data-chart-type="${CSS.escape(id)}"]`,
+    action: (id) => `[data-action="${CSS.escape(id)}"]`,
+    grid: () => '[data-chart-grid]'
+  };
+  // svelte-ignore state_referenced_locally
+  const ownPresence = canvasProps.presence ?? new ChartPresence();
+  const presence = createPlaybackSurface(() => playing, () => playbackId, () => ({
+    defaultKind: 'point',
+    locate: (ref: PlaybackRef) => {
+      if (ref.kind === 'point') return sceneRef.current ? locateChartPoint(controller.getSpec(), sceneRef.current, ref) : null;
+      const selector = SELECTORS[ref.kind]?.(ref.id);
+      return selector ? elementRect(selector) : null;
+    },
+    bounds: () => (sceneRef.current ? { x: 0, y: 0, width: sceneRef.current.width, height: sceneRef.current.height } : null),
+    visible: () => {
+      const r = root?.getBoundingClientRect();
+      return !!r && r.width > 0 && r.height > 0 && !(typeof document !== 'undefined' && document.visibilityState === 'hidden');
+    },
+    toViewport: (p: PlaybackPoint) => sceneToClient(p) ?? p,
+    fromViewport: (p: PlaybackPoint) => clientToScene(p) ?? p,
+    reveal: () => onplaybackreveal?.()
+  }), ownPresence);
+  /** Scene units → pixels in the editor's root, for the cursor layer. */
+  const sceneToRoot = (p: PlaybackPoint): PlaybackPoint => {
+    const c = sceneToClient(p);
+    const box = root?.getBoundingClientRect();
+    return c && box ? { x: c.x - box.left, y: c.y - box.top } : p;
+  };
 
   const view = chartStateOf(() => controller);
   const chart = $derived(view.current);
@@ -34,7 +111,10 @@
   }
 </script>
 
-<div class="flex flex-col gap-2 {className}" data-chart-editor="">
+<div bind:this={root} class="relative flex flex-col gap-2 {className}" data-chart-editor="">
+  {#if playing}
+    <PresenceLayer {presence} viewport={sceneToRoot} />
+  {/if}
   {#if showToolbar}
     <div class="flex items-center gap-1" data-chart-toolbar="">
       <button type="button" class={chartButtonClass} disabled={!chart.canUndo} title={chart.undoLabel ? `Undo ${chart.undoLabel}` : 'Undo'} data-action="undo" onclick={() => controller.undo()}>Undo</button>
@@ -53,7 +133,8 @@
   {/if}
   <div class="flex min-h-0 flex-col gap-2 md:flex-row">
     <div class="min-w-0 flex-1 rounded-md border border-border bg-background p-1">
-      <ChartCanvas {controller} {height} {...canvasProps} />
+      <!-- With playback the editor draws the cursor (over the inspector too), so the canvas doesn't. -->
+      <ChartCanvas {controller} {height} {...canvasProps} {sceneRef} presence={playing ? undefined : canvasProps.presence} />
     </div>
     {#if showInspector}
       <!-- Side by side, the canvas sets the row's height and the inspector scrolls within it. -->

package/dist/chart/ChartEditor.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentProps } from 'svelte';
 import { type ChartController, type DownloadChartPngOptions } from '@pixerate/editor/chart';
+import type { AgentPlayback } from '@pixerate/editor/tools';
 import ChartCanvas from './ChartCanvas.svelte';
 interface Props {
     controller: ChartController;
@@ -15,6 +16,16 @@ interface Props {
     height?: number;
     canvasProps?: Omit<ComponentProps<typeof ChartCanvas>, 'controller' | 'height'>;
     class?: string;
+    /**
+     * Agent playback: act out the chart tools' calls here with the agent's cursor, on the inspector,
+     * the data grid and the toolbar (default: `setAgentPlayback` above; `null` turns it off). With
+     * `canvasProps.presence` (a `ChartDirector`'s), the director's drags share the cursor.
+     */
+    playback?: AgentPlayback | null;
+    /** The playback surface id (default `chart`, where the chart tool provider plays). */
+    playbackId?: string;
+    /** Bring the editor on screen (switch to its tab) before the agent acts. */
+    onplaybackreveal?: () => void | Promise<void>;
 }
 declare const ChartEditor: import("svelte").Component<Props, {}, "">;
 type ChartEditor = ReturnType<typeof ChartEditor>;

package/dist/paint-editor/PaintEditor.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
-  import type { PaintEditorController, PaintPresence, PaintTool } from '@pixerate/editor/paint-editor';
+  import { PaintPresence, documentToScreen, screenToDocument, type PaintEditorController, type PaintTool } from '@pixerate/editor/paint-editor';
+  import type { AgentPlayback, PlaybackPoint, PlaybackRect, PlaybackRef } from '@pixerate/editor/tools';
+  import { createPlaybackSurface, getAgentPlayback } from '../playback/playback.svelte.js';
+  import PresenceLayer from '../playback/PresenceLayer.svelte';
   import BrushPanel from './BrushPanel.svelte';
   import ColorPanel from './ColorPanel.svelte';
   import PaintCanvas from './PaintCanvas.svelte';
@@ -20,8 +23,81 @@
     /** Agent cursors to draw over the canvas (see `createPaintDirector`). */
     presence?: PaintPresence;
     class?: string;
+    /**
+     * Agent playback: act out the paint tools' calls here with the agent's cursor, opening the
+     * panel each write belongs to (default: `setAgentPlayback` above; `null` turns it off). With
+     * `presence` (a `PaintDirector`'s), the director's strokes share the cursor.
+     */
+    playback?: AgentPlayback | null;
+    /** The playback surface id (default `paint`, where the paint tool providers play). */
+    playbackId?: string;
+    /** Bring the editor on screen (switch to its tab) before the agent acts. */
+    onplaybackreveal?: () => void | Promise<void>;
   }
-  let { controller, fileName, height = 720, presence, class: className = '' }: Props = $props();
+  let { controller, fileName, height = 720, presence, class: className = '', playback, playbackId = 'paint', onplaybackreveal }: Props = $props();
+
+  /** Controls a paint plan can point at, by `{ kind: 'control', id }`. */
+  const PAINT_CONTROLS: Record<string, string> = {
+    'mixing-pad': '[data-testid="mixing-pad"]',
+    lighting: '[data-testid="light-panel"]',
+    symmetry: '[aria-label="Symmetry"]'
+  };
+  // Agent playback in document pixels, sharing a director's presence store (one cursor). Panels
+  // outside the canvas are mapped into document pixels through the canvas view.
+  let root: HTMLDivElement | undefined = $state();
+  const ambientPlayback = getAgentPlayback();
+  const playing = $derived((playback === undefined ? ambientPlayback : playback) ?? null);
+  const viewBox = () => {
+    const r = root?.querySelector<HTMLElement>('[data-testid="paint-canvas"]')?.getBoundingClientRect();
+    return r && r.width > 0 ? r : null;
+  };
+  const docToClient = (p: PlaybackPoint): PlaybackPoint | null => {
+    const r = viewBox();
+    if (!r) return null;
+    const q = documentToScreen(controller.getState().view, controller.document.canvas, { width: r.width, height: r.height }, p.x, p.y);
+    return { x: r.left + q.x, y: r.top + q.y };
+  };
+  const clientToDoc = (p: PlaybackPoint): PlaybackPoint | null => {
+    const r = viewBox();
+    return r ? screenToDocument(controller.getState().view, controller.document.canvas, { width: r.width, height: r.height }, p.x - r.left, p.y - r.top) : null;
+  };
+  const elementRect = (selector: string): PlaybackRect | null => {
+    const r = root?.querySelector(selector)?.getBoundingClientRect();
+    if (!r || r.width <= 0) return null;
+    // The element's centre and size (the view may rotate; the cursor only needs the centre).
+    const c = clientToDoc({ x: r.left + r.width / 2, y: r.top + r.height / 2 });
+    const zoom = controller.getState().view.zoom || 1;
+    return c ? { x: c.x - r.width / zoom / 2, y: c.y - r.height / zoom / 2, width: r.width / zoom, height: r.height / zoom } : null;
+  };
+  // svelte-ignore state_referenced_locally
+  const sharedPresence = presence ?? new PaintPresence();
+  const agentPresence = createPlaybackSurface(() => playing, () => playbackId, () => ({
+    locate: (ref: PlaybackRef) => {
+      if (ref.kind === 'panel') return elementRect(`[data-paint-tab="${CSS.escape(ref.id)}"]`);
+      if (ref.kind === 'panel-body') return elementRect(`[data-paint-panel="${CSS.escape(ref.id)}"]`);
+      if (ref.kind === 'control' && PAINT_CONTROLS[ref.id]) return elementRect(PAINT_CONTROLS[ref.id]!);
+      return null;
+    },
+    open: async (ref: PlaybackRef) => {
+      if (ref.kind !== 'panel' || tab === ref.id) return;
+      root?.querySelector<HTMLElement>(`[data-paint-tab="${CSS.escape(ref.id)}"]`)?.click();
+      await new Promise((resolve) => setTimeout(resolve, 60));
+    },
+    bounds: () => ({ x: 0, y: 0, width: controller.document.canvas.width, height: controller.document.canvas.height }),
+    visible: () => {
+      const r = root?.getBoundingClientRect();
+      return !!r && r.width > 0 && r.height > 0 && !(typeof document !== 'undefined' && document.visibilityState === 'hidden');
+    },
+    toViewport: (p: PlaybackPoint) => docToClient(p) ?? p,
+    fromViewport: (p: PlaybackPoint) => clientToDoc(p) ?? p,
+    reveal: () => onplaybackreveal?.()
+  }), sharedPresence);
+  /** Document pixels → pixels in the editor's root, for the cursor layer. */
+  const docToRoot = (p: PlaybackPoint): PlaybackPoint => {
+    const c = docToClient(p);
+    const box = root?.getBoundingClientRect();
+    return c && box ? { x: c.x - box.left, y: c.y - box.top } : p;
+  };
   let tool = $state<PaintTool>('brush');
   let tab = $state<'color' | 'wet' | 'paper' | 'layers' | 'effects'>('color');
   const effects = paintEffectsProvider(() => controller);
@@ -30,25 +106,31 @@
 </script>
 
 <!-- Toolbar, brush library, the canvas, and colour / wet media / paper / layers. -->
-<div class={`flex flex-col gap-2 rounded-xl border border-slate-800 bg-slate-900 p-2 ${className}`} style={`height: ${typeof height === 'number' ? `${height}px` : height}`} data-testid="paint-editor">
+<div bind:this={root} class={`relative flex flex-col gap-2 rounded-xl border border-slate-800 bg-slate-900 p-2 ${className}`} style={`height: ${typeof height === 'number' ? `${height}px` : height}`} data-testid="paint-editor">
+  {#if playing}
+    <PresenceLayer presence={agentPresence} viewport={docToRoot} />
+  {/if}
   <PaintToolbar {controller} {tool} ontoolchange={(t) => (tool = t)} {fileName} />
   <div class="flex min-h-0 flex-1 gap-2">
     <BrushPanel {controller} class="w-60 shrink-0 overflow-y-auto pr-1" />
     <div class="flex min-w-0 flex-1 flex-col">
-      <PaintCanvas {controller} {tool} {presence} onerror={(e) => (error = e)} class="flex-1 rounded-lg" />
+      <!-- With playback the editor draws the cursor (over the panels too), so the canvas doesn't. -->
+      <PaintCanvas {controller} {tool} presence={playing ? undefined : presence} onerror={(e) => (error = e)} class="flex-1 rounded-lg" />
       {#if error}<p role="alert" class="mt-1 text-[11px] text-rose-400">{error}</p>{/if}
     </div>
     <div class="flex w-64 shrink-0 flex-col gap-2 overflow-y-auto pr-1">
       <div class="flex gap-1" role="tablist" aria-label="Paint panels">
         {#each tabs as t (t)}
-          <button type="button" role="tab" aria-selected={tab === t} class={chip(tab === t)} onclick={() => (tab = t)}>{t === 'color' ? 'Colour' : t === 'wet' ? 'Wet' : t === 'paper' ? 'Paper' : t === 'layers' ? 'Layers' : 'Effects'}</button>
+          <button type="button" role="tab" aria-selected={tab === t} data-paint-tab={t} class={chip(tab === t)} onclick={() => (tab = t)}>{t === 'color' ? 'Colour' : t === 'wet' ? 'Wet' : t === 'paper' ? 'Paper' : t === 'layers' ? 'Layers' : 'Effects'}</button>
         {/each}
       </div>
-      {#if tab === 'color'}<ColorPanel {controller} />{/if}
-      {#if tab === 'wet'}<WetPanel {controller} />{/if}
-      {#if tab === 'paper'}<PaperPanel {controller} />{/if}
-      {#if tab === 'layers'}<PaintLayersPanel {controller} /><StickerPanel {controller} />{/if}
-      {#if tab === 'effects' && effects.current}<PaintEffectsPanel {controller} />{/if}
+      <div class="flex flex-col gap-2" data-paint-panel={tab}>
+        {#if tab === 'color'}<ColorPanel {controller} />{/if}
+        {#if tab === 'wet'}<WetPanel {controller} />{/if}
+        {#if tab === 'paper'}<PaperPanel {controller} />{/if}
+        {#if tab === 'layers'}<PaintLayersPanel {controller} /><StickerPanel {controller} />{/if}
+        {#if tab === 'effects' && effects.current}<PaintEffectsPanel {controller} />{/if}
+      </div>
     </div>
   </div>
 </div>

package/dist/paint-editor/PaintEditor.svelte.d.ts

@@ -1,4 +1,5 @@
-import type { PaintEditorController, PaintPresence } from '@pixerate/editor/paint-editor';
+import { PaintPresence, type PaintEditorController } from '@pixerate/editor/paint-editor';
+import type { AgentPlayback } from '@pixerate/editor/tools';
 interface Props {
     controller: PaintEditorController;
     /** Base name of saved and exported files (default `painting`). */
@@ -8,6 +9,16 @@ interface Props {
     /** Agent cursors to draw over the canvas (see `createPaintDirector`). */
     presence?: PaintPresence;
     class?: string;
+    /**
+     * Agent playback: act out the paint tools' calls here with the agent's cursor, opening the
+     * panel each write belongs to (default: `setAgentPlayback` above; `null` turns it off). With
+     * `presence` (a `PaintDirector`'s), the director's strokes share the cursor.
+     */
+    playback?: AgentPlayback | null;
+    /** The playback surface id (default `paint`, where the paint tool providers play). */
+    playbackId?: string;
+    /** Bring the editor on screen (switch to its tab) before the agent acts. */
+    onplaybackreveal?: () => void | Promise<void>;
 }
 declare const PaintEditor: import("svelte").Component<Props, {}, "">;
 type PaintEditor = ReturnType<typeof PaintEditor>;

package/dist/parameters/ParametersPanel.svelte

@@ -6,6 +6,9 @@
 
 <script lang="ts">
   import { untrack, type Snippet } from 'svelte';
+  import type { AgentPlayback } from '@pixerate/editor/tools';
+  import { createElementPlaybackSurface, getAgentPlayback } from '../playback/playback.svelte.js';
+  import PresenceLayer from '../playback/PresenceLayer.svelte';
   import {
     isParameterGroup,
     parameterLabel,
@@ -40,6 +43,15 @@
     class?: string;
     /** Extra content after the fields. */
     children?: Snippet;
+    /**
+     * Agent playback: act out `parameters.*` commands here with the agent's cursor (default:
+     * `setAgentPlayback` above; `null` turns it off).
+     */
+    playback?: AgentPlayback | null;
+    /** The playback surface id (default `parameters`, where the parameter commands play). */
+    playbackId?: string;
+    /** Bring the panel on screen (switch to its tab) before the agent acts. */
+    onplaybackreveal?: () => void | Promise<void>;
   }
 
   let {
@@ -53,9 +65,22 @@
     emptyMessage = 'No parameters.',
     idPrefix = `pixerate-parameters-${++nextId}`,
     class: className = '',
-    children
+    children,
+    playback,
+    playbackId = 'parameters',
+    onplaybackreveal
   }: Props = $props();
 
+  // Agent playback: the cursor visits the controls a call changes.
+  let root: HTMLDivElement | undefined = $state();
+  const ambientPlayback = getAgentPlayback();
+  const playing = $derived((playback === undefined ? ambientPlayback : playback) ?? null);
+  const agentPresence = createElementPlaybackSurface(() => playing, () => playbackId, () => root, () => ({
+    defaultKind: 'parameter',
+    selectors: { parameter: (id: string) => `[data-parameter-id="${CSS.escape(id)}"]` },
+    reveal: onplaybackreveal
+  }));
+
   // Follows a replaced `controller` prop too.
   let view: ParametersState = $state.raw(untrack(() => controller.getState()));
   $effect(() => {
@@ -164,7 +189,7 @@
   keyframe diamonds, per-field reset, presets, and undo / redo / reset / randomize. Slider
   drags and colour picks are one undo step each.
 -->
-<div class="space-y-3 text-foreground {className}" data-parameters-panel="">
+<div bind:this={root} class="relative space-y-3 text-foreground {className}" data-parameters-panel="">
   {#if heading || showToolbar}
     <div class="flex flex-wrap items-center gap-1.5">
       {#if heading}
@@ -236,4 +261,8 @@
     {@render items(view.schema.fields)}
   {/if}
   {@render children?.()}
+  <!-- Last, so it doesn't shift the stacked spacing. -->
+  {#if playing}
+    <PresenceLayer presence={agentPresence} />
+  {/if}
 </div>

package/dist/parameters/ParametersPanel.svelte.d.ts

@@ -1,4 +1,5 @@
 import { type Snippet } from 'svelte';
+import type { AgentPlayback } from '@pixerate/editor/tools';
 import { type ParametersController } from '@pixerate/editor/parameters';
 interface Props {
     controller: ParametersController;
@@ -21,6 +22,15 @@ interface Props {
     class?: string;
     /** Extra content after the fields. */
     children?: Snippet;
+    /**
+     * Agent playback: act out `parameters.*` commands here with the agent's cursor (default:
+     * `setAgentPlayback` above; `null` turns it off).
+     */
+    playback?: AgentPlayback | null;
+    /** The playback surface id (default `parameters`, where the parameter commands play). */
+    playbackId?: string;
+    /** Bring the panel on screen (switch to its tab) before the agent acts. */
+    onplaybackreveal?: () => void | Promise<void>;
 }
 declare const ParametersPanel: import("svelte").Component<Props, {}, "">;
 type ParametersPanel = ReturnType<typeof ParametersPanel>;

package/dist/playback/index.d.ts

@@ -1,2 +1,2 @@
 export { default as PresenceLayer } from './PresenceLayer.svelte';
-export { setAgentPlayback, getAgentPlayback, createPlaybackSurface, type PlaybackSurfaceOptions } from './playback.svelte.js';
+export { setAgentPlayback, getAgentPlayback, createPlaybackSurface, createElementPlaybackSurface, type PlaybackSurfaceOptions, type ElementPlaybackSurfaceOptions } from './playback.svelte.js';

package/dist/playback/index.js

@@ -1,2 +1,2 @@
 export { default as PresenceLayer } from './PresenceLayer.svelte';
-export { setAgentPlayback, getAgentPlayback, createPlaybackSurface } from './playback.svelte.js';
+export { setAgentPlayback, getAgentPlayback, createPlaybackSurface, createElementPlaybackSurface } from './playback.svelte.js';

package/dist/playback/playback.svelte.d.ts

@@ -12,5 +12,21 @@ export type PlaybackSurfaceOptions = Omit<PlaybackSurface, 'presence'>;
  * `<PresenceLayer>`. `playback` defaults to `getAgentPlayback()`; with none, nothing is attached and
  * calls run instantly. Parity with React's `usePlaybackSurface`.
  */
-export declare function createPlaybackSurface(playback: MaybeGetter<AgentPlayback | null | undefined>, id: MaybeGetter<string | null | undefined>, options?: MaybeGetter<PlaybackSurfaceOptions>): PresenceStore;
+export declare function createPlaybackSurface(playback: MaybeGetter<AgentPlayback | null | undefined>, id: MaybeGetter<string | null | undefined>, options?: MaybeGetter<PlaybackSurfaceOptions>, 
+/** Use this presence store (e.g. a director's, so its cursor and playback's are one) instead of a new one. */
+sharedPresence?: PresenceStore | null): PresenceStore;
+export interface ElementPlaybackSurfaceOptions {
+    /** The kind of a bare `id` / `ids` argument (e.g. `parameter`). */
+    defaultKind?: string;
+    /** A CSS selector for each ref kind the surface can find inside the element. */
+    selectors: Record<string, (id: string) => string>;
+    /** Bring the element on screen (switch to its tab) before the agent acts. */
+    reveal?: () => void | Promise<void>;
+}
+/**
+ * A playback surface for a plain DOM component (call during init): coordinates are pixels of the
+ * element's box, and refs are found by the CSS selectors given per kind. Draw the cursors with
+ * `<PresenceLayer>` inside the element. Parity with React's `useElementPlaybackSurface`.
+ */
+export declare function createElementPlaybackSurface(playback: MaybeGetter<AgentPlayback | null | undefined>, id: MaybeGetter<string | null | undefined>, element: () => HTMLElement | null | undefined, options: MaybeGetter<ElementPlaybackSurfaceOptions>): PresenceStore;
 export {};

package/dist/playback/playback.svelte.js

@@ -16,9 +16,11 @@ export function getAgentPlayback() {
  * `<PresenceLayer>`. `playback` defaults to `getAgentPlayback()`; with none, nothing is attached and
  * calls run instantly. Parity with React's `usePlaybackSurface`.
  */
-export function createPlaybackSurface(playback, id, options = {}) {
+export function createPlaybackSurface(playback, id, options = {}, 
+/** Use this presence store (e.g. a director's, so its cursor and playback's are one) instead of a new one. */
+sharedPresence) {
     const ambient = getAgentPlayback();
-    const presence = new PresenceStore();
+    const presence = sharedPresence ?? new PresenceStore();
     const o = () => read(options);
     $effect(() => {
         const explicit = read(playback);
@@ -50,3 +52,40 @@ export function createPlaybackSurface(playback, id, options = {}) {
     });
     return presence;
 }
+/**
+ * A playback surface for a plain DOM component (call during init): coordinates are pixels of the
+ * element's box, and refs are found by the CSS selectors given per kind. Draw the cursors with
+ * `<PresenceLayer>` inside the element. Parity with React's `useElementPlaybackSurface`.
+ */
+export function createElementPlaybackSurface(playback, id, element, options) {
+    const box = () => element()?.getBoundingClientRect() ?? null;
+    return createPlaybackSurface(playback, id, () => {
+        const o = read(options);
+        return {
+            defaultKind: o.defaultKind,
+            locate: (ref) => {
+                const selector = o.selectors[ref.kind]?.(ref.id);
+                const b = box();
+                const r = selector ? element()?.querySelector(selector)?.getBoundingClientRect() : null;
+                return b && r && r.width > 0 ? { x: r.left - b.left, y: r.top - b.top, width: r.width, height: r.height } : null;
+            },
+            bounds: () => {
+                const r = box();
+                return r && r.width > 0 ? { x: 0, y: 0, width: r.width, height: r.height } : null;
+            },
+            visible: () => {
+                const r = box();
+                return !!r && r.width > 0 && r.height > 0 && !(typeof document !== 'undefined' && document.visibilityState === 'hidden');
+            },
+            toViewport: (p) => {
+                const r = box();
+                return { x: (r?.left ?? 0) + p.x, y: (r?.top ?? 0) + p.y };
+            },
+            fromViewport: (p) => {
+                const r = box();
+                return { x: p.x - (r?.left ?? 0), y: p.y - (r?.top ?? 0) };
+            },
+            reveal: () => o.reveal?.()
+        };
+    });
+}

package/dist/spreadsheet/SpreadsheetEditor.svelte

@@ -20,8 +20,12 @@
     getDataBarCss,
     conditionalFormatStyleString,
     type SpreadsheetPanelId,
-    type SpreadsheetValidationAction
+    type SpreadsheetValidationAction,
+    parseSpreadsheetPlaybackRef
   } from '@pixerate/editor/spreadsheet';
+  import type { AgentPlayback, PlaybackRect, PlaybackRef } from '@pixerate/editor/tools';
+  import { createPlaybackSurface, getAgentPlayback } from '../playback/playback.svelte.js';
+  import PresenceLayer from '../playback/PresenceLayer.svelte';
   import FormulaBar from './FormulaBar.svelte';
   import SpreadsheetValidationDialog from './SpreadsheetValidationDialog.svelte';
   import SpreadsheetConditionalFormatPanel from './SpreadsheetConditionalFormatPanel.svelte';
@@ -54,6 +58,15 @@
      * `true` / `false` force it.
      */
     virtualize?: boolean | 'auto';
+    /**
+     * Agent playback: act out the spreadsheet tools' calls here with the agent's cursor (default:
+     * `setAgentPlayback` above; `null` turns it off).
+     */
+    playback?: AgentPlayback | null;
+    /** The playback surface id (default `spreadsheet`, where `createSpreadsheetToolProvider` plays). */
+    playbackId?: string;
+    /** Bring the grid on screen (switch to its tab) before the agent acts. */
+    onplaybackreveal?: () => void | Promise<void>;
   }
 
   let {
@@ -67,7 +80,10 @@
     onColumnHeaderClick,
     onColumnResize,
     showSheetTabs = false,
-    virtualize = 'auto'
+    virtualize = 'auto',
+    playback,
+    playbackId = 'spreadsheet',
+    onplaybackreveal
   }: Props = $props();
 
   // Virtualised rendering: frozen rows/columns, a spacer, the rows and
@@ -120,6 +136,47 @@
   let isReadOnly = $derived(readOnly || readonly);
 
   let gridContainer = $state<HTMLDivElement | null>(null);
+
+  // Agent playback: the agent's cursor in pixels of the grid's box, finding cells by data-row / data-col.
+  const ambientPlayback = getAgentPlayback();
+  const playing = $derived((playback === undefined ? ambientPlayback : playback) ?? null);
+  const agentPresence = createPlaybackSurface(() => playing, () => playbackId, () => ({
+    defaultKind: 'cell',
+    locate: (ref: PlaybackRef): PlaybackRect | null => {
+      const grid = gridContainer;
+      const range = parseSpreadsheetPlaybackRef(ref);
+      if (!grid || !range) return null;
+      const box = grid.getBoundingClientRect();
+      const inside = (v: number, a: number | null, b: number | null) => (a === null || v >= a) && (b === null || v <= b);
+      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+      for (const td of grid.querySelectorAll<HTMLElement>('td[data-row][data-col]')) {
+        if (!inside(Number(td.dataset.row), range.startRow, range.endRow) || !inside(Number(td.dataset.col), range.startCol, range.endCol)) continue;
+        const r = td.getBoundingClientRect();
+        minX = Math.min(minX, r.left - box.left);
+        minY = Math.min(minY, r.top - box.top);
+        maxX = Math.max(maxX, r.right - box.left);
+        maxY = Math.max(maxY, r.bottom - box.top);
+      }
+      return minX < maxX ? { x: minX, y: minY, width: maxX - minX, height: maxY - minY } : null;
+    },
+    bounds: () => {
+      const r = gridContainer?.getBoundingClientRect();
+      return r && r.width > 0 ? { x: 0, y: 0, width: r.width, height: r.height } : null;
+    },
+    visible: () => {
+      const r = gridContainer?.getBoundingClientRect();
+      return !!r && r.width > 0 && r.height > 0 && !(typeof document !== 'undefined' && document.visibilityState === 'hidden');
+    },
+    toViewport: (p: { x: number; y: number }) => {
+      const r = gridContainer?.getBoundingClientRect();
+      return { x: (r?.left ?? 0) + p.x, y: (r?.top ?? 0) + p.y };
+    },
+    fromViewport: (p: { x: number; y: number }) => {
+      const r = gridContainer?.getBoundingClientRect();
+      return { x: p.x - (r?.left ?? 0), y: p.y - (r?.top ?? 0) };
+    },
+    reveal: () => onplaybackreveal?.()
+  }));
   let cellInput = $state<HTMLInputElement | null>(null);
 
   // Focus the cell editor when it opens, with the caret after the draft
@@ -586,7 +643,7 @@
 {#snippet grid()}
 <div
   bind:this={gridContainer}
-  class="flex flex-col h-full w-full overflow-hidden border border-border bg-background select-none outline-none text-foreground font-sans text-xs {className}"
+  class="relative flex flex-col h-full w-full overflow-hidden border border-border bg-background select-none outline-none text-foreground font-sans text-xs {className}"
   tabindex="0"
   onkeydown={handleKeyDown}
   role="grid"
@@ -879,6 +936,9 @@
   {#if sheetState.validationPrompt}
     <SpreadsheetValidationDialog prompt={sheetState.validationPrompt} onResolve={resolveValidation} />
   {/if}
+  {#if playing}
+    <PresenceLayer presence={agentPresence} />
+  {/if}
 </div>
 {/snippet}
 

package/dist/spreadsheet/SpreadsheetEditor.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import { type SpreadsheetColumn, type SpreadsheetRow, type CellData } from '@pixerate/editor/spreadsheet';
+import type { AgentPlayback } from '@pixerate/editor/tools';
 import { createReactiveSpreadsheet } from './spreadsheet.svelte.js';
 interface Props {
     sheetState?: ReturnType<typeof createReactiveSpreadsheet>;
@@ -23,6 +24,15 @@ interface Props {
      * `true` / `false` force it.
      */
     virtualize?: boolean | 'auto';
+    /**
+     * Agent playback: act out the spreadsheet tools' calls here with the agent's cursor (default:
+     * `setAgentPlayback` above; `null` turns it off).
+     */
+    playback?: AgentPlayback | null;
+    /** The playback surface id (default `spreadsheet`, where `createSpreadsheetToolProvider` plays). */
+    playbackId?: string;
+    /** Bring the grid on screen (switch to its tab) before the agent acts. */
+    onplaybackreveal?: () => void | Promise<void>;
 }
 declare const SpreadsheetEditor: import("svelte").Component<Props, {}, "">;
 type SpreadsheetEditor = ReturnType<typeof SpreadsheetEditor>;

package/dist/video-editor/VideoEditor.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { AgentPlayback } from '@pixerate/editor/tools';
   import { onDestroy } from 'svelte';
   import { VideoEditorController, type VideoEditorOptions } from '@pixerate/editor/video-editor';
   import ClipInspector from './ClipInspector.svelte';
@@ -40,9 +41,13 @@
     /** Show the effects panel (default: when a provider is given or the project has effects). */
     showEffects?: boolean;
     class?: string;
+    /** Agent playback on the timeline (see `<VideoTimeline playback>`; default: `setAgentPlayback` above). */
+    playback?: AgentPlayback | null;
+    /** Bring the editor on screen (switch to its tab) before the agent acts. */
+    onplaybackreveal?: () => void | Promise<void>;
   }
 
-  let { controller, options, editable = true, pxPerSecond = $bindable(100), showIssues = true, showTranscript = true, showScopes = false, effects, showEffects, class: className = '' }: Props = $props();
+  let { controller, options, editable = true, pxPerSecond = $bindable(100), showIssues = true, showTranscript = true, 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)));
@@ -73,7 +78,7 @@
     <VideoPreview controller={ctl} class="rounded-md" />
     <VideoTransport controller={ctl} editable={false} />
     {#if showScopes}<VideoScopes controller={ctl} />{/if}
-    <VideoTimeline controller={ctl} bind:pxPerSecond editable={false} />
+    <VideoTimeline controller={ctl} bind:pxPerSecond editable={false} {playback} {onplaybackreveal} />
     {#if showTranscript}<TranscriptPanel controller={ctl} editable={false} />{/if}
     {@render issueList()}
   </div>
@@ -90,7 +95,7 @@
       {#if effectsShown}<VideoEffectsPanel controller={ctl} class="min-w-0" />{/if}
     </div>
     <div class="flex min-w-0 flex-col gap-2 lg:col-span-3">
-      <VideoTimeline controller={ctl} bind:pxPerSecond />
+      <VideoTimeline controller={ctl} bind:pxPerSecond {playback} {onplaybackreveal} />
       {#if showTranscript}<TranscriptPanel controller={ctl} />{/if}
       {@render issueList()}
     </div>

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

@@ -1,3 +1,4 @@
+import type { AgentPlayback } from '@pixerate/editor/tools';
 import { VideoEditorController, type VideoEditorOptions } from '@pixerate/editor/video-editor';
 import type { EffectProvider } from '@pixerate/editor/effects';
 interface Props {
@@ -27,6 +28,10 @@ interface Props {
     /** Show the effects panel (default: when a provider is given or the project has effects). */
     showEffects?: boolean;
     class?: string;
+    /** Agent playback on the timeline (see `<VideoTimeline playback>`; default: `setAgentPlayback` above). */
+    playback?: AgentPlayback | null;
+    /** Bring the editor on screen (switch to its tab) before the agent acts. */
+    onplaybackreveal?: () => void | Promise<void>;
 }
 declare const VideoEditor: import("svelte").Component<Props, {}, "pxPerSecond">;
 type VideoEditor = ReturnType<typeof VideoEditor>;

package/dist/video-editor/VideoTimeline.svelte

@@ -20,7 +20,11 @@
     type VideoMediaClip,
     type VideoTrack,
     type VideoWaveformMode,
+    parseVideoTimeRef,
   } from '@pixerate/editor/video-editor';
+  import type { AgentPlayback, PlaybackRect, PlaybackRef } from '@pixerate/editor/tools';
+  import { createPlaybackSurface, getAgentPlayback } from '../playback/playback.svelte.js';
+  import PresenceLayer from '../playback/PresenceLayer.svelte';
   import { onDestroy, untrack } from 'svelte';
   import { videoEditorStateOf } from './createVideoEditor.svelte.js';
 
@@ -35,9 +39,18 @@
     /** Draw waveforms in audio clips (default), in every clip with sound (`all`), or not at all. Sound is decoded once per asset through `controller.audioPeaks`. */
     waveforms?: VideoWaveformMode;
     class?: string;
+    /**
+     * Agent playback: act out the video tools' calls here with the agent's cursor (default:
+     * `setAgentPlayback` above; `null` turns it off).
+     */
+    playback?: AgentPlayback | null;
+    /** The playback surface id (default `video`, where the video tool providers play). */
+    playbackId?: string;
+    /** Bring the timeline on screen (switch to its tab) before the agent acts. */
+    onplaybackreveal?: () => void | Promise<void>;
   }
 
-  let { controller, pxPerSecond = $bindable(100), onpxpersecondchange, editable = true, waveforms = 'audio', class: className = '' }: Props = $props();
+  let { controller, pxPerSecond = $bindable(100), onpxpersecondchange, editable = true, waveforms = 'audio', class: className = '', playback, playbackId = 'video', onplaybackreveal }: Props = $props();
   /** Bumped when more sound peaks have loaded, so waveforms redraw. */
   let peaksVersion = $state(0);
   $effect(() => controller.audioPeaks.subscribe(() => peaksVersion++));
@@ -90,6 +103,51 @@
   const btn = 'rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40';
 
   let container: HTMLDivElement | undefined = $state();
+
+  // Agent playback: the agent's cursor in pixels of the timeline's box, finding clips, tracks and times.
+  const ambientPlayback = getAgentPlayback();
+  const playing = $derived((playback === undefined ? ambientPlayback : playback) ?? null);
+  const rectIn = (el: Element | null | undefined): PlaybackRect | null => {
+    const box = container?.getBoundingClientRect();
+    const r = el?.getBoundingClientRect();
+    return box && r && r.width > 0 ? { x: r.left - box.left, y: r.top - box.top, width: r.width, height: r.height } : null;
+  };
+  const q = (selector: string) => container?.querySelector(selector);
+  const agentPresence = createPlaybackSurface(() => playing, () => playbackId, () => ({
+    defaultKind: 'clip',
+    locate: (ref: PlaybackRef) => {
+      if (ref.kind === 'clip') return rectIn(q(`[data-clip="${CSS.escape(ref.id)}"]`));
+      if (ref.kind === 'track') return rectIn(q(`[data-track-lane="${CSS.escape(ref.id)}"]`));
+      if (ref.kind === 'marker') return rectIn(q(`[data-marker="${CSS.escape(ref.id)}"]`));
+      const at = parseVideoTimeRef(ref);
+      if (!at) return null;
+      // The row: the named track, the row of the named clip, else the ruler.
+      const lane = at.track
+        ? q(`[data-track-lane="${CSS.escape(at.track)}"]`)
+        : at.clip
+          ? q(`[data-clip="${CSS.escape(at.clip)}"]`)?.closest('[data-track-lane]')
+          : ruler;
+      const row = rectIn(lane);
+      return row ? { x: row.x + (at.time * px) / 1000 - 3, y: row.y, width: 6, height: row.height } : null;
+    },
+    bounds: () => {
+      const r = container?.getBoundingClientRect();
+      return r && r.width > 0 ? { x: 0, y: 0, width: r.width, height: r.height } : null;
+    },
+    visible: () => {
+      const r = container?.getBoundingClientRect();
+      return !!r && r.width > 0 && r.height > 0 && !(typeof document !== 'undefined' && document.visibilityState === 'hidden');
+    },
+    toViewport: (p: { x: number; y: number }) => {
+      const r = container?.getBoundingClientRect();
+      return { x: (r?.left ?? 0) + p.x, y: (r?.top ?? 0) + p.y };
+    },
+    fromViewport: (p: { x: number; y: number }) => {
+      const r = container?.getBoundingClientRect();
+      return { x: p.x - (r?.left ?? 0), y: p.y - (r?.top ?? 0) };
+    },
+    reveal: () => onplaybackreveal?.()
+  }));
   let ruler: HTMLDivElement | undefined = $state();
 
   interface Drag {
@@ -262,7 +320,7 @@
 <!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
 <div
   bind:this={container}
-  class="flex flex-col gap-1 text-xs outline-none focus-visible:ring-1 focus-visible:ring-rose-500 {className}"
+  class="relative flex flex-col gap-1 text-xs outline-none focus-visible:ring-1 focus-visible:ring-rose-500 {className}"
   tabindex="0"
   role="group"
   aria-label="Timeline"
@@ -346,6 +404,7 @@
             class="relative shrink-0 {track.locked ? 'bg-muted/60' : ''} {track.hidden || track.muted ? 'opacity-60' : ''}"
             style="width:{width}px"
             data-lane={track.id}
+            data-track-lane={track.id}
             onpointerdown={(e) => {
               if (e.button === 0 && !(e.shiftKey || e.metaKey || e.ctrlKey)) controller.select(null);
             }}
@@ -394,4 +453,7 @@
   {#if editor.error}
     <p class="text-red-500" role="alert" data-edit-error="">{editor.error}</p>
   {/if}
+  {#if playing}
+    <PresenceLayer presence={agentPresence} />
+  {/if}
 </div>

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

@@ -1,4 +1,5 @@
 import { type VideoEditorController, type VideoWaveformMode } from '@pixerate/editor/video-editor';
+import type { AgentPlayback } from '@pixerate/editor/tools';
 interface Props {
     controller: VideoEditorController;
     /** Zoom: pixels per second of timeline (default 100). Bindable. */
@@ -10,6 +11,15 @@ interface Props {
     /** Draw waveforms in audio clips (default), in every clip with sound (`all`), or not at all. Sound is decoded once per asset through `controller.audioPeaks`. */
     waveforms?: VideoWaveformMode;
     class?: string;
+    /**
+     * Agent playback: act out the video tools' calls here with the agent's cursor (default:
+     * `setAgentPlayback` above; `null` turns it off).
+     */
+    playback?: AgentPlayback | null;
+    /** The playback surface id (default `video`, where the video tool providers play). */
+    playbackId?: string;
+    /** Bring the timeline on screen (switch to its tab) before the agent acts. */
+    onplaybackreveal?: () => void | Promise<void>;
 }
 declare const VideoTimeline: import("svelte").Component<Props, {}, "pxPerSecond">;
 type VideoTimeline = ReturnType<typeof VideoTimeline>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.102.0",
+  "version": "0.103.1",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -144,7 +144,7 @@
     "@tiptap/extension-bubble-menu": "^2.27.3",
     "@tiptap/extension-placeholder": "^2.27.3",
     "@tiptap/starter-kit": "^2.27.3",
-    "@pixerate/editor": "0.141.0"
+    "@pixerate/editor": "0.142.1"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",