@agent-native/core 0.130.2 → 0.131.3

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

@@ -123,6 +123,7 @@ interface DesignExtensionsPanelProps {
   className?: string;
   hideAssetLibrary?: boolean;
   title?: string;
+  enableExtensionDiscovery?: boolean;
 }
 
 type CreateExtensionSubmitHandler = (text: string) => void;
@@ -283,7 +284,7 @@ function useSlotInstalls(slotId: string) {
   });
 }
 
-function useAvailableExtensions(slotId: string) {
+function useAvailableExtensions(slotId: string, enabled: boolean) {
   const versions = useChangeVersions(["action"]);
   return useQuery<AvailableExtension[]>({
     queryKey: ["design-editor-extension-slot-available", slotId, versions],
@@ -300,6 +301,7 @@ function useAvailableExtensions(slotId: string) {
       }
       return res.json();
     },
+    enabled,
     placeholderData: (prev) => prev,
   });
 }
@@ -1432,6 +1434,7 @@ export function DesignExtensionsPanel({
   className,
   hideAssetLibrary = false,
   title,
+  enableExtensionDiscovery = false,
 }: DesignExtensionsPanelProps) {
   const t = useT();
   const queryClient = useQueryClient();
@@ -1451,7 +1454,7 @@ export function DesignExtensionsPanel({
     isError: installsErrored,
   } = useSlotInstalls(slotId);
   const { data: available = [], isError: availableErrored } =
-    useAvailableExtensions(slotId);
+    useAvailableExtensions(slotId, enableExtensionDiscovery);
   const installedIds = useMemo(
     () => new Set(installs.map((install) => install.extensionId)),
     [installs],
@@ -1533,7 +1536,9 @@ export function DesignExtensionsPanel({
   );
   const normalizedSearch = searchQuery.trim().toLowerCase();
   const sourceMatches = (source: ToolSourceFilter) =>
-    sourceFilter === "all" || sourceFilter === source;
+    !enableExtensionDiscovery ||
+    sourceFilter === "all" ||
+    sourceFilter === source;
   const categoryMatches = (category: ToolCategoryFilter) =>
     categoryFilter === "all" || categoryFilter === category;
   const textMatches = (name: string, description?: string | null) => {
@@ -1554,17 +1559,20 @@ export function DesignExtensionsPanel({
       categoryMatches("plugins") &&
       textMatches(install.name, install.description),
   );
-  const visibleInstallable = installable.filter(
-    (extension) =>
-      sourceMatches("extensions") &&
-      categoryMatches("plugins") &&
-      textMatches(extension.name, extension.description),
-  );
+  const visibleInstallable = enableExtensionDiscovery
+    ? installable.filter(
+        (extension) =>
+          sourceMatches("extensions") &&
+          categoryMatches("plugins") &&
+          textMatches(extension.name, extension.description),
+      )
+    : [];
   const hasAnyVisibleTool =
     visibleFirstPartyRows.length > 0 ||
     visibleInstalls.length > 0 ||
     visibleInstallable.length > 0;
   const showPluginsEmptyState =
+    enableExtensionDiscovery &&
     !hasAnyVisibleTool &&
     categoryFilter === "plugins" &&
     !normalizedSearch &&
@@ -1576,11 +1584,13 @@ export function DesignExtensionsPanel({
         <h3 className="min-w-0 flex-1 truncate text-xs font-semibold text-foreground">
           {title ?? t("designEditor.extensions")}
         </h3>
-        <CreateExtensionPopover
-          open={createOpen}
-          onOpenChange={setCreateOpen}
-          onSubmit={submitCreatePrompt}
-        />
+        {enableExtensionDiscovery ? (
+          <CreateExtensionPopover
+            open={createOpen}
+            onOpenChange={setCreateOpen}
+            onSubmit={submitCreatePrompt}
+          />
+        ) : null}
       </div>
 
       <div className="design-inspector-scroll min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 pb-4 pt-3">
@@ -1595,16 +1605,18 @@ export function DesignExtensionsPanel({
         </div>
 
         <div className="mb-4 flex flex-wrap gap-1.5">
-          <ToolFilterMenu
-            label="Source"
-            value={sourceFilter}
-            onChange={setSourceFilter}
-            options={[
-              { value: "all", label: "Source" },
-              { value: "built-in", label: "Built-in" },
-              { value: "extensions", label: "Extensions" },
-            ]}
-          />
+          {enableExtensionDiscovery ? (
+            <ToolFilterMenu
+              label="Source"
+              value={sourceFilter}
+              onChange={setSourceFilter}
+              options={[
+                { value: "all", label: "Source" },
+                { value: "built-in", label: "Built-in" },
+                { value: "extensions", label: "Extensions" },
+              ]}
+            />
+          ) : null}
           <ToolFilterMenu
             label="Category"
             value={categoryFilter}
@@ -1614,12 +1626,15 @@ export function DesignExtensionsPanel({
               { value: "shader", label: "Shaders" },
               { value: "tokens", label: "Tokens" },
               { value: "motion", label: "Motion" },
-              { value: "plugins", label: "Plugins" },
+              ...(enableExtensionDiscovery
+                ? [{ value: "plugins" as const, label: "Plugins" }]
+                : []),
             ]}
           />
         </div>
 
-        {(installsErrored || availableErrored) && (
+        {(installsErrored ||
+          (enableExtensionDiscovery && availableErrored)) && (
           <p className="mb-3 rounded border border-destructive/30 bg-destructive/5 px-2 py-1.5 text-[10px] leading-snug text-destructive">
             Couldn&apos;t load extensions. Built-in tools are still available
             below — check your connection and try again.

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

@@ -84,6 +84,8 @@ import {
 import {
   CONTENT_SIZE_REPORT_MESSAGE_TYPE,
   appendContentSizeReporter,
+  resolveStableContentSizeSample,
+  type ContentSizeSample,
 } from "./design-canvas/content-size-report";
 import { appendHitTestResponder } from "./design-canvas/hit-test";
 import { DesignCanvas } from "./DesignCanvas";
@@ -502,6 +504,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   const [measuredIframeHeights, setMeasuredIframeHeights] = useState<
     Record<string, number>
   >({});
+  const contentSizeSamplesRef = useRef<Record<string, ContentSizeSample>>({});
   const liveFrameDragPositionsRef = useRef(
     new Map<string, { left: number; top: number }>(),
   );
@@ -7356,14 +7359,30 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       if (!iframeId) return;
       const key = iframeId;
       const height = Math.round(data.height);
+      const width =
+        typeof data.width === "number" && Number.isFinite(data.width)
+          ? Math.round(data.width)
+          : 0;
+      const viewportHeight =
+        typeof data.viewportHeight === "number" &&
+        Number.isFinite(data.viewportHeight) &&
+        data.viewportHeight > 0
+          ? Math.round(data.viewportHeight)
+          : 0;
+      const sample = resolveStableContentSizeSample(
+        contentSizeSamplesRef.current[key],
+        { height, viewportHeight, width },
+      );
+      contentSizeSamplesRef.current[key] = sample;
+      const acceptedHeight = sample.acceptedHeight;
       setMeasuredIframeHeights((prev) => {
         const current = prev[key];
         // Ignore sub-pixel churn so a report can't trigger a re-render that
         // triggers another report.
-        if (current !== undefined && Math.abs(current - height) <= 1) {
+        if (current !== undefined && Math.abs(current - acceptedHeight) <= 1) {
           return prev;
         }
-        return { ...prev, [key]: height };
+        return { ...prev, [key]: acceptedHeight };
       });
     };
     window.addEventListener("message", handleContentSize);
@@ -7757,7 +7776,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
                 pointerEvents: "none",
                 transform: `scale(${boardFrameGeometry.width / boardStaticPreviewViewport.width}, ${boardFrameGeometry.height / boardStaticPreviewViewport.height})`,
                 transformOrigin: "top left",
-                background: "transparent",
+                background: BOARD_SURFACE_BACKGROUND,
               }}
             />
           </div>
@@ -7809,7 +7828,6 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
                   deviceFrame="none"
                   boardSurface
                   embeddedFrameBackground={BOARD_SURFACE_BACKGROUND}
-                  transparentBackground
                   embeddedFrame={{
                     viewportWidth: Math.max(1, Math.round(boardW)),
                     viewportHeight: Math.max(1, Math.round(boardH)),

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

@@ -443,8 +443,10 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
    *     captured at element creation.
    * Vue's dev compiler exposes `vnode.props.__v_inspector`; Svelte's dev
    * compiler exposes `element.__svelte_meta.loc`. Both are authored compiler
-   * coordinates. When a runtime omits its dev metadata, report WHY
-   * (`unavailableReason`) instead of guessing.
+   * coordinates. Their ancestor walks cross open and closed shadow boundaries
+   * through `ShadowRoot.host`, matching the browser's composed tree rather than
+   * stopping at `parentElement === null`. When a runtime omits its dev metadata,
+   * report WHY (`unavailableReason`) instead of guessing.
    *
    * `sourceFile`/`line`/`column` are the element's OWN authoring site (a button
    * inside Card.jsx always resolves to Card.jsx). `owner*` is where the nearest
@@ -574,7 +576,7 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
   }
 
   type FrameworkDebugProvenance = {
-    framework?: "react" | "vue" | "svelte";
+    framework?: "html" | "react" | "vue" | "svelte" | "angular" | "lwc";
     sourceFile?: string;
     line?: number;
     column?: number;
@@ -585,7 +587,12 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
     ownerComponentName?: string;
     ownerKey?: string;
     // Which tier produced line/column. "debug-stack" is a TRANSFORMED position.
-    method?: "debug-source" | "debug-stack" | "vue-inspector" | "svelte-meta";
+    method?:
+      | "data-attribute"
+      | "debug-source"
+      | "debug-stack"
+      | "vue-inspector"
+      | "svelte-meta";
     // Which tier produced ownerLine/ownerColumn. Tracked separately because an
     // element can carry an authored data-source-* position while its owner site
     // is only reachable through the (transformed) owner stack.
@@ -593,6 +600,18 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
     unavailableReason?: "not-framework" | "no-debug-info";
   };
 
+  function parentElementOrShadowHost(node: any): Element | null {
+    if (!node) return null;
+    if (node.parentElement) return node.parentElement;
+    if (typeof node.getRootNode !== "function") return null;
+    var rootNode = node.getRootNode();
+    var isShadowRoot =
+      rootNode &&
+      typeof rootNode.host !== "undefined" &&
+      typeof rootNode.mode === "string";
+    return isShadowRoot && rootNode.host ? rootNode.host : null;
+  }
+
   // Fiber debug stacks are immutable for the lifetime of a mounted host node.
   // Keep the relatively expensive Object.keys + owner walk off the snapshot
   // hot path after the first successful read. A WeakMap also means React can
@@ -735,7 +754,7 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
           };
         }
       }
-      node = node.parentElement;
+      node = parentElementOrShadowHost(node);
     }
     return sawVue
       ? { framework: "vue", unavailableReason: "no-debug-info" }
@@ -767,13 +786,48 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
           method: "svelte-meta",
         };
       }
-      node = node.parentElement;
+      node = parentElementOrShadowHost(node);
     }
     return sawSvelte
       ? { framework: "svelte", unavailableReason: "no-debug-info" }
       : null;
   }
 
+  function knownUnlocatedFramework(
+    el: Element,
+  ): FrameworkDebugProvenance | null {
+    var node: any = el;
+    for (var depth = 0; node && depth < 8; depth += 1) {
+      if (node.getAttribute && node.attributes) {
+        var tagName =
+          typeof node.tagName === "string" ? node.tagName.toLowerCase() : "";
+        if (
+          node.hasAttribute("ng-version") ||
+          Array.prototype.some.call(node.attributes, function (attribute) {
+            return /^_ng(?:content|host)-/i.test(attribute.name);
+          })
+        ) {
+          // Angular does not expose an authored file/line on DOM nodes. The
+          // marker only distinguishes a known framework with no debug location;
+          // never turn a component class name into a fake source path.
+          return { framework: "angular", unavailableReason: "no-debug-info" };
+        }
+        if (
+          tagName.indexOf("lightning-") === 0 ||
+          Array.prototype.some.call(node.attributes, function (attribute) {
+            return /^lwc-[a-z0-9]+(?:-host)?$/i.test(attribute.name);
+          })
+        ) {
+          // LWC compiler scope attributes identify the runtime, not a source
+          // coordinate. Preserve that distinction instead of fabricating one.
+          return { framework: "lwc", unavailableReason: "no-debug-info" };
+        }
+      }
+      node = parentElementOrShadowHost(node);
+    }
+    return null;
+  }
+
   function frameworkDebugProvenance(el: Element): FrameworkDebugProvenance {
     var react = reactDebugProvenance(el);
     if (react.sourceFile || react.unavailableReason === "no-debug-info") {
@@ -783,9 +837,92 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
     if (vue) return vue;
     var svelte = svelteDebugProvenance(el);
     if (svelte) return svelte;
+    var knownUnlocated = knownUnlocatedFramework(el);
+    if (knownUnlocated) return knownUnlocated;
     return { unavailableReason: "not-framework" };
   }
 
+  function explicitDebugProvenance(
+    el: Element,
+  ): FrameworkDebugProvenance | null {
+    var node: any = el;
+    var sourceNode: any = null;
+    for (var depth = 0; node && depth < 8; depth += 1) {
+      if (
+        node.getAttribute &&
+        (node.getAttribute("data-source-file") || node.getAttribute("data-loc"))
+      ) {
+        sourceNode = node;
+        break;
+      }
+      node = parentElementOrShadowHost(node);
+    }
+    if (!sourceNode) return null;
+
+    var sourceFile = sourceNode.getAttribute("data-source-file");
+    var lineText = sourceNode.getAttribute("data-source-line");
+    var columnText = sourceNode.getAttribute("data-source-column");
+    var dataLoc = sourceNode.getAttribute("data-loc");
+    if (!sourceFile && dataLoc) {
+      var parsed = parseFrameworkDataLoc(dataLoc);
+      if (parsed) {
+        sourceFile = parsed.sourceFile;
+        lineText = String(parsed.line);
+        columnText = parsed.column !== undefined ? String(parsed.column) : null;
+      }
+    }
+    if (!sourceFile) return null;
+
+    var line = lineText ? parseInt(lineText, 10) : undefined;
+    var column = columnText ? parseInt(columnText, 10) : undefined;
+    var declaredFramework = sourceNode.getAttribute("data-source-framework");
+    var declaredMethod = sourceNode.getAttribute("data-source-method");
+    return {
+      framework:
+        declaredFramework === "react" ||
+        declaredFramework === "vue" ||
+        declaredFramework === "svelte" ||
+        declaredFramework === "angular" ||
+        declaredFramework === "lwc" ||
+        declaredFramework === "html"
+          ? declaredFramework
+          : "html",
+      sourceFile: sourceFile,
+      line: line !== undefined && isFinite(line) ? line : undefined,
+      column: column !== undefined && isFinite(column) ? column : undefined,
+      component: sourceNode.getAttribute("data-component-name") || undefined,
+      method:
+        declaredMethod === "debug-source" ||
+        declaredMethod === "debug-stack" ||
+        declaredMethod === "vue-inspector" ||
+        declaredMethod === "svelte-meta"
+          ? declaredMethod
+          : "data-attribute",
+    };
+  }
+
+  function elementDebugProvenance(el: Element): FrameworkDebugProvenance {
+    var framework = frameworkDebugProvenance(el);
+    var explicit = explicitDebugProvenance(el);
+    if (!explicit) return framework;
+
+    // An explicit compiler attribute is the element's authored site, but React
+    // owner metadata still carries the parent call site / key that distinguishes
+    // repeated instances. Merge only those owner fields; an explicit location
+    // must never retain a contradictory unavailableReason.
+    explicit.framework =
+      explicit.framework === "html" && framework.framework
+        ? framework.framework
+        : explicit.framework;
+    explicit.ownerSourceFile = framework.ownerSourceFile;
+    explicit.ownerLine = framework.ownerLine;
+    explicit.ownerColumn = framework.ownerColumn;
+    explicit.ownerComponentName = framework.ownerComponentName;
+    explicit.ownerMethod = framework.ownerMethod;
+    explicit.ownerKey = framework.ownerKey;
+    return explicit;
+  }
+
   var runtimeLayerSnapshotTimer: number | null = null;
   var runtimeLayerSnapshotMaxTimer: number | null = null;
   var lastRuntimeLayerSnapshotHtml = "";
@@ -984,7 +1121,7 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
         ensureRuntimeLayerNodeId(sourceNode),
       );
       inlineSnapshotComputedStyle(sourceNode, cloneNode);
-      var provenance = frameworkDebugProvenance(sourceNode);
+      var provenance = elementDebugProvenance(sourceNode);
       if (provenance.sourceFile) {
         if (provenance.framework) {
           cloneNode.setAttribute("data-source-framework", provenance.framework);
@@ -1843,114 +1980,10 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
           "Parent layout context decides whether movement means gap, order, alignment, or wrapper structure.",
       });
     }
-    // --- provenance: read explicit source-location attributes when present,
-    // then fall back to framework dev-runtime metadata. ---
-    var provenance: FrameworkDebugProvenance | undefined = undefined;
-    var dataSourceFile = el.getAttribute("data-source-file");
-    var dataSourceLine = el.getAttribute("data-source-line");
-    var dataSourceColumn = el.getAttribute("data-source-column");
-    var dataComponentName = el.getAttribute("data-component-name");
-    var dataSourceFramework = el.getAttribute("data-source-framework");
-    var dataLoc = el.getAttribute("data-loc");
-    // data-loc may encode "file:line:col" (Babel source plugin convention).
-    // Only parse it when data-source-file is absent, to avoid double-reads.
-    if (!dataSourceFile && dataLoc) {
-      var lastColonIndex = dataLoc.lastIndexOf(":");
-      var lastPart =
-        lastColonIndex >= 0 ? dataLoc.slice(lastColonIndex + 1) : "";
-      if (lastColonIndex >= 0 && /^\d+$/.test(lastPart)) {
-        var beforeLastPart = dataLoc.slice(0, lastColonIndex);
-        var previousColonIndex = beforeLastPart.lastIndexOf(":");
-        var previousPart =
-          previousColonIndex >= 0
-            ? beforeLastPart.slice(previousColonIndex + 1)
-            : "";
-        var hasColumn = /^\d+$/.test(previousPart);
-        dataSourceFile = hasColumn
-          ? beforeLastPart.slice(0, previousColonIndex)
-          : beforeLastPart;
-        dataSourceLine = hasColumn ? previousPart : lastPart;
-        if (hasColumn) dataSourceColumn = lastPart;
-      }
-    }
-    // Always consult runtime metadata, even when a source plugin already
-    // stamped data-source-*. For React those attributes describe the element's
-    // OWN site and never the owner call site, which is the only thing that
-    // separates `.map()` siblings. The attribute tier still wins below.
-    var hadDataSourceFile = !!dataSourceFile;
-    var frameworkProvenance: FrameworkDebugProvenance =
-      frameworkDebugProvenance(el);
-    if (!hadDataSourceFile && frameworkProvenance.sourceFile) {
-      dataSourceFile = frameworkProvenance.sourceFile;
-      dataSourceLine = String(frameworkProvenance.line);
-      dataSourceColumn = frameworkProvenance.column
-        ? String(frameworkProvenance.column)
-        : null;
-      dataComponentName =
-        dataComponentName || frameworkProvenance.component || null;
-    }
-    if (
-      dataSourceFile ||
-      dataSourceLine ||
-      dataSourceColumn ||
-      dataComponentName ||
-      frameworkProvenance.unavailableReason
-    ) {
-      provenance = {};
-      if (dataSourceFile) provenance.sourceFile = dataSourceFile;
-      if (dataSourceLine) {
-        var ln = parseInt(dataSourceLine, 10);
-        if (!isNaN(ln)) provenance.line = ln;
-      }
-      if (dataSourceColumn) {
-        var col = parseInt(dataSourceColumn, 10);
-        if (!isNaN(col)) provenance.column = col;
-      }
-      if (dataComponentName) provenance.component = dataComponentName;
-      // Which tier the line/column above actually came from. An attribute-borne
-      // location is authored by that transform's convention unless it says
-      // otherwise; a fiber one is only authored on the `_debugSource` tier.
-      if (dataSourceFile) {
-        var declaredMethod = el.getAttribute("data-source-method");
-        provenance.method =
-          declaredMethod === "debug-source" ||
-          declaredMethod === "debug-stack" ||
-          declaredMethod === "vue-inspector" ||
-          declaredMethod === "svelte-meta"
-            ? declaredMethod
-            : hadDataSourceFile
-              ? "data-attribute"
-              : frameworkProvenance.method || "data-attribute";
-      }
-      provenance.framework =
-        dataSourceFramework === "react" ||
-        dataSourceFramework === "vue" ||
-        dataSourceFramework === "svelte" ||
-        dataSourceFramework === "html"
-          ? dataSourceFramework
-          : hadDataSourceFile
-            ? frameworkProvenance.framework || "html"
-            : frameworkProvenance.framework;
-      if (frameworkProvenance.ownerSourceFile) {
-        provenance.ownerSourceFile = frameworkProvenance.ownerSourceFile;
-        provenance.ownerLine = frameworkProvenance.ownerLine;
-        provenance.ownerColumn = frameworkProvenance.ownerColumn;
-        provenance.ownerComponentName = frameworkProvenance.ownerComponentName;
-        // The owner's own tier: on a source-plugin element `method` is the
-        // attribute's authored position while this one is the owner stack's
-        // transformed line, so they must not share a single field.
-        provenance.ownerMethod = frameworkProvenance.ownerMethod;
-      }
-      if (frameworkProvenance.ownerKey) {
-        provenance.ownerKey = frameworkProvenance.ownerKey;
-      }
-      // Why there is no location, so the editor can say "this app exposes no
-      // debug info" instead of "still loading". Never alongside a resolved
-      // location — a plugin-stamped element on a non-React page has one.
-      if (!dataSourceFile && frameworkProvenance.unavailableReason) {
-        provenance.unavailableReason = frameworkProvenance.unavailableReason;
-      }
-    }
+    // Explicit compiler attributes win for the selected element's authored
+    // site; framework runtime metadata fills the React owner call site. The
+    // shared resolver crosses ShadowRoot.host for Vue, Svelte, and attributes.
+    var provenance: FrameworkDebugProvenance = elementDebugProvenance(el);
     return {
       tagName: el.tagName.toLowerCase(),
       componentName: componentName || undefined,
@@ -2834,6 +2867,12 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
         // round-trip must REMOVE it. Restoring a prevParent it never had is
         // what would leave an orphan node behind after Cmd+Z.
         | { inserted: true }
+        | {
+            replaced: true;
+            originalElement: Element;
+            prevParent: Element;
+            prevNextSibling: Node | null;
+          }
         // A host-driven delete. The DETACHED element is kept alive here so an
         // undone deletion re-attaches the real node — with its live React
         // state, listeners and children — instead of re-parsing a sanitized
@@ -8633,7 +8672,13 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
     correctAbsoluteMemberClientPosition(el, desiredDropPoint);
   }
 
-  function postVisualStructureChange(el, target, origin, insertedHtml?) {
+  function postVisualStructureChange(
+    el,
+    target,
+    origin,
+    insertedHtml?,
+    replaced?,
+  ) {
     if (!el || !target || !target.anchor) return;
     dndLog("post:structure-change", {
       el: getSelector(el),
@@ -8665,6 +8710,7 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
         // element the source file has never contained.
         insertedHtml:
           typeof insertedHtml === "string" ? insertedHtml : undefined,
+        replaced: replaced === true ? true : undefined,
         sourceRect: rectInfoForElement(el),
         anchorRect: rectInfoForElement(target.anchor),
         payload: getElementInfo(el),
@@ -12444,6 +12490,7 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
         return;
       }
       var insertPlacement = String(e.data.placement || "");
+      var replaceInsertAnchor = e.data.replaceAnchor === true;
       if (
         insertPlacement !== "before" &&
         insertPlacement !== "after" &&
@@ -12539,6 +12586,33 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
         );
         return;
       }
+      if (replaceInsertAnchor) {
+        var replaceParent = insertAnchor.parentElement;
+        if (!replaceParent) {
+          rejectInsert("placement-unavailable");
+          return;
+        }
+        var replaceNextSibling = insertAnchor.nextSibling;
+        replaceParent.insertBefore(parsedInsertEl, insertAnchor);
+        selectedEl = parsedInsertEl;
+        positionOverlay(selectionOverlay, selectedEl);
+        refreshOverlays();
+        postVisualStructureChange(
+          parsedInsertEl,
+          insertTarget,
+          {
+            replaced: true,
+            originalElement: insertAnchor,
+            prevParent: replaceParent,
+            prevNextSibling: replaceNextSibling,
+          },
+          parsedInsertEl.outerHTML,
+          true,
+        );
+        replaceParent.removeChild(insertAnchor);
+        refreshOverlays();
+        return;
+      }
       // The host bakes flow/absolute positioning into the markup before it
       // gets here (it owns the drop point and the anchor rect), so the node
       // goes in verbatim — no reorder rebasing on a never-laid-out element.
@@ -12573,6 +12647,32 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
       delete pendingStructureMoves[e.data.requestId];
       var moveWasInsert = Boolean(move.origin && "inserted" in move.origin);
       var moveWasRemoval = Boolean(move.origin && "removed" in move.origin);
+      var moveWasReplace = Boolean(move.origin && "replaced" in move.origin);
+      if (moveWasReplace && move.origin && "replaced" in move.origin) {
+        if (!e.data.applied) {
+          if (move.el && move.el.isConnected) move.el.remove();
+          var replaceParent = move.origin.prevParent;
+          var replaceNextSibling = move.origin.prevNextSibling;
+          if (
+            replaceParent &&
+            replaceParent.isConnected &&
+            !move.origin.originalElement.isConnected
+          ) {
+            replaceParent.insertBefore(
+              move.origin.originalElement,
+              replaceNextSibling &&
+                replaceNextSibling.parentNode === replaceParent
+                ? replaceNextSibling
+                : null,
+            );
+            selectedEl = move.origin.originalElement;
+            positionOverlay(selectionOverlay, selectedEl);
+            postElementSelect(selectedEl);
+          }
+        }
+        refreshOverlays();
+        return;
+      }
       if (moveWasRemoval) {
         // applied === true means the source now deletes it too, so the node
         // stays gone and this entry is simply released. applied === false is