@pixerate/editor 0.243.0 → 0.245.0

package/dist/canvas/index.js

@@ -10,7 +10,7 @@ import {
   renderShapeBrushstroke,
   validateCanvasBrush,
   validateCanvasBrushPaint
-} from "../chunk-IXI5KATU.js";
+} from "../chunk-L5PB7EG3.js";
 import {
   PATHFINDER_OPERATIONS,
   PlanarMap,
@@ -3027,7 +3027,7 @@ function createCanvasArrangeController(options) {
   let resizeStart = null;
   let resizeIndex = null;
   let lastResized = null;
-  const selectedIds = (ids) => ids ? [...ids] : options.getSelectedIds?.() ?? options.getNodes().filter((n3) => n3.selected).map((n3) => n3.id);
+  const selectedIds2 = (ids) => ids ? [...ids] : options.getSelectedIds?.() ?? options.getNodes().filter((n3) => n3.selected).map((n3) => n3.id);
   const setGuides = (next) => {
     if (next.length === 0 && guides.length === 0) return;
     guides = next;
@@ -3074,31 +3074,31 @@ function createCanvasArrangeController(options) {
     },
     apply,
     align(edge, ids, alignOptions = {}) {
-      return apply(`Align ${edge}`, alignNodes(options.getNodes(), selectedIds(ids), edge, { ...rect2(), ...alignOptions }));
+      return apply(`Align ${edge}`, alignNodes(options.getNodes(), selectedIds2(ids), edge, { ...rect2(), ...alignOptions }));
     },
     distribute(axis, mode = "gaps", ids, distributeOptions = {}) {
       return apply(
         `Distribute ${axis}`,
-        distributeNodes(options.getNodes(), selectedIds(ids), axis, mode, { ...rect2(), ...distributeOptions })
+        distributeNodes(options.getNodes(), selectedIds2(ids), axis, mode, { ...rect2(), ...distributeOptions })
       );
     },
     matchSize(dimension, ids, sizeOptions = {}) {
       return apply(
         "Make Same Size",
-        matchSize(options.getNodes(), selectedIds(ids), dimension, { ...rect2(), ...sizeOptions })
+        matchSize(options.getNodes(), selectedIds2(ids), dimension, { ...rect2(), ...sizeOptions })
       );
     },
     reorder(operation, ids) {
-      return apply(operation, reorderNodes(options.getNodes(), selectedIds(ids), operation, rect2()));
+      return apply(operation, reorderNodes(options.getNodes(), selectedIds2(ids), operation, rect2()));
     },
     bringForward: (ids) => controller.reorder("bringForward", ids),
     sendBackward: (ids) => controller.reorder("sendBackward", ids),
     bringToFront: (ids) => controller.reorder("bringToFront", ids),
     sendToBack: (ids) => controller.reorder("sendToBack", ids),
-    lock: (ids) => setLocked("Lock", selectedIds(ids), true),
-    unlock: (ids) => setLocked("Unlock", selectedIds(ids), false),
+    lock: (ids) => setLocked("Lock", selectedIds2(ids), true),
+    unlock: (ids) => setLocked("Unlock", selectedIds2(ids), false),
     toggleLock(ids) {
-      const list = selectedIds(ids);
+      const list = selectedIds2(ids);
       const set = new Set(list);
       const anyUnlocked = options.getNodes().some((n3) => set.has(n3.id) && !isLocked(n3));
       return anyUnlocked ? controller.lock(list) : controller.unlock(list);
@@ -3112,7 +3112,7 @@ function createCanvasArrangeController(options) {
      */
     combineShapes(operation, ids, combineOptions = {}) {
       const before = options.getNodes();
-      const result = combineShapeNodes(before, selectedIds(ids), operation, { ...rect2(), ...combineOptions });
+      const result = combineShapeNodes(before, selectedIds2(ids), operation, { ...rect2(), ...combineOptions });
       if (!result.ok) return result;
       const name = `${operation[0].toUpperCase()}${operation.slice(1)} Shapes`;
       const run = () => options.setNodes(applyShapeCombination(options.getNodes(), result));
@@ -3127,7 +3127,7 @@ function createCanvasArrangeController(options) {
     exclude: (ids, o) => controller.combineShapes("exclude", ids, o),
     divide: (ids, o) => controller.combineShapes("divide", ids, o),
     /** Whether the shape operations can run on `ids` (default: the selection). */
-    canCombineShapes: (ids) => canCombineShapeNodes(options.getNodes(), selectedIds(ids)).ok,
+    canCombineShapes: (ids) => canCombineShapeNodes(options.getNodes(), selectedIds2(ids)).ok,
     /**
      * Offset Path: grows (`distance > 0`) or shrinks (`distance < 0`) every shape among
      * `ids` (default: the selection) by `distance` flow units, keeping curves, as one
@@ -3136,7 +3136,7 @@ function createCanvasArrangeController(options) {
      */
     offsetShapes(distance, ids, offsetOptions = {}) {
       const before = options.getNodes();
-      const result = offsetShapeNodes(before, selectedIds(ids), distance, { ...rect2(), ...offsetOptions });
+      const result = offsetShapeNodes(before, selectedIds2(ids), distance, { ...rect2(), ...offsetOptions });
       if (!result.ok) return result;
       const run = () => options.setNodes(applyShapeReplacement(options.getNodes(), result));
       const undo = () => options.setNodes(revertShapeCombination(options.getNodes(), result, before));
@@ -3145,7 +3145,7 @@ function createCanvasArrangeController(options) {
       return result;
     },
     /** Whether `offsetShapes` can run on `ids` (default: the selection). */
-    canOffsetShapes: (ids) => canOffsetShapeNodes(options.getNodes(), selectedIds(ids)).ok,
+    canOffsetShapes: (ids) => canOffsetShapeNodes(options.getNodes(), selectedIds2(ids)).ok,
     /**
      * Outline Stroke: converts the strokes of the shapes among `ids` (default: the
      * selection) to filled path shapes, as one undoable step. Refuses when a shape is
@@ -3153,7 +3153,7 @@ function createCanvasArrangeController(options) {
      */
     outlineStroke(ids, outlineOptions = {}) {
       const before = options.getNodes();
-      const result = outlineShapeNodeStrokes(before, selectedIds(ids), { ...rect2(), ...outlineOptions });
+      const result = outlineShapeNodeStrokes(before, selectedIds2(ids), { ...rect2(), ...outlineOptions });
       if (!result.ok) return result;
       const run = () => options.setNodes(applyShapeReplacement(options.getNodes(), result));
       const undo = () => options.setNodes(revertShapeCombination(options.getNodes(), result, before));
@@ -3162,7 +3162,7 @@ function createCanvasArrangeController(options) {
       return result;
     },
     /** Whether `outlineStroke` can run on `ids` (default: the selection). */
-    canOutlineStroke: (ids) => canOutlineShapeNodeStrokes(options.getNodes(), selectedIds(ids)).ok,
+    canOutlineStroke: (ids) => canOutlineShapeNodeStrokes(options.getNodes(), selectedIds2(ids)).ok,
     /**
      * Runs a shortcut action. Scene actions are not handled here (see the scenes store);
      * returns `false` for them and for unknown actions.
@@ -3217,7 +3217,7 @@ function createCanvasArrangeController(options) {
     },
     /** Caches the snap targets for a drag. Optional: `drag` builds them lazily. */
     beginDrag(ids) {
-      const list = selectedIds(ids);
+      const list = selectedIds2(ids);
       dragKey = list.slice().sort().join("\0");
       dragIndex = createNodeGuideIndex(options.getNodes(), list, rect2());
     },
@@ -3228,7 +3228,7 @@ function createCanvasArrangeController(options) {
      */
     drag(ids) {
       if (options.snapping === false) return null;
-      const list = selectedIds(ids);
+      const list = selectedIds2(ids);
       const key = list.slice().sort().join("\0");
       if (!dragIndex || key !== dragKey) controller.beginDrag(list);
       const result = snapNodeDrag(options.getNodes(), list, {
@@ -3549,10 +3549,10 @@ function measureToLine(a, orientation, at) {
   }
   return out;
 }
-function measureSelection(nodes, selectedIds, hoveredId, options = {}) {
+function measureSelection(nodes, selectedIds2, hoveredId, options = {}) {
   const none = (selection2 = null) => ({ guides: [], target: null, selection: selection2 });
   const lookup = createNodeLookup(nodes);
-  const selected = [...new Set(selectedIds)].map((id) => lookup.get(id)).filter((n3) => !!n3 && n3.hidden !== true);
+  const selected = [...new Set(selectedIds2)].map((id) => lookup.get(id)).filter((n3) => !!n3 && n3.hidden !== true);
   if (selected.length === 0) return none();
   const selection = boundsOf(selected.map((n3) => getNodeRect(n3, lookup, options)));
   if (!selection) return none();
@@ -5209,7 +5209,7 @@ var defaultLabel = (node) => typeof node.data?.label === "string" && node.data.l
 function getTimelineRows(nodes, ids, options = {}) {
   const byId = new Map(nodes.map((n3) => [n3.id, n3]));
   const selection = options.selection ?? [];
-  const labelOf2 = options.labelOf ?? defaultLabel;
+  const labelOf3 = options.labelOf ?? defaultLabel;
   const rows = [];
   for (const id of new Set(ids)) {
     const node = byId.get(id);
@@ -5220,7 +5220,7 @@ function getTimelineRows(nodes, ids, options = {}) {
       rows.push({
         id: `${id}:${property}`,
         nodeId: id,
-        nodeLabel: labelOf2(node),
+        nodeLabel: labelOf3(node),
         property,
         label,
         enabled: track.enabled !== false,
@@ -5315,7 +5315,7 @@ function createCanvasAnimationController(options) {
     for (const listener of listeners) listener(state);
   };
   player.subscribe(notify);
-  const selectedIds = () => options.getSelectedIds?.() ?? options.getNodes().filter((n3) => n3.selected).map((n3) => n3.id);
+  const selectedIds2 = () => options.getSelectedIds?.() ?? options.getNodes().filter((n3) => n3.selected).map((n3) => n3.id);
   const KEEP_FIELDS = ["selected", "dragging", "measured"];
   const replaceNodes = (nodes, replacements, animationOnly = false) => nodes.map((node) => {
     const replacement = replacements.get(node.id);
@@ -5432,7 +5432,7 @@ function createCanvasAnimationController(options) {
       controller.setRecording(!recording);
     },
     /** Seeks to the next keyframe (of the selected nodes, or all) after the playhead. */
-    nextKeyframe(ids = selectedIds()) {
+    nextKeyframe(ids = selectedIds2()) {
       const list = [...ids];
       const times = getKeyframeTimes(options.getNodes(), list.length ? { ids: list } : {});
       const next = times.find((t) => t > player.currentTime + ANIMATION_TIME_EPSILON);
@@ -5440,7 +5440,7 @@ function createCanvasAnimationController(options) {
       player.seek(next);
       return next;
     },
-    previousKeyframe(ids = selectedIds()) {
+    previousKeyframe(ids = selectedIds2()) {
       const list = [...ids];
       const times = getKeyframeTimes(options.getNodes(), list.length ? { ids: list } : {});
       const prev = [...times].reverse().find((t) => t < player.currentTime - ANIMATION_TIME_EPSILON);
@@ -5497,7 +5497,7 @@ function createCanvasAnimationController(options) {
     addKeyframe(ids, keys, time = player.currentTime) {
       let refs = [];
       commit("Add Keyframe", (nodes) => {
-        const result = addKeyframesAtTime(nodes, ids ?? selectedIds(), time, { ...propertyOptions(), ...keys ? { keys } : {} });
+        const result = addKeyframesAtTime(nodes, ids ?? selectedIds2(), time, { ...propertyOptions(), ...keys ? { keys } : {} });
         refs = result.refs;
         return result.nodes;
       });
@@ -5584,7 +5584,7 @@ function createCanvasAnimationController(options) {
       return clipboard;
     },
     /** Pastes at the playhead onto the selected nodes (or the copied ones). */
-    pasteKeyframes(data = clipboard, nodeIds = selectedIds(), time = player.currentTime) {
+    pasteKeyframes(data = clipboard, nodeIds = selectedIds2(), time = player.currentTime) {
       if (!data) return [];
       let refs = [];
       commit("Paste Keyframes", (nodes) => {
@@ -5676,7 +5676,7 @@ function createCanvasAnimationController(options) {
     },
     // ----- views & export ---------------------------------------------------------------
     /** Timeline rows for `ids` (default: selected nodes), including the drag preview. */
-    timelineRows(ids = selectedIds(), opts = {}) {
+    timelineRows(ids = selectedIds2(), opts = {}) {
       return getTimelineRows(options.getNodes(), ids, { ...propertyOptions(), ...opts, selection, dragDelta: drag?.delta ?? 0 });
     },
     sampleFrames(opts = {}) {
@@ -12198,6 +12198,458 @@ function createCanvasExplosionToolProvider(target, options = {}) {
     subscribe: options.subscribe
   };
 }
+
+// src/canvas/proposals.ts
+var CANVAS_PROPOSAL_CLASS = "pixerate-proposal";
+var toSide = (side) => side === "top" ? "above" : side === "bottom" ? "below" : side ?? "right";
+var randomId = (kind) => `${kind}-${Math.random().toString(36).slice(2, 9)}`;
+var joinClass = (a, b) => typeof a === "string" && a ? `${a} ${b}` : b;
+function createCanvasProposals(options) {
+  const size2 = options.defaultNodeSize ?? { width: 200, height: 60 };
+  const makeId = options.idGenerator ?? randomId;
+  const now = options.now ?? Date.now;
+  let state = { proposals: [] };
+  const listeners = /* @__PURE__ */ new Set();
+  const set = (proposals) => {
+    state = { proposals };
+    listeners.forEach((l) => l(state));
+  };
+  const find = (id) => {
+    const proposal = state.proposals.find((p) => p.id === id);
+    if (!proposal) {
+      const ids = state.proposals.map((p) => p.id);
+      throw new Error(`No proposal "${id}". ${ids.length ? `Pending proposals: ${ids.join(", ")}.` : "There are no pending proposals."} Call list_proposals for ids.`);
+    }
+    return proposal;
+  };
+  const rectOf = (node) => ({
+    x: node.position.x,
+    y: node.position.y,
+    width: node.measured?.width ?? node.width ?? size2.width,
+    height: node.measured?.height ?? node.height ?? size2.height
+  });
+  const missing = (proposal) => {
+    const present = new Set(options.getNodes().map((n3) => n3.id));
+    return proposal.anchors.filter((id) => !present.has(id));
+  };
+  const propose = (input) => {
+    const title = typeof input.title === "string" ? input.title.trim() : "";
+    if (!title) throw new Error("A proposal needs a title: what it adds, in a few words.");
+    const nodesIn = input.nodes ?? [];
+    const edgesIn = input.edges ?? [];
+    if (!nodesIn.length && !edgesIn.length) throw new Error("A proposal needs at least one node or edge.");
+    const canvasNodes = options.getNodes();
+    const canvasIds = new Set(canvasNodes.map((n3) => n3.id));
+    const taken = /* @__PURE__ */ new Set([...canvasIds, ...options.getEdges().map((e) => e.id)]);
+    for (const p of state.proposals) {
+      p.nodes.forEach((n3) => taken.add(n3.id));
+      p.edges.forEach((e) => taken.add(e.id));
+    }
+    const rects = {};
+    for (const n3 of canvasNodes) rects[n3.id] = rectOf(n3);
+    for (const p of state.proposals) for (const n3 of p.nodes) rects[n3.id] = rectOf(n3);
+    const fresh = (kind, wanted) => {
+      if (wanted !== void 0) {
+        if (typeof wanted !== "string" || !wanted) throw new Error(`A ${kind} id must be a non-empty string.`);
+        if (taken.has(wanted)) throw new Error(`Id "${wanted}" is already in use on the canvas or in a pending proposal. Pick another or leave it out.`);
+        taken.add(wanted);
+        return wanted;
+      }
+      let id = makeId(kind);
+      while (taken.has(id)) id = makeId(kind);
+      taken.add(id);
+      return id;
+    };
+    const nodes = [];
+    const edges = [];
+    const anchors = /* @__PURE__ */ new Set();
+    const ownIds = /* @__PURE__ */ new Set();
+    const known = (id) => canvasIds.has(id) || ownIds.has(id);
+    nodesIn.forEach((input2, i) => {
+      if (input2.nearNodeId !== void 0 && !known(input2.nearNodeId)) {
+        throw new Error(`nodes[${i}].nearNodeId "${input2.nearNodeId}" is not on the canvas or earlier in this proposal. Use an id from the canvas state.`);
+      }
+      const id = fresh("node", input2.id);
+      const nodeSize = { width: input2.width ?? size2.width, height: input2.height ?? size2.height };
+      let position = input2.position;
+      if (position && (!Number.isFinite(position.x) || !Number.isFinite(position.y))) {
+        throw new Error(`nodes[${i}].position needs finite x and y.`);
+      }
+      if (!position) {
+        const view = options.visibleRect?.();
+        if (input2.nearNodeId) position = placeBeside(rects, nodeSize, toSide(input2.side), input2.nearNodeId);
+        else if (view) position = placeInView(rects, nodeSize, view);
+        else if (canvasNodes.length || nodes.length) {
+          const last = nodes[nodes.length - 1] ?? canvasNodes[canvasNodes.length - 1];
+          position = placeBeside(rects, nodeSize, "right", last.id);
+        } else position = { x: 100, y: 100 };
+      }
+      const type = input2.type ?? options.defaultNodeType;
+      const node = {
+        id,
+        position,
+        data: { ...input2.data ?? {} },
+        ...type !== void 0 ? { type } : {},
+        ...input2.width !== void 0 ? { width: input2.width } : {},
+        ...input2.height !== void 0 ? { height: input2.height } : {}
+      };
+      nodes.push(node);
+      ownIds.add(id);
+      rects[id] = { ...position, ...nodeSize };
+      if (input2.nearNodeId) {
+        if (canvasIds.has(input2.nearNodeId)) anchors.add(input2.nearNodeId);
+        edges.push({ id: fresh("edge"), source: input2.nearNodeId, target: id });
+      }
+    });
+    edgesIn.forEach((input2, i) => {
+      for (const end of ["source", "target"]) {
+        if (typeof input2[end] !== "string" || !known(input2[end])) {
+          throw new Error(`edges[${i}].${end} "${String(input2[end])}" is not on the canvas or in this proposal.`);
+        }
+      }
+      if (input2.source === input2.target) throw new Error(`edges[${i}] connects "${input2.source}" to itself.`);
+      const id = fresh("edge", input2.id);
+      edges.push({ id, source: input2.source, target: input2.target, ...input2.label ? { label: input2.label } : {} });
+      for (const end of [input2.source, input2.target]) if (canvasIds.has(end)) anchors.add(end);
+    });
+    const proposal = {
+      id: makeId("proposal"),
+      title,
+      ...input.rationale ? { rationale: input.rationale } : {},
+      origin: input.origin ?? options.origin ?? "agent:anonymous",
+      createdAt: now(),
+      nodes,
+      edges,
+      anchors: [...anchors]
+    };
+    while (state.proposals.some((p) => p.id === proposal.id)) proposal.id = makeId("proposal");
+    set([...state.proposals, proposal]);
+    return proposal;
+  };
+  const accept = (id) => {
+    const proposal = find(id);
+    const reason = options.readOnly?.();
+    if (reason) throw new Error(reason);
+    const gone = missing(proposal);
+    if (gone.length) {
+      throw new Error(`Proposal "${id}" connects to ${gone.map((g) => `"${g}"`).join(", ")}, which ${gone.length > 1 ? "are" : "is"} no longer on the canvas. Reject it and propose again.`);
+    }
+    const nodeIds = proposal.nodes.map((n3) => n3.id);
+    const edgeIds = proposal.edges.map((e) => e.id);
+    const clash = options.getNodes().find((n3) => nodeIds.includes(n3.id)) ?? options.getEdges().find((e) => edgeIds.includes(e.id));
+    if (clash) throw new Error(`Id "${clash.id}" was taken on the canvas after proposal "${id}" was made. Reject it and propose again.`);
+    const nodeSet = new Set(nodeIds);
+    const edgeSet = new Set(edgeIds);
+    const add = () => {
+      options.setNodes([...options.getNodes().filter((n3) => !nodeSet.has(n3.id)), ...proposal.nodes.map((n3) => ({ ...n3 }))]);
+      options.setEdges([...options.getEdges().filter((e) => !edgeSet.has(e.id)), ...proposal.edges.map((e) => ({ ...e }))]);
+    };
+    const remove = () => {
+      options.setNodes(options.getNodes().filter((n3) => !nodeSet.has(n3.id)));
+      options.setEdges(options.getEdges().filter((e) => !edgeSet.has(e.id)));
+    };
+    set(state.proposals.filter((p) => p.id !== id));
+    if (options.history) options.history.execute({ name: proposal.title, origin: proposal.origin, execute: add, undo: remove });
+    else add();
+    return { proposalId: id, nodeIds, edgeIds, historyLabel: proposal.title };
+  };
+  const reject = (id) => {
+    const proposal = find(id);
+    set(state.proposals.filter((p) => p.id !== id));
+    return proposal;
+  };
+  const clear = (origin) => {
+    const dropped = state.proposals.filter((p) => origin === void 0 || p.origin === origin).map((p) => p.id);
+    if (dropped.length) set(state.proposals.filter((p) => !dropped.includes(p.id)));
+    return dropped;
+  };
+  const withGhosts = (nodes, edges) => {
+    if (!state.proposals.length) return { nodes: [...nodes], edges: [...edges] };
+    const present = new Set(nodes.map((n3) => n3.id));
+    const ghostNodes = [];
+    const ghostEdges = [];
+    for (const p of state.proposals) {
+      const meta = { id: p.id, title: p.title };
+      for (const n3 of p.nodes) {
+        if (present.has(n3.id)) continue;
+        present.add(n3.id);
+        ghostNodes.push({
+          ...n3,
+          // Flow libraries hide a node until it is measured, and only nodes in the host's state get
+          // measured: give the ghost the size it was placed with.
+          measured: n3.measured ?? { width: n3.width ?? size2.width, height: n3.height ?? size2.height },
+          draggable: false,
+          selectable: false,
+          connectable: false,
+          deletable: false,
+          className: joinClass(n3.className, CANVAS_PROPOSAL_CLASS),
+          data: { ...n3.data, proposal: meta }
+        });
+      }
+    }
+    for (const p of state.proposals) {
+      for (const e of p.edges) {
+        if (!present.has(e.source) || !present.has(e.target)) continue;
+        ghostEdges.push({ ...e, selectable: false, deletable: false, animated: true, className: joinClass(e.className, CANVAS_PROPOSAL_CLASS) });
+      }
+    }
+    return { nodes: [...nodes, ...ghostNodes], edges: [...edges, ...ghostEdges] };
+  };
+  return {
+    getState: () => state,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    propose,
+    accept,
+    reject,
+    clear,
+    get: (id) => state.proposals.find((p) => p.id === id),
+    missing: (id) => missing(find(id)),
+    withGhosts
+  };
+}
+
+// src/canvas/changeFeed.ts
+var RUNTIME_NODE_KEYS2 = /* @__PURE__ */ new Set(["selected", "dragging", "measured", "resizing"]);
+var RUNTIME_EDGE_KEYS2 = /* @__PURE__ */ new Set(["selected"]);
+var selectedIds = (nodes) => nodes.filter((n3) => n3.selected).map((n3) => n3.id);
+function diffFields(before, after, ignore) {
+  if (before === after) return [];
+  const fields = [];
+  for (const key of /* @__PURE__ */ new Set([...Object.keys(before), ...Object.keys(after)])) {
+    if (ignore.has(key)) continue;
+    const a = before[key];
+    const b = after[key];
+    if (a === b) continue;
+    if (a && b && typeof a === "object" && typeof b === "object" && JSON.stringify(a) === JSON.stringify(b)) continue;
+    fields.push(key);
+  }
+  return fields;
+}
+function createCanvasChangeFeed(options) {
+  const now = options.now ?? Date.now;
+  const nodeIgnore = /* @__PURE__ */ new Set([...RUNTIME_NODE_KEYS2, ...options.ignoreNodeKeys ?? []]);
+  const listeners = /* @__PURE__ */ new Set();
+  let nodes = options.getNodes();
+  let edges = options.getEdges();
+  let seq = 0;
+  let pending;
+  const check = () => {
+    const nextNodes = options.getNodes();
+    const nextEdges = options.getEdges();
+    if (nextNodes === nodes && nextEdges === edges) return null;
+    const beforeNodes = new Map(nodes.map((n3) => [n3.id, n3]));
+    const afterNodes = new Map(nextNodes.map((n3) => [n3.id, n3]));
+    const beforeEdges = new Map(edges.map((e) => [e.id, e]));
+    const afterEdges = new Map(nextEdges.map((e) => [e.id, e]));
+    const addedNodes = nextNodes.filter((n3) => !beforeNodes.has(n3.id));
+    const removedNodes = nodes.filter((n3) => !afterNodes.has(n3.id));
+    const changedNodes = [];
+    for (const after of nextNodes) {
+      const before = beforeNodes.get(after.id);
+      if (!before) continue;
+      const fields = diffFields(before, after, nodeIgnore);
+      if (fields.length) changedNodes.push({ before, after, fields });
+    }
+    const addedEdges = nextEdges.filter((e) => !beforeEdges.has(e.id));
+    const removedEdges = edges.filter((e) => !afterEdges.has(e.id));
+    const changedEdges = [];
+    for (const after of nextEdges) {
+      const before = beforeEdges.get(after.id);
+      if (!before) continue;
+      const fields = diffFields(before, after, RUNTIME_EDGE_KEYS2);
+      if (fields.length) changedEdges.push({ before, after, fields });
+    }
+    const selBefore = selectedIds(nodes);
+    const selAfter = selectedIds(nextNodes);
+    const selectionChanged = selBefore.length !== selAfter.length || selBefore.some((id, i) => id !== selAfter[i]);
+    nodes = nextNodes;
+    edges = nextEdges;
+    const edited = addedNodes.length + removedNodes.length + changedNodes.length + addedEdges.length + removedEdges.length + changedEdges.length > 0;
+    if (!edited && !selectionChanged) return null;
+    const commit = edited ? pending : void 0;
+    if (edited) pending = void 0;
+    const change = {
+      seq: ++seq,
+      origin: commit?.kind === "execute" || commit?.kind === "merge" ? commit.origin : "user",
+      ...commit ? { commit } : {},
+      addedNodes,
+      removedNodes,
+      changedNodes,
+      addedEdges,
+      removedEdges,
+      changedEdges,
+      ...selectionChanged ? { selection: { before: selBefore, after: selAfter } } : {},
+      inGesture: nextNodes.some((n3) => n3.dragging || n3.resizing),
+      at: now()
+    };
+    listeners.forEach((l) => l(change));
+    return change;
+  };
+  const noteCommit = (event) => {
+    pending = event;
+  };
+  const offHistory = options.history?.onCommit(noteCommit);
+  const offCanvas = options.subscribe?.(() => {
+    check();
+  });
+  return {
+    check,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    reset: () => {
+      nodes = options.getNodes();
+      edges = options.getEdges();
+      pending = void 0;
+    },
+    noteCommit,
+    dispose: () => {
+      offHistory?.();
+      offCanvas?.();
+      listeners.clear();
+    }
+  };
+}
+
+// src/canvas/proposal-tools.ts
+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 = node.data?.label ?? node.data?.name ?? node.data?.title;
+  return typeof label === "string" && label !== "" ? label : void 0;
+};
+var proposalIdArg = {
+  type: "object",
+  properties: {
+    proposalId: { type: "string", minLength: 1, description: "Id of a pending proposal, from propose_nodes or list_proposals." }
+  },
+  required: ["proposalId"],
+  additionalProperties: false
+};
+function createCanvasProposalToolProvider(proposals, options = {}) {
+  const readOnlyReason = () => {
+    const ro = typeof options.readOnly === "function" ? options.readOnly() : options.readOnly;
+    return ro ? typeof ro === "string" ? ro : "The canvas is read-only: proposals can be made and rejected but not accepted." : null;
+  };
+  const describe = (p) => ({
+    id: p.id,
+    title: p.title,
+    ...p.rationale ? { rationale: p.rationale } : {},
+    origin: p.origin,
+    nodes: p.nodes.map((n3) => ({ id: n3.id, ...labelOf2(n3) ? { label: labelOf2(n3) } : {}, position: n3.position })),
+    edges: p.edges.map((e) => ({ id: e.id, source: e.source, target: e.target })),
+    anchors: p.anchors,
+    missing: proposals.missing(p.id),
+    createdAt: new Date(p.createdAt).toISOString()
+  });
+  const proposeTool = {
+    name: "propose_nodes",
+    title: "Propose nodes",
+    description: "Suggests nodes and edges to add to the canvas without adding them: they appear as ghosts that the user accepts or dismisses, so use it for contributions the user did not ask for. A node with nearNodeId is placed beside that node and connected from it; others go in free space. Returns the proposal id, the planned node ids and positions, the edge ids and the canvas nodes it builds on (anchors). Follow with accept_proposal only when the user asked for it; otherwise leave the choice to them.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        title: { type: "string", minLength: 1, description: 'What the suggestion adds, in a few words, e.g. "Caption for the hero image". Becomes the undo step name when accepted.' },
+        rationale: { type: "string", description: "Why it fits what the user is doing, in one sentence. Shown to the user beside the ghost." },
+        nodes: {
+          type: "array",
+          description: "Nodes to suggest, in order; a later node may sit beside an earlier one. Default none.",
+          items: {
+            type: "object",
+            properties: {
+              id: { type: "string", description: "Id for the new node (default generated). Must not be in use." },
+              type: { type: "string", description: "Node type as the canvas renders it (default the canvas default)." },
+              data: { type: "object", description: 'Node data, e.g. { "label": "Caption" }. Default {}.' },
+              position: {
+                type: "object",
+                description: "Top-left corner in canvas coordinates (pixels). Default: placed beside nearNodeId or in free space in view.",
+                properties: { x: { type: "number", description: "Canvas x in pixels." }, y: { type: "number", description: "Canvas y in pixels." } },
+                required: ["x", "y"],
+                additionalProperties: false
+              },
+              width: { type: "number", exclusiveMinimum: 0, description: "Width in pixels, for placement (default 200)." },
+              height: { type: "number", exclusiveMinimum: 0, description: "Height in pixels, for placement (default 60)." },
+              nearNodeId: { type: "string", description: "Id of a canvas node, or an earlier node of this proposal, to place it beside and connect from." },
+              side: { type: "string", enum: ["right", "below", "left", "above", "top", "bottom"], description: "Side of nearNodeId to place it on (default right)." }
+            },
+            additionalProperties: false
+          }
+        },
+        edges: {
+          type: "array",
+          description: "Extra edges, between nodes of this proposal or canvas nodes. Default none.",
+          items: {
+            type: "object",
+            properties: {
+              id: { type: "string", description: "Id for the edge (default generated)." },
+              source: { type: "string", description: "Id of the source node (canvas or this proposal)." },
+              target: { type: "string", description: "Id of the target node (canvas or this proposal)." },
+              label: { type: "string", description: "Edge label. Default none." }
+            },
+            required: ["source", "target"],
+            additionalProperties: false
+          }
+        }
+      },
+      required: ["title"],
+      additionalProperties: false
+    },
+    annotations: { title: "Propose nodes", ...WRITE },
+    handler: (args, context) => {
+      const origin = context.actor?.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 };
+    }
+  };
+  const listTool = {
+    name: "list_proposals",
+    title: "List proposals",
+    description: "Lists the pending proposals (suggested nodes and edges not yet on the canvas): id, title, rationale, who proposed it, its nodes and edges, the canvas nodes it builds on, any of those since removed (missing: it can no longer be accepted), and whether accepting is allowed. Call before accept_proposal or reject_proposal.",
+    inputSchema: { type: "object", properties: {}, additionalProperties: false },
+    annotations: { title: "List proposals", ...READ2 },
+    handler: () => ({ proposals: proposals.getState().proposals.map(describe), readOnly: readOnlyReason() })
+  };
+  const acceptTool = {
+    name: "accept_proposal",
+    title: "Accept a proposal",
+    description: "Adds a pending proposal to the canvas as one undo step, recorded as made by whoever proposed it, and drops it from the pending list. Refuses, changing nothing, when the canvas is read-only or a node the proposal builds on was removed. Returns the added node and edge ids and the undo step name.",
+    inputSchema: proposalIdArg,
+    annotations: { title: "Accept a proposal", ...WRITE },
+    handler: (args) => {
+      const reason = readOnlyReason();
+      if (reason) throw new Error(reason);
+      return proposals.accept(args.proposalId);
+    }
+  };
+  const rejectTool = {
+    name: "reject_proposal",
+    title: "Reject a proposal",
+    description: "Dismisses a pending proposal: its ghosts disappear and the canvas and its history are unchanged. Use it to withdraw a suggestion that no longer fits. Returns the dismissed proposal id and title.",
+    inputSchema: proposalIdArg,
+    annotations: { title: "Reject a proposal", ...WRITE },
+    handler: (args) => {
+      const proposal = proposals.reject(args.proposalId);
+      return { proposalId: proposal.id, title: proposal.title, rejected: true };
+    }
+  };
+  return {
+    id: options.id ?? "canvas-proposals",
+    ...options.namespace !== void 0 ? { namespace: options.namespace } : {},
+    title: "Canvas proposals",
+    description: "Suggest canvas additions as ghosts the user accepts or dismisses, and accept or reject pending suggestions.",
+    skill: "pixerate-canvas",
+    tools: [proposeTool, listTool, acceptTool, rejectTool]
+  };
+}
 export {
   ANIMATABLE_PROPERTIES,
   ANIMATION_DATA_KEY,
@@ -12215,6 +12667,7 @@ export {
   CANVAS_EFFECT_MISSING_PATTERN,
   CANVAS_EFFECT_PLACES,
   CANVAS_GRADIENT_PRESETS,
+  CANVAS_PROPOSAL_CLASS,
   CANVAS_TOKEN_PROPERTIES,
   CARD_INSPECTION_ZONES,
   CHILD_LAYOUT_DATA_KEY,
@@ -12338,6 +12791,7 @@ export {
   createCanvasAutoLayoutController,
   createCanvasCaptureSurface,
   createCanvasCaptureToolProvider,
+  createCanvasChangeFeed,
   createCanvasComponent,
   createCanvasComponentsController,
   createCanvasDrawController,
@@ -12349,6 +12803,8 @@ export {
   createCanvasGestureRecorder,
   createCanvasInstance,
   createCanvasPlaybackLocator,
+  createCanvasProposalToolProvider,
+  createCanvasProposals,
   createCanvasScenesStore,
   createDefaultStrokeStyle,
   createFanOutTrajectory,