@replohq/sandbox-runtime 1.9.0 → 1.10.0

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

@@ -184,16 +184,28 @@ function describeFontFile(fileName) {
 }
 function fontFormatFromExtension(extension) {
   const normalized = extension.toLowerCase().replace(/^\./u, "");
-  if (normalized === "woff2") return "woff2";
-  if (normalized === "woff") return "woff";
-  if (normalized === "otf") return "opentype";
-  if (normalized === "ttf") return "truetype";
+  if (normalized === "woff2") {
+    return "woff2";
+  }
+  if (normalized === "woff") {
+    return "woff";
+  }
+  if (normalized === "otf") {
+    return "opentype";
+  }
+  if (normalized === "ttf") {
+    return "truetype";
+  }
   return "woff2";
 }
 function fontFormatFromMimeType(mimeType) {
   const normalized = mimeType.toLowerCase();
-  if (normalized.includes("woff2")) return "woff2";
-  if (normalized.includes("woff")) return "woff";
+  if (normalized.includes("woff2")) {
+    return "woff2";
+  }
+  if (normalized.includes("woff")) {
+    return "woff";
+  }
   if (normalized.includes("otf") || normalized.includes("opentype")) {
     return "opentype";
   }

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

@@ -34,6 +34,17 @@ export type SelectModeBoundingRect = {
     width: number;
     height: number;
 };
+export type SelectModeHoverRect = {
+    x: number;
+    y: number;
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+    isSection?: boolean;
+};
 export type SelectModeSelectionRect = {
     id: string;
     rect: SelectModeBoundingRect;
@@ -77,6 +88,9 @@ export type SelectModeImage = {
 export type SelectedElement = {
     kind: "react-element";
     selector: string;
+    section?: {
+        selector: string;
+    };
     tagName: string;
     elementType: string;
     textContent: string | null;

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

@@ -1,4 +1,4 @@
-import type { SelectModeBoundingRect, DisplayMode, SelectModeSelectionType, SelectModeOptimisticUpdatePayload, SelectModeFormatCommand, SelectableData, SelectModeClickPosition, SelectModeSelectionRect, SelectModeTiptapActiveMarks } from "./selectMode";
+import type { SelectModeBoundingRect, DisplayMode, SelectModeSelectionType, SelectModeOptimisticUpdatePayload, SelectModeFormatCommand, SelectableData, SelectModeHoverRect, SelectModeClickPosition, SelectModeSelectionRect, SelectModeTiptapActiveMarks } from "./selectMode";
 export type InlineEditFeedback = {
     status: "pending" | "unavailable" | "failed";
     rect: SelectModeBoundingRect;
@@ -11,6 +11,16 @@ export type IframeRuntimeBuildMetadata = {
     builtAt: string | null;
 };
 export type SelectModeParentMessage = {
+    method: "expandToSection";
+    data: {
+        targetSelector: string;
+    };
+} | {
+    method: "setSectionPreview";
+    data: {
+        targetSelector: string | null;
+    };
+} | {
     method: "setDisplayMode";
     data: {
         displayMode: DisplayMode;
@@ -67,7 +77,7 @@ export type SelectModeIframeMessage = {
 } | {
     method: "hoverElement";
     data: {
-        rect: SelectModeBoundingRect | null;
+        rect: SelectModeHoverRect | null;
     };
 } | {
     method: "selectedElementRectUpdate";

package/_vendor/schemas/selectMode.d.ts

@@ -46,6 +46,17 @@ export declare const selectModeBoundingRectSchema: z.ZodObject<{
     width: z.ZodNumber;
     height: z.ZodNumber;
 }, z.core.$strip>;
+export declare const selectModeHoverRectSchema: 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;
+    isSection: z.ZodOptional<z.ZodBoolean>;
+}, z.core.$strip>;
 export declare const selectModeSelectionRectSchema: z.ZodObject<{
     id: z.ZodString;
     rect: z.ZodObject<{
@@ -128,6 +139,9 @@ export declare const selectModeImageSchema: z.ZodObject<{
 export declare const selectedElementSchema: z.ZodObject<{
     kind: z.ZodLiteral<"react-element">;
     selector: z.ZodString;
+    section: z.ZodOptional<z.ZodObject<{
+        selector: z.ZodString;
+    }, z.core.$strip>>;
     tagName: z.ZodString;
     elementType: z.ZodString;
     textContent: z.ZodNullable<z.ZodString>;
@@ -226,6 +240,9 @@ export declare const selectableDataPayloadSchema: z.ZodDiscriminatedUnion<[z.Zod
 export declare const selectableDataSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
     kind: z.ZodLiteral<"react-element">;
     selector: z.ZodString;
+    section: z.ZodOptional<z.ZodObject<{
+        selector: z.ZodString;
+    }, z.core.$strip>>;
     tagName: z.ZodString;
     elementType: z.ZodString;
     textContent: z.ZodNullable<z.ZodString>;
@@ -314,6 +331,7 @@ export type SelectModeBoundingRect = z.infer<typeof selectModeBoundingRectSchema
 export type SelectModeClickPosition = z.infer<typeof selectModeClickPositionSchema>;
 export type SelectableData = z.infer<typeof selectableDataSchema>;
 export type SelectableDataPayload = z.infer<typeof selectableDataPayloadSchema>;
+export declare function isSelectedSection(data: SelectableData): boolean;
 export declare function transformSelectedElement({ element, offset, scale, }: {
     element: z.infer<typeof selectedElementSchema>;
     offset: RectOffset;
@@ -418,6 +436,9 @@ export declare const selectModeSelectionSchema: z.ZodDiscriminatedUnion<[z.ZodOb
     data: z.ZodDiscriminatedUnion<[z.ZodObject<{
         kind: z.ZodLiteral<"react-element">;
         selector: z.ZodString;
+        section: z.ZodOptional<z.ZodObject<{
+            selector: z.ZodString;
+        }, z.core.$strip>>;
         tagName: z.ZodString;
         elementType: z.ZodString;
         textContent: z.ZodNullable<z.ZodString>;
@@ -517,6 +538,9 @@ export declare const selectModeSelectionSchema: z.ZodDiscriminatedUnion<[z.ZodOb
     items: z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
         kind: z.ZodLiteral<"react-element">;
         selector: z.ZodString;
+        section: z.ZodOptional<z.ZodObject<{
+            selector: z.ZodString;
+        }, z.core.$strip>>;
         tagName: z.ZodString;
         elementType: z.ZodString;
         textContent: z.ZodNullable<z.ZodString>;

package/_vendor/schemas/selectMode.mjs

@@ -1,4 +1,4 @@
-export { SELECT_MODE_SELECTABLE_ATTRIBUTE, SELECT_MODE_SELECTABLE_PAYLOAD_ATTRIBUTE, displayModeSchema, getIframeOffset, readSelectablePayload, selectModeBoundingRectSchema, selectModeClickPositionSchema, selectModeDefinedStyleSchema, selectModeFiberChainEntrySchema, selectModeFormatCommandSchema, selectModeImageSchema, selectModeImageScopeSchema, selectModeImageSourceSchema, selectModeInlineTextStatusSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionRectSchema, selectModeSelectionSchema, selectModeSelectionTypeSchema, selectModeSourceLocationSchema, selectModeStyleAtRuleSchema, selectModeStyleVariantSchema, selectModeTextMetricsSchema, selectModeTiptapActiveMarksSchema, selectableDataPayloadSchema, selectableDataSchema, selectablePlanDataSchema, selectablePlanPayloadSchema, selectedElementSchema, transformPoint, transformRect, transformSelectableData, transformSelectedElement } from '../../chunk-XWNBKE63.mjs';
+export { SELECT_MODE_SELECTABLE_ATTRIBUTE, SELECT_MODE_SELECTABLE_PAYLOAD_ATTRIBUTE, displayModeSchema, getIframeOffset, isSelectedSection, readSelectablePayload, selectModeBoundingRectSchema, selectModeClickPositionSchema, selectModeDefinedStyleSchema, selectModeFiberChainEntrySchema, selectModeFormatCommandSchema, selectModeHoverRectSchema, selectModeImageSchema, selectModeImageScopeSchema, selectModeImageSourceSchema, selectModeInlineTextStatusSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionRectSchema, selectModeSelectionSchema, selectModeSelectionTypeSchema, selectModeSourceLocationSchema, selectModeStyleAtRuleSchema, selectModeStyleVariantSchema, selectModeTextMetricsSchema, selectModeTiptapActiveMarksSchema, selectableDataPayloadSchema, selectableDataSchema, selectablePlanDataSchema, selectablePlanPayloadSchema, selectedElementSchema, transformPoint, transformRect, transformSelectableData, transformSelectedElement } from '../../chunk-PJBGUXBG.mjs';
 import '../../chunk-JUKCUPQ6.mjs';
 import '../../chunk-FLYEIRFK.mjs';
 import '../../chunk-TESFJQID.mjs';

package/_vendor/schemas/selectModeIframeRpc.d.ts

@@ -37,6 +37,7 @@ export declare const selectModeEventInputSchemas: {
             bottom: z.ZodNumber;
             width: z.ZodNumber;
             height: z.ZodNumber;
+            isSection: z.ZodOptional<z.ZodBoolean>;
         }, z.core.$strip>>;
     }, z.core.$strip>;
     areaSelection: z.ZodObject<{
@@ -53,6 +54,9 @@ export declare const selectModeEventInputSchemas: {
         items: z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
             kind: z.ZodLiteral<"react-element">;
             selector: z.ZodString;
+            section: z.ZodOptional<z.ZodObject<{
+                selector: z.ZodString;
+            }, z.core.$strip>>;
             tagName: z.ZodString;
             elementType: z.ZodString;
             textContent: z.ZodNullable<z.ZodString>;
@@ -175,10 +179,25 @@ export declare const selectModeEventInputSchemas: {
     }, z.core.$strip>;
 };
 export declare const websiteBuilderToPreviewIframeMethodConfig: {
+    expandToSection: {
+        inputSchema: z.ZodObject<{
+            targetSelector: z.ZodString;
+        }, z.core.$strip>;
+        outputSchema: z.ZodVoid;
+    };
+    setSectionPreview: {
+        inputSchema: z.ZodObject<{
+            targetSelector: z.ZodNullable<z.ZodString>;
+        }, z.core.$strip>;
+        outputSchema: z.ZodVoid;
+    };
     symbolicateSelectedElement: {
         inputSchema: z.ZodObject<{
             kind: z.ZodLiteral<"react-element">;
             selector: z.ZodString;
+            section: z.ZodOptional<z.ZodObject<{
+                selector: z.ZodString;
+            }, z.core.$strip>>;
             tagName: z.ZodString;
             elementType: z.ZodString;
             textContent: z.ZodNullable<z.ZodString>;
@@ -252,6 +271,9 @@ export declare const websiteBuilderToPreviewIframeMethodConfig: {
         outputSchema: z.ZodObject<{
             kind: z.ZodLiteral<"react-element">;
             selector: z.ZodString;
+            section: z.ZodOptional<z.ZodObject<{
+                selector: z.ZodString;
+            }, z.core.$strip>>;
             tagName: z.ZodString;
             elementType: z.ZodString;
             textContent: z.ZodNullable<z.ZodString>;
@@ -444,6 +466,9 @@ export declare const previewIframeToWebsiteBuilderMethodConfig: {
             element: z.ZodObject<{
                 kind: z.ZodLiteral<"react-element">;
                 selector: z.ZodString;
+                section: z.ZodOptional<z.ZodObject<{
+                    selector: z.ZodString;
+                }, z.core.$strip>>;
                 tagName: z.ZodString;
                 elementType: z.ZodString;
                 textContent: z.ZodNullable<z.ZodString>;
@@ -535,6 +560,9 @@ export declare const previewIframeToWebsiteBuilderMethodConfig: {
             data: z.ZodDiscriminatedUnion<[z.ZodObject<{
                 kind: z.ZodLiteral<"react-element">;
                 selector: z.ZodString;
+                section: z.ZodOptional<z.ZodObject<{
+                    selector: z.ZodString;
+                }, z.core.$strip>>;
                 tagName: z.ZodString;
                 elementType: z.ZodString;
                 textContent: z.ZodNullable<z.ZodString>;
@@ -633,6 +661,7 @@ export declare const previewIframeToWebsiteBuilderMethodConfig: {
                 bottom: z.ZodNumber;
                 width: z.ZodNumber;
                 height: z.ZodNumber;
+                isSection: z.ZodOptional<z.ZodBoolean>;
             }, z.core.$strip>>;
         }, z.core.$strip>;
         outputSchema: z.ZodVoid;
@@ -714,6 +743,9 @@ export declare const previewIframeToWebsiteBuilderMethodConfig: {
             items: z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
                 kind: z.ZodLiteral<"react-element">;
                 selector: z.ZodString;
+                section: z.ZodOptional<z.ZodObject<{
+                    selector: z.ZodString;
+                }, z.core.$strip>>;
                 tagName: z.ZodString;
                 elementType: z.ZodString;
                 textContent: z.ZodNullable<z.ZodString>;
@@ -851,6 +883,16 @@ export declare const previewIframeToWebsiteBuilderMethodConfig: {
     };
 };
 export declare const selectModeParentMessageSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
+    method: z.ZodLiteral<"expandToSection">;
+    data: z.ZodObject<{
+        targetSelector: z.ZodString;
+    }, z.core.$strip>;
+}, z.core.$strip>, z.ZodObject<{
+    method: z.ZodLiteral<"setSectionPreview">;
+    data: z.ZodObject<{
+        targetSelector: z.ZodNullable<z.ZodString>;
+    }, z.core.$strip>;
+}, z.core.$strip>, z.ZodObject<{
     method: z.ZodLiteral<"setDisplayMode">;
     data: z.ZodObject<{
         displayMode: z.ZodEnum<{
@@ -961,6 +1003,9 @@ export declare const selectModeIframeMessageSchema: z.ZodDiscriminatedUnion<[z.Z
         data: z.ZodDiscriminatedUnion<[z.ZodObject<{
             kind: z.ZodLiteral<"react-element">;
             selector: z.ZodString;
+            section: z.ZodOptional<z.ZodObject<{
+                selector: z.ZodString;
+            }, z.core.$strip>>;
             tagName: z.ZodString;
             elementType: z.ZodString;
             textContent: z.ZodNullable<z.ZodString>;
@@ -1058,6 +1103,7 @@ export declare const selectModeIframeMessageSchema: z.ZodDiscriminatedUnion<[z.Z
             bottom: z.ZodNumber;
             width: z.ZodNumber;
             height: z.ZodNumber;
+            isSection: z.ZodOptional<z.ZodBoolean>;
         }, z.core.$strip>>;
     }, z.core.$strip>;
 }, z.core.$strip>, z.ZodObject<{
@@ -1135,6 +1181,9 @@ export declare const selectModeIframeMessageSchema: z.ZodDiscriminatedUnion<[z.Z
         items: z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
             kind: z.ZodLiteral<"react-element">;
             selector: z.ZodString;
+            section: z.ZodOptional<z.ZodObject<{
+                selector: z.ZodString;
+            }, z.core.$strip>>;
             tagName: z.ZodString;
             elementType: z.ZodString;
             textContent: z.ZodNullable<z.ZodString>;

package/_vendor/schemas/selectModeIframeRpc.mjs

@@ -1,4 +1,4 @@
-import { selectModeBoundingRectSchema, selectModeTiptapActiveMarksSchema, selectModeSelectionRectSchema, selectableDataSchema, selectModeFormatCommandSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionTypeSchema, displayModeSchema, selectModeClickPositionSchema, selectedElementSchema } from '../../chunk-XWNBKE63.mjs';
+import { selectModeBoundingRectSchema, selectModeTiptapActiveMarksSchema, selectModeSelectionRectSchema, selectableDataSchema, selectModeHoverRectSchema, selectModeFormatCommandSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionTypeSchema, displayModeSchema, selectModeClickPositionSchema, selectedElementSchema } from '../../chunk-PJBGUXBG.mjs';
 import '../../chunk-JUKCUPQ6.mjs';
 import '../../chunk-FLYEIRFK.mjs';
 import '../../chunk-TESFJQID.mjs';
@@ -20,7 +20,7 @@ var iframeRuntimeBuildMetadataSchema = z.object({
 }).describe("IframeRuntimeBuildMetadata");
 var selectModeEventInputSchemas = {
   hover: z.object({
-    rect: selectModeBoundingRectSchema.nullable()
+    rect: selectModeHoverRectSchema.nullable()
   }),
   areaSelection: z.object({
     rect: selectModeBoundingRectSchema,
@@ -37,6 +37,14 @@ var selectModeEventInputSchemas = {
   })
 };
 var websiteBuilderToPreviewIframeMethodConfig = {
+  expandToSection: {
+    inputSchema: z.object({ targetSelector: z.string() }),
+    outputSchema: z.void()
+  },
+  setSectionPreview: {
+    inputSchema: z.object({ targetSelector: z.string().nullable() }),
+    outputSchema: z.void()
+  },
   symbolicateSelectedElement: {
     inputSchema: selectedElementSchema,
     outputSchema: selectedElementSchema,
@@ -168,6 +176,14 @@ var previewIframeToWebsiteBuilderMethodConfig = {
   }
 };
 var selectModeParentMessageSchema = z.discriminatedUnion("method", [
+  z.object({
+    method: z.literal("expandToSection"),
+    data: websiteBuilderToPreviewIframeMethodConfig.expandToSection.inputSchema
+  }),
+  z.object({
+    method: z.literal("setSectionPreview"),
+    data: websiteBuilderToPreviewIframeMethodConfig.setSectionPreview.inputSchema
+  }),
   z.object({
     method: z.literal("setDisplayMode"),
     data: websiteBuilderToPreviewIframeMethodConfig.setDisplayMode.inputSchema

package/_vendor/schemas/selectModeImage.mjs

@@ -1,8 +1,12 @@
 function getImageEditSnapshot(image, baseURI) {
-  if (!image) return null;
+  if (!image) {
+    return null;
+  }
   const baseUrl = baseURI ?? (URL.canParse(image.currentSrc) ? image.currentSrc : "https://replo.invalid");
   const normalizeUrl = (url) => {
-    if (!url) return url;
+    if (!url) {
+      return url;
+    }
     try {
       const parsed = new URL(url, baseUrl);
       const original = parsed.pathname.endsWith("/_next/image") ? parsed.searchParams.get("url") : null;

package/buildMetadata.js

@@ -1,7 +1,7 @@
 export const BUILD_METADATA = {
   "packageName": "@replohq/sandbox-runtime",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "branch": "HEAD",
-  "commit": "455eef2903f4cc6a8f457d5ec77be1e1dc95aad9",
-  "builtAt": "2026-09-25T00:24:57.880Z"
+  "commit": "604d707e41cac581b43e134371e5e9a0f78fa2b7",
+  "builtAt": "2026-09-25T19:36:00.140Z"
 };

package/{chunk-XWNBKE63.mjs → chunk-PJBGUXBG.mjs}

@@ -48,6 +48,7 @@ var selectModeBoundingRectSchema = z.object({
   width: z.number(),
   height: z.number()
 }).describe("SelectModeBoundingRect");
+var selectModeHoverRectSchema = selectModeBoundingRectSchema.extend({ isSection: z.boolean().optional() }).describe("SelectModeHoverRect");
 var selectModeSelectionRectSchema = z.object({
   id: z.string(),
   rect: selectModeBoundingRectSchema
@@ -122,6 +123,7 @@ var selectModeImageSchema = z.object({
 var selectedElementSchema = z.object({
   kind: z.literal("react-element"),
   selector: z.string(),
+  section: z.object({ selector: z.string() }).optional(),
   tagName: z.string(),
   elementType: z.string(),
   textContent: z.string().nullable(),
@@ -145,6 +147,9 @@ var selectablePlanDataSchema = z.object({
 var selectablePlanPayloadSchema = selectablePlanDataSchema.omit({ rect: true }).describe("SelectablePlanPayload");
 var selectableDataPayloadSchema = z.discriminatedUnion("kind", [selectablePlanPayloadSchema]).describe("SelectableDataPayload");
 var selectableDataSchema = z.discriminatedUnion("kind", [selectedElementSchema, selectablePlanDataSchema]).describe("SelectableData");
+function isSelectedSection(data) {
+  return data.kind === "react-element" && data.selector === data.section?.selector;
+}
 function transformSelectedElement({
   element,
   offset,
@@ -232,4 +237,4 @@ var selectModeSelectionSchema = z.discriminatedUnion("type", [
   })
 ]).describe("SelectModeSelection");
 
-export { SELECT_MODE_SELECTABLE_ATTRIBUTE, SELECT_MODE_SELECTABLE_PAYLOAD_ATTRIBUTE, displayModeSchema, getIframeOffset, readSelectablePayload, selectModeBoundingRectSchema, selectModeClickPositionSchema, selectModeDefinedStyleSchema, selectModeFiberChainEntrySchema, selectModeFormatCommandSchema, selectModeImageSchema, selectModeImageScopeSchema, selectModeImageSourceSchema, selectModeInlineTextStatusSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionRectSchema, selectModeSelectionSchema, selectModeSelectionTypeSchema, selectModeSourceLocationSchema, selectModeStyleAtRuleSchema, selectModeStyleVariantSchema, selectModeTextMetricsSchema, selectModeTiptapActiveMarksSchema, selectableDataPayloadSchema, selectableDataSchema, selectablePlanDataSchema, selectablePlanPayloadSchema, selectedElementSchema, transformPoint, transformRect, transformSelectableData, transformSelectedElement };
+export { SELECT_MODE_SELECTABLE_ATTRIBUTE, SELECT_MODE_SELECTABLE_PAYLOAD_ATTRIBUTE, displayModeSchema, getIframeOffset, isSelectedSection, readSelectablePayload, selectModeBoundingRectSchema, selectModeClickPositionSchema, selectModeDefinedStyleSchema, selectModeFiberChainEntrySchema, selectModeFormatCommandSchema, selectModeHoverRectSchema, selectModeImageSchema, selectModeImageScopeSchema, selectModeImageSourceSchema, selectModeInlineTextStatusSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionRectSchema, selectModeSelectionSchema, selectModeSelectionTypeSchema, selectModeSourceLocationSchema, selectModeStyleAtRuleSchema, selectModeStyleVariantSchema, selectModeTextMetricsSchema, selectModeTiptapActiveMarksSchema, selectableDataPayloadSchema, selectableDataSchema, selectablePlanDataSchema, selectablePlanPayloadSchema, selectedElementSchema, transformPoint, transformRect, transformSelectableData, transformSelectedElement };

package/design-library-preview/DesignLibraryPreview.js

@@ -14,9 +14,13 @@ function DesignLibraryPreview() {
   const ownsDefaultFont = useRef(false);
   useEffect(() => {
     const handleMessage = (event) => {
-      if (!isAllowedEditorMessage(event)) return;
+      if (!isAllowedEditorMessage(event)) {
+        return;
+      }
       const parsed = designLibraryPreviewMessageSchema.safeParse(event.data);
-      if (!parsed.success) return;
+      if (!parsed.success) {
+        return;
+      }
       const { cssVars, fonts, defaultFontCssVar } = parsed.data;
       const root = document.documentElement;
       const nextVars = { ...cssVars };
@@ -25,7 +29,9 @@ function DesignLibraryPreview() {
       }
       const owned = ownedKeys.current ?? /* @__PURE__ */ new Set();
       for (const key of owned) {
-        if (!(key in nextVars)) root.style.removeProperty(key);
+        if (!(key in nextVars)) {
+          root.style.removeProperty(key);
+        }
       }
       ownedKeys.current = new Set(Object.keys(nextVars));
       for (const [key, value] of Object.entries(nextVars)) {
@@ -44,7 +50,9 @@ function DesignLibraryPreview() {
         }
       }
       for (const href of nextHrefs) {
-        if (links.has(href)) continue;
+        if (links.has(href)) {
+          continue;
+        }
         const link = document.createElement("link");
         link.rel = "stylesheet";
         link.href = href;
@@ -62,9 +70,13 @@ function DesignLibraryPreview() {
         }
       }
       for (const font of customFonts) {
-        if (!font.faceUrl) continue;
+        if (!font.faceUrl) {
+          continue;
+        }
         const existing = faces.get(font.family);
-        if (existing?.url === font.faceUrl) continue;
+        if (existing?.url === font.faceUrl) {
+          continue;
+        }
         existing?.style.remove();
         const style = document.createElement("style");
         style.dataset[FONT_LINK_DATA_KEY] = "";

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.9.0",
+    "version": "1.10.0",
     "branch": "HEAD",
-    "commit": "455eef2903f4cc6a8f457d5ec77be1e1dc95aad9",
-    "builtAt": "2026-09-25T00:24:57.880Z"
+    "commit": "604d707e41cac581b43e134371e5e9a0f78fa2b7",
+    "builtAt": "2026-09-25T19:36:00.140Z"
   },
   "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",

package/select-mode/EditorSelection.js

@@ -18,6 +18,8 @@ function EditorSelection() {
   const store = useSelectModeStore();
   const displayMode = useDisplayMode();
   const {
+    expandToSection,
+    setSectionPreview,
     formatCommand,
     postSelectedElementSnapshot,
     revertInlineEdit,
@@ -38,7 +40,9 @@ function EditorSelection() {
     const scheduleSnapshot = () => {
       clearTimeout(refreshTimeout);
       refreshTimeout = setTimeout(() => {
-        if (store.getState().editingElement) return;
+        if (store.getState().editingElement) {
+          return;
+        }
         if (postSelectedElementSnapshot()) {
           clearTimeout(missingTimeout);
           missingTimeout = void 0;
@@ -54,15 +58,26 @@ function EditorSelection() {
       }, 250);
     };
     const observer = new MutationObserver((records) => {
-      const session = store.getState().interactionSession;
-      if (store.getState().editingElement || session.type !== "element") return;
+      const {
+        actions,
+        editingElement,
+        interactionSession: session,
+        sectionPreviewElement
+      } = store.getState();
+      if (sectionPreviewElement && !sectionPreviewElement.isConnected) {
+        actions.setSectionPreview({ targetSelector: null });
+      }
+      if (editingElement || session.type !== "element") {
+        return;
+      }
       if (!session.element.isConnected || records.some((record) => session.element.contains(record.target))) {
         scheduleSnapshot();
       }
     });
     const watchRender = () => {
-      if (store.getState().editingElement || store.getState().interactionSession.type !== "element")
+      if (store.getState().editingElement || store.getState().interactionSession.type !== "element") {
         return;
+      }
       clearTimeout(observationTimeout);
       observer.observe(document.body, {
         subtree: true,
@@ -118,6 +133,8 @@ function EditorSelection() {
   useParentMessaging({
     applyOptimisticUpdate,
     markCommitted,
+    onExpandToSection: expandToSection,
+    onSetSectionPreview: setSectionPreview,
     onExitEditMode: revertInlineEdit,
     onFormatCommand: formatCommand,
     resolveSessionOverrides,

package/select-mode/SelectionFrames.js

@@ -1,13 +1,17 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
+import { getDocumentScrollOffset } from "./interactions/selectionGeometry";
 import {
+  SECTION_SELECTION_FRAME_BACKGROUND,
+  SECTION_SELECTION_FRAME_BORDER_HEX,
   SELECTION_FRAME_BORDER_HEX,
   SELECTION_FRAME_EDITING_BORDER_HEX,
   SELECTION_FRAMES_CONTAINER_ID
 } from "./selectionFrame";
 import {
   useIsSelectionFrameEditing,
+  useSectionHoverRect,
   useSelectionFrames
 } from "./selectModeStore";
 const CONTAINER_STYLE = {
@@ -24,32 +28,61 @@ const CONTAINER_STYLE = {
 function SelectionFrames() {
   const frames = useSelectionFrames();
   const isEditing = useIsSelectionFrameEditing();
-  if (typeof document === "undefined" || !document.body || frames.length === 0) {
+  const sectionHoverRect = useSectionHoverRect();
+  if (typeof document === "undefined" || !document.body || frames.length === 0 && !sectionHoverRect) {
     return null;
   }
-  const borderColor = isEditing ? SELECTION_FRAME_EDITING_BORDER_HEX : SELECTION_FRAME_BORDER_HEX;
+  const elementBorderColor = isEditing ? SELECTION_FRAME_EDITING_BORDER_HEX : SELECTION_FRAME_BORDER_HEX;
+  const scrollOffset = getDocumentScrollOffset();
+  const sectionLabelPosition = sectionHoverRect ? {
+    x: sectionHoverRect.x + scrollOffset.left,
+    y: sectionHoverRect.y + scrollOffset.top
+  } : frames.find((frame) => frame.variant === "section")?.pageRect;
   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"
+    /* @__PURE__ */ jsxs("div", { id: SELECTION_FRAMES_CONTAINER_ID, "aria-hidden": true, style: CONTAINER_STYLE, children: [
+      frames.map((frame, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          "data-variant": frame.variant,
+          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 ${frame.variant === "section" ? SECTION_SELECTION_FRAME_BORDER_HEX : elementBorderColor}`,
+            background: {
+              area: "rgba(192, 38, 211, 0.08)",
+              element: "transparent",
+              section: SECTION_SELECTION_FRAME_BACKGROUND
+            }[frame.variant]
+          }
+        },
+        `${frame.variant}-${index}`
+      )),
+      sectionLabelPosition && /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            position: "absolute",
+            top: sectionLabelPosition.y + 6,
+            left: sectionLabelPosition.x + 6,
+            padding: "3px 6px",
+            borderRadius: 4,
+            background: "#2563eb",
+            color: "white",
+            font: "500 12px/16px system-ui"
+          },
+          children: "Section"
         }
-      },
-      `${frame.variant}-${index}`
-    )) }),
+      )
+    ] }),
     document.body
   );
 }

package/select-mode/descriptor/elementDescriptor.d.ts

@@ -17,8 +17,9 @@ export declare function buildSelector(element: Element): string;
  * about a selection: identification, geometry, source location, and a
  * style-inlined HTML snippet.
  */
-export declare function buildElementDescriptor({ element, clickPosition, siblingSelectors, }: {
+export declare function buildElementDescriptor({ element, clickPosition, siblingSelectors, section, }: {
     element: Element;
     clickPosition: SelectModeClickPosition;
     siblingSelectors?: string[];
+    section?: Element | null;
 }): SelectableData;