@agent-native/core 0.92.12 → 0.93.0

package/corpus/templates/design/app/components/design/bridge/editor-chrome.bridge.ts

@@ -64,12 +64,20 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
   var runtimeLayerSnapshotEnabled = !!__RUNTIME_LAYER_SNAPSHOT_ENABLED__;
   var scaleToolEnabled = false;
   // Interaction-state forced preview (phase 2 — see shared/interaction-states.ts's
-  // "Forced-preview mechanism" doc comment). Tracks which single node id
-  // currently carries the `data-an-state-preview` attribute so a later
-  // `state-preview` message for a DIFFERENT node clears the previous one
-  // first — only one element can be force-previewing a state at a time,
-  // matching the inspector's single-selection InteractionStatePanel.
-  var statePreviewNodeId: string | null = null;
+  // "Forced-preview mechanism" doc comment). Keep the actual element rather
+  // than only its node id: localhost React layers can resolve through runtime
+  // selectors/provenance without carrying data-agent-native-node-id, and a
+  // DOM replacement may retire the old element between preview messages.
+  var statePreviewElement: HTMLElement | null = null;
+  type RuntimeInteractionStatePreview = {
+    element: HTMLElement;
+    key: string;
+    state: string;
+    styles: Record<string, string>;
+  };
+  var runtimeInteractionStatePreviews: RuntimeInteractionStatePreview[] = [];
+  var runtimeInteractionStatePreviewSequence = 0;
+  var runtimeInteractionStatePreviewStyle: HTMLStyleElement | null = null;
   var editorChromeScaleX = Math.max(
     0.05,
     Number(__EDITOR_CHROME_SCALE_X__) || 1,
@@ -107,11 +115,142 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
 
   ensureEditorChromeStyle();
 
+  function isSupportedInteractionState(value: string): boolean {
+    return (
+      value === "hover" ||
+      value === "focus" ||
+      value === "focus-visible" ||
+      value === "active" ||
+      value === "disabled"
+    );
+  }
+
+  function normalizeInteractionStateProperty(property: string): string {
+    return String(property || "")
+      .trim()
+      .replace(/[A-Z]/g, function (match) {
+        return "-" + match.toLowerCase();
+      });
+  }
+
+  function isSafeInteractionStatePreviewValue(value: string): boolean {
+    return (
+      value.trim().length > 0 &&
+      !/[;{}<>]|\/\*|\*\/|\burl\s*\(/i.test(value) &&
+      !/[\u0000-\u001f\u007f]/.test(value)
+    );
+  }
+
+  function renderRuntimeInteractionStatePreviews(): void {
+    runtimeInteractionStatePreviews = runtimeInteractionStatePreviews.filter(
+      function (entry) {
+        return (
+          entry.element.isConnected && Object.keys(entry.styles).length > 0
+        );
+      },
+    );
+    if (runtimeInteractionStatePreviewStyle?.isConnected) {
+      runtimeInteractionStatePreviewStyle.remove();
+    }
+    runtimeInteractionStatePreviewStyle = null;
+    if (runtimeInteractionStatePreviews.length === 0) return;
+
+    var style = document.createElement("style");
+    style.setAttribute("data-agent-native-runtime-state-previews", "");
+    (document.head || document.documentElement).appendChild(style);
+    runtimeInteractionStatePreviewStyle = style;
+    var sheet = style.sheet;
+    if (!sheet) return;
+    runtimeInteractionStatePreviews.forEach(function (entry) {
+      var selector =
+        '[data-an-state-preview-key="' +
+        entry.key +
+        '"][data-an-state-preview="' +
+        entry.state +
+        '"]';
+      try {
+        var index = sheet.insertRule(selector + "{}", sheet.cssRules.length);
+        var rule = sheet.cssRules[index] as CSSStyleRule;
+        Object.keys(entry.styles).forEach(function (rawProperty) {
+          var property = normalizeInteractionStateProperty(rawProperty);
+          var value = String(entry.styles[rawProperty] || "").trim();
+          if (!/^-?[a-z][a-z0-9-]*$/i.test(property) || !value) return;
+          rule.style.setProperty(property, value, "important");
+        });
+      } catch (_err) {}
+    });
+  }
+
+  function updateRuntimeInteractionStatePreview(
+    element: HTMLElement,
+    state: string,
+    styles: Record<string, unknown> | null,
+    replace: boolean,
+  ): void {
+    if (!isSupportedInteractionState(state)) return;
+    var key = element.getAttribute("data-an-state-preview-key");
+    if (!key) {
+      runtimeInteractionStatePreviewSequence += 1;
+      key = String(runtimeInteractionStatePreviewSequence);
+      element.setAttribute("data-an-state-preview-key", key);
+    }
+    var existingIndex = runtimeInteractionStatePreviews.findIndex(
+      function (entry) {
+        return entry.element === element && entry.state === state;
+      },
+    );
+    var nextStyles: Record<string, string> =
+      !replace && existingIndex >= 0
+        ? { ...runtimeInteractionStatePreviews[existingIndex]!.styles }
+        : {};
+    if (styles && typeof styles === "object") {
+      Object.keys(styles).forEach(function (property) {
+        var value = styles[property];
+        if (typeof value !== "string" || value.trim() === "") {
+          delete nextStyles[property];
+        } else if (isSafeInteractionStatePreviewValue(value)) {
+          nextStyles[property] = value;
+        }
+      });
+    }
+    if (existingIndex >= 0) {
+      if (Object.keys(nextStyles).length === 0) {
+        runtimeInteractionStatePreviews.splice(existingIndex, 1);
+      } else {
+        runtimeInteractionStatePreviews[existingIndex] = {
+          element: element,
+          key: key,
+          state: state,
+          styles: nextStyles,
+        };
+      }
+    } else if (Object.keys(nextStyles).length > 0) {
+      runtimeInteractionStatePreviews.push({
+        element: element,
+        key: key,
+        state: state,
+        styles: nextStyles,
+      });
+    }
+    if (
+      !runtimeInteractionStatePreviews.some(function (entry) {
+        return entry.element === element;
+      })
+    ) {
+      element.removeAttribute("data-an-state-preview-key");
+    }
+    renderRuntimeInteractionStatePreviews();
+  }
+
   function runtimeHeadHtmlWithoutEditorChrome(): string {
     if (!document.head) return "";
     var clone = document.head.cloneNode(true) as HTMLElement;
     Array.prototype.slice
-      .call(clone.querySelectorAll("[data-agent-native-editor-chrome-style]"))
+      .call(
+        clone.querySelectorAll(
+          "[data-agent-native-editor-chrome-style], [data-agent-native-editing-safety-style]",
+        ),
+      )
       .forEach(function (node) {
         if (node.parentNode) node.parentNode.removeChild(node);
       });
@@ -294,6 +433,8 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
   var runtimeLayerSnapshotTimer: number | null = null;
   var runtimeLayerSnapshotMaxTimer: number | null = null;
   var lastRuntimeLayerSnapshotHtml = "";
+  var runtimeDocumentId =
+    "runtime-" + Date.now() + "-" + Math.random().toString(16).slice(2);
 
   function runtimeLayerHash(value: string): string {
     var hash = 0x811c9dc5;
@@ -374,6 +515,95 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
     nodeCount: number;
   } | null {
     if (!document.body) return null;
+    // Keep this list export-focused and bounded. The runtime snapshot is also
+    // the hosted/cross-origin Design→Figma fallback: inlining the resolved
+    // paint/layout values lets the parent reconstruct the already-rendered
+    // frame without loading the app's CSS or running its scripts again.
+    var snapshotComputedProperties = [
+      "box-sizing",
+      "display",
+      "position",
+      "inset",
+      "top",
+      "right",
+      "bottom",
+      "left",
+      "width",
+      "height",
+      "min-width",
+      "min-height",
+      "max-width",
+      "max-height",
+      "margin",
+      "padding",
+      "flex",
+      "flex-flow",
+      "flex-grow",
+      "flex-shrink",
+      "flex-basis",
+      "align-items",
+      "align-self",
+      "align-content",
+      "justify-content",
+      "justify-items",
+      "justify-self",
+      "gap",
+      "grid-template-columns",
+      "grid-template-rows",
+      "grid-column",
+      "grid-row",
+      "order",
+      "overflow",
+      "overflow-x",
+      "overflow-y",
+      "background-color",
+      "background-image",
+      "background-position",
+      "background-size",
+      "background-repeat",
+      "border",
+      "border-top",
+      "border-right",
+      "border-bottom",
+      "border-left",
+      "border-radius",
+      "box-shadow",
+      "opacity",
+      "transform",
+      "transform-origin",
+      "color",
+      "font-family",
+      "font-size",
+      "font-style",
+      "font-weight",
+      "line-height",
+      "letter-spacing",
+      "text-align",
+      "text-decoration",
+      "text-transform",
+      "white-space",
+      "object-fit",
+      "object-position",
+      "clip-path",
+      "visibility",
+    ];
+    function inlineSnapshotComputedStyle(
+      sourceNode: Element,
+      cloneNode: Element,
+    ): void {
+      var computed = getComputedStyle(sourceNode);
+      var parts: string[] = [];
+      for (
+        var propertyIndex = 0;
+        propertyIndex < snapshotComputedProperties.length;
+        propertyIndex += 1
+      ) {
+        var property = snapshotComputedProperties[propertyIndex];
+        var value = computed.getPropertyValue(property);
+        if (value) parts.push(property + ":" + value);
+      }
+      cloneNode.setAttribute("style", parts.join(";"));
+    }
     var sourceNodes = Array.prototype.slice.call(
       document.body.querySelectorAll("*"),
     ) as Element[];
@@ -397,6 +627,7 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
         "data-agent-native-node-id",
         ensureRuntimeLayerNodeId(sourceNode),
       );
+      inlineSnapshotComputedStyle(sourceNode, cloneNode);
       var provenance = reactDebugProvenance(sourceNode);
       if (provenance) {
         cloneNode.setAttribute("data-source-file", provenance.sourceFile);
@@ -419,18 +650,52 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
         node.remove();
       });
     cloneBody
-      .querySelectorAll("script,style,template,noscript,link,meta,title")
+      .querySelectorAll(
+        "script,style,template,noscript,link,meta,title,iframe,object,embed,base,foreignObject,video,audio,source,track,animate,set",
+      )
       .forEach(function (node) {
         node.remove();
       });
+    // Snapshots cross a trust boundary into parent-owned srcdoc. Strip active
+    // attributes here even though the receiver repeats the same policy and
+    // renders under a no-script sandbox + restrictive CSP.
+    [cloneBody]
+      .concat(
+        Array.prototype.slice.call(
+          cloneBody.querySelectorAll("*"),
+        ) as Element[],
+      )
+      .forEach(function (node: Element) {
+        Array.prototype.slice.call(node.attributes).forEach(function (
+          attribute: Attr,
+        ) {
+          var name = String(attribute.name || "").toLowerCase();
+          var value = String(attribute.value || "");
+          if (
+            name.indexOf("on") === 0 ||
+            name === "srcdoc" ||
+            name === "autofocus" ||
+            name === "action" ||
+            name === "formaction" ||
+            /javascript\s*:/i.test(value)
+          ) {
+            node.removeAttribute(attribute.name);
+          }
+        });
+      });
     cloneBody.setAttribute(
       "data-agent-native-node-id",
       ensureRuntimeLayerNodeId(document.body),
     );
+    inlineSnapshotComputedStyle(document.body, cloneBody);
     cloneBody.setAttribute("data-an-runtime-layer-snapshot", "true");
     var html = "<!doctype html><html>" + cloneBody.outerHTML + "</html>"; // i18n-ignore serialized runtime-layer HTML payload, not visible UI copy
     if (html.length > 2_000_000) return null;
-    return { html: html, nodeCount: nodeCount };
+    return {
+      html: html,
+      nodeCount: nodeCount,
+      documentId: runtimeDocumentId,
+    };
   }
 
   function postRuntimeLayerSnapshot(): void {
@@ -6503,6 +6768,12 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
     });
     if (!children.length) return null;
     var axis = parentFlowAxis(container);
+    var containerStyles = window.getComputedStyle(container);
+    var multiTrackGrid =
+      (containerStyles.display === "grid" ||
+        containerStyles.display === "inline-grid") &&
+      (containerStyles.gridTemplateColumns || "").split(" ").filter(Boolean)
+        .length > 1;
     var best: Element | null = null;
     var bestDistance = Infinity;
     var placement = "after";
@@ -6514,11 +6785,27 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
       var center =
         axis === "x" ? rect.left + rect.width / 2 : rect.top + rect.height / 2;
       var pointer = axis === "x" ? clientX : clientY;
-      var distance = Math.abs(pointer - center);
+      // A multi-column grid is two-dimensional. Comparing X alone ties cells
+      // in the same column across every row, so a drop beside row 2 used to
+      // anchor against row 1 and jump to the beginning of the grid. Resolve
+      // the nearest visual cell in both axes, then use X for row-major
+      // before/after placement. One-column grids retain the normal Y path.
+      var distance = multiTrackGrid
+        ? Math.hypot(
+            clientX - (rect.left + rect.width / 2),
+            clientY - (rect.top + rect.height / 2),
+          )
+        : Math.abs(pointer - center);
       if (distance < bestDistance) {
         bestDistance = distance;
         best = children[j];
-        placement = pointer < center ? "before" : "after";
+        placement = multiTrackGrid
+          ? clientX < rect.left + rect.width / 2
+            ? "before"
+            : "after"
+          : pointer < center
+            ? "before"
+            : "after";
       }
     }
     if (!best) return null;
@@ -7080,6 +7367,29 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
     "right",
     "bottom",
   ];
+  // Flex/grid-item-only inline properties. A member leaving auto-layout flow
+  // for an absolute/freeform container (prepareFlowMembersForAbsoluteDrop)
+  // must lose these — they only affect how a flow child sizes/aligns itself
+  // among siblings inside an auto-layout parent, and are meaningless once the
+  // element is position:absolute. Left in place they silently keep
+  // controlling nothing today but would immediately re-activate (with a
+  // stale, source-parent-relative value) the moment the element was ever
+  // reparented BACK into flow — e.g. by an undo, or a later drag into another
+  // auto-layout container that doesn't explicitly reset every one of these.
+  var FLEX_ITEM_INLINE_PROPS = [
+    "flex",
+    "flex-grow",
+    "flex-shrink",
+    "flex-basis",
+    "align-self",
+    "order",
+  ];
+  function stripFlexItemInlineStyles(el: Element): void {
+    var htmlEl = el as HTMLElement;
+    for (var i = 0; i < FLEX_ITEM_INLINE_PROPS.length; i += 1) {
+      htmlEl.style.removeProperty(FLEX_ITEM_INLINE_PROPS[i]);
+    }
+  }
   // Snapshot of the inline position/left/top/right/bottom VALUES (not just
   // whether they existed) taken right before stripAbsolutePositioningForFlowInsert
   // runs, so a failed move-node round-trip can restore exactly what was
@@ -7313,13 +7623,87 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
       htmlEl.style.top = Math.round(startRect.top + deltaY - originY) + "px";
       htmlEl.style.removeProperty("right");
       htmlEl.style.removeProperty("bottom");
+      stripFlexItemInlineStyles(htmlEl);
+      // Preserve the exact intended client-space release point for the
+      // post-reparent transform correction. Raw left/top are in the new
+      // containing block's local space; when that parent is rotated/scaled,
+      // subtracting bounding-box origins alone cannot keep this client point.
+      (
+        htmlEl as HTMLElement & {
+          __agentNativeDesiredDropPoint?: { left: number; top: number };
+        }
+      ).__agentNativeDesiredDropPoint = {
+        left: startRect.left + deltaX,
+        top: startRect.top + deltaY,
+      };
     });
     target.absoluteCoordinatesPrepared = true;
   }
 
+  /**
+   * Correct an absolute member after it enters a transformed containing block.
+   * CSS transforms (including rotated/scaled ancestors) make client-space
+   * deltas differ from local left/top deltas. Measure the two local 1px basis
+   * vectors through the browser's actual layout engine, invert that 2x2 matrix,
+   * and apply the exact local correction. This also covers nested transforms
+   * without trying to reconstruct the browser's full transform-origin chain.
+   */
+  function correctAbsoluteMemberClientPosition(
+    el: Element,
+    desired: { left: number; top: number } | null,
+  ): void {
+    if (!desired) return;
+    var htmlEl = el as HTMLElement;
+    var cs = window.getComputedStyle(htmlEl);
+    if (cs.position !== "absolute" && cs.position !== "fixed") return;
+    var baseLeft = readPx(htmlEl.style.left || cs.left);
+    var baseTop = readPx(htmlEl.style.top || cs.top);
+    var baseRect = htmlEl.getBoundingClientRect();
+    var clientDx = desired.left - baseRect.left;
+    var clientDy = desired.top - baseRect.top;
+    if (Math.abs(clientDx) < 0.01 && Math.abs(clientDy) < 0.01) return;
+
+    htmlEl.style.left = baseLeft + 1 + "px";
+    var leftRect = htmlEl.getBoundingClientRect();
+    htmlEl.style.left = baseLeft + "px";
+    htmlEl.style.top = baseTop + 1 + "px";
+    var topRect = htmlEl.getBoundingClientRect();
+    htmlEl.style.top = baseTop + "px";
+
+    var xx = leftRect.left - baseRect.left;
+    var xy = leftRect.top - baseRect.top;
+    var yx = topRect.left - baseRect.left;
+    var yy = topRect.top - baseRect.top;
+    var determinant = xx * yy - yx * xy;
+    if (!Number.isFinite(determinant) || Math.abs(determinant) < 0.000001) {
+      return;
+    }
+    var localDx = (clientDx * yy - yx * clientDy) / determinant;
+    var localDy = (xx * clientDy - clientDx * xy) / determinant;
+    htmlEl.style.left = baseLeft + localDx + "px";
+    htmlEl.style.top = baseTop + localDy + "px";
+  }
+
   function applyRuntimeReorder(el, target) {
     if (!el || !target || !target.anchor || !target.anchor.parentElement)
       return;
+    var desiredDropPoint =
+      target.dropMode === "absolute-container"
+        ? ((
+            el as HTMLElement & {
+              __agentNativeDesiredDropPoint?: { left: number; top: number };
+            }
+          ).__agentNativeDesiredDropPoint ??
+          (function () {
+            var rect = el.getBoundingClientRect();
+            return { left: rect.left, top: rect.top };
+          })())
+        : null;
+    delete (
+      el as HTMLElement & {
+        __agentNativeDesiredDropPoint?: { left: number; top: number };
+      }
+    ).__agentNativeDesiredDropPoint;
     stripAbsolutePositioningForFlowInsert(el, target);
     // Must run BEFORE the DOM move below: the delta math reads the member's
     // CURRENT containing block via offsetParent. Called here (the single
@@ -7330,14 +7714,15 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
     rebaseAbsoluteMemberForContainerDrop(el, target);
     if (target.placement === "inside") {
       target.anchor.appendChild(el);
-      return;
-    }
-    var parent = target.anchor.parentElement;
-    if (target.placement === "before") {
-      parent.insertBefore(el, target.anchor);
     } else {
-      parent.insertBefore(el, target.anchor.nextSibling);
+      var parent = target.anchor.parentElement;
+      if (target.placement === "before") {
+        parent.insertBefore(el, target.anchor);
+      } else {
+        parent.insertBefore(el, target.anchor.nextSibling);
+      }
     }
+    correctAbsoluteMemberClientPosition(el, desiredDropPoint);
   }
 
   function postVisualStructureChange(el, target, origin) {
@@ -7752,6 +8137,20 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
       var reorderGroupStartRects = groupEls.map(function (member) {
         return member.getBoundingClientRect();
       });
+      // Capture structural + inline positioning origins before any drop
+      // preparation. Control-dragging a flow child calls
+      // prepareFlowMembersForAbsoluteDrop on pointer-up, which writes
+      // position/left/top before the optimistic DOM move. Taking this snapshot
+      // afterward made a rejected persistence ack (and the equivalent undo
+      // boundary) "restore" those new absolute values instead of flow state.
+      var reorderOrigins = groupEls.map(function (member) {
+        return {
+          el: member,
+          prevParent: member.parentElement,
+          prevNextSibling: member.nextSibling,
+          prevInlinePositionStyles: snapshotInlinePositionStyles(member),
+        };
+      });
       var reorderGestureStartRect = reorderEl.getBoundingClientRect();
       var keepCurrentFlowParent = bridgeSpaceKeyPressed;
       var currentTarget = flowMoveTargetForPoint(
@@ -7958,19 +8357,39 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
             currentTarget,
           );
         } else if (isGroupDrag) {
-          applyGroupStructureDrop(groupEls, currentTarget, ev);
+          applyGroupStructureDrop(
+            groupEls,
+            currentTarget,
+            ev,
+            function (member) {
+              var origin = reorderOrigins.filter(function (candidate) {
+                return candidate.el === member;
+              })[0];
+              return origin
+                ? origin.prevInlinePositionStyles
+                : snapshotInlinePositionStyles(member);
+            },
+          );
         } else {
           // Capture the pre-drag DOM anchor so we can revert if the parent
           // reports applied===false on the structure-ack.
-          var prevParent = reorderEl.parentElement;
-          var prevNextSibling = reorderEl.nextSibling;
+          var reorderOrigin = reorderOrigins.filter(function (candidate) {
+            return candidate.el === reorderEl;
+          })[0];
+          var prevParent = reorderOrigin
+            ? reorderOrigin.prevParent
+            : reorderEl.parentElement;
+          var prevNextSibling = reorderOrigin
+            ? reorderOrigin.prevNextSibling
+            : reorderEl.nextSibling;
           // Usually a no-op here (flow-reorder drags a member that's
           // already in flow, so there's nothing to strip), but captured for
           // consistency so an absolute-positioned element reordered through
           // this gesture still rolls back its inline styles correctly on a
           // rejected move-node round-trip.
-          var prevInlinePositionStyles =
-            snapshotInlinePositionStyles(reorderEl);
+          var prevInlinePositionStyles = reorderOrigin
+            ? reorderOrigin.prevInlinePositionStyles
+            : snapshotInlinePositionStyles(reorderEl);
           adaptAutoTextColorForNest(
             reorderEl,
             dropContainerForTarget(currentTarget),
@@ -9209,8 +9628,12 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
   );
 
   function hasFigmaClipboardPayload(value) {
-    return /<[^>]+\sdata-(metadata|buffer)=["'][^"']*\((figmeta|figma)\)[^"']*["']/i.test(
-      String(value || ""),
+    var content = String(value || "");
+    return (
+      /\((figmeta|figma)\)[\s\S]*?\(\/(figmeta|figma)\)/i.test(content) ||
+      /<[^>]+\sdata-(metadata|buffer)=["'][^"']*\((figmeta|figma)\)[^"']*["']/i.test(
+        content,
+      )
     );
   }
 
@@ -9524,7 +9947,9 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
       // (or no) element host-side.
       if (
         target.isConnected &&
-        (next !== originalText || nextHtml !== originalHtml)
+        (next !== originalText ||
+          nextHtml !== originalHtml ||
+          (programmaticTextEdit && !hasTextCharacters(target)))
       ) {
         postTextContentChange(
           target,
@@ -9613,6 +10038,25 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
       // normalizeNestedIdenticalSpans (T12) cleans up any span nesting
       // execCommand leaves behind when the session commits.
       var metaOrCtrl = ev.metaKey || ev.ctrlKey;
+      // A just-created text layer is one editor transaction, not an isolated
+      // native contenteditable history island. Chromium consumes Cmd/Ctrl+Z
+      // locally even when the empty editable has nothing to undo, so the host
+      // never sees the command and cannot remove the created layer. Cancel the
+      // uncommitted DOM session and forward the chord to Design's guarded
+      // content history; typing committed by blur/Escape is coalesced into the
+      // same creation entry host-side.
+      if (
+        programmaticTextEdit &&
+        metaOrCtrl &&
+        !ev.altKey &&
+        ev.key.toLowerCase() === "z"
+      ) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        finish(false);
+        postDesignHotkey(ev);
+        return;
+      }
       if (metaOrCtrl && !ev.altKey && ev.key.toLowerCase() === "b") {
         ev.preventDefault();
         document.execCommand("bold");
@@ -10090,15 +10534,46 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
       hideGradientOverlay();
       return;
     }
+    if (e.data.type === "interaction-state-style-preview") {
+      var interactionPreviewState =
+        typeof e.data.state === "string" ? e.data.state : "";
+      if (!isSupportedInteractionState(interactionPreviewState)) return;
+      var interactionPreviewCandidates = Array.isArray(
+        e.data.selectorCandidates,
+      )
+        ? e.data.selectorCandidates.slice()
+        : [];
+      if (e.data.nodeId) {
+        interactionPreviewCandidates.push(
+          '[data-agent-native-node-id="' +
+            escapeAttribute(e.data.nodeId) +
+            '"]',
+        );
+      }
+      var interactionPreviewElement = findRuntimeTarget(
+        String(e.data.selector || ""),
+        interactionPreviewCandidates,
+      ) as HTMLElement | null;
+      if (!interactionPreviewElement) return;
+      updateRuntimeInteractionStatePreview(
+        interactionPreviewElement,
+        interactionPreviewState,
+        e.data.styles && typeof e.data.styles === "object" ? e.data.styles : {},
+        false,
+      );
+      if (statePreviewElement === interactionPreviewElement) {
+        interactionPreviewElement.setAttribute(
+          "data-an-state-preview",
+          interactionPreviewState,
+        );
+      }
+      return;
+    }
     // state-preview: force-render one element's interaction-state styling by
-    // setting/removing the `data-an-state-preview="<state>"` attribute — see
-    // `shared/interaction-states.ts`'s "Forced-preview mechanism" doc comment
-    // for the full contract this implements. This bridge does ZERO CSS work:
-    // the twin `[data-agent-native-node-id="…"][data-an-state-preview="…"]`
-    // rule already lives in the persisted `<style data-agent-native-states>`
-    // block (written by `duplicateStatePreviewRules`), so setting the
-    // attribute is the entire preview mechanism. `state: null` (or a missing/
-    // empty `nodeId`) clears any currently-previewing element.
+    // setting/removing the `data-an-state-preview="<state>"` attribute. Inline
+    // HTML gets its styles from the persisted twin rule; localhost previews
+    // can carry `previewStyles`, held in a temporary CSSOM rule so no runtime
+    // source/URL content is rewritten before the guarded source handoff.
     if (e.data.type === "state-preview") {
       var statePreviewTargetNodeId =
         typeof e.data.nodeId === "string" ? e.data.nodeId : "";
@@ -10107,30 +10582,41 @@ declare var __RUNTIME_LAYER_SNAPSHOT_ENABLED__: boolean;
       // Clear the PREVIOUS target first — only one element force-previews a
       // state at a time, and the new message may target a different node
       // (e.g. the selection changed) or clear entirely.
-      if (statePreviewNodeId) {
-        var previousStatePreviewEl = document.querySelector(
+      if (statePreviewElement) {
+        statePreviewElement.removeAttribute("data-an-state-preview");
+        statePreviewElement = null;
+      }
+      if (!isSupportedInteractionState(statePreviewState)) return;
+      var statePreviewCandidates = Array.isArray(e.data.selectorCandidates)
+        ? e.data.selectorCandidates.slice()
+        : [];
+      if (statePreviewTargetNodeId) {
+        statePreviewCandidates.push(
           '[data-agent-native-node-id="' +
-            String(statePreviewNodeId)
-              .replace(/\\/g, "\\\\")
-              .replace(/"/g, '\\"') +
+            escapeAttribute(statePreviewTargetNodeId) +
             '"]',
-        ) as HTMLElement | null;
-        if (previousStatePreviewEl) {
-          previousStatePreviewEl.removeAttribute("data-an-state-preview");
-        }
-        statePreviewNodeId = null;
+        );
       }
-      if (!statePreviewTargetNodeId || !statePreviewState) return;
-      var statePreviewEl = document.querySelector(
-        '[data-agent-native-node-id="' +
-          String(statePreviewTargetNodeId)
-            .replace(/\\/g, "\\\\")
-            .replace(/"/g, '\\"') +
-          '"]',
+      var nextStatePreviewElement = findRuntimeTarget(
+        String(e.data.selector || ""),
+        statePreviewCandidates,
       ) as HTMLElement | null;
-      if (!statePreviewEl) return;
-      statePreviewEl.setAttribute("data-an-state-preview", statePreviewState);
-      statePreviewNodeId = statePreviewTargetNodeId;
+      if (!nextStatePreviewElement) return;
+      if (Object.prototype.hasOwnProperty.call(e.data, "previewStyles")) {
+        updateRuntimeInteractionStatePreview(
+          nextStatePreviewElement,
+          statePreviewState,
+          e.data.previewStyles && typeof e.data.previewStyles === "object"
+            ? e.data.previewStyles
+            : {},
+          true,
+        );
+      }
+      nextStatePreviewElement.setAttribute(
+        "data-an-state-preview",
+        statePreviewState,
+      );
+      statePreviewElement = nextStatePreviewElement;
       return;
     }
     if (e.data.type === "agent-native:cancel-active-drag") {