@replohq/sandbox-runtime 1.21.0 → 1.22.1

package/_vendor/schemas/comments.d.ts

@@ -1,4 +1,12 @@
 import * as z from "zod";
+export declare function isUuid(value: string): boolean;
+/**
+ * The thread id in a bare id or either D-23 permalink form
+ * (`…/comments/<id>`, `…/<folderId>?thread=<id>`); null when there is none.
+ */
+export declare function parseCommentThreadReference(reference: string): string | null;
+/** A comment body an agent or API caller writes: something besides whitespace. */
+export declare const commentBodyTextSchema: z.ZodString;
 export declare const commentSourceSchema: z.ZodEnum<{
     ui: "ui";
     agent: "agent";
@@ -126,7 +134,7 @@ export declare const commentTargetSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
     routePatternHint: z.ZodOptional<z.ZodString>;
     via: z.ZodOptional<z.ZodObject<{
         fileId: z.ZodUUID;
-        shareId: z.ZodString;
+        shareId: z.ZodUUID;
     }, z.core.$strip>>;
 }, z.core.$strip>, z.ZodObject<{
     kind: z.ZodLiteral<"order">;
@@ -386,7 +394,7 @@ export declare const createCommentThreadBodySchema: z.ZodObject<{
         routePatternHint: z.ZodOptional<z.ZodString>;
         via: z.ZodOptional<z.ZodObject<{
             fileId: z.ZodUUID;
-            shareId: z.ZodString;
+            shareId: z.ZodUUID;
         }, z.core.$strip>>;
     }, z.core.$strip>, z.ZodObject<{
         kind: z.ZodLiteral<"order">;
@@ -556,7 +564,7 @@ export declare const presignCommentAttachmentBodySchema: z.ZodObject<{
         routePatternHint: z.ZodOptional<z.ZodString>;
         via: z.ZodOptional<z.ZodObject<{
             fileId: z.ZodUUID;
-            shareId: z.ZodString;
+            shareId: z.ZodUUID;
         }, z.core.$strip>>;
     }, z.core.$strip>, z.ZodObject<{
         kind: z.ZodLiteral<"order">;
@@ -586,7 +594,7 @@ export declare const commitCommentAttachmentBodySchema: z.ZodObject<{
         routePatternHint: z.ZodOptional<z.ZodString>;
         via: z.ZodOptional<z.ZodObject<{
             fileId: z.ZodUUID;
-            shareId: z.ZodString;
+            shareId: z.ZodUUID;
         }, z.core.$strip>>;
     }, z.core.$strip>, z.ZodObject<{
         kind: z.ZodLiteral<"order">;

package/_vendor/schemas/commentsOverlayRpc.mjs

@@ -1,4 +1,4 @@
-import { commentAnchorSchema, displayModeSchema, commentAnchorElementSchema } from '../../chunk-NVOBD46N.mjs';
+import { commentAnchorSchema, displayModeSchema, commentAnchorElementSchema } from '../../chunk-CGRTGQO5.mjs';
 import '../../chunk-THOBCJJA.mjs';
 import '../../chunk-4ITJNSXZ.mjs';
 import '../../chunk-SKVPFN7M.mjs';

package/_vendor/schemas/selectMode.mjs

@@ -1,4 +1,4 @@
-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, selectModeVideoSchema, selectableDataPayloadSchema, selectableDataSchema, selectablePlanDataSchema, selectablePlanPayloadSchema, selectedElementSchema, transformPoint, transformRect, transformSelectableData, transformSelectedElement } from '../../chunk-NVOBD46N.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, selectModeVideoSchema, selectableDataPayloadSchema, selectableDataSchema, selectablePlanDataSchema, selectablePlanPayloadSchema, selectedElementSchema, transformPoint, transformRect, transformSelectableData, transformSelectedElement } from '../../chunk-CGRTGQO5.mjs';
 import '../../chunk-THOBCJJA.mjs';
 import '../../chunk-4ITJNSXZ.mjs';
 import '../../chunk-SKVPFN7M.mjs';

package/_vendor/schemas/selectModeIframeRpc.mjs

@@ -1,4 +1,4 @@
-import { selectModeBoundingRectSchema, selectModeTiptapActiveMarksSchema, selectModeSelectionRectSchema, selectableDataSchema, selectModeHoverRectSchema, selectModeFormatCommandSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionTypeSchema, displayModeSchema, selectModeClickPositionSchema, selectedElementSchema } from '../../chunk-NVOBD46N.mjs';
+import { selectModeBoundingRectSchema, selectModeTiptapActiveMarksSchema, selectModeSelectionRectSchema, selectableDataSchema, selectModeHoverRectSchema, selectModeFormatCommandSchema, selectModeOptimisticUpdatePayloadSchema, selectModeSelectionTypeSchema, displayModeSchema, selectModeClickPositionSchema, selectedElementSchema } from '../../chunk-CGRTGQO5.mjs';
 import '../../chunk-THOBCJJA.mjs';
 import '../../chunk-4ITJNSXZ.mjs';
 import '../../chunk-SKVPFN7M.mjs';

package/buildMetadata.js

@@ -1,7 +1,7 @@
 export const BUILD_METADATA = {
   "packageName": "@replohq/sandbox-runtime",
-  "version": "1.21.0",
+  "version": "1.22.1",
   "branch": "HEAD",
-  "commit": "d5ce2185ff844319f59248b9da6641bf96f4c0a2",
-  "builtAt": "2026-10-29T04:07:57.675Z"
+  "commit": "073dd1a46fae9bca92aae68286e667ef84854658",
+  "builtAt": "2026-10-30T20:41:52.402Z"
 };

package/{chunk-NVOBD46N.mjs → chunk-CGRTGQO5.mjs}

@@ -13,6 +13,9 @@ function parseSchemaOrNull(value, schema) {
   const parseResult = schema.safeParse(value);
   return parseResult.success ? parseResult.data : null;
 }
+z.string().min(1).refine((body) => body.trim().length > 0, {
+  message: "Write something before posting."
+});
 var commentSourceSchema = z.enum(["ui", "agent", "mcp", "api"]).describe("CommentSource");
 var unitIntervalSchema = z.number().min(0).max(1);
 var anchorUrlSchema = z.string().max(2048);
@@ -82,7 +85,7 @@ var commentTargetSchema = z.discriminatedUnion("kind", [
     url: anchorUrlSchema,
     locale: anchorLocaleSchema.nullish(),
     routePatternHint: anchorUrlSchema.optional(),
-    via: z.object({ fileId: z.uuid(), shareId: z.string() }).optional().describe(
+    via: z.object({ fileId: z.uuid(), shareId: z.uuid() }).optional().describe(
       "Set when the site preview is embedded in an artifact or canvas."
     )
   }),

package/comments-overlay/overlay.d.ts

@@ -4,7 +4,7 @@ import type { DisplayMode } from "../_vendor/schemas/generated/selectMode";
 import type { ElementSource } from "./capture";
 export declare const OVERLAY_Z_INDEX = 2147483645;
 export declare const HIGHLIGHT_BACKGROUND = "rgba(250, 204, 21, 0.28)";
-export declare const BADGE_SIZE_PX = 20;
+export declare const BADGE_SIZE_PX = 32;
 export declare const RERESOLVE_DEBOUNCE_MS = 250;
 export type CommentsOverlayCallbacks = {
     onAnchorPicked: (input: {

package/comments-overlay/overlay.js

@@ -4,8 +4,9 @@ import { OVERLAY_ROOT_ATTRIBUTE } from "./textQuote";
 const OVERLAY_Z_INDEX = 2147483645;
 const HIGHLIGHT_BACKGROUND = "rgba(250, 204, 21, 0.28)";
 const QUOTE_UNDERLINE = "2px solid rgba(250, 204, 21, 0.9)";
-const BADGE_SIZE_PX = 20;
+const BADGE_SIZE_PX = 32;
 const BADGE_HIT_TARGET_PX = 44;
+const BADGE_HIT_TARGET_WIDTH_PX = 64;
 const COMPACT_GUTTER_MAX_WIDTH_PX = 600;
 const RERESOLVE_DEBOUNCE_MS = 250;
 const SELECTION_PROMPT_DEBOUNCE_MS = 150;
@@ -286,16 +287,17 @@ function createCommentsOverlay(options) {
   const paintBadges = () => {
     const isCompact = window.innerWidth <= COMPACT_GUTTER_MAX_WIDTH_PX;
     const size = BADGE_HIT_TARGET_PX;
-    const maxLeft = Math.max(0, window.innerWidth - size);
+    const width = BADGE_HIT_TARGET_WIDTH_PX;
+    const maxLeft = Math.max(0, window.innerWidth - width);
     const maxTop = Math.max(0, window.innerHeight - size);
     const placed = [];
     const place = (rect) => {
-      const baseLeft = isCompact ? maxLeft : Math.max(0, Math.min(maxLeft, rect.right - size / 2));
+      const baseLeft = isCompact ? maxLeft : Math.max(0, Math.min(maxLeft, rect.right - width / 2));
       const baseTop = Math.max(0, Math.min(maxTop, rect.top - size / 2));
-      const columns = Math.ceil(maxLeft / size);
+      const columns = Math.ceil(maxLeft / width);
       const rows = Math.ceil(maxTop / size);
       for (let column = 0; column <= columns * 2; column++) {
-        const left = baseLeft + (column % 2 ? 1 : -1) * Math.ceil(column / 2) * size;
+        const left = baseLeft + (column % 2 ? 1 : -1) * Math.ceil(column / 2) * width;
         if (left < 0 || left > maxLeft) {
           continue;
         }
@@ -305,7 +307,7 @@ function createCommentsOverlay(options) {
             continue;
           }
           const collides = placed.some((slot) => {
-            return Math.abs(slot.left - left) < size && Math.abs(slot.top - top) < size;
+            return Math.abs(slot.left - left) < width && Math.abs(slot.top - top) < size;
           });
           if (!collides) {
             placed.push({ left, top });
@@ -340,7 +342,7 @@ function createCommentsOverlay(options) {
         "aria-label",
         pin.count === 1 ? "Open comment" : `Open ${pin.count} comments`
       );
-      badge.style.cssText = `position:absolute;pointer-events:auto;display:flex;align-items:center;justify-content:center;width:${size}px;height:${size}px;padding:0;margin:0;border:0;background:transparent;cursor:pointer`;
+      badge.style.cssText = `position:absolute;pointer-events:auto;display:flex;align-items:center;justify-content:center;width:${width}px;height:${size}px;padding:0;margin:0;border:0;background:transparent;cursor:pointer;outline-offset:-2px`;
       if (isCompact) {
         badge.style.justifyContent = "flex-end";
       }
@@ -348,25 +350,21 @@ function createCommentsOverlay(options) {
       badge.style.top = `${position.top}px`;
       const isActive = isFocused || pin.threadId === hoveredBadgeThreadId;
       const dot = document.createElement("span");
-      dot.style.cssText = `display:flex;align-items:center;justify-content:center;gap:3px;box-sizing:border-box;min-width:${BADGE_SIZE_PX}px;height:${BADGE_SIZE_PX}px;padding:0 ${pin.count === 1 ? 0 : 6}px;border-radius:${BADGE_SIZE_PX / 2}px;border:1px solid rgba(17,24,39,.14);background:#fff;color:#6b7280;box-shadow:0 1px 3px rgba(0,0,0,.18);font:600 11px/1 system-ui,-apple-system,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap`;
+      dot.style.cssText = `display:flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;min-width:48px;height:${BADGE_SIZE_PX}px;padding:0 6px;border-radius:8px;border:1px solid rgba(0,0,0,.12);background:#ffeb80;color:#171717;box-shadow:0 1px 3px rgba(0,0,0,.12);font:600 14px/1 system-ui,-apple-system,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap`;
       if (isCompact) {
         dot.style.marginRight = "3px";
       }
       if (isActive) {
-        dot.style.borderColor = "#f59e0b";
-        dot.style.background = "#fef3c7";
-        dot.style.color = "#b45309";
+        dot.style.borderColor = "rgba(0,0,0,.4)";
       }
       if (resolution.status === "ambiguous") {
         dot.style.borderStyle = "dashed";
       }
-      const icon = createIcon("12", "M7.9 20A9 9 0 1 0 4 16.1L2 22Z");
+      const icon = createIcon("16", "M7.9 20A9 9 0 1 0 4 16.1L2 22Z");
       icon.setAttribute("stroke-linecap", "round");
       icon.setAttribute("stroke-linejoin", "round");
       dot.append(icon);
-      if (pin.count > 1) {
-        dot.append(pin.count > 99 ? "99+" : String(pin.count));
-      }
+      dot.append(pin.count > 99 ? "99+" : String(pin.count));
       badge.append(dot);
       badge.addEventListener("click", (event) => {
         event.preventDefault();

package/next/config.js

@@ -1,4 +1,6 @@
-import { existsSync } from "fs";
+import { createHash } from "crypto";
+import { existsSync, readFileSync } from "fs";
+import { createRequire } from "module";
 import path from "path";
 const DEFAULT_PAGE_EXTENSIONS = ["tsx", "ts", "jsx", "js"];
 const DEVELOPMENT_ONLY_PAGE_EXTENSIONS = ["dev.jsx", "dev.tsx"];
@@ -6,6 +8,33 @@ const BUILD_ONLY_PAGE_EXTENSIONS = ["published.tsx"];
 const PUBLISH_TSCONFIG_FILENAME = "tsconfig.publish.json";
 const PLATFORM_DEVICE_SIZES = [640, 828, 1080, 1200, 1920, 2048, 3840];
 const PLATFORM_IMAGE_SIZES = [32, 48, 96, 128, 256, 384];
+const VETTED_NEXT_POLYFILL_MODULE_SHA256 = "94c8008b70e41ac5b0360fd6f35ea7a59c20c6927aca7731ef8c6a3c26b9cddf";
+function getPolyfillAlias() {
+  try {
+    const requireFromSite = createRequire(
+      path.join(process.cwd(), "package.json")
+    );
+    const source = readFileSync(
+      path.join(
+        path.dirname(requireFromSite.resolve("next/package.json")),
+        "dist/build/polyfills/polyfill-module.js"
+      )
+    );
+    requireFromSite.resolve("@replohq/sdk/next/polyfill-module");
+    if (createHash("sha256").update(source).digest("hex") === VETTED_NEXT_POLYFILL_MODULE_SHA256) {
+      return {
+        "../build/polyfills/polyfill-module": {
+          browser: "@replohq/sdk/next/polyfill-module"
+        }
+      };
+    }
+  } catch {
+  }
+  console.warn(
+    "[@replohq/sandbox-runtime] Skipped the Next.js polyfill alias, so Next's own polyfills ship. Either the installed @replohq/sdk has no next/polyfill-module (upgrade it), or next/dist/build/polyfills/polyfill-module.js is missing or differs from the vetted version (re-vet the polyfill list and update VETTED_NEXT_POLYFILL_MODULE_SHA256 in @replohq/sandbox-runtime/next/config)."
+  );
+  return {};
+}
 function getPageExtensions(configuredExtensions) {
   const baseExtensions = (configuredExtensions ?? DEFAULT_PAGE_EXTENSIONS).filter((extension) => {
     return !DEVELOPMENT_ONLY_PAGE_EXTENSIONS.includes(extension) && !BUILD_ONLY_PAGE_EXTENSIONS.includes(extension);
@@ -24,6 +53,13 @@ function withComponentPreviewPageExtension(config) {
     ...config,
     pageExtensions: getPageExtensions(config.pageExtensions),
     typescript: getTypescriptConfig(config.typescript),
+    turbopack: {
+      ...config.turbopack,
+      resolveAlias: {
+        ...getPolyfillAlias(),
+        ...config.turbopack?.resolveAlias
+      }
+    },
     images: {
       ...config.images,
       deviceSizes: config.images?.deviceSizes ?? PLATFORM_DEVICE_SIZES,

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@replohq/sandbox-runtime",
-  "version": "1.21.0",
+  "version": "1.22.1",
   "reploBuild": {
     "packageName": "@replohq/sandbox-runtime",
-    "version": "1.21.0",
+    "version": "1.22.1",
     "branch": "HEAD",
-    "commit": "d5ce2185ff844319f59248b9da6641bf96f4c0a2",
-    "builtAt": "2026-10-29T04:07:57.675Z"
+    "commit": "073dd1a46fae9bca92aae68286e667ef84854658",
+    "builtAt": "2026-10-30T20:41:52.402Z"
   },
   "description": "Replo sandbox runtime — editor integration for agent-built Next.js sites.",
   "license": "SEE LICENSE IN LICENSE",