@pixerate/editor 0.140.3 → 0.141.0

package/dist/agent/canvasPlayback.d.cts

@@ -0,0 +1,15 @@
+import { type NodeRectOptions } from '../canvas/arrange.cjs';
+import type { CanvasEdge, CanvasNode } from '../canvas/types.cjs';
+import { type PlaybackStep } from '../tools/playback.cjs';
+import { type planToolCall } from './planner.cjs';
+import type { AgentStep, EditorSnapshot } from './types.cjs';
+/**
+ * Turns the planner's model steps into cursor steps (flow coordinates), against the nodes as they
+ * are before the call. Steps after `commit` play once the change is on the canvas.
+ */
+export declare function planCanvasPlaybackSteps<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge>(steps: readonly AgentStep<TNode, TEdge>[], nodes: readonly TNode[], rectOptions?: NodeRectOptions): PlaybackStep[];
+/**
+ * The cursor steps for one canvas edit tool call (`canvas_add_node`, `edit_canvas`, ...), or `null`
+ * when the call is invalid (the handler then reports the error) or is not a canvas edit.
+ */
+export declare function planCanvasToolPlayback<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge>(name: string, args: Record<string, any>, snapshot: EditorSnapshot<TNode, TEdge>, plannerOptions?: Parameters<typeof planToolCall>[3], rectOptions?: NodeRectOptions): PlaybackStep[] | null;

package/dist/agent/canvasPlayback.d.ts

@@ -0,0 +1,15 @@
+import { type NodeRectOptions } from '../canvas/arrange.js';
+import type { CanvasEdge, CanvasNode } from '../canvas/types.js';
+import { type PlaybackStep } from '../tools/playback.js';
+import { type planToolCall } from './planner.js';
+import type { AgentStep, EditorSnapshot } from './types.js';
+/**
+ * Turns the planner's model steps into cursor steps (flow coordinates), against the nodes as they
+ * are before the call. Steps after `commit` play once the change is on the canvas.
+ */
+export declare function planCanvasPlaybackSteps<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge>(steps: readonly AgentStep<TNode, TEdge>[], nodes: readonly TNode[], rectOptions?: NodeRectOptions): PlaybackStep[];
+/**
+ * The cursor steps for one canvas edit tool call (`canvas_add_node`, `edit_canvas`, ...), or `null`
+ * when the call is invalid (the handler then reports the error) or is not a canvas edit.
+ */
+export declare function planCanvasToolPlayback<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge>(name: string, args: Record<string, any>, snapshot: EditorSnapshot<TNode, TEdge>, plannerOptions?: Parameters<typeof planToolCall>[3], rectOptions?: NodeRectOptions): PlaybackStep[] | null;

package/dist/agent/index.cjs

@@ -10,9 +10,16 @@ var _chunkGLQQ2VILcjs = require('../chunk-GLQQ2VIL.cjs');
 
 
 
-var _chunkMRD3NXKRcjs = require('../chunk-MRD3NXKR.cjs');
+
+
+var _chunkUBRYHNRUcjs = require('../chunk-UBRYHNRU.cjs');
 require('../chunk-4EFNS2HV.cjs');
-require('../chunk-LACYURUW.cjs');
+require('../chunk-TNCWKC5M.cjs');
+
+
+
+
+
 
 
 
@@ -33,12 +40,16 @@ require('../chunk-LACYURUW.cjs');
 
 
 
+var _chunkY4BWZB6Jcjs = require('../chunk-Y4BWZB6J.cjs');
 
 
 
 
 
-var _chunkHDK3T2QScjs = require('../chunk-HDK3T2QS.cjs');
+
+
+
+var _chunk6SFREX6Hcjs = require('../chunk-6SFREX6H.cjs');
 
 
 
@@ -130,6 +141,14 @@ var _chunk55AKPTLMcjs = require('../chunk-55AKPTLM.cjs');
 require('../chunk-N3KJFGXT.cjs');
 
 
+
+
+
+
+
+var _chunkUJGAA6AKcjs = require('../chunk-UJGAA6AK.cjs');
+
+
 var _chunkWOFXZ3XUcjs = require('../chunk-WOFXZ3XU.cjs');
 require('../chunk-FJ2MSI43.cjs');
 
@@ -170,10 +189,10 @@ function planAgentCommand(command, snapshot, options = {}) {
           };
         }
         if (anchorId) {
-          pos = _chunkMRD3NXKRcjs.placeBeside.call(void 0, rects, defaultNodeSize, normalizeSide(command.side), anchorId);
+          pos = _chunkUBRYHNRUcjs.placeBeside.call(void 0, rects, defaultNodeSize, normalizeSide(command.side), anchorId);
         } else if (nodes.length > 0) {
           const lastNode = nodes[nodes.length - 1];
-          pos = _chunkMRD3NXKRcjs.placeBeside.call(void 0, rects, defaultNodeSize, "right", lastNode.id);
+          pos = _chunkUBRYHNRUcjs.placeBeside.call(void 0, rects, defaultNodeSize, "right", lastNode.id);
         } else {
           pos = { x: 100, y: 100 };
         }
@@ -241,12 +260,12 @@ function planAgentCommand(command, snapshot, options = {}) {
             stored[n.id] = { ...n.position };
           }
         }
-        layouted = _chunkMRD3NXKRcjs.ensureLayout.call(void 0, nodes, edges, {
+        layouted = _chunkUBRYHNRUcjs.ensureLayout.call(void 0, nodes, edges, {
           direction: dir,
           storedPositions: stored
         });
       } else {
-        layouted = _chunkMRD3NXKRcjs.getLayoutedNodes.call(void 0, nodes, edges, void 0, { direction: dir });
+        layouted = _chunkUBRYHNRUcjs.getLayoutedNodes.call(void 0, nodes, edges, void 0, { direction: dir });
       }
       const positions = {};
       for (const node of layouted) {
@@ -459,6 +478,87 @@ function planToolCall(name, args, snapshot, options) {
 var _state = require('@tiptap/pm/state');
 var _history = require('@tiptap/pm/history');
 
+// src/agent/canvasPlayback.ts
+var centre = (r) => ({ x: r.x + r.width / 2, y: r.y + r.height / 2 });
+var labelOf = (data) => {
+  const label = _nullishCoalesce(_nullishCoalesce(_optionalChain([data, 'optionalAccess', _16 => _16.label]), () => ( _optionalChain([data, 'optionalAccess', _17 => _17.title]))), () => ( _optionalChain([data, 'optionalAccess', _18 => _18.text])));
+  return typeof label === "string" && label.trim() ? label : null;
+};
+function planCanvasPlaybackSteps(steps, nodes, rectOptions) {
+  const placed = new Map(_chunkUBRYHNRUcjs.createNodeLookup.call(void 0, nodes));
+  const rectOf = (id) => {
+    const node = placed.get(id);
+    return node ? _chunkUBRYHNRUcjs.getNodeRect.call(void 0, node, placed, rectOptions) : null;
+  };
+  const before = [];
+  const after = [];
+  const click = (rect) => rect ? [{ type: "move", to: centre(rect) }, { type: "focus", rect }, { type: "press" }, { type: "release" }] : [];
+  for (const step of steps) {
+    switch (step.type) {
+      case "step:canvas_add_node": {
+        placed.set(step.node.id, step.node);
+        const rect = rectOf(step.node.id);
+        const label = labelOf(step.node.data);
+        before.push(...click(rect), ...label ? [{ type: "type", text: label }] : []);
+        break;
+      }
+      case "step:canvas_add_edge": {
+        const a = rectOf(step.edge.source);
+        const b = rectOf(step.edge.target);
+        if (!a || !b) break;
+        const label = typeof step.edge.label === "string" ? step.edge.label : labelOf(step.edge.data);
+        before.push(
+          { type: "move", to: { x: a.x + a.width, y: a.y + a.height / 2 } },
+          { type: "press" },
+          { type: "drag", to: { x: b.x, y: b.y + b.height / 2 } },
+          { type: "release" },
+          ...label ? [{ type: "type", text: label }] : []
+        );
+        break;
+      }
+      case "step:canvas_update_node": {
+        const rect = rectOf(step.id);
+        const label = labelOf(step.data);
+        before.push(...click(rect), ...rect && label ? [{ type: "type", text: label }] : []);
+        break;
+      }
+      case "step:canvas_remove_nodes":
+        for (const id of step.nodeIds.slice(0, 8)) before.push(...click(rectOf(id)));
+        break;
+      case "step:canvas_select":
+        for (const id of step.nodeIds.slice(0, 8)) before.push(...click(rectOf(id)));
+        break;
+      case "step:canvas_highlight":
+        for (const id of step.nodeIds.slice(0, 8)) {
+          const rect = rectOf(id);
+          if (rect) before.push({ type: "move", to: centre(rect) }, { type: "focus", rect });
+        }
+        break;
+      case "step:canvas_move_nodes": {
+        const moved = Object.entries(step.positions);
+        for (const [id, position] of moved) {
+          const node = placed.get(id);
+          if (node) placed.set(id, { ...node, position });
+        }
+        const rect = _chunk6SFREX6Hcjs.unionRects.call(void 0, moved.map(([id]) => rectOf(id)));
+        if (rect) after.push({ type: "move", to: centre(rect) }, { type: "focus", rect }, { type: "wait", ms: 450 });
+        break;
+      }
+      default:
+        break;
+    }
+  }
+  if (!before.length && !after.length) return [];
+  return [...before, { type: "commit" }, ...after];
+}
+function planCanvasToolPlayback(name, args, snapshot, plannerOptions, rectOptions) {
+  const command = toolCallToAgentCommand(name, args);
+  if (!command || !command.type.startsWith("canvas:") || validateAgentCommand(command, snapshot)) return null;
+  const steps = planAgentCommand(command, snapshot, plannerOptions);
+  const planned = planCanvasPlaybackSteps(steps, _nullishCoalesce(_optionalChain([snapshot, 'access', _19 => _19.canvas, 'optionalAccess', _20 => _20.nodes]), () => ( [])), rectOptions);
+  return planned.length ? planned : null;
+}
+
 // src/agent/documentChartTools.ts
 
 var READ = { readOnlyHint: true, destructiveHint: false, idempotentHint: true, openWorldHint: false };
@@ -573,7 +673,7 @@ function createDocumentChartTools(editor) {
       const ed = editor();
       checkPosition(ed, at);
       const spec = checkedSpec(input);
-      const id = _nullishCoalesce(_optionalChain([ed, 'access', _16 => _16.extensionManager, 'access', _17 => _17.extensions, 'access', _18 => _18.find, 'call', _19 => _19((e) => e.name === "chart"), 'optionalAccess', _20 => _20.options, 'access', _21 => _21.generateId, 'optionalCall', _22 => _22()]), () => ( `chart-${Date.now().toString(36)}`));
+      const id = _nullishCoalesce(_optionalChain([ed, 'access', _21 => _21.extensionManager, 'access', _22 => _22.extensions, 'access', _23 => _23.find, 'call', _24 => _24((e) => e.name === "chart"), 'optionalAccess', _25 => _25.options, 'access', _26 => _26.generateId, 'optionalCall', _27 => _27()]), () => ( `chart-${Date.now().toString(36)}`));
       const node = { type: "chart", attrs: { id, spec, width, ...height !== void 0 ? { height } : {} } };
       const chain = ed.chain().command(({ tr }) => (_history.closeHistory.call(void 0, tr), true));
       const ok = (at !== void 0 ? chain.insertContentAt(at, node) : chain.insertContent(node)).run();
@@ -788,7 +888,7 @@ function createDocumentFormatTools(editor, changed) {
   const formatText = (ed) => {
     const { schema } = ed;
     const has = (name) => !!schema.marks[name];
-    const hasAttr = (mark, attr) => !!_optionalChain([schema, 'access', _23 => _23.marks, 'access', _24 => _24[mark], 'optionalAccess', _25 => _25.spec, 'access', _26 => _26.attrs, 'optionalAccess', _27 => _27[attr]]);
+    const hasAttr = (mark, attr) => !!_optionalChain([schema, 'access', _28 => _28.marks, 'access', _29 => _29[mark], 'optionalAccess', _30 => _30.spec, 'access', _31 => _31.attrs, 'optionalAccess', _32 => _32[attr]]);
     const properties = { ...RANGE_PROPERTIES };
     for (const [arg, mark, what] of TOGGLE_MARKS) {
       if (has(mark)) properties[arg] = { type: "boolean", description: `${what} true sets it, false clears it; omit to leave it.` };
@@ -863,7 +963,7 @@ function createDocumentFormatTools(editor, changed) {
   const blockTypes = (ed) => BLOCK_TYPES.filter(([, node]) => !!ed.schema.nodes[node] && (!LIST_ITEMS[node] || !!ed.schema.nodes[LIST_ITEMS[node]]));
   const headingLevels = (ed) => {
     const ext = ed.extensionManager.extensions.find((e) => e.name === "heading");
-    return _nullishCoalesce(_optionalChain([ext, 'optionalAccess', _28 => _28.options, 'optionalAccess', _29 => _29.levels]), () => ( [1, 2, 3, 4, 5, 6]));
+    return _nullishCoalesce(_optionalChain([ext, 'optionalAccess', _33 => _33.options, 'optionalAccess', _34 => _34.levels]), () => ( [1, 2, 3, 4, 5, 6]));
   };
   const setBlockType = (ed) => {
     const types = blockTypes(ed);
@@ -913,8 +1013,8 @@ function createDocumentFormatTools(editor, changed) {
   const setTextAlign = (ed) => {
     const ext = ed.extensionManager.extensions.find((e) => e.name === "textAlign");
     if (!ext) return null;
-    const alignments = (_nullishCoalesce(_optionalChain([ext, 'access', _30 => _30.options, 'optionalAccess', _31 => _31.alignments]), () => ( ["left", "center", "right", "justify"]))).slice();
-    const types = _nullishCoalesce(_optionalChain([ext, 'access', _32 => _32.options, 'optionalAccess', _33 => _33.types]), () => ( ["heading", "paragraph"]));
+    const alignments = (_nullishCoalesce(_optionalChain([ext, 'access', _35 => _35.options, 'optionalAccess', _36 => _36.alignments]), () => ( ["left", "center", "right", "justify"]))).slice();
+    const types = _nullishCoalesce(_optionalChain([ext, 'access', _37 => _37.options, 'optionalAccess', _38 => _38.types]), () => ( ["heading", "paragraph"]));
     return {
       name: "set_text_align",
       title: "Align text",
@@ -981,13 +1081,13 @@ function textBlocks(editor) {
 function createTextPresence(editor, providerId, option) {
   const config = option === false ? null : option === true || option === void 0 ? {} : option;
   const caret = {
-    id: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _34 => _34.id]), () => ( providerId)),
-    name: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _35 => _35.name]), () => ( _chunkL434J57Vcjs.DEFAULT_AGENT_CARET_NAME)),
-    color: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _36 => _36.color]), () => ( _chunkL434J57Vcjs.DEFAULT_AGENT_CARET_COLOR))
+    id: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _39 => _39.id]), () => ( providerId)),
+    name: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _40 => _40.name]), () => ( _chunkL434J57Vcjs.DEFAULT_AGENT_CARET_NAME)),
+    color: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _41 => _41.color]), () => ( _chunkL434J57Vcjs.DEFAULT_AGENT_CARET_COLOR))
   };
-  const typing = !_optionalChain([config, 'optionalAccess', _37 => _37.typing]) ? null : config.typing === true ? {} : config.typing;
-  const idleMs = _nullishCoalesce(_optionalChain([config, 'optionalAccess', _38 => _38.idleMs]), () => ( 12e3));
-  const changedMs = _nullishCoalesce(_optionalChain([config, 'optionalAccess', _39 => _39.changedMs]), () => ( 1500));
+  const typing = !_optionalChain([config, 'optionalAccess', _42 => _42.typing]) ? null : config.typing === true ? {} : config.typing;
+  const idleMs = _nullishCoalesce(_optionalChain([config, 'optionalAccess', _43 => _43.idleMs]), () => ( 12e3));
+  const changedMs = _nullishCoalesce(_optionalChain([config, 'optionalAccess', _44 => _44.changedMs]), () => ( 1500));
   let idleTimer;
   let tintTimer;
   const live = () => {
@@ -1723,7 +1823,7 @@ function missingArgumentsMessage(name, args) {
   const required = _chunkSVFEVKLFcjs.EDIT_OPERATION_REQUIRED_ARGUMENTS[name][args.operation];
   if (!required) return `Unknown operation "${args.operation}".`;
   const missing = required.filter(
-    (key) => key === "id" ? args.id === void 0 && _optionalChain([args, 'access', _40 => _40.node, 'optionalAccess', _41 => _41.id]) === void 0 : args[key] === void 0
+    (key) => key === "id" ? args.id === void 0 && _optionalChain([args, 'access', _45 => _45.node, 'optionalAccess', _46 => _46.id]) === void 0 : args[key] === void 0
   );
   return missing.length ? `Operation "${args.operation}" requires ${required.join(", ")}; missing: ${missing.join(", ")}.` : `Operation "${args.operation}" has invalid arguments (expected ${required.join(", ")} with the types in the schema).`;
 }
@@ -1755,8 +1855,8 @@ function createEditorMcpToolProvider(options) {
     await options.applySteps(steps);
     return describeSteps(steps);
   };
-  const canvas = _nullishCoalesce(_optionalChain([options, 'access', _42 => _42.surfaces, 'optionalAccess', _43 => _43.canvas]), () => ( true));
-  const prompt = _nullishCoalesce(_optionalChain([options, 'access', _44 => _44.surfaces, 'optionalAccess', _45 => _45.prompt]), () => ( true));
+  const canvas = _nullishCoalesce(_optionalChain([options, 'access', _47 => _47.surfaces, 'optionalAccess', _48 => _48.canvas]), () => ( true));
+  const prompt = _nullishCoalesce(_optionalChain([options, 'access', _49 => _49.surfaces, 'optionalAccess', _50 => _50.prompt]), () => ( true));
   const editTools = options.toolStyle === "combined" ? [...canvas ? [_chunkSVFEVKLFcjs.MCP_TOOL_EDIT_CANVAS] : [], ...prompt ? [_chunkSVFEVKLFcjs.MCP_TOOL_EDIT_PROMPT] : []] : [...canvas ? _chunkSVFEVKLFcjs.EDITOR_CANVAS_TOOLS : [], ...prompt ? _chunkSVFEVKLFcjs.EDITOR_PROMPT_TOOLS : []];
   const tools = [
     {
@@ -1769,7 +1869,12 @@ function createEditorMcpToolProvider(options) {
         };
       }
     },
-    ...editTools.map((definition) => ({ ...definition, handler: edit(definition.name) }))
+    ...editTools.map((definition) => ({
+      ...definition,
+      handler: edit(definition.name),
+      // The cursor goes where the planner puts the change (see `planCanvasToolPlayback`).
+      plan: (args) => planCanvasToolPlayback(definition.name, args, options.getSnapshot(), options.plannerOptions, options.rectOptions)
+    }))
   ];
   if (options.captureView) {
     const capture = options.captureView;
@@ -1787,6 +1892,7 @@ function createEditorMcpToolProvider(options) {
     title: "Canvas and prompt editor",
     description: "The node canvas and the prompt: editor state, nodes and edges, layout, prompt text, and a view of the editor.",
     skill: "pixerate-canvas",
+    ...options.playbackSurface ? { playbackSurface: options.playbackSurface } : {},
     tools
   };
 }
@@ -2065,4 +2171,19 @@ function createCanvasComponentToolProvider(controller, options = { id: "canvas-c
 
 
 
-exports.CAPTURE_EXCLUDE_SELECTOR = _chunkSVFEVKLFcjs.CAPTURE_EXCLUDE_SELECTOR; exports.CAPTURE_OVERLAY_SELECTORS = _chunkSVFEVKLFcjs.CAPTURE_OVERLAY_SELECTORS; exports.EDITOR_CANVAS_TOOLS = _chunkSVFEVKLFcjs.EDITOR_CANVAS_TOOLS; exports.EDITOR_MCP_TOOLS = _chunkSVFEVKLFcjs.EDITOR_MCP_TOOLS; exports.EDITOR_PROMPT_TOOLS = _chunkSVFEVKLFcjs.EDITOR_PROMPT_TOOLS; exports.EDIT_OPERATION_REQUIRED_ARGUMENTS = _chunkSVFEVKLFcjs.EDIT_OPERATION_REQUIRED_ARGUMENTS; exports.EXPORT_EXCLUDED_SELECTORS = _chunkSVFEVKLFcjs.EXPORT_EXCLUDED_SELECTORS; exports.JSON_RPC_ERRORS = _chunkHDK3T2QScjs.JSON_RPC_ERRORS; exports.MCP_PROTOCOL_VERSIONS = _chunkHDK3T2QScjs.MCP_PROTOCOL_VERSIONS; exports.MCP_TOOL_CANVAS_ADD_NODE = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_ADD_NODE; exports.MCP_TOOL_CANVAS_CONNECT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_CONNECT; exports.MCP_TOOL_CANVAS_HIGHLIGHT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_HIGHLIGHT; exports.MCP_TOOL_CANVAS_LAYOUT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_LAYOUT; exports.MCP_TOOL_CANVAS_REMOVE_NODES = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_REMOVE_NODES; exports.MCP_TOOL_CANVAS_SELECT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_SELECT; exports.MCP_TOOL_CANVAS_UPDATE_NODE = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_UPDATE_NODE; exports.MCP_TOOL_EDIT_CANVAS = _chunkSVFEVKLFcjs.MCP_TOOL_EDIT_CANVAS; exports.MCP_TOOL_EDIT_PROMPT = _chunkSVFEVKLFcjs.MCP_TOOL_EDIT_PROMPT; exports.MCP_TOOL_GET_EDITOR_STATE = _chunkSVFEVKLFcjs.MCP_TOOL_GET_EDITOR_STATE; exports.MCP_TOOL_PROMPT_INSERT_TEXT = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_INSERT_TEXT; exports.MCP_TOOL_PROMPT_REPLACE_RANGE = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_REPLACE_RANGE; exports.MCP_TOOL_PROMPT_SELECT = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_SELECT; exports.MCP_TOOL_PROMPT_SET_VARIABLE = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_SET_VARIABLE; exports.MCP_TOOL_VIEW_EDITOR = _chunkSVFEVKLFcjs.MCP_TOOL_VIEW_EDITOR; exports.TOOL_BRIDGE_DEFAULT_PORT = _chunkHDK3T2QScjs.TOOL_BRIDGE_DEFAULT_PORT; exports.TOOL_BRIDGE_PROTOCOL = _chunkHDK3T2QScjs.TOOL_BRIDGE_PROTOCOL; exports.TOOL_DISCOVERY_TOOLS = _chunkHDK3T2QScjs.TOOL_DISCOVERY_TOOLS; exports.TOOL_NAMESPACE_SEPARATOR = _chunkHDK3T2QScjs.TOOL_NAMESPACE_SEPARATOR; exports.ToolRegistry = _chunkHDK3T2QScjs.ToolRegistry; exports.ToolRegistryError = _chunkHDK3T2QScjs.ToolRegistryError; exports.ToolRegistryView = _chunkHDK3T2QScjs.ToolRegistryView; exports.UNSAFE_JSON_KEYS = _chunk2BSBFBOAcjs.UNSAFE_JSON_KEYS; exports.baseToolName = _chunkHDK3T2QScjs.baseToolName; exports.captureInputSchema = _chunkN2FGYZ4Qcjs.captureInputSchema; exports.captureOutputSize = _chunkN2FGYZ4Qcjs.captureOutputSize; exports.cloneElementWithStyles = _chunkSVFEVKLFcjs.cloneElementWithStyles; exports.connectToolBridge = _chunkHDK3T2QScjs.connectToolBridge; exports.createCanvasComponentToolProvider = createCanvasComponentToolProvider; exports.createCaptureTool = _chunkN2FGYZ4Qcjs.createCaptureTool; exports.createCaptureToolProvider = _chunkN2FGYZ4Qcjs.createCaptureToolProvider; exports.createDocumentChartTools = createDocumentChartTools; exports.createEditorMcpToolProvider = createEditorMcpToolProvider; exports.createElementCaptureSurface = _chunkSVFEVKLFcjs.createElementCaptureSurface; exports.createMcpServer = _chunkHDK3T2QScjs.createMcpServer; exports.createRichTextToolProvider = createRichTextToolProvider; exports.createSpreadsheetToolProvider = createSpreadsheetToolProvider; exports.createToolRegistry = _chunkHDK3T2QScjs.createToolRegistry; exports.elementToSvg = _chunkSVFEVKLFcjs.elementToSvg; exports.errorResult = _chunkHDK3T2QScjs.errorResult; exports.isUnsafeJsonKey = _chunk2BSBFBOAcjs.isUnsafeJsonKey; exports.listSkills = _chunkHDK3T2QScjs.listSkills; exports.normalizeSide = normalizeSide; exports.parseSkillFrontmatter = _chunkHDK3T2QScjs.parseSkillFrontmatter; exports.planAgentCommand = planAgentCommand; exports.planToolCall = planToolCall; exports.rasterizeElement = _chunkSVFEVKLFcjs.rasterizeElement; exports.readSkillFile = _chunkHDK3T2QScjs.readSkillFile; exports.resolveCaptureRequest = _chunkN2FGYZ4Qcjs.resolveCaptureRequest; exports.searchTokens = _chunkHDK3T2QScjs.searchTokens; exports.searchTools = _chunkHDK3T2QScjs.searchTools; exports.stripPrototypeKeys = _chunk2BSBFBOAcjs.stripPrototypeKeys; exports.summarize = _chunkHDK3T2QScjs.summarize; exports.toCapturedImageData = _chunkN2FGYZ4Qcjs.toCapturedImageData; exports.toToolResult = _chunkHDK3T2QScjs.toToolResult; exports.toolCallToAgentCommand = toolCallToAgentCommand; exports.toolsetInstructions = _chunkHDK3T2QScjs.toolsetInstructions; exports.toolsetName = _chunkHDK3T2QScjs.toolsetName; exports.unionCaptureRects = _chunkN2FGYZ4Qcjs.unionCaptureRects; exports.unknownToolMessage = _chunkHDK3T2QScjs.unknownToolMessage; exports.validateAgentCommand = validateAgentCommand; exports.validateJsonSchema = _chunkWOFXZ3XUcjs.validateJsonSchema;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.AgentPlayback = _chunk6SFREX6Hcjs.AgentPlayback; exports.CAPTURE_EXCLUDE_SELECTOR = _chunkSVFEVKLFcjs.CAPTURE_EXCLUDE_SELECTOR; exports.CAPTURE_OVERLAY_SELECTORS = _chunkSVFEVKLFcjs.CAPTURE_OVERLAY_SELECTORS; exports.EDITOR_CANVAS_TOOLS = _chunkSVFEVKLFcjs.EDITOR_CANVAS_TOOLS; exports.EDITOR_MCP_TOOLS = _chunkSVFEVKLFcjs.EDITOR_MCP_TOOLS; exports.EDITOR_PROMPT_TOOLS = _chunkSVFEVKLFcjs.EDITOR_PROMPT_TOOLS; exports.EDIT_OPERATION_REQUIRED_ARGUMENTS = _chunkSVFEVKLFcjs.EDIT_OPERATION_REQUIRED_ARGUMENTS; exports.EXPORT_EXCLUDED_SELECTORS = _chunkSVFEVKLFcjs.EXPORT_EXCLUDED_SELECTORS; exports.JSON_RPC_ERRORS = _chunkY4BWZB6Jcjs.JSON_RPC_ERRORS; exports.MCP_PROTOCOL_VERSIONS = _chunkY4BWZB6Jcjs.MCP_PROTOCOL_VERSIONS; exports.MCP_TOOL_CANVAS_ADD_NODE = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_ADD_NODE; exports.MCP_TOOL_CANVAS_CONNECT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_CONNECT; exports.MCP_TOOL_CANVAS_HIGHLIGHT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_HIGHLIGHT; exports.MCP_TOOL_CANVAS_LAYOUT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_LAYOUT; exports.MCP_TOOL_CANVAS_REMOVE_NODES = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_REMOVE_NODES; exports.MCP_TOOL_CANVAS_SELECT = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_SELECT; exports.MCP_TOOL_CANVAS_UPDATE_NODE = _chunkSVFEVKLFcjs.MCP_TOOL_CANVAS_UPDATE_NODE; exports.MCP_TOOL_EDIT_CANVAS = _chunkSVFEVKLFcjs.MCP_TOOL_EDIT_CANVAS; exports.MCP_TOOL_EDIT_PROMPT = _chunkSVFEVKLFcjs.MCP_TOOL_EDIT_PROMPT; exports.MCP_TOOL_GET_EDITOR_STATE = _chunkSVFEVKLFcjs.MCP_TOOL_GET_EDITOR_STATE; exports.MCP_TOOL_PROMPT_INSERT_TEXT = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_INSERT_TEXT; exports.MCP_TOOL_PROMPT_REPLACE_RANGE = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_REPLACE_RANGE; exports.MCP_TOOL_PROMPT_SELECT = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_SELECT; exports.MCP_TOOL_PROMPT_SET_VARIABLE = _chunkSVFEVKLFcjs.MCP_TOOL_PROMPT_SET_VARIABLE; exports.MCP_TOOL_VIEW_EDITOR = _chunkSVFEVKLFcjs.MCP_TOOL_VIEW_EDITOR; exports.PRESENCE_COLORS = _chunkUJGAA6AKcjs.PRESENCE_COLORS; exports.PerformanceQueue = _chunkUJGAA6AKcjs.PerformanceQueue; exports.PresenceStore = _chunkUJGAA6AKcjs.PresenceStore; exports.TOOL_BRIDGE_DEFAULT_PORT = _chunkY4BWZB6Jcjs.TOOL_BRIDGE_DEFAULT_PORT; exports.TOOL_BRIDGE_PROTOCOL = _chunkY4BWZB6Jcjs.TOOL_BRIDGE_PROTOCOL; exports.TOOL_DISCOVERY_TOOLS = _chunkY4BWZB6Jcjs.TOOL_DISCOVERY_TOOLS; exports.TOOL_NAMESPACE_SEPARATOR = _chunkY4BWZB6Jcjs.TOOL_NAMESPACE_SEPARATOR; exports.ToolRegistry = _chunkY4BWZB6Jcjs.ToolRegistry; exports.ToolRegistryError = _chunkY4BWZB6Jcjs.ToolRegistryError; exports.ToolRegistryView = _chunkY4BWZB6Jcjs.ToolRegistryView; exports.UNSAFE_JSON_KEYS = _chunk2BSBFBOAcjs.UNSAFE_JSON_KEYS; exports.baseToolName = _chunkY4BWZB6Jcjs.baseToolName; exports.captureInputSchema = _chunkN2FGYZ4Qcjs.captureInputSchema; exports.captureOutputSize = _chunkN2FGYZ4Qcjs.captureOutputSize; exports.cloneElementWithStyles = _chunkSVFEVKLFcjs.cloneElementWithStyles; exports.connectToolBridge = _chunkY4BWZB6Jcjs.connectToolBridge; exports.createAgentPlayback = _chunk6SFREX6Hcjs.createAgentPlayback; exports.createCanvasComponentToolProvider = createCanvasComponentToolProvider; exports.createCaptureTool = _chunkN2FGYZ4Qcjs.createCaptureTool; exports.createCaptureToolProvider = _chunkN2FGYZ4Qcjs.createCaptureToolProvider; exports.createDocumentChartTools = createDocumentChartTools; exports.createEditorMcpToolProvider = createEditorMcpToolProvider; exports.createElementCaptureSurface = _chunkSVFEVKLFcjs.createElementCaptureSurface; exports.createInstantPresenceClock = _chunkUJGAA6AKcjs.createInstantPresenceClock; exports.createMcpServer = _chunkY4BWZB6Jcjs.createMcpServer; exports.createRichTextToolProvider = createRichTextToolProvider; exports.createSpreadsheetToolProvider = createSpreadsheetToolProvider; exports.createToolRegistry = _chunkY4BWZB6Jcjs.createToolRegistry; exports.derivePlaybackSteps = _chunk6SFREX6Hcjs.derivePlaybackSteps; exports.elementToSvg = _chunkSVFEVKLFcjs.elementToSvg; exports.errorResult = _chunkY4BWZB6Jcjs.errorResult; exports.isUnsafeJsonKey = _chunk2BSBFBOAcjs.isUnsafeJsonKey; exports.listSkills = _chunkY4BWZB6Jcjs.listSkills; exports.normalizeSide = normalizeSide; exports.parseSkillFrontmatter = _chunkY4BWZB6Jcjs.parseSkillFrontmatter; exports.planAgentCommand = planAgentCommand; exports.planCanvasPlaybackSteps = planCanvasPlaybackSteps; exports.planCanvasToolPlayback = planCanvasToolPlayback; exports.planToolCall = planToolCall; exports.playbackRefsFromArgs = _chunk6SFREX6Hcjs.playbackRefsFromArgs; exports.playbackRefsFromResult = _chunk6SFREX6Hcjs.playbackRefsFromResult; exports.rasterizeElement = _chunkSVFEVKLFcjs.rasterizeElement; exports.readSkillFile = _chunkY4BWZB6Jcjs.readSkillFile; exports.readingTime = _chunk6SFREX6Hcjs.readingTime; exports.realPresenceClock = _chunkUJGAA6AKcjs.realPresenceClock; exports.resolveCaptureRequest = _chunkN2FGYZ4Qcjs.resolveCaptureRequest; exports.searchTokens = _chunkY4BWZB6Jcjs.searchTokens; exports.searchTools = _chunkY4BWZB6Jcjs.searchTools; exports.stripPrototypeKeys = _chunk2BSBFBOAcjs.stripPrototypeKeys; exports.summarize = _chunkY4BWZB6Jcjs.summarize; exports.toCapturedImageData = _chunkN2FGYZ4Qcjs.toCapturedImageData; exports.toToolResult = _chunkY4BWZB6Jcjs.toToolResult; exports.toolCallToAgentCommand = toolCallToAgentCommand; exports.toolsetInstructions = _chunkY4BWZB6Jcjs.toolsetInstructions; exports.toolsetName = _chunkY4BWZB6Jcjs.toolsetName; exports.tweenPresenceCursor = _chunkUJGAA6AKcjs.tweenPresenceCursor; exports.unionCaptureRects = _chunkN2FGYZ4Qcjs.unionCaptureRects; exports.unionRects = _chunk6SFREX6Hcjs.unionRects; exports.unknownToolMessage = _chunkY4BWZB6Jcjs.unknownToolMessage; exports.validateAgentCommand = validateAgentCommand; exports.validateJsonSchema = _chunkWOFXZ3XUcjs.validateJsonSchema;

package/dist/agent/index.d.cts

@@ -4,3 +4,4 @@ export * from '../tools/index.cjs';
 export * from './providers.cjs';
 export * from './documentChartTools.cjs';
 export * from './componentTools.cjs';
+export * from './canvasPlayback.cjs';

package/dist/agent/index.d.ts

@@ -4,3 +4,4 @@ export * from '../tools/index.js';
 export * from './providers.js';
 export * from './documentChartTools.js';
 export * from './componentTools.js';
+export * from './canvasPlayback.js';

package/dist/agent/index.js

@@ -7,12 +7,14 @@ import {
   hasVariantCommands
 } from "../chunk-3TNA7JKI.js";
 import {
+  createNodeLookup,
   ensureLayout,
   getLayoutedNodes,
+  getNodeRect,
   placeBeside
-} from "../chunk-BTZS3KZY.js";
+} from "../chunk-DW4CV5H4.js";
 import "../chunk-7KZ2HKKC.js";
-import "../chunk-K73HMKQP.js";
+import "../chunk-PLKIYNJZ.js";
 import {
   JSON_RPC_ERRORS,
   MCP_PROTOCOL_VERSIONS,
@@ -38,7 +40,16 @@ import {
   toolsetInstructions,
   toolsetName,
   unknownToolMessage
-} from "../chunk-RB62U6MS.js";
+} from "../chunk-RFBFTLVN.js";
+import {
+  AgentPlayback,
+  createAgentPlayback,
+  derivePlaybackSteps,
+  playbackRefsFromArgs,
+  playbackRefsFromResult,
+  readingTime,
+  unionRects
+} from "../chunk-MFFE55CS.js";
 import {
   CAPTURE_EXCLUDE_SELECTOR,
   CAPTURE_OVERLAY_SELECTORS,
@@ -128,6 +139,14 @@ import {
   isFormulaError
 } from "../chunk-II2WIF5Z.js";
 import "../chunk-WJSD3MAZ.js";
+import {
+  PRESENCE_COLORS,
+  PerformanceQueue,
+  PresenceStore,
+  createInstantPresenceClock,
+  realPresenceClock,
+  tweenPresenceCursor
+} from "../chunk-PEEP2YR7.js";
 import {
   validateJsonSchema
 } from "../chunk-V2ZCJRDM.js";
@@ -459,6 +478,87 @@ function planToolCall(name, args, snapshot, options) {
 import { TextSelection as TextSelection2 } from "@tiptap/pm/state";
 import { closeHistory as closeHistory3 } from "@tiptap/pm/history";
 
+// src/agent/canvasPlayback.ts
+var centre = (r) => ({ x: r.x + r.width / 2, y: r.y + r.height / 2 });
+var labelOf = (data) => {
+  const label = data?.label ?? data?.title ?? data?.text;
+  return typeof label === "string" && label.trim() ? label : null;
+};
+function planCanvasPlaybackSteps(steps, nodes, rectOptions) {
+  const placed = new Map(createNodeLookup(nodes));
+  const rectOf = (id) => {
+    const node = placed.get(id);
+    return node ? getNodeRect(node, placed, rectOptions) : null;
+  };
+  const before = [];
+  const after = [];
+  const click = (rect) => rect ? [{ type: "move", to: centre(rect) }, { type: "focus", rect }, { type: "press" }, { type: "release" }] : [];
+  for (const step of steps) {
+    switch (step.type) {
+      case "step:canvas_add_node": {
+        placed.set(step.node.id, step.node);
+        const rect = rectOf(step.node.id);
+        const label = labelOf(step.node.data);
+        before.push(...click(rect), ...label ? [{ type: "type", text: label }] : []);
+        break;
+      }
+      case "step:canvas_add_edge": {
+        const a = rectOf(step.edge.source);
+        const b = rectOf(step.edge.target);
+        if (!a || !b) break;
+        const label = typeof step.edge.label === "string" ? step.edge.label : labelOf(step.edge.data);
+        before.push(
+          { type: "move", to: { x: a.x + a.width, y: a.y + a.height / 2 } },
+          { type: "press" },
+          { type: "drag", to: { x: b.x, y: b.y + b.height / 2 } },
+          { type: "release" },
+          ...label ? [{ type: "type", text: label }] : []
+        );
+        break;
+      }
+      case "step:canvas_update_node": {
+        const rect = rectOf(step.id);
+        const label = labelOf(step.data);
+        before.push(...click(rect), ...rect && label ? [{ type: "type", text: label }] : []);
+        break;
+      }
+      case "step:canvas_remove_nodes":
+        for (const id of step.nodeIds.slice(0, 8)) before.push(...click(rectOf(id)));
+        break;
+      case "step:canvas_select":
+        for (const id of step.nodeIds.slice(0, 8)) before.push(...click(rectOf(id)));
+        break;
+      case "step:canvas_highlight":
+        for (const id of step.nodeIds.slice(0, 8)) {
+          const rect = rectOf(id);
+          if (rect) before.push({ type: "move", to: centre(rect) }, { type: "focus", rect });
+        }
+        break;
+      case "step:canvas_move_nodes": {
+        const moved = Object.entries(step.positions);
+        for (const [id, position] of moved) {
+          const node = placed.get(id);
+          if (node) placed.set(id, { ...node, position });
+        }
+        const rect = unionRects(moved.map(([id]) => rectOf(id)));
+        if (rect) after.push({ type: "move", to: centre(rect) }, { type: "focus", rect }, { type: "wait", ms: 450 });
+        break;
+      }
+      default:
+        break;
+    }
+  }
+  if (!before.length && !after.length) return [];
+  return [...before, { type: "commit" }, ...after];
+}
+function planCanvasToolPlayback(name, args, snapshot, plannerOptions, rectOptions) {
+  const command = toolCallToAgentCommand(name, args);
+  if (!command || !command.type.startsWith("canvas:") || validateAgentCommand(command, snapshot)) return null;
+  const steps = planAgentCommand(command, snapshot, plannerOptions);
+  const planned = planCanvasPlaybackSteps(steps, snapshot.canvas?.nodes ?? [], rectOptions);
+  return planned.length ? planned : null;
+}
+
 // src/agent/documentChartTools.ts
 import { closeHistory } from "@tiptap/pm/history";
 var READ = { readOnlyHint: true, destructiveHint: false, idempotentHint: true, openWorldHint: false };
@@ -1769,7 +1869,12 @@ function createEditorMcpToolProvider(options) {
         };
       }
     },
-    ...editTools.map((definition) => ({ ...definition, handler: edit(definition.name) }))
+    ...editTools.map((definition) => ({
+      ...definition,
+      handler: edit(definition.name),
+      // The cursor goes where the planner puts the change (see `planCanvasToolPlayback`).
+      plan: (args) => planCanvasToolPlayback(definition.name, args, options.getSnapshot(), options.plannerOptions, options.rectOptions)
+    }))
   ];
   if (options.captureView) {
     const capture = options.captureView;
@@ -1787,6 +1892,7 @@ function createEditorMcpToolProvider(options) {
     title: "Canvas and prompt editor",
     description: "The node canvas and the prompt: editor state, nodes and edges, layout, prompt text, and a view of the editor.",
     skill: "pixerate-canvas",
+    ...options.playbackSurface ? { playbackSurface: options.playbackSurface } : {},
     tools
   };
 }
@@ -1994,6 +2100,7 @@ function createCanvasComponentToolProvider(controller, options = { id: "canvas-c
   };
 }
 export {
+  AgentPlayback,
   CAPTURE_EXCLUDE_SELECTOR,
   CAPTURE_OVERLAY_SELECTORS,
   EDITOR_CANVAS_TOOLS,
@@ -2018,6 +2125,9 @@ export {
   MCP_TOOL_PROMPT_SELECT,
   MCP_TOOL_PROMPT_SET_VARIABLE,
   MCP_TOOL_VIEW_EDITOR,
+  PRESENCE_COLORS,
+  PerformanceQueue,
+  PresenceStore,
   TOOL_BRIDGE_DEFAULT_PORT,
   TOOL_BRIDGE_PROTOCOL,
   TOOL_DISCOVERY_TOOLS,
@@ -2031,16 +2141,19 @@ export {
   captureOutputSize,
   cloneElementWithStyles,
   connectToolBridge,
+  createAgentPlayback,
   createCanvasComponentToolProvider,
   createCaptureTool,
   createCaptureToolProvider,
   createDocumentChartTools,
   createEditorMcpToolProvider,
   createElementCaptureSurface,
+  createInstantPresenceClock,
   createMcpServer,
   createRichTextToolProvider,
   createSpreadsheetToolProvider,
   createToolRegistry,
+  derivePlaybackSteps,
   elementToSvg,
   errorResult,
   isUnsafeJsonKey,
@@ -2048,9 +2161,15 @@ export {
   normalizeSide,
   parseSkillFrontmatter,
   planAgentCommand,
+  planCanvasPlaybackSteps,
+  planCanvasToolPlayback,
   planToolCall,
+  playbackRefsFromArgs,
+  playbackRefsFromResult,
   rasterizeElement,
   readSkillFile,
+  readingTime,
+  realPresenceClock,
   resolveCaptureRequest,
   searchTokens,
   searchTools,
@@ -2061,7 +2180,9 @@ export {
   toolCallToAgentCommand,
   toolsetInstructions,
   toolsetName,
+  tweenPresenceCursor,
   unionCaptureRects,
+  unionRects,
   unknownToolMessage,
   validateAgentCommand,
   validateJsonSchema

package/dist/agent/providers.d.cts

@@ -1,6 +1,7 @@
 import type { Editor } from '@tiptap/core';
 import type { SpreadsheetController } from '../spreadsheet/controller.cjs';
 import { type planToolCall } from './planner.cjs';
+import type { NodeRectOptions } from '../canvas/arrange.cjs';
 import type { AgentToolProvider } from '../tools/registry.cjs';
 import type { AgentStep, EditorSnapshot } from './types.cjs';
 import type { CanvasEdge, CanvasNode } from '../canvas/types.cjs';
@@ -95,6 +96,13 @@ export interface EditorMcpToolProviderOptions<TNode extends CanvasNode = CanvasN
         canvas?: boolean;
         prompt?: boolean;
     };
+    /**
+     * The agent playback surface the canvas edits are acted out on (default: the provider id).
+     * Attach it with `useCanvasPlaybackSurface` / `createCanvasPlaybackSurface`.
+     */
+    playbackSurface?: string;
+    /** Node size resolution for the cursor's targets (match the canvas' own). */
+    rectOptions?: NodeRectOptions;
 }
 /**
  * Exposes the editor MCP tools (`get_editor_state`, the canvas and prompt

package/dist/agent/providers.d.ts

@@ -1,6 +1,7 @@
 import type { Editor } from '@tiptap/core';
 import type { SpreadsheetController } from '../spreadsheet/controller.js';
 import { type planToolCall } from './planner.js';
+import type { NodeRectOptions } from '../canvas/arrange.js';
 import type { AgentToolProvider } from '../tools/registry.js';
 import type { AgentStep, EditorSnapshot } from './types.js';
 import type { CanvasEdge, CanvasNode } from '../canvas/types.js';
@@ -95,6 +96,13 @@ export interface EditorMcpToolProviderOptions<TNode extends CanvasNode = CanvasN
         canvas?: boolean;
         prompt?: boolean;
     };
+    /**
+     * The agent playback surface the canvas edits are acted out on (default: the provider id).
+     * Attach it with `useCanvasPlaybackSurface` / `createCanvasPlaybackSurface`.
+     */
+    playbackSurface?: string;
+    /** Node size resolution for the cursor's targets (match the canvas' own). */
+    rectOptions?: NodeRectOptions;
 }
 /**
  * Exposes the editor MCP tools (`get_editor_state`, the canvas and prompt

package/dist/agent/types.d.cts

@@ -1,6 +1,9 @@
 import type { CanvasEdge, CanvasNode, Side, XYPosition } from '../canvas/types.cjs';
 /**
  * Agent presence state for visual multiplayer/agent choreography.
+ *
+ * @deprecated Agent playback (`createAgentPlayback` in `@pixerate/editor/tools`) keeps cursors in a
+ * `PresenceStore` per surface and plays every tool call; draw them with `PresenceLayer`.
  */
 export interface AgentPresence {
     agentId: string;

package/dist/agent/types.d.ts

@@ -1,6 +1,9 @@
 import type { CanvasEdge, CanvasNode, Side, XYPosition } from '../canvas/types.js';
 /**
  * Agent presence state for visual multiplayer/agent choreography.
+ *
+ * @deprecated Agent playback (`createAgentPlayback` in `@pixerate/editor/tools`) keeps cursors in a
+ * `PresenceStore` per surface and plays every tool call; draw them with `PresenceLayer`.
  */
 export interface AgentPresence {
     agentId: string;