@replohq/sandbox-runtime 1.6.8 → 1.7.1

package/_vendor/replo-utils/lib/viewportSnapshot.d.ts

@@ -1,12 +1,14 @@
 export declare const VIEWPORT_SNAPSHOT_REQUEST = "replo:viewport-snapshot:request";
 export declare const VIEWPORT_SNAPSHOT_RESPONSE = "replo:viewport-snapshot:response";
+export declare const VIEWPORT_CONTEXT_REQUEST = "replo:viewport-context:request";
+export declare const VIEWPORT_CONTEXT_RESPONSE = "replo:viewport-context:response";
 /**
  * Levels of iframe nesting a capture request fans out to below the requester.
  * 2 covers the deepest product surface: agent-ui → miniapp → builder preview.
  */
 export declare const VIEWPORT_SNAPSHOT_MAX_DEPTH = 2;
 export interface ViewportSnapshotRequestMessage {
-    type: typeof VIEWPORT_SNAPSHOT_REQUEST;
+    type: typeof VIEWPORT_SNAPSHOT_REQUEST | typeof VIEWPORT_CONTEXT_REQUEST;
     requestId: string;
     frameIndex: number;
     remainingDepth: number;
@@ -21,6 +23,19 @@ export interface ViewportFrameRect {
 export interface ViewportFrameCapture {
     snapshot: unknown;
     childFrames: ViewportChildFrame[];
+    context?: ViewportFrameContext;
+}
+export interface ViewportFrameContext {
+    viewport: {
+        width: number;
+        height: number;
+    };
+    scroll: {
+        x: number;
+        y: number;
+        maximumX: number;
+        maximumY: number;
+    };
 }
 export interface ViewportChildFrame {
     frameIndex: number;
@@ -28,7 +43,7 @@ export interface ViewportChildFrame {
     capture: ViewportFrameCapture;
 }
 export interface ViewportSnapshotResponseMessage {
-    type: typeof VIEWPORT_SNAPSHOT_RESPONSE;
+    type: typeof VIEWPORT_SNAPSHOT_RESPONSE | typeof VIEWPORT_CONTEXT_RESPONSE;
     requestId: string;
     frameIndex: number;
     capture: ViewportFrameCapture | null;
@@ -62,24 +77,30 @@ export declare function isTrustedViewportSnapshotRequester(origin: string): bool
  * at the timeout with whatever arrived — a frame running an older runtime
  * simply never answers and is omitted.
  */
-export declare function requestChildViewportSnapshots({ targetWindow, requestId, timeoutMs, remainingDepth, }: {
+export declare function requestChildViewportSnapshots({ targetWindow, requestId, timeoutMs, remainingDepth, requestType, }: {
     targetWindow: RelayWindow;
     requestId: string;
     timeoutMs: number;
     remainingDepth?: number;
+    requestType?: ViewportSnapshotRequestMessage["type"];
 }): Promise<{
     frameIndex: number;
     capture: ViewportFrameCapture;
 }[]>;
+export declare function requestChildViewportContexts(input: Parameters<typeof requestChildViewportSnapshots>[0]): Promise<{
+    frameIndex: number;
+    capture: ViewportFrameCapture;
+}[]>;
 /**
- * Child-side responder: on a trusted parent request, serialize this frame's
- * DOM, cascade the request to this frame's own children while depth allows,
- * and post the combined capture back to the requesting origin only.
+ * Child-side responder: on a trusted parent request, capture this frame's DOM
+ * or lightweight viewing context, cascade to child frames, and answer only the
+ * requesting origin.
  */
-export declare function startViewportSnapshotResponder({ targetWindow, takeSnapshot, measureFrameRect, isTrustedRequester, cascadeTimeoutMs, }: {
+export declare function startViewportSnapshotResponder({ targetWindow, takeSnapshot, measureFrameRect, measureViewportContext, isTrustedRequester, cascadeTimeoutMs, }: {
     targetWindow: RelayWindow;
     takeSnapshot: () => unknown;
     measureFrameRect: (frameIndex: number) => ViewportFrameRect | null;
+    measureViewportContext?: () => ViewportFrameContext;
     isTrustedRequester?: (origin: string) => boolean;
     cascadeTimeoutMs?: number;
 }): () => void;

package/_vendor/replo-utils/lib/viewportSnapshot.mjs

@@ -1 +1 @@
-export { VIEWPORT_SNAPSHOT_MAX_DEPTH, VIEWPORT_SNAPSHOT_REQUEST, VIEWPORT_SNAPSHOT_RESPONSE, isTrustedViewportSnapshotRequester, requestChildViewportSnapshots, startViewportSnapshotResponder } from '../../../chunk-RXYLMSNM.mjs';
+export { VIEWPORT_CONTEXT_REQUEST, VIEWPORT_CONTEXT_RESPONSE, VIEWPORT_SNAPSHOT_MAX_DEPTH, VIEWPORT_SNAPSHOT_REQUEST, VIEWPORT_SNAPSHOT_RESPONSE, isTrustedViewportSnapshotRequester, requestChildViewportContexts, requestChildViewportSnapshots, startViewportSnapshotResponder } from '../../../chunk-3YA3QXUQ.mjs';

package/_vendor/replo-utils/react/use-viewport-snapshot-responder.d.ts

@@ -2,8 +2,7 @@ import type { ViewportFrameRect } from "../lib/viewportSnapshot";
 /** Relay frameIndex → on-screen rect; window.frames order is iframe document order. */
 export declare function measureViewportFrameRect(frameIndex: number): ViewportFrameRect | null;
 /**
- * Answers a trusted parent frame's turn-end viewport-capture requests with an
- * rrweb serialization of this frame's DOM, cascading into this frame's own
- * iframes. Passive until asked; see docs/agent-session-viewport-filmstrip-prd.md.
+ * Answers trusted parent requests with either an rrweb DOM capture or compact
+ * viewport measurements, cascading into this frame's own iframes.
  */
 export declare function useViewportSnapshotResponder(): void;

package/_vendor/replo-utils/react/use-viewport-snapshot-responder.mjs

@@ -1,4 +1,4 @@
-import { startViewportSnapshotResponder } from '../../../chunk-RXYLMSNM.mjs';
+import { startViewportSnapshotResponder } from '../../../chunk-3YA3QXUQ.mjs';
 import { useEffect } from 'react';
 
 // ../../node_modules/.pnpm/rrweb-snapshot@2.1.1/node_modules/rrweb-snapshot/dist/rrweb-snapshot.js
@@ -5244,6 +5244,21 @@ function measureViewportFrameRect(frameIndex) {
   const { x, y, width, height } = element.getBoundingClientRect();
   return { x, y, width, height };
 }
+function measureViewportFrameContext() {
+  const viewport = { width: window.innerWidth, height: window.innerHeight };
+  const scrollingElement = document.scrollingElement ?? document.documentElement;
+  const maximumX = Math.max(0, scrollingElement.scrollWidth - viewport.width);
+  const maximumY = Math.max(0, scrollingElement.scrollHeight - viewport.height);
+  return {
+    viewport,
+    scroll: {
+      x: Math.min(maximumX, Math.max(0, Math.round(window.scrollX))),
+      y: Math.min(maximumY, Math.max(0, Math.round(window.scrollY))),
+      maximumX,
+      maximumY
+    }
+  };
+}
 function useViewportSnapshotResponder() {
   useEffect(() => {
     if (typeof window === "undefined") {
@@ -5254,7 +5269,8 @@ function useViewportSnapshotResponder() {
       takeSnapshot: () => {
         return snapshot(document, { maskAllInputs: true });
       },
-      measureFrameRect: measureViewportFrameRect
+      measureFrameRect: measureViewportFrameRect,
+      measureViewportContext: measureViewportFrameContext
     });
   }, []);
 }

package/_vendor/schemas/generated/selectModeIframeRpc.d.ts

@@ -22,6 +22,7 @@ export type SelectModeParentMessage = {
     method: "setSelectionType";
     data: {
         selectionType: SelectModeSelectionType;
+        selectors?: string[];
     };
 } | {
     method: "applyOptimisticUpdate";

package/_vendor/schemas/selectModeIframeRpc.d.ts

@@ -216,6 +216,7 @@ export declare const websiteBuilderToCanopyMethodConfig: {
                 drag: "drag";
                 none: "none";
             }>;
+            selectors: z.ZodOptional<z.ZodArray<z.ZodString>>;
         }, z.core.$strip>;
         outputSchema: z.ZodVoid;
     };
@@ -714,6 +715,7 @@ export declare const selectModeParentMessageSchema: z.ZodDiscriminatedUnion<[z.Z
             drag: "drag";
             none: "none";
         }>;
+        selectors: z.ZodOptional<z.ZodArray<z.ZodString>>;
     }, z.core.$strip>;
 }, z.core.$strip>, z.ZodObject<{
     method: z.ZodLiteral<"applyOptimisticUpdate">;

package/_vendor/schemas/selectModeIframeRpc.mjs

@@ -33,13 +33,18 @@ var websiteBuilderToCanopyMethodConfig = {
     inputSchema: z.object({ displayMode: displayModeSchema }),
     outputSchema: z.void()
   },
-  // Declarative push of the parent's current selection type into the
-  // canopy iframe. Transitioning to `none` is canopy's signal to hide
-  // its in-iframe selection frame and drop any in-progress drag —
-  // there's no separate "clear" message because selection state always
-  // flows through agentUiState.
+  // Declarative push of the parent's current selection into the canopy
+  // iframe. Transitioning to `none` is canopy's signal to hide its
+  // in-iframe selection frame and drop any in-progress drag — there's no
+  // separate "clear" message because selection state always flows through
+  // agentUiState. For an `area` selection the parent may also send the
+  // selectors of the members it still holds, so an item removed in the
+  // editor is dropped from the in-iframe selection too.
   setSelectionType: {
-    inputSchema: z.object({ selectionType: selectModeSelectionTypeSchema }),
+    inputSchema: z.object({
+      selectionType: selectModeSelectionTypeSchema,
+      selectors: z.array(z.string()).optional()
+    }),
     outputSchema: z.void()
   },
   applyOptimisticUpdate: {

package/buildMetadata.js

@@ -1,7 +1,7 @@
 export const BUILD_METADATA = {
   "packageName": "@replohq/sandbox-runtime",
-  "version": "1.6.8",
+  "version": "1.7.1",
   "branch": "HEAD",
-  "commit": "8ca5e66f62c62e392dfc352766793b370f4db090",
-  "builtAt": "2026-09-14T21:14:47.553Z"
+  "commit": "a518bd507469206a903941ac3dde233c966036de",
+  "builtAt": "2026-09-15T05:05:19.645Z"
 };

package/{chunk-RXYLMSNM.mjs → chunk-3YA3QXUQ.mjs}

@@ -1,6 +1,8 @@
 // ../replo-utils/lib/viewportSnapshot.ts
 var VIEWPORT_SNAPSHOT_REQUEST = "replo:viewport-snapshot:request";
 var VIEWPORT_SNAPSHOT_RESPONSE = "replo:viewport-snapshot:response";
+var VIEWPORT_CONTEXT_REQUEST = "replo:viewport-context:request";
+var VIEWPORT_CONTEXT_RESPONSE = "replo:viewport-context:response";
 var VIEWPORT_SNAPSHOT_MAX_DEPTH = 2;
 function isTrustedViewportSnapshotRequester(origin) {
   let hostname;
@@ -21,16 +23,17 @@ function canReceiveMessages(value) {
   return typeof value === "object" && value !== null && "postMessage" in value && typeof value.postMessage === "function";
 }
 function isResponseMessage(data) {
-  return typeof data === "object" && data !== null && "type" in data && data.type === VIEWPORT_SNAPSHOT_RESPONSE && "requestId" in data && typeof data.requestId === "string" && "frameIndex" in data && typeof data.frameIndex === "number";
+  return typeof data === "object" && data !== null && "type" in data && (data.type === VIEWPORT_SNAPSHOT_RESPONSE || data.type === VIEWPORT_CONTEXT_RESPONSE) && "requestId" in data && typeof data.requestId === "string" && "frameIndex" in data && typeof data.frameIndex === "number";
 }
 function isRequestMessage(data) {
-  return typeof data === "object" && data !== null && "type" in data && data.type === VIEWPORT_SNAPSHOT_REQUEST && "requestId" in data && typeof data.requestId === "string" && "frameIndex" in data && typeof data.frameIndex === "number" && "remainingDepth" in data && typeof data.remainingDepth === "number";
+  return typeof data === "object" && data !== null && "type" in data && (data.type === VIEWPORT_SNAPSHOT_REQUEST || data.type === VIEWPORT_CONTEXT_REQUEST) && "requestId" in data && typeof data.requestId === "string" && "frameIndex" in data && typeof data.frameIndex === "number" && "remainingDepth" in data && typeof data.remainingDepth === "number";
 }
 function requestChildViewportSnapshots({
   targetWindow,
   requestId,
   timeoutMs,
-  remainingDepth = VIEWPORT_SNAPSHOT_MAX_DEPTH
+  remainingDepth = VIEWPORT_SNAPSHOT_MAX_DEPTH,
+  requestType = VIEWPORT_SNAPSHOT_REQUEST
 }) {
   const frameCount = targetWindow.frames.length;
   if (frameCount === 0 || remainingDepth <= 0) {
@@ -64,7 +67,7 @@ function requestChildViewportSnapshots({
     const timeoutId = targetWindow.setTimeout(settle, timeoutMs);
     for (let frameIndex = 0; frameIndex < frameCount; frameIndex++) {
       const message = {
-        type: VIEWPORT_SNAPSHOT_REQUEST,
+        type: requestType,
         requestId,
         frameIndex,
         remainingDepth
@@ -73,10 +76,17 @@ function requestChildViewportSnapshots({
     }
   });
 }
+function requestChildViewportContexts(input) {
+  return requestChildViewportSnapshots({
+    ...input,
+    requestType: VIEWPORT_CONTEXT_REQUEST
+  });
+}
 function startViewportSnapshotResponder({
   targetWindow,
   takeSnapshot,
   measureFrameRect,
+  measureViewportContext,
   isTrustedRequester = isTrustedViewportSnapshotRequester,
   cascadeTimeoutMs = 1500
 }) {
@@ -89,11 +99,12 @@ function startViewportSnapshotResponder({
       return;
     }
     const { requestId, frameIndex, remainingDepth } = event.data;
+    const captureDom = event.data.type === VIEWPORT_SNAPSHOT_REQUEST;
     const requester = event.source;
     const requesterOrigin = event.origin ?? "*";
     const respond = (capture) => {
       const response = {
-        type: VIEWPORT_SNAPSHOT_RESPONSE,
+        type: captureDom ? VIEWPORT_SNAPSHOT_RESPONSE : VIEWPORT_CONTEXT_RESPONSE,
         requestId,
         frameIndex,
         capture
@@ -101,11 +112,16 @@ function startViewportSnapshotResponder({
       requester.postMessage(response, requesterOrigin);
     };
     let snapshot = null;
+    let context;
     try {
-      snapshot = takeSnapshot();
+      if (!captureDom) {
+        context = measureViewportContext?.();
+      } else {
+        snapshot = takeSnapshot();
+      }
     } catch {
     }
-    if (snapshot === null) {
+    if (captureDom ? snapshot === null : !context) {
       respond(null);
       return;
     }
@@ -114,10 +130,12 @@ function startViewportSnapshotResponder({
       // Derived per level so a child's own fan-out can't collide with ours.
       requestId: `${requestId}:${frameIndex}`,
       timeoutMs: cascadeTimeoutMs,
-      remainingDepth: remainingDepth - 1
+      remainingDepth: remainingDepth - 1,
+      requestType: event.data.type
     }).then((childCaptures) => {
       respond({
         snapshot,
+        ...context ? { context } : {},
         childFrames: childCaptures.flatMap((child) => {
           const rect = measureFrameRect(child.frameIndex);
           return rect ? [{ frameIndex: child.frameIndex, rect, capture: child.capture }] : [];
@@ -131,4 +149,4 @@ function startViewportSnapshotResponder({
   };
 }
 
-export { VIEWPORT_SNAPSHOT_MAX_DEPTH, VIEWPORT_SNAPSHOT_REQUEST, VIEWPORT_SNAPSHOT_RESPONSE, isTrustedViewportSnapshotRequester, requestChildViewportSnapshots, startViewportSnapshotResponder };
+export { VIEWPORT_CONTEXT_REQUEST, VIEWPORT_CONTEXT_RESPONSE, VIEWPORT_SNAPSHOT_MAX_DEPTH, VIEWPORT_SNAPSHOT_REQUEST, VIEWPORT_SNAPSHOT_RESPONSE, isTrustedViewportSnapshotRequester, requestChildViewportContexts, requestChildViewportSnapshots, startViewportSnapshotResponder };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.6.8",
+  "version": "1.7.1",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.6.8",
+    "version": "1.7.1",
     "branch": "HEAD",
-    "commit": "8ca5e66f62c62e392dfc352766793b370f4db090",
-    "builtAt": "2026-09-14T21:14:47.553Z"
+    "commit": "a518bd507469206a903941ac3dde233c966036de",
+    "builtAt": "2026-09-15T05:05:19.645Z"
   },
   "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",

package/select-mode/hooks/useEditModeStateMachine.js

@@ -5,6 +5,7 @@ import {
 } from "../iframeRpcChannel";
 import { setSelectionFrameEditing } from "../selectionFrame";
 import { symbolicateSelectedElement } from "../symbolicate";
+import { createInlineTiptapEditor } from "../tiptapInlineEditor";
 import { getRepetitionSiblingElements } from "./useSiblingResolution";
 const EMPTY_ACTIVE_MARKS = {
   bold: false,
@@ -133,30 +134,21 @@ function useEditModeStateMachine({
       editingElementRef.current = element;
       editIdRef.current = editId;
       originalInnerHTMLRef.current = originalInnerHTML;
-      void import("../tiptapInlineEditor").then(({ createInlineTiptapEditor }) => {
-        if (editingElementRef.current !== element || editIdRef.current !== editId) {
-          return;
-        }
-        editorRef.current = createInlineTiptapEditor({
-          element,
-          content: originalInnerHTML,
-          onCommit: commit,
-          onEscape: revert,
-          onBlur: handleBlur,
-          onSelectionUpdate: (activeMarks) => {
-            postEditorState({ activeMarks, isEditing: true });
-          }
-        });
-        initialHTMLRef.current = editorRef.current.getHTML();
-        beginEditingAtRef.current = Date.now();
-        editorRef.current.focusAndSelectAll();
-        setSelectionFrameEditing(true);
-        postEditorState({ activeMarks: EMPTY_ACTIVE_MARKS, isEditing: true });
-      }).catch(() => {
-        if (editingElementRef.current === element && editIdRef.current === editId) {
-          revert();
+      editorRef.current = createInlineTiptapEditor({
+        element,
+        content: originalInnerHTML,
+        onCommit: commit,
+        onEscape: revert,
+        onBlur: handleBlur,
+        onSelectionUpdate: (activeMarks) => {
+          postEditorState({ activeMarks, isEditing: true });
         }
       });
+      initialHTMLRef.current = editorRef.current.getHTML();
+      beginEditingAtRef.current = Date.now();
+      editorRef.current.focusAndSelectAll();
+      setSelectionFrameEditing(true);
+      postEditorState({ activeMarks: EMPTY_ACTIVE_MARKS, isEditing: true });
     },
     [commit, handleBlur, revert]
   );

package/select-mode/hooks/useEditModeStateMachine.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../select-mode/hooks/useEditModeStateMachine.ts"],
-  "sourcesContent": ["import type { MutableRefObject } from \"react\";\nimport type {\n  DisplayMode,\n  SelectableData,\n  SelectModeFormatCommand,\n} from \"schemas/generated/selectMode\";\nimport type { SelectModeInteractionSession } from \"../selectModeSession\";\nimport type { InlineTiptapEditor } from \"../tiptapInlineEditor\";\n\nimport { useCallback, useEffect, useRef } from \"react\";\n\nimport {\n  getWebsiteBuilderRpc,\n  requestInlineTextEdit,\n} from \"../iframeRpcChannel\";\nimport { setSelectionFrameEditing } from \"../selectionFrame\";\nimport { symbolicateSelectedElement } from \"../symbolicate\";\nimport { getRepetitionSiblingElements } from \"./useSiblingResolution\";\n\ntype ActiveMarks = {\n  bold: boolean;\n  italic: boolean;\n  underline: boolean;\n  strike: boolean;\n};\n\nconst EMPTY_ACTIVE_MARKS: ActiveMarks = {\n  bold: false,\n  italic: false,\n  underline: false,\n  strike: false,\n};\n\n// Notify the parent of the inline editor's state so it can show the inline\n// formatting controls (and live mark state) only while editing.\nfunction postEditorState({\n  activeMarks,\n  isEditing,\n}: {\n  activeMarks: ActiveMarks;\n  isEditing: boolean;\n}) {\n  getWebsiteBuilderRpc()?.editorStateUpdate({ activeMarks, isEditing });\n}\n\nexport function isTextEditableElement(\n  element: Element,\n): element is HTMLElement {\n  const tagName = element.tagName.toLowerCase();\n  return (\n    element instanceof HTMLElement &&\n    Boolean(element.textContent?.trim()) &&\n    ![\n      \"input\",\n      \"textarea\",\n      \"select\",\n      \"option\",\n      \"img\",\n      \"video\",\n      \"canvas\",\n    ].includes(tagName)\n  );\n}\n\n// Window after entering an edit during which a focus loss to the parent frame\n// is treated as the select-mode panel's composer auto-focus stealing focus\n// (and is reclaimed) rather than a deliberate move into the editor UI.\nconst FOCUS_STEAL_GUARD_MS = 1500;\n\nexport function useEditModeStateMachine({\n  displayMode,\n  interactionSessionRef,\n}: {\n  displayMode: DisplayMode;\n  interactionSessionRef: MutableRefObject<SelectModeInteractionSession>;\n}) {\n  const editorRef = useRef<InlineTiptapEditor | null>(null);\n  const editingElementRef = useRef<HTMLElement | null>(null);\n  const editIdRef = useRef<string | null>(null);\n  const pendingEditRef = useRef<{\n    editId: string;\n    element: HTMLElement;\n    timeout: number;\n  } | null>(null);\n  const originalInnerHTMLRef = useRef<string | null>(null);\n  // The editor's HTML right after it parsed the original content. tiptap\n  // re-serializes the markup, so this \u2014 not the raw `originalInnerHTML` \u2014 is the\n  // apples-to-apples baseline for detecting whether a commit actually changed\n  // anything.\n  const initialHTMLRef = useRef<string | null>(null);\n  const isCommittingRef = useRef(false);\n  const beginEditingAtRef = useRef(0);\n\n  const destroyEditor = useCallback(() => {\n    editorRef.current?.destroy();\n    editorRef.current = null;\n    editingElementRef.current = null;\n    editIdRef.current = null;\n    if (pendingEditRef.current) {\n      clearTimeout(pendingEditRef.current.timeout);\n      pendingEditRef.current = null;\n    }\n    originalInnerHTMLRef.current = null;\n    initialHTMLRef.current = null;\n    isCommittingRef.current = false;\n    setSelectionFrameEditing(false);\n    postEditorState({ activeMarks: EMPTY_ACTIVE_MARKS, isEditing: false });\n  }, []);\n\n  const commit = useCallback(() => {\n    const editor = editorRef.current;\n    const editingElement = editingElementRef.current;\n    const originalInnerHTML = originalInnerHTMLRef.current;\n    const editId = editIdRef.current;\n    if (\n      !editor ||\n      !editId ||\n      originalInnerHTML === null ||\n      isCommittingRef.current\n    ) {\n      return;\n    }\n\n    isCommittingRef.current = true;\n    const committedHTML = editor.getHTML();\n\n    // A blur or Shift-Enter with no actual change must not spawn an edit\n    // session. When the content is untouched, restore the original markup and\n    // tear down without notifying the parent.\n    if (committedHTML === initialHTMLRef.current) {\n      destroyEditor();\n      if (editingElement) {\n        editingElement.innerHTML = originalInnerHTML;\n      }\n      return;\n    }\n\n    const committedJSON = editor.getJSON();\n    getWebsiteBuilderRpc()?.textCommitted({\n      editId,\n      html: committedHTML,\n      json: committedJSON,\n      originalInnerHTML,\n    });\n    // NOTE (Noah Gilmore, 2026-07-16): A directly mounted ProseMirror view\n    // clears its root during destroy, so final HTML must be restored afterward.\n    destroyEditor();\n    if (editingElement) {\n      editingElement.innerHTML = committedHTML;\n    }\n  }, [destroyEditor]);\n\n  const revert = useCallback(() => {\n    const editingElement = editingElementRef.current;\n    const originalInnerHTML = originalInnerHTMLRef.current;\n    destroyEditor();\n    if (editingElement && originalInnerHTML !== null) {\n      editingElement.innerHTML = originalInnerHTML;\n    }\n  }, [destroyEditor]);\n\n  const handleBlur = useCallback(() => {\n    if (isCommittingRef.current) {\n      return;\n    }\n    // Focus stayed inside the iframe \u2014 the user clicked elsewhere on the page,\n    // so this is a real \"click away\": commit.\n    if (typeof document !== \"undefined\" && document.hasFocus()) {\n      commit();\n      return;\n    }\n    // Focus left the iframe to the parent editor. When it happens right as the\n    // edit opens, the select-mode panel's composer auto-focus stole it \u2014 pull\n    // it back so a double-click keeps the caret in the text. A deliberate move\n    // into the editor UI later is left alone, and never commits/destroys.\n    if (Date.now() - beginEditingAtRef.current < FOCUS_STEAL_GUARD_MS) {\n      editorRef.current?.focus();\n    }\n  }, [commit]);\n\n  const formatCommand = useCallback((command: SelectModeFormatCommand) => {\n    editorRef.current?.runFormatCommand(command);\n  }, []);\n\n  const clearPendingEdit = useCallback((editId: string) => {\n    if (pendingEditRef.current?.editId !== editId) {\n      return;\n    }\n    clearTimeout(pendingEditRef.current.timeout);\n    pendingEditRef.current = null;\n  }, []);\n\n  const resolveEditRequest = useCallback(\n    ({ editId, allowed }: { editId: string; allowed: boolean }) => {\n      const pendingEdit = pendingEditRef.current;\n      if (!pendingEdit || pendingEdit.editId !== editId) {\n        return;\n      }\n      clearTimeout(pendingEdit.timeout);\n      pendingEditRef.current = null;\n      if (!allowed || !pendingEdit.element.isConnected) {\n        return;\n      }\n\n      const element = pendingEdit.element;\n      const originalInnerHTML = element.innerHTML;\n      editingElementRef.current = element;\n      editIdRef.current = editId;\n      originalInnerHTMLRef.current = originalInnerHTML;\n\n      void import(\"../tiptapInlineEditor\")\n        .then(({ createInlineTiptapEditor }) => {\n          if (\n            editingElementRef.current !== element ||\n            editIdRef.current !== editId\n          ) {\n            return;\n          }\n          editorRef.current = createInlineTiptapEditor({\n            element,\n            content: originalInnerHTML,\n            onCommit: commit,\n            onEscape: revert,\n            onBlur: handleBlur,\n            onSelectionUpdate: (activeMarks) => {\n              postEditorState({ activeMarks, isEditing: true });\n            },\n          });\n          initialHTMLRef.current = editorRef.current.getHTML();\n          beginEditingAtRef.current = Date.now();\n          editorRef.current.focusAndSelectAll();\n          setSelectionFrameEditing(true);\n          postEditorState({ activeMarks: EMPTY_ACTIVE_MARKS, isEditing: true });\n        })\n        .catch(() => {\n          if (\n            editingElementRef.current === element &&\n            editIdRef.current === editId\n          ) {\n            revert();\n          }\n        });\n    },\n    [commit, handleBlur, revert],\n  );\n\n  const beginEditing = useCallback(\n    ({\n      element,\n      descriptorPromise,\n    }: {\n      element: Element;\n      descriptorPromise: Promise<SelectableData>;\n    }) => {\n      // Already editing this element \u2014 re-entering would re-read the mid-edit\n      // DOM as the \"original\" and rebuild the editor over itself, wiping the\n      // content. The pointer-up guard prevents the usual trigger; this is the\n      // backstop for any other path.\n      if (editingElementRef.current === element) {\n        return;\n      }\n      if (!isTextEditableElement(element)) {\n        return;\n      }\n      // Same element already awaiting symbolicate / parent allow \u2014 ignore.\n      // A different element supersedes the in-flight attempt below.\n      if (pendingEditRef.current?.element === element) {\n        return;\n      }\n\n      void descriptorPromise.then((descriptor) => {\n        if (descriptor.kind !== \"react-element\" || !element.isConnected) {\n          return;\n        }\n        interactionSessionRef.current = {\n          type: \"element\",\n          element,\n          siblingElements: getRepetitionSiblingElements({ element }),\n          clickPosition: null,\n          data: descriptor,\n        };\n        const editId = crypto.randomUUID();\n        if (pendingEditRef.current) {\n          clearTimeout(pendingEditRef.current.timeout);\n        }\n        // Symbolicate has no AbortSignal; a wedged sandbox can hang forever.\n        // Self-clear so a hung attempt can't permanently block inline edit.\n        const timeout = window.setTimeout(() => {\n          clearPendingEdit(editId);\n        }, 5000);\n        pendingEditRef.current = { editId, element, timeout };\n        void symbolicateSelectedElement(descriptor).then(\n          (symbolicated) => {\n            if (pendingEditRef.current?.editId !== editId) {\n              return;\n            }\n            void requestInlineTextEdit({\n              editId,\n              element: symbolicated,\n            }).then(\n              ({ allowed }) => {\n                resolveEditRequest({ editId, allowed });\n              },\n              () => {\n                resolveEditRequest({ editId, allowed: false });\n              },\n            );\n          },\n          () => {\n            clearPendingEdit(editId);\n          },\n        );\n      });\n    },\n    [clearPendingEdit, interactionSessionRef, resolveEditRequest],\n  );\n\n  // eslint-disable-next-line replo/no-use-effect -- Tears down the inline editor when leaving selection mode.\n  useEffect(() => {\n    if (displayMode !== \"selection\") {\n      revert();\n    }\n  }, [displayMode, revert]);\n\n  return {\n    beginEditing,\n    editingElementRef,\n    formatCommand,\n    revert,\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { MutableRefObject } from \"react\";\nimport type {\n  DisplayMode,\n  SelectableData,\n  SelectModeFormatCommand,\n} from \"schemas/generated/selectMode\";\nimport type { SelectModeInteractionSession } from \"../selectModeSession\";\nimport type { InlineTiptapEditor } from \"../tiptapInlineEditor\";\n\nimport { useCallback, useEffect, useRef } from \"react\";\n\nimport {\n  getWebsiteBuilderRpc,\n  requestInlineTextEdit,\n} from \"../iframeRpcChannel\";\nimport { setSelectionFrameEditing } from \"../selectionFrame\";\nimport { symbolicateSelectedElement } from \"../symbolicate\";\nimport { createInlineTiptapEditor } from \"../tiptapInlineEditor\";\nimport { getRepetitionSiblingElements } from \"./useSiblingResolution\";\n\ntype ActiveMarks = {\n  bold: boolean;\n  italic: boolean;\n  underline: boolean;\n  strike: boolean;\n};\n\nconst EMPTY_ACTIVE_MARKS: ActiveMarks = {\n  bold: false,\n  italic: false,\n  underline: false,\n  strike: false,\n};\n\n// Notify the parent of the inline editor's state so it can show the inline\n// formatting controls (and live mark state) only while editing.\nfunction postEditorState({\n  activeMarks,\n  isEditing,\n}: {\n  activeMarks: ActiveMarks;\n  isEditing: boolean;\n}) {\n  getWebsiteBuilderRpc()?.editorStateUpdate({ activeMarks, isEditing });\n}\n\nexport function isTextEditableElement(\n  element: Element,\n): element is HTMLElement {\n  const tagName = element.tagName.toLowerCase();\n  return (\n    element instanceof HTMLElement &&\n    Boolean(element.textContent?.trim()) &&\n    ![\n      \"input\",\n      \"textarea\",\n      \"select\",\n      \"option\",\n      \"img\",\n      \"video\",\n      \"canvas\",\n    ].includes(tagName)\n  );\n}\n\n// Window after entering an edit during which a focus loss to the parent frame\n// is treated as the select-mode panel's composer auto-focus stealing focus\n// (and is reclaimed) rather than a deliberate move into the editor UI.\nconst FOCUS_STEAL_GUARD_MS = 1500;\n\nexport function useEditModeStateMachine({\n  displayMode,\n  interactionSessionRef,\n}: {\n  displayMode: DisplayMode;\n  interactionSessionRef: MutableRefObject<SelectModeInteractionSession>;\n}) {\n  const editorRef = useRef<InlineTiptapEditor | null>(null);\n  const editingElementRef = useRef<HTMLElement | null>(null);\n  const editIdRef = useRef<string | null>(null);\n  const pendingEditRef = useRef<{\n    editId: string;\n    element: HTMLElement;\n    timeout: number;\n  } | null>(null);\n  const originalInnerHTMLRef = useRef<string | null>(null);\n  // The editor's HTML right after it parsed the original content. tiptap\n  // re-serializes the markup, so this \u2014 not the raw `originalInnerHTML` \u2014 is the\n  // apples-to-apples baseline for detecting whether a commit actually changed\n  // anything.\n  const initialHTMLRef = useRef<string | null>(null);\n  const isCommittingRef = useRef(false);\n  const beginEditingAtRef = useRef(0);\n\n  const destroyEditor = useCallback(() => {\n    editorRef.current?.destroy();\n    editorRef.current = null;\n    editingElementRef.current = null;\n    editIdRef.current = null;\n    if (pendingEditRef.current) {\n      clearTimeout(pendingEditRef.current.timeout);\n      pendingEditRef.current = null;\n    }\n    originalInnerHTMLRef.current = null;\n    initialHTMLRef.current = null;\n    isCommittingRef.current = false;\n    setSelectionFrameEditing(false);\n    postEditorState({ activeMarks: EMPTY_ACTIVE_MARKS, isEditing: false });\n  }, []);\n\n  const commit = useCallback(() => {\n    const editor = editorRef.current;\n    const editingElement = editingElementRef.current;\n    const originalInnerHTML = originalInnerHTMLRef.current;\n    const editId = editIdRef.current;\n    if (\n      !editor ||\n      !editId ||\n      originalInnerHTML === null ||\n      isCommittingRef.current\n    ) {\n      return;\n    }\n\n    isCommittingRef.current = true;\n    const committedHTML = editor.getHTML();\n\n    // A blur or Shift-Enter with no actual change must not spawn an edit\n    // session. When the content is untouched, restore the original markup and\n    // tear down without notifying the parent.\n    if (committedHTML === initialHTMLRef.current) {\n      destroyEditor();\n      if (editingElement) {\n        editingElement.innerHTML = originalInnerHTML;\n      }\n      return;\n    }\n\n    const committedJSON = editor.getJSON();\n    getWebsiteBuilderRpc()?.textCommitted({\n      editId,\n      html: committedHTML,\n      json: committedJSON,\n      originalInnerHTML,\n    });\n    // NOTE (Noah Gilmore, 2026-07-16): A directly mounted ProseMirror view\n    // clears its root during destroy, so final HTML must be restored afterward.\n    destroyEditor();\n    if (editingElement) {\n      editingElement.innerHTML = committedHTML;\n    }\n  }, [destroyEditor]);\n\n  const revert = useCallback(() => {\n    const editingElement = editingElementRef.current;\n    const originalInnerHTML = originalInnerHTMLRef.current;\n    destroyEditor();\n    if (editingElement && originalInnerHTML !== null) {\n      editingElement.innerHTML = originalInnerHTML;\n    }\n  }, [destroyEditor]);\n\n  const handleBlur = useCallback(() => {\n    if (isCommittingRef.current) {\n      return;\n    }\n    // Focus stayed inside the iframe \u2014 the user clicked elsewhere on the page,\n    // so this is a real \"click away\": commit.\n    if (typeof document !== \"undefined\" && document.hasFocus()) {\n      commit();\n      return;\n    }\n    // Focus left the iframe to the parent editor. When it happens right as the\n    // edit opens, the select-mode panel's composer auto-focus stole it \u2014 pull\n    // it back so a double-click keeps the caret in the text. A deliberate move\n    // into the editor UI later is left alone, and never commits/destroys.\n    if (Date.now() - beginEditingAtRef.current < FOCUS_STEAL_GUARD_MS) {\n      editorRef.current?.focus();\n    }\n  }, [commit]);\n\n  const formatCommand = useCallback((command: SelectModeFormatCommand) => {\n    editorRef.current?.runFormatCommand(command);\n  }, []);\n\n  const clearPendingEdit = useCallback((editId: string) => {\n    if (pendingEditRef.current?.editId !== editId) {\n      return;\n    }\n    clearTimeout(pendingEditRef.current.timeout);\n    pendingEditRef.current = null;\n  }, []);\n\n  const resolveEditRequest = useCallback(\n    ({ editId, allowed }: { editId: string; allowed: boolean }) => {\n      const pendingEdit = pendingEditRef.current;\n      if (!pendingEdit || pendingEdit.editId !== editId) {\n        return;\n      }\n      clearTimeout(pendingEdit.timeout);\n      pendingEditRef.current = null;\n      if (!allowed || !pendingEdit.element.isConnected) {\n        return;\n      }\n\n      const element = pendingEdit.element;\n      const originalInnerHTML = element.innerHTML;\n      editingElementRef.current = element;\n      editIdRef.current = editId;\n      originalInnerHTMLRef.current = originalInnerHTML;\n\n      editorRef.current = createInlineTiptapEditor({\n        element,\n        content: originalInnerHTML,\n        onCommit: commit,\n        onEscape: revert,\n        onBlur: handleBlur,\n        onSelectionUpdate: (activeMarks) => {\n          postEditorState({ activeMarks, isEditing: true });\n        },\n      });\n      initialHTMLRef.current = editorRef.current.getHTML();\n      beginEditingAtRef.current = Date.now();\n      editorRef.current.focusAndSelectAll();\n      setSelectionFrameEditing(true);\n      postEditorState({ activeMarks: EMPTY_ACTIVE_MARKS, isEditing: true });\n    },\n    [commit, handleBlur, revert],\n  );\n\n  const beginEditing = useCallback(\n    ({\n      element,\n      descriptorPromise,\n    }: {\n      element: Element;\n      descriptorPromise: Promise<SelectableData>;\n    }) => {\n      // Already editing this element \u2014 re-entering would re-read the mid-edit\n      // DOM as the \"original\" and rebuild the editor over itself, wiping the\n      // content. The pointer-up guard prevents the usual trigger; this is the\n      // backstop for any other path.\n      if (editingElementRef.current === element) {\n        return;\n      }\n      if (!isTextEditableElement(element)) {\n        return;\n      }\n      // Same element already awaiting symbolicate / parent allow \u2014 ignore.\n      // A different element supersedes the in-flight attempt below.\n      if (pendingEditRef.current?.element === element) {\n        return;\n      }\n\n      void descriptorPromise.then((descriptor) => {\n        if (descriptor.kind !== \"react-element\" || !element.isConnected) {\n          return;\n        }\n        interactionSessionRef.current = {\n          type: \"element\",\n          element,\n          siblingElements: getRepetitionSiblingElements({ element }),\n          clickPosition: null,\n          data: descriptor,\n        };\n        const editId = crypto.randomUUID();\n        if (pendingEditRef.current) {\n          clearTimeout(pendingEditRef.current.timeout);\n        }\n        // Symbolicate has no AbortSignal; a wedged sandbox can hang forever.\n        // Self-clear so a hung attempt can't permanently block inline edit.\n        const timeout = window.setTimeout(() => {\n          clearPendingEdit(editId);\n        }, 5000);\n        pendingEditRef.current = { editId, element, timeout };\n        void symbolicateSelectedElement(descriptor).then(\n          (symbolicated) => {\n            if (pendingEditRef.current?.editId !== editId) {\n              return;\n            }\n            void requestInlineTextEdit({\n              editId,\n              element: symbolicated,\n            }).then(\n              ({ allowed }) => {\n                resolveEditRequest({ editId, allowed });\n              },\n              () => {\n                resolveEditRequest({ editId, allowed: false });\n              },\n            );\n          },\n          () => {\n            clearPendingEdit(editId);\n          },\n        );\n      });\n    },\n    [clearPendingEdit, interactionSessionRef, resolveEditRequest],\n  );\n\n  // eslint-disable-next-line replo/no-use-effect -- Tears down the inline editor when leaving selection mode.\n  useEffect(() => {\n    if (displayMode !== \"selection\") {\n      revert();\n    }\n  }, [displayMode, revert]);\n\n  return {\n    beginEditing,\n    editingElementRef,\n    formatCommand,\n    revert,\n  };\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/select-mode/hooks/useParentMessaging.d.ts

@@ -32,5 +32,8 @@ export declare function useParentMessaging({ applyOptimisticUpdate, markCommitte
     onFormatCommand?: (command: SelectModeFormatCommand) => void;
     revertOverride?: (editId: string) => void;
     setDisplayMode: (displayMode: DisplayMode) => void;
-    setSelectionType: (selectionType: SelectModeSelectionType) => void;
+    setSelectionType: (input: {
+        selectionType: SelectModeSelectionType;
+        selectors?: string[];
+    }) => void;
 }): void;

package/select-mode/hooks/useParentMessaging.js

@@ -40,8 +40,8 @@ function useParentMessaging({
       setDisplayMode: ({ displayMode }) => {
         setDisplayMode(displayMode);
       },
-      setSelectionType: ({ selectionType }) => {
-        setSelectionType(selectionType);
+      setSelectionType: (input) => {
+        setSelectionType(input);
       },
       applyOptimisticUpdate: (message) => {
         applyOptimisticUpdate?.({

package/select-mode/hooks/useParentMessaging.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../select-mode/hooks/useParentMessaging.ts"],
-  "sourcesContent": ["import type {\n  DisplayMode,\n  SelectModeFormatCommand,\n  SelectModeOptimisticUpdatePayload,\n  SelectModeSelectionType,\n} from \"schemas/generated/selectMode\";\n\nimport { useEffect, useMemo } from \"react\";\n\nimport { useIframeRpcChannel } from \"replo-utils/react/use-iframe-rpc-channel\";\nimport { iframeRuntimeBuildMetadataSchema } from \"schemas/selectModeIframeRpc\";\nimport { z } from \"zod\";\n\nimport { BUILD_METADATA } from \"../../buildMetadata\";\nimport {\n  getSelectModeIframeRpcChannel,\n  getWebsiteBuilderRpc,\n  setSelectModeParentHandlers,\n} from \"../iframeRpcChannel\";\n\nconst SDK_BUILD_METADATA_SPECIFIER = \"@replohq/sdk/lib/buildMetadata\";\n\nconst sdkBuildMetadataModuleSchema = z.object({\n  BUILD_METADATA: iframeRuntimeBuildMetadataSchema,\n});\n\nasync function announceSdkBuildMetadata() {\n  try {\n    const sdkBuildMetadata = sdkBuildMetadataModuleSchema.safeParse(\n      await import(SDK_BUILD_METADATA_SPECIFIER),\n    );\n    if (sdkBuildMetadata.success) {\n      getWebsiteBuilderRpc()?.iframeReady(sdkBuildMetadata.data.BUILD_METADATA);\n    }\n  } catch {\n    // Sites that haven't installed @replohq/sdk still handshake with sandbox-runtime alone.\n  }\n}\n\n/**\n * Inbound side of the iframe<->parent selectMode bridge.\n *\n * Listens for Website Builder \u2192 canopy methods and applies them locally:\n *  - `setDisplayMode`: switch the iframe between `browse` and `selection`.\n *  - `setSelectionType`: declarative push of the parent's current\n *    selection type. The interesting transition is `* \u2192 \"none\"`, which\n *    tears down any in-iframe selection frame / in-progress drag \u2014 agent-ui\n *    drives it from `agentUiState.selectionType` so panel dismiss / submit\n *    flow through the same path as exiting selection mode entirely. The\n *    regression test in `EditorSelection.spec.tsx` covers the case where\n *    losing this used to lock the iframe out of further selections.\n *\n * Also fires `iframeReady` on mount so the parent knows it's safe to push\n * the initial `setDisplayMode` \u2014 without this handshake the parent would\n * race the iframe's mount and the first message could be lost.\n *\n * @author Kevin O'Connell 2026-04-17\n */\nexport function useParentMessaging({\n  applyOptimisticUpdate,\n  markCommitted,\n  resolveSessionOverrides,\n  onEnterEditMode,\n  onExitEditMode,\n  onFormatCommand,\n  revertOverride,\n  setDisplayMode,\n  setSelectionType,\n}: {\n  applyOptimisticUpdate?: (input: {\n    editId: string;\n    payload: SelectModeOptimisticUpdatePayload;\n    targetSelector: string;\n    targetMode: \"primary\" | \"group\";\n  }) => void;\n  markCommitted?: (editId: string, sessionId: string) => void;\n  resolveSessionOverrides?: (\n    sessionId: string,\n    outcome: \"persisted\" | \"failed\",\n  ) => void;\n  onEnterEditMode?: () => void;\n  onExitEditMode?: () => void;\n  onFormatCommand?: (command: SelectModeFormatCommand) => void;\n  revertOverride?: (editId: string) => void;\n  setDisplayMode: (displayMode: DisplayMode) => void;\n  setSelectionType: (selectionType: SelectModeSelectionType) => void;\n}) {\n  useIframeRpcChannel(useMemo(() => getSelectModeIframeRpcChannel(), []));\n\n  // eslint-disable-next-line replo/no-use-effect -- Legacy effect - may or may not be necessary\n  useEffect(() => {\n    setSelectModeParentHandlers({\n      setDisplayMode: ({ displayMode }) => {\n        setDisplayMode(displayMode);\n      },\n      setSelectionType: ({ selectionType }) => {\n        setSelectionType(selectionType);\n      },\n      applyOptimisticUpdate: (message) => {\n        applyOptimisticUpdate?.({\n          editId: message.editId,\n          payload: message.payload,\n          targetSelector: message.targetSelector,\n          targetMode: message.targetMode,\n        });\n      },\n      markCommitted: ({ editId, sessionId }) => {\n        markCommitted?.(editId, sessionId);\n      },\n      resolveSessionOverrides: ({ sessionId, outcome }) => {\n        resolveSessionOverrides?.(sessionId, outcome);\n      },\n      revertOverride: ({ editId }) => {\n        revertOverride?.(editId);\n      },\n      enterEditMode: () => {\n        onEnterEditMode?.();\n      },\n      exitEditMode: () => {\n        onExitEditMode?.();\n      },\n      formatCommand: ({ command }) => {\n        onFormatCommand?.(command);\n      },\n    });\n    const rpc = getWebsiteBuilderRpc();\n    rpc?.iframeReady(BUILD_METADATA);\n    void announceSdkBuildMetadata();\n\n    return () => {\n      setSelectModeParentHandlers(null);\n    };\n  }, [\n    applyOptimisticUpdate,\n    markCommitted,\n    resolveSessionOverrides,\n    onEnterEditMode,\n    onExitEditMode,\n    onFormatCommand,\n    revertOverride,\n    setDisplayMode,\n    setSelectionType,\n  ]);\n}\n"],
-  "mappings": "AAOA,SAAS,WAAW,eAAe;AAEnC,SAAS,2BAA2B;AACpC,SAAS,wCAAwC;AACjD,SAAS,SAAS;AAElB,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,+BAA+B;AAErC,MAAM,+BAA+B,EAAE,OAAO;AAAA,EAC5C,gBAAgB;AAClB,CAAC;AAED,eAAe,2BAA2B;AACxC,MAAI;AACF,UAAM,mBAAmB,6BAA6B;AAAA,MACpD,MAAM,OAAO;AAAA,IACf;AACA,QAAI,iBAAiB,SAAS;AAC5B,2BAAqB,GAAG,YAAY,iBAAiB,KAAK,cAAc;AAAA,IAC1E;AAAA,EACF,QAAQ;AAAA,EAER;AACF;AAqBO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAkBG;AACD,sBAAoB,QAAQ,MAAM,8BAA8B,GAAG,CAAC,CAAC,CAAC;AAGtE,YAAU,MAAM;AACd,gCAA4B;AAAA,MAC1B,gBAAgB,CAAC,EAAE,YAAY,MAAM;AACnC,uBAAe,WAAW;AAAA,MAC5B;AAAA,MACA,kBAAkB,CAAC,EAAE,cAAc,MAAM;AACvC,yBAAiB,aAAa;AAAA,MAChC;AAAA,MACA,uBAAuB,CAAC,YAAY;AAClC,gCAAwB;AAAA,UACtB,QAAQ,QAAQ;AAAA,UAChB,SAAS,QAAQ;AAAA,UACjB,gBAAgB,QAAQ;AAAA,UACxB,YAAY,QAAQ;AAAA,QACtB,CAAC;AAAA,MACH;AAAA,MACA,eAAe,CAAC,EAAE,QAAQ,UAAU,MAAM;AACxC,wBAAgB,QAAQ,SAAS;AAAA,MACnC;AAAA,MACA,yBAAyB,CAAC,EAAE,WAAW,QAAQ,MAAM;AACnD,kCAA0B,WAAW,OAAO;AAAA,MAC9C;AAAA,MACA,gBAAgB,CAAC,EAAE,OAAO,MAAM;AAC9B,yBAAiB,MAAM;AAAA,MACzB;AAAA,MACA,eAAe,MAAM;AACnB,0BAAkB;AAAA,MACpB;AAAA,MACA,cAAc,MAAM;AAClB,yBAAiB;AAAA,MACnB;AAAA,MACA,eAAe,CAAC,EAAE,QAAQ,MAAM;AAC9B,0BAAkB,OAAO;AAAA,MAC3B;AAAA,IACF,CAAC;AACD,UAAM,MAAM,qBAAqB;AACjC,SAAK,YAAY,cAAc;AAC/B,SAAK,yBAAyB;AAE9B,WAAO,MAAM;AACX,kCAA4B,IAAI;AAAA,IAClC;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;",
+  "sourcesContent": ["import type {\n  DisplayMode,\n  SelectModeFormatCommand,\n  SelectModeOptimisticUpdatePayload,\n  SelectModeSelectionType,\n} from \"schemas/generated/selectMode\";\n\nimport { useEffect, useMemo } from \"react\";\n\nimport { useIframeRpcChannel } from \"replo-utils/react/use-iframe-rpc-channel\";\nimport { iframeRuntimeBuildMetadataSchema } from \"schemas/selectModeIframeRpc\";\nimport { z } from \"zod\";\n\nimport { BUILD_METADATA } from \"../../buildMetadata\";\nimport {\n  getSelectModeIframeRpcChannel,\n  getWebsiteBuilderRpc,\n  setSelectModeParentHandlers,\n} from \"../iframeRpcChannel\";\n\nconst SDK_BUILD_METADATA_SPECIFIER = \"@replohq/sdk/lib/buildMetadata\";\n\nconst sdkBuildMetadataModuleSchema = z.object({\n  BUILD_METADATA: iframeRuntimeBuildMetadataSchema,\n});\n\nasync function announceSdkBuildMetadata() {\n  try {\n    const sdkBuildMetadata = sdkBuildMetadataModuleSchema.safeParse(\n      await import(SDK_BUILD_METADATA_SPECIFIER),\n    );\n    if (sdkBuildMetadata.success) {\n      getWebsiteBuilderRpc()?.iframeReady(sdkBuildMetadata.data.BUILD_METADATA);\n    }\n  } catch {\n    // Sites that haven't installed @replohq/sdk still handshake with sandbox-runtime alone.\n  }\n}\n\n/**\n * Inbound side of the iframe<->parent selectMode bridge.\n *\n * Listens for Website Builder \u2192 canopy methods and applies them locally:\n *  - `setDisplayMode`: switch the iframe between `browse` and `selection`.\n *  - `setSelectionType`: declarative push of the parent's current\n *    selection type. The interesting transition is `* \u2192 \"none\"`, which\n *    tears down any in-iframe selection frame / in-progress drag \u2014 agent-ui\n *    drives it from `agentUiState.selectionType` so panel dismiss / submit\n *    flow through the same path as exiting selection mode entirely. The\n *    regression test in `EditorSelection.spec.tsx` covers the case where\n *    losing this used to lock the iframe out of further selections.\n *\n * Also fires `iframeReady` on mount so the parent knows it's safe to push\n * the initial `setDisplayMode` \u2014 without this handshake the parent would\n * race the iframe's mount and the first message could be lost.\n *\n * @author Kevin O'Connell 2026-04-17\n */\nexport function useParentMessaging({\n  applyOptimisticUpdate,\n  markCommitted,\n  resolveSessionOverrides,\n  onEnterEditMode,\n  onExitEditMode,\n  onFormatCommand,\n  revertOverride,\n  setDisplayMode,\n  setSelectionType,\n}: {\n  applyOptimisticUpdate?: (input: {\n    editId: string;\n    payload: SelectModeOptimisticUpdatePayload;\n    targetSelector: string;\n    targetMode: \"primary\" | \"group\";\n  }) => void;\n  markCommitted?: (editId: string, sessionId: string) => void;\n  resolveSessionOverrides?: (\n    sessionId: string,\n    outcome: \"persisted\" | \"failed\",\n  ) => void;\n  onEnterEditMode?: () => void;\n  onExitEditMode?: () => void;\n  onFormatCommand?: (command: SelectModeFormatCommand) => void;\n  revertOverride?: (editId: string) => void;\n  setDisplayMode: (displayMode: DisplayMode) => void;\n  setSelectionType: (input: {\n    selectionType: SelectModeSelectionType;\n    selectors?: string[];\n  }) => void;\n}) {\n  useIframeRpcChannel(useMemo(() => getSelectModeIframeRpcChannel(), []));\n\n  // eslint-disable-next-line replo/no-use-effect -- Legacy effect - may or may not be necessary\n  useEffect(() => {\n    setSelectModeParentHandlers({\n      setDisplayMode: ({ displayMode }) => {\n        setDisplayMode(displayMode);\n      },\n      setSelectionType: (input) => {\n        setSelectionType(input);\n      },\n      applyOptimisticUpdate: (message) => {\n        applyOptimisticUpdate?.({\n          editId: message.editId,\n          payload: message.payload,\n          targetSelector: message.targetSelector,\n          targetMode: message.targetMode,\n        });\n      },\n      markCommitted: ({ editId, sessionId }) => {\n        markCommitted?.(editId, sessionId);\n      },\n      resolveSessionOverrides: ({ sessionId, outcome }) => {\n        resolveSessionOverrides?.(sessionId, outcome);\n      },\n      revertOverride: ({ editId }) => {\n        revertOverride?.(editId);\n      },\n      enterEditMode: () => {\n        onEnterEditMode?.();\n      },\n      exitEditMode: () => {\n        onExitEditMode?.();\n      },\n      formatCommand: ({ command }) => {\n        onFormatCommand?.(command);\n      },\n    });\n    const rpc = getWebsiteBuilderRpc();\n    rpc?.iframeReady(BUILD_METADATA);\n    void announceSdkBuildMetadata();\n\n    return () => {\n      setSelectModeParentHandlers(null);\n    };\n  }, [\n    applyOptimisticUpdate,\n    markCommitted,\n    resolveSessionOverrides,\n    onEnterEditMode,\n    onExitEditMode,\n    onFormatCommand,\n    revertOverride,\n    setDisplayMode,\n    setSelectionType,\n  ]);\n}\n"],
+  "mappings": "AAOA,SAAS,WAAW,eAAe;AAEnC,SAAS,2BAA2B;AACpC,SAAS,wCAAwC;AACjD,SAAS,SAAS;AAElB,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,+BAA+B;AAErC,MAAM,+BAA+B,EAAE,OAAO;AAAA,EAC5C,gBAAgB;AAClB,CAAC;AAED,eAAe,2BAA2B;AACxC,MAAI;AACF,UAAM,mBAAmB,6BAA6B;AAAA,MACpD,MAAM,OAAO;AAAA,IACf;AACA,QAAI,iBAAiB,SAAS;AAC5B,2BAAqB,GAAG,YAAY,iBAAiB,KAAK,cAAc;AAAA,IAC1E;AAAA,EACF,QAAQ;AAAA,EAER;AACF;AAqBO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAqBG;AACD,sBAAoB,QAAQ,MAAM,8BAA8B,GAAG,CAAC,CAAC,CAAC;AAGtE,YAAU,MAAM;AACd,gCAA4B;AAAA,MAC1B,gBAAgB,CAAC,EAAE,YAAY,MAAM;AACnC,uBAAe,WAAW;AAAA,MAC5B;AAAA,MACA,kBAAkB,CAAC,UAAU;AAC3B,yBAAiB,KAAK;AAAA,MACxB;AAAA,MACA,uBAAuB,CAAC,YAAY;AAClC,gCAAwB;AAAA,UACtB,QAAQ,QAAQ;AAAA,UAChB,SAAS,QAAQ;AAAA,UACjB,gBAAgB,QAAQ;AAAA,UACxB,YAAY,QAAQ;AAAA,QACtB,CAAC;AAAA,MACH;AAAA,MACA,eAAe,CAAC,EAAE,QAAQ,UAAU,MAAM;AACxC,wBAAgB,QAAQ,SAAS;AAAA,MACnC;AAAA,MACA,yBAAyB,CAAC,EAAE,WAAW,QAAQ,MAAM;AACnD,kCAA0B,WAAW,OAAO;AAAA,MAC9C;AAAA,MACA,gBAAgB,CAAC,EAAE,OAAO,MAAM;AAC9B,yBAAiB,MAAM;AAAA,MACzB;AAAA,MACA,eAAe,MAAM;AACnB,0BAAkB;AAAA,MACpB;AAAA,MACA,cAAc,MAAM;AAClB,yBAAiB;AAAA,MACnB;AAAA,MACA,eAAe,CAAC,EAAE,QAAQ,MAAM;AAC9B,0BAAkB,OAAO;AAAA,MAC3B;AAAA,IACF,CAAC;AACD,UAAM,MAAM,qBAAqB;AACjC,SAAK,YAAY,cAAc;AAC/B,SAAK,yBAAyB;AAE9B,WAAO,MAAM;AACX,kCAA4B,IAAI;AAAA,IAClC;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;",
   "names": []
 }

package/select-mode/hooks/useSelectModeController.d.ts

@@ -4,5 +4,8 @@ export declare function useSelectModeController(): {
     displayMode: DisplayMode;
     interactionSessionRef: import("react").RefObject<SelectModeInteractionSession>;
     setDisplayMode: (nextDisplayMode: DisplayMode) => void;
-    setSelectionType: (selectionType: SelectModeSelectionType) => void;
+    setSelectionType: ({ selectionType, selectors, }: {
+        selectionType: SelectModeSelectionType;
+        selectors?: string[];
+    }) => void;
 };

package/select-mode/hooks/useSelectModeController.js

@@ -1,7 +1,8 @@
 import { useCallback, useRef } from "react";
 import { displayModeStore, useDisplayMode } from "../displayModeStore";
 import { getWebsiteBuilderRpc } from "../iframeRpcChannel";
-import { hideSelectionFrame } from "../selectionFrame";
+import { getDocumentScrollOffset } from "../interactions/selectionGeometry";
+import { hideSelectionFrame, showAreaSelectionFrames } from "../selectionFrame";
 import { IDLE_SESSION } from "../selectModeSession";
 import { resetHoverRectDedup } from "./useSelectionHover";
 function resetInteractionSession({
@@ -22,10 +23,34 @@ function useSelectModeController() {
   const displayMode = useDisplayMode();
   const interactionSessionRef = useRef(IDLE_SESSION);
   const setSelectionType = useCallback(
-    (selectionType) => {
+    ({
+      selectionType,
+      selectors
+    }) => {
       if (selectionType === "none") {
         resetInteractionSession({ interactionSessionRef });
+        return;
       }
+      const session = interactionSessionRef.current;
+      if (selectionType !== "area" || !selectors || session.type !== "area") {
+        return;
+      }
+      const retainedSelectors = new Set(selectors);
+      const items = session.items.filter((item) => {
+        return item.data.kind !== "react-element" || retainedSelectors.has(item.data.selector);
+      });
+      if (items.length === session.items.length) {
+        return;
+      }
+      if (items.length === 0) {
+        resetInteractionSession({ interactionSessionRef });
+        return;
+      }
+      interactionSessionRef.current = { ...session, items };
+      showAreaSelectionFrames({
+        elements: items.map((item) => item.element),
+        scrollOffset: getDocumentScrollOffset()
+      });
     },
     []
   );

package/select-mode/hooks/useSelectModeController.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../select-mode/hooks/useSelectModeController.ts"],
-  "sourcesContent": ["import type {\n  DisplayMode,\n  SelectModeSelectionType,\n} from \"schemas/generated/selectMode\";\nimport type { SelectModeInteractionSession } from \"../selectModeSession\";\n\nimport { useCallback, useRef } from \"react\";\n\nimport { displayModeStore, useDisplayMode } from \"../displayModeStore\";\nimport { getWebsiteBuilderRpc } from \"../iframeRpcChannel\";\nimport { hideSelectionFrame } from \"../selectionFrame\";\nimport { IDLE_SESSION } from \"../selectModeSession\";\nimport { resetHoverRectDedup } from \"./useSelectionHover\";\n\n/**\n * Tear down any in-progress drag/selection. Re-used by both the\n * display-mode flip-out path (defensive: belt-and-braces with the\n * parent's `setSelectionType(\"none\")` push) and by the explicit\n * `setSelectionType(\"none\")` path below.\n */\nfunction resetInteractionSession({\n  interactionSessionRef,\n}: {\n  interactionSessionRef: React.MutableRefObject<SelectModeInteractionSession>;\n}) {\n  const currentSession = interactionSessionRef.current;\n  if (currentSession.type === \"drag\" && currentSession.hasExceededThreshold) {\n    getWebsiteBuilderRpc()?.dragRectUpdated({\n      dragRect: null,\n      selectionRects: [],\n    });\n  }\n  hideSelectionFrame();\n  // The parent wiped its hover overlay as part of this clear; the hover\n  // hook's rect dedup must forget its last post or an identical rect would\n  // never re-render the overlay.\n  resetHoverRectDedup();\n  interactionSessionRef.current = IDLE_SESSION;\n}\n\nexport function useSelectModeController() {\n  // Display mode lives in a module singleton so the sibling `LinkInterceptor`\n  // can read it (and stand down during selection) without a shared provider.\n  const displayMode = useDisplayMode();\n  const interactionSessionRef =\n    useRef<SelectModeInteractionSession>(IDLE_SESSION);\n\n  // The parent is authoritative for \"is there a current selection?\". Canopy\n  // originates selections via pointer events, posts them up, agent-ui\n  // mirrors `selection.type` into `agentUiState`, and the result is pushed\n  // back down here. When the parent says `none` (panel dismissed / submit /\n  // exit selection mode) we tear down the in-iframe frame; the matching\n  // commit-side paths are in `useSelectionInteractions`.\n  const setSelectionType = useCallback(\n    (selectionType: SelectModeSelectionType) => {\n      if (selectionType === \"none\") {\n        resetInteractionSession({ interactionSessionRef });\n      }\n    },\n    [],\n  );\n\n  const setDisplayMode = useCallback((nextDisplayMode: DisplayMode) => {\n    if (\n      displayModeStore.getSnapshot() === \"selection\" &&\n      nextDisplayMode !== \"selection\"\n    ) {\n      resetInteractionSession({ interactionSessionRef });\n    }\n\n    displayModeStore.setDisplayMode(nextDisplayMode);\n  }, []);\n\n  return {\n    displayMode,\n    interactionSessionRef,\n    setDisplayMode,\n    setSelectionType,\n  };\n}\n"],
-  "mappings": "AAMA,SAAS,aAAa,cAAc;AAEpC,SAAS,kBAAkB,sBAAsB;AACjD,SAAS,4BAA4B;AACrC,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AAQpC,SAAS,wBAAwB;AAAA,EAC/B;AACF,GAEG;AACD,QAAM,iBAAiB,sBAAsB;AAC7C,MAAI,eAAe,SAAS,UAAU,eAAe,sBAAsB;AACzE,yBAAqB,GAAG,gBAAgB;AAAA,MACtC,UAAU;AAAA,MACV,gBAAgB,CAAC;AAAA,IACnB,CAAC;AAAA,EACH;AACA,qBAAmB;AAInB,sBAAoB;AACpB,wBAAsB,UAAU;AAClC;AAEO,SAAS,0BAA0B;AAGxC,QAAM,cAAc,eAAe;AACnC,QAAM,wBACJ,OAAqC,YAAY;AAQnD,QAAM,mBAAmB;AAAA,IACvB,CAAC,kBAA2C;AAC1C,UAAI,kBAAkB,QAAQ;AAC5B,gCAAwB,EAAE,sBAAsB,CAAC;AAAA,MACnD;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,iBAAiB,YAAY,CAAC,oBAAiC;AACnE,QACE,iBAAiB,YAAY,MAAM,eACnC,oBAAoB,aACpB;AACA,8BAAwB,EAAE,sBAAsB,CAAC;AAAA,IACnD;AAEA,qBAAiB,eAAe,eAAe;AAAA,EACjD,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type {\n  DisplayMode,\n  SelectModeSelectionType,\n} from \"schemas/generated/selectMode\";\nimport type { SelectModeInteractionSession } from \"../selectModeSession\";\n\nimport { useCallback, useRef } from \"react\";\n\nimport { displayModeStore, useDisplayMode } from \"../displayModeStore\";\nimport { getWebsiteBuilderRpc } from \"../iframeRpcChannel\";\nimport { getDocumentScrollOffset } from \"../interactions/selectionGeometry\";\nimport { hideSelectionFrame, showAreaSelectionFrames } from \"../selectionFrame\";\nimport { IDLE_SESSION } from \"../selectModeSession\";\nimport { resetHoverRectDedup } from \"./useSelectionHover\";\n\n/**\n * Tear down any in-progress drag/selection. Re-used by both the\n * display-mode flip-out path (defensive: belt-and-braces with the\n * parent's `setSelectionType(\"none\")` push) and by the explicit\n * `setSelectionType(\"none\")` path below.\n */\nfunction resetInteractionSession({\n  interactionSessionRef,\n}: {\n  interactionSessionRef: React.MutableRefObject<SelectModeInteractionSession>;\n}) {\n  const currentSession = interactionSessionRef.current;\n  if (currentSession.type === \"drag\" && currentSession.hasExceededThreshold) {\n    getWebsiteBuilderRpc()?.dragRectUpdated({\n      dragRect: null,\n      selectionRects: [],\n    });\n  }\n  hideSelectionFrame();\n  // The parent wiped its hover overlay as part of this clear; the hover\n  // hook's rect dedup must forget its last post or an identical rect would\n  // never re-render the overlay.\n  resetHoverRectDedup();\n  interactionSessionRef.current = IDLE_SESSION;\n}\n\nexport function useSelectModeController() {\n  // Display mode lives in a module singleton so the sibling `LinkInterceptor`\n  // can read it (and stand down during selection) without a shared provider.\n  const displayMode = useDisplayMode();\n  const interactionSessionRef =\n    useRef<SelectModeInteractionSession>(IDLE_SESSION);\n\n  // The parent is authoritative for \"is there a current selection?\". Canopy\n  // originates selections via pointer events, posts them up, agent-ui\n  // mirrors `selection.type` into `agentUiState`, and the result is pushed\n  // back down here. When the parent says `none` (panel dismissed / submit /\n  // exit selection mode) we tear down the in-iframe frame; the matching\n  // commit-side paths are in `useSelectionInteractions`.\n  const setSelectionType = useCallback(\n    ({\n      selectionType,\n      selectors,\n    }: {\n      selectionType: SelectModeSelectionType;\n      selectors?: string[];\n    }) => {\n      if (selectionType === \"none\") {\n        resetInteractionSession({ interactionSessionRef });\n        return;\n      }\n      const session = interactionSessionRef.current;\n      if (selectionType !== \"area\" || !selectors || session.type !== \"area\") {\n        return;\n      }\n      // The editor can remove a single member (the tag's X) without a\n      // pointer event ever reaching the iframe, so trim the session to the\n      // members the parent still holds.\n      const retainedSelectors = new Set(selectors);\n      const items = session.items.filter((item) => {\n        return (\n          item.data.kind !== \"react-element\" ||\n          retainedSelectors.has(item.data.selector)\n        );\n      });\n      if (items.length === session.items.length) {\n        return;\n      }\n      if (items.length === 0) {\n        resetInteractionSession({ interactionSessionRef });\n        return;\n      }\n      interactionSessionRef.current = { ...session, items };\n      showAreaSelectionFrames({\n        elements: items.map((item) => item.element),\n        scrollOffset: getDocumentScrollOffset(),\n      });\n    },\n    [],\n  );\n\n  const setDisplayMode = useCallback((nextDisplayMode: DisplayMode) => {\n    if (\n      displayModeStore.getSnapshot() === \"selection\" &&\n      nextDisplayMode !== \"selection\"\n    ) {\n      resetInteractionSession({ interactionSessionRef });\n    }\n\n    displayModeStore.setDisplayMode(nextDisplayMode);\n  }, []);\n\n  return {\n    displayMode,\n    interactionSessionRef,\n    setDisplayMode,\n    setSelectionType,\n  };\n}\n"],
+  "mappings": "AAMA,SAAS,aAAa,cAAc;AAEpC,SAAS,kBAAkB,sBAAsB;AACjD,SAAS,4BAA4B;AACrC,SAAS,+BAA+B;AACxC,SAAS,oBAAoB,+BAA+B;AAC5D,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AAQpC,SAAS,wBAAwB;AAAA,EAC/B;AACF,GAEG;AACD,QAAM,iBAAiB,sBAAsB;AAC7C,MAAI,eAAe,SAAS,UAAU,eAAe,sBAAsB;AACzE,yBAAqB,GAAG,gBAAgB;AAAA,MACtC,UAAU;AAAA,MACV,gBAAgB,CAAC;AAAA,IACnB,CAAC;AAAA,EACH;AACA,qBAAmB;AAInB,sBAAoB;AACpB,wBAAsB,UAAU;AAClC;AAEO,SAAS,0BAA0B;AAGxC,QAAM,cAAc,eAAe;AACnC,QAAM,wBACJ,OAAqC,YAAY;AAQnD,QAAM,mBAAmB;AAAA,IACvB,CAAC;AAAA,MACC;AAAA,MACA;AAAA,IACF,MAGM;AACJ,UAAI,kBAAkB,QAAQ;AAC5B,gCAAwB,EAAE,sBAAsB,CAAC;AACjD;AAAA,MACF;AACA,YAAM,UAAU,sBAAsB;AACtC,UAAI,kBAAkB,UAAU,CAAC,aAAa,QAAQ,SAAS,QAAQ;AACrE;AAAA,MACF;AAIA,YAAM,oBAAoB,IAAI,IAAI,SAAS;AAC3C,YAAM,QAAQ,QAAQ,MAAM,OAAO,CAAC,SAAS;AAC3C,eACE,KAAK,KAAK,SAAS,mBACnB,kBAAkB,IAAI,KAAK,KAAK,QAAQ;AAAA,MAE5C,CAAC;AACD,UAAI,MAAM,WAAW,QAAQ,MAAM,QAAQ;AACzC;AAAA,MACF;AACA,UAAI,MAAM,WAAW,GAAG;AACtB,gCAAwB,EAAE,sBAAsB,CAAC;AACjD;AAAA,MACF;AACA,4BAAsB,UAAU,EAAE,GAAG,SAAS,MAAM;AACpD,8BAAwB;AAAA,QACtB,UAAU,MAAM,IAAI,CAAC,SAAS,KAAK,OAAO;AAAA,QAC1C,cAAc,wBAAwB;AAAA,MACxC,CAAC;AAAA,IACH;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,iBAAiB,YAAY,CAAC,oBAAiC;AACnE,QACE,iBAAiB,YAAY,MAAM,eACnC,oBAAoB,aACpB;AACA,8BAAwB,EAAE,sBAAsB,CAAC;AAAA,IACnD;AAEA,qBAAiB,eAAe,eAAe;AAAA,EACjD,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }