@pixerate/editor 0.269.2 → 0.270.0

package/README.md

@@ -573,9 +573,12 @@ const mark = history.mark();
 history.revertTo(mark); // returns the number of steps reverted (0 if the mark is gone)
 
 // History panel
-history.getEntries(); // [{ id, label, index, current, undone }]
+history.getEntries(); // [{ id, label, index, current, undone, origin, tag? }]
 history.goTo(2); // undo / redo until entry 2 is current; goTo(-1) undoes everything
 
+// Stale steps: when remote content replaces what some steps change, remove them unrun.
+history.dropSteps((step) => step.tag === "paint"); // returns how many were removed
+
 // Dirty vs saved: undoing back to the saved state is clean again.
 const dirty = bindDirtyToHistory({
   history,
@@ -587,7 +590,7 @@ dirty.markClean(); // after saving
 dirty.dirty; // feed to useNavigationGuard / createNavigationGuard
 ```
 
-Tag-only `executeMerged(cmd)` keeps its 300 ms time-window coalescing. React exposes the same API through `useHistory()` (`entries`, `goTo`, `mark`, `revertTo`, `beginGesture`, `endGesture`) and `useHistoryDirty()`; Svelte through `createHistory()` and `createHistoryDirty()`.
+Tag-only `executeMerged(cmd)` keeps its 300 ms time-window coalescing. React exposes the same API through `useHistory()` (`entries`, `goTo`, `mark`, `revertTo`, `dropSteps`, `beginGesture`, `endGesture`) and `useHistoryDirty()`; Svelte through `createHistory()` and `createHistoryDirty()`.
 
 ## License
 

package/dist/agent/index.cjs

@@ -140,10 +140,10 @@ var _chunkN2FGYZ4Qcjs = require('../chunk-N2FGYZ4Q.cjs');
 
 
 
-var _chunkT4JPGBW3cjs = require('../chunk-T4JPGBW3.cjs');
+var _chunkDGITFN73cjs = require('../chunk-DGITFN73.cjs');
 
 
-var _chunkYYBW6DF2cjs = require('../chunk-YYBW6DF2.cjs');
+var _chunkGSLOH2INcjs = require('../chunk-GSLOH2IN.cjs');
 require('../chunk-TTCJPX4U.cjs');
 require('../chunk-MDLEGVEN.cjs');
 require('../chunk-VU6WQSMB.cjs');
@@ -191,7 +191,7 @@ var _chunkWOFXZ3XUcjs = require('../chunk-WOFXZ3XU.cjs');
 
 
 var _chunk2BSBFBOAcjs = require('../chunk-2BSBFBOA.cjs');
-require('../chunk-WKPXOGZZ.cjs');
+require('../chunk-WPLGZBNE.cjs');
 require('../chunk-I3Y2Q3PM.cjs');
 require('../chunk-MEGSQUQO.cjs');
 require('../chunk-MLLTWAXH.cjs');
@@ -691,14 +691,14 @@ function describe(chart, includeSpec) {
     series: spec.series.map((s) => ({ id: s.id, name: s.name })),
     width: _nullishCoalesce(node.attrs.width, () => ( null)),
     height: node.attrs.height,
-    description: _chunkYYBW6DF2cjs.describeChart.call(void 0, spec),
+    description: _chunkGSLOH2INcjs.describeChart.call(void 0, spec),
     ...includeSpec ? { spec } : {}
   };
 }
 function sparklines(doc) {
   const found = [];
   doc.descendants((node, pos) => {
-    if (node.type.name === "sparkline") found.push({ pos, kind: node.attrs.kind, values: node.attrs.values, label: _chunkT4JPGBW3cjs.sparklineLabel.call(void 0, node) });
+    if (node.type.name === "sparkline") found.push({ pos, kind: node.attrs.kind, values: node.attrs.values, label: _chunkDGITFN73cjs.sparklineLabel.call(void 0, node) });
   });
   return found;
 }
@@ -709,7 +709,7 @@ function checkPosition(editor, at) {
 function createDocumentChartTools(editor) {
   const chartType = () => editor().schema.nodes.chart;
   const findChart = (args) => {
-    const charts = _chunkT4JPGBW3cjs.getDocumentCharts.call(void 0, editor().state.doc);
+    const charts = _chunkDGITFN73cjs.getDocumentCharts.call(void 0, editor().state.doc);
     const list = charts.map((c) => `"${c.id}" at ${c.pos}`).join(", ") || "none; add one with insert_chart";
     if (args.chartId !== void 0) {
       const chart = charts.find((c) => c.id === args.chartId);
@@ -736,7 +736,7 @@ function createDocumentChartTools(editor) {
     annotations: { title: "List charts in the document", ...READ },
     handler: ({ includeSpec = false }) => {
       const doc = editor().state.doc;
-      return { charts: _chunkT4JPGBW3cjs.getDocumentCharts.call(void 0, doc).map((c) => describe(c, includeSpec)), sparklines: editor().schema.nodes.sparkline ? sparklines(doc) : [] };
+      return { charts: _chunkDGITFN73cjs.getDocumentCharts.call(void 0, doc).map((c) => describe(c, includeSpec)), sparklines: editor().schema.nodes.sparkline ? sparklines(doc) : [] };
     }
   };
   const insertChart = {
@@ -763,7 +763,7 @@ function createDocumentChartTools(editor) {
       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();
-      const chart = _chunkT4JPGBW3cjs.getDocumentCharts.call(void 0, ed.state.doc).find((c) => c.id === id);
+      const chart = _chunkDGITFN73cjs.getDocumentCharts.call(void 0, ed.state.doc).find((c) => c.id === id);
       if (!ok || !chart) throw new Error(`A chart cannot go at ${_nullishCoalesce(at, () => ( ed.state.selection.from))}; pass a position between blocks or inside a paragraph.`);
       return { id: chart.id, pos: chart.pos, spec: chart.spec, width: chart.node.attrs.width, height: chart.node.attrs.height };
     }
@@ -810,8 +810,8 @@ function createDocumentChartTools(editor) {
     inputSchema: {
       type: "object",
       properties: {
-        values: { type: "array", items: _chunkG23BTQA5cjs.VALUE, minItems: 1, maxItems: _chunkT4JPGBW3cjs.MAX_SPARKLINE_VALUES, description: "Values in order (null for a gap)." },
-        kind: { type: "string", enum: [..._chunkT4JPGBW3cjs.SPARKLINE_KINDS], description: "line (default), column, or win-loss (sign only)." },
+        values: { type: "array", items: _chunkG23BTQA5cjs.VALUE, minItems: 1, maxItems: _chunkDGITFN73cjs.MAX_SPARKLINE_VALUES, description: "Values in order (null for a gap)." },
+        kind: { type: "string", enum: [..._chunkDGITFN73cjs.SPARKLINE_KINDS], description: "line (default), column, or win-loss (sign only)." },
         at: { type: "integer", minimum: 0, description: "Document position inside a paragraph (default: the selection)." },
         width: { type: "number", minimum: 4, maximum: 1e3, description: "Width in pixels (default 80)." },
         height: { type: "number", minimum: 4, maximum: 200, description: "Height in pixels (default 18)." },
@@ -830,7 +830,7 @@ function createDocumentChartTools(editor) {
       if (bad >= 0) throw new Error(`values[${bad}] ("${String(values[bad])}") is not a number; pass numbers, numeric text or null. Nothing was inserted.`);
       const pos = _nullishCoalesce(at, () => ( ed.state.selection.from));
       if (!ed.state.doc.resolve(pos).parent.inlineContent) throw new Error(`Position ${pos} is between blocks; a sparkline goes inside a paragraph (use a position from get_text {blocks: true}).`);
-      const stored = _chunkT4JPGBW3cjs.normalizeSparklineValues.call(void 0, parsed);
+      const stored = _chunkDGITFN73cjs.normalizeSparklineValues.call(void 0, parsed);
       ed.chain().command(({ tr }) => (_history.closeHistory.call(void 0, tr), true)).insertContentAt(pos, { type: "sparkline", attrs: { values: stored, kind, width, height, color, label } }).run();
       return { pos, kind, values: stored };
     }
@@ -1168,8 +1168,8 @@ function createTextPresence(editor, providerId, option) {
   const config = option === false ? null : option === true || option === void 0 ? {} : option;
   const caret = {
     id: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _43 => _43.id]), () => ( providerId)),
-    name: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _44 => _44.name]), () => ( _chunkT4JPGBW3cjs.DEFAULT_AGENT_CARET_NAME)),
-    color: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _45 => _45.color]), () => ( _chunkT4JPGBW3cjs.DEFAULT_AGENT_CARET_COLOR))
+    name: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _44 => _44.name]), () => ( _chunkDGITFN73cjs.DEFAULT_AGENT_CARET_NAME)),
+    color: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _45 => _45.color]), () => ( _chunkDGITFN73cjs.DEFAULT_AGENT_CARET_COLOR))
   };
   const typing = !_optionalChain([config, 'optionalAccess', _46 => _46.typing]) ? null : config.typing === true ? {} : config.typing;
   const idleMs = _nullishCoalesce(_optionalChain([config, 'optionalAccess', _47 => _47.idleMs]), () => ( 12e3));
@@ -1182,19 +1182,19 @@ function createTextPresence(editor, providerId, option) {
   };
   const touch = () => {
     clearTimeout(idleTimer);
-    if (idleMs > 0) idleTimer = setTimeout(() => live() && _chunkT4JPGBW3cjs.clearAgentCaret.call(void 0, live(), caret.id), idleMs);
+    if (idleMs > 0) idleTimer = setTimeout(() => live() && _chunkDGITFN73cjs.clearAgentCaret.call(void 0, live(), caret.id), idleMs);
   };
   const tint = (ed, ranges) => {
     clearTimeout(tintTimer);
-    _chunkT4JPGBW3cjs.markAgentChanges.call(void 0, ed, caret.id, ranges);
-    if (changedMs > 0 && ranges.length) tintTimer = setTimeout(() => live() && _chunkT4JPGBW3cjs.markAgentChanges.call(void 0, live(), caret.id, []), changedMs);
+    _chunkDGITFN73cjs.markAgentChanges.call(void 0, ed, caret.id, ranges);
+    if (changedMs > 0 && ranges.length) tintTimer = setTimeout(() => live() && _chunkDGITFN73cjs.markAgentChanges.call(void 0, live(), caret.id, []), changedMs);
   };
   return {
     /** Puts the caret at `head`, selecting from `anchor`. */
     show(anchor, head = anchor) {
       const ed = live();
       if (!ed) return;
-      _chunkT4JPGBW3cjs.setAgentCaret.call(void 0, ed, { ...caret, from: anchor, to: head });
+      _chunkDGITFN73cjs.setAgentCaret.call(void 0, ed, { ...caret, from: anchor, to: head });
       touch();
     },
     /** Shows the caret after ranges just changed by a tool, tinting them. */
@@ -1202,7 +1202,7 @@ function createTextPresence(editor, providerId, option) {
       const ed = live();
       if (!ed || !ranges.length) return;
       const last = ranges[ranges.length - 1];
-      _chunkT4JPGBW3cjs.setAgentCaret.call(void 0, ed, { ...caret, from: last.to });
+      _chunkDGITFN73cjs.setAgentCaret.call(void 0, ed, { ...caret, from: last.to });
       tint(ed, ranges);
       touch();
     },
@@ -1210,12 +1210,12 @@ function createTextPresence(editor, providerId, option) {
     async write(ed, from, to, text, signal) {
       if (live() && typing) {
         clearTimeout(tintTimer);
-        const range2 = await _chunkT4JPGBW3cjs.typeAgentText.call(void 0, ed, { ...typing, from, to, text, caret, signal });
-        if (changedMs > 0) tintTimer = setTimeout(() => live() && _chunkT4JPGBW3cjs.markAgentChanges.call(void 0, live(), caret.id, []), changedMs);
+        const range2 = await _chunkDGITFN73cjs.typeAgentText.call(void 0, ed, { ...typing, from, to, text, caret, signal });
+        if (changedMs > 0) tintTimer = setTimeout(() => live() && _chunkDGITFN73cjs.markAgentChanges.call(void 0, live(), caret.id, []), changedMs);
         touch();
         return range2;
       }
-      const tr = _history.closeHistory.call(void 0, _chunkT4JPGBW3cjs.replaceWithTextTransaction.call(void 0, ed.state, from, to, text));
+      const tr = _history.closeHistory.call(void 0, _chunkDGITFN73cjs.replaceWithTextTransaction.call(void 0, ed.state, from, to, text));
       const end = tr.mapping.map(to, 1);
       const range = { from: Math.min(tr.mapping.map(from, -1), end), to: end };
       ed.view.dispatch(tr.scrollIntoView());
@@ -1244,7 +1244,7 @@ function findMatches(editor, query, args, replacement) {
     wholeWord: !!args.wholeWord,
     ...args.regex ? { regex: true } : { literal: true }
   };
-  const result = _chunkT4JPGBW3cjs.searchDocument.call(void 0, editor.state.doc, query, options, replacement !== void 0 ? { replacement } : {});
+  const result = _chunkDGITFN73cjs.searchDocument.call(void 0, editor.state.doc, query, options, replacement !== void 0 ? { replacement } : {});
   if (result.error) throw new Error(`Invalid search pattern: ${result.error.message}`);
   return { matches: result.matches, truncated: result.truncated };
 }
@@ -1406,7 +1406,7 @@ function createRichTextToolProvider(target, options) {
         replacement: String(replace).replace(/\r\n?|\n/g, "\r")
       }));
       const tr = _history.closeHistory.call(void 0, ed.state.tr);
-      const ends = _chunkT4JPGBW3cjs.applyReplacements.call(void 0, tr, chosen);
+      const ends = _chunkDGITFN73cjs.applyReplacements.call(void 0, tr, chosen);
       ed.view.dispatch(tr.scrollIntoView());
       const ranges = chosen.map((m, i) => ({ from: tr.mapping.map(m.from, -1), to: ends[i] }));
       presence.changed(ranges.filter((r) => r.from < r.to));
@@ -1507,7 +1507,7 @@ function createRichTextToolProvider(target, options) {
     inputSchema: {
       type: "object",
       properties: {
-        operation: { type: "string", enum: _chunkT4JPGBW3cjs.TABLE_ACTIONS.map((a) => a.action), description: "Table operation." },
+        operation: { type: "string", enum: _chunkDGITFN73cjs.TABLE_ACTIONS.map((a) => a.action), description: "Table operation." },
         at: { type: "integer", minimum: 0, description: "Document position to place the cursor first (e.g. inside a cell)." },
         rows: { type: "integer", minimum: 1, maximum: 100, description: "insertTable: rows (default 3)." },
         cols: { type: "integer", minimum: 1, maximum: 50, description: "insertTable: columns (default 3)." },
@@ -1537,10 +1537,10 @@ function createRichTextToolProvider(target, options) {
         ed.view.dispatch(ed.state.tr.setSelection(_state.TextSelection.near(ed.state.doc.resolve(at))));
       }
       const action = operation;
-      const state = _chunkT4JPGBW3cjs.getTableActionState.call(void 0, ed, action, params);
+      const state = _chunkDGITFN73cjs.getTableActionState.call(void 0, ed, action, params);
       if (state !== true) throw new Error(state);
-      _chunkT4JPGBW3cjs.runTableAction.call(void 0, ed, action, params);
-      const table = _chunkT4JPGBW3cjs.getTableState.call(void 0, ed);
+      _chunkDGITFN73cjs.runTableAction.call(void 0, ed, action, params);
+      const table = _chunkDGITFN73cjs.getTableState.call(void 0, ed);
       return {
         operation,
         table: table.inTable ? { rows: table.rows, columns: table.columns, row: table.row, column: table.column } : null,
@@ -1559,7 +1559,7 @@ function createRichTextToolProvider(target, options) {
       if (!ed || ed.isDestroyed) return [];
       if (!ed.isEditable) return [getText, findText, ...charts.read()];
       const tools = [getText, findText, insertText, replaceText, replaceRange, replaceSelection, setSelection, ...formatting.tools(ed)];
-      return [...tools, ..._chunkT4JPGBW3cjs.isTableEnabled.call(void 0, ed) ? [editTable] : [], ...charts.read(), ...charts.write().map(withCaret)];
+      return [...tools, ..._chunkDGITFN73cjs.isTableEnabled.call(void 0, ed) ? [editTable] : [], ...charts.read(), ...charts.write().map(withCaret)];
     },
     subscribe: (notify) => {
       const ed = editor();
@@ -2235,7 +2235,7 @@ function createReviewToolProvider(target, options) {
   const editor = () => toEditor2(target);
   const author = _nullishCoalesce(options.author, () => ( { id: "agent", name: "Agent" }));
   const store = () => {
-    const s = _chunkT4JPGBW3cjs.getCommentStore.call(void 0, editor());
+    const s = _chunkDGITFN73cjs.getCommentStore.call(void 0, editor());
     if (!s) throw new Error("This editor has no Comments extension.");
     return s;
   };
@@ -2430,7 +2430,7 @@ function createReviewToolProvider(target, options) {
     tools: () => {
       const ed = editor();
       if (!ed || ed.isDestroyed) return [];
-      const comments = !!_chunkT4JPGBW3cjs.getCommentStore.call(void 0, ed);
+      const comments = !!_chunkDGITFN73cjs.getCommentStore.call(void 0, ed);
       const changes = !!_chunk34RQAGWIcjs.getTrackChangesStore.call(void 0, ed);
       const tools = [...comments ? [listComments] : [], ...changes ? [listChanges] : []];
       if (!ed.isEditable) return tools;

package/dist/agent/index.js

@@ -140,10 +140,10 @@ import {
   setAgentCaret,
   sparklineLabel,
   typeAgentText
-} from "../chunk-N3UMQVKX.js";
+} from "../chunk-X4FTNFIA.js";
 import {
   describeChart
-} from "../chunk-MQ6MGIQM.js";
+} from "../chunk-NMZQMPFZ.js";
 import "../chunk-KGRZMHZB.js";
 import "../chunk-C2WEIEUB.js";
 import "../chunk-O6OGNDND.js";
@@ -191,7 +191,7 @@ import {
   isUnsafeJsonKey,
   stripPrototypeKeys
 } from "../chunk-HF5QZS7Z.js";
-import "../chunk-NS62CQ2B.js";
+import "../chunk-GAZPHCTV.js";
 import "../chunk-2EUW2XZX.js";
 import "../chunk-E2V5DA3W.js";
 import "../chunk-VR6OGHU5.js";

package/dist/animation-editor/index.cjs

@@ -94,7 +94,7 @@ var _chunkSJ2CPTQCcjs = require('../chunk-SJ2CPTQC.cjs');
 require('../chunk-2BSBFBOA.cjs');
 
 
-var _chunkWKPXOGZZcjs = require('../chunk-WKPXOGZZ.cjs');
+var _chunkWPLGZBNEcjs = require('../chunk-WPLGZBNE.cjs');
 
 
 
@@ -4674,7 +4674,7 @@ var AnimationEditorController = (_class2 = class {
   
   __init16() {this.recording = null}
   constructor(options = {}) {;_class2.prototype.__init9.call(this);_class2.prototype.__init10.call(this);_class2.prototype.__init11.call(this);_class2.prototype.__init12.call(this);_class2.prototype.__init13.call(this);_class2.prototype.__init14.call(this);_class2.prototype.__init15.call(this);_class2.prototype.__init16.call(this);_class2.prototype.__init17.call(this);_class2.prototype.__init18.call(this);
-    this.history = _nullishCoalesce(options.history, () => ( new (0, _chunkWKPXOGZZcjs.HistoryManager)()));
+    this.history = _nullishCoalesce(options.history, () => ( new (0, _chunkWPLGZBNEcjs.HistoryManager)()));
     this.scene = options.scene ? parseMotionScene(options.scene) : createMotionScene(BLANK);
     this.issues = checkMotionScene(this.scene);
     this.readOnly = _nullishCoalesce(options.readOnly, () => ( false));

package/dist/animation-editor/index.js

@@ -94,7 +94,7 @@ import {
 import "../chunk-HF5QZS7Z.js";
 import {
   HistoryManager
-} from "../chunk-NS62CQ2B.js";
+} from "../chunk-GAZPHCTV.js";
 import {
   behaviorProgress,
   motionSeedFromId

package/dist/canvas/editorDocument.d.cts

@@ -91,7 +91,9 @@ export interface CanvasGestureRecorderOptions<TNode extends CanvasNode = CanvasN
 /**
  * Makes a gesture the flow library applies directly (a node drag, a resize) one undo step:
  * call `begin()` when it starts (e.g. `onNodeDragStart`) and `end("Move")` when it stops. If
- * the nodes or edges changed in between, the change is recorded; otherwise nothing is.
+ * the nodes or edges changed in between, the change is recorded; otherwise nothing is. Undo and
+ * redo put back only the nodes and edges the gesture changed, so work added since by a
+ * collaborator or an agent is kept.
  */
 export declare function createCanvasGestureRecorder<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdgeLike = CanvasEdge>(options: CanvasGestureRecorderOptions<TNode, TEdge>): {
     /** Remembers the canvas as it is before the gesture. */

package/dist/canvas/editorDocument.d.ts

@@ -91,7 +91,9 @@ export interface CanvasGestureRecorderOptions<TNode extends CanvasNode = CanvasN
 /**
  * Makes a gesture the flow library applies directly (a node drag, a resize) one undo step:
  * call `begin()` when it starts (e.g. `onNodeDragStart`) and `end("Move")` when it stops. If
- * the nodes or edges changed in between, the change is recorded; otherwise nothing is.
+ * the nodes or edges changed in between, the change is recorded; otherwise nothing is. Undo and
+ * redo put back only the nodes and edges the gesture changed, so work added since by a
+ * collaborator or an agent is kept.
  */
 export declare function createCanvasGestureRecorder<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdgeLike = CanvasEdge>(options: CanvasGestureRecorderOptions<TNode, TEdge>): {
     /** Remembers the canvas as it is before the gesture. */

package/dist/canvas/index.cjs

@@ -11974,14 +11974,32 @@ function createCanvasEditorDocument(options) {
     readOnly: options.readOnly
   });
 }
+function gestureChanges(before, after, runtimeKeys) {
+  const key = (item) => JSON.stringify(omit(item, runtimeKeys));
+  const changes = /* @__PURE__ */ new Map();
+  before.forEach((item, i) => changes.set(item.id, { before: item, beforeIndex: i, afterIndex: -1 }));
+  after.forEach((item, i) => {
+    const change = changes.get(item.id);
+    if (!change) changes.set(item.id, { after: item, beforeIndex: -1, afterIndex: i });
+    else if (key(change.before) === key(item)) changes.delete(item.id);
+    else Object.assign(change, { after: item, afterIndex: i });
+  });
+  return changes;
+}
+function applyGestureSide(current, changes, side) {
+  const next = current.filter((item) => {
+    const change = changes.get(item.id);
+    return !change || change[side] !== void 0;
+  }).map((item) => _nullishCoalesce(_optionalChain([changes, 'access', _517 => _517.get, 'call', _518 => _518(item.id), 'optionalAccess', _519 => _519[side]]), () => ( item)));
+  const present = new Set(next.map((item) => item.id));
+  const index = side === "before" ? "beforeIndex" : "afterIndex";
+  const missing = [...changes.values()].filter((c) => c[side] !== void 0 && !present.has(c[side].id) && (side === "before" ? !c.after : !c.before)).sort((a, b) => a[index] - b[index]);
+  for (const change of missing) next.splice(Math.min(change[index], next.length), 0, change[side]);
+  return next;
+}
 function createCanvasGestureRecorder(options) {
   let before = null;
-  const take = () => ({ nodes: options.getNodes(), edges: _optionalChain([options, 'access', _517 => _517.getEdges, 'optionalCall', _518 => _518()]) });
-  const key = (s) => canvasDocumentContentKey(s.nodes, _nullishCoalesce(s.edges, () => ( [])));
-  const restore = (s) => {
-    options.setNodes(s.nodes);
-    if (s.edges && options.setEdges) options.setEdges(s.edges);
-  };
+  const take = () => ({ nodes: options.getNodes(), edges: _optionalChain([options, 'access', _520 => _520.getEdges, 'optionalCall', _521 => _521()]) });
   return {
     /** Remembers the canvas as it is before the gesture. */
     begin() {
@@ -11993,8 +12011,16 @@ function createCanvasGestureRecorder(options) {
       before = null;
       if (!start) return false;
       const after = take();
-      if (key(start) === key(after)) return false;
-      options.history.execute({ name, execute: () => restore(after), undo: () => restore(start) });
+      const nodes = gestureChanges(start.nodes, after.nodes, RUNTIME_NODE_KEYS);
+      const edges = start.edges && after.edges && options.setEdges ? gestureChanges(start.edges, after.edges, RUNTIME_EDGE_KEYS) : /* @__PURE__ */ new Map();
+      if (nodes.size === 0 && edges.size === 0) return false;
+      const apply = (side) => {
+        if (nodes.size) options.setNodes(applyGestureSide(options.getNodes(), nodes, side));
+        if (edges.size && options.getEdges && options.setEdges) {
+          options.setEdges(applyGestureSide(options.getEdges(), edges, side));
+        }
+      };
+      options.history.execute({ name, execute: () => apply("after"), undo: () => apply("before") });
       return true;
     },
     /** Forgets a gesture without recording it. */
@@ -12109,8 +12135,8 @@ function createCanvasExplosionStateController(options = {}) {
     clearTimer();
     const previous = snapshot.activeId;
     set({ activeId: nodeId, collapsingId: null });
-    if (previous !== null) _optionalChain([options, 'access', _519 => _519.onCollapse, 'optionalCall', _520 => _520(previous)]);
-    _optionalChain([options, 'access', _521 => _521.onExplode, 'optionalCall', _522 => _522(nodeId)]);
+    if (previous !== null) _optionalChain([options, 'access', _522 => _522.onCollapse, 'optionalCall', _523 => _523(previous)]);
+    _optionalChain([options, 'access', _524 => _524.onExplode, 'optionalCall', _525 => _525(nodeId)]);
     return true;
   };
   const collapse = (nodeId) => {
@@ -12119,7 +12145,7 @@ function createCanvasExplosionStateController(options = {}) {
     if (active === null || nodeId !== void 0 && nodeId !== active) return false;
     clearTimer();
     set({ activeId: null, collapsingId: active });
-    _optionalChain([options, 'access', _523 => _523.onCollapse, 'optionalCall', _524 => _524(active)]);
+    _optionalChain([options, 'access', _526 => _526.onCollapse, 'optionalCall', _527 => _527(active)]);
     if (duration === 0) finishCollapse();
     else timer = setTimeout(() => {
       timer = null;
@@ -12180,7 +12206,7 @@ function canvasExplosionToolTarget(state, options) {
 var READ = { readOnlyHint: true, destructiveHint: false, idempotentHint: true, openWorldHint: false };
 var WRITE_IDEMPOTENT = { readOnlyHint: false, destructiveHint: false, idempotentHint: true, openWorldHint: false };
 var labelOf = (node) => {
-  const label = _nullishCoalesce(_optionalChain([node, 'access', _525 => _525.data, 'optionalAccess', _526 => _526.label]), () => ( _optionalChain([node, 'access', _527 => _527.data, 'optionalAccess', _528 => _528.name])));
+  const label = _nullishCoalesce(_optionalChain([node, 'access', _528 => _528.data, 'optionalAccess', _529 => _529.label]), () => ( _optionalChain([node, 'access', _530 => _530.data, 'optionalAccess', _531 => _531.name])));
   return typeof label === "string" && label !== "" ? label : void 0;
 };
 function createCanvasExplosionToolProvider(target, options = {}) {
@@ -12193,7 +12219,7 @@ function createCanvasExplosionToolProvider(target, options = {}) {
     if (ok === true) return null;
     return typeof ok === "string" && ok ? ok : `Node "${node.id}" has nothing to explode into.`;
   };
-  const state = () => ({ exploded: [...target.exploded()], collapsing: [..._nullishCoalesce(_optionalChain([target, 'access', _529 => _529.collapsing, 'optionalCall', _530 => _530()]), () => ( []))] });
+  const state = () => ({ exploded: [...target.exploded()], collapsing: [..._nullishCoalesce(_optionalChain([target, 'access', _532 => _532.collapsing, 'optionalCall', _533 => _533()]), () => ( []))] });
   const findNode = (id) => {
     const node = target.getNodes().find((n3) => n3.id === id);
     if (!node) throw new Error(`No node "${id}" on the canvas. Call list_explodable_nodes for node ids.`);
@@ -12312,8 +12338,8 @@ function createCanvasProposals(options) {
   const rectOf = (node) => ({
     x: node.position.x,
     y: node.position.y,
-    width: _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _531 => _531.measured, 'optionalAccess', _532 => _532.width]), () => ( node.width)), () => ( size2.width)),
-    height: _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _533 => _533.measured, 'optionalAccess', _534 => _534.height]), () => ( node.height)), () => ( size2.height))
+    width: _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _534 => _534.measured, 'optionalAccess', _535 => _535.width]), () => ( node.width)), () => ( size2.width)),
+    height: _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _536 => _536.measured, 'optionalAccess', _537 => _537.height]), () => ( node.height)), () => ( size2.height))
   });
   const missing = (proposal) => {
     const present = new Set(options.getNodes().map((n3) => n3.id));
@@ -12363,7 +12389,7 @@ function createCanvasProposals(options) {
         throw new Error(`nodes[${i}].position needs finite x and y.`);
       }
       if (!position) {
-        const view = _optionalChain([options, 'access', _535 => _535.visibleRect, 'optionalCall', _536 => _536()]);
+        const view = _optionalChain([options, 'access', _538 => _538.visibleRect, 'optionalCall', _539 => _539()]);
         if (input2.nearNodeId) position = _chunkEL4PSKFTcjs.placeBeside.call(void 0, rects, nodeSize, toSide(input2.side), input2.nearNodeId);
         else if (view) position = _chunkEL4PSKFTcjs.placeInView.call(void 0, rects, nodeSize, view);
         else if (canvasNodes.length || nodes.length) {
@@ -12415,7 +12441,7 @@ function createCanvasProposals(options) {
   };
   const accept = (id) => {
     const proposal = find(id);
-    const reason = _optionalChain([options, 'access', _537 => _537.readOnly, 'optionalCall', _538 => _538()]);
+    const reason = _optionalChain([options, 'access', _540 => _540.readOnly, 'optionalCall', _541 => _541()]);
     if (reason) throw new Error(reason);
     const gone = missing(proposal);
     if (gone.length) {
@@ -12567,7 +12593,7 @@ function createCanvasChangeFeed(options) {
     if (edited) pending = void 0;
     const change = {
       seq: ++seq,
-      origin: _optionalChain([commit, 'optionalAccess', _539 => _539.kind]) === "execute" || _optionalChain([commit, 'optionalAccess', _540 => _540.kind]) === "merge" ? commit.origin : "user",
+      origin: _optionalChain([commit, 'optionalAccess', _542 => _542.kind]) === "execute" || _optionalChain([commit, 'optionalAccess', _543 => _543.kind]) === "merge" ? commit.origin : "user",
       ...commit ? { commit } : {},
       addedNodes,
       removedNodes,
@@ -12586,8 +12612,8 @@ function createCanvasChangeFeed(options) {
   const noteCommit = (event) => {
     pending = event;
   };
-  const offHistory = _optionalChain([options, 'access', _541 => _541.history, 'optionalAccess', _542 => _542.onCommit, 'call', _543 => _543(noteCommit)]);
-  const offCanvas = _optionalChain([options, 'access', _544 => _544.subscribe, 'optionalCall', _545 => _545(() => {
+  const offHistory = _optionalChain([options, 'access', _544 => _544.history, 'optionalAccess', _545 => _545.onCommit, 'call', _546 => _546(noteCommit)]);
+  const offCanvas = _optionalChain([options, 'access', _547 => _547.subscribe, 'optionalCall', _548 => _548(() => {
     check();
   })]);
   return {
@@ -12606,8 +12632,8 @@ function createCanvasChangeFeed(options) {
     },
     noteCommit,
     dispose: () => {
-      _optionalChain([offHistory, 'optionalCall', _546 => _546()]);
-      _optionalChain([offCanvas, 'optionalCall', _547 => _547()]);
+      _optionalChain([offHistory, 'optionalCall', _549 => _549()]);
+      _optionalChain([offCanvas, 'optionalCall', _550 => _550()]);
       listeners.clear();
     }
   };
@@ -12617,7 +12643,7 @@ function createCanvasChangeFeed(options) {
 var READ2 = { readOnlyHint: true, destructiveHint: false, idempotentHint: true, openWorldHint: false };
 var WRITE = { readOnlyHint: false, destructiveHint: false, idempotentHint: false, openWorldHint: false };
 var labelOf2 = (node) => {
-  const label = _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _548 => _548.data, 'optionalAccess', _549 => _549.label]), () => ( _optionalChain([node, 'access', _550 => _550.data, 'optionalAccess', _551 => _551.name]))), () => ( _optionalChain([node, 'access', _552 => _552.data, 'optionalAccess', _553 => _553.title])));
+  const label = _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _551 => _551.data, 'optionalAccess', _552 => _552.label]), () => ( _optionalChain([node, 'access', _553 => _553.data, 'optionalAccess', _554 => _554.name]))), () => ( _optionalChain([node, 'access', _555 => _555.data, 'optionalAccess', _556 => _556.title])));
   return typeof label === "string" && label !== "" ? label : void 0;
 };
 var proposalIdArg = {
@@ -12698,7 +12724,7 @@ function createCanvasProposalToolProvider(proposals, options = {}) {
     },
     annotations: { title: "Propose nodes", ...WRITE },
     handler: (args, context) => {
-      const origin = _optionalChain([context, 'access', _554 => _554.actor, 'optionalAccess', _555 => _555.id]) ? `agent:${context.actor.id}` : options.fallbackOrigin;
+      const origin = _optionalChain([context, 'access', _557 => _557.actor, 'optionalAccess', _558 => _558.id]) ? `agent:${context.actor.id}` : options.fallbackOrigin;
       const proposal = proposals.propose({ title: args.title, rationale: args.rationale, nodes: args.nodes, edges: args.edges, ...origin ? { origin } : {} });
       const { id: _id, missing: _missing, createdAt: _createdAt, ...rest } = describe(proposal);
       return { proposalId: proposal.id, ...rest };
@@ -12750,7 +12776,7 @@ function stickerCanvasNode(placement, id) {
   const { description, asset } = placement;
   const silhouette = _nullishCoalesce((asset.kind === "svg" ? asset.silhouette : void 0), () => ( description.silhouette));
   if (!silhouette) throw new (0, _chunkU67EN7GGcjs.StickerError)("unsupported_format", `"${placement.ref}" has no outline (silhouette); the canvas places stickers by their outline. Pick one whose describe_sticker lists a silhouette.`);
-  const fill = _nullishCoalesce(_nullishCoalesce(placement.colour, () => ( _optionalChain([description, 'access', _556 => _556.colours, 'optionalAccess', _557 => _557[0]]))), () => ( "#1f2937"));
+  const fill = _nullishCoalesce(_nullishCoalesce(placement.colour, () => ( _optionalChain([description, 'access', _559 => _559.colours, 'optionalAccess', _560 => _560[0]]))), () => ( "#1f2937"));
   const shape = { kind: "path", d: silhouette, viewBox: [0, 0, description.width, description.height], fillRule: "evenodd", fill };
   const sticker = { ref: placement.ref, licence: description.licence, ...placement.variant === "dark" ? { variant: "dark" } : {} };
   return {

package/dist/canvas/index.js

@@ -11974,14 +11974,32 @@ function createCanvasEditorDocument(options) {
     readOnly: options.readOnly
   });
 }
+function gestureChanges(before, after, runtimeKeys) {
+  const key = (item) => JSON.stringify(omit(item, runtimeKeys));
+  const changes = /* @__PURE__ */ new Map();
+  before.forEach((item, i) => changes.set(item.id, { before: item, beforeIndex: i, afterIndex: -1 }));
+  after.forEach((item, i) => {
+    const change = changes.get(item.id);
+    if (!change) changes.set(item.id, { after: item, beforeIndex: -1, afterIndex: i });
+    else if (key(change.before) === key(item)) changes.delete(item.id);
+    else Object.assign(change, { after: item, afterIndex: i });
+  });
+  return changes;
+}
+function applyGestureSide(current, changes, side) {
+  const next = current.filter((item) => {
+    const change = changes.get(item.id);
+    return !change || change[side] !== void 0;
+  }).map((item) => changes.get(item.id)?.[side] ?? item);
+  const present = new Set(next.map((item) => item.id));
+  const index = side === "before" ? "beforeIndex" : "afterIndex";
+  const missing = [...changes.values()].filter((c) => c[side] !== void 0 && !present.has(c[side].id) && (side === "before" ? !c.after : !c.before)).sort((a, b) => a[index] - b[index]);
+  for (const change of missing) next.splice(Math.min(change[index], next.length), 0, change[side]);
+  return next;
+}
 function createCanvasGestureRecorder(options) {
   let before = null;
   const take = () => ({ nodes: options.getNodes(), edges: options.getEdges?.() });
-  const key = (s) => canvasDocumentContentKey(s.nodes, s.edges ?? []);
-  const restore = (s) => {
-    options.setNodes(s.nodes);
-    if (s.edges && options.setEdges) options.setEdges(s.edges);
-  };
   return {
     /** Remembers the canvas as it is before the gesture. */
     begin() {
@@ -11993,8 +12011,16 @@ function createCanvasGestureRecorder(options) {
       before = null;
       if (!start) return false;
       const after = take();
-      if (key(start) === key(after)) return false;
-      options.history.execute({ name, execute: () => restore(after), undo: () => restore(start) });
+      const nodes = gestureChanges(start.nodes, after.nodes, RUNTIME_NODE_KEYS);
+      const edges = start.edges && after.edges && options.setEdges ? gestureChanges(start.edges, after.edges, RUNTIME_EDGE_KEYS) : /* @__PURE__ */ new Map();
+      if (nodes.size === 0 && edges.size === 0) return false;
+      const apply = (side) => {
+        if (nodes.size) options.setNodes(applyGestureSide(options.getNodes(), nodes, side));
+        if (edges.size && options.getEdges && options.setEdges) {
+          options.setEdges(applyGestureSide(options.getEdges(), edges, side));
+        }
+      };
+      options.history.execute({ name, execute: () => apply("after"), undo: () => apply("before") });
       return true;
     },
     /** Forgets a gesture without recording it. */