@agent-native/core 0.131.5 → 0.131.7

package/corpus/templates/design/app/components/design/bridge/editor-chrome.bridge.ts

@@ -18,13 +18,17 @@
  *   __RUNTIME_LAYER_SNAPSHOT_ENABLED__ — true only for URL-backed localhost apps
  *
  * Rules:
- *   • No import/require of any module (DOM globals only).
+ *   • The shared, build-time-inlined canvas interaction controller is the one
+ *     permitted import. No runtime module lookup survives code generation.
+ *   • No require of any module (DOM globals only at iframe runtime).
  *   • No references to outer/module scope (the code runs inside an iframe).
  *   • Wrap everything in a self-executing IIFE.
  *
  * keep in sync with hit-test.bridge.ts for the shared container/axis/placement
  * helpers (search for "// keep in sync" comments).
  */
+import { createCanvasGestureController } from "@agent-native/toolkit/canvas-interactions";
+
 declare var __READ_ONLY__: boolean;
 declare var __TEXT_EDITING_ENABLED__: boolean;
 declare var __EDITOR_CHROME_SCALE_X__: string;
@@ -4908,6 +4912,34 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
       : { move: "mousemove", up: "mouseup" };
   }
 
+  // The bridge is bundled into an iframe IIFE. Its canvas is expressed in the
+  // iframe's CSS pixels, so client and canvas coordinates intentionally share
+  // the same viewport. Keeping this conversion at the adapter boundary lets
+  // the common controller own gesture lifecycle/threshold/Shift semantics
+  // without teaching it Design's source patches, auto layout, or transforms.
+  function bridgeGestureViewport() {
+    var width = Math.max(
+      1,
+      window.innerWidth || document.documentElement.clientWidth || 1,
+    );
+    var height = Math.max(
+      1,
+      window.innerHeight || document.documentElement.clientHeight || 1,
+    );
+    return { left: 0, top: 0, width: width, height: height };
+  }
+
+  function bridgeGesturePointer(e) {
+    return {
+      x: e.clientX,
+      y: e.clientY,
+      altKey: !!e.altKey,
+      ctrlKey: !!e.ctrlKey,
+      metaKey: !!e.metaKey,
+      shiftKey: !!e.shiftKey,
+    };
+  }
+
   function elementFromEditorPoint(
     clientX: number,
     clientY: number,
@@ -9815,8 +9847,49 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
     // clear-selection postMessage cannot swap selectedEl mid-drag and cause
     // mutations on the wrong element or a null-deref in onUp.
     var dragEl = gestureEl;
-    var moved = false;
+    var gestureViewport = bridgeGestureViewport();
+    // Design owns the advanced preview math below: snapping/guides, nested
+    // auto-layout conversion, and cross-screen state all have source-aware
+    // invariants. The shared controller owns only the browser gesture state
+    // machine and emits the normalized pointer lifecycle that gates it.
+    // Use the same threshold for the controller and the legacy moved flag so
+    // a selected-box click remains a click instead of starting a persistence
+    // gesture with a zero delta.
     var DRAG_THRESHOLD = 3;
+    var bridgeMoveController = createCanvasGestureController({
+      capabilities: { move: true, resize: true },
+      drag: {
+        // Shield drags already crossed the outer threshold before reaching
+        // startMove. Keeping their controller threshold at zero preserves the
+        // first post-shield delta, while direct selection-chrome drags still
+        // need a real threshold before they preview or persist.
+        threshold: pointerStartParam ? 0 : DRAG_THRESHOLD,
+        duplicateModifier: "alt",
+      },
+      adapter: {
+        preview: function () {
+          return { handled: true };
+        },
+        commit: function () {
+          return { handled: true };
+        },
+        cancel: function () {
+          return { handled: true };
+        },
+      },
+    });
+    bridgeMoveController.pointerDown({
+      kind: "move",
+      objectIds: [getSelector(gestureEl)],
+      // `e` is deliberately the event that actually began the legacy move
+      // lifecycle. `pointerStartParam` is only Design's outer shield
+      // disambiguation origin; using it here would apply that first
+      // threshold-crossing delta twice.
+      pointer: bridgeGesturePointer(e),
+      viewport: gestureViewport,
+      canvas: { width: gestureViewport.width, height: gestureViewport.height },
+    });
+    var moved = false;
     dndLog("start:free", { el: getSelector(gestureEl), isGroup: isGroupDrag });
     var currentAutoLayoutTarget: {
       anchor: Element;
@@ -9866,26 +9939,21 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
       window.requestAnimationFrame(flushCrossScreenDragMove);
     }
     function onMove(ev) {
+      var controllerMove = bridgeMoveController.pointerMove(
+        bridgeGesturePointer(ev),
+      );
+      if (controllerMove.phase !== "active") return;
       if (
         !moved &&
         Math.hypot(ev.clientX - startX, ev.clientY - startY) > DRAG_THRESHOLD
       ) {
         moved = true;
       }
-      var rawDx = ev.clientX - startX;
-      var rawDy = ev.clientY - startY;
-      // Figma dominant-axis lock: while Shift is held, zero out whichever
-      // delta has the smaller magnitude so the element only moves along one
-      // axis. Read live off the move event (not cached at drag start) so
-      // pressing/releasing Shift mid-drag re-evaluates every event, matching
-      // how the resize path reads ev.shiftKey per-move rather than once.
-      if (ev.shiftKey) {
-        if (Math.abs(rawDx) > Math.abs(rawDy)) {
-          rawDy = 0;
-        } else {
-          rawDx = 0;
-        }
-      }
+      // The controller converts client deltas at the iframe boundary and
+      // applies the live Shift dominant-axis constraint. Design-specific snap
+      // and auto-layout handling decorates this normalized delta below.
+      var rawDx = controllerMove.gesture.canvasDelta.x;
+      var rawDy = controllerMove.gesture.canvasDelta.y;
       var nextLeft = originLeft + rawDx;
       var nextTop = originTop + rawDy;
       // Alignment/smart-guide snapping: disabled while Cmd/Ctrl is held
@@ -9993,6 +10061,7 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
       crossScreenDragMovePendingEv = null;
     }
     function cancelMoveDrag() {
+      bridgeMoveController.cancel();
       cleanupMoveDrag();
       hideTransformBadge();
       hideInsertionGuide();
@@ -10019,6 +10088,16 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
       cancelMoveDrag();
     }
     function onUp(ev) {
+      var controllerEnd = bridgeMoveController.pointerUp(
+        bridgeGesturePointer(ev),
+      );
+      if (!controllerEnd.committed) {
+        cleanupMoveDrag();
+        hideTransformBadge();
+        hideInsertionGuide();
+        hideSnapGuides();
+        return;
+      }
       cleanupMoveDrag();
       hideTransformBadge();
       hideInsertionGuide();
@@ -10224,6 +10303,45 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
     // Capture the element rotation once at drag-start so per-move projection is
     // cheap and consistent even if the transform changes during the drag.
     var resizeTheta = (currentRotation(resizeEl) * Math.PI) / 180;
+    var resizeGestureViewport = bridgeGestureViewport();
+    // Keep generic resize lifecycle in Toolkit while Design continues to own
+    // rotated/Alt-centered/Scale-tool geometry. The generic rect emitted by
+    // the controller is intentionally advisory here; applying it directly
+    // would discard Design's rotation-projected resize invariants.
+    var RESIZE_DRAG_THRESHOLD = 3;
+    var bridgeResizeController = createCanvasGestureController({
+      capabilities: { move: true, resize: true },
+      drag: { threshold: RESIZE_DRAG_THRESHOLD, duplicateModifier: "alt" },
+      minSize: 8,
+      adapter: {
+        preview: function () {
+          return { handled: true };
+        },
+        commit: function () {
+          return { handled: true };
+        },
+        cancel: function () {
+          return { handled: true };
+        },
+      },
+    });
+    bridgeResizeController.pointerDown({
+      kind: "resize",
+      objectIds: [getSelector(resizeEl)],
+      pointer: bridgeGesturePointer(e),
+      viewport: resizeGestureViewport,
+      canvas: {
+        width: resizeGestureViewport.width,
+        height: resizeGestureViewport.height,
+      },
+      handle: handle,
+      rect: {
+        x: origin.left,
+        y: origin.top,
+        width: origin.width,
+        height: origin.height,
+      },
+    });
     // Figma commit-semantics parity: a resize must only ever write the
     // axis/axes the user actually dragged. A pure vertical edge-drag (handle
     // "n"/"s", no Shift, scale tool off) must leave width completely alone —
@@ -10336,6 +10454,10 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
       };
     }
     function onMove(ev) {
+      var controllerMove = bridgeResizeController.pointerMove(
+        bridgeGesturePointer(ev),
+      );
+      if (controllerMove.phase !== "active") return;
       if (!resizeEl) return;
       var rect = nextRect(ev);
       if (rect.touchesWidth) widthTouched = true;
@@ -10382,6 +10504,7 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
       clearActiveDragCancel(cancelResizeDrag);
     }
     function cancelResizeDrag() {
+      bridgeResizeController.cancel();
       cleanupResizeDrag();
       hideTransformBadge();
       if (resizeEl && document.documentElement.contains(resizeEl)) {
@@ -10404,7 +10527,15 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
       stopNativeInteraction(ev);
       cancelResizeDrag();
     }
-    function onUp() {
+    function onUp(ev) {
+      var controllerEnd = bridgeResizeController.pointerUp(
+        bridgeGesturePointer(ev),
+      );
+      if (!controllerEnd.committed) {
+        cleanupResizeDrag();
+        hideTransformBadge();
+        return;
+      }
       cleanupResizeDrag();
       hideTransformBadge();
       if (!resizeEl) return;

package/corpus/templates/design/app/components/design/canvas-interactions/design-canvas-interactions.ts

@@ -0,0 +1,357 @@
+import {
+  resolveCanvasNudge,
+  resolveCanvasShortcut,
+} from "@agent-native/toolkit/canvas-interactions";
+import type {
+  CanvasCommand,
+  CanvasCommandDispatchResult,
+  CanvasCommandId,
+  CanvasInteractionAdapter,
+  CanvasInteractionCapabilities,
+  CanvasShortcut,
+  CanvasShortcutInput,
+  CanvasTextEditPolicy,
+} from "@agent-native/toolkit/canvas-interactions";
+
+import type { UseDesignHotkeysProps } from "@/hooks/useDesignHotkeys";
+
+export type DesignCanvasInteractionHandlers = Pick<
+  UseDesignHotkeysProps,
+  | "onSelectAll"
+  | "onUndo"
+  | "onRedo"
+  | "onCopy"
+  | "onCut"
+  | "onPaste"
+  | "onDuplicate"
+  | "onDelete"
+  | "onNudge"
+  | "onBringForward"
+  | "onBringToFront"
+  | "onSendBackward"
+  | "onSendToBack"
+  | "onAlignSelection"
+  | "onDistributeSelection"
+  | "onGroup"
+  | "onUngroup"
+  | "onFrameSelection"
+  | "onEscape"
+  | "onEnter"
+>;
+
+export interface CreateDesignCanvasInteractionAdapterOptions {
+  shortcuts: DesignCanvasInteractionHandlers;
+  /**
+   * The shared command contract intentionally does not carry DOM events.
+   * Design provides the original event at this seam when it dispatches from
+   * its existing hotkey loop, preserving source/editor behavior.
+   */
+  getHotkeyDetails?: (command: CanvasCommand) => DesignHotkeyDetails | null;
+}
+
+type DesignHotkeyDetails = Parameters<
+  NonNullable<UseDesignHotkeysProps["onUndo"]>
+>[0];
+
+export interface DesignCanvasInteractionAdapter extends CanvasInteractionAdapter {
+  readonly id: "design";
+  readonly textEditing: Required<CanvasTextEditPolicy>;
+  dispatchShortcut(
+    command: CanvasCommandId,
+    event: KeyboardEvent,
+  ): CanvasCommandDispatchResult;
+  dispatchKeyboardEvent(event: KeyboardEvent): CanvasCommandDispatchResult;
+}
+
+export const DESIGN_CANVAS_INTERACTION_CAPABILITIES = {
+  selection: true,
+  multiSelection: true,
+  marquee: true,
+  move: true,
+  resize: true,
+  rotation: true,
+  snapping: true,
+  alignment: true,
+  distribution: true,
+  duplicate: true,
+  clipboard: true,
+  delete: true,
+  nudge: true,
+  arrange: true,
+  grouping: true,
+  textEditing: true,
+} satisfies CanvasInteractionCapabilities;
+
+/**
+ * Design's equivalent subset of the shared canvas command registry. The
+ * broader Figma shortcut catalogue remains in `useDesignHotkeys`: it has
+ * Design-only commands and platform rules which should not be projected onto
+ * other canvases. These entries are intentionally semantic rather than tied
+ * to the iframe/source persistence implementation.
+ */
+export const DESIGN_CANVAS_SHORTCUTS: readonly CanvasShortcut[] = [
+  { command: "select-all", key: "a", modifiers: ["primary"] },
+  { command: "undo", key: "z", modifiers: ["primary"] },
+  { command: "redo", key: "z", modifiers: ["primary", "shift"] },
+  { command: "copy", key: "c", modifiers: ["primary"] },
+  { command: "cut", key: "x", modifiers: ["primary"] },
+  { command: "paste", key: "v", modifiers: ["primary"] },
+  { command: "duplicate", key: "d", modifiers: ["primary"] },
+  { command: "delete", key: "Backspace" },
+  { command: "delete", key: "Delete" },
+  {
+    command: "bring-forward",
+    key: "]",
+    code: "BracketRight",
+    modifiers: ["primary"],
+  },
+  {
+    command: "send-backward",
+    key: "[",
+    code: "BracketLeft",
+    modifiers: ["primary"],
+  },
+  { command: "bring-to-front", key: "]" },
+  { command: "send-to-back", key: "[" },
+  {
+    command: "bring-to-front",
+    key: "]",
+    code: "BracketRight",
+    modifiers: ["primary", "alt"],
+  },
+  {
+    command: "send-to-back",
+    key: "[",
+    code: "BracketLeft",
+    modifiers: ["primary", "alt"],
+  },
+];
+
+/** Shared semantic lookup used by Design's live hotkey shell. */
+export function resolveDesignCanvasShortcut(
+  input: CanvasShortcutInput,
+): CanvasCommandId | null {
+  return resolveCanvasShortcut(input, DESIGN_CANVAS_SHORTCUTS);
+}
+
+function canvasCommandForDesignKeyboardEvent(
+  event: KeyboardEvent,
+): CanvasCommandId | null {
+  const shortcut = resolveDesignCanvasShortcut({
+    key: event.key,
+    code: event.code,
+    metaKey: event.metaKey,
+    ctrlKey: event.ctrlKey,
+    shiftKey: event.shiftKey,
+    altKey: event.altKey,
+  });
+  if (shortcut) return shortcut;
+  if (event.metaKey || event.ctrlKey || event.altKey) return null;
+  return (
+    resolveCanvasNudge({ key: event.key, shiftKey: event.shiftKey })?.command ??
+    null
+  );
+}
+
+function dispatchDesignShortcut(
+  command: CanvasCommand,
+  details: DesignHotkeyDetails | null,
+  handlers: DesignCanvasInteractionHandlers,
+): CanvasCommandDispatchResult {
+  if (!details) return { handled: false, reason: "unhandled" };
+
+  switch (command.id) {
+    case "undo":
+      return runShortcutHandler(handlers.onUndo, details);
+    case "redo":
+      return runShortcutHandler(handlers.onRedo, details);
+    case "copy":
+      return runShortcutHandler(handlers.onCopy, details);
+    case "cut":
+      return runShortcutHandler(handlers.onCut, details);
+    case "paste":
+      return runShortcutHandler(handlers.onPaste, details);
+    case "duplicate":
+      return runShortcutHandler(handlers.onDuplicate, details);
+    case "delete":
+      return runShortcutHandler(handlers.onDelete, details);
+    case "bring-forward":
+      return runShortcutHandler(handlers.onBringForward, details);
+    case "bring-to-front":
+      return runShortcutHandler(handlers.onBringToFront, details);
+    case "send-backward":
+      return runShortcutHandler(handlers.onSendBackward, details);
+    case "send-to-back":
+      return runShortcutHandler(handlers.onSendToBack, details);
+    case "group":
+      return runShortcutHandler(handlers.onGroup, details);
+    case "ungroup":
+      return runShortcutHandler(handlers.onUngroup, details);
+    case "frame-selection":
+      return runShortcutHandler(handlers.onFrameSelection, details);
+    case "escape":
+      return runShortcutHandler(handlers.onEscape, details);
+    case "enter":
+      return runShortcutHandler(handlers.onEnter, details);
+    case "nudge-left":
+      return runNudgeHandler(handlers.onNudge, details, "left", command);
+    case "nudge-right":
+      return runNudgeHandler(handlers.onNudge, details, "right", command);
+    case "nudge-up":
+      return runNudgeHandler(handlers.onNudge, details, "up", command);
+    case "nudge-down":
+      return runNudgeHandler(handlers.onNudge, details, "down", command);
+    case "align-left":
+      return runAlignHandler(handlers.onAlignSelection, details, "left");
+    case "align-center":
+      return runAlignHandler(handlers.onAlignSelection, details, "center-h");
+    case "align-right":
+      return runAlignHandler(handlers.onAlignSelection, details, "right");
+    case "align-top":
+      return runAlignHandler(handlers.onAlignSelection, details, "top");
+    case "align-middle":
+      return runAlignHandler(handlers.onAlignSelection, details, "center-v");
+    case "align-bottom":
+      return runAlignHandler(handlers.onAlignSelection, details, "bottom");
+    case "distribute-horizontal":
+      return runDistributeHandler(
+        handlers.onDistributeSelection,
+        details,
+        "horizontal",
+      );
+    case "distribute-vertical":
+      return runDistributeHandler(
+        handlers.onDistributeSelection,
+        details,
+        "vertical",
+      );
+    case "arrange-front":
+      return runShortcutHandler(handlers.onBringToFront, details);
+    case "arrange-back":
+      return runShortcutHandler(handlers.onSendToBack, details);
+    case "select-all":
+      return runShortcutHandler(handlers.onSelectAll, details);
+    case "nudge":
+      return { handled: false, reason: "unhandled" };
+  }
+  return { handled: false, reason: "unhandled" };
+}
+
+function runShortcutHandler(
+  handler:
+    | ((details: {
+        event: KeyboardEvent;
+        key: string;
+        primary: boolean;
+        shift: boolean;
+        alt: boolean;
+        repeat: boolean;
+      }) => void)
+    | undefined,
+  details: {
+    event: KeyboardEvent;
+    key: string;
+    primary: boolean;
+    shift: boolean;
+    alt: boolean;
+    repeat: boolean;
+  },
+): CanvasCommandDispatchResult {
+  if (!handler) return { handled: false, reason: "unhandled" };
+  handler(details);
+  return { handled: true };
+}
+
+function runNudgeHandler(
+  handler: UseDesignHotkeysProps["onNudge"],
+  details: DesignHotkeyDetails,
+  direction: "left" | "right" | "up" | "down",
+  command: CanvasCommand,
+): CanvasCommandDispatchResult {
+  if (!handler) return { handled: false, reason: "unhandled" };
+  const amount = Math.max(
+    Math.abs(command.delta?.x ?? 0),
+    Math.abs(command.delta?.y ?? 0),
+  );
+  handler({ ...details, direction, largeStep: amount >= 10 || details.shift });
+  return { handled: true };
+}
+
+function runAlignHandler(
+  handler: UseDesignHotkeysProps["onAlignSelection"],
+  details: DesignHotkeyDetails,
+  edge: "left" | "center-h" | "right" | "top" | "center-v" | "bottom",
+): CanvasCommandDispatchResult {
+  if (!handler) return { handled: false, reason: "unhandled" };
+  handler({ ...details, edge });
+  return { handled: true };
+}
+
+function runDistributeHandler(
+  handler: UseDesignHotkeysProps["onDistributeSelection"],
+  details: DesignHotkeyDetails,
+  axis: "horizontal" | "vertical",
+): CanvasCommandDispatchResult {
+  if (!handler) return { handled: false, reason: "unhandled" };
+  handler({ ...details, axis });
+  return { handled: true };
+}
+
+/**
+ * The Design adapter is deliberately small. `DesignEditor` remains the owner
+ * of selection canonicalization and source writes; a future Toolkit canvas
+ * controller can call this object without importing the iframe bridge.
+ *
+ * Wiring points:
+ * - DesignCanvas onElementSelect / onElementDblClickText -> selection
+ * - DesignCanvas visual/text callbacks -> persistence
+ * - useDesignHotkeys handlers -> shortcuts
+ */
+export function createDesignCanvasInteractionAdapter(
+  options: CreateDesignCanvasInteractionAdapterOptions,
+): DesignCanvasInteractionAdapter {
+  return {
+    id: "design",
+    capabilities: DESIGN_CANVAS_INTERACTION_CAPABILITIES,
+    textEditing: {
+      activation: "double-click",
+      escapeBehavior: "select-object",
+    },
+    dispatch: (command) =>
+      dispatchDesignShortcut(
+        command,
+        options.getHotkeyDetails?.(command) ?? null,
+        options.shortcuts,
+      ),
+    dispatchShortcut: (command, event) =>
+      dispatchDesignShortcut(
+        { id: command },
+        {
+          event,
+          key: event.key,
+          primary: event.metaKey || event.ctrlKey,
+          shift: event.shiftKey,
+          alt: event.altKey,
+          repeat: event.repeat,
+        },
+        options.shortcuts,
+      ),
+    dispatchKeyboardEvent: (event) => {
+      const command = canvasCommandForDesignKeyboardEvent(event);
+      return command
+        ? dispatchDesignShortcut(
+            { id: command },
+            {
+              event,
+              key: event.key,
+              primary: event.metaKey || event.ctrlKey,
+              shift: event.shiftKey,
+              alt: event.altKey,
+              repeat: event.repeat,
+            },
+            options.shortcuts,
+          )
+        : { handled: false, reason: "unhandled" };
+    },
+  };
+}