@decocms/nextjs 7.31.1 → 7.31.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/nextjs",
-  "version": "7.31.1",
+  "version": "7.31.2",
   "type": "module",
   "engines": {
     "node": ">=24"
@@ -29,8 +29,8 @@
     "lint:unused": "knip"
   },
   "dependencies": {
-    "@decocms/blocks": "7.31.1",
-    "@decocms/blocks-admin": "7.31.1"
+    "@decocms/blocks": "7.31.2",
+    "@decocms/blocks-admin": "7.31.2"
   },
   "peerDependencies": {
     "next": ">=15.0.0",

package/src/DraftPreviewBadge.render.test.tsx

@@ -1,5 +1,5 @@
 import { renderToString } from "react-dom/server";
-import { describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it } from "vitest";
 
 import { DraftPreviewBadge } from "./DraftPreviewBadge";
 
@@ -13,4 +13,20 @@ describe("DraftPreviewBadge (render)", () => {
     const html = renderToString(<DraftPreviewBadge pointer="fila.vtex.app@v1" />);
     expect(html).toContain("data:image/png;base64,");
   });
+
+  describe("embedded in an iframe", () => {
+    const realTop = window.top;
+    afterEach(() => {
+      Object.defineProperty(window, "top", {
+        value: realTop,
+        configurable: true,
+      });
+    });
+
+    it("renders nothing — Studio's own preview surface already has its own chrome", () => {
+      Object.defineProperty(window, "top", { value: {}, configurable: true });
+      const html = renderToString(<DraftPreviewBadge pointer="fila.vtex.app@v1" />);
+      expect(html).toBe("");
+    });
+  });
 });

package/src/DraftPreviewBadge.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { buildExitUrl, buildShareUrl } from "./DraftPreviewBadge";
+import { buildExitUrl, buildShareUrl, isFramed } from "./DraftPreviewBadge";
 
 describe("buildShareUrl", () => {
   it("pins the exact draft version so a recipient sees the same working tree", () => {
@@ -35,3 +35,21 @@ describe("buildExitUrl", () => {
     );
   });
 });
+
+describe("isFramed", () => {
+  it("is false for a same top window — the ordinary top-level tab case", () => {
+    const win = {} as typeof window;
+    win.top = win;
+    expect(isFramed(win)).toBe(false);
+  });
+
+  it("is true when top differs — embedded in another page's iframe", () => {
+    const win = {} as typeof window;
+    win.top = {} as typeof window; // a distinct object: the parent frame
+    expect(isFramed(win)).toBe(true);
+  });
+
+  it("fails open (not framed) with no window — SSR / no hydration", () => {
+    expect(isFramed(undefined)).toBe(false);
+  });
+});

package/src/DraftPreviewBadge.tsx

@@ -15,6 +15,13 @@
  * the host site's CSS/Tailwind), and a very high z-index, so it renders the
  * same on any consumer site. Only mounted when a draft is active
  * (`DraftPreviewIndicator` gates it), so it never costs ordinary traffic.
+ *
+ * Hidden inside an iframe (`isFramed`): Studio's own preview surface embeds
+ * this exact draft render in an iframe that already has its own chrome
+ * (toolbar, version status) — floating a second "you're in preview" badge
+ * inside that frame would be redundant clutter, not a signal a reviewer
+ * needs. A reviewer following a shared preview link in their own top-level
+ * tab still sees it; only the embedded case is suppressed.
  */
 import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { DECO_MARK_DATA_URI } from "./decoMark";
@@ -49,6 +56,19 @@ export function buildExitUrl(href: string): string {
   return url.toString();
 }
 
+/**
+ * Whether this render is embedded in another page's iframe — Studio's own
+ * preview surface, primarily. `window.top !== window` is a same-origin
+ * reference comparison, so it never throws cross-origin (unlike reading a
+ * cross-origin frame's properties). No `window` (SSR, or a consumer site
+ * that never hydrates this component) reports not-framed — fails open,
+ * matching the badge's "renders the same on any consumer site" guarantee.
+ * Pure and exported for tests.
+ */
+export function isFramed(win: typeof window | undefined = globalThis.window): boolean {
+  return typeof win !== "undefined" && win.top !== win;
+}
+
 const DECO_GREEN = "#0b3d1e";
 /** Toast background — the deco lime. Text sits on it in dark green for contrast. */
 const DECO_LIME = "#d0ec1a";
@@ -137,6 +157,12 @@ export function DraftPreviewBadge({ pointer }: DraftPreviewBadgeProps) {
     }
   }, [pointer]);
 
+  // Checked inline, not cached in state behind an effect: it's a free
+  // reference compare, and computing it during render means the client's
+  // first (hydration) pass already agrees with what it will show — no
+  // post-hydration flash for the common (unframed) case.
+  if (isFramed()) return null;
+
   return (
     <div
       ref={rootRef}