@replohq/sandbox-runtime 1.16.2 → 1.18.0

package/select-mode/hooks/useSelectionInteractions.js

@@ -20,6 +20,7 @@ import {
   unionElementPageRects
 } from "../interactions/selectionGeometry";
 import { isTextEditableElement } from "../isTextEditableElement";
+import { isSectionCanvasControl } from "../section-canvas/sectionCanvasControls";
 import { isSelectionStillCurrent } from "../selectionPublish";
 import {
   getConnectedSelectedElement,
@@ -172,6 +173,9 @@ function useSelectionInteractions() {
       );
     };
     const handlePointerDown = (event) => {
+      if (isSectionCanvasControl(event.target)) {
+        return;
+      }
       if (event.button !== 0) {
         return;
       }
@@ -362,6 +366,9 @@ function useSelectionInteractions() {
       });
     };
     const handlePointerUp = (event) => {
+      if (isSectionCanvasControl(event.target)) {
+        return;
+      }
       if (event.button !== 0) {
         return;
       }
@@ -419,6 +426,9 @@ function useSelectionInteractions() {
       });
     };
     const handleClick = (event) => {
+      if (isSectionCanvasControl(event.target)) {
+        return;
+      }
       if (editingElementRef?.current && event.target instanceof Node && editingElementRef.current.contains(event.target)) {
         return;
       }

package/select-mode/iframeRpcChannel.d.ts

@@ -2,11 +2,54 @@ import type { SelectedElement } from "../_vendor/schemas/generated/selectMode";
 import type { IframeRpcChannelInputHandlers, IframeRpcChannelRemote } from "../_vendor/schemas/iframeRpcChannel";
 import { previewIframeToWebsiteBuilderMethodConfig, websiteBuilderToPreviewIframeMethodConfig } from "../_vendor/schemas/selectModeIframeRpc";
 export type WebsiteBuilderRpcRemote = IframeRpcChannelRemote<typeof previewIframeToWebsiteBuilderMethodConfig>;
-type SelectModeParentMessagingHandlers = Omit<IframeRpcChannelInputHandlers<typeof websiteBuilderToPreviewIframeMethodConfig>, "symbolicateSelectedElement" | "navigateToRoute">;
+type SelectModeParentMessagingHandlers = Omit<IframeRpcChannelInputHandlers<typeof websiteBuilderToPreviewIframeMethodConfig>, "symbolicateSelectedElement" | "navigateToRoute" | "setSectionCanvas" | "settleSectionMove">;
 export declare function setNavigateToRouteHandler(handler: ((input: {
     pathname: string;
 }) => void) | null): void;
 export declare function getSelectModeIframeRpcChannel(): import("../_vendor/schemas/iframeRpcChannel").IframeRpcChannel<{
+    sectionCanvasRequest: {
+        inputSchema: import("zod").ZodObject<{
+            request: import("zod").ZodDiscriminatedUnion<[import("zod").ZodObject<{
+                type: import("zod").ZodLiteral<"insert">;
+                at: import("zod").ZodNumber;
+            }, import("zod/v4/core").$strip>, import("zod").ZodObject<{
+                type: import("zod").ZodLiteral<"move">;
+                moveId: import("zod").ZodString;
+                index: import("zod").ZodNumber;
+                to: import("zod").ZodNumber;
+            }, import("zod/v4/core").$strip>, import("zod").ZodObject<{
+                type: import("zod").ZodLiteral<"remove">;
+                index: import("zod").ZodNumber;
+            }, import("zod/v4/core").$strip>, import("zod").ZodObject<{
+                type: import("zod").ZodLiteral<"undo">;
+            }, import("zod/v4/core").$strip>, import("zod").ZodObject<{
+                type: import("zod").ZodLiteral<"redo">;
+            }, import("zod/v4/core").$strip>, import("zod").ZodObject<{
+                type: import("zod").ZodLiteral<"cancelInsert">;
+            }, import("zod/v4/core").$strip>], "type">;
+        }, import("zod/v4/core").$strip>;
+        outputSchema: import("zod").ZodVoid;
+    };
+    sectionCanvasLayoutChanged: {
+        inputSchema: import("zod").ZodObject<{
+            sections: import("zod").ZodArray<import("zod").ZodObject<{
+                index: import("zod").ZodNumber;
+                startLine: import("zod").ZodNumber;
+                endLine: import("zod").ZodNumber;
+                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;
+    };
     requestInlineTextEdit: {
         inputSchema: import("zod").ZodObject<{
             editId: import("zod").ZodString;
@@ -105,6 +148,7 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
             branch: import("zod").ZodNullable<import("zod").ZodString>;
             commit: import("zod").ZodNullable<import("zod").ZodString>;
             builtAt: import("zod").ZodNullable<import("zod").ZodString>;
+            capabilities: import("zod").ZodOptional<import("zod").ZodArray<import("zod").ZodString>>;
         }, import("zod/v4/core").$strip>;
         outputSchema: import("zod").ZodVoid;
     };
@@ -411,9 +455,9 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
         inputSchema: import("zod").ZodObject<{
             feedback: import("zod").ZodNullable<import("zod").ZodObject<{
                 status: import("zod").ZodEnum<{
+                    failed: "failed";
                     pending: "pending";
                     unavailable: "unavailable";
-                    failed: "failed";
                 }>;
                 rect: import("zod").ZodObject<{
                     x: import("zod").ZodNumber;

package/select-mode/iframeRpcChannel.js

@@ -8,6 +8,7 @@ import {
   SELECT_MODE_IFRAME_RPC_CHANNEL_VERSION,
   websiteBuilderToPreviewIframeMethodConfig
 } from "../_vendor/schemas/selectModeIframeRpc.mjs";
+import { sectionCanvasStore } from "./section-canvas/sectionCanvasStore";
 import { symbolicateSelectedElement } from "./symbolicate";
 let messagingHandlers = null;
 let navigateToRouteHandler = null;
@@ -54,6 +55,12 @@ function createSelectModeIframeRpcChannel() {
       formatCommand: (input) => {
         messagingHandlers?.formatCommand(input);
       },
+      setSectionCanvas: ({ canvas }) => {
+        sectionCanvasStore.getState().actions.setCanvas(canvas);
+      },
+      settleSectionMove: (input) => {
+        sectionCanvasStore.getState().actions.settleMove(input);
+      },
       symbolicateSelectedElement: (element) => {
         return symbolicateSelectedElement(element);
       },

package/select-mode/section-canvas/SectionCanvas.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Section controls drawn on the preview, after Squarespace's editor: the hovered or selected section
+ * gets a bold outline with an "Add Section" pill on each edge, a grip that drags it to a new place
+ * (with a picture of it and a drop line), and a trash button. Every edit is a request to the
+ * Website Builder, which owns the source.
+ */
+export declare function SectionCanvas(): import("react").ReactPortal | null;