@agent-native/core 0.163.4 → 0.164.1

package/corpus/templates/design/app/pages/design-editor/commands/record-pending-live-layer-state-edit.ts

@@ -0,0 +1,149 @@
+import type { CodeLayerNode, CodeLayerTreeNode } from "@shared/code-layer";
+import type { Dispatch, RefObject, SetStateAction } from "react";
+
+import { prettyScreenName } from "@/lib/screen-names";
+import {
+  bridgeSourceIdForCodeLayerNode,
+  elementInfoFromCodeLayerNode,
+  preferredCodeLayerSelector,
+} from "@/pages/design-editor/code-layer-state";
+import type {
+  PendingStructureVerificationStatus,
+  RuntimeLayerSnapshot,
+} from "@/pages/design-editor/command-types";
+import type { OverviewScreen } from "@/pages/design-editor/derive/overview-screens";
+import { runtimeMultiplicityForElementProvenance } from "@/pages/design-editor/editor-helpers";
+import type { ContentHistoryChange } from "@/pages/design-editor/history";
+import { MAX_DESIGN_UNDO_STACK } from "@/pages/design-editor/history";
+import type {
+  PendingLiveLayerStateEdit,
+  PendingLiveNonStyleEdit,
+  PendingLiveNonStyleUndoEntry,
+  PendingVisualStyleUndoEntry,
+} from "@/pages/design-editor/pending-edits";
+import {
+  mergePendingLiveNonStyleEdits,
+  pendingLiveLayerStateUndoRevertValue,
+  reactSourceAnchorForPendingEdit,
+  resolveOverviewScreenSourceType,
+} from "@/pages/design-editor/pending-edits";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface RecordPendingLiveLayerStateEditArgs {
+  canEditDesign: boolean;
+  cancelPendingStructureVerification: (
+    nextStatus?: PendingStructureVerificationStatus,
+  ) => void;
+  clipboardPasteRedoStackRef: RefObject<ContentHistoryChange[]>;
+  codeLayerOwnerByNodeIdRef: RefObject<
+    Map<
+      string,
+      {
+        fileId: string;
+        node: CodeLayerNode;
+        tree: CodeLayerTreeNode[];
+        runtimeOnly: boolean;
+      }
+    >
+  >;
+  files: DesignFile[];
+  localhostConnectionRootPathByIdRef: RefObject<Map<string, string>>;
+  overviewScreens: OverviewScreen[];
+  pendingLiveNonStyleEditsRef: RefObject<PendingLiveNonStyleEdit[]>;
+  pendingLiveNonStyleRedoStackRef: RefObject<PendingLiveNonStyleUndoEntry[]>;
+  pendingLiveNonStyleUndoStackRef: RefObject<PendingLiveNonStyleUndoEntry[]>;
+  pendingVisualStyleRedoStackRef: RefObject<PendingVisualStyleUndoEntry[]>;
+  runtimeLayerSnapshotsById: Record<string, RuntimeLayerSnapshot>;
+  setPendingLiveNonStyleEdits: Dispatch<
+    SetStateAction<PendingLiveNonStyleEdit[]>
+  >;
+}
+
+export function runRecordPendingLiveLayerStateEdit(
+  {
+    canEditDesign,
+    cancelPendingStructureVerification,
+    clipboardPasteRedoStackRef,
+    codeLayerOwnerByNodeIdRef,
+    files,
+    localhostConnectionRootPathByIdRef,
+    overviewScreens,
+    pendingLiveNonStyleEditsRef,
+    pendingLiveNonStyleRedoStackRef,
+    pendingLiveNonStyleUndoStackRef,
+    pendingVisualStyleRedoStackRef,
+    runtimeLayerSnapshotsById,
+    setPendingLiveNonStyleEdits,
+  }: RecordPendingLiveLayerStateEditArgs,
+  layerId: string,
+  state: "hidden" | "locked",
+  enabled: boolean,
+  originalEnabled: boolean,
+) {
+  if (!canEditDesign) return false;
+  const owner = codeLayerOwnerByNodeIdRef.current.get(layerId);
+  if (!owner) return false;
+  const screen = overviewScreens.find(
+    (candidate) => candidate.id === owner.fileId,
+  );
+  if (resolveOverviewScreenSourceType(screen) !== "localhost") {
+    return false;
+  }
+  const info = elementInfoFromCodeLayerNode(owner.node);
+  const sourceId = bridgeSourceIdForCodeLayerNode(owner.node);
+  const selector = preferredCodeLayerSelector(owner.node);
+  const rootPath = screen?.connectionId
+    ? localhostConnectionRootPathByIdRef.current.get(screen.connectionId)
+    : undefined;
+  const fallbackName =
+    files.find((file) => file.id === owner.fileId)?.filename ?? owner.fileId;
+  const nextEdit: PendingLiveLayerStateEdit = {
+    kind: "layer-state",
+    screenId: owner.fileId,
+    filename: fallbackName,
+    screenName: prettyScreenName(fallbackName),
+    layerId,
+    selector,
+    sourceId,
+    sourceAnchor: reactSourceAnchorForPendingEdit({
+      info,
+      id: sourceId,
+      rootPath,
+      runtimeMultiplicity: runtimeMultiplicityForElementProvenance(
+        runtimeLayerSnapshotsById,
+        info,
+      ),
+      reason: `Pending live ${state} state for layer ${layerId} in screen ${owner.fileId}.`,
+    }),
+    tagName: info.tagName ?? null,
+    classes: info.classes ?? [],
+    state,
+    enabled,
+    originalEnabled,
+    updatedAt: Date.now(),
+  };
+  const revertEnabled = pendingLiveLayerStateUndoRevertValue(
+    pendingLiveNonStyleEditsRef.current,
+    nextEdit,
+  );
+  cancelPendingStructureVerification("conflict");
+  pendingLiveNonStyleRedoStackRef.current = [];
+  pendingVisualStyleRedoStackRef.current = [];
+  clipboardPasteRedoStackRef.current = [];
+  pendingLiveNonStyleUndoStackRef.current = [
+    ...pendingLiveNonStyleUndoStackRef.current.slice(
+      -(MAX_DESIGN_UNDO_STACK - 1),
+    ),
+    {
+      kind: "layer-state",
+      edit: nextEdit,
+      revertEnabled,
+    },
+  ];
+  const nextPending = mergePendingLiveNonStyleEdits(
+    pendingLiveNonStyleUndoStackRef.current.map((entry) => entry.edit),
+  );
+  pendingLiveNonStyleEditsRef.current = nextPending;
+  setPendingLiveNonStyleEdits(nextPending);
+  return true;
+}

package/corpus/templates/design/app/pages/design-editor/commands/record-pending-live-structure-edit.ts

@@ -0,0 +1,200 @@
+import type { Dispatch, RefObject, SetStateAction } from "react";
+
+import type { ElementInfo } from "@/components/design/types";
+import { prettyScreenName } from "@/lib/screen-names";
+import type {
+  PendingStructureVerificationStatus,
+  RuntimeLayerSnapshot,
+} from "@/pages/design-editor/command-types";
+import type { OverviewScreen } from "@/pages/design-editor/derive/overview-screens";
+import { runtimeMultiplicityForElementProvenance } from "@/pages/design-editor/editor-helpers";
+import { MAX_DESIGN_UNDO_STACK } from "@/pages/design-editor/history";
+import type {
+  PendingLiveNonStyleEdit,
+  PendingLiveNonStyleUndoEntry,
+  PendingLiveStructureEdit,
+  PendingLiveStructureUndoEntry,
+  PendingVisualStyleUndoEntry,
+} from "@/pages/design-editor/pending-edits";
+import {
+  mergePendingLiveNonStyleEdits,
+  pendingLiveStructureEditsMatch,
+  projectRelativeSourcePath,
+  reactSourceAnchorForPendingEdit,
+} from "@/pages/design-editor/pending-edits";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface RecordPendingLiveStructureEditArgs {
+  canEditDesign: boolean;
+  cancelPendingStructureVerification: (
+    nextStatus?: PendingStructureVerificationStatus,
+  ) => void;
+  files: DesignFile[];
+  localhostConnectionRootPathByIdRef: RefObject<Map<string, string>>;
+  overviewScreens: OverviewScreen[];
+  pendingLiveNonStyleEditsRef: RefObject<PendingLiveNonStyleEdit[]>;
+  pendingLiveNonStyleRedoStackRef: RefObject<PendingLiveNonStyleUndoEntry[]>;
+  pendingLiveNonStyleUndoStackRef: RefObject<PendingLiveNonStyleUndoEntry[]>;
+  pendingStructureRedoReplayRef: RefObject<
+    PendingLiveStructureUndoEntry | undefined
+  >;
+  pendingStructureRedoReplayTimerRef: RefObject<number | undefined>;
+  pendingVisualStyleRedoStackRef: RefObject<PendingVisualStyleUndoEntry[]>;
+  runtimeLayerSnapshotsById: Record<string, RuntimeLayerSnapshot>;
+  setPendingLiveNonStyleEdits: Dispatch<
+    SetStateAction<PendingLiveNonStyleEdit[]>
+  >;
+}
+
+export function runRecordPendingLiveStructureEdit(
+  {
+    canEditDesign,
+    cancelPendingStructureVerification,
+    files,
+    localhostConnectionRootPathByIdRef,
+    overviewScreens,
+    pendingLiveNonStyleEditsRef,
+    pendingLiveNonStyleRedoStackRef,
+    pendingLiveNonStyleUndoStackRef,
+    pendingStructureRedoReplayRef,
+    pendingStructureRedoReplayTimerRef,
+    pendingVisualStyleRedoStackRef,
+    runtimeLayerSnapshotsById,
+    setPendingLiveNonStyleEdits,
+  }: RecordPendingLiveStructureEditArgs,
+  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;
+    /** The inserted markup replaced this subject as one live gesture. */
+    replaced?: true;
+    replacementSelector?: string;
+    replacementSourceId?: string;
+    /** This change DELETED the subject; it has no anchor. */
+    removed?: true;
+  },
+) {
+  if (!canEditDesign) return;
+  cancelPendingStructureVerification("conflict");
+  const screen = files.find((file) => file.id === screenId);
+  const overviewScreen = overviewScreens.find(
+    (candidate) => candidate.id === screenId,
+  );
+  const connectionRootPath = overviewScreen?.connectionId
+    ? localhostConnectionRootPathByIdRef.current.get(
+        overviewScreen.connectionId,
+      )
+    : undefined;
+  const routeSourceFile = projectRelativeSourcePath({
+    sourceFile: overviewScreen?.sourceFile,
+    rootPath: connectionRootPath,
+  });
+  const fallbackName = screen?.filename ?? screenId;
+  const nextEdit: PendingLiveStructureEdit = {
+    kind: "structure",
+    screenId,
+    filename: fallbackName,
+    screenName: prettyScreenName(fallbackName),
+    selector,
+    sourceId: details?.sourceId ?? elementInfo?.sourceId ?? null,
+    sourceAnchor: reactSourceAnchorForPendingEdit({
+      info: elementInfo,
+      id: details?.sourceId ?? elementInfo?.sourceId,
+      rootPath: (() => {
+        const connectionId = overviewScreens.find(
+          (candidate) => candidate.id === screenId,
+        )?.connectionId;
+        return connectionId
+          ? localhostConnectionRootPathByIdRef.current.get(connectionId)
+          : undefined;
+      })(),
+      runtimeMultiplicity: runtimeMultiplicityForElementProvenance(
+        runtimeLayerSnapshotsById,
+        elementInfo,
+      ),
+    }),
+    anchorSelector,
+    anchorSourceId: details?.anchorSourceId ?? null,
+    anchorSourceAnchor: reactSourceAnchorForPendingEdit({
+      info: details?.anchorElementInfo,
+      id: details?.anchorSourceId,
+      rootPath: (() => {
+        const connectionId = overviewScreens.find(
+          (candidate) => candidate.id === screenId,
+        )?.connectionId;
+        return connectionId
+          ? localhostConnectionRootPathByIdRef.current.get(connectionId)
+          : undefined;
+      })(),
+      runtimeMultiplicity: runtimeMultiplicityForElementProvenance(
+        runtimeLayerSnapshotsById,
+        details?.anchorElementInfo,
+      ),
+    }),
+    placement,
+    ...(routeSourceFile ? { routeSourceFile } : {}),
+    dropMode: details?.dropMode,
+    forceFlowPositionOverride: details?.forceFlowPositionOverride,
+    sourceRect: details?.sourceRect,
+    anchorRect: details?.anchorRect,
+    insertedHtml: details?.insertedHtml,
+    ...(details?.replaced
+      ? {
+          replaced: true as const,
+          replacementSelector: details.replacementSelector,
+          replacementSourceId: details.replacementSourceId,
+        }
+      : {}),
+    ...(details?.removed ? { removed: true as const } : {}),
+    requestId: details?.requestId,
+    updatedAt: Date.now(),
+  };
+  const structureRedoReplay = pendingStructureRedoReplayRef.current;
+  const replaysUndoneStructure = Boolean(
+    structureRedoReplay &&
+    pendingLiveStructureEditsMatch(structureRedoReplay.edit, nextEdit),
+  );
+  if (replaysUndoneStructure && structureRedoReplay) {
+    pendingStructureRedoReplayRef.current = undefined;
+    if (pendingStructureRedoReplayTimerRef.current !== undefined) {
+      window.clearTimeout(pendingStructureRedoReplayTimerRef.current);
+      pendingStructureRedoReplayTimerRef.current = undefined;
+    }
+    const redoStack = pendingLiveNonStyleRedoStackRef.current;
+    if (redoStack[redoStack.length - 1] === structureRedoReplay) {
+      pendingLiveNonStyleRedoStackRef.current = redoStack.slice(0, -1);
+    }
+  } else {
+    pendingLiveNonStyleRedoStackRef.current = [];
+    pendingStructureRedoReplayRef.current = undefined;
+    if (pendingStructureRedoReplayTimerRef.current !== undefined) {
+      window.clearTimeout(pendingStructureRedoReplayTimerRef.current);
+      pendingStructureRedoReplayTimerRef.current = undefined;
+    }
+    pendingVisualStyleRedoStackRef.current = [];
+  }
+  pendingLiveNonStyleUndoStackRef.current = [
+    ...pendingLiveNonStyleUndoStackRef.current.slice(
+      -(MAX_DESIGN_UNDO_STACK - 1),
+    ),
+    { kind: "structure", edit: nextEdit },
+  ];
+  const nextPending = mergePendingLiveNonStyleEdits(
+    pendingLiveNonStyleUndoStackRef.current.map((entry) => entry.edit),
+  );
+  pendingLiveNonStyleEditsRef.current = nextPending;
+  setPendingLiveNonStyleEdits(nextPending);
+}

package/corpus/templates/design/app/pages/design-editor/commands/record-pending-live-text-edit.ts

@@ -0,0 +1,152 @@
+import type { Dispatch, RefObject, SetStateAction } from "react";
+
+import type { ElementInfo } from "@/components/design/types";
+import { prettyScreenName } from "@/lib/screen-names";
+import type {
+  PendingStructureVerificationStatus,
+  RuntimeLayerSnapshot,
+} from "@/pages/design-editor/command-types";
+import type { OverviewScreen } from "@/pages/design-editor/derive/overview-screens";
+import { runtimeMultiplicityForElementProvenance } from "@/pages/design-editor/editor-helpers";
+import { MAX_DESIGN_UNDO_STACK } from "@/pages/design-editor/history";
+import type {
+  PendingLiveNonStyleEdit,
+  PendingLiveNonStyleUndoEntry,
+  PendingLiveStructureUndoEntry,
+  PendingLiveTextEdit,
+  PendingVisualStyleUndoEntry,
+} from "@/pages/design-editor/pending-edits";
+import {
+  mergePendingLiveNonStyleEdits,
+  pendingLiveTextUndoRevertValue,
+  reactSourceAnchorForPendingEdit,
+} from "@/pages/design-editor/pending-edits";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface RecordPendingLiveTextEditArgs {
+  activeFile: DesignFile;
+  canEditDesign: boolean;
+  cancelPendingStructureVerification: (
+    nextStatus?: PendingStructureVerificationStatus,
+  ) => void;
+  files: DesignFile[];
+  localhostConnectionRootPathByIdRef: RefObject<Map<string, string>>;
+  overviewScreens: OverviewScreen[];
+  pendingLiveNonStyleEditsRef: RefObject<PendingLiveNonStyleEdit[]>;
+  pendingLiveNonStyleRedoStackRef: RefObject<PendingLiveNonStyleUndoEntry[]>;
+  pendingLiveNonStyleUndoStackRef: RefObject<PendingLiveNonStyleUndoEntry[]>;
+  pendingStructureRedoReplayRef: RefObject<
+    PendingLiveStructureUndoEntry | undefined
+  >;
+  pendingStructureRedoReplayTimerRef: RefObject<number | undefined>;
+  pendingVisualStyleRedoStackRef: RefObject<PendingVisualStyleUndoEntry[]>;
+  runtimeLayerSnapshotsById: Record<string, RuntimeLayerSnapshot>;
+  selectedElement: ElementInfo | null;
+  setPendingLiveNonStyleEdits: Dispatch<
+    SetStateAction<PendingLiveNonStyleEdit[]>
+  >;
+}
+
+export function runRecordPendingLiveTextEdit(
+  {
+    activeFile,
+    canEditDesign,
+    cancelPendingStructureVerification,
+    files,
+    localhostConnectionRootPathByIdRef,
+    overviewScreens,
+    pendingLiveNonStyleEditsRef,
+    pendingLiveNonStyleRedoStackRef,
+    pendingLiveNonStyleUndoStackRef,
+    pendingStructureRedoReplayRef,
+    pendingStructureRedoReplayTimerRef,
+    pendingVisualStyleRedoStackRef,
+    runtimeLayerSnapshotsById,
+    selectedElement,
+    setPendingLiveNonStyleEdits,
+  }: RecordPendingLiveTextEditArgs,
+  screenId: string,
+  selector: string,
+  value: string,
+  elementInfo?: ElementInfo,
+  details?: {
+    html?: string;
+    originalValue?: string;
+    originalHtml?: string;
+  },
+) {
+  if (!canEditDesign) return;
+  const screen = files.find((file) => file.id === screenId);
+  const fallbackName = screen?.filename ?? screenId;
+  const sourceId =
+    elementInfo?.sourceId ??
+    (screenId === activeFile?.id ? selectedElement?.sourceId : null);
+  cancelPendingStructureVerification("conflict");
+  pendingLiveNonStyleRedoStackRef.current = [];
+  pendingStructureRedoReplayRef.current = undefined;
+  if (pendingStructureRedoReplayTimerRef.current !== undefined) {
+    window.clearTimeout(pendingStructureRedoReplayTimerRef.current);
+    pendingStructureRedoReplayTimerRef.current = undefined;
+  }
+  pendingVisualStyleRedoStackRef.current = [];
+  const originalValue =
+    details?.originalValue ??
+    elementInfo?.textContent ??
+    (screenId === activeFile?.id ? selectedElement?.textContent : "") ??
+    "";
+  const originalHtml =
+    details?.originalHtml ??
+    elementInfo?.htmlContent ??
+    (screenId === activeFile?.id ? selectedElement?.htmlContent : undefined);
+  const nextEdit: PendingLiveTextEdit = {
+    kind: "text",
+    screenId,
+    filename: fallbackName,
+    screenName: prettyScreenName(fallbackName),
+    selector,
+    sourceId,
+    sourceAnchor: reactSourceAnchorForPendingEdit({
+      info: elementInfo,
+      id: sourceId ?? undefined,
+      rootPath: (() => {
+        const connectionId = overviewScreens.find(
+          (candidate) => candidate.id === screenId,
+        )?.connectionId;
+        return connectionId
+          ? localhostConnectionRootPathByIdRef.current.get(connectionId)
+          : undefined;
+      })(),
+      runtimeMultiplicity: runtimeMultiplicityForElementProvenance(
+        runtimeLayerSnapshotsById,
+        elementInfo,
+      ),
+    }),
+    tagName: elementInfo?.tagName ?? null,
+    classes: elementInfo?.classes ?? [],
+    value,
+    html: details?.html,
+    originalValue,
+    originalHtml,
+    updatedAt: Date.now(),
+  };
+  const revert = pendingLiveTextUndoRevertValue(
+    pendingLiveNonStyleEditsRef.current,
+    nextEdit,
+  );
+  pendingLiveNonStyleUndoStackRef.current = [
+    ...pendingLiveNonStyleUndoStackRef.current.slice(
+      -(MAX_DESIGN_UNDO_STACK - 1),
+    ),
+    {
+      kind: "text",
+      edit: nextEdit,
+      revertValue: revert.value,
+      revertHtml: revert.html,
+    },
+  ];
+  const nextPending = mergePendingLiveNonStyleEdits(
+    pendingLiveNonStyleUndoStackRef.current.map((entry) => entry.edit),
+  );
+  pendingLiveNonStyleEditsRef.current = nextPending;
+  setPendingLiveNonStyleEdits(nextPending);
+}