@agent-native/core 0.163.4 → 0.164.3

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

@@ -0,0 +1,201 @@
+import {
+  applyVisualEdit,
+  buildCodeLayerProjection,
+  removeCodeLayerNodeFromHtml,
+} from "@shared/code-layer";
+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 { updateElementContentInHtml } from "@/pages/design-editor/text-edit-utils";
+import type {
+  DesignFile,
+  DesignTool,
+  EditorMode,
+} from "@/pages/design-editor/types";
+
+export interface TextContentChangeArgs {
+  activeCanvasSourceType: "inline" | "localhost" | "fusion";
+  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;
+  finalizePendingTextCreation: (
+    fileId: string,
+    nodeIds: readonly (string | null | undefined)[],
+    finalContent: string,
+  ) => boolean;
+  getFreshActiveContent: () => string;
+  liveScreenSnapshotsById: Record<string, LiveScreenSnapshot>;
+  recordPendingLiveTextEdit: (
+    screenId: string,
+    selector: string,
+    value: string,
+    elementInfo?: ElementInfo,
+    details?: { html?: string; originalValue?: string; originalHtml?: string },
+  ) => void;
+  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 runTextContentChange(
+  {
+    activeCanvasSourceType,
+    activeFile,
+    applyLocalContentUpdate,
+    canEditDesign,
+    finalizePendingTextCreation,
+    getFreshActiveContent,
+    liveScreenSnapshotsById,
+    recordPendingLiveTextEdit,
+    setActiveTool,
+    setMode,
+    setSelectedElement,
+    setSelectedLayerIdsState,
+    t,
+    updateLiveScreenSnapshotContent,
+  }: TextContentChangeArgs,
+  selector: string,
+  value: string,
+  elementInfo?: ElementInfo,
+  details?: {
+    html?: string;
+    originalValue?: string;
+    originalHtml?: string;
+  },
+) {
+  if (!canEditDesign) return;
+  if (!activeFile) return;
+  if (activeCanvasSourceType === "localhost") {
+    recordPendingLiveTextEdit(
+      activeFile.id,
+      selector,
+      value,
+      elementInfo,
+      details,
+    );
+    setActiveTool("move");
+    setMode("edit");
+    return;
+  }
+  const activeLiveSnapshot = liveScreenSnapshotsById[activeFile.id];
+  const baseContent = activeLiveSnapshot?.html ?? getFreshActiveContent();
+  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(
+    activeFile.id,
+    [
+      elementInfo?.sourceId,
+      targetNode?.id,
+      targetNode ? bridgeSourceIdForCodeLayerNode(targetNode) : null,
+    ],
+    nextContent,
+  );
+  if (activeLiveSnapshot) {
+    updateLiveScreenSnapshotContent(activeFile.id, nextContent, {
+      recordHistory: !finalizedCreation,
+    });
+  } else {
+    applyLocalContentUpdate(nextContent, {
+      skipPreview: true,
+      recordHistory: !finalizedCreation,
+    });
+  }
+  // T8: committing text editing should return to the move tool (matches
+  // the creation path, which already does this), not re-arm the text
+  // tool — re-arming it meant every subsequent click anywhere on the
+  // canvas started ANOTHER new text box instead of selecting/moving.
+  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/tidy-up.ts

@@ -0,0 +1,123 @@
+import type {
+  CanvasFrameGeometry,
+  CanvasFrameGeometryById,
+} from "@shared/canvas-frames";
+import type { CodeLayerNode } from "@shared/code-layer";
+import { buildCodeLayerProjection } from "@shared/code-layer";
+import type { RefObject } from "react";
+
+import { getInitialFrameGeometry } from "@/components/design/multi-screen/frame-geometry";
+import type { FrameGeometry } from "@/components/design/multi-screen/types";
+import type { OverviewScreen } from "@/pages/design-editor/derive/overview-screens";
+import {
+  cloneCanvasFrameGeometry,
+  getCanvasFrameGeometry,
+} from "@/pages/design-editor/design-data-geometry-utils";
+import type { AlignableRect } from "@/pages/design-editor/layout-operations";
+import { computeTidyPositions } from "@/pages/design-editor/layout-operations";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface TidyUpArgs {
+  activeFile: DesignFile;
+  boardFileId: string | undefined;
+  boardFrameGeometry: FrameGeometry | undefined;
+  canEditDesign: boolean;
+  commitNodePositions: (
+    baseContent: string,
+    positions: ReadonlyMap<string, { x: number; y: number }>,
+  ) => boolean;
+  designDataJsonRef: RefObject<Record<string, unknown>>;
+  getActiveFileSelectedNodeIds: (content: string) => string[];
+  getFreshActiveContent: () => string;
+  getScreenGroupFootprint: (
+    screenId: string,
+    geometry: CanvasFrameGeometry,
+    breakpointWidthsOverride?: readonly number[],
+  ) => { x: number; y: number; width: number; height: number };
+  handleGeometryCommit: (
+    before: CanvasFrameGeometryById,
+    after: CanvasFrameGeometryById,
+    options?: { source?: "pointer" | "keyboard" },
+  ) => void;
+  overviewScreens: OverviewScreen[];
+  overviewSelectedScreenIds: string[];
+  rectFromCodeLayerNode: (node: CodeLayerNode) => AlignableRect;
+  viewModeRef: RefObject<"single" | "overview">;
+}
+
+export function runTidyUp({
+  activeFile,
+  boardFileId,
+  boardFrameGeometry,
+  canEditDesign,
+  commitNodePositions,
+  designDataJsonRef,
+  getActiveFileSelectedNodeIds,
+  getFreshActiveContent,
+  getScreenGroupFootprint,
+  handleGeometryCommit,
+  overviewScreens,
+  overviewSelectedScreenIds,
+  rectFromCodeLayerNode,
+  viewModeRef,
+}: TidyUpArgs) {
+  if (!canEditDesign) return;
+
+  if (viewModeRef.current === "overview") {
+    if (overviewSelectedScreenIds.length === 0) return;
+    const before = getCanvasFrameGeometry(designDataJsonRef.current);
+    const screenRects: AlignableRect[] = [];
+    overviewSelectedScreenIds.forEach((screenId) => {
+      const screenIndex = overviewScreens.findIndex(
+        (screen) => screen.id === screenId,
+      );
+      const screen =
+        screenIndex >= 0 ? overviewScreens[screenIndex] : undefined;
+      const fallbackGeometry =
+        screenIndex >= 0
+          ? getInitialFrameGeometry(screenIndex, {
+              width: screen?.width ?? 1280,
+              height: screen?.height ?? 2560,
+            })
+          : boardFileId === screenId
+            ? boardFrameGeometry
+            : undefined;
+      if (!fallbackGeometry) return;
+      const geometry = { ...fallbackGeometry, ...before[screenId] };
+      // Pack against the breakpoint group's footprint, not just the base
+      // frame — otherwise tidy leaves every breakpoint row overlapping the
+      // neighbouring screen.
+      const footprint = getScreenGroupFootprint(screenId, geometry);
+      screenRects.push({
+        id: screenId,
+        x: footprint.x,
+        y: footprint.y,
+        width: footprint.width,
+        height: footprint.height,
+      });
+    });
+    if (screenRects.length === 0) return;
+    const positions = computeTidyPositions(screenRects);
+    if (positions.size === 0) return;
+    const after = cloneCanvasFrameGeometry(before);
+    positions.forEach((position, screenId) => {
+      after[screenId] = { ...after[screenId]!, ...position };
+    });
+    handleGeometryCommit(before, after);
+    return;
+  }
+
+  if (!activeFile) return;
+  const baseContent = getFreshActiveContent();
+  const nodeIds = getActiveFileSelectedNodeIds(baseContent);
+  if (nodeIds.length === 0) return;
+  const projection = buildCodeLayerProjection(baseContent);
+  const nodesById = new Map(projection.nodes.map((node) => [node.id, node]));
+  const selectedNodes = nodeIds
+    .map((nodeId) => nodesById.get(nodeId))
+    .filter((node): node is CodeLayerNode => Boolean(node));
+  if (selectedNodes.length === 0) return;
+  const selectedRects = selectedNodes.map(rectFromCodeLayerNode);
+  const positions = computeTidyPositions(selectedRects);
+  commitNodePositions(baseContent, positions);
+}

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

@@ -0,0 +1,167 @@
+import type { CodeLayerNode, CodeLayerTreeNode } from "@shared/code-layer";
+import { buildCodeLayerProjection } from "@shared/code-layer";
+
+import type { ClipboardContentMutationPublication } from "@/lib/clipboard-content-lineage";
+import type { LiveScreenSnapshot } from "@/pages/design-editor/command-types";
+import type { OverviewScreen } from "@/pages/design-editor/derive/overview-screens";
+import { setCodeLayerAttributeInHtml } from "@/pages/design-editor/html-layer-positioning";
+import { hasScopedLayerState } from "@/pages/design-editor/layer-state-scope";
+import { resolveOverviewScreenSourceType } from "@/pages/design-editor/pending-edits";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface ToggleLayerHiddenArgs {
+  activeFile: DesignFile;
+  applyFileContentUpdate: (
+    fileId: string,
+    nextContent: string,
+    options?: {
+      refreshPreview?: boolean;
+      skipPreview?: boolean;
+      forcePreviewFullDocument?: boolean;
+      persist?: boolean;
+      recordHistory?: boolean;
+      updatedAt?: string;
+      clipboardMutation?: ClipboardContentMutationPublication;
+    },
+  ) => void;
+  applyLayerStatePreview: (
+    screenId: string,
+    layerId: string,
+    state: "hidden" | "locked",
+    enabled: boolean,
+  ) => void;
+  canEditDesign: boolean;
+  codeLayerOwnerByNodeId: Map<
+    string,
+    {
+      fileId: string;
+      node: CodeLayerNode;
+      tree: CodeLayerTreeNode[];
+      runtimeOnly: boolean;
+    }
+  >;
+  designSourceType: "inline" | "localhost" | "fusion";
+  files: DesignFile[];
+  getFreshActiveContent: () => string;
+  hiddenLayerIds: Set<string>;
+  liveScreenSnapshotsById: Record<string, LiveScreenSnapshot>;
+  overviewScreens: OverviewScreen[];
+  recordPendingLiveLayerStateEdit: (
+    layerId: string,
+    state: "hidden" | "locked",
+    enabled: boolean,
+    originalEnabled: boolean,
+  ) => boolean;
+  sendRuntimeLayerStateSemanticHandoff: (
+    layerId: string,
+    state: "locked" | "hidden",
+    enabled: boolean,
+  ) => true | "preview-only" | false;
+  syncLiveScreenSnapshotPreview: (screenId: string, html: string) => void;
+  updateLiveScreenSnapshotContent: (
+    screenId: string,
+    html: string,
+    options?: { recordHistory?: boolean },
+  ) => boolean;
+}
+
+export function runToggleLayerHidden(
+  {
+    activeFile,
+    applyFileContentUpdate,
+    applyLayerStatePreview,
+    canEditDesign,
+    codeLayerOwnerByNodeId,
+    designSourceType,
+    files,
+    getFreshActiveContent,
+    hiddenLayerIds,
+    liveScreenSnapshotsById,
+    overviewScreens,
+    recordPendingLiveLayerStateEdit,
+    sendRuntimeLayerStateSemanticHandoff,
+    syncLiveScreenSnapshotPreview,
+    updateLiveScreenSnapshotContent,
+  }: ToggleLayerHiddenArgs,
+  layerId: string,
+  hidden: boolean,
+) {
+  if (!canEditDesign) return;
+  const owner = codeLayerOwnerByNodeId.get(layerId);
+  const layerScreenId =
+    owner?.fileId ??
+    (files.some((file) => file.id === layerId)
+      ? layerId
+      : (activeFile?.id ?? layerId));
+  if (hasScopedLayerState(hiddenLayerIds, layerScreenId, layerId) === hidden)
+    return;
+  const ownerScreen = owner
+    ? overviewScreens.find((screen) => screen.id === owner.fileId)
+    : undefined;
+  if (
+    owner &&
+    resolveOverviewScreenSourceType(ownerScreen, designSourceType) ===
+      "localhost" &&
+    recordPendingLiveLayerStateEdit(layerId, "hidden", hidden, !hidden)
+  ) {
+    applyLayerStatePreview(layerScreenId, layerId, "hidden", hidden);
+    return;
+  }
+  if (owner?.runtimeOnly) {
+    if (
+      sendRuntimeLayerStateSemanticHandoff(layerId, "hidden", hidden) === false
+    ) {
+      return;
+    }
+    applyLayerStatePreview(layerScreenId, layerId, "hidden", hidden);
+    return;
+  }
+  if (files.some((file) => file.id === layerId)) {
+    applyLayerStatePreview(layerScreenId, layerId, "hidden", hidden);
+    return;
+  }
+  const node = owner?.node;
+  if (!owner || !node) {
+    applyLayerStatePreview(layerScreenId, layerId, "hidden", hidden);
+    return;
+  }
+  // BUG-LOCK-HIDE-LIVE-SNAPSHOT: see the matching note in
+  // handleToggleLayerLocked, including why `node` has to be re-resolved
+  // against the live snapshot content before it's usable there.
+  const liveSnapshot = liveScreenSnapshotsById[owner.fileId];
+  const nodeIdAttr = node.dataAttributes["data-agent-native-node-id"];
+  const liveNode =
+    liveSnapshot && nodeIdAttr
+      ? buildCodeLayerProjection(liveSnapshot.html).nodes.find(
+          (candidate) =>
+            candidate.dataAttributes["data-agent-native-node-id"] ===
+            nodeIdAttr,
+        )
+      : undefined;
+  const sourceFile = files.find((file) => file.id === owner.fileId);
+  const sourceContent =
+    liveSnapshot?.html ??
+    (owner.fileId === activeFile?.id
+      ? getFreshActiveContent()
+      : (sourceFile?.content ?? ""));
+  const targetNode = liveSnapshot ? liveNode : node;
+  if (sourceContent && targetNode) {
+    const nextContent = setCodeLayerAttributeInHtml(
+      sourceContent,
+      targetNode,
+      "data-agent-native-hidden",
+      hidden ? "true" : null,
+    );
+    if (nextContent && nextContent !== sourceContent) {
+      if (liveSnapshot) {
+        updateLiveScreenSnapshotContent(owner.fileId, nextContent);
+        syncLiveScreenSnapshotPreview(owner.fileId, nextContent);
+      } else {
+        applyFileContentUpdate(owner.fileId, nextContent, {
+          refreshPreview: false,
+        });
+      }
+    }
+  }
+  applyLayerStatePreview(layerScreenId, layerId, "hidden", hidden);
+}

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

@@ -0,0 +1,175 @@
+import type { CodeLayerNode, CodeLayerTreeNode } from "@shared/code-layer";
+import { buildCodeLayerProjection } from "@shared/code-layer";
+
+import type { ClipboardContentMutationPublication } from "@/lib/clipboard-content-lineage";
+import type { LiveScreenSnapshot } from "@/pages/design-editor/command-types";
+import type { OverviewScreen } from "@/pages/design-editor/derive/overview-screens";
+import { setCodeLayerAttributeInHtml } from "@/pages/design-editor/html-layer-positioning";
+import { hasScopedLayerState } from "@/pages/design-editor/layer-state-scope";
+import { resolveOverviewScreenSourceType } from "@/pages/design-editor/pending-edits";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface ToggleLayerLockedArgs {
+  activeFile: DesignFile;
+  applyFileContentUpdate: (
+    fileId: string,
+    nextContent: string,
+    options?: {
+      refreshPreview?: boolean;
+      skipPreview?: boolean;
+      forcePreviewFullDocument?: boolean;
+      persist?: boolean;
+      recordHistory?: boolean;
+      updatedAt?: string;
+      clipboardMutation?: ClipboardContentMutationPublication;
+    },
+  ) => void;
+  applyLayerStatePreview: (
+    screenId: string,
+    layerId: string,
+    state: "hidden" | "locked",
+    enabled: boolean,
+  ) => void;
+  canEditDesign: boolean;
+  codeLayerOwnerByNodeId: Map<
+    string,
+    {
+      fileId: string;
+      node: CodeLayerNode;
+      tree: CodeLayerTreeNode[];
+      runtimeOnly: boolean;
+    }
+  >;
+  designSourceType: "inline" | "localhost" | "fusion";
+  files: DesignFile[];
+  getFreshActiveContent: () => string;
+  liveScreenSnapshotsById: Record<string, LiveScreenSnapshot>;
+  lockedLayerIds: Set<string>;
+  overviewScreens: OverviewScreen[];
+  recordPendingLiveLayerStateEdit: (
+    layerId: string,
+    state: "hidden" | "locked",
+    enabled: boolean,
+    originalEnabled: boolean,
+  ) => boolean;
+  sendRuntimeLayerStateSemanticHandoff: (
+    layerId: string,
+    state: "locked" | "hidden",
+    enabled: boolean,
+  ) => true | "preview-only" | false;
+  syncLiveScreenSnapshotPreview: (screenId: string, html: string) => void;
+  updateLiveScreenSnapshotContent: (
+    screenId: string,
+    html: string,
+    options?: { recordHistory?: boolean },
+  ) => boolean;
+}
+
+export function runToggleLayerLocked(
+  {
+    activeFile,
+    applyFileContentUpdate,
+    applyLayerStatePreview,
+    canEditDesign,
+    codeLayerOwnerByNodeId,
+    designSourceType,
+    files,
+    getFreshActiveContent,
+    liveScreenSnapshotsById,
+    lockedLayerIds,
+    overviewScreens,
+    recordPendingLiveLayerStateEdit,
+    sendRuntimeLayerStateSemanticHandoff,
+    syncLiveScreenSnapshotPreview,
+    updateLiveScreenSnapshotContent,
+  }: ToggleLayerLockedArgs,
+  layerId: string,
+  locked: boolean,
+) {
+  if (!canEditDesign) return;
+  const owner = codeLayerOwnerByNodeId.get(layerId);
+  const layerScreenId =
+    owner?.fileId ??
+    (files.some((file) => file.id === layerId)
+      ? layerId
+      : (activeFile?.id ?? layerId));
+  if (hasScopedLayerState(lockedLayerIds, layerScreenId, layerId) === locked)
+    return;
+  const ownerScreen = owner
+    ? overviewScreens.find((screen) => screen.id === owner.fileId)
+    : undefined;
+  if (
+    owner &&
+    resolveOverviewScreenSourceType(ownerScreen, designSourceType) ===
+      "localhost" &&
+    recordPendingLiveLayerStateEdit(layerId, "locked", locked, !locked)
+  ) {
+    applyLayerStatePreview(layerScreenId, layerId, "locked", locked);
+    return;
+  }
+  if (owner?.runtimeOnly) {
+    if (
+      sendRuntimeLayerStateSemanticHandoff(layerId, "locked", locked) === false
+    ) {
+      return;
+    }
+    applyLayerStatePreview(layerScreenId, layerId, "locked", locked);
+    return;
+  }
+  if (files.some((file) => file.id === layerId)) {
+    applyLayerStatePreview(layerScreenId, layerId, "locked", locked);
+    return;
+  }
+  const node = owner?.node;
+  if (!owner || !node) {
+    applyLayerStatePreview(layerScreenId, layerId, "locked", locked);
+    return;
+  }
+  // BUG-LOCK-HIDE-LIVE-SNAPSHOT: same fix as handleDeleteSelection —
+  // getFreshActiveContent()/file.content is a bare URL for a
+  // localhost/live-snapshot screen, so setCodeLayerAttributeInHtml below
+  // could never find `node` in it and this write silently no-opped.
+  // `node` itself is unusable against the live snapshot HTML too:
+  // setCodeLayerAttributeInHtml indexes by node.source.openStart/openEnd,
+  // raw offsets into whatever string the RUNTIME projection parsed
+  // (runtimeLayerSnapshotsById), not the separately-tracked live
+  // snapshot — re-resolve a node from that exact content by the one id
+  // that's stable across both (see codeLayerOwnerByNodeId's matching
+  // note above).
+  const liveSnapshot = liveScreenSnapshotsById[owner.fileId];
+  const nodeIdAttr = node.dataAttributes["data-agent-native-node-id"];
+  const liveNode =
+    liveSnapshot && nodeIdAttr
+      ? buildCodeLayerProjection(liveSnapshot.html).nodes.find(
+          (candidate) =>
+            candidate.dataAttributes["data-agent-native-node-id"] ===
+            nodeIdAttr,
+        )
+      : undefined;
+  const sourceFile = files.find((file) => file.id === owner.fileId);
+  const sourceContent =
+    liveSnapshot?.html ??
+    (owner.fileId === activeFile?.id
+      ? getFreshActiveContent()
+      : (sourceFile?.content ?? ""));
+  const targetNode = liveSnapshot ? liveNode : node;
+  if (sourceContent && targetNode) {
+    const nextContent = setCodeLayerAttributeInHtml(
+      sourceContent,
+      targetNode,
+      "data-agent-native-locked",
+      locked ? "true" : null,
+    );
+    if (nextContent && nextContent !== sourceContent) {
+      if (liveSnapshot) {
+        updateLiveScreenSnapshotContent(owner.fileId, nextContent);
+        syncLiveScreenSnapshotPreview(owner.fileId, nextContent);
+      } else {
+        applyFileContentUpdate(owner.fileId, nextContent, {
+          refreshPreview: false,
+        });
+      }
+    }
+  }
+  applyLayerStatePreview(layerScreenId, layerId, "locked", locked);
+}