feat(canvas): implement local node size pinning and reconciliation logic

- Added functions to handle local node size pins, ensuring that node sizes are preserved during reconciliation.
- Updated `reconcileCanvasFlowNodes` to incorporate size pinning logic.
- Enhanced tests to verify the correct behavior of size pinning in various scenarios.
- Updated related components to support new size pinning functionality.

components/canvas/__tests__/canvas-flow-reconciliation-helpers.test.ts

@@ -346,6 +346,96 @@ describe("canvas flow reconciliation helpers", () => {
     expect(result.nextPendingLocalNodeDataPins.size).toBe(0);
   });
 
+  it("keeps pinned local node size until convex catches up", () => {
+    const pinnedSize = { width: 419, height: 466 };
+
+    const result = reconcileCanvasFlowNodes({
+      previousNodes: [
+        {
+          id: "node-1",
+          type: "render",
+          position: { x: 120, y: 80 },
+          data: {},
+          style: pinnedSize,
+        },
+      ],
+      incomingNodes: [
+        {
+          id: "node-1",
+          type: "render",
+          position: { x: 120, y: 80 },
+          data: {},
+          style: { width: 640, height: 360 },
+        },
+      ],
+      convexNodes: [{ _id: asNodeId("node-1"), type: "render" }],
+      deletingNodeIds: new Set(),
+      resolvedRealIdByClientRequest: new Map(),
+      pendingConnectionCreateIds: new Set(),
+      preferLocalPositionNodeIds: new Set(),
+      pendingLocalPositionPins: new Map(),
+      pendingLocalNodeSizePins: new Map([["node-1", pinnedSize]]),
+      pendingMovePins: new Map(),
+    });
+
+    expect(result.nodes).toEqual([
+      {
+        id: "node-1",
+        type: "render",
+        position: { x: 120, y: 80 },
+        data: {},
+        style: pinnedSize,
+      },
+    ]);
+    expect(result.nextPendingLocalNodeSizePins).toEqual(
+      new Map([["node-1", pinnedSize]]),
+    );
+  });
+
+  it("clears pinned local node size once convex matches the persisted size", () => {
+    const pinnedSize = { width: 419, height: 466 };
+
+    const result = reconcileCanvasFlowNodes({
+      previousNodes: [
+        {
+          id: "node-1",
+          type: "render",
+          position: { x: 120, y: 80 },
+          data: {},
+          style: pinnedSize,
+        },
+      ],
+      incomingNodes: [
+        {
+          id: "node-1",
+          type: "render",
+          position: { x: 120, y: 80 },
+          data: {},
+          style: pinnedSize,
+        },
+      ],
+      convexNodes: [{ _id: asNodeId("node-1"), type: "render" }],
+      deletingNodeIds: new Set(),
+      resolvedRealIdByClientRequest: new Map(),
+      pendingConnectionCreateIds: new Set(),
+      preferLocalPositionNodeIds: new Set(),
+      pendingLocalPositionPins: new Map(),
+      pendingLocalNodeSizePins: new Map([["node-1", pinnedSize]]),
+      pendingMovePins: new Map(),
+    });
+
+    expect(result.nodes).toEqual([
+      {
+        id: "node-1",
+        type: "render",
+        position: { x: 120, y: 80 },
+        data: {},
+        style: pinnedSize,
+      },
+    ]);
+    expect(result.nextPendingLocalNodeSizePins.size).toBe(0);
+  });
+
   it("filters deleting nodes from incoming reconciliation results", () => {
     const result = reconcileCanvasFlowNodes({
       previousNodes: [

components/canvas/__tests__/use-canvas-flow-reconciliation.test.ts

@@ -39,6 +39,7 @@ type HarnessProps = {
   previousConvexNodeIdsSnapshot: Set<string>;
   pendingLocalPositionPins?: Map<string, { x: number; y: number }>;
   pendingLocalNodeDataPins?: Map<string, unknown>;
+  pendingLocalNodeSizePins?: Map<string, { width: number; height: number }>;
   preferLocalPositionNodeIds?: Set<string>;
   isResizingRefOverride?: { current: boolean };
 };
@@ -82,6 +83,9 @@ function HookHarness(props: HarnessProps) {
   const pendingLocalNodeDataUntilConvexMatchesRef = useRef(
     props.pendingLocalNodeDataPins ?? new Map<string, unknown>(),
   );
+  const pendingLocalNodeSizeUntilConvexMatchesRef = useRef(
+    props.pendingLocalNodeSizePins ?? new Map<string, { width: number; height: number }>(),
+  );
   const preferLocalPositionNodeIdsRef = useRef(
     props.preferLocalPositionNodeIds ?? new Set<string>(),
   );
@@ -120,6 +124,7 @@ function HookHarness(props: HarnessProps) {
       pendingConnectionCreatesRef,
       pendingLocalPositionUntilConvexMatchesRef,
       pendingLocalNodeDataUntilConvexMatchesRef,
+      pendingLocalNodeSizeUntilConvexMatchesRef,
       preferLocalPositionNodeIdsRef,
       isDragging: isDraggingRef,
       isResizing: isResizingRef,

components/canvas/__tests__/use-canvas-sync-engine.test.ts

@@ -160,7 +160,7 @@ describe("useCanvasSyncEngine", () => {
       getEnqueueSyncMutation: () => enqueueSyncMutation,
       getRunBatchRemoveNodes: () => vi.fn(async () => undefined),
       getRunSplitEdgeAtExistingNode: () => vi.fn(async () => undefined),
-      getSetNodes: () => setNodes,
+      getSetNodes: () => setNodes as never,
     });
 
     await controller.queueNodeDataUpdate({
@@ -177,4 +177,46 @@ describe("useCanvasSyncEngine", () => {
       data: { blackPoint: 209 },
     });
   });
+
+  it("pins local node size immediately when queueing a resize", async () => {
+    const enqueueSyncMutation = vi.fn(async () => undefined);
+    let nodes = [
+      {
+        id: "node-1",
+        type: "render",
+        position: { x: 0, y: 0 },
+        data: {},
+        style: { width: 640, height: 360 },
+      },
+    ];
+    const setNodes = (updater: (current: typeof nodes) => typeof nodes) => {
+      nodes = updater(nodes);
+      return nodes;
+    };
+
+    const controller = createCanvasSyncEngineController({
+      canvasId: asCanvasId("canvas-1"),
+      isSyncOnline: true,
+      getEnqueueSyncMutation: () => enqueueSyncMutation,
+      getRunBatchRemoveNodes: () => vi.fn(async () => undefined),
+      getRunSplitEdgeAtExistingNode: () => vi.fn(async () => undefined),
+      getSetNodes: () => setNodes as never,
+    });
+
+    await controller.queueNodeResize({
+      nodeId: asNodeId("node-1"),
+      width: 419,
+      height: 466,
+    });
+
+    expect(nodes[0]?.style).toEqual({ width: 419, height: 466 });
+    expect(controller.pendingLocalNodeSizeUntilConvexMatchesRef.current).toEqual(
+      new Map([["node-1", { width: 419, height: 466 }]]),
+    );
+    expect(enqueueSyncMutation).toHaveBeenCalledWith("resizeNode", {
+      nodeId: asNodeId("node-1"),
+      width: 419,
+      height: 466,
+    });
+  });
 });