@agent-native/core 0.163.4 → 0.164.3

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

@@ -0,0 +1,247 @@
+import { useActionMutation } from "@agent-native/core/client/hooks";
+import type { CodeLayerNode, CodeLayerTreeNode } from "@shared/code-layer";
+import { sourceContentHash } from "@shared/source-workspace";
+import type { QueryClient } from "@tanstack/react-query";
+import type { Dispatch, SetStateAction } from "react";
+import { toast } from "sonner";
+
+import type { ClipboardContentMutationPublication } from "@/lib/clipboard-content-lineage";
+import { renameFilenamePreservingExtension } from "@/pages/design-editor/code-layer-state";
+import type { OverviewScreen } from "@/pages/design-editor/derive/overview-screens";
+import { TAB_ID } from "@/pages/design-editor/editor-session";
+import { setCodeLayerAttributeInHtml } from "@/pages/design-editor/html-layer-positioning";
+import { resolveOverviewScreenSourceType } from "@/pages/design-editor/pending-edits";
+import { shouldIncludeScreenRenameContentOverride } from "@/pages/design-editor/selection-state";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface LayerRenameArgs {
+  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;
+  codeLayerOwnerByNodeId: Map<
+    string,
+    {
+      fileId: string;
+      node: CodeLayerNode;
+      tree: CodeLayerTreeNode[];
+      runtimeOnly: boolean;
+    }
+  >;
+  designSourceType: "inline" | "localhost" | "fusion";
+  files: DesignFile[];
+  getFreshActiveContent: () => string;
+  getScreenContent: (screenId: string) => string;
+  id: string | undefined;
+  overviewScreens: OverviewScreen[];
+  queryClient: QueryClient;
+  renameScreenMutation: ReturnType<
+    typeof useActionMutation<undefined, undefined, "rename-screen">
+  >;
+  serverFiles: DesignFile[];
+  setSelectedLayerIdsState: Dispatch<SetStateAction<string[]>>;
+  t: (key: string, options?: Record<string, unknown>) => string;
+}
+
+export function runLayerRename(
+  {
+    activeFile,
+    applyFileContentUpdate,
+    canEditDesign,
+    codeLayerOwnerByNodeId,
+    designSourceType,
+    files,
+    getFreshActiveContent,
+    getScreenContent,
+    id,
+    overviewScreens,
+    queryClient,
+    renameScreenMutation,
+    serverFiles,
+    setSelectedLayerIdsState,
+    t,
+  }: LayerRenameArgs,
+  layerId: string,
+  name: string,
+) {
+  if (!canEditDesign) return;
+  const renamedFile = files.find((file) => file.id === layerId);
+  if (renamedFile) {
+    const nextFilename = renameFilenamePreservingExtension(
+      renamedFile.filename,
+      name,
+    );
+    if (nextFilename === renamedFile.filename) return;
+    const previousFilename = renamedFile.filename;
+    const contentOverrides = serverFiles.flatMap((file) => {
+      const screen = overviewScreens.find(
+        (candidate) => candidate.id === file.id,
+      );
+      if (!screen) return [];
+      const freshContent = getScreenContent(file.id);
+      if (
+        !shouldIncludeScreenRenameContentOverride({
+          fileType: file.fileType,
+          sourceType: resolveOverviewScreenSourceType(screen, designSourceType),
+          persistedContent: file.content,
+          freshContent,
+        })
+      ) {
+        return [];
+      }
+      return [
+        {
+          fileId: file.id,
+          content: freshContent,
+          expectedVersionHash: sourceContentHash(file.content),
+        },
+      ];
+    });
+
+    // Rename is one atomic server mutation: it validates uniqueness and
+    // updates the filename plus every exact data-screen reference (self
+    // links included) in one transaction. Apply the filename optimistically
+    // because it does not rebuild iframe content; the committed HTML
+    // snapshots returned below are then patched into live previews/Yjs in
+    // place, avoiding the old rename -> N independent save race and white
+    // flashes from srcdoc reloads.
+    queryClient.setQueryData(["action", "get-design", { id }], (old: any) => {
+      if (!old || typeof old !== "object" || !Array.isArray(old.files)) {
+        return old;
+      }
+      return {
+        ...old,
+        files: old.files.map((file: DesignFile) =>
+          file.id === layerId ? { ...file, filename: nextFilename } : file,
+        ),
+      };
+    });
+
+    renameScreenMutation.mutate(
+      {
+        id: layerId,
+        name,
+        requestSource: TAB_ID,
+        contentOverrides,
+      } as any,
+      {
+        onSuccess: (rawResult: unknown) => {
+          const result = rawResult as {
+            filename?: string;
+            files?: Array<{
+              id: string;
+              filename: string;
+              content: string;
+              updatedAt: string;
+              contentChanged: boolean;
+            }>;
+          };
+          const committedFiles = Array.isArray(result.files)
+            ? result.files
+            : [];
+          committedFiles.forEach((file) => {
+            if (!file.contentChanged) return;
+            applyFileContentUpdate(file.id, file.content, {
+              forcePreviewFullDocument: true,
+              persist: false,
+              recordHistory: false,
+              updatedAt: file.updatedAt,
+            });
+          });
+          queryClient.setQueryData(
+            ["action", "get-design", { id }],
+            (old: any) => {
+              if (
+                !old ||
+                typeof old !== "object" ||
+                !Array.isArray(old.files)
+              ) {
+                return old;
+              }
+              const committedById = new Map(
+                committedFiles.map((file) => [file.id, file]),
+              );
+              return {
+                ...old,
+                files: old.files.map((file: DesignFile) => {
+                  const committed = committedById.get(file.id);
+                  if (!committed) return file;
+                  return {
+                    ...file,
+                    filename: committed.filename,
+                    content: committed.content,
+                    updatedAt: committed.updatedAt,
+                  };
+                }),
+              };
+            },
+          );
+        },
+        onError: (error) => {
+          // Roll back only this optimistic filename. Do not restore a
+          // whole cached design snapshot because the user or a peer may
+          // have edited content while the mutation was in flight.
+          queryClient.setQueryData(
+            ["action", "get-design", { id }],
+            (old: any) => {
+              if (
+                !old ||
+                typeof old !== "object" ||
+                !Array.isArray(old.files)
+              ) {
+                return old;
+              }
+              return {
+                ...old,
+                files: old.files.map((file: DesignFile) =>
+                  file.id === layerId && file.filename === nextFilename
+                    ? { ...file, filename: previousFilename }
+                    : file,
+                ),
+              };
+            },
+          );
+          void queryClient.invalidateQueries({
+            queryKey: ["action", "get-design", { id }],
+          });
+          toast.error(
+            error instanceof Error ? error.message : t("common.genericError"),
+          );
+        },
+      },
+    );
+    return;
+  }
+
+  const owner = codeLayerOwnerByNodeId.get(layerId);
+  const node = owner?.node;
+  if (!owner || !node) return;
+  const sourceFile = files.find((file) => file.id === owner.fileId);
+  const sourceContent =
+    owner.fileId === activeFile?.id
+      ? getFreshActiveContent()
+      : (sourceFile?.content ?? "");
+  if (!sourceContent) return;
+  const nextContent = setCodeLayerAttributeInHtml(
+    sourceContent,
+    node,
+    "data-agent-native-layer-name",
+    name,
+  );
+  if (!nextContent || nextContent === sourceContent) return;
+  applyFileContentUpdate(owner.fileId, nextContent, {
+    refreshPreview: false,
+  });
+  setSelectedLayerIdsState([layerId]);
+}

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

@@ -0,0 +1,161 @@
+import { isBoardFile } from "@shared/board-file";
+import type { CodeLayerNode, CodeLayerTreeNode } from "@shared/code-layer";
+import type { Dispatch, RefObject, SetStateAction } from "react";
+
+import type { ElementInfo } from "@/components/design/types";
+import type { EffectiveCodeLayerState } from "@/pages/design-editor/code-layer-state";
+import { elementInfoFromCodeLayerNode } from "@/pages/design-editor/code-layer-state";
+import {
+  getOverviewScreenIdsFromLayerSelection,
+  getSidebarCodeLayerSelectionState,
+} from "@/pages/design-editor/selection-state";
+import type {
+  DesignFile,
+  DesignTool,
+  EditorMode,
+} from "@/pages/design-editor/types";
+
+export interface LayerSelectionChangeArgs {
+  activeFile: DesignFile;
+  clearPendingOverviewLayerSelectionTimer: () => void;
+  codeLayerOwnerByNodeId: Map<
+    string,
+    {
+      fileId: string;
+      node: CodeLayerNode;
+      tree: CodeLayerTreeNode[];
+      runtimeOnly: boolean;
+    }
+  >;
+  effectiveCodeLayerState: EffectiveCodeLayerState;
+  files: DesignFile[];
+  focusDesignInspectorForSelection: () => void;
+  overviewSelectedScreenIds: string[];
+  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>>;
+  setOverviewSelectedScreenIds: Dispatch<SetStateAction<string[]>>;
+  setSelectedElement: Dispatch<SetStateAction<ElementInfo | null>>;
+  setSelectedLayerIdsState: Dispatch<SetStateAction<string[]>>;
+  setViewMode: Dispatch<SetStateAction<"single" | "overview">>;
+  viewModeRef: RefObject<"single" | "overview">;
+}
+
+export function runLayerSelectionChange(
+  {
+    activeFile,
+    clearPendingOverviewLayerSelectionTimer,
+    codeLayerOwnerByNodeId,
+    effectiveCodeLayerState,
+    files,
+    focusDesignInspectorForSelection,
+    overviewSelectedScreenIds,
+    pendingOverviewLayerSelectionRef,
+    pendingOverviewScreenSelectionRef,
+    setActiveFileId,
+    setActiveTool,
+    setCreatedOverviewLayerSelection,
+    setMode,
+    setOverviewSelectedScreenIds,
+    setSelectedElement,
+    setSelectedLayerIdsState,
+    setViewMode,
+    viewModeRef,
+  }: LayerSelectionChangeArgs,
+  ids: string[],
+  _intent: {
+    additive: boolean;
+    currentSelectedIds?: string[];
+    id: string;
+    range: boolean;
+  },
+) {
+  const nextLayerIds = ids.filter((layerId) => !layerId.startsWith("__"));
+  pendingOverviewScreenSelectionRef.current = null;
+  pendingOverviewLayerSelectionRef.current = null;
+  clearPendingOverviewLayerSelectionTimer();
+  setCreatedOverviewLayerSelection(null);
+  setSelectedLayerIdsState(nextLayerIds);
+  const screenFileIds = files
+    .filter((file) => !isBoardFile(file.filename))
+    .map((file) => file.id);
+  if (viewModeRef.current === "overview") {
+    setOverviewSelectedScreenIds(
+      getOverviewScreenIdsFromLayerSelection({
+        fileIds: screenFileIds,
+        layerIds: nextLayerIds,
+      }),
+    );
+  }
+  const selectedId = nextLayerIds[nextLayerIds.length - 1];
+  if (!selectedId) {
+    setSelectedElement(null);
+    return;
+  }
+  const codeLayerOwner = codeLayerOwnerByNodeId.get(selectedId);
+  if (codeLayerOwner) {
+    const ownerIsScreenFile = screenFileIds.includes(codeLayerOwner.fileId);
+    if (viewModeRef.current === "overview") {
+      pendingOverviewScreenSelectionRef.current = ownerIsScreenFile
+        ? codeLayerOwner.fileId
+        : null;
+      pendingOverviewLayerSelectionRef.current = selectedId;
+    }
+    if (codeLayerOwner.fileId !== activeFile?.id) {
+      setActiveFileId(codeLayerOwner.fileId);
+    }
+    const nextSelectionState = getSidebarCodeLayerSelectionState({
+      currentViewMode: viewModeRef.current,
+      ownerFileId: codeLayerOwner.fileId,
+      overviewSelectedScreenIds,
+      screenFileIds,
+    });
+    viewModeRef.current = nextSelectionState.viewMode;
+    setViewMode(nextSelectionState.viewMode);
+    if (nextSelectionState.viewMode === "overview") {
+      setOverviewSelectedScreenIds(
+        nextSelectionState.overviewSelectedScreenIds,
+      );
+    }
+    const layerCanvasBlocked =
+      effectiveCodeLayerState.lockedIds.has(codeLayerOwner.fileId) ||
+      effectiveCodeLayerState.hiddenIds.has(codeLayerOwner.fileId) ||
+      effectiveCodeLayerState.lockedIds.has(selectedId) ||
+      effectiveCodeLayerState.hiddenIds.has(selectedId);
+    if (layerCanvasBlocked) {
+      setSelectedElement(null);
+      focusDesignInspectorForSelection();
+      setActiveTool("move");
+      setMode("edit");
+      return;
+    }
+    setSelectedElement(elementInfoFromCodeLayerNode(codeLayerOwner.node));
+    focusDesignInspectorForSelection();
+    setActiveTool("move");
+    setMode("edit");
+    return;
+  }
+  if (selectedId.startsWith("element:")) return;
+  const fileId = selectedId.startsWith("code:")
+    ? selectedId.slice("code:".length)
+    : selectedId;
+  if (files.some((file) => file.id === fileId && !isBoardFile(file.filename))) {
+    setOverviewSelectedScreenIds([fileId]);
+    setActiveFileId(fileId);
+    setSelectedElement(null);
+    setSelectedLayerIdsState(
+      nextLayerIds.some((layerId) => files.some((file) => file.id === layerId))
+        ? nextLayerIds
+        : [fileId],
+    );
+    setActiveTool("move");
+    setMode("edit");
+    viewModeRef.current = "overview";
+    setViewMode("overview");
+  }
+}

package/corpus/templates/design/app/pages/design-editor/commands/mode-change.ts

@@ -0,0 +1,122 @@
+import type { Dispatch, RefObject, SetStateAction } from "react";
+import { toast } from "sonner";
+
+import type { ElementInfo } from "@/components/design/types";
+import type {
+  PendingLiveNonStyleEdit,
+  PendingVisualStyleEdit,
+} from "@/pages/design-editor/pending-edits";
+import { resolveModeChangeView } from "@/pages/design-editor/tool-state";
+import type {
+  DesignFile,
+  DesignTool,
+  EditorMode,
+} from "@/pages/design-editor/types";
+
+export interface ModeChangeArgs {
+  activeFile: DesignFile;
+  canEditDesign: boolean;
+  clearPendingLiveEditState: () => void;
+  enterOverviewFromZoom: (nextMode?: EditorMode) => void;
+  enterSingleScreen: (fileId?: string | null) => void;
+  files: DesignFile[];
+  pendingLiveNonStyleEdits: PendingLiveNonStyleEdit[];
+  pendingVisualStyleEdits: PendingVisualStyleEdit[];
+  requestPendingLiveNonStyleRevert: (
+    edits: readonly PendingLiveNonStyleEdit[],
+  ) => void;
+  requestPendingVisualStyleRevert: (
+    edits: readonly PendingVisualStyleEdit[],
+  ) => void;
+  setActiveFileId: Dispatch<SetStateAction<string | null>>;
+  setActiveTool: Dispatch<SetStateAction<DesignTool>>;
+  setDrawMode: Dispatch<SetStateAction<boolean>>;
+  setMode: Dispatch<SetStateAction<EditorMode>>;
+  setPinMode: Dispatch<SetStateAction<boolean>>;
+  setSelectedElement: Dispatch<SetStateAction<ElementInfo | null>>;
+  t: (key: string, options?: Record<string, unknown>) => string;
+  viewModeRef: RefObject<"single" | "overview">;
+}
+
+export function runModeChange(
+  {
+    activeFile,
+    canEditDesign,
+    clearPendingLiveEditState,
+    enterOverviewFromZoom,
+    enterSingleScreen,
+    files,
+    pendingLiveNonStyleEdits,
+    pendingVisualStyleEdits,
+    requestPendingLiveNonStyleRevert,
+    requestPendingVisualStyleRevert,
+    setActiveFileId,
+    setActiveTool,
+    setDrawMode,
+    setMode,
+    setPinMode,
+    setSelectedElement,
+    t,
+    viewModeRef,
+  }: ModeChangeArgs,
+  next: EditorMode,
+  options?: {
+    discardPendingLiveEdits?: boolean;
+    pendingLiveEditsAlreadyHandled?: boolean;
+    targetFileId?: string;
+  },
+) {
+  const nextActiveFile = options?.targetFileId
+    ? files.find((file) => file.id === options.targetFileId)
+    : activeFile;
+  if (!canEditDesign && next === "annotate") return;
+  if ((next === "annotate" || next === "interact") && !nextActiveFile) {
+    return;
+  }
+  if (
+    next === "interact" &&
+    (pendingVisualStyleEdits.length > 0 ||
+      pendingLiveNonStyleEdits.length > 0) &&
+    !options?.discardPendingLiveEdits &&
+    !options?.pendingLiveEditsAlreadyHandled
+  ) {
+    toast.error(t("designEditor.pendingVisualStyles.interactBlocked"));
+    return;
+  }
+  if (options?.discardPendingLiveEdits) {
+    requestPendingVisualStyleRevert(pendingVisualStyleEdits);
+    requestPendingLiveNonStyleRevert(pendingLiveNonStyleEdits);
+    clearPendingLiveEditState();
+  }
+
+  const routing = resolveModeChangeView({
+    next,
+    viewMode: viewModeRef.current,
+  });
+  if (routing === "enter-single-interact") {
+    enterSingleScreen(nextActiveFile?.id);
+    return;
+  }
+  if (routing === "enter-overview") {
+    if (options?.targetFileId) setActiveFileId(options.targetFileId);
+    enterOverviewFromZoom(next);
+    return;
+  }
+  if (options?.targetFileId) setActiveFileId(options.targetFileId);
+  setMode(next);
+  setSelectedElement(null);
+
+  if (next === "annotate") {
+    setActiveTool("draw");
+    setDrawMode(true);
+    setPinMode(false);
+  } else if (next === "interact") {
+    setActiveTool("move");
+    setDrawMode(false);
+    setPinMode(false);
+  } else {
+    setActiveTool("move");
+    setDrawMode(false);
+    setPinMode(false);
+  }
+}