@agent-native/core 0.163.3 → 0.164.1

package/corpus/templates/design/app/pages/design-editor/commands/screen-text-content-change.ts

@@ -0,0 +1,216 @@
+import {
+  applyVisualEdit,
+  buildCodeLayerProjection,
+  removeCodeLayerNodeFromHtml,
+} from "@shared/code-layer";
+import { normalizeDesignSourceType } from "@shared/source-mode";
+import type { Dispatch, SetStateAction } from "react";
+import { toast } from "sonner";
+
+import type { ElementInfo } from "@/components/design/types";
+import type { ClipboardContentMutationPublication } from "@/lib/clipboard-content-lineage";
+import {
+  bridgeSourceIdForCodeLayerNode,
+  codeLayerNodeMatchesBridgeTarget,
+  codeLayerPatchMessage,
+  preferredCodeLayerSelector,
+  resolveCodeLayerNodeFromBridge,
+  resolveCodeLayerNodeFromElementInfo,
+} from "@/pages/design-editor/code-layer-state";
+import type { LiveScreenSnapshot } from "@/pages/design-editor/command-types";
+import type { OverviewScreen } from "@/pages/design-editor/derive/overview-screens";
+import { updateElementContentInHtml } from "@/pages/design-editor/text-edit-utils";
+import type {
+  DesignFile,
+  DesignTool,
+  EditorMode,
+} from "@/pages/design-editor/types";
+
+export interface ScreenTextContentChangeArgs {
+  activeFile: DesignFile;
+  applyFileContentUpdate: (
+    fileId: string,
+    nextContent: string,
+    options?: {
+      refreshPreview?: boolean;
+      skipPreview?: boolean;
+      forcePreviewFullDocument?: boolean;
+      persist?: boolean;
+      recordHistory?: boolean;
+      updatedAt?: string;
+      clipboardMutation?: ClipboardContentMutationPublication;
+    },
+  ) => void;
+  canEditDesign: boolean;
+  designSourceType: "inline" | "localhost" | "fusion";
+  finalizePendingTextCreation: (
+    fileId: string,
+    nodeIds: readonly (string | null | undefined)[],
+    finalContent: string,
+  ) => boolean;
+  getScreenContent: (screenId: string) => string;
+  handleTextContentChange: (
+    selector: string,
+    value: string,
+    elementInfo?: ElementInfo,
+    details?: { html?: string; originalValue?: string; originalHtml?: string },
+  ) => void;
+  liveScreenSnapshotsById: Record<string, LiveScreenSnapshot>;
+  overviewScreens: OverviewScreen[];
+  recordPendingLiveTextEdit: (
+    screenId: string,
+    selector: string,
+    value: string,
+    elementInfo?: ElementInfo,
+    details?: { html?: string; originalValue?: string; originalHtml?: string },
+  ) => void;
+  setActiveFileId: Dispatch<SetStateAction<string | null>>;
+  setActiveTool: Dispatch<SetStateAction<DesignTool>>;
+  setMode: Dispatch<SetStateAction<EditorMode>>;
+  setSelectedElement: Dispatch<SetStateAction<ElementInfo | null>>;
+  setSelectedLayerIdsState: Dispatch<SetStateAction<string[]>>;
+  t: (key: string, options?: Record<string, unknown>) => string;
+  updateLiveScreenSnapshotContent: (
+    screenId: string,
+    html: string,
+    options?: { recordHistory?: boolean },
+  ) => boolean;
+}
+
+export function runScreenTextContentChange(
+  {
+    activeFile,
+    applyFileContentUpdate,
+    canEditDesign,
+    designSourceType,
+    finalizePendingTextCreation,
+    getScreenContent,
+    handleTextContentChange,
+    liveScreenSnapshotsById,
+    overviewScreens,
+    recordPendingLiveTextEdit,
+    setActiveFileId,
+    setActiveTool,
+    setMode,
+    setSelectedElement,
+    setSelectedLayerIdsState,
+    t,
+    updateLiveScreenSnapshotContent,
+  }: ScreenTextContentChangeArgs,
+  screenId: string,
+  selector: string,
+  value: string,
+  elementInfo?: ElementInfo,
+  details?: {
+    html?: string;
+    originalValue?: string;
+    originalHtml?: string;
+  },
+) {
+  if (screenId === activeFile?.id) {
+    handleTextContentChange(selector, value, elementInfo, details);
+    return;
+  }
+  if (!canEditDesign) return;
+  const overviewScreen = overviewScreens.find(
+    (screen) => screen.id === screenId,
+  );
+  const screenSourceType =
+    normalizeDesignSourceType(overviewScreen?.sourceType) ?? designSourceType;
+  if (screenSourceType === "localhost") {
+    recordPendingLiveTextEdit(screenId, selector, value, elementInfo, details);
+    setActiveFileId(screenId);
+    setActiveTool("move");
+    setMode("edit");
+    return;
+  }
+  const liveSnapshot = liveScreenSnapshotsById[screenId];
+  const baseContent = liveSnapshot?.html ?? getScreenContent(screenId);
+  const projection = buildCodeLayerProjection(baseContent);
+  const targetInfo = elementInfo ? { ...elementInfo, selector } : null;
+  const targetNode = targetInfo
+    ? resolveCodeLayerNodeFromElementInfo(projection, targetInfo)
+    : resolveCodeLayerNodeFromBridge(projection, selector);
+  const isEmpty = value.trim().length === 0;
+  const removedContent =
+    isEmpty && targetNode
+      ? removeCodeLayerNodeFromHtml(baseContent, targetNode)
+      : null;
+  const patch = !removedContent
+    ? applyVisualEdit(baseContent, {
+        kind: "textContent",
+        target: targetNode ? { nodeId: targetNode.id } : { selector },
+        value,
+        html: details?.html,
+      })
+    : null;
+  const nextContent =
+    removedContent ??
+    (patch?.result.status === "applied" ? patch.content : null) ??
+    updateElementContentInHtml(baseContent, selector, value, details?.html);
+  if (!nextContent) {
+    toast.error(
+      codeLayerPatchMessage(
+        patch?.result.message,
+        t("designEditor.patchProof.selectorMissing"),
+      ),
+      { duration: 4000 },
+    );
+    return;
+  }
+  const finalizedCreation = finalizePendingTextCreation(
+    screenId,
+    [
+      elementInfo?.sourceId,
+      targetNode?.id,
+      targetNode ? bridgeSourceIdForCodeLayerNode(targetNode) : null,
+    ],
+    nextContent,
+  );
+  if (liveSnapshot) {
+    updateLiveScreenSnapshotContent(screenId, nextContent, {
+      recordHistory: !finalizedCreation,
+    });
+  } else {
+    applyFileContentUpdate(screenId, nextContent, {
+      skipPreview: true,
+      recordHistory: !finalizedCreation,
+    });
+  }
+  setActiveFileId(screenId);
+  // T8: see the matching note in handleTextContentChange — commit
+  // should hand back to the move tool, not re-arm text.
+  setActiveTool("move");
+  setMode("edit");
+  if (removedContent) {
+    setSelectedElement(null);
+    setSelectedLayerIdsState([]);
+    return;
+  }
+  const nextProjection = buildCodeLayerProjection(nextContent);
+  const nextNode = targetNode
+    ? nextProjection.nodes.find((node) =>
+        codeLayerNodeMatchesBridgeTarget(
+          node,
+          selector,
+          bridgeSourceIdForCodeLayerNode(targetNode),
+        ),
+      )
+    : null;
+  if (nextNode) setSelectedLayerIdsState([nextNode.id]);
+  setSelectedElement((previous) => {
+    const base =
+      elementInfo ?? (previous?.selector === selector ? previous : undefined);
+    return base
+      ? {
+          ...base,
+          sourceId: nextNode
+            ? bridgeSourceIdForCodeLayerNode(nextNode)
+            : base.sourceId,
+          selector: nextNode ? preferredCodeLayerSelector(nextNode) : selector,
+          textContent: value.slice(0, 200),
+          htmlContent: details?.html,
+        }
+      : previous;
+  });
+}

package/corpus/templates/design/app/pages/design-editor/commands/screen-visual-duplicate-change.ts

@@ -0,0 +1,108 @@
+import { buildCodeLayerProjection } from "@shared/code-layer";
+import { toast } from "sonner";
+
+import type { ElementInfo } from "@/components/design/types";
+import type { ClipboardContentMutationPublication } from "@/lib/clipboard-content-lineage";
+import { insertClonedHtmlLayer } from "@/pages/design-editor/clone-and-pen-edit";
+import {
+  codeLayerSelectorAliases,
+  resolveCodeLayerNodeFromBridge,
+  resolveCodeLayerNodeFromElementInfo,
+} from "@/pages/design-editor/code-layer-state";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface ScreenVisualDuplicateChangeArgs {
+  activeFile: DesignFile;
+  applyFileContentUpdate: (
+    fileId: string,
+    nextContent: string,
+    options?: {
+      refreshPreview?: boolean;
+      skipPreview?: boolean;
+      forcePreviewFullDocument?: boolean;
+      persist?: boolean;
+      recordHistory?: boolean;
+      updatedAt?: string;
+      clipboardMutation?: ClipboardContentMutationPublication;
+    },
+  ) => void;
+  canEditDesign: boolean;
+  getScreenContent: (screenId: string) => string;
+  handleVisualDuplicateChange: (
+    selector: string,
+    cloneHtml: string,
+    elementInfo?: ElementInfo,
+    details?: {
+      sourceId?: string;
+      anchorSelector?: string;
+      anchorSourceId?: string;
+      placement?: "before" | "after" | "inside";
+    },
+  ) => boolean;
+  t: (key: string, options?: Record<string, unknown>) => string;
+}
+
+export function runScreenVisualDuplicateChange(
+  {
+    activeFile,
+    applyFileContentUpdate,
+    canEditDesign,
+    getScreenContent,
+    handleVisualDuplicateChange,
+    t,
+  }: ScreenVisualDuplicateChangeArgs,
+  screenId: string,
+  selector: string,
+  cloneHtml: string,
+  elementInfo?: ElementInfo,
+  details?: {
+    sourceId?: string;
+    anchorSelector?: string;
+    anchorSourceId?: string;
+    placement?: "before" | "after" | "inside";
+  },
+) {
+  if (screenId === activeFile?.id) {
+    return (
+      handleVisualDuplicateChange(selector, cloneHtml, elementInfo, details) !==
+      false
+    );
+  }
+  if (!canEditDesign) return false;
+  const baseContent = getScreenContent(screenId);
+  const projection = buildCodeLayerProjection(baseContent);
+  const targetInfo = elementInfo
+    ? {
+        ...elementInfo,
+        selector,
+        sourceId: details?.sourceId ?? elementInfo.sourceId,
+      }
+    : null;
+  const targetNode = targetInfo
+    ? resolveCodeLayerNodeFromElementInfo(projection, targetInfo)
+    : resolveCodeLayerNodeFromBridge(projection, selector, details?.sourceId);
+  const anchorNode = resolveCodeLayerNodeFromBridge(
+    projection,
+    details?.anchorSelector,
+    details?.anchorSourceId,
+  );
+  const nextContent = insertClonedHtmlLayer(baseContent, cloneHtml, {
+    targetSelectors: targetNode
+      ? codeLayerSelectorAliases(targetNode)
+      : [selector],
+    anchorSelectors: anchorNode
+      ? codeLayerSelectorAliases(anchorNode)
+      : details?.anchorSelector
+        ? [details.anchorSelector]
+        : undefined,
+    placement: details?.placement ?? "after",
+  });
+  if (!nextContent) {
+    toast.error(t("designEditor.toasts.layerMoveFailed"), {
+      duration: 4000,
+    });
+    return false;
+  }
+  applyFileContentUpdate(screenId, nextContent, { skipPreview: true });
+  return true;
+}

package/corpus/templates/design/app/pages/design-editor/commands/screen-visual-structure-change.ts

@@ -0,0 +1,280 @@
+import { stripBoardSurfaceOffsetFromCoord } from "@shared/board-file";
+import { applyVisualEdit, buildCodeLayerProjection } from "@shared/code-layer";
+import { normalizeDesignSourceType } from "@shared/source-mode";
+import type { Dispatch, SetStateAction } from "react";
+import { toast } from "sonner";
+
+import { dndHostLog } from "@/components/design/dnd-debug";
+import type { ElementInfo } from "@/components/design/types";
+import type { ClipboardContentMutationPublication } from "@/lib/clipboard-content-lineage";
+import {
+  bridgeSourceIdForCodeLayerNode,
+  codeLayerPatchMessage,
+  elementInfoFromCodeLayerNode,
+  resolveCodeLayerNodeFromBridge,
+  resolveCodeLayerNodeFromElementInfo,
+} from "@/pages/design-editor/code-layer-state";
+import type { OverviewScreen } from "@/pages/design-editor/derive/overview-screens";
+import {
+  isAbsoluteCodeLayerNode,
+  removeAbsolutePositioningFromNodeInHtml,
+  setAbsolutePositioningForNodeInHtml,
+  setFlowPositioningOverrideForNodeInHtml,
+} from "@/pages/design-editor/html-layer-positioning";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface ScreenVisualStructureChangeArgs {
+  activeFile: DesignFile;
+  applyFileContentUpdate: (
+    fileId: string,
+    nextContent: string,
+    options?: {
+      refreshPreview?: boolean;
+      skipPreview?: boolean;
+      forcePreviewFullDocument?: boolean;
+      persist?: boolean;
+      recordHistory?: boolean;
+      updatedAt?: string;
+      clipboardMutation?: ClipboardContentMutationPublication;
+    },
+  ) => void;
+  canEditDesign: boolean;
+  designSourceType: "inline" | "localhost" | "fusion";
+  getScreenContent: (screenId: string) => string;
+  handleVisualStructureChange: (
+    selector: string,
+    anchorSelector: string,
+    placement: "before" | "after" | "inside",
+    elementInfo?: ElementInfo,
+    details?: {
+      sourceId?: string;
+      anchorSourceId?: string;
+      anchorElementInfo?: ElementInfo;
+      requestId?: string;
+      dropMode?: "flow-insert" | "absolute-container";
+      forceFlowPositionOverride?: boolean;
+      sourceRect?: { x: number; y: number; width: number; height: number };
+      anchorRect?: { x: number; y: number; width: number; height: number };
+      insertedHtml?: string;
+      replaced?: true;
+      replacementSelector?: string;
+      replacementSourceId?: string;
+    },
+  ) => boolean | "pending";
+  overviewScreens: OverviewScreen[];
+  recordPendingLiveStructureEdit: (
+    screenId: string,
+    selector: string,
+    anchorSelector: string,
+    placement: "before" | "after" | "inside",
+    elementInfo?: ElementInfo,
+    details?: {
+      sourceId?: string;
+      anchorSourceId?: string;
+      anchorElementInfo?: ElementInfo;
+      requestId?: string;
+      dropMode?: "flow-insert" | "absolute-container";
+      forceFlowPositionOverride?: boolean;
+      sourceRect?: { x: number; y: number; width: number; height: number };
+      anchorRect?: { x: number; y: number; width: number; height: number };
+      insertedHtml?: string;
+      replaced?: true;
+      replacementSelector?: string;
+      replacementSourceId?: string;
+      removed?: true;
+    },
+  ) => void;
+  setActiveFileId: Dispatch<SetStateAction<string | null>>;
+  setSelectedElement: Dispatch<SetStateAction<ElementInfo | null>>;
+  setSelectedLayerIdsState: Dispatch<SetStateAction<string[]>>;
+  t: (key: string, options?: Record<string, unknown>) => string;
+}
+
+export function runScreenVisualStructureChange(
+  {
+    activeFile,
+    applyFileContentUpdate,
+    canEditDesign,
+    designSourceType,
+    getScreenContent,
+    handleVisualStructureChange,
+    overviewScreens,
+    recordPendingLiveStructureEdit,
+    setActiveFileId,
+    setSelectedElement,
+    setSelectedLayerIdsState,
+    t,
+  }: ScreenVisualStructureChangeArgs,
+  screenId: string,
+  selector: string,
+  anchorSelector: string,
+  placement: "before" | "after" | "inside",
+  elementInfo?: ElementInfo,
+  details?: {
+    sourceId?: string;
+    anchorSourceId?: string;
+    anchorElementInfo?: ElementInfo;
+    requestId?: string;
+    dropMode?: "flow-insert" | "absolute-container";
+    forceFlowPositionOverride?: boolean;
+    sourceRect?: { x: number; y: number; width: number; height: number };
+    anchorRect?: { x: number; y: number; width: number; height: number };
+    /** Markup this change introduced; the subject does not exist in the
+     * screen's source yet, so it must be added rather than relocated. */
+    insertedHtml?: string;
+    replaced?: true;
+    replacementSelector?: string;
+    replacementSourceId?: string;
+  },
+) {
+  if (screenId === activeFile?.id) {
+    return handleVisualStructureChange(
+      selector,
+      anchorSelector,
+      placement,
+      elementInfo,
+      details,
+    );
+  }
+  if (!canEditDesign) return false;
+  const overviewScreen = overviewScreens.find(
+    (screen) => screen.id === screenId,
+  );
+  const screenSourceType =
+    normalizeDesignSourceType(overviewScreen?.sourceType) ?? designSourceType;
+  if (screenSourceType === "localhost") {
+    recordPendingLiveStructureEdit(
+      screenId,
+      selector,
+      anchorSelector,
+      placement,
+      elementInfo,
+      details,
+    );
+    return "pending";
+  }
+  const baseContent = getScreenContent(screenId);
+  const projection = buildCodeLayerProjection(baseContent);
+  const resolveBridgeNode = (targetSelector: string, sourceId?: string) =>
+    resolveCodeLayerNodeFromBridge(projection, targetSelector, sourceId);
+  const targetInfo = elementInfo
+    ? {
+        ...elementInfo,
+        selector,
+        sourceId: details?.sourceId ?? elementInfo.sourceId,
+      }
+    : null;
+  const targetNode = targetInfo
+    ? resolveCodeLayerNodeFromElementInfo(projection, targetInfo)
+    : resolveBridgeNode(selector, details?.sourceId);
+  const anchorNode = resolveBridgeNode(anchorSelector, details?.anchorSourceId);
+  const patch = applyVisualEdit(baseContent, {
+    kind: "moveNode",
+    target: targetNode ? { nodeId: targetNode.id } : { selector },
+    anchor: anchorNode
+      ? { nodeId: anchorNode.id }
+      : { selector: anchorSelector },
+    placement,
+  });
+  dndHostLog("persist:rewrite", {
+    status: patch.result.status,
+    message: patch.result.message,
+  });
+  if (patch.result.status !== "applied") {
+    toast.error(
+      codeLayerPatchMessage(
+        patch.result.message,
+        t("designEditor.toasts.layerMoveFailed"),
+      ),
+      { duration: 4000 },
+    );
+    return false;
+  }
+  const movedNodeAttrId =
+    targetNode?.dataAttributes["data-agent-native-node-id"] ??
+    details?.sourceId ??
+    elementInfo?.sourceId ??
+    (patch.result.after?.nodeId
+      ? patch.projection.nodes.find(
+          (node) => node.id === patch.result.after?.nodeId,
+        )?.dataAttributes["data-agent-native-node-id"]
+      : undefined);
+  // Same board-surface offset-poison guard as handleVisualStructureChange
+  // above: strip the 65536 fingerprint from the bridge's rect-space
+  // offset before persisting, and refresh the preview when it fired so
+  // the bridge's equally-off optimistic placement gets corrected.
+  const rawAbsoluteContainerOffset =
+    details?.dropMode === "absolute-container" &&
+    details.sourceRect &&
+    details.anchorRect
+      ? {
+          x: details.sourceRect.x - details.anchorRect.x,
+          y: details.sourceRect.y - details.anchorRect.y,
+        }
+      : null;
+  const absoluteContainerOffset = rawAbsoluteContainerOffset
+    ? {
+        x: stripBoardSurfaceOffsetFromCoord(rawAbsoluteContainerOffset.x),
+        y: stripBoardSurfaceOffsetFromCoord(rawAbsoluteContainerOffset.y),
+      }
+    : null;
+  const absoluteOffsetWasPoisoned = Boolean(
+    rawAbsoluteContainerOffset &&
+    absoluteContainerOffset &&
+    (rawAbsoluteContainerOffset.x !== absoluteContainerOffset.x ||
+      rawAbsoluteContainerOffset.y !== absoluteContainerOffset.y),
+  );
+  const nextContent =
+    movedNodeAttrId && details?.dropMode === "absolute-container"
+      ? absoluteContainerOffset
+        ? setAbsolutePositioningForNodeInHtml(
+            patch.content,
+            movedNodeAttrId,
+            absoluteContainerOffset,
+          )
+        : patch.content
+      : movedNodeAttrId &&
+          details?.dropMode === "flow-insert" &&
+          details.forceFlowPositionOverride
+        ? setFlowPositioningOverrideForNodeInHtml(
+            patch.content,
+            movedNodeAttrId,
+          )
+        : isAbsoluteCodeLayerNode(targetNode) && movedNodeAttrId
+          ? removeAbsolutePositioningFromNodeInHtml(
+              patch.content,
+              movedNodeAttrId,
+            )
+          : patch.content;
+  const nextProjection = buildCodeLayerProjection(nextContent);
+  applyFileContentUpdate(
+    screenId,
+    nextContent,
+    absoluteOffsetWasPoisoned
+      ? { forcePreviewFullDocument: true }
+      : { skipPreview: true },
+  );
+  const movedNode =
+    (movedNodeAttrId
+      ? nextProjection.nodes.find(
+          (node) =>
+            node.dataAttributes["data-agent-native-node-id"] ===
+            movedNodeAttrId,
+        )
+      : null) ??
+    resolveCodeLayerNodeFromBridge(
+      nextProjection,
+      selector,
+      details?.sourceId ??
+        elementInfo?.sourceId ??
+        (targetNode ? bridgeSourceIdForCodeLayerNode(targetNode) : undefined),
+    );
+  if (movedNode) {
+    setActiveFileId(screenId);
+    setSelectedLayerIdsState([movedNode.id]);
+    setSelectedElement(elementInfoFromCodeLayerNode(movedNode));
+  } else {
+    setSelectedElement(null);
+  }
+  return true;
+}