@replohq/sandbox-runtime 0.1.0

package/ClientErrorBoundary.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+/**
+ * NOTE (Max, 2026-06-10): Client-side error boundary. On a caught render error it
+ * (1) reports the error to the parent editor via postMessage (so it can get reported to Sentry)
+ * and (2) renders a neutral cover instead of going blank, so the preview never flashes the broken
+ * page while the agent fixes it. The editor decides what to show on top (loading
+ * vs. an actionable error screen); the embedder reloads the iframe once the error
+ * clears.
+ */
+export declare function ClientErrorBoundary({ children }: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/ClientErrorBoundary.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+class ErrorBoundary extends React.Component {
+  state = {
+    didCatch: false
+  };
+  static getDerivedStateFromError() {
+    return { didCatch: true };
+  }
+  componentDidCatch(error, info) {
+    this.props.onError?.(error, info);
+  }
+  render() {
+    if (this.state.didCatch) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            inset: 0,
+            zIndex: 2147483646,
+            background: "#ffffff"
+          }
+        }
+      );
+    }
+    return this.props.children;
+  }
+}
+function ClientErrorBoundary({ children }) {
+  const handleError = React.useCallback(
+    (error, errorInfo) => {
+      const errorObj = error instanceof Error ? error : new Error(String(error));
+      window.parent.postMessage(
+        {
+          // TODO (Max, 2026-06-11, REPL-27851): When adding Sentry to miniapps, I'll ensure we listen to this message
+          // and send it to Sentry. I'm not a fan of having 2 separate post messages for reporting errors (the 'error' post message in NextErrorReporter, and this one).
+          // But there's no way for the NextErrorReporter to get the actual error object, so we'll
+          // need a separate postMessage (this one, with an updated name).
+          type: "replo-editor:client-error",
+          payload: {
+            pageRoute: window.location.pathname,
+            error: {
+              message: errorObj.message,
+              stack: errorObj.stack,
+              componentStack: errorInfo.componentStack
+            }
+          }
+        },
+        "*"
+      );
+    },
+    []
+  );
+  return /* @__PURE__ */ jsx(ErrorBoundary, { onError: handleError, children });
+}
+export {
+  ClientErrorBoundary
+};
+//# sourceMappingURL=ClientErrorBoundary.js.map

package/ClientErrorBoundary.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../ClientErrorBoundary.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport * as React from \"react\";\n\ninterface ErrorBoundaryState {\n  didCatch: boolean;\n}\n\ntype ErrorBoundaryProps = React.PropsWithChildren<{\n  onError?: (error: unknown, info: React.ErrorInfo) => void;\n}>;\n\nclass ErrorBoundary extends React.Component<\n  ErrorBoundaryProps,\n  ErrorBoundaryState\n> {\n  state: ErrorBoundaryState = {\n    didCatch: false,\n  };\n\n  static getDerivedStateFromError(): ErrorBoundaryState {\n    return { didCatch: true };\n  }\n\n  componentDidCatch(error: unknown, info: React.ErrorInfo) {\n    this.props.onError?.(error, info);\n  }\n\n  render() {\n    if (this.state.didCatch) {\n      /**\n       * NOTE (Max, 2026-06-10): When there's any error that hits this Error boundary,\n       * we render this neutral cover.\n       * getDerivedStateFromError() runs in the render phase, before commit, so this cover\n       * is what hits the DOM immediately when the error is caught.\n       * The editor lays its own loading / error UI on top (driven by NextErrorReporter's\n       * status postMessage).\n       * This div has a plain light neutral color, close enough to the editor's\n       * loading animation. If we returned null, it'd show a cover with the site's default color (e.g. black),\n       * which makes the transition less smooth between the sandbox runtime showing this cover, and the iframe embedder\n       * receiving the post message telling it to show some loading animation.\n       *\n       * I'm really unsatisfied with this approach: there's no apparent flicker only because the editor's loading animation\n       * when receiving the post message has the same color as this neutral cover... Alternative would be for\n       * this error boundary to show the loading animation itself (instead of the embedder) but that's even more weird...\n       */\n      return (\n        <div\n          style={{\n            position: \"fixed\",\n            inset: 0,\n            zIndex: 2147483646,\n            background: \"#ffffff\",\n          }}\n        />\n      );\n    }\n    return this.props.children;\n  }\n}\n\n/**\n * NOTE (Max, 2026-06-10): Client-side error boundary. On a caught render error it\n * (1) reports the error to the parent editor via postMessage (so it can get reported to Sentry)\n * and (2) renders a neutral cover instead of going blank, so the preview never flashes the broken\n * page while the agent fixes it. The editor decides what to show on top (loading\n * vs. an actionable error screen); the embedder reloads the iframe once the error\n * clears.\n */\nexport function ClientErrorBoundary({ children }: React.PropsWithChildren) {\n  const handleError = React.useCallback(\n    (error: unknown, errorInfo: React.ErrorInfo) => {\n      const errorObj =\n        error instanceof Error ? error : new Error(String(error));\n      window.parent.postMessage(\n        {\n          // TODO (Max, 2026-06-11, REPL-27851): When adding Sentry to miniapps, I'll ensure we listen to this message\n          // and send it to Sentry. I'm not a fan of having 2 separate post messages for reporting errors (the 'error' post message in NextErrorReporter, and this one).\n          // But there's no way for the NextErrorReporter to get the actual error object, so we'll\n          // need a separate postMessage (this one, with an updated name).\n          type: \"replo-editor:client-error\",\n          payload: {\n            pageRoute: window.location.pathname,\n            error: {\n              message: errorObj.message,\n              stack: errorObj.stack,\n              componentStack: errorInfo.componentStack,\n            },\n          },\n        },\n        \"*\",\n      );\n    },\n    [],\n  );\n\n  return <ErrorBoundary onError={handleError}>{children}</ErrorBoundary>;\n}\n"],
+  "mappings": ";AA+CQ;AA7CR,YAAY,WAAW;AAUvB,MAAM,sBAAsB,MAAM,UAGhC;AAAA,EACA,QAA4B;AAAA,IAC1B,UAAU;AAAA,EACZ;AAAA,EAEA,OAAO,2BAA+C;AACpD,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAAA,EAEA,kBAAkB,OAAgB,MAAuB;AACvD,SAAK,MAAM,UAAU,OAAO,IAAI;AAAA,EAClC;AAAA,EAEA,SAAS;AACP,QAAI,KAAK,MAAM,UAAU;AAiBvB,aACE;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,UAAU;AAAA,YACV,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,YAAY;AAAA,UACd;AAAA;AAAA,MACF;AAAA,IAEJ;AACA,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;AAUO,SAAS,oBAAoB,EAAE,SAAS,GAA4B;AACzE,QAAM,cAAc,MAAM;AAAA,IACxB,CAAC,OAAgB,cAA+B;AAC9C,YAAM,WACJ,iBAAiB,QAAQ,QAAQ,IAAI,MAAM,OAAO,KAAK,CAAC;AAC1D,aAAO,OAAO;AAAA,QACZ;AAAA;AAAA;AAAA;AAAA;AAAA,UAKE,MAAM;AAAA,UACN,SAAS;AAAA,YACP,WAAW,OAAO,SAAS;AAAA,YAC3B,OAAO;AAAA,cACL,SAAS,SAAS;AAAA,cAClB,OAAO,SAAS;AAAA,cAChB,gBAAgB,UAAU;AAAA,YAC5B;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO,oBAAC,iBAAc,SAAS,aAAc,UAAS;AACxD;",
+  "names": []
+}

package/DocumentReadyBeacon.d.ts

@@ -0,0 +1 @@
+export declare function DocumentReadyBeacon(): import("react/jsx-runtime").JSX.Element;

package/DocumentReadyBeacon.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+const BEACON_SCRIPT = `if (window.parent !== window) { window.parent.postMessage({ type: "replo:preview:status", status: "ok", phase: "document", route: window.location.pathname }, "*"); }`;
+function DocumentReadyBeacon() {
+  return /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: BEACON_SCRIPT } });
+}
+export {
+  DocumentReadyBeacon
+};
+//# sourceMappingURL=DocumentReadyBeacon.js.map

package/DocumentReadyBeacon.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../DocumentReadyBeacon.tsx"],
+  "sourcesContent": ["// Posts at HTML parse time, pre-hydration; error shells and retry pages are different documents without this script, so receiving it proves the real site's document arrived.\n// phase: \"document\" lets the editor distinguish this from the hydration-time reporter \u2014 document arrival must not disarm its JS-boot watchdog.\nconst BEACON_SCRIPT = `if (window.parent !== window) { window.parent.postMessage({ type: \"replo:preview:status\", status: \"ok\", phase: \"document\", route: window.location.pathname }, \"*\"); }`;\n\nexport function DocumentReadyBeacon() {\n  return <script dangerouslySetInnerHTML={{ __html: BEACON_SCRIPT }} />;\n}\n"],
+  "mappings": "AAKS;AAHT,MAAM,gBAAgB;AAEf,SAAS,sBAAsB;AACpC,SAAO,oBAAC,YAAO,yBAAyB,EAAE,QAAQ,cAAc,GAAG;AACrE;",
+  "names": []
+}

package/LICENSE

@@ -0,0 +1,11 @@
+Replo Sandbox Runtime — proprietary software of Replo. All rights reserved.
+
+This software is licensed, not sold. Subject to the Replo Terms of Service
+(https://replo.app/terms), Replo grants you a limited, non-exclusive,
+non-transferable, revocable license to install and use this software solely to
+build, preview, and operate sites on the Replo platform. You may not
+redistribute, resell, sublicense, or use this software to build or operate any
+product or service independent of or competing with Replo.
+
+Full terms: https://replo.app/terms
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND.

package/LinkInterceptor.d.ts

@@ -0,0 +1 @@
+export default function LinkInterceptor(): null;

package/LinkInterceptor.js

@@ -0,0 +1,128 @@
+"use client";
+import { useEffect } from "react";
+import { displayModeStore } from "./select-mode/displayModeStore";
+function blockNavigation(event) {
+  event.preventDefault();
+  event.stopPropagation();
+  event.stopImmediatePropagation();
+}
+function isNavigationLike(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  return typeof Reflect.get(value, "addEventListener") === "function" && typeof Reflect.get(value, "removeEventListener") === "function";
+}
+function getWindowNavigation() {
+  const navigation = Reflect.get(window, "navigation");
+  return isNavigationLike(navigation) ? navigation : null;
+}
+function shouldInterceptNavigationForAgentPreview() {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  if (window.parent === window) {
+    return false;
+  }
+  return new URLSearchParams(window.location.search).get("__reploAgentPreview") === "1";
+}
+function urlLeavesSandbox(rawUrl) {
+  try {
+    const resolved = typeof rawUrl === "string" ? new URL(rawUrl, window.location.href) : new URL(rawUrl.href, window.location.href);
+    return resolved.origin !== window.location.origin;
+  } catch {
+    return null;
+  }
+}
+function LinkInterceptor() {
+  useEffect(() => {
+    if (!shouldInterceptNavigationForAgentPreview()) {
+      return;
+    }
+    const originalWindowOpen = window.open;
+    const originalPushState = history.pushState;
+    const originalReplaceState = history.replaceState;
+    const navigation = getWindowNavigation();
+    window.open = function(url, target, features) {
+      if (url !== void 0 && url !== "" && urlLeavesSandbox(url) === true) {
+        return null;
+      }
+      return originalWindowOpen.call(window, url, target, features);
+    };
+    history.pushState = function(state, unused, url) {
+      if (url && urlLeavesSandbox(url) === true) {
+        return;
+      }
+      return originalPushState.call(history, state, unused, url);
+    };
+    history.replaceState = function(state, unused, url) {
+      if (url && urlLeavesSandbox(url) === true) {
+        return;
+      }
+      return originalReplaceState.call(history, state, unused, url);
+    };
+    const handleNavigate = (event) => {
+      const destinationUrl = event.destination?.url;
+      if (destinationUrl === void 0 || destinationUrl === "" || urlLeavesSandbox(destinationUrl) !== true) {
+        return;
+      }
+      event.preventDefault?.();
+    };
+    const handleClick = (event) => {
+      if (displayModeStore.getSnapshot() === "selection") {
+        return;
+      }
+      const target = event.target;
+      if (!(target instanceof Element)) {
+        return;
+      }
+      const link = target.closest("a[href]");
+      if (!(link instanceof HTMLAnchorElement)) {
+        return;
+      }
+      const href = link.getAttribute("href");
+      if (!href) {
+        return;
+      }
+      if (href.startsWith("#")) {
+        return;
+      }
+      const linkTarget = link.getAttribute("target");
+      if (linkTarget && linkTarget !== "_self") {
+        blockNavigation(event);
+        return;
+      }
+      if (urlLeavesSandbox(href) === true) {
+        blockNavigation(event);
+        return;
+      }
+      event.preventDefault();
+      let route;
+      try {
+        route = new URL(href, window.location.href).pathname;
+      } catch {
+        route = href;
+      }
+      window.parent.postMessage(
+        {
+          type: "replo:navigate",
+          route
+        },
+        "*"
+      );
+    };
+    navigation?.addEventListener("navigate", handleNavigate);
+    document.addEventListener("click", handleClick, true);
+    return () => {
+      window.open = originalWindowOpen;
+      history.pushState = originalPushState;
+      history.replaceState = originalReplaceState;
+      navigation?.removeEventListener("navigate", handleNavigate);
+      document.removeEventListener("click", handleClick, true);
+    };
+  }, []);
+  return null;
+}
+export {
+  LinkInterceptor as default
+};
+//# sourceMappingURL=LinkInterceptor.js.map

package/LinkInterceptor.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../LinkInterceptor.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport { useEffect } from \"react\";\n\nimport { displayModeStore } from \"./select-mode/displayModeStore\";\n\ntype NavigationNavigateEvent = {\n  destination?: { url?: string };\n  preventDefault?: () => void;\n};\n\ntype NavigationLike = {\n  addEventListener: (\n    type: \"navigate\",\n    listener: (event: NavigationNavigateEvent) => void,\n  ) => void;\n  removeEventListener: (\n    type: \"navigate\",\n    listener: (event: NavigationNavigateEvent) => void,\n  ) => void;\n};\n\nfunction blockNavigation(event: MouseEvent) {\n  event.preventDefault();\n  event.stopPropagation();\n  event.stopImmediatePropagation();\n}\n\nfunction isNavigationLike(value: unknown): value is NavigationLike {\n  if (typeof value !== \"object\" || value === null) {\n    return false;\n  }\n\n  return (\n    typeof Reflect.get(value, \"addEventListener\") === \"function\" &&\n    typeof Reflect.get(value, \"removeEventListener\") === \"function\"\n  );\n}\n\nfunction getWindowNavigation() {\n  const navigation = Reflect.get(window, \"navigation\");\n  return isNavigationLike(navigation) ? navigation : null;\n}\n\nfunction shouldInterceptNavigationForAgentPreview() {\n  if (typeof window === \"undefined\") {\n    return false;\n  }\n\n  if (window.parent === window) {\n    return false;\n  }\n\n  return (\n    new URLSearchParams(window.location.search).get(\"__reploAgentPreview\") ===\n    \"1\"\n  );\n}\n\nfunction urlLeavesSandbox(rawUrl: string | URL): boolean | null {\n  try {\n    const resolved =\n      typeof rawUrl === \"string\"\n        ? new URL(rawUrl, window.location.href)\n        : new URL(rawUrl.href, window.location.href);\n    return resolved.origin !== window.location.origin;\n  } catch {\n    return null;\n  }\n}\n\nexport default function LinkInterceptor() {\n  // eslint-disable-next-line replo/no-use-effect -- Browser navigation APIs must be patched at client runtime and restored when the interceptor unmounts.\n  useEffect(() => {\n    if (!shouldInterceptNavigationForAgentPreview()) {\n      return;\n    }\n\n    const originalWindowOpen = window.open;\n    const originalPushState = history.pushState;\n    const originalReplaceState = history.replaceState;\n    const navigation = getWindowNavigation();\n\n    window.open = function (\n      url?: string | URL,\n      target?: string,\n      features?: string,\n    ) {\n      if (url !== undefined && url !== \"\" && urlLeavesSandbox(url) === true) {\n        return null;\n      }\n\n      return originalWindowOpen.call(window, url, target, features);\n    };\n\n    history.pushState = function (\n      state: Parameters<History[\"pushState\"]>[0],\n      unused: string,\n      url?: string | URL | null,\n    ) {\n      if (url && urlLeavesSandbox(url) === true) {\n        return;\n      }\n\n      return originalPushState.call(history, state, unused, url);\n    };\n\n    history.replaceState = function (\n      state: Parameters<History[\"replaceState\"]>[0],\n      unused: string,\n      url?: string | URL | null,\n    ) {\n      if (url && urlLeavesSandbox(url) === true) {\n        return;\n      }\n\n      return originalReplaceState.call(history, state, unused, url);\n    };\n\n    const handleNavigate = (event: NavigationNavigateEvent) => {\n      const destinationUrl = event.destination?.url;\n      if (\n        destinationUrl === undefined ||\n        destinationUrl === \"\" ||\n        urlLeavesSandbox(destinationUrl) !== true\n      ) {\n        return;\n      }\n\n      event.preventDefault?.();\n    };\n\n    const handleClick = (event: MouseEvent) => {\n      // While select mode is active a link click must select the element, not\n      // navigate. `useSelectionInteractions` prevents the default nav, but this\n      // sibling capture listener would still post `replo:navigate` and move the\n      // preview off the page \u2014 `stopPropagation` there can't suppress a\n      // listener on the same node, so we bail out here explicitly.\n      if (displayModeStore.getSnapshot() === \"selection\") {\n        return;\n      }\n\n      const target = event.target;\n\n      if (!(target instanceof Element)) {\n        return;\n      }\n\n      const link = target.closest(\"a[href]\");\n\n      if (!(link instanceof HTMLAnchorElement)) {\n        return;\n      }\n\n      const href = link.getAttribute(\"href\");\n      if (!href) {\n        return;\n      }\n\n      if (href.startsWith(\"#\")) {\n        return;\n      }\n\n      const linkTarget = link.getAttribute(\"target\");\n      if (linkTarget && linkTarget !== \"_self\") {\n        blockNavigation(event);\n        return;\n      }\n\n      if (urlLeavesSandbox(href) === true) {\n        blockNavigation(event);\n        return;\n      }\n\n      event.preventDefault();\n\n      let route: string;\n      try {\n        route = new URL(href, window.location.href).pathname;\n      } catch {\n        route = href;\n      }\n\n      window.parent.postMessage(\n        {\n          type: \"replo:navigate\",\n          route,\n        },\n        \"*\",\n      );\n    };\n\n    navigation?.addEventListener(\"navigate\", handleNavigate);\n    document.addEventListener(\"click\", handleClick, true);\n\n    return () => {\n      window.open = originalWindowOpen;\n      history.pushState = originalPushState;\n      history.replaceState = originalReplaceState;\n      navigation?.removeEventListener(\"navigate\", handleNavigate);\n      document.removeEventListener(\"click\", handleClick, true);\n    };\n  }, []);\n\n  return null;\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/NextErrorReporter.d.ts

@@ -0,0 +1 @@
+export declare function NextErrorReporter(): null;

package/NextErrorReporter.js

@@ -0,0 +1,92 @@
+"use client";
+import * as React from "react";
+const RED_CHROME_SELECTOR = '[data-next-badge][data-error="true"], [data-nextjs-dialog]';
+const BLOCKING_ERROR_SELECTOR = "[data-nextjs-dialog]";
+const STATUS_LATCH_MS = 500;
+function NextErrorReporter() {
+  React.useEffect(() => {
+    let lastStatus = null;
+    let shadowObserver = null;
+    let observedRoot = null;
+    let pendingPost = null;
+    const postNow = (status) => {
+      if (status === lastStatus) {
+        return;
+      }
+      lastStatus = status;
+      window.parent.postMessage(
+        {
+          type: "replo:preview:status",
+          status,
+          route: window.location.pathname
+        },
+        "*"
+      );
+    };
+    const post = (status) => {
+      if (pendingPost) {
+        if (pendingPost.status === status) {
+          return;
+        }
+        window.clearTimeout(pendingPost.timeoutId);
+        pendingPost = null;
+      }
+      if (status === lastStatus) {
+        return;
+      }
+      if (lastStatus === null && status === "ok") {
+        postNow("ok");
+        return;
+      }
+      const timeoutId = window.setTimeout(() => {
+        pendingPost = null;
+        postNow(status);
+      }, STATUS_LATCH_MS);
+      pendingPost = { status, timeoutId };
+    };
+    const syncOverlayState = () => {
+      const portal = document.getElementsByTagName("nextjs-portal")[0];
+      if (!(portal instanceof HTMLElement)) {
+        post("ok");
+        return;
+      }
+      const root = portal.shadowRoot;
+      if (root && root !== observedRoot) {
+        shadowObserver?.disconnect();
+        shadowObserver = new MutationObserver(syncOverlayState);
+        shadowObserver.observe(root, {
+          childList: true,
+          subtree: true,
+          attributes: true,
+          attributeFilter: ["data-error"]
+        });
+        observedRoot = root;
+      }
+      portal.style.display = portal.shadowRoot?.querySelector(
+        RED_CHROME_SELECTOR
+      ) ? "none" : "";
+      const hasBlockingError = Boolean(
+        portal.shadowRoot?.querySelector(BLOCKING_ERROR_SELECTOR)
+      );
+      post(hasBlockingError ? "error" : "ok");
+    };
+    const lightObserver = new MutationObserver(syncOverlayState);
+    lightObserver.observe(document.documentElement, {
+      childList: true,
+      subtree: true
+    });
+    syncOverlayState();
+    return () => {
+      lightObserver.disconnect();
+      shadowObserver?.disconnect();
+      if (pendingPost) {
+        window.clearTimeout(pendingPost.timeoutId);
+      }
+    };
+  }, []);
+  return null;
+}
+export {
+  NextErrorReporter
+};
+//# sourceMappingURL=NextErrorReporter.js.map

package/NextErrorReporter.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../NextErrorReporter.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport * as React from \"react\";\n\n/**\n * NOTE (Max, 2026-06-10): This component sends post messages to its embedder (website-builder miniapp)\n * so that it can render a loading / error UI if there's an error on this page.\n *\n * Ideally, we wouldn't need any update to the sandbox runtime to achieve this: the miniapp would just read the\n * iframe's content and detect whenever there's a nextjs error overlay.\n * But the preview runs cross-origin from the editor, so the editor can't read the iframe's\n * DOM (browser security).\n *\n * This component has observers that detect when the nextjs error overlay appears or\n * disappears, and sends a post message with a status:\n *  - `status`: \"error\" while Next's dev overlay opens its blocking error dialog\n *     (a real page break \u2014 see the selectors below for why the badge's issue\n *     count is deliberately NOT used: it also counts recovered loader misses)\n *  - `status`: \"ok\" otherwise. Cleared by Fast Refresh on a fix, so it's also the\n *     recovery signal (agent fixed the error, so it's the error -> ok transition)\n *\n * It also hides Next's dev error overlay (`<nextjs-portal>`) at the source the\n * instant an error appears, so the red bubble never paints \u2014 the MutationObserver\n * callback runs as a microtask before paint. `data-error` stays queryable while\n * hidden, so detection is unaffected;\n *\n * The overlay lives in `<nextjs-portal>`'s shadow root, which Next can recreate,\n * so we re-attach the shadow observer whenever it hands us a new root. No polling.\n *\n * This must be mounted OUTSIDE the error boundary (see ReploProvider) so it keeps\n * reporting while the boundary is caught (and showing its neutral cover).\n *\n * I'm unsatisfied with this approach: observing for the nextjs-portal is brittle and ugly.\n * Ideally, the ClientErrorBoundary, which hooks into the render cycle, in componentDidCatch, would\n * just report a post message to the miniapp. I prototyped that, the error detection works\n * great (ok -> error transition).\n * But the error -> ok transition doesn't work for Server components (it only does for Client\n * components). Here's a slack thread with me <> Gabe on it:\n * https://replohq.slack.com/archives/C03AACVP08Y/p1781154057832689?thread_ts=1781029224.564489&cid=C03AACVP08Y.\n */\n// NOTE (Max, 2026-08-04): <nextjs-portal> surfaces two very different things,\n// and only one of them means the page is actually broken:\n//   - the dev-tools badge (`[data-next-badge][data-error=\"true\"]`) lights for\n//     EVERY collected issue, including a server-side loader error that React\n//     already recovered from by streaming the LoaderErrorBoundary fallback. That\n//     is a graceful, recoverable miss (product unpublished, deleted collection,\n//     \u2026) \u2014 the page renders fine \u2014 and it must NOT be reported as a page error.\n//   - the error overlay dialog (`[data-nextjs-dialog]`) only mounts when Next\n//     auto-opens the overlay for a genuinely blocking error: the app shell's\n//     error boundary catching an uncaught render crash, an unrecoverable SSR\n//     error (missing root tags), or a build error. Next never auto-opens the\n//     dialog for a recovered error. Verified against next@16.1.7 (the version\n//     the platform SDK packages and most templates pin) and next@15.3.8: the sole auto-open\n//     is AppDevOverlayErrorBoundary's componentDidCatch -> openErrorOverlay,\n//     i.e. the shell boundary, which a nested LoaderErrorBoundary never reaches\n//     (a caught loader miss only increments the badge count). The badge count\n//     opens the dialog only on an explicit user click.\n// So the open dialog \u2014 not the badge's issue count \u2014 is the fatal-vs-recoverable\n// discriminator. Keying off the badge reported recoverable loader misses as\n// full-page errors, blanking a preview that had actually rendered its fallback.\n//\n// We still *hide* the whole portal whenever Next paints red chrome (the errored\n// badge OR the dialog) so no dev overlay bleeds into the preview \u2014 a recovered\n// loader miss shouldn't flash a red dot either. Only the blocking dialog is\n// reported upward as a page error.\nconst RED_CHROME_SELECTOR =\n  '[data-next-badge][data-error=\"true\"], [data-nextjs-dialog]';\nconst BLOCKING_ERROR_SELECTOR = \"[data-nextjs-dialog]\";\n\n// HMR portal churn flips the overlay for milliseconds in both directions; only a state that persists this long is real.\nconst STATUS_LATCH_MS = 500;\n\ntype PreviewStatus = \"ok\" | \"error\";\n\nexport function NextErrorReporter() {\n  // eslint-disable-next-line replo/no-use-effect -- Observes Next's dev error overlay (a shadow-DOM node outside React's tree) and relays its state to the cross-origin embedder. No React alternative applies.\n  React.useEffect(() => {\n    let lastStatus: PreviewStatus | null = null;\n    let shadowObserver: MutationObserver | null = null;\n    let observedRoot: ShadowRoot | null = null;\n    let pendingPost: { status: PreviewStatus; timeoutId: number } | null = null;\n\n    const postNow = (status: PreviewStatus) => {\n      if (status === lastStatus) {\n        return;\n      }\n      lastStatus = status;\n      window.parent.postMessage(\n        {\n          type: \"replo:preview:status\",\n          status,\n          route: window.location.pathname,\n        },\n        \"*\",\n      );\n    };\n\n    // Latch every transition (the opposite observation cancels a pending one) \u2014 a false error <-> ok flip makes the editor reload the preview. Only the initial \"ok\" posts immediately, as the readiness signal.\n    const post = (status: PreviewStatus) => {\n      if (pendingPost) {\n        if (pendingPost.status === status) {\n          return;\n        }\n        window.clearTimeout(pendingPost.timeoutId);\n        pendingPost = null;\n      }\n      if (status === lastStatus) {\n        return;\n      }\n      if (lastStatus === null && status === \"ok\") {\n        postNow(\"ok\");\n        return;\n      }\n      const timeoutId = window.setTimeout(() => {\n        pendingPost = null;\n        postNow(status);\n      }, STATUS_LATCH_MS);\n      pendingPost = { status, timeoutId };\n    };\n\n    // NOTE (Max, 2026-06-10): Reads the dev overlay's current error state and\n    // propagates it \u2014 re-attach the shadow observer to the live root, hide the\n    // portal while erroring, and post ok/error up to the editor. Runs on init and\n    // on every observed DOM mutation.\n    const syncOverlayState = () => {\n      const portal = document.getElementsByTagName(\"nextjs-portal\")[0];\n      if (!(portal instanceof HTMLElement)) {\n        post(\"ok\");\n        return;\n      }\n      // NOTE (Max, 2026-06-10): Re-attach whenever Next hands us a fresh shadow\n      // root, else we'd keep watching a detached one after the overlay is\n      // recreated.\n      const root = portal.shadowRoot;\n      if (root && root !== observedRoot) {\n        shadowObserver?.disconnect();\n        shadowObserver = new MutationObserver(syncOverlayState);\n        shadowObserver.observe(root, {\n          childList: true,\n          subtree: true,\n          attributes: true,\n          attributeFilter: [\"data-error\"],\n        });\n        observedRoot = root;\n      }\n      // NOTE (Max, 2026-06-10): Hide the dev overlay at the source so the red\n      // bubble never paints \u2014 for any red chrome, including a recovered miss's\n      // errored badge.\n      portal.style.display = portal.shadowRoot?.querySelector(\n        RED_CHROME_SELECTOR,\n      )\n        ? \"none\"\n        : \"\";\n      // Only the blocking overlay dialog means the page actually broke; the\n      // badge's issue count also covers recovered loader misses (see selectors).\n      const hasBlockingError = Boolean(\n        portal.shadowRoot?.querySelector(BLOCKING_ERROR_SELECTOR),\n      );\n      post(hasBlockingError ? \"error\" : \"ok\");\n    };\n\n    // NOTE (Max, 2026-06-10): Catches the portal being added/removed in the light\n    // DOM; the re-attached shadow observer catches in-overlay changes.\n    const lightObserver = new MutationObserver(syncOverlayState);\n    lightObserver.observe(document.documentElement, {\n      childList: true,\n      subtree: true,\n    });\n    syncOverlayState();\n\n    return () => {\n      lightObserver.disconnect();\n      shadowObserver?.disconnect();\n      if (pendingPost) {\n        window.clearTimeout(pendingPost.timeoutId);\n      }\n    };\n  }, []);\n\n  return null;\n}\n"],
+  "mappings": ";AAEA,YAAY,WAAW;AA+DvB,MAAM,sBACJ;AACF,MAAM,0BAA0B;AAGhC,MAAM,kBAAkB;AAIjB,SAAS,oBAAoB;AAElC,QAAM,UAAU,MAAM;AACpB,QAAI,aAAmC;AACvC,QAAI,iBAA0C;AAC9C,QAAI,eAAkC;AACtC,QAAI,cAAmE;AAEvE,UAAM,UAAU,CAAC,WAA0B;AACzC,UAAI,WAAW,YAAY;AACzB;AAAA,MACF;AACA,mBAAa;AACb,aAAO,OAAO;AAAA,QACZ;AAAA,UACE,MAAM;AAAA,UACN;AAAA,UACA,OAAO,OAAO,SAAS;AAAA,QACzB;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAGA,UAAM,OAAO,CAAC,WAA0B;AACtC,UAAI,aAAa;AACf,YAAI,YAAY,WAAW,QAAQ;AACjC;AAAA,QACF;AACA,eAAO,aAAa,YAAY,SAAS;AACzC,sBAAc;AAAA,MAChB;AACA,UAAI,WAAW,YAAY;AACzB;AAAA,MACF;AACA,UAAI,eAAe,QAAQ,WAAW,MAAM;AAC1C,gBAAQ,IAAI;AACZ;AAAA,MACF;AACA,YAAM,YAAY,OAAO,WAAW,MAAM;AACxC,sBAAc;AACd,gBAAQ,MAAM;AAAA,MAChB,GAAG,eAAe;AAClB,oBAAc,EAAE,QAAQ,UAAU;AAAA,IACpC;AAMA,UAAM,mBAAmB,MAAM;AAC7B,YAAM,SAAS,SAAS,qBAAqB,eAAe,EAAE,CAAC;AAC/D,UAAI,EAAE,kBAAkB,cAAc;AACpC,aAAK,IAAI;AACT;AAAA,MACF;AAIA,YAAM,OAAO,OAAO;AACpB,UAAI,QAAQ,SAAS,cAAc;AACjC,wBAAgB,WAAW;AAC3B,yBAAiB,IAAI,iBAAiB,gBAAgB;AACtD,uBAAe,QAAQ,MAAM;AAAA,UAC3B,WAAW;AAAA,UACX,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,iBAAiB,CAAC,YAAY;AAAA,QAChC,CAAC;AACD,uBAAe;AAAA,MACjB;AAIA,aAAO,MAAM,UAAU,OAAO,YAAY;AAAA,QACxC;AAAA,MACF,IACI,SACA;AAGJ,YAAM,mBAAmB;AAAA,QACvB,OAAO,YAAY,cAAc,uBAAuB;AAAA,MAC1D;AACA,WAAK,mBAAmB,UAAU,IAAI;AAAA,IACxC;AAIA,UAAM,gBAAgB,IAAI,iBAAiB,gBAAgB;AAC3D,kBAAc,QAAQ,SAAS,iBAAiB;AAAA,MAC9C,WAAW;AAAA,MACX,SAAS;AAAA,IACX,CAAC;AACD,qBAAiB;AAEjB,WAAO,MAAM;AACX,oBAAc,WAAW;AACzB,sBAAgB,WAAW;AAC3B,UAAI,aAAa;AACf,eAAO,aAAa,YAAY,SAAS;AAAA,MAC3C;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;",
+  "names": []
+}

package/_vendor/replo-utils/lib/crypto.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Web Crypto helpers shared across runtime targets (Cloudflare Workers, Node
+ * 19+, browsers). Built on `crypto.subtle` so the same implementation runs
+ * inside Workers without a Node-only `node:crypto` import.
+ */
+export declare function bytesToBase64Url(bytes: Uint8Array): string;
+export declare function base64UrlToBytes(input: string): Uint8Array;
+export declare function randomBase64Url(byteLength: number): string;
+/**
+ * Prefer this over the global `crypto.randomUUID()`, which is secure-context-only
+ * and therefore undefined over plain `http://`. `uuid`'s v4 is backed by
+ * `crypto.getRandomValues`, which carries no such restriction.
+ */
+export declare function randomUUID(): string;
+/**
+ * Returns the SHA-256 of `input` as a 64-char lowercase hex string.
+ *
+ * Used for storing opaque secrets (e.g. public API tokens) where we want
+ * constant-length hex output suitable for a `VARCHAR(64)` column with a
+ * unique index.
+ */
+export declare function sha256Hex(input: string): Promise<string>;
+export declare function constantTimeEqual({ left, right, }: {
+    left: Uint8Array;
+    right: Uint8Array;
+}): boolean;
+export declare function getHmacSha256Hex({ rawBody, signingKey, }: {
+    rawBody: string;
+    signingKey: string;
+}): Promise<string>;

package/_vendor/replo-utils/lib/errors.d.ts

@@ -0,0 +1,83 @@
+type ValueOfType<ObjectType> = ObjectType[keyof ObjectType];
+/**
+ * Mostly taken from
+ * https://gist.githubusercontent.com/scokmen/f813c904ef79022e84ab2409574d1b45/raw/cd8709a2fccb005bb53e9bfb2461e07d40b4e8d8/HttpStatusCode.ts
+ */
+export declare const HTTP_STATUS_CODES: {
+    readonly CONTINUE: 100;
+    readonly SWITCHING_PROTOCOLS: 101;
+    readonly PROCESSING: 102;
+    readonly OK: 200;
+    readonly CREATED: 201;
+    readonly ACCEPTED: 202;
+    readonly NON_AUTHORITATIVE_INFORMATION: 203;
+    readonly NO_CONTENT: 204;
+    readonly RESET_CONTENT: 205;
+    readonly PARTIAL_CONTENT: 206;
+    readonly MULTI_STATUS: 207;
+    readonly ALREADY_REPORTED: 208;
+    readonly IM_USED: 226;
+    readonly MULTIPLE_CHOICES: 300;
+    readonly MOVED_PERMANENTLY: 301;
+    readonly FOUND: 302;
+    readonly SEE_OTHER: 303;
+    readonly NOT_MODIFIED: 304;
+    readonly USE_PROXY: 305;
+    readonly SWITCH_PROXY: 306;
+    readonly TEMPORARY_REDIRECT: 307;
+    readonly PERMANENT_REDIRECT: 308;
+    readonly BAD_REQUEST: 400;
+    readonly UNAUTHORIZED: 401;
+    readonly PAYMENT_REQUIRED: 402;
+    readonly FORBIDDEN: 403;
+    readonly NOT_FOUND: 404;
+    readonly METHOD_NOT_ALLOWED: 405;
+    readonly NOT_ACCEPTABLE: 406;
+    readonly PROXY_AUTHENTICATION_REQUIRED: 407;
+    readonly REQUEST_TIMEOUT: 408;
+    readonly CONFLICT: 409;
+    readonly GONE: 410;
+    readonly LENGTH_REQUIRED: 411;
+    readonly PRECONDITION_FAILED: 412;
+    readonly PAYLOAD_TOO_LARGE: 413;
+    readonly URI_TOO_LONG: 414;
+    readonly UNSUPPORTED_MEDIA_TYPE: 415;
+    readonly RANGE_NOT_SATISFIABLE: 416;
+    readonly EXPECTATION_FAILED: 417;
+    readonly I_AM_A_TEAPOT: 418;
+    readonly MISDIRECTED_REQUEST: 421;
+    readonly UNPROCESSABLE_ENTITY: 422;
+    readonly LOCKED: 423;
+    readonly FAILED_DEPENDENCY: 424;
+    readonly UPGRADE_REQUIRED: 426;
+    readonly PRECONDITION_REQUIRED: 428;
+    readonly TOO_MANY_REQUESTS: 429;
+    readonly REQUEST_HEADER_FIELDS_TOO_LARGE: 431;
+    readonly UNAVAILABLE_FOR_LEGAL_REASONS: 451;
+    readonly INTERNAL_SERVER_ERROR: 500;
+    readonly NOT_IMPLEMENTED: 501;
+    readonly BAD_GATEWAY: 502;
+    readonly SERVICE_UNAVAILABLE: 503;
+    readonly GATEWAY_TIMEOUT: 504;
+    readonly HTTP_VERSION_NOT_SUPPORTED: 505;
+    readonly VARIANT_ALSO_NEGOTIATES: 506;
+    readonly INSUFFICIENT_STORAGE: 507;
+    readonly LOOP_DETECTED: 508;
+    readonly NOT_EXTENDED: 510;
+    readonly NETWORK_AUTHENTICATION_REQUIRED: 511;
+    readonly UPSTREAM_WEBSERVER_ERROR: 520;
+};
+export type HttpStatusCode = ValueOfType<typeof HTTP_STATUS_CODES>;
+/**
+ * Checks if an error message indicates a network error (e.g., connectivity issues,
+ * request timeouts, DNS failures). These errors typically don't need to be tracked
+ * in error monitoring systems like Sentry since they're user-side connectivity issues.
+ */
+export declare function isNetworkErrorMessage(message: string): boolean;
+/**
+ * Extracts a human-readable message from an unknown caught value. If the value
+ * is an Error, returns its message; otherwise falls back to the provided
+ * fallback string or `String(error)`.
+ */
+export declare function getErrorMessage(error: unknown, fallback?: string): string;
+export {};

package/_vendor/replo-utils/lib/fonts.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Slugified family name, matching how `fontNameToCssVariable` derives a CSS var
+ * (e.g. "DM Sans" → "dm-sans"), so a `--font-<slug>` var round-trips back to a
+ * catalog family.
+ */
+export declare function slugifyFontFamily(family: string): string;
+/**
+ * "DM Sans" → "--font-dm-sans". The CSS variable a `next/font` import exposes.
+ */
+export declare function fontNameToCssVariable(fontName: string): string;
+/**
+ * Wrap a family in single quotes for `font-family` when it contains whitespace
+ * (e.g. `Open Sans` → `'Open Sans'`); single-word families pass through.
+ */
+export declare function quoteFontFamily(family: string): string;
+/**
+ * "DM Sans" → "dmSans". The JS const name for a `next/font` declaration.
+ */
+export declare function fontNameToVariableName(fontName: string): string;
+/**
+ * Google Fonts CSS2 stylesheet URL for a family at the given weights (defaulting
+ * to 400), with `display=swap`.
+ */
+export declare function buildGoogleFontsCssUrl(family: string, weights?: number[]): string;
+/**
+ * "Brand Sans-Bold.woff2" → { family: "Brand Sans Bold", mimeType: "font/woff2" }.
+ * The family is derived from the filename since Bedrock assets don't store one.
+ */
+export declare function describeFontFile(fileName: string): {
+    family: string;
+    mimeType: string;
+};
+/**
+ * The `format(...)` keyword for an @font-face src, from a font file extension
+ * (Bedrock's `find` returns `fileExtension`, not a MIME type).
+ */
+export declare function fontFormatFromExtension(extension: string): string;
+/** The `format(...)` keyword for an @font-face src, from a font MIME type. */
+export declare function fontFormatFromMimeType(mimeType: string): string;
+/**
+ * The @font-face rule that makes a custom family renderable from its asset URL.
+ */
+export declare function buildFontFaceCss({ family, faceUrl, format, weight, }: {
+    family: string;
+    faceUrl: string;
+    format: string;
+    weight?: number;
+}): string;
+export declare const escapeFontFamilyName: (fontFamily: string) => string;