@agent-native/toolkit 0.0.0-beta-20260819143124

package/src/canvas-interactions/canvas-interactions.spec.ts

@@ -0,0 +1,765 @@
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  clientDeltaToCanvasDelta,
+  clientPointToCanvasPoint,
+  constrainCanvasDragDelta,
+  createCanvasGestureController,
+  createCanvasInteractionCore,
+  createCanvasShortcutRegistry,
+  hasCrossedCanvasDragThreshold,
+  resizeCanvasRect,
+  resolveCanvasEscape,
+  resolveCanvasNudge,
+  resolveCanvasShortcut,
+  resolveCanvasTextActivation,
+  shouldDuplicateCanvasDrag,
+} from "./canvas-interactions.js";
+
+describe("canvas interaction conformance", () => {
+  it("allows app-specific single or double click text activation", () => {
+    expect(
+      resolveCanvasTextActivation(
+        { clickCount: 1, textEditable: true },
+        { activation: "single-click" },
+      ),
+    ).toBe("edit");
+    expect(
+      resolveCanvasTextActivation(
+        { clickCount: 1, textEditable: true },
+        { activation: "double-click" },
+      ),
+    ).toBe("select");
+    expect(
+      resolveCanvasTextActivation(
+        { clickCount: 2, textEditable: true },
+        { activation: "double-click" },
+      ),
+    ).toBe("edit");
+    expect(
+      resolveCanvasTextActivation({ clickCount: 2, textEditable: false }),
+    ).toBe("select");
+  });
+
+  it("gives Escape editing precedence and selects the edited object", () => {
+    expect(
+      resolveCanvasEscape(
+        { editingObjectId: "title", selectedObjectIds: ["other"] },
+        { escapeBehavior: "select-object" },
+      ),
+    ).toEqual({
+      action: "select-object",
+      editingObjectId: null,
+      selectedObjectIds: ["title"],
+    });
+    expect(
+      resolveCanvasEscape(
+        { editingObjectId: "title", selectedObjectIds: ["title"] },
+        { escapeBehavior: "cancel-edit" },
+      ),
+    ).toMatchObject({ action: "cancel-edit", selectedObjectIds: ["title"] });
+    expect(
+      resolveCanvasEscape(
+        { editingObjectId: "title", selectedObjectIds: ["title"] },
+        { escapeBehavior: "clear-selection" },
+      ),
+    ).toMatchObject({ action: "clear-selection", selectedObjectIds: [] });
+    expect(resolveCanvasEscape({ editingObjectId: null })).toMatchObject({
+      action: "none",
+    });
+  });
+
+  it("uses client-space drag thresholds and converts client coordinates at zoom", () => {
+    expect(
+      hasCrossedCanvasDragThreshold({ x: 0, y: 0 }, { x: 2, y: 2 }, 3),
+    ).toBe(false);
+    expect(
+      hasCrossedCanvasDragThreshold({ x: 0, y: 0 }, { x: 3, y: 0 }, 3),
+    ).toBe(true);
+
+    const viewport = { left: 100, top: 200, width: 960, height: 540 };
+    const canvas = { width: 1920, height: 1080 };
+    expect(
+      clientPointToCanvasPoint({ x: 580, y: 470 }, viewport, canvas),
+    ).toEqual({
+      x: 960,
+      y: 540,
+    });
+    expect(
+      clientDeltaToCanvasDelta({ x: 40, y: -20 }, viewport, canvas),
+    ).toEqual({
+      x: 80,
+      y: -40,
+    });
+  });
+
+  it("resizes all eight handles against their opposite edges", () => {
+    const start = { x: 100, y: 100, width: 200, height: 100 };
+    const cases = {
+      nw: {
+        delta: { x: -10, y: -20 },
+        rect: { x: 90, y: 80, width: 210, height: 120 },
+      },
+      n: {
+        delta: { x: 0, y: -20 },
+        rect: { x: 100, y: 80, width: 200, height: 120 },
+      },
+      ne: {
+        delta: { x: 10, y: -20 },
+        rect: { x: 100, y: 80, width: 210, height: 120 },
+      },
+      w: {
+        delta: { x: -10, y: 0 },
+        rect: { x: 90, y: 100, width: 210, height: 100 },
+      },
+      e: {
+        delta: { x: 10, y: 0 },
+        rect: { x: 100, y: 100, width: 210, height: 100 },
+      },
+      sw: {
+        delta: { x: -10, y: 20 },
+        rect: { x: 90, y: 100, width: 210, height: 120 },
+      },
+      s: {
+        delta: { x: 0, y: 20 },
+        rect: { x: 100, y: 100, width: 200, height: 120 },
+      },
+      se: {
+        delta: { x: 10, y: 20 },
+        rect: { x: 100, y: 100, width: 210, height: 120 },
+      },
+    } as const;
+
+    for (const [handle, expected] of Object.entries(cases)) {
+      expect(
+        resizeCanvasRect(start, {
+          handle: handle as keyof typeof cases,
+          delta: expected.delta,
+          minWidth: 1,
+          minHeight: 1,
+        }),
+      ).toEqual(expected.rect);
+    }
+  });
+
+  it("preserves aspect ratio for side and corner Shift resizing", () => {
+    const start = { x: 100, y: 100, width: 200, height: 100 };
+    expect(
+      resizeCanvasRect(start, {
+        handle: "se",
+        delta: { x: 60, y: 10 },
+        preserveAspectRatio: true,
+      }),
+    ).toMatchObject({ width: 260, height: 130 });
+    expect(
+      resizeCanvasRect(start, {
+        handle: "e",
+        delta: { x: 60, y: 10 },
+        preserveAspectRatio: true,
+      }),
+    ).toEqual({ x: 100, y: 85, width: 260, height: 130 });
+    expect(
+      resizeCanvasRect(start, {
+        handle: "n",
+        delta: { x: 10, y: -20 },
+        preserveAspectRatio: true,
+      }),
+    ).toEqual({ x: 80, y: 80, width: 240, height: 120 });
+    expect(constrainCanvasDragDelta({ x: 8, y: 3 }, true)).toEqual({
+      x: 8,
+      y: 0,
+    });
+    expect(constrainCanvasDragDelta({ x: 3, y: 8 }, true)).toEqual({
+      x: 0,
+      y: 8,
+    });
+  });
+
+  it("resizes symmetrically from the center while Alt is held", () => {
+    const start = { x: 100, y: 100, width: 200, height: 100 };
+
+    expect(
+      resizeCanvasRect(start, {
+        handle: "e",
+        delta: { x: 20, y: 0 },
+        altKey: true,
+      }),
+    ).toEqual({ x: 80, y: 100, width: 240, height: 100 });
+    expect(
+      resizeCanvasRect(start, {
+        handle: "nw",
+        delta: { x: -10, y: -20 },
+        altKey: true,
+      }),
+    ).toEqual({ x: 90, y: 80, width: 220, height: 140 });
+  });
+
+  it("combines Alt center resizing with Shift corner aspect locking", () => {
+    expect(
+      resizeCanvasRect(
+        { x: 100, y: 100, width: 200, height: 100 },
+        {
+          handle: "se",
+          delta: { x: 30, y: 5 },
+          altKey: true,
+          preserveAspectRatio: true,
+        },
+      ),
+    ).toEqual({ x: 70, y: 85, width: 260, height: 130 });
+  });
+
+  it("combines Alt center resizing with Shift aspect locking on sides", () => {
+    const start = { x: 100, y: 100, width: 200, height: 100 };
+
+    expect(
+      resizeCanvasRect(start, {
+        handle: "e",
+        delta: { x: 20, y: 0 },
+        altKey: true,
+        preserveAspectRatio: true,
+      }),
+    ).toEqual({ x: 80, y: 90, width: 240, height: 120 });
+  });
+
+  it("keeps aspect ratio and the opposite corner anchored at minimum size", () => {
+    expect(
+      resizeCanvasRect(
+        { x: 100, y: 100, width: 200, height: 100 },
+        {
+          handle: "nw",
+          delta: { x: 190, y: 90 },
+          preserveAspectRatio: true,
+          minWidth: 24,
+          minHeight: 24,
+        },
+      ),
+    ).toEqual({ x: 252, y: 176, width: 48, height: 24 });
+  });
+
+  it("uses Alt duplication and standard arrow plus Shift-arrow nudges", () => {
+    expect(shouldDuplicateCanvasDrag({ altKey: true })).toBe(true);
+    expect(shouldDuplicateCanvasDrag({ metaKey: true })).toBe(false);
+    expect(shouldDuplicateCanvasDrag({ metaKey: true }, "meta")).toBe(true);
+    expect(resolveCanvasNudge({ key: "ArrowRight" })).toEqual({
+      command: "nudge-right",
+      delta: { x: 1, y: 0 },
+    });
+    expect(resolveCanvasNudge({ key: "ArrowUp", shiftKey: true })).toEqual({
+      command: "nudge-up",
+      delta: { x: 0, y: -10 },
+    });
+    expect(resolveCanvasNudge({ key: "Enter" })).toBeNull();
+  });
+
+  it("resolves semantic shortcuts without caring whether primary is Cmd or Ctrl", () => {
+    expect(resolveCanvasShortcut({ key: "d", metaKey: true })).toBe(
+      "duplicate",
+    );
+    expect(resolveCanvasShortcut({ key: "d", ctrlKey: true })).toBe(
+      "duplicate",
+    );
+    expect(resolveCanvasShortcut({ key: "d", altKey: true })).toBeNull();
+    expect(resolveCanvasShortcut({ key: "Delete" })).toBe("delete");
+    expect(
+      resolveCanvasShortcut({
+        key: "}",
+        code: "BracketRight",
+        metaKey: true,
+        shiftKey: true,
+      }),
+    ).toBe("arrange-front");
+    expect(
+      resolveCanvasShortcut({
+        key: "{",
+        code: "BracketLeft",
+        ctrlKey: true,
+        shiftKey: true,
+      }),
+    ).toBe("arrange-back");
+    const registry = createCanvasShortcutRegistry([
+      { command: "align-left", key: "l", modifiers: ["primary"] },
+    ]);
+    expect(registry.resolve({ key: "l", ctrlKey: true })).toBe("align-left");
+    expect(registry.resolve({ key: "d", ctrlKey: true })).toBeNull();
+  });
+
+  it("binds policy once and dispatches semantic commands through an app adapter", () => {
+    const dispatch = vi.fn();
+    const core = createCanvasInteractionCore(
+      {
+        textEditing: {
+          activation: "single-click",
+          escapeBehavior: "select-object",
+        },
+        drag: { threshold: 5, duplicateModifier: "alt" },
+      },
+      {
+        capabilities: {
+          selection: true,
+          multiSelection: true,
+          move: true,
+          resize: true,
+          textEditing: true,
+          nudge: true,
+          duplicate: true,
+          clipboard: true,
+          delete: true,
+          arrange: true,
+          snapping: true,
+          alignment: true,
+          distribution: true,
+          grouping: true,
+          rotation: true,
+          marquee: true,
+        },
+        dispatch: (command) => {
+          dispatch(command);
+          return { handled: true };
+        },
+      },
+    );
+    expect(core.textActivation({ clickCount: 1, textEditable: true })).toBe(
+      "edit",
+    );
+    expect(core.hasCrossedDragThreshold({ x: 0, y: 0 }, { x: 4, y: 0 })).toBe(
+      false,
+    );
+    expect(core.shouldDuplicateDrag({ altKey: true })).toBe(true);
+    const result = core.dispatch({
+      id: "align-center",
+      objectIds: ["a", "b"],
+    });
+    expect(result).toEqual({ handled: true });
+    expect(dispatch).toHaveBeenCalledWith({
+      id: "align-center",
+      objectIds: ["a", "b"],
+    });
+    expect(core.capabilities.marquee).toBe(true);
+    expect(createCanvasInteractionCore().dispatch({ id: "delete" })).toEqual({
+      handled: false,
+      reason: "no-adapter",
+    });
+  });
+
+  it("does not report a disabled command as handled when an adapter receives it", () => {
+    const dispatch = vi.fn(() => ({ handled: true }) as const);
+    const core = createCanvasInteractionCore(
+      { capabilities: { delete: false } },
+      {
+        capabilities: DEFAULT_CAPABILITIES,
+        dispatch,
+      },
+    );
+
+    expect(core.dispatch({ id: "delete" })).toEqual({
+      handled: false,
+      reason: "unsupported",
+    });
+    expect(dispatch).not.toHaveBeenCalled();
+  });
+
+  it("does not expose direct text, duplicate, or nudge affordances disabled by an app", () => {
+    const core = createCanvasInteractionCore({
+      capabilities: {
+        textEditing: false,
+        duplicate: false,
+        nudge: false,
+      },
+      textEditing: { activation: "single-click" },
+      drag: { duplicateModifier: "alt" },
+    });
+
+    expect(core.textActivation({ clickCount: 1, textEditable: true })).toBe(
+      "select",
+    );
+    expect(core.shouldDuplicateDrag({ altKey: true })).toBe(false);
+    expect(core.nudge({ key: "ArrowRight" })).toBeNull();
+  });
+
+  it("commits one zoom-correct, Shift-locked Alt move after its threshold", () => {
+    const preview = vi.fn(() => ({ handled: true }) as const);
+    const commit = vi.fn(() => ({ handled: true }) as const);
+    const controller = createCanvasGestureController({
+      drag: { threshold: 3, duplicateModifier: "alt" },
+      adapter: { preview, commit },
+    });
+    const viewport = { left: 10, top: 20, width: 500, height: 250 };
+    const canvas = { width: 1000, height: 500 };
+
+    expect(
+      controller.pointerDown({
+        kind: "move",
+        objectIds: ["title"],
+        pointer: { x: 100, y: 100, altKey: true },
+        viewport,
+        canvas,
+      }),
+    ).toMatchObject({ accepted: true, state: { phase: "pending" } });
+    expect(controller.pointerMove({ x: 102, y: 101 })).toMatchObject({
+      phase: "pending",
+    });
+    expect(preview).not.toHaveBeenCalled();
+
+    expect(
+      controller.pointerMove({ x: 120, y: 106, altKey: true, shiftKey: true }),
+    ).toMatchObject({
+      phase: "active",
+      gesture: {
+        kind: "move",
+        canvasDelta: { x: 40, y: 0 },
+        duplicate: true,
+      },
+    });
+    const end = controller.pointerUp({
+      x: 140,
+      y: 112,
+      altKey: true,
+      shiftKey: true,
+    });
+    expect(end).toMatchObject({
+      committed: true,
+      gesture: {
+        kind: "move",
+        canvasDelta: { x: 80, y: 0 },
+        duplicate: true,
+      },
+      state: { phase: "idle" },
+    });
+    expect(preview).toHaveBeenCalledTimes(2);
+    expect(commit).toHaveBeenCalledTimes(1);
+    expect(commit).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        kind: "move",
+        canvasDelta: { x: 80, y: 0 },
+      }),
+    );
+  });
+
+  it("resizes all geometry through the controller and cancels without committing", () => {
+    const preview = vi.fn(() => ({ handled: true }) as const);
+    const commit = vi.fn(() => ({ handled: true }) as const);
+    const cancel = vi.fn(() => ({ handled: true }) as const);
+    const controller = createCanvasGestureController({
+      minSize: 24,
+      adapter: { preview, commit, cancel },
+    });
+    const start = {
+      kind: "resize" as const,
+      objectIds: ["title"],
+      pointer: { x: 100, y: 100 },
+      viewport: { left: 0, top: 0, width: 500, height: 250 },
+      canvas: { width: 1000, height: 500 },
+      handle: "nw" as const,
+      rect: { x: 100, y: 100, width: 200, height: 100 },
+    };
+    expect(controller.pointerDown(start)).toMatchObject({ accepted: true });
+    expect(
+      controller.pointerMove({ x: 190, y: 190, shiftKey: true }),
+    ).toMatchObject({
+      phase: "active",
+      gesture: {
+        kind: "resize",
+        rect: { x: 252, y: 176, width: 48, height: 24 },
+      },
+    });
+    const result = controller.cancel();
+    expect(result).toMatchObject({
+      cancelled: true,
+      gesture: {
+        kind: "resize",
+        startRect: start.rect,
+        rect: { x: 252, y: 176, width: 48, height: 24 },
+      },
+      state: { phase: "idle" },
+    });
+    expect(preview).toHaveBeenCalledTimes(1);
+    expect(cancel).toHaveBeenCalledTimes(1);
+    expect(commit).not.toHaveBeenCalled();
+  });
+
+  it("forwards Alt and Shift modifiers to centered aspect-ratio resize", () => {
+    const controller = createCanvasGestureController({
+      adapter: { commit: () => ({ handled: true }) },
+    });
+    controller.pointerDown({
+      kind: "resize",
+      objectIds: ["title"],
+      pointer: { x: 100, y: 100 },
+      viewport: { left: 0, top: 0, width: 500, height: 250 },
+      canvas: { width: 1000, height: 500 },
+      handle: "se",
+      rect: { x: 100, y: 100, width: 200, height: 100 },
+    });
+
+    expect(
+      controller.pointerMove({ x: 115, y: 105, altKey: true, shiftKey: true }),
+    ).toMatchObject({
+      phase: "active",
+      gesture: {
+        rect: { x: 70, y: 85, width: 260, height: 130 },
+      },
+    });
+  });
+
+  it("commits each of the eight resize handles through one common sequence", () => {
+    const expected = {
+      nw: { x: 60, y: 80, width: 240, height: 120 },
+      n: { x: 100, y: 80, width: 200, height: 120 },
+      ne: { x: 100, y: 80, width: 240, height: 120 },
+      w: { x: 60, y: 100, width: 240, height: 100 },
+      e: { x: 100, y: 100, width: 240, height: 100 },
+      sw: { x: 60, y: 100, width: 240, height: 120 },
+      s: { x: 100, y: 100, width: 200, height: 120 },
+      se: { x: 100, y: 100, width: 240, height: 120 },
+    } as const;
+    const clientMove = {
+      nw: { x: 80, y: 90 },
+      n: { x: 100, y: 90 },
+      ne: { x: 120, y: 90 },
+      w: { x: 80, y: 100 },
+      e: { x: 120, y: 100 },
+      sw: { x: 80, y: 110 },
+      s: { x: 100, y: 110 },
+      se: { x: 120, y: 110 },
+    } as const;
+
+    for (const handle of Object.keys(expected) as Array<
+      keyof typeof expected
+    >) {
+      const commit = vi.fn(() => ({ handled: true }) as const);
+      const controller = createCanvasGestureController({ adapter: { commit } });
+      controller.pointerDown({
+        kind: "resize",
+        objectIds: ["title"],
+        pointer: { x: 100, y: 100 },
+        viewport: { left: 0, top: 0, width: 500, height: 250 },
+        canvas: { width: 1000, height: 500 },
+        handle,
+        rect: { x: 100, y: 100, width: 200, height: 100 },
+      });
+      expect(controller.pointerUp(clientMove[handle])).toMatchObject({
+        committed: true,
+        gesture: { kind: "resize", rect: expected[handle] },
+      });
+      expect(commit).toHaveBeenCalledTimes(1);
+    }
+  });
+
+  it("does not start unsupported gestures or commit pointer clicks", () => {
+    const commit = vi.fn(() => ({ handled: true }) as const);
+    const controller = createCanvasGestureController({
+      capabilities: { move: false, resize: true },
+      adapter: { commit },
+    });
+    const viewport = { left: 0, top: 0, width: 100, height: 100 };
+    const canvas = { width: 100, height: 100 };
+    expect(
+      controller.pointerDown({
+        kind: "move",
+        objectIds: ["title"],
+        pointer: { x: 10, y: 10 },
+        viewport,
+        canvas,
+      }),
+    ).toMatchObject({ accepted: false, reason: "unsupported" });
+    expect(controller.pointerUp({ x: 10, y: 10 })).toMatchObject({
+      committed: false,
+      reason: "idle",
+    });
+
+    expect(
+      controller.pointerDown({
+        kind: "resize",
+        objectIds: ["title"],
+        pointer: { x: 10, y: 10 },
+        viewport,
+        canvas,
+        handle: "se",
+        rect: { x: 0, y: 0, width: 20, height: 20 },
+      }),
+    ).toMatchObject({ accepted: true });
+    expect(controller.pointerUp({ x: 11, y: 11 })).toMatchObject({
+      committed: false,
+      reason: "below-threshold",
+    });
+    expect(commit).not.toHaveBeenCalled();
+  });
+
+  it("keeps client-to-canvas conversion correct across zoom levels", () => {
+    const canvas = { width: 1920, height: 1080 };
+    const cases = [
+      {
+        viewport: { left: 0, top: 0, width: 1920, height: 1080 },
+        clientDelta: { x: 96, y: -54 },
+        canvasDelta: { x: 96, y: -54 },
+      },
+      {
+        viewport: { left: 30, top: 70, width: 960, height: 540 },
+        clientDelta: { x: 96, y: -54 },
+        canvasDelta: { x: 192, y: -108 },
+      },
+      {
+        viewport: { left: -20, top: 15, width: 480, height: 270 },
+        clientDelta: { x: 96, y: -54 },
+        canvasDelta: { x: 384, y: -216 },
+      },
+    ];
+
+    for (const testCase of cases) {
+      expect(
+        clientDeltaToCanvasDelta(
+          testCase.clientDelta,
+          testCase.viewport,
+          canvas,
+        ),
+      ).toEqual(testCase.canvasDelta);
+    }
+  });
+
+  it("makes one commit after many previews while modifiers remain live", () => {
+    const preview = vi.fn(() => ({ handled: true }) as const);
+    const commit = vi.fn(() => ({ handled: true }) as const);
+    const controller = createCanvasGestureController({
+      drag: { threshold: 3, duplicateModifier: "alt" },
+      adapter: { preview, commit },
+    });
+    const start = {
+      kind: "move" as const,
+      objectIds: ["object"],
+      pointer: { x: 0, y: 0, altKey: true },
+      viewport: { left: 0, top: 0, width: 100, height: 100 },
+      canvas: { width: 200, height: 200 },
+    };
+
+    controller.pointerDown(start);
+    controller.pointerMove({ x: 4, y: 1, altKey: true, shiftKey: true });
+    controller.pointerMove({ x: 8, y: 3, altKey: false, shiftKey: false });
+    const end = controller.pointerUp({ x: 12, y: 5, altKey: false });
+
+    expect(preview).toHaveBeenCalledTimes(3);
+    expect(preview).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({
+        canvasDelta: { x: 8, y: 0 },
+        duplicate: true,
+      }),
+    );
+    expect(preview).toHaveBeenNthCalledWith(
+      2,
+      expect.objectContaining({
+        canvasDelta: { x: 16, y: 6 },
+        duplicate: false,
+      }),
+    );
+    expect(end).toMatchObject({
+      committed: true,
+      gesture: { canvasDelta: { x: 24, y: 10 }, duplicate: false },
+    });
+    expect(commit).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not issue a duplicate final preview when pointer-up repeats the last move", () => {
+    const preview = vi.fn(() => ({ handled: true }) as const);
+    const commit = vi.fn(() => ({ handled: true }) as const);
+    const controller = createCanvasGestureController({
+      adapter: { preview, commit },
+    });
+    const start = {
+      kind: "move" as const,
+      objectIds: ["object"],
+      pointer: { x: 10, y: 10 },
+      viewport: { left: 0, top: 0, width: 100, height: 100 },
+      canvas: { width: 100, height: 100 },
+    };
+
+    controller.pointerDown(start);
+    controller.pointerMove({ x: 20, y: 10 });
+    controller.pointerUp({ x: 20, y: 10 });
+
+    expect(preview).toHaveBeenCalledTimes(1);
+    expect(commit).toHaveBeenCalledTimes(1);
+  });
+
+  it("duplicates only when the configured modifier was held at drag start and release", () => {
+    const commit = vi.fn(() => ({ handled: true }) as const);
+    const controller = createCanvasGestureController({
+      drag: { duplicateModifier: "alt" },
+      adapter: { commit },
+    });
+    const base = {
+      kind: "move" as const,
+      objectIds: ["object"],
+      viewport: { left: 0, top: 0, width: 100, height: 100 },
+      canvas: { width: 100, height: 100 },
+    };
+
+    controller.pointerDown({ ...base, pointer: { x: 0, y: 0 } });
+    expect(controller.pointerUp({ x: 10, y: 0, altKey: true })).toMatchObject({
+      gesture: { duplicate: false },
+    });
+
+    controller.pointerDown({ ...base, pointer: { x: 0, y: 0, altKey: true } });
+    controller.pointerMove({ x: 10, y: 0, altKey: true });
+    expect(controller.pointerUp({ x: 10, y: 0, altKey: false })).toMatchObject({
+      gesture: { duplicate: false },
+    });
+    expect(commit).toHaveBeenCalledTimes(2);
+  });
+
+  it("returns to a clean idle state after pending cancellation and sequential gestures", () => {
+    const preview = vi.fn(() => ({ handled: true }) as const);
+    const commit = vi.fn(() => ({ handled: true }) as const);
+    const cancel = vi.fn(() => ({ handled: true }) as const);
+    const controller = createCanvasGestureController({
+      adapter: { preview, commit, cancel },
+    });
+    const start = {
+      kind: "move" as const,
+      objectIds: ["first"],
+      pointer: { x: 0, y: 0 },
+      viewport: { left: 0, top: 0, width: 100, height: 100 },
+      canvas: { width: 100, height: 100 },
+    };
+
+    controller.pointerDown(start);
+    expect(controller.cancel()).toMatchObject({
+      cancelled: false,
+      reason: "idle",
+    });
+    expect(cancel).not.toHaveBeenCalled();
+    expect(controller.getState()).toEqual({ phase: "idle", gesture: null });
+
+    controller.pointerDown({ ...start, objectIds: ["second"] });
+    controller.pointerMove({ x: 10, y: 0 });
+    expect(controller.cancel()).toMatchObject({ cancelled: true });
+    expect(cancel).toHaveBeenCalledTimes(1);
+    expect(controller.getState()).toEqual({ phase: "idle", gesture: null });
+
+    controller.pointerDown({ ...start, objectIds: ["third"] });
+    const end = controller.pointerUp({ x: 10, y: 0 });
+    expect(end).toMatchObject({
+      committed: true,
+      gesture: { objectIds: ["third"] },
+    });
+    expect(commit).toHaveBeenCalledTimes(1);
+  });
+});
+
+const DEFAULT_CAPABILITIES = {
+  selection: true,
+  multiSelection: true,
+  move: true,
+  resize: true,
+  textEditing: true,
+  nudge: true,
+  duplicate: true,
+  clipboard: true,
+  delete: true,
+  arrange: true,
+  snapping: true,
+  alignment: true,
+  distribution: true,
+  grouping: true,
+  rotation: true,
+  marquee: true,
+} as const;