@agent-native/core 0.163.4 → 0.164.3

package/corpus/templates/design/app/pages/design-editor/commands/apply-to-source.ts

@@ -0,0 +1,132 @@
+import { callAction } from "@agent-native/core/client/hooks";
+import type { Dispatch, RefObject, SetStateAction } from "react";
+import { toast } from "sonner";
+
+import { sanitizeLocalhostSourceSnapshotHtml } from "@/components/design/design-canvas/external-preview";
+import type { LocalhostWriteConsentPayload } from "@/components/design/LocalhostWriteConsentDialog";
+import {
+  NO_LOCALHOST_CONNECTION_MESSAGE,
+  NO_LOCALHOST_WRITE_CONTENT_MESSAGE,
+  NO_LOCALHOST_WRITE_PATH_MESSAGE,
+} from "@/pages/design-editor/editor-constants";
+import { resolveLocalhostSourceWriteContent } from "@/pages/design-editor/editor-state";
+
+export interface ApplyToSourceArgs {
+  activeLocalhostConnectionId: string;
+  activeLocalhostRelPath: string | undefined;
+  activeLocalhostSourceSnapshotHtml: string | undefined;
+  canEditDesign: boolean;
+  id: string | undefined;
+  latestActiveContentRef: RefObject<string | null>;
+  requestLocalhostWrite: (opts: {
+    files: string[];
+    onGranted: LocalhostWriteConsentPayload["onGranted"];
+    onCancel?: () => void;
+  }) => void;
+  setApplyToSourcePending: Dispatch<SetStateAction<boolean>>;
+  stripEditorOnlyAttributes: (html: string) => string;
+  t: (key: string, options?: Record<string, unknown>) => string;
+}
+
+export function runApplyToSource({
+  activeLocalhostConnectionId,
+  activeLocalhostRelPath,
+  activeLocalhostSourceSnapshotHtml,
+  canEditDesign,
+  id,
+  latestActiveContentRef,
+  requestLocalhostWrite,
+  setApplyToSourcePending,
+  stripEditorOnlyAttributes,
+  t,
+}: ApplyToSourceArgs) {
+  if (!id || !canEditDesign) return;
+  // VE7: surface why "Apply to source" can't proceed instead of silently
+  // no-oping when the connection or the resolved source path is missing.
+  if (!activeLocalhostConnectionId) {
+    toast.error(NO_LOCALHOST_CONNECTION_MESSAGE);
+    return;
+  }
+  if (!activeLocalhostRelPath) {
+    toast.error(NO_LOCALHOST_WRITE_PATH_MESSAGE);
+    return;
+  }
+  const relPath = activeLocalhostRelPath;
+  const connectionId = activeLocalhostConnectionId;
+  // URL-backed Design files persist the route URL in `content`; HTML source
+  // comes from the authenticated snapshot model populated by DesignCanvas.
+  // Fail closed until that source exists so this button can never serialize
+  // a localhost URL and overwrite the user's actual file with it.
+  const ext = (relPath.match(/\.[^.]+$/) ?? [])[0]?.toLowerCase() ?? "";
+  const rawContent = resolveLocalhostSourceWriteContent({
+    extension: ext,
+    persistedContent: latestActiveContentRef.current,
+    liveSnapshotHtml: activeLocalhostSourceSnapshotHtml,
+  });
+  if (!rawContent) {
+    toast.error(NO_LOCALHOST_WRITE_CONTENT_MESSAGE);
+    return;
+  }
+  // Strip editor-only attributes before writing so the on-disk file stays
+  // clean.  Only strip for HTML routes; CSS files have no DOM attributes.
+  const content =
+    ext === ".html" || ext === ".htm"
+      ? stripEditorOnlyAttributes(
+          sanitizeLocalhostSourceSnapshotHtml(rawContent),
+        )
+      : rawContent;
+
+  requestLocalhostWrite({
+    files: [relPath],
+    onGranted: () => {
+      void (async () => {
+        setApplyToSourcePending(true);
+        try {
+          // Read the file's current versionHash immediately before writing
+          // so write-local-file can reject a concurrent on-disk edit. Never
+          // downgrade to an unguarded overwrite when the read fails: the
+          // semantic React path is agent-driven, and this legacy whole-file
+          // path is intentionally limited to directly writable HTML/CSS.
+          const readResult = (await callAction(
+            "read-local-file",
+            {
+              designId: id,
+              connectionId,
+              path: relPath,
+            },
+            { method: "GET" },
+          )) as { versionHash?: string } | undefined;
+          const expectedVersionHash = readResult?.versionHash;
+          if (!expectedVersionHash) {
+            throw new Error(
+              `Could not verify the current version of ${relPath}; no source was written.`,
+            );
+          }
+
+          await callAction("write-local-file", {
+            designId: id,
+            connectionId,
+            relPath,
+            content,
+            expectedVersionHash,
+          });
+          toast.success(t("designEditor.appliedToSource", { path: relPath }));
+        } catch (err) {
+          const message = err instanceof Error ? err.message : String(err);
+          if (message.includes("version conflict")) {
+            toast.error(
+              t("designEditor.applyToSourceConflict", { path: relPath }),
+            );
+          } else {
+            toast.error(t("designEditor.applyToSourceError", { message }));
+          }
+        } finally {
+          setApplyToSourcePending(false);
+        }
+      })();
+    },
+    onCancel: () => {
+      setApplyToSourcePending(false);
+    },
+  });
+}

package/corpus/templates/design/app/pages/design-editor/commands/can-move-layer.ts

@@ -0,0 +1,117 @@
+import type { CodeLayerNode, CodeLayerTreeNode } from "@shared/code-layer";
+
+import type { LayersPanelMoveIntent } from "@/components/design/LayersPanel";
+import type { EffectiveCodeLayerState } from "@/pages/design-editor/code-layer-state";
+import { collectCodeLayerAncestors } from "@/pages/design-editor/code-layer-state";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface CanMoveLayerArgs {
+  codeLayerOwnerByNodeId: Map<
+    string,
+    {
+      fileId: string;
+      node: CodeLayerNode;
+      tree: CodeLayerTreeNode[];
+      runtimeOnly: boolean;
+    }
+  >;
+  effectiveCodeLayerState: EffectiveCodeLayerState;
+  files: DesignFile[];
+  lockedLayerIds: Set<string>;
+  visualScreenFileIds: Set<string>;
+}
+
+export function runCanMoveLayer(
+  {
+    codeLayerOwnerByNodeId,
+    effectiveCodeLayerState,
+    files,
+    lockedLayerIds,
+    visualScreenFileIds,
+  }: CanMoveLayerArgs,
+  intent: LayersPanelMoveIntent,
+) {
+  const targetOwner = codeLayerOwnerByNodeId.get(intent.targetId);
+  // L19: a file/screen row is a valid drop target too — dropping a layer
+  // "on" a screen row (no code-layer owner, since it isn't a DOM node)
+  // appends it into that screen's body via moveNodeBetweenDocuments.
+  const targetFile = !targetOwner
+    ? files.find((file) => file.id === intent.targetId)
+    : undefined;
+  const draggedScreenIds = intent.draggedIds.filter((draggedId) =>
+    visualScreenFileIds.has(draggedId),
+  );
+  if (draggedScreenIds.length > 0) {
+    return Boolean(
+      draggedScreenIds.length === intent.draggedIds.length &&
+      targetFile &&
+      visualScreenFileIds.has(targetFile.id) &&
+      intent.placement !== "inside" &&
+      draggedScreenIds.every(
+        (screenId) =>
+          screenId !== targetFile.id && !lockedLayerIds.has(screenId),
+      ),
+    );
+  }
+  // L8: a locked or hidden row can still be used as a before/after/inside
+  // drop ANCHOR — locking/hiding a layer shouldn't make it impossible to
+  // position other layers relative to it in the panel. Only dragging
+  // (see per-draggedId checks below) stays gated by locked/hidden.
+  if (!targetOwner && !targetFile) {
+    return false;
+  }
+  const runtimeDraggedOwners = intent.draggedIds.map((draggedId) =>
+    codeLayerOwnerByNodeId.get(draggedId),
+  );
+  const hasRuntimeDraggedOwner = runtimeDraggedOwners.some(
+    (owner) => owner?.runtimeOnly,
+  );
+  if (targetOwner?.runtimeOnly || hasRuntimeDraggedOwner) {
+    if (!targetOwner?.runtimeOnly || intent.draggedIds.length !== 1) {
+      return false;
+    }
+    const draggedId = intent.draggedIds[0]!;
+    const draggedOwner = runtimeDraggedOwners[0];
+    return Boolean(
+      draggedOwner?.runtimeOnly &&
+      draggedId !== intent.targetId &&
+      draggedOwner.fileId === targetOwner.fileId &&
+      !effectiveCodeLayerState.lockedIds.has(draggedId) &&
+      !collectCodeLayerAncestors(targetOwner.tree, intent.targetId).includes(
+        draggedId,
+      ),
+    );
+  }
+  return intent.draggedIds.some((draggedId) => {
+    const draggedOwner = codeLayerOwnerByNodeId.get(draggedId);
+    if (
+      draggedId === intent.targetId ||
+      !draggedOwner ||
+      draggedOwner.runtimeOnly ||
+      // L8: dragging a LOCKED row is still blocked (locked means
+      // don't-touch-this-layer). A HIDDEN row is now draggable — hidden
+      // only means "not rendered in canvas", not "structurally frozen".
+      effectiveCodeLayerState.lockedIds.has(draggedId)
+    ) {
+      return false;
+    }
+    if (targetFile) {
+      // Dropping directly onto a screen row: any non-locked DOM layer
+      // from any file can be appended into that screen's body, EXCEPT a
+      // node that's already a top-level (parentless) child of that same
+      // screen and would end up in the same place — still allow it
+      // through here; handleLayerMove no-ops that case cheaply.
+      return true;
+    }
+    // Same-file move: also exclude ancestor drags (would orphan the node).
+    if (targetOwner && draggedOwner.fileId === targetOwner.fileId) {
+      return !collectCodeLayerAncestors(
+        targetOwner.tree,
+        intent.targetId,
+      ).includes(draggedId);
+    }
+    // Cross-file move: allowed as long as the dragged side isn't locked
+    // (already checked above). File-row ids are excluded by the owner check.
+    return true;
+  });
+}

package/corpus/templates/design/app/pages/design-editor/commands/change-selected-z-index.ts

@@ -0,0 +1,212 @@
+import type {
+  CodeLayerNode,
+  CodeLayerTreeNode,
+  MoveNodeEditIntent,
+} from "@shared/code-layer";
+import {
+  applyVisualEdit,
+  buildCodeLayerProjection,
+  buildCodeLayerTree,
+} from "@shared/code-layer";
+import type { Dispatch, RefObject, SetStateAction } from "react";
+
+import type { ElementInfo } from "@/components/design/types";
+import type { ClipboardContentMutationPublication } from "@/lib/clipboard-content-lineage";
+import {
+  elementInfoFromCodeLayerNode,
+  findCodeLayerSiblingOrder,
+} from "@/pages/design-editor/code-layer-state";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface ChangeSelectedZIndexArgs {
+  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;
+      }
+    >
+  >;
+  commitVisualStyles: (
+    selector: string,
+    styles: Record<string, string>,
+    options?: {
+      runtimeApplied?: boolean;
+      elementInfo?: ElementInfo;
+      originalStyles?: Record<string, string>;
+    },
+  ) => void;
+  getFreshActiveContent: () => string;
+  selectedElement: ElementInfo | null;
+  selectedLayerIdsState: string[];
+  setSelectedElement: Dispatch<SetStateAction<ElementInfo | null>>;
+}
+
+export function runChangeSelectedZIndex(
+  {
+    activeFile,
+    applyLocalContentUpdate,
+    canEditDesign,
+    codeLayerOwnerByNodeIdRef,
+    commitVisualStyles,
+    getFreshActiveContent,
+    selectedElement,
+    selectedLayerIdsState,
+    setSelectedElement,
+  }: ChangeSelectedZIndexArgs,
+  mode: "forward" | "front" | "backward" | "back",
+) {
+  if (!canEditDesign) return;
+  const selector = selectedElement?.selector;
+  if (!selector) return;
+  const currentSelectedElement = selectedElement;
+
+  const zIndexFallback = () => {
+    const current = Number.parseInt(
+      currentSelectedElement.computedStyles.zIndex || "0",
+      10,
+    );
+    const base = Number.isFinite(current) ? current : 0;
+    const next =
+      mode === "front"
+        ? 999
+        : mode === "back"
+          ? 0
+          : mode === "forward"
+            ? base + 1
+            : Math.max(0, base - 1);
+    commitVisualStyles(selector, {
+      position:
+        currentSelectedElement.computedStyles.position === "static"
+          ? "relative"
+          : currentSelectedElement.computedStyles.position || "relative",
+      zIndex: String(next),
+    });
+  };
+
+  const targetId =
+    selectedLayerIdsState.length === 1 ? selectedLayerIdsState[0] : undefined;
+  if (!targetId || !activeFile) {
+    zIndexFallback();
+    return;
+  }
+  const owner = codeLayerOwnerByNodeIdRef.current.get(targetId);
+  if (!owner || owner.fileId !== activeFile.id) {
+    zIndexFallback();
+    return;
+  }
+  const baseContent = getFreshActiveContent();
+  const tree = buildCodeLayerTree(buildCodeLayerProjection(baseContent));
+  const siblingOrder = findCodeLayerSiblingOrder(tree, targetId);
+  if (!siblingOrder || siblingOrder.siblingIds.length < 2) {
+    // Nothing to reorder against (only child, or unresolved) — z-index
+    // is the only lever left.
+    zIndexFallback();
+    return;
+  }
+  const { siblingIds, index, parentId } = siblingOrder;
+  const lastIndex = siblingIds.length - 1;
+
+  // Already at the requested end of the stack — no-op.
+  if (
+    (mode === "front" && index === lastIndex) ||
+    (mode === "back" && index === 0) ||
+    (mode === "forward" && index === lastIndex) ||
+    (mode === "backward" && index === 0)
+  ) {
+    return;
+  }
+
+  let editIntent: MoveNodeEditIntent | null = null;
+  if (mode === "forward") {
+    // Move DOM-after the next sibling (paints one step higher).
+    const nextSiblingId = siblingIds[index + 1];
+    if (nextSiblingId) {
+      editIntent = {
+        kind: "moveNode",
+        target: { nodeId: targetId },
+        anchor: { nodeId: nextSiblingId },
+        placement: "after",
+      };
+    }
+  } else if (mode === "backward") {
+    // Move DOM-before the previous sibling (paints one step lower).
+    const prevSiblingId = siblingIds[index - 1];
+    if (prevSiblingId) {
+      editIntent = {
+        kind: "moveNode",
+        target: { nodeId: targetId },
+        anchor: { nodeId: prevSiblingId },
+        placement: "before",
+      };
+    }
+  } else if (mode === "front") {
+    if (parentId) {
+      editIntent = {
+        kind: "moveNode",
+        target: { nodeId: targetId },
+        anchor: { nodeId: parentId },
+        placement: "inside",
+      };
+    } else {
+      const lastSiblingId = siblingIds[lastIndex];
+      if (lastSiblingId) {
+        editIntent = {
+          kind: "moveNode",
+          target: { nodeId: targetId },
+          anchor: { nodeId: lastSiblingId },
+          placement: "after",
+        };
+      }
+    }
+  } else {
+    const firstSiblingId = siblingIds[0];
+    if (firstSiblingId) {
+      editIntent = {
+        kind: "moveNode",
+        target: { nodeId: targetId },
+        anchor: { nodeId: firstSiblingId },
+        placement: "before",
+      };
+    }
+  }
+
+  if (!editIntent) {
+    zIndexFallback();
+    return;
+  }
+
+  const patch = applyVisualEdit(baseContent, editIntent);
+  if (patch.result.status !== "applied") {
+    zIndexFallback();
+    return;
+  }
+  applyLocalContentUpdate(patch.content, { skipPreview: true });
+  const movedNode = patch.projection.nodes.find(
+    (n) =>
+      n.dataAttributes["data-agent-native-node-id"] === targetId ||
+      n.id === targetId,
+  );
+  if (movedNode) {
+    setSelectedElement(elementInfoFromCodeLayerNode(movedNode));
+  }
+}

package/corpus/templates/design/app/pages/design-editor/commands/commit-relative-style-delta-to-selected-layers.ts

@@ -0,0 +1,176 @@
+import { buildCodeLayerProjection } from "@shared/code-layer";
+import type { Dispatch, RefObject, SetStateAction } from "react";
+
+import type { ElementInfo } from "@/components/design/types";
+import type { ClipboardContentMutationPublication } from "@/lib/clipboard-content-lineage";
+import type {
+  EffectiveCodeLayerState,
+  SelectedLayerTarget,
+} from "@/pages/design-editor/code-layer-state";
+import {
+  bridgeSourceIdForCodeLayerNode,
+  canonicalElementInfoForCodeLayerNode,
+  codeLayerNodeMatchesBridgeTarget,
+  preferredCodeLayerSelector,
+} from "@/pages/design-editor/code-layer-state";
+import type { ResponsiveEditScope } from "@/pages/design-editor/command-types";
+import {
+  applyRelativeDeltaToStyleValue,
+  getFreshActiveFileContent,
+} from "@/pages/design-editor/editor-state";
+import { applyScopedVisualStyleEdit } from "@/pages/design-editor/pending-edits";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface CommitRelativeStyleDeltaToSelectedLayersArgs {
+  activeBreakpointUpperBoundPx: number | null;
+  activeBreakpointWidthStateRef: RefObject<number | undefined>;
+  activeContent: string;
+  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;
+  effectiveCodeLayerStateRef: RefObject<EffectiveCodeLayerState>;
+  getScreenContent: (screenId: string) => string;
+  lastLocalContentRef: RefObject<string | null>;
+  latestActiveContentRef: RefObject<string | null>;
+  responsiveEditScopeRef: RefObject<ResponsiveEditScope>;
+  selectedLayerTargetsRef: RefObject<SelectedLayerTarget[]>;
+  setSelectedElement: Dispatch<SetStateAction<ElementInfo | null>>;
+}
+
+export function runCommitRelativeStyleDeltaToSelectedLayers(
+  {
+    activeBreakpointUpperBoundPx,
+    activeBreakpointWidthStateRef,
+    activeContent,
+    activeFile,
+    applyFileContentUpdate,
+    canEditDesign,
+    effectiveCodeLayerStateRef,
+    getScreenContent,
+    lastLocalContentRef,
+    latestActiveContentRef,
+    responsiveEditScopeRef,
+    selectedLayerTargetsRef,
+    setSelectedElement,
+  }: CommitRelativeStyleDeltaToSelectedLayersArgs,
+  property: string,
+  delta: number,
+) {
+  if (!canEditDesign) return false;
+  const effectiveLayerState = effectiveCodeLayerStateRef.current;
+  const targets = selectedLayerTargetsRef.current.filter(
+    (target) =>
+      !effectiveLayerState.lockedIds.has(target.fileId) &&
+      !effectiveLayerState.hiddenIds.has(target.fileId) &&
+      !effectiveLayerState.lockedIds.has(target.layerId) &&
+      !effectiveLayerState.hiddenIds.has(target.layerId),
+  );
+  if (targets.length <= 1) return false;
+
+  const targetsByFile = new Map<string, SelectedLayerTarget[]>();
+  targets.forEach((target) => {
+    targetsByFile.set(target.fileId, [
+      ...(targetsByFile.get(target.fileId) ?? []),
+      target,
+    ]);
+  });
+
+  let appliedAny = false;
+  const appliedValueByLayerId = new Map<string, string>();
+  targetsByFile.forEach((fileTargets, fileId) => {
+    const baseContent =
+      fileId === activeFile?.id
+        ? getFreshActiveFileContent({
+            activeContent,
+            latestContent: latestActiveContentRef.current,
+            lastLocalContent: lastLocalContentRef.current,
+          })
+        : getScreenContent(fileId);
+    if (!baseContent) return;
+    let nextContent = baseContent;
+    let projection = buildCodeLayerProjection(nextContent);
+    fileTargets.forEach((target) => {
+      const nextValue = applyRelativeDeltaToStyleValue(
+        target.elementInfo.computedStyles[
+          property as keyof typeof target.elementInfo.computedStyles
+        ] as string | undefined,
+        delta,
+      );
+      if (nextValue === null) return;
+      const sourceId = bridgeSourceIdForCodeLayerNode(target.node);
+      const selector = preferredCodeLayerSelector(target.node);
+      const node =
+        projection.nodes.find((candidate) =>
+          codeLayerNodeMatchesBridgeTarget(candidate, selector, sourceId),
+        ) ??
+        projection.nodes.find((candidate) => candidate.id === target.node.id);
+      if (!node) return;
+      // §6.4 — relative-delta commits (mixed-value arrow steps) route
+      // through the same breakpoint scoping as absolute commits.
+      const patch = applyScopedVisualStyleEdit({
+        content: nextContent,
+        target: { nodeId: node.id },
+        property,
+        value: nextValue,
+        upperBoundPx: activeBreakpointUpperBoundPx,
+        lowerBoundPx:
+          responsiveEditScopeRef.current === "only"
+            ? activeBreakpointWidthStateRef.current
+            : null,
+      });
+      if (patch.result.status !== "applied") return;
+      nextContent = patch.content;
+      projection = patch.projection;
+      appliedValueByLayerId.set(target.layerId, nextValue);
+    });
+    if (nextContent === baseContent) return;
+    appliedAny = true;
+    // Same flash-free full-document routing (and same persist caveat) as
+    // commitStylesToSelectedLayers above.
+    applyFileContentUpdate(fileId, nextContent, {
+      forcePreviewFullDocument: fileId === activeFile?.id,
+    });
+  });
+
+  if (appliedAny) {
+    const primaryTarget = targets[targets.length - 1];
+    const primaryValue = primaryTarget
+      ? appliedValueByLayerId.get(primaryTarget.layerId)
+      : undefined;
+    if (primaryTarget && primaryValue !== undefined) {
+      setSelectedElement((previous) => {
+        const previousMatches =
+          previous &&
+          codeLayerNodeMatchesBridgeTarget(
+            primaryTarget.node,
+            previous.selector,
+            previous.sourceId ?? previous.id,
+          );
+        const base = previousMatches
+          ? canonicalElementInfoForCodeLayerNode(previous, primaryTarget.node)
+          : primaryTarget.elementInfo;
+        return {
+          ...base,
+          computedStyles: {
+            ...base.computedStyles,
+            [property]: primaryValue,
+          },
+        };
+      });
+    }
+  }
+
+  return appliedAny;
+}