@agent-native/core 0.163.3 → 0.164.1

package/corpus/templates/design/app/pages/design-editor/commands/group-selection.ts

@@ -0,0 +1,127 @@
+import type { CodeLayerNode, CodeLayerTreeNode } from "@shared/code-layer";
+import { applyVisualEdit, buildCodeLayerProjection } from "@shared/code-layer";
+import type { Dispatch, RefObject, SetStateAction } from "react";
+import { toast } from "sonner";
+
+import { trace } from "@/components/design/design-trace";
+import type { ElementInfo } from "@/components/design/types";
+import type { ClipboardContentMutationPublication } from "@/lib/clipboard-content-lineage";
+import {
+  codeLayerPatchMessage,
+  elementInfoFromCodeLayerNode,
+} from "@/pages/design-editor/code-layer-state";
+import { buildActiveFileNodeIdSet } from "@/pages/design-editor/selection-state";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface GroupSelectionArgs {
+  activeFile: DesignFile;
+  applyLocalContentUpdate: (
+    nextContent: string,
+    options?: {
+      refreshPreview?: boolean;
+      skipPreview?: boolean;
+      forcePreviewFullDocument?: boolean;
+      immediateSave?: boolean;
+      persist?: boolean;
+      recordHistory?: boolean;
+      historyBeforeContent?: string;
+      updatedAt?: string;
+      clipboardMutation?: ClipboardContentMutationPublication;
+    },
+  ) => void;
+  canEditDesign: boolean;
+  codeLayerOwnerByNodeIdRef: RefObject<
+    Map<
+      string,
+      {
+        fileId: string;
+        node: CodeLayerNode;
+        tree: CodeLayerTreeNode[];
+        runtimeOnly: boolean;
+      }
+    >
+  >;
+  files: DesignFile[];
+  getFreshActiveContent: () => string;
+  selectedLayerIdsState: string[];
+  sendRuntimeLayerSemanticHandoff: (
+    operation: "group" | "ungroup" | "auto-layout",
+    layerIds: readonly string[],
+    options?: {
+      desiredChange?: string;
+      description?: string;
+      commandContext?: string;
+    },
+  ) => boolean;
+  setSelectedElement: Dispatch<SetStateAction<ElementInfo | null>>;
+  setSelectedLayerIdsState: Dispatch<SetStateAction<string[]>>;
+  t: (key: string, options?: Record<string, unknown>) => string;
+}
+
+export function runGroupSelection({
+  activeFile,
+  applyLocalContentUpdate,
+  canEditDesign,
+  codeLayerOwnerByNodeIdRef,
+  files,
+  getFreshActiveContent,
+  selectedLayerIdsState,
+  sendRuntimeLayerSemanticHandoff,
+  setSelectedElement,
+  setSelectedLayerIdsState,
+  t,
+}: GroupSelectionArgs) {
+  trace("structure", "group", { layers: selectedLayerIdsState.length });
+  if (!canEditDesign || !activeFile) return;
+  const selectedRuntimeLayerIds = selectedLayerIdsState.filter(
+    (layerId) => codeLayerOwnerByNodeIdRef.current.get(layerId)?.runtimeOnly,
+  );
+  if (selectedRuntimeLayerIds.length > 0) {
+    sendRuntimeLayerSemanticHandoff("group", selectedRuntimeLayerIds);
+    return;
+  }
+  const baseContent = getFreshActiveContent();
+  // Collect the DOM-node layer ids that belong to the active screen.
+  // Build a set of ids present in the active content so stale ids from
+  // other files (which can persist in selectedLayerIdsState after a
+  // cross-screen layers-panel selection) are excluded before wrapNodes
+  // runs against activeContent. Without this filter, cross-file ids
+  // cause wrapNodes to return "conflict" even for a valid same-file
+  // selection.
+  const fileIds = new Set(files.map((f) => f.id));
+  const activeNodeIdSet = buildActiveFileNodeIdSet(
+    buildCodeLayerProjection(baseContent),
+  );
+  const nodeIds = selectedLayerIdsState.filter(
+    (id) => !id.startsWith("__") && !fileIds.has(id) && activeNodeIdSet.has(id),
+  );
+  if (nodeIds.length < 2) return;
+  const patch = applyVisualEdit(baseContent, {
+    kind: "wrapNodes",
+    targetIds: nodeIds,
+    autoLayout: false,
+  });
+  if (patch.result.status !== "applied") {
+    toast.error(
+      codeLayerPatchMessage(
+        patch.result.message,
+        t("designEditor.toasts.layerMoveFailed"),
+      ),
+      { duration: 4000 },
+    );
+    return;
+  }
+  applyLocalContentUpdate(patch.content, { skipPreview: true });
+  // Select the new wrapper node if the substrate reported its id.
+  const wrapperId = patch.result.wrapperNodeId;
+  if (wrapperId) {
+    // Find the projection node whose data-agent-native-node-id matches.
+    const wrapperNode = patch.projection.nodes.find(
+      (n) => n.dataAttributes["data-agent-native-node-id"] === wrapperId,
+    );
+    if (wrapperNode) {
+      setSelectedLayerIdsState([wrapperNode.id]);
+      setSelectedElement(elementInfoFromCodeLayerNode(wrapperNode));
+    }
+  }
+}

package/corpus/templates/design/app/pages/design-editor/commands/iframe-context-menu.ts

@@ -0,0 +1,121 @@
+import type { Dispatch, RefObject, SetStateAction } from "react";
+import { flushSync } from "react-dom";
+
+import type { CanvasContextMenuHandle } from "@/components/design/CanvasContextMenu";
+import type { IframeContextMenuPayload } from "@/components/design/design-canvas/iframe-events";
+import { findCanvasIframeForScreen } from "@/components/design/multi-screen/iframe-targeting";
+import type {
+  CanvasLayerHitCandidate,
+  ElementInfo,
+  ElementSelectionIntent,
+} from "@/components/design/types";
+import {
+  computeIframeLocalCanvasPoint,
+  readOverviewZoomPercentFromTransform,
+} from "@/pages/design-editor/overview-camera";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface IframeContextMenuArgs {
+  activeFile: DesignFile;
+  activeFileId: string | null;
+  boardFileId: string | undefined;
+  canvasContainerRef: RefObject<HTMLDivElement | null>;
+  canvasContextMenuRef: RefObject<CanvasContextMenuHandle | null>;
+  focusDesignInspectorForSelection: () => void;
+  handleScreenElementSelect: (
+    screenId: string,
+    info: ElementInfo,
+    intent?: ElementSelectionIntent,
+    options?: { persistPendingNodeId?: boolean; breakpointWidthPx?: number },
+  ) => void;
+  overviewCanvasZoom: number;
+  setCanvasLayerHitCandidates: Dispatch<
+    SetStateAction<CanvasLayerHitCandidate[]>
+  >;
+  viewMode: "single" | "overview";
+  zoom: number;
+}
+
+export function runIframeContextMenu(
+  {
+    activeFile,
+    activeFileId,
+    boardFileId,
+    canvasContainerRef,
+    canvasContextMenuRef,
+    focusDesignInspectorForSelection,
+    handleScreenElementSelect,
+    overviewCanvasZoom,
+    setCanvasLayerHitCandidates,
+    viewMode,
+    zoom,
+  }: IframeContextMenuArgs,
+  payload: IframeContextMenuPayload,
+) {
+  const container = canvasContainerRef.current;
+  const menu = canvasContextMenuRef.current;
+  if (!container || !menu) return;
+  const contextScreenId =
+    payload.screenId ?? activeFile?.id ?? activeFileId ?? null;
+  flushSync(() => {
+    setCanvasLayerHitCandidates(payload.layerCandidates ?? []);
+  });
+  if (payload.info && contextScreenId) {
+    flushSync(() => {
+      handleScreenElementSelect(contextScreenId, payload.info!, undefined, {
+        persistPendingNodeId: false,
+      });
+    });
+    focusDesignInspectorForSelection();
+  }
+  const clientX =
+    typeof payload.viewportClientX === "number"
+      ? payload.viewportClientX
+      : payload.clientX;
+  const clientY =
+    typeof payload.viewportClientY === "number"
+      ? payload.viewportClientY
+      : payload.clientY;
+  // PASTE-HERE-IN-CONTENT: this imperative openAt() call bypasses
+  // CanvasContextMenu's own onContextMenuCapture handler entirely — the
+  // ONLY place that normally calls getCanvasPoint to attach canvasX/
+  // canvasY to the menu's point. Without computing it here too, a
+  // right-click that lands ON rendered screen content (an element, or
+  // empty in-screen space — as opposed to the shared canvas background,
+  // which still goes through onContextMenuCapture) never got a
+  // canvasX/canvasY at all, so "Paste here" from it silently degraded to
+  // the position-less cascade/offset paste instead of landing under the
+  // cursor. Overview screens each carry their own screenId through the
+  // context-menu bridge, including non-active screens, so target that
+  // exact iframe rather than the currently-active screen. Otherwise
+  // Paste here would translate the pointer through the wrong frame just
+  // before Select layer activates the right-clicked screen.
+  const iframeForPoint =
+    viewMode === "single"
+      ? container.querySelector<HTMLElement>("[data-design-preview-iframe]")
+      : findCanvasIframeForScreen(
+          container,
+          contextScreenId ?? "",
+          boardFileId ?? undefined,
+        );
+  const liveOverviewZoom =
+    viewMode === "overview"
+      ? readOverviewZoomPercentFromTransform(
+          container.querySelector<HTMLElement>(
+            "[data-multi-screen-canvas-world]",
+          )?.style.transform,
+          overviewCanvasZoom,
+        )
+      : overviewCanvasZoom;
+  const canvasPoint = computeIframeLocalCanvasPoint({
+    clientX,
+    clientY,
+    iframeRect: iframeForPoint?.getBoundingClientRect() ?? null,
+    zoomPercent: viewMode === "single" ? zoom : liveOverviewZoom,
+  });
+  menu.openAt({
+    clientX,
+    clientY,
+    ...(canvasPoint ? { canvasX: canvasPoint.x, canvasY: canvasPoint.y } : {}),
+  });
+}

package/corpus/templates/design/app/pages/design-editor/commands/import-figma-clipboard-into-design.ts

@@ -0,0 +1,119 @@
+import { callAction } from "@agent-native/core/client/hooks";
+import type { QueryClient } from "@tanstack/react-query";
+import type { Dispatch, RefObject, SetStateAction } from "react";
+import type { NavigateFunction } from "react-router";
+import { toast } from "sonner";
+
+import type { ImportResult } from "@/lib/design-import";
+import { importResultSummary } from "@/lib/design-import";
+import { resolveFigmaPasteImportCall } from "@/lib/figma-clipboard";
+
+export interface ImportFigmaClipboardIntoDesignArgs {
+  canEditDesign: boolean;
+  figmaPasteImportingRef: RefObject<boolean>;
+  id: string | undefined;
+  navigate: NavigateFunction;
+  queryClient: QueryClient;
+  setFigmaHydrationFileIds: Dispatch<SetStateAction<string[]>>;
+  setFigmaHydrationImageCount: Dispatch<SetStateAction<number>>;
+  setFigmaHydrationOpen: Dispatch<SetStateAction<boolean>>;
+  t: (key: string, options?: Record<string, unknown>) => string;
+}
+
+export async function runImportFigmaClipboardIntoDesign(
+  {
+    canEditDesign,
+    figmaPasteImportingRef,
+    id,
+    navigate,
+    queryClient,
+    setFigmaHydrationFileIds,
+    setFigmaHydrationImageCount,
+    setFigmaHydrationOpen,
+    t,
+  }: ImportFigmaClipboardIntoDesignArgs,
+  content: string,
+) {
+  if (!id) return;
+  if (!canEditDesign) {
+    toast.error("Import requires editor access" /* i18n-ignore */);
+    return;
+  }
+  if (figmaPasteImportingRef.current) {
+    toast.info(t("designEditor.import.figUploadProcessing"));
+    return;
+  }
+  figmaPasteImportingRef.current = true;
+  const loadingToastId = toast.loading(
+    t("designEditor.import.figUploadProcessing"),
+  );
+  try {
+    const figmaPasteCall = resolveFigmaPasteImportCall(content);
+    const result = (await callAction(figmaPasteCall.action, {
+      designId: id,
+      ...figmaPasteCall.payload,
+    })) as ImportResult;
+    if (result?.error) throw new Error(result.error);
+    if (!result?.files?.length) {
+      toast.error(t("designEditor.import.errors.figmaPasteFailed"), {
+        description:
+          result?.guidance ?? t("designEditor.import.figmaPasteMatchGuidance"),
+      });
+      return;
+    }
+    await Promise.all([
+      queryClient.invalidateQueries({ queryKey: ["action", "get-design"] }),
+      queryClient.invalidateQueries({ queryKey: ["action"] }),
+    ]);
+    const figmaStrategyLabel =
+      result?.strategy === "restNodes"
+        ? t("designEditor.import.figmaPasteRestLabel")
+        : result?.strategy === "htmlFallback"
+          ? t("designEditor.import.figmaPasteHtmlLabel")
+          : result?.strategy === "localKiwi"
+            ? t("designEditor.import.figmaPasteLocalKiwiLabel")
+            : undefined;
+    toast.success(
+      importResultSummary(result, t("designEditor.import.figmaSuccess")),
+      figmaStrategyLabel ? { description: figmaStrategyLabel } : undefined,
+    );
+    if (
+      result?.strategy === "localKiwi" &&
+      (result?.unresolvedImages ?? 0) > 0 &&
+      result?.files?.length
+    ) {
+      const count = result.unresolvedImages!;
+      const fileIds = result.files.map((f) => f.id);
+      setFigmaHydrationFileIds(fileIds);
+      setFigmaHydrationImageCount(count);
+      setFigmaHydrationOpen(true);
+      toast.info(
+        t("designEditor.import.figmaPasteImagesNeedToken", {
+          count,
+          plural: count === 1 ? "" : "s",
+        }),
+      );
+    } else if (result?.figmaApiKeyMissing) {
+      toast.info(t("designEditor.import.figmaPasteApiKeyHint"));
+    } else if (
+      result?.strategy === "htmlFallback" &&
+      (result?.matchStatus === "ambiguous" || result?.matchStatus === "none")
+    ) {
+      toast.info(t("designEditor.import.figmaPasteMatchGuidance"));
+    }
+    if (result?.warnings?.length) {
+      toast.warning(t("designEditor.import.warningsToast"), {
+        description: result.warnings[0],
+      });
+    }
+    navigate(`/design/${result?.designId ?? id}?view=overview`);
+  } catch (error) {
+    toast.error(t("designEditor.import.errors.figmaPasteFailed"), {
+      description:
+        error instanceof Error ? error.message : t("common.genericError"),
+    });
+  } finally {
+    figmaPasteImportingRef.current = false;
+    toast.dismiss(loadingToastId);
+  }
+}

package/corpus/templates/design/app/pages/design-editor/commands/layer-marquee-selection-change.ts

@@ -0,0 +1,163 @@
+import type { CodeLayerNode, CodeLayerProjection } from "@shared/code-layer";
+import type { Dispatch, RefObject, SetStateAction } from "react";
+
+import type { CanvasLayerMarqueeSelection } from "@/components/design/multi-screen/types";
+import type {
+  ElementInfo,
+  ElementSelectionIntent,
+} from "@/components/design/types";
+import {
+  canonicalizeElementInfoFromProjection,
+  resolveCodeLayerNodeFromElementInfo,
+} from "@/pages/design-editor/code-layer-state";
+import {
+  dedupeStringIds,
+  isScreenRootElementInfo,
+  shouldClearBridgeSelectionOnEmptyMarquee,
+} from "@/pages/design-editor/selection-state";
+import type { DesignTool, EditorMode } from "@/pages/design-editor/types";
+
+export interface LayerMarqueeSelectionChangeArgs {
+  clearPendingOverviewLayerSelectionTimer: () => void;
+  focusDesignInspectorForSelection: () => void;
+  getCodeLayerProjectionForScreen: (
+    screenId: string,
+  ) => CodeLayerProjection | null;
+  hasActiveSelectionRef: RefObject<boolean>;
+  lastMarqueeSelectionSignatureRef: RefObject<string | null>;
+  pendingOverviewLayerSelectionRef: RefObject<string | null>;
+  pendingOverviewScreenSelectionRef: RefObject<string | null>;
+  setActiveFileId: Dispatch<SetStateAction<string | null>>;
+  setActiveTool: Dispatch<SetStateAction<DesignTool>>;
+  setCreatedOverviewLayerSelection: Dispatch<
+    SetStateAction<{ screenId: string; layerId: string } | null>
+  >;
+  setMode: Dispatch<SetStateAction<EditorMode>>;
+  setOverviewClearSelectionRequest: Dispatch<SetStateAction<number>>;
+  setOverviewSelectedScreenIds: Dispatch<SetStateAction<string[]>>;
+  setSelectedElement: Dispatch<SetStateAction<ElementInfo | null>>;
+  setSelectedLayerIdsState: Dispatch<SetStateAction<string[]>>;
+  viewModeRef: RefObject<"single" | "overview">;
+}
+
+export function runLayerMarqueeSelectionChange(
+  {
+    clearPendingOverviewLayerSelectionTimer,
+    focusDesignInspectorForSelection,
+    getCodeLayerProjectionForScreen,
+    hasActiveSelectionRef,
+    lastMarqueeSelectionSignatureRef,
+    pendingOverviewLayerSelectionRef,
+    pendingOverviewScreenSelectionRef,
+    setActiveFileId,
+    setActiveTool,
+    setCreatedOverviewLayerSelection,
+    setMode,
+    setOverviewClearSelectionRequest,
+    setOverviewSelectedScreenIds,
+    setSelectedElement,
+    setSelectedLayerIdsState,
+    viewModeRef,
+  }: LayerMarqueeSelectionChangeArgs,
+  selection: CanvasLayerMarqueeSelection[],
+  intent: ElementSelectionIntent,
+) {
+  // PF10: MultiScreenCanvas reports the marquee hit-set on every
+  // mousemove tick during a drag, not just on settle (see
+  // reportLayerSelection in MultiScreenCanvas.tsx). Bail before any
+  // projection/canonicalization work when the reported set is identical
+  // to the last tick's — the common case while the marquee rect isn't
+  // currently crossing an element boundary.
+  //
+  // The dedup is ONLY applied to non-empty hit-sets. An empty hit-set (a
+  // plain empty-space click, or dragging over blank canvas) is cheap to
+  // process and must never be deduped away: the last non-marquee selection
+  // (iframe click, layers panel, agent, undo/redo, keyboard) does not
+  // update this signature, so an empty "#0" tick could otherwise match a
+  // stale "#0" and skip the deselect entirely.
+  const signature =
+    selection
+      .map(
+        (item) =>
+          `${item.screenId}:${item.info.sourceId ?? item.info.selector ?? ""}`,
+      )
+      .join("|") + `#${intent.additive ? "1" : "0"}`;
+  if (selection.length > 0) {
+    if (lastMarqueeSelectionSignatureRef.current === signature) return;
+  }
+  lastMarqueeSelectionSignatureRef.current = signature;
+
+  pendingOverviewScreenSelectionRef.current = null;
+  pendingOverviewLayerSelectionRef.current = null;
+  clearPendingOverviewLayerSelectionTimer();
+  setCreatedOverviewLayerSelection(null);
+
+  const resolved = selection
+    .map((item) => {
+      const projection = getCodeLayerProjectionForScreen(item.screenId);
+      if (!projection) return null;
+      const canonical = canonicalizeElementInfoFromProjection(
+        projection,
+        item.info,
+      );
+      const node = resolveCodeLayerNodeFromElementInfo(projection, canonical);
+      if (!node || isScreenRootElementInfo(canonical)) return null;
+      return {
+        screenId: item.screenId,
+        node,
+        elementInfo: canonical,
+      };
+    })
+    .filter(
+      (
+        item,
+      ): item is {
+        screenId: string;
+        node: CodeLayerNode;
+        elementInfo: ElementInfo;
+      } => Boolean(item),
+    );
+
+  const hitLayerIds = dedupeStringIds(resolved.map((item) => item.node.id));
+  setSelectedLayerIdsState((current) =>
+    intent.additive
+      ? dedupeStringIds([
+          ...current.filter((layerId) => !layerId.startsWith("__")),
+          ...hitLayerIds,
+        ])
+      : hitLayerIds,
+  );
+  if (viewModeRef.current === "overview") {
+    setOverviewSelectedScreenIds([]);
+  }
+
+  const primary = resolved[resolved.length - 1];
+  if (primary) {
+    setActiveFileId(primary.screenId);
+    setSelectedElement(primary.elementInfo);
+    focusDesignInspectorForSelection();
+  } else if (
+    hasActiveSelectionRef.current &&
+    shouldClearBridgeSelectionOnEmptyMarquee({
+      resolvedCount: resolved.length,
+      additive: intent.additive,
+    })
+  ) {
+    // B5-1: an empty-space click (zero-hit marquee) must deselect an
+    // in-screen/bridge element selection too, not just the host
+    // selectedElement state. Without bumping this counter, the iframe's
+    // own selection-overlay highlight (set via the bridge for an
+    // in-screen element) never gets the clear signal and keeps
+    // rendering, mirroring the same clear used by Escape (~20428).
+    //
+    // Gated on hasActiveSelectionRef so that empty ticks during a
+    // blank-canvas marquee drag (which now always reach here, since empty
+    // sets are no longer deduped) don't bump the clear counter on every
+    // mousemove when there is nothing selected to clear.
+    setSelectedElement(null);
+    setOverviewClearSelectionRequest((request) => request + 1);
+  }
+
+  setActiveTool("move");
+  setMode("edit");
+}