@agent-native/core 0.90.2 → 0.90.4

package/corpus/templates/design/app/components/design/DesignCanvas.tsx

@@ -351,6 +351,7 @@ interface DesignCanvasProps {
    * For `"inline"` and `"localhost"` sources this prop is ignored.
    */
   fusionUrl?: string;
+  bridgeToken?: string;
   zoom: number;
   onZoomChange?: (zoom: number) => void;
   deviceFrame: DeviceFrameType;
@@ -371,6 +372,28 @@ interface DesignCanvasProps {
    */
   runtimeReplacementContent?: string;
   runtimeReplacementKey?: string;
+  styleRevertRequest?: {
+    requestId: number;
+    patches: Array<{
+      selector: string;
+      sourceId?: string | null;
+      styles: Record<string, string>;
+    }>;
+  } | null;
+  styleBaselineResetRequest?: number | null;
+  textRevertRequest?: {
+    requestId: number;
+    patches: Array<{
+      selector: string;
+      sourceId?: string | null;
+      value: string;
+      html?: string;
+    }>;
+  } | null;
+  structureAckRequest?: {
+    requestId: number;
+    acks: Array<{ requestId: string; applied: boolean }>;
+  } | null;
   embeddedFrameBackground?: string;
   transparentBackground?: boolean;
   editorChromeScaleX?: number;
@@ -390,12 +413,17 @@ interface DesignCanvasProps {
     selector: string,
     styles: Record<string, string>,
     info?: ElementInfo,
+    metadata?: { originalStyles?: Record<string, string> },
   ) => void;
   onTextContentChange?: (
     selector: string,
     value: string,
     info?: ElementInfo,
-    details?: { html?: string },
+    details?: {
+      html?: string;
+      originalValue?: string;
+      originalHtml?: string;
+    },
   ) => void;
   onTextEditingStateChange?: (state: {
     active: boolean;
@@ -420,7 +448,7 @@ interface DesignCanvasProps {
       sourceRect?: { x: number; y: number; width: number; height: number };
       anchorRect?: { x: number; y: number; width: number; height: number };
     },
-  ) => boolean | void;
+  ) => boolean | "pending" | void;
   onVisualDuplicateChange?: (
     selector: string,
     cloneHtml: string,
@@ -837,6 +865,80 @@ function snapshotEndpointUrl(bridgeUrl: string, previewUrl: string): string {
   return endpoint.toString();
 }
 
+function liveEditEndpointUrl(bridgeUrl: string, previewUrl: string): string {
+  const endpoint = new URL("/live-edit", bridgeUrl);
+  endpoint.searchParams.set("url", previewUrl);
+  return endpoint.toString();
+}
+
+function originFromUrl(value: string | undefined): string | null {
+  if (!value) return null;
+  try {
+    return new URL(value).origin;
+  } catch {
+    return null;
+  }
+}
+
+function buildEditorChromeBridgeScript(args: {
+  readOnly: boolean;
+  editMode: boolean;
+  editorChromeScaleX: number;
+  editorChromeScaleY: number;
+  screenId: string;
+  boardSurface: boolean;
+}) {
+  return (
+    createEditorBridgeThemeScript(readEditorBridgeThemeVars()) +
+    EDITOR_CHROME_BRIDGE_SCRIPT.replace(
+      "__READ_ONLY__",
+      args.readOnly ? "true" : "false",
+    )
+      .replace("__TEXT_EDITING_ENABLED__", args.editMode ? "true" : "false")
+      .replace("__EDITOR_CHROME_SCALE_X__", String(args.editorChromeScaleX))
+      .replace("__EDITOR_CHROME_SCALE_Y__", String(args.editorChromeScaleY))
+      .replace("__DESIGN_CANVAS_SCREEN_ID__", JSON.stringify(args.screenId))
+      .replace(
+        "__DESIGN_CANVAS_BOARD_SURFACE__",
+        args.boardSurface ? "true" : "false",
+      )
+  );
+}
+
+function contentHash(value: string): string {
+  let hash = 0;
+  for (let index = 0; index < value.length; index += 1) {
+    hash = (hash * 31 + value.charCodeAt(index)) | 0;
+  }
+  return `${value.length}:${hash >>> 0}`;
+}
+
+function isPlainRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value && typeof value === "object" && !Array.isArray(value));
+}
+
+function isFiniteRect(value: unknown): value is ElementInfo["boundingRect"] {
+  if (!isPlainRecord(value)) return false;
+  return (
+    Number.isFinite(value.x) &&
+    Number.isFinite(value.y) &&
+    Number.isFinite(value.width) &&
+    Number.isFinite(value.height)
+  );
+}
+
+export function isElementInfoPayload(value: unknown): value is ElementInfo {
+  if (!isPlainRecord(value)) return false;
+  return (
+    typeof value.tagName === "string" &&
+    Array.isArray(value.classes) &&
+    isPlainRecord(value.computedStyles) &&
+    isFiniteRect(value.boundingRect) &&
+    typeof value.isFlexChild === "boolean" &&
+    typeof value.isFlexContainer === "boolean"
+  );
+}
+
 /**
  * Exponential backoff delay (ms) for the localhost bridge snapshot auto-retry
  * loop, keyed by the zero-based retry attempt number (0 = first retry after
@@ -945,6 +1047,7 @@ export function DesignCanvas({
   externalSnapshotHtml,
   onExternalContentSnapshot,
   fusionUrl,
+  bridgeToken,
   zoom,
   onZoomChange,
   deviceFrame,
@@ -952,6 +1055,10 @@ export function DesignCanvas({
   boardSurface = false,
   runtimeReplacementContent,
   runtimeReplacementKey,
+  styleRevertRequest,
+  styleBaselineResetRequest,
+  textRevertRequest,
+  structureAckRequest,
   embeddedFrameBackground,
   transparentBackground = false,
   editorChromeScaleX = 1,
@@ -1082,6 +1189,8 @@ export function DesignCanvas({
     status: "loading" | "error";
     message?: string;
   } | null>(null);
+  const [registeredLiveEditBridgeKey, setRegisteredLiveEditBridgeKey] =
+    useState<string | null>(null);
   const [externalSnapshotRetryNonce, setExternalSnapshotRetryNonce] =
     useState(0);
   // Exponential backoff for the auto-retry loop below: 1.5s → 3s → 6s →
@@ -1116,20 +1225,74 @@ export function DesignCanvas({
     (fetchedExternalSnapshot?.url === rawExternalPreviewUrl
       ? fetchedExternalSnapshot.html
       : undefined);
-  const requiresEditableExternalSnapshot =
+  const editorChromeBridgeForCurrentState = useMemo(
+    () =>
+      buildEditorChromeBridgeScript({
+        readOnly,
+        editMode,
+        editorChromeScaleX: effectiveEditorChromeScaleX,
+        editorChromeScaleY: effectiveEditorChromeScaleY,
+        screenId: screenId ?? contentKey ?? "",
+        boardSurface,
+      }),
+    [
+      boardSurface,
+      contentKey,
+      editMode,
+      effectiveEditorChromeScaleX,
+      effectiveEditorChromeScaleY,
+      readOnly,
+      screenId,
+    ],
+  );
+  const embeddedWheelBridgeForCurrentState = useMemo(
+    () =>
+      EMBEDDED_WHEEL_BRIDGE_SCRIPT.replace(
+        "__EMBEDDED_WHEEL_FORWARDING_ENABLED__",
+        isEmbeddedFrame ? "true" : "false",
+      ),
+    [isEmbeddedFrame],
+  );
+  const liveEditBridgeScript = useMemo(
+    () =>
+      MOTION_PREVIEW_BRIDGE_SCRIPT +
+      SHADER_FILL_PREVIEW_BRIDGE_SCRIPT +
+      TWEAK_BRIDGE_SCRIPT +
+      ZOOM_BRIDGE_SCRIPT +
+      LIGHTWEIGHT_HIT_TEST_BRIDGE_SCRIPT +
+      embeddedWheelBridgeForCurrentState +
+      editorChromeBridgeForCurrentState,
+    [editorChromeBridgeForCurrentState, embeddedWheelBridgeForCurrentState],
+  );
+  const liveEditBridgeKey = useMemo(
+    () => contentHash(liveEditBridgeScript),
+    [liveEditBridgeScript],
+  );
+  const usesLiveEditExternalFrame =
     sourceType === "localhost" &&
     Boolean(bridgeUrl && rawExternalPreviewUrl) &&
     !interactMode &&
     !readOnly;
+  const liveEditBridgeRegistered =
+    usesLiveEditExternalFrame &&
+    registeredLiveEditBridgeKey === liveEditBridgeKey;
+  const requiresEditableExternalSnapshot = false;
+  const liveEditExternalPreviewUrl =
+    liveEditBridgeRegistered && bridgeUrl && rawExternalPreviewUrl
+      ? liveEditEndpointUrl(bridgeUrl, rawExternalPreviewUrl)
+      : null;
   const iframeRenderContent =
     activeExternalSnapshotHtml ??
     (requiresEditableExternalSnapshot ? "" : renderedContent);
   const externalPreviewUrl =
-    activeExternalSnapshotHtml || requiresEditableExternalSnapshot
+    liveEditExternalPreviewUrl ??
+    (activeExternalSnapshotHtml || requiresEditableExternalSnapshot
       ? null
-      : rawExternalPreviewUrl;
+      : rawExternalPreviewUrl);
   const waitingForEditableExternalSnapshot =
     requiresEditableExternalSnapshot && !activeExternalSnapshotHtml;
+  const waitingForLiveEditBridge =
+    usesLiveEditExternalFrame && !liveEditBridgeRegistered;
   zoomRef.current = zoom;
   runtimeReplacementContentRef.current = runtimeReplacementContent;
   runtimeReplacementKeyRef.current = runtimeReplacementKey;
@@ -1138,9 +1301,61 @@ export function DesignCanvas({
     onExternalContentSnapshotRef.current = onExternalContentSnapshot;
   }, [onExternalContentSnapshot]);
 
+  useEffect(() => {
+    if (!usesLiveEditExternalFrame || !bridgeUrl) {
+      setRegisteredLiveEditBridgeKey(null);
+      return;
+    }
+    let cancelled = false;
+    setRegisteredLiveEditBridgeKey((current) =>
+      current === liveEditBridgeKey ? current : null,
+    );
+    void (async () => {
+      try {
+        const endpoint = new URL("/live-edit-bridge", bridgeUrl).toString();
+        const response = await fetch(endpoint, {
+          method: "POST",
+          headers: {
+            "content-type": "application/json",
+            ...(bridgeToken ? { "x-bridge-token": bridgeToken } : {}),
+          },
+          body: JSON.stringify({ script: liveEditBridgeScript }),
+        });
+        if (!response.ok) {
+          throw new Error(`Bridge registration failed (${response.status})`);
+        }
+        if (!cancelled) {
+          setRegisteredLiveEditBridgeKey(liveEditBridgeKey);
+        }
+      } catch (error) {
+        if (!cancelled) {
+          console.warn(
+            "[DesignCanvas] live edit bridge registration failed",
+            error,
+          );
+          setRegisteredLiveEditBridgeKey(null);
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    bridgeUrl,
+    bridgeToken,
+    liveEditBridgeKey,
+    liveEditBridgeScript,
+    usesLiveEditExternalFrame,
+  ]);
+
   useEffect(() => {
     const previewUrl = rawExternalPreviewUrl;
-    if (sourceType !== "localhost" || !bridgeUrl || !previewUrl) {
+    if (
+      !requiresEditableExternalSnapshot ||
+      sourceType !== "localhost" ||
+      !bridgeUrl ||
+      !previewUrl
+    ) {
       snapshotRetryAttemptRef.current = 0;
       setFetchedExternalSnapshot((current) =>
         current?.url === previewUrl ? current : null,
@@ -1468,6 +1683,12 @@ export function DesignCanvas({
               origin: e.origin,
               iframeWindow,
               parentOrigin: window.location.origin,
+              allowedOrigins:
+                sourceType === "localhost" && bridgeUrl
+                  ? [originFromUrl(bridgeUrl)].filter(
+                      (origin): origin is string => Boolean(origin),
+                    )
+                  : [],
             });
       if (!trusted) {
         return;
@@ -1509,8 +1730,19 @@ export function DesignCanvas({
           e.data.styles && typeof e.data.styles === "object"
             ? (e.data.styles as Record<string, string>)
             : {};
+        const originalStyles =
+          e.data.originalStyles && typeof e.data.originalStyles === "object"
+            ? (e.data.originalStyles as Record<string, string>)
+            : undefined;
         if (selector && Object.keys(styles).length > 0) {
-          onVisualStyleChange?.(selector, styles, e.data.payload);
+          onVisualStyleChange?.(
+            selector,
+            styles,
+            isElementInfoPayload(e.data.payload) ? e.data.payload : undefined,
+            {
+              originalStyles,
+            },
+          );
         }
         return;
       }
@@ -1528,8 +1760,20 @@ export function DesignCanvas({
         const value = String(e.data.value ?? "");
         const html =
           typeof e.data.html === "string" ? String(e.data.html) : undefined;
+        const originalValue =
+          typeof e.data.originalValue === "string"
+            ? String(e.data.originalValue)
+            : undefined;
+        const originalHtml =
+          typeof e.data.originalHtml === "string"
+            ? String(e.data.originalHtml)
+            : undefined;
         if (selector) {
-          onTextContentChange?.(selector, value, e.data.payload, { html });
+          onTextContentChange?.(selector, value, e.data.payload, {
+            html,
+            originalValue,
+            originalHtml,
+          });
         }
         return;
       }
@@ -1599,7 +1843,7 @@ export function DesignCanvas({
               anchorRect,
             },
           );
-          if (requestId) {
+          if (requestId && applied !== "pending") {
             iframeRef.current?.contentWindow?.postMessage(
               {
                 type: "visual-structure-ack",
@@ -1828,6 +2072,7 @@ export function DesignCanvas({
     onComponentSourceJump,
     isEmbeddedFrame,
     sourceType,
+    bridgeUrl,
     fusionUrl,
     flushPendingOneShotMessages,
   ]);
@@ -2159,6 +2404,89 @@ export function DesignCanvas({
     [postOneShotBridgeMessage],
   );
 
+  const lastStyleRevertRequestIdRef = useRef<number | null>(null);
+  useEffect(() => {
+    if (!styleRevertRequest) return;
+    if (lastStyleRevertRequestIdRef.current === styleRevertRequest.requestId) {
+      return;
+    }
+    lastStyleRevertRequestIdRef.current = styleRevertRequest.requestId;
+    for (const patch of styleRevertRequest.patches) {
+      const selectorCandidates = [
+        patch.selector,
+        patch.sourceId
+          ? `[data-agent-native-node-id="${String(patch.sourceId).replace(/"/g, '\\"')}"]`
+          : "",
+      ].filter(Boolean);
+      for (const [property, value] of Object.entries(patch.styles)) {
+        postOneShotBridgeMessage({
+          type: "style-change",
+          selector: patch.selector,
+          property,
+          value,
+          selectorCandidates,
+          nodeId: patch.sourceId ?? "",
+        });
+      }
+    }
+  }, [postOneShotBridgeMessage, styleRevertRequest]);
+
+  const lastStyleBaselineResetRequestRef = useRef<number | null>(null);
+  useEffect(() => {
+    if (styleBaselineResetRequest == null) return;
+    if (
+      lastStyleBaselineResetRequestRef.current === styleBaselineResetRequest
+    ) {
+      return;
+    }
+    lastStyleBaselineResetRequestRef.current = styleBaselineResetRequest;
+    postOneShotBridgeMessage({
+      type: "agent-native:reset-live-visual-edit-baselines",
+    });
+  }, [postOneShotBridgeMessage, styleBaselineResetRequest]);
+
+  const lastTextRevertRequestIdRef = useRef<number | null>(null);
+  useEffect(() => {
+    if (!textRevertRequest) return;
+    if (lastTextRevertRequestIdRef.current === textRevertRequest.requestId) {
+      return;
+    }
+    lastTextRevertRequestIdRef.current = textRevertRequest.requestId;
+    for (const patch of textRevertRequest.patches) {
+      const selectorCandidates = [
+        patch.selector,
+        patch.sourceId
+          ? `[data-agent-native-node-id="${String(patch.sourceId).replace(/"/g, '\\"')}"]`
+          : "",
+      ].filter(Boolean);
+      postOneShotBridgeMessage({
+        type: "set-text-content",
+        selector: patch.selector,
+        selectorCandidates,
+        value: patch.value,
+        html: patch.html,
+      });
+    }
+  }, [postOneShotBridgeMessage, textRevertRequest]);
+
+  const lastStructureAckRequestIdRef = useRef<number | null>(null);
+  useEffect(() => {
+    if (!structureAckRequest) return;
+    if (
+      lastStructureAckRequestIdRef.current === structureAckRequest.requestId
+    ) {
+      return;
+    }
+    lastStructureAckRequestIdRef.current = structureAckRequest.requestId;
+    for (const ack of structureAckRequest.acks) {
+      postOneShotBridgeMessage({
+        type: "visual-structure-ack",
+        requestId: ack.requestId,
+        applied: ack.applied,
+      });
+    }
+  }, [postOneShotBridgeMessage, structureAckRequest]);
+
   /**
    * Send a motion-preview scrub tick to the iframe.  `t` is the normalised
    * playhead position in [0, 1].  Tracks must have been loaded first via the
@@ -2675,9 +3003,15 @@ export function DesignCanvas({
           </div>
         </div>
       ) : null}
-      {waitingForEditableExternalSnapshot ? (
+      {waitingForEditableExternalSnapshot || waitingForLiveEditBridge ? (
         <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-background/85 px-4 text-center text-sm text-muted-foreground">
-          {externalSnapshotState?.status === "error" ? (
+          {waitingForLiveEditBridge ? (
+            <div className="max-w-[28rem] rounded-md border bg-card px-4 py-3 shadow-sm">
+              {
+                "Preparing live editor..." /* i18n-ignore transient localhost live-edit bridge loading state */
+              }
+            </div>
+          ) : externalSnapshotState?.status === "error" ? (
             // A real offline dev server previously looked identical to the
             // ordinary "still loading" state and retried forever on a fixed
             // 1.5s timer — see getSnapshotRetryDelayMs for the backoff that

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

@@ -604,6 +604,32 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
     return styles;
   }
 
+  var liveVisualEditOriginalInlineStyles =
+    typeof WeakMap !== "undefined"
+      ? new WeakMap<Element, Record<string, string>>()
+      : null;
+
+  function rememberLiveVisualEditOriginalStyles(el: Element | null): void {
+    if (!el || !liveVisualEditOriginalInlineStyles) return;
+    if (liveVisualEditOriginalInlineStyles.has(el)) return;
+    liveVisualEditOriginalInlineStyles.set(el, collectInlineStyles(el));
+  }
+
+  function originalInlineStylesForPatch(
+    el: Element | null,
+    styles: Record<string, string>,
+  ): Record<string, string> {
+    if (!el || !liveVisualEditOriginalInlineStyles) return {};
+    rememberLiveVisualEditOriginalStyles(el);
+    var original = liveVisualEditOriginalInlineStyles.get(el) || {};
+    var patch: Record<string, string> = {};
+    Object.keys(styles).forEach(function (property) {
+      patch[property] =
+        typeof original[property] === "string" ? original[property] : "";
+    });
+    return patch;
+  }
+
   function chromeColorForElement(el: Element | null): string {
     return elementLooksLikeComponent(el)
       ? "var(--design-editor-component-color)"
@@ -946,6 +972,7 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
   }
 
   function postElementSelect(el: Element, e?: MouseEvent): void {
+    rememberLiveVisualEditOriginalStyles(el);
     var message: {
       type: string;
       payload: unknown;
@@ -4455,6 +4482,7 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
         type: "visual-style-change",
         selector: getSelector(selectedEl),
         styles: styles,
+        originalStyles: originalInlineStylesForPatch(selectedEl, styles),
         payload: getElementInfo(selectedEl),
       },
       "*",
@@ -4647,13 +4675,17 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
     setActiveDragCancel(cancelSpacingDrag);
   }
 
-  function postTextContentChange(el, value, html) {
+  function postTextContentChange(el, value, html, originalValue, originalHtml) {
     (window.parent as Window).postMessage(
       {
         type: "text-content-change",
         selector: getSelector(el),
         value: value,
         html: html,
+        originalValue:
+          typeof originalValue === "string" ? originalValue : undefined,
+        originalHtml:
+          typeof originalHtml === "string" ? originalHtml : undefined,
         payload: getElementInfo(el),
       },
       "*",
@@ -5126,15 +5158,17 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
     el.style.display = "flex";
     el.style.flexDirection = inferred.direction;
     el.style.gap = inferred.gap + "px";
+    var styles = {
+      display: "flex",
+      "flex-direction": inferred.direction,
+      gap: inferred.gap + "px",
+    };
     (window.parent as Window).postMessage(
       {
         type: "visual-style-change",
         selector: getSelector(container),
-        styles: {
-          display: "flex",
-          "flex-direction": inferred.direction,
-          gap: inferred.gap + "px",
-        },
+        styles: styles,
+        originalStyles: originalInlineStylesForPatch(container, styles),
         payload: getElementInfo(container),
       },
       "*",
@@ -5223,11 +5257,13 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
       if (!containerBackgroundIsLight(container)) return;
     }
     el.style.color = "inherit";
+    var styles = { color: "inherit" };
     (window.parent as Window).postMessage(
       {
         type: "visual-style-change",
         selector: getSelector(member),
-        styles: { color: "inherit" },
+        styles: styles,
+        originalStyles: originalInlineStylesForPatch(member, styles),
         payload: getElementInfo(member),
       },
       "*",
@@ -6590,15 +6626,17 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
         // order — the host composes them against its synchronous same-tick
         // content refs exactly like multi-property style commits.
         memberStates.forEach(function (state) {
+          var styles = {
+            position: state.el.style.position,
+            left: state.el.style.left,
+            top: state.el.style.top,
+          };
           (window.parent as Window).postMessage(
             {
               type: "visual-style-change",
               selector: getSelector(state.el),
-              styles: {
-                position: state.el.style.position,
-                left: state.el.style.left,
-                top: state.el.style.top,
-              },
+              styles: styles,
+              originalStyles: originalInlineStylesForPatch(state.el, styles),
               payload: getElementInfo(state.el),
             },
             "*",
@@ -6832,6 +6870,7 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
           type: "visual-style-change",
           selector: getSelector(resizeEl),
           styles: styles,
+          originalStyles: originalInlineStylesForPatch(resizeEl, styles),
           payload: getElementInfo(resizeEl),
         },
         "*",
@@ -6902,11 +6941,13 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
       cleanupRotateDrag();
       hideTransformBadge();
       if (!rotateEl) return;
+      var styles = { transform: rotateEl.style.transform };
       (window.parent as Window).postMessage(
         {
           type: "visual-style-change",
           selector: getSelector(rotateEl),
-          styles: { transform: rotateEl.style.transform },
+          styles: styles,
+          originalStyles: originalInlineStylesForPatch(rotateEl, styles),
           payload: getElementInfo(rotateEl),
         },
         "*",
@@ -7461,7 +7502,13 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
       var nextHtml = target.innerHTML || "";
       refreshOverlays();
       if (next !== originalText || nextHtml !== originalHtml) {
-        postTextContentChange(target, next, nextHtml);
+        postTextContentChange(
+          target,
+          next,
+          nextHtml,
+          originalText,
+          originalHtml,
+        );
       }
       // T13: replay the latest runtime-content update that arrived (and was
       // buffered) while this edit session was active, so the canvas isn't
@@ -7905,6 +7952,15 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
       cancelActiveBridgeDrag();
       return;
     }
+    if (e.data.type === "agent-native:reset-live-visual-edit-baselines") {
+      if (liveVisualEditOriginalInlineStyles) {
+        liveVisualEditOriginalInlineStyles = new WeakMap<
+          Element,
+          Record<string, string>
+        >();
+      }
+      return;
+    }
     if (e.data.type === "clear-selection") {
       // During marquee drag, empty hit sets are replayed back from the host as a
       // clear-selection state. Keep the drag-owned rectangle alive until pointer-up.
@@ -8168,6 +8224,23 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
       removeRuntimeTarget(e.data.selector, e.data.selectorCandidates);
       return;
     }
+    if (e.data.type === "set-text-content") {
+      var textTarget = findRuntimeTarget(
+        String(e.data.selector || ""),
+        Array.isArray(e.data.selectorCandidates)
+          ? e.data.selectorCandidates
+          : [],
+      ) as HTMLElement | null;
+      if (!textTarget) return;
+      if (typeof e.data.html === "string") {
+        textTarget.innerHTML = e.data.html;
+      } else {
+        textTarget.textContent =
+          typeof e.data.value === "string" ? e.data.value : "";
+      }
+      refreshOverlays();
+      return;
+    }
     if (e.data.type !== "style-change") return;
     var sel = e.data.selector;
     var prop = e.data.property;
@@ -8211,6 +8284,8 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
         activeTextEditEl,
         activeTextEditEl!.textContent || "",
         activeTextEditEl!.innerHTML || "",
+        undefined,
+        undefined,
       );
       refreshOverlays();
       return;