@replohq/sandbox-runtime 1.7.9 → 1.7.11

package/_vendor/replo-utils/react/zustand.d.ts

@@ -0,0 +1,13 @@
+import type { StateCreator, StoreApi } from "zustand";
+/**
+ * Drop-in replacement for zustand's `useStore` that uses shallow equality by default.
+ * Use this in context-based stores so all selectors automatically get shallow comparison.
+ * Subscribes through React's useSyncExternalStore so the consumer's React is
+ * used, not Zustand's nested use-sync-external-store copy.
+ */
+export declare function useShallowStore<StateType, SelectedType>(store: StoreApi<StateType>, selector: (state: StateType) => SelectedType): SelectedType;
+/**
+ * Drop-in replacement for zustand's `create` that uses shallow equality by default.
+ * Use this instead of `create()` so all selectors automatically get shallow comparison.
+ */
+export declare function createShallowStore<StateType>(initializer: StateCreator<StateType, [], []>): import("zustand/traditional").UseBoundStoreWithEqualityFn<StoreApi<StateType>>;

package/_vendor/replo-utils/react/zustand.mjs

@@ -0,0 +1,24 @@
+import { useRef, useSyncExternalStore } from 'react';
+import { shallow } from 'zustand/shallow';
+import { createWithEqualityFn } from 'zustand/traditional';
+
+function useShallowStore(store, selector) {
+  const lastSelectedRef = useRef(void 0);
+  return useSyncExternalStore(
+    store.subscribe,
+    () => {
+      const next = selector(store.getState());
+      if (lastSelectedRef.current !== void 0 && shallow(lastSelectedRef.current, next)) {
+        return lastSelectedRef.current;
+      }
+      lastSelectedRef.current = next;
+      return next;
+    },
+    () => selector(store.getState())
+  );
+}
+function createShallowStore(initializer) {
+  return createWithEqualityFn(initializer, shallow);
+}
+
+export { createShallowStore, useShallowStore };

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

@@ -1,4 +1,8 @@
-import type { SelectedElement, DisplayMode, SelectModeSelectionType, SelectModeOptimisticUpdatePayload, SelectModeFormatCommand, SelectableData, SelectModeBoundingRect, SelectModeClickPosition, SelectModeSelectionRect, SelectModeTiptapActiveMarks } from "./selectMode";
+import type { SelectModeBoundingRect, SelectedElement, DisplayMode, SelectModeSelectionType, SelectModeOptimisticUpdatePayload, SelectModeFormatCommand, SelectableData, SelectModeClickPosition, SelectModeSelectionRect, SelectModeTiptapActiveMarks } from "./selectMode";
+export type InlineEditFeedback = {
+    status: "pending" | "unavailable" | "failed";
+    rect: SelectModeBoundingRect;
+};
 export type SelectedComponentEditRequest = {
     siteId: string;
     element: SelectedElement;
@@ -105,11 +109,17 @@ export type SelectModeIframeMessage = {
         };
         originalInnerHTML: string;
     };
+} | {
+    method: "inlineEditFeedbackChanged";
+    data: {
+        feedback: InlineEditFeedback | null;
+    };
 } | {
     method: "editorStateUpdate";
     data: {
         activeMarks: SelectModeTiptapActiveMarks;
-        isEditing: boolean;
+        isInlineEditing: boolean;
+        isInlineEditPending: boolean;
     };
 } | {
     method: "fastRefreshComplete";

package/_vendor/schemas/selectModeIframeRpc.d.ts

@@ -2,6 +2,23 @@ import type { SelectModeIframeMessage, SelectModeParentMessage } from "./generat
 import { z } from "zod";
 export declare const SELECT_MODE_IFRAME_RPC_CHANNEL_ID: "replo:select-mode-iframe-rpc";
 export declare const SELECT_MODE_IFRAME_RPC_CHANNEL_VERSION: 1;
+export declare const inlineEditFeedbackSchema: z.ZodObject<{
+    status: z.ZodEnum<{
+        unavailable: "unavailable";
+        pending: "pending";
+        failed: "failed";
+    }>;
+    rect: z.ZodObject<{
+        x: z.ZodNumber;
+        y: z.ZodNumber;
+        left: z.ZodNumber;
+        top: z.ZodNumber;
+        right: z.ZodNumber;
+        bottom: z.ZodNumber;
+        width: z.ZodNumber;
+        height: z.ZodNumber;
+    }, z.core.$strip>;
+}, z.core.$strip>;
 export declare const iframeRuntimeBuildMetadataSchema: z.ZodObject<{
     packageName: z.ZodString;
     version: z.ZodString;
@@ -258,8 +275,8 @@ export declare const websiteBuilderToCanopyMethodConfig: {
         inputSchema: z.ZodObject<{
             sessionId: z.ZodString;
             outcome: z.ZodEnum<{
-                persisted: "persisted";
                 failed: "failed";
+                persisted: "persisted";
             }>;
         }, z.core.$strip>;
         outputSchema: z.ZodVoid;
@@ -621,6 +638,28 @@ export declare const canopyToWebsiteBuilderMethodConfig: {
         }, z.core.$strip>;
         outputSchema: z.ZodVoid;
     };
+    inlineEditFeedbackChanged: {
+        inputSchema: z.ZodObject<{
+            feedback: z.ZodNullable<z.ZodObject<{
+                status: z.ZodEnum<{
+                    unavailable: "unavailable";
+                    pending: "pending";
+                    failed: "failed";
+                }>;
+                rect: z.ZodObject<{
+                    x: z.ZodNumber;
+                    y: z.ZodNumber;
+                    left: z.ZodNumber;
+                    top: z.ZodNumber;
+                    right: z.ZodNumber;
+                    bottom: z.ZodNumber;
+                    width: z.ZodNumber;
+                    height: z.ZodNumber;
+                }, z.core.$strip>;
+            }, z.core.$strip>>;
+        }, z.core.$strip>;
+        outputSchema: z.ZodVoid;
+    };
     editorStateUpdate: {
         inputSchema: z.ZodObject<{
             activeMarks: z.ZodObject<{
@@ -629,7 +668,8 @@ export declare const canopyToWebsiteBuilderMethodConfig: {
                 underline: z.ZodBoolean;
                 strike: z.ZodBoolean;
             }, z.core.$strip>;
-            isEditing: z.ZodBoolean;
+            isInlineEditing: z.ZodBoolean;
+            isInlineEditPending: z.ZodBoolean;
         }, z.core.$strip>;
         outputSchema: z.ZodVoid;
     };
@@ -758,8 +798,8 @@ export declare const selectModeParentMessageSchema: z.ZodDiscriminatedUnion<[z.Z
     data: z.ZodObject<{
         sessionId: z.ZodString;
         outcome: z.ZodEnum<{
-            persisted: "persisted";
             failed: "failed";
+            persisted: "persisted";
         }>;
     }, z.core.$strip>;
 }, z.core.$strip>, z.ZodObject<{
@@ -1036,6 +1076,27 @@ export declare const selectModeIframeMessageSchema: z.ZodDiscriminatedUnion<[z.Z
         json: z.ZodRecord<z.ZodString, z.ZodUnknown>;
         originalInnerHTML: z.ZodString;
     }, z.core.$strip>;
+}, z.core.$strip>, z.ZodObject<{
+    method: z.ZodLiteral<"inlineEditFeedbackChanged">;
+    data: z.ZodObject<{
+        feedback: z.ZodNullable<z.ZodObject<{
+            status: z.ZodEnum<{
+                unavailable: "unavailable";
+                pending: "pending";
+                failed: "failed";
+            }>;
+            rect: z.ZodObject<{
+                x: z.ZodNumber;
+                y: z.ZodNumber;
+                left: z.ZodNumber;
+                top: z.ZodNumber;
+                right: z.ZodNumber;
+                bottom: z.ZodNumber;
+                width: z.ZodNumber;
+                height: z.ZodNumber;
+            }, z.core.$strip>;
+        }, z.core.$strip>>;
+    }, z.core.$strip>;
 }, z.core.$strip>, z.ZodObject<{
     method: z.ZodLiteral<"editorStateUpdate">;
     data: z.ZodObject<{
@@ -1045,7 +1106,8 @@ export declare const selectModeIframeMessageSchema: z.ZodDiscriminatedUnion<[z.Z
             underline: z.ZodBoolean;
             strike: z.ZodBoolean;
         }, z.core.$strip>;
-        isEditing: z.ZodBoolean;
+        isInlineEditing: z.ZodBoolean;
+        isInlineEditPending: z.ZodBoolean;
     }, z.core.$strip>;
 }, z.core.$strip>, z.ZodObject<{
     method: z.ZodLiteral<"fastRefreshComplete">;

package/_vendor/schemas/selectModeIframeRpc.mjs

@@ -1,4 +1,4 @@
-import { selectedElementSchema, selectModeFormatCommandSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionTypeSchema, displayModeSchema, selectModeTiptapActiveMarksSchema, selectModeBoundingRectSchema, selectableDataSchema, selectModeSelectionRectSchema, selectModeClickPositionSchema } from '../../chunk-4T7WSMC3.mjs';
+import { selectModeBoundingRectSchema, selectedElementSchema, selectModeFormatCommandSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionTypeSchema, displayModeSchema, selectModeTiptapActiveMarksSchema, selectableDataSchema, selectModeSelectionRectSchema, selectModeClickPositionSchema } from '../../chunk-4T7WSMC3.mjs';
 import '../../chunk-JUKCUPQ6.mjs';
 import '../../chunk-FLYEIRFK.mjs';
 import '../../chunk-TESFJQID.mjs';
@@ -7,6 +7,10 @@ import { z } from 'zod';
 
 var SELECT_MODE_IFRAME_RPC_CHANNEL_ID = "replo:select-mode-iframe-rpc";
 var SELECT_MODE_IFRAME_RPC_CHANNEL_VERSION = 1;
+var inlineEditFeedbackSchema = z.object({
+  status: z.enum(["pending", "unavailable", "failed"]),
+  rect: selectModeBoundingRectSchema
+}).describe("InlineEditFeedback");
 var iframeRuntimeBuildMetadataSchema = z.object({
   packageName: z.string(),
   version: z.string(),
@@ -144,10 +148,15 @@ var canopyToWebsiteBuilderMethodConfig = {
     }),
     outputSchema: z.void()
   },
+  inlineEditFeedbackChanged: {
+    inputSchema: z.object({ feedback: inlineEditFeedbackSchema.nullable() }),
+    outputSchema: z.void()
+  },
   editorStateUpdate: {
     inputSchema: z.object({
       activeMarks: selectModeTiptapActiveMarksSchema,
-      isEditing: z.boolean()
+      isInlineEditing: z.boolean(),
+      isInlineEditPending: z.boolean()
     }),
     outputSchema: z.void()
   },
@@ -229,6 +238,10 @@ var selectModeIframeMessageSchema = z.discriminatedUnion("method", [
     method: z.literal("textCommitted"),
     data: canopyToWebsiteBuilderMethodConfig.textCommitted.inputSchema
   }),
+  z.object({
+    method: z.literal("inlineEditFeedbackChanged"),
+    data: canopyToWebsiteBuilderMethodConfig.inlineEditFeedbackChanged.inputSchema
+  }),
   z.object({
     method: z.literal("editorStateUpdate"),
     data: canopyToWebsiteBuilderMethodConfig.editorStateUpdate.inputSchema
@@ -238,4 +251,4 @@ var selectModeIframeMessageSchema = z.discriminatedUnion("method", [
   })
 ]).describe("SelectModeIframeMessage");
 
-export { SELECT_MODE_IFRAME_RPC_CHANNEL_ID, SELECT_MODE_IFRAME_RPC_CHANNEL_VERSION, canopyToWebsiteBuilderMethodConfig, iframeRuntimeBuildMetadataSchema, selectModeIframeMessageSchema, selectModeParentMessageSchema, selectedComponentEditRequestSchema, websiteBuilderToCanopyMethodConfig };
+export { SELECT_MODE_IFRAME_RPC_CHANNEL_ID, SELECT_MODE_IFRAME_RPC_CHANNEL_VERSION, canopyToWebsiteBuilderMethodConfig, iframeRuntimeBuildMetadataSchema, inlineEditFeedbackSchema, selectModeIframeMessageSchema, selectModeParentMessageSchema, selectedComponentEditRequestSchema, websiteBuilderToCanopyMethodConfig };

package/buildMetadata.js

@@ -1,7 +1,7 @@
 export const BUILD_METADATA = {
   "packageName": "@replohq/sandbox-runtime",
-  "version": "1.7.9",
+  "version": "1.7.11",
   "branch": "HEAD",
-  "commit": "b01d429fa2ffd0346a2187126d2b7ea58e40441f",
-  "builtAt": "2026-09-20T05:20:23.775Z"
+  "commit": "14ba23d4044e71ee124025f7b496f0cc9f6e4b06",
+  "builtAt": "2026-09-21T17:30:09.582Z"
 };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.7.9",
+  "version": "1.7.11",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.7.9",
+    "version": "1.7.11",
     "branch": "HEAD",
-    "commit": "b01d429fa2ffd0346a2187126d2b7ea58e40441f",
-    "builtAt": "2026-09-20T05:20:23.775Z"
+    "commit": "14ba23d4044e71ee124025f7b496f0cc9f6e4b06",
+    "builtAt": "2026-09-21T17:30:09.582Z"
   },
   "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",
@@ -41,7 +41,8 @@
     "@tiptap/extension-underline": "^2.25.0",
     "@tiptap/pm": "^2.25.0",
     "uuid": "^11.1.0",
-    "zod": "^4.3.6"
+    "zod": "^4.3.6",
+    "zustand": "^4.5.7"
   },
   "peerDependencies": {
     "@types/react": ">=19.0.0",

package/select-mode/EditorSelection.d.ts

@@ -1,22 +1 @@
-/**
- * Mounts the iframe-side selectMode controller. This is a render-less
- * component — every responsibility is delegated to a dedicated hook so each
- * concern (parent messaging, cursor styling, pointer interactions, hover
- * tracking, scroll syncing) can be read in isolation:
- *
- *  - `useParentMessaging` — inbound messages from the parent (set mode,
- *    set selection type) + outbound `IFRAME_READY` handshake.
- *  - `useCrosshairCursor` — crosshair cursor + disable text/drag selection
- *    while in selection mode.
- *  - `useSelectionInteractions` — pointer-down / move / up state machine
- *    that produces `ELEMENT_SELECTED`, `AREA_SELECTED`, and live
- *    `DRAG_RECT_UPDATED` messages.
- *  - `useSelectionHover` — hover-element rect updates.
- *  - `useSelectionScrollSync` — keeps the parent overlay aligned with the
- *    selected element/area when the iframe scrolls.
- *
- * The `interactionSessionRef` is the single source of truth for the
- * in-progress drag/selection — every hook reads/writes it via ref so we
- * don't trigger React re-renders during interaction-heavy operations.
- */
-export declare function EditorSelection(): null;
+export declare function EditorSelection(): import("react/jsx-runtime").JSX.Element;

package/select-mode/EditorSelection.js

@@ -1,39 +1,29 @@
 "use client";
-import { useCallback, useEffect } from "react";
-import {
-  buildElementDescriptor,
-  buildSelector
-} from "./descriptor/elementDescriptor";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
 import { installFastRefreshRelay } from "./fast-refresh-relay";
-import { useCrosshairCursor } from "./hooks/useCrosshairCursor";
-import { useEditModeStateMachine } from "./hooks/useEditModeStateMachine";
 import { useOptimisticOverrides } from "./hooks/useOptimisticOverrides";
 import { useParentMessaging } from "./hooks/useParentMessaging";
 import { useSelectionHover } from "./hooks/useSelectionHover";
 import { useSelectionInteractions } from "./hooks/useSelectionInteractions";
 import { useSelectionScrollSync } from "./hooks/useSelectionScrollSync";
-import { useSelectModeController } from "./hooks/useSelectModeController";
-import { getRepetitionSiblingElements } from "./hooks/useSiblingResolution";
-import { getWebsiteBuilderRpc } from "./iframeRpcChannel";
-import { getDocumentScrollOffset } from "./interactions/selectionGeometry";
 import { PREVIEW_RENDERED_EVENT } from "./previewRendered";
-import { showElementSelectionFrames } from "./selectionFrame";
-import { getConnectedSelectedElement } from "./selectModeSession";
+import { SelectionFrames } from "./SelectionFrames";
 import {
-  isUserSourceLocation,
-  symbolicateSelectedElement
-} from "./symbolicate";
+  useDisplayMode,
+  useSelectModeStore,
+  useSelectModeStoreActions
+} from "./selectModeStore";
 function EditorSelection() {
+  const store = useSelectModeStore();
+  const displayMode = useDisplayMode();
   const {
-    displayMode,
-    interactionSessionRef,
+    formatCommand,
+    postSelectedElementSnapshot,
+    revertInlineEdit,
     setDisplayMode,
     setSelectionType
-  } = useSelectModeController();
-  const { beginEditing, editingElementRef, formatCommand, revert } = useEditModeStateMachine({
-    displayMode,
-    interactionSessionRef
-  });
+  } = useSelectModeStoreActions();
   const {
     applyOptimisticUpdate,
     markCommitted,
@@ -41,56 +31,6 @@ function EditorSelection() {
     resolveSessionOverrides,
     revertOverride
   } = useOptimisticOverrides();
-  const postSelectedElementSnapshot = useCallback(
-    ({ clearMissing = false } = {}) => {
-      const session = interactionSessionRef.current;
-      if (session.type !== "element") {
-        return true;
-      }
-      const element = getConnectedSelectedElement(session);
-      if (!element) {
-        if (!clearMissing) return false;
-        setSelectionType({ selectionType: "none" });
-        getWebsiteBuilderRpc()?.areaSelected({
-          rect: session.data.rect,
-          items: []
-        });
-        return true;
-      }
-      const siblingElements = getRepetitionSiblingElements({ element });
-      const descriptor = buildElementDescriptor({
-        element,
-        clickPosition: session.clickPosition ?? (session.data.kind === "react-element" ? session.data.clickPosition : { x: 0, y: 0 }),
-        siblingSelectors: siblingElements.map(buildSelector)
-      });
-      if (descriptor.kind !== "react-element") {
-        return true;
-      }
-      const refreshedSession = {
-        ...session,
-        element,
-        siblingElements,
-        data: session.data
-      };
-      interactionSessionRef.current = refreshedSession;
-      showElementSelectionFrames({
-        elements: [element, ...siblingElements],
-        scrollOffset: getDocumentScrollOffset()
-      });
-      void symbolicateSelectedElement(descriptor).then((symbolicated) => {
-        if (interactionSessionRef.current !== refreshedSession) {
-          return;
-        }
-        if (symbolicated.sourceLocation && !isUserSourceLocation(symbolicated.sourceLocation)) {
-          return;
-        }
-        refreshedSession.data = symbolicated;
-        getWebsiteBuilderRpc()?.elementSelected({ data: symbolicated });
-      });
-      return true;
-    },
-    [interactionSessionRef, setSelectionType]
-  );
   useEffect(() => {
     let refreshTimeout;
     let missingTimeout;
@@ -98,15 +38,15 @@ function EditorSelection() {
     const scheduleSnapshot = () => {
       clearTimeout(refreshTimeout);
       refreshTimeout = setTimeout(() => {
-        if (editingElementRef.current) return;
+        if (store.getState().editingElement) return;
         if (postSelectedElementSnapshot()) {
           clearTimeout(missingTimeout);
           missingTimeout = void 0;
         } else if (!missingTimeout) {
-          const missingSession = interactionSessionRef.current;
+          const missingSession = store.getState().interactionSession;
           missingTimeout = setTimeout(() => {
             missingTimeout = void 0;
-            if (interactionSessionRef.current === missingSession) {
+            if (store.getState().interactionSession === missingSession) {
               postSelectedElementSnapshot({ clearMissing: true });
             }
           }, 5e3);
@@ -114,14 +54,14 @@ function EditorSelection() {
       }, 250);
     };
     const observer = new MutationObserver((records) => {
-      const session = interactionSessionRef.current;
-      if (editingElementRef.current || session.type !== "element") return;
+      const session = store.getState().interactionSession;
+      if (store.getState().editingElement || session.type !== "element") return;
       if (!session.element.isConnected || records.some((record) => session.element.contains(record.target))) {
         scheduleSnapshot();
       }
     });
     const watchRender = () => {
-      if (editingElementRef.current || interactionSessionRef.current.type !== "element")
+      if (store.getState().editingElement || store.getState().interactionSession.type !== "element")
         return;
       clearTimeout(observationTimeout);
       observer.observe(document.body, {
@@ -133,7 +73,7 @@ function EditorSelection() {
     };
     installFastRefreshRelay({
       onComplete: () => {
-        reapplyOverrides({ skipElement: editingElementRef.current });
+        reapplyOverrides({ skipElement: store.getState().editingElement });
         watchRender();
       }
     });
@@ -146,35 +86,56 @@ function EditorSelection() {
       window.removeEventListener(PREVIEW_RENDERED_EVENT, watchRender);
       installFastRefreshRelay();
     };
-  }, [
-    editingElementRef,
-    interactionSessionRef,
-    postSelectedElementSnapshot,
-    reapplyOverrides
-  ]);
+  }, [store, postSelectedElementSnapshot, reapplyOverrides]);
+  useEffect(() => {
+    const cancelOnPointerDown = (event) => {
+      const { editingElement, inlineEditRequest, actions } = store.getState();
+      if (event.button === 0 && editingElement && event.target instanceof Node && !editingElement.contains(event.target)) {
+        actions.commitInlineEdit();
+      }
+      if (inlineEditRequest && event.target instanceof Node && !inlineEditRequest.element.contains(event.target)) {
+        actions.dismissInlineEditRequest();
+      }
+    };
+    const cancelOnEscape = (event) => {
+      const { inlineEditRequest, actions } = store.getState();
+      if (!inlineEditRequest || event.key !== "Escape") {
+        return;
+      }
+      if (inlineEditRequest.status === "pending") {
+        event.preventDefault();
+      }
+      actions.dismissInlineEditRequest();
+    };
+    document.addEventListener("pointerdown", cancelOnPointerDown, true);
+    document.addEventListener("keydown", cancelOnEscape, true);
+    return () => {
+      document.removeEventListener("pointerdown", cancelOnPointerDown, true);
+      document.removeEventListener("keydown", cancelOnEscape, true);
+      store.getState().actions.revertInlineEdit();
+    };
+  }, [store]);
   useParentMessaging({
     applyOptimisticUpdate,
     markCommitted,
-    onExitEditMode: revert,
+    onExitEditMode: revertInlineEdit,
     onFormatCommand: formatCommand,
     resolveSessionOverrides,
     revertOverride,
     setDisplayMode,
     setSelectionType
   });
-  useCrosshairCursor({ displayMode });
-  useSelectionInteractions({
-    displayMode,
-    editingElementRef,
-    interactionSessionRef,
-    onBeginEditing: beginEditing
-  });
-  useSelectionHover({ displayMode, interactionSessionRef });
-  useSelectionScrollSync({
-    displayMode,
-    interactionSessionRef
-  });
-  return null;
+  useSelectionInteractions();
+  useSelectionHover();
+  useSelectionScrollSync();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    displayMode === "selection" && /* @__PURE__ */ jsx("style", { children: `
+            * { cursor: crosshair !important; user-select: none !important; -webkit-user-drag: none !important; }
+            [data-select-mode-inline-editor][contenteditable="true"],
+            [data-select-mode-inline-editor][contenteditable="true"] * { cursor: text !important; }
+          ` }),
+    /* @__PURE__ */ jsx(SelectionFrames, {})
+  ] });
 }
 export {
   EditorSelection

package/select-mode/SelectionFrames.d.ts

@@ -0,0 +1 @@
+export declare function SelectionFrames(): import("react").ReactPortal | null;

package/select-mode/SelectionFrames.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import {
+  SELECTION_FRAME_BORDER_HEX,
+  SELECTION_FRAME_EDITING_BORDER_HEX,
+  SELECTION_FRAMES_CONTAINER_ID
+} from "./selectionFrame";
+import {
+  useIsSelectionFrameEditing,
+  useSelectionFrames
+} from "./selectModeStore";
+const CONTAINER_STYLE = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: 0,
+  height: 0,
+  margin: 0,
+  padding: 0,
+  pointerEvents: "none",
+  zIndex: 2147483646
+};
+function SelectionFrames() {
+  const frames = useSelectionFrames();
+  const isEditing = useIsSelectionFrameEditing();
+  if (typeof document === "undefined" || !document.body || frames.length === 0) {
+    return null;
+  }
+  const borderColor = isEditing ? SELECTION_FRAME_EDITING_BORDER_HEX : SELECTION_FRAME_BORDER_HEX;
+  return createPortal(
+    /* @__PURE__ */ jsx("div", { id: SELECTION_FRAMES_CONTAINER_ID, "aria-hidden": true, style: CONTAINER_STYLE, children: frames.map((frame, index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        style: {
+          position: "absolute",
+          boxSizing: "border-box",
+          borderRadius: 2,
+          pointerEvents: "none",
+          margin: 0,
+          padding: 0,
+          left: frame.pageRect.x,
+          top: frame.pageRect.y,
+          width: frame.pageRect.width,
+          height: frame.pageRect.height,
+          border: `2px solid ${borderColor}`,
+          background: frame.variant === "area" ? "rgba(192, 38, 211, 0.08)" : "transparent"
+        }
+      },
+      `${frame.variant}-${index}`
+    )) }),
+    document.body
+  );
+}
+export {
+  SelectionFrames
+};

package/select-mode/annotationFrames.d.ts

@@ -1,3 +1,16 @@
+/**
+ * In-iframe annotation frame renderer — `selectionFrame`'s sibling surface.
+ *
+ * Same architecture and reasons as selection frames: page-coordinate
+ * `position: absolute` nodes in a body-level container, so document scroll
+ * translates them with zero JavaScript per scroll frame, and styling is
+ * vanilla inline CSS because customer pages have no tailwind.
+ *
+ * An annotation frame is an invisible positioning box over the annotated
+ * element carrying a numbered badge dot — the dot is the entire visual.
+ * Unlike selection frames these rebuild wholesale on each call: re-renders
+ * happen on set/re-measure (rare), never per scroll, so pooling buys nothing.
+ */
 export declare const ANNOTATION_CONTAINER_ID = "replo-annotation-frames";
 interface AnnotationRect {
     x: number;

package/select-mode/annotationFrames.js

@@ -1,5 +1,35 @@
-import { getOrCreateFramesLayerContainer } from "./selectionFrame";
 const ANNOTATION_CONTAINER_ID = "replo-annotation-frames";
+function getOrCreateFramesLayerContainer({
+  id,
+  zIndex
+}) {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  const existing = document.getElementById(id);
+  if (existing instanceof HTMLDivElement) {
+    return existing;
+  }
+  if (!document.body) {
+    return null;
+  }
+  const container = document.createElement("div");
+  container.id = id;
+  container.setAttribute("aria-hidden", "true");
+  container.style.cssText = [
+    "position: absolute",
+    "top: 0",
+    "left: 0",
+    "width: 0",
+    "height: 0",
+    "margin: 0",
+    "padding: 0",
+    "pointer-events: none",
+    `z-index: ${zIndex}`
+  ].join(";");
+  document.body.append(container);
+  return container;
+}
 const ANNOTATION_FONT_STYLE_ID = "replo-annotation-font";
 const BADGE_SIZE_PX = 30;
 const EDITORIAL_ITALIC_FONT_URL = "https://assets.replocdn.com/PPEditorialNew-Italic.woff2";

package/select-mode/descriptor/elementDescriptor.js

@@ -110,7 +110,7 @@ function buildSelector(element) {
     const tag = currentElement.tagName.toLowerCase();
     const id = currentElement.id;
     if (id) {
-      parts.unshift(`#${id}`);
+      parts.unshift(`#${CSS.escape(id)}`);
       break;
     }
     const parentElement = currentElement.parentElement;

package/select-mode/displayModeStore.d.ts

@@ -4,7 +4,5 @@ export declare const displayModeStore: {
     getServerSnapshot(): DisplayMode;
     subscribe(listener: () => void): () => void;
     setDisplayMode(nextDisplayMode: DisplayMode): void;
-    /** Test-only: reset back to the default so specs don't leak state. */
     reset(): void;
 };
-export declare function useDisplayMode(): DisplayMode;