@replohq/sandbox-runtime 0.1.0

package/select-mode/iframeRpcChannel.d.ts

@@ -0,0 +1,356 @@
+import type { SelectedElement } from "../_vendor/schemas/generated/selectMode";
+import type { IframeRpcChannelInputHandlers, IframeRpcChannelRemote } from "../_vendor/schemas/iframeRpcChannel";
+import { canopyToWebsiteBuilderMethodConfig, websiteBuilderToCanopyMethodConfig } from "../_vendor/schemas/selectModeIframeRpc";
+export type WebsiteBuilderRpcRemote = IframeRpcChannelRemote<typeof canopyToWebsiteBuilderMethodConfig>;
+type SelectModeParentMessagingHandlers = Omit<IframeRpcChannelInputHandlers<typeof websiteBuilderToCanopyMethodConfig>, "symbolicateSelectedElement">;
+export declare function getSelectModeIframeRpcChannel(): import("../_vendor/schemas/iframeRpcChannel").IframeRpcChannel<{
+    requestInlineTextEdit: {
+        inputSchema: import("zod").ZodObject<{
+            editId: import("zod").ZodString;
+            element: import("zod").ZodObject<{
+                kind: import("zod").ZodLiteral<"react-element">;
+                selector: import("zod").ZodString;
+                tagName: import("zod").ZodString;
+                elementType: import("zod").ZodString;
+                textContent: import("zod").ZodNullable<import("zod").ZodString>;
+                rect: import("zod").ZodObject<{
+                    x: import("zod").ZodNumber;
+                    y: import("zod").ZodNumber;
+                    left: import("zod").ZodNumber;
+                    top: import("zod").ZodNumber;
+                    right: import("zod").ZodNumber;
+                    bottom: import("zod").ZodNumber;
+                    width: import("zod").ZodNumber;
+                    height: import("zod").ZodNumber;
+                }, import("zod/v4/core").$strip>;
+                textMetrics: import("zod").ZodNullable<import("zod").ZodObject<{
+                    tightWidth: import("zod").ZodNumber;
+                    lineCount: import("zod").ZodNumber;
+                    lineHeight: import("zod").ZodNumber;
+                }, import("zod/v4/core").$strip>>;
+                outerHTML: import("zod").ZodString;
+                definedStyles: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodObject<{
+                    property: import("zod").ZodString;
+                    variant: import("zod").ZodNullable<import("zod").ZodObject<{
+                        atRules: import("zod").ZodArray<import("zod").ZodObject<{
+                            type: import("zod").ZodString;
+                            text: import("zod").ZodString;
+                        }, import("zod/v4/core").$strip>>;
+                        pseudo: import("zod").ZodNullable<import("zod").ZodString>;
+                    }, import("zod/v4/core").$strip>>;
+                    className: import("zod").ZodNullable<import("zod").ZodString>;
+                    raw: import("zod").ZodString;
+                    resolved: import("zod").ZodString;
+                }, import("zod/v4/core").$strip>>>;
+                inheritedStyles: import("zod").ZodDefault<import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodString>>;
+                clickPosition: import("zod").ZodObject<{
+                    x: import("zod").ZodNumber;
+                    y: import("zod").ZodNumber;
+                }, import("zod/v4/core").$strip>;
+                sourceLocation: import("zod").ZodOptional<import("zod").ZodObject<{
+                    filePath: import("zod").ZodString;
+                    lineNumber: import("zod").ZodNumber;
+                    columnNumber: import("zod").ZodOptional<import("zod").ZodNumber>;
+                    componentName: import("zod").ZodOptional<import("zod").ZodString>;
+                }, import("zod/v4/core").$strip>>;
+                fiberChain: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodObject<{
+                    sourceLocation: import("zod").ZodObject<{
+                        filePath: import("zod").ZodString;
+                        lineNumber: import("zod").ZodNumber;
+                        columnNumber: import("zod").ZodOptional<import("zod").ZodNumber>;
+                        componentName: import("zod").ZodOptional<import("zod").ZodString>;
+                    }, import("zod/v4/core").$strip>;
+                    tagName: import("zod").ZodOptional<import("zod").ZodString>;
+                    componentName: import("zod").ZodOptional<import("zod").ZodString>;
+                    props: import("zod").ZodOptional<import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodUnknown>>;
+                }, import("zod/v4/core").$strip>>>;
+                siblingSelectors: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodString>>;
+            }, import("zod/v4/core").$strip>;
+        }, import("zod/v4/core").$strip>;
+        outputSchema: import("zod").ZodObject<{
+            allowed: import("zod").ZodBoolean;
+        }, import("zod/v4/core").$strip>;
+        timeoutMs: number;
+    };
+    iframeReady: {
+        inputSchema: import("zod").ZodUndefined;
+        outputSchema: import("zod").ZodVoid;
+    };
+    elementSelected: {
+        inputSchema: import("zod").ZodObject<{
+            data: import("zod").ZodDiscriminatedUnion<[import("zod").ZodObject<{
+                kind: import("zod").ZodLiteral<"react-element">;
+                selector: import("zod").ZodString;
+                tagName: import("zod").ZodString;
+                elementType: import("zod").ZodString;
+                textContent: import("zod").ZodNullable<import("zod").ZodString>;
+                rect: import("zod").ZodObject<{
+                    x: import("zod").ZodNumber;
+                    y: import("zod").ZodNumber;
+                    left: import("zod").ZodNumber;
+                    top: import("zod").ZodNumber;
+                    right: import("zod").ZodNumber;
+                    bottom: import("zod").ZodNumber;
+                    width: import("zod").ZodNumber;
+                    height: import("zod").ZodNumber;
+                }, import("zod/v4/core").$strip>;
+                textMetrics: import("zod").ZodNullable<import("zod").ZodObject<{
+                    tightWidth: import("zod").ZodNumber;
+                    lineCount: import("zod").ZodNumber;
+                    lineHeight: import("zod").ZodNumber;
+                }, import("zod/v4/core").$strip>>;
+                outerHTML: import("zod").ZodString;
+                definedStyles: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodObject<{
+                    property: import("zod").ZodString;
+                    variant: import("zod").ZodNullable<import("zod").ZodObject<{
+                        atRules: import("zod").ZodArray<import("zod").ZodObject<{
+                            type: import("zod").ZodString;
+                            text: import("zod").ZodString;
+                        }, import("zod/v4/core").$strip>>;
+                        pseudo: import("zod").ZodNullable<import("zod").ZodString>;
+                    }, import("zod/v4/core").$strip>>;
+                    className: import("zod").ZodNullable<import("zod").ZodString>;
+                    raw: import("zod").ZodString;
+                    resolved: import("zod").ZodString;
+                }, import("zod/v4/core").$strip>>>;
+                inheritedStyles: import("zod").ZodDefault<import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodString>>;
+                clickPosition: import("zod").ZodObject<{
+                    x: import("zod").ZodNumber;
+                    y: import("zod").ZodNumber;
+                }, import("zod/v4/core").$strip>;
+                sourceLocation: import("zod").ZodOptional<import("zod").ZodObject<{
+                    filePath: import("zod").ZodString;
+                    lineNumber: import("zod").ZodNumber;
+                    columnNumber: import("zod").ZodOptional<import("zod").ZodNumber>;
+                    componentName: import("zod").ZodOptional<import("zod").ZodString>;
+                }, import("zod/v4/core").$strip>>;
+                fiberChain: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodObject<{
+                    sourceLocation: import("zod").ZodObject<{
+                        filePath: import("zod").ZodString;
+                        lineNumber: import("zod").ZodNumber;
+                        columnNumber: import("zod").ZodOptional<import("zod").ZodNumber>;
+                        componentName: import("zod").ZodOptional<import("zod").ZodString>;
+                    }, import("zod/v4/core").$strip>;
+                    tagName: import("zod").ZodOptional<import("zod").ZodString>;
+                    componentName: import("zod").ZodOptional<import("zod").ZodString>;
+                    props: import("zod").ZodOptional<import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodUnknown>>;
+                }, import("zod/v4/core").$strip>>>;
+                siblingSelectors: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodString>>;
+            }, import("zod/v4/core").$strip>, import("zod").ZodObject<{
+                kind: import("zod").ZodLiteral<"plan">;
+                planId: import("zod").ZodString;
+                label: import("zod").ZodString;
+                rect: import("zod").ZodObject<{
+                    x: import("zod").ZodNumber;
+                    y: import("zod").ZodNumber;
+                    left: import("zod").ZodNumber;
+                    top: import("zod").ZodNumber;
+                    right: import("zod").ZodNumber;
+                    bottom: import("zod").ZodNumber;
+                    width: import("zod").ZodNumber;
+                    height: import("zod").ZodNumber;
+                }, import("zod/v4/core").$strip>;
+            }, import("zod/v4/core").$strip>], "kind">;
+        }, import("zod/v4/core").$strip>;
+        outputSchema: import("zod").ZodVoid;
+    };
+    hoverElement: {
+        inputSchema: import("zod").ZodObject<{
+            rect: import("zod").ZodNullable<import("zod").ZodObject<{
+                x: import("zod").ZodNumber;
+                y: import("zod").ZodNumber;
+                left: import("zod").ZodNumber;
+                top: import("zod").ZodNumber;
+                right: import("zod").ZodNumber;
+                bottom: import("zod").ZodNumber;
+                width: import("zod").ZodNumber;
+                height: import("zod").ZodNumber;
+            }, import("zod/v4/core").$strip>>;
+        }, import("zod/v4/core").$strip>;
+        outputSchema: import("zod").ZodVoid;
+    };
+    selectedElementRectUpdate: {
+        inputSchema: import("zod").ZodObject<{
+            rect: import("zod").ZodObject<{
+                x: import("zod").ZodNumber;
+                y: import("zod").ZodNumber;
+                left: import("zod").ZodNumber;
+                top: import("zod").ZodNumber;
+                right: import("zod").ZodNumber;
+                bottom: import("zod").ZodNumber;
+                width: import("zod").ZodNumber;
+                height: import("zod").ZodNumber;
+            }, import("zod/v4/core").$strip>;
+            clickPosition: import("zod").ZodObject<{
+                x: import("zod").ZodNumber;
+                y: import("zod").ZodNumber;
+            }, import("zod/v4/core").$strip>;
+        }, import("zod/v4/core").$strip>;
+        outputSchema: import("zod").ZodVoid;
+    };
+    selectedAreaRectUpdate: {
+        inputSchema: import("zod").ZodObject<{
+            rect: import("zod").ZodObject<{
+                x: import("zod").ZodNumber;
+                y: import("zod").ZodNumber;
+                left: import("zod").ZodNumber;
+                top: import("zod").ZodNumber;
+                right: import("zod").ZodNumber;
+                bottom: import("zod").ZodNumber;
+                width: import("zod").ZodNumber;
+                height: import("zod").ZodNumber;
+            }, import("zod/v4/core").$strip>;
+        }, import("zod/v4/core").$strip>;
+        outputSchema: import("zod").ZodVoid;
+    };
+    dragRectUpdated: {
+        inputSchema: import("zod").ZodObject<{
+            dragRect: import("zod").ZodNullable<import("zod").ZodObject<{
+                x: import("zod").ZodNumber;
+                y: import("zod").ZodNumber;
+                left: import("zod").ZodNumber;
+                top: import("zod").ZodNumber;
+                right: import("zod").ZodNumber;
+                bottom: import("zod").ZodNumber;
+                width: import("zod").ZodNumber;
+                height: import("zod").ZodNumber;
+            }, import("zod/v4/core").$strip>>;
+            selectionRects: import("zod").ZodArray<import("zod").ZodObject<{
+                id: import("zod").ZodString;
+                rect: import("zod").ZodObject<{
+                    x: import("zod").ZodNumber;
+                    y: import("zod").ZodNumber;
+                    left: import("zod").ZodNumber;
+                    top: import("zod").ZodNumber;
+                    right: import("zod").ZodNumber;
+                    bottom: import("zod").ZodNumber;
+                    width: import("zod").ZodNumber;
+                    height: import("zod").ZodNumber;
+                }, import("zod/v4/core").$strip>;
+            }, import("zod/v4/core").$strip>>;
+        }, import("zod/v4/core").$strip>;
+        outputSchema: import("zod").ZodVoid;
+    };
+    areaSelected: {
+        inputSchema: import("zod").ZodObject<{
+            rect: import("zod").ZodObject<{
+                x: import("zod").ZodNumber;
+                y: import("zod").ZodNumber;
+                left: import("zod").ZodNumber;
+                top: import("zod").ZodNumber;
+                right: import("zod").ZodNumber;
+                bottom: import("zod").ZodNumber;
+                width: import("zod").ZodNumber;
+                height: import("zod").ZodNumber;
+            }, import("zod/v4/core").$strip>;
+            items: import("zod").ZodArray<import("zod").ZodDiscriminatedUnion<[import("zod").ZodObject<{
+                kind: import("zod").ZodLiteral<"react-element">;
+                selector: import("zod").ZodString;
+                tagName: import("zod").ZodString;
+                elementType: import("zod").ZodString;
+                textContent: import("zod").ZodNullable<import("zod").ZodString>;
+                rect: import("zod").ZodObject<{
+                    x: import("zod").ZodNumber;
+                    y: import("zod").ZodNumber;
+                    left: import("zod").ZodNumber;
+                    top: import("zod").ZodNumber;
+                    right: import("zod").ZodNumber;
+                    bottom: import("zod").ZodNumber;
+                    width: import("zod").ZodNumber;
+                    height: import("zod").ZodNumber;
+                }, import("zod/v4/core").$strip>;
+                textMetrics: import("zod").ZodNullable<import("zod").ZodObject<{
+                    tightWidth: import("zod").ZodNumber;
+                    lineCount: import("zod").ZodNumber;
+                    lineHeight: import("zod").ZodNumber;
+                }, import("zod/v4/core").$strip>>;
+                outerHTML: import("zod").ZodString;
+                definedStyles: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodObject<{
+                    property: import("zod").ZodString;
+                    variant: import("zod").ZodNullable<import("zod").ZodObject<{
+                        atRules: import("zod").ZodArray<import("zod").ZodObject<{
+                            type: import("zod").ZodString;
+                            text: import("zod").ZodString;
+                        }, import("zod/v4/core").$strip>>;
+                        pseudo: import("zod").ZodNullable<import("zod").ZodString>;
+                    }, import("zod/v4/core").$strip>>;
+                    className: import("zod").ZodNullable<import("zod").ZodString>;
+                    raw: import("zod").ZodString;
+                    resolved: import("zod").ZodString;
+                }, import("zod/v4/core").$strip>>>;
+                inheritedStyles: import("zod").ZodDefault<import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodString>>;
+                clickPosition: import("zod").ZodObject<{
+                    x: import("zod").ZodNumber;
+                    y: import("zod").ZodNumber;
+                }, import("zod/v4/core").$strip>;
+                sourceLocation: import("zod").ZodOptional<import("zod").ZodObject<{
+                    filePath: import("zod").ZodString;
+                    lineNumber: import("zod").ZodNumber;
+                    columnNumber: import("zod").ZodOptional<import("zod").ZodNumber>;
+                    componentName: import("zod").ZodOptional<import("zod").ZodString>;
+                }, import("zod/v4/core").$strip>>;
+                fiberChain: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodObject<{
+                    sourceLocation: import("zod").ZodObject<{
+                        filePath: import("zod").ZodString;
+                        lineNumber: import("zod").ZodNumber;
+                        columnNumber: import("zod").ZodOptional<import("zod").ZodNumber>;
+                        componentName: import("zod").ZodOptional<import("zod").ZodString>;
+                    }, import("zod/v4/core").$strip>;
+                    tagName: import("zod").ZodOptional<import("zod").ZodString>;
+                    componentName: import("zod").ZodOptional<import("zod").ZodString>;
+                    props: import("zod").ZodOptional<import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodUnknown>>;
+                }, import("zod/v4/core").$strip>>>;
+                siblingSelectors: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodString>>;
+            }, import("zod/v4/core").$strip>, import("zod").ZodObject<{
+                kind: import("zod").ZodLiteral<"plan">;
+                planId: import("zod").ZodString;
+                label: import("zod").ZodString;
+                rect: import("zod").ZodObject<{
+                    x: import("zod").ZodNumber;
+                    y: import("zod").ZodNumber;
+                    left: import("zod").ZodNumber;
+                    top: import("zod").ZodNumber;
+                    right: import("zod").ZodNumber;
+                    bottom: import("zod").ZodNumber;
+                    width: import("zod").ZodNumber;
+                    height: import("zod").ZodNumber;
+                }, import("zod/v4/core").$strip>;
+            }, import("zod/v4/core").$strip>], "kind">>;
+        }, import("zod/v4/core").$strip>;
+        outputSchema: import("zod").ZodVoid;
+    };
+    textCommitted: {
+        inputSchema: import("zod").ZodObject<{
+            editId: import("zod").ZodString;
+            html: import("zod").ZodString;
+            json: import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodUnknown>;
+            originalInnerHTML: import("zod").ZodString;
+        }, import("zod/v4/core").$strip>;
+        outputSchema: import("zod").ZodVoid;
+    };
+    editorStateUpdate: {
+        inputSchema: import("zod").ZodObject<{
+            activeMarks: import("zod").ZodObject<{
+                bold: import("zod").ZodBoolean;
+                italic: import("zod").ZodBoolean;
+                underline: import("zod").ZodBoolean;
+                strike: import("zod").ZodBoolean;
+            }, import("zod/v4/core").$strip>;
+            isEditing: import("zod").ZodBoolean;
+        }, import("zod/v4/core").$strip>;
+        outputSchema: import("zod").ZodVoid;
+    };
+    fastRefreshComplete: {
+        inputSchema: import("zod").ZodUndefined;
+        outputSchema: import("zod").ZodVoid;
+    };
+}> | null;
+export declare function setSelectModeParentHandlers(nextHandlers: SelectModeParentMessagingHandlers | null): void;
+export declare function getWebsiteBuilderRpc(): WebsiteBuilderRpcRemote | null;
+export declare function requestInlineTextEdit(input: {
+    editId: string;
+    element: SelectedElement;
+}): Promise<{
+    allowed: boolean;
+}>;
+export {};

package/select-mode/iframeRpcChannel.js

@@ -0,0 +1,92 @@
+import {
+  createIframeRpcChannel,
+  createIframeRpcRemote
+} from "../_vendor/schemas/iframeRpcChannel.mjs";
+import {
+  canopyToWebsiteBuilderMethodConfig,
+  SELECT_MODE_IFRAME_RPC_CHANNEL_ID,
+  SELECT_MODE_IFRAME_RPC_CHANNEL_VERSION,
+  websiteBuilderToCanopyMethodConfig
+} from "../_vendor/schemas/selectModeIframeRpc.mjs";
+import { symbolicateSelectedElement } from "./symbolicate";
+let messagingHandlers = null;
+function createSelectModeIframeRpcChannel() {
+  return createIframeRpcChannel({
+    subscriberWindow: window,
+    channelIdentifier: SELECT_MODE_IFRAME_RPC_CHANNEL_ID,
+    version: SELECT_MODE_IFRAME_RPC_CHANNEL_VERSION,
+    getTargetWindow: () => window.parent === window ? null : window.parent,
+    targetOrigin: "*",
+    isExpectedMessage: (event) => event.source === window.parent,
+    outgoingMethods: canopyToWebsiteBuilderMethodConfig,
+    incomingMethods: websiteBuilderToCanopyMethodConfig,
+    handlers: {
+      setDisplayMode: (input) => {
+        messagingHandlers?.setDisplayMode(input);
+      },
+      setSelectionType: (input) => {
+        messagingHandlers?.setSelectionType(input);
+      },
+      applyOptimisticUpdate: (input) => {
+        messagingHandlers?.applyOptimisticUpdate(input);
+      },
+      markCommitted: (input) => {
+        messagingHandlers?.markCommitted(input);
+      },
+      resolveSessionOverrides: (input) => {
+        messagingHandlers?.resolveSessionOverrides(input);
+      },
+      revertOverride: (input) => {
+        messagingHandlers?.revertOverride(input);
+      },
+      enterEditMode: (input) => {
+        messagingHandlers?.enterEditMode(input);
+      },
+      exitEditMode: (input) => {
+        messagingHandlers?.exitEditMode(input);
+      },
+      formatCommand: (input) => {
+        messagingHandlers?.formatCommand(input);
+      },
+      symbolicateSelectedElement: (element) => {
+        return symbolicateSelectedElement(element);
+      }
+    }
+  });
+}
+let channel = null;
+let websiteBuilderRpc = null;
+function getSelectModeIframeRpcChannel() {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  channel ??= createSelectModeIframeRpcChannel();
+  return channel;
+}
+function setSelectModeParentHandlers(nextHandlers) {
+  messagingHandlers = nextHandlers;
+}
+function getWebsiteBuilderRpc() {
+  const currentChannel = getSelectModeIframeRpcChannel();
+  if (!currentChannel) {
+    return null;
+  }
+  websiteBuilderRpc ??= createIframeRpcRemote(currentChannel);
+  return websiteBuilderRpc;
+}
+function requestInlineTextEdit(input) {
+  const remote = getWebsiteBuilderRpc();
+  if (!remote) {
+    return Promise.reject(
+      new Error("Website Builder iframe RPC is unavailable")
+    );
+  }
+  return remote.requestInlineTextEdit(input);
+}
+export {
+  getSelectModeIframeRpcChannel,
+  getWebsiteBuilderRpc,
+  requestInlineTextEdit,
+  setSelectModeParentHandlers
+};
+//# sourceMappingURL=iframeRpcChannel.js.map

package/select-mode/iframeRpcChannel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../select-mode/iframeRpcChannel.ts"],
+  "sourcesContent": ["import type { SelectedElement } from \"schemas/generated/selectMode\";\nimport type {\n  IframeRpcChannelInputHandlers,\n  IframeRpcChannelRemote,\n} from \"schemas/iframeRpcChannel\";\n\nimport {\n  createIframeRpcChannel,\n  createIframeRpcRemote,\n} from \"schemas/iframeRpcChannel\";\nimport {\n  canopyToWebsiteBuilderMethodConfig,\n  SELECT_MODE_IFRAME_RPC_CHANNEL_ID,\n  SELECT_MODE_IFRAME_RPC_CHANNEL_VERSION,\n  websiteBuilderToCanopyMethodConfig,\n} from \"schemas/selectModeIframeRpc\";\n\nimport { symbolicateSelectedElement } from \"./symbolicate\";\n\nexport type WebsiteBuilderRpcRemote = IframeRpcChannelRemote<\n  typeof canopyToWebsiteBuilderMethodConfig\n>;\n\ntype SelectModeParentMessagingHandlers = Omit<\n  IframeRpcChannelInputHandlers<typeof websiteBuilderToCanopyMethodConfig>,\n  \"symbolicateSelectedElement\"\n>;\n\n// Module-level handler pointers; `useParentMessaging` sets these on mount\n// and nulls them on unmount. Inbound void methods are dropped until then.\n// `symbolicateSelectedElement` is wired permanently on the channel.\nlet messagingHandlers: SelectModeParentMessagingHandlers | null = null;\n\nfunction createSelectModeIframeRpcChannel() {\n  return createIframeRpcChannel({\n    subscriberWindow: window,\n    channelIdentifier: SELECT_MODE_IFRAME_RPC_CHANNEL_ID,\n    version: SELECT_MODE_IFRAME_RPC_CHANNEL_VERSION,\n    getTargetWindow: () => (window.parent === window ? null : window.parent),\n    targetOrigin: \"*\",\n    isExpectedMessage: (event) => event.source === window.parent,\n    outgoingMethods: canopyToWebsiteBuilderMethodConfig,\n    incomingMethods: websiteBuilderToCanopyMethodConfig,\n    handlers: {\n      setDisplayMode: (input) => {\n        messagingHandlers?.setDisplayMode(input);\n      },\n      setSelectionType: (input) => {\n        messagingHandlers?.setSelectionType(input);\n      },\n      applyOptimisticUpdate: (input) => {\n        messagingHandlers?.applyOptimisticUpdate(input);\n      },\n      markCommitted: (input) => {\n        messagingHandlers?.markCommitted(input);\n      },\n      resolveSessionOverrides: (input) => {\n        messagingHandlers?.resolveSessionOverrides(input);\n      },\n      revertOverride: (input) => {\n        messagingHandlers?.revertOverride(input);\n      },\n      enterEditMode: (input) => {\n        messagingHandlers?.enterEditMode(input);\n      },\n      exitEditMode: (input) => {\n        messagingHandlers?.exitEditMode(input);\n      },\n      formatCommand: (input) => {\n        messagingHandlers?.formatCommand(input);\n      },\n      symbolicateSelectedElement: (element) => {\n        return symbolicateSelectedElement(element);\n      },\n    },\n  });\n}\n\nlet channel: ReturnType<typeof createSelectModeIframeRpcChannel> | null = null;\nlet websiteBuilderRpc: WebsiteBuilderRpcRemote | null = null;\n\nexport function getSelectModeIframeRpcChannel() {\n  if (typeof window === \"undefined\") {\n    return null;\n  }\n  channel ??= createSelectModeIframeRpcChannel();\n  return channel;\n}\n\nexport function setSelectModeParentHandlers(\n  nextHandlers: SelectModeParentMessagingHandlers | null,\n) {\n  messagingHandlers = nextHandlers;\n}\n\nexport function getWebsiteBuilderRpc(): WebsiteBuilderRpcRemote | null {\n  const currentChannel = getSelectModeIframeRpcChannel();\n  if (!currentChannel) {\n    return null;\n  }\n  websiteBuilderRpc ??= createIframeRpcRemote(currentChannel);\n  return websiteBuilderRpc;\n}\n\nexport function requestInlineTextEdit(input: {\n  editId: string;\n  element: SelectedElement;\n}) {\n  const remote = getWebsiteBuilderRpc();\n  if (!remote) {\n    return Promise.reject(\n      new Error(\"Website Builder iframe RPC is unavailable\"),\n    );\n  }\n  return remote.requestInlineTextEdit(input);\n}\n"],
+  "mappings": "AAMA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,kCAAkC;AAc3C,IAAI,oBAA8D;AAElE,SAAS,mCAAmC;AAC1C,SAAO,uBAAuB;AAAA,IAC5B,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,SAAS;AAAA,IACT,iBAAiB,MAAO,OAAO,WAAW,SAAS,OAAO,OAAO;AAAA,IACjE,cAAc;AAAA,IACd,mBAAmB,CAAC,UAAU,MAAM,WAAW,OAAO;AAAA,IACtD,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,UAAU;AAAA,MACR,gBAAgB,CAAC,UAAU;AACzB,2BAAmB,eAAe,KAAK;AAAA,MACzC;AAAA,MACA,kBAAkB,CAAC,UAAU;AAC3B,2BAAmB,iBAAiB,KAAK;AAAA,MAC3C;AAAA,MACA,uBAAuB,CAAC,UAAU;AAChC,2BAAmB,sBAAsB,KAAK;AAAA,MAChD;AAAA,MACA,eAAe,CAAC,UAAU;AACxB,2BAAmB,cAAc,KAAK;AAAA,MACxC;AAAA,MACA,yBAAyB,CAAC,UAAU;AAClC,2BAAmB,wBAAwB,KAAK;AAAA,MAClD;AAAA,MACA,gBAAgB,CAAC,UAAU;AACzB,2BAAmB,eAAe,KAAK;AAAA,MACzC;AAAA,MACA,eAAe,CAAC,UAAU;AACxB,2BAAmB,cAAc,KAAK;AAAA,MACxC;AAAA,MACA,cAAc,CAAC,UAAU;AACvB,2BAAmB,aAAa,KAAK;AAAA,MACvC;AAAA,MACA,eAAe,CAAC,UAAU;AACxB,2BAAmB,cAAc,KAAK;AAAA,MACxC;AAAA,MACA,4BAA4B,CAAC,YAAY;AACvC,eAAO,2BAA2B,OAAO;AAAA,MAC3C;AAAA,IACF;AAAA,EACF,CAAC;AACH;AAEA,IAAI,UAAsE;AAC1E,IAAI,oBAAoD;AAEjD,SAAS,gCAAgC;AAC9C,MAAI,OAAO,WAAW,aAAa;AACjC,WAAO;AAAA,EACT;AACA,cAAY,iCAAiC;AAC7C,SAAO;AACT;AAEO,SAAS,4BACd,cACA;AACA,sBAAoB;AACtB;AAEO,SAAS,uBAAuD;AACrE,QAAM,iBAAiB,8BAA8B;AACrD,MAAI,CAAC,gBAAgB;AACnB,WAAO;AAAA,EACT;AACA,wBAAsB,sBAAsB,cAAc;AAC1D,SAAO;AACT;AAEO,SAAS,sBAAsB,OAGnC;AACD,QAAM,SAAS,qBAAqB;AACpC,MAAI,CAAC,QAAQ;AACX,WAAO,QAAQ;AAAA,MACb,IAAI,MAAM,2CAA2C;AAAA,IACvD;AAAA,EACF;AACA,SAAO,OAAO,sBAAsB,KAAK;AAC3C;",
+  "names": []
+}

package/select-mode/inlineTextMarks.d.ts

@@ -0,0 +1,6 @@
+export declare function isInlineTextMarkElement(element: Element): boolean;
+/**
+ * Walk up past nested inline text marks so selection targets the host
+ * element (e.g. `<p>hello <em>world</em></p>` → the `<p>`).
+ */
+export declare function skipInlineTextMarkElements(element: Element): Element;

package/select-mode/inlineTextMarks.js

@@ -0,0 +1,25 @@
+const INLINE_TEXT_MARK_TAGS = /* @__PURE__ */ new Set([
+  "b",
+  "strong",
+  "em",
+  "i",
+  "s",
+  "strike",
+  "u",
+  "mark"
+]);
+function isInlineTextMarkElement(element) {
+  return INLINE_TEXT_MARK_TAGS.has(element.tagName.toLowerCase());
+}
+function skipInlineTextMarkElements(element) {
+  let current = element;
+  while (isInlineTextMarkElement(current) && current.parentElement && current.parentElement !== document.documentElement && current.parentElement !== document.body) {
+    current = current.parentElement;
+  }
+  return current;
+}
+export {
+  isInlineTextMarkElement,
+  skipInlineTextMarkElements
+};
+//# sourceMappingURL=inlineTextMarks.js.map

package/select-mode/inlineTextMarks.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../select-mode/inlineTextMarks.ts"],
+  "sourcesContent": ["// NOTE (Noah, 2026-07-23): TipTap / inline JSX marks are not independently\n// selectable \u2014 clicking bold/italic text should select the host block, not\n// the <strong>/<em> wrapper. Keep in sync with tiptapInlineEditor marks.\nconst INLINE_TEXT_MARK_TAGS = new Set([\n  \"b\",\n  \"strong\",\n  \"em\",\n  \"i\",\n  \"s\",\n  \"strike\",\n  \"u\",\n  \"mark\",\n]);\n\nexport function isInlineTextMarkElement(element: Element): boolean {\n  return INLINE_TEXT_MARK_TAGS.has(element.tagName.toLowerCase());\n}\n\n/**\n * Walk up past nested inline text marks so selection targets the host\n * element (e.g. `<p>hello <em>world</em></p>` \u2192 the `<p>`).\n */\nexport function skipInlineTextMarkElements(element: Element): Element {\n  let current = element;\n  while (\n    isInlineTextMarkElement(current) &&\n    current.parentElement &&\n    current.parentElement !== document.documentElement &&\n    current.parentElement !== document.body\n  ) {\n    current = current.parentElement;\n  }\n  return current;\n}\n"],
+  "mappings": "AAGA,MAAM,wBAAwB,oBAAI,IAAI;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAEM,SAAS,wBAAwB,SAA2B;AACjE,SAAO,sBAAsB,IAAI,QAAQ,QAAQ,YAAY,CAAC;AAChE;AAMO,SAAS,2BAA2B,SAA2B;AACpE,MAAI,UAAU;AACd,SACE,wBAAwB,OAAO,KAC/B,QAAQ,iBACR,QAAQ,kBAAkB,SAAS,mBACnC,QAAQ,kBAAkB,SAAS,MACnC;AACA,cAAU,QAAQ;AAAA,EACpB;AACA,SAAO;AACT;",
+  "names": []
+}

package/select-mode/interactions/selectionGeometry.d.ts

@@ -0,0 +1,105 @@
+import type { SelectModeBoundingRect, SelectModeClickPosition } from "../../_vendor/schemas/generated/selectMode";
+export type DragPosition = {
+    clientX: number;
+    clientY: number;
+    pageX: number;
+    pageY: number;
+};
+export type ScrollOffset = {
+    left: number;
+    top: number;
+};
+export type SelectedAreaState = {
+    pageRect: SelectModeBoundingRect;
+};
+/**
+ * @author Kevin O'Connell 2026-04-17
+ */
+export declare function getDragPositionFromClient({ clientX, clientY, scrollOffset, }: {
+    clientX: number;
+    clientY: number;
+    scrollOffset: ScrollOffset;
+}): DragPosition;
+/**
+ * @author Kevin O'Connell 2026-04-17
+ */
+export declare function getDocumentScrollOffset(): ScrollOffset;
+/**
+ * @author Kevin O'Connell 2026-04-17
+ */
+export declare function getViewportSelectionRect({ dragStart, dragCurrent, scrollOffset, }: {
+    dragStart: DragPosition;
+    dragCurrent: DragPosition;
+    scrollOffset: ScrollOffset;
+}): SelectModeBoundingRect;
+/**
+ * @author Kevin O'Connell 2026-04-17
+ */
+export declare function getPageRectFromViewportRect({ rect, scrollOffset, }: {
+    rect: SelectModeBoundingRect;
+    scrollOffset: ScrollOffset;
+}): SelectModeBoundingRect;
+/**
+ * @author Kevin O'Connell 2026-04-17
+ */
+export declare function getViewportRectFromPageRect({ rect, scrollOffset, }: {
+    rect: SelectModeBoundingRect;
+    scrollOffset: ScrollOffset;
+}): SelectModeBoundingRect;
+/**
+ * A drag captures an element when their boxes overlap (within
+ * `tolerancePx`) — but NOT when the drag sits entirely inside the
+ * element. The latter case is the user dragging *within* a large
+ * container (a section, `<main>`, `<body>`) to lasso its children; the
+ * container itself isn't a thing they're trying to select, so we drop it.
+ */
+export declare function doesRectIntersectSelection({ elementRect, selectionRect, tolerancePx, }: {
+    elementRect: SelectModeBoundingRect;
+    selectionRect: SelectModeBoundingRect;
+    tolerancePx: number;
+}): boolean;
+export type DragCandidate = {
+    id: string;
+    element: Element;
+    pageRect: SelectModeBoundingRect;
+};
+/**
+ * Snapshots every meaningful element and its page rect when a drag begins.
+ * Each candidate gets a stable id so the parent overlay can key its
+ * live highlights without remounting them as the drag moves.
+ */
+export declare function collectDragCandidates(scrollOffset: ScrollOffset): DragCandidate[];
+/**
+ * Cheap per-move hit-test against the pre-collected candidates: keep the
+ * ones whose page rect overlaps the selection (excluding any that wholly
+ * enclose it), then collapse any fully-covered parent/children group down
+ * to just the parent (see `collapseFullyCoveredChildren`). Does no DOM
+ * queries or re-measures of geometry — the only DOM reads are cheap
+ * parent/child structural lookups.
+ *
+ * Because the collapse depends on which siblings are currently captured,
+ * elements legitimately move in and out of the result as the drag grows or
+ * shrinks: a child drops out the moment the drag swallows its last sibling
+ * (the parent takes over), and reappears if the drag retreats.
+ */
+export declare function getCandidatesInSelection({ candidates, selectionPageRect, }: {
+    candidates: DragCandidate[];
+    selectionPageRect: SelectModeBoundingRect;
+}): DragCandidate[];
+/**
+ * Picks a "click position" for an element that fell inside an area
+ * selection. We use the corner of the element nearest the top-left of the
+ * selection rect, clamped to the element's own bounds. This anchor is what
+ * lets the selected-element overlay continue to track the element when the
+ * user scrolls (`useSelectionScrollSync` re-projects relative to it).
+ *
+ * @author Kevin O'Connell 2026-04-17
+ */
+export declare function getElementAnchor({ element, selectionRect, }: {
+    element: Element;
+    selectionRect: SelectModeBoundingRect;
+}): SelectModeClickPosition;
+/**
+ * @author Kevin O'Connell 2026-04-17
+ */
+export declare function getElementBoundingRect(element: Element): SelectModeBoundingRect;