@replohq/sandbox-runtime 0.1.0

package/select-mode/hooks/useEditModeStateMachine.js

@@ -0,0 +1,235 @@
+import { useCallback, useEffect, useRef } from "react";
+import {
+  getWebsiteBuilderRpc,
+  requestInlineTextEdit
+} from "../iframeRpcChannel";
+import { setSelectionFrameEditing } from "../selectionFrame";
+import { symbolicateSelectedElement } from "../symbolicate";
+const EMPTY_ACTIVE_MARKS = {
+  bold: false,
+  italic: false,
+  underline: false,
+  strike: false
+};
+function postEditorState({
+  activeMarks,
+  isEditing
+}) {
+  getWebsiteBuilderRpc()?.editorStateUpdate({ activeMarks, isEditing });
+}
+function isTextEditableElement(element) {
+  const tagName = element.tagName.toLowerCase();
+  return element instanceof HTMLElement && Boolean(element.textContent?.trim()) && ![
+    "input",
+    "textarea",
+    "select",
+    "option",
+    "img",
+    "video",
+    "canvas"
+  ].includes(tagName);
+}
+const FOCUS_STEAL_GUARD_MS = 1500;
+function useEditModeStateMachine({
+  displayMode,
+  interactionSessionRef
+}) {
+  const editorRef = useRef(null);
+  const editingElementRef = useRef(null);
+  const editIdRef = useRef(null);
+  const pendingEditRef = useRef(null);
+  const originalInnerHTMLRef = useRef(null);
+  const initialHTMLRef = useRef(null);
+  const isCommittingRef = useRef(false);
+  const beginEditingAtRef = useRef(0);
+  const destroyEditor = useCallback(() => {
+    editorRef.current?.destroy();
+    editorRef.current = null;
+    editingElementRef.current = null;
+    editIdRef.current = null;
+    if (pendingEditRef.current) {
+      clearTimeout(pendingEditRef.current.timeout);
+      pendingEditRef.current = null;
+    }
+    originalInnerHTMLRef.current = null;
+    initialHTMLRef.current = null;
+    isCommittingRef.current = false;
+    setSelectionFrameEditing(false);
+    postEditorState({ activeMarks: EMPTY_ACTIVE_MARKS, isEditing: false });
+  }, []);
+  const commit = useCallback(() => {
+    const editor = editorRef.current;
+    const editingElement = editingElementRef.current;
+    const originalInnerHTML = originalInnerHTMLRef.current;
+    const editId = editIdRef.current;
+    if (!editor || !editId || originalInnerHTML === null || isCommittingRef.current) {
+      return;
+    }
+    isCommittingRef.current = true;
+    const committedHTML = editor.getHTML();
+    if (committedHTML === initialHTMLRef.current) {
+      destroyEditor();
+      if (editingElement) {
+        editingElement.innerHTML = originalInnerHTML;
+      }
+      return;
+    }
+    const committedJSON = editor.getJSON();
+    getWebsiteBuilderRpc()?.textCommitted({
+      editId,
+      html: committedHTML,
+      json: committedJSON,
+      originalInnerHTML
+    });
+    destroyEditor();
+    if (editingElement) {
+      editingElement.innerHTML = committedHTML;
+    }
+  }, [destroyEditor]);
+  const revert = useCallback(() => {
+    const editingElement = editingElementRef.current;
+    const originalInnerHTML = originalInnerHTMLRef.current;
+    destroyEditor();
+    if (editingElement && originalInnerHTML !== null) {
+      editingElement.innerHTML = originalInnerHTML;
+    }
+  }, [destroyEditor]);
+  const handleBlur = useCallback(() => {
+    if (isCommittingRef.current) {
+      return;
+    }
+    if (typeof document !== "undefined" && document.hasFocus()) {
+      commit();
+      return;
+    }
+    if (Date.now() - beginEditingAtRef.current < FOCUS_STEAL_GUARD_MS) {
+      editorRef.current?.focus();
+    }
+  }, [commit]);
+  const formatCommand = useCallback((command) => {
+    editorRef.current?.runFormatCommand(command);
+  }, []);
+  const clearPendingEdit = useCallback((editId) => {
+    if (pendingEditRef.current?.editId !== editId) {
+      return;
+    }
+    clearTimeout(pendingEditRef.current.timeout);
+    pendingEditRef.current = null;
+  }, []);
+  const resolveEditRequest = useCallback(
+    ({ editId, allowed }) => {
+      const pendingEdit = pendingEditRef.current;
+      if (!pendingEdit || pendingEdit.editId !== editId) {
+        return;
+      }
+      clearTimeout(pendingEdit.timeout);
+      pendingEditRef.current = null;
+      if (!allowed || !pendingEdit.element.isConnected) {
+        return;
+      }
+      const element = pendingEdit.element;
+      const originalInnerHTML = element.innerHTML;
+      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();
+        }
+      });
+    },
+    [commit, handleBlur, revert]
+  );
+  const beginEditing = useCallback(
+    ({
+      element,
+      descriptorPromise
+    }) => {
+      if (editingElementRef.current === element) {
+        return;
+      }
+      if (!isTextEditableElement(element)) {
+        return;
+      }
+      if (pendingEditRef.current?.element === element) {
+        return;
+      }
+      void descriptorPromise.then((descriptor) => {
+        if (descriptor.kind !== "react-element" || !element.isConnected) {
+          return;
+        }
+        interactionSessionRef.current = {
+          type: "element",
+          element,
+          clickPosition: null,
+          data: descriptor
+        };
+        const editId = crypto.randomUUID();
+        if (pendingEditRef.current) {
+          clearTimeout(pendingEditRef.current.timeout);
+        }
+        const timeout = window.setTimeout(() => {
+          clearPendingEdit(editId);
+        }, 5e3);
+        pendingEditRef.current = { editId, element, timeout };
+        void symbolicateSelectedElement(descriptor).then(
+          (symbolicated) => {
+            if (pendingEditRef.current?.editId !== editId) {
+              return;
+            }
+            void requestInlineTextEdit({
+              editId,
+              element: symbolicated
+            }).then(
+              ({ allowed }) => {
+                resolveEditRequest({ editId, allowed });
+              },
+              () => {
+                resolveEditRequest({ editId, allowed: false });
+              }
+            );
+          },
+          () => {
+            clearPendingEdit(editId);
+          }
+        );
+      });
+    },
+    [clearPendingEdit, interactionSessionRef, resolveEditRequest]
+  );
+  useEffect(() => {
+    if (displayMode !== "selection") {
+      revert();
+    }
+  }, [displayMode, revert]);
+  return {
+    beginEditing,
+    editingElementRef,
+    formatCommand,
+    revert
+  };
+}
+export {
+  isTextEditableElement,
+  useEditModeStateMachine
+};
+//# sourceMappingURL=useEditModeStateMachine.js.map

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

@@ -0,0 +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\";\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          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/useOptimisticOverrides.d.ts

@@ -0,0 +1,17 @@
+import type { SelectModeOptimisticUpdatePayload } from "../../_vendor/schemas/generated/selectMode";
+type SessionOutcome = "persisted" | "failed";
+export declare function useOptimisticOverrides(): {
+    applyOptimisticUpdate: ({ editId, payload, targetSelector, targetMode, }: {
+        editId: string;
+        payload: SelectModeOptimisticUpdatePayload;
+        targetSelector: string;
+        targetMode: "primary" | "group";
+    }) => void;
+    markCommitted: (editId: string, sessionId: string) => void;
+    reapplyOverrides: ({ skipElement }: {
+        skipElement: HTMLElement | null;
+    }) => void;
+    resolveSessionOverrides: (sessionId: string, outcome: SessionOutcome) => void;
+    revertOverride: (editId: string) => void;
+};
+export {};

package/select-mode/hooks/useOptimisticOverrides.js

@@ -0,0 +1,283 @@
+import { useCallback } from "react";
+import { buildSelector } from "../descriptor/elementDescriptor";
+import { getSourceLocationSiblingSelectors } from "./useSiblingResolution";
+const OVERRIDE_REGISTRATION_TIMEOUT_MS = 15e3;
+const SESSION_OUTCOME_RETENTION_MS = 6e4;
+const OVERRIDE_ATTRIBUTE = "data-replo-select-overrides";
+const OVERRIDE_REGISTRY_KEY = "reploSelectOverrideRegistryV2";
+const SESSION_OUTCOME_REGISTRY_KEY = "reploSelectOverrideSessionOutcomesV2";
+function getOverrideList() {
+  const existing = Reflect.get(window, OVERRIDE_REGISTRY_KEY);
+  if (Array.isArray(existing)) {
+    return existing;
+  }
+  const overrides = [];
+  Reflect.set(window, OVERRIDE_REGISTRY_KEY, overrides);
+  return overrides;
+}
+function setOverrideList(overrides) {
+  Reflect.set(window, OVERRIDE_REGISTRY_KEY, overrides);
+}
+function getSessionOutcomes() {
+  const existing = Reflect.get(window, SESSION_OUTCOME_REGISTRY_KEY);
+  if (existing instanceof Map) {
+    return existing;
+  }
+  const outcomes = /* @__PURE__ */ new Map();
+  Reflect.set(window, SESSION_OUTCOME_REGISTRY_KEY, outcomes);
+  return outcomes;
+}
+function getElementsForTargetMode({
+  element,
+  targetMode
+}) {
+  if (targetMode === "primary") {
+    return [element];
+  }
+  return [
+    element,
+    ...getSourceLocationSiblingSelectors({ element }).map((selector) => document.querySelector(selector)).filter((candidate) => {
+      return candidate instanceof HTMLElement;
+    })
+  ];
+}
+function isImageSourcePayload({
+  element,
+  payload
+}) {
+  return payload.kind === "attribute" && payload.name.toLowerCase() === "src" && element instanceof HTMLImageElement;
+}
+function getOriginalState({
+  element,
+  payload
+}) {
+  if (payload.kind === "attribute") {
+    const names = isImageSourcePayload({ element, payload }) ? [payload.name, "srcset"] : [payload.name];
+    return {
+      kind: "attributes",
+      values: names.map((name) => ({
+        name,
+        value: element.getAttribute(name)
+      }))
+    };
+  }
+  if (payload.kind === "content") {
+    return { kind: "content", innerHTML: element.innerHTML };
+  }
+  return { kind: "css" };
+}
+function getStyleElement(token) {
+  return document.querySelector(
+    `style[data-replo-select-override="${token}"]`
+  );
+}
+function addToken(element, token) {
+  const tokens = new Set(
+    (element.getAttribute(OVERRIDE_ATTRIBUTE) ?? "").split(/\s+/).filter(Boolean)
+  );
+  tokens.add(token);
+  element.setAttribute(OVERRIDE_ATTRIBUTE, [...tokens].join(" "));
+}
+function removeToken(element, token) {
+  const tokens = (element.getAttribute(OVERRIDE_ATTRIBUTE) ?? "").split(/\s+/).filter((candidate) => candidate && candidate !== token);
+  if (tokens.length === 0) {
+    element.removeAttribute(OVERRIDE_ATTRIBUTE);
+    return;
+  }
+  element.setAttribute(OVERRIDE_ATTRIBUTE, tokens.join(" "));
+}
+function applyPayload({
+  element,
+  payload,
+  token
+}) {
+  if (payload.kind === "css") {
+    addToken(element, token);
+    return;
+  }
+  if (payload.kind === "attribute") {
+    if (isImageSourcePayload({ element, payload })) {
+      element.removeAttribute("srcset");
+    }
+    element.setAttribute(payload.name, payload.value);
+    return;
+  }
+  element.innerHTML = payload.innerHTML;
+}
+function restoreOriginalState({
+  element,
+  originalState
+}) {
+  if (originalState.kind === "attributes") {
+    for (const { name, value } of originalState.values) {
+      if (value === null) {
+        element.removeAttribute(name);
+      } else {
+        element.setAttribute(name, value);
+      }
+    }
+    return;
+  }
+  if (originalState.kind === "content") {
+    element.innerHTML = originalState.innerHTML;
+  }
+}
+function installCssRule(override) {
+  if (override.payload.kind !== "css") {
+    return;
+  }
+  const style = document.createElement("style");
+  style.dataset.reploSelectOverride = override.token;
+  style.textContent = `[${OVERRIDE_ATTRIBUTE}~="${override.token}"] { ${override.payload.property}: ${override.payload.value ?? "revert"} !important; }`;
+  document.head.append(style);
+}
+function resolveTarget(target) {
+  if (target.element.isConnected) {
+    return target.element;
+  }
+  const replacement = document.querySelector(target.selector);
+  return replacement instanceof HTMLElement ? replacement : null;
+}
+function reapplyOverride({
+  override,
+  skipElement
+}) {
+  for (const target of override.targets) {
+    const element = resolveTarget(target);
+    if (!element || skipElement && element.contains(skipElement)) {
+      continue;
+    }
+    if (element !== target.element) {
+      target.element = element;
+      target.originalState = getOriginalState({
+        element,
+        payload: override.payload
+      });
+    }
+    applyPayload({ element, payload: override.payload, token: override.token });
+  }
+}
+function removeOverride({
+  editId,
+  outcome
+}) {
+  const override = getOverrideList().find(
+    (candidate) => candidate.editId === editId
+  );
+  if (!override) {
+    return;
+  }
+  clearTimeout(override.registrationTimeout);
+  getStyleElement(override.token)?.remove();
+  for (const target of override.targets) {
+    const element = resolveTarget(target);
+    if (!element) {
+      continue;
+    }
+    removeToken(element, override.token);
+    if (outcome === "failed") {
+      restoreOriginalState({
+        element,
+        originalState: target.originalState
+      });
+    }
+  }
+  setOverrideList(
+    getOverrideList().filter((candidate) => candidate.editId !== editId)
+  );
+  if (outcome === "failed") {
+    for (const remainingOverride of getOverrideList()) {
+      reapplyOverride({ override: remainingOverride, skipElement: null });
+    }
+  }
+}
+function useOptimisticOverrides() {
+  const applyOptimisticUpdate = useCallback(
+    ({
+      editId,
+      payload,
+      targetSelector,
+      targetMode
+    }) => {
+      const targetElement = document.querySelector(targetSelector);
+      if (!(targetElement instanceof HTMLElement)) {
+        return;
+      }
+      removeOverride({ editId, outcome: "failed" });
+      const elements = getElementsForTargetMode({
+        element: targetElement,
+        targetMode
+      });
+      const token = `override-${editId}`;
+      const override = {
+        editId,
+        payload,
+        registrationTimeout: window.setTimeout(() => {
+          removeOverride({ editId, outcome: "failed" });
+        }, OVERRIDE_REGISTRATION_TIMEOUT_MS),
+        sessionId: null,
+        state: "live",
+        targets: elements.map((element) => ({
+          element,
+          originalState: getOriginalState({ element, payload }),
+          selector: buildSelector(element)
+        })),
+        token
+      };
+      getOverrideList().push(override);
+      installCssRule(override);
+      reapplyOverride({ override, skipElement: null });
+    },
+    []
+  );
+  const reapplyOverrides = useCallback(
+    ({ skipElement }) => {
+      for (const override of getOverrideList()) {
+        reapplyOverride({ override, skipElement });
+      }
+    },
+    []
+  );
+  const markCommitted = useCallback((editId, sessionId) => {
+    const override = getOverrideList().find((candidate) => {
+      return candidate.editId === editId;
+    });
+    if (!override) {
+      return;
+    }
+    clearTimeout(override.registrationTimeout);
+    override.sessionId = sessionId;
+    override.state = "fired";
+    const outcome = getSessionOutcomes().get(sessionId);
+    if (outcome) {
+      removeOverride({ editId, outcome });
+    }
+  }, []);
+  const resolveSessionOverrides = useCallback(
+    (sessionId, outcome) => {
+      getSessionOutcomes().set(sessionId, outcome);
+      window.setTimeout(() => {
+        getSessionOutcomes().delete(sessionId);
+      }, SESSION_OUTCOME_RETENTION_MS);
+      const editIds = getOverrideList().filter((override) => override.sessionId === sessionId).map((override) => override.editId);
+      for (const editId of editIds) {
+        removeOverride({ editId, outcome });
+      }
+    },
+    []
+  );
+  const revertOverride = useCallback((editId) => {
+    removeOverride({ editId, outcome: "failed" });
+  }, []);
+  return {
+    applyOptimisticUpdate,
+    markCommitted,
+    reapplyOverrides,
+    resolveSessionOverrides,
+    revertOverride
+  };
+}
+export {
+  useOptimisticOverrides
+};
+//# sourceMappingURL=useOptimisticOverrides.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../select-mode/hooks/useOptimisticOverrides.ts"],
+  "sourcesContent": ["import type { SelectModeOptimisticUpdatePayload } from \"schemas/generated/selectMode\";\n\nimport { useCallback } from \"react\";\n\nimport { buildSelector } from \"../descriptor/elementDescriptor\";\nimport { getSourceLocationSiblingSelectors } from \"./useSiblingResolution\";\n\ntype OverrideTarget = {\n  element: HTMLElement;\n  originalState: OriginalPayloadState;\n  selector: string;\n};\n\ntype OriginalPayloadState =\n  | {\n      kind: \"attributes\";\n      values: { name: string; value: string | null }[];\n    }\n  | { kind: \"content\"; innerHTML: string }\n  | { kind: \"css\" };\n\ntype IframeOverride = {\n  editId: string;\n  payload: SelectModeOptimisticUpdatePayload;\n  registrationTimeout: number;\n  sessionId: string | null;\n  state: \"live\" | \"fired\";\n  targets: OverrideTarget[];\n  token: string;\n};\n\nconst OVERRIDE_REGISTRATION_TIMEOUT_MS = 15_000;\nconst SESSION_OUTCOME_RETENTION_MS = 60_000;\nconst OVERRIDE_ATTRIBUTE = \"data-replo-select-overrides\";\nconst OVERRIDE_REGISTRY_KEY = \"reploSelectOverrideRegistryV2\";\nconst SESSION_OUTCOME_REGISTRY_KEY = \"reploSelectOverrideSessionOutcomesV2\";\n\ntype SessionOutcome = \"persisted\" | \"failed\";\n\nfunction getOverrideList(): IframeOverride[] {\n  const existing: unknown = Reflect.get(window, OVERRIDE_REGISTRY_KEY);\n  if (Array.isArray(existing)) {\n    return existing;\n  }\n  const overrides: IframeOverride[] = [];\n  Reflect.set(window, OVERRIDE_REGISTRY_KEY, overrides);\n  return overrides;\n}\n\nfunction setOverrideList(overrides: IframeOverride[]) {\n  Reflect.set(window, OVERRIDE_REGISTRY_KEY, overrides);\n}\n\nfunction getSessionOutcomes(): Map<string, SessionOutcome> {\n  const existing: unknown = Reflect.get(window, SESSION_OUTCOME_REGISTRY_KEY);\n  if (existing instanceof Map) {\n    return existing;\n  }\n  const outcomes = new Map<string, SessionOutcome>();\n  Reflect.set(window, SESSION_OUTCOME_REGISTRY_KEY, outcomes);\n  return outcomes;\n}\n\nfunction getElementsForTargetMode({\n  element,\n  targetMode,\n}: {\n  element: HTMLElement;\n  targetMode: \"primary\" | \"group\";\n}) {\n  if (targetMode === \"primary\") {\n    return [element];\n  }\n\n  return [\n    element,\n    ...getSourceLocationSiblingSelectors({ element })\n      .map((selector) => document.querySelector(selector))\n      .filter((candidate): candidate is HTMLElement => {\n        return candidate instanceof HTMLElement;\n      }),\n  ];\n}\n\nfunction isImageSourcePayload({\n  element,\n  payload,\n}: {\n  element: HTMLElement;\n  payload: SelectModeOptimisticUpdatePayload;\n}) {\n  return (\n    payload.kind === \"attribute\" &&\n    payload.name.toLowerCase() === \"src\" &&\n    element instanceof HTMLImageElement\n  );\n}\n\nfunction getOriginalState({\n  element,\n  payload,\n}: {\n  element: HTMLElement;\n  payload: SelectModeOptimisticUpdatePayload;\n}): OriginalPayloadState {\n  if (payload.kind === \"attribute\") {\n    const names = isImageSourcePayload({ element, payload })\n      ? [payload.name, \"srcset\"]\n      : [payload.name];\n    return {\n      kind: \"attributes\",\n      values: names.map((name) => ({\n        name,\n        value: element.getAttribute(name),\n      })),\n    };\n  }\n  if (payload.kind === \"content\") {\n    return { kind: \"content\", innerHTML: element.innerHTML };\n  }\n  return { kind: \"css\" };\n}\n\nfunction getStyleElement(token: string) {\n  return document.querySelector<HTMLStyleElement>(\n    `style[data-replo-select-override=\"${token}\"]`,\n  );\n}\n\nfunction addToken(element: HTMLElement, token: string) {\n  const tokens = new Set(\n    (element.getAttribute(OVERRIDE_ATTRIBUTE) ?? \"\")\n      .split(/\\s+/)\n      .filter(Boolean),\n  );\n  tokens.add(token);\n  element.setAttribute(OVERRIDE_ATTRIBUTE, [...tokens].join(\" \"));\n}\n\nfunction removeToken(element: HTMLElement, token: string) {\n  const tokens = (element.getAttribute(OVERRIDE_ATTRIBUTE) ?? \"\")\n    .split(/\\s+/)\n    .filter((candidate) => candidate && candidate !== token);\n  if (tokens.length === 0) {\n    element.removeAttribute(OVERRIDE_ATTRIBUTE);\n    return;\n  }\n  element.setAttribute(OVERRIDE_ATTRIBUTE, tokens.join(\" \"));\n}\n\nfunction applyPayload({\n  element,\n  payload,\n  token,\n}: {\n  element: HTMLElement;\n  payload: SelectModeOptimisticUpdatePayload;\n  token: string;\n}) {\n  if (payload.kind === \"css\") {\n    addToken(element, token);\n    return;\n  }\n  if (payload.kind === \"attribute\") {\n    if (isImageSourcePayload({ element, payload })) {\n      element.removeAttribute(\"srcset\");\n    }\n    element.setAttribute(payload.name, payload.value);\n    return;\n  }\n  element.innerHTML = payload.innerHTML;\n}\n\nfunction restoreOriginalState({\n  element,\n  originalState,\n}: {\n  element: HTMLElement;\n  originalState: OriginalPayloadState;\n}) {\n  if (originalState.kind === \"attributes\") {\n    for (const { name, value } of originalState.values) {\n      if (value === null) {\n        element.removeAttribute(name);\n      } else {\n        element.setAttribute(name, value);\n      }\n    }\n    return;\n  }\n  if (originalState.kind === \"content\") {\n    element.innerHTML = originalState.innerHTML;\n  }\n}\n\nfunction installCssRule(override: IframeOverride) {\n  if (override.payload.kind !== \"css\") {\n    return;\n  }\n  const style = document.createElement(\"style\");\n  style.dataset.reploSelectOverride = override.token;\n  style.textContent = `[${OVERRIDE_ATTRIBUTE}~=\"${override.token}\"] { ${override.payload.property}: ${override.payload.value ?? \"revert\"} !important; }`;\n  document.head.append(style);\n}\n\nfunction resolveTarget(target: OverrideTarget) {\n  if (target.element.isConnected) {\n    return target.element;\n  }\n  const replacement = document.querySelector(target.selector);\n  return replacement instanceof HTMLElement ? replacement : null;\n}\n\nfunction reapplyOverride({\n  override,\n  skipElement,\n}: {\n  override: IframeOverride;\n  skipElement: HTMLElement | null;\n}) {\n  for (const target of override.targets) {\n    const element = resolveTarget(target);\n    if (!element || (skipElement && element.contains(skipElement))) {\n      continue;\n    }\n    if (element !== target.element) {\n      target.element = element;\n      target.originalState = getOriginalState({\n        element,\n        payload: override.payload,\n      });\n    }\n    applyPayload({ element, payload: override.payload, token: override.token });\n  }\n}\n\nfunction removeOverride({\n  editId,\n  outcome,\n}: {\n  editId: string;\n  outcome: SessionOutcome;\n}) {\n  const override = getOverrideList().find(\n    (candidate) => candidate.editId === editId,\n  );\n  if (!override) {\n    return;\n  }\n\n  clearTimeout(override.registrationTimeout);\n  getStyleElement(override.token)?.remove();\n  for (const target of override.targets) {\n    const element = resolveTarget(target);\n    if (!element) {\n      continue;\n    }\n    removeToken(element, override.token);\n    if (outcome === \"failed\") {\n      restoreOriginalState({\n        element,\n        originalState: target.originalState,\n      });\n    }\n  }\n  setOverrideList(\n    getOverrideList().filter((candidate) => candidate.editId !== editId),\n  );\n\n  if (outcome === \"failed\") {\n    for (const remainingOverride of getOverrideList()) {\n      reapplyOverride({ override: remainingOverride, skipElement: null });\n    }\n  }\n}\n\nexport function useOptimisticOverrides() {\n  const applyOptimisticUpdate = useCallback(\n    ({\n      editId,\n      payload,\n      targetSelector,\n      targetMode,\n    }: {\n      editId: string;\n      payload: SelectModeOptimisticUpdatePayload;\n      targetSelector: string;\n      targetMode: \"primary\" | \"group\";\n    }) => {\n      const targetElement = document.querySelector(targetSelector);\n      if (!(targetElement instanceof HTMLElement)) {\n        return;\n      }\n\n      removeOverride({ editId, outcome: \"failed\" });\n      const elements = getElementsForTargetMode({\n        element: targetElement,\n        targetMode,\n      });\n      const token = `override-${editId}`;\n      const override: IframeOverride = {\n        editId,\n        payload,\n        registrationTimeout: window.setTimeout(() => {\n          removeOverride({ editId, outcome: \"failed\" });\n        }, OVERRIDE_REGISTRATION_TIMEOUT_MS),\n        sessionId: null,\n        state: \"live\",\n        targets: elements.map((element) => ({\n          element,\n          originalState: getOriginalState({ element, payload }),\n          selector: buildSelector(element),\n        })),\n        token,\n      };\n      getOverrideList().push(override);\n      installCssRule(override);\n      reapplyOverride({ override, skipElement: null });\n    },\n    [],\n  );\n\n  const reapplyOverrides = useCallback(\n    ({ skipElement }: { skipElement: HTMLElement | null }) => {\n      for (const override of getOverrideList()) {\n        reapplyOverride({ override, skipElement });\n      }\n    },\n    [],\n  );\n\n  const markCommitted = useCallback((editId: string, sessionId: string) => {\n    const override = getOverrideList().find((candidate) => {\n      return candidate.editId === editId;\n    });\n    if (!override) {\n      return;\n    }\n    clearTimeout(override.registrationTimeout);\n    override.sessionId = sessionId;\n    override.state = \"fired\";\n    const outcome = getSessionOutcomes().get(sessionId);\n    if (outcome) {\n      removeOverride({ editId, outcome });\n    }\n  }, []);\n\n  const resolveSessionOverrides = useCallback(\n    (sessionId: string, outcome: SessionOutcome) => {\n      getSessionOutcomes().set(sessionId, outcome);\n      window.setTimeout(() => {\n        getSessionOutcomes().delete(sessionId);\n      }, SESSION_OUTCOME_RETENTION_MS);\n      const editIds = getOverrideList()\n        .filter((override) => override.sessionId === sessionId)\n        .map((override) => override.editId);\n      for (const editId of editIds) {\n        removeOverride({ editId, outcome });\n      }\n    },\n    [],\n  );\n\n  const revertOverride = useCallback((editId: string) => {\n    removeOverride({ editId, outcome: \"failed\" });\n  }, []);\n\n  return {\n    applyOptimisticUpdate,\n    markCommitted,\n    reapplyOverrides,\n    resolveSessionOverrides,\n    revertOverride,\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,36 @@
+import type { DisplayMode, SelectModeFormatCommand, SelectModeOptimisticUpdatePayload, SelectModeSelectionType } from "../../_vendor/schemas/generated/selectMode";
+/**
+ * Inbound side of the iframe<->parent selectMode bridge.
+ *
+ * Listens for Website Builder → canopy methods and applies them locally:
+ *  - `setDisplayMode`: switch the iframe between `browse` and `selection`.
+ *  - `setSelectionType`: declarative push of the parent's current
+ *    selection type. The interesting transition is `* → "none"`, which
+ *    tears down any in-iframe selection frame / in-progress drag — agent-ui
+ *    drives it from `agentUiState.selectionType` so panel dismiss / submit
+ *    flow through the same path as exiting selection mode entirely. The
+ *    regression test in `EditorSelection.spec.tsx` covers the case where
+ *    losing this used to lock the iframe out of further selections.
+ *
+ * Also fires `iframeReady` on mount so the parent knows it's safe to push
+ * the initial `setDisplayMode` — without this handshake the parent would
+ * race the iframe's mount and the first message could be lost.
+ *
+ * @author Kevin O'Connell 2026-04-17
+ */
+export declare function useParentMessaging({ applyOptimisticUpdate, markCommitted, resolveSessionOverrides, onEnterEditMode, onExitEditMode, onFormatCommand, revertOverride, setDisplayMode, setSelectionType, }: {
+    applyOptimisticUpdate?: (input: {
+        editId: string;
+        payload: SelectModeOptimisticUpdatePayload;
+        targetSelector: string;
+        targetMode: "primary" | "group";
+    }) => void;
+    markCommitted?: (editId: string, sessionId: string) => void;
+    resolveSessionOverrides?: (sessionId: string, outcome: "persisted" | "failed") => void;
+    onEnterEditMode?: () => void;
+    onExitEditMode?: () => void;
+    onFormatCommand?: (command: SelectModeFormatCommand) => void;
+    revertOverride?: (editId: string) => void;
+    setDisplayMode: (displayMode: DisplayMode) => void;
+    setSelectionType: (selectionType: SelectModeSelectionType) => void;
+}): void;