@replohq/sandbox-runtime 1.10.2 → 1.11.0

package/select-mode/descriptor/styleExtraction.js

@@ -10,7 +10,24 @@ const CONTROL_STYLE_PROPERTIES = [
   "font-weight",
   "line-height",
   "letter-spacing",
-  "text-align"
+  "text-align",
+  "padding-top",
+  "padding-right",
+  "padding-bottom",
+  "padding-left",
+  "margin-top",
+  "margin-right",
+  "margin-bottom",
+  "margin-left",
+  "border-top-left-radius",
+  "border-top-right-radius",
+  "border-bottom-right-radius",
+  "border-bottom-left-radius",
+  "opacity",
+  "border-width",
+  "border-style",
+  "border-color",
+  "box-shadow"
 ];
 const CONTROL_STYLE_PROPERTY_SET = new Set(CONTROL_STYLE_PROPERTIES);
 function isControlStyleProperty(propertyName) {
@@ -88,6 +105,57 @@ function getDefinedStyleKey({
 }) {
   return `${property}:${getStyleVariantKey(variant)}`;
 }
+function getVariantApplicability(variant) {
+  if (!variant) {
+    return "applies";
+  }
+  if (variant.pseudo) {
+    return "skipped";
+  }
+  let applicability = "applies";
+  for (const atRule of variant.atRules) {
+    if (atRule.type === "@media") {
+      if (!window.matchMedia(atRule.text).matches) {
+        return "skipped";
+      }
+    } else if (atRule.type === "@supports") {
+      if (!CSS.supports(atRule.text)) {
+        return "skipped";
+      }
+    } else {
+      applicability = "unknown";
+    }
+  }
+  return applicability;
+}
+function setAuthoredDeclaration({
+  collector,
+  property,
+  declaration
+}) {
+  const current = collector.authoredByProperty.get(property);
+  if (current?.isImportant && !declaration.isImportant) {
+    return;
+  }
+  collector.authoredByProperty.set(property, declaration);
+}
+const CUSTOM_PROPERTY_PATTERN = /^var\(\s*(--[\w-]+)\s*(?:,\s*(.+))?\)$/u;
+const MAX_CUSTOM_PROPERTY_DEPTH = 5;
+function expandCustomProperties({
+  element,
+  value
+}) {
+  const computedStyle = window.getComputedStyle(element);
+  let expanded = value;
+  for (let depth = 0; depth < MAX_CUSTOM_PROPERTY_DEPTH; depth += 1) {
+    const match = expanded.match(CUSTOM_PROPERTY_PATTERN);
+    if (!match?.[1]) {
+      return expanded;
+    }
+    expanded = computedStyle.getPropertyValue(match[1]).trim() || match[2]?.trim() || "";
+  }
+  return expanded;
+}
 function getResolvedClassStyleValue({
   className,
   property,
@@ -105,7 +173,7 @@ function getResolvedClassStyleValue({
   return resolved.trim() || raw;
 }
 function setDefinedStyle({
-  definedStylesByKey,
+  collector: { definedStylesByKey },
   property,
   variant,
   className,
@@ -124,7 +192,7 @@ function addRuleDefinedStyles({
   rule,
   activeAtRules,
   classNames,
-  definedStylesByKey
+  collector
 }) {
   const selectorMatches = getClassSelectorMatches({
     selectorText: rule.selectorText ?? "",
@@ -138,6 +206,7 @@ function addRuleDefinedStyles({
       atRules: activeAtRules,
       pseudo: selectorMatch.pseudo
     });
+    const applicability = getVariantApplicability(variant);
     for (let styleIndex = 0; styleIndex < rule.style.length; styleIndex += 1) {
       const property = rule.style.item(styleIndex);
       if (!property || !isControlStyleProperty(property)) {
@@ -148,7 +217,7 @@ function addRuleDefinedStyles({
         continue;
       }
       setDefinedStyle({
-        definedStylesByKey,
+        collector,
         property,
         variant,
         className: selectorMatch.className,
@@ -160,6 +229,16 @@ function addRuleDefinedStyles({
           variant
         })
       });
+      if (applicability !== "skipped") {
+        setAuthoredDeclaration({
+          collector,
+          property,
+          declaration: {
+            value: applicability === "applies" ? raw : null,
+            isImportant: rule.style.getPropertyPriority(property) === "important"
+          }
+        });
+      }
     }
   }
 }
@@ -167,7 +246,7 @@ function addStyleRulesRecursively({
   ruleList,
   activeAtRules,
   classNames,
-  definedStylesByKey
+  collector
 }) {
   for (const rule of Array.from(ruleList)) {
     const nestedRuleList = getNestedRuleList(rule);
@@ -176,7 +255,7 @@ function addStyleRulesRecursively({
         ruleList: nestedRuleList,
         activeAtRules: getNestedAtRules({ rule, activeAtRules }),
         classNames,
-        definedStylesByKey
+        collector
       });
     }
     if (rule instanceof CSSStyleRule) {
@@ -184,14 +263,14 @@ function addStyleRulesRecursively({
         rule,
         activeAtRules,
         classNames,
-        definedStylesByKey
+        collector
       });
     }
   }
 }
 function addClassDefinedStyles({
   element,
-  definedStylesByKey
+  collector
 }) {
   const classNames = Array.from(
     new Set([...element.classList].filter(Boolean))
@@ -218,7 +297,7 @@ function addClassDefinedStyles({
         ruleList: sheet.cssRules,
         activeAtRules: [],
         classNames,
-        definedStylesByKey
+        collector
       });
     } catch (error) {
       if (error instanceof DOMException && error.name === "SecurityError") {
@@ -230,7 +309,7 @@ function addClassDefinedStyles({
 }
 function addInlineDefinedStyles({
   element,
-  definedStylesByKey
+  collector
 }) {
   if (!(element instanceof HTMLElement)) {
     return;
@@ -245,13 +324,21 @@ function addInlineDefinedStyles({
       continue;
     }
     setDefinedStyle({
-      definedStylesByKey,
+      collector,
       property,
       variant: null,
       className: null,
       raw,
       resolved: raw
     });
+    setAuthoredDeclaration({
+      collector,
+      property,
+      declaration: {
+        value: raw,
+        isImportant: element.style.getPropertyPriority(property) === "important"
+      }
+    });
   }
 }
 function getOverrideStyleDeclarations(styleElement) {
@@ -279,7 +366,7 @@ function getOverrideStyleDeclarations(styleElement) {
 }
 function addOptimisticDefinedStyles({
   element,
-  definedStylesByKey
+  collector
 }) {
   const tokens = (element.getAttribute(SELECT_MODE_OVERRIDE_ATTRIBUTE) ?? "").split(/\s+/).filter(Boolean);
   if (tokens.length === 0) {
@@ -300,13 +387,23 @@ function addOptimisticDefinedStyles({
         continue;
       }
       if (raw.toLowerCase() === "revert") {
-        definedStylesByKey.delete(
+        collector.definedStylesByKey.delete(
           getDefinedStyleKey({ property, variant: null })
         );
+        setAuthoredDeclaration({
+          collector,
+          property,
+          declaration: { value: null, isImportant: true }
+        });
         continue;
       }
+      setAuthoredDeclaration({
+        collector,
+        property,
+        declaration: { value: raw, isImportant: true }
+      });
       setDefinedStyle({
-        definedStylesByKey,
+        collector,
         property,
         variant: null,
         className: null,
@@ -316,12 +413,38 @@ function addOptimisticDefinedStyles({
     }
   }
 }
+function collectStyles(element) {
+  const collector = {
+    definedStylesByKey: /* @__PURE__ */ new Map(),
+    authoredByProperty: /* @__PURE__ */ new Map()
+  };
+  addClassDefinedStyles({ element, collector });
+  addInlineDefinedStyles({ element, collector });
+  addOptimisticDefinedStyles({ element, collector });
+  return collector;
+}
+function getAuthoredStyles({
+  element,
+  collector
+}) {
+  const authoredStyles = {};
+  for (const [property, declaration] of collector.authoredByProperty) {
+    const value = declaration.value && expandCustomProperties({ element, value: declaration.value });
+    if (value) {
+      authoredStyles[property] = value;
+    }
+  }
+  return authoredStyles;
+}
+function getElementStyles(element) {
+  const collector = collectStyles(element);
+  return {
+    definedStyles: Array.from(collector.definedStylesByKey.values()),
+    authoredStyles: getAuthoredStyles({ element, collector })
+  };
+}
 function getDefinedStyles(element) {
-  const definedStylesByKey = /* @__PURE__ */ new Map();
-  addClassDefinedStyles({ element, definedStylesByKey });
-  addInlineDefinedStyles({ element, definedStylesByKey });
-  addOptimisticDefinedStyles({ element, definedStylesByKey });
-  return Array.from(definedStylesByKey.values());
+  return getElementStyles(element).definedStyles;
 }
 function getInheritedStyles(element) {
   const computedStyle = window.getComputedStyle(element);
@@ -333,5 +456,6 @@ function getInheritedStyles(element) {
 }
 export {
   getDefinedStyles,
+  getElementStyles,
   getInheritedStyles
 };

package/select-mode/hooks/useOptimisticOverrides.js

@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 import { buildGoogleFontsCssUrl, quoteFontFamily } from "../../_vendor/replo-utils/lib/fonts.mjs";
+import { z } from "zod";
 import { buildSelector } from "../descriptor/elementDescriptor";
 import { createImagePreview } from "../imageOverridePreview";
 import {
@@ -115,6 +116,12 @@ function restoreOriginalState({
       } else {
         element.setAttribute(name, value);
       }
+      if (name === "src" && value === null) {
+        const video = z.instanceof(HTMLVideoElement).safeParse(element);
+        if (video.success) {
+          video.data.load();
+        }
+      }
     }
     return;
   }

package/select-mode/hooks/useSelectionInteractions.js

@@ -88,16 +88,14 @@ function useSelectionInteractions() {
       cancelAnimationFrame(dragAnimationFrameId);
       actions().setDragAnimationFrameId(null);
     };
-    const resetDragState = ({
-      notifyParentDragCleared = true
-    } = {}) => {
+    const resetDragState = () => {
       const currentSession = interactionSessionRef.current;
       stopDragAnimation();
       if (currentSession.type !== "drag") {
         actions().setDragCandidates([]);
         return;
       }
-      if (notifyParentDragCleared && currentSession.hasExceededThreshold) {
+      if (currentSession.hasExceededThreshold) {
         getWebsiteBuilderRpc()?.dragRectUpdated({
           dragRect: null,
           selectionRects: []
@@ -214,6 +212,10 @@ function useSelectionInteractions() {
       if (session.type !== "drag") {
         return;
       }
+      if ((event.buttons & 1) === 0) {
+        resetDragState();
+        return;
+      }
       interactionSessionRef.current = {
         ...session,
         dragCurrent: getDragPositionFromClient({
@@ -375,7 +377,7 @@ function useSelectionInteractions() {
       const dragCurrent = snapshot.type === "drag" ? snapshot.dragCurrent : null;
       const scrollOffset = snapshot.type === "drag" ? snapshot.scrollOffset : getDocumentScrollOffset();
       const candidates = store().dragCandidates;
-      resetDragState({ notifyParentDragCleared: false });
+      resetDragState();
       if (snapshot.type !== "drag" || !dragStart) {
         return;
       }

package/select-mode/iframeRpcChannel.d.ts

@@ -50,6 +50,10 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
                         previewUrl: import("zod").ZodNullable<import("zod").ZodString>;
                     }, import("zod/v4/core").$strip>>;
                 }, import("zod/v4/core").$strip>>;
+                video: import("zod").ZodOptional<import("zod").ZodObject<{
+                    src: import("zod").ZodString;
+                    currentSrc: import("zod").ZodString;
+                }, import("zod/v4/core").$strip>>;
                 definedStyles: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodObject<{
                     property: import("zod").ZodString;
                     variant: import("zod").ZodNullable<import("zod").ZodObject<{
@@ -63,6 +67,7 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
                     raw: import("zod").ZodString;
                     resolved: import("zod").ZodString;
                 }, import("zod/v4/core").$strip>>>;
+                authoredStyles: import("zod").ZodDefault<import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodString>>;
                 inheritedStyles: import("zod").ZodDefault<import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodString>>;
                 clickPosition: import("zod").ZodObject<{
                     x: import("zod").ZodNumber;
@@ -145,6 +150,10 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
                         previewUrl: import("zod").ZodNullable<import("zod").ZodString>;
                     }, import("zod/v4/core").$strip>>;
                 }, import("zod/v4/core").$strip>>;
+                video: import("zod").ZodOptional<import("zod").ZodObject<{
+                    src: import("zod").ZodString;
+                    currentSrc: import("zod").ZodString;
+                }, import("zod/v4/core").$strip>>;
                 definedStyles: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodObject<{
                     property: import("zod").ZodString;
                     variant: import("zod").ZodNullable<import("zod").ZodObject<{
@@ -158,6 +167,7 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
                     raw: import("zod").ZodString;
                     resolved: import("zod").ZodString;
                 }, import("zod/v4/core").$strip>>>;
+                authoredStyles: import("zod").ZodDefault<import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodString>>;
                 inheritedStyles: import("zod").ZodDefault<import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodString>>;
                 clickPosition: import("zod").ZodObject<{
                     x: import("zod").ZodNumber;
@@ -329,6 +339,10 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
                         previewUrl: import("zod").ZodNullable<import("zod").ZodString>;
                     }, import("zod/v4/core").$strip>>;
                 }, import("zod/v4/core").$strip>>;
+                video: import("zod").ZodOptional<import("zod").ZodObject<{
+                    src: import("zod").ZodString;
+                    currentSrc: import("zod").ZodString;
+                }, import("zod/v4/core").$strip>>;
                 definedStyles: import("zod").ZodDefault<import("zod").ZodArray<import("zod").ZodObject<{
                     property: import("zod").ZodString;
                     variant: import("zod").ZodNullable<import("zod").ZodObject<{
@@ -342,6 +356,7 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
                     raw: import("zod").ZodString;
                     resolved: import("zod").ZodString;
                 }, import("zod/v4/core").$strip>>>;
+                authoredStyles: import("zod").ZodDefault<import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodString>>;
                 inheritedStyles: import("zod").ZodDefault<import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodString>>;
                 clickPosition: import("zod").ZodObject<{
                     x: import("zod").ZodNumber;
@@ -396,8 +411,8 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
         inputSchema: import("zod").ZodObject<{
             feedback: import("zod").ZodNullable<import("zod").ZodObject<{
                 status: import("zod").ZodEnum<{
-                    unavailable: "unavailable";
                     pending: "pending";
+                    unavailable: "unavailable";
                     failed: "failed";
                 }>;
                 rect: import("zod").ZodObject<{

package/select-mode/selectModeStore.js

@@ -630,7 +630,11 @@ const selectModeStore = createShallowStore(
               element: symbolicated
             });
             resolveEditRequest({ editId, allowed });
-          }).catch(() => {
+          }).catch((error) => {
+            console.error(
+              "[selectMode] inline text edit prepare failed",
+              error
+            );
             if (get().editId === editId) {
               revertInlineEdit();
             } else {